2

Estou desenvolvendo um quiz com perguntas e respostas, já fiz usando input radio e checkbox, agora tenho que fazer algumas com input text.

Achei um código na internet que faz o que quero mas achei ele muito extenso e creio que dá para melhorar e além de que quando aperto o botão para responder ele não apaga a a mensagem anterior, se a resposta está certa ou errada.

Vou colocar o código aqui e vejam o que dá para melhorar ou me dêem alguma dica de como fazer de um modo mais dinâmico, lembrando que só vou utilizar HTML, JavaScript e 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>

1 Resposta 1

1

Para facilitar a sua vida, coloque uma classe nas divs que você está criando com as mensagens, assim você consegue removê-las todas sempre que chamar a função corrigir():

d.className = "mensagens";

Agora as divs terão a classe .mensagens:

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

E você as remove fazendo um for logo no início da função:

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

Exemplo:

// 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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .