javascript - 编写代码对我用 Javascript 创建的测验进行评分-6ren

javascript - 编写代码对我用 Javascript 创建的测验进行评分

转载作者：行者123 更新时间：2023-11-28 16:03:15

我正在尝试自学代码，目前我正忙于我正在开发的一个小型项目。我相信我已经制定了 HTML 代码；然而，我很难让 Javascript/jQuery 做我想做的事情。

我希望 Javascript/jQuery 对我的测验进行评分并将分数打印在不同的页面上。我不确定我的语法是否错误或者我是否进行了错误的调用或者...？

这是 HTML:

<body>

<div class="center">

<div id="questionContainer">

<div id="header">
<h1>State Capitol Quiz</h1>
</div>

<div id="left">

<form action="quiz.html" class="container">
<div class="blank">
<br />
    <br />
    <p id="one">1.&nbsp; &nbsp;&nbsp;&nbsp;What is the capitol of Michigan?<br />
        <div class="tab">
            <input type="radio" name="question" value="A" />&nbsp;Lansing<br />
            <input type="radio" name="question" value="B" />&nbsp;Richmond<br />
            <input type="radio" name="question" value="C" />&nbsp;Austin<br />
            <input type="radio" name="question" value="D" />&nbsp;Columbus<br />
        </div>
    </p>
</div>
</form>

<form action="quiz.html" class="container">
<div class="blank">
<br />
<br />
    <p id="two">2.&nbsp; &nbsp;&nbsp;&nbsp;What is the capitol of Virginia?<br />
       <div class="tab">
        <input type="radio" name="question" value="A" />&nbsp;Lansing<br />
        <input type="radio" name="question" value="B" />&nbsp;Richmond<br />
        <input type="radio" name="question" value="C" />&nbsp;Lincoln<br />
        <input type="radio" name="question" value="D" />&nbsp;Reno<br />
      </div>
    </p>
</div>
</form>

<form action="quiz.html" class="container">
<div class="blank">
<br />
<br />
    <p id="three">3.&nbsp; &nbsp;&nbsp;&nbsp;What is the capitol of Arkansas?<br />
        <div class="tab">  
            <input type="radio" name="question" value="A" />&nbsp;Dallas<br />
            <input type="radio" name="question" value="B" />&nbsp;Lincoln<br />
            <input type="radio" name="question" value="C" />&nbsp;Little Rock<br />
            <input type="radio" name="question" value="D" />&nbsp;Cheyene<br />
        </div>
    </p>
</div>
</form>

<form action="quiz.html" class="container">
<div class="blank">
<br />
<br />
    <p id="four">4.&nbsp; &nbsp;&nbsp;&nbsp;What is the capitol of Arizona?<br />
        <div class="tab"> 
            <input type="radio" name="question" value="A" />&nbsp;Juneau<br />
            <input type="radio" name="question" value="B" />&nbsp;Honolulu<br />
            <input type="radio" name="question" value="C" />&nbsp;Pheonix<br />
            <input type="radio" name="question" value="D" />&nbsp;Toledo<br />
        </div>
    </p>
</div>
</form>

<form action="quiz.html" class="container">
<div class="blank">
<br />
<br />
    <p id="five">5.&nbsp; &nbsp;&nbsp;&nbsp;What is the capitol of Florida?<br /> 
        <div class="tab"> 
            <input type="radio" name="question" value="A" />&nbsp;Oakland<br />
            <input type="radio" name="question" value="B" />&nbsp;Kansas City<br />
            <input type="radio" name="question" value="C" />&nbsp;Tallahassee<br />
            <input type="radio" name="question" value="D" />&nbsp;Miami<br />
    </div>
    </p>
</div>
</form>

<form action="quiz.html" class="container">
<div class="blank">
<br />
<br />
    <p id="six">6.&nbsp; &nbsp;&nbsp;&nbsp;What is the capitol of Nebraska?<br />
        <div class="tab">  
            <input type="radio" name="question" value="A" />&nbsp;Omaha<br />
            <input type="radio" name="question" value="B" />&nbsp;Lincoln<br />
            <input type="radio" name="question" value="C" />&nbsp;Sacramento<br />
        <input type="radio" name="question" value="D" />&nbsp;Sab Diego<br />
        </div>
    </p>
</div>
</form>
</div>

<div id="right">
<form action="quiz.html" class="container">
<br />
<br />
<div class="blank">
    <p id="seven">7.&nbsp; &nbsp;&nbsp;&nbsp;What is the capitol of Texas?<br />
        <div class="tab">    
            <input type="radio" name="question" value="A" />&nbsp;Fortworth<br />
            <input type="radio" name="question" value="B" />&nbsp;Richmond<br />
            <input type="radio" name="question" value="C" />&nbsp;Austin<br />
            <input type="radio" name="question" value="D" />&nbsp;Las Vegas<br />
        </div>
    </p>
</div>
</form>

<form action="quiz.html" class="container">
<div class="blank">
    <p id="eight">8.&nbsp; &nbsp;&nbsp;&nbsp;What is the capitol of Alaska?<br />
        <div class="tab">   
            <input type="radio" name="question" value="A" />&nbsp;Tulsa<br />
            <input type="radio" name="question" value="B" />&nbsp;Oaklahoma City<br />
            <input type="radio" name="question" value="C" />&nbsp;Austin<br />
        <input type="radio" name="question" value="D" />&nbsp;Juneau<br />
        </div>
    </p>
</div>
</form>

<form action="quiz.html" class="container">
<div class="blank">
    <p id="nine">9.&nbsp; &nbsp;&nbsp;&nbsp;What is the capitol of Hawaii?<br /> 
        <div class="tab"> 
            <input type="radio" name="question" value="A" />&nbsp;Paris<br />
            <input type="radio" name="question" value="B" />&nbsp;Honolulu<br />
            <input type="radio" name="question" value="C" />&nbsp;Austin<br />
            <input type="radio" name="question" value="D" />&nbsp;Cadilac<br />
        </div>
    </p>
</div>
</form>

<form action="quiz.html" class="container">
<div class="blank">
    <p id="ten">10.&nbsp; &nbsp;&nbsp;&nbsp;What is the capitol of Ohio?<br />
        <div class="tab">   
            <input type="radio" name="question" value="A" />&nbsp;Cleveland<br />
            <input type="radio" name="question" value="B" />&nbsp;Green Bay<br />
            <input type="radio" name="question" value="C" />&nbsp;Austin<br />
            <input type="radio" name="question" value="D" />&nbsp;Columbus<br />
        </div>
    </p>
</div>
</form>

<div id="buttonDiv">        
    <input type="button" id="button" value="submit" />
</div>


</div>

</div>

</div>

<div class="center">

<div id="answerSheet">
    <p id="score"><h1>Your Score!</h1></p>
    <br />
    <p>Results:</p>
 </div>

</div>

</body>

这是 Javascript/jQuery:

$(document).ready(function(){
$("#button").click(function(){
$("#questionContainer").fadeOut("slow",function(){
    $("#answerSheet").fadeIn("slow",function(){
    });
});

var numQues= 10;
var numChoices= 4;
var answers = new Array(10);

answers[0] = "Lansing";
answers[1] = "Richmond";
answers[2] = "Little Rock";
answers[3] = "Pheonix";
answers[4] = "Tallahassee";
answers[5] = "Lincoln";
answers[6] = "Austin";
answers[7] = "Juneau";
answers[8] = "Honolulu";
answers[9] = "Columbus";

function getScore(form){
var score = 0;
var currElt;
var currSelection;
for(i = 0; i<numQues; i++){
    currElt = i * numChoi;
    for(j = 0; j<numChoi; j++){
        currSelection = form.elements[currElt + j];
        if(currSelection.checked){
            if(currSelection.value == answers[i]){
                score++;
                break;
            }
        }
    }
}

score = math.round(score/numQues * 100);
form.precentage.value = score + "&#37;";
var corrAnswers = "";
for(i = 1; i <numQues; i++){
    corrAnswers += i + "." + answers [i - 1] + "\r\n;"
}
form.solutions.value = corrAnswers/numQues * 100 + "%";}

});
});

谢谢

最佳答案

这里有一个使用 HTML 结构和 jQuery 的方法来帮助您:

工作演示:http://jsfiddle.net/jfriend00/Dkdrh/

点击问题的答案(正确或错误)，然后点击下面的“分数”按钮，让它为您计算分数。代码如下:

// text value and then question answer value
var answers = [
    "Lansing", "A",
    "Richmond", "B",
    "Little Rock", "C",
    "Phoenix", "C",
    "Tallahassee", "C",
    "Lincoln", "B",
    "Austin", "C",
    "Juneau", "D",
    "Honolulu", "B",
    "Columbus", "D"
];

function calcScore() {
    var results = {right: 0, wrong: 0, answered: [], unanswered: [], missed: []};
    $("form .tab").each(function(index) {
        var chosen = $(this).find("input:checked");
        if (chosen.length) {
            results.answered.push(index);
            if (chosen.val() == answers[(index * 2) + 1]) {
                results.right++;
                results.answered.push(index);
            } else {
                results.wrong++;
                results.missed.push(index);
            }
        } else {
            results.unanswered.push(index);
        }
    });
    return(results);
}

$("#buttonDiv").click(function() {
    var results = calcScore();
    var str = "Correct: " + results.right + ", Wrong: " + results.wrong + ", Unanswered: " + results.unanswered.length;
    $("#results").html(str);
});

关于代码的一些注释:

答案存储在一个包含文本值和字母值的数组中，以便于比较。您可以使用 2 * index 获取文本答案，使用 (2 * index) + 1 获取答案的字母值。
calcScore() 函数会返回正确的数字、错误的数字、未回答的数字以及回答正确、回答错误和未回答问题的数组。
calcScore() 函数使用 HTML 结构自动跟踪问题编号。

<小时/>

我没有完全遵循您尝试对代码执行的操作，但我看到的一个大问题是您将答案数组中的文本值与 radio 的 .value 进行比较按钮，但单选按钮值设置为 "A"、"B"、"C" 和 "D" 因此它们永远不会与您数组中的文本匹配。

<小时/>

仅供引用，如果您想了解在 HTML 中使用更自然格式的不同方式，请参阅此处的 HTML 和 CSS:http://jsfiddle.net/jfriend00/H26c8/ 。提示:它使用有序列表来自动对有序问题列表进行编号。

关于javascript - 编写代码对我用 Javascript 创建的测验进行评分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16180805/

文章推荐： html - bootstrap 颜色是如何工作的？

文章推荐： HTML CSS 格式化

文章推荐： javascript - 使用 jquery 从 HTML 表中提取数据

JavaScript 测验
我知道这曾经是一个话题，但搜索后我找不到答案 - 也许我的问题太基本了。不过，我正在创建一个 html 测验 - 5 页，分数从一页到下一页，然后在最后评分。这是我正在尝试使用的代码，但它根本不起作
JavaScript 测验？
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便
Php在单选按钮上显示随机记录[测验]
我正在做一个简单的 php 问答游戏。我将问题和答案存储在数据库中。我的 tblQuiz 的表结构是这样的: _id, question, answer1, answer2, answer3, cor
javascript - 测验，他们的答案错了吗？
我在考试中遇到了这个问题。以下不正确 javascript 代码的输出是什么？错误是什么？ num=0; if (num > 10); { num = num + 10; } alert(n
JavaScript 测验 Valadition
我在 JavaScript 中验证 4 个问题多项选择测验时似乎遇到了一些问题。现在，如果没有选择任何答案，则会弹出警报，但即使只选择了一个答案，警报也不会弹出。我正在将我的函数作为提交按钮的 onc
javascript - 允许单独的正确答案，测验
我正在尝试使用 JavaScript 构建一个问答游戏。测验答案存储在变量中，如下所示: var correctAnswer = $('#createCorrectAnswer').val(); 然
包含多个问题的 JavaScript 测验
下面我做了一个小测验，有 4 个问题，问题 2,3 和 4 被 CSS 隐藏了，但是你可以尝试从 CSS 中删除样式 (".pytja2, .pytja3, .pytja4 { display: no
Java 测验 - 正确时不接受用户输入
private void startGame() { System.out.println("Exercises must be completed as quickly as pos
Javascript 测验，因此当它达到完整的问题循环时就会停止
这听起来像是我之前问过的问题，但它只得到了部分回答。所以我想从我提出的问题开始。然后，一旦到达最后一个问题(#5)，它就会返回到第一个问题(#1)，当到达起始问题时，它将停止。我尝试在以下代码中执行此
C 测验错误发现
愚蠢的问题，但我的教授不回复电子邮件，所以我在这里问。我现在正在复习期末考试，并且正在复习期中考试来学习。现在，这真的很愚蠢，因为我两个月前就答对了这个问题。但对于我的一生来说，现在回想起来，我无法弄
Javascript 测验 - 如何计算多个选择元素中答案的分数？
我无法编写一个循环来计算我为我的 wordpress 网站创建的测验的分数。测验样式是“将 A 列中的项目与 B 列中的项目进行匹配”。 B 列项目使用选择元素来匹配 A 列中的相应项目。我能想到
javascript - 测验 - if 语句
为什么选择不正确单选选项时，if语句中的else仍然出现？ else 部分只应在未选择单选按钮时出现。真正的结果是下一个问题和可能的答案出现。这是 jsfiddle .我做错了什么？ function
javascript - 测验 - 计算单选按钮值
我正在尝试为西类牙语类(class)创建测验。我对 JavaScript 经验不多，但对 html 和 CSS 相当精通。我有一个问题，然后是三个带答案的单选按钮。有两个错误答案和一个正确答案。我总共
Python 测验 - 如何接受大多数正确答案
我正在编写一个允许用户设置个人测验的程序(如记事卡式系统)。参加测验时，用户会在每个问题上计时。虽然答案不会是多项选择，但它们将由用户输入。有没有一种方法可以让我充分接受那些不是他们第一次设置测验时
带有屏幕结果的 PHP 测验
我正在尝试根据找到的教程创建一个简单的测验。 http://css-tricks.com/building-a-simple-quiz/ 不幸的是，这让我无法自拔，答案可能非常简单。我让这个工作完美
sql - 有趣的 SQL 测验
最近我遇到了以下测验。想象一下我们有这张 table +--------+ | colors | +--------+ | red | | black | | white | | green
jquery - W3Schools jQuery 测验
这里的 W3Schools 网站上发布了一个 jQuery 测验... http://www.w3schools.com/quiztest/quiztest.asp?qtest=jQuery 问题#1
javascript - 带有错误行为的单选按钮的 jQuery 测验
我正在写一个简单的在线测验。有四个单选按钮作为选择。最初，脚本仅填充第一个问题的选项。之后，用户应该选择下一个并单击按钮。如果答案与正确的匹配，则总数递增。否则，将加载下一个问题。提交第 10 个问题
Haskell 测验 : a simple function
我不是 Haskell 程序员，但我对以下问题感到好奇。非正式函数规范: 令 MapProduct 为一个函数，它采用名为 F 的函数和多个列表。它返回一个列表，其中包含使用每个可能组合中每个列表中
javascript - 如何创建高级 html 测验
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 6 年前。 Improve this ques

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 编写代码对我用 Javascript 创建的测验进行评分