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/review20+ Examples of Interactive Comparisons in E-Learning #1
Interactive Comparisons RECAP #1: Challenge | Recap This week’s e-learning challenge asked course designers to build interactive graphics to demonstrate the relative size differences in the world’s largest aircraft. Ose Ndebbio Example | Ose Ndebbio | Website Emma Sajben Example | Emma Sajben Sharon Gan Example | Sharon Gan Paul Alders View project | Download | Paul Alders | Website | @paulalders Anuradha Gopu View project | Anuradha Gopu | Website | @AnuradhaGopu Alex Colburn View project | Alex Colburn Montse Anderson View demo | Montse Anderson | Learn more | @mLearning Jackie Van Nice View Demo | Learn more | Jackie Van Nice | @jackietrains Matt Guyan View demo | Matt Guyan | Website | @MattGuyan Dana Dutiel View demo | Learn more | Dana Dutiel | Website | @danadutiel Deanna Brigman View demo | Deanna Brigman | Website | @DMBrigman Johar Singh View project | Johar Singh | Website | @joharsinghs Maxwell Dziku View project | Maxwell Dziku Alexander Salas View project | Alexander Salas | Website | @stylelearn More About the E-Learning Challenges: The weekly challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos. Share Your Interactive Comparisons! The e-learning comparisons challenge is still open! If you have one or more ideas you'd like to share, please jump over to the original challenge and post your links in the comments section. I'll update this recap page to include your examples.Showing Meaningful Comparisons in E-Learning #1
E-Learning Challenge #1: Challenge | Recap This week I worked with an Articulate Storyline user who needed to build some interactive feature comparisons for their products. The interactions needed to simplify product data (specs, costs) and show meaningful comparisons between their products and their competitors’ products (size, weight, proportion). It made me aware that you can also apply comparisons beyond technical training. For example, you can feature comparisons between behavior (legal vs. illegal), decision-making (ethical vs. unethical), choices (good vs. poor), and more. You could build comparisons on almost anything. The key is to show them, so they’re meaningful to learners. And that's what this week's challenge is all about. Challenge of the Week This week, your challenge is to use the provided source files to create an interactive demo to compare the different sizes of aircraft. Objective: Design an interactive graphic to show relative sizes for a series of airplanes. Check out this Wikipedia entry on giant aircraft for inspiration. Assets: Download the airplane graphics. They’re available in .png (transparent) and .pptx (PowerPoint) formats. Tools: You can use Storyline, Articulate Studio, or PowerPoint to create your interaction or infographic. Share Your E-Learning Challenge Demos This is a great way to practice your visual communication skills while building your e-learning portfolio. To share your files, do one of the following: Comments: Use the comments section below to share a link to your published project. The comments section allows links but not attachments. You should use the forums if you have a question or want to share your source files. Forums: Create a new thread in the forums and share a link to your published source file. You can also attach your project files if you want help or feedback. Personal blog: Post your published example on your blog or website. Examples Here are a few examples to get you started: Scale of the Universe Powers of Ten Planet size comparison What You Can Do in 25 Square Meters Cell Size and Scale The Size of Our World Kingdom of the Blue Whale Great whales Tapuiassauro, the new dinosaur from Brazil What are the E-Learning Challenges? The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos. Learn more about the challenges in this Q&A post and why and how to participate in this helpful article.Creating Immersive Learning Experiences with 360° Images #467
Labeled graphics interactions are one of the most popular interactions because they’re easy to create and only need a single image to turn static visuals into interactive, explore-type activities. Similarly, 360° images offer the same ease of creation but on a whole new level. They bring static images to life, allowing learners to explore real-world environments as if they were actually there. And that’s what this week’s challenge is all about! 🏆 Challenge of the Week This week, your challenge is to show how 360° images can be used in e-learning. If you're a Rise 360, the 360° images feature is a fantastic way to enhance your courses by using Rise 360's Storyline blocks. 🏞️ Looking for 360° Panoramic Stock Photos? Storyline 360 supports equirectangular panoramas in all standard image formats for creating 360° image interactions. Here are some places you can find images: Pixabay 360Cities Flickr Pixexid *Each image provider has its own licensing terms. Be sure to review them to ensure proper use. 📸 360°Degree Cameras Here are four of the most popular 360° cameras: Insta360 ONE X2 and Insta360 X3 Ricoh Theta Z1 GoPro MAX Ricoh Theta SC2 🧰 Resources 360° Images User Guide Adding and Editing 360° Images Tutorials: How to Create a Progressive Scavenger Hunt with 360° Images in Storyline 360 How to Create Badges for a Gamified Scavenger Hunt Using 360° Images ✨ Share Your E-Learning Work Comments: Use the comments section below to link your published example and blog post. Forums: Start a new thread and share a link to your published example. Personal blog: If you have a blog, please consider writing about your challenges. We'll link to your posts so your great work gets even more exposure. Social media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can follow your e-learning coolness. 🙌 Last Week’s Challenge: Before you take this week’s challenge for a spin, check out the accessibility makeovers your fellow challengers shared over the past week: E-Learning Accessibility Makeovers RECAP #466: Challenge | Recap 👋 New to the E-Learning Challenges? The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos. Learn more about the challenges in this Q&A post and why and how to participate in this helpful article. 📆 Upcoming Challenges Challenge #468 (07.05): Drag-and-drop interactions. This will be a general drag-drop challenge, so you can share anything you like.
