Interactive HTML5 content on Drupal site

Interactive HTML5 content on Drupal site

Since content is king, content marketing is a must-have strategy. With the content you present on the web, you can attract visitors and keep them interested. But have you ever wanted to interact and collaborate with your users through the content? Do you need them not just passively perceive your content, but take some actions with it? This is possible with H5P (HTML 5 Package). In today’s article, InternetDeves website development services company will show you how to present content in more intuitive and engaging ways on your Drupal site, as well as in what situations using interactive content can be advantageous.

Ways to use interactive content

Perhaps, the most popular purpose of using interactive content is educational purpose. Teachers and tutors can create brain-challenging quizzes and other tasks, and then make sure they are completed by their students. H5P can be integrated with learning management systems (LMS) like Canvas, Blackboard, Moodle, etc. to handle educational courses or training programs. At present there is a H5P plugin for Moodle as well as H5P plugin for WordPress and a plugin for Drupal. Drupal is a great platform for higher education websites. Drupal even offers its pre-configured Drupal 8 distribution called OpenEDU designed specifically to satisfy the main needs of universities and colleges.

However, interactive content could be used not only for education, but in any sphere. If you are a psychologist, psychiatrist or therapist, you can create a personality quiz or other psychological test on your site to help users find out more about their character and other aspects of themselves.

Also, you can offer people a few true/false questions or questions with a multiple choice to answer. If they didn’t manage to get them right, then offer them the explanations in your content. This way, users first get interested with questions and then find out more information with your main content. For example, if you have a traveling company, offer your site visitors a quiz to check how well they are acquainted with some famous sightseeings, historical or geographical facts. Then direct them to further information with photos as well as a price list and traveling options to make them able to see the places mentioned in questions with their own eyes.

Also, you can just entertain users, encouraging them to stay longer on your site. Many people enjoy solving different crosswords, puzzles and so on. People like to play games and to face challenges. This allows them to test their skills and improve them. So, place a simple time-based arithmetic quiz or a memory game on your website. This will entertain your site visitors. They will feel satisfied and proud that they are good at solving tasks. This will evoke sympathy to you, because people are inclined to have a positive attitude to those who provide them with positive emotions and positive mood. Even a little smile on a tough Monday morning will be remembered.

If you are producing any kind of content and sharing it via the Internet, H5P allows you to check how your users comprehended your content, whether they understood your main idea or not. Create a questionnaire with closed or open questions to get feedback.

How to implement interactive content on your Drupal website

  1. Download and install the H5P module the way you commonly install Drupal modules.
  2. Tick “Enabled” near the "H5P" and "H5P Editor" modules in the section "Other" on your administration page.
  3. Click on “Add new” and then on “Select content type” to open H5P Hub. Here you’ll have two tabs: “Create Content” and “Upload”.
  4. At first let’s work in “Create Content” tab, which is divided on “My Content Types” which contains the types you have previously created, and “All” which contains yours (the button “Use” and sometimes “Update available” is opposite to those) together with the types you are able to create in future (the button “Get” is opposite to these).
  5. When you have selected a H5P content type you haven’t used on your website yet, click on the “Get” button. This will take you to the page with the details and screenshots of your chosen content type. Click on "Install" button there.
  6. You are able to upload existing h5p content. To do this, open the “Upload” tab, which is right of the “Create content” tab in the H5P Hub. Here you can upload a h5p file.
  7. To get this h5p file, go to the Examples and Downloads page on site. There you can see various interactive content types. Find the type you need now and click on it. This will take you to the page, where you can observe a more detailed description of the type you selected and download a h5p file.
  8. On your Drupal website, upload the h5p file you have just downloaded.

If you have any difficulties with implementing interactive HTML5 content on your website or have any questions about H5P, feel free to contact our Drupal CMS development company. Our specialists are always ready to help.

2 votes, Rating: 5

Read also


Let’s have a look at the modular website framework built for higher education institutions — OpenEDU.


After a glimpse at combining Drupal with AngularJS, we are now moving on to another member of the JavaScript family that is rapidly gaining popularity — Node.js. Let’s discover the reasons for its...


As you may remember from the fairy-tales, knowing the secret words helps you to move even the mountains and open treasure caves. The words “Open, Sesame” work somewhat similarly to modern website...


The vigorous community has created tons of ready made elements that make development easier, quicker and cheaper. What’s not covered by them can be custom made to fulfill whatever your heart...


Commerce is rapidly shifting to the Internet nowadays, because it is a vast territory that allows you to find sellers and buyers worldwide and make orders at any time. Dropshipping is a popular...

Subscribe to our blog updates