Questionário javascript

thi100 · Dezembro 3, 2018

Estou desenvolvendo um quiz com perguntas e respostas com vários tipos de inputs para resposta, já fiz um usando checkbox e outro usando o radio, agora tava tentando desenvolver um usando o input text, achei um código que faz o que eu quero mas ele tem uns erros como por exemplo a mensagem de erro ou acerto não some se eu apertar o botão, ele adiciona outra mensagem abaixo da existente, poderiam me ajudar a melhorar esse código ?

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


 
    <script>
// 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 você precise você 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);
    })();