Zadání:
Vytvořte funkční kvíz, ve kterém se bude počítat skóre, na základě kterého se uživateli objeví hláška.
K tomuto příkladu budeme potřebovat formulář s výběrem možnosti. U každé z odpovědí nastavíme atribut value a do něho počet bodů, které chceme, aby se za danou odpověď přičetl ke skóre.
Poté vytvoříme HTML div, kterému dáme id. Do divu budeme později vypisovat výstup.
JavaScriptový kód vždy začínáme otevíracím tagem scriptu(<script>), ukončujeme ho uzavíracím tagem scriptu
(</script>).
JavaScript prvně prohledá celou stránku pro formulář s id kviz díky document.getElementById. Poté díky
addEventListener počká až uživatel zmáčkne tlačítko Vyhodnotit.
Jako první vytvoříme proměnné odpoved1, odpoved2, odpoved3, do kterých z formuláře vložíme počet bodů. Tyto hodnoty poté sečteme v proměnné skore.
Jako další vytvoříme proměnnou zprava, do které vložíme prázdné uvozovky.
Poté použijeme podmínku if().
Do ní vložíme zprávy, které chceme, aby se uživateli zobrazily při dosažení určitého skóre.
Nakonec zprávu vložíme do HTML divu.
<form id="quiz">
<p>Jak moc tě baví HTML?</p>
<label><input type="radio" name="q1" value="1" class="answer"> Vůbec</label><br>
<label><input type="radio" name="q1" value="2" class="answer"> Tak napůl</label><br>
<label><input type="radio" name="q1" value="3" class="answer"> Hodně</label><br>
<p>Jak moc tě baví CSS?</p>
<label><input type="radio" name="q2" value="1" class="answer"> Vůbec</label><br>
<label><input type="radio" name="q2" value="2" class="answer"> Tak napůl</label><br>
<label><input type="radio" name="q2" value="3" class="answer"> Hodně</label><br>
<p>Jak moc tě baví JavaScript?</p>
<label><input type="radio" name="q3" value="1" class="answer"> Vůbec</label><br>
<label><input type="radio" name="q3" value="2" class="answer"> Tak napůl</label><br>
<label><input type="radio" name="q3" value="3" class="answer"> Hodně</label><br><br>
<button type="button" id="kviz">Vyhodnotit</button>
<button type="reset">Resetovat</button>
</form>
<div id="kviz-vysledek"></div>
<script>
document.getElementById("kviz").addEventListener("click", function (e) {
e.preventDefault();
const odpoved1 = document.querySelector('input[name="q1"]:checked');
const odpoved2 = document.querySelector('input[name="q2"]:checked');
const odpoved3 = document.querySelector('input[name="q3"]:checked');
const skore = Number(odpoved1.value) + Number(odpoved2.value) + Number(odpoved3.value);
let zprava = "";
if (skore <= 3) {
zprava = "HTML, CSS i JS jsou zatím španělská vesnice";
}
else if (skore <= 6) {
zprava = "Jsi na dobré cestě, jen tak dál";
}
else {
zprava = "Ty jo, ty to fakt miluješ";
}
document.getElementById("kviz-vysledek").innerHTML = zprava;
});
</script>