Interactive Content using H5P
What is H5P Interactive Content?
H5P is a popular plugin used to create exciting, interactive content on the web. For Pressbooks, H5P‘s demand is to create interactive quizzes and other activities in open textbooks and other open educational resources.
There are dozens of different kinds of content enabled by H5P. You can view all of them, as well as examples and more detailed instructions for creating the different types on the H5P website (Note: they offer different installation and embedding options, but that’s all taken care of by Pressbooks – you just need to think of the exciting things you can create!)
You may also check out this excellent resource called The H5P Pressbooks Kitchen created by our friends at BC Campus! This contains many examples and support information, as well as lots of community engagement regarding H5P that you may find helpful in creating your OER.
You can also create your own custom H5P activities.
The following activities can be created through H5P
H5P Activity Types
AR Scavenger Augmented reality fun!
Accordion Create vertically stacked expandable items.
Advent Calendar Create surprises that will be unveiled daily.
Agamotto (Image Blender) Present a sequence of images and explanations.
Arithmetic Quiz Create time-based arithmetic quizzes.
Audio Upload an audio recording.
Audio Recorder Create an audio recording.
Branching Scenario Create dilemmas and self-paced learning.
Chart Quickly generate bar and pie charts.
Collage Create a collage of multiple images.
Column Organize H5P content into a column layout.
Cornell Notes Take notes using the Cornell system.
Course Presentation Create a presentation with interactive slides.
Crossword Create a crossword puzzle.
Dialog Cards Create text-based turning cards.
Dictation Create a dictation with instant feedback.
Documentation Tool Create a form wizard with text export.
Drag and Drop Create drag and drop tasks with images.
Drag the Words Create text-based drag and drop tasks.
Essay Create Essay with instant feedback.
Fill in the Blanks Create a task with missing words in a text.
Find Multiple Hotspots Create many hotspots for users to find.
Find the Hotspot Create image hotspots for users to find.
Find the words Grid word search game.
Flashcards Create stylish and modern flashcards.
Guess the Answer Create an image with a question and answer.
Iframe Embedder Embed from a url or a set of files.
Image Choice Create a task where the alternatives are images.
Image Hotspots Create an image with multiple info hotspots.
Image Juxtaposition Create interactive images.
Image Pairing Drag and drop image matching game.
Image Sequencing Place images in the correct order.
Image Slider Easily create an Image Slider.
Information Wall Create information panels that users can filter for relevant keywords.
Interactive Book Create small courses, books, and tests.
Interactive Video Create videos enriched with interactions.
KewAr Code Create QR codes for different purposes.
Mark the Words Create a task where users highlight words.
Memory Game Create the classic image pairing game.
Multiple Choice Create flexible multiple-choice questions.
Personality Quiz Create personality quizzes.
Quiz (Question Set) Create a sequence of various question types.
Single Choice Set Create questions with one correct answer.
Sort the Paragraphs Create a set of paragraphs to be sorted.
Speak the Words Answer a question using your voice (Chrome only).
Speak the Words Set Create a series of questions answered by speech (Chrome only).
Structure Strip Interactive structure strip.
Summary Create tasks with a list of statements.
Timeline Create a timeline of events with multimedia.
True/False Question Create True/False questions.
Virtual Tour (360) Create 360 environments with interactions.
In order to start using H5P, you will need to activate it in for your Webbook.
- Go to Plugins
- Find H5P and click activate
After you have activated the H5P application, it will appear on the left sidebar.
Follow these steps to add an H5P element to your book. Please note that individual H5P tools require additional, separate installations.
- Navigate to the H5P Content menu and select Add New.
- Select content type from the menu.
- Install the content type by clicking on “Get” and following the steps indicated (if necessary).
- Enter the information for your quiz/activity etc.
- Click on Create when you’re done!
Now that you’ve created your element, you can add it to your chapter. To do so:
- Copy the shortcode displayed in the top right of the screen.
- Navigate to the chapter where you would like add the element.
- Paste the shortcode into place (you can do this in the visual editor, no need to switch to text).
- Save your chapter.
- View the web version to see the element in action.
- Export other desired formats to see the fallback message
You may also add the H5P content by:
- Placing your cursor at the place in the text at which you would like to add the element
- Go to the link of your H5P content
- Select your content to add
Using Math in H5P Activities
You can draft equations inside of H5P elements in Pressbooks with MathJax LaTeX. You’ll first need to add the mathematics library to your book’s H5P setup in Pressbooks. To do this:
- Make sure you have H5P activated and have the mathematics library from H5P downloaded to your device
- Go to H5P Content > Libraries from the left sidebar menu
- Click Choose File and add the H5P mathematics library
- Click Upload
To find the H5P mathematics library and read more about how to use LaTeX in H5P, see Mathematical expressions in H5Ps.
For more information about drafting equations in LaTeX, see the MathJax LaTeX section.
Render LaTeX in H5P Activities
You can render LaTeX inside of H5P activities you’ve created in Pressbooks, but you’ll first need to add the mathematics library to your book’s H5P libraries page. To do this:
- Activate the H5P plugin
- Download H5P’s mathematics library to your device
- Click H5P Content > Libraries from the left sidebar menu
- Click Choose File and select the H5P mathematics library file you downloaded in step 2.
- Click Upload
Feedback/Errata