Question

我试图用HTML创建一个简单的多项选择程序，但我在获取用户输入并在最后显示他们的分数时遇到了麻烦。有人可以帮帮我吗？

我的多项选择测验有10个问题，每个问题有4个选项。

以下是一个问题：

<li>
<h3>How many letters are there in "JS"?</h3>
<input type="radio" name="question9" value="A">2<br>
<input type="radio" name="question9" value="B">1<br>
<input type="radio" name="question9" value="C">3<br>
<input type="radio" name="question9" value="D">4<br>
</li>

以下是我用来显示用户结果的按钮：

 <button onclick="returnScore()">View Results</button>

这是我目前的剧本：

var userInput = new Array();
var answers = new Array(10);
answers[0] = "B";
answers[1] = "C";
answers[2] = "A";
answers[3] = "C";
answers[4] = "D";
answers[5] = "D";
answers[6] = "D";
answers[7] = "D";
answers[8] = "C";
answers[9] = "A";

function getScore(){
var score=0;
var numQuestions=10;

for (var i=0;i<numQuestions;i++){
if (userInput[i]==answers[i]){
score += 1;
}
else{
score += 0;
}

}
return score;
}
function returnScore(){
alert("Your score is "+getScore()+"/10");
}

感谢。

Answer 1

确保您的姓名从0（问题0）开始，因为for循环中的i已被0编入索引。

您忘记循环收音机元素（按当前索引名称）以获取已选中的元素的值：

＆＃13;

var answers = ["A","C","B"], 
    tot = answers.length;

function getCheckedValue( radioName ){
    var radios = document.getElementsByName( radioName ); // Get radio group by-name
    for(var y=0; y<radios.length; y++)
      if(radios[y].checked) return radios[y].value; // return the checked value
}

function getScore(){
  var score = 0;
  for (var i=0; i<tot; i++)
    if(getCheckedValue("question"+i)===answers[i]) score += 1; // increment only
  return score;
}

function returnScore(){
  alert("Your score is "+ getScore() +"/"+ tot);
}

＆＃13;

<ul>
  <li>
    <h3>How many letters are there in "JS"?</h3>
    <input type="radio" name="question0" value="A">2<br>
    <input type="radio" name="question0" value="B">1<br>
    <input type="radio" name="question0" value="C">3<br>
    <input type="radio" name="question0" value="D">4<br>
  </li>
  <li>
    <h3>How many letters are there in "BMX"?</h3>
    <input type="radio" name="question1" value="A">2<br>
    <input type="radio" name="question1" value="B">1<br>
    <input type="radio" name="question1" value="C">3<br>
    <input type="radio" name="question1" value="D">4<br>
  </li>
  <li>
    <h3>How many letters are there in "A"?</h3>
    <input type="radio" name="question2" value="A">2<br>
    <input type="radio" name="question2" value="B">1<br>
    <input type="radio" name="question2" value="C">3<br>
    <input type="radio" name="question2" value="D">4<br>
  </li>
</ul>

<button onclick="returnScore()">View Results</button>

＆＃13;

您不需要为评分返回+= 0。如果你有一个积极的匹配，只需增加它。

实例化新数组时，请使用速记[]代替new Array()。

Answer 2

访问单选按钮的表单值

您必须访问DOM并获取您要检查的相应表单元素的关联值。无线电元素碰巧需要最多的工作，这可能是给你带来麻烦的。

在你的getScore（）函数中，你可以遍历每个问题元素以确定检查哪个答案（这可以重构以处理所有问题并且更有效率，但我保留了这个基本形式，所以你可以看看发生了什么：

var question0s = document.getElementsByName("question0");

for (var i = 0; i < question0s.length; i++) {
    if (question0s[i].checked) {
        userInput[0] = question0s[i].value;
    }
}

或者，您可以使用querySelector函数来实现更优雅的方法：

userInput[0] = document.querySelector('input[name="question0"]:checked').value;

以下是getScore（）函数的重构版本（仅代表更新后的代码），以处理所有问题：

function getScore(){
    for (var i = 0; i < answers.length; i++) {
        var currentQuestion = "question" + i;
        var questionAnswers = document.getElementsByName(currentQuestion);
        for (var j = 0; j < questionResponses.length; j++) {
            if (questionResponses[i].checked) {
                userInput[i] = question0s[i].value;
            }
        }
    }
    // after this completes, you'll have the user input values
    // the rest of your code should now work
    for (var i=0;i<numQuestions;i++){
        if (userInput[i]==answers[i]){
            score += 1;
        } else {
            score += 0;
        }
    }

    return score;
}

改进（重构）您的代码

现在，我所展示的你应该工作，但它还有很大的提升空间。也许你会看到一些节省一些步骤并让它变得更好的方法:)玩得开心！

Answer 3

<!DOCTYPE HTML>

<html>
<head>

    <title>Quiz Questions And Answers</title>
</head>

<body>
    <center><h1>Quiz Questions</h1></center>
    <p>
    <form name="quiz">
    <p>
        <b>Question 1.
        <br>He -------------------- it.<br></b>
        <blockquote>
    <input type="radio" name="q1" value="don't like">don't like<br>
    <input type="radio" name="q1" value="doesn't like">doesn't like<br>
    <input type="radio" name="q1" value="doesn't likes">doesn't likes<br>
    </blockquote>

<p><b>
<hr>
Question 2.
<br>They -------------------- here very often.<br></b>
<blockquote>
<input type="radio" name="q2" value="don't come">don't come<br>
<input type="radio" name="q2" value="doesn't come">doesn't come<br>
<input type="radio" name="q2" value="doesn't comes">doesn't comes<br>
</blockquote>
<p><b>
<hr>
Question 3.
<br>John and Mary -------------------- twice a week.<br></b>
<blockquote>
<input type="radio" name="q3" value="come">come<br>
<input type="radio" name="q3" value="comes">comes<br>
<input type="radio" name="q3" value="coming">coming<br>
</blockquote>
<p><b>
<hr>
Question 4.
<br>I -------------------- mind at all.<br></b>
<blockquote>
<input type="radio" name="q4" value="not">not<br>
<input type="radio" name="q4" value="isn't">isn't<br>
<input type="radio" name="q4" value="don't">don't<br>
</blockquote>
<p><b>
<hr>
Question 5.
<br>It -------------------- sense.<br></b>
<blockquote>
<input type="radio" name="q5" value="don't make">don't make<br>
<input type="radio" name="q5" value="doesn't makes">doesn't makes<br>
<input type="radio" name="q5" value="doesn't make">doesn't make<br>
</blockquote>
<p><b>
<hr>
Question 6.
<br>They -------------------- happy.<br></b>
<blockquote>
<input type="radio" name="q6" value="seem">seem<br>
<input type="radio" name="q6" value="seems">seems<br>
<input type="radio" name="q6" value="seeming">seeming<br>
</blockquote>
<p><b>
Question 7.
<br>You -------------------- to do it.<br></b>
<blockquote>
<input type="radio" name="q7" value="don't have">don't have<br>
<input type="radio" name="q7" value="doesn't have">doesn't have<br>
<input type="radio" name="q7" value="doesn't has">doesn't has<br>
</blockquote>
<p><b>
<hr>
Question 8.
<br>She -------------------- a brother.<br></b>
<blockquote>
<input type="radio" name="q8" value="doesn't has">doesn't has<br>
<input type="radio" name="q8" value="don't has">don't has<br>
<input type="radio" name="q8" value="doesn't have">doesn't have<br>
</blockquote>
<p><b>
<hr>
Question 9.
<br>The journey -------------------- an hour.<br></b>
<blockquote>
<input type="radio" name="q9" value="take">take<br>
<input type="radio" name="q9" value="takes">takes<br>
<input type="radio" name="q9" value="taking">taking<br>
</blockquote>
<p><b>
<hr>
Question 10.
<br>I -------------------- it now.<br></b>
<blockquote>
<input type="radio" name="q10" value="want">want<br>
<input type="radio" name="q10" value="wants">wants<br>
<input type="radio" name="q10" value="wanting">wanting<br>
</blockquote>
<p><b>
<hr>
Question 11.
<br>Peggy -------------------- by bus.<br></b>
<blockquote>
<input type="radio" name="q11" value="come">come<br>
<input type="radio" name="q11" value="comes">comes<br>
<input type="radio" name="q11" value="coming">coming<br>
</blockquote>
<p><b>
<hr>
Question 12.
<br>She --------------------.<br></b>
<blockquote>
<input type="radio" name="q12" value="don't know">don't know<br>
<input type="radio" name="q12" value="doesn't knows">doesn't knows<br>
<input type="radio" name="q12" value="doesn't know">doesn't know<br>
</blockquote>
<p><b>
<hr>
Question 13.
<br>She -------------------- hard.<br></b>
<blockquote>
<input type="radio" name="q13" value="try">try<br>
<input type="radio" name="q13" value="trys">trys<br>
<input type="radio" name="q13" value="tries">tries<br>
</blockquote>
<p><b>
<hr>
Question 14.
<br>They -------------------- football every weekend.<br></b>
<blockquote>
<input type="radio" name="q14" value="play">play<br>
<input type="radio" name="q14" value="plays">plays<br>
<input type="radio" name="q14" value="playing">playing<br>
</blockquote>
<p><b>
<hr>
Question 15.
<br>The exam -------------------- two hours.<br></b>
<blockquote>
<input type="radio" name="q15" value="last">last<br>
<input type="radio" name="q15" value="lastes">lastes<br>
<input type="radio" name="q15" value="lasts">lasts<br>
</blockquote>
<p><b>


<input type="button"value="Grade Me"onClick="getScore(this.form);">
<input type="reset" value="Clear"><p>
Number of score out of 15 = <input type= text size 15 name= "mark">
Score in percentage = <input type=text size=15 name="percentage"><br>

</form>
<p>

    <form method="post" name="Form" onsubmit="" action="">
</form>

</body>


<script>
    var numQues = 15;
var numChoi = 3;
var answers = new Array(15);
    answers[0] = "doesn't like";
    answers[1] = "don't come";
    answers[2] = "come";
    answers[3] = "don't";
    answers[4] = "doesn't make";
    answers[5] = "seem";
    answers[6] = "don't have";
    answers[7] = "doesn't have";
    answers[8] = "takes";
    answers[9] = "want";
    answers[10] = "comes";
    answers[11] = "doesn't know";
    answers[12] = "tries";
    answers[13] = "play";
    answers[14] = "lasts";
      function getScore(form) {

   var score = 0;
  var currElt;
  var currSelection;
  for (i=0; i<numQues; i++) {
    currElt = i*numChoi;
    answered=false; 
    for (j=0; j<numChoi; j++) {
      currSelection = form.elements[currElt + j];
      if (currSelection.checked) {
        answered=true;
        if (currSelection.value == answers[i]) {
          score++;
          break;
        }
      }
    }
    if (answered ===false){alert("Do answer all the questions, Please") ;return false;}
  }

  var scoreper = Math.round(score/numQues*100);
  form.percentage.value = scoreper + "%";
  form.mark.value=score;


}
    </script>
</html>

Answer 4

只是一些语法错误 - 再加上你忘了在比较之前定义userInput []实际是什么

 < html >  < body >

 < script >
function returnScore() {
    alert("Your score is " + getScore() + "/10");
}
 <  / script >
 < form id = "form1" >

     < li >
     < h3 > How many letters are there in "JSX" ?  <  / h3 >
     < input type = "radio" name = "question8" value = "A" > 2 < br >
     < input type = "radio" name = "question8" value = "B" > 1 < br >
     < input type = "radio" name = "question8" value = "C" > 3 < br >
     < input type = "radio" name = "question8" value = "D" > 4 < br >
     <  / li >

     < li >
     < h3 > How many letters are there in "JS" ?  <  / h3 >
     < input type = "radio" name = "question9" value = "A" > 2 < br >
     < input type = "radio" name = "question9" value = "B" > 1 < br >
     < input type = "radio" name = "question9" value = "C" > 3 < br >
     < input type = "radio" name = "question9" value = "D" > 4 < br >
     <  / li >

     <  / form >
     < button onclick = "javascript: returnScore()" > View Results <  / button >

     < script type = "text/javascript" >
         var userInput = [];
var answers = []
answers[0] = "B";
answers[1] = "C";
answers[2] = "A";
answers[3] = "C";
answers[4] = "D";
answers[5] = "D";
answers[6] = "D";
answers[7] = "D";
answers[8] = "C";
answers[9] = "A";

function getScore() {
     var score = 0;
     var numQuestions = 10;
     var form = document.getElementById('form1');

     userInput[8] = form1.question8.value;
     userInput[9] = form1.question9.value;


     for (var i = 0; i < numQuestions; i++) {

          if (userInput[i] == answers[i]) {
               score += 1;
          } else {
               score += 0;
          }

     }
     return score;
} 

<  / script >

<  / body >  <  / html >

多项选择测验 - 获得分数？

4 个答案: