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

Multiple Choice Quiz - getting score?

提问by Mark D

I'm trying to create a simple multiple choice program in HTML but I'm having trouble with getting the user input and showing their score at the end. Could someone help me out?

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

There are 10 questions to my multiple choice quiz and 4 choices per question.

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

Here is one question for example:

例如，这里有一个问题：

<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>

Here is the button I am using to show the user's results:

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

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

And here is my current script:

这是我当前的脚本：

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");
}

Thanks.

谢谢。

回答by Roko C. Buljan

Make sure your names start from 0(question0) cause iinside the for loop is 0indexed.

确保你的名字从0(question0)开始，因为i在 for 循环内被0索引。

You forgot to loop your radio elements (by the current index name) to get the value of the checked one:

您忘记循环您的无线电元素（按当前索引名称）以获取已检查元素的值：

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);
}

<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>

You don't need to return a += 0for your score. Simply increase it only, if you have a positive match.

你不需要+= 0为你的分数返回 a 。如果您有正匹配，只需增加它即可。

When instantiating new Arrays use the shorthand []instead of new Array().

实例化新数组时，请使用简写[]而不是new Array().

回答by AdamJonR

Accessing Form Values for Radio Buttons

访问单选按钮的表单值

You have to access the DOM and get the associated values for the corresponding form elements you're checking. Radio elements happen to require the most work, which is probably what's giving you trouble.

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

Inside your getScore() function, you can cycle through each of the question elements to determine which answer is checked (this could be refactored to handle all of the questions and be more efficient, but I kept this basic form so you could see what's going on):

在 getScore() 函数中，您可以循环浏览每个问题元素以确定检查哪个答案（这可以重构以处理所有问题并提高效率，但我保留了这个基本形式，以便您可以看到发生了什么在）：

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

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

Or, you could use the querySelector function for a more elegant approach:

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

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

Here is a refactored version (which just means the code updated with improvements) of your getScore() function to handle all of the questions:

这是您的 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;
}

Improving (Refactoring) Your Code

改进（重构）你的代码

Now, what I've shown you should work, but it still has much room for improvement. Maybe you'll see some ways you save some steps and make it even better :) Have fun!

现在，我向您展示的内容应该可行，但仍有很大的改进空间。也许您会看到一些方法可以节省一些步骤并使其变得更好:) 玩得开心！

回答by Anonymous125217

<!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>

回答by mike510a

Just a few syntax errors -- plus you forgot to define what userInput[] actually is before comparing it

只是一些语法错误——加上你在比较之前忘记定义 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 >