Systém pro podporu výuky anglického jazyka na 1. stupni ZŠ

České vysoké učení technické v Praze Fakulta elektrotechnická Katedra počítačů

Bakalářská práce

Systém pro podporu výuky anglického jazyka na 1. stupni ZŠ Oldřich Pravda

Vedoucí práce: Ing. Božena Mannová, Ph.D.

Studijní program: Softwarová technologie a management, Bakalářský Obor: Softwarové inženýrství 4. ledna 2011

iv

Poděkování Na tomto místě bych chtěl poděkovat svojí přítelkyni za její podporu, trpělivost a spousty cenných nápadů a poznatků, které mi pomohly ke zdárnému dokončení této práce. Dále bych chtěl poděkovat svým rodičům za podporu během celého studia. Dík také patří vedoucí mé práce Ing. Boženě Mannové, Ph.D., za její cenné rady a připomínky.

v

vi

Prohlášení Prohlašuji, že jsem svou bakalářskou práci vypracoval samostatně a použil jsem pouze podklady uvedené v přiloženém seznamu. Nemám závažný důvod proti užití tohoto školního díla ve smyslu §60 Zákona č.121/2000 Sb., o právu autorském, o právech souvisejících s právem autorským a o změně některých zákonů (autorský zákon). Ve Vejprtech dne 5. 1. 2011

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

vii

viii

Abstract This bachelor thesis deals with design and implementation of web application for teachers of English in basic school. The purpose of the work is to build a system in which teachers may easily create thematic sets of questions. From them will be subsequently generated tests, that will be automatically evaluated. The system will create basic statistics.

Abstrakt Tato bakalářská práce se zabývá návrhem a vytvořením webové aplikace pro potřeby učitelů anglického jazyka na 1. stupni ZŠ. Cílem je realizovat systém, ve kterém mohou učitelé jednoduchým způsobem vytvářet tématické okruhy otázek. Z nich se potom budou generovat testy, které budou automaticky vyhodnocovány. Systém z testů zpracuje jednoduché statistiky.

ix

x

Obsah 1 Úvod 1 1.1 Zadání . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 1.2 Členění práce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 2 Popis problému, specifikace cíle 3 2.1 Specifikace cíle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 3 Analýza existujících řešení 5 3.1 Desktopové aplikace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 3.2 Online testy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 4 Analýza a návrh implementace 13 4.1 Programovací jazyk a další použité technologie . . . . . . . . . . . . . . . . . . . . . 13 4.2 Databáze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 4.3 Uživatelské role. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 5 Implementace 21 5.1 Rozvržení stránek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 5.2 Autentizace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 5.3 Připojení k databázi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 5.4 Generování testů . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 5.5 Statistiky . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 5.6 Správa kategorií . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 5.7 Formuláře . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25 5.7.1 Kontrola zadaných údajů . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 5.7.2 Ošetření dat z formuláře . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 6 Testování 29 6.1 Jednotkové testy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 6.2 Integrační testování . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 6.3 Testování formulářů . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 6.4 Testy validity kódu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 6.5 Alfa a Beta testy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 7 Závěr

33

Literatura

35

A Seznam použitých zkratek

37 xi

B Instalační a uživatelská příručka 39 B.1 Instalace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 B.1.1 Registrace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 B.1.2 Aktivace databáze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 B.1.3 Nahrání souborů . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 B.2 Adresa a přihlašovací údaje v systému . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 B.3 Sekce pro žáky . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 B.3.1 Spuštění testu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 B.3.2 Zobrazení nápovědy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 B.3.3 Zobrazení výsledků . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 B.4 Sekce pro administrátory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .45 B.4.1 Vytvoření zkouškového testu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 B.4.2 Správa tříd . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 B.4.3 Správa žáků . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 B.4.4 Správa kategorií . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 B.4.5 Správa otázek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 B.4.6 Správa administrátorů . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 C Obsah přiloženého CD

47

xii

Seznam obrázků 3.1 Okno aplikace TS Angličtina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 3.2 Okno aplikace Word Manager . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 3.3 Vyhodnocení testu v aplikaci Smart Test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 3.4 Tvorba vlastního slovníku v aplikaci Testuj 1.00 . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 3.5 Chybné vyhodnocení odpovědi v aplikaci Testuj 1.00 . . . . . . . . . . . . . . . . . . . . . . . 9 3.6 Tvorba vlastního slovníku v aplikaci Easy Words . . . . . . . . . . . . . . . . . . . . . . . . . . 10 4.1 E-R model databáze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 4.2 Diagram aktivit v sekci otázky . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 4.3 Průběh spuštění testu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 4.4 Use Case Diagram – uživatelské role . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 6.1 Kontrola validity kódu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 6.2 Kontrola validity CSS souboru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 6.3 Kontrola JavaScriptu nástrojem JavaScript Lint . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 B.1 Volba názvu adresy stránek na ic.cz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 B.2 Zadávání kontaktních údajů na ic.cz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 B.3 Opisování kódu na ic.cz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 B.4 Zařazení stránek do kategorie na ic.cz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 B.5 Volba hesla na ic.cz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 B.6 Potvrzení úspěšné registrace na ic.cz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 xiii

B.7 Zadávání hesla pro MySQL na ic.cz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 B.8 Úspěšná aktivace databáze na ic.cz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

xiv

xv

Kapitola 1 Úvod Téma Systém pro podporu výuky anglického jazyka na 1. stupni ZŠ jsem si vybral ze dvou důvodů. Vždy mě zajímala a bavila tvorba webových stránek a vše, co se děje kolem internetu a tato práce mi umožnila si poprvé vyzkoušet tvorbu dynamické webové aplikace. Při podání přihlášky na elektrotechnickou fakultu ČVUT jsem projevil zájem o obor Web a multimedia. Pro malý počet dálkových studentů tento obor ve 2. ročníku studia bohužel nebyl otevřen, a tak mi alespoň tvorba bakalářské práce umožnila naučit se pracovat s nástroji pro tvorbu dynamických stránek. Druhým důvodem volby tohoto tématu byla profese mojí přítelkyně, která vyučuje anglický jazyk na 1. stupni ZŠ Vejprty. Narozdíl od většiny škol ve větších městech se výuka angličtiny na této škole teprve zvolna rozjíždí a webová aplikace, která pomůže při studiu a doufám, že i motivaci dětí, jistě přijde vhod. Na internetu lze najít spousty stránek, zabývajících se online-testováním anglické slovní zásoby a gramatiky, nicméně mnou vytvořený systém umožní učitelům vytvořit či přizpůsobit si testy svým potřebám. Výukové plány nejsou v dnešní době jednotné a na každé škole se více či méně liší. Díky jednoduchým statistikám generovaným ze spuštěných testů bude učitel moci sledovat dosažené pokroky svých žáků a jejich úspěšnost při prvních krůčcích ve studiu cizího jazyka.

1.1 Zadání Úkolem této bakalářské práce je seznámit se s problematikou on-line testování a dostupnými produkty na trhu, zabývajícími se testováním znalostí žáků základních škol. Na základě získaných informací bude navržen a implementován jednoduchý systém sloužící k ověřování znalostí žáků při výuce anglického jazyka formou testů s mnohonásobným výběrem ze znalosti anglických slovíček a gramatiky. Učitelé budou v systému moci jednoduchým způsobem vytvářet soubory otázek a z nich následně generovat testy. Systém testy vyhodnotí a z výsledků vytvoří jednoduché statistiky. Aplikace bude využitelná jak při vyučovacích hodinách tak i při domácí přípravě žáků.

1

2

Úvod

1.2 Členění práce Práce je rozčleněna do sedmi kapitol. Kapitola 1 - Tato bakalářská práce začíná úvodem. V něm vysvětluji, proč jsem si dané téma vybral a popisuji zadání práce. Kapitola 2 - Ve druhé kapitole se snažím nastínit, v čem bude mnou vytvořený systém přínosný pro ZŠ Vejprty a v několika bodech specifikuji cíle této práce. Kapitola 3 - V této kapitole se snažím stručně analyzovat dostupná existující řešení zabývající se výukou a testováním znalostí anglického jazyka. Nezaměřuji se při tom na komplexní a poměrně složité systémy pro výuku typu Moodle apod., ale zabývám se rozborem kladů a záporů desktopových aplikací pro výuku angličtiny a internetových stránek v českém jazyce, které nabízejí spuštění jednoho či mnoha testů obsahujících otázky z anglických slovíček či gramatiky. Kapitola 4 - Tato kapitola popisuje analýzu a návrh implementace systému pro podporu výuky anglického jazyka na 1. stupni ZŠ. Po výčtu technologií, které jsem k naprogramování aplikace použil následuje detailní rozbor databáze, tzn. výčet jednotlivých entit a jejich atributů. Dále tato kapitola popisuje uživatelské role v systému, jejich možnosti a oprávnění. Kapitola 5 - Pátá kapitola se zabývá samotnou implementací systému. Jednoduše vysvětluje rozvržení stránek, přihlášení do systému a proces autentizace, způsob připojení k databázi, generování a hodnocení testů, správu kategorií. K lepšímu pochopení použitého řešení napomáhá uvedení menších částí zdrojového kódu. Kapitola 6 - Šestá kapitola se zabývá testováním. Popisuje testy formulářů, validity zdrojového kódu vzhledem k W3C standardům, test JavaScriptu a otestování aplikace v praxi na ZŠ Vejprty. Kapitola 7 - Práce končí závěrem, v němž hodnotím splnění stanovených cílů a navrhuji možná budoucí rozšíření a vylepšení systému.

Kapitola 2 Popis problému, specifikace cíle Základní škola Vejprty nemá ve výuce anglického jazyka příliš dlouhou tradici. Hlavním vyučovaným jazykem zde vždy byla němčina a anglický jazyk tu je dodnes vyučován pouze jako předmět nepovinný. Jednoduchý systém ke zkoušení, ale hlavně domácí přípravě dětí tu proto bude potřeba. Některá existující řešení, jež škola používá, jako např. Moodle, jsou pro přípravu těch nejmenších školáků zbytečně komplexní a složitá. Malý školák se v těchto výukových prostředích tak trochu ztrácí. Mojím cílem je proto navrhnout výukový systém, který žáka nezahrne záplavou nejrůznějších odkazů, ale ve kterém si po přihlášení jednoduchým způsobem spustí test a stejně jednoduchým způsobem prohlédne a pochopí jeho vyhodnocení. Systém bude víceuživatelský, takže ho ve stejném okamžiku bude moci sdílet více uživatelů. Tato vlastnost bude zajištěna sdílením programu prostřednictvím internetu. Podle J.Dostála [14] je výukový software jakékoliv programové vybavení počítače, které je určeno k výukovým účelům a dokáže plnit alespoň některou z didaktických funkcí, mezi něž patří: ● ● ● ●

motivace, expozice učiva upevnění osvojených vědomostí a dovedností kontrola získané úrovně vědomostí a dovedností

Mnou navržená a realizovaná aplikace by v době odevzdání této bakalářské práce měla plnit body 1, 3 a 4. V budoucnu bych ji chtěl rozšířit i o bod 2, tedy o expozici učiva. Rozšíření systému by spočívalo v umístění výukových lekcí a vytvoření prostředí, v kterém by nové lekce mohl vytvářet i sám učitel. Ze zkušeností učitelů na základních školách vím, že motivace dětí pracovat s počítačem je vysoká. Dnešní děti vyrostly ve světě počítačů a práce s nimi je pro ně zábavou. Vysoké procento žáků a studentů tráví u počítače svůj volný čas komunikací prostřednictvím sociálních sítí, hraním her, případně vyhledáváním informacií, o které mají zájem vzhledem ke svým individuálním koníčkům. Otázkou ale je, do jaké míry jsou žáci schopni využít počítač pro učení a soustředěnou práci [9]. Mojí snahou tedy bude navrhnout a realizovat aplikaci, jejímž prostřednictvím si žáci jednoduchou formou 3

4

Popis problému, specifikace cíle

procvičí ve škole probíranou látku. Žádný software není schopen nahradit osobnost vzdělaného pedagoga. Je však zcela běžné, že umožňuje učitele v různých momentech zastoupit (např. při expozici učiva, při procvičování, při testování atp.) anebo mu alespoň napomoci při zefektivnění a optimalizaci vzdělávacího procesu [14]. Bude samozřejmě záviset na pedagogovi, který bude mít systém k dispozici, jak bude děti motivovat, aby ho ve volných chvílích k domácí přípravě používaly, ale myslím si, že v dnešní době je daleko jednodušší přimět malého školáka zasednout ve volném čase k počítači než vzít do ruky školní učebnici.

2.1 Specifikace cíle Cílem této práce je seznámit se s problematikou on-line testování a existujícími produkty a hotovými řešeními na trhu zabývajícími se testováním znalostí žáků základních škol. Na základě získaných informací bude navržen a implementován jednoduchý systém sloužící k ověřování znalostí žáků při výuce anglického jazyka na 1. stupni základní školy, jež bude testovat znalosti slovíček i anglické gramatiky. Požadavky na systém jsou následující: ● ● ● ● ● ●

aplikace bude využitelná při vyučovacích hodinách i při domácí přípravě pro ověřění znalostí budou použity testy s mnohonásobným výběrem systém učiteli umožní zakládat, editovat či mazat kategorie otázek a do nich následně vkládat otázky a odpovědi učitel může v systému zakládat, editovat či mazat třídy a do nich následně vkládat jednotlivé žáky systém poskytne jednoduché statistiky, jako např. o přihlášeních do systému, úspěšnosti spuštěných testů nebo úspěšnosti zodpovězení jednotlivých otázek systém bude obsahovat několik sad předdefinovaných otázek v několika kategoriích připravených k okamžitému spuštění

Kapitola 3 Analýza existujících řešení Řada škol používá k organizaci a řízení výuky pomocí e-learningu tzv. LMS systémy (Learning Management Systems ). Jsou to komplexní nástroje poskytující nepřeberné množství funkcí sloužících pro řízení studia a komunikaci mezi správcem a účastníky jednotlivých kurzů. Mezi hlavní funkce většinou patří evidence a správa žáků, možnost zakládání a správa výukových kurzů, ukládání výukových materiálů, přezkušování žáků, správa přístupových práv, komunikační nástroje jako diskuzní fóra, chaty, nástěnky a tabule, kalendáře akcí atd. Podle mého názoru jsou LMS systémy jako např. Moodle, EDEN či eDoceo pro naše potřeby příliš komplexní a komplikované. Sám jsem během svého studia několikrát použil Moodle a myslím si, že orientace v něm nebo jemu podobném systému by pro naše cílové uživatele byla příliš složitá. Při analýze existujících řešení jse se tedy LMS dále nezabýval. Zaměřil jsem se na komerční i volně dostupné výukové programy angličtiny a na internetové stránky zabývající se on-line testováním znalostí anglického jazyka.

3.1 Desktopové aplikace Během analýzy existujících výukových programů zabývajících se výukou anglického jazyka jsem si na svůj domácí počítač nainstaloval a vyzkoušel asi deset desktopových aplikací. U programů komerčních jsem měl k dispozici pouze volně stažitelná dema. Ty sice nenabízejí všechny funkce programu, jež jsou dostupné u plných verzí, ale uživatel při jejich vyzkoušení získá dobrý přehled o tom, jak prostředí programu funguje a čím se daná aplikace zabývá. Pro stručný rozbor jsem si nakonec vybral tři aplikace placené a dvě, které jsou k dispozici ke stažení zdarma. Nejkomplexnějším nástrojem mezi mnou analyzovanými desktopovými aplikacemi je jistě program TS Angličtina od firmy Terasoft. Jde o komplet pěti výukových programů angličtiny pokrývajících učivo základní školy. Mezi největší klady tohoto výukového programu určitě patří podpora nejpoužívanějších učebnic a možnost nastavení programu podle aktuálně používané učebnice. Program obsahuje výukové lekce a testy, které se zaměřují na porozumění mluvenému slovu, doplňování slov do vět, spojování českých a 5

6

Analýza existujících řešení

odpovídajících anglických slov pomocí myši atd. K dispozici je i tiskový modul, pomocí něhož má uživatel možnost vytisknout si cvičení na procvičování slovíček nebo gramatiky. Pro účely výuky angličtiny na 1.stupni ZŠ by se z nabízeného kompletu jistě nejvíc hodila aplikace první: TS Angličtina 1 - Pro malé školáky [15].

Obrázek 3.1: Okno aplikace TS Angličtina Další dvě vyzkoušené aplikace pochází od společnosti Vitware. Jejími tvůrci jsou autoři známého českého výukového portálu helpforenglish.cz [10]. První z nich nese název Word Manager [16]. Jde o komplexní výukový program, který navazuje na úspěšnou aplikaci Language Lab. Obsahuje výukové lekce, kontrolní testy, hry, křížovky a jiné zábavné aktivity usnadňující učení slovní zásoby a anglické gramatiky. Součástí systému je také multimediální slovník ukrývající přibližně 15000 hesel a tisíce audionahrávek a ilustrací. Při testování znalostí si program pamatuje slovíčka, která v minulosti činila uživatelovi potíže, a přednostně je zařazuje do dalšího zkoušení. Program nabízí několik způsobů zkoušení, ale např. test s mnohonásobným výběrem v demoverzi chybí. Systém např. přehraje anglickou výslovnost slovíčka, zobrazí jeho obrázek nebo anglickou definici a uživatel ho poté musí na klávesnici správně anglicky napsat. V dalším typu testu se slovíčko zobrazí anglicky spolu s přehráním jeho výslovnosti, přičemž je na uživatelovi, aby správně vybral jeden z nabídnutých obrázků.

Obrázek 3.2: Okno aplikace Word Manager

Dalším programem je Smart Test [17]. Obsahuje více než 300 hotových testů obsahujících více než 4500 otázek pro různé úrovně pokročilosti. Testy jsou k dispozici také zdarma na portálu helpforenglish.cz [10]. Na této aplikaci mě zaujal fakt, že u každé otázky lze při vyhodnocení testu u jednotlivých odpovědí zobrazit vysvětlení, proč je která odpověď správná či ne. Menší nevýhodou je to, že do systému nelze přidávat svá vlastní slovíčka. Vzhledem k tomu, jak obsáhlá je integrovaná datbáze, je ale tato nevýhoda spíše zanedbatelná. Tvůrci navíc týdně přidávají do systému 20-30 otázek a uživatel si databázi může přes internet kdykoliv aktualizovat.

7

8


Obrázek 3.3: Vyhodnocení testu v aplikaci Smart Test Velkou nevýhodou výše zmíněných programů ja samozřejmě fakt, že nejsou zdarma. V případě TS Angličtiny si škola může zakoupit licenci, jejíž cena závisí na velikosti školy a počtu počítačů, na nichž bude program využíván. U produktů firmy Vitware je nabízena licence Multi opravňující k používání programu na libovolném počtu počítačů ve školním zařízení. Ani jedna z licencí však neopravňuje k používání na soukromých počítačích učitelů či žáků, čímž se aplikace stávají nepoužitelnými pro domácí přípravu žáků. Mezi vyzkoušenými volně stažitelnými programy mě zaujaly dvě aplikace, které by si učitel mohl přizpůsobit podle svých potřeb a které by se s určitými omezeními daly použít pro domácí přípravu žáků. Učitel by samozřejmě ztratil možnost sledovat přehled o aktivitě či výsledcích svých žáků. Každý žák by musel mít aplikaci nainstalovanou na svém počítači a spolu s ní by bylo nutné nahrát učitelem vytvořený slovník. První volně dostupnou aplikací je aplikace Testuj 1.00. Uživatel si v ní může vytvořit svůj vlastní slovník. Při následném zkoušení se bohužel nedá spustit test s mnohonásobným výběrem. Uživatel musí zapsat správnou odpověď, což značně znemožňuje správné testování. Do slovníku se dá totiž uložit vždy pouze jedna správná odpověď a pokud je např. k anglickému slovíčku black přiřazena správná odpověď černá, vyhodnotí program odpověď černý nebo černé jako špatnou. Drobné chyby se také objevují ve statistice úspěšnosti. Program mi v ní při testování vůbec nezaznamenával špatné odpovědi.

Obrázek 3.4: Tvorba vlastního slovníku v aplikaci Testuj 1.00

Obrázek 3.5: Chybné vyhodnocení odpovědi v aplikaci Testuj 1.00 Z desktopových aplikací, které jsem vyzkoušel je tak pro domácí přípravu žáků zřejmě nejvhodnější aplikace Easy Words [18]. Obsahuje již vytvořené slovníky, které jsou ale pro přípravu žáků ZŠ takřka nepoužitelné. Nejsou nijak tématicky rozdělené a obsahují slovíčka různých stupňů obtížnosti. Uživatel si ale může vytvořit slovník vlastní. Zadávání slovíček do nově vzniklého slovníku je velice rychlé a jednoduché. Při následném spuštění testu si lze vybrat mezi testem s mnohonásobným výběrem a testem, kdy uživatel na položenou otázku musí napsat konkrétní a přesnou odpověď. Nelze nastavit, kolik otázek bude v testu položeno. Test tak běží nepřetržitě až do ukončení programu. Při menším počtu slovíček ve slovníku se stejné slovíčko ukáže dvakrát i třikrát za sebou. Aplikace běží na pozadí a uživatel si může nastavit, v jakých intervalech se mu jednotlivé otázky budou zobrazovat. Lze nastavit intervaly 1-10 minut nebo režim nonstop, kdy se objevuje jedna otázka za druhou. Každá otázka se objevuje v nově otevřeném okně, které se po správném zodpovězení znovu zavře. 9

10


Obrázek 3.6: Tvorba vlastního slovníku v aplikaci Easy Words

3.2 Online testy Když jsem při brouzdání internetem hledal podobná existující řešení, dospěl jsem k velice překvapivému závěru. Ačkoliv stránek, které nabízejí online testy z anglického jazyka, je nepřeberné množství, počet těch, které by se alespoň zčásti daly použít při výuce angličtiny na prvním stupni základní školy, je prakticky nulový. I když přehlédnu fakt, že všechny mnou vyzkoušené online-testy jsou určeny pro anonymní uživatele, čímž učitel ztrácí možnost sledovat současné či evidovat starší výsledky svých žáků, musím konstatovat, že ani jedna z testovaných aplikací nesplnila všechny požadavky, které jsou na aplikaci prakticky použitelnou při vyučovacích hodinách či domácí přípravě žáků kladeny. Nenašel jsem ani jedinou aplikaci, která by byla cíleně zaměřena na nejmenší uživatele. I přesto, že má spousta stránek nabízejících online testování testy roztříděny do různých kategorií podle stupně obtížnosti, pro přípravu či výuku malých školáků jsou tyto testy nevhodné. Mnoho online testů lze kupříkladu najít na webových stránkách jazykových škol. Většinou se jedná pouze o jediný test, jehož úkolem je odkrýt úroveň uživatelovi angličtiny. Většina z tohoto typu testů neposkytuje okamžité vyhodnocení. Výsledky jsou zasílány e-mailem. Některé testy jsou příliš rozsáhlé. Například Institut jazykového vzdělávání [6], jež nabízí testy gramatiky v nejrozšířenějších světových

jazycích, má na svých stránkách test obsahující pět sekcí po 24 otázkách. Pro zobrazení vyhodnocení je opět nutno zadat osobní údaje jako jméno a email. Po zadání těchto údajů se vám výsledky sice zobrazí, ale naprosto se ztrácí v záplavě reklamních poutačů na placené kurzy a další nabízené služby. Objeví se navíc pouze procentuální úspěšnost a údaj o počtu správných odpovědí, ale uživatel není obeznámen s faktem, které otázky vyplnil dobře a které ne. Ještě horší příklad nic neříkajícího vyhodnocení testu lze nalézt na stránkách Pygmalion.cz [8]. Po zodpovězení 50 otázek z gramatiky se kromě toho, že uživatel nezjistí, v kterých otázkách chyboval, neukáže ani počet správných odpovědí či procentuální úspěšnost. Jednoslovné hodnocení typu začátečník, pokročilý atd. je příliš obecné a nic nevypovídající. Ani jedna z mnou testovaných aplikací nenabízí v sekci pro začátečníky testy zaměřující se na ověřování znalostí základních tématických skupin slovíček, jako jsou barvy, číslovky, části těla, názvy dnů a měsíců atd., tedy tématických skupin, kterými výuka každého jazyka na základní škole začíná. Např. na jinak velmi zdařilých stránkách Helpforenglish.cz [10] začínají nejjednodušší testy pro začátečníky na otázkách zabývajících se gramatikou, konkrétně používání přítomného, předpřítomného nebo minulého času. Velikou nevýhodou volně dostupných aplikací je to, že si učitel nemůže okruhy otázek upravit nebo otázky do systému vkládat. Mnoho programů zaměřujících se na online testování znalostí angličtiny má naprosto neintuitivní ovládání, což by při použití při výuce malých dětí bylo obrovskou překážkou. Dítě by mělo okamžitě pochopit, jak test funguje a mělo by porozumět následnému vyhodnocení. U některých aplikací je na první pohled zřejmé, že je jejich tvůrci tak trochu překombinovali. I já sám jsem občas tápal a chvíli mi trvalo, než jsem pochopil, jak se který test ovládá. Např. při zodpovídání otázek testů na stránkách Testomanie.cz [11] uživatele značně rozptyluje okamžité vyhodnocování právě zodpovězené otázky. Aby mohl uživatel přejít k další otázce, musí odkliknout tlačítko OK. Na stránce Angličtinatesty.cz [12] se při spuštění testu zase otevře pomocný panel, na kterém běží čas a uživatel zde může sledovat svoji dosavadní bilanci. Panel opět uživatele spíše ruší nežli mu pomáhá. Po zodpovězení první otázky mi chvíli trvalo, než jsem pochopil, na které tlačítko mám kliknout, aby se mi zobrazila otázka druhá. Zřejmě nejlépe mezi hodnocenými online testy obstály stránky Testpark.cz [7]. Najdete na nich velké množství testů z různých oblastí, mimo jiné i angličtiny. Vyhodnocení je přehledné, uživatel se za pomoci barevných grafických značek snadno a rychle dozví, které otázky zodpověděl správně a které ne. Mezi zobrazenými informacemi nechybí procentuální ůspěšnost, počet správných odpovědí a srovnání s průměrnou procentuální úspěšností ostatních uživatelů v konkrétním testu. Menší zápor bych - jako ostaně u všech vyzkoušených online testů - viděl v tom, že se při vícenásobném spuštění jednoho testu test nemění. Děti si snadno zapamatují, kolikátá odpověď byla správná a test se tak stává nevhodným pro dlouhodobější používání. Promíchání otázek a odpovídajících odpovědí jistě pomůže ke zvýšení obtížnosti a tím také ke zvýšení efektivnosti uživatelova učení. Velikou výhodou byla na Testparku možnost vytvářet si své vlastní testy. Tato funkce je ale v době psaní této práce bohužel nedostupná z důvodu častého porušování tvůrcem stanovených pravidel.

11

12


Kapitola 4 Analýza a návrh implementace Pro implementaci systému jsem se rozhodl použít pro vývoj webových aplikací osvědčenou trojku PHP, MySQL a Apache. Při vývoji a testování na domácím počítači jsem použil program Complex Web server [20] od Miloslava Ponkráce. Tento program obsahuje webový server Apache, databázi MySQL a správce databáze phpMyAdmin. Pro vývoj webových aplikací je proto tento program optimální. Jeho instalace a následné zprovoznění funguje doslova na pár kliknutí.

4.1 Programovací jazyk a další použité technologie V zadání práce je uvedeno, že systém má být využitelný jak při vyučovacích hodinách tak při domácí přípravě žáků. Rozhodl jsem se tedy, že vytvořím webovou aplikaci, která bude žákům a učitelům přístupná přes internet. Webové aplikace se implementují v několika programovacích jazycích. Mezi nejpoužívanější serverové skriptovací jazyky patří např. ASP, ASP.NET, JSP a PHP. Vybral jsem si PHP, protože jsem se tento jazyk již dlouho chtěl naučit. Narozdíl třeba od ASP, jež běží pouze pod Windows a webovým serverem IIS, je naprosto univerzální. Programovací jazyk PHP je jednoduchý, ale i přes svou jednoduchost disponuje dostatečným množstvím funkcí, aby se mohl použít pro provoz a správu náročných a rozsáhlých projektů [4]. Funguje pod různými operačními systémy a webovými servery. PHP skripty jsou kombinovány s kusy kódu HTML. Výsledný design webových stránek jsem vyřešil pomocí CSS (kaskádové styly). K ukládání dat do databáze a jejich extrakci z ní je použit jazyk SQL.

13

14

Analýza a návrh implementace

4.2 Databáze Záznamy o uživatelích systému, informace o vyplněných testech, otázky z nichž se testy budou generovat a další údaje je třeba někam ukládat. Jako úložiště by bylo možné použít obyčejné soubory, ale vhodnější je databáze. Vybral jsem si databázi MySQL. Ta je dostupná pod licencí Open Source a existují pro ni dvě licence: GPL a komerční licence. Jelikož tuto aplikaci nemám v úmyslu nikam prodávat a je určena výhradně pro potřeby učitelů Základní školy Vejprty, mohu si MySQL stáhnout a používat zcela zdarma. MySQL patří k jednomu z nejrychlejších databázových systémů, který je v současné době vůbec k dispozici a dnes se používá i pro správu rozsáhlých webů (například stránek provozujících burzy nebo finanční služby firmy Yahoo!) [4]. Následuje popis jednotlivých tabulek v databázi: Tabulka kategorie obsahuje údaje o jednotlivých kategoriích otázek. Každou kategorii identifikují atributy cislo_kategorie (primární klíč) a nazev_kategorie. Tabulka otazka obsahuje údaje o otázkách v systému, ze kterých budou generovány testy. Primárním klíčen je atribut cislo_otazky, znění otázky se skrývá pod atributem otazka a příslušnost každé otázky k nějaké kategorii otázek je vyjádřena atributem cislo_kategorie. Atributy zobrazena a spravne budou sloužit ke statistickým údajům pro učitele. Může se z nich vysledovat obtížnost té či oné otázky - údaj, podle kterého se učitel může dozvědět, čemu a jak žáci při probírání látky porozuměli. Tabulka odpoved obsahuje všechny odpovědi v systému. Primárním klíčem je atribut cislo_odpovedi, znění odpovedi bude uvedeno pod atributem odpoved a příslušnost odpovedi k otázce je vyjádřena atributem cislo_otazky. Posledním atributem je atribut spravna, který podle uložené hodnoty 0 či 1 rozliší, zda jde o odpověď špatnou či správnou. Tabulka trida obsahuje údaje o třídách uložených v systému. Každý žák patří právě do jedné třídy. Primárním klíčem je cislo_tridy. Entita dále obsahuje atributy nazev_tridy a rocnik. Tento atribut se může použít jak ke statistickým údajům (nejúspěšnější žáci ročníku, ve kterém je více tříd) tak k rozlišení předpokládaných vědomostí žáků v případě, že budou v jiné skupině než ve svojí třídě, např. v zájmovém kroužku, který mohou navštěvovat žáci různých ročníků. V tabulce uzivatel jsou informace o všech uživatelích systému, tzn. žácích i učitelích. Obě skupiny uživatelů jsou od sebe odlišeny atributem admin, který pro admina nabývá hodnoty 1 a pro žáka hodnoty nula. Vedle primárního klíče cislo_uzivatele obsahuje entita atributy jmeno, prijmeni, login, heslo a cislo_tridy. Tabulka prihlaseni slouží pouze ke statistickým údajům. Administrátor se z údajů v ní uložených může dozvědět, kdo a kdy se přihlásil do systému v konkrétní den, za uplynulý týden či měsíc. Žákovi se zobrazí datum a čas jeho posledního přihlášení. Entita obsahuje atributy cislo_prihlaseni (primární klíč), cas_prihlaseni a cislo_uzivatele.Primární klíč poslouží k realizaci počítadla přístupů.

Do tabulky test se budou ukládat údaje spojené s již vygenerovanými testy. Vedle primárního klíče (cislo_testu) obsahuje entita test atributy zacatek a konec, z nichž se později vypočítá doba trvání testu, cislo_kategorie, cislo_uzivatele a uspesnost. Posledně jmenovaný atribut bude obsahovat procentuální úspěšnost dosaženou v testu. Entita obrazek slouží k uložení názvu obrázku, který se při testu může zobrazit společně s otázkou. Obsahuje atributy cislo_obrazku, nazev_obrazku a cislo_otazky. Tabulka zkouska slouží k uložení údajů v případě, že se učitel rozhodne sestavit zkouškový test, tzn. test sestávající z více kategorií, v němž budou otázky pro všechny žáky stejné. Obsahuje atributy cislo_zkousky (primární klíč), datum a nazev_zkousky. Tabulka zkouska_otazka ukládá čísla otázek použitých ve zkouškovém testu. Použité atributy jsou cislo_zkousky a cislo_otazky.

Obrázek 4.1: E-R model databáze

15

16


4.3 Uživatelské role Systém bude mít dvě části. Jedna bude určena pro žáky a druhá pro učitele. Přihlašovací část je pro obě skupiny uživatelů stejná, při autentizaci uživatele se rozhodne, která část aplikace se zobrazí. Obě uživatelské role budou mít také možnost se ze systému odhlásit. V části určené pro žáky si uživatel bude moci spustit test z některé z připravených kategorií otázek. Všechny otázky budou typu radio, tzn. že na každou otázku bude pouze jedna správná odpověď. Otázky typu multi-choice vzhledem k věkové kategorii uživatelů, pro něž je aplikace určena, nepřicházejí v úvahu. Po vyplnění testu se žákovi zobrazí dosažený výsledek. Ve většině existujících aplikací pro online testování se při vyhodnocení znovu zobrazí celý test a uživateli je pomocí ikonek zobrazeno, které odpovědi byly správné a které ne. Často je toto zobrazení dosti matoucí a uživateli chvíli trvá, než se ve vyhodnocení zorientuje. Vzhledem k tomu, že je tato aplikace určena pro 6-10-ti leté děti, musí být vyhodnocení testu co nejsrozumitelnější. U každé otázky se tak zobrazí pouze správná odpověď a pod ní žákova odpověď. Barevnou grafickou značkou je navíc žák upozorněn na to, jestli odpověděl správně či špatně. Žák si může zobrazit své osobní statistiky, jako např. kolikrát se v minulosti přihlásil do systému, jaká je jeho procentuální úspěšnost celková, za určité časové období či úspěšnost podle jednotlivých kategorií. Po konzultaci s učiteli na 1.stupni základní školy jsem se rozhodl, že žáci nebudou mít možnost změnit si své heslo. Uživatelské jméno i heslo jim určí učitel, na kterého se při zapomenutí některého z údajů musí obrátit. Učitel, který má v systému roli administrátora může vytvářet nové či editovat a mazat existující kategorie otázek, do nichž může následně vkládat otázky a ke každé otázce vždy jednu dobrou a několik špatných odpovědí.

Obrázek 4.2: Diagram aktivit v sekci Otázky

Admin může zakládat nové a editovat či mazat existující třídy, do nichž bude následně zařazovat jednotlivé žáky. Administrátor bude mít k dispozici statistiky týkající se údajů o přihlášeních do systému a spuštěných testech. Bude vždy mít možnost vybrat si mezi zobrazením posledních ůdajů (10 - 50 posledních záznamů) a zobrazením údajů za určité časové období (1 den - 1 měsíc). Administrátor má možnost vložit do systému dalšího uživatele s administrátorskými právy. Uživatel v roli administrátora musí mít možnost vidět a kontrolovat, jak aplikace funguje z pohledu žáka a proto si také bude moci spustit test, jehož výsledky nebudou nikam ukládány. Administrátor si může změnit své heslo. Při jeho změně musí nové heslo zadat dvakrát za sebou. Tato praxe je běžná u většiny aplikací z důvodu ochrany proti nechtěnému překlepu při psaní hesla. Obě sekce mají přístupnou nápovědu, která lze zobrazit z každé stránky systému. Každý uživatel si může vybrat jeden ze čtyř stylů vizuální podoby stránek. Styly se liší v barvě pozadí, písma, ikonek atd.

17

18


Obrázek 4.3: Průběh spuštění testu

Obrázek 4.4: Use Case Diagram – uživatelské role

19

20


Kapitola 5 Implementace 5.1 Rozvržení stránek Pro rozvržení stránek jsem zvolil pevný layout a stránky jsem optimalizoval pro rozlišení 1024/768 px. Vycházel jsem přitom ze statistik w3schools.com [13], podle kterých v lednu 2010 používalo toto rozlišení 20% a rozlišení vyšší 76% uživatelů internetu. Po odečtení šířky hranice okna jsem tedy zvolil pevnou šířku stránky 970 px. Hlavička, jež obsahuje název aplikace, a pata se objevují v nezměněné podobě na všech načtených stránkách. Obsah stránky, jenž se dynamicky mění podle potřeb uživatele, je rozdělen na dva sloupce. Levý sloupec před autentizací uživatele obsahuje formulář pro přihlášení, po úspěšné autentizaci jméno a příjmení přihlášeného uživatele, datum a čas jeho poslední návštěvy a hlavní menu. To se mění v závislosti na uživatelské roli přihlášeného uživatele. Žák má v menu k dispozici pouze 4 položky (odhlášení ze systému, nápovědu, spuštění testu a zobrazení svých dosažených výsledků, administrátor má k dispozici celkem 10 položek menu, které mu mj. zajišťují přístup ke správě kategorií, otázek, tříd, žáků, ostatních administrátorů a prohlížení jednoduchých statistik. V pravém sloupci se mění obsah v závislosti na zvolené položce menu. Název načteného PHP souboru je určen proměnnou zobrazit, která je předávána jako parametr v URL, který je umístěn za index.php. V případě, že je v menu zvolena správa otázek, vypadá výsledná adresa na mém domácím počítači takto: http://127.0.0.1/index.php?zobrazit=otazky. Namísto adresy localhostu se při skutečném nasazení samozřejmě objeví adresa serveru, na němž bude aplikace umístěna. Ukázka části kódu, jež zajišťuje načtení správného PHP souboru: if(isset($_REQUEST['zobrazit'])) include(dopln_php($_REQUEST["zobrazit"])); else include("uvodni_stranka.php");

21

22

Implementace function dopln_php($nazev) { $nazev=$nazev.".php"; return $nazev; }

5.2 Autentizace Přihlášení do systému a autentizace uživatele je realizována skriptem prihlasit.php. V něm je po vytvoření připojení k databázi a převzetí přihlašovacích údajů z formuláře zkontrolováno, zda se v databázi uživatel s příslušnými přihlašovacími údaji nachází. Dále se zjistí, zda se přihlásil žák či administrátor. V případě úspěšné autentizace se vytvoří proměnné $_SESSION, které obsahují id uživatele a jeho jméno a příjmení. V případě administrátora se aktivuje proměnná $_SESSION['admin'], podle které se následně bude určovat, do kterých sekcí uživatel má či nemá oprávnění k přístupu. Do databázové tabulky se uloží čas přihlášení s identifikačním číslem uživatele a ze stejné tabulky se získá čas uživatelova posledního přihlášení. Za pomoci globální proměnné $_SERVER['HTTP_REFERER'] je po úspěšném přihlášení uživatel přesměrován na stránku, ze které se přihlásil. Dotaz sloužící k autentizaci uživatele: $vysledek=$pripojeni->select("SELECT cislo_uzivatele, jmeno, prijmeni, admin FROM uzivatel WHERE login='".$uziv_jmeno."' AND heslo='".$heslo."'")

Dotaz sloužící k získání času posledního přihlášení právě přihlášeného uživatele: $vysledek=$pripojeni->select("SELECT DATE_FORMAT(cas_prihlaseni, '%d.%m %H:%i') FROM prihlaseni WHERE cislo_uzivatele='". $_SESSION['id_uzivatele']."' AND cas_prihlaseni<'".$date."' ORDER BY cas_prihlaseni DESC LIMIT 1")

Na stránkách systému určených pouze pro administrátory se potom přístupová práva uživatele ověřují funkcí je_admin: function je_admin() { if(!isset($_SESSION['admin']) || $_SESSION['admin'] !=1) {

echo '
Pouze pro administrátora!
'; return false; }else { return true; } }

Ostatní stránky systému jsou proti přístupu bez řádného přihlášení chráněny funkcí je_prihlasen: function je_prihlasen() { if(!isset($_SESSION['uzivatel'])){ echo '
Přihlásit!
'; return false; }else { return true; } }

5.3 Připojení k databázi Pro připojení k databázi jsem si napsal třídu PripojeniDB. Ta využívá rozhraní mysqli, které je v PHP dostupné od verze 5. Tato třída obsahuje několik funkcí, jako např. funkci pro nastavení znakové sady, funkci pro zavření otevřeného připojení nebo funkci pro zjištění počtu změněných záznamů. Dvěmi nejdůležitějšími funkcemi jsou funkce select(), sloužící k výběru dat z databáze a funkce definicniDotaz(), jejímž prostřednictvím lze realizovat dotazy typu INSERT, UPDATE a DELETE. function definicniDotaz($dotaz) { if($this->pripojeni->query($dotaz)){ return true; }else{ echo 'CHYBA!'; echo $this->pripojeni->error; return false; } }

function select($dotaz) { if ($vysledek=$this->pripojeni->query($dotaz)) { if ($vysledek->num_rows > 0){ while ($radek=$vysledek->fetch_array()) $vysledky[]=$radek; return $vysledky; } else return false; } else { echo 'Chyba:'.$this->pripojeni->error; return false; } }

23

24

Implementace

5.4 Generování testů Při načtení stránky, na níž se spouští testy, musí uživatel nejdříve vybrat kategorii, ze které budou vybrány otázky do testu. Zobrazí se mu při tom na výběr pouze ty kategorie, které obsahují 10 a více otázek, nutných ke spuštění testu. Pokud je vybrána kategorie Hodiny nebo Barvy, zobrazí se ke každé otázce i příslušný obrázek hodin. Po náhodném výběru 10 otázek z určené kategorie se ke každé vybere z databáze správná a dvě náhodné špatné odpovědi. Ty se uloží do pole a promíchají: foreach($vysledek_otazka as $radek_otazka){ /* pro každou otázku výběr správné odpovědi */ if($vysledek_odpoved=$pripojeni->select("SELECT cislo_odpovedi, odpoved FROM odpoved WHERE cislo_otazky= $radek_otazka[0] AND spravna=1")){ $odpovedi[0]=$vysledek_odpoved[0][1]; $spravne_odpovedi[$cislo_otazky]=stripslashes($vysled ek_odpoved[0][1]); } if($vysledek_odpoved=$pripojeni->select("SELECT cislo_odpovedi, odpoved FROM odpoved WHERE cislo_otazky= $radek_otazka[0] AND spravna=0 ORDER BY RAND() LIMIT 2")){ foreach($vysledek_odpoved as $radek_odpoved){ $odpovedi[]=$radek_odpoved[1]; } } shuffle($odpovedi); }

5.5 Statistiky Pro zobrazování statistik týkajících se provozu systému slouží několik funkcí získávajících data z tabulek databáze. Z nich se následně vypočítají potřebné údaje: /*Funkce, která zobrazí celkovou průměrnou úspěšnost všech spuštěných testů*/ function pocitadlo_uspesnosti() { global $pripojeni; $dotaz="SELECT count(cislo_testu), sum(uspesnost) FROM test"; if($vysledek=$pripojeni->select($dotaz)){ $pocet_testu=$vysledek[0][0]; if($pocet_testu>0){ $uspesnost=$vysledek[0][1]/$pocet_testu; $uspesnost=round($uspesnost, 2); return $uspesnost; }else return false; } }

5.6 Správa kategorií Při smazání kategorie se smažou i všechny otázky a odpovědi, které se v dané kategorii otázek nachází. Vše je vyřešeno jedním příkazem DELETE, který z tabulek kategorie, otazka a odpoved odstraní všechny záznamy splňující zadané podmínky. Používat příkaz pro odstranění záznamů ze spojených tabulek je možné od verze MySQL 4.0. Ukázka odstranění kategorie: if($pripojeni->definicniDotaz("DELETE kategorie, otazka, odpoved FROM kategorie, otazka, odpoved WHERE kategorie.cislo_kategorie='$_REQUEST[kategorie]' AND otazka.cislo_kategorie=kategorie.cislo_kategorie AND odpoved.cislo_otazky=otazka.cislo_otazky")) echo 'Kategorie a otázky a odpovědi z ní smazány';

5.7 Formuláře Při použití formulářů v PHP skriptech se musí věnovat zvýšená pozornost údajům, které do nich uživatel zadává. Můžou se v nich objevit data, která by při špatném nebo žádném ošetření mohla narušit chod webové aplikace.

5.7.1 Kontrola zadaných údajů Kontrola údajů zadaných do formuláře se provádí dvěma způsoby. Buď na straně klienta nebo na straně serveru. Kontrola na straně klienta má tu výhodu, že se data nemusí zbytečně posílat na server. Nelze se však na ni stoprocentně spoléhat, neboť uživatel může mít vypnutý JavaScript nebo jeho internetový prohlížeč nemusí JavaScript podporovat. Obě metody jsem tedy zkombinoval. Při zapnutém JavaScriptu se zadaný údaj v kontrolovaném poli formuláře otestuje pomocí onBlur. Varovné hlášení se tak objeví hned po opuštění pole formuláře. Pokud je JavaScript vypnutý nebo není podporován a formulář je s chybnými či nevyplněnými údaji odeslán,dojde k zachycení chyb pomocí PHP na straně serveru. Kontrola políčka formuláře ročník při ukládání nové třídy za pomoci JavaScriptu na straně klienta: function kontrola_rocnik(rocnik){ if(rocnik.value === ""){ alert("Zadejte ročník !!!"); }else{ if(rocnik.value<='0' || rocnik.value>'9'){ alert("Ročník musí být číslo 1-9!!!"); } } }

25

26

Implementace

Kontrola údajů při ukládání nové třídy na straně serveru: if (isset( $_POST['ulozit_tridu'])){ $nazev=uprav_polozku_formulare($_POST, 'nazev_tridy'); $rok=uprav_polozku_formulare($_POST, 'rocnik'); if($nazev=='') { $formular_ok=false; echo 'Nebyl zadán název třídy!'; } if($rok=='') { echo 'Nebyl zadán ročník!'; $formular_ok=false; }else{ if($rok<1 || $rok>9) { echo 'Špatný formát ročníku!'; $formular_ok=false; } } }

5.7.2 Ošetření dat z formuláře U všech položek uživatelem zadaných do formuláře nejprve zkontrolujeme, zda je zapnuta funkce magic quote. Touto funkcí ošetřuje interpreter PHP automaticky řetězce ze vstupu tak, že před znaky ',",\ a nulový bajt umístí znak zpětného lomítka. Pokud je funkce zapnutá, odstraním zpětná lomítka funkcí stripslashes a poté escapuju speciální znaky funkcí mysql_real_escape_string, čímž zabráním útoku SQL injection. To je způsob útoku na databázovou vrstvu. Útočník může přes vstup, tj. např. formulář, který není řádně ošetřen vykonat svůj vlastní SQL dotaz. Mysql_real_escape_string() je knihovní funkce, která přidá zpětná lomítka před následující typy znaků: \x00, \n, \r, \, ', " a \x1a [19]. Použitá funkce: function uprav_polozku_formulare($pole, $index){ if(array_key_exists($index, $pole)){ if(!get_magic_quotes_gpc()){ return mysql_real_escape_string($pole[$index]) ; }else{ return mysql_real_escape_string(stripslashes($pole[$index])); } } }

Funkce zároveň za pomoci array_key_exists potlačí varovná hlášení způsobená snahou přiřadit proměnné hodnotu z nevyplněného formulářového políčka. Při zadávání nových údajů (kdy uživatel zapomene některé povinné políčko vyplnit) nebo při editaci údajů již uložených v databázi, se u políček formuláře typu text použije atribut value. Uživateli je tak ulehčena práce, jelikož nemusí všechny hodnoty zadávat znovu. V hodnotě value se však mohou objevit uvozovky nebo jiné znaky, které internetový prohlížeč chápe jako znaky HTML. Na jejich ošetření jsem použil knihovní funkci htmlspecialchars. Tato funkce nahrazuje speciální znaky ",&,< a > html entitami ", &, < a > [4]. Po úspěšném uložení či editaci údajů jsou tyto údaje ještě pro kontrolu předloženy administrátorovi zobrazením proměnných, které obsahují již pro uložení v databázi upravené údaje z formuláře. Pro správné zobrazení údajů jsem tedy musel za pomoci funkce stripslashes odstranit zpětná lomítka vzniklá použitím funkce mysql_real_escape_string a pro zobrazení případných znaků html ještě použít funkci htmlspecialchars. /*Načtení dat z formuláře do proměnné*/ $jmeno=uprav_polozku_formulare($_POST, 'jmeno_uzivatele'); $prijmeni=uprav_polozku_formulare($_POST, 'prijmeni_uzivatele'); /*Zobrazení úspěšně uložených údajů pro kontrolu adminovi*/ echo 'Údaje úspěšně uloženy: Jméno: '.htmlspecialchars(stripslashes($jmeno)).'
Příjmení:'.htmlspecialchars(stripslashes($prijmeni));

27

28

Implementace

Kapitola 6 Testování Nejdříve byly provedeny jednotkové testy. Program byl poté testován jako jeden celek a krátce byl také otestován v praxi na místě budoucího nasazení na ZŠ Vejprty. Dalšími testy byly testy na validitu kódu podle standardů W3C a testy ošetření chybně zadaných dat do zobrazených formulářů.

6.1 Jednotkové testy Testování jednotek bylo provedeno metodou white-box. U všech jednotek bylo ověřeno, zda se počet vstupních parametrů rovná počtu argumentů, zda jsou shodné jejich atributy atd. Byly prověřeny všechny nezávislé cesty, každý příkaz programu byl proveden alespoň jednou. U všech podmínek byla vyzkoušena jak hodnota true, tak hodnota false. Prověřeny byly také cesty pro zpracování chyb.

6.2 Integrační testování Po integraci jednotlivých jednotek bylo nutné provést další testy pro zajištění bezchybné práce aplikace. Vzhledem k malé velikosti a složitosti programu byla použita metoda “velkého třesku“ , kdy se po spojení jednotek či modulů testuje vše najednou. Nemusel jsem tak programovat žádné drivery nebo makety. Byla použita metoda blackbox testing (strukturální testování).

6.3 Testování formulářů Během tohoto testování jsem vyzkoušel všechny formuláře v systému s vypnutým i povoleným JavaScriptem v internetovém prohlížeči. U povinných položek formuláře jsem otestoval, zda se zobrazí varovné hlášení při pokusu o odeslání formuláře s 29

30

Testování

nevyplněným polem. U políčka ročník ve formuláři pro zadávání nové či editování stávající třídy proběhl test na vložení jiného údaje než čísla 1-9.

6.4 Testy validity kódu Za pomoci validátoru na adrese: http://validator.w3.org jsem ověřil, zda je výsledný html kód validní, tedy zda odpovídá W3C (Worl Wide Web Consortium) standardům. Bylo nalezeno několik drobných chyb jako chybějící atribut alt v tagu , přebytečná lomítka v tagu
atd. Všechny chyby byly odstraněny a výsledný kód je validní HTML 4.01 Strict.

Obrázek 6.1: Kontrola validity kódu

Při kontrole CSS souborů na adrese: http://jigsaw.w3.org/css-validator/ nebyly nalezeny žádné chyby.

Obrázek 6.2: Kontrola validity CSS souboru

JavaScriptový soubor používaný pro kontrolu zadaných údajů do formuláře byl otestován na adrese: http://www.javascriptlint.com/online_lint.php. Byla nalezena jedna chyba a několik varování, které byly následně odstraněny.

Obrázek 6.3: Kontrola JavaScriptu nástrojem JavaScript Lint

6.5 Alfa a Beta testy Alfa testování bylo provedeno přímo na Základní škole Vejprty za mojí účasti. Otestoval jsem tím grafické uživatelské rozhraní aplikace z pohledu koncových uživatelů, tedy žáků 3.třídy. Testování se zúčastnilo 17 dětí. Každý žák se přihlásil a odhlásil ze systému, spustil, vyplnil a nechal vyhodnotit několik testů a prohlédl si své statistiky. Při alfa testu se mohly objevit chyby, které mi při předchozím testování unikly. GUI se naštěstí ukázalo jako pro děti srozumitelné a jeho ovládání intuitivní. Beta testy se budou v budoucnu provádět při ostrém nasazení na Základní škole Vejprty. Učitelé, kteří budou aplikaci spravovat jako administrátoři mi v případě potřeby předají informace o chybách nebo nestandardním chování programu.

31

32

Testování

Kapitola 7 Závěr Aplikaci se podařilo navrhnout a implementovat podle zadání. Umožňuje správu žáků, tříd, kategorií a otázek a pomocí automaticky generovaných a vyhodnocovaných testů jistě přispěje ke zvýšení kvality výuky anglického jazyka. Díky deseti předpřipraveným kategoriím otázek ji lze okamžitě nasadit v praxi. Myslím si, že aplikace je velice intuitivní a její ovládání by cílovým uživatelům nemělo přinášet žádné problémy, což se ostatně potvrdilo při jejím vyzkoušení v praxi při výuce anglického jazyka na ZŠ Vejprty. Program by si nicméně jistě zasloužil řadu vylepšení. V budoucnosti bych chtěl přidat např. funkci pro nahrávání a úpravu obrázků, které malým dětem jistě přispějí k lepší orientaci v otázkách a snadnějšímu zapamatování správných odpovědí a celkově zvýší atraktivitu aplikace. V současném stavu jsou použity obrázky v kategoriích Hodiny a Barvy, ale další do systému nelze přidávat. Program by kromě testování znalostí žáků mohl sloužit také jako pomůcka při učení nových větných spojení a slovíček. Učitel by jistě přivítal možnost vytvořit si jednoduchým způsobem lekce nebo tématické okruhy podle svých potřeb a právě probírané látky. Aplikaci by bylo možno rozšířit pro výuku angličtiny na vyšším stupni základní školy. Do systému by potom mohly být zařazeny další typy otázek, např. otázky typu multichoice, kde na jednu otázku může existovat i více správných odpovědí. Daly by se přidat další nebo vylepšit stávající statistiky, např. statistika nejtěžších a nejlehčích otázek v systému podle průměrné dosažené úspěšnosti správného zodpovězení by mohla být zobrazována ještě za určité časové období. Učitel by se tak lépe mohl přizpůsobit dosaženým vědomostem žáků při opakování nedávno probírané látky.

33

34

Závěr

Literatura [1] PONKRÁC, Miloslav. PHP a MySQL : bez předchozích znalostí. Vydání první. Brno: Computer Press, 2007. 221 s. ISBN 978-80-251-1758-3, K1294. [2] HOLČÍK, Tomáš, et al. 1001 tipů a triků pro WWW stránky. Vydání první. Brno: Computer Press, 2003. 402 s. ISBN 80-7226-756-6, KO446. [3] LACKO, Luboslav. PHP5 a MySQL5 : Hotová řešení. Vydání první. Brno: Computer Press, 2007. 320 s. ISBN 978-80-251-1695-1, K1479. [4] KOFLER, Michael; ÖGGL, Bernd. PHP5 a MySQL5 : Průvodce webového programátora. Vydání první. Brno: Computer Press, 2007. 607 s. ISBN 978-80-251-1813-9, K1469. [5] ZAJÍC, Petr. Linuxsoft.cz [online]. 2004 [cit. 2010-12-14]. PHP. Dostupné z WWW: . [6] Ijv.cz : institut jazykového vzdělávání [online]. 2010 [cit. 2010-12-22]. Online test angličtiny. Dostupné z WWW: . [7] Testpark.cz : online testy zdarma [online]. 2009 [cit. 2010-12-22]. Angličtina pro nejmenší. Dostupné z WWW: . [8] Pygmalion.cz : Jazykové a vzdělávací centrum Pygmalion [online]. 2006 [cit. 2010-12-22]. On-line test angličtiny. Dostupné z WWW: . [9] PhDr. ROHLÍKOVÁ, Lucie, Ph.D. Jak motivovat žáka. Vydání první. Asista s.r.o. 64 stran. [10] Helpforenglish.cz [online]. 2009 [cit. 2010-12-22]. Angličtina pro začátečníky. Dostupné z WWW: . [11] Testomanie.cz [online]. 2010 [cit. 2010-12-22]. Angličtina zdarma testy. Dostupné z 35

36

Literatura

WWW: . [12] Angličtinatesty.cz [online]. 2000 [cit. 2010-12-22]. Angličtina testy. Dostupné z WWW: . [13] W3schools.com [online]. 2010 [cit. 2010-12-25]. Browser Display Statistics. Dostupné z WWW: . [14] DOSTÁL, Jiří. VÝUKOVÝ SOFTWARE A POČÍTAČOVÉ HRY - NÁSTROJE MODERNÍHO VZDĚLÁVÁNÍ. Časopis pro technickou a informační výchovu [online]. 2009, č.1, [cit. 2010-12-28]. Dostupný z WWW: . [15] Terasoft.cz [online]. 2002, 23.2.2004 [cit. 2010-12-29]. TS Angličtina 1 - Pro malé školáky. Dostupné z WWW: . [16] Vitware.cz [online]. 2010 [cit. 2010-12-29]. Word Manager. Dostupné z WWW: . [17] Vitware.cz [online]. 2010 [cit. 2010-12-29]. Smart Tests - testy, které učí. Dostupné z WWW: . [18] Easywords.eu [online]. 2010 [cit. 2010-12-29]. Easy Words. Dostupné z WWW: . [19] PHP.net : manual [online]. 1997, 2010-12-24 [cit. 2010-12-29]. Dostupné z WWW: . [20] Ponkrac.net [online]. 2010 [cit. 2011-01-02]. Complex Web Server. Dostupné z WWW: .

PŘÍLOHA A SEZNAM POUŽITÝCH ZKRATEK CSS Cascading Style Sheets ČVUT České vysoké učení technické GPL GNU Public Licence GUI Graphical User Interface LMS Learning Management systém PHP Hypertext Preprocessor PX pixel SQL Structured Query Language URL Uniform Resource Locator W3C Worl Wide Web Consortium WWW Worl Wide Web ZŠ základní škola

37

38

SEZNAM POUŽITÝCH ZKRATEK

PŘÍLOHA B INSTALAČNÍ A UŽIVATELSKÁ PŘÍRUČKA B.1 Instalace K instalaci výukového systému angličtiny pro 1. stupeň ZŠ je potřeba zaregistrovat si doménu a nahrát na server php skripty, css soubory a složku s obrázky, které se nachází na přiloženém CD. Poté je na serveru nutné aktivovat MySQL databázi a pomocí zazipovaného souboru testyanglictina.sql v ní vytvořit všechny potřebné tabulky a nahrát do nich potřebná data.

B.1.1 Registrace Pro provoz jednoduchého výukového systému jistě stačí neplacená doména. Popíšu proto registraci a vytvoření účtu na serveru ic.cz. Po načtení stránky http://www.ic.cz/ se vám ihned zobrazí formulář, kde si vyberete adresu svých webových stránek. V mém případě to byla adresa testyanglictina.chytry.cz. Po vyplnění jména, příjmení a dalších povinných údajů opíšete kód bránící automatickým registracím, vyberete příslušnou kategorii, do které budou stránky v katalogu poskytovatele zařazeny, a zvolíte si své heslo přes které se v budoucnu dostanete ke svému účtu pro editaci stránek. Na vámi zadaný e-mail poté budou odeslány všechny informace, jako přihlašovací jména a hesla k ftp klientovi, k databázi MySQL atd.

39

40

PŘÍLOHA B

Obrázek B.1: Volba názvu adresy stránek na ic.cz

Obrázek B.2: Zadávání kontaktních údajů na ic.cz

Obrázek B.3: Opisování kódu na ic.cz

Obrázek B.4: Zařazení stránek do kategorie na ic.cz

41

42

PŘÍLOHA B

Obrázek B.5: Volba hesla na ic.cz

Obrázek B.6: Potvrzení úspěšné registrace na ic.cz

B.1.2 Aktivace databáze Při kliknutí na odkaz status MySQL v levém menu zjistíte, že databáze je neaktivní. Aktivujete ji zadáním přihlašovacího jména z e-mailu a vámi zvoleného hesla. Nyní již můžete poklepáním na odkaz MySQL otevřít nástroj na správu databáze phpMyAdmin. V menu nahoře vyberete odkaz Import. Na další stránce si již můžete načíst výše zmíněný soubor testyanglictina.sql a nahrát. Vytvoří se vám všechny tabulky a nahrají všechna data, potřebná pro provoz systému.

Obrázek B.7: Zadávání hesla pro MySQL na ic.cz

Obrázek B.8: Úspěšná aktivace databáze na ic.cz Je také potřeba změnit následující údaje v souboru prihlasovaci_udaje_db.php: $server $databaze $heslo_db $uzivatel_db

43

44

PŘÍLOHA B

B.1.3 Nahrání souborů Soubory na server můžete nahrávat pomocí vestavěného FTP klienta. Můžete buď vybírat soubor po souboru nebo pomocí java apletu označit všechny najednou. Složku obrazky musíte nahrát přes java aplet celou.

B.2 Adresa a přihlašovací údaje systému Mnou vytvořený systém je možno vyzkoušet na adrese: http://www.testyanglictina.chytry.cz Přihlašovací údaje pro žáka: login: zak heslo: zak Přihlašovací údaje pro administrátora systému: login: admin heslo: admin

B.3 Sekce pro žáky V sekci pro žáky můžete spouštět testy, zobrazovat si své výsledky a nápovědu.

B.3.1 Spuštění testu Pro spuštění testu si nejdříve musíte vybrat kategorii, z které se vám po zmáčknutí tlačítka start zobrazí deset otázek. Ke každé otázce jsou nabídnuty tři odpovědi, z nichž pouze jedna je správná. Po vyplnění testu a zmáčknutí tlačítka vyhodnotit vám budou předloženy výsledky a vyhodnocení testu. Pokračovat v testování svých znalostí můžete zmáčknutím tlačítka další test.

B.3.2 Zobrazení nápovědy Na stránku s nápovědou k systému se dostanete z kterékoliv stránky. Vždy budete přesunuti do části nápovědy, týkající se sekce, odkud jste právě přišli. Vrátit se můžete pomocí tlačítka zpět, nacházejícího se pod každou tematickou částí nápovědy.

B.3.3 Zobrazení výsledků V budoucnu se na této stránce objeví více statistik týkajících se právě přihlášeného žáka. V době odevzdání této práce jsou zatím k dispozici pouze tři údaje. Žák se může podívat, kolikrát již tyto stránky navštívil, kolik celkově spustil testů a jaká je jeho celková průměrná procentuální úspěšnost.

B.4 Sekce pro administrátory Administrátor může v systému vykonávat všechny činnosti jako žák. Níže tedy budou vysvětleny pouze činnosti spojené s administrací systému.

B.4.1 Vytvoření zkouškového testu Možnost pro vytvoření zkouškového testu se pro administrátora skrývá pod odkazem spustit test. Tam si stejně jako žák může spustit test z libovolné existující kategorie otázek a vyzkoušet si tak, jak jsou žákům jím vytvářené otázky a odpovědi předkládány v praxi. Vytvoření zkouškového testu spočívá ve vybrání kategorií, z kterých bude test sestaven. Ty se administrátorovi zobrazí po kliknutí na odkaz sestavit zkouškový test. Test bude uložen do databáze a všichni žáci tak v rámci zkoušky budou moci odpovídat na stejné otázky.

B.4.2 Správa tříd Po kliknutí na odkaz Třídy v levém menu se zobrazí tabulka obsahující všechny existující třídy v systému. U každé třídy je ikonka s perem pro editaci údajů a ikonka s křížkem pro vymazání třídy. Po kliknutí na odkaz Založit novou třídu se objeví formulář, do něhož může admin zadat všechny potřebné údaje a ty pak následně uložit do databáze.

B.4.3 Správa žáků Do této sekce se dostanete kliknutím na odkaz Žáci v levém menu. Zvolením třídy z rozbalovacího seznamu si můžete žáky nacházející se v systému prohlížet a následnně mazat či editovat. Kliknutím na odkaz Vložit nového žáka se vám zobrazí formulář, do kterého můžete zadat všechny nutné údaje a ty poté odeslat do databáze.

45

46

PŘÍLOHA B

B.4.4 Správa kategorií Po kliknutí na odkaz Kategorie v levém menu se vám zobrazí tabulka se všemi existujícími kategoriemi. U každé je poklepáním na patřičnou ikonku opět možnost jednotlivé kategorie mazat či editovat. Kliknutím na odkaz Založit novou kategorii se vám zobrazí formulář, pomocí něhož můžete do databáze systému vložit novou kategorii otázek.

B.4.5 Správa otázek Do této sekce vstoupíte poklepáním na odkaz Otázky v levém menu. Po výběru kategorie a zmáčknutí tlačítka Zobrazit se vám zobrazí všechny otázky a příslušné odpovědi v dané kategorii otázek. Po kliknutí na ikonku s perem vám bude předložen formulář obsahující otázku a všechny k ní náležící odpovědi, které můžete editovat. Po kliknutí na ikonku s křížkem a potvrzení požadavku vymažete ze systému otázku i všechny k ní patřící odpovědi. U vkládání nové otázky máte na výběr ze dvou možností. Podle toho, zda zvolíte slovíčka nebo gramatiku se zobrazí patřičný formulář, do kterého můžete vložit všechny potřebné údaje.

B.4.6 Správa administrátorů Jako administrátor systému máte možnost vložit do systému dalšího administrátora. Kromě názvu třídy vkládáte stejné údaje jako u žáka. Nově vytvořený admin má stejná oprávnění jako vy.

PŘÍLOHA C OBSAH PŘILOŽENÉHO CD Na přiloženém CD jsou následující složky: bakalarska_prace – text bakalářské práce ve formátu PDF a ODT testy_anglictina.sql.zip – zazipovaný sql export databáze video – video ve formátu MPG pořízené při testování systému v praxi na ZŠ Vejprty zdrojove_kody – všechny php skripty, css soubory a obrázky potřebné k běhu systému - obrazky – složka s obrázky - zdrojaky – složka se skripty - administratori.php - index.php - formular.js - generovani_testu.php - heslo.php - kategorie.php - levy_sloupec.php - napoveda.php - odhlasit.php - otazky.php - pomocne_funkce.php - pravy_sloupec.php - pridat_uzivatele.php - prihlasit.php - prihlasovaci_udaje_db.php - pripojeni_db.php - statistiky.php - statistiky_kategorie.php - statistiky_otazky.php - statistiky_prihlaseni.php - statistiky.testy.php - styl1.css - styl2.css - styl3.css - styl4.css - testy.php 47

48

OBSAH PŘILOŽENÉHO CD

- tridy.php - uvodni_stranka.php - vysledky.php - zaci.php - zkouska.php - zmena_stylesheetu.php

Systém pro podporu výuky anglického jazyka na 1. stupni ZŠ

Recommend Documents

Pouze pro administrátora!

Přihlásit!