The HTML 5 Plugin is a toolbox with a number of activities that allow you to create and share interactive content on Moodle to enhance your student's learning experience throughout the course. There are a wide-range of activities available to choose from, ranging from Interactive Videos, Image Hotspots and Drag and Drop Questions. These activities are designed to engage with your students while also testing their knowledge on the content as the course progresses.
Ease of use - As H5P is an activity within Moodle, instructors can use programs within an interface they are already familiar with.
Variety - H5P supports a wide-range of activities, allowing instructors to choose one that best suits their course. The most common and useful activities include:
- Fill in the blanks - Complete the text with the most appropriate words
- Course presentation - Use interactive slides in your presentation to engage with the audience
- Find the Hotspot - Select a part of the image you think is the correct answer
Student learning experience - Instead of the traditional multiple choice quizzes, create interactive activities such as a Memory Game to keep your students interested and engaged throughout the course.
Accessibility - Only a web browser and access to Moodle is needed to complete the H5P activities.
H5P supports a variety of activities, allowing instructors to choose whichever best suits their course. For example, instructors can create a Find the Hotspot activity for courses that use many images in their content.
The instructor chooses a hotspot on the image, where students get the correct answer if they click within the marked circle. Adding interactive activities such as this can help students to better understand the course content as they prepare for their exams.
While there are many default activities that can be used, the Plugin also lets you easily import other suitable activities that were found elsewhere.
List of Activities
|Type of Activity||Description||Activity Icon|
|Accordion||Create expandable items that can be toggled to open or close|
|Arithmetic Quiz||Create time-based arithmetic quizzes|
|Column||Combine multiple H5P activities into one page for an improved learning experience|
|Course Presentation||Include various H5P activities to engage the audience in your presentations|
|Dialog Cards||Create text-based turning cards|
|Drag and Drop||Create a drag and drop activity to match the image with the correct word|
|Drag the Words||Create a drag and drop activity to match the words with the correct answer|
|Fill in the Blanks||Fill in the most appropriate word to complete the sentence|
|Find Multiple Hotspots||Click multiple parts of the image to correctly answer the question|
|Find the Hotspot||Click a part of the image to correctly answer the question|
|Flashcards||Use flashcards to easily memorize content|
|Image Hotspots||Click parts of an image to get a popup containing text such as definitions or descriptions|
|Image Juxtaposition||Create interactive images|
|Interactive Video||Make your video interactive by making activities appear in specific parts of the video|
|Mark the Words||Select words from a text that correctly answers the question|
|Multiple Choice||Create a traditional multiple choice quiz to test your student's knowledge|
|Single Choice Set||Create a sequence of questions with only one correct answer|
|Speak the Words||Answer a question using your voice (Chrome only)|
|Summary||Choose the correct statement out of the choices given and review the results|
|Timeline||Make a timeline of events with various multimedia content|
|True/False question||Create a traditional true/false question that you can embed into some other H5P activities|
Tutorials are available for some of the activities here
Adding a H5P activity
- On the course home page, click Turn editing on.
- In the appropriate topic or week section, click Add an activity or resource. In the resulting pop-up, select Interactive Conten from the list and click Add.
- On the Adding a new Interactive Content page, fill in the basic details. Under Restrict access, you may want to add a restriction date for students to complete the activity.
- Select the activity you want to add by clicking the drop-down menu next to Editor.
- You can use the search bar to find the activity if you know its name, or scroll down to browse the available activities. Click Use to select the activtiy.
- You can also upload an H5P file by clicking on the Upload button at the top, then Upload a file. You will be prompted to select a .h5p file from your computer.
- After selecting an activity, follow the steps to fill in the required information.
- The information needed will depend on the nature of the activity. For example, Fill in the Blanks would need a sentence or paragraph with the missing words marked out. Some activities will need a file such as an image to be uploaded.
- You can click on the Tutorial button above the activity for a guide on how to make the activity.
- You can click on the Example button to view what the activity will look like.
- Once completed, click Save and return to course at the bottom of the page.
Using theBox videos in H5P
You can use theBox videos in H5P.
To get the URL for a theBox video;
- In the Media tab click on Create Link
- Select Standard or High Quality
- Give it a short label name in the pop-up
- Click on the copy link button
- Paste the URL link
H5P activities can be embedded into other pages in your course, for example you can use a H5P accordion or video in a label on your course main screen. To do this:
- Add a H5P activity, you can use the above "Adding an H5P activity" tutorial.
- On your course home page, click on the H5P activity.
- Click on the 'embed' button under the H5P activity
- Copy the text in the embed pop up
- In the editor, click the 'Edit HTML source' button.
- Paste the text into the HTML Editor window
- Click 'Save and return to course'
- The H5P activity is now embedded in your page, you can update the activity and the embedded activity will also update
Resize embedded activity
This is an advanced guide. To set a specific size for the embedded H5P activity, surround the H5P embed code with a sized div.
To do this:
- In the editor, click the 'Edit HTML source' button.
- Paste "<div style="width: 400px;" height:400px="">" before the H5P text and "</div>" after.
- Change the 400px to the height and width that you want.