Question

我正在尝试使用单选按钮进行简单的Javascript测验。每个问题和选项都应存储在一个数组中，问题将被getElementById()动态替换。我很难尝试为单选按钮分配值，以便我可以在结尾显示分数。

我是javascript的新手，这是我正在开展的第一个项目。

这是我到目前为止所做的：

＆＃13;

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

＆＃13;

.hideClass{
  display: none;
}

.showClass{
  display: block;
}

＆＃13;

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

＆＃13;

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

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

1 个答案: