使用单选按钮计算测验中的分数答案

【问题标题】：Using radio buttons to tally a score in a quiz使用单选按钮计算测验中的分数
【发布时间】：2015-09-14 14:25:27
【问题描述】：

我正在尝试用单选按钮制作一个简单的 Javascript 测验。每个问题和选项都应该存储在一个数组中，问题被动态替换为getElementById()。我一直在尝试为单选按钮分配值，以便在最后显示分数。

我是 javascript 新手，这是我从事的第一个项目。

这是我目前所拥有的：

var questionsArray = new Array;
questionsArray[0] = ["1. Who is the president of the US?"];
questionsArray[1] = ["2. What is the capital city of France?"];
questionsArray[2] = ["3. What is your favorite food?"];
var choicesArray = new Array();
choicesArray[0] = ["Lebron James", "Barack Obama", "George Bush"];
choicesArray[1] = ["Nairobi", "London", "Paris"];
choicesArray[2] = ["Pizza", "Sushi", "Pasta"];
var i = 0;
var theScore = 0;

function btnOnclick() {
   var radElement = document.form1.options;
   var showDiv = document.getElementById("questionsDiv");
   showDiv.className = "showClass";
   document.getElementById("next").value = "Next";
   while(i < questionsArray.length && i < choicesArray.length) {
      var currQues = questionsArray[i];
      var option1 = choicesArray[i][0];
      var option2 = choicesArray[i][1];
      var option3 = choicesArray[i][2];
      i++;
      document.getElementById("question").innerHTML = currQues;
      document.getElementById("choice1").innerHTML = option1;
      document.getElementById("choice2").innerHTML = option2;
      document.getElementById("choice3").innerHTML = option3;
      return true
   }
   if(questionsArray[0] && radElement[1].checked == true) {
      theScore += 10
   } else {
      theScore += 0
   }
   if(questionsArray[1] && radElement[2].checked == true) {
      theScore += 10
   } else {
      theScore += 0
   }
   if(questionsArray[2] && radElement[1].checked == true) {
      theScore += 10
   } else {
      theScore += 0
   }
   alert(theScore)
}

function bodyOnload() {
   var hideDiv = document.getElementById("questionsDiv");
   hideDiv.className = "hideClass";
   document.getElementById("next").value = "Start Quiz"
}

.hideClass{
  display: none;
}

.showClass{
  display: block;
}

<body onload="bodyOnload()">
  <h1>QUIZ</h1>
  <div id="questionsDiv">
    <form name="form1">
      <p id="question" class="showQuestion"></p>
      <tr>
        <span id="choice1"></span>
        <td>
          <input type="radio" id="radio1" value="0" name="options" />
        </td>
        <td>
          <span id="choice2"></span>
          <input type="radio" id="radio2" value="0" name="options" />
        </td>
        <td>
          <span id="choice3"></span>
          <input type="radio" id="radio3" value="0" name="options" />
        </td>
      </tr>
      </div>
    <br />
    <br />
    <hr>
    <tr>
      <td>
        <input type="button" id="next" value="Next" name="nextButton"   onclick="btnOnclick()"/>
      </td>
    </tr>
    </form>
</body>

【问题讨论】：

标签： javascript arrays radio-button

【解决方案1】：

考虑将您的答案构建为对象数组，如下所示：

choicesArray[2] = [{
    text: "Pizza",
    correct: true
}, {
    text: "Pasta",
    correct: false
}, {
    text: "Sushi",
    correct: false
}];

然后，如果选择了radio2，则检查 answers 数组中的第二项是否正确，如下所示：

// use index 1 for the second choice in the list.
if(choicesArray[2][1].correct === true) {
    //it's right!
} else {
    //it's wrong...
}

在获得这个功能之前你显然还有很长的路要走，但这是我的第一个建议。

您可以更进一步（我愿意！）并将问题和答案放在一起以便于参考：

var question = {
    questionText: 'What is your favorite food?',
    answers: [{
        answerText: "Pizza",
        correct: true
    }, {
        answerText: "Pasta",
        correct: false
    }, {
        answerText: "Sushi",
        correct: false
    }]
};

然后你可以访问这样的东西：

var currentQuestionIndex = 1; //or whatever it is

var questionText = questionsArray[currentQuestionIndex].questionText;

var answer1 = questionsArray[currentQuestionIndex].answers[0].answerText;
var answer1isCorrect = questionsArray[currentQuestionIndex].answers[0].correct;

var answer2 = questionsArray[currentQuestionIndex].answers[1].answerText;
var answer2isCorrect = questionsArray[currentQuestionIndex].answers[1].correct;

var answer3 = questionsArray[currentQuestionIndex].answers[2].answerText;
var answer3isCorrect = questionsArray[currentQuestionIndex].answers[2].correct;

此外，在向数组中添加项目时，您不需要如此明确。它使您的代码变得脆弱。考虑使用push()：

var questionsArray = [];

questionsArray.push({
    questionText: 'What is your favorite food?',
    answers: [{
        answerText: "Pizza",
        correct: true
    }, {
        answerText: "Pasta",
        correct: false
    }, {
        answerText: "Sushi",
        correct: false
    }]
});

【讨论】：