OLEN JO JULKAISSUT UUDEN VERSION tästä osin vanhentuneesta diasarjasta. SlideShare ei enää mahdollista diasarjojen päivittämistä, joten uusimman version löydät kätevimmin blogini koulutusdiojen sivulta: http://www.matleenalaakso.fi/p/koulutusdiat.html Aiheeseen liittyä infoa ja ohjeita Mobie OnEdu/eSmart-oppimisympäristöstä (WordPress): http://www.matleenalaakso.fi/p/onedu.html

1. H5P-työkalut
Sisällön rikastaminen ja interaktiiviset tehtävät
WordPress-, Drupal- ja Moodle-ympäristöissä
Syyskuu 2017
Matleena Laakso
Blogi: www.matleenalaakso.fi
Twitter: @matleenalaakso
Diat: www.slideshare.net/MatleenaLaakso Kuvat ruudunkaappauskuvia sivulta
h5p.org sekä Mobie eSmartista.

2. Mikä on H5P?
• H5P-työkalujen (=HTML5 Package) avulla voi rikastaa sisältöä ja
tehdä interaktiivisia tehtäviä esim. verkkosivuille tai sähköisiin
oppimisympäristöihin. Oppija saa niistä välittömän palautteen.
• Esimerkiksi
– Interaktiivinen kuva tai video
– Aukkotehtävät ja muistipeli
– Listaukset, diagrammit ja kuvakollaasit
• H5P-työkalut ovat saatavissa WordPress-, Drupal- ja Moodle-
ympäristöihin. Ne eivät ole niissä automaattisesti, vaan ne täytyy
asentaa erikseen, mistä voi aiheutua kuluja.

3. Tämä diasarja
• H5P-työkalut toimivat samalla tavalla kaikissa ympäristöissä ja niitä
voi jopa kopioida ympäristöstä toiseen.
• Tämän diasarjan ruudunkaappauskuvat ovat Mobie OnEdu
2.0/eSmart-oppimisympäristöstä, joka on rakennettu WordPressillä.
Näihin Mobien ympäristöihin H5P kuuluu aina ilman eri maksua.
Mobie OnEdu/eSmart-käyttäjille
• Uusimman H5P-päivityksen jälkeen myös opettaja/kouluttaja näkee
opiskelijoiden vastausten pistemäärät. Aiemmin ne näkyivät vain oppijoille
itselleen. Jos päivityistä ei teille vielä ole tehty, ottakaa yhteys Mobieen
• Mobie Zine -julkaisuissa H5P ei toimi, mutta julkaisuihinkin voit tuoda H5P-
sisältöjä linkeillä kurssiympäristöstä.
• Ohjediasarjat uuden ja vanhan oppimisympäristön, Zine-julkaisujen ja
lomaketyökalun käyttöön, sis. linkkejä muidenkin ohjeisiin:
www.matleenalaakso.fi/p/onedu.html

4. Erinomaiset englanninkieliset ohjeet
h5p.org-sivusto
•Esimerkkejä H5P-tehtävistä: h5p.org/content-types-and-applications
•Parin minuutin ohjevideoita: h5p.org/documentation/for-authors/tutorials

5. H5P-työkalut
• Eri organisaatioilla voi olla
käytössä hieman eri työkaluja
riippuen mm. siitä, milloin asennus
on tehty.
• WordPress-ympäristöissä H5P-
sisällöt löytyvät ohjausnäkymän
kautta. Siellä niitä voi myös
myöhemmin muokata, vaikka ne
olisi jo liitetty kurssille.
• Halutessasi voit suomentaa
tehtävien ohjeita – tai sitten jättää
ne englanninkielisiksi.

7. Accordion
Voit kirjoittaa ns. haitaritekstiä niin, että vain otsikot näkyvät,
mutta niitä klikkaamalla koko teksti avautuu.

8. Otsikko itseäsi ja muita muokkaajia varten
Tästä tehtävä-/sisältötyypiksi on valittu Accordion
Ensimmäisen kohdan otsikko
Ensimmäisen kohdan kuvaus
Tästä voit lisätä haitaritekstiin uusia kohtia

9. Näin viet H5P-sisällön verkkoon
• Luotuasi sisällön, näet esikatselun ja voit palata muokkaamaan
sisältöä. Muokkaaminen onnistuu, vaikka sisältö olisi jo viety
kurssille/verkkosivulle.
• Sisällön saat vietyä haluamaasi paikkaan kahdella vaihtoehtoisella
tavalla, jonka jälkeen sivu on päivitettävä.
– Kopioi saamasi shortcode, esim. [h5p id="30"] ja vei se haluamaasi
paikkaan TAI
– Siirry kohtaan minne sisällön haluat ja avaa se muokkaustilaan. Valitse
ADD H5P.

10. Appear.in for Chat and Talk
Chat- ja videoneuvottelu-
huoneen saat upotettua
kurssin lukuun/
kappaleeseen, kun vain
ensin nimeät sen.
Automaattisen koon sijaan esim. 600*650Appear.in -videoneuvottelu toimii
ilman kirjautumista kahdeksalle
henkilölle myös ilman H5P-
tehtävätyökalua.
Käytä sitä suoraan selaimella
(Chrome, Firefox, Opera; myös
mobiilisti). Kirjautumalla saa
lisäominaisuuksia.
Appear.in -videoneuvottelu toimii
ilman kirjautumista kahdeksalle
henkilölle myös ilman H5P-
tehtävätyökalua.
Käytä sitä suoraan selaimella
(Chrome, Firefox, Opera; myös
mobiilisti). Kirjautumalla saa
lisäominaisuuksia.

11. Audio
• Voi lisätä äänitiedoston tai videon.
• Huomaa, että tähän ja moneen muuhunkin
tiedostoon voi lisätä tekijänoikeustiedot.
 Ks. seuraava dia.
Tekijänoikeustiedot

12. Lisää tarvittaessa tekijänoikeustiedot
Opi lisää tekijänoikeuksista ja Creative Commons –lisensseistä
•Opettajan tekijänoikeus –kirja ja sen verkkosivut: www.opettajantekijanoikeus.fi
•KOTEK-hankkeen tallenteet: www.eoppimiskeskus.fi/kotek-hanke
•Avoimet Creative Commons –lisenssit:
www.slideshare.net/MatleenaLaakso/avoimet-creative-commons-lisenssit
Undishclosed = määrittelemätön
Public domain
•Tuotos on tekijänoikeuden ulkopuolella, joko
alun perin tai suoja on vanhentunut.
•Vain USAssa ja Israelissa voi henkilö itse valita
luovuttavansa teoksen public domainiin.
Kaikkialla muualla maailmassa CC0 on se tapa.
– Valikosta lähimpänä CC0-lisenssiä on Public
Domain Dedication and Licence, vaikkei se
aivan samaa tarkoitakaan. Ks. esim.
opendatacommons.org/licenses/pddl/1-0/

13. Chart
Piirakka- ja pylväskaaviot
•Valitse kummanlaisen kaavion teet
•Lisää teksti ja lukuarvo sekä värit

14. Collage
• Kuvakollaasin tekeminen: otsikoi, valitse layout ja lisää kuvat.
• Preview-kohdassa voit vielä
zoomata yksittäisiä kuvia (-/+)

15. Course Presentation
Tee ”diasetti”, johon upotat videoita tai äänitiedostoja ja
luot mm. aukko-, yhdistämis- tai monivalintatehtäviä.

16. Dialog Cards
• Kysymys/vastaus
• Kielten opiskeluun: esim. kääntökortti kuvalla mustikka/
blueberry: mukaan voi tuoda äänitiedoston
• Vrt. Flashcards, joissa oikea vastaus kirjoitetaan
kääntökorttiin

17. Drag Text
Aukkotehtäviä tehdessäsi voit valita esim. saako tehtävää yrittää
uudestaan, voiko katsoa oikeat vastaukset ja annetaanko
palaute välittömästi.

18. Fill in the Blanks
Tekstistä poistetaan sanat merkitsemällä ne *tähdellä*.

19. Find the Hotspot
• Oppijan tehtävänä on löytää kuvasta tietyt kohdat (hotspot),
jotka voivat olla varsin pieniäkin yksityiskohtia.
• Kuvaan voi merkitä yhden tai useita oikeita ja vääriä kohtia ja
niihin tekstikommentin.
• Oppija ei näe, minne vaihtoehdot on piilotettu.
Esimerkiksi
• Etsi kuvasta maailman viisi väki-
määrältään suurinta kaupunkia.
• Etsi kuvasta kohdat, joissa on
turvallisuusriski.
• Etsi työvälineestä kohdat, jotka
täytyy tarkastaa viikoittain.
• Etsi kuvasta kolme ensimmäistä
kohtaa, joista vikatilanteen
selvittäminen kannattaa aloittaa.

20. Flashcards
• Kääntökorttien tehtävissä on
erilaisia valintoja, voi esimerkiksi
antaa vihjeitä.
• Voit käyttää kuvia ja/tai sanoja.
• Vastaus annetaan kirjoittamalla.
Seuraavassa diassa näet
ruudunkaappauskuvista, miten
kääntökortteja tehdään.

21. Flashcards
Nimeä tehtävä
Valitse tehtävätyyppi
Kirjoita tehtäväksianto
Kysymys
Oikea vastaus
Anna halutessasi vihje
Voit muokata kuvaa ja
kertoa tekijänoikeustiedot
Näm
ä
vastaajalle
näkyvät palautteet
voit halutessasi suom
entaa.

22. Greeting Card
Valitse kuva ja lisää kortin teksti.

23. Guess the Answer
Kysymys kuvasta. Vastaus näkyy kuvaa klikkaamalla.

24. Iframe embedder
• Hae ulkoisesta palvelusta upotuskoodi (embed code), joka löytyy
usein kohdasta jaa/share.
– Upotuskoodin voi tuoda WordPressin luotetuiksi luokittelemista
palveluista, esim. Microsoft Office 365, Googlen-palvelut (Maps,
YouTube, Documents jne), SlideShare, Twitter ja Instagram.
– Tuo koodi kohtaan SOURCE.
• Vaihtoehtoisesti voit tuoda
upotuskoodin WordPress-
ympäristön muokkaustilassa
valitsemalla TEKSTI-
näkymän.

25. Mistä upotuskoodi (embed code) löytyy?
v

26. Image hotspots
Interaktiiviset kuvat
•Anna otsikko ja lataa taustakuva.
•ADD HOTSPOT –kohdasta voi valita
kuvasta aukeamaan tekstiä, kuvan tai
videon.
Esimerkkejä
•Kuva verkkokurssin työ-
välineistä (netti, kamera,
mikrofoni, kalenteri,..)
Samankaltainen kuin www.thinglink.com
Ks. ThingLink opetuksessa –diasarja:
www.slideshare.net/MatleenaLaakso/thinglink-opetuksessa
Samankaltainen kuin www.thinglink.com
Ks. ThingLink opetuksessa –diasarja:
www.slideshare.net/MatleenaLaakso/thinglink-opetuksessa

27. Interactive video
Työkalun avulla lisäät keskelle videota monivalintoja, aukkotehtäviä,
raahaustehtäviä ja omia tekstikommentteja. Lataa video tai kerro sen
linkki ja lisää editorin ylälaidasta tehtävätyyppejä.
Samankaltainen kuin
edpuzzle.com
Ohjeet: www.matleenalaakso.fi/
p/sahkoiset-kokeet.html
Samankaltainen kuin
edpuzzle.com
Ohjeet: www.matleenalaakso.fi/
p/sahkoiset-kokeet.html

31. Mark the Words
Tehtävässä valitaan tekstistä sanoja ohjeesi mukaan. Voit valita esim.
saako tehtävää yrittää uudestaan ja voiko katsoa oikeat vastaukset.
Tehtävien ohjeet voit halutessasi suomentaa, kuten muissakin
tehtävissä.

32. Memory Game
Muistipelissä voit esimerkiksi kertoa kuvasta jotain, mikä näkyy, vasta
kun parit on löydetty.

33. Question Set
Monivalinta- ja aukkotehtävät yms. samassa
kyselyssä.
Mobie OnEdu/eSmart: Jotakuinkin samat kysymystyypit
löytyvät kurssiympäristön kokeesta. Lisäksi siellä on
vaihtoehtona essee-vastaus.

34. Summary
• Teetä yhteenvetoja etenevistä monivalinnoista.
• Kuvasta näet, miten oikeat vastaukset kertyvät ylös ja tarina
etenee uusilla valinnoilla.
• Kirjoita Introduction text –kohtaan ohje. Oppija ei näe H5P-
tehtävällesi annettua nimeä.

35. Timeline
• Nimeä aikajana, tuo sille taustakuva ja määrittele alkamis- ja
päättymisaika (päivän tarkkuudella).
• Tuo sisältöä valitsemillesi päiville tai aikaväleille:
– Otsikko ja leipäteksti, taustakuva
– Medialinkki (Twitter, YouTube, Flickr, Vimeo, Wikipedia, Google
Maps tai SoundCloud)
• Esim. verkkokurssin aikataulu, yrityksen historian merkkipaalut,..

36. Aikajanaan tutustutaan klikkaamalla sen otsikoita.
Niistä voi avautua esim. mediasisältöjä.
Kuva: h5p.org/timeline

37. Twitter User Feed
Upota yksittäiseen lukuun tai
kappaleeseen tietyn käyttäjän
Twitter-syötteet.

38. H5P-sisältöjen kopioiminen toiselle
kurssille tai toiseen verkkoympäristöön
Kun luot H5P-sisältöä, jonka kopioimisen haluat
mahdollistaa, jätä rasti LATAUSPAINIKKEESEEN
(on oletuksena valittu).
Kopioimisesta on hyötyä esim. kun
•Haluat tehdä luomastasi H5P-sisällöstä kopion, jota
muokkaat hieman erilaiseksi toiselle kurssille/ryhmälle.
– Vaikka muokkaisit koko sisällön toiseksi, säilyvät tekemäsi
käännökset ohjeista:
•Haluat hyödyntää samoja H5P-sisältöjä eri kurssiympäristöissä, esim. eri
kieliversioissa tai eri organisaatioiden ympäristöissä.

39. H5P-sisältöjen kopioiminen
1. Avaa kurssi/sivu, missä H5P-sisältö näkyy.
Valitse H5P-sisällön alareunasta LATAA.
Sisältö tallentuu tietokoneellesi.
2. Siirry ohjauspaneelista kohtaan H5P sisältö –> lisää uusi. Valitse
nyt oletuksena olevan LUO (Create) -kohdan sijaan LATAA
(Upload) ja valitse aiemmin lataamasi H5P-tiedosto koneeltasi
(esim. ladattujen tiedostojen kansiosta).  USE .
3. Vie tuomasi H5P tavalliseen tapaan kurssille/verkkosivulle.

40. Mistä oppija näkee tuloksensa?
• Usein H5P-tehtävien ideana on, että oppija saa välittömän palautteen.
• Mobie OnEdu/eSmartissa (WordPressa) oppija näkee tuloksensa
myös ohjausnäkymän kautta.

41. Mistä kouluttaja näkee tulokset?
• Kouluttaja näkee oppijoidensa tulokset (pistemäärät) ohjausnäkymän
kautta yksittäisten H5P-tehtävien kohdalta kohdasta TULOKSET.
• Omat tuloksensa kouluttaja näkee kohdasta
TULOKSENI, mikäli hän testaa tehtäviä tai
opiskelee itse jotain samassa ympäristössä.

42. Muita suomenkielisiä
ohjeita ja esimerkkejä H5P:stä
ISOverstas/AW: H5P-lisäosan käyttö Isoverstaan Moodlessa (CC BY-
SA) bit.ly/isoh5p
Sanna-Kaisa Salonniemi, Tampereen kaupunki: Interaktiivisten
HTML5-tehtävien luonti Reppu-Moodleen (CC BY-NC-SA)
bit.ly/h5pohjeet
Tuuli Kurkipää ja Ville Palkinen, Tampereen kaupunki: H5P-vinkkejä
moodle.tampere.fi/course/view.php?id=5867  Kirjaudu vierailijana

43. Tämä diasarja on lisensoitu Creative
Commons -lisenssillä CC BY-SA 4.0
• Lisätietoja CC-lisensseistä: creativecommons.fi
• CC BY-SA 4.0 eli Creative Commons Nimeä-Jaa samoin 4.0
Kansainvälinen -lisenssi: creativecommons.org/licenses/by-sa/4.0/deed.fi
– Sinä saat jakaa ja muuntaa tätä diasarjaa, myös kaupallinen hyödyntäminen on
sallittu.
– Ehtona on, että viittaat aina alkuperäiseen tekijään ja lähteeseen:
Matleena Laakso, https://www.slideshare.net/MatleenaLaakso/h5ptykalut
Mahdollinen muokattu teos tulee jakaa tällä samalla lisenssillä.
• Tätä lisenssiä laajempia oikeuksia voi olla saatavilla osoitteessa
www.matleenalaakso.fi