How to use H5P

H5P is a free and open-source content production tool available here on atingi. H5P is an abbreviation for HTML5 Package and aims to make it easy for everyone to create, share and reuse interactive HTML5 content. Interactive videos, interactive presentations, quizzes, interactive timelines and more can be created. 

Note: H5P content can be created directly on atingi, via the activities’ menu and the “content bank” – you do not need to create an account on h5p.org. However, if you want to find out more about H5P tools and examples, looking at this page might be useful. 


There are two ways of getting started on developing your H5P content. On the one hand, within your course and with your top bar, click on “Content bank”. 

 
 

On the other hand, you can also turn the "edit mode" on, click on the (+) to add an activity or resource, and choose H5P from the activities menu

 

 

 

In the activity editing mode, you give your H5P activity a name and in the next step, you can choose your H5P file. If you still need to create an H5P activity, click on “Use the content bank (opens in new window) to manage your H5P files”.   

 
A new window will open, which is the same page you are being brought to when choosing the “content bank” via the top bar menu: 

 

The content bank is connected to your category, which means that all H5P content created within your category will be displayed here. When getting started on atingi, this area will likely be empty, because you need to add content first. 


You can choose the type of content by clicking on “Add” and going through the dropdown. 

 

 
These are all content types available via H5P

 
 
 
We are going to take a more thorough look at two useful H5P activities and show you how to upload them to your course: Accordion and Interactive Video


Accordion 

The accordion is a very simple tool that allows you to set headlines, keywords, or questions that unfold and reveal extra info when clicking on them. 

To start, choose the “Accordion” from the “Add”-menu. You will be brought to the H5P activity settings

 
There needs to be one title for the whole Activity and one title per foldable panel. In the text box you put the text according to the panel title. 

Usually, you want to add multiple panels by clicking “Add panel”: 

 
The text is also customizable in font, colour or size. 

Whenever you are done, click “Save”. You will be brought to a preview of your H5P activity. Of course, you can always go back and edit it

 
 
If you are happy with the way your content looks, go back to your atingi course and the H5P activity settings. You can now upload the H5P element that you have just created. 

 

 
For this, click on the file icon and go to “content bank”: 

 
 

The H5P we just created is the file “accordion-6373”, so we are going to choose this one. 

 
You can change the name of the file, enter a name of the editor and choose a content license. Additionally, you can either “Make a copy of the file” or “Link to file”.  


The advantage of linking is that later changes in the H5P will be synchronized with the activity on atingi. However, if you for example have several categories on atingi and might plan to move your H5P at a later stage, you should make a copy, so the file doesn’t get lost in transition. 


Afterwards, click on “select this file”. Complete the usual “access restriction” and “activity completion” settings. For the accordion, you should choose “require view”, because it’s not an interactive task. 

Click “Save and Display”. 

 
Your H5P Accordion is now being displayed as part of your atingi course! 


Interactive Video 

Interactive videos are a great way to present information to your learners while at the same time involving them via small quizzes or additional information

To choose the H5P activity, please enter the content bank and follow the steps described above. After having selected “Interactive video”, you have to give it a title and either upload a video or insert a YouTube URL

 
In this example we inserted a YouTube URL. 

 

Next, you have to add interactions. There are several options to choose from. 

 
 
You will also get a small tour through the editing options. Most importantly, if you choose an interaction, it will display in a new tab. 

 
For this example, we chose to integrate a true/false question

 
You can define for how long the question should be displayed, if the video should pause during the display of the question and if you want to see it as a button or a poster. Generally, we recommend using the poster option, because the text box can be adjusted and is clearly visible to learners, while the button is not as obvious and might cut of some of the text. 

Next, type in your question and define if the statement is true or false. You can also define other behavioural settings, e.g., if you allow your learners to retry or see the solution: 

 
Click “Done” to return to your video (important note: do not click “Save” at the very bottom of the page yet as this saves and closes the whole activity). You now see the question displayed in the video and can adjust its size or change the position

 
In addition to interactions, you can also add Bookmarks to enable your learners to find certain parts of the video faster. 

Note: If you have prevented skipping in your video, bookmarks won’t work. 

 
As a last step, you can choose to add a summary question to your interactive video. This contains two or more statements, of which one is true, and the others are false. 

 
It’s also possible to define custom feedback according to the score reached in the summary: 

 

 
After having added the video, all interactions, and a summary, you should take a look at the overall behavioural settings

 ü
You can for example define if you want to auto-play the video, prevent skipping, show bookmarks, or start the video at a certain time. 

Now, you can click on “Save”. As always, the video will be displayed as a preview in the content bank: 

 
The little dots in the timeline indicate the different interactions, which will pop up once you reach them. 

 
To add this to your course on atingi, please follow the same process as described above for the accordion – with one exception: For interactive videos that contain quizzes or other types of questions you can “require grade” in the atingi activity completion settings. This makes sure that your learners actually watched the whole video and answered all questions. 


There are plenty of more options for H5P activities, but we hope that this chapter has helped you to understand how to create H5P content, choose the correct settings and integrate it into your atingi course.