Hello, I am currently doing a creative project for my Sci-Fi/Fantasy Literature class and I am working on making a web page for the book Ender's Game. I want the site to open up with a quick 5 question quiz and depending on your answers you will be placed in an army from the book. I already have the separate pages made for each of the armies. I have the coding pretty much figured out, just that the quiz won't show up on the web page. I coded the quiz in Javascript (I named it battleschoolquiz.js.txt), which I saved to a .txt file so I can access it in my html code. I also saved the CSS for the quiz in a .txt file called quizp.txt. There's also some extra code I needed in order to calculate the which page you will be directed to which I put in a file called quizsp.js. Here is the code that I have in my main body tag: <body> <div id="container"> <div id="header"> <h1> <center> <img src="battleschoolinitiationlogo.png"> </center> </h1> </div> <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact us</a></li> </ul> </div> <div id="content"> <center> <img src="welcometobattleschool.png"> </center> <p> Hello launchy, </p> <p> Welcome to Battle School. In Battle School, we train new initiates to become officers in the international fleet. You were enrolled in this school because you are one of the best students of your generation. In order to complete initiation, however, you are required to take a quiz that will place you in an army. Your army will compete against the other armies of the school in the coming weeks to see who is the best. You will either be placed into Salamander Army, Rat Army, Dragon Army,Phoenix Army, or Unicorn Army. Take the quiz below to finish the initiation process. </p> <p> <div id="quiz1" class="quiz"></div> <div id="quiz2" class="quiz"></div> <div id="quiz3" class="quiz"></div> <div id="quiz4" class="quiz"></div> <div id="quiz5" class="quiz"></div> </p> </div> <div id="footer"> </div> </div> <script src="battleschoolquiz.js" type="text/javascript"></script> <script src="quizsp.js" type="text/javascript"></script> </body> Here is my CSS:<link rel="stylesheet" href="quizp.css" type="text/css"> <style> #container { margin: 0 auto; width: 600px; background:#fff; } #header { background:#ccc; padding: 20px; } #header h1 { margin: 0; } #navigation { float: left; width: 600px; background:#333; } #navigation ul { margin: 0; padding: 0; } #navigation ul li { list-style-type: none; display: inline; } #navigation li a { display: block; float: left; padding: 5px 10px; color:#fff; text-decoration: none; border-right: 1px solid#fff; } #navigation li a:hover { background:#383; } #content { clear: left; padding: 20px; } #content h2 { color:#000; font-size: 160%; margin: 0 0 .5em; } #footer { background:#ccc; text-align: right; padding: 20px; height: 1%; }#container { margin: 0 auto; width: 600px; background:#fff; } #header { background:#ccc; padding: 20px; } #header h1 { margin: 0; } #navigation { float: left; width: 600px; background:#333; } #navigation ul { margin: 0; padding: 0; } #navigation ul li { list-style-type: none; display: inline; } #navigation li a { display: block; float: left; padding: 5px 10px; color:#fff; text-decoration: none; border-right: 1px solid#fff; } #navigation li a:hover { background:#383; } #content { clear: left; padding: 20px; } #content h2 { color:#000; font-size: 160%; margin: 0 0 .5em; } #footer { background:#ccc; text-align: right; padding: 20px; height: 1%; } </style> Now here is the "battleschoolquiz.js" that I have in a .txt file: var quizArray = [ 'You are faced with an onslaught of buggers. You are the commander of your fleet. How do you deal with the buggers?~Carefully observe the bugger\'s attack patterns and attempt to fight them off strategically.~Use your entire fleet\'s strength to counter them.~Flee from battle in fear~Attack the bugger fleet, but aim precisely so you won\'t miss any shots on the fleet~Give up and let them destroy your fleet~~~', 'You are confronted by the school bully. He wants to pick a fight with you. What do you do?~Stand up to him, but don\'t cause any violence~Fight him until he\'s unconscious~Run away in fear~Try to calm him down and make friends with him~Give him a hug~~~', 'You see a thief steal some jewelry from a store and make a run for it. What do you do?~Chase him down and attempt to turn him in.~Let him run~Call the police, but don\'t run after him~Carefully aim and shoot a tranquilizer gun at him to knock him out~Run the other direction, scared of what he might do.~~~', 'Your best friend is feeling really sad lately. What do you do?~Talk to him and find out what\'s wrong.~Don\'t do anything. Just let him be sad.~You feel nervous about talking to him. You feel as if you should back off a bit and leave him alone~Spend extra time with him and try to cheer him up~Give him a hug~~~', 'If you were an animal, what would it be?~Dragon~Salamander~Rat~Phoenix~Unicorn~~~' ]; var resPage = 'htm'; var qpp = 5; // questions per page to display Here is the CSS for just the quiz that is saved in a .txt file (named quizp.txt): label {display:block;} .quiz {width:300px;} .quiz form {padding:3px;border:1px dashed #000;} .quiz p {padding:3px;border:1px solid #000;} .quiz p b {font:120% verdana;color:#006666;} .question {font:90% verdana;color:#006666;margin-bottom:15px;} .answers {font:75% verdana;} Finally, here is the extra code that you need for the results pages that I saved in a .txt file (named 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.indexOf('='); if (pos > 0) {var key = parms.substring(0,pos); var val = parms.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 != null && qna != ''; 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 != null && qna != ''; 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 == 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 = (p * n1) +c; } return c;} })(quizArray,qpp,resPage); So if someone could help me figure out my issue as to why my quiz won't show up on my page that will be greatly appreciated. I have a couple more weeks to get this project done. I have a back up plan if this won't work, but I thought I'd get help first. I kinda wanna figure this one out.
Your code is hard to follow because it's not well documented and it's kinda of messy. It would take more time to figure out what's wrong with your code than I would like, so I'm going to direct you to some javascript I wrote that would be helpful: http://jsfiddle.net/GosuWhite/9hK44/ It's just a popin that you could use to place your quiz in. Keep in mind jsfiddle automatically wraps this entire code to be executed on load. This means you would have to wrap the entire function with the onload event yourself. The popin appears 100% in the center of the screen and you can adjust the size yourself. The above is not a good sample of it, so here is basically what it is: http://jsfiddle.net/GosuWhite/9hK44/embedded/result/ Edit: Oops, it would appear I had published the wrong one and it's not centered.
I'm wondering why you're using tags like CENTER that have no business on any website written after 1997, Scripting that has no graceful degradation and to be frank looks like it's processing things client side that has no business ever being done client side, etc, etc... Not sure what that mess is even trying to accomplish -- I'm just pretty sure it's not a good way of going about it.
I apologize for my messy post. This is my first thread I ever posted on this site. I am not an expert in HTML, I just have enough knowledge to be able to make a basic, but appealing website. This website doesn't have to be big and flashy, it's just for a project. So I don't need criticism as to why I'm using center tags. I just need a good enough answer. Here is the website that taught me how to make the quiz: http://javascript.about.com/library/blpquiz.htm This site coded a small bit of the CSS and it also did all the Javascript for me. So that's why my Javascript looks messy. I'm trying to follow it along with the instructions on the site but I still can't get the quiz to show up. So you can also use that site to show you why I have my site coded the way it is. I'll also try out that jsfiddle.net that you referred me too. If you have any other advice or think you can figure this out, please let me know