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 : http://www.raymondcamden.com/demos/2013/dec/5/

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 ?