Example
What’s Your Celestial Learning Persona
In this challenge, I used a listicle format inside a scroll panel to explore how the 12 zodiac signs connect to learning styles.
Each sign reveals a short, scrollable insight into how that type of learner might thrive — whether you're a curious Gemini, focused Capricorn, or imaginative Pisces.
Just scroll through the list and discover which celestial style speaks to you :)
What’s Your Celestial Learning Persona
11 Replies
Looks like the Google link has a permissions issue. Maybe not. I'm in London this week and this is the error message I get.
Error>
<Code>AccessDenied</Code>
<Message>Access denied.</Message>
<Details>We're sorry, but this service is not available in your location</Details>
</Error>
- NedimCommunity Member
Hi Tom,
I just tested the link using a VPN routing through a few different UK locations, and it worked fine every time. I also double-checked, and there are no geo-location restrictions set on my storage bucket.When you get a chance, could you try accessing the link using a different internet connection (like mobile data or another Wi-Fi)? Or if possible, try a VPN. It might be an issue specific to your ISP or IP address.
Thank you,
NedimI think it was my vpn. Nice demo
- JodiSansoneCommunity Member
Hi Nedim, I didn't have any issues with your link. It worked perfectly.
Thanks for sharing your example. Could you comment on your use of the dial? How are you triggering the movement?
- NedimCommunity Member
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.- Jayashree_RaviCommunity Member
Wow! I was wrapping my head around how the dial was moving! Thanks for sharing your idea Nedim! Great work!
- van1016Community Member
This was super cool! And spot on about Libra hahaha!
- NedimCommunity Member
Lol...I'm glad you liked it. Thank you!
- CydWalker_mwhcCommunity Member
Beautifully done and executed! I appreciate learning how you performed the magic Nedim!
- NedimCommunity Member
Thank you, CydWalker_mwhc!