网络在线考试系统设计与实现(前端).doc
《网络在线考试系统设计与实现(前端).doc》由会员分享,可在线阅读,更多相关《网络在线考试系统设计与实现(前端).doc(37页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、摘 要随着计算机和网络技术的快速发展,我们进入了互联网时代。借助于互联网技术,很多存在于想象中的事情正慢慢变为现实。互联网时代的来临,给我们的生活带来了便利。2020年是祸福相依的开始,由于一月份的新冠疫情导致全国人民自我封闭家中,工厂停工,学校停课。面对这场突如其来的灾难很多人的生活习惯发生了颠覆性的改变,人们开始尝试之前从未尝试过的生活方式,体验从未体验的生活。网上课程以及在线考试便是这其中最重要的组成部分。论文首先介绍了基本概念和基本原理,主要包括Html5技术、javascript技术、css技术以及bootstrap框架。之后针对在线考试系统,做出了相关页面设计,结合在线考试过程中的
2、实际业务,设计出符合用户习惯,用户体验度相对比较高的前端设计。最后本文使用bootstrap框架编写了一个在线考试管理系统,该系统基于bootstrap框架、jquery框架,使用idea作为开发工具,mysql作为数据存储仓库,提供对于在线管理系统可视化的信息管理。该系统在提供基本数据维护界面的同时,还提供了面向学生端的考试界面,以网站的形式对用户提供高效服务。同时,在提供基本的在线考试功能之外,该系统还提供题库在线浏览学习及知识交流功能,让广大学生不仅仅是在考试,同时还搭建了考试周边的学习交流平台,从而能真正的通过考试学习到知识。关键词:html5;bootstrap;css;jquery
3、 AbstractWith the rapid development of computer and network technology, we have entered the Internet era. With the help of Internet technology, many imaginary things are gradually becoming reality. The advent of the Internet era has brought convenience to our life.The year 2020 is the beginning of m
4、utual dependence. The new epidemic in January led to the self closing of the peoples homes, the shutdown of factories and the suspension of schools. In the face of this sudden disaster, many peoples living habits have changed dramatically. People begin to try life style that they have never tried be
5、fore and experience life that they have never experienced before. Online courses and online examinations are the most important components.Firstly, this paper introduces the basic concepts and principles, including HTML 5 technology, javascript technology, CSS technology and bootstrap framework. The
6、n, for the online examination system, made the relevant page design, combined with the actual business in the online examination process, designed a front-end design that conforms to the user habits and has relatively high user experience.Finally, this paper uses bootstrap framework to write an onli
7、ne examination management system, which is based on bootstrap framework, jQuery framework, using idea as the development tool, MySQL as the data storage warehouse to provide visual information management for the online management system. The system not only provides the basic data maintenance interf
8、ace, but also provides the examination interface for students, which provides efficient services to users in the form of website. At the same time, in addition to providing the basic online examination function, the system also provides the online browsing learning and knowledge exchange function of
9、 the question bank, so that the majority of students are not only in the examination, but also build a learning exchange platform around the examination, so that they can really learn knowledge through the examination.Key words: Html5; Bootstrap; Css; Jquery 目 录第一章 绪论11.1研究背景和意义11.2 国内外研究现状11.3 论文研究
10、内容2第二章 相关知识概述32.1 Html532.2 CSS32.3 JavaScript32.4 JQuery42.5 Bootstrap42.6 本章小结4第三章 界面模型设计53.1 首页面53.1.1 描述说明53.1.2 效果图53.2 在线考试63.2.1 描述说明63.2.2 效果图63.3 题库中心73.3.1 描述说明73.3.2 效果图73.4 知识交流93.4.1 描述说明93.4.2 效果图93.5 登录103.5.1 描述说明103.5.2 效果图103.6 本章小结10第四章 系统设计与实现114.1 系统总体架构114.2 系统功能设计124.3 系统功能实现1
11、34.3.1 在线考试134.3.2 题库查询144.3.3 知识交流154.3.4 用户管理164.3.5 考试管理184.3.6 题目管理194.3.7 题库管理214.3.8 成绩管理224.3.9 发帖管理234.3.10 评论管理234.3.11 个人中心244.4 本章小结26第五章 系统测试与分析275.1 系统测试275.2 结果分析285.3本章小结28第六章 结论29参 考 文 献30致 谢31广东东软学院本科生毕业设计(论文)第一章 绪论1.1研究背景和意义互联网时代的今天,我们通过网络完成了很多以前想都不敢想的事情,网上购物、移动支付、外卖点餐等等极大的方便了我们的生活
12、。我们会发现这些基于互联网技术的生活类系统帮助我们更好的去生活,提高了我们的幸福指数。但是,我们还会发现,对于学习类的系统却比较少。以教育考试为例,目前还是以线下考试为主。当然,也存在不少线上考试的系统存在,这些系统可以帮助学生完成线上考试,不再受到时间和空间的限制。同时,线上考试不再使用纸张,也不在占用考务人员。减少资源浪费的同时,也极大的减少了人员的浪费。本文所研究的在线考试系统也是一种基于互联网技术的学习类系统。和其他在线系统类似,可以帮助学校或者教育机构完成学生的线上考试。所不同的是,该系统不仅仅是一个在线考试系统,他还提供了题库查询和知识交流的功能。使参与考试的学习不仅仅只完成考试,
13、还在完成考试的同时梳理出了知识点,帮助学生更好的掌握知识。本次设计的在线考试系统中,前端页面的设计是一个很关键的因素。他是直接和用户交互的部分,是本系统的一个脸面。可以说,前端页面设计的好坏直接关系到本系统是否能够取得成功。1.2 国内外研究现状在很多年以前,西方国家就已经在研究在线教育系统并且开始慢慢使用。到目前为止,西方的高校已经在使用在线考试系统完成一个课程的考试,比如一些公共课的考试。对于在线考试系统,国外做的比较早的是IBM。早在1958年,IBM公司的沃斯顿研究中心就已经开发出简单的考试系统。经过多年的发展与优化,该考试系统已经得到了广泛的使用。后来,出现了大量的竞争者,他们都将目
14、光定位在了在线考试系统上面。竞争带来了行业的高速发展,教育及在线考试系统得到了迅猛发展,越来越多的系统和应用被开发出来被广大大学或者教育机构使用,极大的提高了工作效率,减少了资源浪费。在这一系列的软件和应用中,美国思而文学习系统有限公司和美国教育考试服务中心所研发的教育考试系统称得上是佼佼者。另外,TomExam和PPExam这类开源免费考试系统的出现给在线考试系统行业增添了新的色彩。对比于国外,国内的在线考试系统起步比较晚,也比较慢。不过,随着近几年国内科技力量的崛起以及政府资源的支持,国内诸多高校已经在大力提高自己的信息化率,课程管理和自动排课系统慢慢的得到了应用。另外,许多教育机构也拥有
15、自己的教务系统,很多高校在平时的教学当中快速的将课程管理系统融入其中。但是,课程的期末考试这块大都使用线下笔试的形式进行,没有发现哪一所大学拥有一个正规的在线考试管理系统。这不同于其他大多数的银行、教育等机构。不过,随着近几年的互联网技术发展,特别是今年新冠肺炎疫情的突发,相信在线教育和在线考试必定会成为今后教育的发展趋势,成为今后教育的发展主流。1.3 论文研究内容在线考试系统是一个教育类的在线系统,该系统的主要研究对象为在线考试。该系统基于互联网,通过服务器部署的形式将该系统部署在服务器,其他接入互联网的电脑则可以通过浏览器客户端的形式不受时间和空间的限制,随时随地的访问系统提供的服务。基
16、于互联网的在线考试系统的前端页面主要会设计如下几个模块,分别为:在线考试、题库查询、知识点交流、用户管理、考试管理、题目管理、分数管理、留言及评价管理。通过分析内容的业务逻辑模块,设计出相关的页面模型。最后实现了一个在线考试管理系统,该系统使用idea作为开发工具,前端部分基于html5和javascript,使用jquery和bootstrap框架进行快速开发最后实现了将设计模型向网页模型的转化。该系统采用BS架构实现了对于在线考试系统的可视化管理,前端模块的设计符合用户操作习惯,提供良好的用户交互模型。3131第二章 相关知识概述本章主要进行基础理论知识的说明,主要包括html5、css、
17、javascript、jquery框架以及bootstrap框架。为下一章进行页面模型的构造提供理论基础。2.1 Html5HTML5是超文本传输协议的最新版本。该版本是在2014年10月,由W3C参与引导并制定的。制定该最新版本协议的原因是由于互联网技术的高速发展,给网络带来了挑战,旧的协议已经越来越不适应当今时代的网络需求。本协议期望能够代替老的版本,给新的互联网时代注入新鲜血液,为互联网时代的到来提供足够充分的底层技术支撑。本次标准协议添加了很多标签,特别是对于音频视频的标签知识,算得上是一次重大的突破。除此之外,本次协议修正了很多旧协议存在问题的组件,重新定义和标准化了一下元素。比如、
18、和。总之,新标签的加入和旧标签的优化修改是本次新协议的主题。可以将本次协议的制定当成一次系统的升级,升级之后的系统变的更加的高效,更加的稳定,更加的好用。当然,新系统肯定存在诸多的不确定性,html的前景是广阔的,但是稳定性还有待时间的考察。2.2 CSSCSS是一种统一的样式表,主要是为HTML,即超文本传输协议服务。该样式表又称为层叠式样式表,他的出现时为了美化HTML。可以把HTML理解成毛坯房,因为CSS的加入,使得毛坯变成了精装。该样式表的定义和维护同样是由W3C负责。CSS的语法目前也已经被绝大多数的浏览器所支持,可以稳定的运行在任何浏览器内。2.3 JavaScriptJavaS
19、cript是一种运行的客户端的脚本语言,他的出现和互联网的高速发展是密不可分的,可以说互联网的发展造就了他并成全了他。JavaScript支持面向对象编程,并且提供了一系列的语法来帮助开发者操作数组、日期、文本以及正则表达式。目前,他已经被世界上绝大多数的浏览器完美支持,世界上绝大部分的网站也都在使用JavaScript。虽然都可以支持面向对象编程,并且名字和Java语言有很大的相似之处。但是,本质上来说这两门语言存在着很大的差别。Java更多应用于服务端,可有处理负责的业务逻辑以及IO流。而JavaScript则更多的应用于客户端,被浏览器所解释及运行,可以迅速的处理与用户的交互,用来提高用
20、户的用户体验。当然,近几年互联网技术的发展,使得JavaScript得到了越来越多开发者的拥护。近几年,NodeJS的出现使得JavaScript在探索一些服务端的编程应用场景。另外,vue、react及angularJs的出现,使得客户端的编程更加的锋利,JavaScript的下一个春天不远了。2.4 JQueryjQuery可以说是一套JavaScript的封装,他的存在使得Html和JavaScript之间的操作更加的方便和快捷。jQuery封装了很多高效的方法,可以帮助开发者迅速准确的操作Html元素。该框架是在2006年1月发布的,距离现在已经过去了14年之久,不过,到目前为止全球大
21、部分的网站依然在使用这一种高效的框架。可见,他的稳定性和高效性是不容置疑的。2.5 BootstrapBootstrap和jQuery类似,如果说jQuery是一个JavaScript框架,那么Bootstrap就可以称得上是一个CSS框架。他的最终目的是使得开发者即便不具备美术功底也能创建出一个符合大众审美的网站。它提供了一系列的web插件,可以帮助开发者迅速的开发出美观的界面。2.6 本章小结本章介绍了一些基础知识,基于这些基础知识才可以完成整个在线考试系统。其中,html5、css、javascript的基础知识介绍为下一章进行界面模型的设计提供理论基础;jquery框架和bootstr
22、ap框架的基础知识为构建一个可视化的系统提供工具支撑。第三章 界面模型设计本章在前一章提供的理论基础上,基于jquery和bootstrap框架进行界面模型的设计,并对所建立的模型进行了解释说明。并对注册登录、首页面、在线考试页面、题库查询页面、知识点交流页面即后台管理页面进行整体设计,为下一章系统的设计与实现中需要解决的核心问题提供了模型和思路。3.1 首页面3.1.1 描述说明首页面主要提供给考试人员使用,一般针对学生。学生用户可以通过该页面进入在线考试,题库查询及知识点交流等模块。整体上而言,该页面是一个统一入口页面。3.1.2 效果图图3.1 首页面模型如图3.1,设计描述为:整体上通
23、过大背景的展示形式,在最上角进行功能的展示,其中左上角主要展示前端的整体功能,包括:在线考试、题库查询和讨论区。右上角主要实现用户的登录和个人信息的展示。3.2 在线考试3.2.1 描述说明在线考试是本系统主要的实现功能,该功能主要协助参与考试者完成整个考试过程,该功能需要展示所有考试信息,考试根据考试状态区分是否已达到考试时间,从而指引考生完成考试的启动过程。3.2.2 效果图图3.2 在线考试模型图3.3 在线考试模型如图3.2-3.3,在线考试模型可描述为:首页面设计成列表展示的形式,将整体的考试信息进行展示,并进行考试状态的区分,只有达到了考试时间,才可以进行考试,最上面展示一条倒计时
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网络 在线 考试 系统 设计 实现 前端
限制150内