js-logo

Quiz in Javascript

di

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

Visite: 199