JS教程:线小测试程序

【 tulaoshi.com - Web开发 】

在本章中，我们将对在线小测试程序作两处修改。一是允许用户首先选择回答完问题所需要的时间，二是允许用户选择要回答多少个问题。

要把在线小测试程序转换为一个基于计时器的程序，只需修改两个页面，即QuizPage.htm页面和GlobalFunctions.htm页面。

首先，需要修改的是QuizPage.htm页面中小测试程序的开始表单，在新的程序中，将允许用户选择要回答多少个问题以及答题的时间限制。接下来，还要修改cmdStartQuiz_onclick()函数，使得当在cmdStartQuiz_onclick()函数中调用resetQuiz()函数时，能够传入两个参数，一个参数表示答题的时间限制，另一个参数表示用户选择回答问题的数量。其中，resetQuiz()函数是定义在GlobalFunctions.htm页面中的。

现在，我们讨论一下GlobalFunctions.htm页面本身，在GlobalFunctions.htm页面中，需要修改resetQuiz()函数，以便根据用户选择的时间限制启动一个计时器。另外，还需要创建两个新的函数，以便对计时进行显示和处理：一个函数将在浏览器窗口的状态栏中显示剩余的时间以便提示用户，另一个函数将处理当计时器到点时的情况。

首先，我们来修改QuizPage.htm页面，将QuizPage.htm页面在文本编辑器中打开。

在QuizPage.htm页面中，frmQuiz表单目前仅包含一个按钮，将该表单修改为如下所示的代码：

form name="frmQuiz"

p

Number of Questions br

select name="cboNoQuestions" size="1"

option value="3"3

option value="5"5

/select

/p

p

Time Limit br

select name="cboTimeLimit" size="1"

option value="-1"No Time Limit

option value="60"1 Minute

option value="180"3 Minutes

option value="300"5 Minutes

/select

/p

input name=cmdStartQuiz type=button value="Start Quiz"

onclick="return cmdStartQuiz_onclick()"

/form

在该表单中，添加了两个新的select标记，以创建两个下拉列表框。第一个下拉列表框允许用户选择愿意回答多少个问题，第二个下拉列表框则允许用户设置回答问题的时限。

接下来，修改页面顶部的cmdStartQuiz_onclick()函数。

script language=JavaScript

function cmdStartQuiz_onclick()

{

var cboNoQuestions = document.frmQuiz.cboNoQuestions;

var noQuestions =

cboNoQuestions.options[cboNoQuestions.selectedIndex].value;

var cboTimeLimit = document.frmQuiz.cboTimeLimit;

var timeLimit = cboTimeLimit.options[cboTimeLimit.selectedIndex].value;

window.top.fraTopFrame.fraGlobalFunctions.resetQuiz(noQuestions,

timeLimit);

window.location.href = "AskQuestion.htm";

}

/script

cmdStartQuiz_onclick()函数被连接到了cmdStartQuiz按钮的onclick事件处理器，以便用户启动在线小测试程序。在上一版本的在线小测试程序中，仅仅调用了位于全局模块中的resetQuiz()函数，并加载AskQuestion.htm页面。现在，我们需要获取用户在下拉列表框中选中的问题数量和时间限制。后面我们还将看到，resetQuiz()函数也做出了相应的修改，以便接收两个参数 用户选择的问题数量和时间限制。

在cmdStartQuiz_onclick()函数中，定义了变量cboNoQuestions以引用表单中的cboNoQuestions下拉列表框，cboNoQuestions控件就是供用户选择回答多少个问题的下拉列表框。使用变量cboNoQuestions可以避免对document对象和表单对象的冗长引用，使得代码保持简洁易读。

在cmdStartQuiz_onclick()函数的第二行代码中，获取了cboNoQuestions下拉列表框中所选中的值，即用户选择要回答多少个问题，并将该值保存在变量noQuestions中。

随后的两行代码完成了类似的功能，用变量cboTimeLimit来引用表单中的cboTimeLimit下拉列表框，然后获取了cboTimeLimit下拉列表框中所选中的值，即用户所选择的回答问题的时间限制，并将该值保存在变量timeLimit中。

在接下来的那行代码中，复位了小测试程序，并将两个参数noQuestions和timeLimit传递给window.top.fraTopFrame.fraGlobalFunctions.resetQuiz()方法。其中，参数noQuestions表示问题数量，参数timeLimit表示时间限制。

这样就完成了对QuizPage.htm页面的修改。将该页面进行保存后，即可关闭文本编辑器。

现在，我们将注意力转移到GlobalFunctions.htm页面，首先来看一下需要修改的resetQuiz()函数，相应代码如下所示：

function resetQuiz(numberOfQuestions, SelectedTimeLimit)

{

timeLeft = SelectedTimeLimit;

totalQuestionsToAsk = numberOfQuestions;

var indexCounter;

currentQNumber = -1;

questionsAsked = new Array();

for (indexCounter = 0; indexCounter questions.length;indexCounter++)

{

questionsAsked[indexCounter] = false;

}

numberOfQuestionsAsked = 0;

numberOfQuestionsCorrect = 0;

if (timeLeft == -1)

{

window.status = "No Time Limit";

}

else

{

quizTimerId = window.setInterval("updateTimeLeft()",1000);

}

}

首先修改的是resetQuiz()函数的定义。在上一版本的在线小测试程序中，resetQuiz()函数并不接收参数。现在，resetQuiz()函数将接收两个参数，这两个参数分别表示问题数量和时间限制。

接着，将全局变量timeLeft的值设置为参数SelectedTimeLimit的值，将全局变量totalQuestionsToAsk的值设置为参数numberOfQuestions的值。在后面的代码中你将会看到，这两个全局变量将用以判断问题是否已经回答完毕，以及检查时间限制是否已经到点。

在resetQuiz()函数的最后，添加了一个计时器，以监测剩余的时间。一种情况是计时器已经到点，剩余时间已经用完，即变量timeLeft的值为–1。如果变量timeLeft的值为–1时，则使用window对象的status属性，在浏览器的状态栏中显示一条时间到点的信息。注意，在Netscape浏览器中，当框架页改变时，将在浏览器的状态栏中显示Document:Done以覆盖No Time Limit信息。如果变量timeLeft的值不是–1，则使用setInterval()方法启动一个计时器，以每隔1s调用一次updateTimeLeft()函数。

updateTimeLeft()函数是一个新添加的函数。下面的代码用以创建updateTimeLeft()函数。将该代码添加在脚本块其他函数的下面。

function updateTimeLeft()

{

timeLeft--;

if (timeLeft == 0)

{

alert("Time’s Up");

numberOfQuestionsAsked = totalQuestionsToAsk;

window.top.fraQuizPage.location.href = "AskQuestion.htm";

}

else

{

var minutes = Math.floor(timeLeft / 60);

var seconds = timeLeft - (60 * minutes);

if (minutes 10)

minutes = "0" + minutes;

if (seconds 10)

seconds = "0" + seconds;

window.status = "Time left is " + minutes + ":" + seconds;

}

}

updateTimeLeft()函数完成了3个功能。首先，它将剩余时间减1，即timeLeft--；然后判断是否还有剩余的时间，当剩余时间为0时，则停止小测试程序；否则，在浏览器的状态栏中显示剩余的时间，以便提示用户。

前面我们已经知道，当调用resetQuiz()函数时，将复位在线小测试程序，并将全局变量timeLeft设置为以秒为单位的时限值，在规定的时间内用户必须完成小测试。每隔1s将调用一次updateTimeLeft()函数，在updateTimeLeft()函数的第一行代码中，将剩余的时间减去1s：

 timeLeft--;

其后的if语句用以检查timeLeft是否为0，即是否还有剩余时间。如果timeLeft为0，则表示无剩余时间，这时将变量numberOfQuestionsAsked的值设置为全局变量totalQuestionsToAsk的值，即用户所选择的要回答问题的数量。接着，将页面导航到AskQuestion.htm页面，在该页面中将认为问题已经回答完毕并终止小测试程序，而不是继续提出一个新问题。

如果还有剩余时间，则该if语句的else子句将被执行，并更新浏览器的状态栏，以显示剩余的分钟数和秒数。

这里，需要将timeLeft中保存的以秒为单位的时间值拆分成分钟数和秒数。首先，可以使用下面这行代码获取分钟数的值：

var minutes = Math.floor(timeLeft / 60);

上面的代码将返回变量timeLeft中保存的总秒数除以60的商的整数部分，这正是我们所需要的分钟数。而下面的代码则用以获得秒数：

var seconds = timeLeft - (60 * minutes);

在上面的代码中，用总的秒数timeLeft减去分钟数所对应的秒数，即可得到除去分钟数之后剩余的秒数。例如，如果timeLeft是61，则分钟数为：

minutes = 61 / 60 = 1.01667

取整后将返回整数1，表示1分钟，而剩余的秒数为：

seconds = 61 - (60 * 1) = 1

我们希望按分钟:秒钟的格式将剩余时间显示在浏览器的状态栏中，例如对于上面的例子，希望将剩余时间显示为01:01。但是，当分钟或者秒钟的值小于10时，把分钟和秒钟的字符串连接起来将是1:1这样一个字符串。对于在线小测试程序，分钟数不会超过5，实际上只需直接在前面加上0即可。但是，为了使代码能适应未来需求发生的变化 例如允许用户回答问题的时间超过9分钟，则应使用if语句进行检查，以便确定分钟数是否小于10。

要修正格式问题，只需在分钟数或秒钟数小于10时，在其前面添加一个额外的0即可，相应代码如下所示：

if (minutes 10)

minutes = "0" + minutes;

if (seconds 10)

seconds = "0" + seconds;

最后，更新浏览器状态栏中剩余时间的显示：

window.status = "Time left is " + minutes + ":" + seconds;

在前面的这两个函数中，我们用到了几个新的全局变量。这些全局变量为：

var timeLeft =-1;

var totalQuestionsToAsk = 0;

var quizTimerId = 0;

请将上面全局变量的定义添加到脚本块的开始处。

最后，再对getQuestion()函数进行两处较小的修改，就能完成本章中小测试程序的修改。

首先，修改的是函数开始处的if语句：

if (totalQuestionsToAsk != numberOfQuestionsAsked)

{

var questionNumber = Math.floor(Math.random() * questions.length);

在上一版本的在线小测试程序中，只要可用的问题还没有问完，就可以继续提问。现在，当变量totalQuestionsToAsk的值不等于实际所问问题的数量时，则继续进行提问。totalQuestionsToAsk是一个全局变量，其中保存的是用户在下拉列表框中选中的问题的数量。在前面的代码中，用户选中的问题数量将作为参数传递给resetQuiz()函数，并在resetQuiz()函数中赋值给全局变量totalQuestionsToAsk。

第二个修改的地方是else子句。当小测试结束时，将把用户小测试结果的汇总信息输出到页面上。注意，在前面的resetQuiz()函数中，我们设置了一个计时器以监测剩余时间，当时间到点时就结束在线小测试程序。现在，当小测试程序结束时，应该使用clearInterval()方法清除该计时器。当计时器启动时，该计时器的ID号已经保存在全局变量quizTimerId中，只需将该计时器的ID号传递给clearInterval()方法，即可清除该计时器。另外，当用户并未设置答题的时限时，即用户未在cboTimeLimit下拉列表框中选择一个时限时，则timeLeft的值将为–1，这时，前面的resetQuiz()函数中并未设置任何计时器，因此，这里也就无须对计时器进行清除。为此，在下面的代码中，使用了if (timeLeft != –1)进行判断：

currentQNumber = questionNumber;

questionsAsked[questionNumber] = true;

}

else

{

if (timeLeft != -1)

{

clearInterval(quizTimerId);

}

questionHTML = "h3Quiz Complete/h3";

questionHTML = questionHTML + "You got" + numberOfQuestionsCorrect;

到此为止，所有的修改都已经完成了。将上面修改后的代码保存为GlobalFunctions.htm文件。并在浏览器中加载TriviaQuiz.htm页面，以启动在线小测试程序。

如果修改后的代码正常，我们将看到一个如图9-8所示的页面。

图  9-8

如果在Time Limit下拉列表框中选择了一个时限，并单击Start Quiz按钮，则第一个随机抽取的问题将显示在页面上，并且计时器将开始倒计时，在浏览器的状态栏中将显示剩余的时间。

在Firefox浏览器和IE 7版本的浏览器中，通过JavaScript修改浏览器状态栏的功能在默认情况下是被禁止的。要在Firefox浏览器中打开该功能，只需选择Tools | Options，然后选择Content标签页。然后，单击Advanced Options按钮，然后选中Change Status Bar Text复选框。对于IE 7浏览器，只需选择Tools | Internet Options，然后再选择Security标签页。单击Internet，然后单击custom level，在打开的窗口中将滚动条下拉到Allow status bar updates via script复选框，并选中该复选框。

本章中对在线小测试程序的修改就到这里。在第11章中，我们将再次回到在线小测试程序，以介绍如何使用cookie将信息保存在用户的计算机上，以便提供一个前面所答题目信息的表格。