CODEWITHSUNDEEP
javascriptjquery
Rickie Knight
Rickie Knight

Reputation: 29

HTML5 and jQuery Quiz logic

I've looked through a few StackOverflow pages and nothing has helped. I've made a quiz using HTML radio buttons. The questions and answers are not generated dynamically. Each question has possible answers and the correct answer has a value of 'right'. I want to check all radios that have been selected by the user upon submit and if their value is == to right then I want to add a point (r+=1).

My HTML looks like this (x9).

      <div class='col-sm-12 col-md-6 col-lg-4 text-center'>
        <p class='question'>Which version of IE supports SSE?</p>
        <div class='form-check'>
          <input class='form-check-input' type='radio' name='htmlq9a'>
          <label class='form-check-label' for='htmlq9a'>Internet explorer 10+</label>
        </div>
        <div class='form-check'>
          <input class='form-check-input' type='radio' name='htmlq9a'>
          <label class='form-check-label' for='htmlq9a'>Internet explorer 9+</label>
        </div>
        <div class='form-check'>
          <input class='form-check-input' type='radio' name='htmlq9a'>
          <label class='form-check-label' for='htmlq9a'>Internet explorer 8+</label>
        </div>
        <div class='form-check'>
          <input class='form-check-input' type='radio' name='htmlq9a' value='right'>
          <label class='form-check-label' for='htmlq9a'>Internet explorer does not support SSE.</label>
        </div>
      </div>

And my javascript looks like this.

        var r   = 0;
        var tr  = 9;
        var m   = 100;
        var fs;


        $('#sub').click(function(e){
          e.preventDefault();
          $('input:checked').each(
            if( $(this).val() == 'right' ){
              r+=1;
            }
          }
        });
        var fs = (r/tr) * m;
        $('#as').html(fs);

Upvotes: -1

Views: 270

Answers (4)

PPL
PPL

Reputation: 6565

Replace your click event with below change event of radio button.

$('input:radio').change(function() {
    if($(this).val() == 'right') {
        r+=1;
    }
});

Upvotes: 0

Markus
Markus

Reputation: 13

Why don't you only check, if the right one is checked?

if ($("input[value=right]").prop("checked")) {
   // add points
}

Upvotes: 1

Chirag Ravindra
Chirag Ravindra

Reputation: 4830

There were a few problems that needed fixing:

  1. You were updating the result div before the click happened. Moved the code which updates the result div into the click handler
  2. Moved variables inside the click handler so the scope is limited and they are viewed as new variables if the code is run again (otherwise the stale values would still be in the global scope).

$('#sub').click(function(e) {
  var r = 0;
  var tr = 9;
  var m = 100;
  var fs;
  e.preventDefault();
  $('input:checked').each(function() {
    if ($(this).val() == 'right') {
      r += 1;
    }
  })

  var fs = (r / tr) * m;
  $('#as').html(fs);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='col-sm-12 col-md-6 col-lg-4 text-center'>
  <p class='question'>Which version of IE supports SSE?</p>
  <div class='form-check'>
    <input class='form-check-input' type='radio' name='htmlq9a'>
    <label class='form-check-label' for='htmlq9a'>Internet explorer 10+</label>
  </div>
  <div class='form-check'>
    <input class='form-check-input' type='radio' name='htmlq9a'>
    <label class='form-check-label' for='htmlq9a'>Internet explorer 9+</label>
  </div>
  <div class='form-check'>
    <input class='form-check-input' type='radio' name='htmlq9a'>
    <label class='form-check-label' for='htmlq9a'>Internet explorer 8+</label>
  </div>
  <div class='form-check'>
    <input class='form-check-input' type='radio' name='htmlq9a' value='right'>
    <label class='form-check-label' for='htmlq9a'>Internet explorer does not support SSE.</label>
  </div>
</div>
<button id="sub">Submit</button>
<div id="as"></div>

Upvotes: 0

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27051

the problem is that when you click on #sub you do get the correct values, but you never run $('#as').html(fs); so it dont get updated.

Move your variables inside your click event:

$('#sub').click(function(e) {
  var r = 0;
  var tr = 2;
  var m = 100;
  var fs;
  e.preventDefault();
  $('input:checked').each(function() {
    if ($(this).val() == 'right') {
      r += 1;
    }
  })
  var fs = (r / tr) * m;
  $('#as').html(fs);
});

demo

$('#sub').click(function(e) {
  var r = 0;
  var tr = 2;
  var m = 100;
  var fs;
  e.preventDefault();
  $('input:checked').each(function() {
    if ($(this).val() == 'right') {
      r += 1;
    }
  })
  var fs = (r / tr) * m;
  $('#as').html(fs);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='col-sm-12 col-md-6 col-lg-4 text-center'>
  <p class='question'>Which version of IE supports SSE?</p>
  <div class='form-check'>
    <input class='form-check-input' type='radio' name='htmlq9a1'>
    <label class='form-check-label' for='htmlq9a'>Internet explorer 10+</label>
  </div>
  <div class='form-check'>
    <input class='form-check-input' type='radio' name='htmlq9a1'>
    <label class='form-check-label' for='htmlq9a'>Internet explorer 9+</label>
  </div>
  <div class='form-check'>
    <input class='form-check-input' type='radio' name='htmlq9a1'>
    <label class='form-check-label' for='htmlq9a'>Internet explorer 8+</label>
  </div>
  <div class='form-check'>
    <input class='form-check-input' type='radio' name='htmlq9a1' value='right'>
    <label class='form-check-label' for='htmlq9a'>Internet explorer does not support SSE.</label>
  </div>
</div>
<div class='col-sm-12 col-md-6 col-lg-4 text-center'>
  <p class='question'>Which version of IE supports SSE?</p>
  <div class='form-check'>
    <input class='form-check-input' type='radio' name='htmlq9a2'>
    <label class='form-check-label' for='htmlq9a'>Internet explorer 10+</label>
  </div>
  <div class='form-check'>
    <input class='form-check-input' type='radio' name='htmlq9a2'>
    <label class='form-check-label' for='htmlq9a'>Internet explorer 9+</label>
  </div>
  <div class='form-check'>
    <input class='form-check-input' type='radio' name='htmlq9a2'>
    <label class='form-check-label' for='htmlq9a'>Internet explorer 8+</label>
  </div>
  <div class='form-check'>
    <input class='form-check-input' type='radio' name='htmlq9a2' value='right'>
    <label class='form-check-label' for='htmlq9a'>Internet explorer does not support SSE.</label>
  </div>
</div>

<button id="sub">sub</button>
<div id="as"></div>

Upvotes: 0

Related Questions