H5P content types
YWeLP-project
Helsinki 19. and 22.2.2018
Matleena Laakso
Twitter: @matleenalaakso
Blog: www.matleenalaakso.fi/p/in-english.html

Picture: Albert Edelfelt
Ryhmä naisia ja lapsia pianon ympärillä, CC0

Picture: Markus Enckell Kansakoulu (1899), CC0

What is H5P?
• H5P (= HTML5 Package) is a free and open-source content
collaboration framework based on JavaScript. H5P aims to make
it easy for everyone to create, share and reuse interactive HTML5
content. Works also with mobile device.
• Already almost 40 content types (and there are more to come),
for example
– Interactive videos and images
– Interactive presentations
– Quizzes, Games,..
• Platform integrations exist to Moodle, WordPress and Drupal.

h5p.org
• Examples: h5p.org/content-types-and-applications
• Short video tutorials: h5p.org/documentation/for-authors/tutorials

Instructions in Finnish language
• Suomenkieliset H5P-ohjediani löydät blogistani. Siellä opastetaan
H5P:n käyttöön Moodlen ohella myös Mobie eSmartissa
(WordPress-ympäristö). Diasarjan lopussa on mainittu muita
suomenkielisiä ohje- ja esimerkkisivustoja:
www.matleenalaakso.fi/p/koulutusdiat.html
• Keskustelua H5P:stä löytyy mm.
Moodle-juttuja ihan kaikille
- Facebook-ryhmässä
• Huomaa, että halutessasi voit
suomentaa yksittäisten tehtävien
ohjeet, jos ne ovat oletuksena
englanniksi (ks. kuva).
Examples mainly in Finnish language:
mobiesmart.snellman.onedu.fi/luvut/h5p-2

H5P-content types at MU Moodle (Sandbox)

H5P content types
Simple tools for creating one kind of tasks
•Drag the Words
•Fill in the Blanks
•Image Sequencing,..
More verstile tools for creating learning tasks (combining simple tools)
•Column
•Interactive Video
•Course Presentation,..
Content creation tools
•Accordion
•Chart
•Collage
•Iframe embedder,..
Drag and drop question
may be used standalone,
but can also be included in:
Course Presentation
Interactive Video
Question Set
Column

Lets try out some simple tools:
2018.sandbox.moodle.mu.ie/login/index.php

Drag the Words

Drag the Words

Fill in the Blanks

Fill in the Blanks
Remove the words by
marking them like *this*.
You can add feedback in
additions to showing the right
answers.

Mark the Words

Creating H5P tasks to Moodle 1/3

Creating H5P tasks to Moodle 2/3

Creating H5P tasks to Moodle 3/3
Add the content (questions, answers, pictures, videos,..)
Create OR
Upload

Test your knowledge with summary and
then we will create interactive videos

Interactive video
Make your videos more engaging by adding multiple choice and fill in
the blank questions, pop-up text and other types of interactions to your
videos.
Picture: Joanna Siemek h5p.org/interactive-video

1/3: Upload/embed video
1.

2/3: Add interactions
2.

Labels
Texts
Tables
Links
Images
Explanations in Finnish:
Jari Sarja:
sisaltotiimi.wordpress.com/2017/11/17/2226

Explanations in Finnish:
Jari Sarja:
sisaltotiimi.wordpress.com/2017/11/17/2226

Choose display time, (pause video) and
choose button or poster for interaction

3/3: Summary task (optional)
3.

Behavioural
settings of
an inter-
active video

Audio
You can add Audio or Video

Audio
You can always add copyright information.
For most Creative Commons content it is an
oblication.

Creative Commons licenses are the standard for sharing
free content online.
•The most used license in the world
•International
•Non-commercial
You need it for
•Sharing your work
•Using and remixing content
from others
Screenshot: stateof.creativecommons.org CC BY

creativecommons.org
Share
Choose
a license
Search

Creative Commons -terms
By combining these terms you get the licenses on the following slide

Good licensies
for learning materials
Finnish public
administration

pixabay.com
All images and
videos are under
CC0-license
except those with
Shutterstock
watermark.
More CC0 images:
- unsplash.com
- www.pexels.com
- stocksnap.io
Language

Audio Recorder

Course Presentation
Slide set where you can add text and images and embed videos
and tasks like single choice, drag and drop or true/false.

Course Presentation

Dialog Cards
• Question/Answer (text, image, audio)
• For example for learning languages

Drag and Drop
Try out these examples:
h5p.org/drag-and-drop

Multiple Choice
One question. You can add picture, tips and feedback that will
be seen according to whether that sentence is chosen or not.

Single Choice Set

Summary
“This content type allows creatives to create challenges where
the user is to choose between statements and build the correct
summary.”

Summary

True/False Question
(MU Moodle Sandbox and some other LMS’s let you add just
one question and no pictures.)

Twitter User Feed

Exporting…

… and importing

Thursday 22nd February
• Discussion on pedagogy and e-learning
• A few social media tools
• Some more H5P content types

How are you?
What´s in your mind?
www.classtools.net/education-games-php/fruit_machine

Your best tools for learning
answergarden.ch/648311

1. YouTube
2. PowerPoint
3. Google Search
4. Google Docs/Drive
5. Word
6. Twitter
7. LinkedIn
8. WordPress
9. Wikipedia
10. Slack
Top 100 Tools for Workplace Learning 2017
Jane Hart: c4lpt.co.uk/top100tools
11. Skype
12. Yammer
13. Dropbox
14. Facebook
15. Evernote
16. Excel
17. Feedly
18. Prezi
19. Trello
20. Snagit

Recording and quizzes in PowerPoint
http://bit.ly/2EIfg1z
• Office Mix will be shut down. Microsoft is bringing the best of Mix
directly into PowerPoint, Microsoft Stream and Microsoft Forms for
Office 365 subscribers on Windows PCs.
• Recording tab is already available to PP.
• When will interactive quizzes and analytics be available too?
– “We are working on it…”

One web site for outcomes of your project

5 Tips To Transform Your Training
Materials Into Engaging eLearning
Yulianny Araujo: elearningindustry.com/5-tips-transform-training-materials-into-engaging-
elearning
1. Adapt Your Content
2. Go Beyond Factual Information
– Build a story around the facts, use scenarios to increase interest,..
1. Keep It Short And Simple
– Keep audiences stimulated
– Find the perfect length
1. Use Interaction
– Passive Interactivity
– Limited Interactivity
– Moderate Interactivity
– Simulation
1. Increase Motivation

Different kind of learning tasks
• Offline tasks: Draw, take a photo, think, plan, interview, discuss, try
out, observe,..
• Discussions: comments on web site or LMS, comment/share on
social media, discussion during coffee break, discussion with a new or
the most experienced colleague,..
• Any tools outside on LMS /web sites:
Link or embed videos, Twitter feed, blogposts, similar projects,..
Add links to social media groups.
Embed AnswerGarden or Padlet, link to Quizlet quizizz,..
• Upload a document
• Exams
• H5P: interactive tasks, immediate feedback

wheeldecide.com
• Who would I share my ideas with?
• Where could I ask for help?
• What will I try out next?

padlet.com
• Tool for collaboration and sharing (digital flipchart)
• For text, images, videos, voice, drawing, links,..
• Make beautiful boards, documents, and webpages that are easy
to read and contribute to.
• Feedback about a guide book: padlet.com/matlaakso/TTYopas
• Examples of digital stories: padlet.com/matlaakso/digitarinat

Appear.in for Chat and Talk
• Simple video conferencing tool for max 4 persons.
• When you name the room, do not use space in the name.
• Works on Chrome, Firefox, Opera and mobile apps.
• With free plan you can claim one room. I means you will get the
ownersip and certain privileges.

Accordion
Get more information by clicking one headline at a time.
Example: h5p.org/accordion#example=62954

Column
Column allows to add several
content types and group them
in a column layout.
•Useful in Moodle if you do not
want that every H5P content have
to be opened separately.
•Not needed in all environments
like in Mobie eSmart (WordPress)
where the H5P content is
embedded.
•Example: h5p.org/column

Documentation Tool
• Allows teachers to create guides for structured
writing processes or project work.
• By answering questions about their goals and
self-assessment, the students will get a
document to help them continue their work
and assess it.
• Example: h5p.org/documentation-tool

Greeting Card
Choose an image and add text and you have created a greeting
card.

Guess the Answer
One question about a picture.
Click the blue button and you will see the answer.

Find the Hotspot / Find Multiple Hotspots
• Find the hotspots that might be hidden in the image.
• When you add hotspots you can decide the size of them.
• You can give feedback for those clicking right or wrong spots.
Examples
• Find the five biggest cities in the world?
• Find all the vegetables in this picture
• Find the spots with safely risk.
• Where would you start investigating
the resons for malfunction?
• Print screen from a web site: Where
to find… Where you can create…
Where to start…

Image Hotspots
• Pokemon GO & H5P tools
• Berries & Baltic countries
• Tools for online students
• Map
• Similar to ThingLink
– Flowers & moped:
www.thinglink.com/channel/587012253073539073
– www.thinglink.com/edu

Image Hotspots
Interactive Images )
•Upload image and choose color for hotspots
•Add Hotspot: define the right spot and the
content (text, image, video)
•Header: Optional header for
the popup. Can be seen
when the cursor is near the
hotspot.

Image Hotspots

Image Sequencing
• In which order were these gentleman presidents of Finland?
• Example: Steps on starting a company (in Finnish)
moodle.tampere.fi/course/view.php?id=5867 (Sign as as a guest / Kirjaudu vierailijana)
You can add
text to images.

Memory Game
• Picture below: Find the pairs. When you have found them you can
see what the flower is called.
• Example from the City of Tampere (features of an entrepreneur (in
Finnish): moodle.tampere.fi/course/view.php?id=5867 (Sign as as a guest /
Kirjaudu vierailijana  Muistipeli)
Mountain cornflower
(Centaurea montana)

Personality-quiz
Sign in as a guest: moodle.tampere.fi/auth/saml/login.php
•Me as a student in online course (in Finnish)
•Me as student tutor at my workplace (in Finnish)
Example: h5p.org/personality-quiz
•Which berry are you?

Questionnaire
Questionnaires can be used as surveys or open ended
questions. You may use multiple choice questions or text input
questions

(Quiz) Question Set
• Several question sets in one questionnaire.
• You can add a backgroud image.

notegraphy.com
1. Signup / Sign in
2. Write a note
3. Style it
4. Share

Canva
• canva.com, iOS
• ”Wannabe web designer” -app
• Includes both free and paid content (models,
images, fonts,..)
• Create infographics, posters, e-books, social
media posts etc
• Google: infographics youth

Canva: Editing infographics

Licensed under Creative Commons
Attribution-Share Alike 4.0
International License (CC BY-SA 4.0)
• Learn about Creative Commons -licenses: creativecommons.org
• Terms for using these slides are CC BY-SA:
creativecommons.org/licenses/by-sa/4.0
• You can contact me to get more rights:
www.matleenalaakso.fi/p/in-english.html