Multiple Choice Quiz Maker

2. Main Quiz Script

Now that you have your question and answer script built, the second step is to get the rest of the Javascript. This is even easier for you since I have already written all of the code for you. Simply select all of the content of the below text area and copy and paste it into a new file. We'll keep it separate from your questions because that way you easily create multiple quizes just by creating extra question and answer script files.

// Quiz Javascript // copyright 29th October 2006, 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 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; var pageLoaded = 0; window.onload = function() {pageLoaded = 1;}; function loaded(i,f) {if (document.getElementById && document.getElementById(i) != null) f(); else if (!pageLoaded) setTimeout('loaded(\''+i+'\','+f+')',100);} loaded('quiz'+qpp,loadQuiz); function loadQuiz() {if (qnum>=quizArray.length) displayResult(); else {displayQuiz(ent = document.getElementById('quiz1'),qnum++); if (qpp > 1 && (ent = document.getElementById('quiz2')) && 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.')); 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;}

Simply save the above code in a file called quizmc.js which we can then link into all of the pages where you want to use multiple choice quizes.

We have one more file to set up before we start adding the quiz to our page but this one is a stylesheet rather than a Javascript file. NEXT >>