Creating Interactive Content With H5P

If you’re looking for a way to make web content interactive, check out H5P. It is a user-friendly application that makes it easy for LX designers, writers, presenters and publishers to deliver interactive content on web platforms. Joubel, the organization behind H5P, has two sites. H5P.org for downloading interactions and H5P.com, is for paid hosting. See their pricing page to have them host your interactions. It would be nice if their pricing information was easier to find.

It currently works with WordPress, Moodle and Drupal, and can be embedded in any website. H5P is free and open source. You can see a few examples at the end of this article. Read on as I interview Timothy Lim, Core Developer for H5P, about the project.

What is the H5P project and what does it stand for?

Tim: The goal of the H5P project is to allow everyone to create, share and reuse interactive content. We’ve built a plugin for existing publishing systems like Drupal, WordPress and Moodle that allows people to create simple yet powerful interactive content all without writing a line of code. Our most popular content types are Interactive Video and Course Presentation. Check out the rest of our examples at H5P.org.

H5P stands for HTML 5 Package. Each H5P content type is simply a collection of HTML, CSS and Javascript files zipped together. This means interactive content can be shared between a huge range of websites and platforms. H5P’s can also be embedded onto any website simply by pasting an embed code.

How did you get started with H5P? What was your goal and your motivation?

Tim: The world of interactive content is almost medieval. With no common format for interactive content, the creation process—seen from a global perspective—has become very fractured and disorganized. Simple things such as multiple choice quizzes are handcrafted again and again, not only for different platforms but for different websites as well. The cost of great interactive content and tools is often extremely high since it usually involves making yet another custom version.

The H5P format is open and the tools for creating H5P content are open source. This guarantees that creatives own their own content and are not locked into the fate and licensing regime of a specific tool.

What are some of the different content types?

Tim: At this point, there are many different content types, including: course presentation, interactive video, chart, dialog cards, arithmetic quiz, drag and drop, multiple choice, memory game and more. You can see all the content types here: H5P Content Types.

Some of the many H5P interactive content types

On what platforms can someone use H5P?

Tim: As mentioned earlier, there are plugins for Drupal, WordPress and Moodle. eFrontPro has also added support for H5P and TikiWiki will support H5P in their next version. Through embedding, the community has also been using H5P’s in Blackboard, Canvas and a multitude of other platforms.

What do you see as the benefits of providing interactive content types?

Tim: Interactive content allows users to leverage the power of the web and modern computer processing. Now content may be presented in more intuitive and interesting ways. Let’s say you want to present the history of strawberries. With H5P, you may list historic events in chronological order on a page, and add some images and videos to it as well, or you may take it one step further and create a visual timeline that the user can click on and easily get an overview of the historical moments, navigating between the events freely.

How are people integrating H5P into their projects? Can you give us some examples?  

Tim: H5P is very flexible and used in many ways, for presenting content, letting learners test themselves, market new products and much more. This resource explains how usage has grown and some ways it is being used. See slide show resource. 

For example, Tim Cappelli of the University of Manchester, describes the free learning platform developed for medical students using WordPress, called tMed Learn.

“The system allows us to produce multimedia rich, attractive content available across multiple platforms. H5P is at the heart of 1Med Learn allowing us to create rich, interactive content that is ideal for medicine. Interactive videos allow us to test students on diagnostic principles. Hotspot images provide an ideal way of using clinical images. Timelines are a great way to display case histories. The University recently introduced Flipped classroom sessions into the medical curriculum and use H5P to prepare students by releasing a formative assessment the day before the flipped class. This allows students to test their knowledge and allows the school to monitor students’ engagement and understanding. The results of these tests are published in a student dashboard, alongside the cohort average, providing a gauge of their own progress as well as a motivational incentive in a nod towards gamification of assessment. H5P is the only quiz tool that allows us to do this.”

Also, watch this video that explains how the University of Colorado is using H5P.

Does H5P have data collection capabilities? Does it work with xAPI and other standards?

Tim: H5P focuses only on the content and only stores the most important result-data for the users. We leave advanced analytics to third party software, and provide them with plenty of data through our xAPI integration. Each content type generates xAPI statements with structured information about everything the user does. These xAPI statements may be sent to a learning record store as is, enriched or third party software may even convert them to other formats like IMS Caliper. Click this H5P Analytics link for more information.

To what extent does H5P follow accessibility guidelines?

Tim: Our goal is to be WCAG 2.0 AA compliant with a good WAI ARIA coverage. This is the goal for all the new things we make, and for the older content types we’re working hard to upgrade them one by one to adhere to this standard as well. There are still many content types that need upgrading, but we’re getting there.

This seems to be growing into a massive effort. How big is the H5P user community?

Tim (updated from their site): As of March 2018, H5P is being used on more than 30 000 web sites. It is used by thousands of universities, enterprises, school districts, schools, armies and other organizations.

How many people are busy programming H5P content types?

Tim: We have seven full-time people on the Core Team and all of us are employed by Joubel, the company behind H5P. There’s also a growing community of developers contributing code and creating their own content types. There is more and more community code in each release, and for the next release there will probably be a brand new content type created by a community member who isn’t part of the Core Team.

What programming languages are behind H5P?

Tim: The content types use JavaScript only. No server side code is allowed to make sure that they can be used on any system. We have the H5P core in PHP. Also as much as possible is written in JavaScript to make sure it is easy to port. There are ports or partial ports of the core to Python and JavaScript(Node.js).

H5P Example

Here is an example of an H5P drag and drop content type, using the H5P Content WordPress Plugin. After creating the example using the plugin, I was provided with a shortcode that I added to this page. A short code is a quick way to add functionality to a WordPress page without programming. Thanks for the interview Tim!

Improve your writing for instructional design and get a free monthly newsletter with relevant articles, tips and resources delivered to your Inbox once a month.