Your host:
Stephen Chapman

Multiple Choice Quiz Maker

Do you want to add a multiple choice quiz to your web page? This quiz uses the Javascript Document Object Model to dynamically insert one or two quiz questions into a web page where ever you want simply by placing two div tags in the body of your page where you want them to go. It also provides sufficient id and class names to allow you to change the appearance of the quiz to suit your own requirements.

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. quizqa1.js).

Step Two - highlight and copy/paste the following styles into a separate file called quizmc.css.

Step Three - highlight and copy/paste the following JavaScript into a separate file called quizmc.js.

quizmc.js

// Quiz Javascript
// copyright 29th October 2006, 4th June 2011, 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
(function(quizArray,qpp,reslink) {
var perPage = 0; var n1 = 109; var n2 = 13;
var qsParm = []; 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['qnum'] = 0; qsParm['cor'] = 0; qsParm['fin'] = 0; qs(); var qnum = qsParm['qnum']; var cor = qsParm['cor'];cor=cor%n1;
function loadQuiz() {if (qnum>=quizArray.length) displayResult(); else {displayQuiz(ent = document.getElementById('quiz1'),qnum++); for(var j=2; j <= qpp; j++) {if ((ent = document.getElementById('quiz'+j)) && qnum<quizArray.length) displayQuiz(ent,qnum++);} var newB = document.createElement("button"); newB.style.styleFloat = 'right'; newB.style.cssFloat = 'right';newB.onclick = function() {nextPage(qnum);return false;}; var newTb = document.createTextNode('Next >>'); newB.appendChild(newTb); ent.appendChild(newB);}}
function displayQuiz(ent,qnum) {perPage++; var qna = quizArray[qnum].split('~'); var newF = document.createElement("form"); var newDq = document.createElement("div"); newDq.className = 'question'; newDq.appendChild(document.createTextNode(Number(qnum+1)+ ': ' +qna[2])); newF.appendChild(newDq); newDq = document.createElement("div"); newDq.className = 'answers'; for (var i = 3; qna[i] != null && qna[i] != ''; i++) {var newDa = document.createElement("label"); newDa.htmlFor = 'a'+qnum+i; /*@cc_on @if (@_jscript) var newR = document.createElement("<input name='a"+qnum+"'>"); @else */ var newR = document.createElement("input"); newR.name = 'a'+qnum; /* @end @*/ newR.type = 'radio'; newR.id = 'a'+qnum+i; newR.value = i; newDa.appendChild(newR); newDa.appendChild(document.createTextNode(' '+qna[i]+' ')); newDq.appendChild(newDa);} newF.appendChild(newDq); document.getElementById('quiz'+perPage).appendChild(newF);}
function displayResult() {var newP = document.createElement("p");newP.style.textAlign = 'center'; var newB = document.createElement("b"); newB.appendChild(document.createTextNode('Congratulations.')); newB.appendChild(document.createElement("br")); newB.appendChild(document.createTextNode(' You have completed the quiz.')); newP.appendChild(newB); newP.appendChild(document.createElement("br")); newP.appendChild(document.createElement("br")); newP.appendChild(document.createTextNode('You answered ' + cor + ' of the ' + qnum + ' questions correctly.'));
if (reslink != '') {newP.appendChild(document.createElement("br")); newA = document.createElement("a"); newA.href=reslink + '?cor='+cor+'&qnum='+qnum; newA.appendChild(document.createTextNode('Find Out More')); newP.appendChild(newA);}
document.getElementById('quiz1').appendChild(newP); var newC = document.createElement("button"); newC.style.styleFloat = 'right'; newC.onclick = function() {cor = 0; nextPage(0);return false;}; newC.appendChild(document.createTextNode('Try Again')); document.getElementById('quiz1').appendChild(newC);}
function checkAnswer(e,b,g,q){var a = -1; var x = (b%n2) + 2; for (var i=3; document.getElementById(e+i); i++) {if (document.getElementById(e+i).checked) {a = i-3;}} var c = (g%x); return a == c?1:0;}
function nextPage(qnum) {for (var i=qnum-perPage; i < qnum; i++) {var qna = quizArray[i].split('~'); cor += checkAnswer('a'+i,qna[1],qna[0],i);} var thispage = self.location.href; var www = thispage.lastIndexOf('?'); if (www != -1) thispage = thispage.substr(0,www); var p = Math.floor((Math.random() * 8) + 2); var m = (p * n1) +cor; var nxt = thispage + '?qnum='+ qnum +'&cor='+m; if (qnum >= quizArray.length) nxt += '&fin=1'; top.location.href = nxt;}
loadQuiz();
})(quizArray,qpp,'');

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

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

Step Six - add the following tags into the body of the page where you want the quiz questions to appear. Note that you can if you wish place other content between these two divs. You can also add more divs if you want to have more than two questions display per page.

FaceBook Follow

Twitter Follow

Question:
Answer One
Answer Two
Answer Three
Answer Four
Answer Five
Answer Six

Multiple Choice Quiz Maker

Related Articles