Créer un quiz en Javascript

par creange Dim 19 Mar 2023 - 20:58

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : https://dangela.forumgratuit.org/

Description du problème

Bonjour j'ai fait un questionnaire , j'ai réussi à faire un bouton lien vers les réponses mais je n'arrive pas à trouver un code pour valider les réponses

voici le code js qui valide le script

Code:: $(function() { $.get('/forum', function(data) { var validquizz()"quizz" = $(checked quizz) ; $(validquizz).each(function() { $(this).html(quizz id .html() }); $('.QUIZZ a[href^="/u"]('<a href="" class id ="QUIZZ" /><a href="https://dangela.forumgratuit.org/h8-le-quizz-perso-du-couturier/"; </a>'); <script language="javascript" type="text/javascript"> function validquizz() /*nom de la fonction*/QUIZZ { if (document.getElementById("CNRS").checked) /* Si l'élément ayant l'id CNRS est coché*/ { alert ('Bonne réponse !'); /* On affiche une boite de dialogue alert Bonne réponse */ return true; /* On transmet le formulaire*/ } else { /* Sinon */ alert ('Mauvaise réponse !'); /* On affiche une boite de dialogue alert Bonne réponse */ return false; /*On ne transmet pas le formulaire */ } } </script>

je ne sais pas comment faire un css pour valider le questionnaire
et je ne sais pas où mettre le lien de mon questionnaire dans le script ...

voici mon essai de formulaire

Code:: <br /><br /> <title>Formulaire pour Réponses </title> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <style type="text/css"> /* Le css sera ici */ .boutonscnrs { width: 150px; height: 50px; background-color: #BF5996; border:4px outset #BF5996; border-radius:10px; -moz-border-radius:10px; vertical-align: middle; } .titrebshojo { text-align:center; color: white; font-family: 'Lobster Two', cursive; font-size: 22px; font-weight: bold; padding: 15px 15px 15px 15px; } .titrebshojo a:link { text-decoration:none; color: white; } .titrebshojo a:hover { color: #F6B9EA; } .titrebshojo a:visited { text-decoration:none; color: white; } </style> <script type="text/javascript">  </script> <div id="https://creas3d.forumactif.com/h18-essai-quizz-en-colone-reponses"> <h1> Valider Le QUIZZ </h1> <h2> <div style="text-align: start;"> <br /> </div> </h2> </div> <strong style="color: rgb(51, 0, 102); font-size: 24px; text-align: -webkit-center;">Le Thym est-il :</strong> <div> <div style="text-align: -webkit-center;"> <span style="color: rgb(51, 0, 102);"><span style="font-size: 24px;"><strong><br /></strong></span></span> </div><strong style="color: rgb(51, 0, 102); font-size: 24px; text-align: -webkit-center;"></strong> <div> </div> <div> <span style="color: rgb(0, 0, 0);"></span><span style="text-align: -webkit-center;">réponse 1 : </span><span style="text-align: -webkit-center;"><span style="font-size: 24px;"><align style=""><input style="color: rgb(102, 0, 204);" ,"checked",="" type="RADIO" name="SECTEUR1" "checked"="" value="cnrs" cheched="" offclick="" univ="" ","="" ;="" /> <span style="color: rgb(102,0,204);">Une Herbe Arromatique </span></align></span></span>: Réponse </div> <div> <span style="color: rgb(0, 0, 0);"></span><span style="text-align: -webkit-center;">réponse 2 : </span><span style="text-align: -webkit-center; color: rgb(102, 0, 204);"><span style="font-size: 24px;"><align><input type="RADIO" name="SECTEUR1" value="INSE" no="" input="" /> Une Plante Décorative </align></span></span>: Réponse </div> <div> réponse 3 :<span style="text-align: -webkit-center; color: rgb(102, 0, 204);"><span style="font-size: 24px;"><align><input type="RADIO" name="SECTEUR1" value="INSE" /> Une Racine </align></span></span>: Réponse </div> <div> réponse 4 : <span style="text-align: -webkit-center; color: rgb(102, 0, 204);"><span style="font-size: 24px;"><input type="RADIO" name="SECTEUR1" value="INSE" /> Une Fleur </span></span>: Réponse <div> <form id="rempli" method="post" action="#"> <div> <br /> </div> <div> <div> </div> <div> <div style="text-align: start;"> <br /> </div> </div> </div><br /> <input value="Valider le Quizz" onclick="verif(this.form)" type="button" /> <h2> <br /> </h2> </form> </div> </div> </div>

je l'ai fait en m'inspirant de plusieurs codes que j'ai trouvé sur le forum

est ce que quelqu'un sait comment faire pour valider les réponses ???

Oups désolée Chattigre je croyais l'avoir fait
j'ai été trop vite .... Embarassed

Cordialement

Bonne journée

par **chattigre** Dim 19 Mar 2023 - 21:14

Bonjour @creange,

Si je comprends bien, vous souhaitez faire un quizz / formulaire :
- Au clic sur le bouton valider, scan des réponses entrées, et affiche si c'est ou non une bonne réponse ?
- Aucun message posté ensuite, juste une information affichée à l'utilisateur.

En particulier, à quoi est supposée servir cette requête ?

Code:: $.get('/forum', function(data) { var validquizz()"quizz" = $(checked quizz) ; $(validquizz).each(function() { $(this).html(quizz id .html() });

je l'ai fait en m'inspirant de plusieurs codes que j'ai trouvé sur le forum

Au vue des codes donnés, il y a de nombreuses erreurs de syntaxe dans vos codes, aussi auriez-vous les sources en question afin de les reprendre comme base ?

Bonne journée
Cordialement

par creange Dim 19 Mar 2023 - 21:21

Bonsoir Chattigre

alors j'ai préparé ce formulaire pour les bonnes réponses

Code:: <br /> <title>Formulaire pour Réponses </title> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <style type="text/css"> /* Le css sera ici */ .boutonscnrs { width: 150px; height: 50px; background-color: #BF5996; border:4px outset #BF5996; border-radius:10px; -moz-border-radius:10px; vertical-align: middle; } .titrebshojo { text-align:center; color: white; font-family: 'Lobster Two', cursive; font-size: 22px; font-weight: bold; padding: 15px 15px 15px 15px; } .titrebshojo a:link { text-decoration:none; color: white; } .titrebshojo a:hover { color: #F6B9EA; } .titrebshojo a:visited { text-decoration:none; color: white; } </style> <script type="text/javascript">  </script> <div id="https://creas3d.forumactif.com/h18-essai-quizz-en-colone-reponses"> <h1> VALIDER LE QUIZZ </h1> <h2> <div style="text-align: start;"> <br /> </div> </h2> </div> <strong style="color: rgb(51, 0, 102); font-size: 24px; text-align: -webkit-center;">Le Thym est-il :</strong> <div> <div style="text-align: -webkit-center;"> <span style="color: rgb(51, 0, 102);"><span style="font-size: 24px;"><strong><br /></strong></span></span> </div><strong style="color: rgb(51, 0, 102); font-size: 24px; text-align: -webkit-center;"></strong> <div> </div> <div> <span style="color: rgb(0, 0, 0);"></span><span style="text-align: -webkit-center;">réponse 1 : </span><span style="text-align: -webkit-center;"><span style="font-size: 24px;"><align style=""><input style="color: rgb(102, 0, 204);" ,"checked",="" type="RADIO" name="SECTEUR1" "checked"="" value="cnrs" cheched="" offclick="" univ="" ","="" ;="" /> <span style="color: rgb(0, 102, 0);">Une Herbe Arromatique </span></align></span></span><span style="color: rgb(0, 102, 0);">: Bonne Réponse </span> </div> <div> <span style="color: rgb(0, 0, 0);"></span><span style="text-align: -webkit-center;">réponse 2 : </span><span style="text-align: -webkit-center; color: rgb(102, 0, 204);"><span style="font-size: 24px;"><align><input type="RADIO" name="SECTEUR1" value="INSE" no="" input="" /> Une Plante Décorative </align></span></span>: Mauvaise Réponse </div> <div> réponse 3 :<span style="text-align: -webkit-center; color: rgb(102, 0, 204);"><span style="font-size: 24px;"><align><input type="RADIO" name="SECTEUR1" value="INSE" /> Une Racine </align></span></span>: Mauvaise Réponse </div> <div> réponse 4 : <span style="text-align: -webkit-center; color: rgb(102, 0, 204);"><span style="font-size: 24px;"><input type="RADIO" name="SECTEUR1" value="INSE" /> Une Fleur </span></span>: Mauvaise Réponse <div> <form id="rempli" method="post" action="#"> <div> <br /> </div> <div> <div> </div> <div> <div style="text-align: start;"> <br /> </div> </div> </div><br /> <input value="Valider le Quizz" onclick="verif(this.form)" type="button" /> <h2> <br /> </h2> </form> </div> </div> </div>

ce que je souhaiterai c'est valider les réponses pour que le nombre de bonnes réponses
s'affiche quand l'utilisateur valide le quizz

pour le code js

au départ c'était ce code et j'ai essayé de rajouter le lien valider

Code:: <script language="javascript" type="text/javascript"><div class="container"><div id="quizH24"></div> </div> function validquizz() /*nom de la fonction*/ { if (document.getElementById("CNRS").checked) /* Si l'élément ayant l'id CNRS est coché*/ { alert ('Bonne réponse !'); /* On affiche une boite de dialogue alert Bonne réponse */ return true; /* On transmet le formulaire*/ } else { /* Sinon */ alert ('Mauvaise réponse !'); /* On affiche une boite de dialogue alert Bonne réponse */ return false; /*On ne transmet pas le formulaire */ } } </script>

par **chattigre** Dim 19 Mar 2023 - 22:11

Re,

Je vous propose quelque chose que je vous laisse adapter à vos besoins Smile

Code:: <form id="formulaire" name="formulaire"> <div>Question 1</div> <label for="q1_o">Oui </label> <input type="radio" id="q1_o" name="name_q1" value="o"> <label for="q1_n">Non </label> <input type="radio" id="q1_n" name="name_q1" value="n"> <label for="q1_nsp">Aucune idée </label> <input type="radio" id="q1_nsp" name="name_q1" value="0"> <button type="submit" name="send">Vérifier</button> </form> <script> $(function() { var reponses = { "name_q1":"n", "name_q2":"reponse_q2", } $("#formulaire").on("submit", function(e) { e.preventDefault(); e.stopPropagation(); verifReponses(); }); function verifReponses() { points = 0 for (const [key, val] of Object.entries(reponses)) { if( (formulaire[key] && (formulaire[key].value.length > 0)) ) { if(formulaire[key].value == val) points += 1; } } if(points > 0) { alert("Vous avez "+points+" bonnes réponses !"); } else { alert("Mauvaises réponses !"); } } }); </script> <style> /*Votre CSS ici*/ </style>

Dans le JS, il faut modifier le tableau reponses
Pour une question, on a :

Code:: "name_q1":"reponse_question",

name_q1 doit correspondre à l'attribut "name" des champs de formulaire de cette question.
reponse_question doit correspondre à l'attribut "value" de la bonne réponse à cette question.

Vous avez donc juste à ajouter des lignes dans le js pour chaque question et le champ de formulaire avec
- l'attribut name identique à celui dans le JS
- l'attribut value de la bonne réponse identique à ce qui est indiqué dans le JS

Le code va ensuite parcourir l'objet "reponses" du JS, regarder chaque champ de formulaire avec l'attribut name correspondant à une ligne, pour voiur si la valeur est la bonne réponse.
Si oui, ajoute 1 point.
Si l'utilisateur a plus d'un point, on affiche son nombre de bonnes réponses au clic sur "Vérifier".
Sinon, on lui signifie qu'il a mal répondu.

Notez qu'il est important d'avoir un formulaire avec un attribut id="formulaire" et name="formulaire" car ils sont utilisés dans le JS.

Pour le CSS, libre à vous d'utiliser des classes et de personnaliser comme vous voulez.

Je vous laisse tester et me faire un retour
Bonne journée
Cordialement

par creange Dim 19 Mar 2023 - 23:55

Merci pour l'aide
voici ce que j'ai fait

Code:: <script> $(function() { var reponses = { "name_q1":"n", "name_q2":"reponse_q2", "name_q3": "réponse_q3", "name_q4":"réponse_q4", } $("#formulaire").on("submit", function(e) { e.preventDefault(); e.stopPropagation(); verifReponses(); }); function verifReponses() { points = 0 for (const [key, val] of Object.entries(reponses)) { if( (formulaire[key] && (formulaire[key].value.length > 0)) ) { if(formulaire[key].value == val) points += 1; } } if(points > 0) { alert("Vous avez "+points+" bonnes réponses !"); } else { alert("Mauvaises réponses !"); } } }); </script><style> /*Votre CSS ici*/ </style> <div style="text-align: start;"> <br /> </div> <strong style="color: rgb(51, 0, 102); font-size: 24px; text-align: -webkit-center;"> Le Thym est-il : </strong>Question 1 <div> <div style=""> <div style="text-align: -webkit-center;"> <label for="q1_o" style="text-align: start;"></label><label for="q1_o" style="text-align: start;"><label for="q1_o" style="text-align: -webkit-center;">Oui </label><span style="text-align: -webkit-center;"></span><input type="radio" id="q1_o" name="name_q1" value="o" /><span style="color: rgb(102, 0, 204); font-size: 24px; text-align: -webkit-center;">Une Herbe Arromatique</span></label> </div> <div style="text-align: -webkit-center;"> Question 2<span style="text-align: start;"><br /></span> </div> <div style="text-align: -webkit-center;"> <span style="text-align: start;"></span><label for="q1_n" style="text-align: start;"><label for="q1_n">Non </label><input type="radio" id="q2_n" name="name_q2" value="n" /> <span style="color: rgb(102, 0, 204); font-size: 24px; text-align: -webkit-center;">Une Plante Décorative</span></label> </div><strong style="color: rgb(51, 0, 102); font-size: 24px; text-align: -webkit-center;"></strong> <div> <div style="text-align: -webkit-center;"> Question 3<span style="text-align: start;"><br /></span> </div> <div style="text-align: -webkit-center;"> <span style="text-align: start;"></span><label for="q1_n" style="text-align: start;"><label for="q1_n">Non </label><input type="radio" id="q3_n" name="name_q3" value="n" /> <span style="color: rgb(102, 0, 204); font-size: 24px; text-align: -webkit-center;">Une Fleur</span></label> </div><strong style="color: rgb(51, 0, 102); font-size: 24px; text-align: -webkit-center;"></strong> <div> <div style="text-align: -webkit-center;"> Question4 <span style="text-align: start;"><br /></span> </div> <div style="text-align: -webkit-center;"> <span style="text-align: start;"></span><label for="q1_n" style="text-align: start;"><label for="q1_n">Non </label><input type="radio" id="q4_n" name="name_q4" value="n" /> <span style="color: rgb(102, 0, 204); font-size: 24px; text-align: -webkit-center;">Une Plante Décorative</span></label> </div><strong style="color: rgb(51, 0, 102); font-size: 24px; text-align: -webkit-center;"></strong> <div> </div> <div> <div> <form id="formulaire" name="formulaire" style="text-align: -webkit-center;"> <label for="q1_nsp"></label> </form> <div> <form action="#" method="post" id="rempli"> <div> <input type="radio" id="q1_nsp" name="name_q1" value="0" /><span style="text-align: -webkit-center;"> </span> <button type="submit" name="send"> Valider </button><br /> </div> <div> <div> </div> <div> <div style="text-align: start;"> <br /> </div> </div> </div><br /> <h2> <br /> </h2> </form> </div> </div> </div> </div> </div> </div><sapn style="text-align: -webkit-center,"></sapn> </div>

Je prèfère mettre Valider au lieu de Vérifier

Quand j'essaie de le valider je tombe sur l'index du forum
dois je mettre un js dans les modules ? et si oui lequel et où dois le placer ?

par **chattigre** Lun 20 Mar 2023 - 12:00

Bonjour,

Avec quoi écrivez-vous votre code HTML ?
Pour rappel, un code HTML est un ensemble de balises qui s'ouvrent et se ferment successivement dans le même ordre et qui contiennent d'autres balises.
Par exemple :

Code:: <div style="text-align: start;"> <br /> </div>

Ne sert à rien puisqu'il ne fait qu'ajouter un blanc, pas besoin de l'encadrer dans un bloc (div)

De même une fois que vous indiquez sur un bloc parent (qui contient les autres) que le texte est centré (text-align:center), il n'est pas utile de le repréciser. Smile

Par ailleurs les différentes questions doivent être dans le formulaire, donc entre les balises <form> et </form>

On va faire plus simple, pourriez-vous me transmettre :
- La liste des questions
- La liste des propositions de réponse
- Les bonnes réponses associées
Je pourrai réaliser une première version du code pour vous.

Bonne journée
Cordialement

par creange Lun 20 Mar 2023 - 14:52

Bonjour Chattigre

je m'y connais très peu en html j'ai récupéré le code
et j'ai changé le texte des questions en faisant un copier coller pour chaque question
ce qui explique la répétition du code Very Happy

j'ai juste une question pour faire mon essai de quizz

Volà ce que j'ai fait
ce que j'ai oublié de préciser c'est que je ne veux pas que l'utilisateur poste mais juste qu'il
puisse ouvrir les réponses avec une validation de ses points de réponses
je ne sais pas si c'est possible ou pas ... Interrog

bonne journée

Fichiers joints

: ESSAI 1ER QUIZZ SIMPLE sans REPONSES.JPG voilà mon essai de quizz avec les questionsVous n'avez pas la permission de télécharger les fichiers joints.(31 Ko) Téléchargé 4 fois

: ESSAI 1ER QUIZZ SIMPLE LES REPONSES.JPG voilà mon essai avec les réponsesVous n'avez pas la permission de télécharger les fichiers joints.(45 Ko) Téléchargé 1 fois

: ESSAI FORMULAIRE QUIZZ AVEC CODE CHATTIGRE.JPG et voilà celui que j'ai fait avec votre codeVous n'avez pas la permission de télécharger les fichiers joints.(37 Ko) Téléchargé 0 fois

par **chattigre** Lun 20 Mar 2023 - 19:36

Re,

Ah, j'avais mal compris la partie "validation", vous voulez afficher le détail, d'accord.

Après, si vous voulez simplement afficher l'info au membre sans poster de message et que vous vous y connaissez peu en HTML, pourquoi ne pas utiliser un service en ligne tout fait pour faire des quiz ? Smile

Je veux bien vous faire le code pour un quiz, mais peut-être que ce serait plus simple pour vous à long terme ?

Qu'en pensez-vous ?

par creange Lun 20 Mar 2023 - 19:51

pour le quizz j'ai le lien quizz bizz mais j'ai voulu essayer de faire mon propre quizz
e
pour ça pas de souci j'ai crée 2 pages en html l'une avec le résultat et l'autre sans les résultats
et j'ai mis un bouton lien pour voir les réponses mais pour la validation des réponses
je n'ai pas réussi ça me semble assez compliqué si l'utilisateur ne post pas !!

j'ai bien essayé de mettre le js de liaisons des formulaires en mettant l'id de mon quizz mais ça ne
fonctionne pas du coup je crois que l'on va en rester là
tant pis pour l'utilisateur il fera ses comptes lui même mdr

par **chattigre** Lun 20 Mar 2023 - 20:06

Je viens de retester mon code et semble bien fonctionnel. Vous vous êtes sans doute trompée dans les modifications en faisant les copier-coller.

Pourriez-vous me communiquer quelques questions de votre quiz afin que je puisse vous faire un exemple réel et fonctionnel ?
Cordialement

par creange Lun 20 Mar 2023 - 20:15

voici le questionnaire d'essai
c'est juste pour l'essai lol

merci pour l'aide
cordialement

par creange Mer 22 Mar 2023 - 19:51

oup's j'ai oublié de mettre les bonnes réponses

je vous le mets en code pour que vous puissiez comprendre mon erreur

Code:: <script><br /> $(function() { var reponses = { "name_q1":"n", "name_q2":"reponse_q2", "name_q3": "réponse_q3", "name_q4":"réponse_q4", } $("#formulaire").on("submit", function(e) { e.preventDefault(); e.stopPropagation(); verifReponses(); }); function verifReponses() { points = 0 for (const [key, val] of Object.entries(reponses)) { if( (formulaire[key] && (formulaire[key].value.length > 0)) ) { if(formulaire[key].value == val) points += 1; } } if(points > 0) { alert("Vous avez "+points+" bonnes réponses !"); } else { alert("Mauvaises réponses !"); } } }); </script><style> /*Votre CSS ici*/ </style> <div style="text-align: start;"> <br /> </div> <strong style="color: rgb(51, 0, 102); font-size: 24px; text-align: -webkit-center;"> </strong> <div style="text-align: -webkit-center;"> <div style="color: rgb(51, 0, 102); font-size: 24px;"> <span style="color: rgb(102, 0, 102);"><span style="font-size: 24px;"><strong><br /></strong></span></span> </div> <div style="color: rgb(51, 0, 102); font-size: 24px;"> <span style="color: rgb(102, 0, 102);"><span style="font-size: 24px;"><strong><br /></strong></span></span> </div> <div style=""> <form id="formulaire" name="formulaire" style="color: rgb(51, 0, 102); font-size: 24px;"> <div> <span style="font-size: 24px;"></span> </div><span style="font-size: 24px;">Question 1:</span><strong><span style="color: rgb(102, 0, 102); font-size: 24px;"><br />Le Thym est-il :</span></strong> <div> <span style="font-size: 24px;"><br /></span> </div> <div> <span style="font-size: 24px;"></span>oui<input type="radio" id="q1_o" name="name_q1" value="o" /><span style="color: rgb(102, 0, 255); font-size: 24px;">Une Plante Arromatique</span> </div> <span style="font-size: 24px;"></span>non<span style="font-size: 24px;"><input type="radio" id="q1_n" name="name_q1" value="n" /> </span><span style="color: rgb(102, 0, 255); font-size: 24px;">Une Plante Décorative<br /></span>non<span style="font-size: 24px;"></span><span style="font-size: 24px;"><input type="radio" id="q2_n" name="name_q2" value="n" /> </span><span style="color: rgb(102, 0, 255); font-size: 24px;">Une Racine <br /></span><span style="font-size: 24px;">non</span><input type="radio" id="q2_n" name="name_q2" value="n" /> <span style="color: rgb(102, 0, 255); font-size: 24px;">Une Fleur</span><span style="font-size: 24px;"><br /></span><span style="font-size: 24px;"><br /></span><span style="font-size: 24px;"><input type="radio" id="q1_nsp" name="name_q1" value="0" /> </span> <button type="submit" name="send"> Valider<br /> </button> <div> <span style="font-size: 24px;"><br /></span> </div> <div> <div> <div> <span style="font-size: 24px;"><br /></span> </div> <span style="font-size: 24px;">Question 2:</span><strong><span style="color: rgb(102, 0, 102); font-size: 24px;"><br />Que Doit-on Planter Pour Avoir une Tulipe :</span> </strong> </div> <span style="font-size: 24px;"><br /></span> <div> <span style="font-size: 24px;"></span>non<input type="radio" id="q2_n" name="name_q2" value="n" /><span style="color: rgb(102, 0, 255); font-size: 24px;"> </span><span style="color: rgb(102, 0, 255); font-size: 24px;">Un Rizome</span> </div> <span style="font-size: 24px;"></span><span style="font-size: 24px;">oui<input type="radio" id="q1_o" name="name_q1" value="o" /> </span><span style="color: rgb(102, 0, 255); font-size: 24px;">Un Oignon<br /></span><span style="font-size: 24px;"></span><span style="font-size: 24px;">non<input type="radio" id="q2_n" name="name_q2" value="n" /> </span><span style="color: rgb(102, 0, 255); font-size: 24px;">Une Racine <br /></span><span style="font-size: 24px;"></span>non<input type="radio" id="q2_n" name="name_q2" value="n" /> <span style="color: rgb(102, 0, 255); font-size: 24px;">Un Tubercule</span><span style="font-size: 24px;"><br /></span><span style="font-size: 24px;"><br /></span><span style="font-size: 24px;"><input type="radio" id="q1_nsp" name="name_q1" value="0" /> </span> <button type="submit" name="send"> Valider<br /> </button> <div> <span style="font-size: 24px;"><br /></span> </div> </div> </form> </div> </div>

bonne soirée cordialement

par **chattigre** Mer 22 Mar 2023 - 20:38

Bonsoir creange,

Merci pour ce retour, j'ai toutes les informations nécessaires !
J'ai beaucoup d'impératifs personnels ces derniers jours qui ne m'ont pas permis de regarder en détail votre code, je fais mon possible pour la regarder en détail demain midi !

Veuillez m'excuser pour ce délai, je vous tiens informée au plus vite.
Cordialement

par creange Mer 22 Mar 2023 - 20:43

Chattigre pas de souci prenez votre temps
l'essentiel avant tout !

cordialement

par **chattigre** Jeu 23 Mar 2023 - 17:08

Bonjour,

Voici une proposition.
Le remplissage du questionnaire et la vérification se font sur la même page.

Je vous laisse tester tel quel sans faire de modifications au départ pour confirmer que cela correspond à ce que vous voulez Smile

Ensuite, le code est rempli de commentaires qui vous expliquent où sont les propositions, les réponses, quelles valeurs mettre à quels attributs, etc. Je vous invite à lire ces commentaires attentivement et à les respecter pour faire des modifications.

Code complet :

Code:: <form id="formulaire" name="formulaire">    <div class="question-title">Le thym est-il ?</div> <input type="radio" name="q1" value="r1" id="q1_r1"><label for="q1_r1" class="choice">Une plante aromatique</label><br/> <div class="answer true">Bonne réponse !</div> <input type="radio" name="q1" value="r2" id="q1_r2"><label for="q1_r2" class="choice">Une plante décorative</label><br/> <div class="answer bad">Mauvaise réponse !</div> <input type="radio" name="q1" value="r3" id="q1_r3"><label for="q1_r3" class="choice">Une racine</label><br/> <div class="answer bad">Mauvaise réponse !</div> <input type="radio" name="q1" value="r4" id="q1_r4"><label for="q1_r4" class="choice">Une plante aromatique</label><br/> <div class="answer bad">Mauvaise réponse !</div>   <div class="question-title">Que plante-t-on pour avoir une tulipe ?</div> <input type="radio" name="q2" value="r1" id="q2_r1"><label for="q2_r1" class="choice">Un rizome</label><br/> <div class="answer true">Bonne réponse !</div> <input type="radio" name="q2" value="r2" id="q2_r2"><label for="q2_r2" class="choice">Un oignon</label><br/> <div class="answer bad">Mauvaise réponse !</div> <input type="radio" name="q2" value="r3" id="q2_r3"><label for="q2_r3" class="choice">Une racine</label><br/> <div class="answer bad">Mauvaise réponse !</div> <input type="radio" name="q2" value="r4" id="q2_r4"><label for="q2_r4" class="choice">Un tubercule</label><br/> <div class="answer bad">Mauvaise réponse !</div>    <button type="submit" name="send">Vérifier</button> <input class="answer_tg" type="button" id="masquer_reponses" value="Masquer les réponses"> </form> <script> $(function() { /* Tableau des bonnes réponses : "id_question":"id_reponse", Exemple "q1":"r1", "q2":"r3", etc. */ var reponses = { "q1":"r1", "q2":"r1", } $("#formulaire").on("submit", function(e) { e.preventDefault(); e.stopPropagation(); toggleReponses(); verifReponses(); }); $("#masquer_reponses").click(function() { toggleReponses(); return false; }) function verifReponses() { points = 0 for (const [key, val] of Object.entries(reponses)) { if( (formulaire[key] && (formulaire[key].value.length > 0)) ) { if(formulaire[key].value == val) points += 1; } } if(points > 0) { alert("Vous avez "+points+" bonnes réponses !"); } else { alert("Mauvaises réponses !"); } } function toggleReponses() { $(".answer, .answer_tg").toggleClass("visible"); } }); </script> <style> .answer { display: none; padding: 5px 3px; border: 1px solid currentColor; color: gray; background-color: lightgray; border-radius: 10px; margin-top: 5px; margin-bottom: 10px; max-width: 500px; } .answer_tg { display: none; } .answer.bad { color: darkred; background-color: lightcoral; } .answer.true { color: darkgreen; background-color: lightgreen; } .answer.visible, .answer_tg.visible { display: block; margin: auto; } .question-title { margin-top: 20px; font-size: larger; font-weight: bold; } #formulaire label { margin-left: 5px; } /*Votre CSS supplémentaire ici*/ </style>

Bonne journée
Cordialement

par creange Jeu 23 Mar 2023 - 21:29

Bonsoir Chattigre
merci pour le code ça fonctionne Yes

à part une petite erreur dans les bonnes réponses que j'ai corrigée
Le seul souci se trouve au niveau du nombre de bonnes réponses ça bugg ....
que l'on ai une ou 2 bonnes réponses ça indique toujours qu'une seule bonne réponse Very Happy

merci pour votre aide et votre patience
bonne soirée cordialement

par **chattigre** Jeu 23 Mar 2023 - 21:38

Bonsoir,

Je peux bien avoir "Vous avez 2 bonnes réponses" de mon côté.
Attention, le texte que vous affichez est une chose, le bloc vert/rouge vous pouvez mettre n'importe quoi qu'il s'agisse d'une bonne, mauvaise réponse, peu importe la classe que vous mettez ce n'est pas ça qui détermine le compte de bonnes réponses.

Dans le code, vous avez ceci :

Code:: var reponses = { "q1":"r1", "q2":"r1", }

Il faut indiquer en face du nom de la question q1, q2, q3, etc. la valeur de la bonne réponse pour qu'elle soit prise en compte dans le calcul correctement.

Il s'agit de l'attribut "value" de la case à cocher de la bonne réponse Smile

Par exemple, pour

Code:: <input type="radio" name="q1" value="r1" id="q1_r1"><label for="q1_r1" class="choice">Une plante aromatique</label><br/>

On est sur la question q1 (name="q1") et la proposition r1 (value="r1")
S'il s'agit de la bonne réponse à cette question, il faut indiquer dans la variable reponses : "q1":"r1",
Au contraire si la bonne réponse à la question 2 est la 3e : "q2":"r3", et ainsi de suite !

Bonne soirée

par creange Jeu 23 Mar 2023 - 22:44

je suis désolée mais je n'ai droit qu'à une seule bonne réponse
j'ai pourtant coché les 2 bonnes réponses ...
et je n'ai pas modifié le code pour le moment

par **chattigre** Jeu 23 Mar 2023 - 22:57

Bonjour,

Il y a en effet une erreur dans mon choix de "bonne réponse" (erreur purement liée à la question, techniquement tout fonctionne ^^), mais si vous la changez dans le tableau des réponses (partie JS), cela fonctionne bien normalement Smile

Voilà une version corrigée directement :

Code:: <form id="formulaire" name="formulaire">    <div class="question-title">Le thym est-il ?</div> <input type="radio" name="q1" value="r1" id="q1_r1"><label for="q1_r1" class="choice">Une plante aromatique</label><br/> <div class="answer true">Bonne réponse !</div> <input type="radio" name="q1" value="r2" id="q1_r2"><label for="q1_r2" class="choice">Une plante décorative</label><br/> <div class="answer bad">Mauvaise réponse !</div> <input type="radio" name="q1" value="r3" id="q1_r3"><label for="q1_r3" class="choice">Une racine</label><br/> <div class="answer bad">Mauvaise réponse !</div> <input type="radio" name="q1" value="r4" id="q1_r4"><label for="q1_r4" class="choice">Une plante aromatique</label><br/> <div class="answer bad">Mauvaise réponse !</div>   <div class="question-title">Que plante-t-on pour avoir une tulipe ?</div> <input type="radio" name="q2" value="r1" id="q2_r1"><label for="q2_r1" class="choice">Un rizome</label><br/> <div class="answer bad">Mauvaise réponse !</div> <input type="radio" name="q2" value="r2" id="q2_r2"><label for="q2_r2" class="choice">Un oignon</label><br/> <div class="answer true">Bonne réponse !</div> <input type="radio" name="q2" value="r3" id="q2_r3"><label for="q2_r3" class="choice">Une racine</label><br/> <div class="answer bad">Mauvaise réponse !</div> <input type="radio" name="q2" value="r4" id="q2_r4"><label for="q2_r4" class="choice">Un tubercule</label><br/> <div class="answer bad">Mauvaise réponse !</div>    <button type="submit" name="send">Vérifier</button> <input class="answer_tg" type="button" id="masquer_reponses" value="Masquer les réponses"> </form> <script> $(function() { /* Tableau des bonnes réponses : "id_question":"id_reponse", Exemple "q1":"r1", "q2":"r3", etc. */ var reponses = { "q1":"r1", "q2":"r2", } $("#formulaire").on("submit", function(e) { e.preventDefault(); e.stopPropagation(); toggleReponses(); verifReponses(); }); $("#masquer_reponses").click(function() { toggleReponses(); return false; }) function verifReponses() { points = 0 for (const [key, val] of Object.entries(reponses)) { if( (formulaire[key] && (formulaire[key].value.length > 0)) ) { if(formulaire[key].value == val) points += 1; } } if(points > 0) { alert("Vous avez "+points+" bonnes réponses !"); } else { alert("Mauvaises réponses !"); } } function toggleReponses() { $(".answer, .answer_tg").toggleClass("visible"); } }); </script> <style> .answer { display: none; padding: 5px 3px; border: 1px solid currentColor; color: gray; background-color: lightgray; border-radius: 10px; margin-top: 5px; margin-bottom: 10px; max-width: 500px; } .answer_tg { display: none; } .answer.bad { color: darkred; background-color: lightcoral; } .answer.true { color: darkgreen; background-color: lightgreen; } .answer.visible, .answer_tg.visible { display: block; margin: auto; } .question-title { margin-top: 20px; font-size: larger; font-weight: bold; } #formulaire label { margin-left: 5px; } /*Votre CSS supplémentaire ici*/ </style>

Bonne journée Wink

par creange Jeu 23 Mar 2023 - 23:18

C'est bon cette fois ci tout fonctionne parfaitement Créer un quiz en Javascript 889830273

Merci pour l'aide et les explications ça va bien m'aider

je vais pouvoir fermer le sujet
bonne fin de soirée
cordialement

par **Chacha** Dim 26 Mar 2023 - 21:09

Bonjour,

Le topic est replacé à la demande de l'auteur du sujet.

Pensez à faire un UP au moins une fois par semaine si vous ne voulez pas voir votre sujet déplacé à la corbeille.

par **chattigre** Dim 26 Mar 2023 - 21:20

Rebonjour @creange,

Suite à votre demande, pourriez-vous donc me fournir ledit code avec 3 questions qui reste "bloqué" à 2 bonnes réponses maximum ?

Bonne journée
Cordialement

par creange Dim 26 Mar 2023 - 21:55

Merci Chacha pour la réouverture du sujet .

Chattigre voici mon code

Code:: <form name="formulaire" id="formulaire">   <div align="center">   <div class="question-title"> <span style="color: rgb(102, 0, 102); font-size: 24px;"> Le thym est-il ? </span> </div>  <span style="color: rgb(102, 0, 255); font-size: 18px;"><input id="q1_r1" value="r1" name="q1" type="radio" /><label class="choice" for="q1_r1"></label>Une plante aromatique<br />   </span> <div class="answer true" style=""> Bonne réponse ! </div><span style="color: rgb(102, 0, 255);"><span style="font-size: 18px;">  <input id="q1_r2" value="r2" name="q1" type="radio" /><label class="choice" for="q1_r2"></label>Une plante décorative<br /> </span></span> <div class="answer bad" style=""> Mauvaise réponse ! </div><span style="color: rgb(102, 0, 255);"><span style="font-size: 18px;"></span><span style="font-size: 18px;">  <input id="q1_r3" value="r3" name="q1" type="radio" style="" /><label class="choice" for="q1_r3"></label>Une racine</span></span><br /> <div class="answer bad" style=""> Mauvaise réponse ! </div><span style="font-size: 18px;"><span style="color: rgb(102, 0, 255);">  <input id="q1_r4" value="r4" name="q1" type="radio" style="" /></span><label class="choice" for="q1_r4" style=""><span style="color: rgb(102, 0, 255);">Une Fleur</span></label></span> </div> <div align="center"> </div> <div align="center">    <div class="question-title"> <span style="color: rgb(102, 0, 102); font-size: 24px;"> Que plante-t-on pour avoir une tulipe ? </span> </div>  <span style="color: rgb(102, 0, 255); font-size: 18px;"><input id="q2_r1" value="r1" name="q2" type="radio" /> <label class="choice" for="q2_r1"></label>Un rizome<br />  </span> <div class="answer bad" style=""> Mauvaise réponse ! </div><span style="color: rgb(102, 0, 255); font-size: 18px;">  <input id="q2_r2" value="r2" name="q2" type="radio" /><label class="choice" for="q2_r2"></label>Un oignon<br /> </span> <div class="answer true" style=""> Bonne réponse ! </div><span style="color: rgb(102, 0, 255); font-size: 18px;">  <input id="q2_r3" value="r3" name="q2" type="radio" /><label class="choice" for="q2_r3"></label>Une racine<br /> </span> <div class="answer bad" style=""> Mauvaise réponse ! </div><span style="color: rgb(102, 0, 255); font-size: 18px;">  <input id="q2_r4" value="r4" name="q2" type="radio" /><label class="choice" for="q2_r4"></label>Un tubercule<br /> </span> <div class="answer bad" style=""> Mauvaise réponse ! </div><span style="color: rgb(102, 0, 255); font-size: 18px;"> </span> <div align="center">    <div class="question-title"> <span style="color: rgb(102, 0, 102); font-size: 24px;"> La Tomate est-elle ? </span> </div>  <span style="color: rgb(102, 0, 255); font-size: 18px;"><input id="q3_r1" value="r1" name="q3" type="radio" /> <label class="choice" for="q3_r1"></label>Un Légume<br />  </span> <div class="answer bad" style=""> Mauvaise réponse ! </div><span style="color: rgb(102, 0, 255); font-size: 18px;">  <input id="q3_r2" value="r2" name="q3" type="radio" /><label class="choice" for="q3_r2"></label>Un Fruit<br /> </span> <div class="answer true" style=""> Bonne réponse ! </div><span style="color: rgb(102, 0, 255); font-size: 18px;">  <input id="q3_r3" value="r3" name="q3" type="radio" /><label class="choice" for="q3_r3"></label>Un Arbuste<br /> </span> <div class="answer bad" style=""> Mauvaise réponse ! </div><span style="font-size: 18px;">  <input style="color: rgb(102, 0, 255);" id="q3_r4" value="r4" name="q3" type="radio" /><label class="choice" for="q3_r4" style=""><span style="color: rgb(102, 0, 255);">Un Condiment</span></label></span> </div> <div align="center"> <span style="font-size: 18px;"><span style="color: rgb(102, 0, 255);"><label class="choice" for="q3_r4" style=""></label></span></span><span style="color: rgb(102, 0, 255);"><span style="font-size: 18px;"><br /></span></span> <div class="answer bad"> Mauvaise réponse ! </div>    <button name="send" type="submit"> <span style="color: rgb(102, 0, 102); font-size: 24px;"> Valider </span> </button> <input value="Masquer les réponses" id="masquer_reponses" type="button" class="answer_tg" /> <script> $(function() { /* Tableau des bonnes réponses : "id_question":"id_reponse", Exemple "q1":"r1", "q2":"r3", etc. */ var reponses = { "q1":"r1", "q2":"r2", } $("#formulaire").on("submit", function(e) { e.preventDefault(); e.stopPropagation(); toggleReponses(); verifReponses(); }); $("#masquer_reponses").click(function() { toggleReponses(); return false; }) function verifReponses() { points = 0 for (const [key, val] of Object.entries(reponses)) { if( (formulaire[key] && (formulaire[key].value.length > 0)) ) { if(formulaire[key].value == val) points += 1; } } if(points > 0) { alert("Bravo Vous avez "+points+" bonnes réponses !"); } else { alert("Mauvaises réponses !"); } } function toggleReponses() { $(".answer, .answer_tg").toggleClass("visible"); } }); </script> <style> .answer { display: none; padding: 5px 3px; border: 1px solid currentColor; color: gray; background-color: lightgray; border-radius: 10px; margin-top: 5px; margin-bottom: 10px; max-width: 500px; } .answer_tg { display: none; } .answer.bad { color: darkred; background-color: lightcoral; } .answer.true { color: darkgreen; background-color: lightgreen; } .answer.visible, .answer_tg.visible { display: block; margin: auto; } .question-title { margin-top: 20px; font-size: larger; font-weight: bold; } #formulaire label { margin-left: 5px; } /*Votre CSS supplémentaire ici*/ </style> <div style="text-align: -webkit-center;"> </div> </div> </div> </form>

bonne soirée à vous
cordialement

par **chattigre** Mer 29 Mar 2023 - 22:32

Bonjour @creange,

Avec un rapide coup d'oeil sur votre code, je vois que vous avez oublié de modifier le tableau / variable JS qui contient les bonnes réponses techniquement utilisé pour le compte des points :

Code:: var reponses = { "q1":"r1", "q2":"r2", }

Vous devez indiquer une nouvelle ligne par question "qX":"rY", En remplaçant X par le numéro de la question, qui est l'attribut "name" des champs du formulaire (q3 pour la question 3 par exemple) et Y par le numéro de la bonne réponse, que vous avez dans l'attribut "value" de la bonne réponse.
Dans votre cas avec 3 questions ça donne donc :

Code:: var reponses = { "q1":"r1", "q2":"r2", "q3":"r2", }

Je vous laisse tester

Bonne journée
Cordialement

par creange Mer 29 Mar 2023 - 23:25

Bonsoir Chattigre

j'avais tenté de ce coté mais je n'avais pas réaliser que ça correspondait
aux bonnes réponses Embarassed

encore une fois merci pour les explications et l'aide apportée

cette fois ci tout fonctionne bien Yes

Bonne fin de soirée
cordialement

par **chattigre** Jeu 30 Mar 2023 - 9:46

Afin de faciliter la gestion des problèmes, si le vôtre est résolu, pensez à :

éditer votre premier message,
cocher l'icône résolu et enregistrer

Créer un quiz en Javascript