Domů > Odborné články > Základní vzdělávání > Tvorba interaktivních cvičení pro každého
Odborný článek

Tvorba interaktivních cvičení pro každého

18. 11. 2011 Základní vzdělávání
Autor
Mgr. Otmar Němec

Anotace

Mnoho z nás, učitelů, působí na školách jako webmasteři. Většinou právě na nás a vedení školy stojí, jak je web do jisté míry pestrý a bohatý. V mém článku si ukážeme, jak se na obohacení školního webu může podílet každý, a to tvorbou interaktivních cvičení pro žáky. Interaktivní cvičení na školním webu lze chápat jako moderní prostředek, který může vést žáky k samostudiu (opakování, procvičování, zábavě) k většímu zájmu o informace zveřejňovaných na školním webu atd. Programů, kterým stačí data vkládat do předem „připravených políček“, není mnoho. Za pozornost ale jistě stojí Hot Potatoes 6, kterému se budu podrobněji věnovat. Cvičení vytvořená v tomto programu jste možná již zaregistrovali na Metodickém portálu RVP v sekci Digitálních učebních materiálů – Základní vzdělávání.

Jaké jsou možnosti?

O tom, jak tvořit webové stránky, byla již napsána spousta článků.
O prvcích, jako jsou blikající tlačítka, jezdící či měnící se texty a obrázky atd., může každý nalézt na internetu i v knihkupectví celou řadu publikací.
Na konci školního roku 2008/2009 jsem začal přemýšlet o něčem, co by mohlo školní web pro nový školní rok ještě více zefektivnit a přiblížit zejména žákům. Současně jsem chtěl do celého procesu zapojit co nejvíce vyučujících. Mým cílem se tak stalo, vytvořit interaktivní sekci „Studium“, která se neustále vyvíjí (interaktivní = umožňující vzájemnou komunikaci, tj. přímý vstup do činnosti programu).
Pokud webové stránky tedy již nějakým způsobem vytváříte, můžete Váš web oživit pomocí interaktivních cvičení. Interaktivní cvičení na školním webu lze chápat jako moderní prostředek, který může vést žáky k samostudiu (opakování, procvičování, zábava) k většímu zájmu o informace zveřejňovaných na školním webu atd.
Možnosti, jak můžeme již hotový web, (X)HTML stránky uložené s příponou .html či .php, obohatit o interaktivní cvičení, aniž bychom přitom byli „profesionálové“, připadají v úvahu dvě. Lze využít programy placené či volně šířitelné, které dokáží námi vložené informace vygenerovat do zajímavých interaktivních aplikací. Druhou možností je využít již hotové zdrojové kódy v PHP jazyce, které jsou na internetu volně ke stažení. Některé můžeme jednoduše upravit podle svých představ či doporučených návodů, u jiných musíme dodržovat licenční podmínky. U jejich implementace do již hotové stránky musíme ovšem mít alespoň pokročilejší znalosti o tvorbě webu.
Programů, kterým stačí data vkládat do předem „připravených políček“, není mnoho. Za pozornost ale jistě stojí Hot Potatoes 6, kterému se budu podrobněji věnovat v dalších odstavcích.

O aplikaci Hot Potatoes 6

Program má 6 částí, z nichž každá slouží k vytváření určitého typu cvičení, která lze ve formátu .htm umístit na Váš web-server jako interaktivní cvičení vyhodnocované automaticky počítačem. Cvičení využívají jazyků HTML a JavaScript, které realizují interaktivitu na webu. O těchto jazycích samozřejmě nemusíme vůbec nic vědět, abychom mohli užívat program. Stačí tedy vložit pouze otázky a odpovědi (obrázky) a program je zpracuje do interaktivní podoby ve formě webových stránek.
Z metodického hlediska lze program Hot Potatoes využít jak pro učitele, tak i žáky. Učitelé mohou svým žákům vytvářet studijní materiály v moderní a atraktivní podobě ve formě interaktivních cvičení. Velkou výhodou je, že materiál může být umístěn na webových stránkách a současně si ho mohou žáci odnést i domů. Přímá práce žáků s programem nemusí být také vůbec komplikovaná. Program je poměrně intuitivní (a to i v anglickém jazyce), že s ním mohou po krátkém seznámení bez problémů pracovat i žáci. Na naší škole začali žáci využívat některá tato interaktivní cvičení při tvorbě svých webových projektů.

Interaktivní cvičení poskytují žákům poměrně širokou zpětnou vazbu, a to ve formě sdělení u zodpovězené otázky, zda šlo o správnou či špatnou odpověď (u některých cvičení), a celkovým hodnocením, na kolik procent byla jeho práce jako celek úspěšná. V průběhu vyplňování cvičení mají žáci možnost volby nápovědy, což se v konečném hodnocení promítne do celkového procentuálního zhodnocení. Program lze využít pro tvorbu materiálů určených k procvičování, opakování či samostudiu.

Program Hot Potatoes lze zdarma stáhnout z internetu na adrese http://hotpot.uvic.ca/

Obr. 1: Hlavní okno programu Hot Potatoes 6 po spuštění (výběr z 6 částí cvičení)
Autor díla: Otmar Němec

Skládá se z těchto částí:

  • JCross – online křížovky (součástí může být i nápověda pro luštitele).
  • JQuiz – kvízy (obsahují několik typů otázek). Žáci získávají zpětnou vazbu, případně i nápovědu, pokud zodpoví otázku špatně.
  • JMix – cvičení, kdy se z několika slov skládá věta nebo i více vět.
  • JCloze – textová cvičení, kam žáci doplňují správná slova či písmena.
  • JMatch – vytváří cvičení, kde žák musí uspořádat skupinu objektů do správného pořadí či správně propojit dvě skupiny objektů (může jít jak o text, tak i obrázky).
  • The Masher – umožňuje vytváření a správu lekcí s navazujícími sadami cvičení. Tuto část si dovolím v podrobnějším rozboru vynechat, protože nevytváří oproti ostatním sekcím nic nového. 

Tento program si dovolím vzhledem k anglické lokalizaci blíže analyzovat.

Hot Potatoes 6 – obecné pokyny

  • Klikneme na požadovaný typ cvičení.
  • Otevře se nám nový list připravený k zadávání a vytváření interaktivních cvičení.
  • Po vytvoření cvičení můžeme práci uložit příkazem Save as v nabídce File. Cvičení se uloží ve formátu spustitelném pouze v programu Hot Potatoes 6. Pomocí příkazu Create Web page ve stejnojmenné nabídce uložíme cvičení ve formátu htm (online použití na webu je výsledkem jazyka HTML a JavaScriptu).
  • Příkazem Export for Printing v nabídce File připravíme cvičení k tisku v podobě pracovního listu.
  • Pokud se rozhodneme již hotové (uložené) cvičení obměnit (přidat či ubrat otázky), můžeme příkazem Open z nabídky File vyhledat toto cvičení a provést změny.
  • Výhodou tohoto programu je i vlastní konfigurace neboli pojmenování všech prvků ve vygenerovaných cvičeních (tlačítka, nápovědy…). To znamená, že i když je program kompletně v angličtině, lze výsledná cvičení pro žáky naprosto počeštit, aniž bychom prováděli změny ve zdrojovém kódu. V nabídce Options vybereme Configure Output. Objeví se okno viz obrázek níže, ve kterém můžeme upravovat popisky, instrukce, tlačítka atd. Na dalších obrázcích si podrobně ukážeme možná nastavení u cvičení JCross v některých kartách (záložkách). Některá další nastavení u jiných cvičení můžeme provést stejným nebo podobným způsobem. Ukázka vychází z tvorby křížovky do anglického jazyka.

Obr. 2: Karta Titles/Instructions (názvy/instrukce)
Autor díla: Otmar Němec

Obr. 3: Karta Prompts/Feedback (výzvy/odezvy)
Autor díla: Otmar Němec

Obr. 4: Karta Buttons (tlačítka)
Autor díla: Otmar Němec

Výše jsme si poměrně podrobně popsali tři základní karty v konfiguračním prostředí. Jednalo se o popisky a tlačítka pro snadnější pochopení interaktivního cvičení žáky. Další karty mohou být již jen zpestřením či grafickým doladěním k našemu webu.

Obr. 5: Další karty
Autor díla: Otmar Němec
  

Vyplněné a nastavené karty můžeme uložit tlačítkem Save pro další cvičení. Tlačítkem OK se přepneme do pracovního okna pro zadávání.

Hot Potatoes 6 – JCross

JCross slouží k tvorbě jednoduchých křížovek, které po zveřejnění na webu mohou posloužit jako prostředek k procvičení látky probrané v hodinách.

Nyní si ukážeme postup při tvorbě křížovky (jednotlivé body odpovídají číslům u obrázku níže):

  1. Vložíme nadpis (titulek) pro webovou stránku s křížovkou.
  2. Kliknutím myší do mřížky můžeme na klávesnici zadat písmeno (viz modře vyplněné políčko na mřížce). Poté se můžeme na mřížce pohybovat pomocí kurzorových kláves. Zadáme všechna slova po jednotlivých písmenech.
  3. Rychlejší možností, jak zadat do mřížky všechna slova, je použití tlačítka na automatické vložení námi vypsaných slov. Nevýhodou může být programem konečné rozmístění slov bez našeho ovlivnění.
  4. Pro posun křížovky na mřížce lze použít šipky programu.
  5. Počet políček mřížky můžeme měnit příkazem z nabídky Manage Grid – Change Grid Size.  Zde zadáme číslo odpovídající počtu políček v řadě.
  6. Slova máme zadaná a jako každá křížovka bude i ta námi vytvořená potřebovat nápovědu (viz další obrázek). Tu přidáme kliknutím na tlačítko Add Clues.
  7. V předcházející kapitole jsme se podrobně seznámili s konfiguračním nastavením interaktivních cvičení. Tímto tlačítkem můžeme také vyvolat ono zmíněné nastavení.

Obr. 6: JCross – hlavní okno
Autor díla: Otmar Němec
 

Vložení nápovědy si popíšeme podrobněji. Kliknutím na tlačítko Add Clues vyvoláme níže zobrazené okno se seznamem slov obsažených v křížovce. Kliknutím na slovo dojde k přesunu kurzoru do řádku pro psaní nápovědy (např. pro slovíčko „summer“ použijeme český překlad „léto“). Vše odsouhlasíme tlačítky OK.

Obr. 7: JCross – vložení nápovědy
Autor díla: Otmar Němec
  

Hot Potatoes 6 – JMatch

JMatch je vhodný pro přiřazování pojmů vycházejících z opakování či probírání nové látky. Dokáže totiž zadané informace vygenerovat ve třech provedeních.

V nabídce File můžeme pomocí příkazu Create Web page a možnosti Standard Format práci vygenerovat tak, že u pojmů v levém sloupci je rozbalovací formulář, ze kterého můžeme vybírat hledaný výraz k tomuto pojmu.

Druhou možností je Drag/Drop Format. Ten nám velice zajímavým způsobem, často používaným u výukových programů, dokáže vytvořit dva sloupečky pojmů, které spojujeme způsobem „Chyť a pusť“. U tohoto provedení můžeme navíc do levého sloupce vkládat obrázky pomocí nabídky Insert a položky Picture – Picture from Local File.

Poslední způsob, který může být vhodnou metodou e-learningu, je založen na procházení slovíček. Zobrazí se nejdříve první výraz (např. české slovíčko), kliknutím na tlačítko „Další“ dojde k zobrazení druhého výrazu (např. anglické slovíčko). Pokud nám jsou oba výrazy již známy, můžeme vše tlačítkem „Smaž“ odstranit a pokračovat v procházení dalších výrazů.

Jaký typ cvičení nakonec vytvoříme, záleží na použití jednoho ze tří možných způsobů generování do HTML kódu.

Nyní si ukážeme postup při tvorbě výše zmíněných interaktivních cvičení (jednotlivé body odpovídají číslům u obrázku níže):

  1. Vložíme nadpis (titulek) pro webovou stránku s cvičením.
  2. V levém sloupci zapíšeme všechny výrazy „napevno“.
  3. V pravém sloupci píšeme výrazy odpovídající např. překladu v levém sloupci. Tyto výrazy budou vždy po načtení webové stránky promíchány.
  4. Zaškrtnutím tohoto políčka docílíme automatického spojení obou výrazů (z levého a pravého sloupce) po načtení webové stránky (vhodné jako ukázka u první dvojice slov).
  5. Šipky v obou směrech slouží pro posun mezi výrazy, možný je i vyšší počet.
  6. Na toto místo můžeme umístit znaky, které se zobrazí při použití prvního vygenerovaného cvičení v HTML.
  7. Konfigurační nastavení vygenerované interaktivní stránky.

Obr. 8: JMatch – hlavní okno
Autor díla: Otmar Němec
  

Hot Potatoes 6 – JQuiz

JQuiz umožňuje tvorbu kvízů se čtyřmi typy zadání. Jedná se o:

  • Multiple-choice – odpovědi vybíráme z několika možností (vhodné pro odpovědi typu ano/ne).
  • Short-answer – krátké odpovědi dopisujeme do vyhrazeného pole.
  • Hybrid – kombinuje cvičení z Short-answer a Multiple-choice v jednom úkolu, a to tak, že po určitém počtu chybných odpovědí typu Short-answer se úkol změní na Multiple-choice. Počet možných chybných odpovědí je standardně 2, lze to však změnit v konfiguračním nastavení programu.
  • Multi-select – vybíráme správné odpovědi, může jich být i několik. Pro 100% správnost musí být označeny všechny správné a žádná špatná.

Generování do HTML probíhá pouze v jednom provedení (narozdíl od přecházejícího JMatch).

Postup při sestavování dvou nejpoužívanějších kvízů typu Multiple-choice a Short-answer (jednotlivé body odpovídají číslům u obrázku níže):

  1. Vložíme nadpis (titulek) pro webovou stránku s cvičením.
  2. Vybereme jeden z výše popsaných zadání.
  3. Zapíšeme otázku.
  4. Mezi otázkami se pohybujeme posunem nahoru a dolů.
  5. Zapíšeme několik možných odpovědí (každou odpověď do jednotlivého políčka).
  6. V případě, že nám nestačí využít čtyři nabídnutá pole pro odpovědi, přidáme další.
  7. Označíme mezi odpověďmi tu správnou.
  8. Můžeme zadat odezvu k jednotlivým odpovědím. K jejímu zobrazení dojde po výběru jedné z odpovědí u již hotového kvízu.
  9. Konfigurační nastavení vygenerované interaktivní stránky.

Kvíz typu Hybrid má navíc u bodu č. 7 kromě možnosti označení správné odpovědi ještě políčko Include in M/C options. Políčko musí být zatrženo, pokud chceme vytvořit kombinaci Short-answer a Multiple-choice.
Kvíz typu Multi-select má v bodě č. 7 místo políčka Correct pro správnou odpověď pole Should be selected, které musí být zatrženo u správné odpovědi.

Obr. 9: JQuiz – hlavní okno
Autor díla: Otmar Němec
  

Hot Potatoes 6 – JMix

JMix představuje cvičení na složení věty z přeházených slov. Zvládá pouze jednu větu pro každé cvičení. Tento typ úkolů může být vhodný zejména pro opakování či lepší pochopení např. vět v anglickém jazyce. Zadané informace umí vygenerovat ve dvou provedeních.
V nabídce File můžeme pomocí příkazu Create Web page a možnosti Standard Format vygenerovat zobrazení přeházených slov, po jejichž odklikávání vytváříme skládanou větu.
Druhou možností je Drag/Drop Format. Vygenerovaná slova způsobem „Chyť a pusť“ přenášíme ve správném pořadí na volný řádek a skládáme tak celou větu. 

Postup při sestavování tohoto interaktivního cvičení (jednotlivé body odpovídají číslům u obrázku níže):

  1. Vložíme nadpis (titulek) pro webovou stránku s cvičením.
  2. Napíšeme skládanou větu (větu, kterou budou žáci skládat z přeházených slov).
  3. Vložíme jednotlivá slova jako části skládané věty (slova budou po vygenerování promíchána vždy jinak).
  4. V případě, že nám nestačí využít tři nabídnutá pole pro skládané věty, přidáme další. Vhodné pro více možností výsledné skládané věty.
  5. V případě, že bychom zapomněli na některé slovo či znaménko ze skládané věty, budeme na tuto skutečnost upozorněni.
  6. Konfigurační nastavení vygenerované interaktivní stránky.

Obr. 10: JMix – hlavní okno
Autor díla: Otmar Němec
  

Hot Potatoes 6 – JCloze

JCloze představuje cvičení založené na doplnění slova či slov. Tento typ úkolů může být vhodný zejména pro podporu kreativního myšlení. Žák je veden k porozumění okolního textu, na jehož základě může doplnit prázdné kolonky.
Generování do HTML probíhá pouze v jednom provedení.

Postup při sestavování tohoto interaktivního cvičení (jednotlivé body odpovídají číslům u obrázku níže):

  1. Vložíme nadpis (titulek) pro webovou stránku s cvičením.
  2. Vepíšeme nebo nakopírujeme text.
  3. Levým tlačítkem myši označíme slovo či část textu, který má být vynechán.
  4. Výběrem tlačítka Gap dojde k zobrazení dalšího okna pro zapsání nápovědy vynechaného slova či části textu (viz další obrázek).
  5. Odstranění zvýraznění slova určeného k vynechání (v místě kurzoru).
  6. Odstranění všech zvýrazněných slov určených k vynechání v textu.
  7. Automatický výběr výrazů k vynechání (do zobrazeného pole zapíšeme číslo, např. 11 = znamená to, že každé jedenácté slovo bude označeno a nachystáno pro vynechání po vygenerování do HTML).
  8. Zobrazení seznamu nápověd k jednotlivým vynechaným slovům či části textu.
  9. Konfigurační nastavení pro vygenerování interaktivní stránky.

Obr. 11: JCloze – hlavní okno
Autor díla: Otmar Něme
 

Postup pro zapsání nápovědy vynechaného slova či části textu (jednotlivé body odpovídají číslům u obrázku níže):

  1. Pořadové číslo vynechaného slova v textu.
  2. Posun mezi vynechanými výrazy.
  3. Místo pro zapsání vynechaného slova.
  4. Místo pro zapsání nápovědy k vynechanému.
  5. Místo pro další možné alternativy vynechaného.
  6. Posun mezi možnými alternativami.
  7. Potvrzení vložených údajů k vynechanému. 

Obr. 12: JCloze – okno vynechaného výrazu
Autor díla: Mgr. Otmar Němec

Na závěr

Z vlastní zkušenosti mohu potvrdit kvality tohoto programu a ohlasy jak ze strany žáků, tak i učitelů, z nichž někteří nyní sami vytváří interaktivní aplikace na web.
Pro naši školu program také znamená významného činitele při tvorbě vzdělávacích materiálů v rámci projektu EU peníze školám.
Pokud ve Vás tento článek vzbudil alespoň částečně pocity pokušení, určitě to zkuste... Uvidíte, že Vám bude velkým pomocníkem nejen ve výuce.

Licence

Všechny články jsou publikovány pod licencí Creative Commons BY-NC-ND.

Hodnocení od recenzenta

Tým RVP.CZ
18. 11. 2011
Program, který je v článku popisován, může v dnešní době zajímavým způsobem napomoci učitelům při tvorbě vzdělávacích materiálů v rámci projektu EU peníze školám. Mírnou nevýhodou může být absence české lokalizace, ale jádro článku tento problém zdařile řeší. Poněkud mi chybí odkazy na stránky s výstupy tohoto programu, které byly využity ve výuce. Má-li některý ze čtenářů takové materiály k dispozici, uvítali bychom jejich zpřístupnění například formou komentáře.

Hodnocení od uživatelů

Lenka Říhová
19. 11. 2011, 22:37
Děkuji za obsáhlý návod
Magdalena Málková
21. 11. 2011, 21:36
Možná stojí za zmínku, že sice chybí česká lokalizace, nicméně program je možné spustit ve slovenštině (možná pro kolegy, kteří mají radši slovenštinu než angličtinu). Jinak program je fajn, díky za článek.
Radek Sárközi
25. 11. 2011, 15:08
Použití v praxi (slovensky): http://www.past…iky.html
Radek Sárközi
25. 11. 2011, 15:25
Plně česká varianta (asi placená, ale cenu jsem nenašel): http://itrivio.cz/cs/skoly
Mgr. Lenka Syrová
25. 11. 2011, 17:48
Program Hot Potatoes mohu jen doporučit.
Další návody a ukázky cvičení jsem našla zde: http://ajina.eu…nastroje
Přikládám seznam adres s hotovými výstupy tohoto programu pro inspiraci:
cvičení pro I. stupeň do více předmětů: http://www.rysa…eni.html
testy pro I. stupeň: http://cviceni.…ndex.htm
němčina: http://www.zsvi…nemcina/
Inspirace ze Slovenska:
matematika pro 5. až 9. ročník: http://supermat…nik.html
matematika v testech: http://www.zsma…esty.htm
matematika pro 5. až 9. ročník v testech: http://www.megy…oes.html
interaktivní cvičení z matematiky pro střední školy: http://www.gymm…w=vyrazy
Mgr. Lenka Syrová
25. 11. 2011, 18:05
Další odkaz s cvičeními ze Slovenska:
ZŠ Sačurov, r-zné předměty: http://www.hotp…vod.html
Mgr. Lenka Syrová
18. 12. 2011, 15:45
Nespočet cvičení, které vznikly v programu Hot Potatoes jako výstupy projektu EU PES vytvořila ZŠ Jehnědí: http://www.brum…anky.cz/
Cvičení pro I. stupeň jsou zatříděná dle předmětů a ročníků. 
RNDr. Jitka Rambousková
19. 12. 2011, 14:20
Úžasné odkazy. Děkuji.
Dagmar Murová
8. 1. 2012, 16:05
Čeština pro Hot potatoes 6: http://digrizak…atoes-6/
David Cmerek
8. 1. 2012, 20:06
V jednoduchosti je dokonalost! :) Zkoušel jsem různé programy, od klasických XLS tabulek až po výkonné LMS systémy typu Moodle, ale HP6 u mě vítězí svou přívětivostí k autoru cvičení i jeho žákům. Škoda, že už není dál vyvíjen... DC
David Elicer
19. 7. 2013, 18:08
Dobrý den,
prosím Vás, potřeboval bych poradit jak vytvořené cvičení uložit na webové stránky, které mám na googlesites. Podařilo se mi cvičení uložit na hot potatoes, ale jen na demo účet a po nějaké době mi tato cvičení zmizela. Někde dělám asi chybu, ale nedaří se mi přijít na to kde. Děkuji.
Mgr. Ludmila Kovaříková
31. 7. 2013, 19:46
Hotové soubory vkládám spíš na estranky, které mám placené. Na googlesites si pomáhám Dropboxem. Cvičení se uloží do složky public a pak buď vložíte odkaz na cvičení (otevře se v novém okně) nebo vložit přímo do stránek tímto způsobem:
vložit html kód
<iframe src="URL Here" frameborder="0" height="500" width="600" scrolling="auto"></iframe>
místo url here dáte odkaz na soubor v dropboxu
Vypadá to takhle: https://sites.g…nik/pets (je upravena šířka)

Váš komentář

Pro vložení komentáře je nutné se nejprve přihlásit.

Článek není zařazen do žádného seriálu.

Kolekce

Článek je zařazen v těchto kolekcích:

Téma článku:

Informační a komunikační technologie