Fonction javascript sur un bouton

Fermé

Ceayshe Messages postés 3 Date d'inscription samedi 22 septembre 2018 Statut Membre Dernière intervention 23 septembre 2018 - Modifié le 22 sept. 2018 à 14:38
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 - 23 sept. 2018 à 17:07

Bonsoir à tous,

Je cherche à créer des exercices de français avec un menu déroulant proposant plusieurs réponses dont une seule est correcte.

Le problème que je rencontre est que je ne sais pas comment faire pour configurer une seule bonne réponse en fonction de la conjugaison approprié et permettre au bouton "corriger" d'indiquer le résultat dans la case prévu à cet effet.

Après avoir chercher plusieurs jours, je pense qu'il faut configurer un script JS mais je ne sais malheureusement pas comment faire.

Est-ce que quelqu'un aurait l'amabilité de m'aider à résoudre ce problème ?
Voici un aperçu du rendu et le code associer à celui-ci.

Merci de votre aide précieuse
Cordialement

<form name="Formulaire" action="noaction">
            <td class="num">1.</td>
            <td class="reponse" id="texte_reponse1"> </td>
            <td>   Nous <select name="question1" size="1">
                <option value="F">-- ? --</option>
                <option value="F">fais</option>
                <option value="F">fait</option>
                <option value="V">faisons</option>
                <option value="F">faites</option>
                <option value="F">font</option>
              </select> du sport.</td>
        <br />
            <td class="num">2.</td>
            <td class="reponse" id="texte_reponse2"> </td>
            <td>   Tu  <select name="question2" size="1">
                <option value="F">-- ? --</option>
                <option value="V">fais</option>
                <option value="F">fait</option>
                <option value="F">faisons</option>
                <option value="F">faites</option>
                <option value="F">font</option>
              </select> quoi, ce soir ?</td>
        <br />
            <td class="num">3.</td>
            <td class="reponse" id="texte_reponse3"> </td>
            <td>   Pierre et Paul <select name="question3" size="1">
                <option value="F">-- ? --</option>
                <option value="F">fais</option>
                <option value="F">fait</option>
                <option value="F">faisons</option>
                <option value="F">faites</option>
                <option value="V">font</option>
              </select> du théâtre ensemble.</td>
        <br />
            <td class="num">4.</td>
            <td class="reponse" id="texte_reponse4"> </td>
            <td>   Vous <select name="question4" size="1">
                <option value="F">-- ? --</option>
                <option value="F">fais</option>
                <option value="F">fait</option>
                <option value="F">faisons</option>
                <option value="V">faites</option>
                <option value="F">font</option>
              </select> quelque chose de bien.</td>
        <br /> 
            <td class="num">5.</td>
            <td class="reponse" id="texte_reponse5"> </td>
            <td>   Je <select name="question5" size="1">
                <option value="F">-- ? --</option>
                <option value="V">fais</option>
                <option value="F">fait</option>
                <option value="F">faisons</option>
                <option value="F">faites</option>
                <option value="F">font</option>
              </select> confiance à Martine.</td>
        <br />
            <td class="num">6.</td>
            <td class="reponse" id="texte_reponse6"> </td>
            <td>   Il <select name="question6" size="1">
                <option value="F">-- ? --</option>
                <option value="F">fais</option>
                <option value="V">fait</option>
                <option value="F">faisons</option>
                <option value="F">faites</option>
                <option value="F">font</option>
              </select> beau aujourd'hui !</td>
<br>
</br>
<div id="resultats">
          <input type="button" name="button2" onclick="valide_exercice(this.form)" value="Valider"/>   Resultat :<input type="text" readonly name="ScoreFinal" id="ScoreFinal" value="" size="1" />  / 6      <input type="reset" value="Recommencer" />
      </form>

A voir également:

Fonction javascript sur un bouton
Fonction si et - Guide
Telecharger javascript - Télécharger - Langages
Réinitialiser chromecast sans bouton - Guide
Fonction somme excel - Guide
Fonction moyenne excel - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
22 sept. 2018 à 16:42

Bonjour,

Le problème que je rencontre est que je ne sais pas comment faire pour configurer une seule bonne réponse en fonction de la conjugaison approprié

Visiblement tu l'as déjà fait...vu que dans les attributs "VALUE" des tes OPTIONS tu as indiqué V ou F (vrai ou faux )

permettre au bouton "corriger" d'indiquer le résultat dans la case prévu à cet effet.

Suffit de faire un IF sur la value.. pour savoir si elle vaut V ou F ...

Mais vu que tu ne nous montres pas ton code javascript et que tu nous indiques pas à quel endroit du code tu rencontres un souci... il nous sera difficil de t'aider à le corriger.

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
22 sept. 2018 à 16:43

NB : Au passage.. pour correctement poster ton code (en y mettant le coloration syntaxique) il faut le faire en suivant ce tuto :
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Merci.

Ceayshe Messages postés 3 Date d'inscription samedi 22 septembre 2018 Statut Membre Dernière intervention 23 septembre 2018
22 sept. 2018 à 16:58

Merci de ta réponse jordane, en fait je débute et je n'ai pas de code javascript, je ne sais pas comment le créer, forcément le bouton corriger ne peux fonctionner sans cela, sans surprise.

Est-ce que tu pourrais me donner des pistes pour savoir comment le créer ? Si je comprends bien, je dois ouvrir une balise <script> puis commencer la ligne par IF ?

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
22 sept. 2018 à 19:50

Tu es sûr d'avoir écrit ce code ?
Car dedans il y a déjà l'appel à une fonction JS valide_exercice(this.form)

Bref...
Dans ta page ( à la fin de ton document , de préférence juste avant le </body> ) ) tu places ceci :

<script type="text/javascript">
    function valide_exercice(){
        //ici ton code

    }
</script>

Mais bon.. ton code me semble un peut brouillon et pas tellement évolutif...
Des balises FORM mais pas utilisées (pas besoin si pas de PHP derrière ! )
Des <td> .. mais pas de tableau...
des <br> alors que si tu fais un tableau.. ce sont des <tr></tr> qu'il faut utiliser...

Bref :
Essayes ça :

<!DOCTYPE html>
<html>
 <head>
  <title> TEST </title>
  <meta charset="utf-8">
 </head>

  <body> 
  <div id="questions">
    <table>
      <tr>
        <td class="num">1.</td>
        <td class="reponse" id="texte_reponse1"> </td>
        <td>   Nous 
        <select name="question[]" id="question1" size="1">
          <option value="F">-- ? --</option>
          <option value="F">fais</option>
          <option value="F">fait</option>
          <option value="V">faisons</option>
          <option value="F">faites</option>
          <option value="F">font</option>
        </select>
       du sport.</td>
      </tr>
      <tr>
      <td class="num">2.</td>
      <td class="reponse" id="texte_reponse2"> </td>
      <td>   Tu 
        <select name="question[]" id="question2"" size="1">
          <option value="F">-- ? --</option>
          <option value="V">fais</option>
          <option value="F">fait</option>
          <option value="F">faisons</option>
          <option value="F">faites</option>
          <option value="F">font</option>
        </select>
       quoi, ce soir ?</td>
      </tr>
      <tr>
      <td class="num">3.</td>
      <td class="reponse" id="texte_reponse3"> </td>
      <td>   Pierre et Paul 
        <select name="question[]" id="question6" size="1">
          <option value="F">-- ? --</option>
          <option value="F">fais</option>
          <option value="F">fait</option>
          <option value="F">faisons</option>
          <option value="F">faites</option>
          <option value="V">font</option>
        </select>
       du théâtre ensemble.</td>
      </tr>
      <tr>
      <td class="num">4.</td>
      <td class="reponse" id="texte_reponse4"> </td>
      <td>   Vous 
        <select name="question[]" id="question4" size="1">
          <option value="F">-- ? --</option>
          <option value="F">fais</option>
          <option value="F">fait</option>
          <option value="F">faisons</option>
          <option value="V">faites</option>
          <option value="F">font</option>
        </select>
       quelque chose de bien.</td>
      </tr>
      <tr>
      <td class="num">5.</td>
      <td class="reponse" id="texte_reponse5"> </td>
      <td>   Je 
        <select name="question[]" id="question6" size="1">
          <option value="F">-- ? --</option>
          <option value="V">fais</option>
          <option value="F">fait</option>
          <option value="F">faisons</option>
          <option value="F">faites</option>
          <option value="F">font</option>
        </select>
       confiance à Martine.</td>
      </tr>
      <tr>
      <td class="num">6.</td>
      <td class="reponse" id="texte_reponse6"> </td>
      <td>   Il 
        <select name="question[]" id="question6" size="1">
          <option value="F">-- ? --</option>
          <option value="F">fais</option>
          <option value="V">fait</option>
          <option value="F">faisons</option>
          <option value="F">faites</option>
          <option value="F">font</option>
        </select>
       beau aujourd'hui !</td>
     
     </tr>
    </table>
  </div>
  <div id="boutons">
    <input type="button" onclick="valide_exercice()" value="Valider"/> 
    <input type="reset" value="Recommencer" />
  </div>
  <div id="resultats">
     Resultat : <span id="ScoreFinal" ></span>/<span id="nbquestions"></span>    
  </div>




  <script type="text/javascript">
    function valide_exercice(){
      //on recupères toutes les questions
       var dropdown = document.querySelectorAll("select");
       console.log('dropdown',dropdown);
       //on initialise les variables de score
        var scrore = 0;
        var nbQuestions = dropdown.length;
        console.log('nbQuestions',nbQuestions);
       //on boucle dessus pour les vérifier
       for (var i=0; i< nbQuestions ; i++){
          // pour le debugage, on peut afficher les valeurs dans la CONSOLE du navigateur )
          console.log('selectedIndex', dropdown[i].selectedIndex)
          console.log('options', dropdown[i].options)
          console.log('selected', dropdown[i].options[dropdown[i].selectedIndex].value)
          
          //on vérifie les réponses
          var valeur_reponse = dropdown[i].options[dropdown[i].selectedIndex].value;
          if(valeur_reponse == "V"){
            scrore++; // on incrémente le scrore
          }
       
       }  
       
       //on affiche le resultat
       var ScoreFinalHTML = document.getElementById('ScoreFinal');
       var nbquestionsHTML = document.getElementById('nbquestions');
       ScoreFinalHTML.innerHTML = scrore;
       nbquestionsHTML.innerHTML = nbQuestions;

    }
    </script>
  </body>
</html>

Avec ce code, tu peux ajouter des questions sans avoir à modifier le code javascript.
Faut juste respecter la même structure que pour tes autres questions...

Ceayshe Messages postés 3 Date d'inscription samedi 22 septembre 2018 Statut Membre Dernière intervention 23 septembre 2018
Modifié le 23 sept. 2018 à 16:21

Bonjour jordane,

Merci beaucoup pour ton aide, honnêtement je n'en attendait pas autant, ça fait vraiment plaisir après avoir tourner en rond de tutoriel en tutoriel.

J'ai trouvé ce code sur un site d'apprentissage du français puis j'ai essayé de le remodeler ne sachant comment fonctionne le Js, la commande et les valeurs m'aidant pour avancer. Ce n'est pas vraiment la meilleure méthode je me doute.

Comment est-il possible désormais de distinguer plusieurs exercices à la suite utilisant la même structure ?
Les résultats de l'exercice 1 est confondu avec l'exercice 2 et vise-versa.

Voici le rendu actuel, il ne me manquera plus qu'à ajouter un lecteur audio à chaque ligne de chaque exercice, ce que je devrais pouvoir trouver seul je pense. Également trouver un moyen pour indiquer plus clairement les erreurs en ajoutant une croix rouge sur une ligne fausse par exemple.

Saurais-tu où puis-je trouver ce genre d'information ?

Merci d'avance pour toute aide précieuse,
Cordialement

<center>
<h1>
<br>
</br>
<!DOCTYPE html>
<html>
 <head>
  <title> TEST </title>
  <meta charset="utf-8">
 </head>
<form action="" id="formulaire">
  <body> 
  <h3>
PREMIER EXERCICE
</h3>
<h4>
   Voici une liste de mots et verbes sans tilde, écoutez l'audio puis tentez de déterminer quelle syllabe est accentuer
  </h4>
  <div id="questions">
    <table>
      <tr>
        <td class="num">1.</td>
        <td class="reponse" id="texte_reponse1"> </td>
        <td>  <select name="question[]" id="question1" size="1">
          <option selected=selected value="F">-- ? --</option>
          <option value="F">3ème syllabe 'ra'</option>
          <option value="V">4ème syllabe 'tu'</option>
          <option value="F">5ème syllabe 'ra'</option>
        </select> - temperatura (température)</td>
      </tr>
      <tr>
      <td class="num">2.</td>
      <td class="reponse" id="texte_reponse2"> </td>
      <td><select name="question[]" id="question2"" size="1">
          <option selected=selected value="F">-- ? --</option>
          <option value="F">1ère syllabe 'co'</option>
          <option value="F">2ème syllabe 'ci'</option>
          <option value="V">3ème syllabe 'nar'</option>
        </select> - cocinar (cuisiner) </td>
      </tr>
      <tr>
      <td class="num">3.</td>
      <td class="reponse" id="texte_reponse3"> </td>
      <td>  <select name="question[]" id="question6" size="1">
          <option selected=selected value="F">-- ? --</option>
          <option value="F">2ème syllabe 'en'</option>
          <option value="F">3ème syllabe 've'</option>
          <option value="V">4ème syllabe 'ni'</option>
          <option value="F">5ème syllabe 'do'</option>
        </select> - bienvenido (bienvenue)</td>
      </tr>
      <tr>
      <td class="num">4.</td>
      <td class="reponse" id="texte_reponse4"> </td>
      <td> <select name="question[]" id="question4" size="1">
          <option selected=selected value="F">-- ? --</option>
          <option value="F">1ère syllabe 'di'</option>
          <option value="V">2ème syllabe 'ne'</option>
          <option value="F">3ème syllabe 'ro'</option>
        </select> - dinero (argent)</td>
      </tr>
      <tr>
      <td class="num">5.</td>
      <td class="reponse" id="texte_reponse5"> </td>
      <td> <select name="question[]" id="question6" size="1">
          <option selected=selected value="F">-- ? --</option>
          <option value="F">1ère syllabe 'ma'</option>
          <option value="V">2ème syllabe 'ña'</option>
          <option value="F">3ème syllabe 'na'</option>
        </select> - mañana (demain)</td>
      </tr>
      <tr>
      <td class="num">6.</td>
      <td class="reponse" id="texte_reponse6"> </td>
      <td>   <select name="question[]" id="question6" size="1">
          <option selected=selected value="F">-- ? --</option>
          <option value="F">1ère syllabe 'cer'</option>
          <option value="V">2ème syllabe 've'</option>
          <option value="F">3ème syllabe 'za'</option>
        </select> - cerveza (bière)</td>
     </tr>
      <tr>
      <td class="num">7.</td>
      <td class="reponse" id="texte_reponse7"> </td>
      <td>   <select name="question[]" id="question7" size="1">
          <option selected=selected value="F">-- ? --</option>
          <option value="F">3ère syllabe 'al'</option>
          <option value="V">4ème syllabe 'men'</option>
          <option value="F">5ème syllabe 'te'</option>
        </select> - igualmente (également)</td>
     </tr>
      <tr>
      <td class="num">8.</td>
      <td class="reponse" id="texte_reponse8"> </td>
      <td>   <select name="question[]" id="question8" size="1">
          <option selected=selected value="F">-- ? --</option>
          <option value="F">2ème syllabe 'ba'</option>
          <option value="F">3ème syllabe 'ja'</option>
          <option value="V">4ème syllabe 'dor'</option>
        </select> - trabajador (ouvrier)</td>
     </tr>
      <tr>
      <td class="num">9.</td>
      <td class="reponse" id="texte_reponse9"> </td>
      <td>   <select name="question[]" id="question9" size="1">
          <option selected=selected value="F">-- ? --</option>
          <option value="F">1ère syllabe 'ti'</option>
          <option value="V">2ème syllabe 'en'</option>
          <option value="F">3ème syllabe 'da'</option>
        </select> - tienda (magasin)</td>
     </tr>
      <tr>
      <td class="num">10.</td>
      <td class="reponse" id="texte_reponse10"> </td>
      <td>   <select name="question[]" id="question10" size="1">
          <option selected=selected value="F">-- ? --</option>
          <option value="F">2ème syllabe 'gun'</option>
          <option value="V">3ème syllabe 'tar'</option>
          <option value="F">4ème syllabe 'se'</option>
        </select> - preguntarse (se demander)</td>
     </tr>
    </table>
    <tr>
    </tr>
  </div>
  <div id="boutons">
    <input type="button" onclick="valide_exercice()" value="Valider"/> <INPUT TYPE="reset" NAME="Recommencer" VALUE="Recommencer">
</div>
  <div id="resultats">
     Résultat obtenu : <span id="ScoreFinal" ></span>/<span id="nbquestions"></span>    
  </div>
  
  <script type="text/javascript">
    function valide_exercice(){
      //on recupères toutes les questions
       var dropdown = document.querySelectorAll("select");
       console.log('dropdown',dropdown);
       //on initialise les variables de score
        var scrore = 0;
        var nbQuestions = dropdown.length;
        console.log('nbQuestions',nbQuestions);
       //on boucle dessus pour les vérifier
       for (var i=0; i< nbQuestions ; i++){
          // pour le debugage, on peut afficher les valeurs dans la CONSOLE du navigateur )
          console.log('selectedIndex', dropdown[i].selectedIndex)
          console.log('options', dropdown[i].options)
          console.log('selected', dropdown[i].options[dropdown[i].selectedIndex].value)
          
          //on vérifie les réponses
          var valeur_reponse = dropdown[i].options[dropdown[i].selectedIndex].value;
          if(valeur_reponse == "V"){
            scrore++; // on incrémente le scrore
          }
       
       }  
       
       //on affiche le resultat
       var ScoreFinalHTML = document.getElementById('ScoreFinal');
       var nbquestionsHTML = document.getElementById('nbquestions');
       ScoreFinalHTML.innerHTML = scrore;
       nbquestionsHTML.innerHTML = nbQuestions;

    }
    </script>
<tr>
</tr>
      <h3>
SECOND EXERCICE 
      </h3>
  <h4>
   Cette fois-ci tout les mots et verbes suivants contiennent une tilde, à vous de déterminer où est-elle en écoutant l'enregistrement audio
  </h4>
  <div id="questions">
    <table>
      <tr>
        <td class="num">1.</td>
        <td class="reponse" id="texte_reponse1"> </td>
        <td>  <select name="question[]" id="question1" size="1">
          <option selected=selected value="F">-- ? --</option>
          <option value="F">polícia</option>
          <option value="V">policía</option>
          <option value="F">policiá</option>
        </select> - (police)</td>
      </tr>
      <tr>
      <td class="num">2.</td>
      <td class="reponse" id="texte_reponse2"> </td>
      <td><select name="question[]" id="question2"" size="1">
          <option selected=selected value="F">-- ? --</option>
          <option value="V">éxito</option>
          <option value="F">exíto</option>
          <option value="F">exitó</option>
        </select> - (succès) </td>
      </tr>
      <tr>
      <td class="num">3.</td>
      <td class="reponse" id="texte_reponse3"> </td>
      <td>  <select name="question[]" id="question6" size="1">
          <option selected=selected value="F">-- ? --</option>
          <option value="F">infórmacion</option>
          <option value="F">informácion</option>
          <option value="F">informacíon</option>
          <option value="V">información</option>
        </select> - (information)</td>
      </tr>
      <tr>
      <td class="num">4.</td>
      <td class="reponse" id="texte_reponse4"> </td>
      <td> <select name="question[]" id="question4" size="1">
          <option selected=selected value="F">-- ? --</option>
          <option value="F">préparate</option>
          <option value="V">prepárate</option>
          <option value="F">preparáte</option>
        </select> - (prépare-toi)</td>
      </tr>
      <tr>
      <td class="num">5.</td>
      <td class="reponse" id="texte_reponse5"> </td>
      <td> <select name="question[]" id="question6" size="1">
          <option selected=selected value="F">-- ? --</option>
          <option value="F">córazon</option>
          <option value="F">corázon</option>
          <option value="V">corazón</option>
        </select> - (coeur)</td>
      </tr>
      <tr>
      <td class="num">6.</td>
      <td class="reponse" id="texte_reponse6"> </td>
      <td>   <select name="question[]" id="question6" size="1">
          <option selected=selected value="F">-- ? --</option>
          <option value="F">póliticos</option>
          <option value="V">políticos</option>
          <option value="F">politícos</option>
        </select> - (politiques)</td>
     </tr>
      <tr>
      <td class="num">7.</td>
      <td class="reponse" id="texte_reponse7"> </td>
      <td>   <select name="question[]" id="question7" size="1">
          <option selected=selected value="F">-- ? --</option>
          <option value="F">ésta</option>
    <option value="V">está</option>
        </select> - ((il) est)</td>
     </tr>
      <tr>
      <td class="num">8.</td>
      <td class="reponse" id="texte_reponse8"> </td>
      <td>   <select name="question[]" id="question8" size="1">
          <option selected=selected value="F">-- ? --</option>
          <option value="F">támbien</option>
          <option value="F">tambíen</option>
          <option value="V">también</option>
        </select> - (aussi)</td>
     </tr>
      <tr>
      <td class="num">9.</td>
      <td class="reponse" id="texte_reponse9"> </td>
      <td>   <select name="question[]" id="question9" size="1">
          <option selected=selected value="F">-- ? --</option>
          <option value="F">gústaria</option>
          <option value="F">gustária</option>
          <option value="V">gustaría</option>
          <option value="F">gustariá</option>
        </select> - (j'aimerais)</td>
     </tr>
      <tr>
      <td class="num">10.</td>
      <td class="reponse" id="texte_reponse10"> </td>
      <td>   <select name="question[]" id="question10" size="1">
          <option selected=selected value="F">-- ? --</option>
          <option value="F">víviré</option>
          <option value="F">vivíré</option>
          <option value="V">viviré</option>
        </select> - (je vivrais)</td> 
     </tr>
     
    </table>
    <tr>
    </tr>
  </div>
  <div id="boutons">
    <input type="button" onclick="valide_exercice()" value="Valider"/> <INPUT TYPE="reset" NAME="Recommencer" VALUE="Recommencer">
</div>
  <div id="resultats">
     Résultat obtenu : <span id="ScoreFinal" ></span>/<span id="nbquestions"></span>    
  </div>
  
  <script type="text/javascript">
    function valide_exercice(){
      //on recupères toutes les questions
       var dropdown = document.querySelectorAll("select");
       console.log('dropdown',dropdown);
       //on initialise les variables de score
        var scrore = 0;
        var nbQuestions = dropdown.length;
        console.log('nbQuestions',nbQuestions);
       //on boucle dessus pour les vérifier
       for (var i=0; i< nbQuestions ; i++){
          // pour le debugage, on peut afficher les valeurs dans la CONSOLE du navigateur )
          console.log('selectedIndex', dropdown[i].selectedIndex)
          console.log('options', dropdown[i].options)
          console.log('selected', dropdown[i].options[dropdown[i].selectedIndex].value)
          
          //on vérifie les réponses
          var valeur_reponse = dropdown[i].options[dropdown[i].selectedIndex].value;
          if(valeur_reponse == "V"){
            scrore++; // on incrémente le scrore
          }
       
       }  
       
       //on affiche le resultat
       var ScoreFinalHTML = document.getElementById('ScoreFinal');
       var nbquestionsHTML = document.getElementById('nbquestions');
       ScoreFinalHTML.innerHTML = scrore;
       nbquestionsHTML.innerHTML = nbQuestions;

    }
    </script>
  </body>
</html>
</form>
</center>

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
23 sept. 2018 à 17:07

Visiblement il n'y a pas que le JS que tu ne connais pas.... le html non plus....
Il serait bien de commencer par te former aux rudiments du HTML avant de vouloir aller plus loin.
Par exemple... comment peux tu avoir des choses écrites AVANT la balise <!DOCTYPE ???

<center>
<h1>
<br>
</br>
<!DOCTYPE html>
<html>

Idemn pour la fin... comment se fait-il qu'il y ait des choses écrités APRES un </html> ??

Pour en revenir à ton besoin.. il faut légèrement modifier le code pour pouvoir gérer plusieurs exos
Voici :

<!DOCTYPE html>
<html>
 <head>
  <title> Exos </title>
  <meta charset="utf-8">
 </head>
 <body> 
    <h3>
      PREMIER EXERCICE
    </h3>
    <h4>
       Voici une liste de mots et verbes sans tilde, écoutez l'audio puis tentez de déterminer quelle syllabe est accentuer
    </h4>
    <div id="questions">
      <table>
        <tr>
          <td class="num">1.</td>
          <td class="reponse" id="texte_reponse1"> </td>
          <td>  
            <select  class="exo1" name="exo1_question[]" id="question1" size="1">
              <option selected=selected value="F">-- ? --</option>
              <option value="F">3ème syllabe 'ra'</option>
              <option value="V">4ème syllabe 'tu'</option>
              <option value="F">5ème syllabe 'ra'</option>
            </select> - temperatura (température)
          </td>
        </tr>
        <tr>
          <td class="num">2.</td>
          <td class="reponse" id="texte_reponse2"> </td>
          <td>
            <select class="exo1" name="exo1_question[]" id="question2"" size="1">
              <option selected=selected value="F">-- ? --</option>
              <option value="F">1ère syllabe 'co'</option>
              <option value="F">2ème syllabe 'ci'</option>
              <option value="V">3ème syllabe 'nar'</option>
            </select> - cocinar (cuisiner) 
          </td>
        </tr>
        <tr>
          <td class="num">3.</td>
          <td class="reponse" id="texte_reponse3"> </td>
          <td>  <select class="exo1" name="exo1_question[]" id="question6" size="1">
              <option selected=selected value="F">-- ? --</option>
              <option value="F">2ème syllabe 'en'</option>
              <option value="F">3ème syllabe 've'</option>
              <option value="V">4ème syllabe 'ni'</option>
              <option value="F">5ème syllabe 'do'</option>
            </select> - bienvenido (bienvenue)
          </td>
        </tr>
        <tr>
          <td class="num">4.</td>
          <td class="reponse" id="texte_reponse4"> </td>
          <td> 
            <select class="exo1" name="exo1_question[]" id="question4" size="1">
              <option selected=selected value="F">-- ? --</option>
              <option value="F">1ère syllabe 'di'</option>
              <option value="V">2ème syllabe 'ne'</option>
              <option value="F">3ème syllabe 'ro'</option>
            </select> - dinero (argent)
          </td>
        </tr>
        <tr>
          <td class="num">5.</td>
          <td class="reponse" id="texte_reponse5"> </td>
          <td> 
            <select class="exo1" name="exo1_question[]" id="question6" size="1">
              <option selected=selected value="F">-- ? --</option>
              <option value="F">1ère syllabe 'ma'</option>
              <option value="V">2ème syllabe 'ña'</option>
              <option value="F">3ème syllabe 'na'</option>
            </select> - mañana (demain)
          </td>
        </tr>
        <tr>
          <td class="num">6.</td>
          <td class="reponse" id="texte_reponse6"> </td>
          <td>   
            <select class="exo1" name="exo1_question[]" id="question6" size="1">
              <option selected=selected value="F">-- ? --</option>
              <option value="F">1ère syllabe 'cer'</option>
              <option value="V">2ème syllabe 've'</option>
              <option value="F">3ème syllabe 'za'</option>
            </select> - cerveza (bière)
          </td>
       </tr>
        <tr>
          <td class="num">7.</td>
          <td class="reponse" id="texte_reponse7"> </td>
          <td>   
            <select class="exo1" name="exo1_question[]" id="question7" size="1">
              <option selected=selected value="F">-- ? --</option>
              <option value="F">3ère syllabe 'al'</option>
              <option value="V">4ème syllabe 'men'</option>
              <option value="F">5ème syllabe 'te'</option>
            </select> - igualmente (également)
          </td>
       </tr>
        <tr>
          <td class="num">8.</td>
          <td class="reponse" id="texte_reponse8"> </td>
          <td>   .
            <select class="exo1" name="exo1_question[]" id="question8" size="1">
              <option selected=selected value="F">-- ? --</option>
              <option value="F">2ème syllabe 'ba'</option>
              <option value="F">3ème syllabe 'ja'</option>
              <option value="V">4ème syllabe 'dor'</option>
            </select> - trabajador (ouvrier)
          </td>
       </tr>
        <tr>
          <td class="num">9.</td>
          <td class="reponse" id="texte_reponse9"> </td>
          <td>   
            <select  class="exo1" name="exo1_question[]" id="question9" size="1">
              <option selected=selected value="F">-- ? --</option>
              <option value="F">1ère syllabe 'ti'</option>
              <option value="V">2ème syllabe 'en'</option>
              <option value="F">3ème syllabe 'da'</option>
            </select> - tienda (magasin)
          </td>
       </tr>
        <tr>
          <td class="num">10.</td>
          <td class="reponse" id="texte_reponse10"> </td>
          <td>   
            <select class="exo1" name="exo1_question[]" id="question10" size="1">
              <option selected=selected value="F">-- ? --</option>
              <option value="F">2ème syllabe 'gun'</option>
              <option value="V">3ème syllabe 'tar'</option>
              <option value="F">4ème syllabe 'se'</option>
            </select> - preguntarse (se demander)
          </td>
       </tr>
      </table>
    </div>
    <div id="boutons">
      <input type="button" onclick="valide_exercice('exo1')" value="Valider"/> <INPUT TYPE="reset" NAME="Recommencer" VALUE="Recommencer">
    </div>
    <div id="resultats_exo1">
       Résultat obtenu : <span id="ScoreFinal_exo1" ></span>/<span id="nbquestions_exo1"></span>    
    </div>
    
  <br>
  <br>
    
    <h3>
      SECOND EXERCICE 
    </h3>
    <h4>
      Cette fois-ci tout les mots et verbes suivants contiennent une tilde, à vous de déterminer où est-elle en écoutant l'enregistrement audio
    </h4>
    <div id="questions">
      <table>
        <tr>
          <td class="num">1.</td>
          <td class="reponse" id="texte_reponse1"> </td>
          <td>  
            <select class="exo2"name="exo2_question[]" id="question1" size="1">
              <option selected=selected value="F">-- ? --</option>
              <option value="F">polícia</option>
              <option value="V">policía</option>
              <option value="F">policiá</option>
           </select> - (police)
          </td>
        </tr>
        <tr>
          <td class="num">2.</td>
          <td class="reponse" id="texte_reponse2"> </td>
          <td>
            <select class="exo2" name="exo2_question[]" id="question2"" size="1">
              <option selected=selected value="F">-- ? --</option>
              <option value="V">éxito</option>
              <option value="F">exíto</option>
              <option value="F">exitó</option>
            </select> - (succès) 
          </td>
        </tr>
        <tr>
        <td class="num">3.</td>
        <td class="reponse" id="texte_reponse3"> </td>
        <td>  <select class="exo2" name="exo2_question[]" id="question6" size="1">
            <option selected=selected value="F">-- ? --</option>
            <option value="F">infórmacion</option>
            <option value="F">informácion</option>
            <option value="F">informacíon</option>
            <option value="V">información</option>
          </select> - (information)</td>
        </tr>
        <tr>
        <td class="num">4.</td>
        <td class="reponse" id="texte_reponse4"> </td>
        <td> <select class="exo2" name="exo2_question[]" id="question4" size="1">
            <option selected=selected value="F">-- ? --</option>
            <option value="F">préparate</option>
            <option value="V">prepárate</option>
            <option value="F">preparáte</option>
          </select> - (prépare-toi)</td>
        </tr>
        <tr>
        <td class="num">5.</td>
        <td class="reponse" id="texte_reponse5"> </td>
        <td> <select class="exo2" name="exo2_question[]" id="question6" size="1">
            <option selected=selected value="F">-- ? --</option>
            <option value="F">córazon</option>
            <option value="F">corázon</option>
            <option value="V">corazón</option>
          </select> - (coeur)</td>
        </tr>
        <tr>
        <td class="num">6.</td>
        <td class="reponse" id="texte_reponse6"> </td>
        <td>   <select class="exo2" name="exo2_question[]" id="question6" size="1">
            <option selected=selected value="F">-- ? --</option>
            <option value="F">póliticos</option>
            <option value="V">políticos</option>
            <option value="F">politícos</option>
          </select> - (politiques)</td>
       </tr>
        <tr>
        <td class="num">7.</td>
        <td class="reponse" id="texte_reponse7"> </td>
        <td>   <select class="exo2" name="exo2_question[]" id="question7" size="1">
            <option selected=selected value="F">-- ? --</option>
            <option value="F">ésta</option>
      <option value="V">está</option>
          </select> - ((il) est)</td>
       </tr>
        <tr>
        <td class="num">8.</td>
        <td class="reponse" id="texte_reponse8"> </td>
        <td>   <select class="exo2" name="exo2_question[]" id="question8" size="1">
            <option selected=selected value="F">-- ? --</option>
            <option value="F">támbien</option>
            <option value="F">tambíen</option>
            <option value="V">también</option>
          </select> - (aussi)</td>
       </tr>
        <tr>
        <td class="num">9.</td>
        <td class="reponse" id="texte_reponse9"> </td>
        <td>   <select class="exo2" name="exo2_question[]" id="question9" size="1">
            <option selected=selected value="F">-- ? --</option>
            <option value="F">gústaria</option>
            <option value="F">gustária</option>
            <option value="V">gustaría</option>
            <option value="F">gustariá</option>
          </select> - (j'aimerais)</td>
       </tr>
        <tr>
        <td class="num">10.</td>
        <td class="reponse" id="texte_reponse10"> </td>
        <td>   <select class="exo2" name="exo2_question[]" id="question10" size="1">
            <option selected=selected value="F">-- ? --</option>
            <option value="F">víviré</option>
            <option value="F">vivíré</option>
            <option value="V">viviré</option>
          </select> - (je vivrais)</td> 
       </tr>
       
      </table>
    </div>
    <div id="boutons">
      <input type="button" onclick="valide_exercice('exo2')" value="Valider"/> <INPUT TYPE="reset" NAME="Recommencer" VALUE="Recommencer">
    </div>
    <div id="resultats_exo2">
       Résultat obtenu : <span id="ScoreFinal_exo2" ></span>/<span id="nbquestions_exo2"></span>    
    </div>
  
  <script type="text/javascript">
    function valide_exercice(exo){
      //on recupères toutes les questions
       var dropdown = document.querySelectorAll("select."+exo);
       //console.log('dropdown',dropdown);
       //on initialise les variables de score
        var scrore = 0;
        var nbQuestions = dropdown.length;
        console.log('nbQuestions',nbQuestions);
       //on boucle dessus pour les vérifier
       for (var i=0; i< nbQuestions ; i++){         
          //on vérifie les réponses
          var valeur_reponse = dropdown[i].options[dropdown[i].selectedIndex].value;
          console.log('valeur_reponse',valeur_reponse);
          if(valeur_reponse == "V"){
            scrore++; // on incrémente le scrore
          }
       
       }  
       
       //on affiche le resultat
       var ScoreFinalHTML = document.getElementById('ScoreFinal_'+exo);
       var nbquestionsHTML = document.getElementById('nbquestions_'+exo);
       ScoreFinalHTML.innerHTML = scrore;
       nbquestionsHTML.innerHTML = nbQuestions;

    }
    </script>
  
  
  </body>
</html>

Discussions similaires

Où est la touche SHIFT sur mon clavier d'ordi ?

Bouton ON OFF, O ou I ?

Quel est la touche shift sur le clavier

Javascript Arrondi à 2 chiffres après la virgule

ou est la touche shift sur un clavier

Discussions similaires

Newsletters