Question

我正在尝试用JavaScript创建一个小型测验程序。所有问题都包含在数组中，每个问题都是一个包含问题本身的对象，供用户选择和回答的选择。测验循环遍历所有问题数组并打印问题和选项供用户选择。我想选择单选按钮。我正在努力弄清楚如何使用问题选择文本填充单选按钮。不知道怎么能这样做？

      var userChoices = document.getElementsByTagName('input[type:radio]');
      var questions = 
      [
        {
          question: "What is the capital of United Kingdom?",
          choices: ["Manchester", "Birmingham", "London", "Birmingham"],
          answer: 2
        },
        
        {
          question: "What is the capital of United States?",
          choices: ["California", "New York", "Miami", "Florida"],
          answer: 1
        }
        
        
      ];
      
      for ( var i = 0; i < questions.length; i++ ) {
        var question = questions[i].question;
        document.write ( question );
        var options = questions[i].choices;
        for ( var opt in options ) {
           for ( var radios in userChoices ) {
             userChoices[radios].value = options[opt];
             
           }
        }
        
      }

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <input type="radio" name="choices"><br>
  <input type="radio" name="choices"><br>
  <input type="radio" name="choices"><br>
  <input type="radio" name="choices"><br>
  
  </body>
</html>

Answer 1

如果您需要更多解释，我会提供。

<script>

    window.onload = function () {

        var questions =
      [
        {
            question: "What is the capital of United Kingdom?",
            choices: ["Manchester", "Birmingham", "London", "Birmingham"],
            answer: 2
        },

        {
            question: "What is the capital of United States?",
            choices: ["California", "New York", "Miami", "Florida"],
            answer: 1
        }


      ];

        var container = document.getElementById('container');
        for (var i = 0; i < questions.length; i++) {
            var questionContainer = document.createElement('DIV');
            questionContainer.textContent = questions[i].question;

            var options = questions[i].choices;
            for (var opt in options) {
                //create radiobutton
                //append radiobutton to a div 
            }
            container.appendChild(questionContainer);
        }
    };
 </script>

Answer 2

您可以简化JS代码，如下所示：

      var questions = 
      [
        {
          question: "What is the capital of United Kingdom?",
          choices: ["Manchester", "Birmingham", "London", "Birmingham"],
          answer: 2
        },
        
        {
          question: "What is the capital of United States?",
          choices: ["California", "New York", "Miami", "Florida"],
          answer: 1
        }
        
        
      ];
      
      for ( var i = 0; i < questions.length; i++ ) {
        var question = questions[i].question;
        document.write ( question );
        var options = questions[i].choices;
        document.body.appendChild(document.createElement("br"));
         var name = "radio"+i; 
        for ( var opt in options ) {
        
          var radioEle = document.createElement("input");
          radioEle.type = "radio";          
          radioEle.value = options[opt];
          radioEle.name = name;
          document.body.appendChild(radioEle);
          var label = document.createElement("Label");
          label.innerHTML = options[opt];
          document.body.appendChild(label);
          document.body.appendChild(document.createElement("br"));
        }
        
        document.body.appendChild(document.createElement("br"));
        
      }

在对象数组中存储测验问题

2 个答案: