Ir para conteúdo

geoleandro

Members
  • Total de itens

    5
  • Registro em

  • Última visita

Reputação

0 Comum

Sobre geoleandro

Últimos Visitantes

O bloco dos últimos visitantes está desativado e não está sendo visualizado por outros usuários.

  1. geoleandro

    Botão "voltar" quiz em JavaScript

    Obrigado pelas valiosas dicas. Sim, vou continuar os estudos.
  2. geoleandro

    Botão "voltar" quiz em JavaScript

    O botão voltar funciona, mas ele adiciona uma questão na variável "numQ". Onde está o erro no código abaixo: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .imgbox { float: left; text-align: center; width: 150px; border: 1px solid #ddd; margin: 4px; padding: 5px; } #mylabel { text-align: left; } </style> <body onload="loadquestion()"> <p id="numQ"> <p id="mylabel" name="questao">Questões</p><br> <div class="imgbox" id="imgbox1"><br> <input type="image" src=" " width =auto height= 80px id="btn0" value="option0" name="opt0" onclick="checkans(1)"><br><br> </div> <div class="imgbox" id="imgbox2"><br> <input type="image" src=" " width =auto height= 80px id="btn1" value="option1" name="opt1" onclick="checkans(2)"><br><br> </div> <br><br><br><br><br><br><br><br><br> <div class="imgbox" id="imgbox3"><br> <input type="image" src=" " width =auto height= 80px id="btn2" value="option2" name="opt2" onclick="checkans(3)"><br><br> </div> <div class="imgbox" id="imgbox4"><br> <input type="image" src=" " width =auto height= 80px id="btn3" value="option3" name="opt3" onclick="checkans(4)"><br><br> </div> <br><br><br><br><br><br> <br><br><br><br> <input type="button" id="next" value="Próximo" name="nxtbtn" onclick="changequestion()"><br><br> <input type="button" id="back" value="voltar" name="bkbtn" onclick="backQ()"><br><br> <p id="erro"> <p id="pontos"> <p id="questAtual"> <script type="text/javascript"> i=0; var pontos = 0; var numQ = 1; myqs=[["Clique na foto 3 ?","img3.gif", "img2.gif","img1.gif","img1a.gif","3"], ["Clique na foto 2 ?","icone.png","icone2.png","certo.png","certo.png","2"], ["Clique na foto 4","icone.png","errado.png","certo.png","certo.png","4"] ]; function loadquestion() { document.getElementById("mylabel").innerHTML= myqs[i][0]; document.getElementById("btn0").src= myqs[i][1]; document.getElementById("btn1").src= myqs[i][2]; document.getElementById("btn2").src= myqs[i][3]; document.getElementById("btn3").src= myqs[i][4]; document.getElementById ("numQ").innerHTML = "Questão " + numQ + " de " + myqs.length; document.getElementById("next").value = "Próximo"; document.getElementById("next").style.backgroundColor = "lightgray"; numQ++; document.getElementById("imgbox1").style.backgroundColor = "white"; document.getElementById("imgbox2").style.backgroundColor = "white"; document.getElementById("imgbox3").style.backgroundColor = "white"; document.getElementById("imgbox4").style.backgroundColor = "white"; document.getElementById("erro").innerHTML = ""; document.getElementById("erro").style.color = ""; } function changequestion(){ i=i+1; loadquestion(); } function backQ(){ loadquestion(); i=i-1 } function checkans(a){ respostas =parseInt(myqs[i][5]); if(respostas==a && respostas==3){ pontos++; document.getElementById ("pontos").innerHTML = "Você acertou " + pontos ; document.getElementById("imgbox3").style.backgroundColor = "#99ff99"; } else if(respostas==a && respostas==2){ pontos++; document.getElementById ("pontos").innerHTML = "Você acertou " + pontos ; document.getElementById("imgbox2").style.backgroundColor = "#99ff99"; } else if(respostas==a && respostas==4){ pontos++; document.getElementById ("pontos").innerHTML = "Você acertou " + pontos ; document.getElementById("imgbox4").style.backgroundColor = "#99ff99"; } else { document.getElementById("erro").innerHTML = "Incorreta"; document.getElementById("erro").style.color = "red"; } } </script> </head> </body> </html>
  3. geoleandro

    Abrir Divs em sequência

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <body> <div id="dq1"style="display:block"> <br><br> Conteúdo da Div 1 </div> <br><br> <span id = "bdq2" style="display:block" onclick = "divMostrar(2)">Próximo</span><br><br> <div id="dq2"style="display:none"> Conteúdo da Div 2 </div> <br><br> <span id = "bdq3" style="display:none" onclick = "divMostrar(3)">Próximo</span><br><br> <div id="dq3"style="display:none"> Conteúdo da Div 3 </div> <br><br> <span id = "bdq4" style="display:none" onclick = "divMostrar(4)">Próximo</span><br><br> <div id="dq4"style="display:none"> <br><br> Conteúdo da Div 4 </div> <br><br> <span id = "bdq5" style="display:none" onclick = "divMostrar(5)">Próximo</span><br><br> <div id="dq5"style="display:none"> <br><br> Conteúdo da Div 5 </div> <br><br> <span id = "bdq6" style="display:none" onclick = "divMostrar(6)">Próximo</span> <div id="dq6"style="display:none"> Terminou! </div> <script> function divMostrar(qnum){ if (document.getElementById("bdq2").style.display='block'&& qnum==2) { document.getElementById("dq2").style.display='block'; document.getElementById("bdq2").style.display='none'; document.getElementById("bdq3").style.display='block'; } if (document.getElementById("bdq3").style.display='block' && qnum==3){ document.getElementById("bdq3").style.display='none'; document.getElementById("dq3").style.display='block'; document.getElementById("bdq4").style.display='block'; } if (document.getElementById("bdq4").style.display='block' && qnum==4){ document.getElementById("bdq4").style.display='none'; document.getElementById("dq4").style.display='block'; document.getElementById("bdq5").style.display='block'; } if (document.getElementById("bdq5").style.display='block' && qnum==5){ document.getElementById("bdq5").style.display='none'; document.getElementById("dq5").style.display='block'; document.getElementById("bdq6").style.display='block'; } if (document.getElementById("bdq6").style.display='block' && qnum==6){ document.getElementById("bdq6").style.display='none'; document.getElementById("dq6").style.display='block'; } } </script> </body> </head> </html> De que outro modo é possível programar para abrir essas Divs em sequência? Além do uso de IFs e else em JavaScript.
  4. geoleandro

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

    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.
  5. 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>
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.