České vysoké učení technické v Praze Fakulta elektrotechnická Katedra počítačů
Bakalářská práce Interaktivní učebnice Jan Kuklík
Vedoucí práce: Ing. Zdeněk Troníček, Ph.D.
Studijní program: Softwarové technologie a management, prezenční, bakalářský Obor: Softwarové inženýrství 26. května 2011
iv
v
Poděkování Za připomínky a rady bych tímto chtěl poděkovat panu Ing. Zdeňkovi Troníčkovi, vedoucímu práce.
vi
vii
Prohlášení Prohlašuji, že jsem práci vypracoval samostatně a použil jsem pouze podklady uvedené v přiloženém seznamu. Nemám závažný důvod proti užití tohoto školního díla ve smyslu § 60 Zákona č. 121/2000 Sb., o právu autorském, o právech souvisejících s právem autorským a o změně některých zákonů (autorský zákon).
V Praze dne 26. 5. 2011
........................
viii
ix
Abstract (anglicky) The topic of my thesis deals with design and components for creating interactive exercises. The main objective is to create a JavaFX functional components for interactive exercises, which they contain in script Programming language Java. The components are configurable and answers to the questions are evaluated automatically. All exercises allow insertion into the applet and then into a web page. The exercises are functional as well as offline.
Abstrakt (česky) Tato bakalářská práce se zabývá návrhem a vytvořením komponent pro interaktivní cvičení. Cílem bylo vytvořit v JavaFX funkční komponenty pro interaktivní cvičení, která jsou ve skriptech Programovací jazyk Java. Komponenty jsou parametrizovatelné a odpovědi na otázky se vyhodnocují automaticky. Všechna cvičení umožňují vložení do appletu a poté i do webové stránky. Cvičení jsou funkční i v offline režimu.
x
xi
Obsah 1 Úvod ........................................................................................................................................... 1 1.1 Struktura bakalářské práce .................................................................................................. 1 2 Popis problému, specifikace cíle ................................................................................................ 3 2.1 Požadavky ........................................................................................................................... 3 2.1.1 Funkční požadavky ...................................................................................................... 3 2.1.2 Nefunkční požadavky................................................................................................... 3 3 Analýza a návrh implementace .................................................................................................. 5 3.1 Analýza ............................................................................................................................... 5 3.1.1 Cvičení „Co se vytiskne“ ............................................................................................. 5 3.1.2 Cvičení „Doplnění textu“ ............................................................................................. 6 3.1.3 Cvičení „Křížovka“ ...................................................................................................... 7 3.1.4 Cvičení „Magický čtverec“ .......................................................................................... 8 3.1.5 Cvičení „Pravda nepravda“ ........................................................................................ 10 4.1.6 Cvičení „Seřazení textu“ ............................................................................................ 11 3.1.7 Cvičení „Šibenice“ ..................................................................................................... 11 3.1.8 Cvičení „Spojení stejných hodnot“ ............................................................................ 12 3.2 Návrh implementace ......................................................................................................... 13 3.2.1 Grafické rozhraní jednotlivých cvičení ...................................................................... 13 3.2.2 Diagramy tříd ............................................................................................................. 19 4 Technologie.............................................................................................................................. 23 4.1 JavaFX .............................................................................................................................. 23 4.1.1 Datové typy a deklarace proměnných ........................................................................ 23 4.1.2 Operátory ................................................................................................................... 24 4.1.3 Range Expressions ..................................................................................................... 24 4.1.4 Cykly .......................................................................................................................... 24 4.1.5 Příkaz bind ................................................................................................................. 25 4.2 XML .................................................................................................................................. 25 5 Popis implementace ................................................................................................................. 27 5.1 Vývojové prostředí ............................................................................................................ 27 5.2 Implementace .................................................................................................................... 27 5.2.1 Třída ParserXML ....................................................................................................... 27 5.2.2 Třída Piece ................................................................................................................. 28 5.2.3 Zápis pouze jednoho písmena .................................................................................... 28 5.2.4 Stisk klávesy .............................................................................................................. 29
xii
5.2.5 Stejný text a jeho pozice ............................................................................................. 29 5.3 Popis tagů XML zdrojů ..................................................................................................... 29 5.3.1 XML tagy cvičení „Co se vytiskne“ ........................................................................... 30 5.3.2 XML tagy cvičení „Doplnění textu“ .......................................................................... 30 5.3.3 XML tagy cvičení „Křížovka“ ................................................................................... 31 5.3.4 XML tagy cvičení „Magický čtverec“ ....................................................................... 32 5.3.5 XML tagy cvičení „Pravda nepravda“ ....................................................................... 33 5.3.6 XML tagy cvičení „Seřazení textu“ ........................................................................... 33 5.3.7 XML tagy cvičení „Šibenice“ .................................................................................... 34 5.3.8 XML tagy cvičení „Spojení stejných hodnot“............................................................ 35 5.4 Nastavení a potřebné úpravy ............................................................................................. 35 6 Testování .................................................................................................................................. 37 6.1 Základní testy .................................................................................................................... 37 7 Závěr......................................................................................................................................... 39 Seznam použité literatury ............................................................................................................ 41 Seznam použitých zkratek ........................................................................................................... 43 Instalační a uživatelská příručka ................................................................................................. 45 Obsah přiloženého CD ................................................................................................................ 47
xiii
Seznam obrázků Obr. 1: Případy užití cvičení „Co se vytiskne“ ............................................................................................ 5 Obr. 2: Případy užití cvičení „Doplnění textu“ ............................................................................................ 6 Obr. 3: Případy užití cvičení „Křížovka“ ..................................................................................................... 8 Obr. 4: Případy užití cvičení „Magický čtverec“ ......................................................................................... 9 Obr. 5: Případy užití cvičení „Pravda nepravda“ ....................................................................................... 10 Obr. 6: Případy užití cvičení „Seřazení textu“ ........................................................................................... 11 Obr. 7: Případy užití cvičení „Šibenice“ .................................................................................................... 12 Obr. 8: Případy užití cvičení „Spojení stejných hodnot“ ........................................................................... 13 Obr. 9: Grafické rozhraní „Co se vytiskne“ ............................................................................................... 14 Obr. 10: Grafické rozhraní „Doplnění textu“ s přetahováním textu .......................................................... 14 Obr. 11: Grafické rozhraní „Doplnění textu“ bez přetahování textu ......................................................... 14 Obr. 12: Grafické rozhraní „Křížovka“...................................................................................................... 15 Obr. 13: Grafické rozhraní „Magický čtverec“ bez přetahování................................................................ 15 Obr. 14: Grafické rozhraní „Magický čtverec“ s přetahováním ................................................................ 16 Obr. 15: Grafické rozhraní „Pravda nepravda“ .......................................................................................... 16 Obr. 16: Grafické rozhraní „Seřazení textu“ .............................................................................................. 17 Obr. 17: Grafické rozhraní „Šibenice“ ....................................................................................................... 18 Obr. 18: Grafické rozhraní „Spojení stejných hodnot“ .............................................................................. 18 Obr. 19: Diagram tříd cvičení „Křížovka“ ................................................................................................. 19 Obr. 20: Diagram tříd cvičení „Seřazení textu“ ......................................................................................... 21
xiv
1 Úvod „Interaktivní učebnice je software pro výuku na interaktivních tabulích nebo i na dalších zařízeních, jako jsou například tablety. Interaktivní učebnice umožňují použití interaktivních materiálů (obrázky, audio, video, animace apod.) přímo ve výuce. Pro interaktivní učebnice se používají různé autorské nástroje, dodávané především výrobci interaktivních tabulí, v České republice vyvinulo vlastní systém interaktivních učebnic Nakladatelství Fraus. Dalšími producenty interaktivních učebnic v České republice jsou například Terasoft, Nakladatelství Alter, Nakladatelství Nová škola, LANGMaster, Tobiáš a další.“ [1] Vývojem interaktivních učebnic a cvičení se v dnešní době zabývá mnoho softwarových firem. Jejich učebnice a cvičení se zaměřují na předměty učené především na základních školách. Zřejmým důvodem je, že tyto učebnice jsou nejvíce žádané. Ať už z důvodu pomoci dětem s učením nebo změnit hru v učení. Interaktivní učebnici, která by se zaměřovala na téma příbuzné tématu této bakalářské práce jsem nenalezl a asi ani neexistuje. A nepodařilo se mi najít ani učebnici, která by byla naprogramována v programovacím jazyku JavaFX. Téma interaktivní učebnice v JavaFX jsem si vybral ze dvou důvodů. Vždy mě zajímalo programování a rozhodl jsem se, že bych rád zkusil nový kreativní programovací jazyk JavaFX. Také jsem si chtěl udělat srovnání s programovacím jazykem Java. Dalším důvodem bylo téma Interaktivní učebnice. Toto téma budí dojem, že bude nejen přínosem pro mě samotného, ale i pro mnoho dalších, kteří vytvořená cvičení budou zkoušet vypracovávat.
1.1 Struktura bakalářské práce Tato práce patří do kategorie implementačních bakalářských prací a to z důvodu, že výsledkem je hotový softwarový produkt. Práce je členěna na sedm kapitol. První kapitola
Tato bakalářská práce začíná úvodem. Zde se snažím charakterizovat zadání a důvody výběru této práce.
Druhá kapitola
V této kapitole popisuji očekávání a požadavky na moji práci. Pokouším se definovat funkční a nefunkční požadavky na aplikaci.
Třetí kapitola
Ve třetí kapitole kapitola se zabývám analýzou a návrhem řešení práce. V analýze se věnuji popsání všech případů užití pro všechna cvičení. V návrhu se věnuji podrobnému popsání grafických rozhraní jednotlivých cvičení. Na závěr této kapitoly popisuji dva základní digramy tříd.
Čtvrtá kapitola
V této kapitole charakterizuji technologie v mé práci. U těchto technologií popisuji základní strukturu a syntaxi.
1
Pátá kapitola
Tato kapitola popisuje implementaci práce. Zaměřuji se na popis zajímavých a nestandardních částí aplikace. Na konec popisuji zdroje XML a jejich tagy.
Šestá kapitola
V této kapitole popisuji průběh testování cvičení.
Sedmá kapitola
V poslední kapitole se snažím popsat splnění cílů bakalářské práce, vlastní přínos a doporučení dalšího pokračování.
Přílohy
Obsahují seznam použitých zkratek, instalační a uživatelskou příručku a obsah přiloženého CD.
2
2 Popis problému, specifikace cíle V každých skriptech je hlavní prvek text. Čtení takových skript je velice náročné na soustředění. Hodí se sem tam nějaké zpestření ve formě cvičení a různých úkolů. V elektronické podobě skript nám k tomuto budou pomáhat právě tyto cvičení. Cílem mé práce je vytvořit podporu pro přípravu interaktivní učebnici ke skriptům Programovacího jazyka Java. V JavaFX naimplementuji komponenty pro interaktivní cvičení, která jsou ve skriptech. Tato cvičení to jsou: 1. „Co se vytiskne“ 2. „Doplnění textu“ 3. „Křížovka“ 4. „Magický čtverec“ 5. „Pravda nepravda“ 6. „Seřazení textu“ 7. „Šibenice“ 8. „Spojení stejných hodnot“ Cvičení budou interaktivní. To znamená, že cvičení vyhodnotí zadaná data od uživatele a automaticky zobrazí výsledky odpovědí. Dále budou parametrizovatelná pro různá nastavení barev a u některých cvičení umožní výběr z posouvacího typu nebo doplňovacího typu cvičení. Grafické rozhraní bude pro jednotlivé komponenty různé v závislosti na typu cvičení. Důraz je kladen hlavně na jednoduchost a přehlednost. U všech cvičení bude možnost restartování pomocí tlačítka „Restart“.
2.1 Požadavky Požadavky jsem získal na základě zadání a konzultace s vedoucím práce. 2.1.1 Funkční požadavky 1. Každé cvičení bude umožňovat restartování do původního stavu. 2. U cvičení, kde se doplňují jednotlivá slova, bude existovat tlačítko na vyhodnocení. 3. Kde nebude tlačítko k vyhodnocení, bude rovnou zřejmé, jestli je daný text na správném místě či ne. 4. Jednotlivá cvičení budou parametrizovatelná. 2.1.2 Nefunkční požadavky 1. Aplikace bude napsána v programovacím jazyce JavaFX. 2. Aplikace bude funkční i v offline režimu. 3. Applet jednotlivých cvičení bude nezávislý na pozici uložení (tj. cesty k souborům budou relativní a ne absolutní).
3
4
3 Analýza a návrh implementace V této kapitole se zabývám analýzou budoucích cvičení. Ke každému cvičení shrnu co je úkolem a přikládám případy užití. V další části se věnuji návrhu grafického rozhraní jednotlivých cvičení. Nakonec popisuji diagramy dvou cvičení.
3.1 Analýza K analýze jsem si zvolil jazyk UML 2.0 a jako vývojové prostředí jsem využíval Enterprise Architect 7.1. 3.1.1 Cvičení „Co se vytiskne“ Student má za úkol správně určit co zadaný kód vypíše. Případy užití cvičení „Co se vytiskne“
Obr. 1: Případy užití cvičení „Co se vytiskne“
UC: Doplň 1. Uživatel vyplní box textem, který si myslí, že je správný.
5
UC: Vyhodnoť 1. Uživatel zmáčkne tlačítko Vyhodnoť. 2. Aplikace porovná jednotlivé řádky zadané uživatelem s textem uloženým v XML zdroji. 3. Aplikace označí box zelenou barvou, pokud je odpověď správná nebo červenou barvou pokud nesprávná. Pokud je odpověď nesprávná, aplikace zobrazí v nápovědě správnou odpověď. UC: Restart 1. Uživatel zmáčkne tlačítko Restart. 2. Aplikace vymaže vše ze zapisovacího boxu a vrátí cvičení do původního stavu.
3.1.2 Cvičení „Doplnění textu“ Podle typu cvičení student buď přetahuje obdélníky s textem na správná místa v textu anebo musí doplnit správná slova do prázdných míst v textu. Případy užití cvičení „Doplnění textu“
Obr. 2: Případy užití cvičení „Doplnění textu“
6
Pro A jsou ve cvičení obdélníky s textem. Pro B jsou ve cvičení prázdná místa pro doplnění textu. UC: Přesuň text 1. A Uživatel přesune obdélník s textem na místa v textu. 2. A Aplikace změní barvu obdélníku s textem a uzamkne pozici, pokud je přesunut na správnou pozici. UC: Doplň slovo 1. B Uživatel doplní slovo do prázdného místa v textu. UC: Vyhodnoť 1. B Uživatel zmáčkne tlačítko Vyhodnoť. 2. B Aplikace porovná vyplněné boxy s údaji v XML. UC: Restart 1. Uživatel zmáčkne tlačítko Restart. 2. A Aplikace vrátí obdélníky s textem do původní pozice a vrátí zpět i barvu. B Aplikace odstraní text z boxů ve vyplňovaném textu.
3.1.3 Cvičení „Křížovka“ Úkolem je správně vyplnit křížovku. Křížovka lze vyplňovat za pomoci celých slov jako odpovědi na daný dotaz anebo lze doplnit jednotlivá písmena na správné pozice. Program podle typu nastavení rozlišuje, zda písmeno „ch“ existuje či ne. Případy užití cvičení „Křížovka“
7
Obr. 3: Případy užití cvičení „Křížovka“
UC: Doplň slovo 1. Uživatel zadá celé slovo do boxu v textu vedle křížovky a stiskne Enter nebo tlačítko OK vedle boxu. 2. Aplikace porovná délku zadaného slova s počtem přiřazených políček (záleží, jestli je nastaven jazyk čeština) a pokud se shoduje, porovná celé slovo. Pokud je shoda, doplní jednotlivá políčka a změní jejich barvu. UC: Doplň písmeno 1. Uživatel zadá písmeno přímo do křížovky a stiskne Enter. 2. Aplikace zadané písmeno porovná se zapsaným v XML souboru, a pokud je shodné přebarví box do jiné barvy. UC: Restart 1. Uživatel zmáčkne tlačítko Restart. 2. Aplikace vymaže všechny doplňovací boxy a znovu nahraje známá písmena a označí boxy patřící k tajence
3.1.4 Cvičení „Magický čtverec“ Cvičení je čtverec o velikosti n, který musí obsahovat čísla 1 až n2 a pro který platí, že součet na každém řádku, sloupci i na diagonálách je stejný. Úkolem studenta je doplnit prázdná místa v čtverci anebo v druhém typu cvičení přesunout na prázdná místa čtverce s danými čísly. Cvičení umožňuje zadávat čísla v hexadecimální, osmičkové a desítkové soustavě.
8
Případy užití cvičení „Magický čtverec“
Obr. 4: Případy užití cvičení „Magický čtverec“
Pro A jsou ve cvičení čtverce s čísly. Pro B jsou ve čtverci prázdná místa pro doplnění čísla. UC: Přesuň číslo 1. A Uživatel přesune čtverec s číslem do prázdných míst v magickém čtverci. 2. A Aplikace změní barvu čtverce s číslem a uzamkne pozici, pokud je přesunut na správnou pozici. UC: Doplň číslo a. B Uživatel napíše číslo do volných boxů v magickém čtverci. UC: Vyhodnoť 1. B Uživatel zmáčkne tlačítko Vyhodnoť. 2. B Aplikace porovná doplňovací boxy s daty v XML zdroji. Pokud je box správně vyplněn, označí ho zelenou barvou, pokud není správně vyplněn tak červenou. UC: Restart 1. Uživatel stiskne tlačítko Restart. 2. A Aplikace přesune čtverce s čísly do výchozí pozice a nastaví počáteční barvu. 9
B Aplikace odstraní všechny znaky a nastaví neutrální barvu všem doplňovacím boxům. 3.1.5 Cvičení „Pravda nepravda“ V cvičení je úkolem označit správné věty. Případy užití cvičení „Pravda nepravda“
Obr. 5: Případy užití cvičení „Pravda nepravda“
UC: Označ správná tvrzení 1. Uživatel označí správné odpovědi kliknutím do Check Boxu daného tvrzení. UC: Vyhodnoť 1. Uživatel zmáčkne tlačítko Vyhodnoť. 2. Aplikace porovná správnost označených tvrzení s XML zdrojem a zobrazí výsledky. Aplikace zastaví možnost označování Check Boxů. UC: Restart 1. Uživatel klikne na tlačítko Restart. 2. Aplikace odstraní všechna označení výsledkům, zaškrtnuté Check Boxy a tím navrátí cvičení do výchozího stavu.
10
4.1.6 Cvičení „Seřazení textu“ V cvičení je za úkol seřadit do správného pořadí obdélníky s textem. Případy užití cvičení „Seřazení textu“
Obr. 6: Případy užití cvičení „Seřazení textu“
UC: Přesuň 1. Uživatel přesouvá obdélníky s textem do prázdných míst na ploše určené pro doplňování. 2. Aplikace označí jinou barvou obdélník s textem a také uzamkne pozici, pokud je daný obdélník na správném místě. UC: Restart 1. Uživatel zmáčkne tlačítko Restart. 2. Aplikace přesune všechny obdélníky s textem na pravou stranu vedle místa pro doplňování.
3.1.7 Cvičení „Šibenice“ Cvičení na principu hledání písmen ve slově nebo ve větě. Student má omezené množství chybných odpovědí. Případy užití cvičení „Šibenice“
11
Obr. 7: Případy užití cvičení „Šibenice“
UC: Stisknutí tlačítka 1. Uživatel stiskne libovolnou klávesu písmena a nebo zmáčkne tlačítko označující výběr daného písmene. 2. Aplikace reaguje na stisk tlačítka je-li to písmeno a pokud nebylo ještě stisknuto. Reaguje-li aplikace na stisknutí tak je to těmito dvěma způsoby: a. Věta nebo hledané slovo dané písmeno obsahují. Aplikace doplní písmeno na správné pozice a zablokuje klávesu pro další stisk. Aplikace zkontroluje, zda hledaný text není již nalezen, pokud ano tak zablokuje všechny písmena a zobrazí obrázek vítězství, jinak vyčkává na stisk další klávesy. b. Věta nebo hledané slovo dané písmeno neosahují. Aplikace zablokuje klávesu pro další stisk a uživateli odstraní jeden život, spolu s tím zobrazí další obrázek šibenice. Aplikace porovná, zda uživateli zbývají ještě nějaké životy a pokud ne je mrtev a aplikace zobrazí obrázek úplné šibenice. UC: Restart 1. Uživatel zmáčkne tlačítko Restart. 2. Aplikace zaktivní všechny klávesy, doplní životy na maximum a zobrazí první obrázek. 3.1.8 Cvičení „Spojení stejných hodnot“ Úkolem je přiřadit k jedné hodnotě druhou takovou, která je stejná. Cvičení funguje za pomoci přesouvání obdélníků s hodnotami. Případy užití cvičení „Spojení stejných hodnot“
12
Obr. 8: Případy užití cvičení „Spojení stejných hodnot“
UC: Vypracuj 1. Uživatel přesune do volných obdélníků obdélníky s textem. 2. Aplikace přeznačí barvu obdélník s textem a uzamkne pozici, pokud je posuvný obdélník na správném místě. UC: Restart 1. Uživatel zmáčkne tlačítko Restart. 2. Aplikace u všech obdélníků s textem udělá toto: přesune je na výchozí pozici, vrátí původní barvu.
3.2 Návrh implementace Znovu jsem použil vývojové prostředí Enterprise Architect. 3.2.1 Grafické rozhraní jednotlivých cvičení Důležitým předpokladem u jednotlivých grafických rozhraní u cvičení bylo, aby byly co nejjednodušší a přehledné na první pohled. Jednotlivá cvičení jsem navrhoval dle mého uvážení, kde jsem vždy přihlédl ke zde již napsaným předpokladům. Poněvadž se předpokládá, že dané cvičení bude fungovat v appletu na webové stránce, není u žádného z cvičení zapsáno zadání. Pro tvorbu grafického prostředí jsem využíval program NetBeans IDE 6.9.1, který umožňuje mimo jiné práci s JavaFX 1.3.
V grafickém rozhraní „Co se vytiskne“ je nahoře ukázka příkladů a pod nimi je doplňovací box. Doplňovací box je ve výchozí pozici bílý. Po vyhodnocení je červený, když byla doplněna špatná odpověď. Je-li odpověď správná, je box zelený. Dole jsou tlačítka Restart a Vyhodnoť.
13
Obr. 9: Grafické rozhraní „Co se vytiskne“
V grafickém rozhraní „Doplňování textu“ jsou věty, ve kterých jsou prázdná místa, do kterých se přetahují barevné boxy z pravé strany anebo vpisují slova. Dole je tlačítko Restart a ve cvičení bez přetahování i tlačítko Vyhodnoť. Boxy pro přetahování mohou mít libovolnou barvu a v případě přetáhnutí na správné místo se jejich barva změní na jinou zadanou v XML. Vpisujíli se slova a je stisknuto tlačítko Vyhodnoť, jsou místa s odpovídajícími slovy označena zeleně. Při neodpovídajícím slovu je místo označeno červenou barvou. Výchozí barva míst pro psaní textu je bílá.
Obr. 10: Grafické rozhraní „Doplnění textu“ s přetahováním textu
Obr. 11: Grafické rozhraní „Doplnění textu“ bez přetahování textu
14
Grafické rozhraní „Křížovka“ má na levé straně samotnou křížovku, kde místa pro tajenku jsou vyznačena žlutou barvou. Je-li vepsáno správné písmeno je změněna barva boxu z výchozí bílé na barvu zadanou v XML zdroji. Na pravé straně jsou dotazy s místy pro odpověď celého slova. Dotazy jsou očíslovány a stejné číslo určující pozici slova lze nalézt v křížovce. Pokud je v křížovce tajenka, je její text zobrazen dole pod křížovkou a dotazy. Na pravé straně dole je tlačítko Restart.
Obr. 12: Grafické rozhraní „Křížovka“
V grafickém rozhraní „Magický čtverec“ je jeden čtverec složený z n x n čtverců. Každý z malých čtverců má libovolnou barvu nastavenou v XML zdroji. Bez přetahování jsou ve čtverci bílé boxy pro doplňování čísel. Po stisknutí tlačítka Vyhodnoť je barva změněna buď na zelenou, hodnota je správná nebo na červenou, hodnota neodpovídá hodnotě uložené ve zdroji. Dole jsou tlačítka Vyhodnoť a Restart. S přetahováním jsou vpravo chybějící čtverce s čísly. Po přetažení na správné volné místo ve velkém čtverci je barva změněna na barvu uloženou v XML zdroji pro správně umístěné čtverce. Dole je pouze tlačítko Restart.
Obr. 13: Grafické rozhraní „Magický čtverec“ bez přetahování
15
Obr. 14: Grafické rozhraní „Magický čtverec“ s přetahováním
Grafické rozhraní „Pravda nepravda“ obsahuje věty s místem pro zaškrtnutí. Jednotlivé věty jsou odlišně podbarvené z důvodu přehlednosti. Pod větami je tlačítko Restart a Vyhodnoť. Po stisknutí tlačítka vyhodnoť, jsou správně zatrhnuté boxy označeny zeleně, špatně zatrhnuté červeně. Výchozí barvou zatrhávacích boxů je bílá.
Obr. 15: Grafické rozhraní „Pravda nepravda“
16
Grafické rozhraní „Seřazení textu“ obsahuje obrys správného sestavení textu a kolonky s textem. Dole pod tím je tlačítko Restart. Kolonky s textem mají barvu podle zadání v XML zdroji. Pokud je kolonka přesunuta na správnou pozici je její barva změněna na barvu v XML zdroji.
Obr. 16: Grafické rozhraní „Seřazení textu“
„Šibenice“ ve vrchní části má obrázek zobrazující úroveň chybových odpovědí. Pod obrázkem je tlačítko Restart a ukazatel životů. Níže je hledaný text a tlačítka celé klávesnice. Tlačítka reagují na stisknutí zákazem dalšího stisknutí a snížení viditelnosti daného tlačítka.
17
Obr. 17: Grafické rozhraní „Šibenice“
Ve „Spojení stejných hodnot“ vidíme dva sloupce obsahující buď text, nebo místo pro doplnění textu. Doplnění textu probíhá pomocí posouvání boxů s textem na správné pozice. Při přesunutí do správné pozice se změní barva boxu. Jak výchozí tak barva správné pozice je zadána v XML zdroji. Dole pod sloupci je tlačítko Restart.
Obr. 18: Grafické rozhraní „Spojení stejných hodnot“
18
3.2.2 Diagramy tříd Pro ukázku z diagramů tříd jsem si vybral cvičení „Křížovka“ a „Seřazení textu“. Myslím si, že tato cvičení jsou jedna z nejtěžších. Ostatní cvičení vychází ze stejného principu. Ve třídě Main je proměnná cvičení, která vždy odkazuje na samostatnou třídu komponenty daného cvičení. V této třídě je zobrazení všech grafických prvků, kontroly správnosti a možnost restartování. Další velice důležitou třídou je ParserXML, která načítá a zpracovává potřebná data ze zadaného XML souboru.
Obr. 19: Diagram tříd cvičení „Křížovka“
Main
hlavní třída obsahuje hlavní Stage, do které je nahrávána komponenta cvičení. V této třídě jsou také proměnné pro možnost parametrizace.
Krizovka
tvoří grafické prostředí a reakce na činnosti uživatele. Obsahuje funkci lengthCZECH, která umožňuje spočítat délku slova tak, že písmeno ch počítá jako jeden znak. Dále obsahuje funkci vratZnakCZECH, která vrací písmeno z daného slova, kde počítá písmeno ch za jeden znak. Je-li v křížovce tajenka je využita funkce vytvorTajenku, která vezme proměnou tajenkaXML a v ní nahradí místa označená * správným počtem Text boxů, které odkazují na pozice tajenky v samotné křížovce. Dále pak 19
zobrazí v jednom řádku známý text a hledaná písmena tajenky pomocí Text boxů. RadekKrizovky
představuje jednu řádku křížovky. Proměnná jazykCZ určuje, zda box může obsahovat znak ch nebo ne. PocetPismen určuje kolik je Text boxů v jedné řádce křížovky.
ParserXML
ukládá data z XML zdroje. Funkce parsuj čte a zpracovává data z XML zdroje.
TextKrizovky
představuje jednotlivé dotazy křížovky a správné odpovědi na ně. Pomocí proměnných zacatekX, konecX, zacatekY, konecY určuje pozici odpovědi v křížovce. X souřadnice určuje řádek Y sloupec. Souřadnice začínají od 1 a první pozice je v levém horním rohu křížovky. Při zadání správné odpovědi uživatelem je využíváno proměnných této třídy k zápisu do křížovky.
Tajenka
zastupuje jednotlivé části tajenky. K jednotlivým částem umisťuje pozice. U některých křížovek nebude využita, protože autor křížovky neumožňuje najít tajenku.
Pozice
pozice v křížovce. Pozice jsou číslované od levého horního rohu. X je řádek Y sloupec.
NapovedaPismena
písmena, kterými autor křížovky chce uživateli zjednodušit vyplnění křížovky. Třída k jednotlivým písmenům přiřazuje pozice v křížovce. Třída nemusí být využita.
20
Obr. 20: Diagram tříd cvičení „Seřazení textu“
Main
viz předchozí diagram.
ParserXML
viz předchozí diagram.
Piece
třída reprezentující objekt obdélníku s textem s možností posouvání po ploše. Proměnná barva obsahuje výchozí barvu, barvaSpravne obsahuje barvu, která bude zobrazena při přesunutí boxu na správné místo. Tato správná pozice je uložena v proměnných correctX a correctY nebo v pozice, to je pouze v případě existuje-li více boxů se stejným popiskem, který je uložen v textStr. Je-li box na správném místě je přepsána proměnná inCorrectPlace. Výšku a šířku zobrazeného boxu určuje height a width.
KolonkaTextu
obsahuje data jednotlivých obdélníků s textem. Tyto data jsou barva a viditelný popisek.
Radek
obsahuje kolonky na jednom řádku.
SerazeniTextu
reaguje na činnosti uživatele a tvoří základní grafické prostředí. 21
SekvencePozic
sekvence pozic, kam se daná kolonka může vložit. Umožňuje nerozlišitelnost pozic pro boxy se stejným textem.
Pozice
pozice v textu.
22
4 Technologie V této kapitole popisuji technologie použité při tvorbě interaktivních cvičení a jejich syntaxi.
4.1 JavaFX JavaFX skript je moderní programovací jazyk umožňující vytvářet moderní aplikace. Jazyk je zaměřen na tvorbu grafických aplikací a to tak, aby umožňoval kratší vývojové cykly. Níže se popisuji základní syntaxi tohoto jazyka [2]. 4.1.1 Datové typy a deklarace proměnných Označení proměnné probíhá za pomoci klíčového slova var. Konstanta se definuje pomocí klíčového slova def. Pokud není zapsán typ proměnné překladač ji určí sám. Typ proměnné se definuje takto: var cislo:Integer; var slovo:String; a. String textový datový typ. Může být deklarován pomocí jednoduchých i dvojitých uvozovek. V deklaraci také může být využito jiných proměnných. Viz příklady. var var var var
s1 = 'Promenna typu String'; s2 = "Promenna typu String'"; jmeno = "JavaFX skript"; text = "{jmeno} je dobry programovaci jazyk";
b. Number/Integer číselný datový typ. var cislo1 : Number = 1.0; var cislo2 : Integer = 15; c.
//reálné číslo //celé číslo
Boolean representuje pouze dvě hodnoty: true nebo false var promenna : Boolean = true;
d. Duration časový interval (milisekundy, sekundy, minuty a hodiny). 15ms; 15s; 33m; 0.5h;
// // // //
1 milisekund 10 sekund 33 minut 0.5 hodin
e. Sekvence definuje sekvenci datového prvku pomocí znaků [] var sek:Integer[]; var dny = ["Po","St","Ct","Pa","So","Ne"]; delete dny[0]; //odstranění Po ze sekvence insert "Po" before dny[0]; //vložení před St insert "Ut" after dny[0]; //vložení za Po
23
4.1.2 Operátory
+ * / mod ++ -not == != > >= < <= and or
operátor sčítání operator odčítání operátor násobení operátor dělění operátor zbytku po dělení inkrementace dekrementace logický operátor, neguje logickou proměnnou rovnost nerovnost větší než větší než a roven menší než menší než a roven logické a logické nebo
4.1.3 Range Expressions Range Expression vypadá takto [0..13]. Je využíván k přiřazování hodnot sekvencí. var a = [0..5]; // [0,1,2,3,4,5] Defaultně je nastaveno krokování 1. Tato hodnota lze změnit pomocí příkazu step. var cisla1 = [0..6 step 3] var cisla2 = [8..2 step -2]
// [0,3,6] // [8,6,4,2]
4.1.4 Cykly var t = 0; while (t<7) { t++; println("Cyklus probiha po {t}") } for (i in [1..5]) { println("Cyklus probiha po {i}") }
24
4.1.5 Příkaz bind Příkaz bind svazuje hodnotu jedné proměnné s druhou. Tohoto příkazu se využívá např. při změn velikosti oken. Lze také svázat dvě proměnné navzájem a to pomocí příkazu with inverse. var a = 10; var b = bind a; a = 20; var var d = c =
//a = 10, b = 10 do b už nelze nic jiného přiřadit //a = 20, b = 20
c = 44; d = bind c with inverse; 55; 2
//c = 44, d = 44; //c = 55, d = 55 //c = 2, d = 2
4.2 XML Pomocí jazyka XML byly naimplementovány zdroje dat pro jednotlivá cvičení. Proto bych se ve stručnosti pokusil popsat základy tohoto jazyka [3]. Základem tohoto jazyka jsou elementy zapisované tímto způsobem <jmeno_elementu>. Elementy mohou být také prázdné potom stačí, aby vypadali takto <jmeno_elementu1/>. Tímto se dostávám k prvnímu požadavku na XML soubor. Požadavkem je, aby byl celý dokument uzavřen v jednom elementu. Dalším požadavkem je, že elementy musí být párové. Výjimkou je prázdný element, ale ten pak musí obsahovat lomítko ihned za názvem elementu. Další podmínkou na funkční XML je, že párové elementy se nesmí křížit. Každý element může mít atributy. Atributy musí být zapsány v uvozovkách <element atribut="hodnota">.
25
26
5 Popis implementace Tato kapitola se zabývá popisem realizace se zaměřením na nestandardní části řešení. Nejdříve se věnuji vývojovému prostředí, dále implementaci nestandardních či zajímavých částí a nakonec popisu struktury XML zdrojů jednotlivých cvičení.
5.1 Vývojové prostředí Všechny cvičení interaktivní učebnice jsem tvořil v prostředí NetBeans IDE 6.9. „Toto vývojové prostředí je nástroj, pomocí kterého programátoři mohou psát, překládat, ladit a distribuovat aplikace. Samotné vývojové prostředí je vytvářeno v jazyce Java - ovšem podporuje prakticky jakýkoliv programovací jazyk. Existuje rovněž velké množství modulů, které toto vývojové prostředí rozšiřují. Vývojové prostředí NetBeans je bezplatně šířený produkt a jeho užívání není nijak omezeno.“[4]
5.2 Implementace 5.2.1 Třída ParserXML Ve všech cvičeních jsou data nahrávaná z XML zdroje. V první verzi k získávání dat z XML jsem využíval funkce programovacího jazyka Java. Bohužel tyto funkce, jak se později ukázalo, nejsou v appletu funkční. Proto jsem hledal náhradu v jazyce JavaFX a vytvořil k tomuto účelu třídu ParserXML. V této třídě jsou zpracovávány jednotlivé elementy a atributy, které jsou pak předány dále k zobrazení. Samostatné parsování probíhá za pomoci PullPalseru. V tomto parseru lze nastavit typ parsovaného dokomuntu a to pomocí documentType, který je v tomto případě XML. Velkým problémem pro mě bylo zadání vstupu. Dlouho jsem nemohl přijít na to, do jakého streamu zadat vstupní soubor, aby byl applet funkční. Tím funkčním byl stream otevřený z třídy java.net.URL. Samotné procházení XML zdroje je ve funkci onEvent. Podle typu parser pozná, jestli se jedná o vstupní element nebo o koncový. Pomocí porovnávání jmen elementů je určeno v jakém elementu se parser v tuto chvíli nachází a do jaké proměnné má danou hodnotu elementu uložit. Obdobně je to u atributů, ale ty se musí porovnávat ve správném elementu. Ukázka kódu: onEvent: function (event: Event) { if ((event.type == PullParser.START_ELEMENT)) { if (event.qname.name == "krizovka") { if(event.getAttributeValue(QName{name: "jazykCZ"}).equals("true")) { jazykCZ = true; 27
} else { jazykCZ = false; } barvaSpravne = event.getAttributeValue(QName{name: "barvaSpravne"}) } else if (event.qname.name == "tajenkaVysledek") { … …
5.2.2 Třída Piece Ve cvičení „Doplňování textu, Magický čtverec, Seřazení textu a Spojení stejných hodnot“ bylo využito šablony třídy Piece, která rozšiřuje třídu CustomNode. Umožňuje aplikaci, aby obdélníky s textem bylo možné posouvat po pracovní ploše cvičení[5].
5.2.3 Zápis pouze jednoho písmena U „Křížovky“ jsou upraveny políčka tak, že není možné zapsat víc než jedno písmeno. Výjimkou je písmeno ch když je v XML zdroji nastaven jazyk čeština. Kód[6], který toto umožňuje: override function replaceSelection(repl) { if (jazykCZ) { if (rawText.toUpperCase().equals("C")) { if (repl.toUpperCase().equals("H")) { if (rawText.length()< 2) super.replaceSelection(repl); } else { if (rawText.length()< 1) super.replaceSelection(repl); } } else { if (rawText.length()< 1) { super.replaceSelection(repl); } } 28
} else { if (rawText.length()< 1) { super.replaceSelection(repl); } } }
5.2.4 Stisk klávesy U cvičení „Šibenice“ je reagováno na stisk klávesy. Aplikace reaguje pouze na klávesy, které jsou písmena a ještě nebyla stisknuta. Ukázka kódu: onKeyPressed: function(e: KeyEvent):Void { println("{e.code}"); if (pocetChyb<11) { if (e.code.impl_getChar().equals(" ")) { if (btnMezera.disable == false) { if (vlozPismeno("{e.code.impl_getChar()}") == false) pocetChyb++; btnMezera.disable = true; } } … …
5.2.5 Stejný text a jeho pozice V „Seřazení textu“ bylo potřeba zajistit, aby kolonky se stejným textem mohly být navzájem zaměnitelné. Ve třídě SerazeniTextu se najdou všechny opakující se texty. Při vytváření jednotlivých kolonek se text v kolonce porovnává s opakujícími, a pokud se opakuje, vkládá se do třídy Piece sekvence pozic patřící opakovaným kolonkám. Tato sekvence je společná pro všechny kolonky se stejným textem. Při pohybu s kolonkou je zjišťováno, zda patří k opakujícím se anebo jestli je neopakující. Pokud patří k opakujícím a je zjištěno, že je kolonka na správném místě, je pozice odstraněna ze sekvence pozic.
5.3 Popis tagů XML zdrojů U všech zdrojů je možné k odřádkování použít znaků
.
29
5.3.1 XML tagy cvičení „Co se vytiskne“ coSeVytiskne
element určující, ke kterému cvičení data z XML patří.
text
element označující data, která uživatel má vidět a po jejich přečtení má určit výstup.
dotaz
element obsahující data s dotazem co autor očekává, že bude uživatel vpisovat.
odpoved
element obsahující elementy line.
line
element obsahuje očekávaný vstup uživatele na jednotlivých řádcích.
println("abcd"); println("joko"); <dotaz>Co vytiskou tyto příkazy? abcd joko
5.3.2 XML tagy cvičení „Doplnění textu“ doplneniTextu
element označující typ cvičení.
vyber
atribut elementu doplněníTextu, pokud je true je cvičení s posouvacími boxy. Při libovolné jiné hodnotě je cvičení s textovým doplňováním.
barva
atribut elementu doplněníTextu obsahující výchozí barvu posouvacího boxu. Zadání musí být slovně.
barvaSpravne
atribut obsahující barvu, na kterou se změní barva posouvacího boxu, je-li přesunut na správné místo. Zadání musí být slovně.
text
element obsahující data potřebná k zobrazení textu na jednom řádku.
znama
element obsahující text, který je známý a bude zobrazen.
neznama
element obsahující text, který má být vepsán na prázdné místo nebo přesunut.
skupina
atribut elementu neznama. Pokud jsou elementy ve stejné skupině, mohou být doplněná slova proházena a výsledek bude i přes to správný. Tato možnost je funkční pouze u zapisovacího doplňování, protože při 30
přesouvání určuje místo také velikost boxu. Hodnoty tohoto atributu mohou být kladná celá čísla.
<doplneniTextu vyber="tru" barva="blue" barvaSpravne="red">
3+4= 7 Čísla jdou zapsat: číslem slovem . … …
5.3.3 XML tagy cvičení „Křížovka“ krizovka
element označující typ cvičení.
jazykCZ
atribut elementu krizovka. Pokud je roven hodnotě true, program počítá písmeno ch jako jedno písmeno. Při jakékoliv jiné hodnotě je písmeno ch počítáno jako dvě písmena.
barvaSpravne
atribut elementu krizovka. Nastavuje, na jakou barvu se bude měnit správně doplněné políčko v křížovce. Zadání je možné pouze slovně.
tajenkaVysledek
element obsahující celý text tajenky. Každé slovo hledané v křížovce je nahrazeno znakem *.
dotaz
element obsahující dotaz na určitou část křížovky.
zacatek
atribut elementu dotaz obsahující pozici začátku odpovědi v křížovce. Hodnota je ve formátu x; y, kde x značí řádek a y sloupec. Hodnoty začínají od 1. První řádek a sloupec je v levém horním rohu křížovky.
konec
atribut elementu dotaz obsahující pozici konce odpovědi v křížovce. Více o formátu a hodnotě viz atribut zacatek.
odpoved
element bezprostředně následující za dotazem. Obsahuje odpověď na dotaz. Tato odpověď je očekávaná od uživatele při doplňování křížovky.
tajenka
element uvozující část hledané tajenky. Odkazuje na jednotlivé pozice potřebných písmen ke zjištění tajenky.
pozice
element označující místo v křížovce. 31
x
atribut elementu pozice určující řádek.
y
atribut elementu pozice určující sloupec.
napoveda
element uvozující pozice nápovědy v křížovce.
pismeno
atribut elementu nápověda obsahující písmeno, které je napovídáno.
radek
element určující pozici na řádku kde bude zobrazena nápověda.
sloupec
element určující pozici na sloupci kde bude zobrazena nápověda.
Kdo hledá přítele * *, zůstane bez přátel. - Turecké přísloví <dotaz zacatek="1;1" konec="1;6">Nepatrný jednobuněčný organismusMIKROB … <pozice x="1" y="6"/> <pozice x="2" y="1"/> <pozice x="3" y="6"/> … 1 <sloupec>1 …
5.3.4 XML tagy cvičení „Magický čtverec“ magickyCtverec
element uvozující zdroje pro toto cvičení.
posouvaci
atribut elementu magickyCtverec. Je-li nastavena hodnota true, je cvičení s posouvacími čtverci, jinak je s textovým doplňováním.
barva
atribut elementu magickýCtverec umožňující nastavit barvu všem čtverečkům. Barva musí být zadána slovně. Pokud je zadaná ztrácí význam barvy nastavené u jednotlivých čtverců.
barvaSpravne
atribut elementu magickyCtverec umožňující nastavit barvu, která se zobrazí při přesunutí čtverečku na správnou pozici.
radka
element uvozující jednotlivé hodnoty na stejném řádku.
hodnota
element obsahující textovou hodnotu, která náleží čtverečku. 32
znama
atribut elementu hodnota. Je-li true je hodnota zobrazena na čtverečku, jinak je hodnota neznámá a tím pádem ji musí uživatel doplnit.
barva
atribut elementu hodnota umožňující nastavit barvu jednotlivým čtverečkům. Tato hodnota se zanedbává, pokud je vyplněn atribut barva elementu magickyCtverec. Hodnota musí být zadána slovně.
<magickyCtverec posouvaci="true" barva="" barvaSpravne="red">
0x10 3 2 0x0d … …
5.3.5 XML tagy cvičení „Pravda nepravda“ pravdaNepravda
element uvozující XML zdroj pro cvičení.
dotaz
element obsahující text, který má uživatel určit, zda je pravdivý či ne.
vysledek
atribut elementu dotaz, označující zda daný dotaz je pravdivý či ne. Pravdivý dotaz je označen true, vše ostatní je bráno za nepravdu.
<pravdaNepravda> <dotaz vysledek="false"> Jeden palec se rovná 10 centimetrům. <dotaz vysledek="true"> Voda se zásedně vlévá do kyseliny ne opačně. … …
5.3.6 XML tagy cvičení „Seřazení textu“ serazeniTextu
element uvozující data cvičení.
33
barva
atribut elementu serazeniTextu. Hodnota barvy může být nastavena pouze textově. Je-li tento atribut zadán, všechny posouvací boxy mají stejnou barvu.
barvaSpravne
atribut elementu serazeniTextu. Po jeho nastavení se při přetažení boxu do správné pozice změní barva tohoto boxu na zadanou v tomto atributu. Hodnota barvy může být zadána pouze slovně.
radka
element odkazující na všechny texty na řádku.
text
element představující jednu kolonku textu na řádku.
barva
atribut elementu text. Hodnota nastavuje zobrazovací barvu kolonky. Zadaná hodnota může být pouze textová. Tato hodnota se ignoruje, pokud je zadán atribut barva u elementu serazeniTextu.
<serazeniTextu barvaSpravne="lightgreen"> Nacházejí-li se
v rovnici zlomky, vynásobíme
obě strany jejich nejmenším společným násobkem Rovnici upravíme do tvaru c⋅xd=e⋅xf , kde c, d, e, f jsou reálná čísla. … …
5.3.7 XML tagy cvičení „Šibenice“ sibenice
element uvozující zdroj tohoto cvičení.
napoveda
element obsahující text, kterým je naznačeno, o které hledané slovo nebo souvětí by se mělo jednat.
tajenka
element, který obsahuje hledaný text nebo souvětí.
<sibenice> NEODSUZUJ DRUHÉHO ČLOVĚKA, DOKUD NEJSI V JEHO MÍSTĚ
34
5.3.8 XML tagy cvičení „Spojení stejných hodnot“ spojeniStejnychHodnot
element uvozující zdroj tohoto cvičení.
barva
atribut elementu spojeniStejnychHodnot. Umožňuje nastavit barvu všem posuvným boxům s textem. Hodnota musí být zadána slovně.
barvaSpravne
atribut elementu spojeniStejnychHodnot. Nastavuje barvu, na kterou se změní barva boxu, když je přesunut na správnou pozici. Hodnota musí být zadána slovně.
vzdalenostMeziSloupci
atribut elementu spojeniStejnychHodnot. Hodnota tohoto atributu určuje, jak budou vzdáleny od sebe sloupce.
radka
element obsahující údaje na jednom řádku.
hodnota
element obsahující zobrazovanou hodnotu na boxu s textem.
znama
atribut elementu hodnota. Pokud je její obsah true, je hodnota známá a je zobrazena na svém místě. Pokud je její obsah cokoliv jiného, je zobrazena boxem s textem elementu hodnoty, který má být přesunut na správnou pozici.
<spojeniStejnychHodnot barva="red" barvaSpravne="blue" vzdalenostMeziSloupci="40"> 8 1000b … …
5.4 Nastavení a potřebné úpravy Tyto nastavení a úpravy musí udělat tvůrce cvičení. Samotný uživatel nemusí dělat žádná nastavení ani úpravy. 1. Stáhnout tyto soubory: a. http://java.com/js/deployJava.js b. http://dl.javafx.com/dtfx.js c. http://dl.javafx.com/javafx-loading-100x100.gif d. http://dl.javafx.com/javafx-loading-25x25.gif e. http://dl.javafx.com/1.3/javafx-rt.jnlp 2. Do souboru, kde bude umístěn zdroj html skript budou přesunuty tyto soubory: deployJava.js, dtfx.js, javafx-loading-25x25.gif, javafx-loading-100x100.gif, javafx35
rt.jnlp a soubory potřebné ke spuštění appletu: <jméno_cvičení>.jar, <jméno_cvičení>_browser.jnlp. 3. Aby byl applet funkční offline musí být v html upraven řádek <script src="http://dl.javafx.com/1.3/dtfx.js"> za <script src="file:dtfx.js"> 4. V dtfx.js je nutné nahradit tyto odkazy[7]: a. http://java.com/js/deployJava.js za file: deployJava.js. b. http://dl.javafx.com/javafx-loading-100x100.gif za file:javafx-loading100x100.gif. c. http://dl.javafx.com/javafx-loading-25x25.gif za file: javafx-loading-25x25.gif. 5. V <jméno_cvičení>.jar, <jméno_cvičení>_browser.jnlp je nutné úplně odstranit odkaz codebase="...", odkaz nahradit a nahradit <extension name="JavaFX Runtime" href="http://dl.javafx.com/1.3/javafxrt.jnlp"/> za <extension name="JavaFX Runtime" href="file:javafx-rt.jnlp"/>
36
6 Testování Testování by mělo být součástí vývoje každého softwarového projektu. Testování pomáhá nalézat chyby, demonstruje, že je program schopný fungovat bez chyb aj.
6.1 Základní testy Testování probíhalo za pomoci debug výpisů a grafického zobrazení. Velkou pozornost u testů jsem věnoval třídě parserXML. Kontroval jsem zpracovaná data v proměnných získané čtením z XML zdroje. Další třída, na kterou jsem se dost zaměřil, byla třída Piece. Zde jsem se zaměřoval na kontrolu pozice a uzamykání pozice. Při tomto testování jsem zjistil mnohé neočekávané poznatky o pozicích v JavaFX. U každého cvičení jsem testoval vyhodnocování. U cvičení „Co se vypíše“ jsem zkoušel zadávat vstupy a zjišťoval jsem, jestli program správně reaguje na správně vyplněný text a na špatně vyplněný text. Zde je striktně vyžadována shoda se zadanými daty v XML. Ve cvičení „Doplnění textu“ bez přetahování jsem se zaměřoval na zadávání slov bez závislosti na pozici. V tomto cvičení, ale s přetahování jsem testoval, zda po přetažení je boxu změněna barva a uzamknuta pozice. U cvičení „Křížovka“ jsem testoval, zda se slova zadaná do boxů vedle křížovky zapíšou správně do křížovky. Dále pak omezování počtu znaků v doplňovacích políčkách přímo v křížovce a to pro českou i anglickou verzi. Dále jsem testoval zapisování do tajenky, které je možné pouze z políček v křížovce. Ve cvičení „Magický čtverec“ bez přetahování jsem testoval zadávání čísel v různých číselných soustavách. Zkoušel jsem šestnáctkovou, osmičkovou a v neposlední řadě desítkovou. S přetahováním jsem testoval možnosti přetahování a uzamykání a měnění barev při přesunutí na správnou pozici. V testech ke cvičení „Pravda nepravda“ jsem testoval funkčnost hodnocení zaškrtnutí odpovědí a tlačítek. U cvičení „Seřazení textu“ jsem testoval možnosti přetahování, a zda je funkční, že u boxů se stejným textem nezáleží na pozici. Ve cvičení „Šibenice“ jsem testoval funkčnost reakce na stisknutí klávesy a její zakázání. Dále funkčnost doplnění písmena do hledaného textu, změnu obrázku a ubírání životů. Prováděl jsem test najití hledaného textu i nenalezení textu. V testech pro cvičení „Spojení stejných hodnot“ jsem testoval přesouvání boxů s textem na různé pozice a reakci na přesunutí na správné místo.
37
38
7 Závěr Cíle bakalářské práce byly splněny a byly vytvořeny funkční komponenty pro interaktivní cvičení. Touto bakalářskou prací vývoj těchto a dalších cvičení podporující výuku programovacího jazyka není dokončen, ale bude postupovat dále, aby pro uživatele byly přístupny všechny možnosti cvičení v interaktivní podobě bez omezení. Výsledkem mé bakalářské práce je osm parametrizovatelných interaktivních cvičení. Tyto cvičení se za pomoci appletu dají vložit do libovolných HTML stránek a za použití v této práci napsaných úprav budou cvičení funkční i v offline režimu. V aplikaci se mi nepodařilo využít CSS stylů tak, aby velikosti jednotlivých prvků byly relativní. Aplikace z CSS stylů neumí získat data potřebná pro výpočty šířek a výšek prvků. Tato data se musí zadávat přímo do proměnné. Posledním nedostatkem je nelogické přeskakování po grafických prvcích při používání klávesy tabulátoru ve cvičení „Křížovka“. Velice si vážím nabytých zkušeností s programovacím jazykem JavaFX. S tímto jazykem jsem se nikdy předtím nesetkal, a proto jsem vděčný za novou zkušenost a rozšíření obzorů ve světě programovacích jazyků. Práci s tímto programovacím jazykem hodnotím jako dobrou. Dále si cením zopakování metodik vývoje software v UML.
39
40
Seznam použité literatury [1]
Interaktivní výuka [online]. 2011. [cit. 17. 5. 2011]. Dostupné z:
[2]
JavaFX | Rich Internet Applications Development | RIAs Java FX [online]. 2010. [cit. 26.5.2011]. Dostupné z:
[3]
XML [online]. 1999. [cit. 26.5.2011]. Dostupné z:
[4]
Vítejte u NetBeans a na stránkách www.netbeans.org [online]. 2011. [cit. 16. 5. 2011]. Dostupné z:
[5]
Jigsaw Created With Boolean Shape operations [online]. 2008. [cit. 12. 1. 2011]. Dostupné z:
[6]
How to limit the text length in a TextBox using JavaFX [online]. 2010. [cit. 13. 3. 2011]. Dostupné z:
[7]
How to Develop and Run JavaFX Applications Offline[online]. 2011. [cit. 20.5.2011]. Dostupné z:
[8]
Lawrence PremKumar, Praveen Mohan - Beginning JavaFX, [New York] : Apress, 2010
[9]
Vivien Vladimir - JavaFX 1.2 application development cookbook : over 80 recipes to create rich Internet applications with many exciting features, Birmingham : Packt, 2010
41
42
Příloha A Seznam použitých zkratek CSS Cascading Style Sheets: používá se k vytvoření designu webových stránek UML Unified Modeling Language: unifikovaný vyjadřovací prostředek pro dokumentaci obsahové části informatických projektů HTML HyperText Markup Language: jeden z jazyků umožňující publikaci dokumentů na Internetu
43
44
Příloha B Instalační a uživatelská příručka Instalační ani uživatelská příručka dle mého názoru není nutná. Všechna potřebná nastavení pro tvůrce skript jsou popsaná už na předchozích stránkách této práce.
45
46
Příloha C Obsah přiloženého CD Přiložené CD obsahuje: text
adresář obsahující text BP
obr
adresář obsahující obrázky použité v BP
ucebnice coSeVytiskne
adresář obsahující projekt cvičení „Co se vytiskne“ se zdrojovými kódy
doplneniTextu
adresář obsahující projekt cvičení „Doplnění textu“ se zdrojovými kódy
krizovka
adresář obsahující projekt cvičení „Křížovka“ se zdrojovými kódy
magickyCtverec
adresář obsahující projekt cvičení „Magický čtverec“ se zdrojovými kódy
pravdaNepravda
adresář obsahující projekt cvičení „Pravda nepravda“ se zdrojovými kódy
serazeniTextu
adresář obsahující projekt cvičení „Seřazení textu“ se zdrojovými kódy
sibenice
adresář obsahující projekt cvičení „Šibenice“ se zdrojovými kódy
spojeniStejnychHodnot adresář obsahující projekt cvičení „Spojení stejných hodnot“ se zdrojovými kódy offline
adresář obsahující HTML soubory s applety k jednotlivým cvičením
knihovny
adresář obsahující knihovnu potřebnou ke cvičení „Šibenice“
readme.txt
soubor obsahující jak pouštět jednotlivá cvičení
47
48
