Combining Sliders for Interactive Infographics #260: Challenge | Recap
Interactive sliders are a great way to get learners to touch the screen and explore relationships between two or more ...
Published 5 years ago
Version 1.0
Blog Post
Hi all! This is my first time participating in a challenge -- glad to be here! For my demo, I wanted to explore using the back-and-forth motion of the slider to mimic that movement in real life to cause an effect. This is admittedly not an infographic, but once this idea popped into my head, I had to try it. Curious for your thoughts!
Demo: https://360.articulate.com/review/content/23ca900c-1e21-4db2-9c50-eda22d169716/review
Download: https://drive.google.com/open?id=1QvbRT5rLVkGhBC0d5HbKCPptcZgRJfpW
Demo: https://360.articulate.com/review/content/23ca900c-1e21-4db2-9c50-eda22d169716/review
Download: https://drive.google.com/open?id=1QvbRT5rLVkGhBC0d5HbKCPptcZgRJfpW
- I love this! This is a great example of how to use a slider in a different way than just linear. Welcome to the challenges and I agree with Jonathan - I hope to see more from you in the next challenges :)
- Thanks Karlis! Your design inspired my entry for #261 :)
- This is a fab interaction. Love the idea.
- Thanks David!
- Welcome to the Challenges Daniel. This entry is on fire! Love it.
- It's virtually an infograph too - would only need some supporting instructions / diagrams to explain how the motion creates friction and heat. Perhaps even a heat gauge powered by the same variable that is triggering the smoke and fire animations?
It's pretty much perfect as it is though and works, for me, at a very subtle yet clever level as an infograph. Friction = heat = fire.
This from the guy that rated four Marvel superheroes on their level of radioactivity in his entry, so what do I know 😄
Looking forward to seeing more of your work in future challenges.- Hi Daniel and welcome to the challenges! I love the interaction you created, this makes a great start for what could be an infographic about surviving in the wild or camping essentials. Well done!
- I would love to know more about how you did this!
- Hi Jeni, I just posted my project file (https://drive.google.com/open?id=1QvbRT5rLVkGhBC0d5HbKCPptcZgRJfpW)
I basically used an image of a branch for the slider thumb, and then placed a static image under the slider track. Then, I created a variable to keep track of how many times the slider had been moved back and forth (every time the slider hits 2 or 8, the tracker variable is incremented by 1). Once the tracker variable hits 10, the smoke GIF appears. Once it gets to 25, the fire GIF appears. That's it! If I had more time, I would have liked to have the tracker be linked to a timer, such that the user has to move the twig slider back and forth to reach 25 within a certain timeframe. Maybe next time!
Thanks for your comment!
