IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Réalisation d'un QUIZZ


Sujet :

JavaScript

  1. #1
    Candidat au Club
    Femme Profil pro
    Étudiant
    Inscrit en
    Décembre 2017
    Messages
    15
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Décembre 2017
    Messages : 15
    Points : 4
    Points
    4
    Par défaut Réalisation d'un QUIZZ
    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 !

  2. #2
    Membre confirmé
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    388
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 388
    Points : 580
    Points
    580
    Par défaut
    Bonsoir,

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

  3. #3
    Candidat au Club
    Femme Profil pro
    Étudiant
    Inscrit en
    Décembre 2017
    Messages
    15
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Décembre 2017
    Messages : 15
    Points : 4
    Points
    4
    Par défaut
    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.

  4. #4
    Membre confirmé
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    388
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 388
    Points : 580
    Points
    580
    Par défaut
    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

  5. #5
    Candidat au Club
    Femme Profil pro
    Étudiant
    Inscrit en
    Décembre 2017
    Messages
    15
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Décembre 2017
    Messages : 15
    Points : 4
    Points
    4
    Par défaut
    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 ?

  6. #6
    Membre confirmé
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    388
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 388
    Points : 580
    Points
    580
    Par défaut
    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>

  7. #7
    Membre confirmé
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    388
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 388
    Points : 580
    Points
    580
    Par défaut
    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.

  8. #8
    Invité
    Invité(e)
    Par défaut
    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

  9. #9
    Membre confirmé
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    388
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 388
    Points : 580
    Points
    580
    Par défaut
    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

  10. #10
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 135
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 135
    Points : 44 923
    Points
    44 923
    Par défaut
    Bonjour,
    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.

  11. #11
    Candidat au Club
    Femme Profil pro
    Étudiant
    Inscrit en
    Décembre 2017
    Messages
    15
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Décembre 2017
    Messages : 15
    Points : 4
    Points
    4
    Par défaut
    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 ?

  12. #12
    Membre confirmé
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    388
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 388
    Points : 580
    Points
    580
    Par défaut
    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>

  13. #13
    Candidat au Club
    Femme Profil pro
    Étudiant
    Inscrit en
    Décembre 2017
    Messages
    15
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Décembre 2017
    Messages : 15
    Points : 4
    Points
    4
    Par défaut
    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.

  14. #14
    Membre confirmé
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    388
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 388
    Points : 580
    Points
    580
    Par défaut
    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>

  15. #15
    Candidat au Club
    Femme Profil pro
    Étudiant
    Inscrit en
    Décembre 2017
    Messages
    15
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Décembre 2017
    Messages : 15
    Points : 4
    Points
    4
    Par défaut
    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 !

Discussions similaires

  1. Réalisation fonctions javascript pour un quizz (html5,css,js)
    Par ludogiuly dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 09/02/2018, 16h49
  2. msi ou comment réaliser un installeur?
    Par herzleid dans le forum Delphi
    Réponses: 11
    Dernier message: 09/04/2007, 20h27
  3. Réaliser un Chat avec support IP
    Par Sub0 dans le forum Développement
    Réponses: 12
    Dernier message: 14/07/2006, 11h59
  4. [Radio fréquence] réalisation d'une application
    Par WriteLN dans le forum Développement
    Réponses: 14
    Dernier message: 05/06/2003, 15h36
  5. [imprecis]Réaliser a^n avec seulement l'opérateur d'addition
    Par Amon dans le forum Algorithmes et structures de données
    Réponses: 18
    Dernier message: 08/11/2002, 23h22

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo