QCM en Html et Javascript qui ne fonctionne pas.

Résolu/Fermé

The_Art_of_War Messages postés 107 Date d'inscription samedi 15 novembre 2014 Statut Membre Dernière intervention 15 septembre 2021 - Modifié par The_Art_of_War le 22/10/2016 à 18:50
The_Art_of_War Messages postés 107 Date d'inscription samedi 15 novembre 2014 Statut Membre Dernière intervention 15 septembre 2021 - 22 oct. 2016 à 19:08

Bonjour,

Je doit faire un QCM à trois questions.
Il y a plusieurs choix possibles, mais pour avoir le point il faux avoir aucune réponse fausse.
Cependant, il semblerait que ma deuxième question donne 2 points et ma troisième question n'en donne aucun.
Chaque question (ensemble des 3 réponses par question) si répondu correctement doit donner 1 point.

Voici le code (je met pas l'image de fond puisque ça ne change rien au fonctionnement):
(collez le sur Notepad++ pour une meilleur lisibilité)
En-dessous je remet le code commenté pour que vous ayez le choix.
(collez le sur Notepad++ pour une meilleur lisibilité)

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>QCM</title>
  <script language="JavaScript">
   var Q1=0;
   var Q2=0;
   var Q3=0;
   function test(nom,n)
   {
    var rep=true; 
    for (i=0; i<n; i++)
    { 
     if (nom[i].value==1 && nom[i].checked==false) rep=false; 
     if (nom[i].value==0 && nom[i].checked==true) rep=false; 
    } 
    return rep; 
   }
   
   function score1() {document.QCM.resultat.value=Q1+Q2+Q2}
  </script>
 </head>

 <body BACKGROUND="background.jpg">
  <h1>Questions à Choix Multiples (QCM)</h1>
  <form name="QCM">
   Il y a une ou plusieurs réponses justes à chaques questions.
   <br>
   Pour avoir juste à la question il faut avoir toutes les réponses correctes et aucune fausse.
   <br>
   <br>
   <b><u>Que vaut i² ?</u></b>
   <br>
   <input type="checkbox" name="Question1" value=0>i²=i</input>
   <br>
   <input type="checkbox" name="Question1" value=1>i²=-1</input>
   <br>
   <input type="checkbox" name="Question1" value=0>i²=14</input>
   <br>
   <br>
   <b><u>Que signifie 42 ?</u></b>
   <br>
   <input type="checkbox" name="Question2" value=1>Ce nombre est la réponse à la question ultime du sens de la vie</input>
   <br>
   <input type="checkbox" name="Question2" value=0>42=Pomme de terre</input>
   <br>
   <input type="checkbox" name="Question2" value=1>C'est un nombre</input>
   <br>
   <br>
   <b><u>1+1= ?</u></b>
   <br>
   <input type="checkbox" name="Question3" value=1>1+1=2</input>
   <br>
   <input type="checkbox" name="Question3" value=1>1+1>=1</input>
   <br>
   <input type="checkbox" name="Question3" value=1>1+1<3</input>
   <br>
   <br>
   <input type="button" name="Bouton" value="Vérifier"
    OnClick="if (test(Question1,3))
       {
      Q1=1;
       } else
      {
       Q1=0;
      }
       if (test(Question2,3))
       {
      Q2=1;
       } else
      {
       Q2=0;
      }
       if (test(Question3,3))
       {
      Q3=1;
       } else
      {
       Q3=0;
      }
       Number(Q1);
       Number(Q2);
       Number(Q3);
       score1();
      "></input>
   <br>
   <br>
   Votre score est : 
   <input type="text" name="resultat" size="1" value="?"></input>
   /3
  </form>
  <br>
 </body>
</html>

Code commenté :

<!DOCTYPE html> <!-- Indique qu'il s'agit bien d'une page web HTML -->
<html>
 <head>
  <meta charset="UTF-8"/> <!-- Cette balise indique l'encodage utilisé. Cette méthode d'encodage permet d'afficher sans aucun problème pratiquement tous les symboles de toutes les langues -->
  <title>QCM</title> <!-- Titre affiché sur la barre de l'onglet -->
  <script language="JavaScript"> <!-- On indique que l'on a ici du code en JavaScript -->
   var Q1=0;
   var Q2=0; <!-- Ces 3 variables stockerons le score de la question, 0 étant faux et 1 correcte -->
   var Q3=0;
   function test(nom,n) <!-- Fonction de test des réponses, le "nom" seras la "name" du group de questions à tester et le "n" seras le nombre de réponses possibles de la question, ici toujours 3 -->
   {
    var rep=true; <!-- On déclare la variable comme true par défaut, c'est le principe de Présomption d'innocence, tant que la réponse n'est pas définis comme fausse, alors on a bon -->
    for (i=0; i<n; i++) <!-- Ce pour feras le tour des réponses possibles -->
    { 
     if (nom[i].value==1 && nom[i].checked==false) rep=false; <!-- Si la case (checkbox) i est correcte (value==1) mais que celle-ci n'est pas cochée alors la variable rep prend la valeur false -->
     if (nom[i].value==0 && nom[i].checked==true) rep=false; <!-- Si la case (checkbox) i est fausse (value==0) mais que celle-ci est cochée alors la variable rep prend la valeur false -->
    } 
    return rep; <!-- On retourne la variable rep qui nous permettras de savoir si on a eu faux ou corecte à la question -->
   }
   
   function score1() {document.QCM.resultat.value=Q1+Q2+Q2} <!-- Fonction qui afficheras la somme de Q1, Q2 et Q3 dans la boite de texte nommée "resultat" située dans notre formulaire nommé "QCM" de notre document -->
  </script>
 </head>

 <body BACKGROUND="background.jpg"> <!-- Image de fond choisis avec l'attribut "background" -->
  <h1>Questions à Choix Multiples (QCM)</h1>
  <form name="QCM"> <!-- Début du formulaire de questions -->
   Il y a une ou plusieurs réponses justes à chaques questions.
   <br>
   Pour avoir juste à la question il faut avoir toutes les réponses correctes et aucune fausse.
   <br>
   <br>
   <b><u>Que vaut i² ?</u></b>
   <br>
   <input type="checkbox" name="Question1" value=0>i²=i</input> <!-- Ces 3 cases on le même nom pour indiquer qu'elles appartiennent aux même groupe -->
   <br>
   <input type="checkbox" name="Question1" value=1>i²=-1</input> <!-- L'attribut "value" vas nous servir pour pouvoir détecter si la case est correcte ou fausse, "1" étant correcte et "0" étant faux -->
   <br>
   <input type="checkbox" name="Question1" value=0>i²=14</input>
   <br>
   <br>
   <b><u>Que signifie 42 ?</u></b>
   <br>
   <input type="checkbox" name="Question2" value=1>Ce nombre est la réponse à la question ultime du sens de la vie</input> <!-- Ces 3 cases on le même nom pour indiquer qu'elles appartiennent aux même groupe -->
   <br>
   <input type="checkbox" name="Question2" value=0>42=Pomme de terre</input>
   <br>
   <input type="checkbox" name="Question2" value=1>C'est un nombre</input>
   <br>
   <br>
   <b><u>1+1= ?</u></b>
   <br>
   <input type="checkbox" name="Question3" value=1>1+1=2</input> <!-- Ces 3 cases on le même nom pour indiquer qu'elles appartiennent aux même groupe -->
   <br>
   <input type="checkbox" name="Question3" value=1>1+1>=1</input>
   <br>
   <input type="checkbox" name="Question3" value=1>1+1<3</input>
   <br>
   <br>
   <!-- Afin de ne pas pertuber le code du OnClick ci-dessous, les commentaire sont mis au dessus et non pas à côter -->
   <!-- L'attribut "OnClick" utilisé pour un bouton signifie que lorsque que l'on clicque sur le bouton, les opérations du OnClick seront exécutées -->
   <!-- Ce bouton vas initialiser le début des test -->
   <!-- Si la question 1 a été répondu correctement, alors if(test(Question1,3)) devient if(true), alors Q1=1 et si elle a été répondu comme fausse alors ce seras Q1=0. Même principe pour Question2 et Question3-->
   <!-- Number(x) : On convertit ces trois variables en nombre afin de faire la somme des trois -->
   <!-- score1() : On affiche le score -->
   <input type="button" name="Bouton" value="Vérifier" 
    OnClick="if (test(Question1,3)) 
       {
      Q1=1;
       } else
      {
       Q1=0;
      }
       if (test(Question2,3))
       {
      Q2=1;
       } else
      {
       Q2=0;
      }
       if (test(Question3,3))
       {
      Q3=1;
       } else
      {
       Q3=0;
      }
       Number(Q1); 
       Number(Q2);
       Number(Q3);
       score1(); 
      "></input>
      <!-- Si il y aurait eu plus que troix question, au lieu de faire le test question par question, nous aurions pu faire un "if" qui englobe le tout -->
   <br>
   <br>
   Votre score est : 
   <input type="text" name="resultat" size="1" value="?"></input>
   /3
  </form> <!-- Fin du formulaire de questions -->
  <br>
 </body>
</html>

A voir également:

Faire un qcm en html
Editeur html - Télécharger - HTML
Espace en html ✓ - Forum HTML
[**] Balise pour un espace vide en hml. Merci ✓ - Forum Webmastering
&Nbsp html ✓ - Forum Webmastering
[HTML] -   á et les autres - Forum HTML

1 réponse

Réponse 1 / 1

The_Art_of_War Messages postés 107 Date d'inscription samedi 15 novembre 2014 Statut Membre Dernière intervention 15 septembre 2021 4
22 oct. 2016 à 19:08

Solutions:

J'ai dans le <head> la fonction:

function score1() {document.QCM.resultat.value=Q1+Q2+Q2}

qui devrait être:

function score1() {document.QCM.resultat.value=Q1+Q2+Q3}

Discussions similaires