H5P Interactive Learning Objects

H5P is a free and open technology for creating interactive digital content. H5P is widely used in education as it allows instructors to easily create engaging activities without needing advanced programming skills.

Some benefits of H5P are as follows:

• Various activity types can be created using H5P, e.g. quizzes, interactive videos, presentations, timelines, and games.
• H5P objects can be seamlessly integrated with Brightspace.
• H5P content can be easily reused and shared with others.

Examples of H5P Objects

The following are examples that CITL staff created for various online courses. There are many more interactions and interaction types available but this will give you an idea of the instructional need for the interaction and the teaching and learning benefit.

H5P at Memorial

CITL has created an H5P Resources Environment where Memorial users can create and store H5P objects for use in their courses and websites. Please note that H5P objects created in the environment are visible to other users at Memorial and available for them to reuse and/or modify. If you do not wish to have your content reused, there are settings you can apply that will limit others’ ability to edit and/or change your item without your permission.

In addition to creating their own content, instructors can browse the H5P Resources Environment to view and potentially reuse H5P objects created by others at Memorial.

NOTE: If you wish to use and/or modify an object created by someone else, we recommend reaching out to the original creator for permission to reuse and/or modify the object. You should also review the copyright information linked to the object and provide appropriate attribution.

There are two ways to access Memorial’s H5P resources environment:

1. Visit as a Guest

Visit CITL’s H5P Resources Environment to browse through and view the publicly available resources from Memorial’s learning community. You can use the guest account to do this; you do not need a username and password. The guest account allows you to reuse or embed an object but it does not allow you to create a new object or reuse an existing one.

2. Create an Account

If you want to create and reuse resources, you will need an account with a username and password. Please request a resource area through our Support Centre. When your account is active, you can create and edit H5P objects in the “My resources” area.

Using H5P Objects

Reusing Existing H5P Objects

With proper attribution, you can reuse H5P objects created by others. If you wish, you can also modify objects to suit your own instructional needs.

If you choose to reuse a resource created by another author, you need to make a copy of the object and then make changes to it.

There are two scenarios for reusing an H5P object:

1. You have rights to edit the resource (this may be the case if you are a co-instructor for a course):
   • Open the resource, click “Reuse” on the resource and then click “Copy content” or click edit settings on the resource and in the Editor section click “Copy”.
   • Open an area in “My resources”, click “Add an activity or resource” and then click paste. You can edit the resource here, making a new version. Be sure to rename it and use the new embed code in your course.
2. You do not have rights to edit another user’s resource:
   • Open the resource, click “Reuse” on the resource and then download (export) the h5p file.
   • Open an area in “My resources”, click “Add an activity or resource” and then click upload. You can edit the resource here, making a new version.

Reuse H5P Resource by Another Creator

• Go to the H5P Resources Environment hosted by CITL (windmere.citl.mun.ca) and log in with your MUN username and password if prompted.
• Go to Home at the top of the page.
• You will see a page with all H5P resources created by instructors at Memorial. Open the object that you would like to reuse.
• Scroll to the bottom of the page and click Reuse.
• In the pop-up window that appears, click Download as an .h5p file – the file will be downloaded to your computer.
• At the top of the page, click My resources. Turn editing on in the top right corner of the screen.
• Click Add an activity or a resource, then select H5P.
• In the Package file area, upload the H5P file you have just saved on your computer. Save it with a different name.
• Click Use.
• Make the required changes.
• Click Save and return to course.

Creating H5P Objects

• Go to the H5P Resources Environment hosted by CITL (windmere.citl.mun.ca) and log in with your MUN username and password if prompted.
• In the top left corner of the screen, select My resources.
• In the top right corner of the screen, turn on Edit mode.
• Select Add an activity or resource.
• Select Interactive Content, then click Add.
• Scroll down to the ‘Editor’ section of the page, and select the type of interactive object you want to create (you can click Details next to each object type for information, screen shots, and a content demo).
• Create your object. You may want to view the examples and tutorials provided with each activity type.
• Click Save and return to course.

Video Instructions

View the following video for a detailed step by step tutorial in accessing the H5P resources site and creating a H5P object.

H5P.org has a variety of tutorials for authors on their website. These tutorials provide an overview of the resource type and the steps to help you create the resource.

Organizing H5P Objects

Organizing the resources that you have in the H5P Resources Environment will make them easier to use and manage. You can organize by course, subject area, user (if multiple users have access), etc. An effective way to do this is by using Topics. You can create a topic in one of your resource areas and add H5P resources to that topic.

Create a Topic

Creating topics within your resource area is optional but organizing into groups will be helpful if you have a large number of interactions.

1. Ensure that editing is on — click the cog icon in the top right corner and click “Turn Editing on”
2. Click “Add topics” at the bottom of the page
3. Choose number of sections/topics you want to add and click “Add topics”
4. To change the name of the topic, click the pencil icon next to the title, type the new name in its place, and press the “Enter” key.

Best Practice: Create an topic called “In Progress” to indicate to you and others that the resources within are incomplete.

Naming Conventions

Good naming conventions will also help with organization. Below we use the convention of module, activity name and activity type. Consider closely what naming convention you will use for your objects. As the number of objects grow, this convention will help you stay organized and be able to reference your objects quickly for changes and updates. As a rule of thumb, be as descriptive as possible with the names.

Topic	Name of Resource
Spanish 1000 2020 Section 001	Module 1 Numbers Audio Activity
Spanish 1000 2020 Section 001	Module 1 Grammar FlipCards
Spanish 1000 2020 Section 001	Module 2 Language Activity
In Progress	Pronunciation Practice 1 Audio Activity
Language Conference 2021	ESL Tourism Interactive Video

Example H5P Site

Embedding H5P Objects in Brightspace

Reusing versus Embedding a Resource

Embedding a resource provides a “link” to the original object — which means that any changes the original creator makes to the object will be reflected anywhere the resource is embedded.

Reusing a resource allows you to create a copy of an object and either use as is or, if permissions allow, modify the resource to meet your needs.

Embedding is the best choice if you want to have the regular updates/revisions; however, if you want to tweak or customize the object for your course (with the original creator’s permission), reusing is most suitable.

Embed an H5P Resource in Brightspace

If you choose to embed another user’s resource into your course or website you are simply accessing their resource in your course or website. The following are the steps to embed a resource in Brightspace:

1. Select the “<> Embed” link from the bottom of any resource that you want to use.
2. Copy the code from the Embed pop-up window.
3. Click “Edit HTML” to edit the page on Brightspace.
4. Then click the “insert stuff” icon.
5. Scroll down the drop-down menu and click “Enter Embed Code”.
6. Paste copied code into the area. (Note: For object types that require the use of the microphone, also add “allow=”microphone” to the iframe parameters.)
7. Click the “Next”.
8. Click “Insert”.