l-emi l-emi - 4 months ago 29
Javascript Question

Javascript not working on app

So I'm trying to build a quiz app following the code from this blog post (codepen example).

I've done everything but the JS doesn't seem to be working, as no questions or answers or anything shows up, except the HTML and CSS. Here's my JSFiddle attempt along with the code

window.onload = function () {

var questionArea = document.getElementsByClassName('questions')[0],
answerArea = document.getElementsByClassName('answers')[0],
checker = document.getElementsByClassName('checker')[0],
current = 0,


allQuestions = {
//question and answer list, the number is the index of the answers
'madrugada' : ['journey', 'dawn', 'mother', 1],
'manzana' : ['apple', 'insane', 'men', 0],
'vivir' : ['villain', 'to live', 'to go', 1],
'amarillo' : ['love', 'river', 'yellow', 2],
'almendra' : ['almond', 'cheese', 'rails', 0],
'cascabel' : ['jingle bell', 'helmet', 'beauty', 0],
'aceituna' : ['tuna', 'oil', 'olive', 2],
'azar' : ['king', 'chance', 'zebra', 1],
'milagro' : ['voyage', 'tea', 'miracle', 2],
'añoranza' : ['snore', 'dusk', 'longing', 2],
'abecedario' : ['cedar', 'alphabet', 'ability', 1],
'frenesí' : ['frenzy', 'freaky', 'neat', 0],
'hechizo' : ['spell', 'done', 'zone', 0],
'alma' : ['almond', 'soul', 'leaf', 1],
'mariposa' : ['marriage', 'pose', 'butterfly', 2],
'siempre' : ['person', 'always', 'simple', 1],
'anochecer' : ['dusk', 'anual', 'dawn', 0],
'chiste' : ['clean', 'cheese', 'joke', 2],
'ojo' : ['eye', 'eight', 'dot', 0],
'ojalá' : ['eyeball', 'hopefully', 'lullaby', 1]
};


function loadQuestion(curr) {
//Loads questions into question area

var question = Object.keys(allQuestions)[cur];
//remove everything in q area and add current question in
questionArea.innerHTML = '';
questionArea.innerHTML = question;
}

function loadAnswers(curr) {
//Loads all the possible answers of the given question

var answers = allQuestions[Object.keys(allQuestions)[curr]];
//empty answer area
answerArea.innerHTML = '';
//add possible answers to answerArea
for (var i = 0; i < answers.length - 1; i++) {
var createDiv = document.createElement('div'),
text = document.createTextNode(answers[i]);

createDiv.appendChild(text);
//adds an onclick function to the answer; a click will execute a function to check if the answer was correct
createDiv.addEventListener("click", checkAnswer(i, answers));

answerArea.appendChild(createDiv);
}
}

function checkAnswer(i, arr) {
//checks if answer given is same as the correct one, and if it is the last question. If it is the last question, it empties answerArea

return function() {
var givenAnswer = i,
correctAnswer = arr[arr.length - 1];

if (givenAnswer === correctAnswer) {
addChecker(true);
} else {
addChecker(false);
}

if (current < Object.keys(allQuestions).length - 1) {
current++;

loadQuestion(current);
loadAnswers(current);
} else {
questionArea.innerHTML = '¡Fin!';
answerArea.innerHTML = '';
}
};
}

function addChecker(bool) {
//adds div element to page, used to see whether answer was correct or false

var createDiv = document.createElement('div'),
txt = document.createTextNode(current + 1);

createDiv.appendChild(txt);

if (bool) {
createDiv.className += 'correct';
checker.appendChild(createDiv);
} else {
createDiv.className += 'false';
checker.appendChild(createDiv);
}
}
};


Thanks for any help!

Answer

You didn't call the functions necessary to get up and running, rather you only defined them in your code. Just call them as such...

// Start the quiz right away
loadQuestion(current);
loadAnswers(current);

Also, don't bother with window.onload for JSFiddle.


JSFiddle Link - updated example