A Quick Guide to Adding and Using H5P Activities in Your LMS

Site: Justwrite
Cours: Creating Accessible Interactive OER with H5P for Inclusive Language Education (Session 2025)
Livre: A Quick Guide to Adding and Using H5P Activities in Your LMS
Imprimé par: Guest user
Date: dimanche, 13 avril 2025, 07:22

1. Introduction

Here is a small help guide to add and share your H5P activities with your students/learners.

Before we get into how to add H5P activities to your LMs, here is a keypoint to understand.

When you create H5P activity in any cloud platform like in Camerise studio, make sure you allow users to download the content as an .h5p file and save.

 To enable users to download, check the box next to Display buttons (download, embed and copyright) and also check the box next to Allow users to download the content, Embed button, Copyright button.

This allows users to view Reuse, Rights of use and Embed options to display on the tool bar below the H5P activity.

 

Below is the screenshot given from the Camerise studio H5P editor page, highlighting the options mentioned above.

Screenshot of H5P editor page in Camerise studio highlighting enabling display buttons options

  • When you do not have an option to access LMS, you can simply share the URL of the activity with students/learners.

2. Guide to embed H5P in LMS

On your H5P activity, click on the embed button. It is located at the tool bar below your H5P activity.

A pop-up appears with embed code. Below is the screenshot of the same:-

Copy embed code of your H5P activity. Make sure you copy entire code.

For example, embed code looks like:

<iframe src="https://studio.camerisefsl.ca/h5p/206/embed" width="885" height="523" frameborder="0" allowfullscreen="allowfullscreen" lang="en" title="Introduction and an Overvew of UDL"></iframe><script src="https://studio.camerisefsl.ca/modules/contrib/h5p/vendor/h5p/h5p-core/js/h5p-resizer.js" charset="UTF-8"></script>

In D2L brightspace, in any content addition area from the toolbar, select  Insert Stuff button and a Pop-up appears with a list. Choose Enter Embed Code.

Given below is the screenshot with Insert Stuff button highlighted and pop-up screen shot with Enter Embed Code option highlighted.

Enter Embed code copied. And allow embedding from the site. (if proble occurs like embed not allowed, your administrator can help you to allow) and click on Insert, then Save.  

3. Guide to Create H5P in Moodle

It is a two step process. First add content to course content bank and add it as an activity on the Course Page.

 As a teacher, in a course on Moodle LMS you can add H5P content from Content Bank.

The content bank is an area in Moodle where content (currently H5P content) may be stored, edited and created.

The content bank repository gives access to these files from the file picker.

Where is the Content bank located in Moodle Course?

As a teacher, when you are in a course you'll find a link to the content bank from Course navigation > More (Boost-based themes) or under Site pages (Classic-based themes).

New H5P content may be created via the Add button. H5P activities can also be uploaded into the content bank then edited if required. 

3.1. Adding H5P content to Content bank

  • Access the Content bank section. 

  • Click "Add". 

  • Select H5P content type to create

  • Design your interactive content using the H5P editor. 

  • Save your H5P content to the Content bank. 

Below is the screenshot of the Content bank, Add button option.

Uploading H5P content to Content bank

  • Access the Content bank section. 

  • Click "Upload". 

  • Upload pop-up opens. Select .h5p file to upload. (Make sure your file size is within the Maximum size for new files specified in your LMS)

  • Click Upload this file and click on Save changes

  • Content open in Content bank

  • Use Edit button to edit content or use Exit button to move back to the list of contents in the content bank

Below is the screenshot of Content bank page with  Upload button highlighted.

3.2. Adding H5P content on Course page

  1. Ensure that you first have your H5P activity in the course Content bank.

  2. In a course, with the editing turned on, choose 'H5P' from the activity chooser.

  3. Give it a name and, if needed, a description.

  4. From Package file > File picker, choose content bank and choose your H5P file from the content bank files. You have two options present to select one from

    1. Make a copy of the file

    2. Link to the file

If you choose the first option, that is  Make a copy of the file, any modifications done to your H5P activity in the Content bank will not be displayed on the course page.

If you choose the second option that is Link to the file, then the modifications you do to your H5P activity in the Content bank will be reflected on the course page.

5. Expand the other sections in the Moodle LMS page to select the settings you want, like Completion settings, Common module settings etc. and then click Save and return to course. 

For further information please refer to Moodle Docs help (https://docs.moodle.org/405/en/H5P#Adding_an_H5P_activity_to_a_course)