Réalisation d'un QUIZZ

**waspy** · 03/12/2017, 20h16

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** · 03/12/2017, 20h33

Bonsoir,

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

**waspy** · 03/12/2017, 20h42

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** · 03/12/2017, 21h43

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** · 04/12/2017, 08h24

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** · 04/12/2017, 13h06

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>

**eleydet** · 05/12/2017, 10h26

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.

Invité · 05/12/2017, 10h54

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 html :

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

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 html :

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

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

Et ici :

Code JavaScript :

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

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

**eleydet** · 05/12/2017, 11h46

Rebonjour,

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

Code html :

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

<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

**NoSmoking** · 05/12/2017, 13h37

Bonjour,

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

Les deux sont possibles : The label element

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.

**waspy** · 27/06/2018, 16h02

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

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 ?

**eleydet** · 28/06/2018, 08h25

Bonjour,

La question 1, pour commencer?

... 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.

... 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 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
<!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>

**waspy** · 28/06/2018, 11h48

Toujours sur la question 1

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

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.

**eleydet** · 28/06/2018, 12h37

Rebonjour,

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

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

**waspy** · 28/06/2018, 14h47

Effectivement je n'aime pas trop non plus...

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 !

Réalisation d'un QUIZZ

JavaScript

Discussions similaires

Partager

Partager