| předchozí | obsah DP | home | následující |

2.5. Krok za krokem

2.5.1. Instalace

Za Programovací nástroj již bylo tedy zvoleno PHP, pod serverem Apache. Pokud jsem pracoval ve škole v počítačové učebně nebo na koleji, tak nebyl žádný problém. Základní předpoklad připojení na internet a tím i k serveru byl bezezbytku splněn. Horší to bylo, když jsem chtěl pracovat i doma. Tam jsem trvalé připojení k internetu neměl. Jen přes modem po linkách Českého Telecomu což, věci znalí mi dají za pravdu, není to pravé. Proto jedinou smysluplnou možností byla instalace webového serveru na mém počítači, abych mohl pracovat lokálně. Má volba byla logická, server Apache. Vzhůru do instalace.

Dalo to spoustu času, zkoušení a proklínání, ale Server Apache 1.3.14 se podařilo úspěšně nainstalovat, nakonfigurovat a spustit i na mém počítači doma. Dalším krokem bylo PHP. První verzí, co jsem měl, bylo PHP 4.0 beta3. Nastavit správně konfigurační soubory PHP i Apache tak, aby to celé fungovalo, byla fuška, ale nakonec se vše opět šťastně podařilo. Pocit radosti, když jsem zkušebně spustil Internet Explorer a naťukal adresu na soubor http://localhost/pokus.php s kouzelným obsahem
<? php echo "Hello world!"; ?>
a skutečně mi to na obrazovku vypsalo Hello world!, byl nepopsatelný. Časem jsem nahradil stávající verzi verzí novější 4.3.1 a bylo mi dopřáno objevit tak objevené ještě jednou.

2.5.2. První krůčky s PHP

Zatímco základy HTML jsem měl v malíku, s PHP jsem do té doby neměl žádné zkušenosti. K mé velké radosti jsem základy PHP zvládl rychle. PHP má opravdu hodně společného s programovacím jazykem C respektive s C++, které jsme se učili ovládat ve škole v předmětu Programování23 a Programování33. Obdobná syntaxe a většina stejných příkazů (if, else, while, do while, switch, case).

Při učení jsem měl k ruce hlavně dvě knihy: [10] a [7]. Druhá se mi líbila více. Pro začátečníky v oboru PHP mohu jedině doporučit. Od nejzákladnějších a nejjednodušších skriptíků se dostává k tvorbě jednodušších aplikací. Její součástí je i referenční příručka funkcí. Nevýhodou knih (nejen zmíněných dvou) je jejich neaktuálnost. Protože vývoj jde dále, přibývají i novější verze PHP. Proto dalším mým neocenitelným pomocníkem se stal PHP manuál. K dispozici je na webu v nejaktuálnější podobě [11]. Je i v české verzi, i když ne úplně celý. Základní funkce jsou přeloženy, nové, doplněné a specifické jsou v originálním jazyce - v angličtině. Ostatně, tak je tomu u většiny manuálů. Takže si člověk ještě zdokonalí své znalosti cizího jazyka. Takže jsem zvládl PHP a posunul se dále.

2.5.3. Jak bude aplikace vypadat?

První přiblížení. Na stránce bude napsáno, o jaký test se jedná a dále tam bodou zadání jednotlivých otázek, několik variant odpovědí se zašktávacími poli typu checkbox nebo přepínací radio a tlačítko ODESLAT. Po odeslání se výsledky zpracují v dalším skriptu a mě se jako uživateli zobrazí přehledným způsobem vyhodnocení. Celý test bude pak mít jednotný vzhled se stránkami MaKN, což se zajistí pomocí kaskádového stylu.Viz kap. 2.5.7.1.

2.5.4. Formulář a zpracující skript

První, co jsem udělal, byla jednoduchá HTML-stránka, kde jsem vytvořil zmíněný formulář pomocí checkbox - zobrazeného jako čtvereček . Ten mohu zaškrtnout nebo odškrtnout (pozn. zaškrtnutý = je označen, odškrtnutý = zůstává prázdný). Každý má své jméno - atribut name a hodnotu value. Při odeslání se do zpracujícího skriptu action předají zaškrtnutím inicializované hodnoty pro jednotlivá name. Formuláře jsou tím pravým interaktivním.

<form action="vyhodnoceni.php" method="post">
Otázka č.1: 3+3 je? <br />
<input type="checkbox" value="a" name="skrt1_a" /> a) 1 <br />
<input type="checkbox" value="a" name="skrt1_b" /> b) 6 <br />
<input type="submit" value="odeslat" />
</form>

Otázka č.1: 3+3 je?
a) 1
b) 6
Ještě jsme přeskočili atribut method. Ten určuje způsob, jakým budou informace předány.
1. method="get" Všechny předávané informace se připojí jako dotaz za znak otazník na konec URL, které ukazuje na CGI-skript. V mém příkladě http://vyhodnot.php?$skrt1-b=a. Symbol $ před jménem se v PHP používá pro označení proměné.
2. method="post" je dobré užít pro větší počet předávaných dat. Nejsou vidět na konci odkazu, protože jsou přenášeny v těle HTTP požadavku.

V mém ukázkovém příkladě se odeslala pouze proměná skrt1_b s hodnotou "a". Ve zpracujícím skriptu vyhodnoceni.php pak stačí porovnat podmínkou hodnotu $skrt1-b přijatou a správnou a vypsat verdikt.

<?php if ($skrt_b=="a"): print "Správná odpověď.";
                   else: print "Špatná odpověď."; ?>
Další možnosti využití formulářů lze najít v [7] kap.5

Určitě jste si povšimli, že vyhodnot.php je velice jednoúčelový skript a funguje pouze pro otázku č.1. Zadání testu se tedy musí napsat ručně, vyhodnocující skript taktéž a přímo na míru. To už vyžaduje znalosti HTML a PHP. Déle jistě nastanou komplikace při případné změně testu, aktualizaci, rozšíření. To tvůrce testu, uživatele, spíše odradí. Tudy cesta nevede. Je potřeba oddělit od sebe znění testu a parametrů od vlastních funkcí na zpracování testu. Tak, aby se uživatel nemusel zabývat tím, jak to celé funguje a proč. Udělat aplikaci typu BlackBox. Já, laický uživatel do něho "nasypu" své hodnoty - zadání testu, otázky, parametry a vypadnou mi formuláře a checkboxy a postará se mi to o vyhodnocení. Teď je ovšem potřeba zvolit formát zadávaných dat.

2.5.5. Formát dat testu

V úvahu jsem vzal dvě možnosti.
- Databáze - PHP sice nabízí funkce pro práci s databázemi SQL a mySQL. Ale spravovat databázi, vkládat do ní další data, to je uživatelsky náročnější. A pak ne na všech serverech je podpora databází běžná.
- Textový soubor - Ten je nejjednodušší. Musím vytvořit strukturu ve které budou data uložena. Ta lze oddělit speciálními znaky. Například # nebo % nebo @. Není ještě něco jiného? A co takhle XML! Viz kapitola 3. Řešení pomocí XML se v současné době používá stále častěji a má před sebou velkou budoucnost. Skýtá možnost vytvoření vlastní struktury, avšak v rámci pevných pravidel.

2.5.6. Zadávaná data testu

Co se týče obsahu, určitě budu zadávat: znění otázky, několik variant odpovědí, jejich správnost a bodové ohodnocení. Dále zadání nemusí být jen psané. Mohl by to být obrázek, multimediální soubor, dokument v PDF? Proč ne.Jaké možnosti nastavení testu by se mohly hodit? Míchání otázek, čas?
To všechno se zadává do dvou XML souborů. Jejich název je libovolný, názvy DTD jsou závazné, tak jak jsem je vytvořil - test5.dtd a cfg5.dtd. Postupným doplňováním potřeb a požadavků na test jsem se během vývoje dostal až na verzi č.5.

Soubory potřebné pro vytvoření testu:
1. Podle definice cfg5.dtd, například cfg.xml
2. Podle definice test5.dtd, například test.xml

Následuje výpis a popis jednotlivých DTD

cfg5.dtd

<?xml version="1.0" encoding="windows-1250" ?>
<!ELEMENT cfg (zadani, michani, vysledky)>
<!ELEMENT zadani EMPTY>                    
<!ATTLIST zadani adresa CDATA #REQUIRED>     
<!ATTLIST zadani otazek NMTOKEN #IMPLIED>     
<!ATTLIST zadani cas NMTOKEN #IMPLIED>     
<!ATTLIST zadani login (a|n) "n">     
<!ELEMENT michani EMPTY>
<!ATTLIST michani otazek (a|n)+ "n">          
<!ATTLIST michani odpovedi (a|n) "n">          
<!ELEMENT vysledky EMPTY>
<!ATTLIST vysledky pocitani NMTOKEN #REQUIRED> 
<!ATTLIST vysledky zobrazovat (a|n) "a">
<!ATTLIST vysledky ukladat (a|n) "n">
<!ATTLIST vysledky adresar CDATA #IMPLIED>     

test5.dtd

<?xml version="1.0" encoding="windows-1250" ?>
<!ELEMENT test (okruh, otazka+)>
<!ELEMENT okruh (#PCDATA)>
<!ELEMENT otazka (zadani, odpoved+)>
<!ELEMENT zadani (#PCDATA)>
<!ATTLIST zadani typ (normal|url) "normal">
<!ELEMENT odpoved (#PCDATA)>
<!ATTLIST odpoved spravnost (a|n) #REQUIRED>
<!ATTLIST odpoved body NMTOKEN #REQUIRED>
<!ATTLIST odpoved typ (normal|url) "normal">

vysvětlivky užitých pojmů:
EMPTY - nepárový tag
CDATA - může obsahovat jak svoji hodnotu, tak libovolný text
#REQUIRED - povinný atribut
#IMPLIED - nepovinný atribut
login (a|n) "n" - může nabývat pouze hodnot "a" nebo "n", implicitně "n"
<!-- --> - komentář

Hlavní parametry testu nastavuje uživatel v atributech elementů: zadani, michani, vysledky. Tyto tagy jsou dle DTD nepárové, tzn. že je nutné je tak skutečně psát včetně lomítka: <prazdny_element />
cfg.xml

1 <?xml version="1.0" encoding="windows-1250"?>
2 <!DOCTYPE cfg SYSTEM "cfg5.dtd">
3 <cfg>
4 <zadani adresa="test.xml" cas="30" otazek="4" login="n" />          
5 <michani otazek="n" odpovedi="n" />
6 <vysledky pocitani="3" zobrazovat="a" 
            ukladat="a" adresar="vysledky/test06/" /> 
7 </cfg>

1 - XML deklarace. Kódování lze změnit dle skutečně použitého - windows-1250, UTF-8, iso-8859-2.
2 - Deklarace typu dokumentu. Obsahuje vždy jméno kořenového elementu (tzn. cfg). Za klíčovým slovem SYSTEM se pak uvádí URL adresa souboru obsahujícího DTD.
3 - Kořenový otevírací tag
4 - zadání
      - adresa - URL adresa souboru s testem. Práva pro tento adresář musí být nastavena pro čtení. Pokud tomu tak není nebo je špatně adresa, test pak pochopitelně nelze spustit.
       - cas - Čas v minutách na odpovídání otázek testu. Připraveno pro budoucí využití. Bude zapotřebí implementace JavaScriptu nebo jiného nástroje pracujícím na straně uživatele a ne na straně serveru.
      - otazek - Přirozené číslo, počet otázek vybíraných z celého souboru pro zobrazení. Pokud je zadaný počet vyšší než počet všech otázek, budou zobrazeny všechny otázky.
      - login - a/n. Zda je požadováno zadání jména testovaného před spuštěním testu. Má význam při současném ukládání výsledků. Odvozuje se z něho jméno ukládaného souboru, viz. kap 2.5.9.
5 - michani
       - otazek - a/n. Zobrazit otázky v náhodně promíchaném pořadí.
       - odpovedi - a/n. Zobrazit varianty odpovědí náhodně promíchané.
6 - vysledky
- pocitani
- viz. kap. 2.5.8.
       - 1 - Hodnotí se všechny odpovědi
       - 2 - Hodnotí se pouze zaškrtnuté odpovědi
       - 3 - Autoškola - správně jen když jsou správně zodpovězeny všechny odpovědi otázky
- zobrazovat - a/n. Při ano se zobrazí všechny odpovědi včetně správnosti. Při ne se zobrazí pouze dosažený počet bodů a úspěšnost.
- ukladat - a/n. Při ano se výsledky ukládají do adresáře.
- adresar - Adresář pro ukládání výsledků. Ukončujte prosím lomítkem. Dále je potřeba pro tento adresář nastavit práva pro zápis. Pokud nelze do adresáře zapisovat, zobrazí se při spuštěním testu varování.
7 - Kořenový uzavírací tag.
test.xml

 1 <?xml version="1.0" encoding="windows-1250"?>
 2 <!DOCTYPE test SYSTEM "test5.dtd">
 3 <test>
 4   <okruh>Test pokusny na nove dtd a cfg file v.5</okruh>
 5   <otazka>
 6     <zadani typ="normal"> 3+3 je?</zadani>
 7     <odpoved spravnost="n" body="2">1 </odpoved>
 8     <odpoved spravnost="a" body="2" typ="normal">6 </odpoved>
 9   </otazka>
10   <otazka>
     ........
     </otazka>
      ......
12 </test>

1 - XML deklarace. Kódování lze změnit dle skutečně použitého - windows-1250, UTF-8, iso-8859-2.
2 - Deklarace typu dokumentu. Obsahuje vždy jméno kořenového elementu (tzn. cfg). Za klíčovým slovem SYSTEM se pak uvádí URL adresa souboru obsahujícího DTD.
3 - Kořenový otevírací tag
4 - okruh - Tématický okruh celého testu.
5 - Otevírací tag pro otázku
6 - zadani> - typ - normal/URL - čistý text nebo URL adresa souboru se zadáním
7 - odpoved
      - spravnost - a/n
- Je to správně, nebo není.
      - body
- Počet bodů za odpověď. Libovolný počet odpovědí.
10 - Libovolný počet otázek.
12 - Kořenový uzavírací tag

2.5.7. Vzhled testu

Jak bude test vypadat, je neobyčejně důležité kritérium. Vizuální část přichází do přímého styku s uživatelem. A je potřeba, aby vzhled byl přehledný, jednoduchý, aby napomohl v orientaci. Sebelépe technicky propracovaný systém nebude u uživatelů v oblibě, pokud nebude už na první pohled vypadat přívětivě.
Při vlastním návrhu na vzhled testovacího prostředí jsem byl ovlivněn jedním faktorem. WWW-stránky MaKN, pro které bylo testování hlavně navrhováno, už svůj design měly. Nemusel jsem vymýšlet vše úplně od samého začátku, stačilo doplnit a vkusně zakomponovat nové prvky do už používaného a zaběhlého vzhledu. A jak byl mým předchůdcem styl definován? Pomocí jedné šikovné pomůcky - CSS.

2.5.7.1. CSS

Cascading Style Sheets. Česky: kaskádové styly. CSS vznikly někdy kolem roku 1997. Je to kolekce metod pro grafickou úpravu webových stránek, používají se běžně k formátování HTML. Pod pojmem formát se chápe barva a velikost písma, pozadí, zarovnání atd.
Jedinou možností, jak šlo do té doby text v HTML formátovat, bylo pouze použití HTML-tagů, např. již zmiňovaná kurzíva <i>kurzíva</i>. Časem se tento způsob stal omezeným a uživatelé chtěli nové širší možnosti. To jim daly CSS a staly se naprosto běžným nástrojem.
Propojení s HTML lze dosáhnout třemi způsoby.

1. Do zápisu HTML textu se přidá styl pouze jednoho elementu - in-line: <H1 STYLE="color: red">červený nadpis</H1>

2. Do hlavičky stránky <HEAD> přidám definici formátu libovolných elementů a potom se všechny elementy v textu zobrazí dle těchto pravidel: <STYLE TYPE="text/css"><!-- H1{color: red} H2{color: blue} --></STYLE>

3. Poslední, nejpoužívanější způsob je formátování pomocí externího souboru stylu, kterým je textový soubor s příponou *.css. Struktura souboru je shodná se zápisem druhého způsobu. Jako první se píše selektor = název tagu a za něj do složených závorek deklarace. Selektor může být samotný jeden tag (H1), jedna nebo více jeho tříd (H1.trida1)(H1.trida2), třídy se od tagu oddělují tečkou, nebo samotná třída (.jinatrida) s tečkou na začátku. Deklarace se skládají ze dvou částí - z vlastnosti (color) a za dvojtečkou její hodnoty (red). Jednotlivé deklarace se mezi sebou oddělují středníkem. Pro připojení stylu se v hlavičce stránky odkáže . Nespornou výhodou je, že jeden soubor CSS se dá nalinkovat z mnoha stránek, což efektně zajistí jednotný vzhled všech stránek.
Při formátování platí hierarchie, to znamená, že vlastnosti se řídí dle nejbližšího předpisu a všemi nadřazenými pokud nejsou přepsány bližším předpisem. Co nenastavím, je implicitní. V současné době je standardizován CSS verze 2, která má mnoho možností nad rámec této práce. [12][13]

2.5.7.2. CSS pro programový systém TEST

V předchozím odstavci jsme se ve stručnosti seznámili s CSS. Tak se podíváme s výsledným vzhledem testových otázek a se stylem. kterým jsem toho dosáhl.


Text zadání otázky je zvýrazněn tučně. Varianty odpovědí jsou poodsazeny stranou. Pro volbu odpovědi jsou na začátku řádku zaškrtávací pole formuláře typu checkbox. Pokud je otázkou nebo odpovědí odkaz (tato možnost vyplývá ze struktury dat), je odkaz podtržen a při najetí kurzoru se přebarví na tmavě modrou barvu.
Po odeslání dat systém test vyhodnotí a výsledky se zobrazí. Pořadí otázek zůstává zachováno. Škrtnuté a nezaškrtnuté checkboxy jsou nahrazeny obrázkem. Dlouho jsem hledal nejvhodnější způsob zobrazení výsledků, aby byl přehledný a pochopitelný. O co se uživatel ve vyhodnocení zajímá nejdříve je, která jeho odpověď je špatně a která dobře. To jsem od sebe rozlišil barevným pozadím pod celým zněním odpovědi - špatná odpověď je červeně a dobrá je zeleně podložena. Při typu hodnocení testu 2 (dle 2.5.8.) jsou nezaškrtnuté odpovědi podloženy šedou barvou, protože se do hodnocení nezapočítávají. Nejen v tomto případě je vhodné u odpovědi ještě rozlišit, která odpověď je správná a měla být tím pádem zaškrtnuta. To jsem odlišil pomocí zvýraznění textu tučným písmem.

2.5.7.3. Použitý CSS

Celý vzhled je definován v souboru test.css. Základní vlastnosti a barevné schéma bylo převzato z main.css ze stránek MaK. Já jsem si jen doplnil své potřebné definice pro formátování. Pro odlišení se v názvech tříd vyskytuje slovo test.


body {font-family : "Times New Roman"; background-color : #FFF7CE;
      font-size : 13pt; color : #000000;}
= černé písmo veliklost 13
h1.test {color : #cc3300; font-size : 18pt;}
= nadpis, červené písmo veliklost 18
h2.test { color : #6600ff; font-size : 13pt;}
= nadpis, fialové písmo veliklost 13
font.test_ota {font-weight: bold;}
= znění otázky, tučné písmo
table.test {position: relative; left : 30px; font-size : 13pt;}
= tabulka odpovědí, odsunuta od kraje o 30 pixelů,
td.test_odp {width : 500px; height : 22px;}
= buňka tabulky odpovědi při vyplňování testu, bez barevného podkladu
td.test_aa {background-color : #33ff00; width : 500px;
font-weight : bold; height : 22px;}
= buňka zelený podklad, 500px široká, text tučně
td.test_na {background-color : #ff3300; width:500px;
            font-weight : bold; height : 22px;}
= buňka červený podklad, text tučně
td.test_an {background-color : #ff3300; width : 500px; height : 22px;}
= buňka červený podklad, text normálně
td.test_nn {background-color : #33ff00; width:500px; height:22px;}
= buňka zelený podklad, text normálně
td.test_gn {background-color : #cccccc; width:500px; height:22px;}
= buňka šedý podklad, text normálně
td.test_ga {background-color : #cccccc; width:500px;
font-weight:bold; height:22px;} = buňka šedý podklad, text tučně
td.test_bod {background-color : #ccffff; font-family : "Courier";
 width:40px; height:22px; text-align :right;}
= buňka s počtem bodů, podklad světle modře, text zarovnán vpravo
a.test_url:hover {color: #000099;}
a.test_url {color: #000000;}
= odkaz je černým texten, při najetí kurzoru je tmavě modrý

2.5.8. Hodnocení testu

Hodnocení testu je důležitým prvkem. Je mírou kvantity při porovnávání výsledků účastníků testu. V neposlední řadě také rozhodující kritérium pro klasifikaci. Při nastavování parametrů testu v cfg.xml se nastavuje vysledky pocitani="x". Zařadil jsem tři varianty typu počítání. Zde je jejich popis:

typ 1 - Kontrola správnosti všech variant. Při vyhodnocování se porovnávají všechny varianty odpovědí. Za správně zodpovězenou otázku se body přičítají, za špatně se odečítají. Správně zodpovězená otázka znamená, že je zaškrtnuto to, co mělo být, a není zaškrtnuto to, co nemělo být. V opačném případě je to špatně zodpovězená otázka.
typ 2 - Hledání správných odpovědí. Kontrola správnosti probíhá jen u zaškrtnutých variant. Body se přičítají za zaškrtnutou správnou odpověď, při zaškrtnutí nesprávné odpovědi se odečítají.
typ 3 - Autoškola, body jen za kompletně správně zodpovězenou otázku. Je to jen zpřísněný typ 1, inspirovaný současným hodnocením testů v kurzech autoškoly. Pokud není celá otázka správně zodpovězena, nepřičítají se žádné body. Pokud je celá správně - "zelená", přičítá se aritmetický průměr z bodového hodnocení odpovědí jedné otázky. Při vyhodnocování testu skriptem 3.php se počítá maximální možný bodový zisk a procentuální úspěšnost testovaného.

2.5.9. Ukládání výsledků testů

Volba konfigurace se nastavuje v souboru cfg.xml: <vysledky ukladat="a" adresar="vysledky/test06/" /> umožňuje uložení do souboru, přičemž <zadani login="n" /> je určující pro pojmenování ukládaných souborů. Kombinací vzniknou tyto 3 možnosti:

1. ukladat="a", login="a" - Před zobrazením testu je uživatel testu vyzván k zadání jména. Po vyhodnocení se uloží do adresáře tyto soubory:
- jmeno.html -Uloží se HTML stránka vyhodnoceného testu
- _prehled.txt - na konec tohoto souboru se připíše 1 řádek
- _table.txt - na konec tohoto souboru se připíše 1 řádek

2. ukladat="a", login="n" - Žádné zadávání jména. Po vyhodnocení se uloží do adresáře tyto soubory:
Soubor _prehled.txt - na konec tohoto souboru se připíše 1 řádek

3. ukladat="n", login="n" - Žádné zadávání jména, žádné ukládání.

Soubor jmeno.html - HTML stránka pojmenovaná dle jména přihlášeného s uloženým kompletním vyhodnoceným testem. Soubor neexistuje, proto se v adresáři založí. Při druhém absolvování testu pod stejným jménem se nová data připíší na konec stávajícího souboru.

Soubor _prehled.txt - Do tohoto souboru se po řádcích na konec souboru připisují souhrnné informace o účastnících testu a jejich výsledcích. Data jsou v řádku a znamenají.
student1  10 / 20      2 / 4 / 7   50 %  26.04.04 21:52 2 min 
login, dosžených bodů / z možných, odpovídaných otázek / ze zobrazených / z celého souboru, ůspěšnost %, datum a čas ukončení testu, doba vyplňování testu Tento soubor informací poskytuje širokou možnost k analýze testu administrátorem. Stačí jednotlivá data oddělená mezerami načíst do tabulkového editoru a vyhodnotit. V případě, že není požadováno přihlášení, ale výsledky se ukládají, je login implicitně nastaven na anonym.

Soubor _table.txt - Do tohoto souboru se po řádcích na konec souboru připisuje základ tabulky s výsledky, kde je: odkaz na stránku login.html , dosažených bodů / z možných, uspěšnost%, prázdné místo na ruční doplnění hodnocení - známku. Tento polotovar se zobrazí pomocí vysledky.php jako HTML stránka.


Jména souborů označených tučně si lze prohlédnout v adresáři instal.
| předchozí | obsah DP | home | následující |