Get Started

To integrate content from PSU.h5P.com you can use the LTI.  LTI is already developed and in place, so once a license is purchased the user has access to graded H5P in Canvas. Storage space and updates are managed for us. The Joubel admin team support is available for any issues that arise. To create new content on this instance of H5P, you will need to successfully log in to your account that you created on h5p.com or if you have logged into an account on Penn State’s instance.

 At the top right of the web page after logging in there is a button labeled “Add Content”, click this to choose a content type and start creating. On the list of content types there are “Details” buttons for all of them, to use the content type click this button and then click the button “Use” that will now be visible after “Details” is clicked. Regardless of the content type, the same sharing options are displayed at the very bottom of the content editor once one is selected. Shown below is the sharing options you should see.

Under the “Publish” tab are the options for the status of the content, and to be used in Canvas it needs to have a “Public” status. This will enable the external link and embed code to be used for referencing the module in a hyperlink, or embedding the content. Simply click the text below the option you wish to use and it will be copied to your clipboard for pasting. 

To use this module in Canvas, create a new assignment and paste the code from the “Embed code” option into the html editor in Canvas, not the rich content editor. The following screenshot demonstrates how the assignment should look in the html editor. By default the assignment will be in the rich content editor, and you will need to click the button labeled “HTML Editor” which appears as a hyperlink. 

As shown in the screenshot, the embed code copied from the options on the H5P webpage was pasted in the HTML editor. Make the assignment worth zero points, and no submission type as this is purely for practice assessment purposes. Save and publish the assignment to see the H5P module displayed for student practice. Again, the LTI for this type of integration is not enabled to communicate scores from the module to the Canvas gradebook. For this you will need a licensed account. For more information on this process you can access the H5P User Guide.

H5P Content is embedded in the same manner as a YouTube Video, you place an iframe code where you want the H5P or video to appear. E.g.

<iframe src=”https://h5p.org/h5p/embed/707″ width=”1090″ height=”361″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>

What makes H5P Content different from a YT Video is that the H5P Content usually doesn’t have a static width to height ratio like a video does. This means that H5P Content may change height as you interact with them. This is a problem since one of the limitations with using an iframe is that it won’t adjust to the size of its content, it will show scrollbars or hide the content which overflows. To get the embed code, choose embed at the bottom of the created interaction.

This is a view of a multiple choice content; the full H5P plugin is available through WordPress (not PSU Sites) and Pressbooks. This is not currently available through Penn State Sites, as the server can not support it. However it can work from your own instance.

There will be no recorded grades to the gradebook, and no analytic reports of the content’s interactions by users.

By using H5P in a Drupal instance we have the opportunity to choose an interaction content type, embed the completed interaction anywhere in a Drupal page or on a Canvas page. With some extra effort, the entire Drupal page can be iframed into Canvas without the Drupal chrome around it. 

How to Install H5P on Drupal

First, find out what version of Drupal you are using. The H5P module is available for Drupal 7 and 8, though for Drupal 8 there is not an official release, just a ‘release candidate’.

• For Drupal 7, the module must be downloaded and placed in the modules directory on the server’s file system. This may require administrative access to the Drupal server. 
• For Drupal 8, the command line program ‘composer’ is used to download (and its dependencies) and install the module.

After installation is complete, enable both the ‘H5P’ and ‘H5P Editor’ modules on the Drupal site’s modules page. 

• For Drupal 7, a new content type in the Content menu will be created called ‘interactive content.’  
• For Drupal 8, H5P is available as a field, which can be added to an existing or newly created content type of your choosing.

At this point, user’s can create H5P interactions provided they have the correct permissions. 

How to Create Interactive Content using the H5P Module in Drupal