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/
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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="row test">
<div class="columns">
<div class="entry">
<form class="form" method="POST" action="http://example.com/test-insert.php">
<input type="hidden" value="teamworks" name="test-user">
<input type="hidden" value="Introduction" name="test-name">
<div class="form-row">
<h1>Quiz | Introduction</h1>
<div class="clear"></div>
<div id="module-area">
<div id="modules-top"></div>
<div id="modules-repeat">
<h2 class="training">1. Question 1</h2>
<div class="question" data-max-answers="1">
<div style="display:table-row;">
<div style="display:table-cell;">
<input class="correct correct-answer" data-progress="1" style="width: 20px;" type="checkbox" name="answer[]" value="Answer 1">
</div>
<div style="display:table-cell;">
<p>
Answer 1 </p>
</div>
</div>
<div style="display:table-row;">
<div style="display:table-cell;">
<input class="correct " data-progress="1" style="width: 20px;" type="checkbox" name="answer[]" value="Answer 2">
</div>
<div style="display:table-cell;">
<p>
Answer 2 </p>
</div>
</div>
<div style="display:table-row;">
<div style="display:table-cell;">
<input class="correct " data-progress="1" style="width: 20px;" type="checkbox" name="answer[]" value="Answer 3">
</div>
<div style="display:table-cell;">
<p>
Answer 3 </p>
</div>
</div>
</div>
<div class="inner"></div>
<button class="next">Next >></button>
<div class="clear"></div>
</div>
<div id="modules-bottom"></div>
</div>
</div>
<div class="form-row" style="display: none;">
<h1>Quiz | Introduction</h1>
<div class="clear"></div>
<div id="module-area">
<div id="modules-top"></div>
<div id="modules-repeat">
<h2 class="training">2. Question 2</h2>
<div class="question" data-max-answers="2">
<div style="display:table-row;">
<div style="display:table-cell;">
<input class="correct correct-answer" data-progress="2" style="width: 20px;" type="checkbox" name="answer[]" value="Answer 1">
</div>
<div style="display:table-cell;">
<p>
Answer 1 </p>
</div>
</div>
<div style="display:table-row;">
<div style="display:table-cell;">
<input class="correct correct-answer" data-progress="2" style="width: 20px;" type="checkbox" name="answer[]" value="Answer 2">
</div>
<div style="display:table-cell;">
<p>
Answer 2 </p>
</div>
</div>
<div style="display:table-row;">
<div style="display:table-cell;">
<input class="correct " data-progress="2" style="width: 20px;" type="checkbox" name="answer[]" value="Answer 3">
</div>
<div style="display:table-cell;">
<p>
Answer 3 </p>
</div>
</div>
</div>
<div class="inner"></div>
<button class="next">Next >></button>
<div class="clear"></div>
</div>
<div id="modules-bottom"></div>
</div>
</div>
<div class="form-row" style="display: none;">
<h1>Quiz | Introduction</h1>
<div class="clear"></div>
<div id="module-area">
<div id="modules-top"></div>
<div id="modules-repeat">
<h2 class="training">3. Question 4</h2>
<div class="question" data-max-answers="1">
<div style="display:table-row;">
<div style="display:table-cell;">
<input class="correct correct-answer" data-progress="3" style="width: 20px;" type="checkbox" name="answer[]" value="Answer 1">
</div>
<div style="display:table-cell;">
<p>
Answer 1 </p>
</div>
</div>
<div style="display:table-row;">
<div style="display:table-cell;">
<input class="correct " data-progress="3" style="width: 20px;" type="checkbox" name="answer[]" value="Answer 2">
</div>
<div style="display:table-cell;">
<p>
Answer 2 </p>
</div>
</div>
<div style="display:table-row;">
<div style="display:table-cell;">
<input class="correct " data-progress="3" style="width: 20px;" type="checkbox" name="answer[]" value="Answer 3">
</div>
<div style="display:table-cell;">
<p>
Answer 3 </p>
</div>
</div>
</div>
<div class="inner"></div>
<button class="next">Next >></button>
<div class="clear"></div>
</div>
<div id="modules-bottom"></div>
</div>
</div>
<div class="form-row" style="display: none;">
<h1>Quiz | Introduction</h1>
<div class="clear"></div>
<div id="module-area">
<div id="modules-top"></div>
<div id="modules-repeat">
<h2 class="training">4. Question 5</h2>
<div class="question" data-max-answers="1">
<div style="display:table-row;">
<div style="display:table-cell;">
<input class="correct correct-answer" data-progress="4" style="width: 20px;" type="checkbox" name="answer[]" value="Answer 1">
</div>
<div style="display:table-cell;">
<p>
Answer 1 </p>
</div>
</div>
<div style="display:table-row;">
<div style="display:table-cell;">
<input class="correct " data-progress="4" style="width: 20px;" type="checkbox" name="answer[]" value="Answer 2">
</div>
<div style="display:table-cell;">
<p>
Answer 2 </p>
</div>
</div>
<div style="display:table-row;">
<div style="display:table-cell;">
<input class="correct " data-progress="4" style="width: 20px;" type="checkbox" name="answer[]" value="Answer 3">
</div>
<div style="display:table-cell;">
<p>
Answer 3 </p>
</div>
</div>
</div>
<div class="inner"></div>
<button class="next" style="display: none;">Next >></button>
<div class="clear"></div>
</div>
<div id="modules-bottom"></div>
</div>
<input class="check" type="submit"></div>
<div class="quiz-progress">
<div class="quiz-progress-circle" data-progress="1"></div>
<div class="quiz-progress-circle" data-progress="2"></div>
<div class="quiz-progress-circle" data-progress="3"></div>
<div class="quiz-progress-circle" data-progress="4"></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 class="clear"></div>
</div>
</div>
</section>
This is the php file it calls on submit. The variable $score comes from the hidden field with the name test-score that is tallied up by the jquery variable score.
<?php
$score = $_POST["test-score"];
$pass_msg = $_POST["test-pass"];
if ($score >= $pass_msg) {
$pass_txt = "Pass";
} else {
$pass_txt = "Fail";
}
// Opens a connection to a MySQL server
$username="root";
$password="root";
$database="local";
$host="localhost";
$con = mysqli_connect($host, $username, $password);
if (!$con)
{
die('Could not connect: ' . mysqli_error());
}
mysqli_select_db($con, "local");
$user = $_POST["test-user"];
$testid = $_POST["test-id"];
$sql = mysqli_query($con, "INSERT INTO test (`name`, `testname`, `score`, `pass-fail`) VALUES ('".$user."', '".$testid."', '".$score."', '".$pass_txt."')");
if (!$sql)
{
die('Error: ' . mysqli_error());
}
mysqli_close($con);
header('Location: http://example.com/training/introduction/');
?>
from Multiple choice question skewing the total points tally
