Forum libero

Per natale ho regalato alla mia famiglia un quiz a premi.

L'ho sviluppato con javascript.

Potete scaricarlo qui: https://www.file.io/download/NyLNuJIUiRZj

Spacchettate il file .rar dove preferite (dovete ottenere una cartella chiamata Quiz contenente tutti i file che servono).

Una volta fatto questo, aprite quiz.html con il browser di vostro gradimento e fate il quiz (io comunque l'ho testato solo con Chrome). Non è ottimizzato per mobile, va eseguito su un computer.

Il quiz ha 13 domande con risposta multipla (bisogna scegliere quella corretta tra le quattro).
Ogni domanda ha un'immagine per fini puramente estetici (sebbene l'immagine possa essere anche parte della domanda, volendo) ed è possibile che una domanda abbia un file audio allegato (per esempio una canzone di cui bisogna indovinare il titolo).

Yoda, questa è la lezione 200 del corso di programmazione.


Qui sotto il codice. Un javascriptaro pro direbbe che le variabili globali in javascript non sono una best practice, ma è il modo più semplice per fare quello che ho fatto.

script.js

var index = -1;

var currentQuestion;

var questions = [];


function QuestionOption (optionText, optionIsCorrectAnswer, position){
	this.optionText = optionText;
	this.optionIsCorrectAnswer = optionIsCorrectAnswer;
	this.position = position;
}

function Question(questionText, questionOptions, imageName, audioName){
	this.questionText = questionText;
	this.questionOptions = questionOptions;
	this.imageName = imageName;
	this.audioName = audioName;

	var This = this;

	this.verifyAnswer = function(answer){
		var correctAnswer = This.questionOptions.find(option => option.optionIsCorrectAnswer);
		return correctAnswer.optionText == answer;
	}
}

function QuestionBuilder(){
	this._question = new Question();
	this._question.questionOptions = [];

	this._methodWithCorrectOptionWasCalled = false;

	this._positions = [];

	this.withQuestionText = function (text){
		if(!questionText || !(new RegExp(/\S/).test(text))){
			throw new Error("Option's text can not be null or composed only by whitespaces");
		}

		this._question.questionText = text;
		
		return this;
	}

	this.withImage = function(imageName){
		if(!/.\.(gif|jpe?g|tiff?|png|webp|bmp)$/i.test(imageName)){
			throw new Error("The image's file name is not valid");	
		}

		this._question.imageName = imageName;
		return this;
	}

	this.withAudio = function(audioName){
		if(!/.\.(mp3|wma)$/i.test(audioName)){
			throw new Error("The audio's file name is not valid");	
		}

		this._question.audioName = audioName;
		return this;
	}

	this.withCorrectOption = function (optionText, position){
		if(this._methodWithCorrectOptionWasCalled){
			throw new Error("Method 'withCorrectOption' can be used only once because only one option can be correct'");
		}		
		
		this._withOption(optionText, position, true);

		this._methodWithCorrectOptionWasCalled = true;

		return this;
	}

	this.withWrongOption = function (optionText, position){
		this._withOption(optionText, position, false);

		return this;
	}

	this.getQuestion = function(){
		return this._question;
	}

	this._withOption = function (optionText, position, optionIsCorrectAnswer){
		if(this._positions.some(pos => pos == position)){
			throw new Error("An other option has the same position. Positions of different options must be different.");
		}

		if(!optionText || !/\S/.test(optionText)){
			throw new Error("Option's text can not be null or composed only by whitespaces");
		}

		if(!Number.isInteger(position) || position < 0){
			throw new Error("Position must be an integer number greather than zero");
		}

		this._positions.push(position);
		
		this._question.questionOptions.push(new QuestionOption(optionText, optionIsCorrectAnswer, position));
	}
}

function getElementById(id){
	var question = document.querySelector("#" + id);
	return document.querySelector("#" + id);
}

function loadQuestions(){
	questions.push(new QuestionBuilder()
			.withQuestionText("Quale tra questi non è un nome da gatto?")
			.withImage("0.jpg")
			.withCorrectOption("Armando", 3)
			.withWrongOption("Luna", 1)
			.withWrongOption("Birba", 2)
			.withWrongOption("Macchia", 4)
			.getQuestion());

	questions.push(new QuestionBuilder()
			.withQuestionText("Quanto tempo impiega la luce del sole per giungere sulla terra?")
			.withImage("1.jpg")
			.withCorrectOption("Circa 10 minuti", 2)
			.withWrongOption("Circa 10 secondi", 1)
			.withWrongOption("Circa 30 minuti", 3)
			.withWrongOption("Circa 2 ore", 4)
			.getQuestion());

	questions.push(new QuestionBuilder()
			.withQuestionText("1, 11, 121, 14'641,...")
			.withImage("2.jpg")
			.withCorrectOption("161'051", 1)
			.withWrongOption("143'001", 2)
			.withWrongOption("121'001", 3)
			.withWrongOption("111'111", 4)
			.getQuestion());

	questions.push(new QuestionBuilder()
			.withQuestionText("Ascolta il brano qui sotto. È la colonna sonora di quale film?")
			.withImage("3.jpg")
			.withAudio("ReLeone.mp3")
			.withCorrectOption("Il Ré Leone", 3)
			.withWrongOption("Star Wars", 1)
			.withWrongOption("I pirati dei caraibi", 2)
			.withWrongOption("Schindler's List", 4)
			.getQuestion());

	questions.push(new QuestionBuilder()
			.withQuestionText("Quale di questi personaggi del Grande Fratello 1 ha ottenuto una posizione nel governo italiano?")
			.withImage("4.jpg")
			.withCorrectOption("Rocco Casalino", 2)
			.withWrongOption("Pietro Tarricone", 1)
			.withWrongOption("Roberta Beta", 3)
			.withWrongOption("Salvatore Veneziano (Salvo)", 4)
			.getQuestion());

	questions.push(new QuestionBuilder()
			.withQuestionText("Come si chiama lo strato più basso dell'atmosfera terrestre?")
			.withImage("5.jpg")
			.withCorrectOption("Troposfera", 4)
			.withWrongOption("Stratosfera", 1)
			.withWrongOption("Ionosfera", 2)
			.withWrongOption("Mesosfera", 3)
			.getQuestion());

	questions.push(new QuestionBuilder()
			.withQuestionText("Quale di questi gatti non è un gatto?")
			.withImage("6.jpg")
			.withCorrectOption("Nemo", 1)
			.withWrongOption("Tom", 2)
			.withWrongOption("Silvestro", 3)
			.withWrongOption("Birba", 4)
			.getQuestion());

	questions.push(new QuestionBuilder()
			.withQuestionText("Ascolta il brano qui sotto. Chi canta questa canzone?")
			.withImage("3.jpg")
			.withAudio("Sinatra.mp3")
			.withCorrectOption("Frank Sinatra", 4)
			.withWrongOption("Justin Bieber", 1)
			.withWrongOption("Elvis Presley", 2)
			.withWrongOption("John Lennon", 3)
			.getQuestion());

	questions.push(new QuestionBuilder()
			.withQuestionText("Come inizia la costituzione Svizzera?")
			.withImage("7.jpg")
			.withCorrectOption("In nome di Dio...", 3)
			.withWrongOption("In nome della nazione", 1)
			.withWrongOption("In nome del popolo", 2)
			.withWrongOption("In nome dei cittadini", 4)
			.getQuestion());
	
	questions.push(new QuestionBuilder()
			.withQuestionText("Qual'è la particella dell'atomo con una carica elettrica negativa?")
			.withImage("8.jpg")
			.withCorrectOption("Elettrone", 1)
			.withWrongOption("Protone", 2)
			.withWrongOption("Bosone", 3)
			.withWrongOption("Neutrone", 4)
			.getQuestion());

	questions.push(new QuestionBuilder()
			.withQuestionText("Quale di questi pesci non è un pesce?")
			.withImage("9.jpg")
			.withCorrectOption("Delfino", 2)
			.withWrongOption("Piranha", 1)
			.withWrongOption("Squalo", 3)
			.withWrongOption("Anguilla", 4)
			.getQuestion());

	questions.push(new QuestionBuilder()
			.withQuestionText("Perché i francesi presero la Bastiglia?")
			.withImage("10.jpg")
			.withCorrectOption("Perché non riuscivano a fare le riforme attraverso gli stati generali", 4)
			.withWrongOption("Perché il Ré cerco di fuggire", 1)
			.withWrongOption("Per via dell'aumento della tasse", 2)
			.withWrongOption("Perché non riuscivano a fare le riforme attraverso l'assemblea nazionale costituente", 3)
			.getQuestion());

	questions.push(new QuestionBuilder()
			.withQuestionText("Ascolta il brano qui sotto. È la colonna sonora di quale film?")
			.withImage("3.jpg")
			.withAudio("Titanic.mp3")
			.withCorrectOption("Titanic", 3)
			.withWrongOption("Salvate il soldato Ryan", 1)
			.withWrongOption("Pearl Harbor", 2)
			.withWrongOption("The rock", 4)
			.getQuestion());
	
}

function showQuestion(question){
	var audio = getElementById("audio");

	if(question.audioName){
		showAudio();
		audio.querySelector("source").src = question.audioName;
		audio.load();
	}else{
		hideAudio();		
	}

	getElementById("question").style.display = "initial";

	getElementById("questionImage").src = question.imageName;

	getElementById("questionTitle").textContent = "Domanda " + (index + 1);
	getElementById("questionText").textContent = question.questionText;
	
	getElementById("firstOptionLabel").textContent = question.questionOptions.find(option => option.position == 1).optionText;
	getElementById("secondOptionLabel").textContent = question.questionOptions.find(option => option.position == 2).optionText;
	getElementById("thirdOptionLabel").textContent = question.questionOptions.find(option => option.position == 3).optionText;
	getElementById("fourthOptionLabel").textContent = question.questionOptions.find(option => option.position == 4).optionText;

	getElementById("firstOption").value = question.questionOptions.find(option => option.position == 1).optionText;
	getElementById("secondOption").value = question.questionOptions.find(option => option.position == 2).optionText;
	getElementById("thirdOption").value = question.questionOptions.find(option => option.position == 3).optionText;
	getElementById("fourthOption").value = question.questionOptions.find(option => option.position == 4).optionText;
}

function hideQuestion(){
	var question = 	getElementById("question");
	getElementById("question").style.display = "none";
}

function hideIntro(){
	getElementById("intro").style.display = "none";
}

function hideGameover(){
	getElementById("gameover").style.display = "none";
}

function showAudio(){
	getElementById("audio").style.display = "block";
}

function hideAudio(){
	getElementById("audio").style.display = "none";
}

function clean(){
	var inputs = getElementById("question").querySelectorAll("input");
	
	for(var input of inputs){
		input.checked = false;
	}
}

function load(){
	addEventListenerToBeginButton();
	addEventListenerToNextButton();
	addEventListenerToRestartButton();
}


function addEventListenerToBeginButton(){
	document.querySelector("#Inizia").addEventListener("click", begin);
}

function addEventListenerToRestartButton(){
	document.querySelector("#Ricomincia").addEventListener("click", restart);
}

function addEventListenerToNextButton(){
	document.querySelector("#Next").addEventListener("click", next);
}

function begin(){
	hideIntro();
	index=0;
	loadQuestions();
	currentQuestion = questions[index];
	showQuestion(questions[index]);
	hideIntro();
}

function restart(){
	index=0;
	hideGameover();
	hideIntro();
	currentQuestion = questions[index];
	showQuestion(questions[index]);
}

function next(){

	if(isCorrectAnswer()){
		if(index == questions.length - 1){
			end();
			return;
		}

		index++;
		currentQuestion = questions[index];
		showQuestion(currentQuestion);
	}else{
		gameOver();
	}

	clean();
     	
}

function gameOver(){
	hideQuestion();
	getElementById("gameover").style.display = "initial";
}

function end(){
	hideQuestion();
	getElementById("end").style.display = "initial";
}


function isCorrectAnswer(){
	var inputs = getElementById("question").querySelectorAll("input");
	var selectedValue;

	for(const input of inputs){
		if(input.checked){
			selectedValue = input.value;
			break;
		}
	}

	return this.currentQuestion.verifyAnswer(selectedValue);
}

quiz.html

<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>
		Quiz di natale
	</title>

	<link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src="script.js"></script>
</head>

<body onload="load()">

	<div id="container">
	<div id="intro">

		<h1>
			Quiz di natale
		</h1>

		<img class="center" src="ImmaginePrincipale.jpeg" alt="Img">

		<h2>
 			Partecipa anche tu al quiz di natale, in palio ci sono dei fantastici premi!
		</h2>
		
		<button id="Inizia" class="center">
  			Inizia
		</button>
	</div>

	<div id="gameover">
		<h2 id="wrongAnswer">Risposta sbagliata!!!</h2>
		<img class="center" src="gameover.jpg" alt="Img">
		<button id="Ricomincia" class="center">
  			Ricomincia
		</button>
	</div>

	<div id="end">
		<h2>Complimenti, hai terminato con successo questo quiz! Ora puoi ritirare il premio.</h2>
		<img class="center" src="end.jpg" alt="Img">
	</div>

	<div id="question">

		<h2 id="questionTitle">
 			
		</h2>

		<img id="questionImage" class="center" src="1.jpg" alt="Img">

		<h2 id="questionText">
 			
		</h2>

		
		<audio id="audio" controls class="center">
  			<source type="audio/mpeg">
		</audio>

		
		<div>
			<input id="firstOption" type="radio" name="question1" value="v1">
			<label id="firstOptionLabel">v1</label>
			<br>
			<input id="secondOption" type="radio" name="question1" value="v2">
			<label id="secondOptionLabel">v2</label>
			<br>
			<input id="thirdOption" type="radio" name="question1" value="v3">
			<label id="thirdOptionLabel">v3</label>
			<br>
			<input id="fourthOption" type="radio" name="question1" value="v4">
			<label id="fourthOptionlabel">v4</label>
		</div>

		<button id="Next" class="center">
  			Prossima
		</button>

	</div>
	</div>
	
</body>

</html>

style.css

body{
  	background-image: url('sfondo.jpg');
	padding-top:10%;
        padding-left:20%;
	padding-right:20%;
}

#container{
	background:white;
	padding:1%;
}

img{
  	height:30%;
}

h1{
	text-align:center;
  	color:red;
	font-size:80px;	
}

h2{
  	text-align:center;
}

.center {
  	display: block;
  	margin-left: auto;
  	margin-right: auto;
}

button{
  	background-color:red;
  	color:white;
  	font-weight:bold;
  	border-color:white;
	font-size:20px;
	padding:10px;
	margin-top:40px;
}


#wrongAnswer{
	color:red;
}

.question, #question, #gameover, #end{
	display:none;
}

#question div{
	margin-left:46%;
}

#audio{
	margin-bottom: 40px;
	display: none;
}

**Modificato dall'autore il 28.12.2021 17:36**