How are You Using Drag-and-Drop Interactions in E-Learning? #468
Using Drag-and-Drop in E-Learning#468: Challenge | Recap If there’s one e-learning interaction that belongs in every instructional designer’s toolkit, it’s drag-and-drops. Drag-and-drop interactions are a fun way to engage learners and encourage them to interact with the screen. They’re also one of the most flexible interactions you can create. So, whether you’re designing straightforward question slides or custom freeform slides, drag-and-drop interactions are one of the best ways to get learners to stop, think, and interact with the content. And that’s what this week’s challenge is all about. 🏆 Challenge of the Week This week, your challenge is to share a drag-and-drop interaction to show how they can be used in e-learning. You can use any authoring tool you like and make it as simple or custom as you have time for. Note: Since Storyline’s drag-and-drop interactions aren’t currently keyboard accessible, they can create serious barriers for learners who rely on keyboard navigation or use screen readers. Check out the following on-demand training for some ideas on creating accessible drag-and-drops: How to Create an Accessible Drag-and-Drop Interaction in Storyline 360 🧰 Resources User Guide Storyline 360: Drag-and-Drop Questions Related Challenges: Drag-and-Drop Practice Activities#380:Challenge|Recap Drag-and-Drop Sorting Activities#439:Challenge|Recap Webinars: How to Build Drag-and-Drop Interactions in Storyline 360 5 Ways to Customize Drag-and-Drop Interactions 6 Ways to Customize Drag-and-Drop in Storyline 360 Discover six creative techniques every course designer needs to know to customize their drag-and-drop interactions in Articulate Storyline 360 View on YouTube ✨ Share Your E-Learning Work Comments: Use the comments section below to link your published example and blog post. Forums: Start a newthreadand 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#ELHChallengeso your tweeps can follow your e-learning coolness. 🙌 Last Week’s Challenge: While you're dragging through the ideas for this week's challenge, check out the 360° image interactions your fellow challengers shared over the past week: Using 360° Images in E-Learning RECAP #467: Challenge | Recap 👋 New to the E-Learning Challenges? Theweekly e-learning challengesare ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of theprevious challengesanytime you want. I’ll update the recap posts to include your demos. Learn more about the challenges in thisQ&A postand why and how to participate in thishelpful article.200Views0likes136CommentsAdd Custom Interactions to Rise 360 Projects with the Storyline Block
One of the best things about Articulate 360 is that you always have the right tool for the job: you can create custom interactivity with Storyline 360 and build gorgeous, responsive courses with Rise 360. And with the Storyline block for Rise 360, you have the best of both worlds—custom interactivity with responsive output. Easily add custom interactions built in Storyline 360 to the beautiful, responsive courses you’re creating with Rise 360. And because it’s Rise 360, your interaction will look perfect on every device. Check out this video to see how easy it is to add Storyline 360 interactions to Rise 360: Sign in to Articulate 360 to try the Storyline block yourself. And if you haven’t tried Articulate 360, you’re missing out! Get a free 30-day trial to try out this new feature and much, much more.199Views0likes135CommentsCreate Interactive Videos with These Storyline 360 Features
Videos are a commonly used learning tool in e-learning because they easily demonstrate how to do physical or web-based tasks. Since Articulate 360 Content Library gives you access to thousands of videos, it’s never been easier to find the one you need for your e-learning project. Here’s the best part: Storyline 360 makes it super-easy to take your videos a step further and make them interactive using a few key features. Let's take a closer look. Cue Points Cue points are useful when it comes to creating interactive videos in Storyline. They are bookmarks you can place anywhere on the timeline to trigger events. Cue points are useful when it comes to creating interactive videos because they can be used to pause the video at certain points on the timeline. Here’s an example of an interactive video that uses cue points to pause the video at key moments to display a question the learner must answer. Medical Training: Interactive Video|Download Learn more about cue points: Get to Know Storyline Cue Points How to Work with Cue Points Layers Layers are another powerful feature e-learning designers frequently use to create interactive video. You can use layers to display additional information appearing on the screen while the video is playing or when it’s paused. Here’s an example of an interactive video that uses layers to display additional pop-up information for each step of the process. Barista Training: Interactive Video|Download Learn more about layers and how to use them: Storyline 360 and Storyline 3: Understanding States, Layers, and Triggers Storyline 360: Working with Layers Hotspots Hotspots allow you to create a clickable area on the screen. They can be used on top of videos to encourage learners to click on parts of the scene. Here’s an example of an interactive video that uses clickable hotspots to display additional information about this piece of heavy equipment. Heavy Equipment Training: Interactive Video|Download Learn more here: Working with Hotspots in Storyline 360 In Sum Hopefully these features and examples get you thinking about ways you can turn your video into something more engaging and interactive. What features do you use to create interactive videos? Let me know in the comments below! Want to try something you learned here, but don’t have Articulate 360? Start a free 30-day trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.199Views0likes45CommentsStoryline 360: What Are Triggers?
Want to build interactivity into your e-learning course—things like jumping to a slide, clicking tabs to show different information, playing media, submitting a quiz answer, and more? With Storyline 360 you have an easy no-code solution to help you build the exact interactivity you want: triggers. Triggers tell your course what actions to perform at specific times. And what makes them so simple to work with is they’re essentially just the answers to two basic questions: What action do you want to happen? When do you want it to take place? Let’s say you want to create a Home Button that takes learners to the main menu of my course. To decide what trigger to use you need to know: What action doyou want to happen: The course jumps to the main menu When do you want it to take place: When the user clicks the Home Button Or maybe you want some narration to start when a slide opens. For that, you need to know: What action do you want to happen: The narration audio file plays When do you want it to take place: When the timeline starts on the slide Once you have the answers to those two questions, you’re ready to create your trigger in Storyline 360! Now that you know how they work, let’s look at just how simple it is to set up any trigger you need for your courses. Creating a New Trigger There are two ways to get started: click Trigger in the Insert tab or select the Create New Trigger icon in the triggers panel. Either option opens the Trigger Wizard, which will guide you through the entire trigger creation process. When that Trigger Wizard pops up, you’ll probably notice that the first two sections in it feel pretty familiar. That’s because they’re essentially asking you the two questions we discussed earlier: Question 1: Action You’ve got 25 actions to choose from in Storyline 360, which means a lot of possibilities. And thankfully, they’re labeled with clear, conversational names that make it easy to browse the drop-down menu in the Trigger Wizard to find the exact action you want. Once you’ve picked your main action, additional drop-down menus appear, which allow you to further refine what you want to happen. For example: if you select Jump to Slide, the next dropdown will ask you which slide you want to go to. if you choose Play Media, the dropdown will list the media files on the slide you can pick from. Question 2: When Once you’ve identified what action should take place, then it’s time to specify when you want it to happen. Again, you’ll make your choice from a straightforward drop-down list. Just as you saw with the Action section, once you’ve picked an option from that list the Trigger Wizard will show you any additional fields you need to fill out to ensure your trigger works. This feature is a huge help for making sure important information isn’t accidentally left out. For instance, if you choose User Presses a Key, a new field will ask you to identify which key. Or, if you select Object Dropped On, you’ll then be asked to choose one of the available objects on the slide or layer. Conditions There’s also an optional section in the Trigger Wizard: Conditions. Conditions are a powerful feature for enabling actions to happen ONLY IF something else in the course has already occurred. For example, if you want your course to show a slide with remedial content only to learners who got an earlier quiz question wrong, a conditional trigger can help you do that. The possibilities and combinations are endless when it comes to conditional interactivity! Find out more about how to work with conditions in this article. Does Storyline 360 Build Any Triggers for Me Automatically? Absolutely! To save you time, some Storyline 360 slides and objects have common triggers included with them by default. Here are a few places you can expect to regularly see these automatic triggers. Previous and Next Buttons There’s no need to set up triggers for the Previous Button and Next Button every time you add a new slide. That’s taken care of for you—automatically! Quiz Slides You’ll notice quiz slides have a Submit Button by default instead of a Previous and Next Button. That button has a trigger automatically attached to it that submits the interaction when it’s clicked. Quiz Results Slides When it comes to the Graded Results slide, the prebuilt triggers do a lot of the heavy lifting for you. They check the quiz passing score and automatically show either the Failure or Success layer based on the learner’s performance. They also give learners the option to use the Review Button to revisit the quiz slides and answers. Of course, even though all the triggers listed here are prebuilt for you, you can always edit or delete them to customize your course as needed. Wrap-Up As you can see, triggers are as powerful as they are easy to use, making creating a wide variety of interactivity in Storyline 360 a snap. Looking for even more ways to work with triggers effectively? Give these articles a try: Storyline 360: Working with Triggers 4 Things You’ll Want to Know About the Triggers Panel in Storyline 360 Want to try something you learned here, but don’t have Articulate 360? Start a free 30-day trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.119Views0likes7CommentsHow Are Designers Using Toggle Buttons in E-Learning? #460
Toggle Buttons in E-Learning#460: Challenge | Recap 🏆 Challenge of the Week This week, your challenge is to share an example that shows how toggle buttons and switches can be used in e-learning. You can create a simple example using normal and selected states with button sets or build something more advanced using variables. Let us know if you get stuck or need help with your project. 🧰 Resources E-Learning Challenge #97: 35+ Wicked Toggle Button Effects for E-Learning Designers Video tutorial: Here's how you can create a toggle button effect using Storyline's ✨ 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 switch to this week’s challenge, check out the creative ways your fellow course designers use photo collages to create interactions: Interactive Photo Collage ExamplesRECAP#459:Challenge|Recap 👋 New to the E-Learning Challenges? Theweekly e-learning challengesare ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of theprevious challengesanytime you want. I’ll update the recap posts to include your demos. Learn more about the challenges in thisQ&A postand why and how to participate in thishelpful article. 📆 Upcoming Challenges Challenge #461(05.10): Interactive Podcasts. SeeELC364for a related challenge. This time, the questions will focus on the value of working out loud, weekly challenges, and growing your skills. Challenge #462(05.17): Click. Hover. Drag. SeeELC144for a general idea of what we're doing. 🚨2024 Articulate User Conference Call for Proposals We’re now accepting proposals for this year’s in-person user day conference co-hosted at DevLearn in Las Vegas.Learn more about the proposal process.99Views0likes80Comments16 Examples of Interactive 360° Images in E-Learning #467
Using 360° Images in E-Learning RECAP #467: Challenge | Recap This week’s challenge asked course designers to show how 360° images can transform static visuals into interactive, explore-type activities. Jonathan Hill Example | Download | Jonathan Hill | Website | @DevByPowerPoint Jayashree Ravi Example | Jayashree Ravi | LinkedIn Elizabeth Kuhlmann Example | Learn more | Elizabeth Kuhlmann Thierry EMMANUEL Example | Thierry EMMANUEL | Website Jodi M. Sansone Example | Jodi M. Sansone | Website | @jodimsansone Samuel Apata Example | Samuel Apata | Website | @afrostem eLearn Dev Example & learn more | eLearn Dev Mallory Frazier Example | Mallory Frazier Ron Katz Example | Ron Katz | Website Angela Thomas Example | Angela Thomas Trey McNabb Example | Trey McNabb bylittle learning Example | Download | bylittle learning | Website Sonya Crider Example | Sonya Crider Andreas Paul Example | Andreas Paul Kate Golomshtok Example | Kate Golomshtok | Website Sabrina Sgoda Example | Sabrina Sgoda Walkabout Learning Example | Walkabout Learning 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. If you have a blog, please write about your challenge example. I'll add links to your blog post so your examples get even more exposure. And for those who share your demos on Twitter or LinkedIn, please include #ELHChallenge so your network (and Articulate!) can track your e-learning coolness. Share Your 360° E-Learning Examples! The 360° image 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.99Views0likes0CommentsUsing Interactive Dials in E-Learning #453
Using Dials in E-Learning#453: Challenge | Recap Interactivedialsare a great way to simulate real-world objects and tasks in your e-learning courses. Dials are similar tosliders, but where sliders move along a straight path, dials move in an arc or a circular path. Dials also use less space than sliders, so learners can quickly scroll through large amounts of data. The best part? Dials are super easy to use and customize. With just one click, you can easily format pre-made dials orconvert any object, graphic, or image into a unique dial. Here are a few ways dials are commonly used in e-learning: Reveal or step through a process Choose avatars or e-learning characters Create draggable menus 🏆 Challenge of the Week This week, your challenge is to share an example that demonstrates how you're using interactive dials in e-learning. 🧰Resources Downloads Storyline: Rotating Objects Template Storyline: Dial H For Help Storyline: Stacked Dial to Create a Gauge Storyline: Monarch Metamorphosis Dial Storyline: Dial Infographic User Guide Storyline 360:Working with Dials Storyline 360:Adding Variable References On-Demand Training Using Dials in Storyline 360 Using Dials to Create Menu Navigation in Storyline 360 ✨ Share Your E-Learning Work Comments: Use the comments section below to link your published example and blog post. Forums: Start a newthreadand 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#ELHChallengeso your tweeps can follow your e-learning coolness. 🙌 Last Week’s Challenge: Before you dial into this week’s challenge, check out innovative ways course designers are using AI to help build better e-learning: Using AI in E-Learning Design #452:Challenge|Recap 👋 New to the E-Learning Challenges? Theweekly e-learning challengesare ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of theprevious challengesanytime you want. I’ll update the recap posts to include your demos. Learn more about the challenges in thisQ&A postand why and how to participate in thishelpful article. 📅 Next Week’s Challenge Challenge #454 (03.22): Using variables in e-learning. This variables challenge will be different because you'll be asked to share a demo that uses all three variables. 🚨 Contact Information Just a quick heads up – if you want your blog, website, or LinkedIn included in our recap posts, could you do me a favor and add or update those links onto your ELH profile sometime this week? I found some broken links last week when I pulled the recap together. You spend a lot of time building creative examples, and your work deserves all the attention it can get. If you make changes, please let me know in the comments below. Thanks!99Views0likes143Comments42 Interactive 360° Image Examples in E-Learning #337
Using 360° Images in E-Learning RECAP #337: Challenge|Recap This week's challenge asked course designers to work with Storyline 360's new public beta feature called 360° images. The projects shared this week were some of the best we've seen all year. Check out the examples below to see how 360° images can be used to create more engaging and interactive courses. Gokcenur Inan Example | Gokcenur Inan Mike Schwind Example| Mike Schwind | Website | @slivo6 Coniqua Abdul-Malik Example| Coniqua Abdul-Malik Mostafa Faieq Example| Mostafa Faieq Chantal Dumont Example| Chantal Dumont | Website Sarah Lotà Example| Sarah Lotà Correy Adams Example| Correy Adams Angie Carter Example| Learn more| Angie Carter | Website Jim Brown Example| Learn more| Jim Brown | Website Rebecca Govin Example| Rebecca Govin Jonathan Hill Example | Learn more | Jonathan Hill | Website | @DevByPowerPoint Melissa Meyers Example | Learn more | Melissa Meyers Paul Alders Example | Paul Alders | Website | @paulalders Jodi Sansone Example | Jodi Sansone | Website | @jodimsansone Ron Katz Example | Ron Katz | Website Example | Ron Katz | Website Chris Hodgson Example | Learn more | Chris Hodgson | Website | @skriss Sandy Henderson Example | Sandy Henderson Nancy Woinoski Example | Nancy Woinoski | Website Samuel Apata Example | Download | Samuel Apata | Website | @afrostem Tracy Carroll Example | Learn more | Tracy Carroll | Website | @1tracycarroll Karlis Sprogis Example | Download | Karlis Sprogis | Website | @fastercourse Katie Riggio Example | Katie Riggio Emmalyne Willoughby Example | Emmalyne Willoughby Dominik R Example | Dominik R Priyanka Rastogi Example | Priyanka Rastogi Natalie Evans Example | Natalie Evans Brenda Barley-Kay Examples| Brenda Barley-Kay Janie Liz Sampaga Example| Janie Liz Sampaga | Website Bela Gaytan Example| Learn more| Bela Gaytan | Website Fay Hsueh Example| Fay Hsueh Katy Montgomery Example| Katy Montgomery Jennifer Vigil Example| Jennifer Vigil Montse Example| Download|Montse Anderson | Website | @mLearning Hilla Schlegel Example| Hilla Schlegel Ang CM Example| Ang CM Marie Maurannes Example| Marie Maurannes Rise Admin Example| Rise Admin Kristoffer Høgberg Example| Kristoffer Høgberg Reggie Jose Example| Reggie Jose Iris Schlabitz Example| Iris Schlabitz Evangelina Theobald Example| Evangelina Theobald|Website| Twitter Lauren Hopkins Example| Lauren Hopkins 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. 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. If you share your demos on Twitter, please include #ELHChallenge so your tweeps can track your e-learning coolness. Share Your Interactive 360° Image Examples! The 360° image 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.99Views0likes0Comments23 Ways to Use Drag-and-Drop Interactions in E-Learning #468
Drag-and-Drop in E-Learning RECAP #468: Challenge | Recap This week’s challenge asked course designers to show how they’re using drag-and-drop interactions in e-learning. Jonathan Hill Example | Jonathan Hill | Website | @DevByPowerPoint Ron Katz Example | Download | Learn more | Ron Katz | Website sebastien daubert Example | sebastien daubert Thierry EMMANUEL Example | Thierry EMMANUEL | Website Rosemary Trahan Example | Rosemary Trahan Jodi M. Sansone Example | Jodi M. Sansone | Website | @jodimsansone Walkabout Learning Example | Walkabout Learning Nichole Codrington Example | Nichole Codrington Tamara Häfeli Example | Tamara Häfeli eLearn Dev Example | Learn more | eLearn Dev Angela Thomas Example | Angela Thomas Jesse Wu Example | Jesse Wu | Website Alex Milyaev Example | Learn more | Alex Milyaev Ron Katz Example | Download | Template | Learn more | Ron Katz | Website Courtney Roberts Example | Courtney Roberts Kate Golomshtok Example | Kate Golomshtok | Website Thaddaeus Smith Example | Thaddaeus Smith | Website Gülsüm Güneşen Yıldız Example | Gülsüm Güneşen Yıldız Hilla Schlegel Example | Hilla Schlegel Phezulu Dhlodhlo Example | Phezulu Dhlodhlo Sabrina Sgoda Example | Sabrina Sgoda David D Example | David D Samuel Apata Example | Download | Samuel Apata | Website | @afrostem 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. If you have a blog, please write about your challenge example. I'll add links to your blog post so your examples get even more exposure. And for those who share your demos on Twitter or LinkedIn, please include #ELHChallenge so your network (and Articulate!) can track your e-learning coolness. Share Your Drag-and-Drop E-Learning Examples! The drag-and-drop 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.99Views0likes0CommentsHow are Course Designers Using Labeled Graphics in E-Learning? #464
Using Labeled Graphics in E-Learning#464: Challenge | Recap Labeled graphics are one of the most popular explore-type interactions in e-learning. And creating them in Rise 360 or Storyline 360 is a breeze—just drop some markers on an image, add your content to the labels, and voilà! You've got an engaging interaction in minutes. But here's the best part: labeled graphics aren't just quick and easy to build; they're also incredibly flexible. They're perfect for getting learners to drill down into timelines, maps, floorplans, diagrams, org charts, screenshots—you name it. 🏆 Challenge of the Week This week, your challenge is to share an example of a labeled graphics interaction. You can use Rise 360, Storyline 360, or any tool you like. Just show us how you’re using interactive markers to create explore-type activities. In case you missed it, this week’s Storyline 360 update included the option to easily adjust interactive marker sizes to optimize accessibility for any screen. 🧰 Resources Check out the previous labeled graphics challenge recap to see how this popular interaction can be used in e-learning: Labeled Graphics in E-Learning RECAP #371: Challenge | Recap ✨ 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 drill down into this week’s challenge, check out the progressive disclosure techniques your fellow challengers shared over the past week: Progressive Disclosure in E-Learning RECAP #463: Challenge | Recap 👋 New to the E-Learning Challenges? Theweekly e-learning challengesare ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of theprevious challengesanytime you want. I’ll update the recap posts to include your demos. Learn more about the challenges in thisQ&A postand why and how to participate in thishelpful article. 🚨 2024 Articulate User Conference Call for Proposals We’re now accepting proposals for this year’s in-person user day conference co-hosted at DevLearn in Las Vegas.Learn more about the proposal process.99Views0likes109Comments