The reason why your answers don’t display is because you are trying to loop through the answers like it is an array. However, answers is an object, not an array so you cannot really do things like using the answers.length property etc.
However, instead of converting your answers into an array, there is actually an easier way to deal with this. That is to use a for…of loop with object.entries on the ourQueuestions.answers object. By using the Object.entries(ourQuestions.answers) method you will be able to retrieve the answers in ‘key’ and ‘value’ pairs and easily use them in the loop without the classic for loop and i and j variables etc.
Also, you were referencing to the solveQuiz() method in the below codeblock, however, in your code the name of this method is actually solveSurvey() and not solveQuiz(). So I’ve changed that too in the below code:
document.getElementById('questions').innerHTML +=
'<button class="button" onclick="solveSurvey()">Solve Quiz</button>';
}
Lastly, I would recommend that you read about the ES6 features from MDN docs, stuff like the for…of loop and string literals have been introduced in ES6 into Javascript back in 2015 and they will make your life way easier as a developer using JS 🙂
goodluck! You can directly use the code below and see that it successfully also displays answers on the UI.
function buttonClicked(button) {
button.style.visibility = 'hidden';
startSurvey();
console.log('Survey started.');
}
function startSurvey() {
var i;
var j;
var k;
for (i = 0; i < ourQuestions.length; i++) {
document.getElementById('questions').innerHTML +=
'<form id="question">Q' + (i + 1) + ': ' + ourQuestions[i].question;
debugger;
for (let [key, value] of Object.entries(ourQuestions[i].answers)) {
document.forms[i].innerHTML +=
'</div><div class="answer"><input name="q1" value="' +
value +
'" id="value4" type="checkbox" />' +
`${key}: '${value}'`; //use a string literal, makes a dev's life very easy
('<br/>');
}
document.getElementById('questions').innerHTML += '</form><br/><br/>';
}
document.getElementById('questions').innerHTML +=
'<button class="button" onclick="solveSurvey()">Solve Quiz</button>';
}
var ourQuestions = [
{
question:
'While naturally occurring wildfires can benefit ecosystems, unnatural blazes started by uncaring and negligent humans can do great harm and cause many deaths. What percentage of wildfires do you think are started by humans?',
answers: {
a: '10-15%',
b: '85-90%',
c: '45-50%',
d: '25-30%',
},
correctAnswer: 'b',
},
{
question: 'If you have lit a campfire before, how did you extinguish it?',
answers: {
a: 'I did not extinguish it and waited for it to die on its own',
b:
'I extinguished the campfire with a bucket of water and made sure it was fully extinguished.',
c: 'I have never lit a campfire before.',
d: 'uhhh',
},
correctAnswer: 'b',
},
{
question: 'What are the two most common reasons that forest fires start?',
answers: {
a: 'Lightning and human negligence',
b: 'Spontaneous combustion and erosion',
c: 'Animals igniting flames and overcrowded bushlands',
d: 'Strong Wind Patterns',
},
correctAnswer: 'a',
},
{
question: 'What time of the year do most forest fires occur?',
answers: {
a: 'Summer',
b: 'Spring',
c: 'Fall',
d: 'Winter',
},
correctAnswer: 'a',
},
{
question: 'How fast do you think forest fires spread?',
answers: {
a: '10.8 km/h',
b: '6.4 km/h',
c: '22.2 km/h',
d: '3.2 km/h',
},
correctAnswer: 'a',
},
{
question: 'What do forest fires need in order to burn?',
answers: {
a: 'Water',
b: 'High humidity',
c: 'Fuel',
d: 'Clear weather',
},
correctAnswer: 'c',
},
{
question:
'What is one of the main toxic gases present in forest fire smoke?',
answers: {
a: 'Osmium tetroxide',
b: 'Disulfur decafluoride',
c: 'Tungsten hexafluoride ',
d: 'carbon monoxide',
},
correctAnswer: 'd',
},
{
question:
'What natural disasters could be caused as a consequence of a destructive forest fire?',
answers: {
a: 'Erosion, flash flooding and landslides',
b: 'Tornadoes',
c: 'Snow',
d: 'Tsunami and earthquakes',
},
correctAnswer: 'a',
},
{
question: 'What major factor determines a forest fire’s behaviour?',
answers: {
a: 'Amount of water vapour in air',
b: 'Density of Forests',
c: 'Wind',
d: 'Hours of sunlight',
},
correctAnswer: 'c',
},
{
question: 'What 3 things are needed to start a fire?',
answers: {
a: 'Matches, oxygen, wood',
b: 'Air and sunlight',
c: 'Fuel, heat, oxygen',
d: 'Fuel, oxygen, wood',
},
correctAnswer: 'c',
},
{
question: 'Which one of these is NOT a type of forest fire?',
answers: {
a: 'Crown',
b: 'Firework',
c: 'Surface',
d: 'Ground ',
},
correctAnswer: 'b',
},
{
question: 'What was the cause of the Amazon forest fires in 2019?',
answers: {
a: 'Deforestation for agriculture usage',
b: 'Fireworks',
c: 'Unattended campfire',
d: 'Arson',
},
correctAnswer: 'a',
},
{
question:
'Which one of these names are NOT an alternate name for forest fires?',
answers: {
a: 'Wildfires',
b: 'Shrub fires',
c: 'Natural fireworks',
d: 'Brushfires ',
},
correctAnswer: 'c',
},
{
question: 'How many forest fires occurred in 2019?',
answers: {
a: '25 653',
b: '50 477',
c: '45 809',
d: '89 431',
},
correctAnswer: 'b',
},
];
function solveSurvey() {
var x;
var txt = ' ';
var i = 0;
var correct = 0;
for (i = 0; i < document.forms.length; i++) {
x = document.forms[i];
for (j = 0; j < x.length; j++) {
if (x[j].checked) {
correctAnswer = ourQuestions[i].correctAnswer;
if (x[j].value == ourQuestions[i].answers[correctAnswer]) {
correct += 1;
}
}
}
document.forms[i].innerHTML +=
'</div><div class="answer"><input name="q1" value="' +
ourQuestions[i].answers[j] +
'" id="value4" type="radio" />' +
ourQuestions[i].answers[j] +
'<br/>';
}
document.getElementById('questions').innerHTML +=
'Correct answers: ' + correct;
}
CLICK HERE to find out more related problems solutions.