点击提交按钮后的成绩测验

时间:2013-04-22 04:01:06

标签: javascript

我正在尝试写一个简单的十个问题测验。但是,我遇到了一个问题;单击提交按钮后,我无法获取要运行的评分代码。有人可以帮忙吗?

HTML代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Quiz #1</title>

<link href="quiz.css" rel="stylesheet" type="text/css" />
<link href="reset.css" rel="stylesheet" type="text/css" />

<script src="quiz.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
type="text/javascript"></script>

</head>

<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="button">        
    <input type="submit" value="submit" />
</div>


</div>

</div>

</div>

</body>
</html>

使用Javascript:

$(document).ready(function(){

 $("#button").click(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 + "%";}
});
});

还有一个补充:我应该为得分结果创建另一个页面,还是现在应该如何看?

由于

2 个答案:

答案 0 :(得分:1)

更改此

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

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

并查看

答案 1 :(得分:0)

使用“类型”按钮而不是“提交”。 提交会将表单发回服务器,这将阻止JavaScript运行

<input id="myButton" type="button" value="submit" />

$("#myButton").click(function(){});