将测验问题存储在对象数组中
[英]Storing quiz questions in array of objects
问题描述
I am trying to create a small quiz program in JavaScript. 
我正在尝试用JavaScript创建一个小的测验程序。 All of the questions are contained in array and each question is an object containing question itself, choices for user to choose and answer. 所有问题都包含在数组中，每个问题都是一个包含问题本身，供用户选择和回答的选择的对象。 Quiz loop through the all questions array and print the question and the options for user to choose from. 测验遍历所有问题数组，并打印问题和选项供用户选择。 I want choices to be radio buttons. 我希望选择是单选按钮。 I am struggling to figure out how to populate radio buttons with the questions choices text. 我正在努力弄清楚如何用问题选择文本填充单选按钮。 Any idea how can do this please? 知道怎么做吗？
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>
2 个解决方案
解决方案1
1 2016-05-16 10:55:09
If you need more explanation I will provide it. 如果您需要更多说明，我会提供。
<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>
解决方案2
1 已采纳 2016-05-16 11:06:07
You can simplify your JS code like below: 您可以像下面这样简化您的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")); }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.