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.