Your host:
Stephen Chapman

Quiz Maker 3

The quiz Javascript on this page processes multiple choice quizes having four possible answers to each question one of which is obviously the correct answer and the other three being wrong. You can have as many questions in the quiz as you require subject only to the length of time that it will take to load the resulting web page.

Step One - Fill out the following form for each question that you want to contain within your quiz. Each time you press the "Add Question" button the code in the textarea immediately below will be updated to add the new question and answers to those you have already added to the quiz. Once you have all your questions entered highlight the content of the text area and copy/paste it into a new JavaScript file (eg. quizhead.js).

Step Two - add the following code immediately before the </head> tag in the page where you want the quiz displayed.

Step Three - select whether you want to only display the answer page if they get the question right or whether you want to always display the answer page and then copy/paste one of the following two scripts and save it as quizbody.js.

right only

// Quiz Javascript
// copyright 7th April 2005 - 13th May 2005, by Stephen Chapman
// permission to use this JavaScript on your web page is granted
// provided that all of the code in this script (including these
// comments) is used without any alteration

var qsParm = new Array();
function qs() {
var query = window.location.search.substring(1);
var parms = query.split('&');
for (var i=0; i<parms.length; i++) {
   var pos = parms[i].indexOf('=');
     if (pos > 0) {
      var key = parms[i].substring(0,pos);
      var val = parms[i].substring(pos+1);
      qsParm[key] = val;
      }
   }
}
qsParm['questnum'] = 0;
qsParm['cor'] = 0;
qs();
var questnum = qsParm['questnum'];
var cor = qsParm['cor'];cor=cor%53;

function checkAnswer(e,b,g){
var a = -1; var x = (b%5) + 2;
for (var i=0; i<e.c.length; i++) {if (e.c[i].checked) {a = i;}}
if (a == -1) {
alert("You must select an answer");
return false;
}
var b = (g%x);
var f = quiz[questnum].split('~');
var www = self.location.href.lastIndexOf('?');
var thispage = self.location.href;
if (www != -1) thispage = self.location.href.substr(0,www);
questnum++;
var p = Math.floor((Math.random() * 8) + 2);
if (a == b) {cor++;}
var m = (p * 53) +cor;
var nxt = thispage + '?questnum='+ questnum +'&cor='+m;
if (a == b) {nxt = f[7]+'?'+escape(thispage+'?questnum='+ questnum +'&cor='+m);}
else {alert('Incorrect\nThe Correct Answer is '+f[b+3]);}
top.location = nxt;
return false;
}

function tot() {
alert('You scored ' + cor + ' right answers out of ' + tblsz);
}

var tblsz = quiz.length;
document.write('<table align="center" cellpadding="3" width="350" border="1"><tr>');
if (questnum < quiz.length) {
var f = quiz[questnum].split('~');
document.write('<td align="left"><form name="myForm"><div style="font-size:14px;">Question:'+f[2]+'</div><blockquote><span style="font-size:12px;">\n');
document.write('<input type="radio" name="c" value="0" /> '+f[3]+'<br />\n');
document.write('<input type="radio" name="c" value="1" /> '+f[4]+'<br />\n');
if (f[5] != '') document.write('<input type="radio" name="c" value="2" /> '+f[5]+'<br />\n');
if (f[6] != '') document.write('<input type="radio" name="c" value="3" /> '+f[6]+'<\/span><\/blockquote>\n');
document.write('<div align="right"><input type="button" value="Check Answer" onclick="checkAnswer(myForm,'+f[1]+','+f[0]+');return false;" /><\/div><\/form>\n');
} else {
document.write('<td align="center">\n');
document.write('<form name="myForm"><div style="font-size:14px;"><b>You have completed the quiz.<\/b><\/div><blockquote><span style="font-size:12px;"> <br \/> <br \/> <br \/> <br \/><\/span><\/blockquote>');
document.write('<div><input type="button" value="Your Score" onclick="tot();return false;" /><\/div><\/form>\n');}
document.write('<\/td><\/tr><\/table>\n');

always

// Quiz Javascript
// copyright 7th April 2005 - 1st June 2005, by Stephen Chapman
// permission to use this JavaScript on your web page is granted
// provided that all of the code in this script (including these
// comments) is used without any alteration

var qsParm = new Array();
function qs() {
var query = window.location.search.substring(1);
var parms = query.split('&');
for (var i=0; i<parms.length; i++) {
   var pos = parms[i].indexOf('=');
     if (pos > 0) {
      var key = parms[i].substring(0,pos);
      var val = parms[i].substring(pos+1);
      qsParm[key] = val;
      }
   }
}
qsParm['questnum'] = 0;
qsParm['cor'] = 0;
qs();
var questnum = qsParm['questnum'];
var cor = qsParm['cor'];cor=cor%53;

function checkAnswer(e,b,g){
var a = -1; var x = (b%5) + 2;
for (var i=0; i<e.c.length; i++) {if (e.c[i].checked) {a = i;}}
if (a == -1) {
alert("You must select an answer");
return false;
}
var b = (g%x);
var f = quiz[questnum].split('~');
var www = self.location.href.lastIndexOf('?');
var thispage = self.location.href;
if (www != -1) thispage = self.location.href.substr(0,www);
questnum++;
var p = Math.floor((Math.random() * 8) + 2);
if (a == b) {cor++;}
var m = (p * 53) +cor;
var nxt = thispage + '?questnum='+ questnum +'&cor='+m;
nxt = f[7]+'?'+escape(thispage+'?questnum='+ questnum +'&cor='+m);
if (a != b) {alert('Incorrect\nThe Correct Answer is '+f[b+3]);}
top.location = nxt;
return false;
}

function tot() {
alert('You scored ' + cor + ' right answers out of ' + tblsz);
}

var tblsz = quiz.length;
document.write('<table align="center" cellpadding="3" width="350" border="1"><tr>');
if (questnum < quiz.length) {
var f = quiz[questnum].split('~');
document.write('<td align="left"><form name="myForm"><div style="font-size:14px;">Question:'+f[2]+'</div><blockquote><span style="font-size:12px;">\n');
document.write('<input type="radio" name="c" value="0" /> '+f[3]+'<br />\n');
document.write('<input type="radio" name="c" value="1" /> '+f[4]+'<br />\n');
if (f[5] != '') document.write('<input type="radio" name="c" value="2" /> '+f[5]+'<br />\n');
if (f[6] != '') document.write('<input type="radio" name="c" value="3" /> '+f[6]+'<\/span><\/blockquote>\n');
document.write('<div align="right"><input type="button" value="Check Answer" onclick="checkAnswer(myForm,'+f[1]+','+f[0]+');return false;" /><\/div><\/form>\n');
} else {
document.write('<td align="center">\n');
document.write('<form name="myForm"><div style="font-size:14px;"><b>You have completed the quiz.<\/b><\/div><blockquote><span style="font-size:12px;"> <br \/> <br \/> <br \/> <br \/><\/span><\/blockquote>');
document.write('<div><input type="button" value="Your Score" onclick="tot();return false;" /><\/div><\/form>\n');}
document.write('<\/td><\/tr><\/table>\n');

Step Four - attach this script into the body of your question page where you want the quiz question to appear using:

Step Five - as each quiz question redirects to an answer page we need to add some code to those answer pages to redirect to the next quiz question. To do this, first highlight and copy/paste the following styles into a separate file called quizans.js

We then attach this code to each answer page by placing the following immediately before the </body> tag.

We then simply add a link into each answer page to take people to the next question by placing the following somewhere toward the bottom of the page.

<a href="javascript:quiz();">Next Question</a>

FaceBook Follow

Twitter Follow

Question:
Answer One
Answer Two
Answer Three
Answer Four
Answer Page:
This entry contains HTML code.

Quiz Maker 3

Related Articles