网络在线考试系统设计与实现前端Word文档下载推荐.docx
- 文档编号:17361134
- 上传时间:2022-12-01
- 格式:DOCX
- 页数:31
- 大小:3.59MB
网络在线考试系统设计与实现前端Word文档下载推荐.docx
《网络在线考试系统设计与实现前端Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《网络在线考试系统设计与实现前端Word文档下载推荐.docx(31页珍藏版)》请在冰豆网上搜索。
Bootstrap;
Css;
Jquery
第一章绪论
1.1研究背景和意义
互联网时代的今天,我们通过网络完成了很多以前想都不敢想的事情,网上购物、移动支付、外卖点餐等等极大的方便了我们的生活。
我们会发现这些基于互联网技术的生活类系统帮助我们更好的去生活,提高了我们的幸福指数。
但是,我们还会发现,对于学习类的系统却比较少。
以教育考试为例,目前还是以线下考试为主。
当然,也存在不少线上考试的系统存在,这些系统可以帮助学生完成线上考试,不再受到时间和空间的限制。
同时,线上考试不再使用纸张,也不在占用考务人员。
减少资源浪费的同时,也极大的减少了人员的浪费。
本文所研究的在线考试系统也是一种基于互联网技术的学习类系统。
和其他在线系统类似,可以帮助学校或者教育机构完成学生的线上考试。
所不同的是,该系统不仅仅是一个在线考试系统,他还提供了题库查询和知识交流的功能。
使参与考试的学习不仅仅只完成考试,还在完成考试的同时梳理出了知识点,帮助学生更好的掌握知识。
本次设计的在线考试系统中,前端页面的设计是一个很关键的因素。
他是直接和用户交互的部分,是本系统的一个脸面。
可以说,前端页面设计的好坏直接关系到本系统是否能够取得成功。
1.2国内外研究现状
在很多年以前,西方国家就已经在研究在线教育系统并且开始慢慢使用。
到目前为止,西方的高校已经在使用在线考试系统完成一个课程的考试,比如一些公共课的考试。
对于在线考试系统,国外做的比较早的是IBM。
早在1958年,IBM公司的沃斯顿研究中心就已经开发出简单的考试系统。
经过多年的发展与优化,该考试系统已经得到了广泛的使用。
后来,出现了大量的竞争者,他们都将目光定位在了在线考试系统上面。
竞争带来了行业的高速发展,教育及在线考试系统得到了迅猛发展,越来越多的系统和应用被开发出来被广大大学或者教育机构使用,极大的提高了工作效率,减少了资源浪费。
在这一系列的软件和应用中,美国思而文学习系统有限公司和美国教育考试服务中心所研发的教育考试系统称得上是佼佼者。
另外,TomExam和PPExam这类开源免费考试系统的出现给在线考试系统行业增添了新的色彩。
对比于国外,国内的在线考试系统起步比较晚,也比较慢。
不过,随着近几年国内科技力量的崛起以及政府资源的支持,国内诸多高校已经在大力提高自己的信息化率,课程管理和自动排课系统慢慢的得到了应用。
另外,许多教育机构也拥有自己的教务系统,很多高校在平时的教学当中快速的将课程管理系统融入其中。
但是,课程的期末考试这块大都使用线下笔试的形式进行,没有发现哪一所大学拥有一个正规的在线考试管理系统。
这不同于其他大多数的银行、教育等机构。
不过,随着近几年的互联网技术发展,特别是今年新冠肺炎疫情的突发,相信在线教育和在线考试必定会成为今后教育的发展趋势,成为今后教育的发展主流。
1.3论文研究内容
在线考试系统是一个教育类的在线系统,该系统的主要研究对象为在线考试。
该系统基于互联网,通过服务器部署的形式将该系统部署在服务器,其他接入互联网的电脑则可以通过浏览器客户端的形式不受时间和空间的限制,随时随地的访问系统提供的服务。
基于互联网的在线考试系统的前端页面主要会设计如下几个模块,分别为:
在线考试、题库查询、知识点交流、用户管理、考试管理、题目管理、分数管理、留言及评价管理。
通过分析内容的业务逻辑模块,设计出相关的页面模型。
最后实现了一个在线考试管理系统,该系统使用idea作为开发工具,前端部分基于html5和javascript,使用jquery和bootstrap框架进行快速开发最后实现了将设计模型向网页模型的转化。
该系统采用BS架构实现了对于在线考试系统的可视化管理,前端模块的设计符合用户操作习惯,提供良好的用户交互模型。
第二章相关知识概述
本章主要进行基础理论知识的说明,主要包括html5、css、javascript、jquery框架以及bootstrap框架。
为下一章进行页面模型的构造提供理论基础。
2.1Html5
HTML5是超文本传输协议的最新版本。
该版本是在2014年10月,由W3C参与引导并制定的。
制定该最新版本协议的原因是由于互联网技术的高速发展,给网络带来了挑战,旧的协议已经越来越不适应当今时代的网络需求。
本协议期望能够代替老的版本,给新的互联网时代注入新鲜血液,为互联网时代的到来提供足够充分的底层技术支撑。
本次标准协议添加了很多标签,特别是对于音频视频的标签知识,算得上是一次重大的突破。
除此之外,本次协议修正了很多旧协议存在问题的组件,重新定义和标准化了一下元素。
比如<
a>
、<
cite>
和<
menu>
。
总之,新标签的加入和旧标签的优化修改是本次新协议的主题。
可以将本次协议的制定当成一次系统的升级,升级之后的系统变的更加的高效,更加的稳定,更加的好用。
当然,新系统肯定存在诸多的不确定性,html的前景是广阔的,但是稳定性还有待时间的考察。
2.2CSS
CSS是一种统一的样式表,主要是为HTML,即超文本传输协议服务。
该样式表又称为层叠式样式表,他的出现时为了美化HTML。
可以把HTML理解成毛坯房,因为CSS的加入,使得毛坯变成了精装。
该样式表的定义和维护同样是由W3C负责。
CSS的语法目前也已经被绝大多数的浏览器所支持,可以稳定的运行在任何浏览器内。
2.3JavaScript
JavaScript是一种运行的客户端的脚本语言,他的出现和互联网的高速发展是密不可分的,可以说互联网的发展造就了他并成全了他。
JavaScript支持面向对象编程,并且提供了一系列的语法来帮助开发者操作数组、日期、文本以及正则表达式。
目前,他已经被世界上绝大多数的浏览器完美支持,世界上绝大部分的网站也都在使用JavaScript。
虽然都可以支持面向对象编程,并且名字和Java语言有很大的相似之处。
但是,本质上来说这两门语言存在着很大的差别。
Java更多应用于服务端,可有处理负责的业务逻辑以及IO流。
而JavaScript则更多的应用于客户端,被浏览器所解释及运行,可以迅速的处理与用户的交互,用来提高用户的用户体验。
当然,近几年互联网技术的发展,使得JavaScript得到了越来越多开发者的拥护。
近几年,NodeJS的出现使得JavaScript在探索一些服务端的编程应用场景。
另外,vue、react及angularJs的出现,使得客户端的编程更加的锋利,JavaScript的下一个春天不远了。
2.4JQuery
jQuery可以说是一套JavaScript的封装,他的存在使得Html和JavaScript之间的操作更加的方便和快捷。
jQuery封装了很多高效的方法,可以帮助开发者迅速准确的操作Html元素。
该框架是在2006年1月发布的,距离现在已经过去了14年之久,不过,到目前为止全球大部分的网站依然在使用这一种高效的框架。
可见,他的稳定性和高效性是不容置疑的。
2.5Bootstrap
Bootstrap和jQuery类似,如果说jQuery是一个JavaScript框架,那么Bootstrap就可以称得上是一个CSS框架。
他的最终目的是使得开发者即便不具备美术功底也能创建出一个符合大众审美的网站。
它提供了一系列的web插件,可以帮助开发者迅速的开发出美观的界面。
2.6本章小结
本章介绍了一些基础知识,基于这些基础知识才可以完成整个在线考试系统。
其中,html5、css、javascript的基础知识介绍为下一章进行界面模型的设计提供理论基础;
jquery框架和bootstrap框架的基础知识为构建一个可视化的系统提供工具支撑。
第三章界面模型设计
本章在前一章提供的理论基础上,基于jquery和bootstrap框架进行界面模型的设计,并对所建立的模型进行了解释说明。
并对注册登录、首页面、在线考试页面、题库查询页面、知识点交流页面即后台管理页面进行整体设计,为下一章系统的设计与实现中需要解决的核心问题提供了模型和思路。
3.1首页面
3.1.1描述说明
首页面主要提供给考试人员使用,一般针对学生。
学生用户可以通过该页面进入在线考试,题库查询及知识点交流等模块。
整体上而言,该页面是一个统一入口页面。
3.1.2效果图
图3.1首页面模型
如图3.1,设计描述为:
整体上通过大背景的展示形式,在最上角进行功能的展示,其中左上角主要展示前端的整体功能,包括:
在线考试、题库查询和讨论区。
右上角主要实现用户的登录和个人信息的展示。
3.2在线考试
3.2.1描述说明
在线考试是本系统主要的实现功能,该功能主要协助参与考试者完成整个考试过程,该功能需要展示所有考试信息,考试根据考试状态区分是否已达到考试时间,从而指引考生完成考试的启动过程。
3.2.2效果图
图3.2在线考试模型
图3.3在线考试模型
如图3.2-3.3,在线考试模型可描述为:
首页面设计成列表展示的形式,将整体的考试信息进行展示,并进行考试状态的区分,只有达到了考试时间,才可以进行考试,最上面展示一条倒计时条,表示当前需要进行最新一门考试剩余时间。
可以给考生警示,对考试动态有一个全面的把握。
考试页面设计成了左右模式,其中左边主要展示的是当前答题的详细信息。
包括题目的选项等信息,考生可以在此处进行题目的做答。
右边则展示的是学生的基本信息:
学生的学号、姓名以及当前考试剩余的做答时间;
另外在右边还会显示当前试卷的详情。
包括当前作答的是第几题,一共有多少题。
已经作答的题和还未作答的题。
3.3题库中心
3.3.1描述说明
题库中心主要是展示当前系统的所有题库,并且可以根据用户的选择展示不同的题库所对应的题目,选择题目则可以查询题目的详细信息。
3.3.2效果图
图3.3题库中心模型
图3.4题库中心模型
图3.5题目详情模型
如图3.3-3.5,题库中心模型分为三个部分,分别为题库列表、题目列表和题目详情。
题库列表设计为图片墙的形式,每一个题库都对应着题库图片,在图片的下面显示图库的名称,创建人以及题目的数量。
题目列表则采用列表的形式进行展示,展示题目的简略信息。
题目详情展示题目的详细信息。
3.4知识交流
3.4.1描述说明
知识交流为一个简单论坛的形式,可以在该模块进行发帖,发表对于某一知识的看法。
发帖之后,其他学生则可以对该知识帖子发表评论,以论坛的形式进行知识交流。
3.4.2效果图
图3.6知识交流模型
图3.7知识交流模型
如图3.6-3.7,知识交流模型设计为左右结构,左边为主要的信息区。
信息区分为上下结构,最上面的部分展示的是知识类型,下面则以列表的形式展示知识。
知识详情则可以展示知识帖子的详细信息,同时展示其他学生的评论信息及回复信息。
3.5登录
3.5.1描述说明
登录模块为用户提供登录窗口,可以通过该模型实现用户的登录。
3.5.2效果图
图3.5登录模型
登录模型设计成了弹框的形式,通过弹框,以及底层蒙版的形式展示登录框,引导客户进行信息的输入与登录。
3.6本章小结
本章主要是对整个在线考试系统关键界面模型的设计,特别是对于前端展示页面,这些页面直接关系到用户的体验度,是整个系统的核心,关系整个系统的成功与否。
第四章系统设计与实现
本章主要进行在线考试系统的整体设计说明。
4.1系统总体架构
图4.1系统总体架构图
图4.1所示即为系统的总体架构设计图,分为四个主要层次,分别为应用服务层、中间服务层、业务层以及数据存储层。
其中,应用服务层即我们的展示页面,也是本次重点研究的地方。
采用h5+bootstrap技术进行代码开发,同时会应用到jquery框架的支持,帮助我们迅速的进行页面元素的选择,同时借助jquery提供的ajax请求方法接口,能够快速方便的实现前后端信息的交互。
中间服务层则基于ssm框架,即spring、springmvc、mybatis三大框架的整合。
整合之后,无论是对外提供接口还是数据库的操作都变的更加的方便和快捷。
业务层则主要涉及本次系统的业务逻辑处理,主要分为用户管理、考试管理、题目管理、课程管理、成绩管理、评论管理、在线考试、题库查询以及知识交流。
数据存储层则主要进行数据的持久化,在此选择mysql作为数据仓库,redis作为缓存数据库。
4.2系统功能设计
经过对需求进行整体分析,设计系统功能如下:
图4.2获取系统功能图
如图4.2所示,整个系统设计为十二大模块,分别为用户管理、课程管理、帖子管理、评论管理、系统登录、密码修改、在线考试、题库查询、题目管理、知识交流和成绩管理。
区分三种角色,分别为管理员、学生和教师。
不同的角色对应不同的功能。
4.3系统功能实现
4.3.1在线考试
学生用户可以通过老师在后台维护的学生账号和密码实现账号的登录,登录以后可以通过在线考试功能进行在线考试。
考试分为三种状态:
未开始、进行中和已结束。
考生只可以参见进行中的考试,进行考试的页面分为两个部分,左边部分为作答区域,右边部分为试卷整体答题情况,可以看到当前回答的是第几题,已经答了多少题,未答多少题等等。
答题完成会提示交卷,答题内容进入后台等待评分和确认。
实现效果图如下图4.3-4.5所示:
图4.3在线考试图
图4.4考试作答图
图4.5考试交卷图
4.3.2题库查询
学生用户可以通过老师在后台维护的学生账号和密码实现账号的登录,登录以后可以通过题库查询功能进行题目的查询和学习。
其中,题库按照课程进行区分,不同的课程对应不同的题库,学生可以选择不同的题库进行不同学科知识的查看和学习。
实现效果图如图4.6-4.8所示:
图4.6题库中心图
图4.7题库详情图
图4.8题目详情图
4.3.3知识交流
学生用户可以通过老师在后台维护的学生账号和密码实现账号的登录,登录以后可以通过讨论区功能进行知识的交流。
实现效果如图4.9-4.11所示:
图4.9讨论区首页图
图4.10发帖图
图4.11查看知识贴内容图
4.3.4用户管理
管理员用户可以通过账号和密码实现账号的登录,登录以后可以通过用户管理功能进行用户信息的增加、修改、删除和查询。
其中,管理员可以通过修改用户角色的模式来控制用户的权限。
实现效果如图4.12-4.14所示:
图4.12用户查询图
图4.13用户添加图
图4.14用户修改图
4.3.5考试管理
老师用户可以通过账号和密码实现账号的登录,登录以后可以通过考试管理功能进行考试信息的增加、修改、删除和查询。
该考试权限只要老师才有,管理员不能进行考试信息的维护。
新增考试的时候,需要输入考试的开始时间和结束时间,学生只有在考试时间范围内才能参加并进行考试。
查看试题则可以实现考试内容的预览。
效果图如图4.15-4.18所示:
图4.15考试查询图
图4.16考试新增图
图4.17考试修改图
图4.18考试预览图
4.3.6题目管理
老师或者管理员用户可以通过账号和密码实现账号的登录,登录以后可以通过题目管理功能进行题目的增加、修改、删除和查询。
其中,题目的类型分为四种,分别为单选、多选、判断和填空。
题目的难度分为五个等级,分别代表五颗星星,其中三星以下为普通题,三星以上则表示困难题目。
题目新增的时候需要选择当前新增题目所属的课程。
实现效果图如图4.19-4.21所示:
图4.19题目查询图
图4.20题目新增图
图4.21题目修改图
4.3.7题库管理
老师或者管理员用户可以通过账号和密码实现账号的登录,登录以后可以通过题库管理功能进行题库的增加、修改、删除和查询。
实现效果如图4.22-4.24所示:
图4.22题库查询图
图4.23题库新增图
图4.24题库修改图
4.3.8成绩管理
老师用户可以通过账号和密码实现账号的登录,登录以后可以通过成绩管理功能进行成绩的查询。
其中,选择题会自动进行评分。
主观题(填空题)需要进行手动批卷。
实现效果图如图4.25-4.26所示:
图4.25考试选择图
图4.26查看成绩图
4.3.9发帖管理
管理员用户可以通过账号和密码实现账号的登录,登录以后可以通过发帖管理功能进行发帖信息的查询和删除。
实现效果图如图4.27所示:
图4.27发帖信息查询图
4.3.10评论管理
管理员用户可以通过账号和密码实现账号的登录,登录以后可以通过评论管理功能进行评论信息的查询和删除。
实现效果图如图4.30所示:
图4.30评论信息查询图
4.3.11个人中心
学生用户可以通过老师在后台维护的学生账号和密码实现账号的登录,登录以后可以通过个人中心功能进行个人信息的查看。
其中,个人信息模块只要实现个人信息的查看和修改。
更改密码模块只要实现个人密码的修改。
考试记录主要进行个人考试信息的查询,可以查看自己参与的所有考试的考试得分以及考试排
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网络 在线 考试 系统 设计 实现 前端