Quiz

Résolu

Quiz

TitanMa Messages postés 16 Date d'inscription Statut Membre Dernière intervention -
TitanMa Messages postés 16 Date d'inscription Statut Membre Dernière intervention - 7 juil. 2020 à 18:00

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.

A voir également:

Esf net zero trace mini quiz
Remettre a zero un pc - Guide
Net framework 2.0 - Télécharger - Divers Utilitaires
Opera mini pc - Télécharger - Navigateurs
Paint net - Télécharger - Dessin & Illustration
Net framework 4.0 - Télécharger - Divers Utilitaires

4 réponses

Réponse 1 / 4

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 751

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

TitanMa Messages postés 16 Date d'inscription Statut Membre Dernière intervention

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.

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 751

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

TitanMa Messages postés 16 Date d'inscription Statut Membre Dernière intervention

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

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 751

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>

TitanMa Messages postés 16 Date d'inscription Statut Membre Dernière intervention > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

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?

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 751 > TitanMa Messages postés 16 Date d'inscription Statut Membre Dernière intervention

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

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 751 > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

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

TitanMa Messages postés 16 Date d'inscription Statut Membre Dernière intervention

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.

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 751

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

TitanMa Messages postés 16 Date d'inscription Statut Membre Dernière intervention > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

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?

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 751 > TitanMa Messages postés 16 Date d'inscription Statut Membre Dernière intervention

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

TitanMa Messages postés 16 Date d'inscription Statut Membre Dernière intervention > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

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?

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 751 > TitanMa Messages postés 16 Date d'inscription Statut Membre Dernière intervention

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

Discussions similaires

Quiz panet

Je n'arrive pas à répondre au Quizz

esf dbz

Quiz planet

Disparition des stories de lieux sur Instagram

Quiz Planet

Votre réponse

Discussions similaires