Example
Interactive video : Setting up a home office in a tight space
Hello, happy e-learning heroes!
I have two contributions to the challenge on interactive videos, hoping you'll find them entertaining.
Interactive video : Setting up a home office in a tight space
Video is an excellent learning medium because it allows you to apply a key principle in instructional design: show instead of explain. But engagement is even better when you allow the user to interact with the video, which is another key point: keep the learner active.
So, I tried to apply these principles to an example of video content that gives tips on setting up a home workspace (it is part of the VYOND templates that I translated into French and use in my training courses).
Here is how it works.
By watching a shortened version of the video placed on the base layer (approximately 30 seconds), learners must identify the elements or situations they need to address by clicking on the elements that appear in the video. At the end of the challenge, learners can watch either the full version of the video placed on the Tips layer if they have found all 5 items, or the chapter corresponding to one item found, to obtain appropriate advice for the situations they have identified.
By clicking on an item found in the base layer, the video on the Tips layer will start at the corresponding chapter (thanks to a variable indicating the cue point to be used).
Some technical points:
- In the case of a moving image in the video (character “crossing” the slide), I used a motion path to synchronize the hotspot with the moving element. To adjust the speed and positioning of a hotspot that should follow an element moving in the video, you can use a shape instead. You can make the form visible in the preview (unlike hotspot), which makes synchronization easier. In the motion path options, be sure to remove the acceleration at start and end. However, a shape without fill or outline will remain detectable when a trigger is associated with it, as it displays a hand cursor on hover that cannot be removed. Therefore, after setting the motion path with a shape, it is best to replace the shape with a hotspot that you can set so that the hand cursor does not appear on hover. Use the animation reproduction brush command to give the hotspot the same settings as the shape.
- To prevent the video from pausing if the user clicks outside the hotspots to be found, insert a hotspot covering the entire video, and place it between the video and the other hotspots for the items to be found.
The .story file is attached. Feel free to comment or ask questions.
View the project in action :
https://360.articulate.com/review/content/9bcc6036-a70c-4d92-83b6-b245ac8969fe/review
