¿Cómo puedo hacer que me sume puntos en un test con jquery?

Question

Quiero hacer un ejercicio de practicar como ir incrementando una variable resultado, según las respuestas que vaya eligiendo

$(document).ready(function(){

$("#comprobar").click(function(){

    var nota_examen = 0;

    if($(this).is(".correcto")) {

        nota_examen++;
        alert(nota_examen);
    };
});

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<p>En una página  HTML solo puede aparecer una id única vez </p>
<input type="radio" class="correcto" value="a" name="pregunta2">Cierto<br/>
<input type="radio" class="opciones" value="b" name="pregunta2">Falso<br/></div>


<input type="button" value="Enviar" id="comprobar">

Quieres que sume al presionar el radio button o solo en el botón enviar? — Bicho, Feb 07 '20 at 15:18
Quiero que la variable nota_examen se vaya incrementando si la respuesta es correcta — Azumay404, Feb 07 '20 at 15:20
La variable **nota_examen** debe ser global y no dentro de la función. — Bicho, Feb 07 '20 at 15:30

score 4 · Answer 1 · edited Jun 11 '20 at 10:54

El contexto completo siempre es importante.

En este caso veamos un contexto con varias preguntas de selección múltiple.

Al div que contiene las preguntas vamos a otorgar una clase questions. Luego podremos alcanzar únicamente los checkbox seleccionados mediante este selector: '.questions input:checked' y dentro de un each vamos a verificar si el elemento tiene la clase correcto con hasClass() para aumentar en uno el acumulador en ese caso.

También he usado function en vez de document.ready, el cual está obsoleto¹ desde jQuery 3.

$(function() {
  $("#comprobar").click(function() {
    var nota_examen = 0;
    $('.questions input:checked').each(function() {
      if ($(this).hasClass('correcto')) {
        nota_examen++;
      }
    });
    alert(nota_examen);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="questions">
  <p>1. ¿De qué color es el caballo blanco de Napoleón? </p>
  <input type="radio" class="correcto" value="a" name="q1">Blanco<br/>
  <input type="radio" class="incorrecto" value="b" name="q1">Negro<br/>
  <p>2. ¿En qué año murió CarloMagno? </p>
  <input type="radio" class="incorrecto" value="a" name="q2">En el último<br/>
  <input type="radio" class="correcto" value="b" name="q2">En el 814 dC<br/>
</div>

<hr />
<input type="button" value="Enviar" id="comprobar">

Notas

El problema ha sido abordado en esta pregunta: jQuery 3 declaró document.ready obsoleto ¿hay cambios también para window.load?

Juanmhs · Accepted Answer · 2020-02-07T15:30:18.860

Por lo que entiendo quieres ir aumentando una variable según cada respuesta correcta, si es asi el codigo del javascript deberia ser asi:

$(document).ready(function(){

$("#comprobar").click(function(){

    var nota_examen = 0;

    radio= $(".correcto");
    radio.each(function(){
        if($(this).prop("checked")){
            nota_examen++;
        }        
    });
    alert(nota_examen);
});

Explicación

La variable radio guarda una colección de elementos con la clase "correcto"

Luego se recorre la colección preguntando si se encuentra con estado "check", si el mismo se encuentra en dicho estado la variable nota_examen se incrementara

score 0 · Answer 3 · answered Feb 07 '20 at 15:46

Espero entender correctamente la pregunta, creo que lo podrías hacer con el método "change" de JQuery, este está ejecutándose cada vez que se realice un cambio en el input.

Cuando su input seleccionado posee la clase "correcto", su nota_examen se incrementará y si no está seleccionado, volverá a 0;

$(document).ready(function() {

var nota_examen = 0;

$("#comprobar").click(function() {
  
   if(nota_examen == 0) {
    alert('Respuesta incorrecta');
   } else {
    alert('Correcto!');
   }
  
});

$("body input[name='pregunta2']").each(function() {
  $(this).change(function() {
      if($(this).hasClass("correcto")) {

        nota_examen++;
        
      } else {

        nota_examen = 0;

      }
      
      console.log(nota_examen);
    });
});


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<p>En una página  HTML solo puede aparecer una id única vez </p>
<input type="radio" class="correcto" value="a" name="pregunta2">Cierto<br/>
<input type="radio" class="opciones" value="b" name="pregunta2">Falso<br/></div>


<input type="button" value="Enviar" id="comprobar">

div>
<p>En una página  HTML solo puede aparecer una id única vez </p>
<input type="radio" class="correcto" value="a" name="pregunta2">Cierto<br/>
<input type="radio" class="opciones" value="b" name="pregunta2">Falso<br/></div>


<input type="button" value="Enviar" id="comprobar">

¿Cómo puedo hacer que me sume puntos en un test con jquery?

3 Answers3

Notas

Linked