Interactive videos are a great way to bring your course scenarios, activities, and quizzes to life. The best part? Articulate Storyline makes it super easy to work with video.
Check out this example of an interactive quiz built right in Storyline:
Looking to get more from your e-learning videos? Here are some helpful insights for using video in your Storyline quizzes.
Working with Interactive Videos
You have a few ways to bring video into Storyline. When you’re working with interactive video (scenarios, quizzes, interviews, etc.), you will need to insert the video from a file. This embeds the video into your slide.
When you first insert your video, you’ll notice that your timeline expands to accommodate the duration of the video. This is really helpful for visualizing the total runtime for your video.
Pro Tip #1: Set the Playhead Before Inserting the Video
Your video will insert on the current frame as your playhead. Let me explain.
If you insert a 30-second video while your playhead is on Frame 5, then the video will not appear until Frame 5 and will extend the timeline to 35 seconds.
If you want your video to begin playing when the timeline begins, you’ll need to reposition the video to the beginning of the timeline and keep the current timeline set to 35 seconds.
That’s because objects are set to Show Until End by default.
Your best move is to first disable Show Until End and then reposition the video to the first frame on the timeline. This will save you from having to readjust the timeline back each time.
Pro Tip #2: Overlay Hotspot or Transparent Rectangles Over Videos
By default, Storyline enables videos to be played and paused by clicking on the video. Hover over an inserted video and you’ll see your cursor change to indicate the video is active. This is by design, and there are times when clickable videos make sense in your projects. This is not one of those times.
With interactive videos, you’ll want to narrow the interactivity to a button or series of buttons while disabling the clickable video.
To disable the hand cursor from displaying when users hover over the video, you can overlay a hotspot or transparent shape.
The benefit to using the hotspot is that you’ll get this highly visible green shape on your slide. This makes it really easy to see compared to a transparent shape. If you go with the hotspot, you’ll want to right-click anywhere on the hotspot and deselect Show Hand Cursor on Hover.
In the example file I used for this article, I went with a semi-transparent shape over my preferred hotspot. The video felt too bright and a semi-transparent shape let me dial back some of the brightness. If you have a preference, let me know, okay?
Creating the Interactivity
The trick to interactive video is to add buttons that appear for a short duration before disappearing. You’re giving the learner an option to interact with a specific frame or series of frames in the video.
If the learner chooses to interact, they click the button. If they don’t click, they’re not penalized (in this example!) and the button disappears after a few seconds.
To adjust the duration of a button, drag it along the timeline. Just like with videos, objects are set to appear for the entire duration of the timeline. You’ll want to drag the right edge to prevent the button from displaying the entire time.
Pro Tip #3: Using Cue Points to Sync Button Animations
When you’re working with interactive video, you’ll likely have short segments ranging from one to five seconds where you want a button to appear. Cue points make this so easy.
After you insert your video, press your spacebar to play the video on your slide. Each time you want a button to appear and disappear, press C on your keyboard to add a cue point. This gives you a visual indicator for adjusting your buttons.
Creating the Questions and Feedback
You have a few options for adding the quiz questions and feedback. One way would be to create new quiz slides for each question. Your buttons could either jump to each quiz slide or open them in lightbox slides.
Another way is to build everything on slide layers like we did in this example.
I like the idea of slide layers because it enables me to keep everything on one slide. It was my intention to make the question slides optional if the learner wanted more information or to evaluate what they knew for a specific topic.
I created the first question slide as my template. Using buttons I made with basic shapes, I then created three states: selected, disabled, and hover.
The submit button’s initial state is set to disabled. Since I’m not using Storyline’s default quizzes, I have to manually disable and enable the submit button to prevent the learner from clicking Submit before making a choice.
To enable the submit button, I added one trigger to change the button to normal when any one of the three choice buttons is selected. Easy, right?
Pausing the Video
The last thing I want to mention is the Slide Layer Properties menu. For each slide layer, I enabled the option to pause my video on the base layer.
By default, the base layer timeline continues playing when slide layers are triggered. I didn’t want the video to continue playing while the learner answered each question.
This is another option that will depend on your project. I can imagine video quizzes where you’re trying to create a sense of urgency for the learner. In such cases, it might make sense to let the video play while the learner is making decisions.
Next Steps
Working with video in e-learning has never been easier and quizzes are a great place to begin. I’m writing more on this topic and will continue to share templates for quizzes, interviews, and scenarios.
We’ve already seen some creative examples for using interactive video from community members:
- Interactive Video Quiz by Montse Anderson
- Revealing a Character’s Thoughts by Daniel Brigham
- Spot the Hazard by Steve Flowers
In the meantime, download the template and let me know what you think. If you have any questions or would like some feedback on your own video quizzes, let me know.
