Un esercizio sfizioso per i neofiti del JavaScript ma non difficilissimo: costruire un piccolo quiz che mostra i risultati delle risposte ed assegna un punteggio finale da mostrare assieme all’esito complessivo. Vediamo come realizzarlo.
Vogliamo ottene un risultato simile al seguente in foto. Stili grafici e abbellimenti sono ridotti al minimo volutamente per concentrare l’attenzione sul codice JS.
La pagina HTML. Notiamo i name comuni per i radio e gli span messi accanto la domanda dove visualizzeremo il risultato della singola risposta. Occhio quando ad un name corrispondono più elementi della pagina/DOM, il getElementByName restituisce un vettore con i singoli componenti.
<!DOCTYPE html>
<html lang="it">
<head>
<title>Esercizio</title>
<meta charset="utf-8">
<link href="css/style.css" type="text/css" rel="stylesheet">
<script src="js/script.js"></script>
</head>
<body>
<div id="form">
<form name="form-quiz">
<label for="domanda1">Domanda 1: Quando è stata scoperta l'America?</label><br>
<input type="radio" name="domanda1" value="1942"> 1942 <span id="risposta1"></span><br>
<input type="radio" name="domanda1" value="1492"> 1492 <span id="risposta2"></span><br>
<input type="radio" name="domanda1" value="1592"> 1592 <span id="risposta3"></span><br>
<hr>
<label for="domanda2">Domanda 2: Quando è stata proclamata l'unità d'Italia?</label><br>
<input type="radio" name="domanda2" value="1740"> 1740 <span id="risposta4"></span><br>
<input type="radio" name="domanda2" value="1945"> 1945 <span id="risposta5"></span><br>
<input type="radio" name="domanda2" value="1861"> 1861 <span id="risposta6"></span><br>
<hr>
<label for="domanda3">Domanda 3: Quando è sbarcato l'uomo sulla luna?</label><br>
<input type="radio" name="domanda3" value="1969"> 1969 <span id="risposta7"></span><br>
<input type="radio" name="domanda3" value="1945"> 1945 <span id="risposta8"></span><br>
<input type="radio" name="domanda3" value="1984"> 1984 <span id="risposta9"></span><br>
<br>
<button type='button' onclick="risultato()">Controlla!</button>
</form>
</div>
<br>
<div id="risultato"></div>
</body>
</html>
Il codice del file JavaScript con la funzione che si occupa di controllare il risultato
/* Le nostre funzioni da bottone */
function risultato()
{
//prelevo il valore scelto tra le singole domande
//questa volta è un vettore di 3 elementi, non posso andare per id ma name
let domanda1 = document.getElementsByName("domanda1");
let domanda2 = document.getElementsByName("domanda2");
let domanda3 = document.getElementsByName("domanda3");
var punteggio = 0;
//svuoto i messaggi delle precedenti partite
document.getElementById("risposta1").innerHTML = "";
document.getElementById("risposta2").innerHTML = "";
document.getElementById("risposta3").innerHTML = "";
document.getElementById("risposta4").innerHTML = "";
document.getElementById("risposta5").innerHTML = "";
document.getElementById("risposta6").innerHTML = "";
document.getElementById("risposta7").innerHTML = "";
document.getElementById("risposta8").innerHTML = "";
document.getElementById("risposta9").innerHTML = "";
//controllo le risposte
//domanda 1 - risposta esatta è risposta2
let risposta;
if (domanda1[0].checked==true)
{
risposta = document.getElementById("risposta1");
risposta.style.color = "red";
risposta.innerHTML = "sbagliato";
}
if (domanda1[1].checked==true)
{
risposta = document.getElementById("risposta2");
risposta.style.color = "green";
risposta.innerHTML = "esatto";
punteggio = punteggio + 1;
}
if (domanda1[2].checked==true)
{
risposta = document.getElementById("risposta3");
risposta.style.color = "red";
risposta.innerHTML = "sbagliato";
}
//domanda 2 - risposta esatta è risposta6
if (domanda2[0].checked==true)
{
risposta = document.getElementById("risposta4");
risposta.style.color = "red";
risposta.innerHTML = "sbagliato";
}
if (domanda2[1].checked==true)
{
risposta = document.getElementById("risposta5");
risposta.style.color = "red";
risposta.innerHTML = "sbagliato";
}
if (domanda2[2].checked==true)
{
risposta = document.getElementById("risposta6");
risposta.style.color = "green";
risposta.innerHTML = "esatto";
punteggio = punteggio + 1;
}
//domanda 3 - risposta esatta è risposta7
if (domanda3[0].checked==true)
{
risposta = document.getElementById("risposta7");
risposta.style.color = "green";
risposta.innerHTML = "esatto";
punteggio = punteggio + 1;
}
if (domanda3[1].checked==true)
{
risposta = document.getElementById("risposta8");
risposta.style.color = "red";
risposta.innerHTML = "sbagliato";
}
if (domanda3[2].checked==true)
{
risposta = document.getElementById("risposta9");
risposta.style.color = "red";
risposta.innerHTML = "sbagliato";
}
//visualizzo il risultato
let casella = document.getElementById("risultato");
let punti = document.getElementById("punteggio");
punti.innerHTML = "Punti "+ punteggio;
if (punteggio > 2)
{
casella.style.color = "green";
casella.innerHTML = "HAI VINTO";
}
else
{
casella.style.color = "red";
casella.innerHTML = "HAI PERSO";
}
}
Per l’alunno più svogliato, le due righe di codice CSS
#risultato
{
font-size: 8em;
}
body
{
margin: 1em 0 0 1em;
}
Ultima modifica 19 Febbraio 2023