#StackBounty: #php #jquery Multiple choice question skewing the total points tally

Bounty: 100

I’ve created a step by step test (fiddle example below) that doesn’t quite tally up the total correctly. It works fine if all questions have one answer but when there’s multiple answers for a single question it gives a strange tally.

(All answers to the questions are the first checkbox except for “Question 2”, the multiple choice question, which is the first 2 checkboxes)

For the multiple choice question – the progress squares at the bottom change green when only one of the two answers is correct (when you click next), it should only be green when both are checked correctly, if not correct then it should be red.

The second issue is that if you answer all questions correctly then the final score is 7… when it should be 5 (multiple choice questions should add 1 point per answer). (If you inspect the fiddle, you can see the total being updated when the next button is clicked in the hidden field at the bottom)

Where am I going wrong?

http://jsfiddle.net/rob_teamworks/vebcsjw0/

<

div class=”snippet” data-lang=”js” data-hide=”false” data-console=”true” data-babel=”false”>

<

div class=”snippet-code”>

jQuery(function($) {
$(document).ready(function() {

  // hide all form-rows, but not the first one
  $('.form-row').not(':first').hide();

  // hide on last step
  $('button.next').last().hide();

var score = 0;
  $('button.next, input.check').click(function(e) {
    // prevent the next buttons from submitting the form
    e.preventDefault();

        var item = $(this).parents('div.form-row').find('.correct:first').data('progress');
    if ($(this).parents('div.form-row').find('.correct:first').is(":checked") && $(this).parents('div.form-row').find('.correct:first').hasClass('correct-answer')) {
            $('.quiz-progress-circle[data-progress="' + item + '"]').removeClass("progress-incorrect");
            $('.quiz-progress-circle[data-progress="' + item + '"]').addClass("progress-correct");
            score += Number(score+1);
        } else {
            $('.quiz-progress-circle[data-progress="' + item + '"]').removeClass("progress-correct");
      $('.quiz-progress-circle[data-progress="' + item + '"]').addClass("progress-incorrect");
    }

    // hide this form-row, and show the next one
    $(this).parents('div.form-row').hide().next('div.form-row').show();
        $('.finalscore').val(score);
    });

    // add the submit button to the last form-row
  $('<input>').addClass('check').prop('type', 'submit').appendTo($('.form-row:last'));

});
});


jQuery(function($) {
$(document).ready(function () {
    $("input[type=checkbox].correct").click(function (e) {
        if ($(e.currentTarget).closest("div.question").length > 0) {
            toggleInputs($(e.currentTarget).closest("div.question")[0]);
        }
    });
});

function toggleInputs(questionElement) {
    if ($(questionElement).data('max-answers') == undefined) {
        return true;
    } else {
        maxAnswers = parseInt($(questionElement).data('max-answers'), 10);
        if ($(questionElement).find(".correct:checked").length >= maxAnswers) {
            $(questionElement).find(".correct:not(:checked)").attr("disabled", true);
        } else {
            $(questionElement).find("input[type=checkbox].correct").attr("disabled", false);
        }
    }
}
});
.quiz-progress-circle {
    height:5px;
    width:5px;
    background-color:grey;
    display:inline-block;
    margin-right:10px;
}

.progress-correct {
    background-color:green!important;
}

.progress-incorrect {
    background-color:red!important;
}

.progress-current {
    background-color:blue!important;    
}
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js

<section class="row test">
                

Quiz | Introduction

1. Question 1

Answer 1
</div>
Answer 2
</div>
Answer 3
</div> </div>
<button class="next">Next &gt;&gt;</button>
</div>
</div> </div>

Quiz | Introduction

2. Question 2

Answer 1
</div>
Answer 2
</div>
Answer 3
</div> </div>
<button class="next">Next &gt;&gt;</button>
</div>
</div> </div>

Quiz | Introduction

3. Question 4

Answer 1
</div>
Answer 2
</div>
Answer 3
</div> </div>
<button class="next">Next &gt;&gt;</button>
</div>
</div> </div>

Quiz | Introduction

4. Question 5

Answer 1
</div>
Answer 2
</div>
Answer 3
</div> </div>
<button class="next" style="display: none;">Next &gt;&gt;</button>
</div>
</div> <input class="check" type="submit"></div>
</div> <input type="hidden" value="236" name="test-id"> <input class="finalscore" type="hidden" value="" name="test-score"> <input type="hidden" value="2" name="test-pass"> </form>
</div> </div> </section>