Más ejercicios en pablomonteserin.com
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<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>