Koden er her
window.onload = function () {
var questionArea = document.getElementsByClassName('questions')[0],
answerArea = document.getElementsByClassName('answers')[0],
checker = document.getElementsByClassName('checker')[0],
current = 0,
// An object that holds all the questions + possible answers.
// In the array --> last digit gives the right answer position
allQuestions = {
'Superunknown' : ['Alice In Chains', 'Soundgarden', 'Stone Temple Pilots','Nine Inch Nails', 1],
'Music for the Jilted Generation' : ['Chemical Brothers', 'The Prodigy', 'Portishead', 1],
'Thug Life: Volume 1' : ['Naughty By Nature', 'Kris Kross', '2Pac', 2],
'Pisces Iscariot' : ['Smashing Pumpkins', 'Pearl Jam', 'Pixies', 0],
'Steam' : ['Take That', 'East 17' , 'Boyzone', 1],
'Youthanasia ' : ['Metallica', 'Slayer', 'Megadeth', 2],
'The Return of the Space Cowboy' : ['Jamiroquai', 'Primus', 'Stevie Wonder', 0],
'Dog Man Star' : ['Suede', 'Sort Sol', 'Weezer', 0],
'No Need to Argue' : ['The Cranberries', 'Morrissey' , 'Pulp', 0],
'Burn My Eyes' : ['Korn', 'Anthrax?', 'Machine Head', 2],
};
function loadQuestion(curr) {
// This function loads all the question into the questionArea
// It grabs the current question based on the 'current'-variable
var question = Object.keys(allQuestions)[curr];
questionArea.innerHTML = '';
questionArea.innerHTML = question;
}
function loadAnswers(curr) {
// This function loads all the possible answers of the given question
// It grabs the needed answer-array with the help of the current-variable
// Every answer is added with an 'onclick'-function
var answers = allQuestions[Object.keys(allQuestions)[curr]];
answerArea.innerHTML = '';
for (var i = 0; i < answers.length -1; i += 1) {
var createDiv = document.createElement('div'),
text = document.createTextNode(answers[i]);
createDiv.appendChild(text);
createDiv.addEventListener("click", checkAnswer(i, answers));
answerArea.appendChild(createDiv);
}
}
function checkAnswer(i, arr) {
// This is the function that will run, when clicked on one of the answers
// Check if givenAnswer is sams as the correct one
// After this, check if it's the last question:
// If it is: empty the answerArea and let them know it's done.
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 += 1;
loadQuestion(current);
loadAnswers(current);
} else {
var correct = document.getElementsByClassName("correct").length;
questionArea.innerHTML = 'Færdigt arbejde';
answerArea.innerHTML = 'Du fik ' + correct + ' rigtige ud af ' + (current+1) + ' </br></br> <input type="button" class="button" value="Prøv igen" onClick="window.location.reload()">';
}
};
}
function addChecker(bool) {
// This function adds a div element to the page
// Used to see if it 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);
}
}
// Start the quiz right away
loadQuestion(current);
loadAnswers(current);
};
det nemmeste ville være at lave et array bestående af:
spørgsmål, afgivet svar, rigtigt svar, resultat (true/false eller ok/wrong).
og på slutsiden udskrive dette array, evt i en tabel, hver rækkes farve bestemmes så af resultat feltet.
i functionen checkAnswer(i, arr) har du alle oplysninger du skal bruge til at danne det array, og det er også der du udskriver det