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> “);
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.
Mohlo by vás také zajímat
-
Nové AI modely od Open AI a Google
22. května 2024 -
inPage AI: Revoluční nástroj pro tvorbu webů
3. července 2024
Nejnovější
-
Doména .io v ohrožení: Co přinese předání Čagoských ostrovů?
10. října 2024 -
Jak se chránit před podvody na internetu – část 1
8. října 2024
Roman
Úno 25, 2010 v 11:15Chci se zeptat, zdalipak by to šlo převést i do formy visual basicu. Popř., jak by to dalo udělat. Díky