Contagem de pontos com jquery

marcelo2605 · Setembro 27, 2012

Tenho um jogo bem simples que dá o total de perguntas e, quando o usuário acerta uma, o total é atualizado:

Aqui eu pego o número de perguntas:

var perguntas= $(".perguntas").length;
$("#placar p").html('faltam<br>' + perguntas)

Se o usuário acerta a resposta, tira-se 1 do total de perguntas:

//pega placar atual
var resultado = $("#placar p").text();
resultado = resultado.replace(/\D/g, '');
resultado = parseInt(resultado);

//altera placar
placarNovo = resultado -1 
$("#placar p").html('faltam<br>' + placarNovo)

Tenho 3 perguntas. O script funciona com a primeira pergunta. Mas quando acerto a segundo, o contador vai para 0, ao invés de ir para 1.

Gaw · Setembro 27, 2012

Cara eu fiz um teste aqui e funcionou... da uma olhada:

<!DOCTYPE html>
<html>
   <head>
       <title></title>
       <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
       <script type="text/javascript" src="jquery.js"></script>
   </head>
   <body onload="placar()">

       <div class="perguntas"></div>
       <div class="perguntas"></div>
       <div class="perguntas"></div>

       <div id="placar"><p></p></div>

       <input type="button" onclick="diminui()" value="diminui" />
       <script>        
           function placar(){
               var perguntas= $(".perguntas").length;
               $("#placar p").html('faltam<br>' + perguntas);
           }

           function diminui(){
               //pega placar atual
               var resultado = $("#placar p").text();
               resultado = resultado.replace(/\D/g, '');
               resultado = parseInt(resultado);

               //altera placar
               placarNovo = resultado -1;
               $("#placar p").html('faltam<br>' + placarNovo);
           }
       </script>

   </body>
</html>

marcelo2605 · Setembro 27, 2012

Gaw, descobri que o problema está numa parte específica do código. Olhe como ele está:

var personagens = $(".personagens").length;
$("#placar p").html('faltam<br>' + personagens)

//clicar no personagem
$(".personagens").click(function() {
       //posição do personagem
	var posicao = $(this).position();
	//pegar id do personagem
	var personagem = $(this).attr('id');
	$("#main").css('cursor', 'default');
	$("#fundoPreto").fadeIn(500);
	$("#" + personagem).hide();
	$("#lupa")
		.show()
		.css({
			'left' : posicao.left,
			'top' : posicao.top,
		})
		.animate({
			width : 1000,
			height : 1000,
			left : -40,
			top : -50
		}, 500, function(){
			$("#fundoLupa").fadeIn(500);
			$('#quiz_' + personagem).fadeIn(500);
			$('#corpo_' + personagem).fadeIn(500);
			$('form').show();
		})

	//quiz do personagem	
	$(':checkbox').click(function(){
	var resposta = $(this).val();
		if (resposta == 1){

			$('form').hide();
			$('#quiz_' + personagem).find('.sucesso').fadeIn(200);
			$('#closeBtn').fadeIn(200);	
			$('#corpo_' + personagem).find('.balaoErro').hide();

			//pega placar atual
			var resultado = $("#placar p").text();
			resultado = resultado.replace(/\D/g, '');
			resultado = parseInt(resultado, 10);

			console.log(resultado);
			//altera placar
			resultado-=1;
			$("#placar p").html('faltam<br>' + resultado)

		}else{
			$('#corpo_' + personagem).find('.balaoErro').fadeIn(500);	
		}
	});

});

Se eu tiro o if (resposta == 1){ ..., funciona bem.

Gaw · Setembro 27, 2012

Problema resolvido então?

marcelo2605 · Setembro 27, 2012

Não, eu preciso manter o if. Pois ele verifica se o usuário escolheu a resposta certa.

Gaw · Setembro 27, 2012

Aqui comigo continuou funcionando:

<!DOCTYPE html>
<html>
   <head>
       <title></title>
       <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
       <script type="text/javascript" src="jquery.js"></script>
   </head>
   <body onload="placar()">

       <input type="checkbox" value="1"/>
       <input type="checkbox" value="2"/>
       <input type="checkbox" value="3"/>

       <div class="perguntas"></div>
       <div class="perguntas"></div>
       <div class="perguntas"></div>

       <div id="placar"><p></p></div>

       <script>        
           function placar(){
               var perguntas= $(".perguntas").length;
               $("#placar p").html('faltam<br>' + perguntas);
           }



           $(':checkbox').click(function(){
               var resposta = $(this).val();
               //$(this).attr({'checked':'true'});
               if(resposta == 1){

                   //pega placar atual
                   var resultado = $("#placar p").text();
                   resultado = resultado.replace(/\D/g, '');
                   resultado = parseInt(resultado);
                   if(resultado != 0){            
                       //altera placar
                       placarNovo = resultado -1;
                       $("#placar p").html('faltam<br>' + placarNovo);
                   }else{
                       alert("Zero");
                   }
               }
           });
       </script>

   </body>
</html>

marcelo2605 · Setembro 27, 2012

Gaw, mas o html está diferente: para cada pergunta existe um grupo de três checkboxes.

O que eu acho que está acontecendo é que, quando respondo à segundo pergunta, o script para o resultado é executado duas vezes.

Gaw · Setembro 27, 2012

Vi ali que você está escondendo a primeira pergunta ao invés de remove-la, depois que o usuário acerta a mesma de

$().remove();

pode ser conflito de checkboxes.

marcelo2605 · Setembro 27, 2012

Gaw, substitui mas não funcionou.

Gaw · Setembro 27, 2012

Velho fiz umas gambiarras no meu aqui... tente aplicar no seu! perceba que nos checkbox da pergunta 2 e 3 não alteram o placar se a pergunta 1 não for informada corretamete, e assim por diante:

<!DOCTYPE html>
<html>
   <head>
       <title></title>
       <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
       <script type="text/javascript" src="jquery.js"></script>
   </head>
   <body onload="placar()">

       <div class="perguntas">
           Pergunta 1
           <input type="checkbox" onclick="pergunta(1,1)" class="pergunta1" id="p1" value="1"/>
           <input type="checkbox" onclick="pergunta(1,2)" class="pergunta1" id="p2" value="2"/>
           <input type="checkbox" onclick="pergunta(1,3)" class="pergunta1" id="p3" value="3"/>
       </div>
       <div class="perguntas">
           Pergunta 2
           <input type="checkbox" onclick="pergunta(2,4)" class="pergunta2" id="p4" value="1"/>
           <input type="checkbox" onclick="pergunta(2,5)" class="pergunta2" id="p5" value="2"/>
           <input type="checkbox" onclick="pergunta(2,6)" class="pergunta2" id="p6" value="3"/>
       </div>
       <div class="perguntas">
           Pergunta 3
           <input type="checkbox" onclick="pergunta(3,7)" class="pergunta3" id="p7" value="1"/>
           <input type="checkbox" onclick="pergunta(3,8)" class="pergunta3" id="p8" value="2"/>
           <input type="checkbox" onclick="pergunta(3,9)" class="pergunta3" id="p9" value="3"/>
       </div>

       <div id="placar"><p></p></div>

       <script>   

           function placar(){
               var perguntas= $(".perguntas").length;
               $("#placar p").html('faltam<br>' + perguntas);
           }

           function pergunta(valor,id){
               var qtdPerguntas = parseInt($(".perguntas").length);
               var resultado = $("#placar p").text();
               resultado = resultado.replace(/\D/g, '');
               resultado = parseInt(resultado);
               aux = (qtdPerguntas -(resultado-1));

               if(aux == valor){
                   var resposta = $("#p"+id).val();

                   if(resposta == 1){                    
                       //pega placar atual
                       var resultado = $("#placar p").text();
                       resultado = resultado.replace(/\D/g, '');
                       resultado = parseInt(resultado);
                       if(resultado != 0){            
                           //altera placar
                           placarNovo = resultado -1;
                           $("#placar p").html('faltam<br>' + placarNovo);
                       }else{
                           alert("Zero");
                       }
                   }
               }
           }
       </script>

   </body>
</html>

espero que ajude!

marcelo2605 · Setembro 28, 2012

Pessoal, resolvido. Podem fechar este tópico.

Arquivado

Contagem de pontos com jquery

Recommended Posts

marcelo2605 10

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gaw 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelo2605 10

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gaw 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelo2605 10

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gaw 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelo2605 10

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gaw 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelo2605 10

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gaw 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelo2605 10

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante