Example 6-1: view see code
Example 6-2: view see code
(23K)
Example 6-1
<html>
<head>
<title>Shelley Quiz</title>
<style type="text/css">
#header { position: absolute; left: 32; top: 20; }
#mainnav { position: absolute; left: 32; top: 82; }
#q1 { position:absolute; top:150;left:100; width:300;}
#q2 { position:absolute; top:150;left:100; width:300; visibility:hidden;}
#q3 { position:absolute; top:150;left:100; width:300; visibility:hidden;}
#q4 { position:absolute; top:150;left:100; width:300; visibility:hidden;}
#q5 { position:absolute; top:150;left:100; width:300; visibility:hidden;}
#q6 { position:absolute; top:150;left:100; width:300; visibility:hidden;}
#q7 { position:absolute; top:150;left:100; width:300; visibility:hidden;}
#q8 { position:absolute; top:150;left:100; width:300; visibility:hidden;}
#q9 { position:absolute; top:150;left:100; width:300; visibility:hidden;}
#thanks { position:absolute; top:150;left:100; width:300; visibility:hidden;}
#qTracker {position:absolute; top:150;left:450;}
#right {position:relative;color:green;visibility:hidden;}
#wrong {position:relative;color:red;visibility:hidden;}
.header {font-family:verdana,sans-serif;font-size:12px;font-weight:bold;color:#999999}
.questionHd {font-family:verdana,sans-serif;font-size:14px;font-weight:bold;}
.trackerHd {font-family:verdana,sans-serif;font-size:14px;font-weight:bold;font-style:italic;}
.qText {font-family:verdana,sans-serif;font-size:11px;}
.bold {font-weight:bold;}
</style>
<body bgcolor="#FFFFFF">
<div id="header">
<img src="images/shelley.gif" alt="Shelley Biotechnologies" width="395" height="49">
</div>
<div id="mainnav">
<img src="images/main_nav.gif" width="564" height="32" border=0><br>
<span class="header">Thanks for taking our Quantum-Chaos rDNA Compiler Quiz!</span>
</div>
<div id="q1">
<span class="questionHd">Question 1</span>
<p>
<span class="qText">What percentage of the rDNA strands harvested by the Quantum-Chaos rDNA Compiler is unbroken?
<form name="q1form">
<span class="bold">
<input type="radio" name="q1answer" value="a">100%<br>
<input type="radio" name="q1answer" value="b">50%<br>
<input type="radio" name="q1answer" value="c">99%
</span>
</span>
<p>
<input type="button" onClick="checkAnswer(1)" value="Submit Answer">
</form>
</div>
<div id="q2">
<span class="questionHd">Question 2</span>
<p>
<span class="qText">When will the International Space Station be complete?
<form name="q2form">
<span class="bold">
<input type="radio" name="q2answer" value="c">2005<br>
<input type="radio" name="q2answer" value="d">2006<br>
<input type="radio" name="q2answer" value="e">2010<br>
<input type="radio" name="q2answer" value="f">2015
</span>
</span>
<p>
<input type="button" onClick="checkAnswer(2)" value="Submit Answer">
</form>
</div>
<div id="q3">
<span class="questionHd">Question 3</span>
<p>
<span class="qText">What is the fastest land animal?
<form name="q3form">
<span class="bold">
<input type="radio" name="q3answer" value="a">Swift<br>
<input type="radio" name="q3answer" value="b">Cheetah<br>
<input type="radio" name="q3answer" value="c">Speed Racer
</span>
</span>
<p>
<input type="button" onClick="checkAnswer(3)" value="Submit Answer">
</form>
</div>
<div id="q4">
<span class="questionHd">Question 4</span>
<p>
<span class="qText">What was the largest animal that ever lived?
<form name="q4form">
<span class="bold">
<input type="radio" name="q4answer" value="c">Apatosaurus<br>
<input type="radio" name="q4answer" value="d">Blue Whale
</span>
</span>
<p>
<input type="button" onClick="checkAnswer(4)" value="Submit Answer">
</form>
</div>
<div id="q5">
<span class="questionHd">Question 5</span>
<p>
<span class="qText">What do praying mantises have only one of?
<form name="q5form">
<span class="bold">
<input type="radio" name="q5answer" value="e">claws<br>
<input type="radio" name="q5answer" value="f">ears<br>
<input type="radio" name="q5answer" value="g">month to live
</span>
</span>
<p>
<input type="button" onClick="checkAnswer(5)" value="Submit Answer">
</form>
</div>
<div id="q6">
<span class="questionHd">Question 6</span>
<p>
<span class="qText">Sharks lose a tooth almost every time they bite something.
<form name="q6form">
<span class="bold">
<input type="radio" name="q6answer" value="h">True<br>
<input type="radio" name="q6answer" value="g">False
</span>
</span>
<p>
<input type="button" onClick="checkAnswer(6)" value="Submit Answer">
</form>
</div>
<div id="q7">
<span class="questionHd">Question 7</span>
<p>
<span class="qText">Which brand is widely recognized as the most trusted in the world?
<form name="q7form">
<span class="bold">
<input type="radio" name="q7answer" value="a">GE<br>
<input type="radio" name="q7answer" value="b">National Geographic<br>
<input type="radio" name="q7answer" value="c">Coca-Cola
</span>
</span>
<p>
<input type="button" onClick="checkAnswer(7)" value="Submit Answer">
</form>
</div>
<div id="q8">
<span class="questionHd">Question 8</span>
<p>
<span class="qText">According to string theory, how many dimensions does our universe have?
<form name="q8form">
<span class="bold">
<input type="radio" name="q8answer" value="c">3<br>
<input type="radio" name="q8answer" value="e">4<br>
<input type="radio" name="q8answer" value="d">11
</span>
</span>
<p>
<input type="button" onClick="checkAnswer(8)" value="Submit Answer">
</form>
</div>
<div id="q9">
<span class="questionHd">Question 9</span>
<p>
<span class="qText">Does Robert Downey, Jr. have fall or winter coloring?
<form name="q9form">
<span class="bold">
<input type="radio" name="q9answer" value="y">fall<br>
<input type="radio" name="q9answer" value="x">winter
</span>
</span>
<p>
<input type="button" onClick="checkAnswer(9)" value="Submit Answer">
</form>
</div>
<div id="thanks">
<span class="questionHd">Thanks for taking our quiz!</span>
<p>
<span class="qText">We hope you enjoyed it.</span>
<br><br>
<form name="thanksForm">
<span class="qText">You received a score of <input type="text" name="endScore" size=2></span>
</form>
</div>
<div id="qTracker">
<span class="trackerHd">Question tracker</span>
<p>
<table>
<tr>
<td><img src="images/current1.gif" alt="1" name="t1" width="31" height="31"></td>
<td><img src="images/unanswered2.gif" alt="2" name="t2" width="31" height="31"></td>
<td><img src="images/unanswered3.gif" alt="3" name="t3" width="31" height="31"></td>
</tr>
<tr>
<td><img src="images/unanswered4.gif" alt="4" name="t4" width="31" height="31"></td>
<td><img src="images/unanswered5.gif" alt="5" name="t5" width="31" height="31"></td>
<td><img src="images/unanswered6.gif" alt="6" name="t6" width="31" height="31"></td>
</tr>
<tr>
<td><img src="images/unanswered7.gif" alt="7" name="t7" width="31" height="31"></td>
<td><img src="images/unanswered8.gif" alt="8" name="t8" width="31" height="31"></td>
<td><img src="images/unanswered9.gif" alt="9" name="t9" width="31" height="31"></td>
</tr>
</table>
<div id="right">That's correct!</div>
<div id="wrong">WRONG!</div>
</div>
</body>
</html>
Example 6-2
<html>
<head>
<title>js test</title>
<style type="text/css">
#header { position: absolute; left: 32; top: 20; }
#mainnav { position: absolute; left: 32; top: 82; }
#q1 { position:absolute; top:150;left:100; width:300;}
#q2 { position:absolute; top:150;left:100; width:300; visibility:hidden;}
#q3 { position:absolute; top:150;left:100; width:300; visibility:hidden;}
#q4 { position:absolute; top:150;left:100; width:300; visibility:hidden;}
#q5 { position:absolute; top:150;left:100; width:300; visibility:hidden;}
#q6 { position:absolute; top:150;left:100; width:300; visibility:hidden;}
#q7 { position:absolute; top:150;left:100; width:300; visibility:hidden;}
#q8 { position:absolute; top:150;left:100; width:300; visibility:hidden;}
#q9 { position:absolute; top:150;left:100; width:300; visibility:hidden;}
#thanks { position:absolute; top:150;left:100; width:300; visibility:hidden;}
#qTracker {position:absolute; top:150;left:450;}
#right {position:relative;color:green;visibility:hidden;}
#wrong {position:relative;color:red;visibility:hidden;}
.header {font-family:verdana,sans-serif;font-size:12px;font-weight:bold;color:#999999}
.questionHd {font-family:verdana,sans-serif;font-size:14px;font-weight:bold;}
.trackerHd {font-family:verdana,sans-serif;font-size:14px;font-weight:bold;font-style:italic;}
.qText {font-family:verdana,sans-serif;font-size:11px;}
.bold {font-weight:bold;}
</style>
<script language="JavaScript">
// preload images
for (i=1; i<10;i++)
{
current = new Image()
eval("current.src= 'images/current" + i + ".gif'")
unanswered = new Image()
eval("unanswered.src= 'images/unanswered" + i + ".gif'")
right = new Image()
eval("right.src= 'images/right" + i + ".gif'")
wrong = new Image()
eval("wrong.src= 'images/wrong" + i + ".gif'")
}
// set some global variables
rightAnswers = new Array("a","d","b","d","f","h","b","d","y")
numQuestions = rightAnswers.length
currentQuestion = 1
score = 0
answeredElement = null
formRef = ""
qTrackerRef = ""
// set global browser identification variables
browser = navigator.appName;
browserNum = parseInt(navigator.appVersion);
N4 = false;
N6 = false;
IE = false;
if ((browser == "Netscape") && (browserNum < 5))
{
// Netscape 4.x
layerRef = "document.layers['";
endLayerRef = "']";
styleRef = "";
endFormRef = "";
qTrackerRef = "document.layers['qTracker']."
N4 = true;
}
else if ((browser == "Netscape") && (browserNum >= 5))
{
// Netscape 6
layerRef = "document.getElementById('";
styleRef = ".style";
endLayerRef = "')";
formRef = "document.forms['"
endFormRef = "']"
N6 = true;
}
else
{
// Internet Explorer
layerRef = "document.all.";
endLayerRef = "";
styleRef = ".style";
formRef = "document.forms['"
endFormRef = "']"
IE = true;
}
function checkAnswer(q)
{
if(checkForAnswer(q))
{
// determine actual answer
if(N4) formRef = "document.layers['q" + q + "'].document."
eval("questionObj = " + formRef + "q" + q + "form" + endFormRef)
answer = questionObj.elements[answeredElement].value
// see if answer was right
if(answer == rightAnswers[currentQuestion-1])
{
score = score + 10
eval(qTrackerRef + layerRef + "wrong" + endLayerRef + styleRef + ".visibility = 'hidden'")
eval(qTrackerRef + layerRef + "right" + endLayerRef + styleRef + ".visibility = 'visible'")
updateQTracker('right',currentQuestion)
}
else
{
eval(qTrackerRef + layerRef + "right" + endLayerRef + styleRef + ".visibility = 'hidden'")
eval(qTrackerRef + layerRef + "wrong" + endLayerRef + styleRef + ".visibility = 'visible'")
updateQTracker('wrong',currentQuestion)
}
// move on to next question
if (currentQuestion < numQuestions)
{
oldQuestion = currentQuestion
currentQuestion = currentQuestion + 1
nextQuestion(oldQuestion,currentQuestion)
}
else
{
quizFinished()
}
}
else
{
// an answer wasn't chosen
alert("Please choose one ofthe options.")
}
}
function checkForAnswer(q)
{
// Determine which radio button is selected
// Buttons are elements, so we don't want to
// count the answer button as a radio element
if(N4) formRef = "document.layers['q" + q + "'].document."
eval("questionObj = " + formRef + "q" + q + "form" + endFormRef)
numRadioOptions = questionObj.elements.length - 1
// loop through all radio buttons for this question and
// see if any of them are checked
for(i=0; i<numRadioOptions;i++)
{
if(questionObj.elements[i].checked)
{
answeredElement = i
return true
}
}
return false
}
function nextQuestion(oldQ,newQ)
{
// hide old question
eval(layerRef + "q" + oldQ + endLayerRef + styleRef + ".visibility = 'hidden'")
// show new question
eval(layerRef + "q" + newQ + endLayerRef + styleRef + ".visibility = 'visible'")
// update question tracker
updateQTracker('current',newQ)
}
function updateQTracker(state,q)
{
eval(qTrackerRef + "document.images['t" + q + "'].src = 'images/" + state + q + ".gif'")
}
function quizFinished()
{
// hide old question & show "thank you" layer
eval(layerRef + "q" + currentQuestion + endLayerRef + styleRef + ".visibility = 'hidden'")
eval(layerRef + "thanks" + endLayerRef + styleRef + ".visibility = 'visible'")
// display score
if (N4) formObj = document.layers['thanks'].document.forms['thanksForm']
else formObj = document.forms['thanksForm']
formObj.endScore.value = score
}
</script>
<body bgcolor="#FFFFFF">
<div id="header">
<img src="images/shelley.gif" alt="Shelley Biotechnologies" width="395" height="49">
</div>
<div id="mainnav">
<img src="images/main_nav.gif" width="564" height="32" border=0><br>
<span class="header">Thanks for taking our Quantum-Chaos rDNA Compiler Quiz!</span>
</div>
<div id="q1">
<span class="questionHd">Question 1</span>
<p>
<span class="qText">What percentage of the rDNA strands harvested by the Quantum-Chaos rDNA Compiler is unbroken?
<form name="q1form">
<span class="bold">
<input type="radio" name="q1answer" value="a">100%<br>
<input type="radio" name="q1answer" value="b">50%<br>
<input type="radio" name="q1answer" value="c">99%
</span>
</span>
<p>
<input type="button" onClick="checkAnswer(1)" value="Submit Answer">
</form>
</div>
<div id="q2">
<span class="questionHd">Question 2</span>
<p>
<span class="qText">When will the International Space Station be complete?
<form name="q2form">
<span class="bold">
<input type="radio" name="q2answer" value="c">2005<br>
<input type="radio" name="q2answer" value="d">2006<br>
<input type="radio" name="q2answer" value="e">2010<br>
<input type="radio" name="q2answer" value="f">2015
</span>
</span>
<p>
<input type="button" onClick="checkAnswer(2)" value="Submit Answer">
</form>
</div>
<div id="q3">
<span class="questionHd">Question 3</span>
<p>
<span class="qText">What is the fastest land animal?
<form name="q3form">
<span class="bold">
<input type="radio" name="q3answer" value="a">Swift<br>
<input type="radio" name="q3answer" value="b">Cheetah<br>
<input type="radio" name="q3answer" value="c">Speed Racer
</span>
</span>
<p>
<input type="button" onClick="checkAnswer(3)" value="Submit Answer">
</form>
</div>
<div id="q4">
<span class="questionHd">Question 4</span>
<p>
<span class="qText">What was the largest animal that ever lived?
<form name="q4form">
<span class="bold">
<input type="radio" name="q4answer" value="c">Apatosaurus<br>
<input type="radio" name="q4answer" value="d">Blue Whale
</span>
</span>
<p>
<input type="button" onClick="checkAnswer(4)" value="Submit Answer">
</form>
</div>
<div id="q5">
<span class="questionHd">Question 5</span>
<p>
<span class="qText">What do praying mantises have only one of?
<form name="q5form">
<span class="bold">
<input type="radio" name="q5answer" value="e">claws<br>
<input type="radio" name="q5answer" value="f">ears<br>
<input type="radio" name="q5answer" value="g">month to live
</span>
</span>
<p>
<input type="button" onClick="checkAnswer(5)" value="Submit Answer">
</form>
</div>
<div id="q6">
<span class="questionHd">Question 6</span>
<p>
<span class="qText">Sharks lose a tooth almost every time they bite something.
<form name="q6form">
<span class="bold">
<input type="radio" name="q6answer" value="h">True<br>
<input type="radio" name="q6answer" value="g">False
</span>
</span>
<p>
<input type="button" onClick="checkAnswer(6)" value="Submit Answer">
</form>
</div>
<div id="q7">
<span class="questionHd">Question 7</span>
<p>
<span class="qText">Which brand is widely recognized as the most trusted in the world?
<form name="q7form">
<span class="bold">
<input type="radio" name="q7answer" value="a">GE<br>
<input type="radio" name="q7answer" value="b">National Geographic<br>
<input type="radio" name="q7answer" value="c">Coca-Cola
</span>
</span>
<p>
<input type="button" onClick="checkAnswer(7)" value="Submit Answer">
</form>
</div>
<div id="q8">
<span class="questionHd">Question 8</span>
<p>
<span class="qText">According to string theory, how many dimensions does our universe have?
<form name="q8form">
<span class="bold">
<input type="radio" name="q8answer" value="c">3<br>
<input type="radio" name="q8answer" value="e">4<br>
<input type="radio" name="q8answer" value="d">11
</span>
</span>
<p>
<input type="button" onClick="checkAnswer(8)" value="Submit Answer">
</form>
</div>
<div id="q9">
<span class="questionHd">Question 9</span>
<p>
<span class="qText">Does Robert Downey, Jr. have fall or winter coloring?
<form name="q9form">
<span class="bold">
<input type="radio" name="q9answer" value="y">fall<br>
<input type="radio" name="q9answer" value="x">winter
</span>
</span>
<p>
<input type="button" onClick="checkAnswer(9)" value="Submit Answer">
</form>
</div>
<div id="thanks">
<span class="questionHd">Thanks for taking our quiz!</span>
<p>
<span class="qText">We hope you enjoyed it.</span>
<br><br>
<form name="thanksForm">
<span class="qText">You received a score of <input type="text" name="endScore" size=2></span>
</form>
</div>
<div id="qTracker">
<span class="trackerHd">Question tracker</span>
<p>
<table>
<tr>
<td><img src="images/current1.gif" alt="Question 1" name="t1" width="31" height="31"></td>
<td><img src="images/unanswered2.gif" alt="Question 2" name="t2" width="31" height="31"></td>
<td><img src="images/unanswered3.gif" alt="Question 3" name="t3" width="31" height="31"></td>
</tr>
<tr>
<td><img src="images/unanswered4.gif" alt="Question 4" name="t4" width="31" height="31"></td>
<td><img src="images/unanswered5.gif" alt="Question 5" name="t5" width="31" height="31"></td>
<td><img src="images/unanswered6.gif" alt="Question 6" name="t6" width="31" height="31"></td>
</tr>
<tr>
<td><img src="images/unanswered7.gif" alt="Question 7" name="t7" width="31" height="31"></td>
<td><img src="images/unanswered8.gif" alt="Question 8" name="t8" width="31" height="31"></td>
<td><img src="images/unanswered9.gif" alt="Question 9" name="t9" width="31" height="31"></td>
</tr>
</table>
<div id="right">That's correct!</div>
<div id="wrong">WRONG!</div>
</div>
</body>
</html>
Based on reader feedback from the first edition of this book, it has become clear that a few things mentioned in the book need to be brought clearly to light.
|
