What’s Your Celestial Learning Persona

Hi Jodi,

Originally, my intention was to use a dial, but I encountered difficulties getting the dial pointer perfectly aligned with each zodiac symbol. I tried various methods and adjusted the number of stops, but despite my efforts, I couldn't get the alignment right. I probably could have found a different image, but I was determined to use the one I had, which led me to find another solution.

Instead of sticking with the dial, I decided to rotate the zodiac circle based on the currently visible text in the scroll panel. I created a circle shape and filled it with the image I wanted to use. Then, I leveraged JavaScript to rotate this circle based on which zodiac variable was set to "true" at any given moment.

In the scroll panel, I placed 12 invisible shapes over the text titles, which act as markers. These markers track when each corresponding zodiac text box scrolls into view, updating the associated variable to "true." When a specific text box, like Taurus, becomes visible in the scroll panel, the Taurus variable is set to "true", and the circle rotates to the corresponding angle. This logic is applied to each zodiac sign as it scrolls into view, dynamically adjusting the circle's position accordingly. When a text box is not in view, the associated variable is set to "false," and the text box fades out. As I scroll up or down, the next text box fades in, and the corresponding variable is set to "true."

If I had used a dial, its position or stop could have been easily adjusted with a trigger (for example, adjusting the variable Dial1 to 2 when Taurus is "true" and so on). However, I opted for a different approach, using a scroll panel instead of a text entry field or button to trigger the visibility of the text boxes. The JavaScript used primarily creates a smoother circle movement from one stop to another. I know I may have overcomplicated the process, but in the end, I was satisfied with the overall result. It took a bit more effort than initially planned, but the smooth rotation and dynamic interaction worked out as I hoped, and that made it all worth it.

I hope this explanation makes sense. Once I clean up the file, I can share it with you, including the two scripts—one for handling the rotation movement and the other for managing the scroll panel interaction, along with the scroll panel progress bar that updates as you scroll up and down.