Question

I make a quiz script with jQuery with some questions based on true/false. Each questions has 2 choices. If you select the true answer of choice 1 for question 1, it automatically select the False answer of choice 2 (crosswisely, that’s logical – you can’t answer 2 times to a single question).

With my script, I have a problem, easy to say but more difficult to code : if I click on the True answer of the question 1 two times, my score increases 2 times. Same problem if I select the another answer (False for choice 1 in this case) for the same question. I can choose all answers but this is not logical…

I search to “block” the choices to one “click” for each questions, but I don’t know how. I played with vars but it was not convincing.

quizz = function(){
  vars = {
     score  : 0,
     scroll : 1
  };

  // Scroll to the next question
  q = {
     next: function(which){
        if (vars.scroll === 1){
           $d.scrollTo(which, 500);
        }
     },
     // If good answer is clicked, increase the score
     score: function(which){
        if (which.hasClass("t")){
           vars.score++;
        }
     }
  };
};

// Init the quizz
quizz();

// On questions click
$(".quizz .r").on("click", function(e){
  var $t = $(this),
      $q = $t.closest(".q"),
      q_ans = $t.attr("class").split("r ")[1],
      q_id = $q.attr("id"),
      ac = "active";

  $t.addClass(ac);
  $q.find("."+ q_ans).addClass(ac);
  q.score($t);

  if (q_id == "q7"){
     e.preventDefault();
  } else {
     q.next($q.next());
  }

  $(".result p").html("Score : "+ vars.score);

   e.preventDefault();
});

Here is my try : http://jsfiddle.net/uZQbS/

If you have an idea…
Thank you in advance!

Answer 1

Just found a solution playing with a disable class.

// On questions click
$(".quizz .r").on("click", function(e){
    var $t = $(this),
        $q = $t.closest(".q"),
        q_ans = $t.attr("class").split("r ")[1],
        q_id = $q.attr("id"),
        ac = "active";

    if ($q.is(":not(.disable)")){
       $t.addClass(ac);
       $q.find("."+ q_ans).addClass(ac);
       $q.addClass("disable");
       q.score($t);

       if (q_id == "q7"){
          e.preventDefault();
       } else {
          q.next($q.next());
       }

      $(".result p").html("Score : "+ vars.score);
   }

   e.preventDefault();
});