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 cleomarjose
      Boa noite
      preciso de uma ajuda de vocês, montando um raspador de site e quero que as informaçções fiquem organizadas, não consigo descobrir como coloco as id valorCep e valorComplCep na mesma linha, obrigado pela ajuda
       
                 <h1> <p id="valorCep">                 </p>    </h1>
                 <h1> <p id="valorComplCep">            </p>    </h1>
                 
      <input type="text" id="cependseg__numero" name="cependseg__numero" autocomplete="off" class="input-cep" maxlength="5" onkeyup="autoTabSelection( get(&#39;cependseg__numero&#39;) , get(&#39;cependseg__complemento&#39;), event);" value="29092" onchange="javascript:atualizarHiddenCep(&#39;cependseg&#39;);javascript:limparCampos([&#39;estabelecimento&#39;,&#39;codigoLocalDesconto&#39;,&#39;codigoTipoLocalDesconto&#39;,&#39;clausulaServico&#39;,&#39;codigoClausulaServico&#39;]);javascript:acionarBuscaDiretaPorCep_cependseg(this);" onblur="javascript:setValorFromId(&#39;cependseg&#39;,preencherAEsquerda(getValorFromId(&#39;cependseg&#39;),3,&#39;0&#39;));javascript:atualizarHiddenCep(&#39;cependseg&#39;);" onkeypress="return isNumber(event);"> - <input type="text" id="cependseg__complemento" name="cependseg__complemento" autocomplete="off" class="input-complemento_cep" maxlength="3" value="065" onchange="javascript:atualizarHiddenCep(&#39;cependseg&#39;);javascript:limparCampos([&#39;estabelecimento&#39;,&#39;codigoLocalDesconto&#39;,&#39;codigoTipoLocalDesconto&#39;,&#39;clausulaServico&#39;,&#39;codigoClausulaServico&#39;]);" onblur="javascript:setValorFromId(&#39;cependseg&#39;,preencherAEsquerda(getValorFromId(&#39;cependseg&#39;),5,&#39;0&#39;));javascript:atualizarHiddenCep(&#39;cependseg&#39;); javascript:acionarBuscaDiretaPorCep_cependseg(this);" onkeypress="return isNumber(event);"><div class="div-botoes-atributo div-botao-encontrarcep"><div class="btCor3"></div>
      <script>
               capturando = document.getElementById('cependseg__numero').value;
          document.getElementById('valorCep').innerHTML = capturando;
               capturando = document.getElementById('cependseg__complemento').value;
          document.getElementById('valorComplCep').innerHTML = capturando;
          </script>
    • By srawolf
      Eu tenho uma tabela, essa tabela vem com o campo nome e matricula do banco de dados (fiz em mongodb), eu ia colocar uns inputs para notas e ser enviado no text do email, mas ele repete a primeira linha da tabela
      Estou usando, node.js, nodemailer, mongodb
      o email não aparece na tela, so no banco de dados e eu puxo ele quando vou enviar o email, como eu posso identificar esses inputs para que cada email receba sua respectiva nota?
    • By studdiox
      Ola pessoal tudo certo ... tenho um problema com um script que pode ajudar muita gente 
      ele da um preview das imagens carregadas em um form de upload ele funciona mas só da o preview
      de uma imagem quando carrega ... se eu colocar o formulário em multiple ele exibe todas as imagens selecionadas 
      antes de fazer o upload para o banco de dados, mas se eu deixar a seleção normal ou seja
      uma imagem por vez,  ele não carrega o restante das imagens, apenas a primeira, vou por o
      código abaixo completo funcionando com o multiple se alguém ai conseguir me ajudar a mudar ele
      para exibir cada imagem carregada separadamente eu agradeço e vai ajudar muita gente também 
       
       
      <html> <head> <style type="text/css"> .thumb-image{ float:left;width:100px; position:relative; padding:5px; } </style> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" multiple="multiple" type="file"/> <div id="image-holder"></div> </div> <script language="JavaScript"> $("#btnCLear").on('click',function(){ $("#image-holder").html(""); }); $("#fileUpload").on('change', function () { //Obtendo contagem dos arquivos selecionados var countFiles = $(this)[0].files.length; var imgPath = $(this)[0].value; var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase(); var image_holder = $("#image-holder"); image_holder.empty(); if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") { if (typeof (FileReader) != "undefined") { //loop para cada arquivo selecionado para uploaded. for (var i = 0; i < countFiles; i++) { var reader = new FileReader(); reader.onload = function (e) { $("<img />", { "src": e.target.result, "class": "thumb-image" }).appendTo(image_holder); } image_holder.show(); reader.readAsDataURL($(this)[0].files[i]); } } else { alert("Seu navegador não tem suporte ao FileReader."); } } else { alert("Selecione apenas arquivos de imagem."); } }); </script> </body> </html> No meu caso ele ficaria assim
       
       
       
      <html> <head> <style type="text/css"> .thumb-image { float: left; width: 100px; position: relative; padding: 5px; } </style> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <script language="JavaScript"> $("#btnCLear").on('click',function(){ $("#image-holder").html(""); }); $("#fileUpload").on('change', function () { //Obtendo contagem dos arquivos selecionados var countFiles = $(this)[0].files.length; var imgPath = $(this)[0].value; var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase(); var image_holder = $("#image-holder"); image_holder.empty(); if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") { if (typeof (FileReader) != "undefined") { //loop para cada arquivo selecionado para uploaded. for (var i = 0; i < countFiles; i++) { var reader = new FileReader(); reader.onload = function (e) { $("<img />", { "src": e.target.result, "class": "thumb-image" }).appendTo(image_holder); } image_holder.show(); reader.readAsDataURL($(this)[0].files[i]); } } else { alert("Seu navegador não tem suporte ao FileReader."); } } else { alert("Selecione apenas arquivos de imagem."); } }); </script> </body> </html>  
       
       
       
    • By Overtron8000
      Ola Pessoas,
      Recentemente fiz uma prova para Desenvolvedor Javascript jr em uma empresa e tinha varias questões para escrever o código NA MÃO  e uma delas me deixou encabulado por exigirem que um junior saiba de cór isso era a seguinte pergunta:
       
      Dado o JSON abaixo construa um código que faça o calculo da media do parâmetro "time"  quando "type" for semelhante a "call" e o máximo valor para "time" quando "type for semelhante a "ping". Considere que o array events poderá conter milhões de objetos portanto seu código deve levar em consideração o processamento assíncrono do Node.js de forma que o resultado seja síncrono, ou seja, o codigo so deve completar quando o resultado do s cálculos estiverem prontos.
      JSON : events = { [ {type:"ping", time :10) [ {type:"ping", time: 5) [ {type:"call", time: 99) [ {type:"call", time: 67) [ {type:"ping", time: 7) [ {type:"call", time: 127) }  
      Isso tudo para fazer no resto da folha que sobrou alem da pergunta, se alguém saber uma solução poste ai que estou curioso ate hoje, sei que leva o conceito de promisses assíncronas mas ainda não cheguei nessa parte
       
       
       
       
                                   
       
       
    • By RSN
      Boa noite,
      Gostaria de após selecionar o produto carregasse outro select informando os preços(tabela produto), com javascript fazendo requisição para a servlet.
      div class="form-group col-md-4"> <label for="exampleInputEmail1">Produto</label> <select class="form-control select2" style="width: 100%;" id="id_produto" name="id_produto"> <option value="nao_informado">Selecione</option> <c:forEach items="${produto}" var="product"> <option value="${product.id}" id="${product.id}" <c:if test="${product.id == orcament.id_produto}"> <c:out value = "selected=selected" /> </c:if>> ${product.descricao}</option> </c:forEach> </select> </div> <div class="form-group col-md-1"> <label for="exampleInputEmail1">Tabela/Precos</label> <select class="form-control select2" style="width: 100%;" id="id_table" name="id_table" > <option value="nao_informado">Selecione</option> </select> </div>  
×

Important Information

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