Generátor interaktivních komponent elearningových kurzů

Mendelova univerzita v Brnˇe Provoznˇe ekonomická fakulta

Gener´ ator interaktivn´ıch komponent eLearningov´ ych kurz˚ u Bakal´ aˇrsk´ a pr´ ace

Vedouc´ı práce: Ing. Petr Jedliˇcka, Ph.D.

Zdenˇek Novák

Brno 2011

list originalniho zadani prace

Dˇekuji vedouc´ımu práce, Ing. Petru Jedliˇckovi, Ph.D., za veden´ı pˇri zpracován´ı bakaláˇrské práce a za poskytnut´ı nezbytn´ ych podklad˚ u, cenné pomoci, rad a konstruktivn´ıch pˇripom´ınek.

Prohlaˇsuji, ˇze jsem tuto práci vypracoval zcela samostatnˇe s pouˇzit´ım v´ yhradnˇe tˇech zdroj˚ u, které jsou souhrnnˇe uvedeny v seznamu literatury.

Brno, 25. kvˇetna 2011

....................................................

5

Abstract Zdenˇek Novák, Application for generating interactive e-learning tasks. Bachelor thesis. Brno, 2011. Bachelor thesis deals with creation of application for generating prebuilt elearning components, which serves to increase course’s interactivity while enabling verification of acquired knowledge through interactive elements of HTML page. It contains design and implementation of generator those interactive quizzes. Keywords e-learning, interactive tasks, web application

Abstrakt Zdenˇek Novák, Generátor interaktivn´ıch komponent eLearningov´ ych kurz˚ u. Bakaláˇrská práce. Brno, 2011. Bakaláˇrská práce ˇreˇs´ı tvorbu aplikace pro generován´ı pˇredpˇripraven´ ych elearningov´ ych komponent, které slouˇz´ı pro zv´ yˇsen´ı interkativity kurzu a souˇcasnˇe umoˇzn ˇuj´ı ovˇeˇren´ı z´ıskan´ ych znalost´ı pomoc´ı interaktivn´ıch prvk˚ u v HTML stránce. Obsahuje návrh a implementaci generátoru tˇechto interaktivn´ıch kv´ız˚ u. Kl´ıˇ cov´ a slova e-learning, interaktivn´ı u ´lohy, webová aplikace

6

OBSAH

Obsah ´ 1 Uvod a c´ıl pr´ ace ´ 1.1 Uvod . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.2 C´ıl práce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Souˇ casn´ y stav 2.1 E-learningové kv´ızy . . . . 2.1.1 Kˇr´ıˇzovka . . . . . . 2.1.2 Tahac´ı pˇriˇrazován´ı 2.1.3 Pˇretahován´ı slov do 2.1.4 Tahac´ı tˇr´ıdˇen´ı . . .

. . . . . . . . . . . . textu . . . .

. . . . .

. . . . .

3 Metodika zpracov´ an´ı 3.1 Technologie pro implementaci . . . . 3.1.1 DHTML . . . . . . . . . . . . 3.1.2 V´ ybˇer JS knihovny . . . . . . 3.1.3 V´ ybˇer programovac´ıho jazyka 3.1.4 V´ ybˇer frameworku . . . . . . 3.1.5 V´ ybˇer databázového systému

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

4 V´ ysledky 4.1 Návrh aplikace pro generován´ı u ´loh . . . . 4.1.1 Návrh struktury databáze . . . . . 4.1.2 Návrh struktury presenter˚ u . . . . 4.2 Implementace aplikace . . . . . . . . . . . 4.2.1 Adresáˇrová struktura . . . . . . . . 4.2.2 Implementace u ´loh v jQuery . . . . 4.2.3 Funkˇcn´ı náplˇ n presenter˚ u. . . . . . 4.2.4 Zpracován´ı uˇzivatelsk´ ych nastaven´ı 4.2.5 Vykreslován´ı u ´lohy . . . . . . . . . 4.2.6 Zp˚ usob generován´ı u ´lohy . . . . . . 4.3 Demonstrován´ı funkˇcnosti aplikace . . . . 4.3.1 Kˇr´ıˇzovka – DBS . . . . . . . . . . . 4.3.2 Tahac´ı pˇriˇrazován´ı – ˇca´sti dotazu .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . .

7 7 8

. . . . .

9 10 10 11 13 14

. . . . . .

17 17 17 20 21 22 24

. . . . . . . . . . . . .

26 26 26 27 30 30 31 34 40 41 42 45 45 45

5 Diskuze 47 5.1 Nedostatky implementace . . . . . . . . . . . . . . . . . . . . . . . . 47 5.2 Moˇznosti navázán´ı na práci . . . . . . . . . . . . . . . . . . . . . . . 47 6 Z´ avˇ er

49

A Pˇ r´ıloha 1

50

B Literatura

51

1

´ ´ UVOD A C´ıL PRACE

1 1.1

7

´ Uvod a c´ıl pr´ ace ´ Uvod

V dneˇsn´ı dobˇe, kdy se lidstvo nacház´ı v tzv. informatickém vˇeku, je objem veˇskerého lidského vˇedˇen´ı natolik enormn´ı, ˇze je nemyslitelné aby se vˇsechny tyto znalosti dostaly ke vˇsem lidem na naˇs´ı planetˇe. Jiˇz od narozen´ı se vˇsichni uˇc´ıme nov´ ym a nov´ ym vˇecem a k naˇsemu poznáván´ı a objevován´ı okoln´ıho svˇeta nám pomáhaj´ı nejdˇr´ıve rodiˇce a pozdˇeji ˇsirˇs´ı spoleˇcnost. Touto cestou vˇsak nelze dosáhnout vˇsech vˇedomost´ı, které jsou potˇreba pro plnohodnotné zapojen´ı do lidské spoleˇcnosti a veden´ı normáln´ıho ˇzivota. Proto je kaˇzdé d´ıtˇe zaˇrazeno do povinného základn´ıho vzdˇeláván´ı. Zde se mu vˇenuj´ı pedagogové a cel´ y pr˚ ubˇeh studia má jasnˇe dan´ y sled. Jako zdroje vˇedomost´ı jsou pouˇz´ıvány uˇcebnice, znalosti vyuˇcij´ıc´ıch, nauˇcné filmy, v posledn´ı dobˇe i informaˇcn´ı technologie atp. Nabyté znalosti jsou vˇsak kaˇzdému ˇclovˇeku témˇeˇr k niˇcemu, pokud je nedokáˇze patˇriˇcnˇe pouˇz´ıt. K procviˇcen´ı z´ıskan´ ych znalost´ı jsou tedy potˇreba nejr˚ uznˇejˇs´ı u ´lohy, pˇr´ıklady a hˇr´ıˇcky, jejichˇz u ´spˇeˇsné dokonˇcen´ı závis´ı jednak na nabyt´ı patˇriˇcn´ ych dovednost´ı, ale pˇredevˇs´ım na jejich správném a efektivn´ım vyuˇzit´ı. Efektivita uˇcen´ı souvis´ı s inovativn´ımi metodami a formami práce a s vyuˇzit´ım modern´ıch informaˇcn´ıch technologi´ı ve v´ yuce. Veˇskeré znalosti, které byly a doposud stále jsou uloˇzeny ve nejr˚ uznˇejˇs´ı fyzické podobˇe, nejˇcastˇeji pravdˇepodobnˇe formou psan´ ych knih, je tˇreba efektivnˇe ˇs´ıˇrit a poskytnout je tak co nˇejvˇetˇs´ımu poˇctu lid´ı na svˇetˇe. Pokud nebude zajiˇstˇeno pˇredáván´ı tˇechto znalost´ı mladˇs´ım generac´ım, v´ yvoj lidstva a jeho vˇedˇen´ı se zastav´ı. Jelikoˇz vˇedomosti uloˇzené ve fyzické podobˇe (resp. nosiˇce tˇechto vˇedomost´ı) nevyhnutelnˇe podléhaj´ı zkáze, je tˇreba je neustále obnovovat a vym´ yˇslet stále nové a lepˇs´ı zp˚ usoby pro uchován´ı cenn´ ych znalost´ı. Jak bylo zm´ınˇeno v´ yˇse, dneˇsn´ı doba patˇr´ı informaˇcn´ım technologi´ım a ty nab´ızej´ı neoceniteln´ y zp˚ usob, jak informace ukládat, sd´ılet a ˇs´ıˇrit v digitáln´ı podobˇe. Obrovsk´ y v´ yznam má celosvˇetová s´ıt’ Internet, která je oznaˇcována za studnu lidského vˇedˇen´ı“. ” Dostupné technologie, které v´ ypoˇcetn´ı technika pˇrináˇs´ı, umoˇzn ˇuj´ı vytváˇret nepˇreberné mnoˇzstv´ı nejr˚ uznˇejˇs´ıch aplikac´ı. Do oblasti vzdˇeláván´ı si informaˇcn´ı technologie také naˇsly svou cestu. D´ıky celosvˇetové s´ıti Internet máme moˇznost snadno sd´ılet obrovské mnoˇzst´ı informac´ı, které jsou lehce dostupné a relativnˇe snadno dohledatelné. Pro zajiˇstˇen´ı urˇcité efektivnosti pˇri vzdˇeláván´ı pomoc´ı informaˇcn´ıch technologi´ı je nutné potˇrebn´ y obsah nˇejak´ ym zp˚ usobem shlukovat do logick´ ych celk˚ u. A tak, podobnˇe jako jsou psány uˇcebnice, jsou vytváˇreny tzv. e-learningové kurzy. Pod t´ımto pojmem si tedy lze pˇredstavit urˇcitou formu elektronické uˇcebnice, která má za u ´kol provést studenta problematikou v urˇcité oblasti. Tyto kurzy mohou b´ yt autory vytváˇreny pomoc´ı program˚ u typu Content Management System (CMS), mezi jejichˇz hlavn´ı funkce patˇr´ı tvorba a u ´prava dokument˚ u – v tomto pˇr´ıpadˇe stránek kurzu, jejich správa a urˇcen´ı pˇr´ıstupnosti k tˇemto dokument˚ um. Hotov´ y kurz je po jeho vytvoˇren´ı následnˇe pˇrenesen do aplikace typu Learning Management System (LMS), coˇz je systém pro ˇr´ızen´ı a správu v´ yuky

1.2

C´ıl práce

8

(Wikipedia, 2011). Mezi jeho hlavn´ı funkce patˇr´ı evidence a správa ˇza´k˚ u, uˇcitel˚ u, kurz˚ u, test˚ u, správa pˇr´ıstupov´ ych práv k e-learningovému obsahu nebo studijn´ıch plán˚ u. Velmi d˚ uleˇzit´ ym poˇzadavkem na tento systém je zajiˇstˇen´ı snadného zaˇclenˇen´ı kurz˚ u. Toho je doc´ıleno r˚ uzn´ ymi standardn´ımi formáty e-learningového obsahu, jako je napˇr. SCORM. CMS a LMS mohou b´ yt souˇca´st´ı jedné aplikace – pˇr´ıkladem m˚ uˇze b´ yt open source projekt moodle.

1.2

C´ıl pr´ ace

C´ılem práce je navrhnout a implementovat aplikaci, která bude slouˇzit pro generován´ı vybran´ ych interaktivn´ıch e-learningov´ ych u ´loh. Generátor by mˇel poskytovat co nejvˇetˇs´ı variabilitu nastaven´ı funkˇcn´ıch moˇznost´ı pˇri vytváˇren´ı konkrétn´ıch u ´loh. Uˇzivatelé, kteˇr´ı budou do aplikace pˇristupovat, si budou moci jednotlivé vytvoˇrené u ´lohy ukládat, aby se k nim pozdˇeji mohli vracet a upravovat je. Autoˇri jednotliv´ ych u ´loh budou m´ıt moˇznost si v´ yslednou stránku uloˇzit ve formˇe HTML souboru na disk, kter´ y pak mohou poskytnout prográmator˚ um k dokonˇcen´ı, vytvoˇren´ı nebo upraven´ı specifick´ ych poˇzadavk˚ u na funkcionalitu dané u ´lohy. Správná funkˇcnost aplikace bude demostrována na nˇekolika vytvoˇren´ ych ukázkov´ ych komponentách, jejichˇz tematické zamˇeˇren´ı bude souviset s autorov´ ym studiem.

2

ˇ ´ STAV SOUCASN Y

2

9

Souˇ casn´ y stav

Pokud se pod´ıváme na podobu dneˇsn´ıch e-learningov´ ych kurz˚ u zejména z hlediska jejich schopnosti poskytovat interaktivn´ı obsah, kter´ y je schopn´ y uˇzivateli zajistit mnohem pˇr´ıvˇetivˇejˇs´ı záˇzitek jednak ze samotné v´ yuky a vstˇrebáván´ı potˇrebného obsahu, ale i z ovˇeˇrován´ı z´ıskan´ ych znalost´ı pomoc´ı nejr˚ uznˇejˇs´ıch u ´loh, test˚ u nebo kv´ız˚ u, tak zjist´ıme, ˇze vˇetˇsinu kurz˚ u lze podle pouˇzit´ ych technologi´ı rozdˇelit na dva hlavn´ı typy. Prvn´ım jsou interaktivn´ı kurzy, které jsou vytvoˇreny pomoc´ı Flashe. Flash umoˇzn ˇuje vytváˇret vysoce interaktivn´ı a animovan´ y obsah a zahrnuje i podporu pro v´ yvoj e-learningového materiálu. Pouˇzit´ı Flashe má ovˇsem i své negativn´ı stránky, mezi které patˇr´ı napˇr. moˇzné prodlouˇzen´ı doby naˇc´ıtán´ı obsahu, sloˇzitˇejˇs´ı aktualizace atp. Druh´ ym pomysln´ ym proudem jsou e-learningové kurzy vytváˇrené pomoc´ı standardn´ıch technologi´ı pouˇz´ıvan´ ych pro vytváˇren´ı obsahu webov´ ych stránek, kter´ ymi jsou statické HTML stránky a kaskádové styly. Potˇrebné interaktivity je moˇzné následnˇe dosáhnout pouˇzit´ım skriptovac´ıho jazyka JavaScriptu. Typick´ ym pˇr´ıkladem je souˇcasná podoba e-learningov´ ych kurz˚ u na Mendelovˇe univerzitˇe v Brnˇe. Veˇrejná knihovna tˇechto kurz˚ u je dostupná skrze univerzitn´ı informaˇcn´ı systém na adrese http://is.mendelu.cz/eknihovna/?lang=cz. Jednotlivé e-learningové opory maj´ı podobu statických HTML stránek a sv´ ym pojet´ım opravdu pˇripom´ınaj´ı elektronickou uˇcebnici, která vyuˇz´ıvá základn´ıch prostˇredk˚ u pro usnadˇen´ı konzumace obsahu, jako jsou hypertextové odkazy pro snadnˇejˇs´ı navigaci nebo jednoduché testové otázky realizované pomoc´ı formuláˇr˚ u. Obdobnˇe je na tom i e-learningov´ y portál Masarykovy univerzity. Ten nab´ız´ı e-learningové kurzy, které maj´ı také podobu statick´ ych HTML stránek (elektronická kn´ıˇzka) s testov´ ymi u ´lohami zakomponovan´ ymi v podobˇe formuláˇr˚ u. Do nˇekter´ ych kurz˚ u jsou jiˇz zaˇclenˇeny i dalˇs´ı interaktivn´ı prvky v podobˇe animac´ı a multimediáln´ıho obsahu, které jsou ovˇsem vytvoˇreny ve Flashi. Ukázkov´ ym pˇr´ıkladem je kurz Rovinné ˇrezy 1 mnohostˇen˚ u. V tomto kurzu jsou teoretické znalosti prezentovány obyˇcejn´ ym textem, vhodnˇe doplnˇen´ ym o obrázky. Kurz obsahuje i zadán´ı u ´loh k procviˇcen´ı vˇcetnˇe jejich ˇreˇsen´ı (ke stáhnut´ı v PDF). Nˇekteré z u ´loh jsou ovˇsem ˇreˇseny pˇr´ımo v kurzu a toto ˇreˇsen´ı je studentovi prezentováno flashovou animac´ı, kterou lze pohodlnˇe krokovat. V zahraniˇc´ı je celkov´ y stav e-learningu prakticky podobn´ y. Pokud se pod´ıváme napˇr. na zahraniˇcn´ı v´ yzkumnou univerzitu MIT http://ocw.mit.edu/courses/, zjist´ıme, ˇze veˇskeré kurzy jsou rozdˇeleny do nejr˚ uznˇejˇs´ıch kategori´ı a kaˇzd´ y konkrétn´ı kurz je nˇejak´ ym zp˚ usobem oznaˇcen, pˇriˇcemˇz kaˇzdé oznaˇcen´ı signalizuje pˇr´ıtomnost urˇcitého druhu materiálu. Drtivá vˇetˇsina tˇechto materiál˚ u je ovˇsem ke staˇzen´ı pouze v podobˇe PDF souboru nebo je k dispozici v multimediáln´ı formˇe (obrázky, video). Interaktivn´ı prvky zde bohuˇzel chyb´ı. Co se t´ yˇce stavu programov´ ych generátor˚ u interaktivn´ıch prvk˚ u pro vzdˇelávac´ı obsah e-learningu, v souˇcasné dobˇe jiˇz existuj´ı nástroje pro vytváˇren´ı e-learningov´ ych 1

Dostupné na http://is.muni.cz/elportal/estud/pedf/js09/mnohosteny/web/index.html.

2.1

E-learningové kv´ızy

10

u ´loh jako takov´ ych. Pˇr´ıkladem m˚ uˇze b´ yt jiˇz dˇr´ıve zm´ınˇen´ y systém moodle, kter´ y kromˇe správy v´ yukového obsahu umoˇzn ˇuje i vytváˇren´ı e-learningov´ ych kv´ız˚ u. Jejich modifikovatelnost z hlediska funkˇcn´ıch moˇznost´ı tˇechto kv´ız˚ u ovˇsem nen´ı nijak pestrá. Existuj´ı i komerˇcn´ı ˇreˇsen´ı, ale jejich moˇznosti nebylo moˇzné z finanˇcn´ıho hlediska otestovat.

2.1

E-learningov´ e kv´ızy

V jednotliv´ ych podkapitolách budou rozebrány pˇredpˇripravené e-learningové kv´ızy, které byly hlavn´ım podkladem pro zpracován´ı této práce. Vˇsechny u ´lohy byly dodány vedouc´ım práce, kter´ y tyto interaktivn´ı kv´ızy vytvoˇril v rámci svého pˇr´ıspˇevku Interaktivn´ı eLearningový obsah na konferenci Informatika (Jedliˇcka, 2008). 2.1.1

Kˇr´ıˇ zovka

Jak název kv´ızu napov´ıdá, jedná se o nejjednoduˇsˇs´ı typ kˇr´ıˇzovky, ve které jsou doplˇ novaná slova um´ıstˇena pod sebou do ˇra´dk˚ u a zarovnána tak, aby p´ısmena jedˇ siteli je k dispozici notliv´ ych slov v urˇceném sloupci tvoˇrila v´ yslednou tajenku. Reˇ systém nápovˇedy, kter´ y ve zvoleném ˇra´dku kˇr´ıˇzovky napov´ı následuj´ıc´ı p´ısmeno. Samotné vyplˇ nován´ı kˇr´ıˇzovky prob´ıhá vˇzdy zvolen´ım urˇcitého ˇra´dku v kˇr´ıˇzovce pomoc´ı myˇsi a následn´ ym psan´ım odpovˇedi na klávesnici, kdy jsou jednotlivá p´ısmena automaticky doplˇ nována do kˇr´ıˇzovky. V pˇr´ıpadˇe pˇreklepu je moˇzné vepsaná p´ısmena mazat pomoc´ı klavésy backspace nebo jej´ı kombinace s klávesou CTRL (závis´ı na pouˇzitém prohl´ıˇzeˇci). Technick´ e ˇreˇsen´ı ´ e prvn´ı je zobStránka s kv´ızem je rozdˇelena na nˇekolik pomysln´ ych ˇcást´ı. Uplnˇ razen postup, jak´ ym lze danou u ´lohu ˇreˇsit a ovládat. V HTML kódu je zapsán tagem pro odstavec se tˇr´ıdou blok. Následuje obalovac´ı tag div, kter´ y obsahuje tabulku pˇredstavuj´ıc´ı samotnou kˇr´ıˇzovku. Jeden ˇra´dek tabulky pˇredstavuje jeden ˇra´dek kˇr´ıˇzovky, pˇriˇcemˇz kaˇzd´ y ˇrádek je oznaˇcen identifikátorem, kter´ y urˇcuje, o kolikát´ y ˇra´dek kˇr´ıˇzovky se jedná. Ten slouˇz´ı ke snadnému vyhledáván´ı element˚ u v DOM stromu. Buˇ nky v kaˇzdém ˇra´dku tabulky pak pˇredstavuj´ı jednotlivá pol´ıˇcka pro zápis p´ısmen. Ne kaˇzdá buˇ nka je ovˇsem urˇcena pro zápis p´ısmen, protoˇze vyplˇ novaná slova nemus´ı m´ıt (a zpravidla nemaj´ı) vˇzdy stejnou délku. Rozliˇsen´ı mezi buˇ nkou vyplˇ novanou a nevyplˇ novanou je zajiˇstˇeno r˚ uzn´ ymi barvami. Buˇ nky, do kter´ ych jsou vyplˇ nována p´ısmena, jsou nav´ıc opatˇreny identifikátorem ve tvaru radekXbY, kde X pˇredstavuje ˇc´ıslo ˇrádku, a Y ˇc´ıslo p´ısmene v daném ˇrádku. Pod kˇr´ıˇzovkou je um´ıstˇen seznam legend. V HTML kódu je realizován ˇc´ıslovan´ ym seznamem a kaˇzdá poloˇzka seznamu tak pˇr´ısluˇs´ı ke stejnˇe oˇc´ıslovanému ˇrádku kˇr´ıˇzovky. Poloˇzka obsahuje text samotné legendy, kter´ y má napovˇedˇet znˇen´ı slova doplˇ novaného do kˇr´ıˇzovky. Za textem legendy se pak nacház´ı ˇra´dkov´ y element span, kter´ y slouˇz´ı k zobrazen´ı nápovˇedy pro dan´ y ˇra´dek. Za seznamem legend je zobrazena hlavn´ı legenda celé kˇr´ıˇzovky,

2.1


11

pˇriˇcemˇz v samotném textu legendy je m´ısto znˇen´ı tajenky zobrazen odpov´ıdaj´ıc´ı poˇcet teˇcek. JavaScript, obstarávaj´ıc´ı funkcionalitu celé u ´lohy, je také rozdˇelen na celkem tˇri ˇcásti. V prvn´ı se deklaruj´ı potˇrebné promˇenné. Patˇr´ı sem napˇr. velikosti bunˇek kˇr´ıˇzovky a p´ısma, zbarven´ı bunˇek, nebo texty alertov´ ych hláˇsek. Deklaruj´ı se i promˇenné, obsahuj´ıc´ı verzálkami zapsané odpovˇedi pro jednotlivé ˇra´dky. D˚ uleˇzité je, ˇze u ˇrádk˚ u, ve kter´ ych odpovˇed’ nezaˇc´ıná hned v prvn´ı buˇ nce, je nutné zachovat odpov´ıdaj´ıc´ı poˇcet mezer. Zaˇc´ıná-li tedy odpovˇed na ˇrádku aˇz v tˇret´ı buˇ nce, mus´ı b´ yt v promˇenné s odpovˇed´ı uloˇzen ˇretˇezec o dvou mezerách a samotné odpovˇedi (__ODPOVˇ Eˇ D). V druhé ˇca´sti JS jsou deklarovány potˇrebné funkce a dalˇs´ı promˇenné. Zjiˇst’uje se zde celková ˇs´ıˇrka kˇr´ıˇzovky, která odpov´ıdá ˇs´ıˇrce nejdelˇs´ıho slova. V cyklu se tedy procház´ı vˇsechny odpovˇedi a hledá se ta nejdelˇs´ı. V tom samém cyklu se jeˇstˇe nastavuj´ı nˇekteré dalˇs´ı promˇenné, resp. ukládaj´ı se do jiˇz vytvoˇren´ ym pol´ı. Ve tˇret´ı ˇca´sti se uˇz nacház´ı samotné vytvoˇren´ı tabulky pˇredstavuj´ıc´ı kˇr´ıˇzovku a jej´ı vloˇzen´ı do stránky. Z tohoto plyne, ˇze i samotné zobrazen´ı kv´ızu je zcela závislé na JavaScriptu a kˇr´ıˇzovka se bez nˇej nezobraz´ı. Samotné vytvoˇren´ı tabulky je pomˇernˇe jednoduché. Opˇet se v cyklu procház´ı vˇsechny odpovˇedi. Ze vˇseho nejdˇr´ıv se dopln´ı na konec odpovˇed´ı odpov´ıdaj´ıc´ı poˇcet mezer, aby vˇsechny odpovˇedi mˇely stejnou délku, tedy dˇr´ıve zjiˇstˇenou ˇs´ıˇrku kˇr´ıˇzovky. Pak se jiˇz vytváˇr´ı a vkládaj´ı elementy ˇrádku tabulky a prvn´ı buˇ nka s ˇc´ıslem ˇra´dku. V dalˇs´ım cyklu se vytváˇr´ı uˇz samotné buˇ nky pro jednotlivá p´ısmena a buˇ nky doplˇ nuj´ıc´ı ˇs´ıˇrku ˇra´dku. Podle toho o jakou buˇ nku jde, se nastavuj´ı potˇrebné vlastnosti jako barva pozad´ı nebo ˇrez p´ısma (tuˇcn´ y pro sloupec tajenky). Po vytvoˇren´ı celého ˇra´dku se naváˇze odposloucháván´ı události, které po kliknut´ı na ˇra´dek zavolá metodu pro jeho oznaˇcen´ı. Poté se uˇz jen ˇrádek vloˇz´ı do stránky. Následuje navázán´ı odposlechu události stisknut´ı tlaˇc´ıtka na klávesnici. Odposlouchává se pro celé okno prohl´ıˇzeˇce. Pˇri kaˇzdém stisknut´ı se volá metoda klavesnice, která obstarává následné vkládán´ı p´ısmen ´ e jako posledn´ı vˇec se provád´ı detekce do odpov´ıdaj´ıc´ıch pol´ıˇcek v kˇr´ıˇzovce. Uplnˇ prohl´ıˇzeˇce a nastaven´ı textu alertové hláˇsky. Je to z d˚ uvodu mazán´ı ˇspatnˇe vyplnˇen´ ych p´ısmen pomoc´ı klávesy backspace. V nˇekter´ ych prohl´ıˇzeˇc´ıch docház´ı pˇri jej´ım stisknut´ı k pˇrechodu na pˇredchoz´ı stránku. Pro tyto pˇr´ıpady je tˇreba pouˇz´ıt klávesovou kombinaci CTRL + backspace. Podle pouˇzitého prohl´ıˇzeˇce se tedy nastav´ı správné znˇen´ı alertu. 2.1.2

Tahac´ı pˇriˇrazov´ an´ı

V tomto e-learningovém kv´ızu má ˇreˇsitel za u ´kol pˇriˇradit jednotlivé odpovˇedi k logicky odpov´ıdaj´ıc´ım kl´ıˇc˚ um v tabulce, pˇriˇcemˇz ke kaˇzdému kl´ıˇci náleˇz´ı vˇzdy jedna odpovˇed’. Pˇriˇrazován´ı prob´ıhá kliknut´ım a drˇzen´ım levého tlaˇc´ıtka myˇsi na odpovˇed’ a jej´ım následn´ ym pˇretaˇzen´ım pohybem myˇsi nad oblast vedle kl´ıˇce, kde se odpovˇed’ puˇstˇen´ım levého tlaˇc´ıtka upust´ı. Pˇriˇrazován´ı je ihned vyhodnocováno a v pˇr´ıpadˇe správného um´ıstˇen´ı je odpovˇed’ zanechána na m´ıstˇe. V opaˇcném pˇr´ıpadˇe je vrácena

2.1


12

ˇ siteli je poˇc´ıtána zpˇet do seznamu, odkud m˚ uˇze b´ yt opˇet um´ıstˇena k jinému kl´ıˇci. Reˇ celková u ´spˇeˇsnost a po správném pˇriˇrazen´ı vˇsech odpovˇed´ı je jeho u ´spˇeˇsnost zobrazena. Technick´ e ˇreˇsen´ı Stránka s kv´ızem zobrazuje nejdˇr´ıve zadán´ı samotného u ´kolu. Jeho zobrazen´ı je realizováno tagem pro odstavec s pˇriˇrazenou tˇr´ıdou u ´kol. Hned pod zadán´ım se nacház´ı nesetˇr´ıdˇen´ y seznam, jehoˇz poloˇzkami jsou jednotlivé odpovˇedi. Kaˇzdá poloˇzka má nastaven´ y identifikátor, kter´ y urˇcuje, k jakému kl´ıˇci odpovˇed’ správnˇe patˇr´ı. Toto urˇcen´ı má tvar itXem, kde X je ˇc´ıslo správného kl´ıˇce. Poloˇzky obsahuj´ı obalovac´ı ˇra´dkov´ y element span, kter´ y má opˇet nastaven´ y stejn´ y identifikátor jako poloˇzka seznamu, jenom bez suffixu em. V tomto elementu je jiˇz um´ıstˇen samotn´ y text odpovˇedi. Cel´ y seznam je jeˇstˇe um´ıstˇen v obalovac´ım blokovém elementu div s identifikátorem skryt, protoˇze po splnˇen´ı u ´lohy se cel´ y seznam skryje. Pod seznamem je jiˇz um´ıstˇena tabulka o dvou sloupc´ıch, prvn´ı obsahuje jednotlivé kl´ıˇce a druh´ y pˇredstavuje oblast, kam se pˇri pˇretahován´ı um´ıst’uj´ı odpovˇedi. Buˇ nky pro odpovˇedi maj´ı nastaven´ y identifikátor ve tvaru bunka_X, kde X je ˇc´ıslo buˇ nky. Tento identifikátor se ve vyhodnocovac´ı metodˇe poté porovnává se identifikátorem pˇriˇrazené odpovˇedi. JavaScript je opˇet rozdˇelen na nˇekolik ˇcást´ı. Hned prvn´ı ˇca´st je napsána v extern´ım JS souboru. Ten obsahuje vˇsechny potˇrebné funkce, které zajiˇstuj´ı rozpohy” bován´ı“ pˇretahovac´ıch odpovˇed´ı. Tento extern´ı soubor se pouˇz´ıvá i v dalˇs´ıch kv´ızech, kde se opˇet pˇriˇrazuje pˇretahován´ım pomoc´ı myˇsi. Deklarac´ı vˇsech funkc´ı, které realizuj´ı pˇretahovatelnost element˚ u, pˇredcház´ı opˇet zjiˇstˇen´ı prohl´ıˇzeˇce. Tentokrát je to z d˚ uvodu zobrazen´ı alertové hláˇsky, která informuje ˇreˇsitele o celkové spustitelnosti kv´ızu v jeho prohl´ıˇzeˇci. V kódu jsou vyuˇz´ıvány metody standardu W3C DOM a pokud je prohl´ıˇzeˇc nepodporuje, zobraz´ı se chybová hláˇska informuj´ıc´ı o tom, ˇze dokument nelze správnˇe zobrazit. V druhé ˇcásti je deklarováno nˇekolik promˇenn´ ych jako poˇcet pokus˚ u a barvy po’ zad´ı bunˇek tabulky. Následuje implementace nˇekolika funkc´ı zajiˇst uj´ıc´ıch potˇrebnou funkcionalitu pro tento konkrétn´ı kv´ız, napˇr. metody pro zruˇsen´ı pˇretahovatelnosti odpovˇedi po jejich správném um´ıstˇen´ı, metoda zv´ yrazˇ nuj´ıc´ı oblast, nad kterou se zrovna nacház´ı pˇretahovaná odpovˇed anebo vyhodnocovac´ı metoda. Jej´ı ˇreˇsen´ı nen´ı nijak komplikované. Nejdˇr´ıve se vyhledá zvolen´ y c´ıl, tj. oblast, nad kterou ’ byla odpovˇed upuˇstˇena. Pokud zvolen´ y c´ıl existuje, pˇristoup´ı se k vyhodnocen´ı správnosti um´ıstˇen´ı a nav´ yˇs´ı se poˇcitadlo pokus˚ u. Pokud bylo um´ıstˇen´ı správné, odpovˇed’ se vloˇz´ı do tabulky vedle kl´ıˇce a skryje se poloˇzka v seznamu odpovˇed´ı. Zároveˇ n se nav´ yˇs´ı poˇcitadlo správn´ ych um´ıstˇen´ı. V opaˇcném pˇr´ıpadˇe se zobraz´ı zpráva o pˇriˇrazen´ı ke ˇspatnému kl´ıˇci. Dále se ve vyhodnocovac´ı metodˇe provád´ı pˇrepoˇc´ıtáván´ı a nastavován´ı správn´ ych souˇradnic pˇri pˇretahován´ı odpovˇedi v oknˇe prohl´ıˇzeˇce. Po správném um´ıstˇen´ı posledn´ı odpovˇedi se zobraz´ı zpráva s celkovou u ´spˇeˇsnost´ı pˇri plnˇen´ı kv´ızu a skryje se seznam s odpovˇed’mi.

2.1


13

V posledn´ı ˇcásti jsou pouze nastavovány promˇenné c´ıl˚ u, které jsou vloˇzeny do pole c´ıl˚ u, nastaven´ı pole ˇreˇsen´ı a rozpohybován´ı“ odpovˇed´ı. Jako c´ıle jsou ukládány ” elementy DOM stromu pˇredstavuj´ıc´ı buˇ nky druhého sloupce tabulky s kl´ıˇci. Jako prvky pole ˇreˇsen´ı jsou ukládány nastavené c´ıle, které jsou v poli um´ıstˇeny pod kl´ıˇcem, jenˇz odpov´ıdá identifikátoru uvedeného u odpovˇedi (reseni["itX"] = cil_X). 2.1.3

Pˇretahov´ an´ı slov do textu

Pˇri plnˇen´ı tohoto kv´ızu má ˇreˇsitel za u ´kol doplˇ novat do souvislého textu chybˇej´ıc´ı slova. Doplˇ nován´ı je realizováno pˇretahován´ım chybˇej´ıc´ıch slov ze seznamu na prázdná m´ısta v textu. Po um´ıstˇen´ı slova do textu docház´ı ihned k vyhodnocen´ı správnosti um´ıstˇen´ı. Pˇri správném um´ıstˇen´ı je slovo vloˇzeno do textu a odebráno ze seznamu. V opaˇcném pˇr´ıpadˇe je vráceno do seznamu, odkud m˚ uˇze b´ yt znova ˇ siteli je poˇc´ıtána celková u um´ıstˇeno na jiné m´ısto v textu. Reˇ ´spˇeˇsnost pˇri pˇriˇrazován´ı slov a po správném um´ıstˇen´ı posledn´ıho slova je u ´spˇeˇsnost zobrazena. Technick´ e ˇreˇsen´ı Na stránce s kv´ızem je zobrazeno zadán´ı u ´lohy stejnˇe jako v pˇredchoz´ıch pˇr´ıpadech pomoc´ı tagu odstavce s pˇriˇrazenou tˇr´ıdou ukol. Za zadán´ım následuje souvisl´ y text s prázdn´ ymi m´ısty, do kter´ ych se umist’uj´ı chybˇej´ıc´ı slova. Cel´ y text je obalen tagem pro odstavec se tˇr´ıdou blok. Prázdná m´ısta pro chybˇej´ıc´ı slova jsou v textu vyznaˇcena ˇra´dkov´ ym obalovac´ım elementem span, kter´ y pro názornost obsahuje nˇekolik teˇcek, které ale sv´ ym poˇctem neodpov´ıdaj´ı délce slova patˇr´ıc´ıho na dané m´ısto v textu. Nav´ıc maj´ı pˇriˇrazen´ y identifikátor span_X, kde X je poˇradové ˇc´ıslo prázdného m´ısta. Pro lepˇs´ı viditelnost má m´ısto jeˇstˇe nastavenou barvu pozad´ı. Za textem se nacház´ı seznam chybˇej´ıc´ıch slov. Tento seznam nen´ı v HTML zapsán pomoc´ı elementu pro seznam, ale je jen obalen v blokovém elementu div se tˇr´ıdou skryt. Slova v seznamu jsou zapsána v ˇrádkovém elementu span, kter´ y má nastaven´ y identifikátor ve tvaru itemPresun_X, kde X je poˇradové ˇc´ıslo prázdného m´ısta v textu, do kterého slovo patˇr´ı. Jako prvn´ı se v JavaScriptové ˇca´sti naˇc´ıtá dˇr´ıve zm´ınˇen´ y extern´ı soubor obsa’ huj´ıc´ı funkce, které zajiˇst uj´ı pˇretahovatelnost slov. Následuj´ı opˇet deklarace a nastaven´ı nˇekter´ ych promˇenn´ ych jako poˇcet pokus˚ u a barvy pozad´ı. Ani následuj´ıc´ı funkce se pˇr´ıliˇs neliˇs´ı od pˇredchoz´ıho kv´ızu. Ve funkci pro vyhodnocen´ı správnosti um´ıstˇen´ı slova jsou pouze malé odliˇsnosti, a to v nastaven´ı r˚ uzn´ ych vlastnost´ı. Ani v posledn´ı ˇcásti se ˇreˇsen´ı neliˇs´ı, znovu jsou nastavovány jednotlivé c´ıle pro um´ıstˇen´ı slova, které jsou um´ıstˇeny do pole c´ıl˚ u a do pole ˇreˇsen´ı, kde kl´ıˇc opˇet odpov´ıdá identifikátoru nastavenému u jednotliv´ ych slov, která jsou znovu pˇr´ısluˇsnou metodou rozpohybována“. ”

2.1


2.1.4

14

Tahac´ı tˇr´ıdˇ en´ı

´ Ukolem v tˇechto kv´ızech je roztˇr´ıdˇen´ı jednotliv´ ych odpovˇed´ı k logicky pˇr´ısluˇsn´ ym kl´ıˇc˚ um, pˇriˇcemˇz ke kl´ıˇc˚ um lze pˇriˇradit nˇekolik odpovˇed´ı. Tento typ kv´ızu existuje ve v´ıce variantách, které se od sebe v nˇekter´ ych aspektech liˇs´ı. S okamˇ zit´ ym vyhodnocen´ım U kv´ızu s okamˇzit´ ym vyhodnocován´ım jsou skupiny, do kter´ ych se pˇriˇrazuj´ı jednotlivé odpovˇedi, nav´ıc dále rozdˇeleny. Pˇriˇrazován´ı odpovˇed´ı tak prob´ıhá celkem ve dvou osách. Horizontálnˇe jsou odpovˇedi pˇriˇrazovány k logicky odpov´ıdaj´ıc´ım kl´ıˇc˚ um a pak také vertikálnˇe do dalˇs´ıch skupin. Technick´ e ˇreˇsen´ı Na stránce s kv´ızem je nejdˇr´ıve zobrazeno v odstavcovém tagu s tˇr´ıdou ukol zadán´ı u ´lohy. Za zadán´ım následuje nesetˇr´ıdˇen´ y seznam pˇriˇrazovan´ ych odpovˇed´ı. HTML struktura je stejná jako u kv´ızu tahac´ı pˇr´ıˇrazován´ı, tedy poloˇzka seznamu má nastaven identifikátor ve tvaru itXem. Ta pak obsahuje span se stejn´ ym identifátorem, pouze bez suffixu em, ve kterém se nacház´ı samotn´ y text odpovˇedi. Pod seznamem odpovˇed´ı je um´ıstˇena tabulka, do které se pˇriˇrazuj´ı jednotlivé odpovˇedi. Vˇsechny kl´ıˇce se nacház´ı v prvn´ım sloupci a v prvn´ım ˇrádku tabulky. Kaˇzdá z bunˇek, do kter´ ych lze um´ıstit odpovˇed’, má nastaven idnetifikátor ve tvaru bunka_X. JavaScriptové ˇreˇsen´ı je zcela totoˇzné s kv´ızem tahac´ ı pˇ riˇ razov´ an´ ı. Jedin´ y rozd´ıl je v posledn´ı ˇcásti, kdy se do pole ˇreˇsen´ı na r˚ uzné kl´ıˇce ukládá stejn´ y c´ıl, protoˇze u tohoto kv´ızu je moˇzné do stejné buˇ nky v tabulce um´ıstit v´ıce odpovˇed´ı. ˇ siteli je stejnˇe jako v pˇredchoz´ıch pˇr´ıpadech poˇc´ıtáná u Reˇ ´spˇeˇsnost pˇri pˇriˇrazován´ı odpovˇed´ı ke kl´ıˇc˚ um, která je po správném um´ıstˇen´ı posledn´ı odpovˇedi zobrazena. S vyhodnocen´ım na z´ avˇ er Pˇri ˇreˇsen´ı tohoto typu kv´ızu je ˇreˇsitel postaven pˇred u ´kol pˇriˇrazen´ı vˇsech dostupn´ ych odpovˇed´ı k pˇr´ısluˇsn´ ym kl´ıˇc˚ um. V ukázkovém pˇr´ıkladˇe kl´ıˇce pˇredstavovaly dvˇe skupiny, do kter´ ych mˇelo b´ yt roztˇr´ıdˇeno vˇetˇs´ı mnoˇzstv´ı odpovˇed´ı. Vyhodnocen´ı ˇreˇsen´ı lze spustit aˇz po pˇriˇrazen´ı vˇsech odpovˇed´ı. Pokud se ˇreˇsitel pokus´ı u ´lohu vyhodnotit dˇr´ıve, neˇz vˇsechny odpovˇedi roztˇr´ıd´ı, je na tento nedostatek upozornˇen odpov´ıdaj´ıc´ı zprávou. Pokud jsou vˇsechny odpovˇedi um´ıstˇeny, probˇehne vyhodnocen´ı jejich pˇriˇrazen´ı. V´ ysledky se zobraz´ı ve formˇe zprávy informuj´ıc´ı o tom, kolik odpovˇed´ı bylo pˇriˇrazeno správnˇe a pod tabulkou se zobraz´ı druhá tabulka se správn´ ym ˇreˇsen´ım. Technick´ e ˇreˇsen´ı Na zaˇcátku stránky s kv´ızem je se nacház´ı odstavcov´ y tag se tˇr´ıdou ukol obsahuj´ıc´ı textové zadán´ı u ´kolu. Za n´ım následuje seznam pˇriˇrazovan´ ych odpovˇed´ı,

2.1


15

které jsou seˇrazeny abecednˇe. Znovu jsou poloˇzky seznamu opatˇreny identifikátory itXem a obsahem poloˇzek je ˇra´dkov´ y element span se stejn´ ym identifikátorem bez suffixu em, kter´ y uˇz obsahuje text odpovˇedi. Pod seznamem se nacház´ı tabulka, která je vertikálnˇe rozdˇelena kl´ıˇci, ke kter´ ym jsou pˇriˇrazovány odpovˇedi. Ty jsou tedy umist’ovány do druhého ˇra´dku tabulky, zat´ımco v prvn´ım ˇra´dku jsou uvedeny kl´ıˇce. Pˇriˇrazen´ı odpovˇedi lze pˇred spuˇstˇen´ım vyhodnocen´ı kdykoliv zmˇenit. Tlaˇc´ıtko, kter´ ym m˚ uˇze uˇzivatel spustit vyhodnocen´ı u ´lohy, je um´ıstˇeno hned pod tabulkou. Na konci stránky je pak vloˇzena totoˇzná tabulka, která ovˇsem obsahuje správné ˇreˇsen´ı. Tato je pˇred ˇreˇsitelem skryta pomoc´ı vlastnosti display: none a je mu zobrazena teprve po vyhodnocen´ı u ´lohy. Tlaˇc´ıtko pro vyhodnocen´ı se skryje. Obsluˇzn´ y JavaScript se opˇet pˇr´ıliˇs neliˇs´ı. Pro potˇreby tohoto kv´ızu jsou nav´ıc implementovány nˇekteré dodateˇcné funkce pro deaktivován´ı vˇsech poloˇzek seznamu, zjiˇstˇen´ı poˇctu správnˇe um´ıstˇen´ ych odpovˇed´ı, funkci kontroluj´ıc´ı, zda jsou vˇsechny odpovˇedi um´ıstˇeny, nebo funkce pro pˇridáván´ı a odeb´ırán´ı element˚ u, které jsou pouˇzity pˇri umist’ován´ı odpovˇed´ı do tabulky a jejich odeb´ırán´ı v seznamu. Ve funkci, která se spouˇst´ı pˇri umist’ován´ı odpovˇedi, se vyhodnocuje, zda byla odpovˇed’ um´ıstˇena do tabulky, a do které z bunˇek byla um´ıstˇena. Pokud byla pˇriˇrazena do buˇ nky, uloˇz´ı se c´ıl, tj. buˇ nka tabulky, do pole umisteni pod kl´ıˇcem, kter´ y je totoˇzn´ y s identifikátorem pˇriˇrazené odpovˇedi. Pˇri vyhodnocován´ı ˇreˇsen´ı celé u ´lohy se pak porovnáváj´ı pole reseni a pole umisteni. Pokud se pod stejn´ ym kl´ıˇcem nacház´ı shodná buˇ nka, je ’ odpovˇed um´ıstˇena správnˇe a nav´ yˇs´ı se tak poˇcitadlo správn´ ych odpovˇed´ı. S okamˇ zit´ ym spr´ avn´ ym pˇriˇrazen´ım Pˇri plnˇen´ı tohoto kv´ızu mus´ı ˇreˇsitel pˇriˇrazovat hesla k jednotliv´ ym kl´ıˇc˚ um. Rozd´ıl oproti pˇredchoz´ımu typu u ´lohy spoˇc´ıvá ve vyhodnocován´ı. Kontrola správného um´ıstˇen´ı odpovˇed´ı je provádˇena ihned a pokud nen´ı pˇriˇrazena správnˇe, je ihned um´ıstˇena do správné skupiny. U nˇekter´ ych hesel existuje moˇznost zobrazen´ı nápovˇedy. Po dokonˇcen´ı u ´lohy je ˇreˇsiteli zobrazena jeho u ´spˇeˇsnost pˇri pˇriˇrazován´ı jednotliv´ ych hesel a na konci stránky je zobrazen text tematicky doplˇ nuj´ıc´ı problematiku, která se v rámci u ´lohy procviˇcovala. Hesla lze do dané skupiny pˇriˇradit jejich upuˇstˇen´ım na obrázek u kl´ıˇce. Pokud se heslo pˇri pˇretahován´ı nacház´ı nad obrázkem, je tento pro vˇetˇs´ı názornost ve stránce vymˇenˇen za jin´ y (stejn´ y obrázek s negativn´ımi barvami). Technick´ e ˇreˇsen´ı Na stránce s kv´ızem se znovu nacház´ı stejnˇe realizované zadán´ı u ´lohy. Pod n´ım je um´ıstˇena tabulka, která je vertikálnˇe rozdˇelena dvˇema kl´ıˇci, u kter´ ych jsou nav´ıc um´ıstˇeny ilustrativn´ı obrázky. Pod kl´ıˇci jsou v druhém ˇrádku tabulky buˇ nky, do kter´ ych jsou um´ıst’ována jednotlivá hesla. Tyto buˇ nky maj´ı nastaven indentifikátor i2_bunka_X_texty, buˇ nky s kl´ıˇci identifikátor i2_bunka_X a obrázek i2_bunka_X_obr. Pod tabulkou následuje nesetˇr´ıdˇen´ y seznam hesel, jehoˇz poloˇzky obsahuj´ı ˇrádkov´ y element span s identifikátorem i2_X, jehoˇz obsahem je text hesla.

2.1


16

U hesel s nápovˇedou následuje za textem dalˇs´ı span, kter´ y po kliknut´ı na nˇej zobraz´ı nápovˇedu. Za seznamem následuje skryt´ y text, kter´ y se zobraz´ı po dokonˇcen´ı u ´lohy. Na u ´plném konci stránky jsou skrytˇe vloˇzeny obrázky s negativn´ımi barvami. D˚ uvodem je jejich pˇrednaˇcten´ı. Kdyby se do stránky vloˇzily teprve v momentu, kdy se maj´ı poprvé zobrazit, jejich zobrazen´ı by nebylo okamˇzité, ale bylo by zpoˇzdˇené o ˇcas jejich naˇcten´ı. V JavaScriptové ˇcásti lze naj´ıt opˇet nˇekolik specifick´ ych odliˇsnost´ı pro tento konkrétn´ı typ kv´ızu. Jsou zde deklarovány speciáln´ı promˇenné, jako pole uchováváj´ıc´ı cesty k pouˇzit´ ym obrázk˚ um a pole obsahuj´ıc´ı nápovˇedy pro daná hesla, text nápovˇedy je uchováván pod kl´ıˇcem, kter´ y je shodn´ y s identifikátorem uveden´ ym u hesla.

3

´ ı METODIKA ZPRACOVAN´

3

17

Metodika zpracov´ an´ı

Pro vytvoˇren´ı webové aplikace generátoru interaktivn´ıch komponent e-learningov´ ych kurz˚ u je tˇreba nejprve nastudovat technické ˇreˇsen´ı tˇechto u ´loh, na jehoˇz základˇe mohou b´ yt následnˇe vybrány vhodné technologie pro implementaci samotné aplikace, vytvoˇren jej´ı návrh a následnˇe provedena implementace.

3.1

Technologie pro implementaci

Pˇri tvorbˇe e-learningov´ ych komponent, které jsou podkladem pro tuto práci, byl kladen d˚ uraz na minimum nárok˚ u na softwarové vybaven´ı poˇc´ıtaˇce potˇrebné ke spuˇstˇen´ı jednotliv´ ych kv´ız˚ u. Proto byly zvoleny takové technologie, které jsou osvˇedˇcené, celosvˇetovˇe dostupné a rozˇs´ıˇrené. V´ ybˇer technologi´ı pro implementaci aplikace, která bude na základˇe uˇzivatelsk´ ych vstup˚ u a nastaven´ı generovat nové kv´ızy se zadan´ ym obsahem, by mˇel v tˇechto technologi´ıch dále pokraˇcovat, pˇr´ıpadnˇe poskytnout adekvátn´ı alternativu, která by poskytla nové moˇznosti bez v´ yrazného nár˚ ustu poˇzadavk˚ u na programové vybaven´ı potˇrebné k provozován´ı jak aplikace, tak i samotn´ ych e-learningov´ ych komponent. Pˇri implementaci samotné aplikace generátoru e-learningov´ ych kv´ız˚ u je tˇreba klást d˚ uraz na pouˇzit´ı volnˇe dostupn´ ych technologi´ı, coˇz bylo jedn´ım z hlavn´ıch pˇredpoklad˚ u pˇri sestavován´ı práce. Byly tedy vybrány technologie pouˇzité jednak uˇz pˇri samotné realizaci dodan´ ych e-learningov´ ych komponent, jednak technologie slouˇz´ıc´ı pro implementaci samotného generátoru. 3.1.1

DHTML

Oznaˇcen´ı DHTML, nebo také Dynamic HTML, je pojem zastˇreˇsuj´ıc´ı skupinu technologi´ı, které spoleˇcnˇe slouˇz´ı ke tvorbˇe interaktivn´ıch internetov´ ych stránek. Tyto stránky jsou ˇcasto obohaceny o nejr˚ uznˇejˇs´ı efekty, animace, automatické skr´ yván´ı a zobrazován´ı dalˇs´ıho obsahu, aktualizaci stránek nebo zpracován´ı uˇzivatelsk´ ych vstup˚ u z formuláˇre bez toho, aby se uˇzivateli stránka aktualizovala a celá znovu naˇc´ıtala. Tˇechto na statick´ ych stránkách tˇeˇzko dosaˇziteln´ ych vlastnost´ı je doc´ıleno kombinac´ı a vzájemnou spoluprac´ı technologi´ı HTML, CSS, JavaScriptu a tzv. DOMu. D˚ uleˇzité je rozliˇsen´ı dynamick´ ych stránek implementovan´ ych zm´ınˇen´ ymi technologiemi od stránek, které pro sv˚ uj bˇeh pouˇz´ıvaj´ı technologie Flash nebo Java. Funkˇcnˇe jsou si stránky velice podobné a uˇzivatel tak nemus´ı na prvn´ı pohled poznat, jak´ ym zp˚ usobem jsou stránky realizovány. Rozhodnˇe ovˇsem nelze mezi tyto dva pˇr´ıstupy klást pomyslné rovn´ıtko a povaˇzovat je za totoˇzné. HTML Znaˇckovac´ı jazyk HTML (HyperText Markup Language) slouˇz´ı k tvorbˇe struktury internetov´ ych stránek v systému World Wide Web. Jedná se o mezinárodnˇe uznávan´ y standard, kter´ y je udrˇzován W3C (World Wide Web Consortium).

3.1


18

Souˇcasná verze je HTML 4.01. Tento standard je ovˇsem jiˇz sv´ ym zp˚ usobem pˇrekonan´ y a v dneˇsn´ıch dnech se jiˇz nepouˇz´ıvá. Jeho velikou nev´ yhodou je velmi volná specifikace, která tak dává vysokou volnost pˇri psan´ı HTML dokument˚ u. Uved’me pár pˇr´ıklad˚ u za vˇsechny, napˇr. nˇekteré poˇca´teˇcn´ı a koncové znaˇcky jsou nˇekdy nepovinné, hodnoty atribut˚ u nemus´ı b´ yt uvádˇeny vˇzdy v uvozovkách. Toto pˇrináˇs´ı velmi sloˇzitá pravidla pro zpracován´ı a t´ım pádem i sloˇzitou implementaci interpreteru. Tyto nedostatky jsou ˇreˇseny novou aplikac´ı HTML v XML jazyce, coˇz je znaˇckovac´ı jazyk, pomoc´ı kterého lze vytváˇret a definovat vlastn´ı znaˇckovac´ı jazyky, které pak slouˇz´ı pro popis strukturovan´ ych dat. Tato XML aplikace se naz´ yvá XHTML (W3C, 2010), neboli eXtended HTML a pˇrináˇs´ı stejné elementy, které jsou k dispozici v samotném HTML. Zároveˇ n ale pˇrej´ımá vlastnosti XML, kter´ ymi jsou zjednoduˇsená syntaxe a pravidla zpracován´ı, napˇr. hodnoty atribut˚ u mus´ı b´ yt vˇzdy uvedeny v uvozovkách, poˇca´teˇcn´ı a koncová znaˇcka je vˇzdy povinná a pˇri zanoˇrován´ı nesm´ı docházet ke kˇr´ıˇzen´ı. Ve v´ yvoji se od roku 2007 nacház´ı i nová verze HTML. Zat´ımco je samotná specifikace HTML5 stále jeˇstˇe nedokonˇcena, zejména v modern´ıch prohl´ıˇzeˇc´ıch se jiˇz lze setkat se znaˇcnou podporou. HTML a XHTML soubory sestáváj´ı ze samotného obsahu stránek obohaceného o HTML znaˇcky, neboli tagy. Ty se vyskytuj´ı bud’ v podobˇe tzv. párov´ ych znaˇcek, které maj´ı znaˇcku otev´ırac´ı a uzav´ırac´ı, mezi nimiˇz se nacház´ı formátovan´ y obsah, nebo ve formˇe znaˇcky nepárové. Znaˇcky lze dále rozdˇelit na znaˇcky sémantické a vizuáln´ı. Sémantické znaˇcky slouˇz´ı k urˇcován´ı v´ yznamu daného obsahu stránky, zat´ımco vizualn´ı znaˇcky urˇcuj´ı zp˚ usob zobrazen´ı obsahu. V HTML jsou k dispozici oba tyto druhy znaˇcek, ale v XHTML se nacház´ı jiˇz pouze znaˇcky sémantické. To samé plat´ı i pro vyv´ıjené HTML5. D˚ uvodem pro vypuˇstˇen´ı vizuáln´ıch znaˇcek bylo logické oddˇelen´ı prezentace od samotného obsahu. Dalˇs´ım prvkem, kter´ y se m˚ uˇze ve HTML dokumentu vyskytnout jsou atributy. Ty se zapisuj´ı k jednotliv´ ym poˇca´teˇcn´ım znaˇckám a dávaj´ı tak element˚ um dalˇs´ı vlastnosti. Posledn´ım prvkem jsou entity a jedná se o odkazy na speciáln´ı znaky. Zapisuj´ı se pomoc´ı ampersandu, za kter´ ym následuje bud’ ˇc´ıslo znaku ve znakové sadˇe, nebo symbolické jméno znaku. Zápis entity je ukonˇcen stˇredn´ıkem. Aby bylo moˇzné rozliˇsit, o jak´ y druh dokumentu se v˚ ubec jedná a jak´ ym zp˚ usobem jej tedy má internetov´ y prohl´ıˇzeˇc interpretovat, pouˇz´ıvaj´ı se doctype deklarace. DTD urˇcuje konkrétn´ı definici syntaxe HTML dokumentu, coˇz obsahuje sytaktická pravidla, povolené atributy a jejich hodnoty a definice pravidel, jak´ ym zp˚ usobem do sebe lze zanoˇrovat jednotlivé elementy. Pˇri interpretaci HTML dokumentu prohl´ıˇzeˇce zobrazuj´ı pouze samotn´ y obsah stránky. HTML znaˇcky jsou ze zobrazován´ı vypuˇstˇeny a jejich v´ yznam je nˇejak´ ym pˇreddefinovan´ ym zp˚ usobem iterpretován prohl´ıˇzeˇcem, pˇriˇcemˇz toto zobrazen´ı záleˇz´ı na daném prohl´ıˇzeˇci, a tak se m˚ uˇze stejná stránka v závislosti na pouˇzitém prohl´ıˇzeˇci a jeho interpretaci zobrazovat r˚ uznˇe.

3.1


19

CSS Vzhled stránek jiˇz nen´ı definován pomoc´ı vizuáln´ıch znaˇcek. V´ yˇse zm´ınˇen´ y d˚ uvod pro logické oddˇelen´ı definice vzhledu obsahu od jeho struktury a v´ yznamové podstaty vyplyne d´ıky podpoˇre kaskádov´ ych styl˚ u prohl´ıˇzeˇci. Styly umoˇzn ˇuj´ı definovat pro elementy HTML dokumentu potˇrebn´ y vzhled a jejich pomoc´ı je moˇzné nastavit vlastnosti zobrazovaného p´ısma, jako je velikost, ˇrez, font, barva nebo zarovnán´ı, dále barvy pozad´ı, um´ıstˇen´ı obrázk˚ u na pozad´ı, zobrazen´ı rámeˇck˚ u, rozmˇery jako v´ yˇska, ˇs´ıˇrka, odsazen´ı, vnitˇrn´ı okraje, um´ıstˇen´ı element˚ u na stránce, zp˚ usob zaˇraˇzen´ı do toku dokumentu atd. Vˇsechny tyto vlastnosti lze pomoc´ı styl˚ u nastavovat pro vˇsechny HTML elementy. Definice stylu se nejˇcastˇeji provád´ı pomoc´ı extern´ıch soubor˚ u, ale lze pˇristoupit i k moˇznosti zapsán´ı styl˚ u pˇr´ımo v dokumentu. Samotn´ y zápis jednotliv´ ych styl˚ u, a tedy i urˇcen´ı, ke kter´ ym prvk˚ um se daná definice bude vztahovat, prob´ıhá pomoc´ı syntaxe selector {vlastnost: hodnota;}. Selektor m˚ uˇze pˇredstavovat jméno elementu, název identifikátoru nebo tˇr´ıdy. Existuj´ı i dalˇs´ı, jako napˇr. pseudo-tˇr´ıdy, znaky pro urˇcen´ı hierarchick´ ych vztah˚ u ve stromu dokumentu (rodiˇc – potomek), ale jejich podpora jiˇz nen´ı ve vˇsech prohl´ıˇzeˇc´ıch zaruˇcena. JavaScript Interaktivitu a rozpohybován´ı stránek poskytuj´ı skripty na stranˇe klienta. Ty se provádˇej´ı vˇzdy individuálnˇe pro konkrétn´ıho uˇzivatele, kter´ y si prohl´ıˇz´ı iternetové stránky, pˇr´ımo v oknˇe jeho prohl´ıˇzeˇce a ovlivˇ nuj´ı tak jeho aktualn´ı zobrazen´ı stránek. Nejˇcastˇeji se provád´ı manipulace se stromem element˚ u HTML dokumentu, at’ uˇz se jedná o pˇridáván´ı, odeb´ırán´ı, skr´ yván´ı nebo nastavován´ı vlastnost´ı jednotliv´ ych element˚ u. JavaScript je objektovˇe orientovan´ y skriptovac´ı jazyk pro internetové stránky, ale jeho pouˇzit´ı se neomezuje pouze na nˇe a nacház´ı své uplatnˇen´ı v ˇradˇe dalˇs´ıch prostˇred´ıch. Jeho pouˇzit´ı nevyˇzaduje objetkov´ y pˇr´ıstup a m˚ uˇze fungovat stejnˇe dobˇre i pˇri uplatnˇen´ı proceduráln´ıho pˇr´ıstupu. Jazyk jako takov´ y poskytuje obecnˇe známé konstrukce cykl˚ u, podm´ınek, bloky try – catch, switch, definice funkc´ı atd. To vˇse, i samotná sytaxe, je velmi podobné napˇr. jazyk˚ um Java nebo C++. Ona dynamiˇcnost DHTML tedy spoˇc´ıvá ve schopnosti mˇenit vzhled, obsah a funkcionalitu stránky poté, co byla kompletnˇe naˇctena a je uˇzivatelem prohl´ıˇzena. Nikoliv ve schopnosti poskytovat pˇri kaˇzdém naˇcten´ı stránky jedineˇcnou stránku. DOM Manipulace s obsahem a stromovou strukturou element˚ u na stránce prob´ıhá skrze tzv. DOM, coˇz je zkratka názvu Document Object Model. Jedná se o platformu, která umoˇzn ˇuje pˇri svém pouˇzit´ı v programech nebo skriptech dynamicky pˇristupovat a modifikovat samotn´ y obsah dokumentu jako takov´ y, jeho strukturu a také jeho styl. Cel´ y dokument m˚ uˇze b´ yt pak pˇres DOM nˇejak´ ym zp˚ usobem zpracován a v´ ysledky tohoto zpracován´ı mohou b´ yt zpˇetnˇe vloˇzeny do jiˇz naˇctené a prohl´ıˇzené stránky. Jeden reprezentativn´ı pˇr´ıklad za vˇsechny. Po naˇcten´ı HTML stránky se skriptovac´ım

3.1


20

jazykem spouˇstˇen´ ym na stranˇe klienta, konkrétnˇe tˇreba JavaScriptem, projde celá naˇctená stránka a vyhledaj´ı se vˇsechny nadpisy. Z tˇech se poté vytvoˇr´ı ˇc´ıslovan´ y seznam slouˇz´ıc´ı jako obsah pro lepˇs´ı orientaci na stránce, kter´ y se vloˇz´ı pˇred veˇsker´ y obsah na samotn´ y zaˇca´tek stránky. DOM se ovˇsem neomezuje pouze na HTML stránky a umoˇzn ˇuje práci i se XML dokumenty. Sám o sobˇe je neutráln´ı na pouˇzitém programovac´ım nebo skriptovac´ım jazyku a záleˇz´ı na konkrétn´ı aplikaci, jaká rozhran´ı pro práci s DOMem implementuje (W3C, 2005). Prohl´ıˇzeˇce maj´ı implementované rozhran´ı pro JavaScript, prohl´ıˇzeˇc Internet Explorer od firmy Microsoft podporuje i skriptovac´ı jazyk pˇr´ımo od Microsoftu, VBScript. Pomoc´ı DHTML, a tedy i vˇsech v´ yˇse zm´ınˇen´ ych technologi´ı, které pod DHTML spadaj´ı, jsou realizovány vˇsechny dodané e-learningové kv´ızy, které slouˇz´ı jako pˇredloha pro vytvoˇren´ı aplikace generátoru. Je tedy nutné tyto technologie opˇet pouˇz´ıt, protoˇze aplikace bude nové kv´ızy nejen vytváˇret, ale bude je i pro jednotlivé autory uchovávat a pro kaˇzdého uˇzivatele vˇsechny uloˇzené kv´ızy zobrazovat, aby si je mohl kdokoliv vyzkouˇset. 3.1.2

V´ ybˇ er JS knihovny

Jedná se o volnˇe dostupnou JavaScriptovou knihovnu, jej´ımˇz hlavn´ım u ´ˇcelem je v´ yrazné zjednoduˇsen´ı skriptován´ı na klientské stranˇe a zajiˇstˇen´ı stejného chován´ı napˇr´ıˇc vˇsemi prohl´ıˇzeˇci. V dneˇsn´ı dnech se jedná s nejvˇetˇs´ı pravdˇepodobnost´ı o nejobl´ıbenˇejˇs´ı a nejrozˇs´ıˇrenˇejˇs´ı JavaScriptovou knihovnu. Podle statistik uveden´ ych na webu BuiltWith (BuiltWith Trends, 2011), má knihovna jQuery k datu 3. 5. 2011 témeˇr 45% pod´ıl na celkovém poˇctu prvn´ıho milionu nejnavˇstˇevovanˇejˇs´ıch stránek na internetu (viz obrázek 1).

Obrázek 1: Graf distribuce JavaScriptov´ ych knihoven pro prvn´ı milion stránek

Prvn´ı vydán´ı knihovny jQuery se uskuteˇcnilo na mezinárodn´ı konferenci BarCamp, kde ji pˇredstavil jej´ı autor John Resig. Od této doby proˇsla knihovna ˇradou aktualizac´ı a nynˇejˇs´ı dostupná verze nese oznaˇcen´ı 1.6. Jak uˇz bylo ˇreˇceno, knihovna znaˇcnˇe zjednoduˇsuje veˇskerou práci s DOMem a pˇredevˇs´ım zajiˇst’uje správnou funkcionalitu napˇr´ıˇc vˇsemi nejpouˇz´ıvanˇejˇs´ımi prohl´ıˇzeˇci. Pˇri jej´ım pouˇzit´ı tak uˇsetˇr´ıme

3.1


21

ˇcas a m˚ uˇzeme si b´ yt zcela jisti, ˇze námi napsané skripty budou korektnˇe fungovat ve vˇsech podporovan´ ych prohl´ıˇzeˇc´ıch (jQuery, 2011). • Firefox 2.0+ • Internet Explorer 6+ • Safari 3+ • Opera 10.6+ • Google Chrome 8+ Jak je vidˇet, tak pouˇzit´ım knihovny jQuery dojde ke zjednoduˇsen´ı zápisu skript˚ u, které obsatarávaj´ı interaktivitu u jednotliv´ ych e-learningov´ ych kv´ız˚ u. Nav´ıc bude zajiˇstˇeno, ˇze vˇsechny vygenerované u ´lohy budou ve v´ yˇse uveden´ ych prohl´ıˇzeˇc´ıch fungovat. Pokud tedy uˇzivatel na svém poˇc´ıtaˇci nepouˇz´ıvá vyloˇzenˇe zastaralou verzi tˇechto prohl´ıˇzeˇc˚ u, nemˇelo by se mu stát, ˇze by samotná aplikace nebo vytvoˇrené kv´ızy nefungovaly. Dalˇs´ım pˇr´ınosem zakomponován´ı knihovny do aplikace je jeho automatická pˇr´ıtomnost ve vygenerovaném kódu nov´ ych u ´loh, takˇze pˇri pˇr´ıpadném doprogramováván´ı vlastn´ıch specifick´ ych funkc´ı pro jednotlivé u ´lohy bude moˇzné ihned vyuˇz´ıt moˇznost´ı, které jQuery nab´ız´ı. 3.1.3

V´ ybˇ er programovac´ıho jazyka

V´ ybˇer programovac´ıho jazyka je jedn´ım z prvn´ıch krok˚ u, které je tˇreba pˇri v´ yvoji nové aplikace udˇelat, a od jeho správného v´ ybˇeru se poté odv´ıj´ı moˇznost pouˇz´ıt´ı nejr˚ uznˇejˇs´ıch modul˚ u a standardn´ıch knihoven pro nejr˚ uznˇejˇs´ı u ´ˇcely. Pomoc´ı programovac´ıho jazyka bude nutné v prvé ˇradˇe realizovat algoritmy, které budou generovat nové e-learningové komponenty, zároveˇ n bude tˇreba vytvoˇrit pˇr´ıvˇetivé uˇzivatelské rozhran´ı v podobˇe HTML kódu. Vzhledem k tomu, ˇze se budou jednotlivé u ´lohy uchovávat, bude nutné zajistit komunikaci s databázov´ ym systémem. Jedn´ım z poˇzadavk˚ u na v´ yslednou aplikaci je pouˇzit´ı volnˇe dostupn´ ych technologi´ı. Tento fakt je pˇri v´ ybˇeru jazyka nutné také zohlednit. Pˇr´ı v´ ybˇeru jazyka pro naprogramován´ı webov´ ych aplikac´ı lze vyb´ırat z nˇekolika vhodn´ ych nástroj˚ u, které splˇ nuj´ı v´ yˇse zm´ınˇené poˇzadavky. Prvn´ım je programovac´ı jazyk PHP a druh´ ym programovac´ı jazyk Perl. Mezi dalˇs´ı pouˇzitelné technologie by ˇslo zaˇradit napˇr. Javu. Ta bohuˇzel nen´ı na vˇetˇsinˇe server˚ u podporovaná, takˇze moˇznost jej´ıho v´ ybˇeru lze hned zavrhnout, protoˇze aplikace by mˇela b´ yt schopna co nejvˇetˇs´ıho nasazen´ı. Zároveˇ n je nutné dodrˇzet dˇr´ıve stanovené c´ıle na n´ızkou nároˇcnost programového vybaven´ı pro provoz kv´ız˚ u i samotné aplikace. Perl se ihned jev´ı jako vhodnˇejˇs´ı volba. Jednak disponuje celou ˇradou nejr˚ uznˇejˇs´ıch standardn´ıch knihoven, které poskytuj´ı vˇetˇsinou kvalitn´ı ˇreˇsen´ı urˇcitého problému a znaˇcnˇe tak zjednoduˇsuj´ı práci. Poskytuje také skvˇelou podporu pro generován´ı HTML kódu, kterou zajiˇst’uje modul CGI, a pro práci s databázov´ ym

3.1


22

systémem je k dispozici modul DBI. Nejvˇetˇs´ı v´ yhodou tohoto modulu je, ˇze poskytuje jednotné rozhran´ı pro komunikaci s jak´ ymkoliv databázov´ ym systémem. Oproti tomu je v jazyku PHP (PHP, 2011) pro kaˇzd´ y databázov´ y systém unikátn´ı rozhran´ı. Pokud je tedy nˇekdy v budoucnu nutné pˇrej´ıt na jin´ y databázov´ y systém, je tˇreba pˇrepsat celou ˇca´st aplikace, která databázov´ y systém vyuˇz´ıvá. Jeho v´ yhodou je specializace na v´ yvoj webov´ ych aplikac´ı a obrovská podpora, lze jej povaˇzovat za takov´ y standard, kter´ y lze naj´ıt na témˇeˇr kaˇzdém hostingu. Jeho vˇseobecná rozˇs´ıˇrenost pˇrináˇs´ı také velké mnoˇzstv´ı nejr˚ uznˇejˇs´ıch projekt˚ u, které jsou realizovány právˇe v PHP, at’ uˇz se jedná o frameworky, redakˇcn´ı systémy nebo vˇsemoˇzné knihovny. Na základˇe vˇsech v´ yˇse uveden´ ych fakt˚ u byl vybrán programovac´ı jazyk PHP. D˚ uvodem v´ ybˇeru byla pˇredevˇs´ım moˇznost vyuˇzit´ı dostupn´ ych framework˚ u napsan´ ych v PHP, které rapidnˇe pomohou pˇri implementaci aplikace a automaticky se postaraj´ı o náleˇzitosti, které by mˇela webová aplikace splˇ novat. 3.1.4

V´ ybˇ er frameworku

Pˇri v´ ybˇeru programovac´ıho jazyka, kter´ ym bude aplikace implementovaná, se rozhodovalo mezi Perlem a PHP. Vybráno bylo PHP, protoˇze pro realizaci aplikace je moˇzné vyuˇz´ıt jeden z dostupn´ ych framework˚ u, které jsou v PHP napsány. Pˇr´ınosem pouˇz´ıt´ı frameworku je automatické zajiˇstˇen´ı urˇcité u ´rovnˇe kvality, protoˇze bez jeho pouˇzit´ı je velice snadné napsat ˇspatn´ y kód. Je to z toho d˚ uvodu, ˇze PHP je velmi pˇr´ıvˇetivé na pouˇzit´ı, d´ıky malému poˇctu omezen´ı, které jsou na strukturu programátorova kódu kladena. Frameworky jsou schopny poskytnout kvalitn´ı strukturu pro psan´ı kódu, objektov´ y pˇr´ıstup a dodateˇcné funkce. Asi nejvˇetˇs´ım pˇr´ınosem pouˇzit´ı frameworku je vyuˇzit´ı návrhového vzoru Model-viewcontroller, kter´ y oddˇeluje jednotlivé vrstvy aplikace do separátn´ıch komponent. Ty jsou udrˇzovány oddˇelenˇe, coˇz znaˇcnˇe pˇrisp´ıvá ke snadné udrˇzitelnosti, rozˇsiˇritelnosti a programován´ı celé aplikace. Mezi dostupné frameworky patˇr´ı zejména zahraniˇcn´ı v´ ytvory jako CakePHP, Symfony, ZendFramework nebo CodeIgniter. K dispozici je i velmi kvalitn´ı tuzemsk´ y Nette framework. CakePHP Inspirac´ı pro vytvoˇren´ı tohoto frameworku byl u ´spˇech frameworku jiného, konkrétnˇe Ruby on Rails, kter´ y je napsan´ y v objektovˇe orientovaném programovac´ım jazyku Ruby. Nejedná se ovˇsem o port Ruby on Rails do PHP. CakePHP si z frameworku pouze pˇreb´ırá jeho koncepty. Tak jako kaˇzd´ y framework pouˇz´ıvá návrhov´ y vzor MVC. Je tedy vhodn´ y pro lidi, kteˇr´ı jiˇz pracovali se zm´ınˇen´ ymi Rails (Wikipedia, 2010).

3.1


23

CodeIgniter Jak je uvedeno na domovské stránce projektu (CodeIgniter, 2011), jedná se o velmi jednoduch´ y framework, kter´ y vyniká svou u ´spornost´ı a nezatˇeˇzuje rozsáhl´ ymi knihovnami. Je zamˇeˇren na rychlost, vysok´ y v´ ykon a nevyˇzaduje témˇeˇr ˇzádnou konfiguraci. Zároveˇ n uˇzivatele netlaˇc´ı do pouˇz´ıván´ı a v mnoh´ ych pˇr´ıpadech tak i uˇcen´ı zcela nového ˇsablonovac´ıho jazyka, jehoˇz pouˇzit´ı je volitelné. Symfony Dalˇs´ı z aplikaˇcn´ıch framework˚ u pro v´ yvoj webov´ ych aplikac´ı postaven´ ych na návrhovém vzoru MVC. Podle informac´ı uveden´ ych na domovské stránce celého projektu (Symfony, 2011), tento framework poskytuje nástroje pro tvorbu komplexn´ıch webov´ ych aplikac´ı, jejichˇz v´ yvoj znaˇcnˇe usnadˇ nuje a pˇredevˇs´ım zrychluje. Principy tohoto frameworku jsou postaveny na ovˇeˇren´ ych a pouˇz´ıvan´ ych zvyklostech ve v´ yvoji webov´ ych aplikac´ı a umoˇzn ˇuje snadno integrovat nˇekteré z nástroj˚ u ostatn´ıch knihoven. Zend Framework Zend Framework je asi jedn´ım z nejznámˇejˇs´ıch pˇredstavitel˚ u PHP framework˚ u a je zaloˇzen na jednoduchosti, produktivitˇe, podpoˇre tzv. Web 2.0 a dobr´ ych zvyklostech objektovˇe orientovaného programován´ı. Vyznaˇcuje se flexibiln´ı architekturou, rozˇsiˇriteln´ ym a dobˇre otestovan´ ym základn´ım kódem a pro sv˚ uj bˇeh nen´ı nutné zdlouhavˇe nastavovat konfiguraˇcn´ı soubory. Podpora z´ıskaná pouˇzit´ım tohoto frameworku zaˇc´ıná tradiˇcn´ım návrhov´ ym vzorem MVC, abstraktn´ı vrstvou pro práci s databáz´ı, pokraˇcuje prostˇredky pro lokalizován´ı obsahu webu, správu session, autentizaci a autorizaci a konˇc´ı nástroji pro RAD2 anebo webové sluˇzby (ZendFramework, 2011). Nette framework Jedná se o kvalitn´ı tuzemsk´ y framework, kter´ y je v´ ykonn´ y a pˇredevˇs´ım vhodn´ y pro rychlé a snadné vytváˇren´ı kvalitn´ıch webov´ ych aplikac´ı. Mezi jeho pˇrednosti patˇr´ı poskytován´ı vysoce kvalitn´ıho zabezpeˇcen´ı a automatického oˇsetˇren´ı bezpeˇcnostn´ıch dˇer webu, dále nab´ız´ı podporu pro vˇsechny modern´ı technologie pouˇz´ıvané pˇri v´ yvoji webov´ ych aplikac´ı jako je AJAX, MVC, SEO, Web 2.0. Dále ct´ı zásady pˇr´ıstupu KISS a d´ıky svému propracovanému objektovému návrhu v´ yvojáˇre vede ke kvalitn´ımu, ˇcistému návrhu aplikace, která je kdykoliv v budoucnosti snadno rozˇsiˇritelná. Zároveˇ n vˇsak ˇzádn´ ym zp˚ usobem neomezuje a umoˇzn ˇuje vyuˇz´ıvat pouze nˇekterou z jeho ˇca´st´ı, které lze kombinovat s jin´ ymi PHP frameworky. Pro podporu v´ yvoje aplikace jsou nav´ıc k dispozici kvalitn´ı lad´ıc´ı nástroje (Nette, 2011). 2

Rapid application development.

3.1


24

Samotn´ y v´ ybˇer frameworku na základˇe krátkého v´ yˇctu jeho vlastnost´ı, které byly vˇetˇsinou pˇrevzaty z domovsk´ ych stránek samotn´ ych projekt˚ u, pˇredstavuje pomˇernˇe nelehk´ y u ´kol a ˇcasto záleˇz´ı vyloˇzenˇe na osobn´ıch preferenc´ıch v´ yvojáˇre. Zpravidla ale neexistuje ani jedna ˇspatná volba a aplikaci by mˇelo j´ıt bezproblém˚ u realizovat v kterémkoliv zm´ınˇeném frameworku. Pro implmentaci bude zvolen framework Nette, kolem kterého je velká ˇcesko-slovenská komunita. Velké vyuˇz´ıt´ı v aplikaci generátoru zcela jistˇe nalezne velice kvalitnˇe zpracovan´ y nástroj pro tvorbu uˇzivatelsk´ ych formuláˇr˚ u a jejich validaˇcn´ıch pravidel, protoˇze v samotné aplikaci má b´ yt kladen d˚ uraz na vysokou variabilitu nejr˚ uznˇejˇs´ıch funkˇcn´ıch nastaven´ı pro generátory jednotliv´ ych kv´ız˚ u, coˇz povede k netriviáln´ı struktuˇre prvk˚ u ve formuláˇr´ıch vyˇzaduj´ıc´ı podm´ınˇené validace. 3.1.5

V´ ybˇ er datab´ azov´ eho syst´ emu

Databázov´ y systém je spojen´ım databáze, coˇz je strukturovaná mnoˇzina dat, a systému ˇr´ızen´ı báze dat, coˇz je integroovan´ y softwarov´ y prostˇredek ˇr´ıd´ıc´ı bázi dat. Nejrozˇs´ıˇrenˇejˇs´ım databázov´ ym systémem, kter´ y (stejnˇe jako programovac´ı jazyk PHP) pln´ı na tuzemsk´ ych hostingov´ ych sluˇzbách roli jakéhosi standardu, je MySQL. Jedná se o multiplatformn´ı databázi, která je dostupná jak ve verzi zdarma, tak i ve verzi komerˇcn´ı, tedy placené. Alternativn´ım systémem je napˇr. PostgreSQL. Rozd´ıly mezi tˇemito relaˇcn´ımi databázov´ ymi systémy byly jeˇstˇe v relativnˇe nedávnˇe dobˇe pomˇernˇe zjevné. MySQL vynikalo a bylo tak i vˇseobecnˇe vn´ımáno jako ˇreˇsen´ı pro snadné uˇz´ıván´ı, které nav´ıc pˇrináˇselo vysokou rychlost, ovˇsem na u ´kor absence pokroˇcil´ ych funkc´ı. Oproti tomu Postgres pˇredstavovalo jakousi open source verzi komerˇcn´ıho systému Oracle s ˇradou pokroˇcik´ ych funkc´ı, jako jsou triggery, funkce, nebo pohledy. Dnes se uˇz rozd´ıly smazaly a tak jako MySQL na ˇcetné ˇzádosti uˇzivatel˚ u zapracovalo vyˇzadované funkce, Postgres znaˇcnˇe vylepˇsilo svoji rychlost. V´ ybˇer mezi tˇemito dvˇema systémy tak závis´ı sp´ıˇse na osobn´ıch preferenc´ıch uˇzivatele, ale hlavnˇe také na podpoˇre serveru, na kter´ y bude aplikace um´ıstˇena. Jelikoˇz bude generátor e-learningov´ ych u ´loh um´ıstˇen na hosting, kter´ y bude zdarma, bude jako databázov´ y systém zvoleno obecnˇe rozˇs´ıˇrené MySQL. V´ ybˇer databázového systému ovˇsem nebude zcela zavazuj´ıc´ı, jelikoˇz spoleˇcnˇe s PHP frameworkem Nette bude pouˇzita knihovna Dibi, poskytuj´ıc´ı abstrakci pro databázovou vrstvu. Dibi Jak bylo uvedeno v´ yˇse, velk´ ym problémem PHP je, ˇze nativnˇe neposkytuje jednotné rozhran´ı pro pˇr´ıstup ke vˇsem druh˚ um nejrozˇs´ıˇrenˇejˇs´ıch databázov´ ych systém˚ u. Takˇze je tˇreba pˇri pˇrechodu na jin´ y databázov´ y systém pˇrepisovat veˇsker´ y zdrojov´ y kód aplikace, kter´ y nˇejak´ ym zp˚ usobem komunikuje s databáz´ı. Samozˇrejmˇe lze tento nedostatek minimalizovat napˇr. napsan´ım vlastn´ıch funkc´ı, které se následnˇe pouˇzij´ı v kódu samotné aplikace. Pˇri zmˇenˇe pak staˇc´ı zasáhnout pouze do implementac´ı vlastn´ıch funkc´ı a pˇrechod na nov´ y databázov´ y systém je tak mnohem jednoduˇsˇs´ı.

3.1


25

Nástroj Dibi ovˇsem umoˇzn´ı tyto problémy jeˇstˇe v´ıce minimalizovat. Jde o knihovnu, jej´ıˇz funkc´ı je zajistit abstrakci pro práci se vˇsemi nejˇcastˇeji pouˇz´ıvan´ ymi databázemi. • MySQL • PostgreSQL • SQLite • MS SQL • Oracle • Access • generic PDO a ODBC Pouˇzit´ım Dibi tedy bude zajiˇstˇen témˇeˇr bezproblémov´ y pˇrechod na kter´ ykoliv z v´ yˇse uveden´ ych datbázov´ ych systém˚ u. Jediné, co bude tˇreba pˇri zmˇene systému v aplikaci upravit, bude pouze nˇekolik ˇra´dk˚ u v konfiguraˇcn´ım souboru.

4

´ VYSLEDKY

4

26

V´ ysledky

4.1

N´ avrh aplikace pro generov´ an´ı u ´loh

Aplikace pro generován´ı e-learningov´ ych kv´ız˚ u, které byly podkladem pro tuto práci, bude podle poˇzadavk˚ u rozdˇelena na veˇrejnou ˇca´st, ve které si budou moci vˇsichni návˇstˇevn´ıci procházet vytvoˇrené a uloˇzené e-learningové kv´ızy a zkouˇset si na nich své znalosti, a také soukromou ˇcást. Tato ˇca´st bude slouˇzit vˇsem uˇzivatel˚ um, kteˇr´ı si vytvoˇr´ı sv˚ uj vlastn´ı u ´ˇcet, pod kter´ y se pˇrihlás´ı. Zde jim bude umoˇznˇeno vytváˇret nové kv´ızy, ukládat si kv´ızy do databáze nebo si je stáhnout na sv˚ uj HDD.3 Ukládán´ı kv´ız˚ u do databáze nebude slouˇzit pouze pro jejich zveˇrejnˇen´ı ostatn´ım uˇzivatel˚ um, ale poslouˇz´ı i k tomu, aby se autoˇri ke sv´ ym uloˇzen´ ym u ´lohám mohli kdykoliv v budoucnosti vracet, aby je mohli dále upravovat. 4.1.1

N´ avrh struktury datab´ aze

Struktura databáze, kterou bude aplikace pouˇz´ıvat pro uchováván´ı dat, nebude nijak komplikovaná, protoˇze bude evidováno minimum u ´daj˚ u. Hlavn´ım c´ılem této práce je vytvoˇren´ı generátor˚ u pro vytváˇren´ı nov´ ych kv´ız˚ u. Nen´ı proto kladen d˚ uraz na uˇzivatelské funkce, coˇz se odraz´ı i v samotném návrhu databáze (viz obr. 2). Uzivatele Typy id nazev presenter

int varchar varchar

Ulohy id nazev popis uloha autor typ

int varchar text blob int int

id login password

int varchar char

Obrázek 2: schéma struktury databáze

Pro zajiˇstˇen´ı nejd˚ uleˇzitˇejˇs´ı funkcionality celé aplikace je tˇreba identifikovat pouze nˇekolik entit. Prvn´ı jsou uˇzivatelé, kteˇr´ı si pro pˇr´ıstup do aplikace vytváˇrej´ı své osobn´ı u ´ˇcty. Pro kaˇzdého z uˇzivatel˚ u je nutné evidovat jeho pˇrihlaˇsovac´ı jméno, heslo a identifikátor, kter´ y jednoznaˇcnˇe urˇc´ı konkrétn´ıho uˇzivatele. Jako identifikátor by zcela urˇcitˇe ˇslo zvolit samotné pˇrihlaˇsovac´ı heslo, ale pro pohodlnˇejˇs´ı práci se záznamem uˇzivatele bude vytvoˇren umˇel´ y ˇc´ıseln´ y identifikátor. Dalˇs´ı uchovávanou entitou jsou vytváˇrené u ´lohy. Aby je mohl autor od sebe nˇejak´ ym zp˚ usobem odliˇsit, je pro kaˇzdou z u ´loh evidován jej´ı název. Dalˇs´ım z odliˇsovac´ıch atrbitut˚ u je voliteln´ y popis celé u ´lohy, kter´ y má slouˇzit pro dalˇs´ı dodateˇcné poznámky autora, které mu v´ıce pomohou identifikovat, o kterou z u ´loh se vlastnˇe jedná. Dalˇs´ı atribut uchovává veˇskerá nastaven´ı u ´lohy, která autor pˇri jej´ım vytváˇren´ı nastavil. Jelikoˇz se od sebe jednotlivé kv´ızy v mnoha aspektech 3

Hard disk drive – pevn´ y disk.

4.1

Návrh aplikace pro generován´ı u ´loh

27

liˇs´ı, bylo by velmi komplikované vytváˇret pro kaˇzd´ y typ zvláˇstn´ı tabulku. Jedn´ım z princip˚ u, kter´ y by ˇslo pouˇz´ıt, by bylo kaˇzd´ y parametr u ´lohy uchovávat jako jeden záznam v tabulce parametry_uloh. Záznamy z této tabulky by pak byly se záznamy v tabulce u ´loh ve vztahu N:1 a kaˇzd´ y parametr u ´lohy by uchovával data ve tvaru nazev_parametru, hodnota, uloha. Tento zp˚ usob ukládán´ı nastaven´ı ale znovu pˇrináˇs´ı pomˇernˇe sloˇzité manipulace, které je tˇreba s daty v aplikaci provádˇet. Z tohoto d˚ uvodu byl zvolen zp˚ usob uchováván´ı veˇskerého nastaven´ı pomoc´ı jediného atributu ve formˇe binárn´ıch dat. Zde se ukládá kus PHP kódu, kter´ y pˇredstavuje popis datové struktury uchovávané u ´lohy, se kterou se v samotné aplikaci pomˇernˇe snadno a pˇr´ımo manipuluje. Velkou nev´ yhodou tohoto ˇreˇsen´ı je fakt, ˇze u ´lohy nep˚ ujde podle jednotliv´ ych parametr˚ u ˇradit pˇr´ımo v databázi, ˇc´ımˇz se pˇrirav´ıme o potencionáln´ı v´ ykon, kterého lze dosáhnout. Ve chv´ıli, kdy bude tˇreba s jednotliv´ ymi u ´lohami nˇejak´ ym zp˚ usobem pracovat (ˇradit, vyb´ırat) podle uloˇzen´ ych nastaven´ı, nebude moˇzné tyto operace provést na u ´rovni databáze. To ovˇsem tolik nevad´ı, protoˇze se nejedná o stˇeˇzejn´ı funkci, bez které by aplikace nebyla provozuschopná, ale pˇredevˇs´ım se nejedná o hlavn´ı poˇzadavek, kter´ y by mˇela apikace podle zadán´ı práce splˇ novat. Dále jsou pro kaˇzdou u ´lohu uchovávány dva ciz´ı kl´ıˇce. Prvn´ı odkazuje na autora u ´lohy, tedy instanci z tabulky uˇzivatelé. Druh´ y kl´ıˇc se odkazuje na instanci posledn´ı evidované entity, a to na typ u ´lohy. Pro jednoznaˇcné odliˇsen´ı kaˇzdé u ´lohy bude vytvoˇren umˇel´ y ˇc´ıseln´ y identifikátor, jelikoˇz ˇza´dn´ y z atribut˚ u, ani ˇza´dná jejich kombinace, nen´ı vhodn´ ym kandidátem na primárn´ı kl´ıˇc, kter´ y by u ´lohy jednoznaˇcnˇe identifikoval. Posledn´ı entitou jsou typy vytváˇren´ ych u ´loh a pro kaˇzd´ y z nich je evidován název daného typu, kter´ y se bude zobrazovat pˇri v´ ypisu kv´ız˚ u v aplikaci a odpov´ıdá názvu kv´ız˚ u, které byly v pˇredchoz´ıch kapitolách rozeb´ırány. Druh´ ym evidovan´ ym atributem je název presenteru, kter´ y se uchovává z funkˇcn´ıch d˚ uvod˚ u, které budou vysvˇetleny dále v textu. Identifikátorem by pro tuto entitu mohl b´ yt napˇr. název presenteru, protoˇze mus´ı b´ yt pro kaˇzdou z u ´loh unikátn´ı, ale stejnˇe jako v pˇr´ıpadˇe pˇrihlaˇsovac´ıch jmen u tabulky uˇzivatel˚ u nebude pro lepˇs´ı práci jako identifikátor pouˇzit ˇretˇezec, ale umˇele vytvoˇren´ y ˇc´ıseln´ y identifikátor. 4.1.2

N´ avrh struktury presenter˚ u

Zat´ımco vˇetˇsina uveden´ ych PHP framework˚ u pouˇz´ıvala návrhov´ y vzor MVC, tedy model-view-controller, zvolen´ y Nette framework jde cestou návrhové vzoru MVP neboli model-view-presenter. Na prvn´ı pohled se tyto vzory liˇs´ı pouze v posledn´ım p´ısmenku ve zkratce, a tedy i názvu posledn´ı sloˇzky. Velice zjednoduˇsenˇe lze ˇr´ıct, ˇze Controller a Presenter pln´ı stejnou funkci. Ve skuteˇcnosti zde ovˇsem existuj´ı urˇcité odliˇsnosti, ale pro jejich plné pochopen´ı by bylo nutné se této problematice vˇenovat velmi podrobnˇe. Abychom nezabˇredáváli do nadbyteˇcn´ ych technick´ ych detail˚ u, uvedeme pouze jednoduch´ y popis rozd´ılu, kter´ y uvád´ı Bernard v jednom ze sv´ ych ˇclánk˚ u (Bernard, 2009). Controller se u webov´ ych aplikac´ı nejˇcastˇeji skládá z tzv. front controlleru, kter´ y se stará o zpracován´ı HTTP poˇzadavk˚ u, které pos´ılá

4.1

28


dalˇs´ımu controlleru. Ten si poté z p˚ uvodn´ıho poˇzadavku vyextrahuje potˇrebná data a provede patˇriˇcnou operaci. Presenter se stará o prezentaˇcn´ı i aplikaˇcn´ı logiku a existuje u nˇej vazba z pohledu. Presenter tak m˚ uˇze reagovat na vstupy uˇzivatel˚ u, kteˇr´ı k aplikaci pˇristupuj´ı právˇe pˇres pohledy, zat´ımco u MVC jsou vstupem uˇzivatele do aplikace HTTP poˇzadavky. BasePresenter

PublicPresenter

PrivatePresenter

HomepagePresenter

UlohaPresenter

KrizovkaPresenter

UzivatelPresenter

TahaciPrirazovaniPresenter

Obrázek 3: schéma struktury presenter˚ u

Celá aplikace je rozdˇelena na dvˇe hlavn´ı ˇca´sti: na veˇrejnou, která je pˇr´ıstupná komukoliv a umoˇzn ˇuje procházen´ı a plnˇen´ı jednotliv´ ych vytvoˇren´ ych kv´ız˚ u, a na soukromou, která je pˇr´ıstupná uˇzivateli po pˇrihláˇsen´ı k jeho osobn´ımu u ´ˇctu. V této ˇca´sti je mu umoˇznˇeno vytváˇret jednotlivé kv´ızy, ukládat je a dále s nimi pracovat. Kaˇzdou z tˇechto ˇcást´ı lze jeˇstˇe dále rozdˇelit. Správné navrˇzen´ı a rozdˇelen´ı struktury presenter˚ u je jedn´ım z pˇredpokad˚ u dobˇre funguj´ıc´ı a udrˇzovatelné aplikace. Jak uvád´ı Grudl na svém blogu (2008), pro návrh struktury by mˇela platit stejná pravidla, která plat´ı pro OOP.4 Vˇsechny presentery, které jsou v aplikaci pouˇz´ıvány, by mˇely tvoˇrit jasnˇe danou hierarchickou strukturu. Kaˇzd´ y presenter má sv˚ uj ˇzivotn´ı cyklus a hned pˇri svém vzniku spouˇst´ı metodu startup(), ve které tak m˚ uˇzeme seskupovat opakuj´ıc´ı se PHP kód, kter´ y se v dané ˇcásti aplikace mus´ı vˇzdy provést. Pˇr´ıkladem m˚ uˇze b´ yt pˇripojen´ı k databázi nebo kontrola pˇrihláˇsen´ı uˇzivatele a jeho pˇr´ıstupov´ ych práv. S t´ımto pˇr´ıstupem nejen ˇze udrˇz´ıme konzistenci v opakuj´ıc´ım se provádˇeném kódu, ale uˇsetˇr´ıme tak ˇcas a bude mnohem snadnˇejˇs´ı aplikaci udrˇzovat a v pˇr´ıpadˇe potˇreby ji bude snadné kdykoliv rozˇs´ıˇrit. 4

Objektovˇe orientované programován´ı.

4.1


29

Veˇrejn´ aˇ c´ ast Tato ˇca´st aplikace je pˇr´ıstupná vˇsem uˇzivatel˚ um, kteˇr´ı k aplikaci pˇristoup´ı. Zde maj´ı moˇznost prohl´ıˇzet si vˇsechny uloˇzené kv´ızy a zkouˇset si jejich ˇreˇsen´ı. Zároveˇ n tato ˇca´st aplikace slouˇz´ı jako vstup do soukromé ˇcásti. Uˇzivatel si zde tedy m˚ uˇze vytvoˇrit sv˚ uj osobn´ı u ´ˇcet a samozˇrejmˇe se k nˇemu i pˇrihlaˇsovat. Vˇsechny tyto operace bude obsluhovat jedin´ y presenter, kter´ y bude zároveˇ n plnit funkci domovské stránky aplikace. Soukrom´ aˇ c´ ast Do této ˇca´sti aplikace m˚ uˇze uˇzivatel pˇristoupit teprve po pˇrihláˇsen´ı ke svému osobn´ımu u ´ˇctu. Zde má moˇznost vytváˇret nové e-learningové kv´ızy, které si po vytvoˇren´ı m˚ uˇze uloˇzit do databáze. Vˇsechny takto uloˇzené kv´ızy si m˚ uˇze procházet stejnˇe jako ve veˇrejné ˇca´sti aplikace. Nav´ıc má moˇznost si jednotlivé kv´ızy znovu upravit a provedené zmˇeny samozˇrejmˇe opˇet uloˇzit – aktualizace existuj´ıc´ıcho záznamu u ´lohy v databázi. Pokud nˇekterou z u ´loh jiˇz nebude cht´ıt dále uchovávát, bude m´ıt uˇzivatel moˇznost záznam z databáze vymazat – po této operaci jiˇz nebude moˇzné u ´lohu obnovit. Vˇsechny tyto operace bude obstarávat uˇzivatelsk´ y presenter, kter´ y bude zároveˇ n plnit funkci uˇzivatelské stránky. Aby si nemohl e-learningové kv´ızy vytváˇret kdokoliv, budou presentery realizuj´ıc´ı jejich tvorbu také um´ıstˇeny do soukromé ˇca´sti aplikace. Je to z toho d˚ uvodu, ˇze jedn´ım z poˇzadavk˚ u na aplikaci bylo, aby bylo moˇzné vytváˇrené u ´lohy ukládat do databáze. Kdyby mohli uˇzivatelé k vytváˇren´ı kv´ız˚ u pˇristupovat bez pˇrihláˇsen´ı, nebylo by moˇzné jednotlivé uˇzivatele od sebe odliˇsit a u ´lohy by tak musely b´ yt teoreticky ukládány pod anonymn´ım uˇzivatelem, kter´ y by zastˇreˇsoval vˇsechny nepˇrihláˇsené uˇzivatele. Cel´ y pˇr´ıstup ale vede ke ˇradˇe nepˇr´ıjemnost´ı, napˇr. by si mohli uˇzivatelé u ´lohy navzájem mazat. Moˇzné ˇreˇsen´ı tohoto problému je umoˇznit uˇzivatel˚ um bez u ´ˇctu vytvoˇrené kv´ızy ukládat pouze na HDD. To ovˇsem zase vede ke komplikac´ım právˇe z hlediska struktury presenter˚ u, protoˇze v soukromé ˇca´sti je potˇreba zajistit operaci ukládaj´ıc´ı kv´ız do databáze a jelikoˇz se jedná o operaci vztahuj´ıc´ı se ke konkrétn´ımu kv´ızu, mˇela by b´ yt souˇcást´ı presenteru daného kv´ızu, kter´ y mus´ı b´ yt pˇr´ıstupn´ y i bez pˇrihláˇsen´ı. Aplikace tedy p˚ ujde cestou nejmenˇs´ıho zla a pro vytváˇren´ı kv´ız˚ u bude povinné pˇrihláˇsen´ı uˇzivatele. Vˇsechny presentery, které budou pˇredstavovat ˇca´st aplikace pro generován´ı nov´ ych kv´ız˚ u, bude zastˇreˇsovat – bude pˇredkem – presenter u ´lohy. V tomto presenteru budou napsány vˇsechny metody, které jsou pro kaˇzd´ y typ kv´ızu shodné. Jedná se pˇredevˇs´ım o opakuj´ıc´ı se operace jako nastavován´ı hodnot, jejich mazán´ı, kontrolu pˇr´ıstup˚ u, nebo deklarace nastaven´ı potˇrebn´ ych atribut˚ u presenteru. Zjednoduˇsenˇe by se tedy dalo ˇr´ıct a celkovˇe tak shrnout u ´ˇcel tohoto presenteru, ˇze obsahuje veˇskerou obecnou aplikaˇcn´ı logiku, která se t´ yká vytváˇren´ı nov´ ych kv´ız˚ u. Z tohoto presenteru jsou následnˇe odvozeny presentery pro kaˇzd´ y typ u ´lohy, ve kter´ ych jsou vytváˇreny vˇsechny komponenty pouˇz´ıváné v aplikaci, které pˇredstavuj´ı

4.2

Implementace aplikace

30

uˇzivatelské formuláˇre slouˇz´ıc´ı ke sbˇeru dat uˇzivatele, na základˇe kter´ ych se následnˇe generuj´ı nové kv´ızy. Alternativn´ım pˇr´ıstupem, kter´ y je moˇzn´ y ve frameworku Nette realizovat, pro oddˇelen´ı soukromé a veˇrejné ˇca´sti aplikace je jej´ı rozˇclenˇen´ı do modul˚ u. Pod t´ımto pojmem se v Nette frameworku rozum´ı urˇcité seskupen´ı presenter˚ u, model˚ u, ˇsablon a komponent, které spolu nˇejak´ ym logick´ ym zp˚ usobem patˇr´ı a tvoˇr´ı tak urˇcitou logickou ˇcást aplikace. Pouˇzit´ım modul˚ u by se dosáhlo jeˇstˇe lepˇs´ıho návrhu, ale pro zachován´ı urˇcité jednoduchosti bylo od modul˚ u upuˇstˇeno a aplikace bude realizována jednoduchou strukturou presenter˚ u zobrazenou na tˇret´ım obrázku a popsanou v pˇredchoz´ım textu.

4.2


Samotná implementace celé aplikace pro generován´ı iteraktivn´ıch e-learningov´ ych komponent je um´ıstˇena na free hostingovém serveru endora.cz. Aplikace je vyvinuta v programovac´ım jazkyku PHP, ve kterém je napsán i Nette framework, jenˇz je pro v´ yvoj aplikace také pouˇzit´ y. Samotná aplikace generuje potˇrebn´ y HTML kód, kter´ y je ve frameworku ukládán pomoc´ı ˇsablon. Tento kód je odes´ılán uˇzivatel˚ um do prohl´ıˇzeˇce. HTML kód je ˇcasto doplnˇen o JavaScript, bez kterého generován´ı nov´ ych kv´ız˚ u stále funguje, ale sn´ıˇz´ı se tak uˇzivatelská pohodlnost a samotné kv´ızy, uˇz ze své samotné podstaty nebudou zobrazitelné. Jako databázov´ y systém aplikace vyuˇz´ıvá MySQL, jenˇz je na uvedeném hostingu pˇr´ıstupn´ y. 4.2.1

Adres´ aˇrov´ a struktura

Aplikaci lze spustit zadán´ım adresy http://znbp.tode.cz/ do zvoleného webového prohl´ıˇzeˇce. Celá aplikace je rozdˇelena do nˇekolika ˇca´st´ı, jejich návrh byl popsán v pˇredchoz´ı kapitole. Nette framework poskytuje pˇredepsanou urˇcitou adresáˇrovou strukturu, která ovˇsem nen´ı nijak závazná a lze ji pro potˇreby konkrétn´ı aplikace adekvátnˇe upravit. V´ ychoz´ı struktura má následuj´ıc´ı podobu – levá stromová struktura. +-root-stranky/ +-app/ | +-models/ | +-presenters/ | +-templates/ | +-config.ini | +-bootstrap.php +-libs/ | +-dibi/ | +-Nette/ +-log/ +-temp/

+-root-stranky/ +-app/ | +-models/ | +-presenters/ | +-templates/ | +-config.ini | +-bootstrap.php +-libs/ | +-dibi/ | +-Nette/ +-log/ +-temp/

4.2

31


+-www/ +-css/ +-images/ +-js/ +-index.php

+-css/ +-images/ +-js/ +-index.php

Pravá stromová struktura zobrazuje aresáˇre um´ıstˇené na serveru endora.cz. Jak je vidˇet, obsah adresáˇre www v doporuˇcené struktuˇre byl pˇresunut pˇr´ımo do koˇrenového adresáˇre stránky. D˚ uvod pro tuto u ´pravu je následuj´ıc´ı. Aby mohlo b´ yt k aplikaci pˇristupováno pˇr´ımo z koˇrenové adresy, mus´ı b´ yt adresáˇr www totoˇzn´ y s koˇrenovou sloˇzkou stránky. Pokud by tomu tak nebylo, k aplikaci by se muselo pˇristupovat pˇres adresu http://znbp.tode.cz/www/. Na nˇekter´ ych serverech vˇsak nen´ı dovoleno zapisovat do jiné neˇz koˇrenové sloˇzky. Z toho d˚ uvodu je obsah adresáˇre www pˇresunut pˇr´ımo do koˇrenu stránky. Aby aplikace fungovala, je nutné tuto zmˇenu struktury prom´ıtnout i do n´ı. To se provede v souboru index.php, kde se pˇrep´ıˇs´ı nˇekteré z definovan´ ych konstant udávaj´ıc´ıch cestu k adresáˇr˚ um aplikace, sloˇzky pro doˇcasné soubory a knihovny. Podrobnˇejˇs´ımu popisu struktury se nebudeme vˇenovat. 4.2.2

Implementace u ´loh v jQuery

Pˇri v´ ybˇeru technologi´ı, které budou pouˇzity k implementaci aplikace, byla jako JavaScriptová knihovna zvolena knihovna jQuery. Hlavn´ım pˇr´ınosem pouˇzit´ı knihovny je zjednoduˇsen´ı zápisu manipulace s elementy DOMu a pˇredevˇs´ım zaruˇcen´ı jednotného chován´ı napˇr´ıˇc vˇsemi nejpouˇz´ıvanˇejˇs´ımi prohl´ıˇzeˇci. Pˇrepsán´ı JavaScriptové ˇca´sti dodan´ ych e-learningov´ ych kv´ız˚ u nen´ı zpravidla nutné, ale pˇrepsán´ım bude doc´ıleno pˇrehlednˇejˇs´ıho zápisu a v urˇcité m´ıˇre i zkrácen´ı celkového délky kódu. Nav´ıc bude jQuery vyˇzadováno pro správn´ y chod kv´ızu, a tak bude muset b´ yt pˇr´ıtomno ve vygenerovan´ ych u ´lohách. Uˇzivatelé budou m´ıt umoˇznˇeno navázat vlastn´ı JS kód na urˇcité události, které bˇehem plnˇen´ı u ´loh nastáváj´ı. T´ım pádem budou moci pˇri tˇechto definic´ıch rovnou pouˇz´ıt zápis JS kódu s vyuˇz´ıt´ım nástroj˚ u, které poskytuje jQuery. Samozˇrejmˇe jim ale nebude nic bránit v psan´ı standardn´ıho JS kódu. Kˇr´ıˇ zovka Pˇri pˇrepracován´ı JavaScriptového kódu, kter´ y zajiˇst’oval interaktivitu pro elearningov´ y kv´ız kˇr´ıˇzovky, nebyly tˇreba témˇeˇr ˇzádné zásadn´ı zásahy do p˚ uvodn´ıho kódu. Zdlouhavé a mnohdy i sloˇzité zápisy v´ ybˇeru element˚ u byly nahrazeny za elegantn´ı jQuery pˇr´ıkazy. Dalˇs´ım m´ıstem, kde doˇslo k u ´pravám, bylo navazován´ı událost´ı. Zde byl zápis celkového kódu znaˇcnˇe zkrácen, protoˇze jQuery poskytuje své vlastn´ı prostˇredky pro navazován´ı událost´ı, které se jiˇz samy postaraj´ı o korektn´ı funkˇcnost ve vˇsech podporovan´ ych prohl´ıˇzeˇc´ıch. Zat´ımco v p˚ uvodn´ım zápisu bylo nutné testovat pˇr´ıtomnost r˚ uzn´ ych objekt˚ u nebo vlastnost´ı v prohl´ıˇzeˇci, pomoc´ı kterého pak bylo moˇzné urˇcit aktuáln´ı prohl´ıˇzeˇc a zvolit podle toho adekvátn´ı

4.2


32

zápis (to vedlo k dvojnásobnému zapisován´ı stejné vˇeci pomoc´ı r˚ uzn´ ych objekt˚ u nebo jejich vlastnost´ı), pˇri pouˇzit´ı jQuery postaˇc´ı jednotn´ y zápis navázán´ı události a knihovna se jiˇz sama postará o detekci prohl´ıˇzeˇce a zvolen´ı adekvátn´ıho zp˚ usobu navázán´ı události. Následuje ukázka takového kódu a jeho nahrazen´ı v´ yraznˇe kratˇs´ım a na prvn´ı pohled srozumitelnˇejˇs´ım zápisem. $(window).keypress(function(event) { klavesnice(event); }); // oproti rozs´ ahlejˇ sı ´mu z´ apisu if (window.addEventListener) window.addEventListener( ’keypress’, function(event) { klavesnice(event); }, true ); else document.attachEvent( ’onkeypress’, function(event) { var objEvent = new Object(); objEvent.type = event.type; objEvent.target = event.srcElement; objEvent.keyCode = event.keyCode; objEvent.charCode = event.keyCode; objEvent.ctrlKey = event.ctrlKey; klavesnice(objEvent); } ); Dalˇs´ı v´ yraznou zmˇenou bylo nahrazen´ı pomˇernˇe sloˇzité detekce prohl´ıˇzeˇce, která bohuˇzel s nedávn´ ym vydán´ım nové verze prohl´ıˇzeˇce Firefox (verze 4) pˇrestala korektnˇe fungovat a konkrétnˇe tuto novou verzi Firefoxu detekovala ˇspatnˇe. JQuery poskytuje pro detekci prohl´ıˇzeˇce podporu v podobˇe atributu globáln´ıho jQuery objektu. K tomuto atributu lze pˇristoupit dvˇema zp˚ usoby, klasick´ ym zápisem jQuery.browser nebo zkrácen´ ym $.browser. Obsahem atributu jsou flagy identifikuj´ıc´ı jednotlivé prohl´ıˇzeˇce. Pˇri zobrazen´ı kv´ızu v prohl´ıˇzeˇci bude definován flag, kterému prohl´ıˇzeˇc odpov´ıdá. Jelikoˇz je pˇri testován´ı d˚ uleˇzité urˇcit, zda je pouˇzit´ y

4.2


33

prohl´ıˇzeˇc Internet Explorer, napsaná testovac´ı podm´ınka se ptá, zda je ˇci nen´ı definována promˇenná jQuery.browser.msie, podle které je jiˇz jednoduché nastavit odpov´ıdaj´ıc´ı znˇen´ı zprávy o ovládán´ı u ´lohy. Tahac´ı pˇr´ıˇrazov´ an´ı Pˇrepsán´ı obsluˇzného JavaScriptu pro tento e-learningov´ y kv´ız bylo stejnˇe jako v pˇredchoz´ım pˇr´ıpadˇe pomˇernˇe jednoduché, ovˇsem rozsah proveden´ ych zmˇen byl mnohem vˇetˇs´ı. Pro zajiˇsten´ı potˇrebné interaktivity, která v tomto kv´ızu pˇredstavuje moˇznost pˇretahován´ı r˚ uzn´ ych prvk˚ u na stránce a jejich umist’ován´ı do ˇrádk˚ u tabulky, byla pouˇzita knihovna jQuery UI. Ta poskytuje nástroje pro vytvoˇren´ı nejr˚ uznˇejˇs´ıch animac´ı, zajiˇstˇen´ı interakce a vytvoˇren´ı prvk˚ u uˇzivatelského rozhran´ı jako jsou di5 alogová okna, teplomˇery pr˚ ubˇehu apod. Jedn´ım z dostupn´ ych prvk˚ u poskytuj´ıc´ı interaktivitu, kter´ y je pouˇzit v tomto kv´ızu, je pˇretahovateln´ y a upustiteln´ y6 objekt. Vˇetˇsina p˚ uvodn´ıch funkc´ı, které v dodan´ ych pˇr´ıkladech zajiˇstovaly celkovou funkcionalitu a umoˇzn ˇovaly pˇretahovat elementy na stránce, byly zcela nahrazeny knihovnou jQuery UI. Urˇcitá ˇcást p˚ uvodn´ıch funkc´ı byla na druhou stranu zachována a byly pouze lehce upraveny pro potˇreby jejich pouˇzitelnosti s touto knihovnou. Poloˇzkám nesetˇr´ıdˇeného seznamu obsahuj´ıc´ı odpovˇedi, které je nutné pˇriˇradit k odpov´ıdaj´ıc´ım kl´ıˇc˚ um, je pomoc´ı metody hybaci pˇriˇrazena tˇr´ıda draggable. Jak je vidˇet v dokumentaci (jQuery UI, 2011), pˇri povolován´ı pˇretahovatelnosti elementu je k dispozici celá ˇskála moˇzn´ ych nastaven´ı ovlivˇ nuj´ıc´ı chován´ı pˇretahovaného objektu a je moˇzné navázat vlastn´ı funkce na celkem ˇctyˇri události, spojené s pˇretahován´ım daného prvku. Oproti p˚ uvodn´ı funkˇcnosti je d´ıky snadnému nastaven´ı pohyblivost vˇsech element˚ u omezena pouze na element body, aby nebylo moˇzné vytáhnout prvek mimo stránku a zp˚ usobit tak jej´ı nekoneˇcné skrolován´ı. Dalˇs´ımi nastaven´ımi jsou jiˇz realizovány konkrétn´ı uˇzivatelská nastaven´ı, která lze pˇri vytváˇren´ı tohoto kv´ızu vyplnit (jde o tˇela vlastn´ıch JS funkc´ı, které jsou tak automaticky navázány na dané události). Druh´ ym interaktivn´ım prvkem na stránce s t´ımto kv´ızem jsou buˇ nky tabulky, do kter´ ych je nutné jednotlivé odpovˇedi um´ıstit. K relizaci tohoto interativn´ıho prvku knihovna opˇet poskytuje efektivn´ı nátroje (jQuery UI, 2011). Z dokumentace lze vyˇc´ıst, jak´ ym zp˚ usobem lze modifikovat chován´ı dan´ ych prvk˚ u a na jaké události lze navázat vlastn´ı funkce. Jednotlivé buˇ nky tabulky, které jsou uloˇzeny v poli c´ıl˚ u, které zároveˇ n slouˇz´ı k vyhodnocován´ı správnosti um´ıstˇen´ı odpovˇedi, jsou procházeny v cyklu a na nˇe aplikována droppable funkce s následuj´ıc´ım nastaven´ım. Jako pˇrij´ıman´ y prvek je pouˇzit selektor tˇr´ıdy draggable, která je nastavena u vˇsech odpovˇed´ı. Pokud by se tedy na stránce objevil i jin´ y pˇretahovateln´ y prvek, kter´ y by nemˇel danou tˇr´ıdu, neˇslo by jej do buˇ nek v tabulce um´ıstit. Pˇri události aktivace a deaktivace, tj. v okamˇziku, kdy zaˇcnou a skonˇc´ı pˇrijatelné prvky b´ yt pˇretahovány, jsou navázány anonymn´ı funkce, ve kter´ ych docház´ı k pˇrebarvován´ı 5 6

Progress bary. Draggable a droppable.

4.2


34

pozad´ı dan´ ych buˇ nek podle uˇzivatelsk´ ych nastaven´ı. Stejn´ ym zp˚ usobem docház´ı ke zmˇenˇe barev i pro události najet´ı odpovˇedi nad buˇ nku tabulky a pˇri odchodu odpovˇedi z buˇ nky (hover efekt). Samotné vyhodnocován´ı správnosti um´ıstˇen´ı odpovˇedi je navázáno na událost upuˇstˇen´ı odpovˇedi do pˇr´ısluˇsné buˇ nky. Vyhodnocovac´ı metoda je velice podobná p˚ uvodn´ımu znˇen´ı. Jako prvn´ı se nav´ yˇs´ı poˇcet pokus˚ u, za kter´ ym následuje kontrola správnosti um´ıstˇen´ı. Pˇri kladném vyhodnocen´ı jsou odpovˇedi a c´ılu nastaveny potˇrebné stylové vlastnosti a jsou provedeny potˇrebné zmˇeny v DOM stromu. Pˇretahovateln´ y prvek a oblast pro um´ıstˇen´ı jsou deaktivovány, aby s nimi jiˇz nebylo moˇzné manipulovat. Dále je nav´ yˇseno poˇcitadlo správn´ ych pokus˚ u, zobrazeny alertové zprávy a pˇr´ıpadnˇe spuˇsten uˇzivatelem definovan´ y JS kód. Pˇri opaˇcném vyhodnocen´ı jsou opˇet podle uˇzivatelsk´ ych nastaven´ı zobrazeny moˇzné zprávy a spouˇstˇen uˇzivatelsk´ y JS kód. Poté následuje kontrola vyplnˇen´ı celého kv´ızu (poˇcitadlo správn´ ych pokus˚ u je stejné jako poˇcet odpovˇed´ı). Pokud je kv´ız u ´spˇeˇsnˇe dokonˇcen, je proveden v´ ypoˇcet u ´spˇeˇsnosti pˇri ˇreˇsen´ı u ´lohy a znovu podle nastaven´ı, které provedl uˇzivatel pˇri vytváˇren´ı u ´lohy, dojde k zobrazen´ı zpráv, manipulaci s DOMem a proveden´ı vlastn´ıho JS kódu. 4.2.3

Funkˇ cn´ı n´ aplˇ n presenter˚ u

Kaˇzd´ y presenter obstarává urˇcitou skupinu uˇzivatelov´ ych poˇzadavk˚ u na aplikaci, které spolu logick´ ym zp˚ usobem souvis´ı. Metody presenter˚ u mohou pˇredstavovat bud’ tzv. pohledy, akce, továrniˇcky komponent, zajiˇstˇen´ı obsluhu signál˚ u, nebo obsluhu událost´ı souvisej´ıc´ıch s formuláˇri. V neposledn´ı ˇradˇe mohou b´ yt jeˇstˇe implementovány metody souvisej´ıc´ı s funkˇcnost´ı presentru jako takového. Patˇr´ı sem napˇr. metoda startup, která se spouˇst´ı pˇri vytváˇren´ı presenteru, nebo metoda beforeRender, která se spouˇst´ı pˇred vykreslován´ım pohledu. Tˇechto metod samozˇrejmˇe existuje v´ıce, ale jejich popisem se tato práce zab´ yvat nebude.7 BasePresenter BasePresenter neobshauje ˇza´dnou aplikaˇcn´ı logiku a slouˇz´ı pouze jako pˇredek vˇsech ostatn´ıch presenter˚ u. Ve struktuˇre presenter˚ u tak zaj´ımá polohu v koˇrenu stromové struktury. PublicPresenter Tento presenter pˇredstavuje ve struktuˇre pˇredka vˇsech presenter˚ u, které jsou dostupné bez pˇrihláˇsen´ı uˇzivatele. Opˇet se zde nenácház´ı ˇza´dná aplikaˇcn´ı logika. D˚ uvodem vytvoˇren´ı tohoto presenteru je pˇredevˇs´ım zachován´ı urˇcité ˇcistoty návrhu. Jeho zaˇclenˇen´ım ˇza´dn´ ym v´ yrazn´ ym zp˚ usobem nen´ı zvˇetˇsována sloˇzitost aplikace a je jasnˇe definován pˇredek pro dalˇs´ı presentery, které mohou v budoucnu aplikaci rozˇs´ıˇrit. Zároveˇ n poskytuje prostor, do kterého lze kdykoliv doplnit jak´ ykoliv kód, kter´ y by byl vyˇzadován pro vˇsechny veˇrejné stránky aplikace. 7

Podrobnosti lze naj´ıt v dokumentaci Nette na adrese http://http://doc.nette.org/cs/.

4.2


35

HomepagePresenter Jak bylo uvedeno dˇr´ıve, tento presenter pln´ı funkci domovské stránky celé aplikace. Funkc´ım, které jsou uˇzivateli na domovské stránce aplikace dostupné, tedy odpov´ıdaj´ı i implementované metody tohoto presenteru. Vytváˇr´ı se zde celkem dvˇe komponenty, které jsou následnˇe pouˇzity ve dvou pohledech. Jedná se o pˇrihlaˇsovac´ı a registraˇcn´ı formuláˇr. Pro obsluhu událost´ı spojen´ ych s tˇemito formuláˇri jsou implementovány metody, které reaguj´ı na stisknut´ı konkrétn´ıch tlaˇc´ıtek formuláˇr˚ u. Událost obecného odeslán´ı formuláˇre nen´ı ani pro jeden z nich obsluhována ˇzádnou metodou. Na v´ ychoz´ı stránce tohoto presenteru je zobrazen seznam uloˇzen´ ych u ´loh a pˇrihlaˇsovac´ı formuláˇr. Pˇri velkém poˇctu u ´loh je jejich v´ ypis stránkován. V metodˇe vykresluj´ıc´ı domovskou stránku je tedy proveden v´ ypoˇcet, od kolikáté u ´lohy se bude aktuáln´ı stránka u ´loh zobrazovat. Tento poˇcet (spolu s dalˇs´ımi promˇenn´ ymi) je pˇredán metodˇe modelu u ´loh, kter´ y vrát´ı potˇrebné záznamy z databáze, jeˇz jsou v odpov´ıdaj´ıc´ı ˇsabolnˇe vykresleny. Princip zobrazován´ı jednotliv´ ych u ´loh, které zajiˇst’uje dalˇs´ı vykreslovac´ı metoda, bude podrobnˇe popsán ve zvláˇstn´ı kapitole. PrivatePresenter ´ celem tohoto presenteru je zajistit proveden´ı veˇskerého kódu aplikaˇcn´ı logiky, Uˇ kter´ y je nutné provést pro soukromou ˇca´st aplikce. Ta je pˇr´ıstupná uˇzivatel˚ um po pˇrihláˇsen´ı. Z pˇredchoz´ı vˇety lze snadno odvodit, jak´ y kód se bude pˇri spouˇstˇen´ı potomk˚ u PrivatePresenteru provádˇet. Provádˇen´ y kód je velmi jednoduch´ y a pˇr´ımoˇcar´ y. Probˇehne kontrola toho, zda je uˇzivatel pˇrihláˇsen. Pokud nen´ı, tak je pˇresmˇerován na domovskou stránku aplikace, kde je zobrazen pˇrihlaˇsovac´ı formuláˇr. Pˇri kontrole pˇrihláˇsen´ı prob´ıhá jeˇstˇe kontrola d˚ uvodu odhláˇsen´ı uˇzivatele. Aplikace totiˇz automaticky uˇzivatele po 30 minutách neaktivity odhlás´ı. V takovém pˇr´ıpadˇe je tˇreba uˇzivateli zobrazit upozornˇen´ı, proˇc byl aplikac´ı odhláˇsen. Pro vˇsechny tyto kontroly a zobrazen´ı zprávy poskytuje framework potˇrebné prostˇredky. UzivatelPresenter Uˇzivatelsk´ y presenter implementuje pouze nˇekolik málo metod. Prvn´ı z nich je metoda pro vykreslen´ı v´ ychoz´ıho pohledu, kter´ y zobrazuje seznam vˇsech uˇzivatelov´ ych u ´loh. Obdobnˇe jako na domovské stránce je v´ ypis pro vˇetˇs´ı pˇrehlednost stránkován a metoda tak opˇet provád´ı potˇrebn´ y v´ ypoˇcet, jehoˇz v´ ystupn´ı promˇenné jsou pˇredávány metodˇe modelu u ´loh, vracej´ıc´ı adekvátn´ı záznamy z databáze. Zobrazován´ı u ´loh je uˇzivateli samozˇrejmˇe umoˇznˇeno stejnˇe jako na domovské stránce aplikace. Jelikoˇz problém vykreslován´ı u ´lohy ˇreˇs´ı HomepagePresenter a zobrazen´ı u ´lohy pro pˇrihláˇseného uˇzivatele se nijak neliˇs´ı, nemus´ı b´ yt stejná metoda implementována i v uˇzivatelském presenteru. M´ısto toho se zobrazován´ı u ´lohy pˇrenechá

4.2


36

na starost presenteru domác´ı stránky, na kter´ y se v ˇsablonˇe uˇzivatelské stránky pouze patˇriˇcnˇe odkáˇzeme. Jelikoˇz m˚ uˇze uˇzivatel své uloˇzené u ´lohy mazat, je implementována metoda, která tuto operaci provád´ı. Mazán´ı nen´ı tˇreba realizovat dalˇs´ım pohledem, a proto je provádˇeno v metodˇe obsluhuj´ıc´ı signál smazán´ı u ´lohy. Pˇri ne´ uspˇeˇsném pokusu o smazán´ı u ´lohy se zobrazuje chybová hláˇska, pˇri u ´spˇeˇsném se zobrazuje zpráva informuj´ıc´ı o u ´spˇeˇsném smazán´ı u ´lohy. UlohaPresenter Presenter u ´lohy je pˇredkem vˇsech typ˚ u kv´ız˚ u, které je v aplikaci moˇzné vytváˇret. Obsahuje celou ˇradu metod a atribut˚ u, které zajiˇst’uj´ı veˇskerou apikaˇcn´ı logiku spojenou s vytváˇren´ım u ´lohy, jako je kontrola oprávnˇen´ı pˇr´ıstupu do na sebe navazuj´ıc´ıch ˇcást´ı tvorby kv´ızu, uchováván´ı hodnot, jejich nastavován´ı a pˇrenáˇsen´ı mezi stránkami atd. Metoda startup, která se spouˇst´ı pˇri vytváˇren´ı presenteru (tento presenter je abstraktn´ı, takˇze nelze vytváˇret jeho instance a slouˇz´ı pouze jako pˇredek pro konkrétn´ı typy kv´ız˚ u, v jejichˇz metodˇe startup se spouˇst´ı metoda pˇredka), vykonává hned nˇekolik d˚ uleˇzit´ ych u ´kon˚ u, bez kter´ ych by vytváˇren´ı nov´ ych kv´ız˚ u nebylo moˇzné. Nejdˇr´ıve se z´ıská objekt reprezentuj´ıc´ı uˇzivatelovu session – resp. jej´ı ˇca´st pro dan´ y kv´ız. V session jsou uchovávány hodnoty formuláˇr˚ u, do kter´ ych uˇzivatel zadává pˇri vytváˇren´ı u ´lohy potˇrebné hodnoty. D˚ uvodem pro uchováván´ı hodnot do session je rozˇclenˇen´ı celého procesu tvorby na d´ılˇc´ı ˇcásti, pˇriˇcemˇz kaˇzdá se odehrává na ˇ své vlastn´ı stránce, mezi kter´ ymi je tˇreba hodnoty pˇrenáˇset. Rada prvk˚ u se pro kaˇzd´ y kv´ız jmenuje stejnˇe, napˇr. název kv´ızu nebo jeho popis. Aby nedocházelo k pˇrekr´ yván´ı tˇechto stejnˇe pojmenovan´ ych hodnot mezi r˚ uzn´ ymi typy kv´ız˚ u, jsou v session pouˇzity jmenné prostory. Jejich pojmenován´ı odpov´ıdá názvu presenteru daného typu u ´lohy. Dalˇs´ım krokem je pˇr´ıpadné vymazán´ı hodnot, které jsou momentálnˇe v session ˇ stˇen´ı uloˇzeny. Tento reset se provád´ı na základˇe nastaven´ı parametru reset. Ciˇ hodnot se provád´ı napˇr. vˇzdy pˇri zaˇcátku vytváˇren´ı nové u ´lohy. Dále se provád´ı vytváˇren´ı promˇenn´ ych v session potˇrebn´ ych pro uchováván´ı hodnot z formuláˇr˚ u. Toto vytváˇren´ı a nastavován´ı v´ ychoz´ıch hodnot je podm´ınˇeno neexistenc´ı tˇechto promˇenn´ ych. Jelikoˇz m˚ uˇze uˇzivatel vytvoˇrené u ´lohy pozdˇeji kdykoliv upravovat, je tˇreba naˇc´ıst uloˇzené hodnoty z databáze. To obstarává dalˇs´ı ˇca´st kódu, pˇriˇcemˇz vˇse je podm´ınˇeno nastaven´ım parametru update, kter´ y obsahuje identifikátor upravované u ´lohy. V závˇeru provádˇen´ı celé metody jsou nastavovány hodnoty atribut˚ um presenteru. Dalˇs´ı metody se staraj´ı o manipulaci s hodnotami uchováván´ ych v session. Prvn´ı dvˇe metody ukládáj´ı hodnoty z formuláˇre do session. Navzájem se liˇs´ı pouze v pˇredávaném parametru, kdy jedna obdrˇz´ı objekt reprezentuj´ıc´ı samotn´ y formuláˇr a druhá objekt odes´ılac´ıho tlaˇc´ıtka formuláˇre. Datová struktura, ve které jsou data v sesion uchovávána, je asociativn´ı pole, kde kaˇzdá poloˇzka pˇredstavuje hodnoty

4.2


37

z jednoho formuláˇre a kl´ıˇcem je název tohoto formuláˇre. Hodnoty z formuláˇre jsou opˇet uchovávány jako asociativn´ı pole, kde kl´ıˇci jsou názvy prvk˚ u formuláˇre a jejich hodnoty jsou hodnoty dan´ ych prvk˚ u. Jednotlivé hodnoty je tˇreba po jejich uloˇzen´ı do session (pˇri dalˇs´ım zobrazen´ı stránky) naˇc´ıst do formuláˇre, coˇz obstarává metoda, která si na základˇe jména argumentem pˇredaného formuláˇre najde hodnoty v session a nastav´ı je prvk˚ um formuláˇre. D´ıky rozdˇelen´ı procesu vytváˇren´ı kv´ızu na nˇekolik na sebe navzájem navazuj´ıc´ıch formuláˇr˚ u je tˇreba zajistit kontrolu pˇr´ıstupu a zabránit tak uˇzivateli v pˇr´ıstupu k následuj´ıc´ım frormuláˇr˚ um bez toho, aby vyplnil pˇredchoz´ı. Tato kontrola je implementována opˇet metodou presenteru a vyuˇz´ıvá následuj´ıc´ı princip. Kaˇzd´ y z presenter˚ u pˇredstavuj´ıc´ı generátor kv´ızu mus´ı m´ıt definován atribut workflow. Jedná se o jednoduché pole, jehoˇz obsahem jsou názvy pohled˚ u,8 na kter´ ych jsou um´ıstˇeny jednotlivé formuláˇre pˇresnˇe v tom poˇrad´ı, v jakém po sobˇe následuj´ı pˇri samotném vytváˇren´ı nového kv´ızu. Pˇri pˇr´ıstupu na nˇekter´ y z pohled˚ u tedy probˇehne pˇres atribut workflow zjiˇstˇen´ı, zda jiˇz jsou v session uloˇzeny hodnoty z pˇredchoz´ıch formuláˇr˚ u. Pokud hodnoty nejsou nalezeny, je uˇzivatel pˇresmˇerován na posledn´ı nevyplnˇen´ y formuláˇr a o pˇresmˇerován´ı je informován pˇr´ısluˇsnou zprávou. Samotná kontrola je volaná vˇzdy v metodˇe, která se automaticky spouˇst´ı pˇred vykreslen´ım jakéhokoliv pohledu daného presenteru. V této metodˇe docház´ı i k nastavován´ı nadpis˚ u. Toto nastavován´ı prob´ıhá na základˇe aktuáln´ıho pohledu, podle kterého se vybere odpov´ıdaj´ıc´ı nadpis a zobraz´ı se do ˇsablony. Vˇsechny nadpisy jsou uchovávány stejn´ ym zp˚ usobem jako názvy pohled˚ u ve workflow, a to v atributu menu. Zobrazen´ı nadpis˚ u má jasn´ y u ´ˇcel – usnadnit uˇzivateli orientaci mezi formuláˇri. Ukládán´ı vytvoˇren´ ych kv´ız˚ u na HDD prob´ıhá na zvláˇstn´ım pohledu, kter´ y je pro vˇsechny u ´lohy stejn´ y. Aplikace je postavena tak, ˇze na konci vytváˇren´ı kaˇzdé u ´lohy je fináln´ı stránka/pohled s povinn´ ym názvem u ´loha. Tento pohled zobrazuje právˇe vytvoˇrenou u ´lohu. Podrobnˇejˇs´ı popis zp˚ usobu vykreslován´ı bude následovat v kapitole Vykreslován´ı u ´lohy. Samotné uloˇzen´ı u ´lohy lze provést bud’ na domovské uˇzivatelské stránce, kde je pro tento u ´ˇcel um´ıstˇen odkaz v pˇrehledu uˇzivatelov´ ych u ´loh, nebo rovnou pˇri vytváˇren´ı u ´lohy, a to na fináln´ı stránce, která zobrazuje vytvoˇrenou u ´lohu. Pohled pro uloˇzen´ı oˇcekává parametr id, jehoˇz v´ ychoz´ı hodnota je nastavena na NULL. Pokud je tedy id zadáno, dojde k naˇcten´ı u ´lohy z databáze. Neˇz se stránka zobraz´ı, docház´ı k nastaven´ı speciáln´ıho layoutu, d´ıky kterému nebude ve staˇzené stránce zobrazen HTML kód patˇr´ıc´ı k aplikaci generátoru. Zobrazen´ı stránky ale pˇredcház´ı jeˇstˇe odeslán´ı nˇekolika HTTP hlaviˇcek, které donut´ı prohl´ıˇzeˇc stránku stáhnout uˇzivateli na disk m´ısto jej´ıho zobrazen´ı v oknˇe prohl´ıˇzeˇce. Oproti tomu ukládán´ı u ´lohy do databáze nevyˇzaduje ˇzádnou zváˇstn´ı reˇzii. Pouze se vytvoˇr´ı potˇrebná datová struktura, která se jednoduch´ ym vkládac´ım dotazem, kter´ y je definovan´ y v modelu u ´loh, uloˇz´ı do databáze. Pˇri tomto ukládán´ı se pouze kontroluje nastaven´ı parametru id, kter´ y signalizuje aktualizaci existuj´ıc´ıho záznamu 8

Tyto n´ azvy se nav´ıc shoduj´ı s n´ azvy formuláˇr˚ u – komponent.

4.2


38

u ´lohy v databázi. Po u ´spˇeˇsném uloˇzen´ı jsou hodnoty vymazány ze session a uˇzivatel je pˇresmˇerován na uˇzivatelskou stránku. Posledn´ı metodou je obecnˇe definovaná událost kliknut´ı tlaˇc´ıtka zpˇet ve formuláˇri. Zde opˇet najde uplatnˇen´ı atribut workflow, pomoc´ı kterého se zjist´ı pohled, kter´ y pˇredcház´ı pohledu stávaj´ıc´ımu a pˇresmˇeruje na nˇej uˇzivatele. Jak je vidˇet, presenter u ´lohy implementuje vˇsechny potˇrebné metody, které jsou pro správnou funkˇcnost generátoru konkrétn´ı u ´lohy nezbytné. Zároveˇ n jsou nˇekteré metody implementovány dostateˇcnˇe obecnˇe tak, aby bezproblémovˇe fungovaly a poskytly pro kaˇzdou z u ´loh solidn´ı základ. Jednu ze stˇeˇzejn´ıch metod, jej´ımˇz u ´kolem je zpracován´ı vˇsech nastaven´ı dané u ´lohy, bohuˇzel nebylo moˇzné implementovat zde v pˇredkovi. Tento problém ˇreˇs´ı rozhran´ı, které mus´ı kaˇzd´ y z presenter˚ u konkrétn´ı u ´lohy implementovat pro své správné fungován´ı. Podrobnˇeji bude vˇse vysvˇetleno v jedné z následuj´ıc´ıch kapitol. Pˇri popisu presenter˚ u pro konkrétn´ı u ´lohy se budou popisovat pouze implementace metody zm´ınˇeného rozhran´ı a jednotlivé formuláˇre neboli komponenty, jelikoˇz témˇeˇr vˇsechna aplikaˇcn´ı logika je dˇedˇena z presenteru u ´loh. Konkrétn´ı u ´lohy tak obsahuj´ı pouze implementace metod vytváˇrej´ıc´ı potˇrebné komponenty a reakce na stisk tlaˇc´ıtek, definovan´ ych v tˇechto komponentách. KrizovkaPresenter Generátor e-learningové u ´lohy kˇr´ıˇzovky obsahuje celkem pˇet formuláˇr˚ u, které mus´ı uˇzivatel pro vytvoˇren´ı nové kˇr´ıˇzovky vyplnit. Nejdˇr´ıve se vyplˇ nuj´ı obecné parametry u ´lohy, mezi které patˇr´ı název, popis a poˇcet ˇra´dk˚ u kˇr´ıˇzovky. Zejména poˇcet ˇra´dk˚ u je d˚ uleˇzit´ y, protoˇze od nˇej se bude odv´ıjet zejména mnoˇzstv´ı ostatn´ıch nastaven´ı. Komponenta prvn´ıho formuláˇre tedy obsahuje pouze jednoduché prvky, jsou to dvˇe pole pro text a jedna oblast pro text. Hned v druhém kroku je nutné zadat samotnou náplˇ n kˇr´ıˇzovky. Uˇzivatel si zde tedy vol´ı legendu a odpovˇedi pro jednotlivé ˇrádky kˇr´ıˇzovky a mus´ı samozˇrejmˇe urˇcit, kolikáté p´ısmeno v odpovˇedi bude souˇcást´ı tajenky. Zde je tedy nutné zajistit kontrolu zadané pozice, která mus´ı b´ yt v rozmez´ı délky odpovˇedi (tj. interval od jedné do poˇctu p´ısmen odpovˇedi vˇcetnˇe). Pro realizován´ı této kontroly (bohuˇzel v Nette, které poskytuje celou ˇradu pˇreddefinovan´ ych validaˇcn´ıch pravidel pro nejpouˇz´ıvanˇejˇs´ıch testy uˇzivatelsk´ ych vstup˚ u, jako kontrola vyplnˇen´ı pole, vynucen´ı typu ˇc´ısla nebo vyhovˇen´ı regulárn´ımu v´ yrazu) neexistuje pˇredpˇripravené pravidlo. Naˇstˇest´ı je moˇzné definovat si vlastn´ı validátory. Ty jsou realizovány jako tˇr´ıdy, jejichˇz metody vrac´ı pravdivostn´ı hodnotu, vyhovˇel nebo nevyhovˇel validaci. Zadané pozice jsou tedy kontrolovány validaˇcn´ı metodou pozice tˇr´ıdy Validator, která jako parametr pˇreb´ırá hodnotu pole odpovˇedi. V tomto formuláˇri je jeˇstˇe moˇzné zadat znˇen´ı hlavn´ı legendy pro celou kˇr´ıˇzovku, v jej´ımˇz textu mus´ı b´ yt ve sloˇzen´ ych závorkách uvedeno velk´ ymi p´ısmeny znˇen´ı tajenky. Pˇri vyplnˇen´ı hlavn´ı legendy je tedy tˇreba zkontrolovat, zda uvedená tajenka souhlas´ı s vyznaˇcen´ ymi p´ısmeny v odpovˇed´ıch. Zde se opˇet vyuˇzije dˇr´ıve pouˇzitá validaˇcn´ı tˇr´ıda, ve které je implementována metoda tajenka, jej´ımˇz argumentem je pole pozic a odpovˇed´ı, na základˇe kter´ ych se provede porovnán´ı a vyhodnocen´ı správnosti.

4.2


39

Jako dalˇs´ı je na ˇradˇe stanoven´ı vzhledu kˇr´ıˇzovky. Pˇr´ısluˇsná komponenta nen´ı nijak sloˇzitá a odpov´ıdaj´ı tomu i pouˇzitá validaˇcn´ı pravidla. Vˇsechny barvy je nutné zadávat v hexadecimáln´ım tvaru, kter´ y je uvozen mˇr´ıˇzkou (#). Pro kontrolu zadaného tvaru jsou pouˇzity regulárn´ı v´ yrazy. Aby byl v´ ybˇer barvy pro uˇzivatele co nejjednoduˇsˇs´ı, je pouˇzit JavaScript, kter´ y vˇsechna textová pole promˇen´ı na GUI widget pro v´ ybˇer barvy, kter´ y je znám´ y z grafick´ ych editor˚ u. Vˇsem textov´ ym pol´ım je tedy pˇriˇrazena potˇrebná tˇr´ıda, pomoc´ı které JavaScript identifikuje daná pole. Následnˇe je nutné nastavit zp˚ usob nápovˇedy. Automaticky je nastavena moˇznost nápovˇedy následuj´ıc´ıho p´ısmene. Tv˚ urce kˇr´ıˇzovky m˚ uˇze nastavit i nápovˇedu formou druhé, dodateˇcné legendy, kterou si m˚ uˇze ˇreˇsitel u ´lohy zobrazit. Pˇri definován´ı komponenty byla pouˇzita podm´ınˇená pravidla validace, která Nette umoˇzn ˇuje snadno pouˇz´ıt. Pˇri zaˇskrtnut´ı zapnut´ı druhé legendy bude nutné vyplnit znˇen´ı druhé legendy pro kaˇzd´ y ˇrádek tajenky. V opaˇcném pˇr´ıpadˇe jejich vyplnˇen´ı aplikace samozˇrejmˇe nevyˇzaduje. Nette nav´ıc zaˇr´ıd´ı automatické skr´ yván´ı a zobrazován´ı tˇechto prvk˚ u na základˇe hodnoty zaˇskrtávac´ıho pol´ıˇcka pro zapnut´ı druhé legendy. Posledn´ım krokem pˇri vytváˇren´ı je nastaven´ı JavaScriptov´ ych událost´ı. U kˇr´ıˇzovky jsou identifikovány události prvn´ıho kliknut´ı na ˇra´dek, správné vyplnˇen´ı odpovˇedi, ˇspatné vyplnˇen´ı odpovˇedi a správné vyplnˇen´ı celé kˇr´ıˇzovky. Pro kaˇzdou z tˇechto událost´ı má uˇzivatel moˇznost nastavit bud’ znˇen´ı alertové zprávy, napsat tˇelo vlastn´ı JavaScriptové funkce nebo na události nenavazovat ˇza´dnou akci. Implementace metody rozhran´ı zpracovává zadané hodnoty do ˇsablony následuj´ıc´ım zp˚ usobem. Vˇsechny hodnoty z formuláˇr˚ u jsou do ˇsablony vkládány ve stejné datové struktuˇre, v jaké jsou z´ıskány pˇr´ımo z formuláˇre. Vyj´ımkou jsou data z druhého formuláˇre, která jsou, pro lepˇs´ı práci v ˇsablonˇe, roztˇr´ıdˇená do zvláˇstn´ıch promˇenn´ ych. Vˇsechny legendy a odpovˇedi jsou um´ıstˇeny do stejnˇe pojmenovan´ ych promˇenn´ ych. Dále zde docház´ı k urˇcen´ı pozice sloupce tajenky, k nastaven´ı hlavn´ı legendy, ve které je m´ısto tajenky um´ıstˇen poˇcet teˇcek odpov´ıdaj´ıc´ı délce tajenky. Jako posledn´ı zde docház´ı k rozˇs´ıˇren´ı jednotliv´ ych odpovˇed´ı o mezery, které pˇredcház´ı samotnému slovu. Tento poˇcet mezer odpov´ıdá poˇctu buˇ nek v kˇr´ıˇzovce, které pln´ı funkci odsazen´ı slova, aby byla p´ısmena tajenky pˇresnˇe zarovnaná pod sebou do sloupce. TahaciPrirazovaniPresenter Komponenty, které je tˇreba pro generátor tohoto e-learningového kv´ızu definovat, budou velmi podobné komponentám kˇr´ıˇzovky. Jako prvn´ı je pˇri vytváˇren´ı tˇreba opˇet definovat základn´ı parametry jako je název u ´lohy, voliteln´ y popis a povinn´ y poˇcet prvk˚ u, které bude ˇreˇsitel kv´ızu pˇriˇrazovat ke kl´ıˇc˚ um. V dalˇs´ım formuláˇri se nastavuj´ı konkrétn´ı prvky u ´lohy. Podle zadaného poˇctu prvk˚ u v pˇredchoz´ım kroku mus´ı nyn´ı uˇzivatel vyplnit znˇen´ı odpovˇedi a kl´ıˇc, kter´ y k dané odpovˇedi náleˇz´ı. Volitelnˇe m˚ uˇze jeˇstˇe vyplnit zadán´ı u ´lohy. Pokud ale zadán´ı nevypln´ı, bude ve v´ ysledném kv´ızu pouˇzito v´ ychoz´ı, obecnˇe formulované zadán´ı u ´kolu. Zde nebyla tˇreba ˇza´dná sloˇzitˇejˇs´ı validaˇcn´ı pravidla a pˇri definici byla pouˇzita pˇreddefinovaná pravidla Nette.

4.2


40

V dalˇs´ım kroku tvorby kv´ızu mus´ı uˇzivatel definovat barevn´ y vzhled jednotliv´ ych prvk˚ u jako jsou barva pozad´ı a p´ısma. Tyto barevné kombinace se vztahuj´ı k r˚ uzn´ ym stav˚ um aplikace (napˇr. pˇretahován´ı odpovˇedi myˇs´ı), které jsou dále nastavovány v posledn´ım formuláˇri JavaScriptov´ ych událost´ı. Mnoˇzstv´ı tˇechto stav˚ u je o poznán´ı bohatˇs´ı neˇz u pˇredeˇslé kˇr´ıˇzovky. Je to dáno pˇredevˇs´ım povahou kv´ızu. Uˇzivatel zde má moˇznost definovat, jak´ ym zp˚ usobem bude zobrazeno zadán´ı u ´lohy nebo jej´ı ovládán´ı, a to bud’ formou alert zpávy, zobrazen´ı pˇr´ımo na stránce s u ´lohou nebo zobrazen´ı zakáˇze u ´plnˇe. Pˇri jejich zobrazen´ı má nav´ıc jeˇstˇe moˇznost volby dodateˇcn´ ych nastaven´ı, které umoˇzn´ı skryt´ı zadán´ı po splnˇen´ı u ´lohy nebo opˇetovné zobrazen´ı zadán´ı pomoc´ı pˇr´ısluˇsného tlaˇc´ıtka. Dalˇs´ı moˇznosti nastaven´ı se jiˇz vztahuj´ı k r˚ uzn´ ym stav˚ um aplikace. Pro událost pˇretahován´ı odpovˇedi lze nastavit, zda se budou (a pˇr´ıpadnˇe kdy) zv´ yrazˇ novat oblasti pro um´ıstˇen´ı odpovˇedi, které tak usnadn´ı ˇreˇsiteli u ´lohy jej´ı ovládán´ı. Dále lze zvolit, zda bude pˇretahován´ı odpovˇedi znázornˇeno pomoc´ı p˚ uvodn´ıho textu nebo se vytvoˇr´ı pomocná kopie a nechyb´ı ani moˇznost napsán´ı tˇela vlastn´ı JS funkce, která se bude vˇzdy bˇehem pˇretahován´ı odpovˇedi provádˇet. Pro událost správného nebo ˇspatného um´ıstˇen´ı odpovˇedi je moˇzné nastavit znˇen´ı alert zprávy a kolikrát se má zpráva zobrazit, pˇr´ıpadnˇe lze opˇet napsat vlastn´ı JS. Dalˇs´ı nastaven´ı umoˇzn ˇuje upravit chován´ı aplikace pˇri splnˇen´ı u ´lohy, kdy lze zobrazit vlastnoruˇcnˇe napsanou zprávu formou alertu nebo pˇr´ımo na stránce a opˇet je moˇzné napsat vlastn´ı JS. Jako posledn´ı je moˇzné nastavit zobrazen´ı u ´spˇeˇsnosti pˇri plnˇen´ı u ´lohy, které lze (stejnˇe jako zprávu pˇri splnˇen´ı u ´lohy) um´ıstit pˇr´ımo do stránky nebo zobrazit ve formˇe JS alertu. Pˇri definován´ı posledn´ıho formuláˇre bylo pouˇzito mnoho podm´ınˇen´ ych validaˇcn´ıch pravidel, jejich podrobnˇejˇs´ı popis je vˇsak zbyteˇcn´ y, protoˇze se jedná o stále dokola se opakuj´ıc´ı princip, kter´ y byl popsán v pˇredchoz´ı kapitole. Implementace metody z rozhran´ı pˇredzpracovává uˇzivatelská nastaven´ı do ˇsablony následuj´ıc´ım zp˚ usobem. Vˇsechny hodnoty jsou do ˇsablony vloˇzeny ve stejné datové struktuˇre (asociativn´ı pole), které je z´ıskano pˇr´ımo z daného formuláˇre. Vyj´ımku tvoˇr´ı druh´ y formuláˇr, ve které jsou nastavovány kl´ıˇce a odpovˇedi. Hodnoty jsou roztˇr´ıdˇeny do zvláˇstn´ıch promˇenn´ ych. Vˇsechny odpovˇedi a kl´ıˇce jsou um´ıstˇeny do stejnˇe pojmenovan´ ych pol´ı pro jednoduˇsˇs´ı iterace nad tˇemito hodnotami. Docház´ı zde i k nastavován´ı v´ ychoz´ıho znˇen´ı zprávy o ovládán´ı a nastaven´ı obecného znˇen´ı zadán´ı u ´lohy, pokud jej uˇzivatel nezadal sám. Jelikoˇz je z povahy u ´lohy logické, aby poˇrad´ı kl´ıˇc˚ u v tabulce, pokud moˇzno neodpov´ıdlo poˇrad´ı odpovˇed´ı v seznamu, je zde náhodnˇe generováno poˇrad´ı odpovˇed´ı v seznamu. To zajist´ı náhodné rozm´ıstˇen´ı odpovˇed´ı pˇri kaˇzdém naˇcten´ı u ´lohy. 4.2.4

Zpracov´ an´ı uˇ zivatelsk´ ych nastaven´ı

Vygenerován´ı veˇskerého kódu jednotliv´ ych u ´loh se odehrává v posledn´ım kroku tvorby nov´ ych e-learningov´ ych u ´loh. T´ımto posledn´ım krokem je vˇzdy zobrazen´ı právˇe vytvoˇrené u ´lohy. Jak jiˇz bylo popsáno v´ yˇse, kaˇzd´ y presenter pˇredstavuj´ıc´ı generátor konkrétn´ıch kv´ız˚ u mus´ı implementovat rozhran´ı IUlohaValuesParser. Toto

4.2


41

rozhran´ı má velmi jednoduchou definici, jelikoˇz obsahuje pouze jednu statickou metodu. interface IUlohaValuesParser { public static function parseValues($presenter, $allValues); } Tato metoda slouˇz´ı ke zpracován´ı vˇsech uˇzivatelsk´ ych nastaven´ı, která jsou mezi stránkami generátoru pˇrenáˇsena v session. Toto zpracován´ı m˚ uˇze jednotlivá data jakkoliv pozmˇenit nebo s nimi provádˇet potˇrebné operace, vˇse záleˇz´ı od konkrétn´ıho druhu kv´ızu a sloˇzitosti datov´ ych struktur, se kter´ ymi se pracuje. U obou implementovan´ ych u ´loh spoˇc´ıvá obecnˇe toto zpracován´ı v roztˇr´ıdˇen´ı sloˇzit´ ych asociativn´ıch pol´ı na menˇs´ı jednotky, se kter´ ymi lze v ˇsablonˇe lépe pracovat. Zároveˇ n jsou z dat vytváˇreny i nové promˇenné, jejichˇz hodnot bylo dosaˇzeno nˇejak´ ym v´ ypoˇctem ˇci jinou operac´ı nad daty uˇzivatelsk´ ych nastaven´ı. Konkrétnˇe byly tyto metody pro jednotlivé generátory popsány v pˇredchoz´ı kapitole. 4.2.5

Vykreslov´ an´ı u ´lohy

Vykreslen´ı uloˇzené u ´lohy v databázi je zajiˇst’ováno metodou presenteru Homepage, kter´ y nen´ı pˇredkem presenter˚ u konkrétn´ıch typ˚ u u ´loh. Zahrnut´ı této metody do presenteru domovské stránky aplikace má následuj´ıc´ı d˚ uvod. D´ıky rozdˇelen´ı aplikace na soukromou a veˇrejnou ˇcást, jsou presentery pro generován´ı nov´ ych u ´loh dostupné pouze pro pˇrihláˇsené uˇzivatele. Nen´ı tedy moˇzné pouˇz´ıvat ve veˇrejné ˇca´sti aplikace metodu pro vykreslen´ı u ´lohy pˇr´ımo z presenteru daného generátoru. Je tedy nutné napsat implementaci této metody dostateˇcnˇe obecnˇe, aby bezproblémovˇe fungovala pro vˇsechy typy kv´ız˚ u, které jsou a budou implementovány. Vˇse zajiˇst’ujˇe následuj´ıc´ı kód. public function renderUloha($id) { $row = Ulohy::fetchSingle($id); eval(’$allValues = ’.$row[’uloha’].’;’); $pres = $row[’typ’]; switch ($pres) { case "Krizovka": KrizovkaPresenter::parseValues( $this, $allValues ); break; case "TahaciPrirazovani": TahaciPrirazovaniPresenter::parseValues(

4.2

42


$this, $allValues ); break; default: $this->flashMessage("Neznamy typ ulohy.", "error"); $this->redirect("default"); break; } $this->template->public = 1; $this->template->dir = $pres; $this->setLayout("uloha"); $this->template->setFile( APP_DIR . "/templates/$pres/uloha.latte" ); } Metoda oˇcekává jako parametr identifikátor u ´lohy. Ten slouˇz´ı k v´ ybˇeru záznamu u ´lohy z databáze, kter´ y je realizován statickou metodou modelu u ´loh. Vzhledem k tomu, ˇze veˇskerá nastaven´ı jsou uchovávána jako PHP kód reprezentuj´ıc´ı datovou strukturu tˇechto nastaven´ı, pomoc´ı funkce eval naˇcteme tuto strukturu do promˇenné $allValues. Dále se do promˇenné $pres ukládá název presenteru zobrazované u ´lohy. Podle presenteru se poté zavolá statická metoda pˇripravuj´ıc´ı potˇrebné promˇenné, které jsou vloˇzeny do ˇsablony. Dalˇs´ı promˇenná public slouˇz´ı pro zobrazován´ı uˇzivatelsk´ ych tlaˇc´ıtek pro ukládán´ı kv´ız˚ u. Jako posledn´ı se provád´ı nastaven´ı správného layoutu a správné ˇsablony pro zobrazen´ı u ´lohy. Jako v´ ychoz´ı layout se automaticky pouˇz´ıvá soubor s názvem @layout.latte. V tomto souboru je definováno rozloˇzen´ı, které se pouˇz´ıvá pro vˇsechny stránky aplikace. Toto rozvrˇzen´ı se vˇsak pro zobrazen´ı u ´lohy nehod´ı a je tedy definováno zvláˇstn´ı rozloˇzen´ı pouˇzitelné pouze pro zobrazován´ı u ´loh. Pˇri nastaven´ı souboru ˇsablony je pouˇzit v´ yˇse uloˇzn´ y název presenteru. Vˇsechny ˇsablony pro dané presentery jsou totiˇz uspoˇrádány do podsloˇzek, jejichˇz jména jsou názvy pˇr´ısluˇsn´ ych presenter˚ u. Je tedy moˇzné velice snadno doc´ılit zobrazován´ı vˇsech typ˚ uu ´loh. 4.2.6

Zp˚ usob generov´ an´ı u ´lohy

V této kapitole bude krátce popsán zp˚ usob generován´ı e-learningové u ´lohy Tahac´ıho pˇriˇrazován´ı. Popis druhého generátoru by byl pˇr´ıliˇs podobn´ y, a proto bude demonstrativnˇe popsán pouze jeden. Z pohledu uˇzivatele vypadá cel´ y proces jako nˇekolika stránkov´ y formuláˇr, do kterého jsou vyplˇ novány potˇrebné hodnoty, na základˇe kter´ ych je v posledn´ım kroku vytváˇren´ı nové u ´lohy vygenerována HTML stránka s e-learningovou u ´lohou. Realizace v PHP kódu je d´ıky pouˇzit´ı Nette frameworku pomˇernˇe jednoduchá, ale pro

4.2


43

správnou funkˇcnost a zajiˇstˇen´ı kompatibility se samotnou aplikac´ı je tˇreba dodrˇzet nˇekolik krok˚ u. Pˇri vytváˇren´ı nového generátoru je tak nejd˚ uleˇzitˇejˇs´ı zajistit dˇedˇen´ı veˇskeré aplikaˇcn´ı logiky, souvisej´ıc´ı s ukládán´ım a manipulac´ı s uˇzivatelsk´ ymi daty, ze spoleˇcného pˇredka pro vˇsechny generátory, kter´ ym je presenter u ´loh. Zároveˇ n mus´ı tˇr´ıda presenteru implemetovat rozhran´ı IUlohaValuesParser. Minimáln´ı kód by tedy mˇel vypadat následovnˇe. class NovaUlohaPresetner extends UlohaPresenter implements IUlohaValuesParser { public static function parseValues($presenter, $allValues){} } S t´ımto kódem si samozˇrejmˇe generátor nevystaˇc´ı a je tˇreba doplnit dalˇs´ı metody. Konkrétnˇe se jedná o metody pˇredstavuj´ıc´ı továrny na komponenty (jednotlivé formuláˇre) a obsluˇzné metody, neboli handlery, které se volaj´ı v pˇr´ıpadˇe odeslán´ı formuláˇre nebo stisknut´ı konkrétn´ıho tlaˇc´ıtka pro odeslán´ı formuláˇre. Po z´ıskan´ı vˇsech potˇrebn´ ych hodnot je tedy v posledn´ım kroku zobrazena právˇe vytvoˇrená u ´loha. Toto zobrazen´ı je zajiˇstˇeno metodou renderUloha, která je, narozd´ıl od v´ yˇse zm´ınˇené metody presenteru domovské stránky, zdˇedˇena z presenteru u ´loh. Jej´ı kód je tedy mnohem jednoduˇsˇs´ı, protoˇze pracuje s uˇzivatelsk´ ymi daty pˇr´ımo a odpadá tak komunikace s databáz´ı a rozhodován´ı, o kter´ y presenter u ´lohy se vlastnˇe jedná. Data jsou v této metodˇe zpracována a vloˇzena do ˇsablony, která jiˇz zajist´ı samotné zobrazen´ı u ´lohy. ˇ Sablony nejsou nic jiného neˇz soubory s HTML kódem. Nette pro tyto soubory nav´ıc zavád´ı moˇznou pˇr´ıponu .latte, která je odvozena od pˇr´ıtomného filtru pouˇz´ıváného v ˇsablonách. Ten umoˇzn ˇuje mnohem jednoduˇsˇs´ı zápis PHP kódu, napˇr. vkládán´ı promˇenn´ ych z presenteru do ˇsablony. Generován´ı v´ ysledné podoby v´ ysledné stránky tedy prob´ıhá pomoc´ı vhodnˇe zapsan´ ych podm´ınek v rámci zápisu dané ˇsablony. Tˇechto podm´ınek je v ˇsablonˇe samoˇrejmˇe celá ˇrada a jsou si navzájem velmi podobné. Detailn´ı popis celé ˇsablony by byl tedy zdlouhav´ y a zbyteˇcn´ y. Uvedeme tedy pouze nejd˚ uleˇzitˇejˇs´ı pouˇzité prvky a jednu ukázku vytvoˇren´ı interaktivn´ıho prvku. V ˇsablonˇe jsou pouˇzity tzv. bloky. Jedná se o prvek Nette, kter´ y umoˇzn ˇuje oznaˇcit urˇcitou ˇca´st ˇsablony, která je následnˇe vloˇzena v layoutu na pˇr´ısluˇsné m´ısto. Takto je nastavován název stránky (tag title) a do hlaviˇcky jsou doplnˇeny definice styl˚ u a skript˚ u. Následuj´ıc´ım zápisem jsou pak do stránky vkládány zpracované promˇenné uˇzivatelsk´ y nastaven´ı. // nastaven´ ı promˇ enn´ e v JavaScriptu {*pokud nezvyraznovat tak nastavit barvu pozadi*} barvaZvyrazneni = {=$udalosti["zvyraznit"] !== "never"

4.2


44

? $vzhled["pozadiZvyraznit"] : $vzhled["pozadiOdpovedi"]}; // vytvoˇ ren´ ı seznamu odpovˇ ed´ ı

{foreach $poradi as $index}
<span style="cursor:pointer" id="it{$index + 1}"> {$odpovedi[$index]}
{/foreach}

Jak je vidˇet, v zápisu jsou pouˇzity sloˇzené závory. Ty slouˇz´ı pro zjednoduˇsen´ı zápisu ˇsablon a pomoc´ı filtru jsou pˇrevedy na odpov´ıdaj´ıc´ı PHP kód. V kódu je ukázán zp˚ usob nastaven´ı hodnoty JS promˇenné s barvou zv´ yraznˇen´ı, která se bud’ nastav´ı na pˇr´ısluˇsnou zv´ yrazˇ novac´ı barvu, nebo se pouˇzije stejná barva, jako je barva pozad´ı (v pˇr´ıpadˇe vypnutého zv´ yrazˇ nován´ı). {if $udalosti["splneniUspesnost"] !== "empty"} // zobrazeni uspesnosti var uspesnost = spravne/pokusu*100; var zpravaUspesnost = "´ Ukol je dokonˇ cen. Vaˇ se u ´spˇ es ˇnost je " + Math.round(uspesnost) + " %."; {if $udalosti["splneniUspesnost"] === "html"} //zobrazeni $(".ukol").after(function(){ //ve strance var div = document.createElement("p"); $(div).text(zpravaUspesnost).css({ "text-align": "center", "margin" : "10px auto", "padding" : "15px", "border" : "1px solid #0C4DA2", "width" : "510px", "background": "#EFEFEF" }); return div; }); {else} alert(zpravaUspesnost); {/if} {/if}

4.3

Demonstrován´ı funkˇcnosti aplikace

45

Pˇredchoz´ı ukázka zobrazuje zp˚ usob zobrazen´ı u ´spˇeˇsnosti po splnˇen´ı e-learningového kv´ızu. Celé zobrazen´ı je nejdˇr´ıve podm´ınˇeno hodnotou zp˚ usobu zobrazen´ı u ´speˇsnosti (pokud je r˚ uzné od empty tak zobraz). Následnˇe prob´ıhá v´ ypoˇcet u ´spˇeˇsnosti a nastaven´ı patˇriˇcné zprávy. Pokud se má zpráva zobrazit pˇr´ımo na stránce, je vytvoˇren odstavcov´ y element, jsou mu nastaveny potˇrebné stylové vlastnosti a je vloˇzen do stránky. V opaˇcném pˇr´ıpadˇe se promˇenná se zprávou zobraz´ı pomoc´ı alertové funkce. Obdobn´ ym zp˚ usobem jsou vytváˇreny i dalˇs´ı interkativn´ı prvky na stránce, napˇr. zadán´ı nebo ovládán´ı u ´lohy, spouˇsten´ı vlastn´ıch JS kód˚ u atd.

4.3

Demonstrov´ an´ı funkˇ cnosti aplikace

V aplikaci jsou vytvoˇreny ukázkové u ´lohy, které demonstruj´ı funkˇcnost celé aplikace. V této kapitole budou jen krátce popsány dva vytvoˇrené kv´ızy, jeden od kaˇzdého typu implementovan´ ych generátor˚ u. 4.3.1

Kˇr´ıˇ zovka – DBS

Prvn´ım u ´kázkov´ ym pˇr´ıkladem je kˇr´ıˇzovka na téma databázov´ ych systém˚ u. Pokud si u ´lohu zobraz´ıme v aplikaci, tak vid´ıme, ˇze byla správnˇe vytvoˇrena tabulka zobrazuj´ıc´ı samotnou kˇr´ıˇzovku a pro jednotlivé buˇ nky byly nastaveny odpov´ıdaj´ıc´ı barvy pozad´ı – b´ılá pro nepouˇzitou buˇ nku, svˇetle modrá pro pouˇzitou a tmavˇe modrá pro sloupec tajenky. Pod tabulkou je um´ıstˇen ˇc´ıslovan´ y seznam legend, kter´ y sv´ ym ˇc´ıslován´ım odpov´ıdá oˇc´ıslován´ı jednotliv´ ych ˇrádk˚ u tabulky, a pod t´ımto seznamem se nacház´ı hlavn´ı legenda celé tajenky, pˇriˇcemˇz slovo tajenky bylo v legendˇe nahrazeno odpov´ıdaj´ıc´ım poˇctem teˇcek. Pˇri prvn´ım kliknut´ı na ˇra´dek kˇr´ıˇzovky je automaticky zobrazena zpráva o zp˚ usobu opravy pˇreklepu, jej´ıˇz znˇen´ı se nastavuje podle pouˇzitého prohl´ıˇzeˇce. Následnˇe je zvolen´ y ˇra´dek pˇrebarven na zadanou barvu (svˇetle ˇzlutá). Pokud nyn´ı zaˇcneme psát na klávesnici, budou se stisknutá p´ısmena vkládat ˇ adek lze kdykoliv zmˇenit kliknut´ım na jin´ do pˇr´ısluˇsn´ ych pol´ıˇcek v kˇr´ıˇzovce. R´ y. A pokud si pˇri ˇreˇsen´ı nev´ıme rady, je k dispozici nápovˇeda následuj´ıc´ıho p´ısmene, která automaticky vypln´ı dalˇs´ı p´ısmeno v patˇriˇcném ˇrádku. Pokud vypln´ıme nˇekteré ze slov nesprávnˇe, zobraz´ı se zpáva, jej´ıˇz znˇen´ı bylo zadáno pˇri vytváˇren´ı u ´lohy. Podobnˇe je pˇri splnˇen´ı celé kˇr´ıˇzovky také zobrazena nastavená zpráva. 4.3.2

Tahac´ı pˇriˇrazov´ an´ı – ˇ c´ asti dotazu

Druh´ ym ukázkov´ ym pˇr´ıkladem je u ´loha na pˇriˇrazován´ı strukturn´ıch ˇcást´ı datbázového dotazu ke kl´ıˇcov´ ym slov˚ um, za kter´ ymi dané ˇcásti správnˇe následuj´ı. Po jej´ım zobrazen´ı v aplikaci vid´ıme, ˇze pˇr´ısluˇsné ˇcásti jsou um´ıstˇeny v nesetˇr´ıdˇeném seznamu, pod kter´ ym se nacház´ı tabulka se kl´ıˇci a m´ısty pro um´ıstˇen´ı jednotliv´ ych odpovˇed´ı. Tak, jak bylo pˇri vytváˇren´ı nastaveno, je ovládán´ı u ´lohy zobrazeno pˇr´ımo v HTML stránce, stejnˇe jako zadán´ı u ´kolu, které lze nav´ıc skr´ yt (následnˇe pak i zobrazit) pomoc´ı pˇr´ısluˇsného tlaˇc´ıtka. Pˇri pˇretahován´ı je pro zv´ yraznˇen´ı jednotliv´ ym buˇ nkám nastavována jiná barva pozad´ı, pˇri najet´ı odpovˇedi nad konkrétn´ı buˇ nku

4.3

Demonstrován´ı funkˇcnosti aplikace

46

tabulky je toto zv´ yraznˇen´ı jeˇstˇe zmˇenˇeno na jinou barvu pro indikaci, kam bude odpovˇed’ pˇri upuˇstˇen´ı um´ıstˇena. Pˇri kaˇzdém ˇspatném um´ıstˇen´ı je zobrazena zpráva, jej´ıˇz znˇen´ı bylo opˇet zadáno pˇri vytváˇren´ı u ´lohy, na druhou stranu pˇri správném um´ıstˇen´ı je zpráva zobrazena pouze pˇri prvn´ım u ´spˇechu a vˇzdy je zmˇenˇena barva pozad´ı. Po u ´spˇeˇsném splnˇen´ı celého kv´ızu je zobrazena zpráva, celková u ´spˇeˇsnost je zobrazena pˇr´ımo na stránce a definic´ı vlastn´ıho JS je do stránky nav´ıc vloˇzen doplˇ nuj´ıc´ı text, zobrazuj´ıc´ı strukturu databázového dotazu.

5

DISKUZE

5

47

Diskuze

Pˇri zpracován´ı této bakaláˇrské práce byly vyuˇzity volnˇe dostupné technologie, pomoc´ı kter´ ych byla implementována aplikace pro generován´ı interaktivn´ıch elearningov´ ych u ´loh. Hlavn´ım c´ılem bylo zajiˇstˇen´ı dostateˇcné variability aplikace ve smyslu voliteln´ ych funkˇcn´ıch moˇznost´ı vytváˇren´ ych u ´loh, ˇc´ımˇz je myˇsleno poskytnut´ı takov´ ych prostˇredk˚ u pˇri vytváˇren´ı u ´lohy, které umoˇzn´ı i uˇzivatel˚ um bez znalosti programován´ı modifikovat chován´ı a interaktivitu vytváˇrené u ´lohy. Zároveˇ n je to nástroj pro relativnˇe rychlé vytváˇren´ı tˇechto u ´loh, u kter´ ych je automatizovan´ ym procesem vytváˇren´ı v´ ysledného kódu garantována jejich jednotná implementace. T´ım pádem by mˇela aplikace naj´ıt uplatnˇen´ı i u programátor˚ u, kter´ ym m˚ uˇze zefektivnit vytváˇren´ı specifick´ ych poˇzadavk˚ u na funkcionalitu v´ ysledného kv´ızu.

5.1

Nedostatky implementace

Pˇri implementaci byl kladen d˚ uraz pˇredevˇs´ım na splnˇen´ı hlavn´ıho c´ıle zadán´ı této bakaláˇrské práce, kter´ ym bylo vytvoˇrit generátory pro alespoˇ n dva dodané e-learnigové kv´ızy. Z toho d˚ uvodu nebyly implementovány nˇekteré bˇeˇzné (a pˇri praktickém nasazen´ı aplikace vyˇzadované) funkce pro správu vlastn´ıho uˇzivatelského u ´ˇctu, jako je svázán´ı u ´ˇctu s e-mailovou adresou, zmˇena hesla nebo zaslán´ı nového v pˇr´ıpadˇe zamopenut´ı pˇrihlaˇsovac´ıch u ´daj˚ u. Veˇskeré potˇrebné funkce pro manipulaci s uloˇzen´ ymi kv´ızy uˇz implementovány samozˇrejmˇe jsou. Asi za nejvˇetˇs´ı nedostatek této implementace by bylo moˇzné oznaˇcit sice funguj´ıc´ı, ale velmi jednoduché uchováván´ı uˇzivatelsk´ ych nastaven´ı pro jednotlivé vytvoˇrené kv´ızy, která jsou v databázi uloˇzena ve formˇe binárn´ıch dat (PHP kód) pˇredstavuj´ıc´ıch kompletn´ı datovou strukturu dan´ ych nastaven´ı. Toto ˇreˇsen´ı pro u ´ˇcely aplikace funguje dobˇre a nekomplikuje tak návrh struktury databáze, ale neumoˇzn ˇuje ˇradit jednotlivé u ´lohy podle tˇechto nastaven´ı na stranˇe databázového serveru, kde by mˇelo ˇrazen´ı z d˚ uvodu optimalizace správnˇe prob´ıhat. K umoˇznˇen´ı tohoto zp˚ usobu ˇrazen´ı nebyl pˇri zpracován´ı bakaláˇrské práce ˇza´dn´ y exaktn´ı d˚ uvod, ale je moˇzné, ˇze pˇri praktickém nasazen´ı, kdy by se v aplikaci pracovalo s velk´ ym poˇctem uloˇzen´ ych kv´ız˚ u, by bylo ˇza´douc´ı poskytnout prostˇredky pro lepˇs´ı orientaci a umoˇznit ˇrazen´ı podle urˇcit´ ych kritéri´ı. V tom pˇr´ıpadˇe by bylo nutné aplikaci a strukturu databáze pˇrepracovat.

5.2

Moˇ znosti nav´ az´ an´ı na pr´ aci

Prostor pro navázán´ı na tuto bakaláˇrskou práci urˇcitˇe je. Pokud by mˇela b´ yt aplikace dále vyv´ıjena ve formˇe samostatné aplikace, bylo by nutné dokonˇcit pˇredevˇs´ım potˇrebné uˇzivatelské funkce, které by pˇri plném nasazen´ı v takovéto aplikaci nemˇely chybˇet. Druhou moˇznost´ı by bylo aplikaci pˇrepracovat do formy modulu informaˇcn´ıho systému. Pokud by aplikace v této podobˇe naˇsla uplatnˇen´ı napˇr. v univerzitn´ım informaˇcn´ım systému, znamenalo by to jej´ı pˇrepsán´ı do programovac´ıho

5.2

Moˇznosti navázán´ı na práci

48

jazyka Perl. Celkov´ y rozsah nutn´ ych zmˇen by byl v tomto pˇr´ıpadˇe znaˇcn´ y, ale bylo by moˇzné vyuˇz´ıt v´ yhod spojen´ ych se zakomponován´ım do informaˇcn´ıho systému. Pˇredevˇs´ım by ale bylo vhodné dokonˇcit implementace generátor˚ u pro ostatn´ı dodané e-learningové u ´lohy, které nebyly v rámci této práce zpracovány. U kv´ız˚ u, pro které byly generátory implementovány, bylo zapotˇreb´ı zajistit dostateˇcné mnoˇzstv´ı funkˇcn´ıch nastaven´ı, kter´ ymi si m˚ uˇze uˇzivatel chován´ı v´ ysledného kv´ızu upravit. V tomto smˇeru jsou moˇznosti nastaven´ı dostateˇcné, ovˇsem dalˇs´ımu rozˇsiˇrován´ı nic nebrán´ı. Nab´ız´ı se moˇznost zakomponovat do procesu vytváˇren´ı vˇetˇs´ı podporu pro nastaven´ı vzhledu jednotliv´ ych u ´loh pomoc´ı kaskádov´ ych styl˚ u, protoˇze v souˇcasné implementaci je umoˇznˇeno pouze nastaven´ı nˇekter´ ych barev pozad´ı a p´ısma. D˚ uvodem bylo soustˇredˇen´ı se na poskytnut´ı dostateˇcného mnoˇzstv´ı nastaven´ı ovlivˇ nuj´ıc´ıch interaktivitu u ´lohy.

6

6

´ ER ˇ ZAV

49

Z´ avˇ er

C´ılem práce bylo nastudovat funkˇcn´ı ˇreˇsen´ı interaktivn´ıch e-learningov´ ych komponent, které byly dodány vedouc´ım této práce. Jednotlivé u ´lohy slouˇzily k ovˇeˇrován´ı z´ıskan´ ych znalost´ı ve formˇe interaktivn´ıch HTML stránek. Interaktivitu zajiˇst’oval skriptovac´ı jazyk (JavaScript), jehoˇz aplikac´ı byly na klientské stranˇe provádˇeny potˇrebné zmˇeny ve stránce s kv´ızem. Po nastudován´ı bylo nutné navrhnout a implementovat generátor tˇechto u ´loh v podobˇe webové aplikace. V u ´vodu byla popsána dosavadn´ı situace v oblasti e-learningu a poskytován´ı interaktivity. Byly zde krátce shrnuty souˇcasné stavy a podoby veˇrejnˇe dostupn´ ych e-learningov´ ych kurz˚ u na dvou tuzemsk´ ych univerzitách a jedné zahraniˇcn´ı. Krátce byly zm´ınˇeny i moˇzné dostupné prostˇredky pro generován´ı interaktivn´ıch komponent e-learningov´ ych kurz˚ u. Dále tato práce popsala jednotlivé dodané e-learningové u ´lohy z hlediska pohledu uˇzivatele, kter´ y dané u ´lohy ˇreˇs´ı, a z hlediska jejich technického ˇreˇsen´ı, kde byla rozebrána HTML struktura element˚ u, slouˇz´ıc´ıch k zobrazen´ı samotné u ´lohy, a zp˚ usob zprostˇredkován´ı interaktivity pˇri ˇreˇsen´ı tˇechto u ´loh pomoc´ı JavaScriptu. Pro vytvoˇren´ı generátor˚ u byly vybrány dva konkrétn´ı typy u ´loh. V´ ybˇer technologi´ı pro implementaci webové aplikace podléhal podm´ınce pouˇzit´ı zdarma dostupn´ ych technologi´ı pro zachován´ı nulov´ ych náklad˚ u na realizaci této aplikace. Vybrané technologie tomuto pˇredpokladu plnˇe vyhovˇely. Pro usnadnˇen´ı práce se psan´ım aplikaˇcn´ı logiky samotné aplikace byl pouˇzit PHP framework Nette. Vytvoˇrená aplikace umoˇzn ˇuje zaloˇzen´ı vlastn´ıho uˇzivatelského u ´ˇctu, skrze kter´ y je pak moˇzné pˇristupovat do soukromé ˇcásti aplikace, kde jsou dostupné generátory jednotliv´ ych e-learningov´ ych kv´ız˚ u. Ty byly realizovány formou v´ıcestránkov´ ych formuláˇr˚ u, do kter´ ych uˇzivatel zadá veˇskerá nastaven´ı ovlivˇ nuj´ıc´ı obsah, vzhled a chován´ı vygenerované u ´lohy. Poˇzadavek na poskytut´ı dostateˇcné variability pˇri nastavován´ı tˇechto funkˇcn´ıch parametr˚ uu ´loh byl splnˇen. Vytvoˇrené u ´lohy je moˇzné ukládat bud’ do databáze, kde se k nim m˚ uˇze pozdˇeji uˇzivatel vrátit a modifikovat je, nebo lze vygenerované HTML stránky s u ´lohou uloˇzit jako soubor pˇr´ımo na pevn´ y disk. V´ ysledná aplikace byla um´ıstˇena na server http://znbp.tode.cz/. Celková funkˇcnost této aplikace byla na závˇer demonstrována na nˇekolika ukázkov´ ych pˇr´ıkladech, které jsou v aplikaci veˇrejnˇe pˇr´ıstupné.

A

A

ˇ ıLOHA 1 PR´

50

Pˇr´ıloha 1

Zdrojové kódy aplikace spolu s vyexportovanou databáz´ı jsou k dispozici na pˇriloˇzeném CD.

B

B

LITERATURA

51

Literatura

Bernard, Borek Prezentaˇcn´ı vzory z rodiny MVC. MVC a dalˇs´ı prezentaˇcn´ı vzory [online]. 2009-05-11, 2. d´ıl, [cit. 2011-05-08]. Dostupn´ y z WWW: . BuiltWith Trends JavaScript Libraries and Functions Distribution. [online]. [cit. 2011-05-05]. Dostupné z WWW: . CodeIgniter CodeIgniter – Open source PHP web application framework. [online]. [cit. 2011-05-07]. Dostupné z WWW: . Grudl, David Návrh struktury presenters/views. [online]. 2008-05-28, [cit. 201105-08]. Dostupn´ y z WWW: . ˇka, Petr Interaktivn´ı eLearningový obsah. In Motyˇcka, A. Informatika Jedlic XXI/2008. Brno: Konvoj, 2008, s. 45–46. ISBN 978-80-7302-151-1. jQuery Browser Compatibility. [online]. [cit. 2011-05-05]. Dostupné z WWW: . jQuery UI Draggable Demos & Documentation [online]. [cit. 2011-05-14]. Dostupn´ y z WWW: . jQuery UI Droppable Demos & Documentation [online]. [cit. 2011-05-14]. Dostupn´ y z WWW: . Nette Framework Nette Framework [online]. [cit. 2011-05-14]. Dostupn´ y z WWW: . PHP: Hypertext Preprocessor PHP Manual [online]. 2011-05-20, [cit. 201105-21]. Dostupn´ y z WWW: . Symfony symfony | Web PHP Framework [online]. [cit. 2011-05-12]. Dostupn´ y z WWW: . Wikipedia CakePHP [online]. 2010-12-24, [cit. 2011-05-18]. Dostupn´ y z WWW: . Wikipedia Learning management system [online]. 2011-05-17, [cit. 2011-05-18]. Dostupn´ y z WWW: . World Wide Web Consortium (W3C) Document Object Model (DOM). [online]. 2005-01-19, [cit. 2011-05-12]. Dostupn´ y z WWW: . World Wide Web Consortium (W3C) XHTMLTM 2.0. [online]. 2010-12-16, [cit. 2011-05-12]. Dostupn´ y z WWW: . Zend Framework Zend Framework [online]. [cit. 2011-05-12]. Dostupn´ y z WWW: .

Generátor interaktivních komponent elearningových kurzů

Recommend Documents