工程制图在线自测系统的设计与实现.docx
《工程制图在线自测系统的设计与实现.docx》由会员分享，可在线阅读，更多相关《工程制图在线自测系统的设计与实现.docx（25页珍藏版）》请在冰点文库上搜索。
工程制图在线自测系统的设计与实现
1前言
1.1选题意义
《工程制图》作为理工科一门重要的技术基础课，对学生后续专业课程的学习及工程素养的培养具有重要意义。
其实践性强的特点，使得作业练习和作图训练对课程学习质量的影响尤为重要。
课程特点和课堂教学时数的有限性，决定了课程必须依托并挖掘现代信息技术的优势和潜能，构建一个直观的交互式学习环境，使学生在课堂学习中遇到的问题可以通过教学系统得到及时解答和指导，从而激发学生的学习兴趣，培养学生课外自主学习的能力。
现有制图练习、测试的评判大多是以人为主，纸质作业情况下批阅的人需要目测或者使用绘图仪器进行测量以便判断作业图形的正误情况。
就算是采用计算机绘图进行作业也是停留在人工审阅阶段，打开图形，批阅人查询或者将答案插进去对比检查再评判分数，其实这些都存在不确定性，另外，批阅过程中批阅人要给出一定的评语实则工作量是很艰巨的。
这也就存在着效率低、失误多、资源浪费等等的缺陷。
所以实现在线的自测系统是非常有必要的[1]。
1.2研究现状
随着社会经济的飞速发展，目前网络化教育代表了教育改革的一个发展方向，已经成为现代教育的一个特征。
事实上在线自测系统也正是人们的研究热点之一。
但是由于工程制图图形数据的复杂性和特殊性，工程制图在线自测系统的设计与实现存在不同程度的难度。
尤其是机械制图的作图题目一直还未实现在线测试。
发展是必须的，这就要求我们要重视关于工程制图的二次开发。
在线自测系统是一种高效便捷的网上学习方式，提供自我测试和评价的一个系统和平台。
随着高等学校在教与学模式方面的改革，针对工程制图授课和测试方面的很多弊端以及这可以有效促进学生主动自觉的获取更多图学方面的知识，人们越来越重视有关集成化练习和试题在线自测系统的研究开发。
有效的在线测试系统不仅可以有效减轻教师批改作业的负担，更重要的是可以帮助学生用最少的时间完成自我测试，还可以帮助学生进行练习和复习，使学生自己能随时了解自己的课程掌握的程度，能及时的发现问题解决问题，同时这也有助于学生培养自学的能力和习惯[2]。
目前情况来看，计算机自动测评系统只能是针对客观题，其中包含判断正误题、选择题、填空题这些的判断测评。
也有些研究已经突破了难关实现了图形操作题的自测系统。
对于作图题目这次课题设计也仅限于是判断和选择形式的，真正的操作题因制作复杂，而我个人所学软件有限还不能完全实现。
2设计内容
2.1设计内容概述
这次选择设计的课题富有很强的针对性，是要求完成工程制图的在线测试系统的设计。
这次的课题设计主要涉及到的是Flash软件的使用，XML的数据文件的编写和调用，再就是通过Dreamweaver设计一个交互的网页，使得Flash的设计系统得到一个动感显示，也就是实现在线的自测、错误统计和成绩统计的一些具体的功能[1]。
Flash有很强大的二维交互动画的功能，利用一些脚本语言可以设计出实现交互功能的测试系统，此次是结合XML，用其建立数据文件，将试题信息编写到XML文件中存储，XML语言是一种可扩充的标记语言，可以根据需要自行的定义修改，这样使得系统可以是一个模板，提供信息的人可以根据自己的需要更改信息，弥补了Flash本身在更改信息时必须到源程序中修改的缺陷，提供了很大的便利[3]。
Dreamweaver主要是用来制作网页，实现在线的自测，这过程要求要把素材放在一个专门的文件夹中，这样教师可以根据教学需要把教学测试和练习及时的呈现给学生，而学生自己也可以根据自身的实际情况有选择的进行练习来满足不同阶段的学习需求。
这样跟随了当下信息发展的需要，学生接触的不再是单调的习题册而是具有丰富学习资源的开放的网络环境，有助于提高学生自主学习的能力，培养自主学习的好习惯[4]。
2.2预期研究结果
开发的是一套基于Flash和XML的工程制图的测试系统，并通过网页展示，主要是以选择题和判断题为主，这分为两部分，一部分是以文本为主的选择判断，一部分是以作图显示的选择判断，通过这些题目的测试考察学生的一些最基本的制图知识的掌握以及绘图能力的考察。
基于我个人能力的限制还没能实现在线的绘图方面的操作考察。
3设计方案
3.1设计方案综述
基于个人对课题的选择和理解，以及自己所掌握的关于Flash的知识，在课题初始我所考虑的是Flash本身的功能就可以实现，原本方案就只是利用Flash自身的功能去实现，在开始做的过程中发现它的缺陷，制作过程复杂而且费时间关键是不便于及时的更改信息，这样就失去了系统的存在意义，根据信息发展需要这样是不符合开发需求的，也就失去了二次开发的意义。
通过老师的指导以及搜查到的资料后来就做出了两大部分的调整，一个是针对文本行试题的系统实现，利用了扩张标记语言XML编写外部的数据文件，在Flash内部完成试题界面的设计，再通过脚本语言将外部的数据文件载入到内部，这样想要更新试题内容只需打开编写的数据文件更改其内容，系统便会自动跟随其更新，免去了要去Flash系统内的源文件的修改烦恼，大大节省了时间和程序。
另外就是由于编写的数据文件只是针对文本，对于工程制图而言作图知识的考试是必不可少的，这就需要最基础的Flash的功能实现，将有关试题做成一帧一帧的试题界面，通过简单的脚本动作语言实现其判断正误，成绩显示，系统返回，这样系统存在的问题就是对于想要及时更新里面的内容会显得比较麻烦，而且相对前一部分的制作来说也会是比较费时间。
系统设计完成后就是要实现在线，根据要求，考虑要把系统放置的大的网络环境（学院网站），利用Dreamweaver设计合适的页面来链接到所完成的Flash系统，这样基本就完成了这次课题的要求。
3.2基本框架
此课题要实现工程制图的在线测试，它包含三个大的部分:
章节练习、随机练习和模拟考试。
试题内容包含理论题和作图题。
系统的总体结构如图3.1所示
图3.1系统结构图
系统设计完成后要嵌入网页中，通过链接实现，结构图如图3.2所示。
图3.2在线测试系统示意
试题专区中利用了XML扩展标记语言形成了数据文件，通过Flash内部的脚本语现的内容,过程实现如图3.3所示：
图3.3各部分间的关系及流程顺序
4系统设计
4.1文本为主的设计
这块的设计主要是分三个大的部分来分别负责，有总的界面设计、需要加载的外部数据文件和动作脚本文件。
界面的设计主要是展示出试题内容、交互按钮以及最后的测评结果等等的信息；需要加载的外部文件是结合了XML技术，将试题内容和相关信息如题号、选项、正确答案等存放到了XML文档中，这个文件是独立的数据信息；运行时Flash中的ActionScript脚本语言就是界面与外部数据文件的通信桥梁，它将XML文件中的数据内容解析后存放到数组中并通过界面显示出来。
另外所建立的这三个部分的文件是要放在同一目录下的[5]。
4.1.1XML数据文档的设计
XML是一种可扩展的源标记语言，是可以定义其他语言的语言。
是一种跨平台传输数据的标准，它拥有一些方法，可以在开发各种应用程序时调用所对应的方法。
而且它的结构和语法都比较严谨，容易阅读且不会产生歧义，在需要时可以转换为其他的格式。
Flash拥有处理XML的能力，XML对象允许输入和集成任何WEB上的XML格式的数据到Flash中[2]。
因这次课题设计所用的关于XML语言的知识只是最基本的，不需要使用专门的XML编辑器，我们可以使用记事本来编写。
此次我所用的就以下面介绍的格式编写：
xmlversion="1.0"encoding="UTF-8"?
>[7]
（1）机械制图中国家标准规定汉字是（）
A草体
B长仿宋体
C宋体
D楷体
（2）。
。
。
。
A..
B..
C..
D..
……………
……………
这个XML文件中………是属于XML编辑中的格式，是一个文件中的根元素，来保留所有文档的内容。
所要添加的内容只要在中间添加就可以了。
开头是属于XML的声明解释，一般在文件中用到中文的话最好有encoding="UTF-8"，这样在运行XML文件时就不会出现乱码现象了。
是表示题目内容，是关于题目选项，Key=””是这道题目的答案，每道题目完成后以结束。
想要多少题目只要在根元素下创建多少个….就好。
值得注意的是因为我们在编辑XML文件时没有使用专门的编辑器而是记事本，所以在编写完文件后保存是在输入名称后，要以.xml为文件扩展名并在保存类型中选择Unicode或者UTF-8再保存，这样就生成XML数据文件了，最后将数据文件存放到建好的文件夹中[7]。
4.1.2试题界面的设计
首先打开Flash软件，打开文件新建选择常规选项卡中的新建flash文档，这样将文档命名保存到数据文件所在的文件夹。
然后选择图层1的第一帧根据自己的设计首先建立一静态文本框输入比如“章节练习”的字样，然后在此图层上加以按钮，以点击进入。
具体状态如图4.1所示：
图4.1试题界面第一帧布局
接着插入一空白关键帧，也可以根据自己的喜好来创建不同的背景图或者颜色，这一帧主要是用来添加ActionScript脚本语言来加载外部的数据文件的，此次设计中是用的attachMovie的方法加载的。
另外此时按下Ctrl+F8键打开创建原件的对话框，命名，比如“question”类型选择影片剪辑，点击确定，此时就打开了此原件的编辑状态，这样点击工具中的文本工具，将其属性更改为动态文本框，在编辑中添加四个动态文本框，同时分别将四个文本框的实例名设为如：
t_txt,k1_txt,k2_txt,k3_txt,以便于脚本语言中编辑使用。
另外按下Ctrl+F7打开组件库调出单选按钮Radiobutton组件四个，将四个按钮的实例名分别设置为A_btn,B_btn,C_btn,D_btn,并设置其属性及参数如下图4.2所示
图4.2单选按钮的属性设置
这样便完成了question影片剪辑的创建了，然后回到到场景中，继续图层的编辑。
此时要编辑第三帧，还是同前一样选择想要的背景颜色，这时在此帧主要是添加两个按钮，“上一题”与“下一题”，也就是导航按钮，便于做题过程中的翻页。
此时可以用组件库中的Button组件并对其进行属性及参数设置如下图4.3所示：
图4.3button组件的属性及参数设置
以上第三帧的工作也完成了，接下来就是做个结束的界面，以做成绩统计以及返回首页。
选中第四帧添加空白关键帧，设置好背景，添加一静态文本框写“结束”
或者“成绩统计”的字样，然后在文字下添加一空的动态文本框以做分数显示，另外在此帧上还要添加一按钮，以做完题目返回首页，设置其实例名为replay_btn,第四帧的设置完成如下图4.4所示：
图4.4成绩统计界面的设置
此时就已经完成了试题界面的设计了，再一部分便是在Flash中添加动作语言来导入外部的XML文本文件以及对页面一些按钮的动作设置。
下面来介绍这部分。
4.1.3脚本语言的编辑
脚本语言主要是将外部编辑的文本文件导入到Flash中以显示出所要表现的内容，主要的就是对XML文档的解析，设计中主要是通过attachMovie的方法将XML文档加载到Flash中。
其主要加载代码如下面所示：
myxml=newXML（）;//定义一个XML对象
myxml.ignoreWhite=true;//忽略xml文档中的空格
System.useCodepage=true;//一个布尔值，通知FlashPlayer使用的是Unicode来解释外部文本文件
myxml.load（"lianxixml.xml"）;载入XML文件
key_arr=newArray（）;建立答案数组
t_arr=newArray（）;建立题目数组
result_arr=newArray（）;
mykey_arr=newArray（）;
myxml.onLoad=function（ss）{//判断是否加载成功
if（ss）{
trace（"loadXMLOK"）;
…………………………
}
在flash中建立Array数组来完成对操纵数组的访问。
并将数据内容存放到数组中。
t_arr[i].question=tt[i].childNodes[0].firstChild;
t_arr[i].k1=tt[i].childNodes[1].firstChild;
t_arr[i].k2=tt[i].childNodes[2].firstChild;
t_arr[i].k3=tt[i].childNodes[3].firstChild;
t_arr[i].k4=tt[i].childNodes[4].firstChild
这里所体现的是对文档中题目内容和选择项的读取。
attachMovie（"mc","qu",1,{_x:
30,_y:
50}）;这句是加载的关键，前面所提到的建立的“question”影片剪辑，在库中找到这元件，右键单击找到链接项，选中第一项自动会选中第三项，将标识符改为“mc”或者原名不改只是选中链接项，在用attachMovie时写出相应的标识符即可，这样才能链接上才能正确读取所要表现的内容。
大括号里是加载后内容所在的坐标显示。
还要添加的便是关于“上一题”和“下一题”的按钮动作，在动作同时还有对选项的一个判断，代码如下形式
next_btn.onRelease=function（）{
if（qu.A_btn.selected==true）{
mykey_arr[v1-1]="A";
}
if（qu.B_btn.selected==true）{
mykey_arr[v1-1]="B";
}
if（qu.C_btn.selected==true）{
mykey_arr[v1-1]="C";
}
if（qu.D_btn.selected==true）{
mykey_arr[v1-1]="D";
}
if（v1qu.A_btn.selected=false;
qu.B_btn.selected=false;
qu.C_btn.selected=false;
qu.D_btn.selected=false;
qu.t_txt.text=t_arr[result_arr[v1]].question;
qu.k1_txt.text=t_arr[result_arr[v1]].k1;
qu.k2_txt.text=t_arr[result_arr[v1]].k2;
qu.k3_txt.text=t_arr[result_arr[v1]].k3;
qu.k4_txt.text=t_arr[result_arr[v1]].k4;
v1++;
}else{
qu.removeMovieClip（）;
nextFrame（）;
}
};
这里用到了在试题界面设计时提到到要写的按钮的实例名，设置的要与脚本语言中的相一致，不然运行是不会成功的。
最后的代码是关于成绩显示以及运行回去的，在代码中所要设置的就是关于每道题目的分值，以及所选答案与正确答案是否相符合，还有就是总分数的计算方式，通过判断答案自动计算出所做完成后的成绩并显示出来，在最后的页面设置中还有一个关键的按钮，就是回到首页，也就是重新开始。
这最后的代码中也设置了所做的答案与系统所给的正确答案的一个对比，不只是知道最后成绩还可以看到自己都是哪一道题目做错了。
下面图4.5便是最后一帧的脚本：
图4.5结束页面的代码显示
4.1.4运行结果
到目前的介绍为止，以文本为主的选择题测试系统算是完成了。
其运行结果如下图4.6所示：
图4.6运行结果显示
在所有题目做完的最后会是成绩显示部分，并且系统的正确答案会与所做的测试答案有个对比，这样可以很明显的看出测试中到底是哪道题目出现了错误，还有就是在最后页面有个返回按钮，便于重新来过，反复做题巩固练习。
4.2图形选择题为主的设计
这块在方案综述中提到了，因为数据文件的本身问题，编辑中不能将有关图形的选择题目加入，所以选择了另外一种方式来实现这种类型的题目，就是直接用Flash制作，也可以称为为直接制作法，就是利用单选按钮作备选答案选项，利用动态文本对象显示反馈信息。
而前面所介绍的是外部文件载入法，最大的优点就是便于修改更新。
4.2.1设计题目
打开flash文档，在图层1的第一帧上利用工具中的文本工具，设置属性为静态文本，然后将题目内容输入，将选项也输入，在以后的每一帧点右键选择插入空白关键帧，分别将要显示的题目输入到各帧，有多少题目就用多少帧。
如下图4.7所示：
[3]
图4.7显示题目选项
4.2.2设计选项按钮
Ctrl+F7打开组件库调用Radiobutton组件四个，放到与选项相对应的地方，这里与前面调用时相比有所不同，没有实例名的设置。
但是参数设置中要多一些，尤其是关于groupName的设置，每一帧上一题，那么每一帧的调用的四个按钮为一组，那么每组的groupName就要定义不同，如a1……ai或者其他，只要有所区别就行，这为添加脚本时提供便利。
参数设置可以根据下图4.8来进行设置。
图4.8单选按钮的参数设置
图中的“data”设置的是在选中该按钮时的数据信息，也就是一种判断，一组的按钮的“data”属性肯定只有一个是正确的选项将其设置为“正确”或者“对”，其他的三个设置为错误就可以了，这样在做题过程中选择时会判断其正误。
这只是其中一帧的设置，剩下每一帧的题目都按照这样的方式设置即可。
此时要选择在界面上合适的位置添加一动态文本框，并将它的实例名设置为“text”，它的作用便和这设置中的“data”属性相关，每选择一项它会显示出你选择的是不是正确的答案，这样就可以知道自己做错了哪些题目。
接着再打开组件库调用两个button组件，作为“下一题”“上一题”的按钮。
至此题目的界面设置就算是完成了，如下图4.9所示：
图4.9界面效果
4.2.3脚本语言的编写
在加入选择题目的每一帧上加入stop（）的命令，然后给翻页按钮“下一题”添加动作代码如下图4.10所示：
图4.10添加脚本动作图
“上一题”按钮的代码于此差不多，不再显示。
选中该帧，为这一帧添加以下代码：
[3]
flashistListener=newObject（）;//定义侦听器对象
flashistListener.click=function（evt）{//定义侦听器对象的click事件函数
txt.text=evt.target.selection.data;//将用户单击的那个单选按钮的data值保存在txt中
};
a1.addEventListener（"click",flashistListener）;//将组名为a1的按钮注册到侦听器对象
这是关于单选按钮的属性值的判断和显示，这里就用到了groupName的设置值，以及文本框的实例名，便于识别。
4.2.4运行结果
这样关于涉及图形的选择题的制作也完成了，运行结果如下图4.11所示：
图4.11运行效果图
4.3进入页面的设计
完成了系统中一些需要体现出来的界面设计和编写，还要有个首页的设计也就是系统打开首先呈现出来的一个界面。
我所设计的总共分了三个版块：
随机练习、章节练习和模拟考试。
这三个版块以按钮的形式出现，可以根据自己的喜好制作出来，也可以直接调用button组件。
如下图4.12所示：
图4.12首页图展示
这样要为首页的三个按钮添加网络动作来实现跟前面所做的flash的文件链接，这里我用getURL来建立链接，它的语句格式为：
getURL（url,window,methord）。
首先将前面做的flash动画都存放到电脑中的某一个盘里的新建的文件夹里，自己命名好，这时要把做的flash动画做【发布设置】，发布后是.swf文件和.html文件的形式。
通过getURL链接这两种类型的文件都可以，只要把目标路径填正确就行。
现在给首页上三个按钮添加例如下面的代码，如选中“随机练习”按钮，按下F9打开动作面板添加链接代码：
on（release）{
getURL（"File:
///F:
/实例/随机练习xml.swf"）;
}
或者是
on（release）{
getURL（"File:
///F:
/实例/随机练习xml.html"）;
}
这样当运行时，点击不同的按钮会对应的打开前面已经做好的系统，如下图4.13所示：
图4.13
5网页设计
网页设计就是针对这次课题的“在线”，要将其发布到学院网站以实现学生能随时登录进行自测，这才是最终的目的。
当然Flash本身也有网页制作的功能，只是完全用Flash制作网页的话设计过程会很繁琐而且所产生的网页占据的空间也很大。
所以选择了专业网页制作的工具：
Dreamweaver。
它的特点是代码简单。
使用Dreamweaver调用和控制Flash动画很方便，用Dreamweaver制作网页，将Flash动画作为模块嵌入到网页中，这样制作网页方便也可以为页面增添动感[11]。
5.1基本网页的制作
首先是在Dreamweaver中制作一网页。
因为要实现的系统是要跟学院网站结合起来，所以网页采用了学院网站的图片。
页面结构跟学院网站相一致。
启动Dreamweaver，选择“创建新项目”下的“HTML”文档，这就进入了Dreamweaver的工作界面。
在正式开始制作网页前，应该先定义一个新网站，以便于利用站点管理器对站点文件进行管理。
站点建立时在向导询问是否使用服务器技术时选择否，使用文件选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”单选框，并在下面的文本框中输入本地站点所在的根文件夹。
其他设置根据提示和自己的需要选择，这样就完成了站点的创建。
要在本地站点中制作所需要的网页，先在本地站点文件列表中选择也要保存新建文件夹的文件夹，执行“文件/新建文件”菜单命令，创建一个新的网页文件，注意编辑名称时添加文件扩展名比如.htm。
双击新建网页文件即可在工作区进行编辑了。
先将学院图片插入，如下图5.1所示：
[12]
图5.1网页基本结构
所生成代码如下所示：
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
升级会员 