Create interactive content in WordPress with the H5P plugin

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.

Image by:

^{(Don Watkins, CC BY-SA 4.0)}

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.

Image by:

^{(Don Watkins, CC BY-SA 4.0)}

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.

Image by:

^{(Don Watkins, CC BY-SA 4.0)}

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.

Image by:

^{(Don Watkins, CC BY-SA 4.0)}

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.

Image by:

^{(Don Watkins, CC BY-SA 4.0)}

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.

Image by:

^{(Don Watkins, CC BY-SA 4.0)}

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:

Image by:

^{(Don Watkins, CC BY-SA 4.0)}

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

Image by:

^{(Don Watkins, CC BY-SA 4.0)}

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

Image by:

^{(Don Watkins, CC BY-SA 4.0)}

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

Image by:

^{(Don Watkins, CC BY-SA 4.0)}

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.