Sujet Précédent Sujet Suivant

Programmer un exercice interactif avec bouton radio et récupération de valeurs

Maxime - Modifié le 16 avril 2020 à 14:19
Maxime643 Messages postés 1 Date d'inscription mercredi 15 avril 2020 Statut Membre Dernière intervention 16 avril 2020 - 16 avril 2020 à 22:57
Bonsoir,

Je débute en JS et je souhaiterais construire un site d'exercices interactifs.

Dans le code ci-dessous, je souhaiterais que l'élève qui répond juste (rosae), puisse obtenir un message de bonne réponse.
Cependant, avec mon code, quand je coche la bonne réponse, j'ai toujours un message d'erreur qui s'affiche. Et j'ignore pourquoi... 

<!DOCTYPE html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>Latin : la première déclinaison au pluriel</title>
 <meta name="description" content="La première déclinaison au pluriel en latin. Méthode interactive de latin : testez vos connaissances.">
 
 
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <link href="https://fonts.googleapis.com/css2?family=Baloo+Thambi+2&family=Caveat+Brush&display=swap" rel="stylesheet">
 
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

 <style type="text/css">
   html
    {
    font-size: 100%
    }
   body
    {
    padding: 1em;
    font-size: .85em;
    font-family: 'Baloo Thambi 2', cursive;
    }
   h1,h2
    {
    max-width:600px;
    margin:0 auto 15px;
    text-align:center;
    font-family: 'Caveat Brush', cursive;
    }
   h1
    {
    font-size:28px;
    color: white;
    background: -webkit-linear-gradient(top left, black, green);
    border-radius: 10px;
    }
   h2
    {
    font-size:18px;
    background:#fff;
    }
   ol, ul, li {
    padding: 0;
    margin: 1em;
    }
   img.displayed {
    border-radius: 25px;
    display: block;
    margin-left: auto;
    margin-right: auto;
   }
   input {
    width: 160px;
    background: burlywood;
    border-radius: 5px;
   }
   label{
    width:100px;
    font-weight:bold;
    margin-right:10px;
    text-align:left;
   }
   form{
    margin:0 auto;
    background: -webkit-linear-gradient(top left, #800080,#FFFFFF);
    background: -o-linear-gradient(bottom right, #800080,#FFFFFF);
    background: linear-gradient(to bottom right, #800080,#FFFFFF);
    border-radius: 25px;
    padding:10px 20px;
    width:75%;
    text-align:center;
    min-width:640px;
   }
   ul{
    padding:0
   }
   li{
    list-style-type:none
   }
   .barre{
    width:100%;
    height:2px;
    background: -webkit-linear-gradient(to right, lightblue,burlywood);
    background: -o-linear-gradient(to right, lightblue, burlywood);
    background: linear-gradient(to right, lightblue, burlywood);
    position:absolute;
    left:0;
    top:75px;
    z-index:-1;
   }
   footer{
    text-align:center;
   }
   </style>

  <script type="text/javascript">

  let messageTrèsbon = new Array()
    messageTrèsbon[0] = 'Super !';
    messageTrèsbon[1] = 'Très bien !';
    messageTrèsbon[2] = 'Très beau travail !';
    messageTrèsbon[3] = 'Génial !';
    messageTrèsbon[4] = 'Un parcours sans faute !';
    messageTrèsbon[5] = 'Optime !';
    messageTrèsbon[6] = 'Cool ! Parfait !';
   let messageBon = new Array()
    messageBon[0] = 'Pas loin du compte !';
    messageBon[1] = 'À un près, ça fait rager, hein ?';
    messageBon[2] = 'R-1, dommage !';
    


   function message(erreurs) {
    if (erreurs==0)  {
     alert(messageTrèsbon[Math.floor(Math.random()*messageTrèsbon.length)]);
    }
    if (erreurs==1)  {
     alert(messageBon[Math.floor(Math.random()*messageBon.length)]);
    }
    if (erreurs==2) {
     alert('Essaie encore !');
    }
    if (erreurs==3 || erreurs==4){
     alert('Concentre-toi !');
    }
    if (erreurs==5 || erreurs==6){
     alert('Alerte rouge !');
    }
   }

   function niveauSuivant() {
    if (erreurs==0) {
     self.location = 'déclinaisondominussingulier.html'
    }
    if (erreurs>=1) {
     alert("Réussis déjà ce niveau avant de passer au suivant.")
    }
   }

   let valeur;
   if (document.getElementById("choix1").checked) {
    valeur = document.getElementById("choix1").value;
   }
   if (document.getElementById("choix2").checked) {
    valeur = document.getElementById("choix2").value;
   }
   if (document.getElementById("choix3").checked) {
    valeur =document.getElementById("choix3").value;
   }

   function verif() {
      erreurs=0;
      if (valeur!="rosae") erreurs++;
      message(erreurs);
     }
   

   </script>
 
</head>

<body>

 <header>

 <div class="barre"></div>


  <div class="container">
   <h1><em>Méthode interactive de latin</em></h1>
   <h2>Première déclinaison : rosa, ae, f. : la rose</h2>
  </div>

 </header>
  
  
 <main>

  <img class="displayed" src="rose.jpg" width="" =150 height=225>
  
  <div class="container">

   <FORM NAME="form">
    <hr />

     Le nominatif pluriel
     <input type=radio id=choix1 name=choix value=rosae> rosae
     <input type=radio id=choix2 name=choix value=rosas> rosas
     <input type=radio id=choix3 name=choix value=rosarum> rosarum
    <hr />
    <BR>
    <DIV ALIGN=center>
    <INPUT TYPE=button VALUE="Vérifier" ONCLICK="verif()"></INPUT> 
    </DIV>
     <input type="button" class="bouton" onclick="niveauSuivant();" value="Passer au niveau suivant !">
      <br><br>
     <a href ="Accueil du site.html">Retour à l'accueil</a>
   </FORM>
 </main>

   <footer>
    <div class="container">
    <p>© Maxime Sanous 2020</p>
    </div>
   </footer>

  </body>

 </div>
</html>


Voici le code et un grand merci pour toute aide. Je rame...
A voir également:

1 réponse

Réponse 1 / 1
Maxime643 Messages postés 1 Date d'inscription mercredi 15 avril 2020 Statut Membre Dernière intervention 16 avril 2020
16 avril 2020 à 22:57
Bonsoir,

En fait, j'ai cherché et cherché encore et j'ai cherché encore et j'ai trouvé une solution...

La voici, la voilà...

Elle pourra peut-être un jour servir un autre débutant... 


<!DOCTYPE html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>Latin : la première déclinaison au pluriel</title>
 <meta name="description" content="La première déclinaison au pluriel en latin. Méthode interactive de latin : testez vos connaissances.">
 
 
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <link href="https://fonts.googleapis.com/css2?family=Baloo+Thambi+2&family=Caveat+Brush&display=swap" rel="stylesheet">
 
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

 <style type="text/css">
   html
    {
    font-size: 100%
    }
   body
    {
    padding: 1em;
    font-size: .85em;
    font-family: 'Baloo Thambi 2', cursive;
    }
   h1,h2
    {
    max-width:600px;
    margin:0 auto 15px;
    text-align:center;
    font-family: 'Caveat Brush', cursive;
    }
   h1
    {
    font-size:28px;
    color: white;
    background: -webkit-linear-gradient(top left, black, green);
    border-radius: 10px;
    }
   h2
    {
    font-size:18px;
    background:#fff;
    }
   ol, ul, li {
    padding: 0;
    margin: 1em;
    }
   img.displayed {
    border-radius: 25px;
    display: block;
    margin-left: auto;
    margin-right: auto;
   }
   input {
    width: 160px;
    background: burlywood;
    border-radius: 5px;
   }
   label{
    width:100px;
    font-weight:bold;
    margin-right:10px;
    text-align:left;
   }
   form{
    margin:0 auto;
    background: -webkit-linear-gradient(top left, #800080,#FFFFFF);
    background: -o-linear-gradient(bottom right, #800080,#FFFFFF);
    background: linear-gradient(to bottom right, #800080,#FFFFFF);
    border-radius: 25px;
    padding:10px 20px;
    width:75%;
    text-align:center;
    min-width:640px;
   }
   ul{
    padding:0
   }
   li{
    list-style-type:none
   }
   .barre{
    width:100%;
    height:2px;
    background: -webkit-linear-gradient(to right, lightblue,burlywood);
    background: -o-linear-gradient(to right, lightblue, burlywood);
    background: linear-gradient(to right, lightblue, burlywood);
    position:absolute;
    left:0;
    top:75px;
    z-index:-1;
   }
   footer{
    text-align:center;
   }
   </style>

  <script type="text/javascript">

  let messageTrèsbon = new Array()
    messageTrèsbon[0] = 'Super !';
    messageTrèsbon[1] = 'Très bien !';
    messageTrèsbon[2] = 'Très beau travail !';
    messageTrèsbon[3] = 'Génial !';
    messageTrèsbon[4] = 'Un parcours sans faute !';
    messageTrèsbon[5] = 'Optime !';
    messageTrèsbon[6] = 'Cool ! Parfait !';
   let messageBon = new Array()
    messageBon[0] = 'Pas loin du compte !';
    messageBon[1] = 'À un près, ça fait rager, hein ?';
    messageBon[2] = 'R-1, dommage !';
    


   function message(erreurs) {
    if (erreurs==0)  {
     alert(messageTrèsbon[Math.floor(Math.random()*messageTrèsbon.length)]);
    }
    if (erreurs==1)  {
     alert(messageBon[Math.floor(Math.random()*messageBon.length)]);
    }
    if (erreurs==2) {
     alert('Essaie encore !');
    }
    if (erreurs==3 || erreurs==4){
     alert('Concentre-toi !');
    }
    if (erreurs==5 || erreurs==6){
     alert('Alerte rouge !');
    }
   }

   function niveauSuivant() {
    if (erreurs==0) {
     self.location = 'déclinaisondominussingulier.html'
    }
    if (erreurs>=1) {
     alert("Réussis déjà ce niveau avant de passer au suivant.")
    }
   }

   function verif() {
      erreurs=0;
      if (document.getElementById("choix2").checked || document.getElementById("choix3").checked) erreurs++;
      message(erreurs);
     }
   

   </script>
 
</head>

<body>

 <header>

 <div class="barre"></div>


  <div class="container">
   <h1><em>Méthode interactive de latin</em></h1>
   <h2>Première déclinaison : rosa, ae, f. : la rose</h2>
  </div>

 </header>
  
  
 <main>

  <img class="displayed" src="rose.jpg" width="" =150 height=225>
  
  <div class="container">

   <FORM NAME="form">
    <hr />

     Le nominatif pluriel
     <input type=radio id=choix1 name=choix value=rosae> rosae
     <input type=radio id=choix2 name=choix value=rosas> rosas
     <input type=radio id=choix3 name=choix value=rosarum> rosarum
    <hr />
    <BR>
    <DIV ALIGN=center>
    <INPUT TYPE=button VALUE="Vérifier" ONCLICK="verif()"></INPUT> 
    </DIV>
     <input type="button" class="bouton" onclick="niveauSuivant();" value="Passer au niveau suivant !">
      <br><br>
     <a href ="Accueil du site.html">Retour à l'accueil</a>
   </FORM>
 </main>

   <footer>
    <div class="container">
    <p>© Maxime Sanous 2020</p>
    </div>
   </footer>

  </body>

 </div>
</html>
0

Discussions similaires

relier par une fleche
alias100 -
alias100 -

4 réponses
exercices et corrigés
amerprod89 -
ed73 -

1 réponse
Aide pour un exercice de maison
Apeoue -
Whismeril -

1 réponse
faire un examen en ligne avec QCM
roomi23 -
nhervagault -

1 réponse
Exercice sur Pointeurs, classes, héritage...
snoozriton -
snoozriton -

14 réponses
Rejoignez-nous