【问题标题】:Making a random quiz in javascript在javascript中进行随机测验
【发布时间】:2015-03-19 21:13:05
【问题描述】:

所以我正在尝试制作一个quiz.html 文件,该文件将提示用户输入否。他们想要回答的问题。根据他们的输入,将生成随机问题。所以我知道它必须是一个循环,直到没有。输入到警告框中。
所以我的 scoreMe() 函数显然没有给出任何答案。我正在尝试检查特定问题的选中单选按钮是否等于正确答案,但我的分数仅为 0%。那么谁能告诉我我的代码有什么问题?

        <div id="quesRes"></div>
<script>

    var quizObj = [
    { 
        "question": "What is the capital of Bangladesh?",
        "choice": ["Dhaka", "Chittagong", "Sylhet"],
        "correct": ["Dhaka"]
   },
   { 
        "question": "What does 2+2 equal to?",
        "choice": ["3", "2", "4"],  //quizObj[2].choice[0],quizObj[2].choice[1]
        "correct": ["4"]
   },
    { 
        "question": "What is the real name of Damon Salvatore?",
        "choice": ["Paul Wesley", "Steven McQueen", "Ian Somerhalder"],  //quizObj[2].choice[0],quizObj[2].choice[1]
        "correct": ["Ian Somerhalder"]
   },
    { 
        "question": "What is the name of the largest planet in the universe?",
        "choice": ["Earth", "Jupiter", "Uranus"],  //quizObj[2].choice[0],quizObj[2].choice[1]
        "correct": ["Jupiter"]
   },
    { 
        "question": "What is the capital of New York?",
        "choice": ["Manhattan", "NYC", "Albany"],  //quizObj[2].choice[0],quizObj[2].choice[1]
        "correct": ["Albany"]
   },
    { 
        "question": "How many bones does the human body have?",
        "choice": ["109", "206", "114"],  //quizObj[2].choice[0],quizObj[2].choice[1]
        "correct": ["206"]
   },
    { 
        "question": "What is the alter ego of Batman?",
        "choice": ["Bruce Banner", "Bruce Wayne", "Tony Stark"],  //quizObj[2].choice[0],quizObj[2].choice[1]
        "correct": ["Bruce Wayne"]
   },
    { 
        "question": "How many books are there in the Harry Potter series?",
        "choice": ["7", "5", "8"],  //quizObj[2].choice[0],quizObj[2].choice[1]
        "correct": ["7"]
   },
    { 
        "question": "What is Naruto's surname?",
        "choice": ["Sarutobi", "Uchiha", "Uzumaki"],  //quizObj[2].choice[0],quizObj[2].choice[1]
        "correct": ["Uzumaki"]
   },
    { 
        "question": "What is the name of Sherlock Holmes' partner?",
        "choice": ["Peterson", "Watson", "Hanson"],  //quizObj[2].choice[0],quizObj[2].choice[1]
        "correct": ["Watson"]
   },

];

  var track = [];

    var maxQues = prompt("How many questions do you want to answer?", "5");
    var rand = Math.floor(Math.random() * maxQues);

    var str='<h4>Answer all the questions</h4>';

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

        var rand = Math.floor(Math.random() * maxQues);
        str+=(i+1)+'.  '+quizObj[rand].question+'<br>';
        str+='<form><table>'+
            '<tr><td id="a1"><input type="radio" name="radio' + i + '"/>'+'&nbsp;&nbsp;'+quizObj[rand].choice[0]+'</td></tr>'+
            '<tr><td id="a2"><input type="radio" name="radio' + i + '" />'+'&nbsp;&nbsp;'+quizObj[rand].choice[1]+'</td></tr>'+
            '<tr><td id="a3"><input type="radio" name="radio' + i + '"/>'+'&nbsp;&nbsp;'+quizObj[rand].choice[2]+'</td></tr>'+
        '</table></form><br>';
    track[i]=rand;
    }
    str += '<input value="Submit" type="button" onclick="scoreMe()"><br><br>';
    str += 'Score: <input id="score" type="text" size="8" ><br><br><br>';
    document.getElementById('quesRes').innerHTML = str;

  function scoreMe(){
    var sum=0;
    for(var j=0;j<maxQues;j++){
      for(var k=0;k<3;k++){
        if(quizObj[track[j]].choice[k].checked===quizObj[track[j]].correct[0]){
          console.log('Works'+j);
          sum++;
        }
      }
    }
    document.getElementById('score').value = ((sum/maxQues)*100)+'%';
  }
</script>

【问题讨论】:

  • @BlackPOP:审阅编辑时请注意。从quiz.htmlquiz. HTML 的编辑确实无效。

标签: javascript html forms random submit


【解决方案1】:

您所有的单选按钮都具有相同的名称,因此属于同一组。 给他们不同的名字,你应该没问题:

str+='<table>'+
            '<tr><td id="a1"><input type="radio" name="radio' + i + '" />'+'&nbsp;&nbsp;'+quizObj[rand].choice[0]+'</td></tr>'+
            '<tr><td id="a2"><input type="radio" name="radio' + i + '" />'+'&nbsp;&nbsp;'+quizObj[rand].choice[1]+'</td></tr>'+
            '<tr><td id="a3"><input type="radio" name="radio' + i + '"/>'+'&nbsp;&nbsp;'+quizObj[rand].choice[2]+'</td></tr>'+
        '</table><br>';

Quoting MDN on the subject:

name 属性值相同的单选按钮在同一个“单选按钮组”中;一次只能选择一个组中的一个单选按钮。

【讨论】:

    【解决方案2】:

    替换这些行:

    '<tr><td id="a1"><input type="radio" name="radio" />'+'&nbsp;&nbsp;'+quizObj[rand].choice[0]+'</td></tr>'
    

    与:

    '<tr><td id="a1"><input type="radio" name="radio' + i + '" />'+'&nbsp;&nbsp;'+quizObj[rand].choice[0]+'</td></tr>'
    //                                            There ^
    

    这样,输入的“名称”(用于“分组”它们)中包含问题的 ID。

    【讨论】:

      【解决方案3】:

      不要使用“字符串”作为问题的答案,而是添加索引号..它会解决问题

      var quizObj = [
      { 
          "question": "What is the capital of Bangladesh?",
          "choice": ["Dhaka", "Chittagong", "Sylhet"],
          "correct": 0
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多