Storing quiz questions in array of objects
Question
I am trying to create a small quiz program in 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 answers
solution1
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>
solution2
1 ACCPTED 2016-05-16 11:06:07
You can simplify your JS code like below:
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")); }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.