H5P Interactive Content

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.

H5P Content Types and Accessibility Status
Content Type Accessible? Description
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.

Configuration

This section describes how to enable and configure the H5P modules and install the content types in your course.

Configure the Modules

  1. Navigate to the Modules administration page by clicking on Modules in the black navigation bar at the top of the window.

  2. 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
  3. 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.

  1. 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.
  2. 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

  3. 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.

  4. 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.

     

Set Permissions

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.

  1. Navigate to the Permissions Page by selecting People->Permissions

  2. Set the permissions in the H5P Section as follows:

  3. Set the permissions in the QUIZ Section as follows:

  4. 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.

  1. Select Content-> Create content->Interactive content in on the black navigation bar at the top of the window.

  2. 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>

  1. On your standalone content page, select the "Embed" link on the bottom of your H5P content.

  2. Select everything in the embed code field and copy it to your clipboard (double click in the field and press ctrl-c.

  3. 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.

  4. 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>

  5. Remove the <script src="......." charset="UTF=8"></script> tags and surround the code with <p> tags.

  6. 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.

  1. Go to the source page for your H5P content.
  2. Select Edit from the black navigation bar at the top of the page.
  3. Scroll to the bottom of the page and select the H5P Options tab.
  4. Uncheck the box labeled Display action bar and frame to turn off all display options for the bar.
  5. 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.

  1. (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
  2. Go to the results page on your H5P content and note the name of the results page.

  3. Select Structure->Views

  4. Find the view path that matches your results page and select the corresponding Edit button.

  5. 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
  6. Select the +Add button and then select Data export

  7. You also have the same configuration options here! These allow you to export different data than is displayed on the screen, if desired.

  8. 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.

  9. 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.

  10. 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.

  11. Click on Settings next to Format. Check Provide as file so the file can be downloaded. Click Apply.

  12. Select Save to save the changes.

  13. 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.

  14. The results will be downloaded. Here they are opened in Excel!