Quiz

Quiz

Résolu

TitanMa -

Bonjour à tous. Dans le cadre d'un exercice je dois réaliser un quiz. J'ai donc fais la structure en html avec des boutons radios, plusieurs options mais un choix possible. Mais je coince sur l'écriture du javascript. J'aimerais en fait récupérer les réponses données par l'utilisateur et afficher, où une fenêtre bonne ou mauvaise réponse, et, en dessous de la question, insérer une li avec la réponse. En remerciant par avance les personnes qui prendront le temps de me lire.

Afficher la suite

4 réponses

Réponse 1 / 4
TitanMa Auteur
Mais du coup comment mettre un événement différent, selon si la personne à cliqué sur la bonne ou sur la mauvaise réponse? En fait c'est pour ça que je pensé partir sur une boucle et une condition.

0

Réagir
1. jordane45 Modérateur
  
  Tu récupères la valeur de la case selectionnée ... donc à toi de la comparer avec la valeur attendue.
  Si elle sont identique = bonne réponse .. sinon réponse fausse.
  
  Pour le coup, là tu peux utiliser un tableau ( un array ) pour y stocker les réponses attendues pour chaque question...
  
  0
  
  Réagir
2. TitanMa Auteur
  
  @jordane45C'est pour ça que j'avais stocké mes constantes au départ mais je suis pas sûr d'avoir pris les bonnes. Pour récupérer du coup le tableau il faut que j'utilise la méthode JSON.parse et le stringify?
  
  0
  
  Réagir
3. jordane45 Modérateur
  
  @TitanMaIl suffit que tu vérifies que l'élément coché
  document.querySelector('input[name="choix"]:checked')
  
  contient la classe .rj
  
  Via un code du genre
  element.classList.contains(class);
  
  https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
  
  Ou via une fonction que tu peux te créer, du style
  function hasClass(element, className) { return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1; }
  
  et que tu peux utiliser dans ton code comme ceci:
  function hasClass(element, className) { return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1; } document.getElementById("rep1").addEventListener("click", function(){ var elm= document.querySelector('input[name="choix"]:checked'); var isRj = hassClass(elm,"rj"); if ( isRj ) { alert ('Bonne réponse'); } else alert ('Mauvaise réponse'); } });
  
  Toujours pas besoin de tes constantes de départ ni de boucle
  
  0
  
  Réagir
4. TitanMa Auteur
  
  @jordane45Nickel du coup je n'ai plus qu'à remplacer la fonction alert par mon createElement pour l'incorporé?
  
  Et j'ai une dernière question. Dans ta fonction les éléments sont des objets déjà existant dans la bibliothèque javascript et donc des éléments à connaitre pour coder plus facilement?
  
  0
  
  Réagir
5. jordane45 Modérateur
  
  @TitanMaComme pour chaque langage ...
  Plus tu connais les fonctions disponibles...mieux tu codes...
  
  Dis toi aussi que le DOM ( la page web...) est fabriquée à partir d'objets ( les input, les div, les textarea, .. etc...)
  Chaque élément hml est un objet qui a des propriétés (ici, on parlera d'attribut ) ( l' ID, le NAME, la (ou les) CLASS ... )
  La liste est disponible ici : https://developer.mozilla.org/fr/docs/Web/API/Element
  
  0
  
  Réagir
Réponse 2 / 4
TitanMa Auteur
Mince oui j'avais pas réfléchis à la question trop vaste.

Grosso modo sur une question ça donne ça :
```
<div class="card w-100 mb-4" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">Question 1</h5>
                        <label for="choix">La première question?</label>
                        <div class="align-items-center">
                            <form id="questionUne">
                                <input type="radio" value="0" name="choix" class="choix rj mr-2">oui<br>
                                <input type="radio" value="1" name="choix" class="choix rf mr-2" >non
                            </form>
                        </div>
                      <button type="submit" value="valider" id="rep1" class="btn btn-warning btn-sm float-right mt-n5" >Valider</button>
                    
                  </div>
                  <div class="float-right">
                      <ul id="list">
                          
                      </ul>
                  </div>
            </div>
```
Et mon JS pour le moment :
```
const questionUne = document.querySelector('#questionUne');
const reponse = document.querySelector('.choix');
const reponseJuste = document.querySelector('.rj');
const reponseFausse = document.querySelector('.rf');
```
Je voudrais dans un premier récupérer la réponse du bouton radio coché et m'en servir pour afficher selon la condition et en profiter pour rajouter un point à chaque réponse juste.

Désolé pour le code je suis pas encore au point sur une écriture "propre".

EDIT : Ajout des balises de code !!
0

Réagir
1. jordane45 Modérateur
  
  Déjà....
  Tu n'as pas appliqué les consignes pour poster ton code !!
  J'ai édité ton message pour les mettre.
  Merci d'y penser à l'avenir.
  
  Ensuite, vu que tu fais du html/javascript .. change le bouton "submit" par un simple button
  <button type="button"
  
  Ensuite, attaches y un event sur son clic et tu récupères le bouton selectionné :
  
  Par exemple
  document.getElementById("rep1").addEventListener("click", function(){ var Lareponse = document.querySelector('input[name="choix"]:checked').value; alert(Lareponse ); });
  
  A noter que tu placeras ton code à la fin de ton document html .. juste avant le </body>
  
  0
  
  Réagir
2. TitanMa Auteur
  
  @jordane45Effectivement autant pour moi. J'y ferai attention.
  
  Donc si je comprend bien tu récupère l'id du bouton pour le faire réagir au "click" et tu récupère la réponse de l'utilisateur avec la value? Du coup pas de boucle et de tableau pour récupérer tout ça?
  
  Ensuite, une fois récupérer sa réponse, je n'ai plus qu'à créer un élément avec le java pour l'incorporer dans la ul avec le appendchild?
  
  0
  
  Réagir
3. jordane45 Modérateur
  
  @TitanMa
  
  Donc si je comprend bien tu récupère l'id du bouton pour le faire réagir au "click" et tu récupère la réponse de l'utilisateur avec la value? Du coup pas de boucle et de tableau pour récupérer tout ça?
  
  comme tu peux le voir, je cible directement le bouton radio coché ( le "checked")
  donc, oui, pas de boucle.. et pas de tableau.
  Attention à bien mettre des "name" différents pour chacune de tes questions.
  
  Là tu as utilisé name="choix"
  Mois j'aurais plutot mis : name="Q1"
  
  Et donc, pour la seconde.. Q2 .. etc...
  
  Ensuite, une fois récupérer sa réponse, je n'ai plus qu'à créer un élément avec le java
  
  javaSCRIPT ( JAVA n'est pas JAVASCRIPT !! )
  
  pour l'incorporer dans la ul avec le appendchild?
  
  Oui
  
  0
  
  Réagir
4. jordane45 Modérateur
  
  @jordane45Par contre, tu dois absolument le faire en Javascript ?
  Car, le JS étant chargé par le navigateur, n'importe qui sachant un peu utiliser les outils de son navigateur pourra aller voir quelle est la bonne réponse... et donc tricher.
  En général, un quizz, ça se gère côté "serveur", avec du PHP par exemple...
  
  0
  
  Réagir
Réponse 3 / 4
TitanMa Auteur
Déjà merci pour ta réponse.

Justement je ne veut pas de code déjà tout fait mais juste les étapes de la config en javascript. C'est dans le cadre d'une formation donc le faire par moi même.

Pour être plus précis après avoir construit mon code html, j'ai créé des constantes pour stockés mon formulaire et les réponses afin de m'en resservir. Le problème c'est que maintenant je bloque pour les réutiliser afin de donner le résultat avec une fenêtre d'alerte et la réponse ajouter dans une li dynamiquement avec javascript.

Si besoin je posterai mon code mais à la base j'aimerais juste comprendre le cheminement général de l'opération.

0

Réagir
1. jordane45 Modérateur
  
  Le cheminement général ???
  Il y a autant de codes Javascript possibles ... que de codeurs dans le monde.....
  
  Et sans voir le début de ton code ( ne serait-ce que tes "déclarations" et le code html qui va avec... ) on ne peut rien te dire...
  
  En gros :
  Tu récupères la valeur sélectionnée par l'utilisateur
  Tu la compares avec la bonne réponse
  Tu affiches ta fenêtre ( alerte ou, mieux, modale ) avec le résultat
  Tu ajoutes, à ta liste, la réponse..
  
  0
  
  Réagir
Réponse 4 / 4
jordane45 Modérateur
Bonjour,

Pour obtenir de l'aide, il faut que tu commences par nous montrer le code que tu as essayé de faire et que tu expliques sur quel point précis tu bloques.
A ce moment là, nous pourrons essayer de te le corriger/améliorer.

Sans code, aucune aide ne te sera fournie ( nous ne donnons pas de code prêt à l'emploi )

NB: Avant de poster ton code, merci de prendre connaissance le fonctionnement des balises de code
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

.

1

Réagir

Quiz

4 réponses

Discussions similaires

Newsletters