编写代码给我用Javascript创建的测验打分_Javascript_Jquery

编写代码给我用Javascript创建的测验打分

javascript jquery

编写代码给我用Javascript创建的测验打分,javascript,jquery,Javascript,Jquery,我正在尝试自学代码，目前我正忙于一个小型项目。我相信我已经完成了HTML代码的编写；但是，我很难让Javascript/jQuery实现我希望它实现的功能我希望Javascript/jQuery为我的测验打分，并将分数打印在不同的页面上。我不确定我的语法是否错误，或者我是否打错了电话，或者以下是HTML： <body> <div class="center"> <div id="questionContainer"> <div id="head

我正在尝试自学代码，目前我正忙于一个小型项目。我相信我已经完成了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>


州议会测验




1。密歇根州的国会大厦是什么？

兰辛

里士满

奥斯汀

哥伦布






2。弗吉尼亚州的国会大厦是什么？

兰辛

里士满

林肯

雷诺






3。阿肯色州的国会大厦是什么？

达拉斯

林肯

小石城

切耶恩






4。亚利桑那州的国会大厦是什么？

朱诺

檀香山

凤凰
托莱多






5。佛罗里达州的国会大厦是什么？

奥克兰

堪萨斯城

塔拉哈西

迈阿密






6。内布拉斯加州的国会大厦是什么？

奥马哈

林肯

萨克拉门托

萨布·迭戈






7。德克萨斯州的国会大厦是什么？

福特沃斯

里士满

奥斯汀

拉斯维加斯


八个。阿拉斯加的国会大厦是什么？

塔尔萨

瓦克拉荷马市

奥斯汀

朱诺


9。夏威夷的国会大厦是什么？

巴黎

檀香山

奥斯汀

卡迪拉克


10。俄亥俄州的国会大厦是什么？

克利夫兰

绿湾

奥斯汀

哥伦布


你的分数


结果:

下面是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 + "%";}

});
});

$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
$（“#questionContainer”）.fadeOut（“慢”，函数（）{
$（“#应答表”）.fadeIn（“慢”，函数（）{
});
});
var numQues=10；
变量numChoices=4；
var answers=新数组（10）；
答案[0]=“兰辛”；
答案[1]=“里士满”；
答案[2]=“小石城”；
答案[3]=“凤凰”；
答案[4]=“塔拉哈西”；
答案[5]=“林肯”；
答案[6]=“奥斯汀”；
答案[7]=“朱诺”；
答案[8]=“檀香山”；
答案[9]=“哥伦布”；
函数getScore（表格）{
var得分=0；
var currElt；
变量选择；
对于（i=0；i，这里有一种使用HTML结构和jQuery帮助您的方法：
工作演示：
单击问题的答案（对或错），然后点击下面的“分数”按钮，让它为您计算分数。以下是代码：
// 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);
});

关于代码的一些注释：
// 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*索引
获取文本答案，使用（2*索引）+1
获取答案的字母值
calcScore（）
函数返回正确的数字、错误的数字、未回答的数字，以及回答正确、回答错误和未回答问题的数字数组
calcScore（）
函数使用HTML的结构自动跟踪问题编号

我并没有完全理解您试图对代码执行的操作，但我看到的一个大问题是，您正在将答案数组中的文本值与单选按钮的.value
进行比较，但是单选按钮值设置为“a”
，“B”
，“C”
和“D”
因此它们永远不会与数组中的文本匹配

仅供参考，如果您想看到在HTML中使用更自然格式的另一种方式，请参见此处的HTML和CSS：。提示：它使用有序列表自动为有序问题列表编号。
以下是一种使用HTML结构和jQuery帮助您的方法：
工作演示：
单击问题的答案（对或错），然后点击下面的“分数”按钮，让它为您计算分数。以下是代码：
// 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);
});

关于代码的一些注释：
// 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*索引
获取文本答案，使用（2*索引）+1
获取答案的字母值
calcScore（）
函数返回正确的数字、错误的数字、未回答的数字，以及回答正确、回答错误和未回答问题的数字数组
calcScore（）
函数使用HTML的结构自动跟踪问题编号

我并没有完全理解您试图对代码执行的操作，但我看到的一个大问题是，您正在将答案数组中的文本值与单选按钮的.value
进行比较，但是单选按钮值设置为“a”
，“B”
，“C”
和“D”
因此它们永远不会与数组中的文本匹配

仅供参考，如果你想