JS Quiz v.01
HTML
<h1>Quiz App</h1>
<p id='question'>Question</p>
<input type='radio' name='answers' ><span id="ans0"> Answer 0</span>
<br />
<br />
<input type='radio' name='answers' value=1><span id="ans1"> Answer 1</span>
<br />
<br />
<input type='radio' name='answers' value=2><span id="ans2"> Answer 2</span>
<br />
<br />
<input type='radio' name='answers' value=3><span id="ans3"> Answer 3</span>
<br />
<br />
<button type="submit" id="button">Submit</button>
JavaScript
var questions = [{
question: "What is my Favourite Movie?",
choices: ["The Matrix", "Star Wars", "The Godfather", "Django: Unchained"],
correctAnswer: 0
}, {
question: "What was my Dream Job when I was a mere child?",
choices: ["Programmer", "Footballer", "Super Hero", "Zoologist"],
correctAnswer: 2
}, {
question: "How long did it take me to make this Web Application?",
choices: ["12hours", "6 hours", "7hours", "10hours"],
correctAnswer: 3
}, {
question: "Why have I built this Web Application?",
choices: ["Boredom", "Display my Programming Skills", "Somebodys request", "......"],
correctAnswer: 1
}, {
question: "Which Musical Instrument do I play?",
choices: ["Bongos", "Piano", "Trumpet", "Harmonica"],
correctAnswer: 0
}];
$(document).ready(function () {
var maxQuestions = questions.length;
var numRight = 0;
var counter = 0;
// display first question
$('#question').text(questions[counter].question);
$('#ans0').text(questions[counter].choices[0]);
$('#ans1').text(questions[counter].choices[1]);
$('#ans2').text(questions[counter].choices[2]);
$('#ans3').text(questions[counter].choices[3]);
$('button').on('click', function () {
var answer = ($('input[name="answers"]:checked').val());
// increment score if right
if (answer == questions[counter].correctAnswer) numRight++;
counter++;
if (counter >= maxQuestions) {
document.write("Quiz is over. You got ", numRight, " out of ", maxQuestions);
return;
}
// Show next question
$('#question').text(questions[counter].question);
$('#ans0').text(questions[counter].choices[0]);
$('#ans1').text(questions[counter].choices[1]);
$('#ans2').text(questions[counter].choices[2]);
$('#ans3').text(questions[counter].choices[3]);
});
});