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>