Inserir mudança de cor em questões - Quiz Javascript
Boa tarde pessoal
Eu gostaria de alterar o background das alternativas abaixo para a cor verde, senão para vermelho. Porém só consigo fazer para o formulário inteiro.
Estou travado nessa parte, qualquer ajuda seria bem-vinda.
Obrigado
<!DOCTYPE html>
<html>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div style='line-height: 25px;font-family: arial;'
<p align="justify">
<br/>
Responda as questões a seguir:
<br/>
<form id = "quiz" name = "quiz">
<p>Qual é a capital do Peru?</p>
<input id = "textbox" type = "text" name = "q1">
<br>
<p>Qual é a capital do Equador?</p>
<input type = "radio" id = "multipla" name = "q2" value = "Quito"> Quito<br>
<input type = "radio" id = "multipla" name = "q2" value = "Quieto"> Quieto<br>
<p>Qual é a capital da Argentina?</p>
<input type = "radio" id = "multipla" name = "q3" value = "Buenas tardes"> Buenas tardes<br>
<input type = "radio" id = "multipla" name = "q3" value = "Buenos Aires"> Buenos Aires<br>
<br><br>
<input id = "button" type = "button" value = "Conferir" onclick = "checar()">
</form>
</div>
<p id = "numeroCorreto"></p>
<p id = "mensagem"></p>
<img id = "imagem" style= width="300" height="150">
<p id = "cor"></p>
</div>
<script>
function checar() {
var q1 = document.quiz.q1.value;
var q2 = document.quiz.q2.value;
var q3 = document.quiz.q3.value;
var corretas = 0;
var cor = ["#006400", "#006400","#FF0000" ];
if (q1 == "Lima") {
corretas++;
}
if (q2 == "Quito") {
corretas++;
}
if (q3 == "Buenos Aires") {
corretas++;
}
var mensagem = ["Parabéns!", "Foi bom!", "Melhor tentar novamente!"];
var imagem = ["img1.gif", "img2.gif", "img3.gif"];
var pontos;
if (corretas < 1) {
pontos = 2;
}
if (corretas > 0 && corretas < 3) {
pontos = 1;
}
if (corretas > 2) {
pontos = 0;
}
document.getElementById ("numeroCorreto").innerHTML = "Você acertou " + corretas + " de 3 perguntas.";
document.getElementById ("mensagem").innerHTML = mensagem[pontos];
document.getElementById ("imagem").src = imagem[pontos];
document.getElementById("quiz").style.backgroundColor = cor [pontos];
}
</script>
</div>
</p>
</div>
</body>
</html>Discussão (2)
Carregando comentários...