1
   

Building Quiz using jquery and html5

 
 
mmdsaad
 
Reply Sun 16 Mar, 2014 06:11 am
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 ?
  • Topic Stats
  • Top Replies
  • Link to this Topic
Type: Question • Score: 1 • Views: 2,113 • Replies: 2
No top replies

 
heris charles
 
  1  
Reply Thu 20 Mar, 2014 07:25 am
@mmdsaad,
Add some more like stored procedures. It will save the size of code.
0 Replies
 
hang283
 
  1  
Reply Mon 31 Mar, 2014 08:39 am
@mmdsaad,
Hi mmdsaad. Did you did it?
I also want someting like this .
So if you did can you post it there thank you
0 Replies
 
 

Related Topics

 
  1. Forums
  2. » Building Quiz using jquery and html5
Copyright © 2019 MadLab, LLC :: Terms of Service :: Privacy Policy :: Page generated in 0.03 seconds on 10/18/2019 at 06:55:00