CODEWITHSUNDEEP
javascriptjqueryhtml
user6050386
user6050386

Reputation:

Unable to display final score in Javascript quiz

I'm a beginner in Javascript I want to create a basic javascript quiz application, with radio buttons. At the end of the quiz, I want to have an alert message with the final score. I'm unable to display the final score. This is what I've coded yet.. HTML:

   var allQuestions = [{
    question: "Who is the Prime Minister of the United Kingdom?",
    choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
    correctAnswer: 0
  },

  {
    question: "Who is the Prime Minister of India?",
    choices: ["Rahul Gandhi", "Arvind Kejrival", "Narendra Damodardas Modi"],
    correctAnswer: 2
  },

  {
    question: "Who is the Prime Minister of America?",
    choices: ["Donald Trump", "Barack Obama", "Hilary Clinton"],
    correctAnswer: 2
  }
];

var correctAnswers = 0;
$(document).ready(function() {
  var currentquestion = 0;

  $('#question').html(allQuestions[currentquestion].question);
  $('label[for=option0]').html(allQuestions[currentquestion].choices[0] + "<br/>");
  $('label[for=option1]').html(allQuestions[currentquestion].choices[1] + "<br/>");
  $('label[for=option2]').html(allQuestions[currentquestion].choices[2] + "<br/>");

  $("#next").click(function() {
    if ($("input[name=option]:checked").val() == allQuestions[currentquestion].correctAnswer) {
      correctAnswers++;
    };
    currentquestion++;
    if (currentquestion < allQuestions.length) {
      $('#question').html(allQuestions[currentquestion].question);
      $('label[for=option0]').html(allQuestions[currentquestion].choices[0] + "<br/>");
      $('label[for=option1]').html(allQuestions[currentquestion].choices[1] + "<br/>");
      $('label[for=option2]').html(allQuestions[currentquestion].choices[2] + "<br/>");
      if (currentquestion == allQuestions.length - 1) {
        $('#next').html("Submit");
        $('#next').click(function() {
         /*If I comment out the following if statement, but retain correctAnswers++, I do get alert message,but the result is obviously wrong*/
          if ($("input[name=option]:checked").val() == allQuestions[currentquestion].correctAnswer) {
            correctAnswers++;
          }
          alert(correctAnswers);
          //alert("Your Score is " + correctAnswers + " out of " + currentquestion + " and your percentage is " + (correctAnswers*100/currentquestion) + "%");
        });

      }

    };
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
  <div>
    <h3 id="question"></h3>
    <form id="form">
      <input type="radio" name="option" value="0" id="option0" checked>
      <label for='option0'>
        <br/>
      </label>
      <input type="radio" name="option" value="1" id="option1">
      <label for='option1'>
        <br/>
      </label>
      <input type="radio" name="option" value="2" id="option2">
      <label for='option2'>
        <br/>
      </label>
    </form>
  </div>
  <br/>
  <a href="#" id="next" class="button hvr-bounce-to-right">Next</a>

</body>

Please help! here is the JSFiddle.

Upvotes: 1

Views: 714

Answers (5)

Moises Quintero
Moises Quintero

Reputation: 76

If you comment the if and correctAnswers++ sentence, your code works rightly.

         /*If I comment out the following if statement, but retain correctAnswers++, I do get alert message,but the result is obviously wrong*/
          /*if ($("input[name=option]:checked").val() == allQuestions[currentquestion].correctAnswer) {
            correctAnswers++;
          }*/
          alert(correctAnswers);
          alert("Your Score is " + correctAnswers + " out of " + currentquestion + " and your percentage is " + (correctAnswers*100/currentquestion) + "%");

Upvotes: 0

Pierre C.
Pierre C.

Reputation: 1430

The problem is that you set another click event callback on your next button while the first is still active.

Just add $('#next').unbind("click"); like this:

$('#next').html("Submit");
$('#next').unbind("click");
$('#next').click(...

This remove the click listener on your button before you set a new one.

Code snippet:

var allQuestions = [{
    question: "Who is the Prime Minister of the United Kingdom?",
    choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
    correctAnswer: 0
  },

  {
    question: "Who is the Prime Minister of India?",
    choices: ["Rahul Gandhi", "Arvind Kejrival", "Narendra Damodardas Modi"],
    correctAnswer: 2
  },

  {
    question: "Who is the Prime Minister of America?",
    choices: ["Donald Trump", "Barack Obama", "Hilary Clinton"],
    correctAnswer: 2
  }
];

var correctAnswers = 0;
$(document).ready(function() {
  var currentquestion = 0;

  $('#question').html(allQuestions[currentquestion].question);
  $('label[for=option0]').html(allQuestions[currentquestion].choices[0] + "<br/>");
  $('label[for=option1]').html(allQuestions[currentquestion].choices[1] + "<br/>");
  $('label[for=option2]').html(allQuestions[currentquestion].choices[2] + "<br/>");

  $("#next").click(function() {
    if ($("input[name=option]:checked").val() == allQuestions[currentquestion].correctAnswer) {
      correctAnswers++;
    };
    currentquestion++;
    if (currentquestion < allQuestions.length) {
      $('#question').html(allQuestions[currentquestion].question);
      $('label[for=option0]').html(allQuestions[currentquestion].choices[0] + "<br/>");
      $('label[for=option1]').html(allQuestions[currentquestion].choices[1] + "<br/>");
      $('label[for=option2]').html(allQuestions[currentquestion].choices[2] + "<br/>");
      if (currentquestion == allQuestions.length - 1) {
        $('#next').html("Submit");
        $('#next').unbind("click");
        $('#next').click(function() {
         /*If I comment out the following if statement, but retain correctAnswers++, I do get alert message,but the result is obviously wrong*/
          if ($("input[name=option]:checked").val() == allQuestions[currentquestion].correctAnswer) {
            correctAnswers++;
          }
          alert(correctAnswers);
          //alert("Your Score is " + correctAnswers + " out of " + currentquestion + " and your percentage is " + (correctAnswers*100/currentquestion) + "%");
        });

      }

    };
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
  <div>
    <h3 id="question"></h3>
    <form id="form">
      <input type="radio" name="option" value="0" id="option0" checked>
      <label for='option0'>
        <br/>
      </label>
      <input type="radio" name="option" value="1" id="option1">
      <label for='option1'>
        <br/>
      </label>
      <input type="radio" name="option" value="2" id="option2">
      <label for='option2'>
        <br/>
      </label>
    </form>
  </div>
  <br/>
  <a href="#" id="next" class="button hvr-bounce-to-right">Next</a>

</body>

Upvotes: 1

Shayan
Shayan

Reputation: 966

i fix your code

jsFiddle

the problem is here

if($("input[name=option]:checked").val()==allQuestions[currentquestion].correctAnswer){
    correctAnswers++;
}

Upvotes: 1

henrikmerlander
henrikmerlander

Reputation: 1574

Here is my solution to your problem. You were incrementing currentQuestion one extra time after the last question.

https://jsfiddle.net/k7874vjn/5/

if(currentquestion<allQuestions.length){
                $('#question').html(allQuestions[currentquestion].question);
                $('label[for=option0]').html(allQuestions[currentquestion].choices[0]+"<br/>");
                $('label[for=option1]').html(allQuestions[currentquestion].choices[1]+"<br/>");
                $('label[for=option2]').html(allQuestions[currentquestion].choices[2]+"<br/>");
                if(currentquestion==allQuestions.length-1){
                    $('#next').html("Submit");
                    $('#next').click(function(){
                        if($("input[name=option]:checked").val()==allQuestions[currentquestion].correctAnswer){
                            correctAnswers++;
                        }
                        alert(correctAnswers);
                        //alert("Your Score is " + correctAnswers + " out of " + currentquestion + " and your percentage is " + (correctAnswers*100/currentquestion) + "%");
                    });

                } else
            currentquestion++; //MOVED HERE

            };

Upvotes: 1

NiZa
NiZa

Reputation: 3926

Here you have a working demo.

var allQuestions = [{
    question: "Who is the Prime Minister of the United Kingdom?",
    choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
    correctAnswer: 0
  },

  {
    question: "Who is the Prime Minister of India?",
    choices: ["Rahul Gandhi", "Arvind Kejrival", "Narendra Damodardas Modi"],
    correctAnswer: 2
  },

  {
    question: "Who is the Prime Minister of America?",
    choices: ["Donald Trump", "Barack Obama", "Hilary Clinton"],
    correctAnswer: 2
  }
];


$(document).ready(function() {
  var currentquestion = 0;
  var correctAnswers = 0;
  var done = false;

  $('#question').html(allQuestions[currentquestion].question);
  $('label[for=option0]').html(allQuestions[currentquestion].choices[0] + "<br/>");
  $('label[for=option1]').html(allQuestions[currentquestion].choices[1] + "<br/>");
  $('label[for=option2]').html(allQuestions[currentquestion].choices[2] + "<br/>");

  $("#next").click(function() {
    if ($("input[name=option]:checked").val() == allQuestions[currentquestion].correctAnswer) {
      correctAnswers++;
    };

    if (done) {
      alert(correctAnswers);
    } else {
      currentquestion++;
      if (currentquestion < allQuestions.length) {
        $('#question').html(allQuestions[currentquestion].question);
        $('label[for=option0]').html(allQuestions[currentquestion].choices[0] + "<br/>");
        $('label[for=option1]').html(allQuestions[currentquestion].choices[1] + "<br/>");
        $('label[for=option2]').html(allQuestions[currentquestion].choices[2] + "<br/>");
        if (currentquestion == allQuestions.length - 1) {
          $('#next').html("Submit");
          done = true;
        }
      }
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
  <div>
    <h3 id="question"></h3>
    <form id="form">
      <input type="radio" name="option" value="0" id="option0" checked>
      <label for='option0'>
        <br/>
      </label>
      <input type="radio" name="option" value="1" id="option1">
      <label for='option1'>
        <br/>
      </label>
      <input type="radio" name="option" value="2" id="option2">
      <label for='option2'>
        <br/>
      </label>
    </form>
  </div>
  <br/>
  <a href="#" id="next" class="button hvr-bounce-to-right">Next</a>

</body>

Upvotes: 1

Related Questions