4.3: Getting started with H5P Studio

Here is a step-by-step guide to getting started with eCampusOntario’s H5P Studio. Depending on your familiarity with the platform, you might not need to read each step. If you aren’t familiar, we recommend reviewing each step in the following H5P presentation and completing them on your own by opening a new tab or window. Alternatively, you can refer to the “New User Guide to H5P Studio” by eCampusOntario.

An interactive H5P element has been excluded from this version of the text. You can view it online here:
https://ecampusontario.pressbooks.pub/masteringopened/?p=82#h5p-9

Creating H5P content

Now that you have your account, you can get started by creating some H5P content. Don’t worry too much about breaking anything when you’re playing around in the Studio – you can always delete content. In this next section we’ll look and do the following:

1. Create H5P Content
   1. Question Set
   2. Optional – Course Presentation or Interactive Video
2. Reuse H5P
   1. Save your faves
   2. Steps to reuse/adapt

Activity

The best way to learn about H5P is to create a content type yourself! This activity will focus on the “Question Set (Quiz)” – which enables you to integrate multiple different question types options. This will give you a chance to explore a few different content types in one go.

1. 1. Login to the H5P studio and click “Create”
   2. Select “Quiz: Question Set”
      
   3. Add a Title – for this purpose we will develop a question set on coffee (but feel free to create your own!) – so enter “Coffee Time Quiz”
   4. You can add a background image for your question set – you’ll see that we added an image from Unsplash in our example – don’t forget to add the licensing information by completing the ‘Copyright Information” fields.
   5. Add your first question – select “Multiple Choice” and provide options for answers. You can select “Add Option” to expand it beyond the default two.
   6. Mark the Correct Answer by checking the box next to “Correct” – in this example, Finland is the most caffeinated country!
   7. We’ll keep the “Tips and Feedback” sections blank for now but you might want to try them out!
      
   8. Add another question. Click “Add Question” and this time choose “Fill in the Blanks” from the drop-down menu
      
   9. Add your various Text Blocks. The correct fill in the blank answer must be contained within two asterisks. Click on “Show Instructions” to see additional support on providing alternative responses and hints. Note that you can add more text blocks by selecting “Add Text Block”
      
   10. Now let’s try one more question type – the “Drag the Words” option
       
   11. Similar to the Fill in the Blanks question, you insert text into the Text Block and identify the correct ‘draggable’ words by placing them within two asterisks. Check out the “Show Instructions” for advanced features.
       
   12. Click Save – and Preview your new Question Set!

Optional Activities

There are numerous content types in addition to the Question Set. To expand your knowledge of H5P, we encourage you to try to build two of the more popular content types on H5P Studio.

Course Presentation
Course Presentation is like a slideshow of content that you can strategically pepper with reflective questions and prompts. Check out this example as well as this one and then give the following tutorial a try. Try the Course Presentation Tutorial.

Interactive Video
The interactive video content type adds engaging features to your videos by integrating checkpoint questions and prompts that the user engages with as they are watching a video. Here is an example using the openly-licensed “World of Amphibians” video from YouTube. Note the circles that appear on the timeline indicate a new checkpoint. Try the Interactive Video Tutorial.

Reusing H5P Content

One of the ‘open’ benefits of H5P is the ability to easily reuse and adapt content that others have created if they have licensed it for re-use. If, for example, someone has already created a Branching Scenario on conflict resolution and you are looking to create the same – you can download the .h5p file, upload to your account, and adapt it for your context – saving you time and tapping into what others have openly shared.

Save your Faves!

A good way to get started with reusing H5P is to take some time to explore eCampusOntario’s H5P Studio and save your favourites. To do this, you:

1. Log in to the H5P Studio
2. Click on Catalogue
3. Use the various search fields to find H5P interactives for your context
4. Click the little heart icon next to “Save to My Favourites
5. Your Favourite H5P’s will now appear in your Dashboard under the (appropriately!) “My Favourites” tab.

Steps to Reuse/Adapt

Now that you’ve found an H5P that you would like to reuse, you can decide whether you want to retain and embed it as is or adapt it for context. Embedding it as is, is as easy as clicking on the “Embed” option in the bottom left corner, and copying and pasting the code into whatever platform you would like it to appear in (e.g., LMS, Pressbooks, WordPress). We’ll talk more about those steps in the next section.

Activity

To reuse and adapt the H5P, let’s try the following steps:

1. In the H5P you have found, select “Reuse” which should appear at the bottom left corner of the interaction. You will be prompted to download the h5p file.
2. While logged into the H5P studio, select “Create”
3. This time, instead of selecting “Create Content” – select “Upload”
4. Grab the .h5p file from your downloads folder and upload
5. Now you can edit and adapt!