Create interactive content in WordPress with the H5P plugin

Turn your WordPress site into an interactive learning management system with this open source plugin.
103 readers like this.
Family learning and reading together at night in a room

Opensource.com

WordPress is best known as a website content management system, but it also a great learning management system (LMS) for delivering online courses. If that is what you are looking for out of WordPress, then H5P should be the top plugin on your list.

H5P is a way to create and share interactive HTML5 content, including presentations, games, quizzes, forms, and more, in a browser. You can download a wide variety of content types from H5P's Examples and Downloads page, or you can create unique content to embed in your WordPress site.

H5P provides plugins and integrations for WordPress, Moodle, Drupal, Canvas, Brightspace, Blackboard, and more. In this article, I will show how to use H5P in WordPress to create a reading comprehension quiz for students.

Install the H5P plugin

The first step is to install the plugin. Log into your WordPress admin panel, go to Plugins, select Add New, and search for H5P in the Plugins field. When you find it, select Install Now.

H5P should now appear in the list of installed plugins. Be sure to Activate the plugin by going to the H5P menu at the bottom of your WordPress admin panel and clicking the button. You will see the following display—be sure to consent so you can connect to the H5P Hub.

Now you can begin adding H5P content to your WordPress installation.

Create a quiz

One of my favorite poems is Robert Frost's "The Road Not Taken." Suppose you are teaching a class that is studying this poem, and one of your objectives is for your students to remember the poem's author. First, create a new WordPress post on your site that contains the poem's text and its author.

Now you want to test your students' comprehension with an HTML5 interactive content embedded below the poem.

In the WordPress admin panel, look near the bottom for the H5P Content menu and select it. In the menu that appears, click Add New.

You will see an array of content options that are available. Since you want to create a multiple-choice quiz, look for the Multiple Choice option and click Get to its right.

A form will open for you to start creating the quiz. Fill in the required fields (marked with a red asterisk)—give your quiz a title (e.g., "Road Not Taken Quiz"), enter a question (e.g., "Who wrote, 'The Road Not Taken'?") and correct and incorrect answers, and select the correct answer in the dialog box. When you finish creating the quiz, save the content.

Embed the quiz in a post

Now you're ready to insert the quiz exactly where you want it to appear in your post. Open the post where you want to put the quiz (e.g., "The Road Not Taken" post) in your WordPress editor, and you should see an Add H5P button near the top of the interface. Place your cursor wherever you want the quiz to appear in the post, and click Add H5P. Your H5P content will appear in a dialog box like this:

Select the content you want, and H5P will insert an embed code (e.g., [h5p id="1"]) in the post, like this:

Save your post, then open it in your browser. The quiz is exactly where you wanted it to appear in the post:

When a student answers this question correctly, they get pleasant visual feedback:

The possibilities are endless

H5P offers a wide range of options to add interactivity to WordPress posts. In this example, you could have created a more complex set of multiple-choice questions. H5P also has lots of other content types, including interactive video, arithmetic quizzes, an audio recorder, image hotspots, fill-in-the-blank quizzes, and many more.

H5P also provides excellent documentation and great tutorials to help anyone who wants to use the plugin on their WordPress site. H5P software is open source under the MIT License with the code available on GitHub. H5P also welcomes contributions to the community; check out the developer guide for more information.

What to read next
User profile image.
Educator, entrepreneur, open source advocate, life long learner, Python teacher. M.A. in Educational Psychology, M.S. Ed. in Educational Leadership, Linux system administrator.

2 Comments

Thanks. Wish my institution would use WordPress.

This is solid, we have an intranet wordpress site we run that's logged to my team and we can definitely utilize this to assist with our education deployment

Creative Commons LicenseThis work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.