多项选择题歪曲总积分

Question

我创建了一个分步测试（下面的小示例），它不能完全正确地合计总数。如果所有问题都有一个答案，这很好用，但是当一个问题有多个答案时，它会给出一个奇怪的提示。

（所有问题的答案都是第一个复选框，除了“选择2”（即多项选择问题，即前2个复选框）

对于多项选择题-当两个答案中只有一个正确时（当您单击下一步时），底部的进度栏将变为绿色，如果两个答案均正确，则该进度栏应变为绿色（如果不正确）那么应该是红色。

第二个问题是，如果您正确回答了所有问题，则最终分数为7 ...而该分数应为5（多项选择题应为每个答案加1分）。 （如果您检查小提琴，则可以在底部的隐藏字段中单击下一步时看到更新的总数）

我要去哪里错了？

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 &gt;&gt;</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 &gt;&gt;</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 &gt;&gt;</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 &gt;&gt;</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>

这是它在提交时调用的php文件。变量$score来自名称为test-score的隐藏字段，该字段由jquery变量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/');
?>

---

感谢@viorel的回答，这引起了另一个问题：

它应该仅在最后一个问题上显示第二个提交按钮...它应该提交表单，但不将问题计入分数。

Answer 1

我看了一下代码并简化了以下代码：

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

    var correctAnswers = $(this).siblings().find('.correct-answer').length;
    var totalUserCorrectAnswers = $(this).siblings().find('.correct-answer:checked').length;
    var totalCheckedAnswers = $(this).siblings().find('input:checked').length;

    var item = $(this).parents('div.form-row').find('.correct:first').data('progress');
    var resultBubble = $('.quiz-progress-circle[data-progress="' + item + '"]');

    if(correctAnswers === totalUserCorrectAnswers  && totalUserCorrectAnswers === totalCheckedAnswers) {
        resultBubble.removeClass("progress-incorrect");
        resultBubble.addClass("progress-correct");

        score += 1;
    } else {
        resultBubble.removeClass("progress-correct");
        resultBubble.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);
});

我添加了三个控制变量：预期的正确答案总数（correctAnswers），用户选择的正确答案数目（totalUserCorrectAnswers）和已检查的答案总数（{ {1}}）。您可能不需要最后一项检查，因为您正在禁用复选框。

对于每个步骤，都有一个简单的检查来查看所选答案的总数是否等于预期的数目。如果它们匹配，则分数将增加一，并且进度方块将获得适当的颜色。我之前无法弄清楚到底是什么问题，但看来您只是在选择第一个正确的已检查答案

Answer 2

要回答第二个问题，

score += Number(score+1);

这将每次加2，而不是1。将其更改为：

score++;

对于第一个问题，当只有一个答案正确时，单击button.next时的if函数为true。解决方法可能是定义一个变量（绿色= 1）。然后为每个.correct运行jQuery Each。在“每个循环”中，如果它具有类正确答案但未选中，则将绿色更改为0。此外，如果选中了不包含“正确答案”的“正确”，则还将变量绿色更新为0。

在每个循环之后，然后使用变量“绿色”的值来确定进度方块是否应为绿色。