php - 多项选择题歪曲总分统计-6ren

php - 多项选择题歪曲总分统计

转载作者：可可西里更新时间：2023-10-31 23:26:55

我已经创建了一个分步测试(下面的 fiddle 示例)，它并没有完全正确地计算总数。如果所有问题都有一个答案，它会很好地工作，但是当一个问题有多个答案时，它会给出一个奇怪的结果。

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

对于多项选择题 - 当两个答案中只有一个正确时，底部的进度方 block 会变为绿色(当您单击下一步时)，只有当两个答案都正确时，它才应该是绿色的，如果不正确那么它应该是红色的。

第二个问题是，如果您正确回答了所有问题，那么最终得分为 7 分……而实际上应该是 5 分(选择题每个答案应加 1 分)。 (如果你检查 fiddle ，你可以看到当点击底部隐藏字段中的下一个按钮时更新的总数)

我哪里错了？

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 的回答，它引起了一个额外的问题:

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

最佳答案

我稍微看了看代码并简化了以下部分:

$('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) 和总计检查答案的数量 (totalCheckedAnswers)。您可能不需要最后一次检查，因为您禁用了复选框。

对于每个步骤，都有一个简单的检查来查看所选答案的总数是否等于预期的数量。如果它们匹配，则分数增加 1，并且进度方 block 获得适当的颜色。之前一直搞不清楚问题所在，不过貌似你只选了第一个正确勾选的答案

关于php - 多项选择题歪曲总分统计，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55852566/

文章推荐： json - REST API 测试 : HTTP Post returns 500 with Frisby. js

文章推荐： javascript - 使用 .hide() 隐藏导航栏

文章推荐： html - Bootstrap 固定导航在滚动时跳转

php - 输出 PHP 分隔符 ()，PHP 不解释分隔符
我在 JavaScript 文件中运行 PHP，例如...... var = '';). 我需要使用 JavaScript 来扫描字符串中的 PHP 定界符(打开和关闭 PHP 的 )。我已经知道使
php - PHP 是否具有确定与给定 PHP 脚本兼容的最旧 PHP 版本的内置方法？还是会永远？
我希望能够做这样的事情: php --determine-oldest-supported-php-version test.php 并得到这个输出: 7.2 也就是说，php 二进制检查 test.
php - 在没有 php 框架的情况下将 php 框架用于现有的 php 应用程序是个好主意吗？
我正在开发一个目前不使用任何框架的大型 php 站点。我的大问题是，随着时间的推移慢慢尝试将框架融入应用程序是否可取，例如在创建的新部件和更新的旧部件中？比如所有的页面都是直接通过url服务的，有几
php - 如何在同一 php 页面上的其他 php 脚本中使用 php 变量
下面是我的源代码，我想在同一页面顶部的另一个 php 脚本中使用位于底部 php 脚本的变量 $r1。我需要一个简单的解决方案来解决这个问题。我想在代码中存在的更新查询中使用该变量。 $name)
php - PHP 重定向后 PHP 是否继续执行？
我正在制作一个网站，根据不同的情况进行大量 PHP 重定向。就像这样...... header("Location: somesite.com/redirectedpage.php"); 为了安全起见
php - 如何避免在 php 文件中写入
我有一个旧网站，我的 php 标签从因为短标签已经显示出安全问题，并且在未来的版本中将不被支持。关于php - 如何避免在 php 文件中写入

php - 需要建议通过 php 编辑 php
我有一个用 PHP 编写的配置文件，如下所示，所以我想用PHP开发一个接口(interface)，它可以编辑文件值，如$WEBPATH , $ACCOUNTPATH和 const值(value)观
php - 无法发布 “PHP file” PHP
我试图制作一个登录页面来学习基本的PHP，首先我希望我的独立PHP文件存储HTML文件的输入(带有表单)，但是当我按下按钮时(触发POST到PHP脚本) )我一直收到令人不愉快的错误。我已经搜索了S
php - PHP 是否有生成有效 PHP 表达式的打印函数？
我正在寻找一种让 PHP 以一种形式打印任意数组的方法，我可以将该数组作为赋值包含在我的(测试)代码中。 print_r 产生例如: Array ( [0] => qsr-part:1285 [1]
php - PHP 数组键有大小限制吗？ PHP 数组一般有哪些限制？
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: What is the max key size for an array in PHP? 正如标题所说，我想知道
php - PHP 是否有生成有效 PHP 表达式的打印函数？
我正在寻找一种让 PHP 以一种形式打印任意数组的方法，我可以将该数组作为赋值包含在我的(测试)代码中。 print_r 产生例如: Array ( [0] => qsr-part:1285 [1]
php - 让函数在 php 刷新时执行 (PHP)
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 9 年前。 Improve this ques
php - 按时间段显示菜单 PHP PHP MySQL
我在 MySQL 数据库中有一个表，其中存储餐厅在每个工作日和时段提供的菜单。表结构如下: i_type i_name i_cost i_day i_start i_
php - 将参数发送到嵌套在 PHP 页面内的动态 PHP
我有两页。 test1.php 和 test2.php。我想做的就是在 test1.php 上点击提交，并将 test2.php 显示在 div 中。这实际上工作正常，但我需要向 test2.php
php - 文本区域 -> php -> mysql -> php
我得到了这个代码。我想通过textarea更新mysql。我在textarea中回显我的MySQL，但我不知道如何更新它，我应该把所有东西都放进去吗，因为_GET模式没有给我任何东西，我也尝试_GET
php - 我如何将一个 php 的值解析为另一个 php
首先，我是 php 的新手，所以我仍在努力学习。我在 Wordpress 上创建了一个表单，我想将值插入一个表(data_test 表，我已经管理了)，然后从 data_test 表中获取所有列(id
php - php 中的安全首选项、php 函数来清理输入
我有以下函数可以清理用户或网址的输入: function SanitizeString($var) { $var=stripslashes($var); $va
php - HTML/PHP 登录重定向到 php
我有一个 html 页面，它使用 php 文件查询数据库，然后让用户登录，否则拒绝访问。我遇到的问题是它只是重定向到 php 文件的 url，并且从不对发生的事情提供反馈。这是我第一次使用 html、
php - onClick php PHP 函数然后重定向
我有一个页面充满了指向 pdf 的链接，我想跟踪哪些链接被单击。我以为我可以做如下的事情，但遇到了问题: query($sql); if($result){
php - 有没有办法从 PHP 代码加载的文件中解析 PHP？
我正在使用从外部文本文件加载 HTML/PHP 代码 $f = fopen($filename, "r"); while ($line = fgets($f, 4096)) { print $l

可可西里

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

php - 多项选择题歪曲总分统计