Bring Your WP Courseware Courses to Life with H5P Interactive Content

wpcw_and_h5pThe world of e-learning is constantly changing and evolving. As readily available technologies emerge, new tools are allowing the online learning experience to become more effective and efficient. With every new advance in browser capabilities or handheld devices, courses become richer and more accessible allowing the process of consuming information to benefit larger numbers of learners.

One project we’ve been keeping a close eye on in the e-learning technology space is the H5P project, originally initiated by the Norwegian open-source firm, Joubel.

So What is H5P and How Does It Enhance Online Learning?

If you aren’t familiar with the H5P, it all began in 2012 with a public grant to the Norwegian-based National Digital Learning Arena, an agency seeking ways to improve the accessibility of online learning tools for high school students in their country.

Fast forward a few years, and a global team of volunteer contributors has developed a completely new format for rich interactive web-based content for use in educational environments.

Why does this matter to you as a WP Courseware user?

I’m glad you asked! H5P has an incredible library of web-based tools for creating interactive content which can be used absolutely free. And best of all? They can be easily embedded into your WordPress content, including WP Courseware course units, and since the technology doesn’t rely on Flash the interactive content can be viewed on all popular mobile devices.

Today we’ll discuss some of the ways you can use the power and creativity of H5P content to enhance the learning experience for your students.

What Type of Interactive Content Can I Create with H5P?

The library of tools is extensive, and will allow you to create many, many types of interactive content, including the following:

*Accordions (vertically stacked expandable items)
*Arithmetic quizzes
*Course presentations with interactive slides
*Dialog cards (text based turning cards)
*Drag and drop tasks (ordering exercises)
*Flashcards (for quiz review)
*Image hotspots
*Memory games
*Multimedia timelines
*Personality quizzes

And perhaps most importantly for the 90% of our WP Courseware users who utilize video and audio for their course content…

*Interactive video
*Interactive audio

With interactive video, you can simply upload a file to the H5P website and add any number of elements. But more on that in a bit.

Let’s Get Started!

We won’t be able to cover all of the types of interactive content you can create in H5P within this article. However, we’ll take a look at a couple of them. First, we’ll be creating some interactive flashcards to embed in one of our WP Courseware quiz units. We’ll also quickly look at the interactive video interface.

1. First, we need to create a free account on the H5P website.


2. Once we’re logged into our free H5P account, we’ll choose to create a new piece of interactive content. As you can see in the image, the drop-down editor allows you to choose from a number of content types. For this example, we’re going to create a set of interactive flashcards.


3. Now we’re going to create a few flashcards so that students enrolled in our Facebook Marketing course can study up for the final WP Courseware quiz of the course. As you can see in the first screenshot below, we’ve created three flashcards which correspond to questions we’ll be presenting in our quiz. In the second screenshot, we’re simply previewing our finished flashcards.



4. Now that we’ve finished our flashcards for our Facebook Marketing quiz, we’re going to go ahead and download them as an H5P file and save them on our local machine. While you’re still in preview mode for your H5P project, just click on the small “Download” link below your content.


5. Now that we have an H5P compatible version of our flashcards saved locally, we need a way to embed them into our WP Courseware course unit so that our students can review them before they take our quiz. We’re going to navigate to the “Add New Plugin” panel within our WordPress installation and search for “H5P”. Once we find the plugin, we’ll install and activate it. You can also download it from the WordPress plugin repository.


6. After we install and activate the H5P embedder plugin, we’ll have a new H5P menu on the left-hand side of our WordPress admin panel. Once that menu is expanded, we’re going to click on “Add New” to upload a new H5P interactive content file. As you can see in the screenshot, we’ll give the content a title, then we’ll choose “upload” on the right-hand side of the screen, and we’ll add the file from our local hard drive which we downloaded earlier.


7. After we have successfully uploaded our new H5P flashcards to our site, we’ll notice that we have a shortcode which has been generated by the plugin (see the screenshot below). Things are about to get fun! Let’s go ahead and copy that shortcode to our clipboard.


8. As you can see in the first screenshot below, we already have our Facebook Marketing course set up with four modules and four units. Our last unit of the course contains our final exam for the course and that’s where we’ll be placing our flashcards. We’ll go ahead and edit that WP Courseware unit and place our flashcard shortcode in.



9. Remember how I mentioned that things were about to get fun? Let’s take a look at our quiz unit! As you can see we have our new interactive flashcards embedded just above our end-of-course quiz! Pretty cool, huh?


That’s Not All!

As we mentioned above, there are all sorts of interactive content you can create with H5P to embed within your course. For a full list of content types you can take a look at this page.

But one of the handier features for our WP Courseware users is the interactive video editor within H5P. I’ll include a screenshot of the editor below, but you’ll be able to add a number of rich interactive elements to your videos after uploading them to H5P. At the moment, the file upload size for media within H5P is a bit restrictive at 16MB so this feature can only really be used on shorter videos. However, with many of our users restricting their training videos to smaller segments of five minutes or less to increase the attention span of their students, this can prove to be a very powerful tool.


I hope this walk through of the H5P technology and embed tutorial will help you start thinking about creative ways to enhance the learning experience for your students.

Are you currently using H5P content or other rich interactive formats in your courses? We’d love to hear how! Feel free to share your experience below in the comments!


  1. Dino on September 23, 2016 at 7:05 pm

    Awesome! I was trying to figure out how to make an—ordering—exercise. Great Job FP!

  2. cwpete on January 28, 2017 at 7:04 am

    I’ve actually converted most of my content from Captivate to H5P. Loads much faster, great look and feel. GREAT JOB!

  3. Sam on August 11, 2017 at 5:09 pm

    Thanks for this post. Is WP Courseware able to extract grading from H5P quizzes?

    • Ben Arellano on August 30, 2017 at 9:33 pm

      Hi Sam,
      Currently WP Courseware does not have a deep integration with H5P quizzes in that it will be able to record grades into the native grade book. However, we can add this to our feature request list.

  4. Joan on November 10, 2017 at 9:16 am

    I think that would be a really smart business decision to integrate with H5P, if possible.

    • Ben Arellano on November 24, 2017 at 3:45 pm

      Thank you for the recommendation Joan. We have this on our radar, and hope to build some sort of integration addon for H5P.

      • Isabel on September 3, 2019 at 3:14 pm

        Dear WP – this was flagged a while back as being an important step to develop. Do you know when we can see this integration of WP gradebook and H5P Quiz results?

        • Ben Arellano on September 30, 2019 at 9:53 am

          Hi Isabel thank you for your question. We recently got integrated with Grassblade via xAPI integration. You can read more here.

Leave a Comment