VŠB - Technická univerzita Ostrava Fakulta elektrotechniky a informatiky Katedra aplikované matematiky
Interaktivní hry a testy pro výuku předmětu Matematická analýza I.
Interactive Mathematical Games and Quizzes for Calculus I.
2010
Jan Pavlas
VSB - Technická univerzita Ostrava Fakulta elektroteuhniky a infiMTfialik) Katedra aplikované maiemaiiky
Zadání bakalářské práce
Studení:
Jan Pavlas
Sliidijiii prtjirram:
B2647 hifrtmiaŕni a komunikační technologie
Studijní obor:
11O3R031 VýpuŕĽitíí malciiiiiĹikit
'] cuia:
Interaktívni hry a ici>ly pm výuku predmetu Matematická analýza I
Interactive: mathematical games and qui/zes tbr Calculus I
Zíisiidy pro vyprat'ován);
Diky jazyku JnvnttcnjM impleiníiii ovánému do pmliliŕ-oŕc Adrtfce Rctulec je mníiw vylraíci interaktívni výuková niíiienily v PDF foímŕitM. Cfttet pirte hufli* m pomoci koklfce lA'Vf.Xmfth mater Aem'ľĽX. ktorý maximální vyuŕiva Javascriptů a tnrmulájú v l'Dť formítu. vytvořit didaktické líry nrícM k procvičeni látky probiranŕ v Matematické analýze 1, napr. parovaci hry nebe líry typu Jeopardy (obdoba telívizrd liry Riskuj). Hry mohou byt urícny jak pro jednoho, t;ik pro dva hrióe.
Práwí budí; piobiliai v casdvdj^iťich krovitú:
I .Nnsiudováni tvorby licr pomooí mitkír AcroTuX *
?-.Tvipi1i;i ríi/nýcli lypíi lu:r
^.VylvariJtiE HTML fUľánck s nabidknu hŕi.
Sc/nam doporučene odborné liteľalury:
Dk pokynú vedoucího práce. Více p balíčku AcroTeX viz hnp:.-'-^vww.act»iex.neiV
Formálni náležitosti a rozsah bakalárske práce stanoví pokyny pro vypracováni zverejnené na webových stránkach fakulry.
Vedoucí bakalářské práce:   RNDr. Petra Šar manová. Ph.D.
Datum odevzdáni:
Datum zadáni:
prof. RNDr. Zdeněk Dostál. DSc.
07.05.2010
20.: i.:;í)í!9
prof. Ing. Ivo Vondrak, CSc děkan fakully
Souhlasím se zveřejněním této bakalářské práce dle požadavků čl. 26, odst. 9 Studijního a zkušebního rádu pro studium v bakalářských programech VŠB-TU Ostrava.
V Ostravě 20. dubna 2010
Prohlašuji, že jsem tuto bakalářskou práci vypracoval samostatně. Uvedl jsem všechny literární prameny a publikace, ze kterých jsem čerpal.
V Ostravě 20. dubna 2010
Rád bych na tomto místě poděkoval všem, kteří mi s prací pomohli, protože bez nich by tato práce nevznikla, zvláště pak mé vedoucí bakalářské práce RNDr. Petře Sarma-nové, Ph.D..
Abstrakt
Cílem této bakalářské práce je vytvořit webovou galerii interaktivních testů a her pro podporu výuky Matematické analýzy I za pomocí kolekce Latexových maker AcroTex a vektorového editoru Inkscape. Sepsaný výklad k tomuto tématu je koncipován jako manuál, zahrnující veškeré potřebné informace pro vypracování obdobných testů nebo her. Na webové stránce si budeme moci vybrat hry dvojího typu. V první skupině se nacházejí Párovací hry. Úkolem v této hře je spárovat otázku se správnou odpovědí. Druhá skupina her typu Jeopardy je obdoba známé televizní soutěže Riskuj. Hra může být určena pro jednoho nebo dva hráče, kteří si vybírají podle obtížnosti otázky za sto až pět set bodů.
Klíčová slova: AcroTgX, Jeopardy, Párovací hry, Inkscape, HTML
Abstract
The goal of this Bachelor thesis is to create a web gallery of interactive quizzes and games to support the teaching of Calculus I, using a collection of latex macros AcroTeX and vector editor Inkscape. Written interpretation of this subject is designed as a manual which includes all the necessary information to develop similar quizzes or games. There are two types of games on the website that one can choose from. The first group is Pairing Games. The aim of this kind of games is to match a question to the correct answer. The second group of games is similar to a popular television competition Jeopardy. The game can be played by one or two players who select questions for one hundred to five hundred points on the basis of difficulty.
Keywords: AcroTgX, Jeopardy, Pairing games, Inkscape, HTML
Seznam použitých zkratek a symbolů
CSS - Cascading Style Sheets
DPS - Das Puzzle Spiel
HTML - Hyper Text Markup Language
PDF - Portable Document Format
SVG - Scalable Vector Graphics
1
Obsah
1 Úvod 5
2 Balíky pro tvorbu her 6
2.1 AcroTEX ...................................... 6
2.2 Jeopardy...................................... 6
2.3 Dps - Pérovací hry ................................ 7
3 Balíky web a pdfscreen 8
4 Grafy 10
4.1 Grafický editor .................................. 10
4.2 Inkscape...................................... 12
5 Jeopardy - tvorba hry 16
5.1 Balíčky....................................... 16
5.2 Nastavení vzhledu................................ 19
5.3 Testové otázky................................... 19
6 Párovací hra - tvorba 23
6.1 Balíčky....................................... 23
6.2 Nastavení vzhledu................................ 25
6.3 Tvorba tajenky................................... 27
6.4 Tvorba otázek a odpovědí............................ 27
6.5 Kontrola a vyhodnocení testu.......................... 28
6.6 Zobrazení otázek................................. 28
7 HTML stránky 30
8 Jeopardy - uživatelský pohled 33
9 Párovací hra - uživatelský pohled 37
10 Závěr 38
11 Reference 39 Přílohy 40 A Výpisy zdrojového kódu 41
Seznam tabulek
1     Vybrané parametry balíku pdfscreen
3
Seznam obrázků
1 Výstup z programu Matlab ........................... 11
2 Výstup z programu Inkscape.......................... 11
3 Úvodní okno - Inkcape.............................. 12
4 Barevná paleta - Inkscape ............................ 13
5 Panel voleb - Inkscape.............................. 14
6 Dialogové okno - Inkscape............................ 15
7 Jeopardy...................................... 18
8 Jeopardy - otázka................................. 21
9 Ukázka výstupu prostředí multicols...................... 24
10 Párovací hra s obrázky.............................. 26
11 Rozložení úvodní HTML stránky........................ 30
12 Úvodní HTML stránka.............................. 32
13 Jeopardy - hra pro jednoho hráče........................ 33
14 Jeopardy - otázka................................. 34
15 Jeopardy - hra s obrázkem na pozadí...................... 34
16 Jeopardy - uživatelská odpověď......................... 35
17 Jeopardy - hra pro dva hráče........................... 36
18 Ukázka Párovací hry............................... 37
4
Seznam výpisů zdrojového kódu
1 Část hlavičky zdrojového souboru....................... 9
2 Základní balíčky Jeopardy............................ 16
3 Definice funkce tangens............................. 17
4 Grafické nastavení ................................ 17
5 Nastavení vzhledu Jeopardy........................... 19
6 Prostředí pro sazbu otázek............................ 19
7 Prostředí pro sazbu otázky............................ 20
8 Ukázka sazby otázky a odpovědi........................ 20
9 Příklad textové odpovědi ............................ 21
10 Příklad matematické odpovědi......................... 22
11 Balíčky v preambuli................................ 23
12 Prostředí multicols................................ 23
13 Předdefinovaný příkaz.............................. 26
14 Sazba otázek a odpovědí............................. 27
15 Příkazy ovlivňující kontrolu vyhodnocení................... 28
16 Příkazy ovlivňující zobrazení otázek a odpovědí............... 29
17 HTML kód..................................... 30
18 HTMLtag..................................... 31
19 Kód javascriptové funkce ............................ 31
20 Volání javascriptové funkce........................... 31
21 Upravené javascriptové funkce stylového balíčku dps.sty.......... 41
22 Výpis souboru pdfscreen.cfg........................... 42
5
1 Úvod
V této bakalářské práci si ukážeme cestu vývoje her a testů s využitím pro didaktické účely. Mým cílem je k tomuto výkladu navíc navrhnout sadu testů k předmětu Matematická analýza I, které jak doufám, budou pro studenty přínosem. V závěru uvedu názory studentů, kteří si vytvořené testy vyzkoušeli.
Na samotném začátku se seznámíme s balíčky L^TpXu, které umožňují vývoj interaktivních souborů formátu pdf. Dále také poznáme nové nástroje jako Inkscape, JavaScript a HTML. Zjistíme, že za pomocí těchto technologií dokážeme vypracovat poutavé testy i hry a prezentovat je na internetu. A právě v této oblasti bychom měli najít podporu, jenž nám pomůže překonat veškeré počáteční nástrahy, s kterými se během vývoje setkáme.
Celý text je psaný jednoduchou a lehce pochopitelnou formou pro běžného uživatele DTeXu. V každé kapitole je pro větší srozumitelnost uvedeno množství názorných příkladů.
Text bakalářské práce je členěn do osmi kapitol. V úvodu druhé kapitoly získáme informace o balíku AcroTpX, který poskytuje podporu didaktickým balíčkům LTpXu. Následující dvě podkapitoly se zabývají základním popisem didaktických balíčků Jeo-pardy a Dps - Párovacích her. Ve třetí kapitole se věnujeme balíčkům formátujícím obsah L^T^Xového dokumentu. Čtvrtá kapitola srovnává bitmapovou a vektorovou grafiku z pohledu použitelnosti v testech a hrách. V další části si ukážeme vektorový editor Inkscape a zjistíme jeho možnosti v rámci této práce. Kapitoly pět a šest se hlouběji věnují didaktickým balíčkům. Naučíme se vše potřebné, abychom rozuměli syntaxi příkazů, balíčkům volaným v hlavičce zdrojového kódu a samozřejmě i rozdílnosti dostupných otázek. Předposlední kapitola je o tvorbě HTML stránek za pomocí JavaScriptu a různých grafických souborů. Na konci jsou uvedeny grafické výstupy souborů ve formátu pdf a zhodnocení z pohledu uživatele.
Pro správnou funkčnost vytvořených her je nutné mít nainstalovaný program Adobe Reader ve verzi 5 a výše. Zatím jako jediný prohlížeč dokáže interpretovat i javascriptové funkce v pdf dokumentu.
6
2  Balíky pro tvorbu her
V této kapitole se seznámíme s balíčky, které potřebujeme pro tvorbu didaktických her.
2.1 AcroTEX
AcroTjX celým názvem AcroTEX education Bundle je balík obsahující řadu stylových souborů, různé příklady použití a také dokumentaci. Využívá Javascript a formuláře k vytvoření dynamických souborů formátu pdf, které se dají velmi dobře použít v e-learningových materiálech. Umožňuje mnohem více než umístění hypertextového odkazu, jak můžeme vidět u mnohých výukových materiálů na internetu. Tímto balíkem lze vytvářet interaktivní testy s kontrolou a vyhodnocování správně zadané odpovědi bez nutnosti posílat vyplněný test k dalšímu zpracování. Dále balíčky pro tvorbu didaktických her jako Jeopardy nebo Dps využívají stylové soubory AcroTgXu. O zmíněných balíčcích si povíme více později.
Tento volně šiřitelný produkt si stáhneme na internetové stránce www.acrotex.net. Klikneme na záložku education Bundle a dole na download. Poté, co si balík acrotex.zip stáhneme, musíme ho rozbalit. Otevřeme si příkazový řádek a přeložíme soubor acro-tex.ins systémem ETj;X. Všechny soubory překopírujeme do adresářové struktury ETjXu. Cesty mohou být různé (např. C : \ TeXLive2 0 0 9\texmf-local\tex\acrotex). Nakonec je třeba obnovit databázi balíčků. Můžeme využít buď manager ETjXu nebo příkaz texhash na příkazovém řádku.
2.2 Jeopardy
Hru Jeopardy si lze jednoduše představit jako známou televizní hru Riskuj. Hrací plocha je rozdělena na různé kategorie, které obsahují otázky podle obtížnosti. Každé z téma-tizovaných otázek je tímto způsobem přiděleno bodové ohodnocení. Hráč nebo hráči si podle svého uvážení vybírají otázky. Při špatné odpovědi se odpovídající bodový počet odečte, při správné odpovědi se naopak přičte. Hra končí po zodpovězení všech otázek a může být doprovázena vyskakujícím titulkem typu: „Joo jen tak dál!", k tomu ale hráč musí dosáhnout určitého procentuálního úspěchu.
Těm, kteří se chtějí o této hře dozvědět něco více, doporučuji navštívit internetové stránky http://en.wikipedia.org/wiki/Jeopardy. Zde najdeme velmi obsáhlé informace o původu a pravidlech hry Jeopardy.
Balíček Jeopardy najdeme na stránkách www.ctan.org, kde do vyhledávání zadáme klíčové slovo „jeopardy". Na nově otevřené stránce nalezneme základní informace o balíčku a link ke stažení. Následně si můžeme stáhnout jednotlivé soubory samostatně nebo všechny v jednom archívu. Po rozbalení archívu jeopardy.zip si přeložíme soubor jeopardy.ins systémem l^TgX. Poté celou složku i nově vytvořené soubory překopírujeme do adresářové struktury ETjXu a obnovíme databázi balíčků.
7
2.3  Dps - Pérovací hry
Balík dps umožňuje vytvářet Pérovací hry. V tomto typu hry je k dispozici určitý počet otázek a k nim dané odpovědi. Pro větší obtížnost lze vytvořit více odpovědí, aby to neměl hráč tak jednoduché. Úkolem celé hry je spárovat otázky se správnými odpověďmi a vyhnout se tak přidělení trestných bodů. Každé správné spárování odkryje jedno písmeno tajenky. Cílem hry je odkrýt celou tajenku s co nejmenším počtem trestných bodů.
Tento balík je také volně dostupný na již zmiňované internetové stránce www.acrotex.net, i když samotná instalace je trochu odlišná od ostatních. Na hlavní stránce nalezneme položku Games, kde se nachází nabídka her. Dps balíček se skrývá pod nabídkou Das Puzzle Spiel. Jak můžeme vidět, začáteční písmena odpovídají iniciálům autora AcroTgXu Dr. D. P. Story. Odpovídá tomu i jméno balíčku dps.sty.
Pro stažení musíme otevřít manuál, který je poslední v nabídce. Po otevření si pečlivě přečteme první stránku. První je krátký popis balíku - takzvaný abstrakt a druhý popisuje instalaci samotnou. Jakmile si text přečteme, klikneme na zelený text dps.txt a soubor uložíme ve změněném formátu dps.zip, tzn. napíšeme dps.zip místo dps.txt. Nyní už stačí balík rozbalit a překopírovat do adresářové struktury fflgXu. Nesmíme zapomenout obnovit databázi balíčků, a to buď pomocí manageru l^TgXu, nebo příkazem texhash. Použití příkazu je zpravidla výhodnější, než otevírat další program navíc.
8
3  Balíky web a pdfscreen
V preambuli našeho zdrojového kódu vždy najdeme jeden z těchto balíčků. Umožňují nám velice lehké formátování obsahu dokumentu, a tím nám značně ulehčí práci. Oba nejsou primárně určeny pro tisk, ale v nastavení existuje varianta, která nám tisk umožní. Jako obvykle má vše své klady a zápory. Pracujeme-li s grafy nebo obecně grafickými soubory, vyplatí se v hlavičce dokumentu uvést balíček pdfscreen. Díky tomu máme mnohem lepší kontrolu nad zobrazením celého dokumentu. Kdybychom používali druhý balíček, museli bychom editovat stylový soubor web.sty, ale toto není předmětem naší práce. Další z rozdílů mezi balíky pdfscreen a web je ve funkčnosti některých příkazů, například příkaz \backgeroundcolor je závislý na pdfscreen a příkaz \pagecolor na balíčku web. Proto je důležité vědět, kdy jaký balíček zavolat. Do her typu Jeopardy, které obsahují obrázky, vkládáme balík pdfscreen. Do druhého typu didaktických her vkládáme vždy balíček web. Nyní se podíváme podrobněji na oba balíčky a jejich volby.
Balík web není součástí instalace systému I^TgX. Nachází se v balíku AcroTgX eDu-cation Bundle, který obsahuje celou řadu potřebných ETgXových maker pro webovou prezentaci. Důležité je mít i co nejaktuálnější verzi balíčku hyperref, pod kterým byl balík web vyvíjen. U starších verzí může během kompilace docházet k chybě. Zavedením tohoto balíčku vytvoříme poutavé interaktivní hry, sloužící jako doplněk výukových materiálů umístěných na internetu.
Nastavení vzhledu lze ovlivňovat jen u dokumentu třídy article. Další možností je výběr formátu stránky. Existuje celkem pět možností designi, designii, designiii, designiv a poslední designv. Rozhodně není na škodu, si jednotlivé vzory vyzkoušet. Chceme-li mít větší kontrolu nad velikostí stránek, editujeme rozměry pomocí příkazů \margins a \ screensize. Protože budeme používat systém pdfLTjíX, je nutné uvést pdftex jako nepovinný parametr. Chceme-li na stranu přidat panel, který zajistí vytvoření menu pro rychlejší přechod o jednu stranu vpřed i vzad nebo skok na konec, či začátek testu, zvolíme parametr navibar.
Balík pdfscreen nabízí mnohem více možností než balíček web. Podporuje příkazy nastavující okraje, výšku, šířku a celou řadu jiných tak, aby se elementy na každé stránce vhodně zobrazily na monitoru podle našich představ. Spolu s ním je také načten balík hyperref s veškerými jeho volbami. Je doporučené, aby se načítal jako poslední v definici balíčků. Vyhneme se tím případné editaci příkazů, které jsou na něm přímo závislé. Níže uvedená tabulka ukazuje volitelné parametry nastavení.
parametr	popis
screen	Vytvoří dokument pro e-prezentaci.
print	Vytvoří dokument pro tisk.
bluelace,blue,gray,orange,palegreen,chocolate	Nastaví barvu tlačítek nebo panelu.
panelright	Umístí panel na pravou stranu.
panelleft	Umístí panel na levou stranu.
Tabulka 1: Vybrané parametry balíku pdfscreen
g
K dispozici jsou následující příkazy:
\emblema{jméno grafického souboru}
Nahraje obrázek, který se zobrazí v navigačním panelu. \urlid{webová adresa}
Nastaví tlačítko domů navigačního panelu na příslušnou URL adresu.
\screensize{výška}{šiřka}
Tento příkaz definuje rozměry výstupního pdf souboru. Žádné implicitní nastavení není, z tohoto důvodu by uživatel měl povinně rozměry zadávat.
\margins{levy}{pravý}{horni}{dolni}
Pomocí tohoto příkazu nastavíme okraje dokumentu. Opět nejsou žádné implicitní hodnoty dány a je třeba, aby je uživatel zadal.
\paneloverlay{jméno grafického souboru}
Poskytuje další možnost, jak ovlivnit pozadí navigačního panelu. My jsme jako grafický soubor používali výhradně jednoduché soubory ve formátu pdf, kde byly barva a pozadí definovány pomocí příkazů \def inecolor { }{}{},   \backgroundcolor { }.
V závěru této kapitoly si ještě ukážeme typickou hlavičku L^TgXového souboru používající balíček pdfscreen s navigačním panelem na pravé straně. Při prvním překladu zjistíme, že se vytvořilo několik nepotřebných tlačítek. Nedoporučujeme provádět nepromyšlené změny, dokud neprostudujeme [13]. Řešení spočívá ve vytvoření konfiguračního souboru pdfscreen.cfg, který je spolu se zdrojovým souborem umístěn ve stejné složce. Obecně se skládá z příkazů vysvětlených v této kapitole, navíc je doplněný o vy-kopírované definice ze stylového souboru pdfsreen.sty. Ukázku souboru pdfscreen.cfg nalezneme v příloze, definice vlastního panelu vychází z [12].
\usepackage[screen,panelright,gray]{pdfscreen} \margins{0.2in}{0.2in}{0.2in}{0.2in} \screensize{7in}{1 Oin}
\begin{document}
Výpis 1: Část hlavičky zdrojového souboru
10
4 Grafy
Nyní se podíváme na způsob, jak si jednoduše vytvořit dobře vypadající grafy funkcí, které nám oživí vzhled testů. Nově vzniklý graf by měl sloužit jako pomůcka při řešení úloh pomocí odečítání odpovědí přímo z něho samotného. Studentům a žákům pomáhá porozumět dané problematice a učitelům pomáhá při názorném výkladu učební látky.
Vizualizace studijních materiálů by dnes měla být nedílnou součástí výuky, zejména v kapitolách jako jsou elementární funkce nebo vlastnosti funkcí. Vhodně popsaným grafem přispějeme k lepšímu pochopení dané problematiky a rozvoji geometrické představivosti. Spojením teoretické a grafické části dosáhneme lepšího estetického i vzdělávacího efektu. K tomu, abychom si graf vytvořili, budeme potřebovat grafický editor a základní znalosti ovládání programu. O vektorových a bitmapových editorech si více povíme v následující kapitole.
4.1   Grafický editor
Existují dva typy editorů, první bitmapový (též rastrový) editor vytvářející soubory s rastrovou grafikou a druhý vektorový editor pracující se soubory s vektorovou1 grafikou. Následně si popíšeme základní rozdíly:
• soubory s rastrovou grafikou jsou ve formátu JPEG, PNG, GIF, TIFF
• soubory s vektorovou grafikou jsou ve formátu SVG, PDF, EPS, PS
• rastrový obrázek se skládá z obrazových bodů, kde každý bod má svou vlastní barvu a pozici
• vektorové editory jsou využívány pro tvorbu nákresů, animací a diagramů
• vektorový obrázek je složen z grafických prvků, jako jsou křivky a různé tvary (přímka, čtverec), které mají svou přesnou matematickou definici, a proto je lze beze ztráty kvality zvětšovat nebo zmenšovat
Lze říci, že rastrové soubory zabírají v počítači více místa než soubory vektorové. Je to dáno tím, že obsahují popis každého obrazového bodu uložených obrázků.
Já osobně jsem se nejdříve věnoval tvorbě v matematickém programu Matlab. Jedná se o programovací jazyk umožňující export grafů do rastrového souboru. Je v něm možné tvořit i vektorové soubory, ale k tomu je třeba program rozšířit. Po čase jsem od použití Matlabu upustil, a to hned z několika důvodů. Načtení obrázku v dokumentu nevypadá moc dobře. Provádíme-li úpravy v grafickém editoru, kvalita obrázku postupně klesá a s tím i možnost jeho použití. Všem zmíněným problémům se vyhneme použitím vektorové grafiky. Na obrázku 1 a 2 porovnáváme výstupy z Matlabu a z editoru Inkscape ve formátu jpg a pdf.
sektorový = skládající se z objektů
cos(x)
Obrázek 1: Výstup z programu Matlab
Obrázek 2: Výstup z programu Inkscape
12
4.2 Inkscape
Vyzkoušel jsem program Inkscape, který je dostupný na oficiální internetové adrese www.inkscape.org, sekce Ke Stažení. Jedná se o volně stažitelný vektorový editor používající svg jako svůj nativní formát. Bohužel systém pdfLatex neumožňuje vkládat grafiku tohoto formátu, proto musíme volit jiné výstupy, např. v pdf formátu. Další z důležitých vlastností Inkscapu je jeho multiplatformnost, to znamená, že může běžet pod Windows, MAC OS, Unix a primárním systémem Linux, pod kterým je také vyvíjen. Popis celého programu by trval velmi dlouho, ale nás bude zajímat pouze základní využití spolu s funkcemi, které nám umožní popis a generování grafů podle našich představ. Nyní se již budeme plně věnovat práci s Inscapem. Po nainstalování se nám otevře prostředí podobné Adobe Photoshopu.
Základní okno Inscapu se nijak neliší od běžných grafických editorů. Obsahuje několik základních prvků, viz obrázek 3.
W J b/ý íbJlujuiíij! 2 - JjjluĽLljjií Soubor   Úpravy   Zobrazení   Vrstva   Objekt   Krivka   Text   Efekty   Whiteboard Nápověda
□HE
il  <ř    :í J; i\ íi   iJ      t? i*    x 0,000 3 v Io.ooo II f |o,ooi |a ä
|výpln: N/A        Q; jjjjjj    ^ g .v,st»a i   g žádné objekty nebyly vybrány. Kliknut Ji JJs'" Z; I
Obrázek 3: Úvodní okno - Inkcape
13
I*™- Sil		
f m		E t
		
		
Výplň:	B 3 °1 35 1^ 1 ^ Ô 1 "v,,s,wa 1     IQ 1 Tahem vytvoříte obdélník. Tahem| *	
j Obrys B		
Obrázek 4: Barevná paleta - Inkscape
4.2.1 Horní lišta
V okně programu se nejvýše nachází horní lišta, která obsahuje emblém programu s názvem Nový dokument číslo - Inkscape.
4.2.2 Lišta menu
Na druhém řádku je klasické řádkové menu s roletovými nabídkami, které se po klepnutí myší rozbalí. V každém názvu nabídky se nachází jeden podtržený znak, tzn. že ji můžeme rozbalit i pomocí klávesové zkratky Alt + vybraný znak.
4.2.3 Rychlé volby
Třetí vodorovný řádek patří vybraným funkcím, u kterých se předpokládá nejčastější použití. Nalezneme zde možnosti jako nový soubor, otevřít soubor, uložit soubor a jiné funkce.
4.2.4 Panel nástrojů
Na levé straně se nachází panel s jednotlivými nástroji. Jsou uspořádány v jednom sloupci a je jich celkem sedmnáct. Mezi nimi se pohybujeme buď pomocí klávesnice, nebo stisknutím příslušného tlačítka myši. Pro každý nástroj existuje klávesová zkratka. Mezi nejdůležitější řadíme:
• F3 - zoom
• F4 - tvorba obdélníků a čtverců
• Shift + F6 - kresba Bezierových křivek a přímých čar
• F7 - kapátko
V dolní části okna nalezneme možnosti nastavovat barvu výplně a obrysu objektů. Součástí předcházejících voleb jsou i dva malé barevné obdélníky ukazující aktuálně použité barvy. Nad nimi je umístěna paleta se širokou škálou barev. Stačí najet myší na zvolenou barvu a zmáčknout pravé tlačítko myši set fill - barva výplně, set stroke - barva obrysu. Na kraji je tlačítko po jehož rozkliknutí nám vyjede nabídka barevných rozsahů, viz obr. 4.
14
4.2.5  Panel voleb
Tento panel nalezneme na posledním vodorovném řádku v horní části okna programu, viz obrázek 5. Podle vybraného pracovního nástroje se dynamicky mění jeho obsah, tzn. že pro každý zvolený nástroj můžeme nadefinovat jeho další potřebné vlastnosti a parametry. Zcela vpravo se nachází volby, které zobrazují barvu výplně a obrysu.
| n r h a i -pí r> i 4» # i   & ra i q <a @ n a a . g -g i_*
Nový:   |   |0|ú" I   Rohy: |s    |^ Por j     Zaobleni: [0^000   |^       »    o^rys ■ 3K:'3
: ,......Ifi I'.'T.'.....rľ........I™........ľ"........ľ°°°, . , , , q,
■  i B
Obrázek 5: Panel voleb - Inkscape
4.2.6 Postup tvorby grafu
Upravíme velikost dokumentu přes nabídku soubor/nový. Máme na výběr z velkého počtu velikostí, většinou je uvedena i informace k čemu je vybraná položka použitelná. Pro tuto práci jsme nakonec vybrali soubor s popisem LaTgX_Beamer. Od ostatních souborů se odlišuje mřížkou přes celé okno programu, navíc si jí můžeme sami upravit a editace křivek je v tomto prostředí rychlá a nenáročná.
Jakmile si vybereme, otevře se nám nové okno a to staré můžeme bez problémů zavřít. Poté zmačkneme klávesu F4 - tvorba obdélníků a čtverců a tažením vytvoříme objekt dané velikosti. Na spodní části obrazovky vidíme paletu barev, kde po kliknutí pravým tlačítkem můžeme nastavit barvu výplně pozadí a obrysu (křivka). Nyní si myší najedeme do horní části obrazovky na nabídku efekty/vykreslit/vykreslit funkce.... Tím se otevře dialogové okno s nabídkou nastavení vlastností. V horní části vidíme tři menší okna popisující Rozsah a vzorkování, použití či podporované funkce. Důležité je zapsání údajů o rozsahu os do prvního okna, aby se graf dobře vykreslil. Bez toho by mohlo dojít k chybě. Pod těmito možnostmi nalezneme už jen pole na definici funkce spolu s určením první derivace a drobná uživatelská nastavení. Ted už stačí jen zmáčknout tlačítko apply. Následně můžeme provést další vhodné úpravy.
4.2.7 Editace grafu
Pro popis obou os slouží klávesová zkratka F8 - Tvorba a úprava textových objektů, která nám umožní nad vybranou oblastí vytvářet a editovat text. Další z možností je použít nástroj kresba od ruky - F6 nebo použití štětce - CTRL + F6. Poslední dvě zmíněné volby vyžadují pevnou ruku, jinak bude výsledek hodně nepřesný.
Někdy dochází k zabarvení plochy i mimo naší zvolenou oblast. Opravíme to následně: Zmáčkneme klávesu Fl - nástroj výběru. Potom, co klikneme na objekt, použijeme
15
kapátko - F7 takovým způsobem, že klikneme kdekoliv na bílou plochu a tím opravíme nechtěně zabarvené oblasti.
Poslední důležitou úpravou odlišíme šířky obou hlavních os od vytvořené křivky. Pomocí nástroje výběru označíme celou oblast grafu. Nahoře v pruhu nabídek otevřeme nabídku Křivka a vybereme funkci rozdělit na části. Touto funkcí docílíme rozdělení celé vybrané oblasti na jednotlivé elementy, které se nám budou lépe upravovat. Jakmile si vybereme samostatně jednu osu, klikneme vlevo dole na číslo vedle obrysu. Okno Vykreslit funkci vidíme na níže zobrazené ukázce.
Rozsah a Vzrokováni Use
Počátek hodnoty x Konec hodnoty-x Vynásobit rozsah-x krát 2*pi hodnota y spodní strany čtyrúhelniku hodnota y horní strany čtyřůhelníku Vzorky
-6,0	
6,0	
□	
-2,0	B
2,0	
680	
Izotropická změna měřítka (používá nejmenší: šírku/x rozsah nebo šírku/y rozsah) q Use polar coordinates
Funkce cos(x)
Vypočíst první derivaci numericky První derivace
Odebrat čtyřůhelnik Vykreslit osy
□ 0
Live Preview
□
Close
Apply j
Obrázek 6: Dialogové okno - Inkscape
16
5  Jeopardy - tvorba hry
Zdrojový kód her typu Jeopardy je uzavřen do stejné struktury jako každý jiný ETgXový dokument. Po nainstalování jeopardysty do I^TgXu si lze pro inspiraci projít příklady dostupné ve stejné složce. Ukazují nám možnosti a omezení tohoto balíku. Hry vytvořené pomocí stylového souboru Jeopardy podporují odpovědi z nabízených možností, doplňovací matematické a textové odpovědi. Už z tohoto pohledu je zdrojová část mnohem obsáhlejší než u Párovacích her. Doplňovací odpovědi vyžadují balíček exerquiz. Ve chvíli, kdy odpovíme, nás hra vrátí na úvodní stranu a upraví bodové ohodnocení podle pravidel. Během vyplňování nemáme žádnou možnost vrátit se zpět, každou takovou situaci řešíme zavřením a otevřením nové hry, nebo prostě pokračujeme dál.
Obecně v preambuli volíme balíčky společně s příkazy specifikujícími samotný vzhled a typ testu. Existuje celá řada variant nastavení pro tyto účely, viz kapitola 3. V těle dokumentu se již plně věnujeme tvorbě otázek, které vhodně doplníme obrázky vytvořenými v programu Inkscape.
5.1 Balíčky
Úvod hlavičky zdrojového souboru si prohlédneme níže: %& -translate-file=cp227.tcx
\input csenc-w.tex %- překódovává cp1250 na IL2
\documentclass[pdftex]{article}
\usepackage[czech]{babel}
\usepackage[IL2]{fontenc}
\usepackage[pdftex,desig nv] {web}
Výpis 2: Základní balíčky Jeopardy
Jak jistě víme, na začátku testu je nutné uvést jazyk spolu s kódováním. Při tvorbě dokumentu psaných v češtině je důležité zvolit správné balíčky s příslušnými argumenty. Volba správné znakové sady a fontů nám zajistí správný typografický výstup. Obvykle chvíli trvá, než zjistíme, jaké kódování náš počítač podporuje a jak s ním můžeme pracovat. Mezi základní balíčky určující sazby zvoleného jazyka patří babel, fontenc.
Balík babel slouží k výběru jazyka, v našem případě ho doplníme nepovinným parametrem czech. Může obsahovat i více jazyků, ale v tomto případě je aktivní pouze poslední uvedený jazyk. Všechny jazykové definiční soubory jsou součástí instalace ETgXu.
Pomocí balíku fontenc si vybíráme fonty v námi zvoleném kódování. Najdeme je v souborech s příponou .def. Vliv na dokument je určen pomocí nepovinných parametrů. Pokud obsahuje více než jeden, je jako implicitní brán poslední parametr a příkaz \encodingdef ault se nastaví podle něj. Jako nepovinný parameter používáme IL2.
Pro zprovoznění matematické sazby musíme do hlavičky dopsat následující skupinu balíčků:
\usepackage{amsmath},   \usepackage{exerquiz},\usepackage{dl j slib}. První ze jmenovaných balíčků definuje příkaz \DeclareMathOperator { } { } umožňující velmi jednoduše definovat nové matematické příkazy. Syntaxi často používáme pro
17
některé goniometrické nebo cyklometrické funkce, které nejsou v LTjiXu dostupné. Na příkladu vidíme vytvoření funkce tg, tzn. tangens.
\DeclareMathOperator{\tg}{tg}
Výpis 3: Definice funkce tangens
Na druhém řádku se nachází balíček ze známé distibuce AcroTgX. Jeho použití je úzce spjato s balíkem web. Nicméně si můžeme vybrat i vlastní balík s podobnými vlastnostmi a exerquiz použít pouze k vytvoření kvizu. Nesmí chybět ani balík hyperref. Z tohoto důvodu pracujeme buď s
\usepackage[pdftex,designv]{web} \usepackage{exerquiz}
nebo
\usepackage[pdftex]{exerquiz} \usepackage[screen]{pdfscreen}.
Poslední balík djlslib taktéž pochází z AcroTgXu. V této knihovně nalezneme javascrip-tové funkce kontrolující odpovědi zapsané uživatelem. V tomto okamžiku již spuštěný test uživateli nedovolí zapsat jinou odpověd než matematickou formuli ve smyslu otázky. Dljslib zavedeme do zdrojového kódu dokumentu následujícím způsobem:
\usepackage[nepovinné parametry]{dljslib}.
S každým nepovinným parametrem je spojena funkce, která rozšiřuje škálu matematických otázek testu. Dvě námi nejvíce používané funkce si popíšeme níže. Další funkce nalezneme po nahlédnutí do dokumentace [17].
• ImplMulti : Zjednodušuje vyplnění matematické odpovědi, např. dovoluje zapsat 2x cos(x) místo 2* x * cos(x).
• indef Compare (indef Integrál): Porovnává, zda jsou výrazy stejné nebo se liší nejvýše o aditivní konstantu.
Teď už text „nepovinné parametry" zmíněný výše v hranatých závorkách nahradíme popsanými volbami.
Grafickou stránku Latexového dokumentu změníme následujícími příkazy:
\definecolor{Myspecialblue}{rgb}{0.2 0.4 0.8} \pagecolor{Myspecialblue}
Výpis 4: Grafické nastavení
18
Nejzajímavější příkaz vidíme na prvním řádku. Nelíbí-li se nám standardní barvy L^T^Xu, není těžké, vytvořit si vlastní. Postup se skládá ze tří kroků. Do první a druhé složené závorky patří vlastní jméno barvy a použitá paleta. Poslední závorka obsahuje definici vybrané barvy převedené do intervalu 0 až 1. V případě naší barvy je to v RGB režimu 51 102 204. Potom pomocí kalkulačky dělíme čísla hodnotou 255 a dostaneme výslednou hodnotu červené, zelené a modré obsažené v naší barvě 0.2 0.4 0.8. Číselná kombinace odpovídá odstínu modré. Ukázku s výstupem si ukážeme později.
Na konci této úvodní kapitoly probereme první z didaktických balíku Jeopardy (viz obrázek 7). Je to přepracována verze makra jj _game od Dr. D. P. Storyho. Autorem této úpravy je Mgr. Rober Mařík Ph.D. z Mendelovy univerzity v Brně. Pro svůj bezproblémový běh potřebuje dljslib i exerquiz. Příklady používaných voleb:
• czech - celý test je v češtině
• twoplayers - hra pro dva hráče
• picture - uživatelé nesbírají body, ale odkrývají části skrytého obrázku. Při chybné odpovědi vybraná část zčerná. Tato volba doplňuje první stranu hry tlačítkem „So-lution", jenž odkryje kompletně celý obrázek. Načtení zvoleného souboru zajistí
\ JeopardyPictureFile { } v hlavičce dokumentu.
• finetune - řeší grafický problém zvětšených proporcí u Jeopardy. V kombinaci s parametrem picture dojde občas k neúplnému zakrytí obrázku. Poté nezbývá nic jiného, než posunout obrázek pomocí \AditionalShif t do správné pozice na obrazovce.
Poslední balíček v preambuli: \usepackage [czech, finetune] { jeopardy}.
Obrázek 7: Jeopardy
19
5.2 Nastavení vzhledu
Všechna důležitá témata preambule jsme již probrali, proto se směle můžeme pustit do těla dokumentu. Začneme s prvky ovlivňující barvu, velikost, pozici nápisů, textů a celé hrací plochy neboli nastavení vzhledu úvodní obrazovky. Cíle dosáhneme současným použitím L^TpXových, AcroTpXových i Jeopardy příkazů. Jejich příslušnost není třeba odlišovat, mohou se mezi sebou prolínat. Dále se zaměříme na naše použité nastavení doplněné popisem, co každý příkaz přesně znamená.
\SetGameWidth{0.8\linewidth}
\def\JeopardyTitle{\textcolor{Myspecialblue}{\LARGE\bf{2. Test - Číselné množiny}}} \def\ChampionMsg{Jen tak dál...} \Celltoks{\BG{0.2 0.4 0.8}} \Scoretoks{\BG{0.2 0.4 0.8}}
\everyCategoryHead{\color{Myspecialblue}\normalsize\bf}
Výpis 5: Nastavení vzhledu Jeopardy
Prvně musíme definovat velikost hrací plochy, což má na starost příkaz \ Set GameWidth. V ukázce je nastaven na 80 procentech šířky strany na monitoru a vycentrován. Rozsah přijatelných hodnot je v intervalu 0.0-1.0. Nabízí se nám alternativní příkaz \ S e t GameHe i ght upravující výšku hracího pole. Makrem \ JeopardyTitle definujeme nadpis testu.
Na konci úspěšně vyplněného testu se zobrazí skrytý titulek uložený v\ChampionMsg. Ve výchozím stavu to znamená 90 procent všech bodů, existuje i možnost vlastního nastavení pomocí \Goal. Je-li volba picture aktivní, vyskakující titulek může obsahovat například jméno obrázku, který si zobrazíme dvojím kliknutím na „Solution button". Ovlivňovat bodové hodnocení rozhodně není třeba, implicitní nastavení je adekvátní.
Další dva příkazy \Celltoks, \Scoretoks upravují grafickou stránku hracích polí a pole bodového vyhodnocení. Jejich argumenty jsou sladěné barevné kombinace, pozor nepřijímají jména uživatelsky definovaných barev od \definecolor. Standardně jsou prázdná, ale výjimkou je \Celltoks,kterýjevpřípaděpicturenastavenna \BG{ 0 0 0 }. Poslední příkaz \everyCategoryHead aplikuje své nastavení na každou hlavičku prostředí \category2, protože toto prostředí neumožňuje ovlivňovat v něm napsaný text jakýmkoliv ETpXovým příkazem, AcroTpXových nebo Jeopardy příkazem.
5.3 Testové otázky
Testové otázky se sázejí výhradně v těle dokumentu. Důležité Makro \MakeGameBoard sestaví hrací plochu a je následováno prostředím category.
\MakeGameBoard \begin{category}{Derivace funkce}
\end{category}
Výpis 6: Prostředí pro sazbu otázek
2více v kapitole 5.3
20
Výše uvedené prostředí přijímá jeden parametr - jméno oblasti, ke které se otázky vztahují. Jméno není dostupné v případě aktivního nepovinného parametru picture, kdy má nově vytvořený I^TgXový dokument místo názvu kategorie jen velká písmena abecedy. U tohoto prostředí již vytváříme otázky výčtovým prostředím question, které neobsahuje žádný parametr.
\begin{question} \end{question}
Výpis 7: Prostředí pro sazbu otázky
V tomto okamžiku si konečně ukážeme sázení různých druhů otázek v hrách typu Jeopardy:
• Otázka s výběrem nabízených možností
• Otázka s textovou odpovědí
• Otázka s matematickou odpovědí
5.3.1   Otázka s výběrem nabízených možností
Prostředí question je určeno pro tvorbu otázek, u nichž je právě jedna odpověď správná. Odpovědi jsou uvozeny \AnsO - označující špatnou odpověd nebo \Ansl - označující správnou odpověd. Z toho vyplývá, že pouze jednou použijeme příkaz \ An s 1. Příkladem
jej_
Určete, které z následujících tvrzení o funkci $f(x):= \arctg(x)$ je pravdivé.
\Ans1 Funkce $f$ je omezená. \\
\AnsO Funkce $f$ je periodická. \\
\AnsO Funkce $f$ je sudá. \\
\AnsO Funkce $f$ je kladná. \\ \begin{figure}[!b]
\begin{center}
\includegraphics[width=0.4\linewidth]{arctg.pdf} \caption{$f(x)=\arctg(x)$} \label{obr.graf1} \end{center} \end{figure}
Výpis 8: Ukázka sazby otázky a odpovědi
21
Výsledek použití prostředí question, viz obr. 8:
I. za 100.
Určete, která z následujících tvrzení o funkci f(x) := arclg|i) je pravdivé. |Tj  Funkce / je omezená. pT|  Funkce f je periodická. □  Funkce/je sudá. [ď]  FUnkce / je kladná.
Obrázek 8: Jeopardy - otázka
5.3.2  Otázka s textovou odpovědí
Příkazem \RespBoxTxt vytvoříme pole pro textovou odpověď. S tímto typem odpovědí jsme se seznámili jen okrajově, převážně jsme pracovali s výčtovými odpovědmi nebo s odpovědmi formou matematického výrazu. Příkladem je:
\begin{question}
Pro množinu všech přirozených čísel, t. j. množinu $(1,2,3,\ldots)$ vyhradíme symbol \ldots.
\RespBoxTxt{1}{0}{1}{N} \end{question}
Výpis 9: Příklad textové odpovědi
Ve výčtu jsou umístěny naše požadované slovní odpovědi, tzn. může zde být i více složených závorek s textem. Mezi další rozšiřující parametry patří filtrování, porovnávání řetězců a počet správných odpovědí. Všechno jsou to číselné charakteristiky uvedené ještě před výčtem odpovědí.
Filtrování nabývá celkem čtyř hodnot —1, 0, 1 a 2. První —1 zakáže kompletně celé filtrování. Volbou 0 řekneme překladači, že se má text převádět na malá písmena a odstranit mezery a nepísmenné znaky. Číslo 1 upraví text na malá písmena a odstraní mezery. Poslední volbou 2 se odstraní mezery.
Porovnánání řetězců ovlivníme 0, kdy je vyžadována absolutní shoda uživatelovy a autorovy odpovědi. V opačním případě 1 povolí i částečnou shodu. Poslední z číselných hodnot myslím není třeba popisovat. Potom rozšíření předcházejícího příkazu může vypadat například takto:
\RespBoxTxt{1}{0}{2}{N}{přirozená cisla}.
22
5.3.3  Otázka s matematickou odpovědí
Příkazem \RespBoxMath vytvoříme pole pro matematický výraz. Umístění není přímo závislé na matematickém prostředí. Může být i nemusí být součástí tohoto prostředí.
\colorbox{Myyellow}{\textcolor{Mywhite}{\parbox{10cm}{\bf{Napište inverzní funkci k :} $$f(x)= x"3 - 8$$ \RespBoxMath{(x+8)"(1/3)}(x){4}{.0001 }{-1,1} }}}_
Výpis 10: Příklad matematické odpovědi
\RespBoxMath se v tomto případě nachází mimo matematické prostředí. Obsah celé otázky je umístěn na popředí žlutého čtyřúhelníku. Definování odpovědí jako matematický výraz nabízí celou řadu nastavení, které si teď probereme.
Na vytvořenou otázku máme možnost odpovědět zapsáním konkrétního čísla nebo funkce proměnné x, viz nepovinný parametr (x). První složené závorce se nevěnujeme, jelikož obsahuje jen výsledek.
Druhý parametr nastavuje počet bodů, ve kterých se výsledek porovnává s uživatelovým. Nejčastěji volíme mezi 3 až 5 body.
Třetí parametr určuje odchylku při kontrole uživatelovy odpovědi. Porovnání se provádí na základě výpočtu funkčních hodnot uživatelovy i námi uložené odpovědi. Poté jsou každé dvě funkční hodnoty příslušné ke stejnému bodu porovnány. Výsledek je považován za správný, jestliže nedojde k větší než námi určené odchylce u všech dvojic.
Čtvrtý, poslední parametr stanoví interval porovnání. Jedinou odlišností od výše uvedeného příkladu je zápis intervalů funkcí více proměnných, např. funkce dvou proměnných x,y na 0 — 1 píšeme [0,l]x[0,l].
Syntaxe matematických výrazů se řídí následujícími pravidly:
• Zahrnuje aritmetické operace sčítání (např. x + 1), odčítání (např. x — 1), násobení (např. 2 * x) a symbol / pro dělení a zlomky. Chceme-li zapisovat násobení čistě bez znaménka *, přidáme nepovinný parametr ImplMulti balíčku dljslib (např. 3x místo S*x).
• Pomocí sqrt zapisujeme druhou odmocninu, např. sqrt(x). Odmocniny vyšších řádů píšeme trochu jinak (například x " (1/3) pro y/x).
• Pro mocninu je vyhrazen symbol ", např. x " (- 4).
• Exponenciální funkci značíme exp(x) nebo e"x. Druhá zmíněná volba je používanější.
• Absolutní hodnotu zapíšeme buďabs(x) nebo \x\.
• Číslo 7T píšeme jako pi.
• Nakonec uvedeme přehled goniometrických funkcí: sin(x), cos(x), tan(x), cot(x).
Čtenáře zajímajícího se podpobněji o problematiku tvorby otázek v AcroTgXu odkážeme na literaturu (např. [6]).
23
6  Pérovací hra - tvorba
Zdrojový kód pérovacích her je uzavřen do klasické ETgXové struktury, tzn. musí obsahovat hlavičku a tělo dokumentu. Časově ani programově není celková práce tak náročná jako v případě Jeopardy her. Je to dáno hlavně jednodušším principem hry, sérii obecnějších otázek sázíme společně s odpověďmi. Vše může být náhodně promícháno a tím každé nové přeložení systémem pdfl^TgX vytváří dojem nového testu.
Většina příkazů je nadefinována v hlavičce. V těle dokumentu určíme rozložení otázek a odpovědí na jedinou stránku. Inspirací nám můžou být příklady, které jsou dostupné po doinstalování dps.sty. Správné vyhodnocení zajistíme umístěním javascriptových funkcí do zdrojového kódu naší hry. Nevykopírujeme-li javasriptové funkce ze stylového souboru pérovacích her, nefunguje žádná kontrola a odpověď vybíráme do té doby, než trefíme správné řešení. Výčet upravených funkcí nalezneme v příloze3. Pro vývoj těchto her použijeme balíček web.sty pro formátování obsahu na obrazovku a eforms.sty pro aktivování formulářových políček.
6.1 Balíčky
Výčet balíčků není tak početný a není zapotřebí deklarovat tolik speciálních balíků Acro-TeXu. Nyní si můžeme prohlédnout běžně používané balíčky tohoto typu testu.
%& -translate-file=cp227.tcx
\input csenc-w.tex %- překódovává cp1250 na IL2
\documentclass{article} \usepackage[czech]{babel} \usepackage[IL2]{fontenc} \usepackage{graphicx} usepackage {mu Iticol} \usepackage[pdftex]{web} \usepackage{amsmath} \usepackage[pdftex] { ef o rms } \usepackage{dps}
Výpis 11: Balíčky v preambuli
První neznámý balík nalezneme na sedmém řádku výše uvedeného příkladu. Multicol umožňuje přepínat mezi jedno sloupcovým nebo více sloupcovým formátem na jedné stránce. Potom otázky a odpovědi umisťujeme na stránce pomocí následujícího prostředí.
\begin{multicols}{počet sloupců} \end{multicols}
Výpis 12: Prostředí multicols
3 Autorem úpravy je Mgr. Rober Mařík Ph.D.,
24
Výsledek použití prostředí multicols, viz obr 9:
Odpovědi
□ /(x) = (í - l)2 + 2
Obrázek 9: Ukázka výstupu prostředí multicols
Ve starších verzích balíku Exerquiz byl eforms jeho nedílnou součástí. Dnes už existují oba odděleně. Eforms je součástí AcroTgXu, z toho vyplývá, že musíme mít balíček Hyperref, nebo jej musíme aktualizovat. Díky tomuto makru lze nadefinovat spoustu tlačítek, kterými ovládame testy napsané čistě pomocí AcroTgXu.Více informací o vytvoření tlačítek najdeme v [16].
Mezi nepovinnými parametry nalezneme jako obvykle ovladače překladu: pdftex, dvipsone, dvips a dvipdfm. Budeme se především držet prvně jmenované volby. Existuje ještě volba preview. Když si preview aktivujeme, u každého grafického objektu vytvořeným balíčkem eforms se vykreslí čtyřúhelník. To nám potom ulehčí další změny pozic jednotlivých objektů na stránce.
V případě testů určených pro tisk, přidáváme parametr forpaper/forcolorpaper do balíčku web. Během překladu se nevytvoří žádné tlačítko nebo formulář, jen se aktivuje volba showletters balíku dps. Pokud vycházíme z testu vytvořeného pro obrazovku počítače, musíme celý test přepracovat tak, aby odpovídal rozměrům papíru.
Poslední balík dps určuje typ didaktické hry, v tomto případě párovací hru. Správná funkčnost je podmíněna instalací AcroTjXu a instalací balíčku random.tex pro generování náhodných čísel. V následujících řádcích si teď popíšeme dostupné nepovinné parametry tohoto balíčku:
• nonrandomized - veškeré otázky a odpovědi jsou zobrazeny ve stejném pořadí v jakém byly nadefinovány v prostředí \Composing. Autorům dovoluje rychlé vyřešení celého testu, aby viděli jestli se vše zobrazí jak má. Implicitní chování je randomize, náhodné uspořádání otázek a odpovědí.
• viewmode - pomocí této volby vidíme po překladu vyplněnou tajenku. Užitečné při návrhu vzhledu hry.
• showletters - zobrazí vazby mezi otázkami, odpovědmi a také tajenkou hry. Pro přesnější návrh hrací stránky je balíček doplněn o viewmode.
• showanswerkey - ukazuje nápovědu dole na konci stránky. Jestliže načítáme v hlavičce i balíček graphicx, nápověda se otočí o 180 stupňů. Tato možnost se má používat v případě aktivní volby forpaper balíčku web.
• savedata - uloží do souboru „název testu"_data.sav dvě hodnoty. Soubor random.tex používá proměnnou Initial seed k zapamatování náhodného pořadí otázek,
25
odpovědí a dokonce i nápovědy. Ve druhé proměnné Solution Key nalezneme nápovědu k testu.
Obsah souboru „název testu"_data.sav :
Initial seed: \randomi=3 9 65533 9 9 Solution Key: 1-p; 2-a; 3-r; 4-b; 5-o; 6-1;
Jednoduše překopírujeme příkaz \randomi=396553399 do preambule zdrojového kódu, hned pod řádek \usepackage { dps }. Po překladu bychom měli vždy získat stejně náhodný test.
Na druhém řádku výše nalezneme pro tento znovu otevřený test nápovědu. Můžeme jí využít pro zobrazení řešení na další straně testu, například pokud děláme verzi pro tisk.
• lang=english|german - tímto nastavením ovlivníme jazyk vyskakujících okének během hry. Pokud máme zájem text v oknech upravovat, musíme si otevřít složku se stylovým souborem dps (viz kapitola 2.3). Zde už bezproblému nalezneme definiční soubory dps_str_us . de f a dps_str_de . de f s hledaným obsahem. Problém s podporou ostatních jazyků je vyřešen pomocí volby lang=custom. Překopírováním a přejmenováním dps_str_us .def, nebo dps_str_de . def vytvoříme soubor dps_str_cus . def, který editujeme podle pravidel zvoleného jazyka. Potom konečné umístění našeho definičního souboru je shodné se zdrojovými soubory Pérovacích her.
6.2  Nastavení vzhledu
U Párovacích her editujeme vzhled jediné stránky. Příkazy ovlivňující tyto vlastnosti deklarujeme přehledně v hlavičce zdrojového souboru. Umožňují nám nastavit barvu pozadí, editovat text, vytvořit si vlastní barvu. Většina balíčků se navzájem podporuje a proto jejich odlišení není potřeba, což známe již z Jeopardy.
Pomocí \rowsep můžeme nastavit vertikální mezeru mezi řádky. Příkaz přijímá jeden argument, velikost vertikální mezery, například,
\rowsep{3ex}.
Ovlivnění interaktivní tajenky docílíme příkazem \Puz zleAppearance. Argument tohoto prostředí se skládá z jednoho nebo více příkazů balíčku eforms, který dokáže změnit vzhled formulářových tlačítek, například,
\Puz zleAppearance{\textSize{12}}.
Další vítanou úpravou může být změna barvy čtyřúhelníku u očíslovaných otázek -\QuesAppearance a odpovědí - \AnsAppearance. Tyto příkazy přijímají jeden argument, který obsahuje jeden příkaz nebo skupinu příkazů balíčku eforms, například,
26
\QuesAppearance{\BC{0.2,   0.4, 0.8}}, \AnsAppearance{\BC{0.2,   0.4, 0.8}}.
Pokud chceme ještě jinak měnit délku tajenky, použijeme příkaz \insertPuzzle {n }. Požadovaný argument n udává počet sloupců na jeden řádek. Každé písmeno tajenky odpovídá jednomu sloupci. Deklarací \insertPuzzle{n} zlepšíme práci s tajenkou a to může pomoci k lepšímu umístění mezi ostatními prvky hrací plochy.
Předmětem těchto her mohou být také grafy, jejich deklarace je však trochu složitější. Nefunguje vložení grafů pomocí příkazu \ includegraphics, během překladu pokaždé vyskočí chyba. Tento problém obejdeme použitím následující syntaxe.
\def\obr#l{\leavevmode$\vcenter{\includegraphics[width=5cm]{#1.pdf}}$}
Výše popsaný příklad definuje zcela nový příkaz \obr přijímající jediný argument, a to jméno bez koncovky souboru. Je určen pro zobrazení grafických souborů ve formátu pdf. V případě, kdy máme nachystané soubory odlišného formátu, jednoduše přejmenujeme { # 1. pdf} na příslušný název, například { # 1. png} pro png. Příkladem je:
\obr{kva.graL3}
Výpis 13: Předdefinovaný příkaz Párovací hra může vypadat například takto, viz obr. 10:
Obrázek 10: Párovací hra s obrázky
27
6.3 Tvorba tajenky
Na začátku je potřeba vymyslet zprávu určité délky, ve které bude každé odkryté písmeno symbolizovat jednu správně spárovanou otázku a odpověď. Je dobré vymyslet tajenku v souladu s obsahem testu, tzn. tvoříme-li matematický test, potom by zvolená zpráva měla být z této oblasti. Nyní si ukážeme příkaz, který můžeme umístit do preambule naší Párovací hry:
skrytá zpráva: Derivace funkce
\DeclarePuzzle{DDeerriivvaaccee{}{space}ffuunnkkccee}
Pomocí \DeclarePuz z le nadefinujeme jednotlivá písmena tajenky. Všimneme si že argument obsahuje sadu párových znaků a mezeru { } {space }. Během návrhu Pérovacích her se setkáme celkem se třemi skupinami formulářových tlačítek: tlačítka u otázek, odpovědí a textové pole tajenky. Interaktivní tlačítkou jsou spojena s textovým polem tajenky pomocí druhého symbolu zdvojeného znaku.
6.4 Tvorba otázek a odpovědí
V rámci prostředí Composing sázíme otázky a odpovědi. Počet obou skupin je přesně daný a pořadí každé dvojice může být náhodné.
Příkazy cQ a cA jsou uzavřeny v prostředí pro sazbu otázek. Uvádíme je v pořadí, kdy první označuje otázku a druhé odpověď. Samotný test může obsahovat více odpovědí než otázek, ty jsou potom vypsány na konci. Oba poslední příkazy přijímají jeden argument a to písmena tajenky. Prostředí Composing, cQ a cA deklarujeme v preambuli hned za \DeclarePuzzle.
Mezi často vyskytující se chyby patří definice více otázek se stejným argumentem. Je-li správně zvolená odpověď, odkryje se nám znak na všech pozicích v textu. V následující krátké ukázce jsou použity výše popsané příkazy.
\begin{Composing} \begin{cQ}D
\end{cQ} \begin{cA}D
\end{cA} \begin{cQ}e
\end{cQ}
% odpovedi navic - zvětšuji obtížnost testu \begin{cA}1
\end{cA} \end{Composing}
Výpis 14: Sazba otázek a odpovědí
28
6.5 Kontrola a vyhodnocení testu
Kontrola a vyhodnocení probíhá odlišným způsobem než u Jeopardy. Vždy je zapotřebí ošetřit chybové stavy, jako je přidělení trestných bodů, počet pokusů na vybranou otázku a určení podmínek úspěšného testu. Abychom jen nehádali, systém automaticky přiděluje trestné body i v případě opakované špatné odpovědi. Poté, co vyřešíme test, javascriptové funkce vyhodnotí uživatelovu úspěšnost a zobrazí výsledek v přehledném okně. Celkové hodnocení je kombinací trestných bodů a počtu špatných odpovědí. Autor testu má pro tyto účely k dispozici tyto příkazy:
• \threshold: Určuje počet pokusů na jednu otázku. Překročíme-li tuto hranici, systém přidělí trestné body. Příkaz \threshold přijímá jeden argument a příkazem \dsthreshold pak zobrazíme hodnotu nastavenou pomocí \threshold. V hlavičce zdrojového kódu nastavíme \threshold a \dsthreshold použijeme při popisu pravidel hry. Popis bývá zpravidla umístěn v těle dokumentu. Implicitně jsou povoleny 3 špatné odpovědi.
• \penaltypoints: Definuje počet trestných bodů. Počet trestných bodů se aktualizuje při každém překročení čísla vycházejícího z\threshold. Příkaz \ penaltypoints přijímá jeden argument a je doplněn \dspenaltypoints, který zpřístupní námi nastavené číslo. Umístění ve zdrojovém kódu je shodné s \threshold. Implicitně jsou přičteny 3 trestné body.
• \passing: Definuje maximální počet chyb, kdy ještě uživatel úspěšně zakončí test, tzn. kolikrát se můžeme pokusit zodpovědět nabízené otázky. Úspěšnost nezávisí na počtu trestných bodů. Přijímá jako ostatní příkazy této skupiny opět jediný argument a v instrukcích hry použijeme \dspassing.
Příkladem je:
\threshold{1} \penaltypoints{10} \passing{3} \begin{document}
Maximum pokusů je stanoven na $\dsthreshold $ než dostanete $\dspenaltypoints$ trestných bodů. Celkem jsou povoleny $\dspassing$ chybné odpovědi. \end{document}
Výpis 15: Příkazy ovlivňující kontrolu vyhodnocení
6.6 Zobrazení otázek
Otázkyjsou zobrazeny příkazem XdisplayRandomizedQuestions v těle dokumentu. Toto makro musí být umístěno do prostředí enumerate, které očísluje vzestupně otázky. V kombinaci s aktivním parametrem showletters dochází k mapování mezi otázkami, odpověďmi a také tajenkou.
29
Jestli máme vytvořen velký počet otázek, umístíme tyto otázky do prostředí multicols. Rozložení otázek do sloupců vypadá potom lépe a samozřejmě ušetříme tím i místo.
Stejně jako otázky, jsou i odpovědi zobrazeny obdobným způsobem \ di s p 1 a y Ran domi z e dAn swers. Shodné je i umístění do prostředí enume rate. Alternativní cesta se nabízí pomocí příkazů \di splayRandomi zedAnswersLeftPanel,\displayRandomizedAnswersRightPanel. Potom ve vytvořeném testu uvidíme otázky uprostřed ve dvou sloupcích a po stranách jsou rovnoměrně rozdělené odpovědi. Příkladem je:
\begin{document}
\textbf{Otázky}
\begin{multicols}{3}
\begin{enumerate}
\displayRandomizedQuestions
\end{enumerate}
\end{multicols}
\textbf {Odpovědi}
\begin{multicols}{3}
\begin{enumerate}
\displayRandomizedAnswers
\end{enumerate}
\end{multicols}
\end{document}
Výpis 16: Příkazy ovlivňující zobrazení otázek a odpovědí Výsledek výše uvedeného výpisu, viz obr. 10.
30
7  HTML stránky
Jakmile máme vytvořené Jeopardy nebo Párovací hry, zbývá nám už jen prezentovat obsah na internetu. K vytvoření našich webových stránek jsme použili nástrojů jako HTML, CSS a Javascript. Pokud se chceme takovéto cestě vyhnout, můžeme využít služby některého z wysiwyg editorů. O HTML kód se v případě, že nenastanou problémy nemusíme vůbec starat. V případě potíží se však HTML musíme naučit.
Výše uvedeným způsobem jsme navrhli webové stránky v programu PSpad, jenž je volně dostupný na www.pdspad.com/cz. Na samotném začátku je důležité rozmyslet si vzhled webu. Vymyslíme-li pěkně vypadající webovou stránku, zaujmeme potencionálního uživatele a navíc se k nám bude vracet. Výhodou je, že na internet umísťujeme jen soubory a v tom případě nám zcela stačí jednoduchá myšlenka. Obecně se snažíme oddělit obsah od formy dokumentu. Vyhýbáme se HTML atributům ovlivňujícím vzhled, který zajistíme pomocí kaskádových stylů. Při vytváření webové prezentace postupujeme následovně:
• Rozvržení HTML stránky docílíme pomocí rámu. Skupina rámů rozděluje úvodní stránku index.htm do třech oblastí, kde se načítají jiné HTML stránky. Hlavním tágem bude <FRAMESET> a dále atributy <R0WS> a <C0LS>, které nám rozdělí rámy na sloupce a řádky. Mezi další důležité atributy patří <B0RDER> - šířka čáry oddělující jednotlivé rámy, <SRC> - zdrojová HTML stránka, <SCROLLING> - zakáže posuvník na pravé stráně a poslední <FRAMEBORDER> - stejné vlastnosti jako v případě <B0RDER>.
<frameset rows="110,*" border="0">
<frame name="frame" src="hlavicka.htm" scrolling="no" >
<frameset cols="300,*" >
<frame name="levy" src="menu.html" frameborder="0" scrolling="no"> <frame name="pravy" src="uvod.htm" frameborder="0" scrolling="no">
<noframes>
<p>Váš prohlížeč nepodporuje rámce.</p> </noframes>
Výpis 17: HTML kód
Poslední z nepopsaných tagů je <N0FRAMES>, zobrazí obsah jen v případě pokud webový prohlížeč nepodporuje rámce. Například rozložení, viz obr. 11:
Obrázek 11: Rozložení úvodní HTML stránky
31
• Grafickou stránku ovlivníme buďpomocí kaskádových stylů nebo souborů různých grafických formátů. Kaskádové styly přiřazují HTML tágům nové vlastnosti, které jistě zlepší vzhled celé prezentace. Jak dobře využijeme tento nástoj, záleží na našich znalostech HTML. Druhou možností je využití grafických souborů. Zejména soubory formátu png s transparentním pozadím oživí vzhled stránky. V prohlížeči se nám pak nezobrazuje okolí načteného obrázku. V této části lze využít i nově nabyté znalosti vektorového editoru Inkscape. Pro inspiraci existuje na internetu nespočet tutoriálů, které popisují prakticky každou funkci. Finální soubor poté uložíme ve formátu svg. Zdrojový kód HTML stránky rozšíříme o následující syntaxi.
<embed src="Logo.6.svg" width="728" height="90"
pluginspage="http ://www.adobe.com/svg/viewer/install/"> </embed>
Výpis 18: HTML tag
• Interaktivitu zajistíme skriptovacím jazykem JavaScript, jehož hlavní využití je právě v této oblasti, tzn. vývoj HTML stránek. Mezi typické vlastnosti patří dynamická typovost, proměnná může nést hodnotu různých datových typů. Javascrip-tové knihovny nabízí velký počet různých funkcí ovládající načtení, otevírání, zavírání a dynamičnost obsahu jednotlivých stránek. Nyní si prohlédneme ukázku.
function popup()
{
newwindow=window.open("pop.up.htm","info'Vwidth=1000,height=600,scrollbars=no,
resizable=no'); if (window.focus) {newwindow.focus()} return falše;
}_
Výpis 19: Kód javascriptové funkce
Funkce pop-up() otevírá novou html stránku, můžeme ji zavolat po stisknutí textu nebo kliknutím na nějaký obrázek. Tělo funkce obsahuje jednu proměnnou newwin-dow, která využívá vnitřní funkci JavaScriptu windows.open. Ta definuje vlastnosti nově otevřené stránky. Potom v rozhodovacím bloku ověříme, zda je aktuální stránka v popředí. Je-li to pravda, stránka pop_up.htm se otevře v novém okně do popředí. Příkladem volání je.
<a onclick="return popup()"> </a>
Výpis 20: Volání javascriptové funkce
Na obrázku si prohlédneme úvodní stránku index.htm.
- kvadratická funkce - goniometrická funkce
- limita funkce
- základni derivace
■ derivace (vlastnosti)
- piňliěh funkce
- asymptoty funkce
- základni integrály
Jeopardy s obrázkem na pozadí
Pro zobrazení webové stránky jnosun použijte:
Firefbx Opera Safari 2-SVQ build IE + zásuvný modul ASV3
MAm\ATJKA
UVOD
Tyto stránky vznikly jako součást bakalářské práce :
Interaktivní hry a testy pro výuku předmětu Matematická analýza I.
Autor: Jan Pavlas E-mall: pav569@vsb.cz
Obrázek 12: Úvodní HTML stránka
co ro
33
8 Jeopardy - uživatelský pohled
V rámci této bakalářské práce jsem vypracoval osm Jeopardy her. Během vývoje jsem se snažil využít veškeré nabízené možnosti tohoto didaktického balíčku I^TgXu. Po přečtení kapitol věnujících se Jeopardy hrám a rozšiřujícím nástrojům jako Inkscape získáme dostatečné znalosti pro vytvoření testu na podobné téma a neměli bychom už ztrácet čas neustálým otevíráním dokumentace.
Na následujících řádcích uvedeme pohled uživatele a zmíníme existující přednosti. Získali jsme i názor studentů technických fakult, zda by se jim tento nástroj výuky zamlouval.
S 1 Adobe Reader - [integral.pdfj									EES
"'   Soubor   Úpravy   Zobrazení   Dokument   Nástroje   Okna Nápověda									_ i fiij x.!
1 £ ■ UM HON q  (§, ft MM	||j<m]> Vybrat ^		[j] h © |™*	■ ©		\ Nápověda -	1 Ttm		
Si Data zapsaná do tohoto formuláre nemůžete uložit. Pokud cheetŕ mi    ipii: ormulár:      sví    "i iamv   ■■ isk :?te si prosím vyplněný formu						Vytisknout formulář			Zvýraznit pole
T
S. Test - Integrální počet
I i      . "Z'     I ť
I LJ
I n
Obrázek 13: Jeopardy - hra pro jednoho hráče
Interaktivní soubory formátu pdf se nám na první pohled jeví jako běžný pdf dokument, který se nijak neodlišuje od souboru téhož typu ze statickým obsahem, viz obr. 13. Jakmile však myší klikneme na námi vybrané políčko hrací plochy, můžeme vypozorovat určité změny. Vidíme, že došlo k otevření nového okna (viz obr. 14), které obsahuje otázku vztahující se k tématu. Každý sloupec otázek může představovat vybrané téma nebo okruh větší kapitoly. Zpravidla se název kapitoly nachází nahoře nad hrací plochou. U verze kvizu, kdy odkrýváme obrázek si bohužel nelze vybrat otázku podle názvů umístěných nad sloupcem (viz obr. 15). Ten totiž obsahuje jen velká písmena abecedy a navíc nelze poznat obtížnost otázky, protože ty nejsou bodově ohodnoceny. Opatrnému uživateli zcela eliminujeme možnost výběru jednodušších nebo složitějších otázek a ukazuje nám to podstatný rozdíl mezi klasickým Jeopardy kvizem a jeho verzí s obrázkem na pozadí.
34
	i dobe Reader - [integral, pdf]			EES
'ÍL	5ojbor   Úpravy   Zobrazen: Oakume	nt   Mást t oje   Okna nápovědí		
	^ H Uložit kopii	Hledal |j[^j]]> Vybrat jgjj j       ' [j^J] Ü    ® 1 6&%     '   ®   Í       ' Í @ NáPoyěda * j T*» |		
6	Data napsaná do to ■■■ ■   ■ - lái    ernůžete uložit. -:í. .           ii           ..       . .     . záznamy., ^yUsknete 5i prosím     li'iiíi :v- Formulár		| . . Vytisknout formulár |       |_| Zvýraznit pole	
j /		- 'ľ' "iilkir- ruin i i'l- - lr, ;' b'l--ni ":■       -;"lr"liii-- l.i ■ r1. ,: im ■ ŕ».jf«»-Jr^-{f-í]:.fI--í)-i H v.,Jf,ŕl-4,-.JfiÄ-d,.,[ŕ-ŕ]|.,(!--í)	'hill- 1- Ii -.'"I - - 1 M "1 -1--111 ■ 1 lil-.i V' I-- -\'v 1"-"II-■. ä 3	
			V-	■
		Otiůírk 8: Objal	0      1 >	B
				
	i m	H  4 1 i"'" 1	ť  H   O 0 |	U 1 M   nn □□
Obrázek 14: Jeopardy - otázka
Nejjednoduší forma odpovědí je výběr z nabízených možností, stačí si jen vybrat jeden ze znaků „a, b, c, d" a označit. Odpovědi tohoto typu obsahují převážně celé věty nebo tvrzení. Z pohledu uživatele je kombinace s grafickou ukázkou velice názorná a navede přímo ke správnému řešení. Na druhou stranu můžeme chybně uvedeným obrázkem spíše zmást než pomoci.
1 Adobe Reader - [integral.pdf]
Suubpi   Úpravy   Zobrazení  Dokument   Másti^je   Okna Nápověda
lá        .!-. •
8. Test - Integrálni počet
JJ m ML	Z	_
É		
□ J
HO ô I
Obrázek 15: Jeopardy - hra s obrázkem na pozadí
35
							□EE
^s.ubo, Ob.	vy   Zobrazení Decent	ástroje   Ohia Nápověda					-SX
1 3 n	a a it""			>|l^-|l			
	•SASKA	oäS,Ä«,altra„,„,„é„ÍF.r.o					»e.„
iii. za 300.
Vypočtěte následující neurčitý integrál.
/
U |_HJ nn uu
a a
N  4 I I ►  H | O O
Obrázek 16: Jeopardy - uživatelská odpověď
V testu jsou zařazeny i otázky vyžadující doplnění textového nebo matematického výrazu (viz obr. 16). Podle otázky přesně poznáme, zda se jedná o textovou nebo matematickou odpověď. V případě první možnosti musíme mít na paměti pravidla nastavená autorem, abychom zbytečně neztráceli body. Jedná se o jednoduchá nařízení, jako je například úplná shoda odpovědí nebo uvádění diakritiky v psaném textu. To však musí být uvedeno v instrukcích.
Druhý typ odpovědí se vyhodnotí jedině vepsáním matematického výrazu do pole pro odpovědi. Text nebo cokoliv jiného zapříčiní vyvolání okna s informací o tom, že náš matematický výraz není správně zapsán a vrátí nás na stránku s otázkou. To na uživatele rozhodně klade mnohem větší nároky než předešlé dva typy odpovědí. Uživatel musí dodržovat správné uzávorkování, znát symboly pro mocninu, odmocninu, pí a e. Větší počet chyb se pravděpodobně vyskytne v příkladech s goniometrickými nebo cyklometrickými funkcemi, jejichž název vychází z amerických definic, např. arctg(x) zapisujeme atan(x).
Výhoda všech tří odpovědí je uživatelská přívětivost, po vyplnění otázky dochází k okamžité kontrole a přesměrování na hrací plochu. Přesto může ze začátku docházet k menším problémům se správným výběrem nebo zadáváním výrazu, často jsou tedy webové stránky rozšířeny o dokument popisující pravidla hry.
36
Poslední varianta Jeopardy je hra pro dva hráče. Jednoznačně ji poznáme podle rozdělení polí pro přidělení bodů a navíc se dole nachází dvojice políček. Pro větší přehlednost je zde uvedená i textová informace (viz obr. 17). Celý grafický koncept hry pochopitelně vychází ze standardní verze pro jednoho hráče, což můžeme vidět na obrázku. Hráči si mohou kliknutím na políčko v dolní části stránky sami určit kdo je na řadě. Bohužel v tomto případě nikdy nedosáhneme rovnoměrného rozdělení otázek.
Doma si asi těžko budeme hledat stejně zaměřenou osobu, proto hlavní uplatnění vidím ve výuce. Zejména při delším vyučovacím bloku nám nabízí zpestření a možnost trochu si oddychnout. Ukážeme-li si vyučovací látku přehledně v širších souvislostech, výrazně to napomůže jejímu pochopení. Z pohledu pedagoga může být tento nástroj použit jako test k ověření studentských znalostí.
1 >A-j[>? ií—r^r - [iur^rdiyŽpílíJ
icubor   Úpravy   ľoiirazeni   Dekumenr Nástto
^ !!► Vybra g j [^]] £J |66%    |-   ®   I ^ - I & Nápověda • j VMi
áľnamy, vytiskněte s prosím výplně
s. Test - Integrální počet
			
			
			
	Si	U	
		m	
■■■1			
Ml 9
Obrázek 17: Jeopardy - hra pro dva hráče
Abychom získali reakce studentů na obsah našich webových stránek a získali jejich přímou odezvu, zprovoznili jsme webové stránky měsíc a půl předem. Celkový ohlas byl pozitivní, vytvořené testy se zalíbily již při první návštěvě. Studenti ocenili hlavně jednoduchost ovládání a zpracování výsledků, kdy není nutné odesílat je k dalšímu zpracování. S negativním názorem na obsah stránky jsme se nesetkali, převažovaly názory jako dobře pochopitelný, zajímavý a někteří dokonce použili slovo zábavný. Na konci každého rozhovoru o této problematice jsme se shodli na tom, že by studentům matematiky výrazně pomohl větší počet interaktivních pomůcek při výuce.
37
9  Pérovací hra - uživatelský pohled
Pro podporu výuky Matematické analýzy I jsem vytvořil celkem osm Pérovacích her. V první fázi vývoje jsem se potýkal s nefunkčím systémem vyhodnocení správně zadané odpovědi. Předpokládal jsem, že zde funguje kontrola vyhodnocení zcela totožně jako v případě Jeopardy, kde máme k dispozici nástroj automatického vyhodnocování a této problematice se vůbec nemusíme věnovat. Po přečtení kapitol věnujících se Parovacím hrám, už víme, že řešení spočívá v umístění funkcí ze stylového souboru dps.sty do našeho zdrojového kódu.
Na první pohled poznáme, že se jedná o jednoduchou hru na základě párování otázek a odpovědí (viz obr. 18). Při výuce je vhodné použít tento test jednak v elektronické verzi, ke které mohou studenti přistupovat ze svého počítače, nebo i jako klasický tištěný test. Při tisku si musíme dát pozor na úpravu vzhledu testů, které byly dříve určeny pro obrazovku počítače. Nezkušenému autorovi může chvíli trvat, než dojde k žádané změně.
Soubor   Úprsvy   ľotjrajení  Dokureeot   nástroje   Okna ''líi^tM*
rvi.-.vli-■■rtľ ■|>™iif f.iiilii Otázky-
Odpovědi:
□ /M-x"-2
□ /(x)-(I + 2)'-l
□./(-.)-(i-lf-1
Instrukce: Výběr -otázky ]jrmtj<lťl n pokusů je s'
3-
□ /-(i)-(.-l)2 + 2
□ /M-[> + l)2 + l
......I    r. "... I, I    u..... i... Ii.t■*.    v. ..   -. ... 11 11 ..i
li'Ä iL i-.I.iij.       |l i 1 |. ..i n yi ||   i, n 11]   ( '.'Iki'uj j;.. ii| [i. r.-i J. ■!]■.■ '{ ■[l>I 'ji" i "Ijn jYi""Ij
od]>i)V-?<].
\u\>
Obrázek 18: Ukázka Párovací hry
Velkou výhodou Párovacích her je jejich uživatelská přívětivost, za celou dobu jsem se nesetkal s jediným odmítavým názorem od studentů, všichni byli spokojeni. Mě osobně tato odezva mile překvapila, zejména to, že nebyly žádné větší připomínky týkající se zpracování obsahu testů. Hry doplněné obrázky považují studenti za nejelegantnější řešení, jednak jsou názorné a navíc podávají bližší představu o průběhu dané funkce na vybraném intervalu.
38
10 Závěr
Po přečtení této bakalářské práce (tzn. pochopení teorie a vyzkoušení všech příkladů) by měl být každý schopný vytvořit vlastní webovou galerii didaktických testů nebo her. V rámci této práce jsem pro studenty předmětu Matematická analýza I vytvořil web, na kterém nalezneme testy věnující se problematice číselných množin, elementárních funkcí, limit, diferenciálů a integrálního počtu. Návštěvou tohoto webu si můžeme ověřit své základní i pokročilé znalosti diferencionálního a integrálního počtu funkcí jedné proměnné.
Vektorový editor Inkscape představuje velmi mocný nástroj. Během celého roku jsem se v praxi věnoval tématu vytváření grafů funkcí a jejich následné editace. V této práci jsem porovnal matematický program Matlab s editorem Inkscape, který přesvědčivě zvítězil. Při generování grafů jsem se nesetkal s žádnými potížemi, vytvořené křivky vypadaly na obrazovce monitoru velmi dobře a snadno se upravovaly. Dle mého názoru, je v případě pozdější editace vhodné uložit soubor ve formátu svg a prohlížet jej ve formátu pdf.
Výsledný graf již není těžké umístit pomocí běžného LTpXového příkazu na stránku dokumentu. Pro nás to znamená, že jeden z balíčků uvedených v hlavičce zdrojového kódu musí být pdfsceen, jinak se nám graf funkce plně nezobrazí. V rámci Párovacích her je pro tento účel bohužel nutné nadefinovat vlastní příkaz, ale na druhou stranu nemusíme řešit problém formátujících balíčků LTpXu. V hlavičce je vždy uveden balíček web.
Posledním krokem bylo vytvoření jednoduchých internetových stránek, které ve finální fázi zpřístupní e-learningový materiál všem studentům. Výklad věnovaný tomuto tématu úvadí čtenáře do základů tvorby HTML stránek pomocí JavaScriptu, kaskádových stylů a vektorové grafiky, které jsem se věnoval nejvíce. Další doplňující informace jsou dostupné na internetu i v českém jazyce.
Zjistil jsem, že se oba didaktické balíčky dají výborně použít jako pomůcka při výuce matematiky. Pro tyto účely by bylo vhodné rozšířit mnou vytvořené webové stránky o učivo probírané v předmětu Matematická analýza ve vyšších ročnících bakalářského studia.
Text této diplomové práce byl vysázen systémem LTpX. Jedná se o nástavbu programu TpX, který umožňuje autorům textů sázet a tisknout dokumenty v nejvyšší možné typografické kvalitě a je vhodný zejména pro sazbu matematiky.
Jan Pavlas
39
11 Reference
[1] HTML - Jak psát web, návod na html stránky [online], duben 2010. Dostupné z www: www.jakpsatweb.cz/html/.
[2] Inkscape. Kreslete svobodně, [online], duben 2010. Dostupné z www: http: / /www. inkscape.org/.
[3] Javascript Tutorials - Tutorialized [online], duben 2010. Dostupné z www: http: //
www.tutoriali zed.com/tutorials/Javascript/1.
[4] Bouchala, J. MATEMATICKÁ ANALÝZA I, skripta, VŠB-TUO, 2005
[5] Bouchala, J., Kovář, P., Šarmanová, P., Vodstrčil, P., Otázky z matematické analýzy pro IT, VŠB-TUO, 2007
[6] Jalová, N. Testy z integrálního počtu funkcí více proměnných [online], bakalářská práce MU Brno, 2008 [cit. 2010-04-12].
Dostupné z www: http://is.muni.cz/th/1758 85/prif_b/bakalarka4. pdf ?lang=en.
[7] Kopka, H., Daly W., P. LaTeX KOMPLETNÍ PRŮVODCE, 1. vyd. Brno: Computer press, a.s., 2004. ISBN 80-7226-973-9.
[8] Luboš, P. Bitmapová a vektorová grafika v praxi [online],
bakalářská práce Bankovní institut vysoká škola Praha, 2009.
Dostupné z www: http://is.bivs.cz/th/6355/bivs_b/BP_Lubos_ PAVEL_BIVS.pdf.
[9] Mařík, R. Robert Marik - Home page [online], duben 2010. Dostupné z www: http:
//user.mendelu.cz/"marik/.
[10] Mařík, R. Didaktické hry ve výuce matematiky, In Sborník příspěvků 3. konference užití počítačů ve výuce matematiky. České Budějovice: Jihočeská univerzita, 2007, s. 181-186. ISBN 978-80-7394-048-5.
[11] Mařík, R., Tihlaříková M.: Pojaté pane, budeme si hrát (... s PDF), In Proceedings of 7th International Conference APLIMAT 2008, Bratislava: Department of Mathematics, Faculty of Mechanical Engineering, Slovak University of Technology, 2008, s. 63-73.
[12] Mařík, R.  The jeopardy package  [online],  duben 2010.  Dostupné  z www:
http://ftp.cvut.cz/tex-archive/macros/latex/contrib/j eopardy/ jeopardy. pdf.
[13] Radhakrishnan, C. V. Manual - pdfscreen [online], duben 2010. Dostupné z www: http://amath.Colorado.edu/documentation/LaTeX/prosper/0/ pdfscreen_man.pdf.
40
[14] Rektorys, K. a spolupracovníci. PŘEHLED UŽITÉ MATEMATIKY I, 7. vyd. Praha: nakladatelství Prometheus, 2007. ISBN 978-80-7196-179-6.
[15] Schoepf, R. The fontenc package [online], duben 2010. Dostupné z www: http: // www.pd.infn.it/TeX/doc/html/latex/fntguide/node26.html.
[16] Story, D.P AcroT^X Bundle eForm Support [online], duben 2010. Dostupné z www:
http://www.acrotex.net/data/aeb/manuals/eformman_p.pdf.
[17] Story, D.P. the AcroT^X eDucation Bundle [online], duben 2010. Dostupné z www:
http://www.math.uakron.edu/~dpstory/acrotex/aeb_man.pdf.
[18] Story, D.P. dps Package Das Puzzle Spiel [online], duben 2010. Dostupné z www: http://www.acrotex.net/data/games/dps/dps_man.pdf.
[19] Story, D.P. // Game Class [online], duben 2010. Dostupné z www: http: / /www. math . uakron . edu / ~ dp story / j j_game/ j j g_man .pdf.
[20] Šarmanová, P., Kuben J. DIFERENCIÁLNÍ POČET FUNKCÍ JEDNÉ PROMĚNNÉ [online], duben 2010. Dostupné z www: http: //www. am. vsb . cz/sarmanova/ cd/pdf/dp/dp_obr.pdf.
[21] the CTAN team, the Comprehensive T^XArchive Network [online], duben 2010. Dostupné z www: http : / /www. ctan . org/.
41
A Výpisy zdrojového kódu
\begin{insDLJS}[processChoiceB]{matchB}{JS Update of Matching PuzzleB} function processChoice(fieldname)
{
// Get the question field that corresponds to this question, // see if checked.
var f = this .getField("ckbxQ."+fieldname); if ( (f != null) &&(f.isBoxChecked(0))){// right clearRedCrosses (); this .resetForm(["puzzle."+fieldname]); event.target.textColor = ["RGB",0.2, 0.4, 0.8]; f .strokeColor = color, transparent; //     f.strokeColor = ["RGB", 0.2, 0.4, 0.8]; f. fillColor = ["RGB", 0.2, 0.4, 0.8]; f .readonly = true; event.target. readonly=true; checkForFinished(\dspassing); } else { // wrong
if ( activeQuestion != "" ) var h = this .getField(activeQuestion); if ( (activeQuestion=="") || (h.readonly) ) { // active question already answered event, target, value = "Off"; // var g = this .getFieldf report");
str = \chooseQ; // g. value = str;
app. alert (str);
var to = app.setTimeOut("clearMessages()", 2000); } else {
event.target. style = style, cr; event.target.textColor = color, red; ++nMissed;
if ( typeof missesByQuestion[activeQuestion] !="number") missesByQuestion[activeQuestion] = 1;
else
missesByQuestion[activeQuestion] += 1; if (missesByQuestionjactiveQuestion] > \dsthreshold) { // var f = this.getField("report");
str = \triedTooMuch; // f .value = str;
app. alert (str);
nPenaltyPoints += \dspenaltypoints; missesByQuestion[activeQuestion] = 0; clearRedCrosses ();
var to = app.setTimeOut("clearMessages()", 2000);
}
}
}
function hideReport(){ var g = this.getField("report"); g. hidden = true;
}
42
function checkForFinished(n)
{
var f = this.getField("puzzle");
var g = f .getArray();
var anyEmpty = false;
for ( var i=0; i < g.length; i++) {
if ( (g[i ]. name != "puzzle.space") && (g[i].value.replace(/\s/g ,"") == "") ) {
anyEmpty = true;
break;
}
}
var nTotalPenaltyPoints=nMissed + nPenaltyPoints; if ( ! anyEmpty ) {
var f = this.getField("report");
str = \congratFinished
+ "\n" + \regretPleased
+ "\n" + \reportPenaltyPoints
+ "\n" + \finalPenaltyScore
+ " " + finaIRating (nTotalPenaltyPoints);
app. alert (str);
var f = this .getField("ckbxA"); h = f .getArray();
for ( i=0; i < h.length; i++) h[i ]. hidden = true; // app. alert (str);
}
}
\end{insDLJS}
Výpis 21: Upravené javascriptové funkce stylového balíčku dps.sty
\def\@@logo#1{%
\global\setbox0=\hbox{\includegraphics{#1}}% \ifdim\htO>\wdO%
\includegraphics[height=0.75\hsize]{#1}% \else%
\ifdim\wdO>\htO%
\includegraphics[width=0.75\hsize]{#1}% \else%
\ifdim\wdO=\htO%% \includegraphics[width=0.75\hsize]{#1}% \fi\fi\fi
\def\panel{%
\begin{minipage}[t][\paperheight][c]{\panelwidth}% \normalsfcodes% \centering% %\null \vspace*{3pt} %\ vfill%
\ifx\@emblema\@empty\relax\else% \@@logo{\@emblema}\par\vfill\fi% \ifx\logoB\undefined\else\logoB\fi \if@paneltoc%
43
\@panel@toc\par\vfill\else\relax\fi%
\color{blue}% \NavigationPanel% \par %\vfill %\null
\vspace*{1pt}% \end{minipage}%
}
\def\NavigationPanel{\normalsfcodes%
\href{\@urlid}{\addButton{\buttonwidth}{\tiny\@Panelhomepagename}}\\\pfill \hyperlink{GameBoard}{\addButton{\buttonwidth}{\tiny GameBoard}}\\\pfill \Acrobatmenu{FullScreen}{\addButton{\buttonwidth}{\tiny\@Panelfullscreenname}}\\\pfill \Acrobatmenu{Close}{\addButton{\buttonwidth}{\tiny\@Panelclosename}}\\\pfill \Acrobatmenu{Quit}{\addButton{\buttonwidth}{\tiny\@Panelquitname}}\\\hspace*{-2pt}
}
\def\ pfill {\vskip 0.5pt} \panelwidth=1.3in
\setlength\buttonwidth{.7\panelwidth}
\setlength\smallbuttonwidth{.35\panelwidth}
\addtolength{\smallbuttonwidth}{-1.2pt}
\paneloverlay{pozadi.pdf}
\emblema{vsb1 .png}
\ urlid {www.am.vsb.cz}
Výpis 22: Výpis souboru pdfscreen.cfg