Questions and answers javascript

Navigation
0

I'm developing a quiz with questions and answers, I've done using input radio and checkbox , now I have to do some with input text .

I found a code on the internet that does what I want but I find it very extensive and I believe it can improve and besides that when I press the button to answer it does not erase the previous message if the answer is right or wrong

I will put the code here and see what it can do to improve or give me some tips on how to do it in a more dynamic way, remembering that I will only use HTML, JavaScript and CSS. 

    // Começamos com uma 'Self-Executing Anonymous Functions', esse parttern nos ajuda a não poluir o global namespace;
        ;(function(){
     
    // doc é um 'cache' para o objeto global documento, assim nao precisamos subir toda hora para acessar esse objeto, ja que agora temos ele local;
        var doc = document,
     
    // Um array que contem todos os inputs com a class .resposta. (.querySelectorAll nao está disponivel em todos os navegadores, entao caso vc precise vc pode usar outra maneira para conseguir os inputs, ex.: .getElementsByClassName())
        respostaUsuario = doc.querySelectorAll('input.resposta'),
     
    // A lista de respostas corretas;
        respostaCorreta = ['a', 'b', 'c'],
     
    // Um pequeno dicionário para feedback;
        resposta = {
        'certa': 'Sua resposta esta certa',
        'errada': 'Resposta correta: '
        },
     
    // O botao que será clicado para verificar suas respostas;
        btn = doc.getElementById('button');
     
    // Funcao chamada para verificar as resposas;
        function Corrigir() {
     
    // Variaveis locais, incluindo um caching para a quantidade de inputs na pagina
        var i,
        len = respostaUsuario.length;
     
        for( i = 0; i < len; i++ ) {
     
    // Ao inves de usar document.write segue uma maneira melhor de mostrar seus resultados;
        var d = doc.createElement('div'),
        text;
     
    // Se a resposta do usuário estiver correta;
       if (respostaUsuario[i].value == respostaCorreta[i]) {
     
    // Criamos um texto para mostrar para ele;
        text = doc.createTextNode(resposta.certa);
        d.appendChild(text);
     
    // Colocamos esse texto logo apos o input;
        respostaUsuario[i].parentNode.insertBefore(d, respostaUsuario[i].nextSibling);
     
        } else {
     
    // Caso ele erre, criamos um texto de erro e adicionando a mensagem abaixo do input;
        text = doc.createTextNode(resposta.errada + respostaCorreta[i]);
        d.appendChild(text);
        respostaUsuario[i].parentNode.insertBefore(d, respostaUsuario[i].nextSibling);
        }
        }
        }
     
    // Aqui vamos ouvir o evento de click no botao; Quando ele for clicado vamos executar a funcao Corrigir;
        button.addEventListener("click", Corrigir, false);
        })();
        <form name="form1" id="form1" method="post" action="" >
        1. Bla bla bla.
        <br>
        <input name="txtResposta1" type="text" id="txtResposta1" size="60" class="resposta">
        <br>
     
        2. Blu blu blu?
        <br>
        <input name="txtResposta2" type="text" id="txtResposta2" size="60" class="resposta">
        <br>
     
        2. ZIIII?
        <br>
        <input name="txtResposta3" type="text" id="txtResposta3" size="60" class="resposta">
        <br>
     
        <br>
        <input type="button" id="button" name="button" value="Corrigir">
        </form>
    
asked by anonymous 02.12.2018 / 23:14

1 answer

0

To make life easier, put a class into the divs you are creating with the messages, so you can remove them all whenever you call the corrigir() function: 

d.className = "mensagens";

Now the divs will have class .mensagens : 

<div class="mensagens">Sua resposta esta certa</div>

And you remove them by doing a for at the beginning of the function: 

var mensagens = document.querySelectorAll(".mensagens");
if(mensagens.length){
   for(var x=0; x < mensagens.length; x++){
      mensagens[x].outerHTML = '';
   }
}

Example: 

// Começamos com uma 'Self-Executing Anonymous Functions', esse parttern nos ajuda a não poluir o global namespace;
    ;(function(){

// doc é um 'cache' para o objeto global documento, assim nao precisamos subir toda hora para acessar esse objeto, ja que agora temos ele local;
    var doc = document,

// Um array que contem todos os inputs com a class .resposta. (.querySelectorAll nao está disponivel em todos os navegadores, entao caso vc precise vc pode usar outra maneira para conseguir os inputs, ex.: .getElementsByClassName())
    respostaUsuario = doc.querySelectorAll('input.resposta'),

// A lista de respostas corretas;
    respostaCorreta = ['a', 'b', 'c'],

// Um pequeno dicionário para feedback;
    resposta = {
    'certa': 'Sua resposta esta certa',
    'errada': 'Resposta correta: '
    },

// O botao que será clicado para verificar suas respostas;
    btn = doc.getElementById('button');

// Funcao chamada para verificar as resposas;
    function Corrigir() {

      var mensagens = document.querySelectorAll(".mensagens");
      if(mensagens.length){
         for(var x=0; x < mensagens.length; x++){
            mensagens[x].outerHTML = '';
         }
      }

// Variaveis locais, incluindo um caching para a quantidade de inputs na pagina
    var i,
    len = respostaUsuario.length;

    for( i = 0; i < len; i++ ) {

// Ao inves de usar document.write segue uma maneira melhor de mostrar seus resultados;
    var d = doc.createElement('div'),
    text;
    d.className = "mensagens";

// Se a resposta do usuário estiver correta;
   if (respostaUsuario[i].value == respostaCorreta[i]) {

// Criamos um texto para mostrar para ele;
    text = doc.createTextNode(resposta.certa);
    d.appendChild(text);

// Colocamos esse texto logo apos o input;
    respostaUsuario[i].parentNode.insertBefore(d, respostaUsuario[i].nextSibling);

    } else {

// Caso ele erre, criamos um texto de erro e adicionando a mensagem abaixo do input;
    text = doc.createTextNode(resposta.errada + respostaCorreta[i]);
    d.appendChild(text);
    respostaUsuario[i].parentNode.insertBefore(d, respostaUsuario[i].nextSibling);
    }
    }
    }

// Aqui vamos ouvir o evento de click no botao; Quando ele for clicado vamos executar a funcao Corrigir;
    button.addEventListener("click", Corrigir, false);
    })();
<form name="form1" id="form1" method="post" action="" >
1. Bla bla bla.
<br>
<input name="txtResposta1" type="text" id="txtResposta1" size="60" class="resposta">
<br>

2. Blu blu blu?
<br>
<input name="txtResposta2" type="text" id="txtResposta2" size="60" class="resposta">
<br>

2. ZIIII?
<br>
<input name="txtResposta3" type="text" id="txtResposta3" size="60" class="resposta">
<br>

<br>
<input type="button" id="button" name="button" value="Corrigir">
</form>
    
02.12.2018 / 23:26
Reload the main script when completing ajax request 2 form on the same page with Spring mvc, Thymeleaf, does anyone know how?