Style Guide & Examples
h5p Examples
An H5P plugin makes it easy to create interactive content but it will not appear in PDF exports of the book. Preview and explore the content types used throughout our interactive textbooks below. Click here to find even more examples of H5P activities but remember to check the accessibility of new interaction types.
Settings
Quiz Questions
- H5P pass percentage is always 100
- Retry and Show solution (when more than 2 choices) should be enabled
- When there are Multiple Answers, add “You missed this one!” to the Display if not selected box
iFrames
- Title: use document title
- Width: 400px
- Height: 250px
- Source: URL to doc is in Pressbooks Media
- Check resize supported
Tip: If you have to replace a PDF with a different or updated version, use the “Replace the file, use new file name and update all links” and update the H5P with the new name URL to get the iFrame to update.
Examples
Accordion
Reduce the amount of text presented to readers by using this responsive accordion to create vertically stacked expandable items.
Test Your Knowledge
Examine the following protocols for daily sanitation of single compartment cages occupied by the same cats.
Collage
Create a neat collage from multiple images. Hover over each individual image to view caption text.
Course Presentation (with interactive slides that may include quiz questions)
Create an HTML5-based presentation which allows users to add formatted text, images, external links, multiple choice questions, fill in the blanks, and more!
Dialog Cards
To create digital text and image based flash cards. Audio may also be embedded as an added learning tool.
Test Your Knowledge
Essay (Think About It)
Modifying the Essay feature as seen below allows us to provide students with instant feedback as a response to text that they have composed. Using the “Learning Objectives” textbox to frame the activity, students are prompted to pause and reflect on a scenario.
Think About It
Iframe Embedder
The Iframe embedder uses H5P to display content existing in most JavaScript applications such as a PDF file or presentation.
Image Hotspots
Add hotspots to images that reveal text, images or videos when clicked on. Embed into frame using the “Key Takeaways” textbox.
Find the Problems
Multiple Choice
Test Your Knowledge
Question Set
Test Your Knowledge