Jednoduchý kvíz v JavaScriptu

Následující článek je určen milovníkům televizních soutěží typu „Chcete být milionářem“, „Riskuj“ apod. Jedná se o jednoduchý JavaScript pro kladení testových otázek a kontrolu správných odpovědí.

Své schopnosti si můžete vyzkoušet v ukázce kvízu. Obsluha skriptu by měla být zřejmá, co se týče znění jednotlivých otázek – inu, berte to jako příklad, sami určitě vymyslíte otázky lepší.

Popis skriptu

Data o otázkách a odpovědích jsou uložena v dvourozměrném poli, jehož definici uvedeme v hlavičce stránky, případně v externím souboru:

var q = [
    [ „Kolikátý v periodické tabulce prvků je vodík?“, „1“ ],
    [ „Jaké je křestní jméno herce Nárožného?“, „Petr“ ],
    [ „Jaké je hlavní město Ruska?“, „Moskva“ ],
    [ „Jaká je chemická značka mědi?“, „Cu“ ],
    [ „Jaký je smysl života?“, „Kdo ví“ ],
    [ „Jaká je kráva Milka“, „Fialová“ ],
    [ „Kolik válců má čtyřválcový motor?“, „4“ ],
    [ „Kolik dní má přestupný rok?“, „366“ ] ];

Poté následuje definice pomocných proměnných. Pole qp bude držet informaci o tom, které otázky již byly položeny, trojička krkolomně nazvaných proměnných itmp, itmpok a itmpfail je určena pro natažení použitých obrázků do cache a konečně proměnná lastIndex uchovává index naposledy položené otázky (platný v poli q) či hodnotu -1 v případě, že tento index není znám:

var qp = new Array(q.length);
var itmp = new Image();
var itmpok = new Image();
var itmpfail = new Image();
itmp.src = „quep.gif“;
itmpok.src = „quepok.gif“;
itmpfail.src = „quepfail.gif“;
var lastIndex=-1;

V hlavičce stránky je dále třeba nadefinovat dvě obslužné funkce, ShowQuestion a CheckAnswer, k nim se však vrátíme později. Nyní se přesuňme do těla stránky, kde vytvoříme formulář pro zobrazování otázek a odpovědí. Tento formulář je zarámován v tabulce, pro přehlednost si však uvedeme jen jeho nejnutnější kód, bez „tabulkových“ elementů:

<form name=“answer“ action=““>
    <textarea rows=“4″ name=“q“ cols=“40″></textarea><br>
    <input name=“a“ size=“20″> <input type=“button“ name=“s“ value=“Odeslat“ onclick=“CheckAnswer()“><br>
    <input name=“r“ style=“border:none;color:red“ size=“50″>
</form>

Žluté obrázky s otazníky jsou generovány JavaScriptovou smyčkou z pole q například takto (podmínka na posledním řádku smyčky slouží k primitivnímu zalomení řádku obrázků vždy po šesti):

var i;
for( i=0; i<q.length; i++ ) {
    document.write(„<a href=’javascript:void(0)‘ onClick=’ShowQuestion(„+i+“)‘><img name=’que“+i+“‚ src=’que.gif‘ border=’0′ width=’40‘ height=’40‘></a>&nbsp;“);
    if((i%6)==5) document.write(„<br>“);
}

Dostáváme se zpět k avizované dvojici obslužných funkcí. První z nich, ShowQuestion, přepíše do příslušného formulářového pole text zvolené otázky (index této otázky v poli q je předáván jako parametr theIndex). Kromě toho jsou vynulována textová pole s odpovědí a vyhodnocením a příslušný obrázek otazníku je nahrazen šedým políčkem. Do pole qp funkce ShowQuestion ukládá příznak, že tato otázka již byla položena – a sama i tento příznak testuje a zamezuje tak duplicitnímu položení stejné otázky.

function ShowQuestion(theIndex) {
    document.answer.q.value = „“;
    document.answer.r.value = „“;
    if(!qp[theIndex]) {
        document.answer.q.value=q[theIndex][0];
        qp[theIndex]=true;
        document.images[„que“+theIndex].src=itmp.src;
        lastIndex = theIndex;        
    } else {
        lastIndex = -1;
    }
}

Zbývá již jen funkce CheckAnswer, volaná po stisku tlačítka „Odeslat“. Jejím úkolem je především vyhodnocení správnosti odpovědi (k testu se používá prosté textové porovnání správné a uživatelovy odpovědi, provedené v „lowercase“). Poté je zobrazena vhodná informační zpráva a šedý obrázek aktuálně zvolené otázky nahrazen značkou pro správnou či chybnou odpověď.

function CheckAnswer() {
    if(lastIndex==-1) {
        document.answer.r.value = „“;
        alert(„Nejprve vyberte otázku!“);
    } else {
        if( q[lastIndex][1].toLowerCase() == document.answer.a.value.toLowerCase() ) {
            document.answer.r.value = „Správná odpověď!“;
            document.images[„que“+lastIndex].src=itmpok.src;
        } else {
            document.answer.r.value = „Špatná odpověď. Správná odpověď je ‚“ + q[lastIndex][1] + „‚.“;
            document.images[„que“+lastIndex].src=itmpfail.src;
        }
    }
    document.answer.a.value = „“;   
}

K dispozici je vám, jak je dobrým zvykem, kompletní zdrojový kód včetně použitých obrázků. Možná další rozšíření skriptu (pominu-li grafickou stránku věci) jsou především ve způsobu vyhodnocování otázek, některé otázky mohou mít i více než jednu správnou odpověď; lze přidat počítání správných výsledků, výběr otázek dle kategorií, náhodné kladení otázek atd. Protože kvízy obecně představují poměrně populární způsob využití klientských skriptů, je možné, že se k těmto rozšířením vrátíme v některém s dalších článků na toto téma, budete-li mít zájem.