More Related Content


H5P content types 22.2.18

  1. H5P content types YWeLP-project Helsinki 19. and 22.2.2018 Matleena Laakso Twitter: @matleenalaakso Blog:
  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. • Examples: • Short video 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: • 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:
  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:
  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
  20. 1/3: Upload/embed video 1.
  21. 2/3: Add interactions 2.
  22. Labels Texts Tables Links Images Explanations in Finnish: Jari Sarja:
  23. Explanations in Finnish: Jari Sarja:
  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.
  29. 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: CC BY
  30. Share Choose a license Search
  31. Creative Commons -terms By combining these terms you get the licenses on the following slide
  32. Good licensies for learning materials Finnish public administration
  33. All images and videos are under CC0-license except those with Shutterstock watermark. More CC0 images: - - - Language
  34. Audio Recorder
  35. 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.
  36. Course Presentation
  37. Dialog Cards • Question/Answer (text, image, audio) • For example for learning languages
  38. Drag and Drop Try out these examples:
  39. Multiple Choice One question. You can add picture, tips and feedback that will be seen according to whether that sentence is chosen or not.
  40. Single Choice Set
  41. Summary “This content type allows creatives to create challenges where the user is to choose between statements and build the correct summary.”
  42. Summary
  43. True/False Question (MU Moodle Sandbox and some other LMS’s let you add just one question and no pictures.)
  44. Twitter User Feed
  45. Exporting…
  46. … and importing
  47. Thursday 22nd February • Discussion on pedagogy and e-learning • A few social media tools • Some more H5P content types
  48. How are you? What´s in your mind?
  49. Your best tools for learning
  50. 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: 11. Skype 12. Yammer 13. Dropbox 14. Facebook 15. Evernote 16. Excel 17. Feedly 18. Prezi 19. Trello 20. Snagit
  51. Recording and quizzes in PowerPoint • 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…”
  52. One web site for outcomes of your project
  53. 5 Tips To Transform Your Training Materials Into Engaging eLearning Yulianny Araujo: 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
  54. 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
  55. • Who would I share my ideas with? • Where could I ask for help? • What will I try out next?
  56. • 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: • Examples of digital stories:
  57. 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.
  58. Accordion Get more information by clicking one headline at a time. Example:
  59. 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:
  60. 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:
  61. Greeting Card Choose an image and add text and you have created a greeting card.
  62. Guess the Answer One question about a picture. Click the blue button and you will see the answer.
  63. 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…
  64. Image Hotspots • Pokemon GO & H5P tools • Berries & Baltic countries • Tools for online students • Map • Similar to ThingLink – Flowers & moped: –
  65. 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.
  66. Image Hotspots
  67. Image Sequencing • In which order were these gentleman presidents of Finland? • Example: Steps on starting a company (in Finnish) (Sign as as a guest / Kirjaudu vierailijana) You can add text to images.
  68. 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): (Sign as as a guest / Kirjaudu vierailijana  Muistipeli) Mountain cornflower (Centaurea montana)
  69. Personality-quiz Sign in as a guest: •Me as a student in online course (in Finnish) •Me as student tutor at my workplace (in Finnish) Example: •Which berry are you?
  70. Questionnaire Questionnaires can be used as surveys or open ended questions. You may use multiple choice questions or text input questions
  71. (Quiz) Question Set • Several question sets in one questionnaire. • You can add a backgroud image.
  72. 1. Signup / Sign in 2. Write a note 3. Style it 4. Share
  73. Canva •, 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
  74. Canva: Editing infographics
  75. Licensed under Creative Commons Attribution-Share Alike 4.0 International License (CC BY-SA 4.0) • Learn about Creative Commons -licenses: • Terms for using these slides are CC BY-SA: • You can contact me to get more rights:

Editor's Notes

  1. H5P content types, made by Matleena Laakso, has been licensed under Creative Commons Attribution – Share Aloke 4.0 International license. You can ask for more rights: