I am building a quiz manager using html5 and jquery.
I have 3 files :
1- Questions database file (q1.json) :
Code:
{
"introduction":"This quiz tests you about foo and goo",
"questions":[
{"question":"Why is the sky blue?",
"answers":["Unicorns","Fairies","Boring Science","Kittens"],
"correct":2},
{"question":"Why are kittens so cute?",
"answers":["Magic","Fur","Meow","More Kittens!"],
"correct":3}
]
}
2-js file app.js :
Code:
/* global $,document,console,quizMaster */
$(document).ready(function() {
$(document).on("pageshow", "#quizPage", function() {
console.log("Page show");
//initialize the quiz
quizMaster.execute("q1.json", ".quizdisplay", function(result) {
console.log("SUCESS CB");
console.dir(result);
});
});
});
3-js file quiz.js :
Code:
/* global $,window */
var quizMaster = (function () {
var name;
var data;
var loaded = false;
var displayDom;
var successCbAlias;
function nextHandler(e) {
e.preventDefault();
var status = getUserStatus();
//if we aren't on the intro, then we need to ensure you picked something
if(status.question >= 0) {
var checked = $("input[type=radio]:checked", displayDom);
if(checked.length === 0) {
//for now, an ugly alert
window.alert("Please answer the question!");
return;
} else {
status.answers[status.question] = checked.val();
}
}
status.question++;
storeUserStatus(status);
displayQuiz(successCbAlias);
}
function displayQuiz(successCb) {
//We copy this out so our event can use it later. This feels wrong
successCbAlias = successCb;
var current = getQuiz();
var html;
if(current.state === "introduction") {
html = "<h2>Introduction</h2><p>" + current.introduction + "</p>" + nextButton();
displayDom.html(html).trigger('create');
} else if(current.state === "inprogress") {
html = "<h2>" + current.question.question + "</h2><form><div data-role='fieldcontain'><fieldset data-role='controlgroup'>";
for(var i=0; i<current.question.answers.length; i++) {
html += "<input type='radio' name='quizMasterAnswer' id='quizMasterAnswer_"+i+"' value='"+i+"'/><label for='quizMasterAnswer_"+i+"'>" + current.question.answers[i] + "</label>";
}
html += "</fieldset></div></form>" + nextButton();
displayDom.html(html).trigger('create');
} else if(current.state === "complete") {
html = "<h2>Complete!</h2><p>The quiz is now complete. You got "+current.correct+" correct out of "+data.questions.length+".</p>";
displayDom.html(html).trigger('create');
removeUserStatus();
successCb(current);
}
//Remove previous if there...
//Note - used click since folks will be demoing in the browser, use touchend instead
displayDom.off("click", ".quizMasterNext", nextHandler);
//Then restore it
displayDom.on("click", ".quizMasterNext", nextHandler);
}
function getKey() {
return "quizMaster_"+name;
}
function getQuestion(x) {
return data.questions[x];
}
function getQuiz() {
//Were we taking the quiz already?
var status = getUserStatus();
if(!status) {
status = {question:-1,answers:[]};
storeUserStatus(status);
}
//If a quiz doesn't have an intro, just go right to the question
if(status.question === -1 && !data.introduction) {
status.question = 0;
storeUserStatus(status);
}
var result = {
currentQuestionNumber:status.question
};
if(status.question == -1) {
result.state = "introduction";
result.introduction = data.introduction;
} else if(status.question < data.questions.length) {
result.state = "inprogress";
result.question = getQuestion(status.question);
} else {
result.state = "complete";
result.correct = 0;
for(var i=0; i < data.questions.length; i++) {
if(data.questions[i].correct == status.answers[i]) {
result.correct++;
}
}
}
return result;
}
function getUserStatus() {
var existing = window.sessionStorage.getItem(getKey());
if(existing) {
return JSON.parse(existing);
} else {
return null;
}
}
function nextButton() {
return "<a href='' class='quizMasterNext' data-role='button'>Next</a>";
}
function removeUserStatus(s) {
window.sessionStorage.removeItem(getKey());
}
function storeUserStatus(s) {
window.sessionStorage.setItem(getKey(), JSON.stringify(s));
}
return {
execute: function( url, dom, cb ) {
//We cache the ajax load so we can do it only once
if(!loaded) {
$.get(url, function(res, code) {
//Possibly do validation here to ensure basic stuff is present
name = url;
data = res;
displayDom = $(dom);
//console.dir(res);
loaded = true;
displayQuiz(cb);
});
} else {
displayQuiz(cb);
}
}
};
}());
check a demo :
Edit [Moderator]: Link removed
the quiz manager works good, but I need two more things :
1- get a random question every time and display another question randomly ?
2- display correct answer before quitting the current question ??
Any ideas ?
Stumble It!
Tweet This
Bookmark on Delicious
Share on Facebook
Share on MySpace