一次显示一个测验项目答案

【问题标题】：Displaying one quiz item at a time一次显示一个测验项目
【发布时间】：2020-01-27 18:33:08
【问题描述】：

我正在从头开始创建一个测验，现在我可以一次显示所有测验问题。如何将其更改为一次只显示一个问题，以便当用户单击“下一步”按钮时，会显示下一个问题及其选项等等？谢谢。

HTML

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>State Capitals</title>
  <script>
    var myQuiz = [{
        ques: "What is the capital of California?",
        choices: ["Los Angeles", "San Francisco", "Sacramento", "San Diego", "Oakland"],
        correctAnswer: "Sacramento"
      },
      {
        ques: "What is the capital of Pennsylvania?",
        choices: ["Pittsburgh", "Philadelphia", "Harrisburg", "Erie"],
        correctAnswer: "Harrisburg"
      },
      {
        ques: "What is the capital of Florida?",
        choices: ["Tallahassee", "Tampa", "Miami", "Jacksonville"],
        correctAnswer: "Tallahassee"
      },
      {
        ques: "What is the capital of Georgia?",
        choices: ["Augusta", "Atlanta", "Savannah"],
        correctAnswer: "Atlanta"
      }
    ]; //end of myQuiz array of objects

    for (var i = 0; i < myQuiz.length; i++) {
      document.write(myQuiz[i].ques + "<br />");

      for (var j = 0; j < myQuiz[i].choices.length; j++) {
        document.write("<input type=radio id=myRadio name=radAnswer>" + myQuiz[i].choices[j] + "<br />");
      }
    }
  </script>
</head>
<body>
</body>
</html>

【问题讨论】：

标签： javascript html dom

【解决方案1】：

这样您就可以在不过多更改代码的情况下实现您想要的目标。

var myQuiz = [
    {
    ques: "What is the capital of California?",
    choices: ["Los Angeles", "San Francisco", "Sacramento", "San Diego", "Oakland"],
    correctAnswer: "Sacramento"
    }, 
    {
    ques: "What is the capital of Pennsylvania?",
    choices: ["Pittsburgh", "Philadelphia", "Harrisburg", "Erie"],
    correctAnswer: "Harrisburg"
    }, 
    {
    ques: "What is the capital of Florida?",
    choices: ["Tallahassee", "Tampa", "Miami", "Jacksonville"],
    correctAnswer: "Tallahassee"
    },
    {
    ques: "What is the capital of Georgia?",
    choices: ["Augusta", "Atlanta", "Savannah"],
    correctAnswer: "Atlanta"
    }
 ]; //end of myQuiz array of objects
 
 var questionIndex = -1; // Not started

function nextQuestion() {
document.body.innerHTML = '';
  ++questionIndex;
    document.write(myQuiz[questionIndex].ques + "<br />");

        for (var j=0; j < myQuiz[questionIndex].choices.length; j++) {
        document.write("<input type=radio id=myRadio name=radAnswer>" + myQuiz[questionIndex].choices[j] + "<br />");
        }
        
   if (questionIndex < (myQuiz.length - 1)) {
    var nextButton = document.createElement("input");
    nextButton.type = "button";
    nextButton.value = "Next question";
    nextButton.addEventListener('click', nextQuestion);
    document.body.appendChild(nextButton);
   }
};

nextQuestion();

但是，请记住，这不是使用 document.write() 的好习惯。我不知道这是一个学习问题还是类似的问题，但您应该改用 DOM 元素。

【讨论】：