创建测验但Java不会检查答案

时间:2017-04-23 00:42:07

标签: javascript html

我试图进行测试但由于某种原因,我必须检查答案并返回数字等级和字母等级的代码不会返回任何内容。我试图解决这个问题几个小时,但我不知道问题是什么。该按钮是否未连接到该功能,或者是由于格式中的某些错误而无法计算答案的功能。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Quiz</title>
</head>

<body>
<h1>CIS44 Quiz</h1>
<form name="questions">
<p>
Question #1: You can test a condition with an if...else statement or with a if...elseif...else statement.
</p>
<input type="radio" name="ques11">True<br />
<input type="radio" name="ques12">False<br />
<p>
Question #2: XHTML stands for Extensible Hypertext Markup Language
statement.
</p>
<input type="radio" name="ques21">True<br />
<input type="radio" name="ques22">False<br />
<p>
Question #3: A web page can contain the following:
</p>
<input type="checkbox" name = "H1">A.) HTML<br />
<input type="checkbox" name = "H2">B.) XHTML<br />
<input type="checkbox" name = "H3">C.) CSS<br />
<input type="checkbox" name = "H4">D.) JavaScript<br />
<p>
Question #4: Which of the following is used to include JavaScript in HTML or XHTML?
</p>
<input type="radio" name="ques41">script="text:javascript"<br />
<input type="radio" name="ques42">script style="text/javascript"<br />
<input type="radio" name="ques43">script type="text/javascript"<br />
<input type="radio" name="ques44">script type="JS"<br />
<p>
Question #5: Which course inclodes PHP and databases with MySQL?
</p>
<input type="radio" name="ques51">CIS120<br />
<input type="radio" name="ques52">CIS122<br />
<input type="radio" name="ques53">CIS159<br />
<input type="radio" name="ques54">CIS156<br />
</form>
<b>
<input type="button" name="toClick" value="Calculate Your Grade" onclick="numericGrade.value=calcAverage(questions)"> 

<input type="button" onclick="calGrade(yourAvg)" value="Show Letter Grade">
</p><i>Your numerical grade on the quiz is:</i> <input type="text" name="numericGrade">

<i>Your letter grade on the quiz is:</i></b> <input type="text" name="letterGrade"></b>
<script type="text/javascript">
var yourAvg=0;
var yourGrade="";

function calcAverage(questions){
    yourAvg=0;
    if (questions.ques11[0].checked == true){
        yourAvg=yourAvg +20;
    }
    if (questions.ques21[0].checked == true){
        yourAvg=yourAvg +20;
    }
    if (questions.H1.checked == true && questions.H2.checked && questions.H3.checked && questions.H4.checked){
        yourAvg=yourAvg +20;
    }
    if (questions.ques43[0].checked == true){
        yourAvg=yourAvg +20;
    }
    if (questions.ques53[0].checked == true){
        yourAvg=yourAvg +20;
    }
    return (yourAvg)
}
function calGrade(yourAvg){
if (yourAvg>=90){
        yourGrade="A";
        questions.letterGrade.value=yourGrade;
    }
    else if (yourAvg>=80){
        yourGrade="B";
        questions.letterGrade.value=yourGrade;
    }
    else if (yourAvg>=70){
        yourGrade="C";
        questions.letterGrade.value=yourGrade;
    }
    else if (yourAvg>=65){
        yourGrade="D";
        questions.letterGrade.value=yourGrade;
    }
    else if (yourAvg<65){
        yourGrade="F";
        questions.letterGrade.value=yourGrade;
    }
}
</script>
</body>
</html>

2 个答案:

答案 0 :(得分:0)

请查看此示例代码以了解某些方向。 你遇到的一些问题: 1)您的代码没有正确的html绑定到处理函数。 2)您的代码无法获取表单内的控件。 3)您的代码将输出字段视为表单的一部分,而不是。

希望它能为您提供进一步指导的指导!

var yourAvg = 0;
    var yourGrade = "";
    var letterGrade = document.getElementById('letGrade');
    var numGrade = document.getElementById('numGrade');
    function calcAverage(questions) {
        yourAvg = 0;
        if (questions.elements.ques11.checked == true) {
            yourAvg = yourAvg + 20;
        }
        if (questions.elements.ques21.checked == true) {
            yourAvg = yourAvg + 20;
        }
        if (questions.elements.H1.checked == true && questions.elements.H2.checked && questions.elements.H3.checked && questions.elements.H4.checked) {
            yourAvg = yourAvg + 20;
        }
        if (questions.elements.ques43.checked == true) {
            yourAvg = yourAvg + 20;
        }
        if (questions.elements.ques53.checked == true) {
            yourAvg = yourAvg + 20;
        }
        numGrade.value = yourAvg;
        return (yourAvg);
    }
    function calGrade(yourAvg) {
        if (yourAvg >= 90) {
            yourGrade = "A";
            letterGrade.value = yourGrade;
        }
        else if (yourAvg >= 80) {
            yourGrade = "B";
            letterGrade.value = yourGrade;
        }
        else if (yourAvg >= 70) {
            yourGrade = "C";
            letterGrade.value = yourGrade;
        }
        else if (yourAvg >= 65) {
            yourGrade = "D";
            letterGrade.value = yourGrade;
        }
        else if (yourAvg < 65) {
            yourGrade = "F";
            letterGrade.value = yourGrade;
        }
    }
<h1>CIS44 Quiz</h1>
<form name="questions">
<p>
Question #1: You can test a condition with an if...else statement or with a if...elseif...else statement.
</p>
<input type="radio" name="ques11">True<br />
<input type="radio" name="ques12">False<br />
<p>
Question #2: XHTML stands for Extensible Hypertext Markup Language
statement.
</p>
<input type="radio" name="ques21">True<br />
<input type="radio" name="ques22">False<br />
<p>
Question #3: A web page can contain the following:
</p>
<input type="checkbox" name = "H1">A.) HTML<br />
<input type="checkbox" name = "H2">B.) XHTML<br />
<input type="checkbox" name = "H3">C.) CSS<br />
<input type="checkbox" name = "H4">D.) JavaScript<br />
<p>
Question #4: Which of the following is used to include JavaScript in HTML or XHTML?
</p>
<input type="radio" name="ques41">script="text:javascript"<br />
<input type="radio" name="ques42">script style="text/javascript"<br />
<input type="radio" name="ques43">script type="text/javascript"<br />
<input type="radio" name="ques44">script type="JS"<br />
<p>
Question #5: Which course inclodes PHP and databases with MySQL?
</p>
<input type="radio" name="ques51">CIS120<br />
<input type="radio" name="ques52">CIS122<br />
<input type="radio" name="ques53">CIS159<br />
<input type="radio" name="ques54">CIS156<br />
</form>
<b>
<input type="button" name="toClick" value="Calculate Your Grade" onclick="calcAverage(questions)"> 

<input type="button" onclick="calGrade(yourAvg)" value="Show Letter Grade">
</p><i>Your numerical grade on the quiz is:</i> <input type="text" name="numericGrade" id="numGrade">

<i>Your letter grade on the quiz is:</i></b> <input type="text" name="letterGrade" id="letGrade"></b>

答案 1 :(得分:0)

您的表单和javascript中存在错误。我把它清理干净了。大多数情况下,你需要约束你的问题&#34;变量到您的表单,以便它可以使用输入变量。

您应该将组添加到单选按钮,这样人们就无法同时选择True / False。快乐的编码。

&#13;
&#13;
    yourAvg=0; // Global Variable
    yourGrade=""; // Global Variable
    questions = {}; // Global Variable.
    // Binding Form to Questions Global Variable
    var form = document.getElementsByName('questions')[0];
    for(var i=0,len=form.length;i<len;i++) {
        questions[form[i].name] = form[i];
    }

    function calcAverage(form){
        yourAvg=0;
        if (questions.ques11.checked == true){
            yourAvg=yourAvg +20;
        }
        if (questions.ques21.checked == true){
            yourAvg=yourAvg +20;
        }
        if (questions.H1.checked == true && questions.H2.checked && questions.H3.checked && questions.H4.checked){
            yourAvg=yourAvg +20;
        }
        if (questions.ques43.checked == true){
            yourAvg=yourAvg +20;
        }
        if (questions.ques53.checked == true){
            yourAvg=yourAvg +20;
        }
        return (yourAvg);
    }

    function calGrade(yourAvg){
        if (yourAvg>=90){
            yourGrade="A";
            questions.letterGrade.value=yourGrade;
        }
        else if (yourAvg>=80){
            yourGrade="B";
            questions.letterGrade.value=yourGrade;
        }
        else if (yourAvg>=70){
            yourGrade="C";
            questions.letterGrade.value=yourGrade;
        }
        else if (yourAvg>=65){
            yourGrade="D";
            questions.letterGrade.value=yourGrade;
        }
        else if (yourAvg<65){
            yourGrade="F";
            questions.letterGrade.value=yourGrade;
        }
    }
&#13;
<h1>CIS44 Quiz</h1>
<form name="questions">
    <p>
        Question #1: You can test a condition with an if...else statement or with a if...elseif...else statement.
    </p>
    <input type="radio" name="ques11">True<br />
    <input type="radio" name="ques12">False<br />
    <p>
        Question #2: XHTML stands for Extensible Hypertext Markup Language
        statement.
    </p>
    <input type="radio" name="ques21">True<br />
    <input type="radio" name="ques22">False<br />
    <p>
        Question #3: A web page can contain the following:
    </p>
    <input type="checkbox" name = "H1">A.) HTML<br />
    <input type="checkbox" name = "H2">B.) XHTML<br />
    <input type="checkbox" name = "H3">C.) CSS<br />
    <input type="checkbox" name = "H4">D.) JavaScript<br />
    <p>
        Question #4: Which of the following is used to include JavaScript in HTML or XHTML?
    </p>
    <input type="radio" name="ques41">script="text:javascript"<br />
    <input type="radio" name="ques42">script style="text/javascript"<br />
    <input type="radio" name="ques43">script type="text/javascript"<br />
    <input type="radio" name="ques44">script type="JS"<br />
    <p>
        Question #5: Which course inclodes PHP and databases with MySQL?
    </p>
    <input type="radio" name="ques51">CIS120<br />
    <input type="radio" name="ques52">CIS122<br />
    <input type="radio" name="ques53">CIS159<br />
    <input type="radio" name="ques54">CIS156<br />
    <input type="button" name="toClick" value="Calculate Your Grade"
           onclick="questions.numericGrade.value = calcAverage(questions)">

    <input type="button" onclick="calGrade(yourAvg)" value="Show Letter Grade">
    </p><i>Your numerical grade on the quiz is:</i> <input type="text" name="numericGrade">

    <i>Your letter grade on the quiz is:</i></b> <input type="text" name="letterGrade"></b>
</form>
&#13;
&#13;
&#13;