• Home
  • Free Resources
    • Storyboard Depot
    • Instructional Design Programs
    • Best Stock Photo Sites
    • PowerPoint Grids
    • eLearning Examples
    • Glossary of Online Learning Terms
    • Graphic Editing Tools
    • Icon Collections
  • My Books
  • About
  • Book Store
  • ON-DEMAND COURSES

The eLearning Coach

For designing effective learning experiences

  • Podcasts
  • LXD
  • eLearning Design
    • Audience
    • Instructional Design
    • Learning Objectives
    • Storyboarding
    • Tests
    • User Interface
  • eLearning 2.0
  • Cognition
  • Multimedia
    • Audio
    • Graphics
    • Video
  • Reviews
    • Book Reviews
    • Software Reviews
  • At Work
You are here: Home / Developing eLearning / Creating Interactive Content With H5P

Creating Interactive Content With H5P

by Connie Malamed

Tweet37
Pin106
Share30
173 Shares

Creating Interactive Content with H5P

If you’re looking for a way to make web content interactive, check out H5P. It is a user-friendly application that makes it easy for LX designers, writers, presenters and publishers to deliver interactive content on web platforms. Joubel, the organization behind H5P, has two sites. H5P.org for downloading interactions and H5P.com, is for paid hosting. See their pricing page to have them host your interactions. It would be nice if their pricing information was easier to find.

It currently works with WordPress, Moodle and Drupal, and can be embedded in any website. H5P is free and open source. You can see a few examples at the end of this article. Read on as I interview Timothy Lim, Core Developer for H5P, about the project.

What is the H5P project and what does it stand for?

Tim: The goal of the H5P project is to allow everyone to create, share and reuse interactive content. We’ve built a plugin for existing publishing systems like Drupal, WordPress and Moodle that allows people to create simple yet powerful interactive content all without writing a line of code. Our most popular content types are Interactive Video and Course Presentation. Check out the rest of our examples at H5P.org.

H5P stands for HTML 5 Package. Each H5P content type is simply a collection of HTML, CSS and Javascript files zipped together. This means interactive content can be shared between a huge range of websites and platforms. H5P’s can also be embedded onto any website simply by pasting an embed code.

How did you get started with H5P? What was your goal and your motivation?

Tim: 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.

What are some of the different content types?

Tim: At this point, there are many different content types, including: course presentation, interactive video, chart, dialog cards, arithmetic quiz, drag and drop, multiple choice, memory game and more. You can see all the content types here: H5P Content Types.

H5P Content Types

Some of the many H5P interactive content types

On what platforms can someone use H5P?

Tim: As mentioned earlier, there are plugins for Drupal, WordPress and Moodle. eFrontPro has also added support for H5P and TikiWiki will support H5P in their next version. Through embedding, the community has also been using H5P’s in Blackboard, Canvas and a multitude of other platforms.

What do you see as the benefits of providing interactive content types?

Tim: Interactive content allows users to leverage the power of the web and modern computer processing. Now content may be presented in more intuitive and interesting ways. Let’s say you want to present the history of strawberries. With H5P, you may list historic events in chronological order on a page, and add some images and videos to it as well, or you may take it one step further and create a visual timeline that the user can click on and easily get an overview of the historical moments, navigating between the events freely.

How are people integrating H5P into their projects? Can you give us some examples?  

Tim: H5P is very flexible and used in many ways, for presenting content, letting learners test themselves, market new products and much more. This resource explains how usage has grown and some ways it is being used. See slide show resource. 

For example, Tim Cappelli of the University of Manchester, describes the free learning platform developed for medical students using WordPress, called tMed Learn.

“The system allows us to produce multimedia rich, attractive content available across multiple platforms. H5P is at the heart of 1Med Learn allowing us to create rich, interactive content that is ideal for medicine. Interactive videos allow us to test students on diagnostic principles. Hotspot images provide an ideal way of using clinical images. Timelines are a great way to display case histories. The University recently introduced Flipped classroom sessions into the medical curriculum and use H5P to prepare students by releasing a formative assessment the day before the flipped class. This allows students to test their knowledge and allows the school to monitor students’ engagement and understanding. The results of these tests are published in a student dashboard, alongside the cohort average, providing a gauge of their own progress as well as a motivational incentive in a nod towards gamification of assessment. H5P is the only quiz tool that allows us to do this.”

Also, watch this video that explains how the University of Colorado is using H5P.

Does H5P have data collection capabilities? Does it work with xAPI and other standards?

Tim: H5P focuses only on the content and only stores the most important result-data for the users. We leave advanced analytics to third party software, and provide them with plenty of data through our xAPI integration. Each content type generates xAPI statements with structured information about everything the user does. These xAPI statements may be sent to a learning record store as is, enriched or third party software may even convert them to other formats like IMS Caliper. Click this H5P Analytics link for more information.

To what extent does H5P follow accessibility guidelines?

Tim: Our goal is to be WCAG 2.0 AA compliant with a good WAI ARIA coverage. This is the goal for all the new things we make, and for the older content types we’re working hard to upgrade them one by one to adhere to this standard as well. There are still many content types that need upgrading, but we’re getting there.

This seems to be growing into a massive effort. How big is the H5P user community?

Tim (updated from their site): As of March 2018, H5P is being used on more than 30 000 web sites. It is used by thousands of universities, enterprises, school districts, schools, armies and other organizations.

How many people are busy programming H5P content types?

Tim: We have seven full-time people on the Core Team and all of us are employed by Joubel, the company behind H5P. There’s also a growing community of developers contributing code and creating their own content types. There is more and more community code in each release, and for the next release there will probably be a brand new content type created by a community member who isn’t part of the Core Team.

What programming languages are behind H5P?

Tim: The content types use JavaScript only. No server side code is allowed to make sure that they can be used on any system. We have the H5P core in PHP. Also as much as possible is written in JavaScript to make sure it is easy to port. There are ports or partial ports of the core to Python and JavaScript(Node.js).

H5P Example

Here is an example of an H5P drag and drop content type, using the H5P Content WordPress Plugin. After creating the example using the plugin, I was provided with a shortcode that I added to this page. A short code is a quick way to add functionality to a WordPress page without programming. Thanks for the interview Tim!

 



Get the latest articles, resources and freebies once a month plus my free eBook, Writing for Instructional Design.

Comments

  1. Connie Malamed says

    September 24, 2021 at 4:40 pm

    I don’t think you can download as SCORM. From what I know, it only works on certain platforms: WordPress, Drupal, etc. Not LMSs. Get support from them to find out how you can integrate it with your courses.

  2. marie says

    September 24, 2021 at 2:22 pm

    Hello! can you download the h5p content as scorm file? I need to upload it to a LMS: Litmos. I will appreciate your help, explain steps. thank you

  3. Connie Malamed says

    September 1, 2021 at 4:36 pm

    I’m editing this because I just read their FAQ, so please read that. If using WordPress, Moodle and Drupal, you can store the H5P interactions on your own site. If you don’t have one of these Content Management Systems (CMS), you can pay for hosting at h5p.com. Here’s what they say, “H5P.org is for testing purposes only. You should not use it to host “real” content. Self host or use H5P.com instead.” And if you go to the H5P.com page, you can find their pricing, which is slightly hidden.

  4. Leif Arild Westberg says

    August 27, 2021 at 4:14 am

    Hi, thank you far a good review. One question. Im missing out where will your content be stored. Will it be stored in a cloud service, or will you have full control with the content, including metadata on your own server/computer?

  5. Connie Malamed says

    December 15, 2020 at 10:44 am

    Thank you!

  6. Deon van der Westhuizen says

    December 12, 2020 at 7:55 pm

    Hi Connie,

    Great introduction to H5P. We are also using it extensively for teaching here in Taiwan and I have added a few H5P templates to my website at https://h5ptemplates.com. These will give educators an idea of what is possible with H5P. I hope everyone can find more creative ways to use it as the potential is almost endless.

    Regards,
    Deon

  7. Connie Malamed says

    November 21, 2019 at 8:54 pm

    I think you better ask their tech support.

  8. Myra says

    November 19, 2019 at 11:14 am

    Hi I know how to create an H5P. However, is there a tap to add a next question after completion of the first question or true/false. So that the items flow continuously in the Moodle forum.

  9. Shashank Bhardwaj says

    April 30, 2019 at 4:03 am

    A very nice and informative content Connie. Helped me a lot to know what are the other possibilities of H5P other than course design. Though, would like to showcase one of our content on H5P which might be helpful for the reader – https://www.3esofttech.com/create-interactive-content-h5p-moodle-lms/
    Thanks
    Shashank

  10. Connie Malamed says

    April 5, 2017 at 5:39 pm

    Good to hear. I’m curious about how you are using it in your LMS?
    Connie

  11. Connie Malamed says

    April 5, 2017 at 5:38 pm

    Thank you for the recommendation, Despina and for sharing how you are using it.
    Best,
    Connie

  12. Despina says

    April 4, 2017 at 2:06 pm

    I discovered H5P while searching the internet for free authoring tools three months ago. I was in the beginning of creating a new online course (Greek as foreign language).
    I think it was my lucky day!
    The installation on my Drupal website was really very easy. I immediately started to create new interactive content.
    Highly recommended!
    My entire new course is based on H5P now.
    An outstanding feature is that it is responsive and works perfectly on mobile phones.
    Thank you H5P people!

  13. Maria says

    April 4, 2017 at 1:10 pm

    Hi, Connie. I have explored H5P and slowing introducing this to our LMS users. One of the best things about this is that Tom and his team are very supportive and are very prompt with responding to queries.

  14. Connie Malamed says

    April 1, 2017 at 3:36 am

    Glad this was helpful, Suzanne!

  15. Suzanne Pittman says

    March 31, 2017 at 4:24 pm

    Very interesting, will be looking into H5P. thanks for the information Connie!

Trackbacks

  1. Tutorials that are interactive, accessible, AND open? ALA 2018 Poster – Lindsay O'Neill says:
    April 1, 2019 at 1:35 pm

    […] Creating interactive content with H5P (https://theelearningcoach.com/media/creating-interactive-content-h5p) Interview with Timothy Lim, Core Developr for H5P, about H5P and its technical aspects […]

  2. Get Started with H5P – Lindsay O'Neill says:
    January 24, 2018 at 5:32 pm

    […] head over to H5P and create a free account. You may also want to check out this excellent blog post by eLearning Coach Connie Malamed that gives more background about […]

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Writing for Instructional Design

Subscribe to my newsletter AND get my eBook, Writing for Instructional Design.

Get the latest articles, resources and freebies once a month plus my free eBook, Writing for Instructional Design.

The Learning Guild

CSUN Instructional Design Program

CSUN Instructional Design Program

Fullerton Instructional Design Program

Fullerton Instructional Design Program

Learn ID at University of San Diego

u of san diego id program

ANSWERS TO QUESTIONS ABOUT A CAREER IN ID

answers to 5 key questions about a career in instructional design

NOW AVAILABLE AS AN EBOOK

You can now buy the email course as a PDF to get all the lessons at once. Price: $15.00 US.

eBook Cover
Click the image to buy the book.

SITE MENU

Home
Resources
My Books
About
Book Store
Membership Community

TOPIC MENU

Podcasts
LXD
eLearning Design
eLearning 2.0
Cognition
Multimedia (Graphics & Audio)
Reviews
At Work

RESOURCES

Storyboard Depot
Instructional Design Programs
Best Stock Images
PowerPoint Grids
eLearning Examples
Glossary of Online Learning
Graphic Editing Tools
Icon Collections

© Copyright 2021 Connie Malamed · All Rights Reserved