18041 sujets

Questions générales et questions de débutants

Fonction javascript sur un bouton

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

upload/1537618338-72526-modele-exo-pic.png 

 <form name="Formulaire" action="noaction">
            <td class="num">1.</td>
            <td class="reponse" id="texte_reponse1">&nbsp;</td>
            <td> &nbsp; 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">&nbsp;</td>
            <td> &nbsp; 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">&nbsp;</td>
            <td> &nbsp; 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&eacute;&acirc;tre ensemble.</td>
        <br />
            <td class="num">4.</td>
            <td class="reponse" id="texte_reponse4">&nbsp;</td>
            <td> &nbsp; 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">&nbsp;</td>
            <td> &nbsp; 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 &agrave; Martine.</td>
        <br />
            <td class="num">6.</td>
            <td class="reponse" id="texte_reponse6">&nbsp;</td>
            <td> &nbsp; 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"/>  &nbsp;Resultat :<input type="text" readonly name="ScoreFinal" id="ScoreFinal" value="" size="1" />  / 6 &nbsp; &nbsp;  <input type="reset" value="Recommencer" />
      </form>

Modifié par Ceays (22 Sep 2018 - 14:36)
Modérateur
Et l'eau,

Ce genre de choses ne se fait pas vraiment en JS mais avec un langage serveur tel que Python, PHP, Ruby, Java, etc.

Oublie la mise en forme tableau pour ce que tu veux faire ! Sémantiquement, c'est faux ! Je t'invite à étudier le html et le CSS avant de vouloir passer à la vitesse supérieur.

Ci-dessous, tu trouveras ma réponse en PHP. Si tu tiens vraiment faire cet exercice en js, tu n'as qu'à reprendre ma logique et la transposer en JS. Je te le déconseille. Ce que j'ai écrit peut être amélioré. On peut factoriser le code aisément (en créant un mini système de template et injecter). Cela dit, j'ai préféré coder ainsi pour que la lecture soit plus simple à comprendre. Le but est de comprendre là où je veux en venir et non faire un exercice de style en évitant les redondances. D'ailleurs, à quelques endroit, j'ai évité d'écrire en php 7.x.

À noter que si le user ne remplit pas le formulaire, le résultat des réponses sera toujours 0.


<?php
    $success = 0;
    $data = [
        [
            "fais"      => false,
            "fait"      => false,
            "faisons"   => true,
            "faites"    => false,
            "font"      => false,
        ],
        [
            "fais"      => true,
            "fait"      => false,
            "faisons"   => false,
            "faites"    => false,
            "font"      => false,
        ],
        [
            "fais"      => false,
            "fait"      => false,
            "faisons"   => false,
            "faites"    => false,
            "font"      => true,
        ],
        [
            "fais"      => false,
            "fait"      => false,
            "faisons"   => false,
            "faites"    => true,
            "font"      => false,
        ],
        [
            "fais"      => true,
            "fait"      => false,
            "faisons"   => false,
            "faites"    => false,
            "font"      => false,
        ],
        [
            "fais"      => false,
            "fait"      => true,
            "faisons"   => false,
            "faites"    => false,
            "font"      => false,
        ],
    ];

    if(!empty($_POST)){
        $errorDefaultMsg = "Ce champ doit être saisi";
        foreach($_POST as $k => $v){
            if(strpos($k, 'q') == 0){
                if(trim($v) === ""){
                    $_POST['error'][$k] = $errorDefaultMsg;
                }else{
                    $index = intval(substr($k, 1)) - 1;
                    if($data[$index][$v] === true){
                        $success++;
                    }
                }
            }
        }

        if(isset($_POST['error'])){
            $success = 0;
        }
    }
?>
<!doctype html>
<html class="no-js" lang="fr">
  <head>
    <meta charset="UTF-8">
    <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Titre du document</title>
    <style>
        body{
            font-family: Arial, Helvetica, sans-serif;
        }
        li{
            margin-bottom: 18px;
        }
        label{
            display: block;
        }
        .error{
            color: #f00;
        }
    </style>
  </head>
  <body>
    <form id="formConjugaisonFaire" name="formConjugaisonFaire" action="<?= $_SERVER['PHP_SELF']?>" method="post">
        <ol>
            <li class="input select">
                <label>
                    Nous
                    <select name="q1" id="q1">
                        <option value="">-- ? --</option>
                        <?php foreach($data[0] as $k => $v):?>
                            <option <?= isset($_POST['q1']) && $_POST['q1'] === $k? 'selected' : ''?> value="<?= $k ?>"><?= $k ?></option>
                        <?php endforeach ?>
                    </select>
                     du sport.
                </label>
                <?= isset($_POST['error']['q1'])? '<span class="error">'. $_POST['error']['q1'] .'</span>' : ''?>
            </li>
            <li class="input select">
                <label>
                    Tu
                    <select name="q2" id="q2">
                        <option value="">-- ? --</option>
                        <?php foreach($data[0] as $k => $v):?>
                            <option <?=  isset($_POST['q2']) && $_POST['q2'] === $k? 'selected' : ''?> value="<?= $k ?>"><?= $k ?></option>
                        <?php endforeach ?>
                    </select>
                     quoi, ce soir ?
                </label>
                <?= isset($_POST['error']['q2'])? '<span class="error">'. $_POST['error']['q2'] .'</span>' : ''?>
            </li>
            <li class="input select">
                <label>
                    Pierre et Paul
                    <select name="q3" id="q3">
                        <option value="">-- ? --</option>
                        <?php foreach($data[0] as $k => $v):?>
                            <option <?=  isset($_POST['q3']) && $_POST['q3'] === $k? 'selected' : ''?> value="<?= $k ?>"><?= $k ?></option>
                        <?php endforeach ?>
                    </select>
                     du théâtre ensemble.
                </label>
                <?= isset($_POST['error']['q3'])? '<span class="error">'. $_POST['error']['q3'] .'</span>' : ''?>
            </li>
            <li class="input select">
                <label>
                    Vous
                    <select name="q4" id="q4">
                        <option value="">-- ? --</option>
                        <?php foreach($data[0] as $k => $v):?>
                            <option <?=  isset($_POST['q4']) && $_POST['q4'] === $k? 'selected' : ''?> value="<?= $k ?>"><?= $k ?></option>
                        <?php endforeach ?>
                    </select>
                     quelque chose de bien.
                </label>
                <?= isset($_POST['error']['q4'])? '<span class="error">'. $_POST['error']['q4'] .'</span>' : ''?>
            </li>
            <li class="input select">
                <label>
                    Je
                    <select name="q5" id="q5">
                        <option value="">-- ? --</option>
                        <?php foreach($data[0] as $k => $v):?>
                            <option <?=  isset($_POST['q5']) && $_POST['q5'] === $k? 'selected' : ''?> value="<?= $k ?>"><?= $k ?></option>
                        <?php endforeach ?>
                    </select>
                     confiance à Martine.
                </label>
                <?= isset($_POST['error']['q5'])? '<span class="error">'. $_POST['error']['q5'] .'</span>' : ''?>
            </li>
            <li class="input select">
                <label>
                    Il
                    <select name="q6" id="q6">
                        <option value="">-- ? --</option>
                        <?php foreach($data[0] as $k => $v):?>
                            <option <?=  isset($_POST['q6']) && $_POST['q6'] === $k? 'selected' : ''?> value="<?= $k ?>"><?= $k ?></option>
                        <?php endforeach ?>
                    </select>
                     beau aujourd'hui !
                </label>
                <?= isset($_POST['error']['q6'])? '<span class="error">'. $_POST['error']['q6'] .'</span>' : ''?>
            </li>
        </ol>
        <div class="input submit">
            <input type="submit" value="Valider"/>
            Resultat : <span class="success"><?= $success ?></span>  / <span class="length"><?= count($data) ?></span>
            <input type="reset" value="Recommencer" />
        </div>
    </form>
</body>
</html>

Modifié par niuxe (23 Sep 2018 - 15:16)
Modérateur

window.addEventListener('DOMContentLoaded', () =>{
            document.getElementById('formConjugaisonFaire').addEventListener('submit',(e)=>{
                const trueResponses = [2,0,4,3,0,1];
                const $selects = document.querySelectorAll('#formConjugaisonFaire .input select');
                const msgErrorDefault = "Ce champ doit être saisi";
                let success = 0;

                $selects.forEach(($select, i) => { //forEach==> utiliser un polyfill si besoin
                    let $li = $select.closest('li');//closest ==> utiliser un polyfill si besoin
                    if($li.querySelector('span.error') !== null){
                        let $spanError = $li.querySelector('span.error');
                        $spanError.parentNode.removeChild($spanError);
                    }
                    if($select.value === ""){
                        $li.insertAdjacentHTML('beforeend',  `<span class="error">${msgErrorDefault}</span>`);
                    }else{
                        let index = $select.selectedIndex - 1;
                        if(index === trueResponses[i]){
                            success++;
                        }
                    }
                });
                if(document.querySelectorAll('.select span.error').length > 0){
                    success = 0;
                }

                document.querySelector('.submit .success').textContent = success;

                e.preventDefault();
            });
        });

Modifié par niuxe (23 Sep 2018 - 15:29)
Sujet clos
Aller à