Technology Enhanced Learning Team

Technology Enhanced Learning Services menu

Creating interactive activities with H5P

H5P[1] is a rather odd name for a useful feature of QMplus. H5P allows you to to quickly and easily create a variety of different interactive activities through an easy to use user interface.

At the time of writing there are nearly 50 different activity types available and new ones are added all the time. Some of the types include:

    • Course presentation – create an interactive presentation
    • Timeline – create an interactive timeline including images and video
    • Image pairing and image sequencing activities
    • Image hotspot activities

You can add H5P to your QMplus area as standalone activities or you can embed H5P activities into standard QMplus resources and activities such as pages, books, forums…anywhere you have access to the visual editor. You can store grades for H5P activities in the gradebook from where you can also access reports on usage.

While H5P is a great tool, there are a number of issues with H5P activities that you should be aware of…in particular it should not be used for summative assessment. Please see the issues section at the end of this guide for more information.

What is H5P and how to get started

H5P is a free and open initiative which provides tools to make it easy to create interactive activities for a variety of different purposes. H5P content can be easily integrated into a wide variety of websites and we have integrated it into QMplus via a plugin which makes it easy to create activities and add them to your QMplus area in a variety of ways. The main way of adding H5P is through an activity type, called “Interactive Content”, in the resource and activity picker.

Using this activity, you can create a wide variety of different interactive activities for your students. Building the activities is usually relatively straightforward, although some activity types are more complicated than others. The building is all done through a visual interface with no programming skills required.

This is an example of an H5P content type called “Agamotto” It allows you to scroll through some images to see how the user interface of QMplus has changed over the years. This has been created with H5P and then embedded into this website.

Currently there are nearly 50 different types of activity available and more are being added all the time. With such a wide variety of activity types available, it can be difficult to get started with H5P and to decide which activities might work for you. Things that you can do are:

  • Look at the information on the H5P website. There are lots of examples and tutorials using all the activity types. You will get a good idea of what is possible and hopefully some inspiration for your own activities.
  • Re-use and adapt activities that other people have created. The people behind H5P have a strong ethos of “Open Educational Resources” or OER. This means they strongly encourage the sharing of educational resources and it is very easy to make your H5P activities reusable by others. If you look at the H5P activity above, you will notice a Reuse button at the bottom. If you click on this button you can download a copy of the H5P file for this activity which you can then use yourself. You can download the file for any of the examples on the H5P website and this is a good way to get going with H5P. Start by creating an H5P activity based on someone else’s and tweak it for your own purposes. The reuse button can be turned off if you don’t want other people to make use of your activity.
  • Read the Moodle H5P guide

How to create a new H5P activity

With editing turned on, go to the place in your course area where you want to add the activity and click the Add an activity or resource link. Then choose the Interactive content item and add it.

Once you have added the item, you will be on the activity settings page where you will see the H5P content selector

H5P Item selection

Here you can scroll through, or search for, the content type that you want to use. You can:

  1. Select the content type you want to use by clicking anywhere other than the Details button.
  2. Select Details to find out more about the content type

Once you have selected the content type you want, you will see the configuration options for that type. These vary greatly from type to type.

At the top of the configuration options, you will see links that will take you to tutorials and examples which will help you to set up this particular type. These are all on the website.

Once you have configured the content type, scroll down and select Save and display to see what it looks like.

If you want to continue editing it, select the Edit settings link in the Settings block.

Edit settings link in the settings block

Your activity will appear as an icon and link on your QMplus page. Students click on the link to access the activity.

H5P icon and link on QMplus page

You can edit the activity at any time as usual by turning editing on and selecting the activity link.

Note: Activities created in this way will always have a grade item created in the gradebook for them, whether they are graded or not. If the grades are not relevant you can create a category in the gradebook to put them in to which will allow you to hide them. This will reduce the clutter. You might also consider one of the embedding methods to avoid the grade item being created at all.

Embedding an H5P activity in other resources and activities

Instead of having an H5P activity icon on your QMplus page, it is also possible to embed H5P activities into other content on QMplus. You might embed it in a QMplus Page resource, or a QMplus Book resource, or in the description for a discussion forum. You can basically embed H5P activities anywhere you have access to the visual editor on QMplus.

H5P quiz embedded into the description for a QMplus forum

In this example, an H5P quiz has been embedded into the description for a QMplus forum. Students can take the H5P quiz and then post a response in the forum.

There are two ways to achieve this:

  1. Embedding the activity without storing grades
  2. Embedding the activity while still storing grades and the student activity reports

Embedding without grades

Use this method to embed H5P content if you do not care about storing any grade information for the activity.

First, you will need to have the H5P file for the activity you want to embed. You can obtain the H5P file by clicking on the Reuse icon at the bottom of an H5P activity. See the example in the introductory section of this page for an example. We recommend that you create your activity in another QMplus area and then use the Reuse button to obtain the H5P file.

Add the resource or activity you want to use to your QMplus area. In this example I am using a forum, I have added the forum and I am now on the forum setup page.

QMplus forum setup page with H5P button in the visual editor for the description

I have entered a name for my forum and then some text in the description. To embed an H5P activity, I select the H5P button in the editor controls.

Inserting H5P by uploading a file

  1. Select Browse repositories and upload the H5P file for your activity
  2. Select H5P options check the boxes if you want to allow your activity to be reused. Note that anyone that can see the activity can download the H5P file, including students.
  3. Select Insert H5P

You will be returned to the visual editor. You will not see your activity yet, you will see a grey box where it is going to appear.

Finish setting up your activity as usual and then scroll down and select Save and display when you are finished. You will now see the activity with the H5P activity embedded in it.

Embedding with grades

If you’d like to embed your activity into some other QMplus content but you still want to store grade information for it, the process is slightly more complicated.

First you must create an H5P activity somewhere in your QMplus area. Creating this activity will create an item in the gradebook where the grades and reports can be accessed

Once you have created your activity. Set the visibility of it to hidden.

Set the H5P activity to hidden

Now make the activity available.

Make H5P activity available

This may seem slightly odd but it is making use of a feature of QMplus called “stealth actvities”. Activities in stealth mode are not visible to students on the main page, but will still work if you use links to them.

Make a note of the name of your H5P activity. You need the exact name, including capitilisation. In my case it’s Test your knowledge of stuff

Now create the activity you want to embed your H5P activity into. In this case I’m using a forum.

The H5P button in the visual editor

I have entered my forum name and some instructions in the description. I now embed my H5P activity by clicking on the Code snippet button, which looks like a spider’s web.

Select the H5P embed button

Select the H5P embed button

Enter your H5P activity name

Now enter the name of your H5P activity.

Note that you must type the name exactly, including capitilisation. Case matters. If you don’t type it exactly the embed will fail.

Select Insert

You will be returned to the visual editor. You won’t see your activity embedded yet, you’ll see a piece of cryptic text.

Cryptic text in the visual editor

Finish configuring your activity and then select Save and display. You should now see your H5P embedded into the activity. If it does not appear, the most likely cause is that you haven’t typed the name of the H5P activity correctly. Check the spelling and capitalisation and that you do not have any excess spaces in the name. Go back to the code snippet editor in the visual editor and make any necessary changes.

Now your students can interact with the H5P activity which is embedded and their grades will still be registered in the gradebook as for a standard H5P activity.

Viewing grades and reports

Grades and reports for H5P activities can be accessed via the gradebook in your QMplus area. Note that H5P activities which have been embedded using the H5P button in the visual editor do not have grade items.

H5P activity grade item in the QMplus gradebook

Go to the gradebook in your QMplus area and find the grade item for the H5P activity you are interested in. Select the title at the top of the grade column.

H5P report page showing reports for each student who has completed the activity

To see a more detailed report for each student, select the appropriate report link.

H5P versus QMplus quizzes

H5P provides a variety of different quiz-like activity types. These are usually very visual and can look “slicker” than your average QMplus quiz. However, QMplus does provide a wide variety of quiz questions and things that you should consider when deciding whether to use H5P or QMplus quizzes are:

  • Reporting– QMplus quizzes provide a lot of data about how your students have engaged with your quiz. H5P, as it is currently integrated with QMplus, provides very little information in this area. If this type of data is important to you, you may be better off using a QMplus quiz as opposed to an H5P one.
  • Converting H5P questions to QMplus quiz questions – If you have some H5P activities and you want to convert these to QMplus quizzes, it is possible to do this by using the import function in the question bank of a QMplus area and uploading an H5P file. This will convert the activity into QMplus quiz questions which can then be used in standard QMplus quizzes. Note that not all H5P activity types can be converted. To see a list of those that are, please see the H5P content types plugin on the Moodle website.
  • Summative assessment – H5P should not be used for summative assessment as it is not secure

Issues to be aware of

While H5P is a great tool, there are a number of things you should bear in mind when using it:

  • Summative assessment – It is not suitable for summative assessment – even though H5P activities can be graded, the way H5P works means it is not secure and therefore shouldn’t be used for summative assessment.
  • Accessibility – There are potentially accessibility issues with using H5P as not all the activity types are fully accessible. This does not necessarily mean you shouldn’t use the activity but you may have to think of alternative presentations. The H5P owners keep a list of the current accessibility issues on their website.
  • H5P activity gradebook items – If you create an H5P activity, an item will always be created in the gradebook for it, no matter whether you intend using a grade or not. If this is annoying, you can create a category in your gradebook to put all your H5P activities in to. This will allow you to hide them. You can also use one of the embed methods to put your H5P activity into your QMplus area as this will not create a grade book item.
  • Embedding H5P activities in labels – If you try to embed your H5P activity onto your QMplus course main page using a label, you may find that it does not display. Unfortunately there is currently no workaround for this issue. You will have to embed the activity on a QMplus page instead.
  • H5P activities and the sharing cart – there can sometimes be issues with using the sharing cart to move H5P activities from one QMplus area to another. If you run in to this issue, a workaround is to download the H5P file for the activity and recreate the activity in the other area.

Creating an H5P activity bank

If you use H5P a lot, you may find it useful to have a dedicated area on QMplus where you create, test and store your activities. If you have a QMplus sandpit or test area, you might do it there, or you can have a new QMplus area created (just raise a ticket on the ServiceDesk or talk to your local QMplus support staff). You could even give access to the area to other staff who can reuse your H5P activities and share their own. Remember to enable the reuse feature on your activities!

When you want to use one of your H5P activities in another QMplus area, simply use the Reuse button to download the H5P file and then use it to create or embed a new activity in another area.


[1] – H5P stands for HTML5 Package. There you are. Now you know. Definitely named by a web developer.

Return to top