). Jednotlivé položky tohoto seznamu jsou potom výrazy, které uživatel bude třídit. Každá položka seznamu má atribut class nastaven na draggable a má unikátní identifikátor, který se odvíjí od toho, ke které třídě náleží. Formát identifikátoru má následující podobu i[pořadové č. položky]_c[pořadové č. třídy]. První položka seznamu v případě, že bude náležet například k druhé třídě, tedy bude mít identifikátor i1_c2. Tyto identifikátory jsou zavedeny, aby bylo možné pomocí skriptu určit, ke které třídě výraz náleží. Vizuální podoba kvízu po načtení stránky vypadá jako jednoduchá tabulka se dvěma řádky. V prvním řádku uživatel vidí názvy kategorií a druhý je zatím prázdný, neboť uživatel zatím neroztřídil žádné elementy. Pod tabulkou jsou vypsány ve sloupci výrazy, které musí korektně roztřídit. Toho dosáhne tak, že je myší přetáhne ke správné kategorii.
Metodika řešení
3.5.2
21
Řadicí kvíz
Jako první v HTML struktuře se u řadicího kvízu nachází element s tagem , což je HTML tag pro odstavcový text. V tomto elementu jsou uživateli vypsány instrukce, podle kterých by měl postupovat, aby správně vyřešil zadaný kvíz. Jako další se nachází nečíslovaný seznam, u kterého je nastaven atribut class na hodnotu boxy. Položkami tohoto seznamu jsou výrazy, které bude mít uživatel za úkol správně seřadit. U každé položky je zvolen unikátní identifikátor. Tento identifikátor je vždy v následujícím formátu itemOrder_[ Pořadové č. ]. Pořadové číslo položky v tomhle případě představuje správné pořadí, ve kterém by se měl element v seznamu nacházet, nikoliv jeho současné pořadí v seznamu. Tyto identifikátory byly zvoleny z toho důvodu, aby bylo možné pomocí skriptu určit, jestli jsou položky správně seřazeny a tím vyhodnotit jestli uživatel vyřešil kvíz správně. Dále se nachází dva formulářové elementy input, které mají nastaven atribut type na hodnotu button. Tím pádem mají pro uživatele vzhled tlačítka. Obě tlačítka mají dále nastaven atribut value na hodnotu VYHODNOTIT a NÁPOVĚDA. Tím uživatel ví, k čemu tlačítko slouží. Tlačítko pro vyhodnocení slouží ke kontrole, jestli se současné pořadí položek v seznamu shoduje s pořadím, které je definováno jako správné. Tlačítko s textem NÁPOVĚDA, jak je nejspíš z jeho názvu jasné, slouží pro poskytnutí nápovědy uživateli. Pokaždé, když na něj uživatel klikne, tak se mu u jednoho ze seřazovaných výrazů zobrazí jeho pořadové číslo. Pokud na něj uživatel klikne i po zobrazení všech nápověd tak mu bude otevřeno okno se zprávou, že již není co napovědět. Na konci je potom umístěn HTML element s tagem
, jeho identifikátor je zvolen jako hiddenMessage. Tento element je po načtení stránky skryt a zobrazuje se až tehdy, vyřeší-li uživatel správně kvíz. Jeho obsahem jsou nějaké doplňující informace. Tyto informace by se měly tematicky týkat právě procházeného kurzu. Po načtení stránky uživatel kvíz uvidí jako vertikálně po sobě jdoucí boxy, ve kterých jsou napsány nějaké výrazy. Na horní straně kvízu si uživatel přečte, jak má postupovat, aby ony boxy seřadil do správné posloupnosti. Boxy je možné seřazovat pouze ve vertikálním směru. Když má uživatel pocit, že boxy správně seřadil, klikne na tlačítko s nápisem VYHODNOTIT. Poté se mu objeví okno se zprávou o tom, jestli kvíz vyřešil správně nebo musí pořadí boxů pozměnit. Pokud je pořadí správné, tak se mu na spodní straně kvízu můžou objevit doplňující informace k tématu. Objeví se pouze v případě, že byly do kvízu zakomponovány.
22
3.5.3
Metodika řešení
Dotazník
Hlavním prvek dotazníku je formulář s identifikátorem f. Uvnitř formuláře se potom nachází tabulka s identifikátorem courseTable. První řádek slouží jako hlavička tabulky. První buňka v hlavičce je vždy ponechána prázdná. Každá z následujících buňek obsahuje text, který reprezentuje jednu z možných odpovědí na otázky dotazníku. Velikost hlavičky je tudíž přímo úměrná tomu, kolik máme v dotazníku možných odpovědí. Většinou se však objevují varianty o 2 až 5 odpovědích. Další řádky obsahují už přímo otázky dotazníku a takzvané radio buttony, což jsou HTML elementy sloužící pro výběr jedné možnosti ze skupiny možností. Text otázky je umístěn v tabulce do první buňky zleva. Další buňky potom obsahují jeden z určité skupiny radio buttonů, kterými poskytují volbu pro odpověď právě na otázku, která se nachází na stejném řádku. Každý radio button má nastaven atribut name ve formátu r[pořadové č. skupiny], kde pořadové č. skupiny se odvíjí od toho, ve kterém řádku tabulky se radio button nachází, počínaje řádkem obsahující první otázku. Každý radio button má nastaven atribut value na hodnotu, která se odvíjí od bodové váhy, která může, avšak nemusí být pro každou odpověď jiná. Hodnota bodové váhy je pokaždé v následujícím formátu [poč. bodů pro 1. kategorii]-[poč. bodů pro 2. kategorii]-…-[poč. bodů pro n. kategorii]. Pod tabulkou je umístěn element button, který slouží jako tlačítko. Při jeho stisku se stane jedna ze dvou věcí. V případě že uživatel zapomněl odpovědět na jednu nebo více položených otázek, tak se mu objeví zpráva, s pořadovými čísly odpovědí, na které je ještě nutno odpovědět. V druhém případě, pokud uživatel zodpověděl všechny otázky, se přidají položky do nečíslovaného seznamu s identifikátorem result. Tyto položky slouží pro předání informace o tom, kolik bodů bylo přiřazeno ke každé z kategorií výsledků. Po načtení stránky, uživatel tento dotazník vidí jako tabulku, kde v hlavičce jsou vypsány možné odpovědi a v těle tabulky jsou vypsány otázky, z jejichž pravé strany jsou volby jak na tuto otázku odpovědět. Pod tabulkou je tlačítko s nápisem Vyhodnotit a jak je podle jeho názvu zřejmé, slouží pro vyhodnocení dotazníku. Po vyhodnocení se na spodní straně dotazníku objeví seznam, ve kterém jsou vypsány názvy kategorií výsledků a vedle nich potom číslo, které reprezentuje počet bodů, které se k této kategorií připočetly, na základě toho jak uživatel dotazník vyplnil.
Metodika řešení
3.6
23
Technické řešení generátoru
Generátor byl pojat jako aplikace, jejíž funkcionalita je naprogramována pomocí JavaScriptu a její rozhraní je řešeno pomocí webového prohlížeče. Při prvním přístupu na stránku se uživateli objeví úvodní stránka, která poskytuje informace o účelu a vzniku aplikace. Layout úvodní stránky je rozdělen na dvě části. První částí je boční menu, ve kterém má uživatel možnost vybrat, na kterou stránku chce pokračovat dále. Druhou částí je středový blok, ve kterém jsou vypsány informace. V bočním menu je na výběr jedna z pěti možností. První je zobrazení úvodní strany. Druhou možností je zobrazení návodu. V návodu si uživatel může přečíst, jak vyplňovat formulářové vstupy jednotlivých generátoru tak, aby dosáhl správného vygenerování požadovaného kvízu. Další tři možnosti jsou už potom odkazy pro zobrazení menu generátorů jednotlivých kvízů. Menu každého generátoru se skládá ze tří částí. Oproti úvodní straně je zde přidán blok, který je umístěn na spodní straně okna a slouží pro poskytnutí nabídky na vytvoření nového kvízu. V středovém bloku je zobrazena tabulka, která poskytuje uživateli informace o tom, jaké kvízy má uložené, informace o jejich názvu, datu jejich vytvoření a dále umožňuje uživateli dané kvízy smazat nebo upravovat. Rozhraní stránky s formulářovými vstupy do generátoru má čtyři části. Oproti menu je zde středový blok rozdělen na bloky dva. První z těchto bloků slouží jako kontejner pro formulářové vstupy, kterými uživatel definuje obsah a vzhled výsledného kurzu. Druhý blok obsahuje náhled na výsledný kurz. Mění se dynamicky podle toho, jaké uživatel zadává hodnoty do formulářových vstupů. V tomto bloku máme možnost přepínat jeho obsah mezi dvěma variantami. Defaultně je nastaveno zobrazení vizuálního náhledu. Druhou možností je zobrazit textové pole se zdrojovým kódem generovaného kvízu. Tento kód může uživatel zkopírovat a vložit do svého e-learningového kurzu. Tímto způsobem je mu také poskytnut jeho vygenerovaný kvíz.
24
Výsledky
4 Výsledky Skripty, které byly poskytnuty vedoucím práce jako pomůcky pro tuto práci, bylo v některých případech nutno více či méně upravit z důvodu, aby se skripty daly aplikovat pro použití pomocí generátoru. Dále bylo nutno vyřešit, jak přistupovat k ukládání dat pomocí localStorage. Jelikož localStorage ukládá data do jednorozměrného asociativního pole a všechna data ukládá výhradně v textové podobě, tak by byla práce s větším množstvím dat v takové struktuře neefektivní. Proto byla vytvořena JS knihovna, která práci s ukládáním a získáváním dat z localStorage zjednodušuje.
4.1 Obslužné skripty kvízů 4.1.1
Třídicí kvíz
V případě třídicího kvízu byl skript kompletně přepsán. Jedinou funkcí, která byla kompletně přejata ze starého skriptu, byla funkce updateCoords, která slouží pro zjištění absolutní vzdálenosti jakéhokoliv HTML elementu od levé a horní strany okna. Byly přidány funkce, které řeší rozdílné nebo nedostatečné implementace JavaScriptu v některých prohlížečích. Funkce getEvent Tato funkce slouží pro ošetření nezachycení událostí v některých prohlížečích. Například některé starší verze prohlížeče Internet Explorer nepředávají objekt události jako první atribut pro anonymní funkci, ale získávají je pomocí objektu window. function getEvent(e){ return (!e)? window.event : e; } Funkce getContextElement Tato funkce slouží pro ošetření rozdílné implementace JavaScriptu pro Internet Explorer a ostatní prohlížeče. V prohlížeči Internet Explorer se pro získání zdrojového elementu, což je element, nad kterým určitá událost probíhá, získává pomocí event.target, ale například v prohlížeči Opera se získává pomocí event.srcElement. function getContextElement(e){ return (e.srcElement)? e.srcElement : e.target; }
Výsledky
25
Funkce setEventListener Tato funkce slouží k navazování funkcí na události. Jelikož normálně se v různých prohlížečích používají pro navazování jinak pojmenované funkce, tak byla vytvořena tato funkce, která si s rozdílnými implementacemi prohlížečů poradí. Dalším matoucím prvkem jsou různé koncepce názvů událostí, například někdy se používá „mousedown“ a jindy „onmousedown“, s tímhle problémem si funkce také poradí. function setEventListener(obj, eventType, _function){ if(document.addEventListener){ if(eventType.indexOf('on') == 0){ eventType = eventType.substr(2); } obj.addEventListener(eventType,_function,true); return true; }else if(document.attachEvent){ if(eventType.indexOf('on') != 0){ eventType = 'on' + eventType; } obj.attachEvent(_function); return true; }else{ return false; } } Princip funkce skriptu Funkce tohoto skriptu není úplně jednoduchá. Hlavní částí skriptu jsou nejspíše tři funkce, _onMouseDown, _onMouseMove, _onMouseUp. První funkce _onMouseDown se volá při stisknutí levého tlačítka myši. Funkce uloží do proměnné s názvem dragObj objekt elementu nad kterým byl kurzor myši v době stisku levého tlačítka. Uloží také počáteční pozici elementu. Na událost onmousedown, objektu document se naváže funkce _onMouseMove a dále na událost onmouseup se naváže funkce _onMouseUp. Nyní se při pohybu myši, bude měnit hodnota kaskádových stylů elementu, na který odkazuje proměnná hodnota dragObj. Konkrétně se budou měnit hodnoty left a top, které určují pozici, na které má prohlížeč element vykreslovat. To vyvolává pro uživatele pocit, že prvek na stránce myší drží. Dále se v této funkci spouští funkce isOnAnyTarget, která kontroluje, jestli se střední hodnota souřadnic přetahovaného elementu nachází mezi krajními hodnotami souřadnic nějakého z kontejnerů. Po uvolnění levého tlačítka myši se zavolá funkce _onMouseUp, která nejprve odstraní objektu document navázání funkcí na události od funkce _onMouseDown a poté se zavolá funkce isOnCorrectTarget. Tato funkce zkontroluje, jestli objekt elementu uložený v proměnné dragObj má souřadni-
26
Výsledky
ce, které souhlasí se souřadnicemi kontejneru, do kterého objekt patří. Pokud souřadnice souhlasí, tak je element přemístěn ze seznamu výrazů do tohoto kontejneru. Po dokončení této funkce se zkontroluje, zda jsou ještě v dokumentu nějaké elementy třídy draggable. Pokud se jejich množství rovná 0, tak to znamená, že uživatel již roztřídil všechny výrazy a v takovém případě se vypočítá úspěšnost, s jakou kvíz vyřešil. Úspěšnost se počítá následujícím kusem JS kódu. (Math.round(correct/items*100)>=0)? Math.round(correct/items*100) : 0 Proměnná correct obsahuje číselnou hodnotu, která reprezentuje, kolikrát uživatel správně přiřadil výraz ke kategorii. Pokaždé, když výraz správně přiřadí, přičte se k proměnné 1 a pokaždé, když výraz přiřadí špatně, tak se 1 odečte. Proměnná items obsahuje číselnou hodnotu, která reprezentuje celkový počet výrazů k přiřazení. Nastavení proměnných a stylů kvízu se provádí pomocí inicializační funkce _onLoad. Této funkci se jako parametr předává pole funkcí nebo textových řetězců, které se pak postupně provádějí uvnitř funkce. Tímto způsobem se do parametru funkce předá pole, které obsahuje nastavení počátečních proměnných kvízu. Pole se projde pomocí for cyklu a pro každou iteraci se zavolá JS funkce eval, díky které se provedou kusy kódu, které jsou v poli uloženy jako text. Tato funkce se spouští pomocí bloku skriptu, který je v kódu umístěn na konci, protože kdyby se spustila dříve, než je vypsáno HTML kvízu, tak by se skript snažil přistupovat k elementům, které zatím v paměti neexistují. Korektní způsob, jak toto řešit, je pomocí události windows.onload. Tato metoda ovšem záměrně nebyla použita, neboť se kód kopíruje do kódu stránek, kde chceme kvíz umístit. Tím pádem by se mohlo stát, že by se tím přepsala funkce, která je na tuto událost navázána na cílových stránkách. _onLoad(['bgColor="#" ', 'thBgColor="#850000" ', 'thFontColor="#B3A700" ', 'thFontSize="28px" ', 'tdBgColor="#C5D154" ', 'tdFontColor="#" ', 'tdFontSize="20px" ', 'itemFontColor="#120396" ', 'itemFontSize="25px"']); 4.1.2
Řadicí kvíz
V případě řadicího kvízu byl skript pozměněn jen částečně. Jelikož ve skriptu je využito JavaScriptové knihovny toolman, jejíž funkce je již optimální, tak bylo potřeba změnit jen pár částí a pár částí přidat.
Výsledky
27
Funkce isAscending Tato funkce byla přidána. Slouží pro zjištění, jestli hodnoty v poli jsou seřazeny vzestupně. Byla přidána jako část kontroly, jestli je seznam výrazů správně seřazen. Funkce inspectListOrder Tuto funkci bylo nutné pozměnit, neboť nebrala v potaz různě velké množství výrazů v seznamu. Byla nastavena pro kontrolu specifického kvízu, který měl pouze 4 výrazy k seřazení. Funkce byla pozměněna tak, aby se dala využít univerzálně pro jakýkoliv počet výrazů. inspectListOrder : function(id) { var res=ToolMan.junkdrawer(). serializeList(document.getElementById(id)).split('|'); var order = new Array(); for(var i=0; i
Dotazník
U dotazníku byl skript opět kompletně přepsán. Jeho původní podoba byla navržena pro vyhodnocení velmi specifické podoby dotazníku. Při tvorbě nového skriptu bylo cílem vytvořit skript, který by se dal použít univerzálně pro jakoukoliv podobu dotazníku. Princip skriptu Hlavní funkcí je evaluate, která má na starosti vyhodnocení kvízu a dopočítání zatím neznámých informací. Skript nemá od generátoru poskytnutou informaci o tom, kolik je maximální počet bodů. Generátor tuto informaci také nemá, nevyžaduje od uživatele zadávání informace, kterou je možné poměrně snadno
28
Výsledky
dopočítat. Funkce si dopočítá maximální počet bodů pro každou kategorii tím, že u každé otázky sečte odpovědi s největší bodovou vahou pro každou kategorii.
4.2 Obslužné skripty generátoru 4.2.1
Generování kódu
Pro vygenerování zdrojového kódu kvízu slouží funkce makePreview. Tato funkce se v určitých místech u všech typů generátorů liší. Je to z důvodu rozdílné HTML struktury všech kvízů. Jelikož formulářové vstupy pro definování kvízů se také liší, tak funkce pracuje pokaždé s jinou strukturou dat. Funkce nejprve deklaruje proměnné, do kterých inicializuje data poskytnutá uživatelem prostřednictvím formuláře. Dále si deklaruje proměnnou html, do které bude v jednotlivých částech funkce přidávat kusy zdrojového kódu celého kvízu. Pomocí funkce getScriptContent získá obsah všech potřebných skriptů a zapíše jej do proměnné hodnoty html. Dále se pomocí vytvořených algoritmů postupně přidávají do proměnné hodnoty html kusy HTML kódu. Zpracovávají se proměnné s daty získanými z formuláře generátoru a podle nich se tvoří HTML kód pro výsledný kvíz. Po zpracování všech dat a zapsání HTML kódu se ještě zapíše kód inicializačního skriptu kvízu. Jako atribut inicializační funkce _onLoad, která jak již bylo zmíněno, u všech kvízů slouží pro inicializaci proměnných a stylů, se zapíšou hodnoty oněch stylů a proměnných. Jakmile je kód kompletně připraven, tak se buďto interpretuje na stránce jako grafický náhled nebo se pomocí funkce escHtml nahradí speciální HTML znaky a obsah se vypíše do textového pole na stránce. 4.2.2
Ukládání dat
Ukládání dat zprostředkovává funkce saveCourse. Tato funkce uživateli otevře dialogové okno prompt a vyzve uživatele, aby zadal název, pod jakým chce kvíz uložit. Zkontroluje, zda zadaný název kvízu již neexistuje. Pokud existuje uložený kvíz se stejným názvem, tak se uživatele dotáže, jestli si přeje kurz přepsat. Po korektním zadání názvu se získají data z formuláře a inicializují se do proměnných. Tato data jsou postupně procházena a ukládána do localStorage prostřednictvím knihovny dataSystemLib. 4.2.3
Načítání dat
Načítání dat zprostředkovává funkce initGeneratorData. Tato funkce si získá název kvízu, který se má načíst pomocí funkce getValue('GEN.curr Name'). Pokud název kvízu není roven řetězci ".new", což znamená, že se nemají načítat žádná data, ale má se vytvořit nový kvíz, tak funkce pokračuje. Ve funkci se znovu vytváří formulář, který si uživatel uložil. Nejprve se zkontroluje, jestli název kvízu předaný funkci skutečně existuje pomocí funkce exists. Tato kontrola se provádí, protože kdyby uživatel přistupoval ke stránce pomocí url
Výsledky
29
místo uživatelského rozhraní, tak by mohly vzniknout potíže. Pokud žádný kurz neexistuje, tak funkce uživatele přesměruje na stránku menu. Po dokončení tvorby formuláře se na stránce smaže stávající formulář a nahradí se tím, který byl vytvořen z uložených dat. Na konec se ještě zavolá funkce makePreview pro automatické vytvoření náhledu na načtený kvíz. 4.2.4
Mazání dat
Pro mazání dat se využívá externí funkce knihovny dataSystemLib. Funkce se uživatele dotáže pomocí dialogového okna confirm, jestli chce skutečně kvíz smazat. Pokud uživatel provádí mazání, od jinud než z okna menu, tak funkce uživatele po smazání kurzu do menu přesměruje.
4.3 Rozhraní pro práci s localStorage Jelikož se pomocí localStorage dají data ukládat pouze do struktury jednorozměrného pole, tak bylo nutno vytvořit nějaké rozhraní, které bude dovolovat data ukládat více organizovaně. Objekt localStorage je relativně nový a proto v době kdy byla aplikace programována, nebyly zatím žádné volně dostupné prostředky, které by toto umožňovaly. Proto byla vytvořena externí JavaScriptová knihovna dataSystemLib. Tato knihovna umožňuje k localStorage přistupovat jako ke stromové struktuře, která je pro organizované ukládání dat daleko vhodnější. Do knihovny byly zaimplementovány běžně používané funkce pro práci se stromovou strukturou, jako je získávání potomků nebo předků různých uzlů. Nejprve bylo nutné vyřešit, jak k localStorage přistupovat jako ke stromové struktuře. První myšlenkou bylo ukládat informaci o pozici uzlu ve stromu spolu s ukládanými dvojicemi (klíč/hodnota) přímo do localStorage. Další otázkou je, se kterou částí dvojice informaci o pozici ukládat, jestli s klíčem nebo s hodnotou. Pokud by se pozice ukládala spolu s hodnotou, tak klíč by se zvolil jako nějaký unikátní identifikátor, například jednoduchý inkrement a do hodnoty by se před nebo za data vložily informace o předchozích a následujících uzlech. Pokud bychom zvolili ukládání informace o pozici spolu s klíčem, tak bychom klíč každého uzlu volili jako absolutní cestu stromem. Pomocí takto volených klíčů by potom bylo bez problému možné nacházet předky i potomky. Cesta stromem se bude definovat například pomocí tečkové notace, kdy přechody z předka na potomka se oddělí tečkou (parent.child). Tečku je možné nahradit i jiným znakem, ale je třeba brát na vědomí, že tento oddělující znak potom nesmíme používat v názvech uzlů. Funkce exists Tato funkce vrací boolean hodnotu. Jako parametr přejímá absolutní cestu stromem pro testovaný uzel. Cyklem for prochází datový prostor localStorage a porovnává klíče uložených dvojic s parametrem předaným funkci. Při první
30
Výsledky
shodě funkce vrátí hodnotu true v případě že for cyklus skončí a není nalezena shoda, vrátí funkce hodnotu false. exists : function(element){ for(var i=0; i
Datové struktury
Výpis datových struktur uložených kvízů. Tento výpis byl taktéž vytvořen pomocí funkce z knihovny dataSystemLib. Díky tomuto rozhraní se dá na procházení dat aplikovat rekurze. Právě rekurzivní výpis používá funkce print Structure. Funkce přejímá jako parametr cestu k uzlu, od kterého má výpis struktury začít.
Výsledky
Výpis struktury pro třídicí kvíz |-CQ |-CQName | |-date | |-style | | |-items | | | |-fontSize | | | |-fontColor | | |-tableBody | | | |-fontSize | | | |-fontColor | | | |-bgColor | | |-tableHead | | | |-fontSize | | | |-fontColor | | | |-bgColor | | |-background | | | |-bgColor | |-items | | |-item2 | | | |-category | | | |-content | | |-item1 | | | |-category | | | |-content | | |-itemsCount | |-categories | | |-category2 | | |-category1 | | |-categoriesCount
31
Výpis struktury pro dotazník |-QU |-QUName | |-date | |-resultCategories | | |-category1 | | |-category2 | |-answers | | |-answer1 | | |-answer2 | | |-answer3 | | |-answer4 | | |-answer5 | |-questions | | |-question1 | | | |-content | | | |-pointWeights | | |-question2 | | | |-content | | | |-pointWeights | | |-question3 | | | |-content | | | |-pointWeights | |-style | | |-background | | | |-bgColor | | |-tableHead | | | |-bgColor | | | |-fontColor | | | |-fontSize | | |-tableBody | | | |-bgColor | | | |-fontColor | | | |-fontSize
32
Výsledky
Výpis struktury pro řadicí kvíz |-OQ |-OQName | |-date | |-instructions | |-message | |-additionalInfo | |-items | | |-itemsCount | | |-item1 | | | |-content | | | |-order | | |-item2 | | | |-content | | | |-order
4.4 Řešení uživatelských rozhraní generátorů Menu uživatelských kvízů je u všech kvízů stejné. Poté, co uživatel menu zobrazí, se mu objeví tabulka, ve které vidí všechny doposud uložené kvízy daného typu. V každém řádku vidí název kvízu a datum jeho poslední změny. Pomocí kliknutí na ikonku tužky, která se nachází v každém řádku na pravé straně, může uživatel upravit již uložený kvíz. Dále pomocí ikonky, která zobrazuje popelnici, může uživatel kvíz smazat. Posledním ovládacím prvkem menu kvízů je tlačítko v dolní liště, na tomto tlačítku je nápis „Nový“ a jak je nejspíš zřejmé, slouží pro vytvoření nového kvízu. Rozhraní generátorů je na rozdíl od menu u všech kurzů odlišné. Pro každý generátor byl sepsán stručný návod, který by měl pomoci uživatelům, kteří si neví rady s tím, jak s uživatelským rozhraním pracovat. 4.4.1
Třídicí kvíz
Uživatelské rozhraní pro generátor třídicího kvízu je řešeno následovně. Jako první se ve formuláři nachází seznam kategorií. Každá položka seznamu obsahuje textový vstup, do kterého uživatel zadá název kategorie. Zprava každé položky je potom tlačítko pro smazání příslušné kategorie. Pro přidání dalších kategorií, uživatel klikne na tlačítko, které je umístěno na konci seznamu. Druhou částí je seznam položek. Každá položka v tomto seznamu obsahuje dvě textová pole. Do prvního uživatel zadá název položky. Druhé textové pole má popisek „Kategorie č.“. Do této kolonky uživatel zadá pořadové číslo kategorie, ke které položka náleží. Toto číslo se dá vyčíst na levé straně každé zadané kategorie. Každá položka má dále tlačítka se symboly šipek, sloužící pro posunování položek dolů nebo nahoru a tlačítko pro smazání položky. Tlačítko pro přidání další položky je opět umístěno na konci seznamu.
Výsledky
33
Vzhled kvízu si uživatel upraví tak, že z horní lišty vybere záložku Vzhled. Tím se mu okno generátoru přepne na vstupy pro zadávání barev a velikostí písma. Pokud by se podoba kvízu nezměnila automaticky, tak uživatel může kliknout na tlačítko Aktualizovat, které se nachází nad náhledem na kvíz vedle tlačítka pro zobrazení kódu. Dolní lišta obsahuje čtyři tlačítka: Menu, Nový, Uložit a Smazat. Funkce těchto tlačítek jsou zřejmé z jejich názvů.
Obrázek 1 Rozhraní generátoru třídicího kvízu
4.4.2
Řadicí kvíz
První částí formuláře generátoru řadicího kvízu jsou tři textová pole. Do prvního pole uživatel zadává pokyny pro zpracování kvízu, které chce zadat řešiteli kvízu. Do druhého pole uživatel může zadat zprávu, která se řešiteli kvízu objeví po dokončení kvízu ve formě dialogového okna. Pokud toto pole nechá prázdné, tak se žádná zpráva nezobrazí. Do třetího pole uživatel zadá doplňující informace, které se po dokončení kvízu na stránce zobrazí ve formě HTML elementu. Druhou částí je seznam položek. Každá položka obsahuje dvě textová pole. Do prvního pole uživatel zadá název položky a do druhého zadá číslo jejího pořadí pro seřazení. Dále každá položka obsahuje tři tlačítka. Dvě z nich mají symbol šipek a slouží pro posunutí položky nahoru či dolů. Třetí tlačítko slouží pro odstranění položky. Dolní lišta obsahuje čtyři tlačítka: Menu, Nový, Uložit a Smazat. Funkce těchto tlačítek jsou zřejmé z jejich názvů. U řadicího kvízu nejsou žádné části, jejichž vzhled by se dal upravovat.
34
4.4.3
Výsledky
Dotazník
Formulář pro generátor dotazníku se dá rozdělit na tři hlavní části. V první části uživatel zadává položky seznamu kategorií výsledků. Každá položka v tomto seznamu obsahuje textové pole, do kterého uživatel zadá název kategorie. Dále každá položka obsahuje tlačítko pro smazání a tlačítko pro přidávání dalších položek se nachází na konci seznamu. Druhá část obsahuje seznam možných odpovědí. Tento seznam obsahuje stejné ovládací prvky jako seznam kategorií výsledků. Rozdílem je, že do textových polí se zadávají názvy možný odpovědí namísto názvů kategorií výsledků. Třetí část obsahuje seznam otázek. Každá položka seznamu obsahuje textové pole, do kterého uživatel zadá obsah otázky a textové pole, do kterého uživatel napíše text v určitém formátu. Tento text definuje bodovou váhu pro různé odpovědi. Formát, v jakém se bodová váha zadává, je popsán v návodu. Každá položka potom obsahuje tlačítka pro posun položky dolů nebo nahoru a pro smazání položky. Dále je u každé položky tlačítko s nápisem „Pro následující“. Toto tlačítko slouží ke zkopírování bodové váhy pro všechny položky, které se nachází pod položkou, u které bylo tlačítko stisknuto. Dolní lišta obsahuje čtyři tlačítka: Menu, Nový, Uložit a Smazat. Funkce těchto tlačítek jsou zřejmé z jejich názvů. Vzhled dotazníku lze upravit vybráním záložky Vzhled, které se nachází v horní liště. Po jeho stisknutí se okno generátoru přepne na zadávání barev a velikostí písma. 4.5
Adresářová struktura
Následující adresářová struktura byla vypsána pomocí příkazového řádku OS Windows. Adresář „imgs“ (zkratka pro images) obsahuje rastrové obrázky, které se na stránce zobrazují. Adresář „js“ (zkratka pro JavaScript) obsahuje veškeré JavaScriptové soubory. Adresář „src“ (Zkratka pro source) obsahuje HTML dokumenty aplikace. Poslední adresář „style“ obsahuje soubory kaskádových stylů.
Výsledky
35
+---Generator Kvizu | +---imgs | | +---main | | \---menu | +---js | | \---jscolor | +---src | | +---dotaznik | | +---navod | | +---razeni | | \---trideni | \---style
4.6 Ověření funkčnosti aplikace Pro ověření správné funkce aplikace byly její pomocí vytvořeny vzorové kvízy. Tyto kvízy tematicky souvisejí s oborem informačních technologií. Jelikož tato aplikace ukládá data na disk klienta, tak není možné přímo do aplikace zakomponovat uložené kvízy, které by sloužily jako ukázka. Je ovšem velmi snadné vytvořit skript, který po načtení stránky uloží klientovi na disk data s těmito kvízy. Data je možné do aplikace importovat pomocí odkazu: https://akela.mendelu.cz/~xminx/Generator_Kvizu_Final/load. html. Vlastní aplikace je potom k nalezení na adrese: https://akela.mendelu.cz/~xminx/Generator_Kvizu_Final/
36
Diskuze a závěr
5 Diskuze a závěr Technologie pro vytvoření aplikace pro tvorbu interaktivních komponent elearningových kvízů, byly z části vybrány takové, které jsou osvědčené a z části takové, jejichž možnosti nejsou zatím zcela prozkoumány. Při tvorbě uživatelského rozhraní bylo dbáno na to, aby uživatel musel zadávat co nejméně hodnot na vstupu a získal co nejvíce na výstupu. Dále bylo dbáno na maximální variabilitu aplikace ve smyslu volitelného vzhledu kvízů.
5.1
Zhodnocení výsledků
V aplikaci bylo dosaženo vytvoření kompletních generátorů pro tři zadané druhy kvízů. Pro třídicí kvíz, řadicí kvíz a dotazník. Generovaný kód se jeví jako plně funkční a nebyly zjištěny žádné chyby, které by se však mohly objevit používáním kódu v různých prostředích. Aplikace byla otestována na nejnovějších verzích (v době dokončení aplikace) prohlížečů Internet Explorer, Mozilla Firefox, Opera a Google Chrome. Jelikož aplikace využívá některé z technologií HTML5, tak je pravděpodobné, že na některých starších prohlížečích aplikace nebude plně funkční. Pojetí aplikace může připomínat spíše desktopovou aplikaci. To je z důvodu poněkud nekonvenčního ukládání dat. Ve většině webových aplikací se v této době pro ukládání používají serverové databázové systémy MySQL nebo PostgreSQL, zatímco v této aplikaci se data ukládají lokálně pomocí HTML5 objektu localStorage. Tato metoda pro ukládání dat se ukázala i přes pár počátečních pochybností jako spolehlivá a efektivní. Její výhodou je v první řadě rychlejší získávání dat pro uživatele, je možné její pomocí v průběhu aplikace častěji data ukládat a číst, aniž by se musela znovu načítat stránka nebo to aplikaci jakkoliv zpomalovalo. Druhou výhodou je to, že odpadá nutnost autorizace uživatelů za účelem, aby mohli přistoupit ke svým vlastním datům, jelikož každý uživatel má fyzicky přístup pouze k datům na svém disku. Nevýhodou této metody je, že tyto data nejsou synchronizována mezi prohlížeči. Každý prohlížeč si uchovává svá vlastní data. Pro někoho by také mohlo být nevýhodou to, že pokud si kvíz vytvoří například na počítači z domova a chce k němu přistoupit z práce, tak to není možné. Tento problém by mohl být vyřešen exportem dat do podoby skriptu, který by se mohl na flashdisku nebo pomocí jakéhokoliv jiného úložiště přenést na jiné počítače. Vytvořit export do takového skriptu by bylo relativně jednoduché, tento export však není součástí implementace aplikace. I když byly splněny zásady pro vypracování této práce, tak by bylo možné aplikaci dále rozšířit. Bylo by například užitečné přidat funkce pro generování dalších typů kvízů nebo vytvořit funkci synchronizace lokálního datového úložiště se serverovou databází. Tím by aplikaci zůstal prvek rychlosti a bylo by tak možné snáze přenášet kvízy mezi více počítači.
Literatura
37
6 Literatura CASCADING STYLE SHEETS. IN: WIKIPEDIA: the free encyclopedia [online]. San Francisco (CA): Wikimedia Foundation, 2001, 9 května 2012 [cit. 2012-0509]. Dostupné z: http://en.wikipedia.org/wiki/Css E-LEARNING. IN: WIKIPEDIA: the free encyclopedia [online]. San Francisco (CA): Wikimedia Foundation, 2001, 9 května 2012 [cit. 2012-05-09]. Dostupné z: http://en.wikipedia.org/wiki/E-learning HTML5. IN: WIKIPEDIA: the free encyclopedia [online]. San Francisco (CA): Wikimedia Foundation, 2001, 8 May 2012 [cit. 2012-05-09]. Dostupné z: http://en.wikipedia.org/wiki/Html5 LUBBERS, PETER, BRIAN ALBERS A FRANK SALIM. HTML5: programujeme moderní webové aplikace. Vyd. 1. Brno: Computer Press, 2011, 304 s. ISBN 978-80-251-3539-6. REFSNES DATA. JavaScript Introduction. W3schools.com [online]. © 1999―2012 [cit. 2012-05-13]. Dostupné z: http://www.w3schools.com/js/js_intro.asp REFSNES DATA. JavaScript Tutorial. W3schools.com [online]. © 1999―2012 [cit. 2012-05-13]. Dostupné z: http://www.w3schools.com/js/default.asp SCHNEIDER, DANIEL K. Interactivity. EdutechWiki [online]. 23. 2. 2012 [cit. 2012-05-17]. Dostupné z: http://edutechwiki.unige.ch/en/Interactivity STRATEGIC TECHNOLOGY SOLUTIONS. Smart Builder. Suddenly Smart [online]. © 2011 [cit. 2012-05-17]. Dostupné z: http://www.suddenlysmart .com/comparison.htm ORACLE. NetBeans [online]. © 2012 [cit. 2012-05-13]. Dostupné z: http:// netbeans .org/ ODVÁRKO, JAN. JSColor [online]. © 2008―2012 [cit. 2012-05-09]. Dostupné z: http://jscolor.com/ ROBIE, JONATHAN. Introduction. In: Document Object Model (DOM) Level 1 Specification [online]. 1998 [cit. 2012-05-09]. Dostupné z: http:// www.w3.org /TR/1998/REC-DOM-Level-1-19981001/DOM.pdf TAYLOR, TIM. Drag & Drop Sortable Lists with JavaScript and CSS [online]. © 2005 [cit. 2012-05-13]. Dostupné z: http://tool-man.org/examples/ sorting.html
38
Literatura
THAU, DAVE. Velký průvodce JavaScriptem: tvorba interaktivních webových stránek v praxi. 1. vyd. Praha: Grada, 2009, 516 s. ISBN 978-80-247-22115. W3C. Cascading Style Sheets [online]. © 1994―2011, 6 května 2012 [cit. 201205-09]. Dostupné z: http://www.w3.org/Style/CSS/
