Quiz [Résolu]

Signaler
Messages postés
16
Date d'inscription
jeudi 12 décembre 2019
Statut
Membre
Dernière intervention
7 juillet 2020
 -
Messages postés
16
Date d'inscription
jeudi 12 décembre 2019
Statut
Membre
Dernière intervention
7 juillet 2020
 -
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
Messages postés
30227
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 novembre 2020
 2 992
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

.
Réponse 2 / 4
Messages postés
16
Date d'inscription
jeudi 12 décembre 2019
Statut
Membre
Dernière intervention
7 juillet 2020
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.
Signaler
Messages postés
30227
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 novembre 2020
 2 992
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..
Réponse 3 / 4
Messages postés
16
Date d'inscription
jeudi 12 décembre 2019
Statut
Membre
Dernière intervention
7 juillet 2020
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 !!
Signaler
Messages postés
30227
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 novembre 2020
 2 992
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>
Signaler
Messages postés
16
Date d'inscription
jeudi 12 décembre 2019
Statut
Membre
Dernière intervention
7 juillet 2020
 >
Messages postés
30227
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 novembre 2020
Effectivement 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?
Signaler
Messages postés
30227
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 novembre 2020
 2 992 >
Messages postés
16
Date d'inscription
jeudi 12 décembre 2019
Statut
Membre
Dernière intervention
7 juillet 2020

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
Signaler
Messages postés
30227
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 novembre 2020
 2 992 >
Messages postés
30227
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 novembre 2020
Par 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...
Réponse 4 / 4
Messages postés
16
Date d'inscription
jeudi 12 décembre 2019
Statut
Membre
Dernière intervention
7 juillet 2020
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.
Afficher les 6 commentaires
Signaler
Messages postés
16
Date d'inscription
jeudi 12 décembre 2019
Statut
Membre
Dernière intervention
7 juillet 2020
 >
Messages postés
30227
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 novembre 2020
C'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?
Signaler
Messages postés
30227
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 novembre 2020
 2 992 >
Messages postés
16
Date d'inscription
jeudi 12 décembre 2019
Statut
Membre
Dernière intervention
7 juillet 2020
Il 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
Signaler
Messages postés
16
Date d'inscription
jeudi 12 décembre 2019
Statut
Membre
Dernière intervention
7 juillet 2020
 >
Messages postés
30227
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 novembre 2020
Nickel 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?
Signaler
Messages postés
30227
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 novembre 2020
 2 992 >
Messages postés
16
Date d'inscription
jeudi 12 décembre 2019
Statut
Membre
Dernière intervention
7 juillet 2020
Comme 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
Signaler
Messages postés
16
Date d'inscription
jeudi 12 décembre 2019
Statut
Membre
Dernière intervention
7 juillet 2020
 >
Messages postés
30227
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
19 novembre 2020
Oui j'ai cru comprendre... Je n'ai pas fini les pls!

Merci pour aide et ta patience je marque comme résolu.
Répondre Posez votre question