Tech Tips: How to Develop Interactive Video Material Part 4: Adding Quiz Interactions

Tech Tips: How to Develop Interactive Video Material Part 4:  Adding Quiz Interactions

Hey! 

Are you ready to discover more amazing interaction features to add to your interactive video?

Here we are!

This video will give step by step instructions on how to add quiz interactions to your interactive video using Lumi..

In case you haven’t watched TechTips Episode 13 yet, please do so before continuing, as this episode is a continuation of the previous one.

Let’s start.

Adding Fill in the Blanks

Click the fill in the blanks button

For this interaction, as usual we need to input the title.

Then you may change or edit the default text in the Task description box according to your preference.

Next, under the Text blocks, Input the statement you want to have a fill in the blank item

To make the word blank add an asterisk before and after the correct answer or text that you wish the viewer to fill in.

To avoid confusion, you may click on the “Show instruction” yellow box to read the instructions for this section.

You may also add another link of text by clicking on the “add text block” button.

Then, just click on Done.

Adding Drag and Drop

In the toolbar, locate and click the feature “Drag and Drop”

It will automatically direct us to the interaction editor tab for the “Drag and Drop” feature.

Afterward, set the “Display time” depending on how long and when we want to display the question. You can also opt to pause the video when this interaction appears.

Set a label for your interactive icon, this will display next to the icon in the Video if you use the display as button setting.

Then, insert the title of the “Drag and Drop” feature.

You can insert a background image for your drag and drop task.

Or you can just set how large the task area in “Task Size”

But in this case, we will add a background image.

Afterward, click on “Step 2 – Task” beside “Settings”

Once we are in the Task tab,

we will start by adding Drop zones.

To do this, click on the “add Drop Zones”  button.

It will direct us to the settings of the drop zone.

You can name the label to your preferences, but be sure to give each drop zone a distinct title to avoid confusion.

After that, you can set the background opacity to zero, to make the drop zone slightly hidden

Uncheck the  “Show label”  option, to hide the correct answer and check the  “This drop zone can only contain one element”

Then click Done.

Your first drop zone will now be visible. 

It should be placed over the corresponding label that we have created.

This is important since the drop zone dictates where the item can be placed correctly.

Now it’s time to create more drop zones.

To make the process faster, click the copy and paste button, and place it to the correct area. 

After we placed the drop zone to the correct area, we have to edit it so that we could change its name.

To do so, click the pencil icon and it will direct you to the label tab. 

After changing the name, click on done once again.

Repeat the process for each element until all have a drop zone.

Now that the drop zones are set, it’s time to place the droppable elements to each corresponding drop zone.

To do so, click the text button located at the top left side of the task window.

First give a title to your element. This is the text that will appear to the user as a draggable element. 

Next check the  “select all” box so that the users are able to drop the elements to all available drop zones.

Then click done. 

Adjust the position of the elements to your liking.

Repeat the process for all the droppable elements.

Now it’s time to link the droppable elements to its correct drop zone.

To do so, click the first drop zone and click the pencil icon to edit.

You can now see all the created elements.

Select the correct element for the drop zone. 

Repeat the process until all elements are assigned to a drop zone.

To preview what your work will look like, you can go to the ‘View’ tab by clicking on the ‘View’ button in the top-left corner

Adding Mark the Words

To begin with this interaction, click on the Mark the Words icon.

Type in your Title.

Then input a description below the Task description.

The default description is “click on all the verbs in the text that follows.” 

You may choose to edit it or use the default text. 

In Marking the words function, you must input your text statement under the text field.

To indicate which text is correct within the statement insert an asterisk before and after the text. 

You may indicate more correct texts by just doing the same process.

For further information about this, you may click on yellow box button that says “show instructions” 

Once you are satisfied with your Mark the words interaction, just click on Done. 

Adding Drag the Words

Click on the Drag the Words icon.

Below, input the title of this interaction. 

Under Task description, you may use the default text shown or you may edit it to your preference. 

In the Text box, type in your text statements. To insert draggable words within the statement, input an asterisk before and after a specific word, then it will automatically become a draggable word. 

In this interaction, you may add two or more draggable words by doing the same process.

Once the interaction is finished, just click on Done.

Incredible! You have successfully created your video even more engaging and interactive!

Quite easy to do right?

There are still more features in H5P and I am looking forward to seeing you as a part of our future TechTips Series!

See you!