HTML5 and jQuery Quiz logic

Question

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);

label's for attribute points to an id, not a class.

Hikarunomemory
– Hikarunomemory

2018-05-03 10:16:48 +00:00
Commented May 3, 2018 at 10:16 — Hikarunomemory
– Hikarunomemory, Commented May 3, 2018 at 10:16
Twitter Bootstrap 4

Rickie Knight
– Rickie Knight

2018-05-03 10:18:34 +00:00
Commented May 3, 2018 at 10:18 — Rickie Knight
– Rickie Knight, Commented May 3, 2018 at 10:18

Markus · Accepted Answer · 2018-05-03 10:24:12Z

1

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

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

answered May 3, 2018 at 10:24

Markus

135 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rickie Knight Over a year ago

Ooo, nice. May use next time.

Chirag Ravindra · Accepted Answer · 2018-05-03 10:22:09Z

There were a few problems that needed fixing:

You were updating the result div before the click happened. Moved the code which updates the result div into the click handler
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>

Carsten Løvbo Andersen · Accepted Answer · 2018-05-03 10:18:14Z

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>

PPL · Accepted Answer · 2018-05-03 10:26:48Z

0

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

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

answered May 3, 2018 at 10:26

PPL

6,5551 gold badge13 silver badges32 bronze badges

Collectives™ on Stack Overflow

HTML5 and jQuery Quiz logic

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related