Faire une "pause" dans mon script JS

Fredlink
Javascript

Voila mon problème : j'ai créé un formulaire HTML dont je modifie les valeurs avec du JS. Je précise, je suis débutant...

En fait, des questions de calculs sont gérés automatiquement par JS dans le formulaire (table de multiplication par exemple) et se succèdent... L'utilisateur saisit sa réponse dans un input et si c'est juste, +1 point ; et si c'est faux 0 points.
Mon problème est que les questions s'enchaînent et je souhaiterais que lorsque l'utilisateur saisit sa réponse, on lui dise si c'est juste ou faux et si c'est faux, faire apparaître la bonne réponse puis cliquer sur un nouveau bouton pour relancer le script.

En fait, dès que je valide la réponse, cela me génère une nouvelle question...

C'est pour cela que je parle de pause dans mon script JS, qu'en pensez-vous ? Est-ce possible ?
Merci d'avance, Fred

Ce que je veux

Pouvoir dire si la réponse donnée est juste ou fausse. Si elle est faussse, donner le résultat.

Ce que j'obtiens

Les questions s'enchaînent mais quand on a faux, on ne connait pas la bonne réponse.

5 réponses

popotte
Réponse acceptée

Hello :)

Tu peux utiliser setTimeout pour décaler le déclenchement de la question suivvante

function next_question() {
    //
}

setTimetout(next_question, 3000) // 3000 miliseconds => 3 seconds

Après le mieux serait de passer par un évènement, pour l'expérience ça passe mieux:

  • La personne réponds
  • Tu génère la bonne réponse ou le message disant qu'il a gagné
  • Tu ajoute dans l'élément un bouton "Continuer"
  • Tu affiche la question suivante dans un event click quand la personne cliques sur "Continuer"
Fredlink
Auteur
Réponse acceptée

Bonjour popotte, merci pour ta réponse. J'ai essayé cela mais le problème c'est que lorsque je lance le jeu "questions-reponses" ; une question est générée, l'utilisateur répond, valide et "hop", "tout" revient à zéro. Je joins mes fichiers sources.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiplication Quiz WebApp</title>
</head>

<body>
    <div class="text-center">
        <button onclick="disable(this) ; calcul() ; attribuerFocus()" class="form-control btn btn-primary mb-1" id="demarrer" type="button">Démarrer</button>
    </div>
        <!-- Formulaire -->
        <div class="container">
            <form id="form">
                <div class="row">
                    <div class="col-4 pt-3 text-start" >
                        <h3 id="nombre_questions">Nombre de questions : 0</h6>
                        <!--<h6 id="nbrequestions">Nombre de questions : 0</h6>-->
                    </div>
                    <div class="col-4 pt-3 text-center">
                        <h3 id="resultats_justes">Réponse(s) Juste(s) : 0</h6>
                    </div>
                    <div class="col-4 pt-3 text-end">
                        <h3  id="resultats_faux">Réponse(s) Fausse(s) : 0</h6>
                    </div>
                </div>
                <div class="col-12 p-2"></div>
                <div class="container border border-dark rounded bg-transparent p-5">
                    <div id="calcul" class="row custom-line">
                        <div class="col-2 text-center" >
                            <h1 id="nombre_a" class="fw-bold display-3">nombre1</h1>
                        </div>
                        <div class="col-2 text-center">
                            <h1 class="fw-bold display-3" id="signe">x</h1>
                        </div>
                        <div class="col-2 text-center" >
                            <h1 id="nombre_b" class="fw-bold display-3">nombre2</h1>
                        </div>
                        <div class="col-2 text-center">
                            <h1 class="fw-bold display-3" id="egal">=</h1>
                        </div>
                        <div id="reponse" class="col-2 text-center align-self-center" >
                            <input class="form-control-lg w-100 h-100" type="number" id="inp" placeholder="réponse" autofocus autocomplete="on">
                        </div>
                        <div class="col-2 align-self-center" >
                            <button onclick="afficherScore()" class="form-control btn btn-primary" id="btn" type="submit">Valider</button>      
                        </div>
                    </div>
                </div>
                <p>Temps : <span id="timer"></span> s</p>
            </form>
        </div>
    </div>
    <div>
        <input hidden type="submit" value="Continuer" class="btn btn-outline-primary" id="continuer" name="continuer">
    </div>

<script src="multiplication.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>

et 

function disable(x)
{
    x.disabled = true ;
}

function on_load(){
    let y = document.getElementById("inp");
    y.type= "text";
}

function attribuerFocus()
{
document.getElementById("inp").focus();
}

function calcul() {

    //On va chercher dans le doc html les variables à parti de l'Id
    const questionElementa = document.getElementById("nombre_a");
    const questionElementb = document.getElementById("nombre_b");
    const questionSigne = document.getElementById("signe");
    const questionEgal = document.getElementById("egal");

    let num1 = Math.floor(Math.random() * 10);
    let num2 = Math.floor(Math.random() * 10);
    let signe = "x";
    let egal = "=";

    let correctAnswer = num1 * num2;

    //On pose la question, le calcul à faire
    questionElementa.innerText = `${num1}`;
    questionElementb.innerText = `${num2}`;
    questionSigne.innerText = `${signe}`;
    questionEgal.innerText = `${egal}`;

    //Declaration de variables à partir de l'Id
    const form = document.getElementById('form');
    const input = document.getElementById('inp');

    let nombreElement = document.getElementById('nombre_questions');
    let justeElement = document.getElementById('resultats_justes');
    let fauxElement = document.getElementById('resultats_faux');

    let modalnombreElement = document.getElementById('modale_nombre_questions');
    let modalejusteElement = document.getElementById('modale_resultats_justes');
    let modalefauxElement = document.getElementById('modale_resultats_faux');

    let score1 = Number(localStorage.getItem("score"));
    let juste1 = Number(localStorage.getItem("juste"));
    let faux1 = Number(localStorage.getItem("faux"));
    let nbrequestions1 = Number(localStorage.getItem("nbrequestions"));

    if(!score1) {
        score = 0;
    }
            form.addEventListener('submit',function() {
                let userAnswer = +input.value;
                if(correctAnswer === userAnswer) {
                    nbrequestions1++
                    juste1++;
                    score1++;
                    updateScore();
                }
                else {
                    nbrequestions1++
                    faux1++;
                    score1--;
                    updateScore();
                }
            });

    function updateScore() {
        localStorage.setItem("score",String(score1));
        localStorage.setItem("juste",String(juste1));
        localStorage.setItem("faux",String(faux1));
        localStorage.setItem("nbrequestions",String(nbrequestions1));
        NombreQuestions = localStorage.getItem("nbrequestions")
        nombreElement.textContent = `Nombre de question(s) : ${NombreQuestions}`;

    nombreElement.textContent = `Nombre de question(s) : ${nbrequestions1}`;
    justeElement.textContent = `Réponse(s) Juste(s) : ${juste1}`;
    fauxElement.textContent = `Réponse(s) Fausse(s) : ${faux1}`;

}
popotte

Mmmh alors je pense que totn formulaire est soumis avant que js ne puisse faire les changements

Tu peux annuler la soumission du form

form.addEventListener('submit',function(event) {
    event.preventDefault() // <== Ici

                let userAnswer = +input.value;
                if(correctAnswer === userAnswer) {
                    nbrequestions1++
                    juste1++;
                    score1++;
                    updateScore();
                }
                else {
                    nbrequestions1++
                    faux1++;
                    score1--;
                    updateScore();
                }
            });

Et en vrai ça m'a l'air d'etre un questionnaire full front, ce qui serait mieux ce serait de supprimer le formulaire et d'en faire une simple div, ton input:submit tu le remplaces par un boutton classique, et ton eventListener submit tu le remplaces par un evevnt listener click qui observe le bouton, pas besoin de formulaire quand c'est juste du front sans api

Fredlink
Auteur

Merci beaucoup de m'accorder un peu de temps. Je vais essayer la deuxième methode.
"Questionnaire full-front" ... ??? je ne sais pas je débute ;)
Je vais essayer. Merci beaucoup

popotte

De rien ;)

"questionnaire full front" en gros tu n'utilises pas de base de back end (base de données ou api) tu utilises juste un localstorage, en gros ton questionnaire n'a pas besoin de formulaire :p