The Interactive Video component lets you create branching video content to present video scenarios that allow multiple outcomes and branches for learners to explore.
This article provides an overview of the Interactive Video component, component setup and behavior, and examples of Interactive Video component configurations.
The Interactive Video component is an interactive component that lets you create branching video content where you present video scenarios that allow multiple outcomes and branches for learners to explore.
The Interactive Video component is fully responsive.
Component set up
To add this component, follow the steps in this article:
Add a Component
Explore everything there is to know about Evolve. This collection begins with the basics of Evolve and completes with information on the tool's more advanced features. Feel free to start from the beginning or hop around to the specific section that suits your needs.
The Property Panel for the newly added component will then open automatically for you to customize set-up.
Or click anywhere on an existing component to open the Property Panel.
In the General section:
Add*Title* , or an Display Title, as needed. Display Title is seen by learners.
Scroll down the page and add your Body. Use the text editor to style and format your text, as needed.
- Add Instruction Text that tells learners how to use the component.
- Include an Aria Label for screen readers, as needed.
- Enter Video Play Button ARIA Label, as needed. Fill this in to describe this piece of content to a screen reader.
Interaction Label section
In the Interaction Label section, you can enable an Interaction Label.
The Interaction Label allows you to add a widget before or after the Interactive Video component. This widget can display an icon and label prior to the Interactive Video component completion, which changes to a different icon and label once the Interactive Video component is completed.
Interactive Video Editor section
In the Interactive Video Editor section, you Add videos and items to your Interactive Video component.
Click Edit item to edit each item.
For each item:
- Enter Item Question Text.
- Add Video Subtitle Label as needed.
- Add Video Subtitles for the video.
Add Transcript and Transcript Text that will display underneath the video. Use the text editor to style and format your text, as needed.
Poster Graphic section
In the Poster Graphic section, you can add an Image to your Interactive Video component, as needed.
In the Screen section's first part, Timeout screen, you add Text and a Retry button label.
Scroll down the page and add texts for Incorrect screen by adding Text and a Retry button label.
For the Completion screen, add a Title as needed. This will be shown in a notification dialog. Use the text editor to style and format your Feedback text, as needed.
In the Behavior section, toggle to enable Full Screen Options. This will display the video options in full screen on mobile.
Toggle to Enable Video Controls. This will show the video controls.
Note: On mobile browsers, the controls will be visible.
Toggle to Disable Timer. Enabling this setting will allow the learner to have unlimited time to choose an answer.
Enter Timer. By default, the Timer is set to 10 seconds.
Below are examples that illustrate the Interactive Video component setup:
Example 1 – displays the Interactive Video component with the first video ready to play.
Example 2 – displays the options after the first video is played. The option to the right is the correct answer.
Example 3 – displays the dialog notification with the component Correct Feedback text shown after the correct video has been played.
In the Animations section, you select what animations to run when the options are displayed at the end of each video.
Did this article help?
Let us know by leaving a star rating or review at the top of this article.