【问题标题】:Multiple Choice Quiz - getting score?多项选择测验 - 获得分数?
【发布时间】:2015-02-09 05:50:11
【问题描述】:

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

谢谢。

【问题讨论】:

    标签: javascript html


    【解决方案1】:

    确保你的名字从 0 (question0) 开始,因为 for 循环内的 i0 索引的。

    您忘记循环您的单选元素(按当前索引名称)以获取选中元素的值:

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

    【讨论】:

    • 我不认为用户“忘记了”,我认为他们只是不知道怎么做。
    • @SpencerWieczorek "you forgot to..." 是一种更好的表达方式 "嘿,你不知道如何..."
    • 哈哈是的,我对 HTML 和 JavaScript 还是很陌生,实际上我不知道该怎么做。但是非常感谢,这非常清晰易懂!
    • 感谢您的代码,因为我正在使用 JS 进行测验,提交时想显示测验结果我答对了多少,感谢您的帖子解决了它:)
    【解决方案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;
    }
    

    改进(重构)您的代码

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

    【讨论】:

    • @MikeC- 是的,你怎么知道选择了哪一个?
    • 我收回我的评论——AdamJonR 的方法也有效
    【解决方案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>
    

    【讨论】:

    • 您好,欢迎来到Stack Overflow。您能否解释一下这如何解决所提出的问题?
    【解决方案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 >
    

    【讨论】:

      【解决方案5】:

      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>

      【讨论】:

      • 虽然这段代码 sn-p 可以解决问题,但它没有解释为什么或如何回答这个问题。请include an explanation for your code,因为这确实有助于提高您的帖子质量。请记住,您是在为将来的读者回答问题,而这些人可能不知道您提出代码建议的原因。
      猜你喜欢
      • 2016-07-09
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-12-22
      • 2015-09-10
      • 2021-10-21
      • 1970-01-01
      相关资源
      最近更新 更多