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

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 个解决方案

解决方案1
1 2016-05-16 10:55:09

解决方案2
1 已采纳 2016-05-16 11:06:07

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

问题描述

2 个解决方案

解决方案1 1 2016-05-16 10:55:09

解决方案2 1 已采纳 2016-05-16 11:06:07

解决方案1
1 2016-05-16 10:55:09

解决方案2
1 已采纳 2016-05-16 11:06:07