Réalisation d'un QUIZZ

Version imprimable

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:

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:

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:

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:

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 ! :)

03/12/2017, 19h33
eleydet

Bonsoir,

Plutôt que de refaire le monde, pourquoi ne pas utiliser, voire adapter une solution existante?
http://dyris.free.fr/
03/12/2017, 19h42
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.
03/12/2017, 20h43
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
04/12/2017, 07h24
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 ?

Bonjour,

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

Code:

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>

05/12/2017, 09h26
eleydet

Bonjour,

On continue par le point 2?

Attention à ne pas utiliser plusieurs fois le même identifiant, au sein d'une même page. Un identifiant doit être unique. Par contre, une même classe peut être associée à plusieurs balises différentes.

Bonjour,

1- UNE discussion = UNE question.
Si tu as plusieurs questions, ouvre plusieurs discussions (l'UNE après l'autre).

2- Commence déjà par écrire un code HTML sémantiquement correct.

Pas de balise <ul> dans une balise <p> : remplace les <p> par des <div>, ou ferme les <p> avant les <ul>
Pense à <label> : c'est pratique pour cocher une case en cliquant sur le texte associé.
Code:

1 2 3 4 5 6 7 8 9 <li> <p>le chat crache : <br> <em>(Plusieurs choix possibles)</em> </p> <ul> <li> <label><input type="checkbox" name="question2" value="faim"> parce qu'il a faim</label> </li> ...
3- Réponse à ta question 1 :

UNE SEULE réponse possible : utilise des input radio
Plusieurs réponses possibles : utilise des input checkbox (le nombre maxi cochable se gèrera via JavaScript)

4- Réponse à ta question 2 :
En effet, un id doit être unique. Tu ne peux pas avoir plusieurs fois id="popup".
A remplacer par class="popup"

Code:

<label><input type="checkbox" name="question1" value="vie" class="popup" > parce qu'il en a marre de la vie</label>

Et ici :

Code:

reponsePopup = document.querySelector(".popup"); //je cible mes réponses qui ont la CLASSE "popup" et je les affecte à la variable reponsePopup

05/12/2017, 10h46
eleydet

Rebonjour,

Je suis étonné de voir la balise input à l'intérieur des balises label. jreaux62 a écrit :

Code:

<label><input type="checkbox" name="question2" value="faim"> parce qu'il a faim</label>

J'étais habitué à une autre syntaxe, utilisant l'attribut for :
https://developer.mozilla.org/fr/doc...Input/checkbox
05/12/2017, 12h37
NoSmoking

Bonjour,

Citation:

Je suis étonné de voir la balise input à l'intérieur des balises label.

Les deux sont possibles : The label element

Citation:

Envoyé par W3C

The label element represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element's labeled control, either using the for attribute, or by putting the form control inside the label element itself.
27/06/2018, 15h02
waspy

Bonjour,

Merci beaucoup à vous pour vos idées et conseils. Je suis désolée de revenir aussi tard mais j'ai eu des soucis qui m'ont fait lâcher ce projet un temps. :(
Me revoilà pour continuer la discussion si vous voulez bien qu'on la reprenne... ;)

Pour la question 1 : Si je fais des boutons radio pour certaines questions et des boutons checkbox pour d'autres, visuellement ils sont différents donc pas terrible au niveau du rendu.
Eleydet, j'ai regardé ton idée de fonction mais j'ai plusieurs questions pour lesquelles je ne veux qu'une seule réponse, aussi je ne peux pas utiliser d'Id. J'ai pensé à utiliser une classe et "document.getElementsbyClassName" mais ça renvoit un tableau et là je ne sais pas gérer la suite.

Pour la question 2 : Effectivement, l'Id est unique :oops: j'ai donc remplacé mes Id "popup" par des classes. Mais du coup, Jreaux62, je ne peux pas utiliser "document.querySelector(.popup)" car j'ai découvert qu'il ne renvoyait que le 1er élément du DOM (ça marche pour la 1ère case de mon formulaire qui a la classe popup mais pas pour les autres). J'ai donc pensé là aussi à "document.getElementsbyClassName(popup)" mais ça renvoit un tableau...:?

Avez-vous des idées ?

Bonjour,

La question 1, pour commencer?

Citation:

... visuellement ils sont différents donc pas terrible au niveau du rendu.

Cela permet à l'utlisateur de savoir s'il peut cocher plusieurs réponses ou s'il ne doit en cocher qu'une seule. Il est préférable de conserver cette présentation, à mon avis.

Citation:

... aussi je ne peux pas utiliser d'Id ...

Si, on peut utiliser un id et je le conseille, même s'il est possible de s'en passer. Attention à ce que cet id soit unique dans la page. Exemple de code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function valider() { if (document.getElementById("Q11").checked) alert("Bon choix!"); else if (document.getElementById("Q12").checked) alert("Choix moyen..."); else if (document.getElementById("Q13").checked) alert("Mauvais choix."); else alert("Vous n'avez coché aucune couleur!"); } </script> </head> <body> <p>Choisissez :</p> <p><input type="radio" name="Q1" id="Q11">Vert<br> <input type="radio" name="Q1" id="Q12">Rouge<br> <input type="radio" name="Q1" id="Q13">Bleu</p> <p><input type="button" value="OK" onclick="valider();"></p> </body> </html>

28/06/2018, 10h48
waspy

Toujours sur la question 1

Bonjour et merci pour ta réponse mais je ne comprends pas bien.:oops:

Soit j'utilise des boutons radio ET des boutons checkbox et mon problème de nombre de réponses à donner est résolu (même si je ne trouve pas ça super côté rendu).
Soit je ne mets que des checkbox et je passe par une fonction pour interdire de cocher plus d'une case quand c'est nécessaire. Mais là, la fonction que tu me proposes ne fais pas cela. Elle revient en plus à donner les bonnes réponses à l'utilisateur , non ?
En fait, il faudrait une fonction qui fasse que lorsqu'une 2e, 3e ou 4e case est cochée, une alerte indique qu'il n'en faut qu'une.

Rebonjour,

Ci-dessous, une solution possible, mais j'avoue que je n'aime pas trop...

Code:

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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      function controle() {
        var nb=0;
        if (document.getElementById("Q11").checked) nb++;
        if (document.getElementById("Q12").checked) nb++;
        if (document.getElementById("Q13").checked) nb++;
        if (nb>1) alert("Attention : Une seule case peut être cochée!");
      }
     function valider() {
        if (document.getElementById("Q11").checked) alert("Bon choix!");
        else if (document.getElementById("Q12").checked) alert("Choix moyen...");
        else if (document.getElementById("Q13").checked) alert("Mauvais choix.");
        else alert("Vous n'avez coché aucune couleur!");
     }
    </script>
  </head>
  <body>
    <p>Choisissez :</p>
    <p>
      <input type="checkbox" id="Q11" onclick="controle();">Vert<br>
      <input type="checkbox" id="Q12" onclick="controle();">Rouge<br>
      <input type="checkbox" id="Q13" onclick="controle();">Bleu
    </p>
    <p><input type="button" value="OK" onclick="valider();"></p>
  </body>
</html>

28/06/2018, 13h47
waspy

Effectivement je n'aime pas trop non plus... :lol:
Mais tu me donnes l'idée d'une boucle... Je vais essayer de plancher là-dessus mais peut-être pas aujourd'hui. Je te tiens au courant de mon avancée.
Merci ! :)