Greetings
Im working on my cw and I am really lost, could anyone help me please? I am supposed to create 3 html files. First one with Introduction, second with questions and last with results. I havent write the code myself. Problem is, that I am getting the score on the wrong html. (questions instead of results html) Could anyone please modify/add my javascript file? Also, I dont like firtsj.js file, any idea how can I rewrite it so it will look better? Any help is appreciated, Alexandra.
<!DOCTYPE html>
<html>
<head>
<title>Introduction</title>
<link rel="stylesheet" href="../css/alexandra.css" type="text/css">
</head>
<body>
<h1>Welcome to the JavaScript Quiz!</h1>
<a href="Questions.html">
<img src="../images/start.jpg" width="100" height="100" border="0">
</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Questions</title>
<link rel="stylesheet" href="../css/zdenka.css" type="text/css">
</head>
<body>
<h1>Good Luck!</h1>
<div id="quiz1" class="quiz"></div>
<a href="Result.html">
<img src="../images/result.jpg" width="100" height="100">
</a>
<script src="../js/firstj.js" type="text/javascript"></script>
<script src="../js/second.js" type="text/javascript"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Results</title>
<link href="../css/result.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>Please, choose the group and know more about your result</h1>
</div>
<div class="content">
<div id="main">
<h2>Score 0 - 8</h2>
<div class="answer">
<p>You should learn more about the JavaScript </p>
</div>
<h2>Score 9 - 15</h2>
<div class="answer">
<p>Well done! Practice makes perfect, try again.</p>
</div>
<h2>Score 16 - 20</h2>
<div class="answer">
<p>Perfect!</p>
</div>
</div>
</div>
<script src="../js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$(".answer").hide();
$('#main').find('h2').click(function(e) {
var
self = $(this),
answer = $(this).next(".answer");
if (
answer.is(":visible")) {
answer.fadeOut();
self.removeClass('close');
} else {
answer.fadeIn();
self.addClass('close');
}
});
} );
</script>
</body>
</html>
firstj.js
var quizArray = [
'37~70~Variables declared outside a function, become~Local variables~International variables~Global variables~Universe variables',
'43~84~If you add a number and a string, the result will be~number~error~number + string~string',
'8~28~In JavaScript, different kinds of Loop are~for~for/in~while~for/out',
'18~33~JavaScript can be used to validate data in HTML forms before sending off the content to a server.~True~False',
'36~93~JavaScript is~prototype based language~class based language~ID based language~all of above',
'17~58~The Array object is used to store~single value~multiple values~candies~bananas',
'120~76~What is the DOM?~Difficult Objet Model~Document Open Model~Document Object Mouse~Document Object Model',
'50~69~Where is the correct place to insert a JavaScript?~The < head > section~The < body > section~Both of them are correct~none',
'26~32~How do you create a variable "x" that is equal to the integer 4?~int x = 4;~num x = 4;~var x = 4;~number x =4;',
'54~98~The window object represents~an open window in a browser~closed window in a browser~an open window in a room~closed window in a room',
'105~76~JavaScript is not widely supported.~True~False'
];
var qpp = 1; // questions per page to display
var reslink = ""; // file to link to at end of quiz
second .js file
(function(quizArray,qpp,reslink) {
var perPage = 0; var n1 = 109;
var n2 = 13;
var reslink = '';
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,reslink);
result.css file
h1, h2, h3 {
font-family: Arial, sans-serif;
}
h2 {
background: url(../images/open.png) no-repeat 0 11px;
padding: 10px 0 0 25px;
cursor: pointer;
}
h2.close {
background-image: url(../images/close.png);
}
.answer {
margin-left: 25px;
}
strong {
font-family: Arial, sans-serif;
}
em {
font-family: Arial, sans-serif;
}
.content {
max-width: 760px;
margin: 20px 0 0 100px;
}
.footer {
position: fixed;
bottom: 0;
left: 100px;
width: 100%;
padding-top: 18px;
background: url(../images/bg-footer.png) repeat-x left top;
}
.clear:after {
content: "."; display: block; height: 0; clear: both; visibility: hidden;
}
.clear {
min-height: 1px;
}
* html .clear {
height: 1px;
}
.header {
position: relative;
border-top: solid 6px white;
padding: 10px 0 10px 0;
margin-bottom: 20px;
}
.main {
padding-bottom: 1em;
border-bottom: solid 1px rgba(255,255,255,.5);
}
.main h1 {
font-size: 32px;
margin-bottom: 0.75em;
}
p , li, legend , form {
font-size: 18px;
color: blue;
font-family: Arial, sans-serif;
line-height: 125%;
margin-bottom: 10px;
}
.footer p {
font-size: 14px;
font-family: Arial, sans-serif;
padding: .5em .25em .5em 1em;
color:rgb(55,76,119);
background: rgb(110,138,195);
-moz-border-radius: 2px 0 0 0;
border-radius: 2px 0 0 0;
margin: 0;
}
a {
color: rgba(255,255,255,.75);
}
.example, code {
font-family: Courier, monospaced;
font-size: 16px;
color: blue;
}
.unit {
display: inline-block;
width: 45%;
}
.results h2 {
color: rgba(255,255,255,1);
}
.results div {
padding-bottom: 10px;
}
.results div code {
float: right;
width: 60%;
}
.clearLeft {
clear: left;
}
.imgRight {
float: right;
margin-bottom: 5px;
margin-left: 5px;
}
.imgLeft {
float: left;
margin-bottom: 5px;
margin-right: 5px;
}
alexandra.css file
label {display:block;}
.quiz {width:300px;}
.quiz form {padding:3px;border:1px solid #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;}