Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Interactive HTML5 content on Drupal site

Parent Feed: 

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 we 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 in 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 a 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 h5p.org 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 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 us. Our specialists are always ready to help.

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web