天津开放大学 文本 网上练习系统的设计与实现_动态网页制作第8章

第8章网上练习系统的设计与实现 8.1网上练习数据库的设计 一个表结构。我们采用按试类型米建立数据 81.1选择题 选择题表结构，如表91所示。 字段名称字段类型字宽度 50 目 文本型 文本型 详舒文本州0 题型”字段用于设置单逃题成者多达题，。“详解”字段主要是对答案的个说明。当

1 本章主要介绍了网上练习系统的数据库结构、程序流程图和功能实现过程。网上练习的 题型包括选择题、判断题、填空题和名词解释。 8.1 网上练习数据库的设计 网上练习系统是目前比较流行的基于网络的一个教学环节，它形式新颖，能促进学生自主 学习能力的提高。本章将详细介绍网上练习系统的开发技巧。 在网上练习系统中，每一类型的试题都应有一个表结构，我们采用按试题类型来建立数据 表，在这里我们采用熟悉的 access 来建立数据表。其涉及的字段主要有题型、题号、题目、 备选答案、解答等。其中“题型”字段用以判断题目类型，从而进行相应的程序流程转向。 网上练习数据库（exercise.mdb）中有 4 张表，分别为 choice(选择题)、blank(填空题)、 judge(判断题)、mingci(名词解释)。 选择题表结构，如表 8-1 所示。 字段名称 字段类型 字段宽度 说明 题型 文本型 50 单选或者多选 题号 长整型 题目 备注型 选项 1 文本型 50 选项 2 文本型 50 选项 3 文本型 50 选项 4 文本型 50 解答 文本型 50 详解 文本型 50 表 8-1 “题型”字段用于设置单选题或者多选题，“详解”字段主要是对答案的一个说明。当 答错的时候，显示，答对了，可以不显示。 在 ACCESS 中的表截图如图 8-1 所示

▣☒ 50 图8】达择愿表结枸 8.12判题 判斯的表纺构与选择题相。如表8-2所示。 类型字段宽度 0

2 图 8-1 选择题表结构 判断题的表结构与选择题相似，如表 8-2 所示。 字段名称 字段类型 字段宽度 说明 编号 自动编号 题型 文本型 50 题号 长整型 题目 备注型 选项 1 文本型 50 选项 2 文本型 50 解答 文本型 50 详解 文本型 50 在 ACCESS 中的表截图如图 8-2 所示。 图 8-2 判断题表结构

8.13填空题 填空圆数据表的结构，如表83所示。 字段名称 字段类型 字段宽度 说明 编号 自动编号 要号 长整型 题目 备注型 选项1 文本型 50 选项2 文本型 50 解容 文本型 50 详解 文木型 50 表8-3 在ACCESS中的表禁图如图8-3所示. bl止：表 ▣☒ 手政名沉 豹类型刊 说明■ 四按马 自动骗号 题号 数子 日 备注 ■解容 留注 评解 注 字镜压 常规查阿 字货大小 长整四 新值 理增 标思 来 有无复】 行能标记 图8-3填空通数据表结构 8.1.4名词解释 名词解释数据表的结构如表B4所示。 3

3 填空题数据表的结构，如表 8-3 所示。 字段名称 字段类型 字段宽度 说明 编号 自动编号 题号 长整型 题目 备注型 选项 1 文本型 50 选项 2 文本型 50 解答 文本型 50 详解 文本型 50 表 8-3 在 ACCESS 中的表截图如图 8-3 所示。 图 8-3 填空题数据表结构 名词解释数据表的结构如表 8-4 所示

字段名称 字段类型 字段究度 说明 编号 自动编号 题号 长整型 颗目 备注型 解容 文木型 50 表8-4 在ACCESS中的表黄图如图8-4所示， mingci:表 ▣☒ 子设名闲 豹型刊 说明■ 摆 自动端号 恶号 字 数日 留注 ■解答 品注 字段黑性 常规查帆 字大小 长粒型 新值 遵增 格式 标题 素引 有无需复) 智花标记 图8-4名问解释数据表结构 8.2选择题功能 8.21程序流程图 首先打开选择愿数据表读取表中符合要求的恩日，显示题干及各个选项然后循环显示下 道愿日。用户开始做题，然后系统自动批改，如果用户答带了，可以点击“批改”按钮， 显示该颗的知识点解答。程序济程如图8-5所示

4 字段名称 字段类型 字段宽度 说明 编号 自动编号 题号 长整型 题目 备注型 解答 文本型 50 表 8-4 在 ACCESS 中的表截图如图 8-4 所示。 图 8-4 名词解释数据表结构 8．2 选择题功能 首先打开选择题数据表,读取表中符合要求的题目,显示题干及各个选项,然后循环显示下 一道题目。用户开始做题，然后系统自动批改，如果用户答错了，可以点击“批改”按钮， 显示该题的知识点解答。程序流程如图8-5所示

打开选择避数据表 显示题干和逃项 接收用户操作结果 系统批改 在线查看答案 开有毯目完成否 结束 图85选择通程序流程图 8.2.2功能的实现 1.打开选抒题数据库 所涉及到的主要话句有： Dim strConn Dim objConnection set objConnection-Server CrealeObject("ADODB Connection") strConn-"Provider-Microsoft Jet OL.EDB 4.0.Data Source="&Server.MapPath("exercise.mdb") 数据库名称为execcis2mdb objConnection.open strConn Dim rsl set rsl=server.CreateObject("ADODB.Recordset") rsl.open"select*from choice·,objConnection..3,3‘选择题数据表名为choice 2.显示题十和选项 从选择燃数据表读取第一道避目的相关信息，先显示腿干，可用语句 c%-Server.ITTMLEncode(rsl("题目")%>实现，其中Server.HITMLEncode是将字符半转换成 HML.格式输出，再利用循环语句显示4个选项，例如： For i=1to 4 cinput Type="Radio"Name=NO value==1%

5 N Y Y 图 8-5 选择题程序流程图 1．打开选择题数据库 所涉及到的主要语句有： Dim strConn Dim objConnection set objConnection=Server.CreateObject("ADODB.Connection") strConn="Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&Server.MapPath("exercise.mdb") ‘数据库名称为execcise.mdb objConnection.open strConn Dim rs1 set rs1=server.CreateObject("ADODB.Recordset") rs1.open "select * from choice " ,objConnection,3,3 ‘选择题数据表名为choice 2．显示题干和选项 从选择题数据表读取第一道题目的相关信息，先显示题干，可用语句 实现，其中 Server.HTMLEncode 是将字符串转换成 HTML 格式输出。再利用循环语句显示 4 个选项，例如： For i=1 to 4 > 打开选择题数据表 显示题干和选项 接收用户操作结果 系统批改 所有题目完成否 在线查看答案 结束

%-Server.HTMLEncode(rs1'选项"&i)%chx Next 3.系统批改 在用户进行操作后，可利用系统的批成功能查看操作对误。为实现比功使，我们可把用 户操作结果赋给一个变量，与从数据表读取的答案字段相比对，根据实际情况利用VBS(RIPT 分支语句IF.THEN.ELSE给出对误的文字结果及图标提示。 4。查看答案。若用户恕查看正确答案，则给出结果。用ASP变量显示语句%→即可实 现此功能。 8.3判断题功能 8.3.1程序流程图 与达择题类似，首先打开判断逐数据表，读取第一道判断题的遥干和选项，用户操作后 可进行评改，再读取下一道判断题，直到读完为止。图86是判断通的程序流程图。 打开判断燧数据表 显示恩十和选项 接收用户操作结果 系统批政 在线查看答案 所有匿目克成否 结束 图86判新圈程序流程图 8.3.2功能的实现 1.打开判断题恩库 Dim strConn Dim objConnection

6 Next 3．系统批改 在用户进行操作后，可利用系统的批改功能查看操作对误。为实现此功能，我们可把用 户操作结果赋给一个变量，与从数据表读取的答案字段相比对，根据实际情况利用 VBSCRIPT 分支语句 IF…THEN…ELSE 给出对误的文字结果及图标提示。 4．查看答案。若用户想查看正确答案，则给出结果。用 ASP 变量显示语句即可实 现此功能。 8．3 判断题功能 与选择题类似，首先打开判断题数据表，读取第一道判断题的题干和选项，用户操作后 可进行评改，再读取下一道判断题，直到读完为止。图 8-6 是判断题的程序流程图。 N Y 图 8-6 判断题程序流程图 1. 打开判断题题库 Dim strConn Dim objConnection 打开判断题数据表 显示题干和选项 接收用户操作结果 系统批改 所有题目完成否 在线查看答案 结束

set objConnection=Server.CreatcObject("ADODB.Connection") strConn="Provider=MicrosoftJet.OLEDB.4.0:Data Source="&Server.MapPath("exercise.mdb") 数据库名execcise mdb objConnection open strConn Dim rsl set rs1-server.CreateObject("ADODB.Recordset") rsl.open”slet*from judge·,objConnection,3,3判断2表名为judge 2.显示题十和选项 为程序设计方便，我们可借鉴单迹题的设计思路，实现判断功能。只要把远项变为2 个即可。因此从判断服数据表读取第·道题目的相关信息，先显示题干，可用语句 实现，再利用环语句显示2个选项，例知： For l=1 to 2 cinput Type="Radio"Name=NO value=%=1% %-Server..HTMLEncoders1('选项"&l)%>-b> Next 3。实现评改功能和查看功能。与选择题类似，此处不再赘述。 8.4 填空题功能 8.41程序流程图 打开填空题数据表，读取题干即可。利用文本框供用户填入结果。系统获取用户操作 结果实现评改功能：如图8-7所示 打开填空题数据表 显示题干 接收用户探作结果 系统批政 在线查看答案 所有题目完成否 Y 结束 7

7 set objConnection=Server.CreateObject("ADODB.Connection") strConn="Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&Server.MapPath("exercise.mdb") ‘数据库名execcise.mdb objConnection.open strConn Dim rs1 set rs1=server.CreateObject("ADODB.Recordset") rs1.open "select * from judge " ,objConnection,3,3 ‘判断题表名为judge 2．显示题干和选项 为程序设计方便，我们可借鉴单选题的设计思路，实现判断题功能。只要把选项变为 2 个即可。因此从判断题数据表读取第一道题目的相关信息，先显示题干，可用语句 实现，再利用循环语句显示 2 个选项，例如： For l=1 to 2 > Next 3．实现评改功能和查看功能。与选择题类似，此处不再赘述。 8.4 填空题功能 打开填空题数据表，读取题干即可。利用文本框供用户填入结果。系统获取用户操作 结果实现评改功能。如图 8-7 所示。 N Y 打开填空题数据表 显示题干 接收用户操作结果 系统批改 所有题目完成否 在线查看答案 结束

图8-7填空题程序流程图 8.4.2功能的实现 1.打开填空题遥库 Dim strConn Dim objConnection set objConnection-Server CrealeObject("ADODB Connection") strConn="Provider=MicrosoftJet.OLEDB.4.0:Data Source-&Server.MapPath('exercise.mdb") ·数据库名execcis买.mdb objConnection.open strConn Dim rsl set rs1-server.CreateObject("ADODB Recordset") rsl open"select*from blank",objConnection,33“填空盟表名为hlank 2.显示题干及答题区域。可用语句s%=Server.HTMLEncode(rsl"题目")%>实现.注意 可采用毓号等方法把清要填写的若干空的答案稀开. 3。实现评改功能和查看功能。与选择趣类似，比处不再赘述。 名词解释的程序流程图及功能的实现与填空题类似，此处不再赞述。 8.5网页间传递参数常用方法 1.通过Cookies传递参数 Cookies是wh服务器保存在用户硬盘上的一段文本，kies允许一个wh站点在客户机上 保存信县并随后再取会它。【csponsc对象的cookics集合用来在客户操写cookies,而读cookies则 通过rCq心e过对象的cookies果合米完成。用法如下： response.Cookies"变量名"=变量值 变量值-equest.Cookies"变量名) 若程序需用到ekie功能，则需要用如下句检测用户是否打开cookies if not IsCookiesOpen then errm罗-”<Font color-Tew中本网页必须使用Cookies功能，请先打开Cookies!</font end it 该话句是提示用户如果没打COOKIES,请打开COOKIES。为了打COOKIES,我们 在1E页面中达择Interneti进项一工具一隐私一高级，如图8-8所示： 8

8 图 8-7 填空题程序流程图 1．打开填空题题库 Dim strConn Dim objConnection set objConnection=Server.CreateObject("ADODB.Connection") strConn="Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&Server.MapPath("exercise.mdb") ‘数据库名execcise.mdb objConnection.open strConn Dim rs1 set rs1=server.CreateObject("ADODB.Recordset") rs1.open "select * from blank " ,objConnection,3,3 ‘填空题表名为blank 2．显示题干及答题区域。可用语句实现。注意 可采用顿号等方法把需要填写的若干空的答案隔开。 3．实现评改功能和查看功能。与选择题类似，此处不再赘述。 名词解释的程序流程图及功能的实现与填空题类似，此处不再赘述。 8.5 网页间传递参数常用方法 1．通过Cookies传递参数 Cookies是web服务器保存在用户硬盘上的一段文本，cookies允许一个web站点在客户机上 保存信息并随后再取会它。 response对象的cookies集合用来在客户端写cookies,而读cookies则 通过request对象的cookies集合来完成。用法如下： response.Cookies("变量名")=变量值 变量值=request.Cookies("变量名") 若程序需用到cookie功能，则需要用如下句检测用户是否打开cookies。 if not IsCookiesOpen then errmsg="本网页必须使用Cookies 功能,请先打开Cookies!" end if 该语句是提示用户如果没打开COOKIES，请打开COOKIES。为了打开COOKIES，我们 在IE页面中选择Internet选项—工具—隐私—高级，如图8-8所示：

高领隐和策略设苦 厚☒ 肇副器："处昂城中处理eh…这 Cookie 回衡需日动ei。处理边) 第一方Cook。 第三方Cookie ⊙拔受么) ⊙求发C) 。拒拍) 。拒地 ○提示) ●星示) ☑发是元升签沃q妇近】 取消 图8-8 按上图勾划相应选项，即可打开cookies功能. 2.通过表单的隐藏控件传递 表单的隐藏控件形式是。这种方法一定要用户去提 交此表单才行。取得提交表单甲的信息只能用request..form(参数名)。 实验8网上练习程序设计实例 本实例将介绍一个网上练习系统的设计过程，具体内容为电子商务煤程相关知识的网上 练习，避型为选择题、判断避、填空题、名问解释。 1.网上练习的首页设计(1ixi.asp) 在该页面设计4个表单，分别接收四种愿型的起止题号，当点击“做题”按细时，转入 试题页面，开始顾题，如图89所示， n.aa么4u制话e0NPwD-台发 是◆⊙身A明⊙②wh心3”可峰，孩四 a常·年网西4积背多大t》二t·0H0·a角里面·O制-自元H计· 电学南条调上练动 www.Ljrlvu.odu.cn 2A思通，雀人江E与G1据特：上Et的 量酒h,M人北起4上D年，影地里年里年： 《可5，人26g上料：4：0☐国t4:X 图89网上炼习首界面 当点击“微题”按钮时。打开新的试愿页面时需要对页面的大小、位置和滚动条等属性 进行设置，所以输写了函数e5 ubnit1(url),在eSubnitl(url)函数中，有·个语句

9 图 8-8 按上图勾划相应选项，即可打开 cookies 功能。 2.通过表单的隐藏控件传递 表单的隐藏控件形式是。这种方法一定要用户去提 交此表单才行。取得提交表单里的信息只能用request.form("参数名")。 实验 8 网上练习程序设计实例 本实例将介绍一个网上练习系统的设计过程，具体内容为电子商务课程相关知识的网上 练习，题型为选择题、判断题、填空题、名词解释。 1. 网上练习的首页设计（lianxi.asp） 在该页面设计 4 个表单，分别接收四种题型的起止题号，当点击“做题”按钮时，转入 试题页面，开始做题。如图 8-9 所示。 图 8-9 网上练习首界面 当点击“做题”按钮时，打开新的试题页面时需要对页面的大小、位置和滚动条等属性 进行设置，所以编写了函数 weSubmit1(url)，在 weSubmit1(url)函数中，有一个语句

window.open实现了上述功能。语句如下： window.open (ur1,"weVindow","width=450,height=250,1eft=100,top=100,resizable= no,scrollbars=no") 其巾width和he1ht定义了打开窗口的宽度和高度，1eft和tap设置了打开窗口生左 边和距项都的位置，世sixa山l=”o”,使得新打开窗口不能随意调整窗口大小， serol1rs=””,使窗口无滚动条显示。 weSubnit1(rl)函数代码如下： function weSuhmitl(ur1) extl weForm recordl,value ext2 weForm record2.value if(isNaN(extI) alert(“请输入数字：门 weForm.recordl,focus() weForm.record1.selec:L() return false if(extI(I alert(“不能为空.请重新输入！) weForm.recordl.focus() weForm.recordl.select ( return false else if(ext2>50) alert(“圈数过多，请重新输入！“) weForm.record2.focus ( weForu.record2.select ( return false else url-url+"?"+"rccordl="textl+"&"+"record2-"text2 window.open(url,"weWindo",width=450,height=250,left=100,top=100,resiza hle=no,scrollbars=no") 10

10 window.open 实现了上述功能。语句如下： window.open(url,"weWindow","width=450,height=250,left=100,top=100,resizable= no,scrollbars=no") 其中 width 和 height 定义了打开窗口的宽度和高度，left 和 top 设置了打开窗口距左 边 和 距 顶部 的 位置 ， resizable=”no” ， 使得 新 打开 窗 口不 能 随意 调 整窗 口 大小 ， scrollbars=”no”，使窗口无滚动条显示。 weSubmit1(url)函数代码如下： function weSubmit1(url) { ext1 = weForm.record1.value ext2 = weForm.record2.value if( isNaN(ext1) ) { alert("请输入数字!") weForm.record1.focus() weForm.record1.select() return false } if( ext150) { alert("题数过多. 请重新输入!") weForm.record2.focus() weForm.record2.select() return false } else { url=url+"?"+"record1="+ext1+"&"+"record2="+ext2 window.open(url,"weWindow","width=450,height=250,left=100,top=100,resiza ble=no,scrollbars=no")