H5P: A CMS plugin for creating HTML5 interactive content

343 readers like this.
Digital content text on background


Many educators want to create interactive content for their classroom or online course. If you're not a HTML5 programmer like most of us, but you have heard HTML5 can simplify your work and provide a great, standard web experience for your students, here's how to get started.

H5P is a free and open source tool that helps you create HTML5 content in the browser of your choice and share it across all operating systems and browsers. To explain more about the tool, I talked to Svein-Tore Griff With, the lead developer at Joubel.com, who together with his team, created H5P. 

Don Watkins (DW): How did you get into open source?

Svein-Tore Griff With (STGW): Before working fulltime on H5P, many of us on the Core Team were deeply involved with open source projects. Over the years we have been consulted for Drupal based projects, and we’ve always tried to contribute back to the Drupal community as much as we can. H5P is installed on over 7,000 websites. It is used by hundreds of universities, including Ivy League universities. It is being used by huge companies, including Fortune 50 companies, and other big organizations like parts of the UN.

DW: What was the impetus for H5P?

STGW: The world of interactive content is almost medieval. With no common format for interactive content the creation process seen from a global perspective has become very fractured and disorganized. Simple things such as multiple choice quizzes are handcrafted again and again, not only for different platforms but for different websites as well. The cost of great interactive content and tools is often extremely high since it usually involves making yet another custom version.

The H5P format is open and the tools for creating H5P content are open source. This guarantees that creatives own their own content and are not locked into the fate and licensing regime of a specific tool. Read more about how H5P ensures that the content remains yours in our blog.

DW: How does H5P allow users to create rich content in content management systems?

STGW: H5P is a plugin for existing CMS and Learning Management Systems (LMS) systems. Just plug in H5P and your system becomes able to create, share, and reuse great interactive content. For systems that doesn’t have an H5P plugin available yet it is possible to embed content using an iframe or using the Learning Tool Interoperability (LTI) standard. With the LTI and supporting APIs and specifications embedding an externally hosted H5P authoring tool is also possible.

DW: What is there about H5P that allows it to sense the device it is playing back on; i.e., iOS, Android, LInux, Firefox, Chrome, and Internet Explorer?

STGW: Usually H5P doesn’t sense the device it is running on, but there are a few cases where it does, for instance, to make full screen mode work, but it is usually just responsive design. H5P can’t control the head tags of the page where it is being used so we compare the width to the font sizes to identify break points for layout changes. You can read more about this on our blog.

DW: Why is your code licensed under both GPL and MIT?

STGW: We want everything to be MIT. Right now, there is some code from Drupal in H5P core to purify HTML. When that has been removed, we will only use MIT since GPL is more restrictive.

DW: I built a Moodle Server with the H5P plugin and saw how it connected to Moodle's quiz feature to allow data collection of student answers. How is that accomplished in Wordpress and/or Drupal?

STGW: We mainly rely on the xAPI standard for storing and analyzing the user’s answers. In addition, we save time spent and scores in all platforms and we have a special integration with Drupal’s Quiz module so that H5Ps may work as quiz questions. We’re leveraging xAPI to make this work.

DW: Are there tools built into the H5P code that allow it to store data collected from interactions with it?

STGW: There are two types of tracking in H5P. One is user tracking. Here we use xAPI. It is up to the host to determine what to do with all the xAPI data H5P generates. If the host system, Drupal for instance, doesn’t have a third-party module to handle this data, it doesn’t get stored at all. On H5P.org we send this data to Google Analytics.

The other type of is a report plugins are sending to H5P.org every month with anonymous data. It includes the number of H5P authors the site has, the number of H5Ps of each type, and more. When the plug-ins are enabled they give very valuable feedback about how H5P is used and they help guide the future development of H5P. You can disable these reports per site.

DW: Do you encourage developers to get involved?

STGW: We definitely do. The full potential of H5P will only be realized if we’re being embraced by a big portion of the web developers in the world. Developers can get involved in many ways. They can learn how to create new H5P content types and share their work on H5P.org. They can improve H5P content types through GitHub and participate in forum discussions.

The H5P code is hosted at GitHub.

User profile image.
Educator, entrepreneur, open source advocate, life long learner, Python teacher. M.A. in Educational Psychology, M.S. Ed. in Educational Leadership, Linux system administrator.

Comments are closed.

Creative Commons LicenseThis work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.