Discussion :

[waspy]

Bonjour à tous,
Je dois faire un quiz pour un projet. J'ai réussi à faire quelques choses par moi-même mais je ne suis franchement pas douée en JS et j'aurai besoin d'aide pour continuer. Il s'agit d'un quiz de 8 questions avec 4 réponses pour chaque.
Voici tout d'abord :

mon HTML (réduit à 2 questions) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<form  method="POST" action: "JS/quizz.js" name="quiz" >
	<ol>
		<li>			
  			<p>le chat dort : 
  				<ul>
  					<li>
					    <input type="checkbox" name="question1" value="jour" >8 heures par jour 
					</li>
					<li>
		    			<input type="checkbox" name="question1" value="nuit">8 heures par nuit 
		    		</li>
		    		<li>
						<input type="checkbox" name="question1" value="journuit">8 heures par jour ET par nuit
		    		</li>
		    		<li>
					    <input type="checkbox" name="question1" value="vie" id="popup" >parce qu'il en a marre de la vie 
		    		</li>
		    	</ul>
		    </p>
		</li>
 
		<li>			
  			<p>le chat crache : <br>
  				<em>(Plusieurs choix possibles)</em>
  				<ul>
  					<li>
					    <input type="checkbox" name="question2" value="faim">parce qu'il a faim
					</li>
					<li>
		    			<input type="checkbox" name="question2" value="peur">parce qu'il a peur
		    		</li>
		    		<li>
						<input type="checkbox" name="question2" value="impressionner">parce qu'il veut impressionner  		
					</li>
		    		<li>
					    <input type="checkbox" name="question2" value="gorge" id="popup">parce qu'il a... un chat dans la gorge 
		    		</li>
		    	</ul>				    	
		    </p>
		</li>
	</ol>
</form>
<button id="validation">Valider</button>
 
<div id="resultat"></div>

mon CSS :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
form ul li {
	list-style-type: none;
}
 
form span {  /*barrer le mot "aime" ds le quizz*/
	text-decoration: line-through;
}
 
#validation {
	margin-bottom: 50px;
}
 
#resultat {
	display: none;
}
 
#resultat.show {
	display: block;
	width: 700px;
	height: 50px;
	border: 1px solid black;
	margin-bottom: 100px;
}

Je voudrais :

1. faire en sorte que certaines questions n'acceptent qu'une seule réponse et d'autres 2,3 ou 4. Ca, je n'ai pas trouvé comment faire...

2. faire en sorte que lorsqu'une réponse qui comporte l'ID "popup" est cliqué, un message apparait. J'ai réussi à faire ça à un moment mais bizarrement ça ne fonctionnait que sur la 1ere question. Et depuis que j'ai modifié mon code, ça ne marche plus du tout...
Où est mon erreur ?

Voici mon script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//déclaration des variables
var reponsePopup; 
 
//fonction
function onClickRepPopup() 
{
	if (reponsePopup.checked) //si les réponses qui ont l'id popup sont checked
	{
		alert("Vous le pensez vraiment ?"  + "\n" + "Allez, sérieusement...");
	}
}
 
//code principal
document.addEventListener('DOMContentLoaded',function() 
{
    reponsePopup = document.querySelector("#popup");  //je cible mes réponses qui ont l'ID "popup" et je les affecte à la variable reponsePopup
 
    reponsePopup.addEventListener("click", onClickRepPopup); //je place une écoute. Quand mes réponses avec id "popup" seront cliquées=>déclenchement de la fonction "onClickButton".
 
});

3. lorsqu'on clique sur le bouton "valider", faire en sorte qu'un message apparaisse (dans une DIV par défaut cachée) avec le résultat. Là, c'est au niveau du calcul des bonnes réponses que je coince...

Voici mon script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var question1 = document.quiz.question1[2]; //pour chaque question, je crée une variable qui correspond à la bonne réponse
var question2 = document.quiz.question2[1]; //le problème est que, pour cette question, je veux considérer aussi la réponse [2] comme bonne
 
 
function onClickValid() {
	resultat.classList.add("show"); //au clic sur le bouton valider, je fais apparaitre la DIV resultat
 
 
	if ((question1.checked) && (question2.checked)) //si toutes les réponses cochées sont bonnes
	{
		resultat.textContent = " 8/8 ! EXCELLENT, vous connaissez parfaitement le chat !"; //le texte s'affiche dans ma DIV 
	}
	else //sinon, autre texte et calcul du résultat
	{	
 
		resultat.textContent = "Encore quelques mauvaises réponses...";
	}
}
 
//code principal
document.addEventListener("DOMContentLoaded", function() 
{
	validation = document.querySelector("#validation"); //je cible le bouton de validation au bas du formulaire
	resultat = document.querySelector("#resultat"); //je cible la DIV au bas de mon formulaire qui s'affichera lors du click sur le bouton "valider"
 
	validation.addEventListener("click", onClickValid); //quand il y a clic sur le bouton valider, on déclenche la fonction onClickValid
	resultat.addEventListener("click", onClickValid); 
 
 
});

Merci d'avance pour votre aide et conseils !

[eleydet]

Bonsoir,

Plutôt que de refaire le monde, pourquoi ne pas utiliser, voire adapter une solution existante?
http://dyris.free.fr/

[waspy]

Tout simplement parce que c'est un projet que je dois soumettre à un jury, il doit donc venir de moi donc pas question de faire un copié/collé trouvé sur le net. De plus, je pense que bosser sur un projet perso m'aidera à apprendre et m'améliorer...
Merci toutefois pour le lien.

[eleydet]

Bonsoir,

On commence par le point 1?

Avec des boutons radio, on ne peut cocher qu'une seule réponse :

https://developer.mozilla.org/fr/doc...nt/Input/radio

Avec des cases à cocher, on peut en sélectionner plusieurs :

https://developer.mozilla.org/fr/doc...Input/checkbox

[waspy]

Bonjour,

Oui, je le sais. C'est pour ça que j'ai choisi les checkbox. Le souci c'est que je veux limiter les réponses. C'est à dire que pour une question, on ne pourra cocher qu'une seule réponse. Pour d'autres, l'user verra qu'il ne peux cocher que 2 réponses (par exemple). Il n'y a pas moyen de faire ça ?

[eleydet]

Bonjour,

Une solution de ce genre, peut-être? On contrôle l'action de l'utilisateur et on agit en conséquence.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<input type='checkbox' id='un_identifiant' onclick='un_controle();'> Une réponse possible.
...
 
<script>
un_controle=function() {
        if (document.getElementById('un_identifiant').checked) {
                ...
        }
        else {
                ...
        }
};
...
</script>