My other slides in English: http://www.matleenalaakso.fi/p/in-english.html

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

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

3. Picture: Markus Enckell Kansakoulu (1899), CC0

4. 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.

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

6. 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

7. H5P-content types at MU Moodle (Sandbox)

8. 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

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

10. Drag the Words

11. Drag the Words

12. Fill in the Blanks

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

14. Mark the Words

15. Creating H5P tasks to Moodle 1/3

16. Creating H5P tasks to Moodle 2/3

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

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

19. 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

20. 1/3: Upload/embed video
1.

21. 2/3: Add interactions
2.

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

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

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

25. 3/3: Summary task (optional)
3.

26. Behavioural
settings of
an inter-
active video

27. Audio
You can add Audio or Video

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

31. 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

32. creativecommons.org
Share
Choose
a license
Search

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

34. Good licensies
for learning materials
Finnish public
administration

35. 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

36. Audio Recorder

37. 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.

38. Course Presentation

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

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

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

42. Single Choice Set

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

44. Summary

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

46. Twitter User Feed

47. Exporting…

48. … and importing

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

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

51. Your best tools for learning
answergarden.ch/648311

52. 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

53. 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…”

54. One web site for outcomes of your project

55. 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

56. 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

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

58. 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

59. 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.

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

61. 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

62. 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

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

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

65. 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…

67. 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

68. 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.

69. Image Hotspots

70. 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.

71. 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)

72. 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?

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

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

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

76. 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

77. Canva: Editing infographics

78. 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