Článek vytištěný ze serveru WebTip

Název článku: Kvíz v PHP (1)
Datum publikování: 10.03. 2003
URL článku: http://www.webtip.cz/art/wt_tech_php/wt_pecka_php_kviz1.html (kliknětě pro návrat)

Všechna práva vyhrazena (c) 2000 Grafika Publishing s.r.o.
Doslovné ani částečně přebírání tohoto materiálu není povoleno bez předchozího písemného svolení vydavatele - společnosti Grafika Publishing s.r.o.


Kvíz v PHP (1)

Asi před čtvrt rokem jsem chtěl na svůj web implementovat kvíz. Původně jsem měl v plánu využít některou ze snadno implementovatelných služeb pro tvůrce WWW stránek. Hledal jsem na českém i zahraničním Internetu, ovšem kvíz jaký jsem si představoval, jsem nenalezl. Mezi českými weby nabízejícími různá "udělátka" pro webdesignery (jako ankety, knihy hostů, mailformy ap.) jsem kvíz vůbec nenašel. Kdysi jsem našel zahraniční službu nabízející kvíz, ovšem v neplacené verzi byla personalizace tohoto kvízu výrazně omezená a především nebylo možno ovládání kvízu lokalizovat do češtiny.

Rozhodl jsem se udělat si tedy jednoduchý kvíz v PHP (bez použití databáze).
Vlastnosti kvízu jsou následující:

Kvíz si můžete vyzkoušet zde.

Kvíz sestává ze tří souborů:

data.php
<? 
$pocetotazek=3;
$pocetmoznosti=3;
$q1 = Array("Hlavní město ČR je", "a) Praha", "b) Brno", "c) Beroun", 1);
$q2 = Array("Česká vlajka obsahuje", "a) 2 barvy", "b) 3 barvy", "c) 4 barvy", 2);
$q3 = Array("Český národní strom je", "a) javor", "b) lípa", "c) kaštan", 2);
?>

Soubor data.php obsahuje především pole otázek a odpovědí. Počet polí odpovídá počtu otázek, přičemž názvy polí musí být q1 (1. otázka), q2, q3, q4 (4. otázka) atd. První prvek (tedy např. $q1[0]) každého pole obsahuje otázku, druhý (tedy např. $q1[1]) až předposlední prvek obsahuje příslušnou odpověď, poslední prvek obsahuje index prvku, který obsahuje správnou odpověď. Proměnná $pocetotazek by měla obsahovat hodnotu odpovídající počtu otázek, proměnná $pocetmoznosti by měla obsahovat počet možných odpovědí na každou z otázek.

hlavni.php
<html>
<head>
<title>Kvíz</title>
</head>
<body>
<p>KVÍZ - ZADÁNÍ OTÁZEK</p><br>
<form method="post" name="mujform" action="vyhodnoceni.php"
onSubmit="mujform.mujsubmit.value='Odesílá se...';">
<?
require "./data.php";
$krok=1;
while($krok<=$pocetotazek): //CYKLUS PRO OTÁZKY
   echo "Otázka ".$krok.".:<br>";
   echo "<b>".${"q".$krok}[0]."</b>";
   $subkrok=1;
   while($subkrok<=$pocetmoznosti): //CYKLUS PRO JEDNOTLIVÉ ODPOVĚDI
      echo "<br><input type=\"radio\" value=\"" . $subkrok .
      "\" name=\"a".$krok."\">".${"q".$krok}[$subkrok];
      $subkrok++;
   endwhile;
echo "<br><hr noshade>";
$krok++;
endwhile;
echo "<center><br>
<input type=\"submit\" name=\"mujsubmit\" value=\"Odeslat\">
</center>";
?>
</form>
</body>
</html>

Ve výše uvedeném kódu hlavni.php je kompletní zdrojový kód stránky, jehož stěžejní část tvoří formulář s otázkami a odpověďmi.  Na úplném začátku PHP skriptu se do hlavni.php vloží data.php. Následují dva vnořené cykly pro zobrazování otázek a odpovědí, přičemž nadřízený cyklus projíždí jednotlivé otázky a vnořený cyklus zobrazuje pro danou otázku její možné odpovědi. Princip fungování těchto cyklů, domnívám se, je zřejmý. Zastavím se alespoň u konstukce složeného názvu proměnné s níž se zde pracuje. Jak jsme si řekli v úvodu, názvy polí s jednotlivými otázkami jsou jsou q1, q2, q3..... Naším úkolem je podívat se v cyklu na jednotlivé otázky - tedy jednotlivá tato pole - to zajistíme právě pomocí zápisu ${"q".$krok}, protože všechny proměnné (pole) začínají "q" a následuje číslo odpovídající číslu otázky - toto číslo se bude v cyklu stále zvyšovat (dokud nebude dosaženo počtu požadovaného počtu otázek). Abychom mohli v názvu proměnné využít obsah jiné proměnné, využíváme složených závorek. Podobné skládání (ale již bez složených závorek) se nám objevuje ještě u názvu (name) radiobuttonů v cyklu pro jednotlivé odpovědi - name=\"a".$krok."\". Zajistíme takto příslušné názvy proměnných (paramerů), které se budou předávat skriptu vyhodnoceni.php.

Na závěr se zastavím ještě u malinkatého (pro funkčnost kvízu nepodstatného) javascriptu, který zajistí změnu nápisu na tlačítku pro odeslání kvízu po jeho odeslání (z "Odeslat" na "Odesílá se..."). Je to detail, který se hodí, zvláště má-li návštěvník kvízu pomalejší připojení a změna nápisu na tlačítku mu dá jasně najevo "že se něco už děje". Jedná se o akci onSubmit="mujform.mujsubmit.value='Odesílá se...';" u elementu FORM, kde mujform a mujsubmit odpovídají názvu formuláře a názvu tlačítka pro odeslání.

Tolik pro dnešek. Příště si ukážeme jak zpracovat data, která nám z hlavni.php přijdou, zobrazit vyhodnocení kvízu a zapsat výsledky a statistiky.


Autor: Pecka Miroslav
E-mail: mirpeg@seznam.cz