quiz Inserir mudança de cor em questões - Quiz Javascript

geoleandro · Outubro 26, 2019

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>

<br/>
Responda as questões a seguir:
<br/>

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

</div>

</div>

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>

Maujor · Outubro 26, 2019

@geoleandro

Sua marcação HTML está equivocada.
Por exemplo:

elemento META na seção BODY;
tag div sem fechamento;
uso excessivo de BR

O script JS está ultrapassado.
Estude HTML e JS

geoleandro · Outubro 27, 2019

Eu consegui resolver adicionando "id" no parágrafo <p>.

Ex. <p id="p1"><input type = "radio" id = "q2" name = "q2" value = "Quito"> Quito</p>.

if (q2 == "Quito") {
   corretas++;
   document.getElementById ("p1").style.backgroundColor = cor[0];

   }   else {
       document.getElementById ("p2").style.backgroundColor = cor[2];

Obrigado, vou continuar estudando para ser experiente.