Dynamic Content in Internet Explorer 4: The Quiz Code | WebReference

Dynamic Content in Internet Explorer 4: The Quiz Code

Logo

Dynamic Content in IE4:
The DHTML Unleashed Author Quiz - The Code


The Quiz Page

This page is available for download

<HTML>
<HEAD><TITLE>DHTML Unleashed Author Quiz</TITLE>
<STYLE TYPE="text/css">
<!--
    #quiz {
        position: absolute;
        visibility: hidden;
        text-align: center;
        width: 400;
        background-color: lightgrey; 
        border: thick gray ridge;
        margin: 10px;
    }
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
    arQuestions = new Array();
    arrayCounter = questCounter = reviewCounter = 1;
    wrongAns = rightAns = lateAns = 0;
    function newQA(question,fName,lName) {
        arQuestions[arrayCounter] = new Array();
        arQuestions[arrayCounter][0] = question;
        arQuestions[arrayCounter][1] = fName; 	
        arQuestions[arrayCounter][2] = lName;
        arrayCounter++;
    }
    newQA("Who wrote the book we've been quoting from?","Charles ","Dickens");
    newQA("Which author began a book \"Call me Ishmael.\"","Herman ","Melville");
    newQA("Who coined the term 'Catch-22'?","Joseph ","Heller");
    newQA("Who wrote over 1000 pages about an Idiot?","Fyodor ","Dostoyevsky");
    newQA("Who placed a Catcher in a grain type?","J.D. ","Salinger");
    totQuestions = (arrayCounter - 1);
    function startIt(first) { 
	    if (questCounter > totQuestions) {
            questCounter = 1;
            wrongAns = rightAns = lateAns = 0;
        }
	    quizQuest.innerText = arQuestions[questCounter][0];
        if (first) {
            startLink.outerText=""; 
            quiz.style.left = ((screen.width - quiz.offsetWidth) / 2);
            quiz.style.visibility = "visible";
        }
	    else {
            quizEntry.innerHTML = origEntry
        }
        document.forms.test.elements[0].focus();
        ticker = setTimeout("tooLate()", 10000);
    }
    function answered() {
        clearTimeout(ticker);
        studentAnswer = document.forms.test.elements[0].value.toLowerCase();
        if (studentAnswer.indexOf(arQuestions[questCounter][2].toLowerCase()) != -1) {
            correctAns();
        }
        else {
            dummy();
        }
    }
    function tooLate(){
        lateAns++;
        respTxt = "<BR><B>Sorry, your time is up.</B><BR>"
        response(respTxt);
    }
    function dummy(){
        wrongAns++;
        respTxt = "<BR><B>Sorry, your answer is incorrect.</B><BR>"
        response(respTxt);
    }
    function correctAns() {
        rightAns++;
        respTxt = "<BR><B>You are right!</B><BR>" 
        response(respTxt);
    }
    function response() {
    	quizEntry.innerHTML = respTxt + respDisplay();
	    questCounter++;
    }
    function respDisplay(respTxt){
        respString = "The correct answer is: " 
                  + "<B>" + arQuestions[questCounter][1] 
                  + arQuestions[questCounter][2]+ "</B>";
        if (questCounter == totQuestions) {
            respString += "<BR><BR><B>QUIZ Score:</B><BR>"
                      + " Correct Answers: " + rightAns.toString().bold()
                      + "<BR> Not-so-correct Answers: " + wrongAns.toString().bold()
                      + "<BR> No Response: " + lateAns.toString().bold()
                      + "<BR>You got " + rightAns + " out of " + totQuestions + " correct.<BR><B>"
                      + rightAns + "/" + totQuestions
                      + " = " + ((rightAns/totQuestions)*100) + "%</B>"
                      + "<BR><BR><BUTTON onClick='listThem()'>"
                      + "Review Questions</BUTTON>"
                      + "<BR><BR><BUTTON onClick='startIt()'>"
                      + "Start Over</BUTTON>";
        }
        else {
            respString += "<BR><BR><BUTTON onClick='startIt()'>"
                      + "Go on to Question " + (questCounter+1) + "</BUTTON><BR>"
        }
        return respString;
    }
    function listThem() { 
        quiz.innerHTML = "";
        reviewCounter = 1;
        flipThrough = setInterval("showQuest()",2000);
    }
    function showQuest(){
        if (reviewCounter == arQuestions.length) {
            clearInterval(flipThrough);
            revQuest = "<P><BUTTON onClick='location.reload()'>Next Quiz</BUTTON></P>";
        }
        else {
            revQuest = "<P><I>" + arQuestions[reviewCounter][0] + "</I><BR><B>"
                     + arQuestions[reviewCounter][1] + arQuestions[reviewCounter][2]
                     + "</B></P>";
            reviewCounter++;
        }
        quiz.insertAdjacentHTML("BeforeEnd", revQuest);
    }
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="origEntry = quizEntry.innerHTML">
<DIV ID="startLink" ALIGN=CENTER>
<P><BIG><B>DHTML Unleashed<BR>Author Quiz</B></BIG></P>
<P>For each of the 5 questions, enter the name an author in the field provided
and click the <B>Submit Question</B> button. You have 10 seconds for each question.</P>
<BUTTON onClick="startIt(true)">Start Quiz</BUTTON></DIV>
<DIV
ID="quiz"> 
<I ID="quizQuest"></I><BR>
<SPAN ID="quizEntry">
    <FORM NAME="test" onSubmit="answered()">
        <INPUT TYPE=TEXT SIZE=30><BR>
        <INPUT TYPE=SUBMIT VALUE="Submit Answer">
    </FORM>
</SPAN>
</DIV>
</BODY>
</HTML>

A discussion of the code follows.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: 09/24/97
Revised: 09/28/97

URL: http://www.webreference.com/dhtml/column5/quizCode.html