Your host:
Stephen Chapman

Personality Quiz Maker

Do you want to add a "personality" 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. Each question needs to have the same number of answers and you can supply as many as eight. The answers will be displayed in random order. Each answer represents a particular "personality" and the "personality" that is selected the most times during the quiz will determine which results page to display.

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

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

quizsp.js

// Personality Quiz Javascript
// copyright 11th November 2006, 15th May 2010 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,resPage) {
var perPage = 0; var n1 = 475; var n2 = 13;
function randOrd(){return (Math.round(Math.random())-0.5); }
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['fin'] = 0;  qsParm['aa'] = 0; qsParm['bb'] = 0; qsParm['cc'] = 0; qsParm['dd'] = 0; qsParm['ee'] = 0; qsParm['ff'] = 0; qsParm['gg'] = 0; qsParm['hh'] = 0; var cntarry = []; qs(); var qnum = qsParm['qnum']; cntarry[0] = qsParm['aa']%n1; cntarry[1] = qsParm['bb']%n1; cntarry[2] = qsParm['cc']%n1;  cntarry[3] = qsParm['dd']%n1; cntarry[4] = qsParm['ee']%n1; cntarry[5] = qsParm['ff']%n1; cntarry[6] = qsParm['gg']%n1; cntarry[7] = qsParm['hh']%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++); 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 od = []; for (var i = 1; qna[i] != null && qna[i] != ''; i++) od.push(i); od.sort( randOrd ); od.sort( randOrd ); var newF = document.createElement("form"); var newDq = document.createElement("div"); newDq.className = 'question'; newDq.appendChild(document.createTextNode(Number(qnum+1)+ ': ' +qna[0])); newF.appendChild(newDq); newDq = document.createElement("div"); newDq.className = 'answers'; for (var i = 1; 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 = od[i-1]; newDa.appendChild(newR); newDa.appendChild(document.createTextNode(' '+qna[od[i-1]]+' ')); newDq.appendChild(newDa);} newF.appendChild(newDq); document.getElementById('quiz'+perPage).appendChild(newF);}
function displayResult() {var res = []; var mx = Math.max(cntarry[0],cntarry[1],cntarry[2],cntarry[3],cntarry[4],cntarry[5],cntarry[6],cntarry[7]); for (var i = cntarry.length-1; i >= 0; i--) {if (cntarry[i] == mx) res.push(i);} var ch = String.fromCharCode(res[Math.floor(Math.random()*res.length)]+64); resPage = resPage + ch + '.htm';  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")); var newL = document.createElement("a");newL.href = resPage; newL.appendChild(document.createTextNode('Your Results')); newP.appendChild(newL); document.getElementById('quiz1').appendChild(newP); var newC = document.createElement("button"); newC.style.styleFloat = 'right'; newC.onclick = function() {nextPage(0);return false;}; newC.appendChild(document.createTextNode('Try Again')); document.getElementById('quiz1').appendChild(newC);}
function checkAnswer(e,c){for (var i=1; document.getElementById(e+i); i++) {if (document.getElementById(e+i).checked) c[+document.getElementById(e+i).value--]++;} return c;}
function nextPage(qnum) {for (var i=qnum-perPage; i < qnum; i++) {cntarry = checkAnswer('a'+i,cntarry);} var thispage = self.location.href; var www = thispage.lastIndexOf('?'); if (www != -1) thispage = thispage.substr(0,www); cntarry = encryptResult(cntarry); var nxt = thispage; if (qnum > 0)  nxt += '?qnum='+ qnum +'&aa='+cntarry[0]+'&bb='+cntarry[1]+'&cc='+cntarry[2]+'&dd='+cntarry[3]+'&ee='+cntarry[4]+'&ff='+cntarry[5]+'&gg='+cntarry[6]+'&hh='+cntarry[7]; if (qnum >= quizArray.length) nxt += '&fin=1'; top.location.href = nxt;}
function encryptResult(c) {for (var i = c.length-1; i >= 0; i--) {p = Math.floor((Math.random() * n2) + 2); c[i] = (p * n1) +c[i]; } return c;}
})(quizArray,qpp,resPage);

Step Three - highlight and copy/paste the following styles into a separate file called quizp.css. Note that you can change the content of this file if you want your quiz to look different.

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.

Step Seven - the quiz redirects to an answer page at the end of the script with the specific answer page it redirects to being determined by the answers selected during the quiz. The answer pages will all start with the value you entered as analPage in the first form and will have a single letter between 'a' and 'h' on the end. So if you entered 'quizresult' as the prefix for the page names the eight pages you need for the results are quizresulta.htm, quizresultb.htm, quizresultc.htm, quizresultd.htm, quizresulte.htm, quizresultf.htm, quizresultg.htm, and quizresulth.htm. Which of these will be displayed depends on which of the 'personalities' received the highest number of answers. If two or more received the same number of answers then one of those will be selected at random.

FaceBook Follow

Twitter Follow

Question:
Personality A Answer
Personality B Answer
Personality C Answer
Personality D Answer
Personality E Answer
Personality F Answer
Personality G Answer
Personality H Answer
Results Page Prefix:	[ABCDEFGH].htm

Personality Quiz Maker

Related Articles