bazooka07/qcm.html

## qcm.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Le sport</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<style type="text/css">
		body { background-color: #444; font-family: sans-serif; }
		.container { max-width: 40rem; padding: 1rem; margin: 50vh auto 0; transform: translateY(-50%); border: 3px outset #ccc; border-radius: 1rem; background-color: #f0f0f0; }
		h1 { margin-top: 0; }
		.dashboard, #choices { display: flex; justify-content: space-between; }
		.disp { display: inline-block; background-color: #096609; color: white; width: 4rem; text-align: right; padding: 0.2rem 0.5rem; margin-left: 0.5rem; border: inset 2px; border-radius: 0.5rem; }
		#choices button { width: 12rem; text-align: center; }
		#startBtn { width: 20rem; margin: 1rem auto 0; }
		.text-center { text-align: center; }
		h2 { height: 5rem; font-size:  120%; font-weight: normal; }
		#startBtn { font-size: 120%; }
		.game-over { color:red; font:weight: bold; border-color: transparent; }
	</style>
</head>
<body>
	<div class="container">
		<h1 class="text-center">Sport</h1>
		<div class="dashboard">
			<div><span>Timer</span><span id="timer" class="disp">&nbsp;</span></div>
			<div><span>Question</span><span id="counter" class="disp">&nbsp;</span></div>
			<div><span>Score</span><span id="score" class="disp">&nbsp;</span></div>
		</div>
		<div id="sandbox">
			<h2 id="question" class="text-center">Cliquez sur le bouton Play</h2>
			<div id="choices">
				<button type="button" data="1">...</button>
				<button type="button" data="2">...</button>
				<button type="button" data="3">...</button>
			</div>
		</div>
		<div class="text-center">
			<button type="button" id="startBtn">Play</button>
		</div>
	</div>
<script type="text/javascript">
	(function() {
		'use strict';

		const QCM = [
			{
				question: "Où eurent lieu les Jeux Olympiques de 1980",
				choices: "Calgary|Athènes|Moscou",
				answer: 1
			},{
				question: "Quel sport exerçait le regretté Gilles Villeneuve",
				choices: "Course automobile|Hockey|Soccer",
				answer: 1
			},{
				question: "Dans quel sport s'est illustré le légendaire Babe Ruth",
				choices: "Football américain|Lutte|Base-ball",
				answer: 3
			},{
				question: "Que signifie la lettre 'C' que l'on retrouve sur le chandail d'un des joueurs de chaque équipe de hockey",
				choices: "Gardien de but|Coach|Capitaine",
				answer: 1
			},{
				question: "Comment s'appelait l'équipe de Québec dans la LNH",
				choices: "Le Canadien|Les Nordiques|Les Grizzlys",
				answer: 3
			},{
				question: "De quel pays le boomerang est-il originaire",
				choices: "Russie|États-Unis|Australie",
				answer: 3
			},{
				question: "De quel animal a-t-on besoin pour faire du polo",
				choices: "Kangourou|Chien|Cheval",
				answer: 3
			},{
				question: "Quel est le trophée remis au champion des séries éliminatoires de LNH",
				choices: "Coupe Grey|Coupe Stanley|Coupe Mémorial",
				answer: 2
			},{
				question: "Quel sport se joue sur glace avec un balai",
				choices: "Balai-brosse|Curling|Les deux",
				answer: 2
			},{
				question: "Quel sport pratiquent les Harlem Globe Trotters",
				choices: "Base-ball|Football américain|Basket-ball",
				answer: 3
			}
		];

		/* --------- Start here --------------- */
		const duration = 1000;
		const credits = 5;
		var decompte;
		var counter;
		var timer1;
		var score;
		const timerDisp = document.getElementById('timer');
		const counterDisp = document.getElementById('counter');
		const scoreDisp = document.getElementById('score');

		const choices = document.getElementById('choices');
		choices.addEventListener('click', function(event) {
			if(event.target.tagName == 'BUTTON' && event.target.hasAttribute('data')) {
				clearInterval(timer1);
				event.preventDefault();
				if(parseInt(event.target.getAttribute('data')) == QCM[counter].answer) {
					score++;
					scoreDisp.textContent = score;
					alert("Bonne réponse à\nla question n°" + (counter + 1));
				} else {
					alert("Mauvaise réponse à\nla question n°" + (counter + 1));
				}
				nextQuestion();
			}
		});

		const startBtn = document.getElementById('startBtn');
		startBtn.addEventListener('click', function(event) {
			counter = -1;
			score = 0;
			nextQuestion();
			event.preventDefault();
			startBtn.textContent = 'Playing...';
			startBtn.disabled = true;
		});

		function myTimeout() {
			decompte--;
			timerDisp.textContent = decompte;
			if(decompte <= 0) {
				clearInterval(timer1);
				alert('Délai dépassé');
				nextQuestion();
			}
		}

		const questionCaption = document.getElementById('question');
		const choicesBtns = choices.getElementsByTagName('BUTTON');
		function nextQuestion() {
			counter++;
			if(counter < QCM.length) {
				counterDisp.textContent = (counter + 1) + ' / ' + QCM.length;
				questionCaption.textContent = QCM[counter].question + ' ?';
				const texts = QCM[counter].choices.split('|');
				for(var i=0, iMax=choicesBtns.length; i <iMax; i++) {
					choicesBtns[i].textContent = (i < texts.length) ? texts[i] : '&nbsp;';
				}
				decompte = credits;
				timerDisp.textContent = decompte;
				timer1 = setInterval(myTimeout, duration);
			} else {
				// game over
				startBtn.textContent = 'Game Over';
				startBtn.disabled = true;
				startBtn.classList.add('game-over');
			}
		}

	})();
</script>
</body>
</html>
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

	<head>
	<title>Le sport</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<style type="text/css">
	body { background-color: #444; font-family: sans-serif; }
	.container { max-width: 40rem; padding: 1rem; margin: 50vh auto 0; transform: translateY(-50%); border: 3px outset #ccc; border-radius: 1rem; background-color: #f0f0f0; }
	h1 { margin-top: 0; }
	.dashboard, #choices { display: flex; justify-content: space-between; }
	.disp { display: inline-block; background-color: #096609; color: white; width: 4rem; text-align: right; padding: 0.2rem 0.5rem; margin-left: 0.5rem; border: inset 2px; border-radius: 0.5rem; }
	#choices button { width: 12rem; text-align: center; }
	#startBtn { width: 20rem; margin: 1rem auto 0; }
	.text-center { text-align: center; }
	h2 { height: 5rem; font-size: 120%; font-weight: normal; }
	#startBtn { font-size: 120%; }
	.game-over { color:red; font:weight: bold; border-color: transparent; }
	</style>
	</head>
	<body>
	<div class="container">
	<h1 class="text-center">Sport</h1>
	<div class="dashboard">
	<div><span>Timer</span><span id="timer" class="disp"> </span></div>
	<div><span>Question</span><span id="counter" class="disp"> </span></div>
	<div><span>Score</span><span id="score" class="disp"> </span></div>
	</div>
	<div id="sandbox">
	<h2 id="question" class="text-center">Cliquez sur le bouton Play</h2>
	<div id="choices">
	<button type="button" data="1">...</button>
	<button type="button" data="2">...</button>
	<button type="button" data="3">...</button>
	</div>
	</div>
	<div class="text-center">
	<button type="button" id="startBtn">Play</button>
	</div>
	</div>
	<script type="text/javascript">
	(function() {
	'use strict';

	const QCM = [
	{
	question: "Où eurent lieu les Jeux Olympiques de 1980",
	choices: "Calgary\|Athènes\|Moscou",
	answer: 1
	},{
	question: "Quel sport exerçait le regretté Gilles Villeneuve",
	choices: "Course automobile\|Hockey\|Soccer",
	answer: 1
	},{
	question: "Dans quel sport s'est illustré le légendaire Babe Ruth",
	choices: "Football américain\|Lutte\|Base-ball",
	answer: 3
	},{
	question: "Que signifie la lettre 'C' que l'on retrouve sur le chandail d'un des joueurs de chaque équipe de hockey",
	choices: "Gardien de but\|Coach\|Capitaine",
	answer: 1
	},{
	question: "Comment s'appelait l'équipe de Québec dans la LNH",
	choices: "Le Canadien\|Les Nordiques\|Les Grizzlys",
	answer: 3
	},{
	question: "De quel pays le boomerang est-il originaire",
	choices: "Russie\|États-Unis\|Australie",
	answer: 3
	},{
	question: "De quel animal a-t-on besoin pour faire du polo",
	choices: "Kangourou\|Chien\|Cheval",
	answer: 3
	},{
	question: "Quel est le trophée remis au champion des séries éliminatoires de LNH",
	choices: "Coupe Grey\|Coupe Stanley\|Coupe Mémorial",
	answer: 2
	},{
	question: "Quel sport se joue sur glace avec un balai",
	choices: "Balai-brosse\|Curling\|Les deux",
	answer: 2
	},{
	question: "Quel sport pratiquent les Harlem Globe Trotters",
	choices: "Base-ball\|Football américain\|Basket-ball",
	answer: 3
	}
	];

	/* --------- Start here --------------- */
	const duration = 1000;
	const credits = 5;
	var decompte;
	var counter;
	var timer1;
	var score;
	const timerDisp = document.getElementById('timer');
	const counterDisp = document.getElementById('counter');
	const scoreDisp = document.getElementById('score');

	const choices = document.getElementById('choices');
	choices.addEventListener('click', function(event) {
	if(event.target.tagName == 'BUTTON' && event.target.hasAttribute('data')) {
	clearInterval(timer1);
	event.preventDefault();
	if(parseInt(event.target.getAttribute('data')) == QCM[counter].answer) {
	score++;
	scoreDisp.textContent = score;
	alert("Bonne réponse à\nla question n°" + (counter + 1));
	} else {
	alert("Mauvaise réponse à\nla question n°" + (counter + 1));
	}
	nextQuestion();
	}
	});

	const startBtn = document.getElementById('startBtn');
	startBtn.addEventListener('click', function(event) {
	counter = -1;
	score = 0;
	nextQuestion();
	event.preventDefault();
	startBtn.textContent = 'Playing...';
	startBtn.disabled = true;
	});

	function myTimeout() {
	decompte--;
	timerDisp.textContent = decompte;
	if(decompte <= 0) {
	clearInterval(timer1);
	alert('Délai dépassé');
	nextQuestion();
	}
	}

	const questionCaption = document.getElementById('question');
	const choicesBtns = choices.getElementsByTagName('BUTTON');
	function nextQuestion() {
	counter++;
	if(counter < QCM.length) {
	counterDisp.textContent = (counter + 1) + ' / ' + QCM.length;
	questionCaption.textContent = QCM[counter].question + ' ?';
	const texts = QCM[counter].choices.split('\|');
	for(var i=0, iMax=choicesBtns.length; i <iMax; i++) {
	choicesBtns[i].textContent = (i < texts.length) ? texts[i] : ' ';
	}
	decompte = credits;
	timerDisp.textContent = decompte;
	timer1 = setInterval(myTimeout, duration);
	} else {
	// game over
	startBtn.textContent = 'Game Over';
	startBtn.disabled = true;
	startBtn.classList.add('game-over');
	}
	}

	})();
	</script>
	</body>
	</html>