Title: Introduction to H5P (workshop version) - August 2021

This is a workshop resource to learn about the cool stuff you can make with H5P. It covers the basics of H5P, examples, integration with Blackboard, and how to get started.

Part 1: H5P - the basics

[Image: Screenshot of H5P landing page banner]

H5P basics Course Presentation

What is H5P?

H5P is a web-based authoring tool that allows you to create interactive learning objects and design rich and engaging online learning activities that combine text, images, videos, links, quizzes, and more.

H5P is fairly easy to use and highly customizable at the same time.

H5P objects can also easily be shared, reused, copied and adapted.

H5P is based on html5 and javascript. It is licensed as an open source tool, so those with developer knowledge (or ambitions) can also contribute to the development of the tool.

What is H5P?

What can H5P do?

[Image: arrow icon]

Watch this short introduction video by the creators of H5P

What can H5P NOT do (at least not yet) ?

Most important caveats and limits

- limited live interaction between students (some live engagement tools are currently in beta)
- no ability to store student answers in a way that they can come back to it (at least not at present)
- currently not recommended to use for graded assessment (at least not major ones), but you can create activities that are the basis for a graded assessment (e.g. a simulation or case study)

Some minor caveats and limits

- you can't work on it offline (and likewise, students need to be online to complete the activities)
- you cannot upload, import and convert powerpoint slides (or other types of files) - but you can link and embed external sources
- it is not a live presentation tool and does not do animated slides like powerpoint - it is simply a different tool, for a different purpose
- it doesn't have a spellcheck

[Image: next button]

[Image: back arrow]

Some cool stuff you can make with H5P

[Image: Agamotto icon]

[Image: icon for dialog cards]

[Image: icon for drag the words]

[Image: icon for drag and drop]

[Image: true/false question icon]

[Image: icon for multiple choice]

[Image: icon for image hotspots]

[Image: single choice set]

[Image: documentation tool icon]

[Image: icon for timeline]

[Image: back arrow]

[Image: main menu icon button]

More cool stuff you can make with H5P!

[Image: course presentation icon]

[Image: icon for 360 tour]

[Image: question set icon]

[Image: interactive video icon]

[Image: branching scenario icon]

[Image: interactive book icon]

Tip: Because H5P content can easily be copied and reused, you can start with smaller activities and then combine them into more complex exercises later on. While not all content types can be combined, this generally works quite well.

What is the difference between H5P.com and H5P.org?

[Image: Image of the H5P landing page]

H5P.com versus H5P.org

What is the difference between H5P.com and H5P.org?

When you look for H5P on the web, you can find H5P.com and H5P.org. They have both been created by the people who developed H5P, and they refer to the same tool. You can also copy content across from one to the other (though H5P.org has file size limits). But there are a few key differences that are worth knowing about.

Click on the blue question marks on the image below to find out more!

(If you are viewing this page fullscreen and can't see the question mark hotspots and H5P.org / H5P.com images, try leaving fullscreen view for a brief moment. You can go back into fullscreen mode once the hotspots appear).

H5P.com versus H5P.org Image Hotspots

H5P.com

- costs money (VUW has a license)
- no limit for content types and storage
- no file size limit
- more userfriendly interface
- integration with Blackboard and other LMS (such as Moodle, Canvas, Brightspace)
- more detailed analytics in the form of Learner accounts)

[Image: Screenshot of the H5P.com landing page]

H5P.org

- free
- limited in terms of content types and storage space
- Content needs to be public for it to be shared
- all the examples that H5P provides live there
- you might find content types that are not available on H5P.com (these are not officually supported, and accessibility may not be guaranteed - talk to us if you come across a content type you want to use but you can't find it on H5P.com
- user forum

[Image: Screenshot of the H5P.org landing page]

Try it out - quiz

quizbreak intro

Time for a brief knowledge check!

Try out H5P by completing quiz below!

You can either use the short link or, if you want to try it out on your mobile phone, scan the QR code below.

H5P Basics - short quiz

Basics of H5P

This quiz was created with the Question Set content type.

Question Sets allows you to combine multiple choice quizzes, fill in the blanks, drag and drop, drag the words, true / false questions, and mark the words.

What is H5P Drag Text

Drag the words into the correct boxes

Q: H5P is a [...] that allows you to create [...].

H5P is fairly easy to use and highly [...] at the same time.

H5P objects can easily be [...], reused, copied and adapted.
A: web-based tool; interactive learning objects; customizable; shared
Feedback (0 to 33%): Please pay more attention to the presentation next time!
Feedback (34 to 66%): Good effort, but there is some content that you should revise.
Feedback (67 to 100%): Great job!

H5P features - Mark the Words

From the list below, select all the features associated with H5P that have been mentioned in this presentation.

Feedback (0 to 33%): Please pay more attention to the presentation next time!
Feedback (34 to 66%): Good effort, but there is some content that you should revise.
Feedback (67 to 100%): Great job!
interactive web-based oldschool difficult easy boring
A: interactive; web-based; easy

H5P and Powerpoint - True/False Question

Q: H5P allows you to convert Powerpoint presentations into engaging interactive content with just one simple click of a button. Magic!
A: false
If right: Correct! Also, note that the wording "Too good to be true" (instead of "false") is a good example of how you can customize H5P.
If wrong: Unfortunately that is not the case. Also, note that the wording "Too good to be true" (instead of "false") is a good example of how you can customize H5P.

H5P Object Types - Multiple Choice

Q: What are some of the interactive objects that you can create with H5P?

Select all that apply.
- interactive videos (correct)
- branching scenarios (correct)
- drag and drop activities (correct)
- interactive tutor chat bots (That's not possible with H5P. If you would like to see such a feature, you might need to learn how become a software developer and create it yourself.)
- Virtual 360 tours (correct)
Feedback (0 to 33%): Please pay more attention to the presentation next time!
Feedback (34 to 66%): Good effort, but there is some content that you should revise.
Feedback (67 to 100%): Great job!

Differences between H5P.com and H5P.org - Drag and Drop Activity

- does not require a paid account
- unlimited storage and content types
- integration with Blackboard
- examples are hosted there
- What is the difference between H5P.org and H5P.com?
Q: H5P.org
A: does not require a paid account; examples are hosted there
Q: H5P.com
A: unlimited storage and content types; integration with Blackboard

H5P language basis

Fill in the missing word.

Click on the speech bubble icon to get a hint.

Q: H5P is based on [...]
A: html5
  Hint: a markup language for developing web content
Feedback (0 to 50%): That is not correct. The good news is, you don't need to know anything about software languages to build cool content with H5P.
Feedback (51 to 100%): That is correct. By the way, you can choose to accept minor spelling mistakes and whether or not you need capitalization.

https://bit.ly/370N2eR

[Image: QR Code for the quiz above (shortlink: https://bit.ly/370N2eR)]

Why use H5P?

Q: What are good reasons to use H5P for learning and teaching?

Select all options that apply.
- Give and receive feedback about progress. (correct) (You get data, the students get instant feedack. Helps build retention and engagement into a course.)
- Create appealing, interactive, and engaging formative activities (correct) (Think about: presentations with embedded media and quizzes, simulations, case studies, decision-making scenarios, interactive location visits, immersive and interactive activities, gamified exercises, ...)
- Create adaptive learning experiences (correct)
- Good for blended, flipped, and online teaching modes (correct) (H5P allows you to create activites beyond 'do a reading', 'watch a video': create self-paced presentations and activities, from simple knowledge retention checks to applied skills practice, such as problem solving, online labs, case studies, or simulations.)
- Create an activity bank that can easily be shared and reused (correct) (This great for core content throughout a programme or curriculum. Learners can do refresher training at their own pace, and as and when it suits their needs.)
- Content created with H5P.com is accessible (correct)
- Content created with H5P is fully responsive and works on mobile devices (correct)
- There is integration with other tools such as Blackboard and Panopto (correct) (It also works with other LMS and learning objects can be shared via a link or embedded with an iframe.)
- It is really easy to use - all you need is a web browser and a good idea (correct)
- H5P OER hub (currently in beta) might already have great activities that you can use and adapt. (correct) (OER stands for open educational resources. This can save time, and you can also contribute to the OER hub.)
[Image: a blackboard with the word "feedback" written on it]

VUW Example: PHIL123

[Image: Blackboard page for PHIL123]

Formative online H5P exercises in PHIL123

PHIL123: Critical Thinking (T3 2019) was the first course at Te Herenga Waka - Victoria University of Wellington to trial H5P. This offering of PHIL123 was delivered as a 6-week summer course, with extensive student support and retention designed into the course. H5P was used to create short formative exercises (as well as a clickable course calendar and a text export wizard for a student learning plan).

Short summary

Formative exercises

In every module, students were encouraged to complete two short formative H5P exercises before coming to their weekly tutorial. The exercises were modelled on summative tests that were due subsequently, at the end of each module. The exercises enabled students to apply and practice the skills and concepts they had learned in class, and gain instant feedback on how well they were doing. If they found that they had gaps or questions, they could ask in the tutorial. The tutor was able to check reports of the students' activity and follow up on concepts that all students were struggling with, as well as check in with individual students who needed some extra help.

Other ways in which H5P was used in the course

- The H5P timeline was used to create an interactive course calendar.
- A course presentation with exportable text fields was used to create a Student Learning Plan form wizard. Students were encouraged to complete the plan, download and save it, and discuss it with a student success advisor.

Content Type Examples

Examples of different H5P content types

H5P provides one or more examples for every content type that you can create.

Many of the examples are also reusable, which means you can download them, upload them to your own H5P workspace, and then modify them to suit your content. This is a really great way to learn how H5P works on the backend.

The examples below have all been copied from H5P.org and pasted into this interactive book.

Dialog Cards

Learn Spanish berry names

Berry names are presented in Spanish. You can turn the cards to see the correct English translations.

Q: Arándanos azules
A: Blueberries

Q: Frambuesas
A: Raspberries

Q: Fresas
A: Strawberries

Q: Guindas
A: Cherries

Q: Grosellas rojas
A: Redcurrants

Credits: Gepfl%C3%BCckte_Wald-Heidelbeeren.JPG; by Rosa-Maria Rinkl; source https://commons.wikimedia.org/wiki/File:Gepfl%C3%BCckte_Wald-Heidelbeeren.JPG; licence CC BY-SA 4.0

Credits: Summer_raspberries,_2008.jpg; by www.bluewaikiki.com; source https://commons.wikimedia.org/wiki/File:Summer_raspberries,_2008.jpg; licence CC BY 4.0

Credits: Bowl_of_Strawberries.jpg; by ShakataGaNai; source https://commons.wikimedia.org/wiki/File:Bowl_of_Strawberries.jpg; licence CC BY-SA 4.0

Credits: Cherries_(4700619439).jpg; by Jeremy Keith from Brighton & Hove, United Kingdom; source https://commons.wikimedia.org/wiki/File:Cherries_(4700619439).jpg; licence CC BY 4.0

Credits: Rote Johannisbeeren frisch gepflückt.JPG; by 3268zauber; source https://commons.wikimedia.org/wiki/File:Rote_Johannisbeeren_frisch_gepfl%C3%BCckt.JPG; licence CC BY-SA 4.0

Drag and Drop

- Vaccinium
- Fragaria
- Rubus
Q: Fragaria
A: Fragaria

Interactive Video

Credits: Created by Joanna Siemek. Licensed under Creative Commons Attribution 3.0 Unported (CC BY 3.0). Link: https://vimeo.com/68264542

Ingredients list
The ingredients for this delicious smoothie is:

- 1 cup milk
- 100g blueberries
- 200g strawberries
- 2 tablespoons condensed milk, sweetened
- 4 oatmeal cookies

Recipe

Preparing

Multiple choice quiz

What kind of berry is this?

Q: What kind of berry is this?
- Blueberry
- Strawberry (correct)
Feedback (0 to 0%): Wrong!
Feedback (1 to 99%): Almost!
Feedback (100 to 100%): Correct!
Credits: by FoeNyx (Author); source https://commons.wikimedia.org/wiki/File:FraiseFruitPhoto.jpg; licence CC BY-SA 4.0

[Image: Image of a red berry covered with yellow seeds]

Highlight the ingredients that have been added so far.

Strawberries Cookies Blueberries Milk
A: Strawberries; Blueberries

Fill in the blanks

Fill in the correct ingredients

Q: Strawberries and [...]berries are mixed with [...] and oatmeal [...] to make this delicious smoothie.
A: blue; milk; cookies

Mixing

Drag & drop quiz

Drag and drop

- [Image: Image of a smoothie]
- [Image: Image of a dark purple berry with a smooth skin]
- [Image: Image of a red berry covered with yellow seeds]
- [Image: Image of a dark purple clustered berry]
- [Image: Image of a red clustered berry]
- Drag & drop the berries used in this recipe on the picture!
Q: Smoothie
A: [Image: Image of a red berry covered with yellow seeds]; [Image: Image of a dark purple berry with a smooth skin]

Serving

Serving tips
Add a few berries on top of the glass and serve immediately!

Choose the correct statement.

- The smoothie ingredients are blueberries, strawberries, oatmeal cookies and milk. (correct)
- The smoothie ingredients are blackberries, raspberries, oreos and cream.
- The smoothie ingredients are blueberries, raspberries, shortbread and yoghurt.

- First add the berries, then add the cookies and finally the milk. (correct)
- First add the cookies, then add the milk and finally the berries.
- First add the milk, then add the berries and finally the cookies.

- Use a couple of berries to decorate the top of the smoothie glass. (correct)
- Use cookie crumbles to decorate the top of the smoothie glass.
- Use a tiny paper umbrella to decorate the top of the smoothie glass.

Credits: Berry Smoothie; by Joanna Siemek; source http://vimeo.com/68264542; licence CC BY 4.0

You need to pay closer attention!

Some other pretty cool examples

The content types below are standalone content types that cannot be embedded in an interactive book, but you can check out the examples on H5P.org by following the links.

- Virtual Tour (360) - explore a physical space with hotspots that can show text, images, videos
- Interactive timeline - create timeline of events with images, or let your students create one (with a free account on H5P.org) for a collaborative project or assignment
- Branching scenarios - choose your own-adventure style adaptive learning paths, great for scenario based learning or decision making
- User example of a creative course presentation where students have to apply knowledge to solve a puzzle: The Usual Suspects

Activity

Go to H5P.org and explore some of the content types and examples!

Part 2: Creating H5P activities

Workshop Brief

Planning and choosing your H5P content type

What do your learners need to do?

Instead of trying to replicate a set of powerpoint slides, or converting a face-to-face activity (e.g. lab) 1:1, think about the key skills and concepts your students are learning in the course, and then think about the right tools and content types that H5P offers in relation to those skills and concepts.

Consider one of the following questions to work on an activity for your course:

- What do your students need to be able to do when they come to class (next time or for a specific session)?
- What do your students need to be practice for an upcoming assessment?
- Can the activity be reused, repurposed, and/or shared? What do students need to be able to do every year / trimester / across courses?

Bloom's Revised Taxonomy

Use Bloom's Revised Taxonomy (pictured in the graphic below) to plan what level of learning you want to engage your students with when they work on your H5P activity. Which of the following cognitive activities do you aim for?

Credits: by Vanderbilt University Center for Teaching (Author); source https://www.flickr.com/photos/vandycft/29428436431; licence CC BY 4.0

Which H5P activity will work for you?

Practical considerations:

- How much time do you have to create the activity? Make sure you allocate time for planning and testing as well.
- How many media assets do you have already available or can you find within a short amount of time?
- Do you need grade center data? Not all content types record user activities or produce scores.

H5P content type selection - different levels of difficulty

Easy content types

Easy

Easy – can be completed in up to 30 minutes, requires limited media assets and design efforts, little time required for planning and testing

Image Hotspots

Drag and Drop

Dialog Cards

[Image: Image hotspots]

[Image: drag and drop icon]

Drag and Drop

- Vaccinium
- Fragaria
- Rubus
Q: Fragaria
A: Fragaria

[Image: dialog cards icon]

Dialog Cards

Learn Spanish berry names

Berry names are presented in Spanish. You can turn the cards to see the correct English translations.

Q: Arándanos azules
A: Blueberries

Q: Frambuesas
A: Raspberries

Q: Fresas
A: Strawberries

Q: Guindas
A: Cherries

Q: Grosellas rojas
A: Redcurrants

Quiz (Question Set)

Timeline

[Image: timeline icon]

Next >>>

[Image: quiz Question set icon]

Medium content types

Medium

Medium – Likely reqiures more than 30 minutes, planning and testing flow highly recommended, likely requires good quality and suitable media assets

Column

Documentation Tool

Virtual Tour (360)

[Image: documentation tool]

[Image: column icon]

[Image: virtual tour icon]

Interactive Video

Course Presentation

Next >>>

[Image: interactive video icon]

[Image: course presentation icon]

<<< Back

Advanced content types

Advanced

Advanced – Time for planning and testing is essential! Might require custom-made media assets

Fancy
Course Presentation

Branching Scenario

Interactive Book

[Image: branching scenario icon]

[Image: interactive book icon]

[Image: course presentation icon]

<<< Back

Tip: Download and reuse

Tips

Start small. You can always copy, reuse, modify, repurpose activities. In many cases you can also embed some of the smaller activities into some of the advanced content types.

Reuse and adapt. Most examples on H5P.org are downloadable. That means you can re-upload them to your own H5P.com workspace and reuse them. This is really helpful when you want to see the backend of an existing H5P activity, especially when working with some of the advanced content types. You can also repurpose and modify these example, using them as a template, which can save a lot of time.

Getting Started

Activate your H5P workspace

If you have not used H5P.com before, you need to activate your workspace on vuwcourses.H5P.com (the university's space for H5P content) through Blackboard.*​​​​​

* If you don't have access to a Blackboard course, you can still use H5P. Please contact a learning designer at CAD to get your license activated.

Step 1: Activate your account

1. Log in to Blackboard

Step by step instructions to activate your account

- Log into Blackboard and select a course that you have access to. This can be any course.
- This works best with Google Chrome. Using Firefox or Safari will still activate your license, but you might have to manually create a separate password for H5P. Follow the email instructions when prompted.

[Image: a screenshot of the VUW Blackboard Login Page]

Summary Tips, DOs and DON'Ts

- Always, always, ALWAYS make sure you hit the SAVE button before closing your browser, and save your work regularly inbetween. There is NO autosave.
- There is no easy undo if you accidentally delete work (but H5P asks you, "are you sure you want to delete this item?")
- Instead of trying to replicate a set of powerpoint slides, or converting a face-to-face activity (e.g. lab) 1:1, think about the key skills and concepts your students are learning in the course, and then think about the right tools and content types that H5P offers in relation to those skills and concepts
- Start small to get a feel for how long it takes to create an activity
- Spend some time planning and storyboarding, especially for complex activities
- Think about activities that allow your students to apply their skills, solve a problem, etc., rather than just creating simple knowledge quizzes.

... and lastly:

Have fun exploring and creating activites with H5P!