Questions and answers javascript

Question

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

I found a code on the Internet that does what I want but I found it very extensive and I think it can be improved and besides that when I press the button to reply it does not erase the previous message, if the answer is right or wrong.

I’ll put the code here and see what can be improved or give me some hint 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>

Answer 1

To make your life easier, put a class on the Ivs you’re creating with the messages, so you can remove them all whenever you call the function corrigir():

d.className = "mensagens";

Now the Divs will have the class .mensagens:

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

And you remove them by making one for right at the start 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>