Using Accordion Interactions in E-Learning (2023) #403
Using Accordion Interactions in E-Learning #403: Challenge | Recap Challenge of the Week This week, your challenge is to share an example that shows how accordion interactions can be used to group and organize content in e-learning. Can I see some examples of accordion interactions? Sure you can. We've hosted three accordion challenges over the past 10 years and the results are always amazing. Here are some recent challenges, recaps, and community roundups to help you get started. Using Accordion Interactions in E-Learning #350: Challenge | Recap Accordion Interactions in E-Learning #227: Challenge | Recap 4 Accordion Examples to Inspire Your Next E-Learning Project Make E-Learning That Sings with these 6 Accordion Interaction Downloads 9 Accordion Interaction Downloads for Arranging Courses Awesomely Basic Accordion This accordion from Montse is a good one to build when you’re first getting started with Storyline. The expanding panels are manually repositioned on slide layers to reveal each panel’s content. View the example | Download Semi-Animated Accordions In this example from Jonathan, motion paths are used to open and close the accordion’s panels. I like this example because it’s an excellent way to simulate advanced accordions without using variables. In addition, because there aren’t multiple panels, there’s no need for variables and multiple motion paths to track each panel’s position. View the example Animated Accordion In this accordion example, multiple motion paths combined with variables are used to expand and contract each panel. You can download the source file and view a video tutorial to learn more about the project and how it was built. View the example | Download the source | Learn how it was built More Examples of Accordion Interactions Using Accordion Interactions in E-Learning #350: Challenge | Recap Accordion Interactions in E-Learning #227: Challenge | Recap 4 Accordion Examples to Inspire Your Next E-Learning Project Make E-Learning That Sings with these 6 Accordion Interaction Downloads 9 Accordion Interaction Downloads for Arranging Courses Awesomely Require Learners to Click All Panels Before Continuing Functionally, accordions are similar to tabs in how they group and chunk related content. But unlike tabs interactions, accordions expand, collapse, and move around the slide. This requires designers to duplicate interactive objects across multiple layers. The good news is if you know how to do it with tabs, you can do it with accordions. Let me show you how it works. View on YouTube Share Your E-Learning Work Comments: Use the comments section below to share a link to your published example and blog post. Forums: Start your own 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 back to your posts so the great work you’re sharing gets even more exposure. Social Media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can track your e-learning coolness. Last Week’s Challenge: To help ensure your challenge demo goes "accordion" to plan, check out the creative ways course designers use subtle patterns and textures in e-learning: Patterns and Textures in E-Learning RECAP #402: 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. Next Week’s Challenge I'm hosting a how-to webinar next week on building accordion interactions in Storyline 360. I'll reference this week's challenge in the session and share any examples you've shared before the session. Next week's challenge (2/10/23): Creating E-Learning Interactions Inspired by Google Doodles << Thanks to Tom and Elizabeth for the idea! Upcoming how-to webinar (2/7/23): How To: Build Accordion Interactions in Storyline 360 It’s been a while since I’ve done the accordion webinar, so your latest accordion examples will help the session feel fresh and current.How are Escape Room Games Used in E-Learning #432
Using Escape Room Techniques in E-Learning #432: Challenge | Recap Escape rooms are adventure games where a group of players are locked in a room (real world or digital) and tasked with solving a series of puzzles and challenges to unlock a door leading to their escape. Popular escape techniques include: Locks and Keys: Locks and keys are foundational technqiues for unlocking new clues, items, or levels of the game. Sequence Puzzles: Players complete tasks or steps by clicking, sliding, dragging, or turning objects in a specific order. Hidden Objects: Players search the room for concealed items for solving other puzzles—a good opportunity for drag-to-reveal interactions. Even if you'd never consider using an escape room-type game in your own courses, they're still a fantastic way to practice advanced techniques. And that's what this week's challenge is all about! ✨ Example of an Escape Room Game Here’s a fantastic example from Karlis Sprogis of an escape room created in Storyline 360. View the example | Learn more about the project Last Week’s Challenge: Before you reveal your example, check out the creative ways course designers reduce on-screen text and boring bullets in e-learning: Bullet Point Makeovers RECAP #431: Challenge | Recap 🏆 Challenge of the Week This week, your challenge is to share an example using escape room techniques. You can choose any theme you like for your demo. The thing with escape room games is that they can go from tricky to frustrating quickly. Try to find ways to integrate hints, clues, and even cheats into your example. 👋 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. 📅 Next Week’s Challenge & Webinar Next week's challenge #433 (9/19): Using Lightbox Slides in Storyline 360 Upcoming webinar (9/22): Using Lightbox Slides in Storyline 360 Got an idea for a challenge? Are you interested in doing a webinar showcasing how you made one or more challenge demos? Or do you have some comments for your humble challenge host? Use this anonymous form to share your feedback: https://bit.ly/ElearningChallengeForm.Helping out youth football (soccer)
Late to this challenge - but now I've seen it it's a great opportunity to share a little side project I have been playing with. ⚽ My son is in an Under 10's football team that is struggling, as they are largely made up of players who have never been in a team. I know that simple knowledge content isn't going to reach them, and even listening to a coach often goes over their heads, but what about a little bit of gamified learning?! So I set about developing something for the Rise Code block. I've tried to stick to some fundamental principles of that level of football... Position, shape, and a basic move. In the game, you'll see a multi level progression, allowing kids to grow and evolve their knowledge. With more development I'd have developed the full rich story around the progression, and an ability to select a team role and explore some specifics of that role, so kids could choose their journey, but I just wanted to start with whether the concept was possible with some basic vibe coding. Thanks for my good friend Google Gemini for helping with the framework for me to build and develop from. I didn't get half as far as I wanted before my attention had to go elsewhere, but it has potential. Would love to hear people's thoughts. Give it a go!Instructional Design Rage Baiting
Hello! I'm not really into competitive sports. But I do like to fish for comments 😀 Despite my natural antipathy towards any type of competitive sport, sometimes a sporting motif can be useful for framing content. A lot of sporting language and terminology has crossed over into business communication, too. So it's a fertile area for instructional design. Cast your line here: https://bit.ly/elhc537Creating Parallax Effects with Interactive Sliders in E-Learning (2019) #253
Parallax Scrolling Effects in E-Learning #253: Challenge | Recap What is the Parallax Effect? Parallax scrolling is a motion effect that’s used to simulate depth by animating background images slower than foreground images. The effect can be found in everything from video games to websites to e-learning. Let’s take a look at a few examples. How’d You Do That? A good example of how features can be used differently came from Steve Flowers during the Articulate Storyline 2 beta. Steve was playing with Storyline’s new sliders and shared a way to connect one slider to another. There’s nothing too exciting about connecting sliders... Not until you consider how easily sliders can be customized. By changing the visual appearance of the slider's thumb a large image, Steve was able to create a scrolling timeline interaction. Sliders just went up a notch. Comet Landing Connecting two visual sliders together is cool. But what happens when you connect dozens of visual sliders to a slider? You get a parallax effect that’s out of this world! Slider possibilities went up a few more levels after Jerson Campos shared his Comet Landing example with the community. Several revisions later, Jerson’s example was awarded a 2015 Honorable Mention in our Guru Awards. View demo | Jerson Campos Interactive Conversations Mark Bennett shared his own take for creating the parallax effect with sliders. By making both sliders full-slide images, Mark discovered a creative way to make the entire background draggable. View demo | Mark Bennett | Website Be sure to download Mark’s source file to learn more about his project and how he built it. Mountain Tours Here’s a recent example shared by Ross Garner. I really like how Ross customized the slider’s thumb to visually align with his mountain theme. It's a practical example and one that should help most users begin using multiple sliders to create the parallax effect. View demo | Download | Ross Garner | Website | @R0ssGarner Football and Anatomy Sliders Here are two more examples and source files from Tom. I like these examples because they show how multiple sliders can be combined for educational purposes. Football: View | Download | Anatomy: View | Download Challenge of the Week This week, your challenge is to create a parallax effect for e-learning using Storyline’s sliders. Technically, this is an advanced challenge. Please let us know if you get stuck or have any questions. I don’t want anyone to skip this challenge because they can’t get their sliders to work correctly. New Entries Only! We hosted the first parallax challenge three years ago. To keep things fresh, we’re asking that you share only new parallax examples this week. You’re more than welcome to re-work a previous example. Last Week’s Challenge: Before you slide into this week’s challenge, check out the interactive checklist examples your fellow community members shared over the past week: Checklist Interactions in E-Learning RECAP #252: Challenge | Recap New to 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.#537 - Checkmate project
Hi, For this challenge, I chose chess — a sport of strategy, focus, and continuous learning. I decided to present the Spanish Opening (Ruy Lopez) in a minimalist way: no overload, just the essentials. The goal is simple: highlight the moves, spark curiosity, and show how a few fundamental principles can pave the way to a deeper understanding. I look forward to reading your feedback and discussions. Have fun playing! https://360.articulate.com/review/content/2461b969-1f3b-4dcf-ab78-07113690d8c8/review
