NDP Blog

Author
Behzad Lashkari

Creating interactive content on your Drupal Website

H5P is an open source framework based on JavaScript and is a great way to create interactive HTML5 content.  They have a large number of libraries that enable you to create different types of interactive content all through your browser.  They refer to the libraries as content types NOT to be confused with Drupal’s very own content types!  For the remainder of this article I’ll refer to them as libraries to save us all from a world of confusion!

Head over to their site for some demos and to see a list of their libraries by navigating to their Examples & downloads page.

From their examples pages you’ll see that there are roughly 25 H5P libraries.  In this article I will focus on the Interactive video library.  However the initial instructions for installing the module and libraries will work for any of them.

INSTALL THE MODULE

As always, there is a module for this which you’ll need to install.  There are instructions for this on the module page.  Once installed turn the module on, the module will create a content type for this interactive content.

INSTALL LIBRARIES FROM H5P

From the examples and downloads page on h5p.org click on Interactive video.  At the bottom-left of the video click on Download.  This will download a .h5p file which is basically a zip file.

On the Drupal site navigate to the main content page at /admin/content and select the H5P Libraries tab.

Now choose the .h5p file you downloaded and click on upload (far-right).  You’ll then see a list of libraries that are used for the Interactive videos.  You are now good to create rich interactive HTML5 content from your browser.

INTERACTIVE CONTENT TYPE

The H5P module will create a content type called Interactive content.  This is where you’ll create your Interactive videos.  You can extend this content type to meet your requirements.  Updating the module does not reset the content type to it’s default fields.

CREATE AN INTERACTIVE VIDEO

The section that creates the interactive videos is labelled HTML5 Content.

From the Content type dropdown select interactive video.  You will see a message appear "Loading semantics, please wait".  This will take a few moments to load the Interactive Video Editor. 

Once it loads, the first step is to click on the Video files section to add a video from YouTube.

Copy the url of a YouTube video you would like to add interactions to and then paste in the Enter video source URL or YouTube link and press insert.

The next step is to add the interactions.  Click on the Add interactions tab and you will see the YouTube video appear with some buttons.

CREATING INTERACTIONS

You can add an interaction to the video by pressing play and then dragging down one of the buttons at the point of the video you’d like that interaction to appear.  The video will pause whilst you configure your interaction.

There are two types of video interactions, one of them displays information such as a label  and the other type is a question/answer interaction.
The details and options for each interaction type is different however there are some options that appear on all of them.  

Display time:

This option controls at which point of the video this interaction displays.  By default the start will be the point of the video you dragged the interaction down and the end time is 10 seconds after.  You can tick the Pause video option to pause the video whilst the interaction is displaying otherwise the video will continue playing.

Display as:

The button option will show a button on the video and the user will need to click on the button for the interaction to appear.  The poster will display the interaction such as a multiple choice question directly on the video.

INFORMATIVE BUTTONS/INTERACTIONS

The first five buttons are informative type interactions.  From left to right they are label, text, table, link and image.

QUESTION/ANSWER TYPE INTERACTIONS

The rest of the buttons allow you to add question/answer type interactions to the video.  We’ll cover each of these below.
For each Question/Answer type interaction there are some additional settings that are called adaptivity and behavioural settings.  I’ve covered these in the Statements and Single choice sets interaction types but they are largely the same of each interaction type.  In addition one thing to note is that whenever you add an interaction type and press done to add it to the video you can resize the interaction window.

Statements

With statements you’d create a list of statements for users to choose from with only one of them being true.  You would give the statement some introduction text e.g.  Choose the correct statement.  You then need to add a list of statements to choose from, the first one should be true.

This is the minimum you have to create but there are a number of additional options such as leaving a tip and overriding the text that appears on buttons.  You can also jump forward x amount of time on the video depending on whether they answered the question correctly or incorrectly.  These optional advanced settings are called adaptivity settings.

Single choice set

With single choice sets you need to create a question and a list of possible answers, the first alternative being correct.  You can have multiple Question & alternative sets.  By default there are two sets, if you only need one you can close the second set. 

There are a number of other configurations you can add under the Behavioural settings fieldset.  A notable one is the ability to give one point for the whole task even if you have several Question & alternative sets.

Multiple choice

It’s all in the title.  You add a question and then a list of answers, there is a checkbox to mark which is the correct answer.  There are also some behavioural and adaptivity settings as mentioned above.

Fill in the Blanks

Fill in the blanks is a very slick interactive exercise.  You give the task a description such as Fill in the missing words.  You then enter a block of text and use asterisks to select the words that you wish to remove from the block of text to appear as one of the drag and drop word options.  There are also some behavioural and adaptivity settings as mentioned above.

Drag and Drop

The drag and drop type of interaction is a little more visual and flexible so requires a little more work to produce a quality interaction.  You create drop points on the canvas and give them a label such as move the picture here.  You then need to drop an element of either an image or text on the canvas and set which drop zone it belongs to.  Finally you go back to the drop zone and select which element belongs to that drop zone.  There are also some behavioural and adaptivity settings as mentioned above.

Step 1 is to create your canvas.  This is done from the settings tab as shown below:

Step 2 is to create your drop zones and elements and then pair them up.  Note that multiple elements can belong to a single dropzone.

Mark the Words

The aim of the Mark the Words interaction type is for users to select the correct words in a sentence based on the task description.  E.g. Select all words that begin with the letter T.  You use asterisk around the words that are correct.

Drag text

The Drag text is an interaction type where users will complete a sentence by dragging the missing words into their correct positions in that sentence.  This is similar to fill in the blanks except the correct words are given as options to drag into place.

Go to question

The Go to question gives you the ability to jump forward on the video depending on the selected choice.  One use case could be that the first half of the video contains easier questions and the second half contains more difficult ones.  You could use this interaction to gauge whether the user has good or bad English, if they select Good they’ll jump forward to the first difficult question on the video.

Summary

H5p is a great solution when you need to add some interactive content on a site.  This blog covered just the interactive video library but there are many more that are well worth exploring. The Drupal module is also well maintained.

Written by Behzad Lashkari