bonjour !

j'ai créer un QCM, et j'aimerai faire en sorte que quand je clic sur une des 4 réponses, mon clic prenne en mémoire la réponse et que quand je clic sur le bouton "valider la réponse", il compare la bonne réponse à celle cliqué dans les 4 réponses. 

Voici mes 4 réponses QCM et mon bouton valider

<div class="colonne" id="liste">
					<button class="calque_rep" id="rep1" onClick="desactive_bouton(); couleur(); couleurClic('rep1')"> </button>
					<button class="calque_rep" id="rep2" onClick="desactive_bouton(); couleur(); recupId()"> </button>
					<button class="calque_rep" id="rep3" onClick="desactive_bouton(); couleur(); recupId()"> </button>
					<button class="calque_rep" id="rep4" onClick="desactive_bouton(); couleur(); recupId()"> </button>
					<input type="button" id='valider' value="Valider la réponse" style="margin-left:10px;" onClick="valider()" />
				</div>

Voici ma fonction valider()

function valider(num_rep){
		if(jouer==false)
			return;

		if(recupId != bonne_rep)
			nb_erreurs++;
			nb_questions--;
			
				if(nb_questions==0)
				jouer=false;
				init();
	}

Voici comment je récupère l'id de chaque question grâce au clic 

document.getElementById('rep1').onClick = recupId;
document.getElementById('rep2').onClick = recupId;
document.getElementById('rep3').onClick = recupId;
document.getElementById('rep4').onClick = recupId;

Salut

J'ai fait un truc comme ça, ça fonctionne :

<div id="reponses">
	<button id="reponse_1" class="inactif"></button>
	<button id="reponse_2" class="inactif"></button>
	<button id="reponse_3" class="inactif"></button>
	<button id="reponse_4" class="inactif"></button>
</div>

<button id="valider"></button>

var bonneReponse = "reponse_" + (Math.floor(Math.random() * 4) + 1),
reponseSelectionnee = "reponse_0";

for (i = 0; i < 4; i++ ) {
	document.getElementById("reponses").getElementsByTagName("button")[i].addEventListener("click", function() {
		var reponses = document.getElementById("reponses").getElementsByTagName("button");
		for (j = 0; j < 4; j++) {
			reponses[j].className = "inactif";
		}
		this.className = "actif";
		reponseSelectionnee = this.id;
	});
}

document.getElementById("valider").addEventListener("click", function() {
	if (reponseSelectionnee == bonneReponse) {
		alert("Vous avez gagne");
	} else {
		alert("vous avez perdu");
	}
});

A toi de regarder et voir comment l'adapter à ta situation

Bonne journée

j'y suis presque, mais je n'ai pas utilisé le math.random et je ne comprend pas d'ou vien ton "actif"? ! le seul soucis pour le moment c'est que ma réponse est vue comme juste partout.. 

var chaine_question = questions(numero);
		var tab_question = chaine_question.split('*');
		var bonneReponse = "rep" + tab_question[5];
		var reponseSelectionnee = "rep0";
		
		for (i = 0; i < 4; i++) {
			document.getElementById("liste").getElementsByTagName("button")
			[i].addEventListener("click", function(){
				var liste = document.getElementById("liste").getElementsByTagName("button");
					
					for(j = 0; j < 4; j++){
						liste[j].className = "calque_rep";
					}
					this.className = "actif";
					reponseSelectionnee = this.id;
			});
			
		}

ma fonction valider : 

function valider(){
		if(jouer==false)
			return;

		if(reponseSelectionnee != bonneReponse)
			nb_erreurs++;
			nb_questions--;
			
				if(nb_questions==0)
				jouer=false;
				init();
	}

et je dois enfaite aller récupérer la bonne réponse à la dernière place de mon tableau, une idée ? voici mes questions -->

function questions(numero)
{
		
	switch(numero)
	{
		//rougegorge
		case 1:
			chaine="Quel est cet oiseau ?*pivert*rougegorge*pigeon*coco*2";
				playSound("chant/bruit.wav");
			break;
			

		//merle
		case 2:
			chaine="Quel est cet oiseau ?*peruche*coco*merle*chat*3";
				playSound("chant/bruit2.wav");
			break;
		

		//moineau
		case 3:
			chaine="Quel est cet oiseau ?*Moineau*coco*merle*chat*1";
				playSound("chant/bruit3.wav");
			break;
		
	}
	
	return chaine;
}

-
Edité par philippomaxilien 9 juillet 2019 à 11:41:07

Je n'ai pas vraiment le temps de regarder tout de suite mais je vais quand même expliquer :

• Math.random bidule c'est juste pour générer une bonne réponse aléatoire (dans le code que je t'ai donné le but est de trouver le bon bouton choisi au hasard car c'est juste pour l'exemple)
• "actif" osef en fait, c'est juste pour changer le style du bouton sur lequel tu cliques pour que ça soit visible (mais ça change rien sans css donc voilà), c'est une classe qui remplace "inactif"

Sinon je te conseille d'utiliser console.log(machinbidule) qui affiche le contenu d'une variable dans la console que tu peux afficher avec F12 généralement pour faire des tests (ou alors utilises alert() qui l'affiche dans un popup mais c'est vite relou). Par exemple regarder la valeur de la variable "bonneReponse". En plus si tu ouvres la console les erreurs sont affichées (truc is not a function etc.).Et je sais pas si c'est voulu mais on ne peut pas sauter de lignes comme ça en plein milieu de "document.getElementById("liste").getElementsByTagName("button")[i].addEventListener("click", function(){"