HTML5 Tutorial:

Interactive HTML5 Video

Part 3: Adding a Quiz to HTML5 Video

question-overlay-example

view elearning example

Quiz Questions

In our sample publication we have also included a simple quiz which appears over the video. It features two single-answer multiple choice questions created using the Question Object tool but obviously you could add more questions or put questions at different points in the video.

Add the First Question

To add a question simply click the Question Object tool on the Tools toolbar and select the Single Answer category before choosing the preferred design from the palette provided.

add a quiz to video

Then click on the page wherever you want to place the top left corner of the Question template. No need to be too accurate as you can reposition afterwards or use the Align options on the Arrange menu to centre the question on the page.

Edit the content to add your question and the relevant answers as illustrated below. Make sure to replace the text Correct Answer with 1880 which is the correct answer in this instance as Opus will automatically handle the scoring of that answer as correct.

edit the question

Adding and Connecting the Second Question

Add another question in the same location and edit to reflect the second question subject and answers.

edit the second question

Now select the Confirm Answers button for the first question, which we've named Q1 and open the Actions dialog by double-clicking and selecting the Actions tab. There are already several actions attached to a Left Mouse Trigger which come with the question template to confirm the question, disable the buttons and display the feedback icons. Add a Hide action to the bottom of this list and select the Q1 object to be hidden. Add another action to Show Q2.

Select the Confirm Answers button for Q2 and add an action to Hide Q2 so the quiz disappears once both questions have been answered. We will be adding other actions to pause and restart the video in the next section of the tutorial.

Top Tip for Complex Publications
When creating complicated pages, especially where some content is underneath other objects, you can simplify editing by right-clicking on the relevant objects and select Conceal in Editor from the View option. reducing screen clutter This makes your editor page much less cluttered and will not effect the view of the object in the final publication.

Another option to consider when creating several similar items as with questions in a quiz is to place each on a separate frame of a multiframe. Opus will automatically show you the frame you are working on and you can use the multiframe actions to show the appropriate frame in your publication.

In this example we have two questions position on top of one another so to edit the one underneath we need to conceal Q2 as illustrated above. We can reset the visibility of the object by using the Show in Editor option.

In the next section we look at synchronising the appearance of objects to specific points in the video.

next

how to create interactive elearning HTML5 video with Opus Pro - tutorial part 3