Using H5P Content in Canvas

Canvas, Content Creation, Featured 7 Comments

Bridge

“H5P is a free and open-source content collaboration framework based on JavaScript” – Wikipedia

This means that it can be used to create rich HTML 5 content that can be used in many web platforms including Canvas. This content can be shared, reused and modified and this all done through a browser with no desktop software required. It is entirely free to use and is licensed under an MIT license.

There is a library of common content types that are built using H5P. At the time of writing there are 34 content types but this number is growing all the time.

Using H5P in Canvas at RMIT

For the most part H5P just works when included in Canvas. Having said that, because H5P elements are embedded objects and they can change in size, a small script is required to be installed within Canvas that handles the resize of embedded H5P objects. We have requested that this scrip be included in RMIT’s installation of Canvas.

You can still use H5P without that script being present. Just beware that resizable components such as accordions may generate scroll bars as they resize. The steps to use H5P in Canvas are as follows:

Place H5P on a page or assignment

Click the plus under the assignments tab to add a new assignment or click the plus under the pages tab to add a new page.

Title your page or assignment, and click the HTML Editor link.

Paste in the embed code you copied above (removing the script tags at the end).

Click the “Rich Content Editor” link to switch back to the page editing mode and add any text directions above your embedded content. Be sure to click the blue save button when you are done.

You will now see your H5P element embedded in your page.

Important: If you don’t see any content then it is probably because the site that the H5P component is hosted on does not use SSL. That is to say it doesn’t use https. I’ll cover that more in a moment when I look at places that you can create H5P content.

How to Create H5P Content

While Canvas can be used to include H5P content, at the moment it can’t be used to author H5P content. There are several ways that H5P content can be created.

  1. Use h5p.org – on this site you can register for a free account and then build H5P objects there
  2. If you have access to an installation of Moodle, Drupal or a self hosted WordPress site then you can build H5P content in those spaces if you have the right plugins/extensions installed. Many staff in the College of Design and Social Context in Schools for whom we have created community sites will have the ability to create H5P content already. Please contact us if you think that might mean you.

In the video below I will show you how to create a simple piece of H5P content.

 

In future videos I will explore some of the other H5P content types, how and why you might use them and how you can get data from them.

Leave a Reply

7 Comments on "Using H5P Content in Canvas"

Notify of
avatar
Sort by:   newest | oldest | most voted
Hoang Le Vu
Guest

Hi Mark Smithers,

Thank you for useful article about H5P. My name is Vu I’m from RMIT Vietnam I’m now working in School of Language and English (SLE). I’m using Adapt FrameWork (Scorm object) and H5P to make content for some English courses. I really hope to know how can get data from H5P contents to Canvaslms in your coming up videos. Thanks!

trackback

[…] Mayson yesterday enthusing about being able to embed 3D objects into Pages. Following on from the potential to embed HP5 in Canvas, this is a pleasing development.The first is a sunglasses model which should be viewable in Google […]

Hoang Le Vu
Guest

Hi Mark,

Yes, you’re right about xAPI but I’m just misunderstood when you say ‘In future videos I will explore some of the other H5P content types, how and why you might use them and how you can get data from them.’ about get data from H5P content.

Thembi Mason
Member

Hi Mark – this is fantastic! Thanks!

wpDiscuz