工程制图在线自测系统的设计与实现.pdf

《工程制图在线自测系统的设计与实现.pdf》由会员分享，可在线阅读，更多相关《工程制图在线自测系统的设计与实现.pdf（22页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、-1-1 前言 1.1 选题意义 工程制图作为理工科一门重要的技术基础课，对学生后续专业课程的学习及工程素养的培养具有重要意义。其实践性强的特点，使得作业练习和作图训练对课程学习质量的影响尤为重要。课程特点和课堂教学时数的有限性，决定了课程必须依托并挖掘现代信息技术的优势和潜能，构建一个直观的交互式学习环境，使学生在课堂学习中遇到的问题可以通过教学系统得到及时解答和指导，从而激发学生的学习兴趣，培养学生课外自主学习的能力。现有制图练习、测试的评判大多是以人为主，纸质作业情况下批阅的人需要目测或者使用绘图仪器进行测量以便判断作业图形的正误情况。就算是采用计算机绘图进行作业也是停留在人工审阅阶段，

2、打开图形，批阅人查询或者将答案插进去对比检查再评判分数，其实这些都存在不确定性，另外，批阅过程中批阅人要给出一定的评语实则工作量是很艰巨的。这也就存在着效率低、失误多、资源浪费等等的缺陷。所以实现在线的自测系统是非常有必要的1。1.2 研究现状 随着社会经济的飞速发展，目前网络化教育代表了教育改革的一个发展方向，已经成为现代教育的一个特征。事实上在线自测系统也正是人们的研究热点之一。但是由于工程制图图形数据的复杂性和特殊性，工程制图在线自测系统的设计与实现存在不同程度的难度。尤其是机械制图的作图题目一直还未实现在线测试。发展是必须的，这就要求我们要重视关于工程制图的二次开发。在线自测系统是一种

3、高效便捷的网上学习方式，提供自我测试和评价的一个系统和平台。随着高等学校在教与学模式方面的改革，针对工程制图授课和测试方面的很多弊端以及这可以有效促进学生主动自觉的获取更多图学方面的知识，人们越来越重视有关集成化练习和试题在线自测系统的研究开发。有效的在线测试系统不仅可以有效减轻教师批改作业的负担，更重要的是可以帮助学生用最少的时间完成自我测试，还可以帮助学生进行练习和复习，使学生自己能随时了解自己的课程掌握的程度，能及时的发现问题解决问题，同时这也有助于学生培养自学的能力和习惯2。目前情况来看，计算机自动测评系统只能是针对客观题，其中包含判断正误题、选择题、填空题这些的判断测评。也有些研究已

4、经突破了难关实现了图形操作题的自测系统。对于作图题目这次课题设计也仅限于是判断和选择形式的，真正的操作题因制作复杂，而我个人所学软件有限还不能完全实现。-2-2 设计内容 2.1 设计内容概述 这次选择设计的课题富有很强的针对性，是要求完成工程制图的在线测试系统的设计。这次的课题设计主要涉及到的是Flash 软件的使用，XML 的数据文件的编写和调用，再就是通过Dreamweaver 设计一个交互的网页，使得Flash 的设计系统得到一个动感显示，也就是实现在线的自测、错误统计和成绩统计的一些具体的功能1。Flash 有很强大的二维交互动画的功能，利用一些脚本语言可以设计出实现交互功能的测试系

5、统，此次是结合XML，用其建立数据文件，将试题信息编写到XML 文件中存储，XML 语言是一种可扩充的标记语言，可以根据需要自行的定义修改，这样使得系统可以是一个模板，提供信息的人可以根据自己的需要更改信息，弥补了Flash本身在更改信息时必须到源程序中修改的缺陷，提供了很大的便利3。Dreamweaver 主要是用来制作网页，实现在线的自测，这过程要求要把素材放在一个专门的文件夹中，这样教师可以根据教学需要把教学测试和练习及时的呈现给学生，而学生自己也可以根据自身的实际情况有选择的进行练习来满足不同阶段的学习需求。这样跟随了当下信息发展的需要，学生接触的不再是单调的习题册而是具有丰富学习资源

6、的开放的网络环境，有助于提高学生自主学习的能力，培养自主学习的好习惯4。2.2 预期研究结果 开发的是一套基于Flash 和 XML 的工程制图的测试系统，并通过网页展示，主要是以选择题和判断题为主，这分为两部分，一部分是以文本为主的选择判断，一部分是以作图显示的选择判断，通过这些题目的测试考察学生的一些最基本的制图知识的掌握以及绘图能力的考察。基于我个人能力的限制还没能实现在线的绘图方面的操作考察。-3-3 设计方案 3.1 设计方案综述 基于个人对课题的选择和理解，以及自己所掌握的关于Flash 的知识，在课题初始我所考虑的是Flash 本身的功能就可以实现，原本方案就只是利用Flash

7、自身的功能去实现，在开始做的过程中发现它的缺陷，制作过程复杂而且费时间关键是不便于及时的更改信息，这样就失去了系统的存在意义，根据信息发展需要这样是不符合开发需求的，也就失去了二次开发的意义。通过老师的指导以及搜查到的资料后来就做出了两大部分的调整，一个是针对文本行试题的系统实现，利用了扩张标记语言XML编写外部的数据文件，在 Flash 内部完成试题界面的设计，再通过脚本语言将外部的数据文件载入到内部，这样想要更新试题内容只需打开编写的数据文件更改其内容，系统便会自动跟随其更新，免去了要去Flash 系统内的源文件的修改烦恼，大大节省了时间和程序。另外就是由于编写的数据文件只是针对文本，对于

8、工程制图而言作图知识的考试是必不可少的，这就需要最基础的Flash 的功能实现，将有关试题做成一帧一帧的试题界面，通过简单的脚本动作语言实现其判断正误，成绩显示，系统返回，这样系统存在的问题就是对于想要及时更新里面的内容会显得比较麻烦，而且相对前一部分的制作来说也会是比较费时间。系统设计完成后就是要实现在线，根据要求，考虑要把系统放置的大的网络环境（学院网站），利用Dreamweaver 设计合适的页面来链接到所完成的Flash 系统，这样基本就完成了这次课题的要求。3.2 基本框架 此课题要实现工程制图的在线测试，它包含三个大的部分:章节练习、随机练习和模拟考试。试题内容包含理论题和作图题。

9、系统的总体结构如图3.1 所示 图 3.1 系统结构图 理论题 作图题 工程制图在线测试系统 章节练习 随机练习 模拟考试-4-系统设计完成后要嵌入网页中，通过链接实现，结构图如图3.2 所示。图 3.2 在线测试系统示意 试题专区中利用了XML 扩展标记语言形成了数据文件，通过Flash 内部的脚本语现的内容,过程实现如图3.3 所示：图 3.3 各部分间的关系及流程顺序 试 题 界 面 脚本语言 XML 数据 文件 Flash中的 用 于 载入XML 文件 的 动 作 工程制图 自测 系统首页 自测园区 习题模块 网页首页-5-4 系统设计 4.1 文本为主的设计 这块的设计主要是分三个大

10、的部分来分别负责，有总的界面设计、需要加载的外部数据文件和动作脚本文件。界面的设计主要是展示出试题内容、交互按钮以及最后的测评结果等等的信息；需要加载的外部文件是结合了XML 技术，将试题内容和相关信息如题号、选项、正确答案等存放到了XML 文档中，这个文件是独立的数据信息；运行时Flash 中的ActionScript 脚本语言就是界面与外部数据文件的通信桥梁，它将XML 文件中的数据内容解析后存放到数组中并通过界面显示出来。另外所建立的这三个部分的文件是要放在同一目录下的5。4.1.1 XML 数据文档的设计 XML 是一种可扩展的源标记语言，是可以定义其他语言的语言。是一种跨平台传输数据

11、的标准，它拥有一些方法，可以在开发各种应用程序时调用所对应的方法。而且它的结构和语法都比较严谨，容易阅读且不会产生歧义，在需要时可以转换为其他的格式。Flash 拥有处理XML 的能力，XML 对象允许输入和集成任何WEB 上的XML 格式的数据到Flash 中2。因这次课题设计所用的关于XML 语言的知识只是最基本的，不需要使用专门的XML 编辑器，我们可以使用记事本来编写。此次我所用的就以下面介绍的格式编写：7 (1)机械制图中国家标准规定汉字是()A 草体 B 长仿宋体 C 宋体 D 楷体 (2)。A.B.C.D.-6-这个XML 文件中是属于XML 编辑中的格式，是一个文件中的根元素，

12、来保留所有文档的内容。所要添加的内容只要在中间添加就可以了。开头是属于XML 的声明解释，一般在文件中用到中文的话最好有encoding=UTF-8，这样在运行XML 文件时就不会出现乱码现象了。是表示题目内容，是关于题目选项，Key=”是这道题目的答案，每道题目完成后以结束。想要多少题目只要在根元素下创建多少个.就好。值得注意的是因为我们在编辑XML 文件时没有使用专门的编辑器而是记事本，所以在编写完文件后保存是在输入名称后，要以.xml 为文件扩展名并在保存类型中选择 Unicode 或者UTF-8 再保存，这样就生成XML 数据文件了，最后将数据文件存放到建好的文件夹中7。4.1.2 试

13、题界面的设计 首先打开Flash 软件，打开文件新建选择常规选项卡中的新建flash 文档，这样将文档命名保存到数据文件所在的文件夹。然后选择图层1 的第一帧根据自己的设计首先建立一静态文本框输入比如“章节练习”的字样，然后在此图层上加以按钮，以点击进入。具体状态如图4.1 所示：图 4.1 试题界面第一帧布局 接着插入一空白关键帧，也可以根据自己的喜好来创建不同的背景图或者颜色，这一帧主要是用来添加ActionScript 脚本语言来加载外部的数据文件的，此次设计中是用的attachMovie 的方法加载的。另外此时按下Ctrl+F8 键打开创建原件的对话框，命名，比如“question”类

14、型选择影片剪辑，点击确定，此时就打开了此原件的-7-编辑状态，这样点击工具中的文本工具，将其属性更改为动态文本框，在编辑中添加四个动态文本框，同时分别将四个文本框的实例名设为如：t_txt,k1_txt,k2_txt,k3_txt,以便于脚本语言中编辑使用。另外按下Ctrl+F7 打开组件库调出单选按钮Radiobutton组件四个，将四个按钮的实例名分别设置为A_btn,B_btn,C_btn,D_btn,并设置其属性及参数如下图4.2所示 图 4.2 单选按钮的属性设置 这样便完成了question 影片剪辑的创建了，然后回到到场景中，继续图层的编辑。此时要编辑第三帧，还是同前一样选择想要

15、的背景颜色，这时在此帧主要是添加两个按钮，“上一题”与“下一题”，也就是导航按钮，便于做题过程中的翻页。此时可以用组件库中的Button 组件并对其进行属性及参数设置如下图4.3 所示：图 4.3 button 组件的属性及参数设置 以上第三帧的工作也完成了，接下来就是做个结束的界面，以做成绩统计以及返回首页。选中第四帧添加空白关键帧，设置好背景，添加一静态文本框写“结束”或者“成绩统计”的字样，然后在文字下添加一空的动态文本框以做分数显示，另外在此帧上还要添加一按钮，以做完题目返回首页，设置其实例名为replay_btn,第四帧的设置完成如下图4.4 所示：-8-图 4.4 成绩统计界面的设

16、置 此时就已经完成了试题界面的设计了，再一部分便是在Flash 中添加动作语言来导入外部的XML 文本文件以及对页面一些按钮的动作设置。下面来介绍这部分。4.1.3 脚本语言的编辑 脚本语言主要是将外部编辑的文本文件导入到Flash 中以显示出所要表现的内容，主要的就是对XML 文档的解析，设计中主要是通过attachMovie 的方法将XML文档加载到Flash 中。其主要加载代码如下面所示：myxml=new XML();/定义一个XML 对象 myxml.ignoreWhite=true;/忽略xml 文档中的空格 System.useCodepage=true;/一个布尔值，通知Fla

17、sh Player 使用的是Unicode 来解释外部文本文件 myxml.load(lianxixml.xml);载入XML 文件 key_arr=new Array();建立答案数组 t_arr=new Array();建立题目数组 result_arr=new Array();mykey_arr=new Array();myxml.onLoad=function(ss)/判断是否加载成功 if(ss)trace(load XML OK);在flash 中建立Array 数组来完成对操纵数组的访问。并将数据内容存放到数组-9-中。t_arri.question=tti.childNodes

18、0.firstChild;t_arri.k1=tti.childNodes1.firstChild;t_arri.k2=tti.childNodes2.firstChild;t_arri.k3=tti.childNodes3.firstChild;t_arri.k4=tti.childNodes4.firstChild 这里所体现的是对文档中题目内容和选择项的读取。attachMovie(mc,qu,1,_x:30,_y:50);这句是加载的关键，前面所提到的建立的“question”影片剪辑，在库中找到这元件，右键单击找到链接项，选中第一项自动会选中第三项，将标识符改为“mc”或者原名不改只

19、是选中链接项，在用attachMovie时写出相应的标识符即可，这样才能链接上才能正确读取所要表现的内容。大括号里是加载后内容所在的坐标显示。还要添加的便是关于“上一题”和“下一题”的按钮动作，在动作同时还有对选项的一个判断，代码如下形式 next_btn.onRelease=function()if(qu.A_btn.selected=true)mykey_arrv1-1=A;if(qu.B_btn.selected=true)mykey_arrv1-1=B;if(qu.C_btn.selected=true)mykey_arrv1-1=C;if(qu.D_btn.selected=true

20、)mykey_arrv1-1=D;if(v1len)qu.A_btn.selected=false;qu.B_btn.selected=false;qu.C_btn.selected=false;qu.D_btn.selected=false;qu.t_txt.text=t_arrresult_arrv1.question;qu.k1_txt.text=t_arrresult_arrv1.k1;qu.k2_txt.text=t_arrresult_arrv1.k2;qu.k3_txt.text=t_arrresult_arrv1.k3;-10-qu.k4_txt.text=t_arrresul

21、t_arrv1.k4;v1+;else qu.removeMovieClip();nextFrame();这里用到了在试题界面设计时提到到要写的按钮的实例名，设置的要与脚本语言中的相一致，不然运行是不会成功的。最后的代码是关于成绩显示以及运行回去的，在代码中所要设置的就是关于每道题目的分值，以及所选答案与正确答案是否相符合，还有就是总分数的计算方式，通过判断答案自动计算出所做完成后的成绩并显示出来，在最后的页面设置中还有一个关键的按钮，就是回到首页，也就是重新开始。这最后的代码中也设置了所做的答案与系统所给的正确答案的一个对比，不只是知道最后成绩还可以看到自己都是哪一道题目做错了。下面图4.5

22、 便是最后一帧的脚本：图 4.5 结束页面的代码显示 4.1.4 运行结果 到目前的介绍为止，以文本为主的选择题测试系统算是完成了。其运行结果如下图 4.6 所示：-11-图 4.6 运行结果显示 在所有题目做完的最后会是成绩显示部分，并且系统的正确答案会与所做的测试答案有个对比，这样可以很明显的看出测试中到底是哪道题目出现了错误，还有就是在最后页面有个返回按钮，便于重新来过，反复做题巩固练习。4.2 图形选择题为主的设计 这块在方案综述中提到了，因为数据文件的本身问题，编辑中不能将有关图形的选择题目加入，所以选择了另外一种方式来实现这种类型的题目，就是直接用Flash制作，也可以称为为直接制

23、作法，就是利用单选按钮作备选答案选项，利用动态文本对象显示反馈信息。而前面所介绍的是外部文件载入法，最大的优点就是便于修改更新。4.2.1 设计题目 打开flash 文档，在图层1 的第一帧上利用工具中的文本工具，设置属性为静态文本，然后将题目内容输入，将选项也输入，在以后的每一帧点右键选择插入空白关键帧，分别将要显示的题目输入到各帧，有多少题目就用多少帧。如下图4.7 所示：3-12-图 4.7 显示题目选项 4.2.2 设计选项按钮 Ctrl+F7 打开组件库调用Radiobutton 组件四个，放到与选项相对应的地方，这里与前面调用时相比有所不同，没有实例名的设置。但是参数设置中要多一些

24、，尤其是关于groupName 的设置，每一帧上一题，那么每一帧的调用的四个按钮为一组，那么每组的groupName 就要定义不同，如a1ai 或者其他，只要有所区别就行，这为添加脚本时提供便利。参数设置可以根据下图4.8 来进行设置。图 4.8 单选按钮的参数设置 图中的“data”设置的是在选中该按钮时的数据信息，也就是一种判断，一组的按钮的“data”属性肯定只有一个是正确的选项将其设置为“正确”或者“对”，其他的三个设置为错误就可以了，这样在做题过程中选择时会判断其正误。这只是其中一帧的设置，剩下每一帧的题目都按照这样的方式设置即可。-13-此时要选择在界面上合适的位置添加一动态文本框

25、，并将它的实例名设置为“text”，它的作用便和这设置中的“data”属性相关，每选择一项它会显示出你选择的是不是正确的答案，这样就可以知道自己做错了哪些题目。接着再打开组件库调用两个button 组件，作为“下一题”“上一题”的按钮。至此题目的界面设置就算是完成了，如下图4.9 所示：图 4.9 界面效果 4.2.3 脚本语言的编写 在加入选择题目的每一帧上加入stop()的命令，然后给翻页按钮“下一题”添加动作代码如下图4.10 所示：图 4.10 添加脚本动作图“上一题”按钮的代码于此差不多，不再显示。选中该帧，为这一帧添加以下代码：3 flashistListener=new Obje

26、ct();/定义侦听器对象 flashistListener.click=function(evt)/定义侦听器对象的click 事件函数 txt.text=evt.target.selection.data;/将用户单击的那个单选按钮的data值保存在txt中 ;-14-a1.addEventListener(click,flashistListener);/将组名为a1 的按钮注册到侦听器对象 这是关于单选按钮的属性值的判断和显示，这里就用到了groupName 的设置值，以及文本框的实例名，便于识别。4.2.4 运行结果 这样关于涉及图形的选择题的制作也完成了，运行结果如下图4.11 所

27、示：图 4.11 运行效果图 4.3 进入页面的设计 完成了系统中一些需要体现出来的界面设计和编写，还要有个首页的设计也就是系统打开首先呈现出来的一个界面。我所设计的总共分了三个版块：随机练习、章节练习和模拟考试。这三个版块以按钮的形式出现，可以根据自己的喜好制作出来，也可以直接调用button 组件。如下图4.12 所示：-15-图 4.12 首页图展示 这样要为首页的三个按钮添加网络动作来实现跟前面所做的flash 的文件链接，这里我用getURL 来建立链接，它的语句格式为：getURL(url,window,methord)。首先将前面做的flash 动画都存放到电脑中的某一个盘里的新

28、建的文件夹里，自己命名好，这时要把做的flash 动画做【发布设置】，发布后是.swf 文件和.html 文件的形式。通过getURL 链接这两种类型的文件都可以，只要把目标路径填正确就行。现在给首页上三个按钮添加例如下面的代码，如选中“随机练习”按钮，按下F9 打开动作面板添加链接代码：on(release)getURL(File:/F:/实例/随机练习xml.swf);或者是 on(release)getURL(File:/F:/实例/随机练习xml.html);这样当运行时，点击不同的按钮会对应的打开前面已经做好的系统，如下图4.13所示：-16-图 4.13 -17-5 网页设计 网页

29、设计就是针对这次课题的“在线”，要将其发布到学院网站以实现学生能随时登录进行自测，这才是最终的目的。当然Flash 本身也有网页制作的功能，只是完全用Flash 制作网页的话设计过程会很繁琐而且所产生的网页占据的空间也很大。所以 选 择 了 专 业 网 页 制 作 的 工 具：Dreamweaver。它 的 特 点 是 代 码 简 单。使 用Dreamweaver 调用和控制Flash 动画很方便，用Dreamweaver 制作网页，将Flash 动画作为模块嵌入到网页中，这样制作网页方便也可以为页面增添动感11。5.1 基本网页的制作 首先是在Dreamweaver 中制作一网页。因为要实现

30、的系统是要跟学院网站结合起来，所以网页采用了学院网站的图片。页面结构跟学院网站相一致。启 动Dreamweaver，选 择“创 建 新 项 目”下 的“HTML”文 档，这 就 进 入 了Dreamweaver 的工作界面。在正式开始制作网页前，应该先定义一个新网站，以便于利用站点管理器对站点文件进行管理。站点建立时在向导询问是否使用服务器技术时选择否，使用文件选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”单选框，并在下面的文本框中输入本地站点所在的根文件夹。其他设置根据提示和自己的需要选择，这样就完成了站点的创建。要在本地 站点中制作所需要的网页，先在本地站点文件列表中选择

31、也要保存新建文件夹的文件夹，执行“文件/新建文件”菜单命令，创建一个新的网页文件，注意编辑名称时添加文件扩展名比如.htm。双击新建网页文件即可在工作区进行编辑了。先将学院图片插入，如下图5.1 所示：12 图 5.1 网页基本结构-18-所生成代码如下所示：无标题文档 教学管理 毕设双选 精品课程 教育培训 自测园区 选课系统 而后点击自测园区进入另一页面如下图5.2 所示：-19-图 5.2 创建好所需网页，再进行网页的链接以及网页与所做系统之间的链接。选中作为链接要用的图画或文字，在属性栏里有链接栏，打开浏览，选择要链接的网页，按下F12，点击保存，这样两个关联的网页就连在一块

32、了。在链接Flash 动画时，要将做好的系统事先发布成html 或swf 形式，做链接即可。在做网页布局结构时有些基本的代码如下：机械设计自测 电工电子自测 控制工程自测 工程制图自测 链接完成后按下F12 检测运行结果如下图5.3 所示：图 5.3 -21-6 结 论 整个制作的过程主要是Flash 的基本运用，利用Flash 的制作动画和强大的交互功能来实现了以选择题判断题测验为主的系统，它表现出了内容丰富，页面自主化，便于修改和更新信息的特点。这次课题设计主要实现的是关于工程制图选择题和判断题目在线的自我测试，设计中文本部分主要是利用了XML 技术形成了外部的数据文本文件，存储了关于试题

33、的数据信息，然后利用Flash 的动作脚本语言调用其包含的信息，这样在需要的时候想要修改试题内容时不需要重新做系统，只需要修改XML 文档中的内容就好，方便又省事。另外的就是关于图形选择题判断题的设计，主要是利用了Flash 本身，属于直接制作法，它所体现出来的就是制作比较简单，尤其脚本语言部分的编辑很简单，只是关于所用相关按钮的动作设计，简单的判断正误和信息反馈。不过这种方法相比加载外部的数据文件的方法时就存在它的缺陷了，就是想要修改题目内容时只能到源程序中去更改，显得很麻烦且浪费时间。FLASH 所完成的部分是这次课题的核心部分，是这个系统实现的关键，系统的设计完全可以自主化的，突显内容为

34、主，页面的风格为辅，网页设计部分结合了学院网站的风格，与其相一致，这样基本上完成了这次课题的设计。-22-参 考 文 献 1 袁宁.Flash 动画在网页中的应用J.电脑学习.2005(6):13-15 2 周扬.基于Flash_xml 的网络教学平台的设计与实现J.科技信息，2009（13）:445.3 王善增.使用FlashMX2004 制作单项选择题两法J.软件研制,2006（2）：60-63.4 卢卫平.高校教学辅助网站的设计与实现J.上海水产大学学报,2007（4）：404-407.5 徐华.用 Flash 制作单项选择测试题的有效方法J.软件研制,2005(9):1-2.6 黄孙灼

35、.工程制图试题库建设的探索与实践J.闽西职业技术学院学报,2010（1）：108-112.7 张培山.基于XML的 Flash选择题测验模板的研究与实践J.技术与应用,2006(12)69-71.8 高 西林.基于Flash 的工程制图CAI 课件的研究与开发J.西 安工程科技学院学报,2006(6):784-786.9 神龙工作室.FLASH8 完全自学教程M.北京：人民邮电出版社,2007（2）：535-562.10 王 翠 茹.利 用FlashMX 进 行Web 教 学 自 测 系 统 设 计 的 方 法 J.内 蒙 古 科 技 与 经济,2007(16):221-222.11 张 鑫 .基于Dreamweaver 的教学网站设计J.软件导刊（教育技术）,2009(9):63-64.12 神龙工作室.新手做网页精选500 问 M.北京：人民邮电出版社,2004(6):18-20.13 张铭铎.网页设计实验中Dreamweaver 创建使用XSLT 显示XML 数据的页面J.信息与电脑（理论版）,2010(4):62-63.14 罗晋华.用 Flash 设计网上通用教学自测系统.计算机应用J,2002(2)：85.