Essential Series - CSS & DHTML 2nd Edition

The Examples
Example 7-1: view see code
Download code and images for Chapter 7 (22K)

Example 7-1
<html>
<head>
<title>Advanced 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>

<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
userAnswered = new Array(9)
for (i=0;i<userAnswered.length;i++)
{
	userAnswered[i] = false
}

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))
	{	
		// update userAnswered, since this question was answered
		userAnswered[currentQuestion-1] = true
		
		// 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)
		}
		
		// see if test is finished
		numAnswered=0
		for (i=0;i<userAnswered.length;i++)
		{
			if (userAnswered[i]) numAnswered = numAnswered + 1
		}
		
		if (numAnswered == rightAnswers.length)
		{
			quizFinished()
		}
		else
		{
			// move on to next question
			findNextUnansweredQuestion(currentQuestion)
			oldQuestion = currentQuestion
			currentQuestion = nextUnansweredQ
			nextQuestion(oldQuestion,currentQuestion)
		}
	}
	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 or skip buttons 
	// as a radio elements
	if(N4) formRef = "document.layers['q" + q + "'].document."
	eval("questionObj = " + formRef + "q" + q + "form" + endFormRef)
	numRadioOptions = questionObj.elements.length - 2
	
	// 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 findNextUnansweredQuestion(q)
{
	nextUnansweredQ = q
	
	// start looking forward
	for(i=q+1;i<=rightAnswers.length;i++)
	{
		if (!userAnswered[i-1])
		{
			nextUnansweredQ = i
			break
		}
	}
	
	// if necessary, start at beginning
	if (nextUnansweredQ == q)
	{
		for (i=1;i<=q;i++)
		{
			if (!userAnswered[i-1])
			{
				nextUnansweredQ = i
				break
			}
		}
	}
	return nextUnansweredQ
}


function skipQuestion()
{
	findNextUnansweredQuestion(currentQuestion)
	
	oldQuestion = currentQuestion
	currentQuestion = nextUnansweredQ
		
	if (oldQuestion != nextUnansweredQ)
	{
		nextQuestion(oldQuestion,currentQuestion)
		updateQTracker('unanswered',oldQuestion)
	}
	else
	{
		// this is their last question
		ms = "There's no other question to skip to.\n"
		ms = ms + "You've answered all the others.\n"
		ms = ms + "You'll have to answer this one."
		alert(ms)
	}	
}


function qTrackNav(q)
{
	// find out if this question has already been answered
	if(!userAnswered[q-1])
	{
		updateQTracker('unanswered',currentQuestion)
		nextQuestion(currentQuestion,q)
		currentQuestion = q
	}
}


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">
<input type="button" onClick="skipQuestion(1)" value="Skip">
	
</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">
<input type="button" onClick="skipQuestion(2)" value="Skip">
</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">
<input type="button" onClick="skipQuestion(3)" value="Skip">
</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">
<input type="button" onClick="skipQuestion(4)" value="Skip">
</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">
<input type="button" onClick="skipQuestion(5)" value="Skip">
</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">
<input type="button" onClick="skipQuestion(6)" value="Skip">
</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">
<input type="button" onClick="skipQuestion(7)" value="Skip">
</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">
<input type="button" onClick="skipQuestion(8)" value="Skip">
</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">
<input type="button" onClick="skipQuestion(9)" value="Skip">
</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><a href="javascript:qTrackNav(1)">
				<img src="images/current1.gif" alt="1" name="t1" width="31" height="31" border="0"></a>
			</td>
			<td><a href="javascript:qTrackNav(2)"><img src="images/unanswered2.gif" alt="2" name="t2" width="31" height="31" border="0"></a></td>
			<td><a href="javascript:qTrackNav(3)"><img src="images/unanswered3.gif" alt="3" name="t3" width="31" height="31" border="0"></a></td>
		</tr>
		<tr>
			<td><a href="javascript:qTrackNav(4)"><img src="images/unanswered4.gif" alt="4" name="t4" width="31" height="31" border="0"></a></td>
			<td><a href="javascript:qTrackNav(5)"><img src="images/unanswered5.gif" alt="5" name="t5" width="31" height="31" border="0"></a></td>
			<td><a href="javascript:qTrackNav(6)"><img src="images/unanswered6.gif" alt="6" name="t6" width="31" height="31" border="0"></a></td>
		</tr>
		<tr>
			<td><a href="javascript:qTrackNav(7)"><img src="images/unanswered7.gif" alt="7" name="t7" width="31" height="31" border="0"></a></td>
			<td><a href="javascript:qTrackNav(8)"><img src="images/unanswered8.gif" alt="8" name="t8" width="31" height="31" border="0"></a></td>
			<td><a href="javascript:qTrackNav(9)"><img src="images/unanswered9.gif" alt="9" name="t9" width="31" height="31" border="0"></a></td>
		</tr>
	</table>
	<div id="right">That's correct!</div>
	<div id="wrong">WRONG!</div>
	
</div>


</body>
</html>
Based on First Edition Feedback
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.
Resizing the browser window in Netscape 4.x messes up layers. It rearranges them or make them disappear. The only way around this is to reload the page. Try:
```
		<BODY onResize="location.reload()">
```
In Netscape 4.x, form elements are always on top of any layer. That means text fields, checkboxes, radio buttons, etc. will be on top of any layer in the browser, no matter what.