Example

Nedim's avatar
Nedim
Community Member
22 days ago

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>

    • Nedim's avatar
      Nedim
      Community 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,
      Nedim

  • JodiSansone's avatar
    JodiSansone
    Community 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? 

    • Nedim's avatar
      Nedim
      Community 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_Ravi's avatar
        Jayashree_Ravi
        Community Member

        Wow! I was wrapping my head around how the dial was moving! Thanks for sharing your idea Nedim! Great work! 

  • van1016's avatar
    van1016
    Community Member

    This was super cool! And spot on about Libra hahaha! 

    • Nedim's avatar
      Nedim
      Community Member

      Lol...I'm glad you liked it. Thank you!

  • CydWalker_mwhc's avatar
    CydWalker_mwhc
    Community Member

    Beautifully done and executed! I appreciate learning how you performed the magic Nedim!

Getting Started with the E-Learning Challenges

Find practical answers to common questions about the E-Learning Challenges, a weekly event that helps you build skills, create your portfolio, and grow as an e-learning professional.