Six Different Foods, Many Different Names
View the Example David's example comparing the size of Germany with different US states inspired this entry. I taught German for many years, and have always been fascinated by the different dialects. In this sample, you can see and hear different ways to say the names of six foods across the German-speaking world.Tale of Two Tails
About the Project Curious about what makes dogs and cats so different? 'Tale of Two Tails' reveals their unique personalities through a simple yet colorful interactive comparison. See how effective comparisons can engage learners! #ELHChallenge500 Check out the demo here. About Me Jayashree Ravi LinkedIn500th Challenge Milestone: A Special Bonus Entry
As we celebrate reaching the incredible milestone of 500 challenges, I wanted to create something special as a bonus entry. This project represents a celebration of our journey here at E-Learning Heroes and a useful resource for the e-learning community. This post doesn't fall under "Interactive Comparisons in E-Learning" but is instead a special creation to mark our 500th milestone. I want to thank DavidAnderson for his consistency and motivation throughout this journey - your challenges have pushed us all to grow as e-learning professionals! About the Project "500 E-Learning Tips at Your Fingertips" is an interactive collection of 500 unique e-learning tips. Clicking anywhere on the image reveals a random tip from this comprehensive knowledge base. The best feature of this interactive is the ability to save your favorite tips with a simple heart icon click and export them to PDF for future reference or sharing with colleagues. Implementation This interactive experience was implemented using JavaScript. The core of the project is an array of 500 carefully curated e-learning tips covering instructional design, accessibility, engagement strategies, and assessment techniques. The system uses localStorage to track which tips have been viewed, ensuring users see all 500 tips before any repeats occur. The favorites functionality allows users to build their own personalized collection of tips that can be printed in a clean, professional format. What makes this project special to me is that it combines practical utility with a celebration of our community's collective knowledge. Each tip represents a small but valuable insight that can improve our e-learning creations. I hope you find these tips both inspiring and practically useful in your own e-learning journey! Ready to explore 500 ideas? Click here to try the interactive demo and start collecting your favorite e-learning tips! About Me Jayashree Ravi Curious about more e-learning innovations? Connect with me on LinkedIn to share ideas, discuss implementation techniques, or simply chat about instructional design challenges. I'm always looking to expand my network of creative e-learning professionals! Let's connect and inspire each other with new approaches to engaging, effective learning experiences.Stop Child Abuse
Hello Heroes, This animation was originally intended for the previous challenge. However, because it holds special significance for me, I decided to share it in this landmark 500th challenge instead. The criteria for this challenge differ slightly from my initial plan, so I incorporated a data comparison feature that activates when the ELC counter reaches 500 and the 'Facts' image is clicked, ensuring alignment with the challenge requirements. This animation is dedicated to all children affected by violence in our world today. There are not many interactions for you here – only an invitation to watch until the end, enjoy a song, breathe deeply, and hold them in your thoughts. Like these balloons drifting through the clouds, may every child find peace unburdened, joy unchained, and the freedom to soar. Hope you all enjoy it as much as I did! ELC#500 - Stop Child Abuse Project Description: In this project, I leveraged the JavaScript API in Storyline alongside the Web Animations API to create dynamic, smooth animations for hot air balloons. This included continuous swaying effects with adjustable rotation and downward movement speeds for more lifelike movement. For elements like clouds and birds—which reverse direction once the ELC counter reaches 500—I utilized motion paths within Storyline for seamless transitions. The ELC counter animation was implemented using GSAP, targeting the text variable for precise control. All graphics were designed and customized in Canva. The background features a children’s chorus performing a haunting rendition of Sting’s 1987 song "Fragile" (as heard in the Adolescence TV series). Additional sound effects and music were sourced from Pixabay.Fish Pong 3
It's hard to believe it's been 8 years since I took the plunge into the E-Learning Heroes Challenges. I still recall the surprise of getting a feature for my very first challenge. Over the years, I've gathered countless stories worth sharing, but today I want to revisit the tale of a wide-eyed fish, desperately trying to escape the jaws of death. In this story, the predator is an Octopus made agile with JavaScript generated with Chat GPT. It's impressive to see how far we've come! Oh, yes, and happy to try out this new way of sharing. Link: https://360.articulate.com/review/content/5f70c4e4-9e4d-428d-a0cf-ce944a900497/reviewCompare the Size of the United States & Germany
View Demo | Learn more Description Since this week marks the end of the first full year of Articulate’s weekly challenges, I decided to go back to complete all of the ones I’d missed – and there were a lot. I still have two more to complete (almost there!) but yesterday I swung back to Challenge #1: How Would You Show Meaningful Comparisons? About me Jackie Van Nice @jackietrains BlogView Demo: Learn moreWhy Wellness Matters: Interactive Slider Comparison
View the example Description Here’s my demo for this week’s challenge. It’s an interactive graphic from a fictional employee health and wellness course. For the comparison, I focused on why wellness matters, using three bar charts and a slider to show the relationship between employee health and key business outcomes. 🎨 Design Concept I went with a darker look for this one—something a little more polished and modern. I used a background graphic and a simple, clean layout to keep the focus on the data and interaction. ⚙️ How It Works As you drag the slider, the bar charts update to show how employee health affects three areas: absenteeism, performance, and employer cost. Lower employee health = higher absenteeism and cost, lower performance Higher employee health = better performance, reduced absenteeism and cost The absenteeism and cost charts use the same graphic, just with mirrored values to create an inverse relationship. Once I set up the first trigger to change a graphic’s state based on the slider value, I was able to duplicate it and adjust the value for each step. That made it easy to build and maintain without having to start from scratch each time. 💡 Production Tips This type of interaction requires a lot of object states to get the animations working smoothly. The inverse relationship between performance and absenteeism/cost tripped me up a bit. Once I figured out a formula for the states, it was much easier to keep things consistent—and even easier to rebuild when I needed to tweak things later on. 💬Feedback? I’d love to hear what you think! Any comments, questions, or ideas for improvement are always welcome. About Me David Anderson LinkedIn Profile Personal Website @elearning
