Otmar Němec: Tvorba interaktivních cvičení pro každého

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.

Převzato z clanky.rvp.cz