Answer 5 questions and your results will be shown to you:<br><br><br>
<div id="container"></div><br>
<input type="button" id="answerQuestion" value="Submit Answer"/>
JavaScript
localStorage.setItem('quizprogress','');
var questionsAsked=[];
function loadQuestion(){
if(questionsAsked.length< 5){ // this just limits the demo to six questions
var rowId = randomIntFromInterval(1025,5021);// just getting a random number here, you should use the row id from your database here
var fakeQuestion = '<div id="question" data-qestion-id="'+rowId+'">Question '+rowId+'</div>'+ // adding in the row id as a data attribute here give us something to track it by
'<input type="radio" name="answer" value="a" class="answer">a<br>'+
'<input type="radio" name="answer" value="b" class="answer">b<br>'+
'<input type="radio" name="answer" value="c" class="answer">c<br>'+
'<input type="radio" name="answer" value="d" class="answer">d<br>'+
'<input type="radio" name="answer" value="e" class="answer">e<br>';
questionsAsked.push(rowId);
$('#container').html(fakeQuestion);
}
else{ // had our six questions, lets look at our answers now
// when the quiz is done, localstorage `quizprogress` will contain all of our question ids with thier respective answer choice
$('#container').html('');
var quizprogress = JSON.parse(localStorage.getItem('quizprogress'));
$.each(questionsAsked, function(i,qId){
$('#container').append('Question '+qId+': '+quizprogress[qId]+'<br>');
});
// clean up localStorage
localStorage.removeItem('quizprogress');
}
}
// load the first question for the demo
loadQuestion();
// listen for change of answer (or submit button etc....)
$('#answerQuestion').click(function(){
// you'll want some check here to be sure an answer was selected
// get quizprogress from localstorage
var quizprogress = localStorage.getItem('quizprogress');
// if we have some answers stored already, load the...
Please Whitelist JSFiddle in your content blocker.
Help keep JSFiddle free for always by one of two ways:
Whitelist JSFiddle in your content blocker (two clicks)
Go PRO and get access to additional PRO features →
Join the 4+ million users, and keep the JSFiddle dream alive.
Ad-free
All ads in the editor and listing pages are turned completely off.
Use pre-released features
You get to try and use features (like the Palette Color Generator) months before everyone else.
Fiddle collections
Sort and categorize your Fiddles into multiple collections.
Private collections and fiddles
You can make as many Private Fiddles, and Private Collections as you wish!
Console
Debug your Fiddle with a minimal built-in JavaScript console.