Question

I am pretty sure I have missed something simple, but Score is not counting correctly based on whether the correct answer has been selected. Its a multiple choice quiz. The code was written by someone else, so trying to figure this out alone! Any ideas?

---

var Question = function(Text){
  this.Question = Text;
  this.Answers = [];
  this.addAnswer = function(Answer, Correct){
    if(typeof Correct == 'undefined') Correct = false;
    else Correct = Correct == true;
    this.Answers.push({"Answer":Answer, "Correct":Correct});
  };
  this.checkAnswer = function(Index){
    if(typeof this.Answers[Index] == 'undefined') return false;
    return this.Answers[Index].Correct;
  };
};


var Questions = [];
var q;
var Score = 0;
var CurrentQuestion = -1;

var nextQuestion = function()
{
  ++CurrentQuestion;

  if(typeof Questions[CurrentQuestion] == 'undefined') return false;
  var Question = Questions[CurrentQuestion];

  $('#QuestionIndex').html(Numbers[CurrentQuestion]);
  $('#QuestionsRemaining').html((Questions.length-CurrentQuestion-1));
  $('#Question').html(Question.Question);
  $('#Answers').html('');


  for(var t in Question.Answers)
  {
    i = t;
    t = Question.Answers[t];
    var Div = $('<div class="answer"></div>');
    $(Div).append('<span class="radioContainer"><input type="radio" name="Answer" id="answer_'+ i +'"></span> ');
    $(Div).append($('<label for="answer_' + i + '" />').html(t.Answer));
    $('#Answers').append(Div);
  }

  $("input[type='radio']").change(function(){
    $('.radioContainer').css('background-image', 'none');

    attr = $(this).attr('checked');
    if(typeof attr !== 'undefined' && attr !== false)
    {
   $(this).parent().css('background-image', 'url("http://dev.clickymedia.co.uk/fbart/wp-content/themes/artbook/img/tick.png")');
    }
  });

  return true;
}

//Returning false should stop the user from progressing to the next question.
var checkCurrentAnswer = function()
{
  if(typeof Questions[CurrentQuestion] == 'undefined') return false;
  var i = $('#Answers input:checked').parent().index();
  if(i < 0) return false;

  if(Questions[CurrentQuestion].checkAnswer(i) == true) Score++; 

  return true;
}

q = new Question("Which famous film star did Pop artist Andy Warhol make more portraits of than any other?");
q.addAnswer('Marilyn Monroe', true);
q.addAnswer('Sophia Loren');
q.addAnswer('Audrey Hepburn');
q.addAnswer('Doris Day');
Questions.push(q);

q = new Question("The Mona Lisa, Leonardo da Vinci's magnum opus, draws crowds into which famous European museum?");
q.addAnswer('The Mus&#233;e du Louvre, Paris', true);
q.addAnswer('The Tate Britain, London');
q.addAnswer('The National Gallery, Berlin');
q.addAnswer('The Uffizi Gallery, Florence');
Questions.push(q);

$(function(){
  nextQuestion();

  $('#nextQuestion').bind('click', function(){
    if(checkCurrentAnswer())
    {
      if(nextQuestion())
      {

      }else{ //End of examination! - Put your pens and pencils down.
        $('#QuestionBook .FinalLeft .Score').html(Score + '/' + Questions.length);

        $('#QuestionBook .FinalLeft .Message').html(Message);


        $('#QuestionBook .QuestionContainer, #QuestionBook .AnswersContainer').hide();
        $('#QuestionBook .FinalLeft, #QuestionBook .FinalRight').show();


      }
    }
  });
});

---

Answer 1

Your checkCurrentAnswer function is calculating the wrong index. Specifically, this line:

var i = $('#Answers input:checked').parent().index();

Your HTML looks like this:

<div id="Answers">
  <div class="answer">
    <span class="radioContainer"><input type="radio" /></span>
    <label for="answer_0">The Musée du Louvre, Paris</label>
  </div>
  <div class="answer">
    <span class="radioContainer"><input type="radio" /></span>
    <label for="answer_1">The Tate Britain, London</label>
  </div>
  ...
</div>

Thus, i will always be 0, since the parent of the radio input is always a span, which is always the first child (index 0) of answer. You should count the index of the div with class answer instead.

To fix, it’s simple, instead of using parent(), use closest(".answer"):

var i = $('#Answers input:checked').closest(".answer").index();