题库系统ui设计.docx

1、题库系统ui设计 摘要 随着计算机网络的发展，Internet 的应用越来越广泛，现代信息技术的发展，给教育带来了深刻的变革。试题库管理系统作为现代教育技术的组成部分越来越受到重视。界面是直接面对用户的，通过修改题库的UI界面，使得原来的系统更加细腻，操作方便；为了适应不同年龄段的老师作者做了相关的修改，使管理员的操作更加简便，使界面看起来更加简洁，作者针对界面的相关问题做出了版本的升级。 本系统采用Dreamweaver和tomcat开发使得界面的看起来比较清新，同时也使系统的平均响应时间大大减少。此方案具有根据选择的科目和知识点系统自动组卷和人工手动组卷两种方式。 本文从该系统的可行性研究

2、,需求分析，到该系统的详细设计和使用都作了细致的阐述。关键词：题库系统、Dreamweaver、UI界面 Abstract with the development of computer network, the application of Internet, more and more widely, the development of modern information technology, brought profound changes to education. Examination management system as part of the modern educ

3、ation technology is more and more attention. Interface is directly facing the user, by modifying the UI interface of question bank, make the original system more delicate, easy to operate; In order to adapt to different age groups of teachers, the author made relevant changes, enables the administra

4、tor of the operation more convenient, makes the interface looks more concise, the author made a version upgrade for interface related problem. This system adopts the Dreamweaver and tomcat development makes the interface looks fresh, at the same time, it makes the average response time of the system

5、 is greatly reduced. This plan is according to the selection of subjects and knowledge system automatic group volume and manually set in two ways. This article from the system feasibility study, demand analysis, the detailed design of the system and use all has made the detailed elaboration. Keyword

6、s: question bank system, Dreamweaver, UI interface1 绪论1.1 系统开发的背景 试题库管理系统主要研究如何借助计算机提高出题,组卷速度、精度 保证试题的客观、公正、一致、节省组卷时间、减轻教师负担提高工作效率。 随着时代的发展和计算机自动化的进步，各种各样的考试多如牛毛。试卷中包括大量的试题，这无疑增加了出题组卷老师的组卷难度和工作量。如何才能更客观、准确、高效地去评估、检测一分试卷的难易程序与能力分布水平呢。一些教育发达的国家由此建立了不少规模巨大的海量试题库，参加考试的考生数目庞大、次数频繁、还要求每次出题与组卷具有可比性，这样才能用于鉴

7、别和控制试卷的难易分布。学校投入大量的人力、物力到试题的准备、试题的抽取、试卷组织、试卷排版、印刷过程等过程。就在这样的大背景下，为适应这类处理事业的大规模发展，一个高质量的、高效率的试题库管理系统就应运而生。1.2 通用试题库管理系统开发的意义 设计开发通用试题库管理系统的目的主要是为了帮助教师轻松的出一份高质量的试卷，提供一个科学和实用的教学资源管理工具。通用试题库管理系统的重大意义是让教师节约大量的教学工作准备时间，并且拥有更多的时间进行教学研究和对学生进行个性化深入辅导。选择通用试题库管理系统研究设计的意义，是试题库管理系统可以为学校教师举行考试提供方便与快捷的方式，拥有与真实考试同样

8、的题型、组卷等功能。而且，通过JSP、HTML等技术建立具有较高查询效率的试题库系统，使得试卷的自动生成并逐步积累，形成有效的试题库，使试卷管理工作更科学更高效。1.3 UI设计的发展趋势 目前在国内UI还是一个相对陌生的词，即便是一些设计人员也对这个词不太了解。我们经常看到一些招聘广告写着：招聘界面美工、界面美术设计师等等。这表明在国内对UI的理解还停留在美术设计方面，认为UI的工作只是描边画线，缺乏对用户交互的重要性的理解；另一方面在软件开发过程中还存在重技术而不重应用的现象。许多商家认为软件产品的核心是技术，而UI仅仅是次要的辅助，这点在人员的比例与待遇上可以表现出来。 但这不是UI设计

9、真正的价值体现，只是UI设计发展的一个必经过程1.4 系统开发的目标 该项目只要是一个UI界面的版本升级，针对已有的河北农业大学题库管理系统进行相关的UI设计。研究的总体目标是使教师出卷更加方便，管理员的操作更加简洁。而且在这基础上修改了原来的一些缺陷，比如：课程排序问题、查找不方便的问题。1.5 相关的研究工作为了顺利完成题库系统UI的设计与实现，作者在毕业设计期间所做的研究工作如下：1.分析使用者的各方面需求，使用人群。2.研究了各个UI界面的设计，从中发现其优点。3.学习HTML技术，了解TOMCAT的构建，了解了Dreamweaver的使用以及CSS的基础知识。4.仔细分析了相关的UI

10、界面。5.设计了题库系统的UI界面。 2 开发环境及技术2.1开发环境介绍硬件系统：Intel 酷睿i5 2450M、2G以上内存、500G以上硬盘、光驱。软件系统：Windows7版本、Dreamweaver8、tomcat7.0。2.2 HTML开发技术简介在万维网上的一个超媒体文档称之为一个页面（英语：page）。作为一个组织或者个人在万维网上放置开始点的页面称为主页（英语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接）。所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator,英语缩写：URL）指针，通过激活（点击）

11、它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。 超级文本标记语言（英文缩写：HTML）是标准通用标记语言下的一个应用，

12、也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。2.3 Dreamweaver简介Dreamweaver是由美国著名的多媒体软件 Dreamweaver是由美国著名的多媒

13、体软件 开发商Adobe公司（电脑软件公司， Adobe公司 开发商Adobe公司（电脑软件公司，位于美 国的圣何塞）开发的一个“所见即所得” 国的圣何塞）开发的一个“所见即所得”的 可视化网站开发工具，Dreamweaver是 可视化网站开发工具，Dreamweaver是 网页设计三剑客”中的重要成员， “网页设计三剑客”中的重要成员，主要负 责网站的创建与管理、网页板式设计、网页 责网站的创建与管理、网页板式设计、 编辑和排版。 编辑和排版。2.4 Tomcat简介Tomcat是Apache 软件基金会（Apache Software Foundation）的Jakarta 项目中的一个核

14、心项目，由Apache、Sun 和其他一些公司及个人共同开发而成。由于有了Sun 的参与和支持，最新的Servlet 和JSP 规范总是能在Tomcat 中得到体现，Tomcat 5 支持最新的Servlet 2.4 和JSP 2.0 规范。因为Tomcat 技术先进、性能稳定，而且免费，因而深受Java 爱好者的喜爱并得到了部分软件开发商的认可，成为目前比较流行的Web 应用服务器。2.5 JSP技术简介 SP是由SunMicrosystems公司倡导、许多公司参与一起建立的一种动态技术标准。在传统的网页HTML文件（*.htm，*.html）中加入Java程序片段（Scriptlet）和J

15、SP标签，就构成了JSP网页java程序片段可以操纵数据库、重新定向网页以及发送E-mail等，实现建立动态网站所需要的功能。所有程序操作都在服务器端执行，网络上传送给客户端的仅是得到的结果，这样大大降低了对客户浏览器的要求，即使客户浏览器端不支持Java，也可以访问JSP网页。JSP全名为java server page，其根本是一个简化的Servlet设计，他实现了Html语法中的java扩张（以 形式）。JSP与Servlet一样，是在服务器端执行的，通常返回给客户端的就是一个HTML文本，因此客户端只要有浏览器就能浏览。Web服务器在遇到访问JSP网页的请求时，首先执行其中的程序段，然

16、后将执行结果连同JSP文件中的HTML代码一起返回给客户端。插入的Java程序段可以操作数据库、重新定向网页等，以实现建立动态网页所需要的功能。JSP技术使用Java编程语言编写类XML的tags和scriptlets，来封装产生动态网页的处理逻辑。网页还能通过tags和scriptlets访问存在于服务端的资源的应用逻辑。JSP将网页逻辑与网页设计的显示分离，支持可重用的基于组件的设计，使基于Web的应用程序的开发变得迅速和容易。 JSP(JavaServer Pages)是一种动态页面技术，它的主要目的是将表示逻辑从Servlet中分离出来。JSP页面由HTML代码和嵌入其中的Java代码

17、所组成。服务器在页面被客户端请求以后对这些Java代码进行处理，然后将生成的HTML页面返回给客户端的浏览器。Java Servlet是JSP的技术基础，而且大型的Web应用程序的开发需要Java Servlet和JSP配合才能完成。JSP具备了Java技术的简单易用，完全的面向对象，具有平台无关性且安全可靠，主要面向因特网的所有特点。3 系统功能分析与设计方法3.1系统功能分析根据河北农业大学题库管理系统的相关信息，作者发现一些有待升级的地方。对于题库系统的UI设计有：第一部分：课程浏览页面。原有的页面可以实现删除课程信息，但是当点击删除按钮以后显示的是 “确定删除该课程吗？” 当实际操作的

18、时候用户可能忘记自己选的是哪门课程，要是再确定信息就要点取消，这样浪费时间，而且管理员的操作量也比较大。所以作者认为该页面存在一定的问题，我尝试给与修改。第二部分：试题维护页面。试题维护，里面的课程信息相比比较多，有1049个知识点，而且不是按照顺序排列的，当用户需要修改或者浏览该试题的话，需要查找很长时间，页面的字体很紧凑，长时间的工作容易产生疲劳。根据相关问题，我尝试修改。第三部分：知识点浏览页面。知识点浏览页面同样有信息量大这一特征，同样存在不存在排序的问题，页面上有查找功能，但是我们习惯课本式的目录，对于同一门课程的相关知识点，我想做出相关修改3.2系统功能的设计方法第一部分：课程浏览

19、页面。根据页面点击“删除课程信息”按钮出现“确定要删除该课程吗？”的问题，我做出的修改是：当用户点击该按钮时，返回用户的是“确定删除XX课程吗？”这样就能让用户清楚的了知道自己是否要删除该课程了。“修改课程”按钮也是同样的设计。第二部分：试题维护页面。试题维护页面体现出来的问题是信息量大，查找不容易。修改、浏览消耗用户大量的时间。根据这个缺点我做出的修改是：对知识点名称、题型名称、重点等级、参考分数、试题性质、难度、实体精确描述、当前状态这些表头添加效果，效果就是当用户点击该表头的时候，表头下的一列数据会自动排列，默认是升序，再次点击是降序。这样方便用户的操作，节省大量的时间。第三部分：课程知

20、识点浏览页面。对于课程在知识点浏览，同样存在信息量大的问题，我参照教科书的目录，做出了如下修改： 针对知识点名称如：绪论 我对绪论添加一个动作，当点击“绪论”的时候，可以展开绪论的所有章节。其章也是同样的效果。这样修改使用户操作更有目的性。同样节省了时间，后台的管理员也没有那么大的操作量。4 功能的实现4.1 课程浏览的UI设计 此操作可以实现的是：以“成本管理会计”课程为例点击“删除课程信息”按钮出现的是“确认删除成本管理会计吗？”而不是“确认删除该课程吗？”并且光标默认在取消的按钮上，这样就防止了一些连带操作，不会出现点击“删除课程信息”时不注意按了回车键，导致课程被误删。 图 4.1 图

21、 4.1-a 图 4.1-b实现代码： function validate(name) if (confirm(确认要删除 + name + 吗？) else return false; 这是在函数中做出的修改。3 成本管理会计  课程描述暂无 根据要求，作者在这里写出了“成本管理会计”修改的代码。实现了点击“删除课程信息”按钮出现的忘记已选课程和连带操作导致的按回车按钮直接删除课程的问题。4.2 试题维护页面的UI设计 由于修改的表头比较多，我就以“难度”这一列为例子。如图4.2-1 原来版本的表头是固定的，由于课程比较多用户查找比较繁琐。 通过设计，此操作实现了点击“难度”这一表

22、头，难度这一列可以对难度等级进行升序、降序排列。图4.2-2 大大节省了查找的时间。 图 4.2-1 图 4.2-2实现代码：/开始排序 num 根据第几列排序 aord 逆序还是顺序 startArray:function(aord,num) var afterSort = this.sortMethod(this.T2Arr,aord,num);/排序后的二维数组传到排序方法中去 this.array2Td(num,afterSort);/输出 , /将受影响的行和列转换成二维数组 _td2Array:function() var arr=; for(var i=(this.startRo

23、w-1),l=0;i(this.endRow);i+,l+) arrl=; for(var n=0;nthis.rowsi.cells.length;n+) arrl.push(this.rowsi.cellsn.innerHTML); return arr; , /根据排序后的二维数组来输出相应的行和列的 innerHTML array2Td:function(num,arr) this.colClassSet(num,this.selectClass); for(var i= (this.startRow-1),l=0;i(this.endRow);i+,l+) for(var n=0;n

24、this.Tags.length;n+) this.rowsi.cellsn.innerHTML = arrln; , /传进来一个二维数组，根据二维数组的子项中的w项排序，再返回排序后的二维数组 sortMethod:function(arr,aord,w) /var effectCol = this.getColByNum(whichCol); arr.sort(function(a,b) x = killHTML(aw); y = killHTML(bw); x = x.replace(/,/g,); y = y.replace(/,/g,); switch (isNaN(x) case

25、 false: return Number(x) - Number(y); break; case true: return x.localeCompare(y); break; ); arr = aord=0?arr:arr.reverse(); return arr; /*-*/ function addEventListener(o,type,fn) if(o.attachEvent)o.attachEvent(on+type,fn) else if(o.addEventListener)o.addEventListener(type,fn,false) elseoon+type = f

26、n; function hasClass(element, className) var reg = new RegExp(s|)+className+(s|$); return element.className.match(reg); function addClass(element, className) if (!this.hasClass(element, className) element.className += +className; function removeClass(element, className) if (hasClass(element, classNa

27、me) var reg = new RegExp(s|)+className+(s|$); element.className = element.className.replace(reg, ); var Bind = function(object, fun) return function() return fun.apply(object, arguments); /去掉所有的html标记 function killHTML(str) return str.replace(/+/g,); 以上是对表头实现点击以后对数据排序的代码。4.3 课程知识点浏览页面的UI设计 之前版本的知识点浏

28、览是把所有的知识点全部展开，这样容易产生视觉疲劳，而且容易出现错误，因为每章的知识点名称都相似。本功能实现的是点击章节名称，可以在下方展开和收起该章节的详细知识点，如图4.3-1 类似教科书的目录，用户可以单独的查找相关课程。 如图 4.3-1 如图 4.3-2 此操作实现的是表头章节的关于旗下章节的展开和收起。类似教科书的目录。实现代码：- / $(td:gt(4) 选择td元素中序号大于4的所有td元素 /$(td:ll(4) 选择td元素中序号小于4的所有的td元素 $(function () $(.child1).hide(); $(#parent1).toggle(function () $(.child1).fadeIn(); , function () $(.child1).fadeOut(); ); $(.child2).hide(); $(#parent2).toggle(function () $(.child2).fadeIn(); , function () $(.child2).fadeOut(); ); $(.child3).hide(); $(#parent3).toggle(function () $(.child3).fadeIn(); , function (