Forum libero

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);
}

<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>

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;
}