Outfitting Your Pack: Tools and Interactivity
H5P for Presenting Your Content
Why Consider H5P?
With nearly 50 different types of interactivities available, H5P can be used for many different purposes in your OER. H5P (HTML-5 Package) is a free, open-source interactivity builder. As mentioned, the choice of which technology you use in your OER should be driven by whether or not it can support the learning objective, rather than just about adopting a cool tool. While H5P has some cool capabilities, more importantly, it can support a variety of best practices and learning theories.
Research around using H5P has shown that it can
The next few pages will offer a look book of many (but not all) H5P types, organized by H5P types:
- H5P for Presenting Content – H5P types to present or organize your content, whether it be text, images, videos, or audio
- H5P for Formative Assessment – H5P types that provide opportunities for practice in all kinds of ways and using all sorts of media
- H5P for Reflection and Deep Learning – H5P types that offer interactive reflection and intentional, scaffolded learning
H5P also provides
Authoring Guides and Tutorials
Using H5P to Present and Organize Your Content
This section will highlight H5P that can help you organize and present your content in your OER.
The various H5P types in this chapter can be used to support the Universal Design for Learning’s (UDL) Multiple Means of Engagement, Representation, and Action and Expression. These tools promote engagement by offering interactivity and a variety of media.
Select the arrows to see and play with samples of each H5P type.
H5P with Audio
Besides offering another way for users to access content (a UDL principle), offering audio in OER for courses like Communications or Music courses is vital for learners to gain understanding and an immersive experience.
H5P Audio Recording
H5P Audio Recording
This tool allows you to present your content in an audio recording.
Consider how this Communications 101 course allows students to read and hear an example of using an attention grabber in a speech:
“Just how big is a billion? To put this in perspective, let us look at a single second. Now, let’s figure out how much time passes in one billion seconds. Any guesses? It takes more than 31 years. If you started counting to one billion when Orson Welles’ War of the Worlds radio broadcast convinced some Americans that aliens had invaded the country in 1938, you’d finish counting around the time Neil Armstrong took his first step on the moon.”
Examples
- Developing Organizational and Managerial Wisdom, 2nd Ed. used this tool to create an audiobook version of their Pressbook.
- Another example of the H5P Audio Recording tool.
H5P with Images and Figures
Sometimes a picture can be “worth a thousand words.” It can also engage your learners, break up a page of static text, and solidify a memory. In some fields of study, such as Art or Design, learners need to be able to study an image. In others, such as Data Analytics or Research, figures need to be studied. While Pressbooks allows images and figures to be brought in independently, several H5P tools can hold images and figures in ways that may be more meaningful for your learners.
H5P Tools: Collage, Chart, and Image Slider
H5P Tools: Collage, Chart, and Image Slider
Look through this H5P Interactive Book to find several ways of using images to display or support your content.
View and interact with the following video as Professor Melisa Garcia of the University of San Francisco shares how and why she chose the H5P Image Slider as the modality for her student’s — Alyssa Guevara’s — comic strip submission “The Linguistic Tales of the Super Code-Switcher”. Using H5P not only transformed the student’s assignment into a key artifact in the OER, but it also expanded access to the student’s story and voice.
H5P Image Hotspots
Image Hotspots
This H5P Image Hotspot is from the Production chapter of No-Nonsense Filmmaking, which allows learners to explore members of the crew and a typical production day through H5P Image Hotspots.
More examples of Image Hotspots H5P
H5P for Image Interactivity
Sometimes learners need to be able to study or compare several images over time. For example, in Climate Studies, learners need to be able to see changes in images of the ocean or land over time. Sometimes you want your learners to interact and observe something but not necessarily practice with it or receive feedback about it. H5P has a couple of tools that can help facilitate that.
H5P Agamotto
H5P Agamotto
This tool allows creators to use two or more images to show changes over time, changes in proximity, or variations between images. Short, text explanations can be added as well.
View and interact with the following video as Professor Mischa Livingstone of Loyola Marymount University shares how he chose and used H5P that mimicked the concepts and processes film students would need to replicate, using H5P Agamotto, H5P Interactive Books, and many other H5P types to present images – but also gifs – as content.
H5P Image Juxtaposition
H5P Image Juxtaposition
This tool is similar to Agamotto, but only with two images and no explanatory text. It also allows creators to slide between the images using a vertical or a horizontal slider.
More examples of Image Juxtaposition
H5P 3D
H5P 3D
This tool allows users to dynamically zoom in and manipulate a 3D image. Note that this is a new H5P type still in beta.
Built by Michelle McCully with an image created with PyMOL, this H5P 3D image allows students to interact with and explore a 3D model of a hydrogen bond.
View and interact with the following video as Professor Michelle McCully of Santa Clara University shares how she and her team used H5P 3D as an example of presenting content and H5P Quizzes with embedded feedback as an example of formative assessment.
H5P for Condensing Page Content
H5P Accordion
H5P Accordion
This tool allows you to condense the amount of text content on a page by breaking it up into expandable portions. Learners can interact with it by choosing which headlines to open and read.
More examples on the H5P Accordion tool.
H5P Dialog Cards
H5P Dialog Cards
This tool can replace paragraphs of text explanations with interactive flip cards that can hold images and/or text. It can also be used as a tool for learners to practice or drill content they need to memorize, such as historical events, formulas, names, or definitions.
Consider these Dialog Cards used for learners writing a persuasive speech:
Examples
Genome and Genome Evolution, a chapter from Concepts in Biology, uses colorful images in its Dialog Cards to aid visual memory of key terms (scroll to end of chapter).
Whistle-Blowing and Conflicts of Interest, a chapter from Business Ethics and Social Responsibility, uses Dialog Cards as a way to review concepts.
More examples of the H5P Dialog Cards
H5P Timeline
This tool can help learners visualize and interact with sequenced content, such as events through time or processes.
H5P Timeline
H5P Timeline
Consider this example of an H5P Timeline used in a Business course:
Examples
Keller’s ARCS Model of Motivational Design, a chapter from Design in Progress: A Collaborative Text on Learning Theories, uses the H5P Timeline to allow exploration of the evolution the ARCS Model.
More examples on the H5P Timeline
- Mutawa, A. M., Al Muttawa, J. A. K., & Sruthi, S. (2023). The effectiveness of using H5P for undergraduate students in the asynchronous distance learning environment. Applied Sciences, 13(8), 4983. https://doi.org/10.3390/app13084983 ↵
- Huff, T., Tseng, D.C.Y. (2025). Active Learning in Open Digital Textbooks: Designing for Learner Engagement and Motivation using H5P. TechTrends, 70, 240-252. https://doi.org/10.1007/s11528-025-01144-3 ↵
- Carr, W. H. (2021). Using the H5P digital platform as an active learning tool to build content-based critical thinking skills in an undergraduate immunology course. The Journal of Immunology, 206(1_Supplement), 54-06. https://doi.org/10.4049/jimmunol.206.Supp.54.06 ↵
- Rahmi, U., Fajri, B. R., & Azrul, A. (2024). Effectiveness of interactive content with H5P for Moodle-learning management system in blended learning. Journal of Learning for Development, 11(1), 66-81. ↵
