How to Create Interactive Video Quizzes in E-Learning
Interactive videos in e-learning can be an effective way to enhance your course scenarios, activities, and quizzes. And Articulate Storyline makes working with video super easy.
Check out the following example of an interactive quiz created in Articulate Storyline 2:
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.
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.
Hi David - Thanks for the article. Really adds to the wow factor and can see this being used as you describe for branching scenarios. I've been having a bit of a play around and have run into a couple of issues. Firstly, I have used a random video file from Vimeo as the background to test this. I have set it up according to the parameters you state in your download. When I publish two things happen: 1. I have to click the play button on the Vimeo video to get it started. I have set the layer to play media when the timeline starts but I still have to press the play button. Can this be avoided somehow? 2. If after pressing play, I hover my mouse over the video, the buttons to show the questions ie Q1, Q2 etc are hidden ie do not appear as expected. If after pressing play, I hover m... Expand
Hi David, Thank you for the great tips! I am currently using a video in one of my modules. We have little "Information" icons pop up throughout the video and the video is paused. When the learner clicks on the Information icon they see a layer that provides more information about what was seen in the video. Meanwhile, the video is paused. Afterwards, the learner clicks on "click here to continue" and the video continues until the next Information icon pops up. However, I'm running into a little issue when some of the Information icons pop up. It seems like the video starts replaying a few seconds earlier rather than when it was paused. I am having trouble understanding why this is happening, because the triggers on each one of the Information icons is the same. They... Expand
Hello! This article is very helpful. However, I'm trying to create an interactive video slide in Storyline 2 with the following features: 1) Video clip on base layer is 30 seconds long 2) 3 questions pop up, over the video, at 3 different cue points on the timeline (e.g., at 5 seconds in, 15 seconds in, and 25 seconds in). 3) Each question appears on its own layer. 4) When the layer with question appears over the video, the timeline of the base layer pauses. 5) After the user reads the question on the layer, he/she can close the layer & the base layer video resumes from where it paused. 6) The video slide has a seekbar which the user can click around in in order to navigate to different parts of the video, if desired. David: Your interactive video example for this artic... Expand