07 A Really Interactive Quiz: Part One

#question2

{

position: absolute;

top: 100px;

left: 100px;

visibility: hidden;

color: darkred;

}

.questionHeader

{

font-size: 16pt;

font-family: verdana, sans-serif;

font-weight: bold;

}

.questionChoices { font-weight: bold; font-size: 12pt }

.questionText { font-size: 12pt }

Here's a typical question (colors *almost* working).

<SPAN CLASS="questionHeader">Question #1</SPAN>

<P>

Will the Quantum-Chaos rDNA Compiler also create the actual proteins that would be encoded from the rDNA

strands?

<TABLE>

<TR>

<TD>

</TD>

<TD>

</TD>

</TR>

<TR>

<TD>

</TD>

<TD>

</TD>

</TR>

</TABLE>

<P>

<INPUT TYPE="button" VALUE="Skip" NAME="skip"

onClick="skipQuestion(1)">

<INPUT TYPE="button" VALUE="Answer" NAME="answer"

onClick="checkAnswer(1)">

</FORM>

</SPAN>

</DIV>

Here's the same question with the colors in place.

<TABLE>

<TR>

<TD>

</TD>

<TD>

Yes

</SPAN>

</TD>

</TR>

<TR>

<TD>

</TD>

<TD>

</SPAN>

</TD>

</TR>

</TABLE>

Cycling through the questions javascript

Cycling through the Questions: JavaScript

Cycling through the Questions:HTML

Here's a bunch of the CSS and JavaScript. Remember, we've only given you the most important pieces. You'll have to take care of some of the syntax of this code on your own. It's good for you.

#question1

{

position: absolute;

top:100px;

left: 50px;

visibility: visible;

width: 300px;

color: purple;

}

#question2

{

position: absolute;

top: 100px;

left: 50px;

visibility: hidden;

width: 300px;

color: darkred;

}

#question3

{

position: absolute;

top: 100px;

left: 50px;

visibility: hidden;

width: 300px;

color: darkblue;

}

#question4

{

position: absolute;

top: 100px;

left: 50px;

visibility: hidden;

width: 300px;

color: #333333;

}

// This layer is what appears when the user is

// given a second chance.

#tryAgain

{

position: absolute;

top: 20px;

left: 100px;

background-color: #CCCCCC;

width: 200px;

z-index: 10;

visibility: hidden;

}

#score

{

position: absolute;

top: 50px;

left: 400px;

border: solid gray 1px;

padding: 10px;

}

#right

{

position: relative;

font-size: 20pt;

visibility: hidden;

}

#nope

{

position: relative;

font-size: 20pt;

visibility: hidden;

}

.questionHeader

{

font-size: 16pt;

font-family: verdana, sans-serif;

font-weight: bold;

}

.questionText { font-size: 12pt; font-family: verdana, sans-serif; }

.questionChoices { font-weight: bold; font-size: 10pt; font-family: verdana, sans-serif; }

.tryAgain {font-family: verdana, sans-serif; font-weight: bold; font-size: 10pt; }

.score {font-size: 16pt; font-family: verdana, sans-serif; font-weight: bold;}

// These classes are to control the color of the quiz

// choices, which is necessary when using tables

// in Netscape

.purple {color: purple}

.darkred {color: darkred}

.darkblue {color: darkblue}

.darkgray {color: #333333}

</STYLE>

//Global variables

// browser determination

// (you've seen this before)

var isNav, isIE

if (parseInt(navigator.appVersion) >= 4)

{

if (navigator.appName == "Netscape")

{

isNav = true

layerRef = "document.layers"

styleRef = ""

}

else

{

isIE = true

layerRef = "document.all"

styleRef = ".style"

}

// keep track of which question is currently

// being answered

currentQuestion = 1

// keep track of score

score = 0

// keep track of whether the user is in the

// middle of trying to guess the same question

// again

tryAgain = "nope"

// record of correct answers

correctAnswer = new Array(9)

// the correct answers

correctAnswer[0] = "no"

correctAnswer[1] = "99%"

correctAnswer[2] = "40 million"

correctAnswer[3] = "3 stains"

correctAnswer[4] = "without"

correctAnswer[5] = "yes"

correctAnswer[6] = "above"

correctAnswer[7] = "separate"

correctAnswer[8] = "1987"

correctAnswer[9] = "you"

// keep track of which questions have been answered

answeredQuestions = new Array(10)

function nextQuestion ()

{

// hide current question

currentQuestionLayer = eval("'question' +

currentQuestion")

eval(layerRef + "['" + currentQuestionLayer + "']"

+ styleRef + ".visibility = 'hidden'")

// increment which question is

// the current question

currentQuestion++

// display the new question

nextQuestionLayer = eval("'question' +

currentQuestion")

eval(layerRef + "['" + nextQuestionLayer + "']" +

styleRef + ".visibility = 'visible'")

}

function checkAnswer()

{

// The Overall Plan of this Function:

// 1. determine user's answer

// 2. check for another try

// 3. assign points

// 1. determine user's answer

currentObj = eval(layerRef + "['question" +

currentQuestion + "'].document.question" +

currentQuestion + "Form")

if (currentQuestion == 1)

{

if ( currentObj.elements[1].checked == true)

{

userAnswer = "no"

}

else { userAnswer = "wrong answer" }

}

else if (currentQuestion == 2)

{

if ( currentObj.elements[2].checked == true)

{

userAnswer = "99%"

}

else { userAnswer = "wrong answer" }

}

else if (currentQuestion == 3)

{

if ( currentObj.elements[1].checked == true)

{

userAnswer = "40 million"

// see if they got it right on the second try

if (tryAgain == "yes")

{

tryAgain = "succeed"

}

else if (currentObj.elements[3].checked == true)

// give them another try

{

userAnswer = "400 million"

// make sure this isn't their

// second guess already

if (tryAgain != "yes")

{

tryAgain = "yes"

}

else // see if they guessed this one wrong

// again (duh)

{

tryAgain = "fail"

}

else

{

userAnswer = "wrong answer"

// see if they got it wrong on the second try

if (tryAgain == "yes")

{

tryAgain = "fail"

}

else if (currentQuestion == 4)

{

if ( currentObj.elements[3].checked == true)

{

userAnswer = "3 stains"

}

else { userAnswer = "wrong answer" }

}

// 2. check for another try

if (tryAgain == "yes")

{

eval( layerRef + "['tryAgain']" + styleRef +

".visibility = 'visible'")

return

}

// 3. assign points

// The array counts from 0-9, while the

// questions go from 1-10. Thus, we have

// to take one from currentQuestion to

// call the right record in the array.

currentQuestionForArray = currentQuestion - 1

if ( userAnswer == correctAnswer[currentQuestionForArray] )

{

// let the user know they

//got that one right

eval( layerRef + "['score']." + layerRef +

"['right']" + styleRef + ".visibility =

'visible'")

eval( layerRef + "['score']." + layerRef +

"['nope']" + styleRef + ".visibility =

'hidden'")

// check if they got the question

// right after a second try

if (tryAgain == "succeed")

{

score += 5

tryAgain = ""

}

else

{

score += 10

}

displayScore()

answeredQuestions[currentQuestion] = "yes"

nextQuestion()

}

else // they got it wrong

{

// let the user know they got that one wrong

eval( layerRef + "['score']." + layerRef +

"['right']" + styleRef + ".visibility =

'hidden'")

eval( layerRef + "['score']." + layerRef +

"['nope']" + styleRef + ".visibility =

'visible'")

if (tryAgain == "fail")

{

score -= 5

tryAgain = ""

}

displayScore()

answeredQuestions[currentQuestion] = "yes"

nextQuestion()

}

function displayScore()

{

document.layers['score'].document.score-

Form.scoreBox.value = score

return

}

// this function deals with the user clicking on one

// of the buttons on the tryAgain layer.

function backToQuestion(direction)

{

// first, we hide the tryAgain layer

eval( layerRef + "['tryAgain']" + styleRef +

".visibility = 'hidden'")

// if the user decides to get the

// question wrong and not take the gamble

if (direction == "forward")

{

tryAgain = ""

answeredQuestions[currentQuestion] = "yes"

eval ( layerRef +

"['progress'].document.progress" +

currentQuestion + ".src = 'images/quiz/after_"

+ currentQuestion + ".gif'")

nextQuestion ()

}

// If the user decides to give the question

// another shot, we don't need to code anything

// special. The "tryAgain" variable takes

// care of that for us.

}

</SCRIPT>

</HEAD>

Cycling through the questions HTML

Here's a bunch of the HTML for the quiz. Remember, we've only given you the most important pieces. You'll have to take care of some of the syntax of this code on your own. It's good for you.

<SPAN CLASS="score">SCORE:</SPAN>

</FORM>

<DIV ID="right">RIGHT!!</DIV>

<DIV ID="nope">wrong-o</DIV>

</DIV>

<SPAN CLASS="questionHeader">Question #1</SPAN>

<P>

Will the Quantum-Chaos rDNA Compiler also create the actual

proteins that would be encoded from the rDNA strands?

</SPAN>

</P>

<TABLE>

<TR>

<TD>

</TD>

<TD>

</TD>

</TR>

<TR>

<TD>

</TD>

<TD>

</TD>

</TR>

</TABLE>

<P>

<INPUT TYPE="button" VALUE="Skip" NAME="skip"

onClick="nextQuestion()">

<INPUT TYPE="button" VALUE="Answer"

onClick="checkAnswer()">

</FORM>

</SPAN>

</DIV>

<SPAN CLASS="questionHeader">Question #2</SPAN>

<P>

What percentage of the rDNA strands harvested by the

Quantum-Chaos rDNA Compiler are unbroken?

</SPAN>

<TABLE>

<TR>

<TD>

</TD>

<TD>

</TD>

</TR>

<TR>

<TD>

</TD>

<TD>

</TD>

</TR>

<TR>

<TD>

</TD>

<TD>

</TD>

</TR>

</TABLE>

<P>

<INPUT TYPE="button" VALUE="Skip" NAME="skip"

onClick="nextQuestion()">

<INPUT TYPE="button" VALUE="Answer"

onClick="checkAnswer()">

</FORM>

</DIV>

<SPAN CLASS="questionHeader">Question #3</SPAN>

<P>

How many actual complete strands of rDNA are typically

harvested by each run of the Q-C rDNA Compiler?

</SPAN>

<TABLE>

<TR>

<TD>

</TD>

<TD>

<SPAN CLASS="darkblue">1 million</SPAN>

</SPAN>

</TD>

</TR>

<TR>

<TD>

</TD>

<TD>

<SPAN CLASS="darkblue">40 million</SPAN>

</SPAN>

</TD>

</TR>

<TR>

<TD>

</TD>

<TD>

<SPAN CLASS="darkblue">400 million</SPAN>

</SPAN>

</TD>

</TR>

<TR>

<TD>

</TD>

<TD>

<SPAN CLASS="darkblue">2 billion</SPAN>

</SPAN>

</TD>

</TR>

</TABLE>

<P>

<INPUT TYPE="button" VALUE="Skip" NAME="skip"

onClick="nextQuestion()">

<INPUT TYPE="button" VALUE="Answer"

onClick="checkAnswer()">

</FORM>

</DIV>

<SPAN CLASS="questionHeader">Question #4</SPAN>

<P>

How many stains should you perform to confirm

that you have the proper rDNA configuration?

</SPAN>

<TABLE>

<TR>

<TD>

</TD>

<TD>

</SPAN>

</TD>

</TR>

<TR>

<TD>

</TD>

<TD>

<SPAN CLASS="darkgray">1 stain</SPAN>

</SPAN>

</TD>

</TR>

<TR>

<TD>

</TD>

<TD>

<SPAN CLASS="darkgray">2 stains</SPAN>

</SPAN>

</TD>

</TR>

<TR>

<TD>

</TD>

<TD>

<SPAN CLASS="darkgray">3 stains</SPAN>

</SPAN>

</TD>

</TR>

</TABLE>

<P>

<INPUT TYPE="button" VALUE="Skip" NAME="skip"

onClick="nextQuestion()">

<INPUT TYPE="button" VALUE="Answer"

onClick="checkAnswer()">

</FORM>

</DIV>

<!--

The layer that lets the user decide whether they

want another chance or not.

-->

Good grief and sorry. You're not even close.

<P>

We'll let you guess again. If you guess right, you'll

get five points. But if you guess wrong, we'll take five points off your score.

<P>

Are you ready for it?

</SPAN>

<INPUT TYPE="button" VALUE="No way. Next question,

please" onClick="backToQuestion('forward')">

<INPUT TYPE="button" VALUE="Yeah! I'll go for it!"

onClick="backToQuestion('stay')">

</FORM>

</TD></TR></TABLE>

</DIV>

</BODY>

</HTML>

#question1

{

position: absolute;

top: 100px;

left: 100px;

visibility: visible;

color: purple;

}

Here's the first four question layer declarations.

Building the Questions

Page updated

Report abuse