Code Editor

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="robots" content="noindex, follow">

	<title>Document</title>

	<style>
		.right {
			background: palegreen
		}

		.wrong {
			background: salmon;
		}

		img {
			height: 200px;
		}

		.mamotreto {
			display: none;
		}
	</style>
</head>

<body>

	<button class="btnIniciar" onClick="iniciarTest()">Iniciar Test</button>
	<div class="mamotreto">

		<div class="question"></div>

		<button onClick="printHTMLQuestion(currentQuestionIndex)">Next question</button>


		<p>Right Anwsers: <span class="rightCounter">0</span></p>
		<p>Wrong Answers: <span class="wrongCounter">0</span></p>


		<span class="time">5</span>

	</div>
	<script>
		let rightAnswer;
		let currentQuestionIndex = 0;
		let rightAnswers = 0;
		let wrongAnswers = 0;
		let timeInterval;
		let time = 5;

		const cuestionary = [
			{
				"question": "¿Quien descubrió América?",
				"img": "/res/blog-material/trivial/img/america.png",
				"audio": "/res/blog-material/trivial/audio/america.mp3",
				"answers": ["Colón", "El Fari", "Yo mismo", "Tú"]
			},
			{
				"question": "¿Quién es el mayor superheroe de todos los tiempos?",
				"img": "/res/blog-material/trivial/img/heroe.png",
				"audio": "/res/blog-material/trivial/audio/superheroe.mp3",
				"answers": ["Spiderman", "Batman", "Yo mismo", "Tú mismo"]
			},
			{
				"question": "¿Por qué lo pájaros pían?",
				"img": "/res/blog-material/trivial/img/birds.png",
				"audio": "/res/blog-material/trivial/audio/pajaros.mp3",
				"answers": ["Tienen hambre", "Tienen frío", "Están contentos", "Están tristes"]
			}
		];


		const printHTMLQuestion = (i) => {
			currentQuestionIndex++;
			const q = cuestionary[i];
			let a = q.answers;
			rightAnswer = a[0];
			a = a.sort((a, b) => Math.floor(Math.random() * 3) - 1);


			let audio = new Audio(q.audio);
			audio.play();

			const htmlAnswersArray = a.map(currentA => `<p class="answer"><button onClick="evaluateAnswer('${currentA}', this)">X</button> <span>${currentA}</span></p>`);
			const htmlAnswers = htmlAnswersArray.join(' ');


			let htmlQuestionCode = `<p>${q.question}</p><img src="${q.img}"/><div>${htmlAnswers}</div>`;
			document.querySelector('.question').innerHTML = htmlQuestionCode;

			time = 5;
			document.querySelector('.time').innerHTML = time;
			clearInterval(timeInterval);
			timeInterval = setInterval(() => {
				time--;
				if (time == 0) {
					alert("Has perdido");
					clearInterval(timeInterval);

				} else {
					document.querySelector('.time').innerHTML = time;
				}
			}, 1000)

		}

		const evaluateAnswer = (answer, obj) => {
			document.querySelectorAll('.answer').forEach(a => a.classList.remove('right', 'wrong'));

			const parentP = obj.parentNode;

			console.log('answer:  ' + answer + ', rightAnswer: ' + rightAnswer)
			if (answer == rightAnswer) {
				parentP.classList.add('right');
				rightAnswers++;
				document.querySelector('.rightCounter').innerHTML = rightAnswers;
			} else {
				parentP.classList.add('wrong');
				wrongAnswers++;
				document.querySelector('.wrongCounter').innerHTML = wrongAnswers;
			}
		}

		const nextQuestion = _ => {

		}

		const iniciarTest = _ => {
			printHTMLQuestion(0);
			document.querySelector('.btnIniciar').style.display = 'none';
			document.querySelector('.mamotreto').style.display = 'block';

		}
	</script>
</body>

</html>