H5P for Students: Making Interactive Content

In this guide, student intern Amy Lorrimer, (Content Developer Interactive), Centre for Innovation in Education, University of Liverpool), outlines the approach of using the free to use h5p.org platform for creating interactive learning resources. You may have been tasked with creating an educational resource as part of your studies or you just might like to try out creating one for a project, so we hope this will help!

Prefer a downloadable version of this guide?: Student Guide to creating interactive H5P resources v1.pdf

The H5P logo

Looking to create an interactive learning resource?

This guide will show you how to use H5P, the University’s tool for making engaging, creative learning content. We'll walk you through setting up a free account and exploring the options so you can start creating impactful resources like quizzes, interactive lessons, virtual tours, or simulations.

H5P is the perfect tool for creating interactive content for a university assignment, a personal project, a public communication piece, or a way to teach a group of learners.

What is H5P?

H5P.org is a free online platform that allows you to create and share interactive learning resources. These resources can be embedded directly into a Canvas course or accessed from anywhere on the web.

H5P is the platform used by lecturers at the university to create interactive materials for inclusion in their Canvas courses. H5P.org offers the same opportunity to you as a student for free.

The only thing to remember is that content on H5P.org is publicly accessible and is cleared out after a year, so be sure not to include any sensitive personal information in your projects, and back up your work periodically. This guide will show you how to get started, and you can begin making and saving your activities right away.

Why Create Interactive Resources?

Creating interactive content is a powerful way to make learning more active and engaging. H5P helps you move beyond passive content and develop high-quality, creative resources that support various learning modes, from online to in-person. It also provides a valuable opportunity to test understanding and get immediate feedback.

H5P is an easy-to-use online platform with a wide range of activity types, including quizzes, interactive videos, flashcards, branching simulations, and 360-degree tours. This variety allows you to create content that supports different learning styles and needs. Each activity can incorporate various media, such as text, images, sound, and video. A key strength is that H5P is mobile-friendly, so your content will look and work great on phones and tablets.

To see the full range of activities available in H5P see this website: H5P Content types and applications.

Once your resource is complete, you can easily share it with peers and lecturers by sending them a direct link, using the HTML embed code to place it on a Canvas page, or downloading the project file to share with others. If you're creating a resource for an assignment, your instructor will let you know how they prefer to receive it.

Examples of H5P Activities from the University of Liverpool

Want to see what you can create? Visit our blogpost to find inspiring H5P examples from your peers and lecturers: H5P Pilot Examples from the University so far.

The examples range from an interactive Musical Advent Calendar for language learning to clinical case scenarios for veterinary students and virtual tours of campus spaces.

Planning Your H5P Activities

Before you start building, taking a moment to plan your project can make the process much smoother. Planning helps you develop and refine your ideas and get feedback from others, which is much more efficient than making changes once the resource is built, and the steps below outline an approach you can use:

Storyboard Your Idea:

For more complex projects like branching scenarios or virtual tours, it's a good idea to storyboard the user's journey. You can do this on paper or with digital tools like PowerPoint, Padlet, or Miro. For quizzes, simply writing out your questions and answers beforehand will save you time.

Create a Quick Prototype:

Once you have an idea, try building a small prototype in H5P. This is a great way to test your ideas and get feedback before developing the full resource.

Know the Tools:

As you plan, remember that your ideas should match what the H5P platform can do. We recommend exploring the H5P examples and tutorials first to understand the system's capabilities before you start planning your activity in detail. This ensures your final project is both creative and achievable.

Making Your H5P Resources Accessible

Creating accessible learning content is a crucial part of being a responsible creator. A resource that is great for one person might be a barrier for another, so it's important to think about everyone who might use your content. As a public organisation this forms a large part of university business, and we encourage you to develop your skills and experience in this area as well.

You can take simple steps to ensure your H5P activities are more accessible:

A great place to learn about improving accessibility is by the Web Accessibility Initiative: https://www.w3.org/WAI/fundamentals/accessibility-intro/. Additionally, H5P has conducted accessibility testing on its core content types and provides recommendations on what to use. You can review their guidance here: https://help.h5p.com/hc/en-us/articles/7505649072797-Content-types-recommendations.

Creating an account on H5P.org

Here’s how to get your free H5P account:

Go to the http://h5p.org
Click the ‘Create free account’ button in the top-right corner.

The H5P.org front page

Fill out the sign-up form to set up your personal account.
Once your account is created, you’ll be taken to your profile page, which will allow you to create new activities or access existing ones.

my account page.jpg

Downloading and Choosing a H5P Template File

The free version of H5P.org comes with a small number of activity types, but you can access the full range by uploading template files. We've created handy zip files for you to download, that contain all of the H5P templates (templates are split over both of the zip files):
H5P-Templates1.zip (https://bit.ly/uolh5ptemplates1)
H5P-Templates2.zip (https://bit.ly/uolh5ptemplates2)

After downloading each file, simply unzip it to your computer (likely to be in your Downloads folder). On Windows, right-click the file and select Extract All. On an Apple Mac, just double-click the file to extract the contents to a new folder.

We’ve grouped the activities into two categories:

Easier activities (good to start out with):

Multiple Choice – create flexible multiple choice style quiz/survey questions
Drag the word – text-based drag and drop tasks
Dialogue/Flashcards – flexible turning cards, useful for revision
Quiz question set – sequence of multiple question types
Image hotspot – an image with hotspots to provide additional information

Advanced activities:

Course Presentation – a presentation with interactive slides
Interactive Book – for short courses, combining multiple interactive elements
Crossword – crossword puzzle builder
Virtual Tour (360) – create interactive 360degree environments
Branching scenario – branching simulations or self-paced learning
Game Map – an interactive map learners progress through

How to start making H5P resources

These steps will show you how to import one of the template files ready for you to use.

From your profile page, click on the button ‘Try out H5P’. You will then be taken to the ‘Create Interactive Content’ screen.
To use a template file as a starting point, click the ‘Upload’ option at the top of the box.
Click on the ‘Upload a file' button and choose one of the template files you previously downloaded.
Press 'Use' to import the template file. It will now be ready for you to edit and customize.

Screenshot of the Template Upload screen

Starting work on editing the template

After your template has been imported, you can start editing and adapting the resource right away. In general, your first step should be to change the Title to something relevant for your activity. You can then scroll down the page to customize the other fields one by one.

Guidance for developing each activity type is beyond the scope of this document, but the H5P.org platform has excellent built-in user guidance. As you work, you'll find helpful tips, a link to an official Tutorial, and a link to a completed Example page at the top of each activity.

You can also find tutorials and examples for all H5P activity types here:

Tutorials: https://h5p.org/documentation/for-authors/tutorials
Examples: https://h5p.org/content-types-and-applications

Student Tip: Some student users have found it useful to start with a completed example rather than a blank template. When you're on the H5P.org website and viewing a finished example (link above), a 'Reuse' button will appear underneath the activity. You can click this button to download the underlying project file and then re-upload it as a template to customise it to your needs.

Saving & Accessing Your Work

Remember to manually save your resource frequently by scrolling to the bottom of the page and clicking 'Save'.

To revisit any content you've saved, simply click on the 'My account' button in the top right corner of the screen. Your profile will show your 'Recent Content' which you can return to and edit at any time.

Screenshot of example 'Drag the Word' activity being edited

How do I share my resource?

Once you have completed your activity, here are the different ways you can share it with others:

Sharing a URL: After you save your resource, the URL that appears in the address bar can be shared with other people through which they can view and undertake the activity. You can simply email the link or share it in places such as a discussion board or webpage.

To embedding on a Canvas or other webpage: To embed your activity so that it appears alongside other content click on the ‘Embed’ button that appears under the resource. A window will pop up containing the HTML code, that you can copy and paste into the HTML of another website (or use the ‘Embed’ formatting button on a Canvas page).

Screenshot highlighting a finished activity and the Embed button

embed code.png

Screenshot showing the location of the Embed button in Canvas

Screenshot of Canvas’s Embed button

Downloading a copy of your H5P Project: If you need a backup of your activity or want to share the project file with someone else so they can continue to edit the resource or make use of it, click the 'Reuse' button and select 'Download as an .h5p file'.

Next Steps and Further Support

That’s the basics of using H5P via h5p.org! We hope you enjoy using the platform and find it rewarding. If you have any questions or need help, don’t hesitate to email the Centre for Innovation in Education’s Digital Education team at: digitaled@liverpool.ac.uk.

We are always looking for examples of student work to feature on our website. If you create something you are proud of, please let us know at the same email address!