H5P Implementation

Overview

This page outlines the how to implement H5P into your teaching environment. For a step by step video tutorial please refer to this short instructional video: HP5 Tutorial

Using H5P allows you to create interactive web page content. There are a variety of different content types that can be created.

Steps

These are the written set of steps to guide you through H5P

Step 1

- In your browser search bar type in "https://h5pstudio.ecampusontario.ca/" or click here: H5P eCampus Homepage

- Create an account for the website or log in to an existing account if you have already done so

Step 2

- Click on the tab that reads "Create"

Step 3

- Now scroll down to pick the type of interactive content you would like to create.

- For this demonstration, the "Multiple Choice" content type will be used.

- Once you decide on the content you want click on "Details".

- Now click on "Use" to start configuring your H5P content

Step 4

- Enter the "Task Description" in it's corresponding box.

- In the "Title" field enter the name of the content you are creating

- Next in the "Question" field, enter the Multiple Choice question

- Now fill in the different answers for the user to select. If another answer is needed click on "Add Option"

- Be sure to select the "Correct" bubble for the one answer that is correct.

- There are other options that can be customized to your liking, but they will not be changed in this guide

- When finished customizing your content, look to the top of your page and click "Save".

Step 5

- Now you should be able to see your content on the web page

- Below it there should be an "Embed" icon that you are able to click.

- Click on this and copy the link it provides you. This will be what is used to add the content to your course platform.

Step 6

- Navigate to the area of your course that you would like to add the H5P content.

- Build new content and select a type that has an HTML editor built in to its text field

- In this example selected "Build Content > Create > Item"

- In the text editor select HTML Code View

- Next copy and paste your H5P embedded code into the editor from the content you created

Step 7

- Click update and then select "Submit" at the bottom right of your page.

- Finally, test the webpage to ensure the content you created works successfully.