How to Use H5P with Tutor LMS for More Interactive Learning

Want to create a more dynamic learning experience for your eLearning students? Then H5P will help you immensely. Tutor LMS supports H5P and through it you can offer more interactive content to your students. This will make your courses a lot more interesting and keep your students more engaged. In this post, we’re going to learn how to use H5P with Tutor LMS to add interactive content for your students.

The H5P plugin allows you to create interactive elements on your website. You can combine this plugin with Tutor LMS to offer dynamic course content for your students. If you’re familiar with H5P then you know that it contains a lot of interactive elements. These can be used for your Tutor LMS courses or quizzes. We will learn all about that in this post. So let’s get started!

What is H5P?

I know you want to dive right into the tutorial, but let’s first discuss what H5P is. H5P is a technology that lets you create, share and reuse interactive HTML5 content in your browser. H5P can be used for standalone projects or you can use it for your WordPress website. It also supports Drupal, Moodle, Blackboard, etc. But since we’re talking about WordPress here, we will be looking at the WordPress H5P plugin.

You can use H5P to create games, videos, presentations, quizzes, etc. and embed them in any content in your browser. Yes, there is an H5P plugin available for your WordPress website and you can install it directly from the WordPress plugin repository. Tutor LMS also has an H5P add-on, which allows you to include H5P elements in your courses. But you do need Tutor LMS Pro in order to get this addon.

👉 Get Tutor LMS Pro NOW
📌🔥 BREAKING: Tutor LMS Lifetime License Plan Available 🎉🔥

How to create interactive content in Tutor LMS with H5P

Now if you have your Tutor LMS Pro and your website ready, we can start using H5P. You can install H5P through the Tutor LMS addons section. Simply go to Tutor LMS Pro > Addons and find the H5P addon. You can install it from here. But sometimes this doesn’t work, so it’s best to install it directly.

We are going to install it from the Plugins section. So if you want to add H5P interactive content to your Tutor LMS courses, follow the steps shown below.

Step 1: Install H5P plugin

Get Latest Post Notifications!

Subscribe to our newsletter

From your WordPress admin dashboard, navigate to Plugins > Add New Plugin and search for H5P. Then install the H5P plugin by icc0rz.

h5p plugin

Once the plugin is installed and activated, you’ll find a new option in your WordPress admin dashboard called H5P Content.

Step 2: Enable Tutor LMS H5P addon

Now with H5P installed, we also have to enable the addon from the Tutor LMS Pro > Addons section.

Step 3: Make sure the H5P hub is enabled

Before we go ahead and create H5P content, we have to make sure that the H5P hub is enabled. In some cases, this option might be disabled by default. So, hover your mouse over Settings and click on H5P.

h5p hub settings

After you enable it, click on the “Save Changes” button.

Step 4: Creating an H5P content

Navigate to H5P Content > All H5P Content then click on the “Add New” button.

h5p content add new button

Next, you’ll see a message and it will ask you to approve of it. Approve it, and next you will see the H5P hub. Here you can choose what type of content you want to add. To choose a content click on the “Get” button beside it. We’re going to choose the Fill in the Blank content type.

h5p hub

After that, you can click on the “Install” button to install this content type. 

h5p fill in the blank installation

Once it’s successfully installed, click on the “Use” button.

Now depending on what type of content you’ve created, you’ll have a different interface. On top, you’ll find two options for tutorial and example. You can click on those to learn how the content type works. In our case, we have selected the fill in the blank content. 

h5p fill in the blank content

Here we can add a title to our content then we can add a task description. Finally in the text blocks, we can add our fill in the blank statement. In H5P fill in the blank, we add asterisk “ * ” at the beginning and end of the word which is supposed to be left blank. We can also add feedback for different scoring ranges. Again, we can customize the behavior settings of the task.

h5p task behavior settings

After you’re done with a task, click on the “Create” button on the right side.

h5p task create button

You can find your H5P content by going to H5P Content > All H5P Content.

👉 Get Tutor LMS Pro NOW
📌🔥 BREAKING: Tutor LMS Lifetime License Plan Available 🎉🔥

Step 5: Add H5P content to Tutor LMS course

Now that we have H5P content, we can add it to our Tutor LMS course. First we have to create a course, so go to Tutor LMS Pro > Courses and click on the “Add New” button. If you already have a course created, then you can edit it. After you open up the course builder, click on the Curriculum tab. If you need help for creating a course, we have a video tutorial on this topic you can check out.

👉 Video: How to Create a Course with Tutor LMS 3 (Complete Tutorial)

In the Curriculum tab expand any topic. If you don’t have any topics, then create one by clicking on the “Add Topic” button. There you’ll find a new button “+ Interactive Quiz”. Click on it and a quiz creator will open up.

adding h5p interactive quiz to tutor topic

Give your quiz a name. After that, you can also add a question summary, but this is optional. Click on “Ok” to proceed.

adding h5p question to builder

Then click on the “ + ” button beside Questions. Now you’ll see the list of your H5P questions. Select the questions from here by clicking on the checkboxes and after that click on the “Add” button. This will add the question to the topic of your course.

selecting h5p questions

Now you can see all the H5P questions on the interactive quiz builder.

h5p question in quiz builder

You can also customize the settings of this quiz by clicking on the “Settings” tab.

h5p question settings

Now finally save and publish your course. After it’s saved you can test this out by taking the course.

h5p question in tutor frontend

So that is how you can use H5P interactive content in your Tutor LMS courses. 

👉 Get Tutor LMS Pro NOW
📌🔥 BREAKING: Tutor LMS Lifetime License Plan Available 🎉🔥

Conclusion

There are several H5P interactive content types available for use. For this video we only used the Fill in the blank content type, but you can use as many as you want. Tutor LMS supports H5P content and you can take advantage of it. By adding interactive quizzes, your courses will become much more engaging for the students. Although Tutor LMS has several question types for you to use, if you still need more, the option is there.

Well, that’s enough for this tutorial. We hope that you found this helpful. If you have any questions, feel free to mention those in the comment section down below.


Disclaimer: This post may contain affiliate links and we may receive a small commission if you purchase something by following them. However, we recommend services/products that we believe good to serve your purpose.

Staff Author

Staff Author

A team of WordPress enthusiasts led by Arafat Bin Sultan, a seasoned professional with over a decade of experience in tech blogging, content marketing, and video creation.

Articles: 255

Leave a Reply

Your email address will not be published. Required fields are marked *

Discover more from WPGIZ

Subscribe now to keep reading and get access to the full archive.

Continue reading