Jump to content
geoleandro

Botão "voltar" quiz em JavaScript

Recommended Posts

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>

 

Share this post


Link to post
Share on other sites

O erro no seu código e que você não manipula a variável que é incrementada pra exibir o estado da questão atual:

 

Before:

function backQ(){
 loadquestion();
 i = i - 1; // ainda não entendi pq decrementou depois de carregar
}

 

After:

function backQ(){
 i = i - 1;
 numQ = i;
 loadquestion();
}

 

JsBin: https://jsbin.com/zobofakija/edit?html,js,output

 

PS: Seu html tá triste precisa estudar CSS aqueles "<br>" da um certo desgosto você colocou dentro do <head> todo o código e não está se preocupando com os espaçamentos tornado seu código sujo e seu Javascript tem que começar a pensar em reaproveitar código.

 

 

fiz um outro código com um refactor:

i = 0;
var pontos = 0;
var numQ = 1;
  
var 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 initApp() {
  setValue('next', 'Próximo');
  setBackground('next', 'lightgray');
  loadQuestion();
}

function loadQuestion(numQ = 1) {
  setContent('mylabel', myqs[i][0]);
  setImagesOnBox();
  updateStateQuestion(numQ);
  defaultStateBox();
  clearMessage('erro');
}

function setImagesOnBox() {
  const targetList = ['btn0', 'btn1', 'btn2', 'btn3'];
  targetList.forEach((item, index) => setSrc(item, myqs[i][index+1]));
}

function updateStateQuestion(numQ) {
  setContent("numQ", "Questão " + numQ + " de " + myqs.length);
}

function defaultStateBox() {
  const targetList = ['imgbox1', 'imgbox2', 'imgbox3', 'imgbox4'];
  targetList.forEach(item => setBackground(item, 'white'));
}

function nextQuestion(){
 i = i + 1;
 numQ = numQ + 1;
 loadQuestion(numQ);
}

function backQuestion(){
 i = i - 1;
 numQ = numQ - 1;
 loadQuestion(numQ);
}

function checkans(a){
 clearMessage('erro');
 respostas = parseInt(myqs[i][5]);

 if(respostas === a){
  pontos++;
  
  setContent("pontos", "Você acertou " + pontos);
  setBackground("imgbox"+respostas, "#99ff99"); 
 }
 else {
  showIncorrectMessage();
 }
}

function clearMessage(fieldId) {
  setContent(fieldId, "");
  setColor(fieldId, "");	
}

function showIncorrectMessage() {
  setContent("erro", "Incorreta");
  setColor("erro", "red");
}

// Utils methods
function refElement(fieldId) {
  return document.getElementById(fieldId);
}

function setValue(fieldId, value) {
  refElement(fieldId).value = value;
}

function setContent(fieldId, content) {
  refElement(fieldId).innerHTML = content;
}

function setBackground(fieldId, color) {
  refElement(fieldId).style.backgroundColor = color;
}

function setColor(fieldId, color) {
  refElement(fieldId).style.color = color;
}

function setSrc(fieldId, pathFile) {
  refElement(fieldId).src = pathFile;
}


Jsbin: https://jsbin.com/buduwibade/1/edit?html,js,output

Removendo os <br>: https://jsbin.com/hiloxogufu/1/edit?html,css,output

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Sapinn
      Quero que quando o usuario chegue em uma parte do menu site ele o menu fique fixo no topo da pagina. Como fazer isso???
    • By Sapinn
      Eu tenho um form e toda vez que alguém clicar no input eu quero que a borda de baixo mude a cor e quando ele clicar fora quero que volte ao normal quero isso para todos os campo de todos os foms que eu tiver
    • By daviassumpcao
      Pessoal... Estou pegando 2 valores via class em divs e fazendo um cálculo para saber a porcentagem de desconto obtida (uma lista de registros). Porém, quando vou inserir o resultado em outras div's com class também, não funciona. Se eu mudo para id, é inserido na primeira div apenas. O identificador dessa div é a "desconto" que está com o fundo vermelho. É errado usar o getElementsByClassName para inserir os valores encontrados? Até tentei um for mas não rolou.... (sou iniciante em JS e isso é exercício estou fazendo) O script:
       
      <div class="container"> <div class="prateleira-wrap"> <div class="prateleira-preco-de">De R$ 10,00</div> <div class="prateleira-preco-por">Por R$ 5,00</div> <div class="desconto"></div> </div> <div class="prateleira-wrap"> <div class="prateleira-preco-de">De R$ 9,00</div> <div class="prateleira-preco-por">Por R$ 3,00</div> <div class="desconto"></div> </div> </div> .container{ background-color:#e4e4e4; width:100%; height:auto; float:left; } .prateleira-wrap{ border: 1px solid #000; width:40%; float:left; margin:10px; } .desconto{ background-color:red; color:#fff; width:100%; height:20px; float:left; } function getMoney(str) { return str .replace(/[^\d,]+/g, '') // Remove caracteres desnecessários. .replace(',', '.'); // Troca o separador decimal (`,` -> `.`) } var a = document.getElementsByClassName("prateleira-preco-de")[0].innerHTML; var b = getMoney(a); var c = document.getElementsByClassName("prateleira-preco-por")[0].innerHTML; if ( c !== null) { var d = getMoney(c); var e = ((d / b) * 100) - 100; var f = e.toFixed(2); document.getElementsByClassName("desconto").innerHTML = ('Desconto de ' + f + '%'); // console.log('Desconto de ' + f + '%'); } else { console.log("Não há desconto no preço do produto"); }  
       
       
    • By fideles
      Fala pessoal, tudo tranquilo?
       
      Tem uma dúvida e gostaria de uma sugestão.
      Tenho um codigo que faz um upload de um arquivo CSV, gostaria que ao importar ele puxe os dados da descrição em outro banco de dados, seria possivel ?
       
      O codigo abaixo seria, o usuario monta a planilha e coloca somente o codigo do item e a quantidada e faz o upload, mais dessa forma o codigo grava no banco somente o que tem na planilha.
       
      O que precisaria seria,  o usuario monta a planilha e coloca somente o codigo do item e a quantidada e faz o upload e nesse momento do upload, ele puxe a descrição e unidade do item cadastro em outra tabela antes de gravar o processo abaixo. 
       
      <?php //Aciona o codigo somente se clicar no botão enviar if($_POST){ //esconde os erros do navegador error_reporting(E_ALL ^ E_NOTICE); // inclui a conexão include_once('../configuracoes/conexao/config_4.php'); //cria as varias para pegar o arquivo e o nome do arquivo $arquivo = $_FILES["file"]["tmp_name"]; $nome = $_FILES["file"]["name"]; $ext = explode(".", $nome); $extencao = end($ext); //cria uma condição para validar a extenção do arquivo. if($extencao != "csv"){ echo "<script>alert('Extens\u00e3o inv\u00e1lida, verifique o arquivo.');</script>"; } else{ //se a estensao for valida, executa a função abaixo $objeto = fopen($arquivo, 'r'); //abre o arquivo e le os dados while(($dados = fgetcsv($objeto, 1000, ",")) !== FALSE )//faz um loop em todo arquivo. { $item = $dados[0]; $quantidade = $dados[1]; //exibe os dados na tela do usuario echo "<table border='1'>"; echo "<tr>"; echo "<td width='250px'>$nome</td>"; echo "<td width='500px'>$email</td>"; echo "</tr></table>"; $result = mysql_query("INSERT INTO emails (item, quantidade) VALUES('$nome','$email')"); } if($result){ echo "Dados inseridos com sucesso"; } else{ echo mysql_error();//"Erro ao inserir os dados"; } } } ?>  
    • By fideles
      Pessoal, tenho uma dúvida, talvez muito boba.
       
      Tenho um formulario com os input em array, e um alert javascript mostrando que foi registrado com suceso.
       
      O problema maior é que se for gravado 30 registro no banco de dados, ele mostra 30 alertas de registro gravado com suceso, por acaso é possivel limitar esse tanto de alerta para somente 1 independente da quantidade que ele grava no banco ?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.