$(document).ready(function() {
$(".begin").click(function() {
$("#main").hide();
return quiz();
});
function startOver() {
location.reload(true);
}
function quiz() {
var score = [];
var questions = [{
q: "How many years did the original Twilight Zone series last for?",
s: ["1",
"5",
"3"
],
a: "5",
w: "Incorrect",
correct: 0
}, {
q: "In what year did the Twilight Zone start?",
s: ["1970",
"1959",
"1965"
],
a: "1959",
w: "Incorrect",
correct: 0
}, {
q: "How many episodes are in season 4?",
s: ["18",
"36",
"20",
"12"
],
a: "18",
w: "Incorrect",
correct: 0
}, {
q: "What is the name of the debut episode of the classic series?",
s: ["Everyone Is Gone",
"End of Days",
"Where Is Everybody",
"The Last Man Alive"
],
a:"Where Is Everybody",
w:"Incorrect",
correct: 0
},
{
q: "In the episode, Escape Clause, what is the name the devil goes by?",
s: ["Jeff Myrtlebank",
"Cad Wallader",
"Henry Bevis",
"Luther Dingle"
],
a:"Cad Wallader",
w:"Incorrect",
correct: 0
}
];
var counter = questions.length;
function renderQuestion(questions) {
for (var i = 0; i < questions.length; i++) {
$("#questions").append(
'<form id="' + i + '">' +
'<p class="page">Question ' + (i + 1) + ' of ' + questions.length + '</p>' +
'<hr class="row">' +
'<h3 class="question">' + questions[i].q + '</h3>' +
radioButtons(questions[i].s, i) +
'<hr class="row">' +
'<span class="nav">' +
'<button type="button" class="reset btn-primary btn-sm" value="reset">start over</button>' +
'<button type="submit" class="next btn-primary btn-sm">next</button>' +
'</span></form>');
}
for (var k = questions.length - 1; k > 0; k--) {
$('#' + k).hide();
}
$('.reset').click(startOver);
}
function radioButtons(ary, qNum) {
var answers = [];
for (i = 0; i < ary.length; i++) {
answers.push(
'<div class="choices">' +
'<input type="radio" name="' + qNum + '" value="' + ary[i] + '" id="' + qNum + '">' +
'<label for="' + qNum + '">' + ary[i] + '</label>' +
'</div>');
}
return answers.join("");
}
function sumCorrect(questions) {
return score.reduce(function(previousValue, currentValue, index, array) {
return previousValue + currentValue;
});
}
function checkAnswer(answer, qNum, questions) {
if (answer == questions[qNum].a) {
questions[qNum].correct = 1;
score.push(questions[qNum].correct);
} else {
score.push(questions[qNum].correct);
}
}
renderQuestion(questions);
$("#modal").click(function() {
$(this).fadeOut("fast")
})
$(".next").click(function(event) {
event.preventDefault();
var answer = $(this).closest("form").find(":radio:checked").val(),
questionNumber = this.form.id;
console.warn(questionNumber, answer)
if (!answer) { // User did not answer question.
return; // Make user answer again.
}
if (answer !== questions[questionNumber].a) { // wrong answer!
$("#message").text(questions[questionNumber].w)
$("#modal").fadeIn("fast")
}
var qNum = $(this).closest("form").attr("id");
var userInput = $('input[name=' + qNum + ']:radio:checked').val();
if (counter > 1) {
checkAnswer(userInput, qNum, questions);
$("#" + qNum).hide();
$("#" + qNum).next().show();
counter--;
} else if (counter == 1) {
checkAnswer(userInput, qNum, questions);
$("#questions").find("form").remove();
$("#questions").append(
'<p class="page result"></p>' +
'<hr class="row">' +
'<div class="nav nextLast">' +
'<button type="button" class="reset btn-primary btn-sm" value="reset">start over</button>' +
'</div>');
var hr = $('<hr />')[0];
$(".result").text('You answered ' + sumCorrect(questions) + ' questions correctly out of 5.');
for (j = 0; j < score.length; j++) {
if (score[j] === 0) {
console.log(questions[j].q, questions[j].a);
$("#questions").append('<div>' +
'<h3 class="question">' + questions[j].q + '</h3>' +
'<p>' + questions[j].a + '</p>' +
'</div>');
}
$('.reset').click(startOver);
}
} else {
return false;
}
});
}
});