H5P Interactive Content Guidebook

Site: Online Learning & Educational Technology (OLET)
Course: Online Learning & Educational Technology (OLET)
Book: H5P Interactive Content Guidebook
Printed by:
Date: Friday, March 29, 2024, 2:34 AM

Overview

H5P (HTML5 Package) is an authoring tool for a number of interactive content types, which can also be shared between instructors as a downloaded file or URL link from other H5P-enabled sites, like Canvas, D2L Brightspace, Blackboard, Moodle, and WordPress.

Take a moment to review the content types listed at right.

Create H5P interactive content

Moodle offers several ways to create interactive, optionally-graded H5P content. However, the Content bank affords the most efficient path to content creation.

Begin with a review of your Moodle course and the H5P content types currently available. (H5P regularly adds content types, as well as examples of those types in use.) Open your Moodle course and select the Content bank from the Nav drawer. NOTE: The Content bank will display any H5P content that has been previously added to that course.

Here the Content bank allows you to Add new or Upload pre-existing H5P interactive content (see Reuse content for details). Select Add, then select the H5P content type you want to use from the dropdown menu. Once you have completed the content type form, scroll to the bottom of the page and select Save.

Watch the H5P Add interactive content video for more detail.

NOTE: You will be required to complete any form prompt with a red asterisk (*). Be sure to give your newly-created content a distinct name, so you can distinguish it from other content. All content is editable.

Embed H5P interactive content

You can embed previously-created HP content almost anywhere in your course where you have access to the ATTO text editor.

Select the Insert H5P button in the ATTO text editor, then choose Browse repositories to bring up the File picker. The Content bank will display all of the H5P content available in the course. However, if you need to access H5P content from another course, you can navigate to that content via the available System folders.

Next, select the H5P content you want from the list, complete the file information requested, choose Select this file and then the Insert H5P button.

How do I create a gradable H5P activity?

To create a gradable H5P activity that will automatically populate into the Moodle Gradebook, you need to use the Add an activity or resources link in your course, then select H5P.

NOTE: Be aware that some H5P content types support completion tracking, while others do not (see H5P Content Types and Completion Settings for details).


Once you have named your H5P Activity, select: Use the content bank (opens in new window) to manage your H5P files. There you can Add new or Upload pre-existing H5P interactive content. Select the Add icon to open the File picker and access the Content bank.

Be sure to complete the Grade and Activity completion options before you Save and return to course. The H5P Activity will then appear in your Moodle Gradebook.

Content bank Organization

We recommend that you keep the  Content bank well organized by renaming and deleting H5P files as needed. Here's how:

Go to the Content bank and click on the H5P Activity you want to modify. Once the activity opens up, click on More to reveal the Rename, Replace with file, Download, and Delete menu.

OER and H5P

What are open educational resources (OER)?

There are some disputes around the definition of OER, but there are a few things that most agree on:

  • An OER is open and free to use
  • An OER should also be free to repurpose and distribute
  • An OER may be any type of digital resource

According to Wikipedia, the term was firstly coined at UNESCO’s 2002 Forum on Open Courseware and designates:

teaching, learning, and research materials in any medium, digital or otherwise, that reside in the public domain or have been released under an open license that permits no-cost access, use, adaptation, and redistribution by others with no or limited restrictions. Open licensing is built within the existing framework of intellectual property rights as defined by relevant international conventions and respects the authorship of the work.

Oregon OER textbooks can be found at Open Oregon Educational Resources.

What's the relationship between OER and H5P?

H5P is an open-source community-driven project that was developed with "the vision to empower everyone to create, share and reuse interactive content." So by definition, H5P is the ultimate open educational resource (OER). H5P works to facilitate global collaboration on making the best tools and templates for OERs and other interactive content available via its nearly-completed H5P OER HUB.

Additionally, H5P makes sure that content creators—you—get proper credit and that the licensing information stays with the content when it gets transferred from one website to another, and modified.

What's the difference between Reuse and Embed?

As you search for pre-existing content to embed, you may notice Reuse and Embed under the H5P activity.

Reuse lets you download, upload, then modify any parts of shareable H5P content. For example, you could reuse parts of someone else's H5P content or modify their content specifically to fit your needs. Learn how to reuse H5P content in this tutorial.

You can also embed the entire H5P activity as-is anywhere where you can edit HTML content (available via the ATTO text editor).

When prompted via the Insert H5P button in the ATTO text editor, use Browse repositories to upload your H5P file.

Accordion


This content type reduces the amount of text presented to your students. Students decide which headlines to take a closer look at by expanding the title.

NOTE: For more H5P examples, explore the Content Bank in this course or visit H5P Examples and Downloads.

Agamotto


This content type allows you and your students to compare and explore a sequence of images interactively. You can also decide to add short explanatory text for each image.

Learn how to create Agamotto in this tutorial.

NOTE: For more H5P examples, explore the Content Bank in this course or visit H5P Examples and Downloads.

Arithmetic Quiz


This content type generates random arithmetic quizzes. All you have to do is decide the type and length of the quiz. Students keep track of their scores and the time spent solving the quiz.

NOTE: For more H5P examples, explore the Content Bank in this course or visit H5P Examples and Downloads.

Branching Scenario

This flexible content type enables you to present your students with a variety of rich interactive content and choices—dilemmas, self-paced learning scenarios, and other types of adaptive learning. The content may be video-based or based on a large selection of other H5P content types, and the choices your students make determine the content they see. 

Learn how to create Branching Scenarios in this tutorial.

NOTE: For more H5P examples, explore the Content Bank in this course or visit H5P Examples and Downloads.

Chart


This content type allows you to create pie charts and bar charts when you need to present simple statistical data graphically without manually creating the artwork.

NOTE: For more H5P examples, explore the Content Bank in this course or visit H5P Examples and Downloads.

Collage


This content type allows you to set up multiple photos in a custom layout using only a web browser.

NOTE: For more H5P examples, explore the Content Bank in this course or visit H5P Examples and Downloads.

Course Presentation

This content type consists of slides with multimedia, text, and many different types of interactions like interactive summaries, multiple-choice questions, and interactive videos. Students can experience new interactive learning material, then immediately test their knowledge and memory.

Learn how to create Course Presentations in this tutorial.

NOTE: For more H5P examples, explore the Content Bank in this course or visit H5P Examples and Downloads.

Dialog Cards


This content type can be used as a drill to help students memorize words, expressions, or sentences. On the front of the card, there's a hint for a word or expression. By turning the card over, the student reveals a corresponding word or expression. 

Dialog cards can be used in language learning, to present math problems, or help students remember facts such as historical events, formulas, or names.

NOTE: For more H5P examples, explore the Content Bank in this course or visit H5P Examples and Downloads.




Crossword


This content type allows you to build crosswords to engage your students. The crosswords are highly customizable allowing you to configure all colors, upload a background image, decide how scoring should work, and even randomize the words in it so that your students get a new crossword each time.

NOTE: For more H5P examples, explore the Content Bank in this course or visit H5P Examples and Downloads.

Dictation


This content type allows you to create dictation exercises so your students can develop their listening comprehension and spelling skills.

NOTE: For more H5P examples, explore the Content Bank in this course or visit H5P Examples and Downloads.

You can add audio samples containing a sentence for dictation and enter the correct transcription. Your students can listen to the samples and enter what they have heard into a text field. Their answers will be evaluated automatically.

Several H5P options will allow you to control the exercise's difficulty. You can optionally add a second audio sample for a sentence that could hold a version spoken slowly. You can also set a limit for how often a sample can be played, define if punctuation should be relevant for scoring, and decide whether small mistakes like typing errors should be counted as no mistake, a full mistake, or just a half mistake.

Learn how to create Dictations in this tutorial.

Drag and Drop


This content type enables your student to associate two or more elements and to make logical connections in a visual way.

NOTE: For more H5P examples, explore the Content Bank in this course or visit H5P Examples and Downloads.

You can create Drag and Drop questions using both text and images as draggable alternatives. You can also try multiple draggable to drop zone combinations: one-to-one, one-to-many, many-to-one and many-to-many.

Learn how to create a Drag and drop question in this tutorial.

Drag the Words


This content type allows you to create textual expressions with missing pieces of text. The student then drags a missing piece of text to its correct place, to form a complete expression.

Drag the Words may be used to check if a student remembers text, or if the student understands something. It helps them think through a text.

It's super easy to create a drag the words task. You just write the text and enclose the words that are to be draggable with asterisk signs like *draggableWord*.

NOTE: For more H5P examples, explore the Content Bank in this course or visit H5P Examples and Downloads.

Essay


This content type allows students to receive instant feedback on a text that they have composed. You can define a set of keywords that will trigger individual responses if they are found or missing in the text.

The text which students created will be scanned for keywords that have been defined by you beforehand. Several options make this rather simple approach quite flexible for giving feedback.

You can restrict the number of characters that the students may use to cover all the important aspects of a given topic. This way they can stimulate cognitive efforts that are needed to distinguish between important facts and less relevant details. Also, you cannot only award points for keywords that have been found (multiple times), but you can provide verbal feedback. If a crucial keyword is missing, you could e.g. point out that an important aspect seems to have been neglected and should be considered when writing the next iteration of the text. On the contrary, if a keyword is found, you could praise the student and confirm the significance of the aspect which the word represents.

The content type does not replace grading but could assist you.

Learn how to create Essays in this tutorial.

NOTE: For more H5P examples, explore the Content Bank in this course or visit H5P Examples and Downloads.

Fill in the Blanks


This content type allows you to create fill-in-the-missing-words text. Students are shown a solution after filling in all the missing words, or after each word depending on the settings. You enter text and mark words to be replaced with an asterisk.

In addition to native and second language learning, Fill in the Blanks can be used to test students' ability to reproduce facts or produce mathematical inferences.

NOTE: For more H5P examples, explore the Content Bank in this course or visit H5P Examples and Downloads.

Find the Words


This content type is a word search activity that allows you to create a list of words that will be drawn in a grid. Your students' task is to find and select the words in the grid.

NOTE: For more H5P examples, explore the Content Bank in this course or visit H5P Examples and Downloads.

Flashcards


This content type allows you to create a single flash card or a set of flashcards that have both questions and answers. Students are required to fill in the text field and then check the correctness of their solution.

NOTE: For more H5P examples, explore the Content Bank in this course or visit H5P Examples and Downloads.

Image Hotspots


This content type makes it possible to create an image with interactive hotspots. When the student presses a hotspot, a popup containing a header and text or video is displayed. Using the H5P editor, you may add as many hotspots as you like.

NOTE: For more H5P examples, explore the Content Bank in this course or visit H5P Examples and Downloads.

Image Slider


Present your images in an appealing way with ease. You just have to upload images and provide alternative texts for the images.

The next two images are always preloaded so switching between images will usually be snappy with no delay for loading the next image.

Images may be experienced as part of the page or in full-screen mode. When used as part of the page the system will pick a fixed aspect ratio depending on the images being used. You may decide to handle aspect ratios differently.

NOTE: For more H5P examples, explore the Content Bank in this course or visit H5P Examples and Downloads.

Interactive Video

This content type allows you to add multiple-choice and fill-in-the-blank questions, pop-up text, and other types of interactions to your videos, such as:

  • drag-and-drop questions
  • single-choice question sets
  • images
  • links
  • free-text questions
  • mark-the-word activities
  • tables
  • interactive summaries
  • drag-and-drop text
  • labels

All question types can be configured to perform adaptive behavior, meaning that a correct answer can move the student to a specified place in the video while an incorrect answer can take the student somewhere else in the video. Typically, submitting a wrong answer will direct the student to the place in the video where the answer to the question is presented.

Learn how to create Interactive Video in this tutorial.

NOTE: For more H5P examples, explore the Content Bank in this course or visit H5P Examples and Downloads.

Mark the Words


This content type allows you to create textual expressions with a defined set of correct words. Your students highlight the words according to the task description and receive a score.

It is super easy to create a click the words challenge. You type in the text and enclose the words that your student is supposed to click (the right answers) in asterisks like *correctWord*.

NOTE: For more H5P examples, explore the Content Bank in this course or visit H5P Examples and Downloads.

Memory Game


This content type allows you to create your own memory games and test the memory of your students.

Learn how to create a Memory Game in this tutorial.

NOTE: For more H5P examples, explore the Content Bank in this course or visit H5P Examples and Downloads.

Speak the Words


This content type (via voice recognition) allows you to create your own questions and make the student answer with their own voice. NOTE: This content type has limited browser support and currently works only with Chrome.

NOTE: For more H5P examples, explore the Content Bank in this course or visit H5P Examples and Downloads.

Timeline


This content type allows you to place a sequence of events in a chronological order. For each event, you may add images and texts. You may also include assets from Twitter, YouTube, Flickr, Vimeo, Google Maps, and SoundCloud.

Learn how to create a Timeline in this tutorial.

NOTE: For more H5P examples, explore the Content Bank in this course or visit H5P Examples and Downloads.

FAQs