Last Update: 12/14/2016
H5P is a free, open-source library of interactive content that allows you to create and reuse content within your course. After a quick configuration within the Drupal environment, you are off and running and able to create interesting content for the students within your courses. For more information on H5P or to see simple examples, please see the H5P Examples and Downloads page. From there, you can explore the currently available content types to see if one of these may work best for your context. Each type of interactive element is referred to as a "content type." As new content types are created, they can easily be added.
Content Types and Accessibility
At this time, not all H5P content types are available in an accessible format. The following table describes all of the available content types as well as their current accessibility status.
|Accordion||Yes||Create vertically stacked expandable items.|
|appear.in||No||Add a video chat to your web page.|
|Arithmetic Quiz||Yes||Create time-based arithmetic quizzes.|
|Chart||In Progress||Generate bar and pie charts.|
|Collage||In Progress||Create a collage of multiple images.|
|Course Presentation||No||Create a presentation with interactive slides.|
|Dialog Cards||No||Create text-based turning cards.|
|Documentation Tool||No||Create a form wizard with text export.|
|Drag and Drop||No||Create drag and drop tasks with images.|
|Drag the Words||No||Create text-based drag and drop tasks.|
|Fill in the Blanks||Yes||Create a task with missing words in a text.|
|Find the Hotspot||No||Create image hotspots for users to find.|
|Flashcards||No||Create image cards. Users type the answers.|
|Guess the Answer||No||Create an image with a question and answer button.|
|Iframe Embedder||No||Embed from a URL or a set of files.|
|Image Hotspots||No||Create an image with multiple information hotspots.|
|Impressive Presentation (ALPHA)||No||Create a slideshow with parallax effects.|
|Interactive Video||In Progress||Create videos enriched with interactions (ex. quiz questions)|
|Mark the Words||In Progress||Create a task where users highlight words.|
|Memory Game||No||Create the classic image pairing game.|
|Multiple Choice||Yes||Create flexible multiple choice questions.|
|Personality Quiz||No||Create personality quizzes.|
|Quiz (Question Set)||Yes||Create a sequence of various question types.|
|Questionnaire||TBD||Open ended questions.|
|Single Choice Set||No||Create questions with one correct answer.|
|Summary||In Progress||Create tasks with a list of statements.|
|True/False||Yes||Create true/false questions|
|Timeline||No||Create a timeline of events with multimedia.|
|Twitter User Feed||No||Show your Twitter feed with H5P.|
This section describes how to enable and configure the H5P modules and install the content types in your course.
Configure the Modules
Navigate to the Modules administration page by clicking on Modules in the black navigation bar at the top of the window.
Enable the following modules by checking the ENABLED checkbox next to them. (The example image image enables the "Quiz H5P Integration" module under the "Quiz Question" section.)
Modules and Their Location Module to Enable Module Section H5P OTHER H5P Editor OTHER Quiz QUIZ CORE Quiz-Directions QUIZ CORE Quiz-Pages QUIZ CORE Quiz question QUIZ CORE Quiz H5P Integration QUIZ QUESTION Quiz - Long Answer QUIZ QUESTION Quiz - Matching Question QUIZ QUESTION Quiz - Multichoice QUIZ QUESTION Quiz - Scale QUIZ QUESTION Quiz - Short Answer QUIZ QUESTION Quiz - True false QUIZ QUESTION
Click Save Configuration at the bottom of the page.
Add Content Types to the Drupal Course
For the H5P content types to be available for use within your Drupal course, the content types will need to be downloaded and installed.
- Navigate your browser, in a separate tab or window, to the H5P Update/Install all recommended content types page at http://h5p.org/update-all-content-types.
From here, you are able to download one package that will contain the latest versions of all of the content types that are available. Scroll to the bottom of the page (stop when you see the Comments section, currently in gray) Under the heading Attachments: click on the download link. This is typically named official-h5p-release-yyyymmdd.h5p
In your Drupal course, navigate to the H5P libraries page by selecting Content->H5P Libraries from the black navigation bar at the top of the page.
- Click the Choose File button and select the .h5p file that you just downloaded. Click the Upload button to load the new or updated content types into the Drupal site.
Once the modules are enabled and the content types are installed, user permissions need to be configured in order for the content to be used correctly. These permission settings limit access to the abilities to create, modify, and delete content as well as control access to the results.
Navigate to the Permissions Page by selecting People->Permissions
Set the permissions in the H5P Section as follows:
Set the permissions in the QUIZ Section as follows:
Scroll to the bottom of the page and click the Save permissions button.
Adding H5P Element to Course
There are 3 main steps that need to be followed in order to add interactive H5P content to your course. You first will create a separate, standalone page that has the interactive content. Next you will copy the embed code from this page and use it to embed the interactive content onto your course page. Finally, you will return to the standalone page and set the display options to hide unnecessary features.
Create a Page with Your H5P Content
The first step is to create a separate, standalone page to hold your H5P content.
Select Content-> Create content->Interactive content in on the black navigation bar at the top of the window.
Fill in the title, select Create under HTML5 Content, select the desired Content type, and then fill in the required information for the content type. Click Save when you are finished.
Embed Your NEW H5P Content on Your Course Page
You are ready to embed your NEW H5P Content on your course page!
<p><iframe src="https://www.e-education.psu.edu/yourcourse/h5p/embed/1971" width="698" height="536" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
On your standalone content page, select the "Embed" link on the bottom of your H5P content.
Select everything in the embed code field and copy it to your clipboard (double click in the field and press ctrl-c.
Go to your course page, edit the page, and go to the source view. Navigate to where you want to place the code and use ctrl-v to paste it into the page.
The embed code will look (mostly) like this:
<iframe src="https://www.e-education.psu.edu/yourcourse/h5p/embed/1971" width="698" height="536" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="https://www.e-education.psu.edu/geog777/sites/all/modules/h5p/library/js..." charset="UTF-8"></script>
Remove the <script src="......." charset="UTF=8"></script> tags and surround the code with <p> tags.
Congrats! The content is now part of your course! But you're not done yet :)
Clean Up Options on H5P Content
For those that are accessing your content with a screenreader, it is important to ensure that there isn't anything that would be read by the screenreader that isn't absolutely necessary. If you look at your H5P content, notice that there is a link to download this content type as a .h5p file, obtain the embed code, as well as a link to H5P.
These options can be turned off in the original separate and standalone page for the H5P content that you created above.
- Go to the source page for your H5P content.
- Select Edit from the black navigation bar at the top of the page.
- Scroll to the bottom of the page and select the H5P Options tab.
- Uncheck the box labeled Display action bar and frame to turn off all display options for the bar.
Click Save to save the changes.
Exporting Quiz Results to Excel (or CSV)
If you are using a content type that places results into a View on a Results page, you may find exporting them to an Excel or CSV file to be useful. This can easily be done with the help of the "Views data export" Drupal module. Follow the steps below to configure the module so you can export your data. The Interactive Video results from GEOG001 is used as an example.
- (You will likely need to talk to Misty, Marty, or Tim in order to install this) Install the Drupal module "Views data export" from https://www.drupal.org/project/views_data_export
Go to the results page on your H5P content and note the name of the results page.
Find the view path that matches your results page and select the corresponding Edit button.
The results node options are displayed. From here you can do lots of things! Here are a few highlights.
- Add or remove fields from the results
- Set a default filter for the results
- Set a default sort order for the results
- Control user access to the results
Select the +Add button and then select Data export
You also have the same configuration options here! These allow you to export different data than is displayed on the screen, if desired.
Set the path by clicking No path is set. In the popup window, fill in the path. In the Page window (previous screen) the path for the H5P results view was “/node/%/h5p-results”. For this path, I am setting it to the same thing but appending the word “export”. My path for the Data Export is “/node/%/h5p-results-export”. Click Apply.
Place the download button on the page by selecting None next to Attach to in order to tell the system that the button should go on the page. Check the Page option and select Apply.
Set your filetype by clicking on CSV file default> and then selecting the filetype that you want. In this case, XLS is being selected for an Excel file. You don't need to do anything if you wish to export a CSV file.
Click on Settings next to Format. Check Provide as file so the file can be downloaded. Click Apply.
Select Save to save the changes.
Navigate to your page and refresh. (Because, Drupal, if it doesn’t show, you may need to clear your cache.) Select the CSV (or XLS or whatever type you chose) button to download the results.
The results will be downloaded. Here they are opened in Excel!