H5P Essentials 2: Create Your First Project

In my first H5P Essentials post, I gave you an introduction and overview of H5P.

In this post, we’re going to get our feet wet by diving into developing a Course Presentation using H5P. As I mentioned in Get Started with H5P, the Course Presentation format is my personal favorite because it allows creation of standalone interactive lessons. Within a Course Presentation, you can include videos, audio, a wide variety of activities, and quizzes. It’s the format most like Articulate Storyline or Adobe Captivate, or if you’re not familiar with those, PowerPoint, except it’s an interactive learning experience, not a passive one.

Creating a Course Presentation is a good way to make a sandbox H5P where you can try out most of the H5P formats in one place. Let’s get started!

Create a Course Presentation

In this section, you’ll create a simple three-slide course presentation that contains text, a shape, a video, and a multiple choice question.

Create the Presentation

Begin by logging into H5P.org (create a free account if you haven’t already), and then from your dashboard click Create New Content:

 

Next, click the search box and start typing “course,” and the Course Presentation format should appear:

 

Click on the result to create a new Course Presentation. The content will take a moment to load, please be patient.

Give your new H5P a title. I’m going to name mine Sandbox, because I’m just going to use it to try out H5P’s many features.

Now, before we continue on, it’s really important that you know how to save your H5P. The downside of creating H5P content from within your browser is that, if you accidentally navigate away from this page, all of your work will be lost! It’s important to frequently save your work.

Let’s find the Save button now. After you type in your title, scroll all the way down to the bottom of the page. See the Save button? Click it now:

 

Now, you might be asking yourself: what just happened? Why did the editor go away?

Frankly, the Save feature in H5P leaves a little to be desired. When you Save your H5P, your H5P, first, does save, but you also exit the editing mode. A bright spot is that you are now looking at the published version of your H5P, just as your learners would experience it, so each time you save might be a good opportunity to test your content to make sure it’s working the way that you expect.

When you’re ready, return to editing mode by clicking Edit towards the top of your screen:

 

Add Text & Shapes

Now that your course presentation is ready to edit, and you know how to save, let’s try adding a text and a shape to your slide. First, let’s get familiar with the two buttons that you will need:

 

Click the Shapes button. Select the square.

 

The Edit Shapes window appears.

 

Change the fill and border colors and styles as you wish, then click Done. You should now have a square in the center of your slide:

 

Next, let’s add some text. Click the Text button:

 

A pop-up will appear for you to edit your text:

 

I’m going to type the title of my Course Presentation into this slide, Animals. It’s important to pause here for a moment and recall that H5P is mostly designed to be accessible/508 compliant, so it’s important how we format our text. Since I’m using this textbox as a title, I’m going to format the text as a Heading. Using the various levels of Headings gives text a hierarchy. Imagine if you were using a screen reader (and maybe you are right now!): It would be impossible to quickly scan through a large amount of text that is not tagged as Headings, Lists, etc. By formatting/tagging our text as Headings, someone using a screen reader could quickly scan all the headings, then pick the section that they want to dive into based on the headings.

The largest heading is Heading 1, next largest is Heading 2, all the way down to Heading 6 (see more about Headings in the Learn More section). Thus, I’m going to tag my title as Heading 2. The highest heading available on H5P is Heading 2 because when the published H5P is viewed, it’s going to be in a page that has a title above it formatted in Heading 1.

Tag your text as Heading 2 by making sure your cursor is on your title text, or that the text is selected. Then, click the box that says “Normal” and select Heading 2.

 

Your text won’t look much different, but when your H5P is published, the backend code will label this as a heading. Now, you can change the look of your text if you wish. Try changing the font size, the font color, or the font background colors. These are all cosmetic changes; the text will remain tagged as a heading. However, be mindful that the colors you choose still leave the text readable and compliant with accessibility standards. You may wish to view some guidelines on selecting colors for your typography, and try out the Color Contrast Checker.

Now, I’m going to go back and edit my shape so that it becomes a nice background for my text. You can click and drag the text box and the shape wherever you want them, and you can also select an element and use the handles that appear to drag your elements to be bigger or smaller.

I’m going to select and enlarge my square into a rectangle and change the color. An element may be editing just by double-clicking it. Then, I moved my two elements so that the text box is on top of the shape.

If you single-click on an element, a small menu appears. You can edit the element from that menu, make a copy of it, or move it forward and back in relation to the slide’s other objects. Just like PowerPoint, you can layer objects as you wish.

 

Here’s my completed first slide:

 

At this point, be sure to save your project. Reenter editing mode when you’re ready to move on.

 

Add a Video

Next, we’re going to add a slide that features a YouTube video. Reenter editing mode on your sandbox project.

Let’s look at the buttons at the bottom right of your slide. This is where you’ll find the buttons to add a new slide, delete slides, and move slides.

 

Add a new slide. Now your project has two slides, and the counter below the slide should read 2/2, indicating we’re on the second slide of a two-slide project.

Now, we’re going to add a YouTube video to the slide. Let’s go to YouTube and find a video to insert into the project. I found a video about meerkats that I want to add. (I filtered my YouTube search results to just Creative Commons videos, so this video’s creators would be fine with me embedding their video into my H5P, as long as I attribute, of course!).

Next, I’m going to go back to H5P, and click on the Video icon to insert a video into my second slide:

 

I’m adding the name of the video, Meerkats, and I’m going to click the box with the plus sign to add the video:

 

Now, we have two choices: you can either upload your own video file (allowed video formats are mp4 and webm) or you can add a video hosted externally, like YouTube. I’m going to paste in the share link I got from YouTube:

 

You can use either the link you copy and paste from your browser bar, or the link YouTube offers when you click “Share.” Then, click Insert.

Note that the video won’t play automatically unless we set it up to do so. With the video editing menu still open, I’m going to open the Playback submenu, and check Auto-play video:

 

Now, you can scroll down to click “Done.” We’ll explore the additional options for videos later.

We’re back to the regular slide view. Your video remains selected. Use the handles to expand or decrease the video’s size on screen. Click on the video and drag to move it around. I expanded mine to fill the entire screen.

Let’s pause here to save the video and preview it.

Here’s my completed slide. The video automatically played when I opened slide 2:

 

Add a Multiple Choice Question

Now, we’re going to finish our Course Presentation by adding a third slide that contains a multiple choice question.

Add a new slide.

There are four types of questions: Fill in the Blanks, Single Choice, Multiple Choice, and True/False. It may not be obvious what the difference is between Single Choice and Multiple Choice. Really, they are both “multiple choice” questions in that the learner has a variety of answers to choose from. What may clarify things is that in other contexts these two questions are referred to as “Select One” or “Select Many.” That is – the Single Choice/Select One questions has only one correct answer. The Multiple Choice/Select Many question may have more than one correct answer, a “choose all that apply” type of situation.

Add a multiple choice question.

 

I prefer this format to single choice because it offers more flexibility if I change my mind about how many correct answers a question should have, and I won’t have to completely remake the question if I do change my mind like I would with the Single Choice question.

For my question, I’m going to ask a simple question about meerkats that relates to the video my learners just watched. You should also give your question a “Title” for reference later on.

 

This question type defaults to offering two answer choices, which is fine for my question. If you want to add more answer choices, click “Add Option” at the bottom:

 

Be sure to check the “Correct” box for the answer or answers that will be correct.

 

Once you’ve entered your questions and answers, and checked the “Correct” box as necessary, there are a variety of other options for giving users feedback and for how the question works. We’ll go into these later.

This question also defaults to letting the learner retry the question, which I’ll leave as-is.

When you’ve finished editing this question, click “Done” at the bottom of the dialog box.

The question will display on screen, but you may find it a little small for your taste:

 

If you would like to enlarge it, simply grab its handles and drag. You can also click and drag it to position it where you would like on the slide.

When you are done, save your project.

Sharing Your Project

Your project is ready to be shared. Since you just saved, you are currently viewing your project. Just copy the URL in your browser bar to share this H5P as a link. You can also embed your project as an iframe in another webpage by using the embed code provided when you click on “Embed” in the bottom left of your project.

What’s Next

In the next installment, we’ll practice editing elements of an H5P course presentation, we’ll add more types of content, we’ll practice resizing images from within H5P, and we’ll add audio.

Learn More

• Contrast and Color Accessibility – WebAIM.org
• Color Contrast Checker – WebAIM.org
• HTML Headings – w3schools.com