var quiz = [
{
"question" : "Q1: What is the greatest invention of all time?",
"choices" : [
"Wheel",
"Electricity",
"Internet",
"Printing Press"
],
"correct" : "Internet",
"explanation" : "The Internet revolutionized communication and access to information.",
},
{
"question" : "Q2: Who is the most influential leader in history?",
"choices" : [
"Gandhi",
"Napoleon",
"Martin Luther King Jr.",
"Alexander the Great"
],
"correct" : "Gandhi",
"explanation" : "Gandhi's nonviolent approach inspired movements worldwide.",
},
{
"question" : "Q3: Which animal is considered a symbol of wisdom?",
"choices" : [
"Elephant",
"Owl",
"Dolphin",
"Fox"
],
"correct" : "Owl",
"explanation" : "Owls are associated with wisdom in many cultures.",
},
];
function loadQuestion(){
//set temporary variable for creating radio buttons
var radioButton;
//clear out radio buttons from previous question
document.getElementById('content').innerHTML = "";
//loop through choices, and create radio buttons
for(var i=0; i < quiz[currentQuestion]["choices"].length; i++){
radioButton = document.createElement('input');
radioButton.type = 'radio';
radioButton.name = 'quiz';
radioButton.id = 'choice'+ (i+1);
radioButton.value = quiz[currentQuestion]["choices"][i];
//create label tag, which hold the actual text of the choices
var label = document.createElement('label');
label.setAttribute('for','choice'+ (i+1));
label.innerHTML = quiz[currentQuestion]["choices"][i];
//create a <br> tag to separate options
var br = document.createElement('br');
//attach them to content. Attach br tag, then label, then radio button
document.getElementById('content').insertBefore(br);
document.getElementById('content').insertBefore(label, br);
document.getElementById('content').insertBefore(radioButton, label);
}