Soy nuevo en el desarrollo web y estoy tratando de hacer un entrenador de fórmulas simple donde necesitas escribir una respuesta exacta y si es correcta letra por letra, obtienes otra pregunta; de lo contrario, vuelve a intentarlo. Ahora, el problema es que cuando escribe la respuesta en el formulario de mi página principal al que está vinculado el código, cuando envía, la página se actualiza. ¿Cómo puedo arreglar esto? Me gustaría que la página no se actualizara cada vez, porque entonces es imposible ver las otras preguntas o verificar si está en lo correcto o incorrecto. Alternativamente, leí algo sobre las bases de datos como la solución aquí, pero no sé nada al respecto, por lo que una solución más simple sería genial.

    function answerCheck(question, correctAnswer) {
        $(".question").replaceWith("<p class='question'>" + question + "</p>")
        $(".form1").submit(function() {
            answer = document.forms["answerInsertion"]["answer"].value;
            if(answer == correctAnswer) {
                $(".rightWrong").replaceWith("<p class='juistFout'><br> Correct! The right answer was: " + correctAnswer + "</p>")
                return
            } else
                $(".rightWrong").replaceWith("<p class='rightWrong'><br> Wrong! Try again and check your answer for mistakes: " + answer + "</p>")
                answerCheck(question, correctAnswer)
        })
    }
    
    answerCheck("Give the definition of a real function", "A real function is a relation from ℝ to ℝ where every real number has a maximum of one image.")
    
    answerCheck("Give the pair notation of the function f : y = 3x + 6", "f = \{(x,y) ∈ ℝ^2 | y = 3x + 6\}")
1
Lars Salembier 7 ago. 2020 a las 14:27

2 respuestas

La mejor respuesta

El problema está en el comportamiento predeterminado del evento de formulario submit. Asegúrese de que siempre está devolviendo false de su controlador de envío y también asegúrese de evitar el comportamiento de evento predeterminado.

Una posibilidad:

<form onsubmit="event.preventDefault(); some_callback_calling_answerCheck();">

Además, no te llames answerCheck recursivamente (dentro del else), simplemente entrará en un ciclo infinito. Y no registre un nuevo controlador submit en cada llamada.

Lo que desea es activar answerCheck solo cuando 1) los usuarios presionan enviar (botón, tecla Intro, ...) o 2) algo cambió en el campo de entrada. En su interior, solo verifique la respuesta y actualice la pregunta.


Actualización: aquí tienes una forma de hacerlo (estructura básica y no probada, tendrás que entenderla y mejorarla).

// wait for document ready event (jQuery)
$(function(){   
    // questions and answers, in order
    const qanda = [
        {"q": "Give the definition of a real function",  "a": "A real function is a relation from ℝ to ℝ where every real number has a maximum of one image."},
        {"q": "...", "a": "..."}
    ];
    let currentIndex = 0; // current question displayed, index in the list

    // html elements: get them once and store them in variables 
    // for performance reasons
    const $question = $('p.question'); // where you display your question
    const $input = $('form input'); // your input for the answer
    const $rightwrong = $('.rightWrong'); // feedback

    // register on submit event
    $('.form1').submit(function(e){
        e.preventDefault(); // do not reload the page !
        let answer = $input.val(); // get the user's answer
        if(answer == qanda[currentIndex].a){
            // wright answer, move on:
            $rightWrong.text("good job");
            currentIndex += 1; // here, you would need to ensure you are not past the last question
            $question.text(qanda[currentIndex].q); // display next
        }else{
            // wrong answer
            $rightWrong.text("Wrong! Try again and check your answer for mistakes " + answer);
        }
        return false; // do not reload the page !
    });

   // finally, setup the first question
   $question.text(qanda[currentIndex].q);
});

En su HTML, debe tener al menos:

  • un formulario form1 con una entrada para la respuesta y un botón de envío (para activar el evento de envío)
  • el <p class="question"></p> para mostrar la pregunta
  • un <p class="rightWrong"></p> para los comentarios
3
Derlin 7 ago. 2020 a las 11:47

Puede usar event.preventDefault() en el evento onSubmit para evitar el envío de formularios, algo similar a esto:

    function answerCheck(question, correctAnswer) {
        $(".question").replaceWith("<p class='question'>" + question + "</p>")
        $(".form1").submit(function(event) {

            // Prevent form submission on page refreshes.
            event.preventDefault();
    
            answer = document.forms["answerInsertion"]["answer"].value;
            if(answer == correctAnswer) {
                $(".rightWrong").replaceWith("<p class='juistFout'><br> Correct! The right answer was: " + correctAnswer + "</p>")
                return
            } else
                $(".rightWrong").replaceWith("<p class='rightWrong'><br> Wrong! Try again and check your answer for mistakes: " + answer + "</p>")
                answerCheck(question, correctAnswer)
        })
    }
    
    answerCheck("Give the definition of a real function", "A real function is a relation from ℝ to ℝ where every real number has a maximum of one image.")
    
    answerCheck("Give the pair notation of the function f : y = 3x + 6", "f = \{(x,y) ∈ ℝ^2 | y = 3x + 6\}")
0
Tabaene Haque 7 ago. 2020 a las 12:04