pirhoo · October 1, 2018 16:28
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Quiz</title><!-- Latest compiled and minified CSS -->
 	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
 	<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script>
 	<meta charset="utf-8" />
 </head>
 <body class="container">
 	<!--
 		# Notions à comprendre pour réaliser ce quiz 

 		En javascript:
 			* créer et utiliser un Object
 			* créer et utiliser un Array

 		En jQuery:
 			* itérer sur un Array ou un Object avec $.each de jQuery
 			* sélection d'un élément
 			* création d'un élément
 			* ajout d'une ou plusieurs class
 			* changer le contenu d'un élément avec html()
 			* ajouter du contenu à un élément avec append()
 			* surveillez l'événement 'click' sur un élément
 			* appeller une fonction lors d'un événement
 			* attacher des informations à un élément avec data()
 			* lire des informations d'un élément avec data()
 	-->

 	<!-- Le conteneur de la future liste de question -->
 	<ul id="liste-questions" class="list-unstyled"></ul>
 		<!-- Le conteneur du résultat -->
 	<div id="result" class="well lead" style="display: none"></div>

 	<!-- TOUTES LES VARIABLES POUR CONFIGURER LE QUIZ -->
 	<script type="text/javascript">
 		var animalPoints = {
 			dog:     0,
 			cat:     0,
 			rat:     0,
 			unicorn: 0
 		};

 		var animalResults = {
 			dog:     'Vous êtes un chien !',
 			cat:     'Vous êtes un chat !',
 			rat:     'Vous êtes un rat !',
 			unicorn: 'Vous êtes une licorne !'
 		};

 		var questions = [
 			{
 				label: "Vous êtes plutôt...",
 				answers: [
 					{
 						label: "Papier",
 						increment: 'dog'
 					},
 					{
 						label: "Ciseaux",
 						increment: 'rat'
 					},
 					{
 						label: "Caillou",
 						increment: 'unicorn'
 					},
 					{
 						label: "Je n'aime pas les jeux",
 						increment: 'rat'
 					}
 				]
 			},
 			{
 				label: "Quelle est votre couleur préférée:",
 				answers: [
 					{
 						label: "Rose",
 						increment: 'unicorn'
 					},
 					{
 						label: "Violet",
 						increment: 'cat'
 					},
 					{
 						label: "Blue",
 						increment: 'dog'
 					},
 					{
 						label: "Gris",
 						increment: 'rat'
 					}
 				]
 			}
 		];
 	</script>

 	<!-- TOUTES LES FONCTION POUR INTÉRAGIR AVEC QUIZ -->
 	<script type="text/javascript">
 		function chooseAnswer() {
 			// On cible avec jQuery le bouton sur lequel on vient de clicker grace à this
 			var button = $(this);
 			// Quel animal devons nous incrémenter ?
 			// -- créez une variable 'animal' avec l'animal a incrementer
 			// Augmente de 1 le bon animal
 			// -- incrémentez la bonne clé dans l'object animalPoints
 			// Active ce bouton
 			// -- ajouter une class 'btn-primary' au bouton avec addClass()
 			// Freeze tous les autres button
 			button.parent().children('button').prop('disabled', true);
 			// Vérifie s'il faut afficher le résult
 			// -- appellez la fonction checkResult() pour vérifier les résultats
 		}

 		function checkResult() {
 			var total = 0;
 			// Total de tous les points points tous les animaux
 			$.each(animalPoints, function(key, points) {
 				total += points;
 			});
 			// Est-ce qu'on répondu a toute les questions?
 			if( total === questions.length ) {
 				// Affiche le block
 				// -- ajoutez le resultat de la fonction resultContent() a '#result'
 				// -- affichez '#result' avec un fondu
 			}
 		}

 		function resultContent() {
 			var max = -1;
 			var animal = null;
 			// On trouve l'animal avec le plus de points
 			$.each(animalPoints, function(key, points) {
 				if(points > max) {
 					max = points;
 					animal = key;
 				}
 			});
 			// On retourne la bonne phrase
 			return animalResults[animal]
 		}

 	</script>

 	<!-- CREATION DU QUIZ -->
 	<script type="text/javascript">
 		var listeEl = $("#liste-questions");
 		// Ajoute les question une par une à la liste des questions
 		$.each(questions, function(i, question) {
 			// On fabrique un "<li>" pour la question
 			var questionEl = $('<li />');
 			// Ajoute une class "question"
 			// -- utilisez la fonction addClass() sur questionEl
 			// Ajoute le label de la question
 			// -- utilisez la fonction append() sur questionEl
 			// On ajoute chaque réponse
 			$.each(question.answers, function(j, answer) {
 				var answerEl = $('<button />').html(answer.label);
 				// Ajoute des classes btn, btn-sm, btn-block et btn-default au bouton
 				//  -- utilisez la fonction addClass() sur answerEl answerEl.addClass();
 				// Attache des données au bouton
 				answerEl.data('answer', answer);
 				// Attache un evènement au bouton
 				// -- utilisez on('click', chooseAnswer) sur answerEl
 				// Ajoute la réponse
 				// -- utilisez la fonction append() sur questionEl
 			});
 			// On ajoute la question à la liste
 			$(listeEl).append(questionEl);
 		});
 	</script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Quiz</title><!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
	<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script>
	<meta charset="utf-8" />
	</head>
	<body class="container">
	<!--
	# Notions à comprendre pour réaliser ce quiz

	En javascript:
	* créer et utiliser un Object
	* créer et utiliser un Array

	En jQuery:
	* itérer sur un Array ou un Object avec $.each de jQuery
	* sélection d'un élément
	* création d'un élément
	* ajout d'une ou plusieurs class
	* changer le contenu d'un élément avec html()
	* ajouter du contenu à un élément avec append()
	* surveillez l'événement 'click' sur un élément
	* appeller une fonction lors d'un événement
	* attacher des informations à un élément avec data()
	* lire des informations d'un élément avec data()
	-->

	<!-- Le conteneur de la future liste de question -->
	<ul id="liste-questions" class="list-unstyled"></ul>
	<!-- Le conteneur du résultat -->
	<div id="result" class="well lead" style="display: none"></div>

	<!-- TOUTES LES VARIABLES POUR CONFIGURER LE QUIZ -->
	<script type="text/javascript">
	var animalPoints = {
	dog: 0,
	cat: 0,
	rat: 0,
	unicorn: 0
	};

	var animalResults = {
	dog: 'Vous êtes un chien !',
	cat: 'Vous êtes un chat !',
	rat: 'Vous êtes un rat !',
	unicorn: 'Vous êtes une licorne !'
	};

	var questions = [
	{
	label: "Vous êtes plutôt...",
	answers: [
	{
	label: "Papier",
	increment: 'dog'
	},
	{
	label: "Ciseaux",
	increment: 'rat'
	},
	{
	label: "Caillou",
	increment: 'unicorn'
	},
	{
	label: "Je n'aime pas les jeux",
	increment: 'rat'
	}
	]
	},
	{
	label: "Quelle est votre couleur préférée:",
	answers: [
	{
	label: "Rose",
	increment: 'unicorn'
	},
	{
	label: "Violet",
	increment: 'cat'
	},
	{
	label: "Blue",
	increment: 'dog'
	},
	{
	label: "Gris",
	increment: 'rat'
	}
	]
	}
	];
	</script>

	<!-- TOUTES LES FONCTION POUR INTÉRAGIR AVEC QUIZ -->
	<script type="text/javascript">
	function chooseAnswer() {
	// On cible avec jQuery le bouton sur lequel on vient de clicker grace à this
	var button = $(this);
	// Quel animal devons nous incrémenter ?
	// -- créez une variable 'animal' avec l'animal a incrementer
	// Augmente de 1 le bon animal
	// -- incrémentez la bonne clé dans l'object animalPoints
	// Active ce bouton
	// -- ajouter une class 'btn-primary' au bouton avec addClass()
	// Freeze tous les autres button
	button.parent().children('button').prop('disabled', true);
	// Vérifie s'il faut afficher le résult
	// -- appellez la fonction checkResult() pour vérifier les résultats
	}

	function checkResult() {
	var total = 0;
	// Total de tous les points points tous les animaux
	$.each(animalPoints, function(key, points) {
	total += points;
	});
	// Est-ce qu'on répondu a toute les questions?
	if( total === questions.length ) {
	// Affiche le block
	// -- ajoutez le resultat de la fonction resultContent() a '#result'
	// -- affichez '#result' avec un fondu
	}
	}

	function resultContent() {
	var max = -1;
	var animal = null;
	// On trouve l'animal avec le plus de points
	$.each(animalPoints, function(key, points) {
	if(points > max) {
	max = points;
	animal = key;
	}
	});
	// On retourne la bonne phrase
	return animalResults[animal]
	}

	</script>

	<!-- CREATION DU QUIZ -->
	<script type="text/javascript">
	var listeEl = $("#liste-questions");
	// Ajoute les question une par une à la liste des questions
	$.each(questions, function(i, question) {
	// On fabrique un "<li>" pour la question
	var questionEl = $('<li />');
	// Ajoute une class "question"
	// -- utilisez la fonction addClass() sur questionEl
	// Ajoute le label de la question
	// -- utilisez la fonction append() sur questionEl
	// On ajoute chaque réponse
	$.each(question.answers, function(j, answer) {
	var answerEl = $('<button />').html(answer.label);
	// Ajoute des classes btn, btn-sm, btn-block et btn-default au bouton
	// -- utilisez la fonction addClass() sur answerEl answerEl.addClass();
	// Attache des données au bouton
	answerEl.data('answer', answer);
	// Attache un evènement au bouton
	// -- utilisez on('click', chooseAnswer) sur answerEl
	// Ajoute la réponse
	// -- utilisez la fonction append() sur questionEl
	});
	// On ajoute la question à la liste
	$(listeEl).append(questionEl);
	});
	</script>
	</body>
	</html>