I've recently started coding, and I'm trying to make a quiz!
The quiz is about different bands and artists.
But, with the code I got now, I am unable to shuffle
the questions. How do I make them appear in a random order
?
Also, instead of ending the quiz at the last question and giving you correct/incorrect answers, how can I make it so it instead it plays a sound to tell the user if correct or incorrect. Explained differently, the quiz loops with 3 questions, but they come 1 at the time in a shuffled order.
Another thing I'm trying to change is; how do I make it so I can have an image as a background for each individual question, example: what band is this, with cold play as background.
IF anything seems unclear or too broad, please ask and I'll do my best to enlighten you.
HTML:
<h2 id="test_status"></h2>
<h2> Hvilket band er dette? </h2>
<div id="test"></div>
SCRIPT:
var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, chD, chE, correct = 0;
var questions = [
[ "Hvilket band er dette?", "Linkin Park", "Green Day", "Coldplay", "Billy Talent", "Hollywoodundead" ,"B" ],
[ "Hvilket band har denne sangen?", "Linkin Park", "Green Day", "Coldplay", "Billy Talent", "Hollywoodundead" ,"A" ],
[ "Hvilket band er dette?", "Linkin Park", "Green Day", "Coldplay", "Billy Talent", "Hollywoodundead" ,"B" ],
];
function _(x){
return document.getElementById(x);
}
function renderQuestion(){
test = _("test");
if(pos >= questions.length){
test.innerHTML = "<h2>Du fikk "+correct+" av "+questions.length+" spørsmål riktige</h2>";
_("test_status").innerHTML = "Quiz fullført";
pos = 0;
correct = 0;
return false;
}
_("test_status").innerHTML = "Spørsmål "+(pos+1)+" av "+questions.length;
question = questions[pos][0];
chA = questions[pos][1];
chB = questions[pos][2];
chC = questions[pos][3];
chD = questions[pos][4];
chE = questions[pos][5];
test.innerHTML = "<h3>"+question+"</h3>";
test.innerHTML += "<input type='radio' name='choices' value='A'> "+chA+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='B'> "+chB+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='C'> "+chC+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='D'> "+chD+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='E'> "+chE+"<br><br>";
test.innerHTML += "<button onclick='checkAnswer()'>Neste</button>";
}
function checkAnswer(){
choices = document.getElementsByName("choices");
for(var i=0; i<choices.length; i++){
if(choices[i].checked){
choice = choices[i].value;
}
}
if(choice == questions[pos][5]){
correct++;
}
pos++;
renderQuestion();
}
window.addEventListener("load", renderQuestion, false);
JSFIDDLE: