Create interactive content in WordPress with the H5P plugin | Opensource.com

Create interactive content in WordPress with the H5P plugin

Turn your WordPress site into an interactive learning management system with this open source plugin.

Family learning and reading together at night in a room
Image by : 

Opensource.com

x

Subscribe now

Get the highlights in your inbox every week.

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.

h5p-consent.png

H5P consent option

(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.

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:

h5p-quiz.png

H5P quiz shown in the post

(Don Watkins, CC BY-SA 4.0)

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.

Person reading a book and digital copy

Gain the most benefit from WordPress for educational purposes by mastering its many add-on features.
Woman sitting in front of her computer

This flexible publishing platform can replace traditional word processing in classrooms and educational settings.
Person reading a book and digital copy

Create podcasts, online lectures, tutorials, and other teaching resources for learning at home with open source tools.

About the author

Don Watkins - Educator, education technology specialist,  entrepreneur, open source advocate. M.A. in Educational Psychology, MSED in Educational Leadership, Linux system administrator, CCNA, virtualization using Virtual Box. Follow me at @Don_Watkins .