堆栈内存溢出
  繁体   English   中英

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

[英]Multiple Choice Quiz - getting score?

 原文  2015-02-09 05:50:11  9   5    javascript/ html

问题描述

我正在尝试用 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");
}

谢谢。

5 个解决方案

解决方案1
 5 已采纳  2015-02-09 06:18:56

确保你的名字从0 （问题0 ）开始，因为for循环中的i是0索引。

您忘记循环您的无线电元素（通过当前索引名称）以获取已选中的元素的值： 

 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>

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

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

解决方案2
 4  2015-02-09 06:17:11

访问单选按钮的表单值

您必须访问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;
}

改进（重构）您的代码

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

解决方案3
 1  2017-03-09 04:56:03

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

解决方案4
 0  2015-02-09 06:08:03

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

解决方案5
 0  2022-01-07 17:05:42

 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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 JavaScript 多项选择题 多项选择测验的问题 多项选择测验的Javascript 使用HTML + Javascript进行多项选择测验：重新：使用数组对象和属性更新分数（帮助分析代码） 使用javascript进行多项选择测验 使用数组创建多项选择测验 Javascript - 创建多项选择测验 进行简单的多项选择测验HTML / JQUERY 多项选择测验也包含真/假选项 多项选择测验与类正确和错误
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM