Storyline: Adult Learning Principles Click-and-Reveal
Interactions are a handy way to break up content. But if you’re looking to branch out from the typical tabs or accordion approaches, try this click-and-reveal instead. This interaction makes adult learning principles more approachable thanks to a friendly color scheme, cohesive illustrations, and gentle animations. And while it still has similar functionality to a traditional tabs interaction, the unexpected layout makes the experience feel fresh and enticing. Explore this project. This template will work for folks using Storyline 360, the continuously updated version of Storyline included in Articulate 360. Want to try it out? Get a free trial of Articulate 360 right here. And subscribe to our newsletter to find out about other helpful downloads.Storyline: Then-Now Comparison Slider
This Storyline template features two ways to use interactive sliders to visually compare two versions of an image. The first example features a simple yet effective two-step slider allowing learners to toggle between 'before' and 'after' views – perfect for those clear-cut comparisons. The second slider ramps things up a notch using ten steps to create a smooth transition from one image to the next. View the projectEverything You Need to Know About States in Storyline 360
The states feature in Storyline 360 is incredibly powerful. States allow you to alter the appearance of objects based on the learner’s actions. To illustrate this, take a look at the GIF below: See how the formatting of the buttons changes as I hover, and then again when I click on them? And did you notice that once I’ve clicked on the top three buttons, a fourth one appears? These formatting changes are made possible thanks to the states feature in Storyline 360. But this is only the tip of the iceberg when it comes to what’s possible with states. Let’s do a breakdown of this super-powerful feature to help you better understand how you can use states in your courses: Built-In Object States Custom Object States Drag-and-Drop States Character States Built-In Object States When you click on an object, open the States panel and click on the New State icon. You’ll notice that there are already a few built-in states: The great thing about these built-in states is that when you add them to objects in Storyline 360, most of them work automatically—without any triggers. Let’s take a look at how prebuilt states work and how you might want to use them in your courses. Normal This is what your learners see by default if they don’t interact with the object in any way. This state is created automatically when you insert an object. Any formatting that you apply to your object is automatically applied to the Normal state. Here’s a cool pro tip: you can actually add objects to the Normal state instead of adding them to your slide! There are many situations where this technique can be useful. For example, if you’d like to create a custom button by combining several objects, you’ll want to add the secondary objects to the Normal state instead of grouping them, because states can’t be added to a group of objects. To add objects to the Normal state, simply select an object, open the States panel, click on Edit States, select Normal, and insert the objects, as shown in the GIF below: As you can see, adding the icon to the Normal state instead of adding it to the slide itself allows you to interact with both the rectangle and the icon as if they were a single object. From here, you can add whatever other states you’d like! Speaking of, let’s take a look at the next prebuilt state. Hover This is what an object looks like when a learner moves their mouse over it. Adding a Hover state is a great way to signal to learners that an object is clickable. It’s up to you what formatting you apply to an object. Here’s an example of a Hover state that simply changes the fill color to a lighter shade of blue: Down The Down state appears when the learner is actively clicking on an object. This signals to the learner that their action is working. As always, the design of this state is your call. In the example below, the Down state simply changes the fill color to a darker shade of blue: Selected When you’ve added the Selected state to an object, it’ll appear when the learner clicks. If they click on the same object again, it’ll go back to the Normal state (unless they’re part of a Button Set). This state is great for interactions where you want learners to see which objects they’ve selected. Here’s an example of a couple of rectangles to which I’ve added Selected states with glow formatting: If you want to create an interaction where learners are supposed to select a single object from a set of options, you’ll want to use this state in combination with a Button Set, which automatically changes the state of a Selected object to Normal when the learner selects another object in the set, much like how radio buttons work in multiple choice questions. Here’s the same example you see above with a button set applied to the three rectangles: Visited Like the Selected state, the Visited state appears automatically when the learner clicks on an object. However, unlike the Selected state, which turns on and off automatically when learners click on the same object multiple times (unless they’re part of a Button Set), once the Visited state is activated, the only way to turn it off is by adding a trigger. This is because the purpose of the Visited state is to show that an object has been clicked on in the past, not to show that it’s currently selected. The Visited state is super-useful when you create custom menus or click-and-reveal interactions because it allows you to give learners a visual reminder of the buttons they’ve already clicked. Here’s an example of how that works: Disabled The Disabled state allows you to temporarily prevent an object from changing states or activating a trigger when learners interact with it. Unlike the other prebuilt states we’ve seen, you need to add a trigger for this state to work, unless you’ve set it as the initial state for an object. When the Disabled state is activated, nothing will happen when learners try hover, click, or drag that object. The Disabled state is useful in many situations. For example, if you’d like to create a custom menu that requires learners to view the different sections of your course in a certain order rather than allowing them to view the content in the order of their choosing, you can use the Disable state to unlock one button at a time, like in the GIF below: Notice how when I hover over the buttons, nothing happens? The Hover state doesn’t appear and the hand cursor doesn’t appear, making it clear that I can’t click on them. If you’d like to build a menu like this but are short on time, hop on over and download this template. Hidden As you may have guessed, when the Hidden state is activated, the object is invisible. Like the Disabled state, you need to add a trigger to activate this state unless you’ve set it as the initial state for an object. The Hidden state could be useful if you wanted to hide the quiz button until the learner completes all the sections of the course, as shown in the GIF below: Before we move on to Custom Object states, here’s another pro tip for you: if you’re creating states for an image, you can quickly create a series of states for it by bulk-importing image files. Find out how in this tutorial: Inserting Pictures as States. Custom Object States In addition to these prebuilt states, you can create an unlimited number of Custom Object states that can look and work any way you want. Adding a Custom Object state is super-easy! Simply select the object, open the States panel, click Edit States, and type the name of your Custom Object state, as shown in the GIF below: Once you’ve created your Custom Object state, go ahead and format it any way you’d like. Then, add a trigger to that object to show that state whenever you’d like it to appear. There are tons of situations in which it can be useful to create Custom Object states. One example would be to create different versions of the same object that appear as the learner interacts with a slider or a dial, as shown in the GIF below: To create the example above, I inserted a bunch of Custom Object states and changed the height of the rectangles in each one. Check out the screenshot below to get an idea of what my states look like: This is just one example of a situation where you might want to use Custom Object states—there are plenty of others! Let your imagination run wild. Drag-and-Drop States When we were looking at prebuilt states earlier, you may have noticed that at the bottom of that drop-down list there was another category of prebuilt states: the Drag-and-Drop states. As their name suggests, these states were specifically designed to be used with drag-and-drop interactions. They allow you to give the learner visual feedback as they’re interacting with the exercise. There are three Drag-and-Drop states. Let’s take a closer look at each one. Drag Over If you add this state to a draggable object, the learner will see it when an object is dragged over a drop target. If you have multiple drop targets, this state will be applied no matter which one it’s dragged over. Take a look at this GIF to get an idea of what that could look like: Instead of adding this state to a drag item, you could add it to your drop target(s). Here’s what that looks like: No matter which option you choose, the objective is the same: to give the learner a visual cue that they’re dropping the object onto a drop target—without letting them know if their answer is correct or incorrect. Drop Correct and Incorrect States The remaining two states are generally used together. The Drop Correct state is what your learner will see when they drop an object on the correct drop target, and the Drop Incorrect state is what they’ll see if they drop an object on the incorrect drop target. By default, these states won’t appear until the learner clicks on the Submit button, like in the GIF below: This is a great way to let learners know which answers they dragged to the right and wrong spots, instead of simply telling them they didn’t drag them all to the right spot. If you want the Drop Correct or Drop Incorrect state to display right away, simply go to the drag-and-drop options and uncheck the box marked Delay Item Drop States until Interaction Is Submitted, as shown in the GIF below: Once you’ve unchecked that box, your interaction will work as shown below: This option is great for practice exercises, where the score doesn’t matter. Pro tip: Did you notice that in addition to changing the color of the draggable items for the Correct and Incorrect states, I added icons to indicate whether they were correct? It’s a good practice to avoid using color alone to indicate correctness; this enables people who have trouble distinguishing colors or who come from cultures where green and red don’t indicate Correct and Incorrect to be able to understand. Character States Did you know that the illustrated characters in Storyline 360 come with a dozen prebuilt states? Well, now you do! There’s a prebuilt state for each of the 12 facial expressions included with each illustrated character. So if you want your character to suddenly look angry or disappointed, you don’t have to build out those states—they’re already there! All that’s left to do is insert an illustrated character and set up a trigger to change the state. Wrap Up And there you have it—you know everything there is to know about states in Storyline 360! Well, maybe not everything, but pretty close. If you want to dig even deeper, check out these great resources: Adding and Editing States Definition of Built-In States Want to try something you learned here, but don’t have Articulate 360? Start a free 30-day trial. And subscribe to our newsletter to get the latest product updates, e-learning examples, and expert advice directly in your inbox.Storyline: Simple Accordion Interaction Template
Looking fora quickway togrouprelated slide content? Accordion interactions are one of the best ways to organize content-heavy slides into smaller chunks.This accordion template features a minimalist design that's easy to personalize for your own e-learning projects. Explore the projectStoryline: Dial-Driven Map Activity
Storyline 360’s dials feature makes it easy for learners to manipulate data, explore cause-and-effect relationships, and control other objects in the course. You’ll often see this e-learning feature used in settings and situations where you’d find a dial in real life, but there’s no reason that needs to limit how they can play a part in your courses. In this creative download, pictures are used as dials to simulate the different components of a compass. Those dials all come together to allow learners to try their orienteering skills in a guided map navigation experience. Explore this project Want to know more about how this project was created? Check out the related behind-the-scenes article: How I Built This Dial-Driven Map Activity in Storyline 360 (With Help From ChatGPT). This template will work for folks using Storyline 360, the continuously updated version of Storyline included in Articulate 360. Want to try it out? Get a free trial of Articulate 360 right here. And subscribe to our newsletter to find out about other helpful downloads.Create 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.Add 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.42 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.
