基于Web在线课堂问答统计系统的设计与实现

方晓玮，侯超钧

（仲恺农业工程学院计算科学学院，广州510225）

基于Web在线课堂问答统计系统的设计与实现

方晓玮，侯超钧

（仲恺农业工程学院计算科学学院，广州510225）

阐述基于Web的在线课堂问答统计系统的设计与实现。系统由学生端和教师管理端组成，教师管理端提供题目发布、答题情况查询和分数统计等功能，学生端提供答题和查看试卷等功能，系统前端基于Vue.js框架进行开发，系统后端采用ThinkPHP框架进行开发。该系统的使用结果表明本系统可以有效降低教师的工作量，并提升教学质量。

问答系统；Vue.js；ThinkPHP

0 引言

近年来，随着我国经济的高速发展，高等教育也进入快速发展期。随着高校招生规模的不断扩大，大学教师的教学任务日益加重[1]。对于大学教师，授课学生可能是上百人一个课堂，在大学课堂上的一个重要环节是课堂提问，它是教师课堂教学艺术的组成部分，通过提问可以引导学生思考，提高学生课堂参与度，增加师生互动。但由于课堂时间与学生人数的约束，难以让教师了解本次提问的教学效果以及全部学生的参与程度[2]。

本文拟开发一个在线课堂问答系统，提供一个网上即时问答功能，让学生充分参与到教师的课堂提问环节，使教师可以很好了解班级学生的课堂参与情况。本文提出的在线问答统计系统是基于响应式设计的Web技术开发，能够同时发布到移动浏览器上，通过hybrid技术打包成Android和iOS的App软件。教师通过本系统可以在桌面浏览器发布题目，学生通过移动端浏览器或手机App参与教师在课堂上的即时提问进行作答。本系统后端采用ThinkPHP开发，为客户端提供Restful API接口，前端采用Vue.js框架，使用JavaScript的ECMAScript 6标准进行开发，同时使用Babel进行转码处理以保证在低版本浏览器上的兼容性。本系统为学生提供了友好的答题界面，提供答题，查看试卷等功能；为教师提供了管理学生，管理班级，发布试卷和题目的功能，同时作为本系统重要的一块，数据统计以图表的形式可为教师方便地呈现学生的答题情况。

1 系统设计

1.1 系统框架设计

本系统采用前后端分离的架构进行开发。后端负责为各个客户端提供Restful API，客户端请求API接口后进行模板的渲染和数据呈现，移动版本采用了单页面开发，路由也由前端负责。如图1所示，教师主要通过桌面浏览器进行管理，通过服务端提供的API与后端进行交互，并将数据存储在服务器。学生可以通过智能手机和个人电脑两个终端进行与服务端进行交互。服务端不需要判断请求从哪里发起和几种客户端形式，只需按照接口设计进行响应，这样就达到了前后端分离的目的。

1.2 技术实现

系统后台使用ThinkPHP框架整合开发，使用RESTful接口和JSON数据格式实现系统前后端的分离设计[3]。前端采用了Vue.js框架实现前端的数据绑定和组件式开发。系统的移动浏览器版本是一个单页面的Web App，并利用Cordova打包成Android和iOS的App软件。教师端的发布题目模块采用了基于Bootstrap前端UI框架的所见即所得编辑器Summer⁃note.js，可以方便地进行富文本编辑等操作。

图1 系统响应流程图

（1）ThinkPHP框架

ThinkPHP是一个快速、兼容而且简单的轻量级PHP开发框架，能简化企业级应用开发和敏捷Web应用开发。ThinkPHP遵循Apache2开源协议发布，从Struts结构移植过来并做了改进和完善，使用面向对象的开发结构和MVC模式，融合了Struts的思想和TagLib（标签库）、RoR的ORM映射和ActiveRecord模式[4]。ThinkPHP框架包含了底层架构、兼容处理、基类库、数据库访问层、模板引擎、缓存机制、插件机制、角色认证、表单处理等常用的组件，开发者在应用开发过程中只需要关注业务逻辑。

（2）Vue.js框架

Vue.js是一个构建数据驱动的Web界面的库，可以通过简单的API实现响应的数据绑定和组合的视图组件。Vue.js不是一个全能框架，它只聚焦于视图层，比较容易与其他库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js可以驱动复杂的单页应用。

（3）Cordova

Cordova是一个开源的移动开发框架，可以使用标准的Web技术，如HTML5、CSS3和JavaScript等，进行跨平台开发[6]。应用在每个平台的具体执行被封装了起来，并依靠符合标准的API绑定去访问每个设备的功能，如传感器、数据、网络状态等。Web开发者可以包装部署自己的Web App，并将其分发到各个应用商店门户。

（4）Summernote

图2 数据库E-R图

Summernote是基于jQuery和Bootstrap构建的一个简单灵活、所见即所得（WYSIWYG）的编辑器。Sum⁃mernote有一个功能强大的API，它提供了大量的自定义选项的设计和功能。本系统自定义了插件图片上传功能，选择七牛云存储作为云服务，与七牛云进行对接，将富文本编辑器上传的图片通过七牛云提供的接口上传到了七牛云。利用七牛云高速云服务的优势，减轻了系统服务器的压力，可以提高用户对系统图片的访问速度[7]。

（5）数据库设计

本系统采用MySQL数据库，MySQL是一种开放源代码的关系型数据库管理系统（RDBMS）。MySQL因为其速度、可靠性和适应性而备受关注。我们使用MySQL Workbench来设计数据库物理结构，如图2所示。

2 系统实现

系统分学生端和教师端两部分。教师注册后先添加相应课程，再创建班级，教师可以对该班级的学生，试卷，试卷对应的题目进行管理。教师可以预先设计课堂上的问题，在达到提问点时，教师通过客户端触发题目发布，然后等待学生答题后，就可以查看学生答题情况的统计。另一方面，学生通过客户端注册后，可以查看班级下的试卷并参与答题，答题结束后查看答题情况。

2.1 教师端模块

教师端系统分为基本操作模块、课程管理模块、班级管理模块、学生管理模块、试卷管理模块和题目管理模块，如图3所示。

(2)进口Mach数降低及进口压强增加导致燃烧室中流场的高温区覆盖面积增大, 燃烧反应发生的区域增大.

图3 教师端模块结构图

（1）基本操作模块，教师可以修改个人信息，如教师工号、密码、姓名、Email、性别等。

（2）课程管理模块，用于管理教师该学期讲授的所有课程，对课程信息提供添加、修改、删除课程等功能，课程信息包括课程名称、课程号码，还有一个课程状态的修改操作，主要用作标记该课程是否启用给学生使用。

（3）班级管理模块，提供对授课班级进行管理的功能，可以对授课班级进行新增、修改、删除以及修改状态等等操作，可以进一步管理班级中的学生，还有试卷等等操作。

（4）学生管理模块，主要是对学生的课程申请进行管理，可以对学生的申请做出批准或者删除回应，还能剔除班级上已经存在的学生，也可以将班级中所有学生的名单形成Excel格式导出。学生管理模块还提供学生信息查询功能。

（5）试卷管理模块，可以对在课堂上待提问的多个问题进行组卷，对试卷提供新增、修改、删除以及修改状态等功能，试卷有3个状态（未启用、启用中以及结束）。对于已经结束的试卷，提供学生答题情况与分数分析的功能。

（6）题目管理模块，提供对题目进行新增、修改以及删除等功能，本系统的题目类型有5种，分别是判断、单选、多选、填空以及简答题，提供Excel模板实现对题目的批量导入功能，对于简答题则不计入答题成绩。

2.2 学生端模块

学生端的主要模块包括：基本操作模块、班级管理模块、消息管理模块和答题模块，如图4所示：

（2）班级管理模块，主要提供班级搜索、申请加入班级、退出班级、查看班级中的同学、查看班级中的试卷以及参加班级的试卷测试等功能。学生可以参加属于该班级的试卷测试，对于已经结束的试卷，学生可以查看答题情况以及答题结果。

（3）消息管理模块，主要提供消息阅读、消息删除、消息标记等功能，消息主要是提醒学生有新的测试开启了。

（4）答题模块，教师发布题目后，学生可以进入对应班级查看该班级的试卷进行答题。每答完一个题目系统会自动保存，即使退出当前页面返回也能看到之前保存的答题，答完题后再进行试卷的提交，系统将会统计本次答题的情况。

图4 学生模块结构图

2.3 系统界面

图5是教师端的主界面，右上方是个人信息，界面上部分是班级的基本信息，往下是导航栏，可以进入系统其他模块，图5展示的是学生管理界面。

图5 教师端学生管理界面

图6是编辑测试试卷的页面，上方导航栏可以跳转到编辑测试页面和测试分析页面。导航栏下面是该试卷的组卷信息，如标题，发布时间等，界面有一个“发布按钮”可以发布测试或结束测试。左方的选择试卷类型按钮组，点击其中一种题目类型，都会在该试卷下添加一条该类型的题目，可以接着填写该题目的题干信息。编辑题目提供富文本编辑，可以插入图片等。把鼠标移动到任何一个题目的上方鼠标指针会变成移动的指针指示，可以对各个题目进行拖拽排序。

图6 教师端管理题目界面

图7是学生在移动端下的答题界面，对于选择题，学生只需点击选项即可勾选该选项，简答题和填空题则需要点击对应区域填入答案，右上方是提交按钮，固定在最下方的是当前的答题数目。

图7 学生移动端答题界面

3 结语

本文通过Web技术帮助教师解决课堂提问工作，帮助教师提高了学生课堂参与程度，可以对学生答题情况进行很好的统计操作，方便教师了解班级学生的答题情况。本系统使用了目前比较流行的开源框架ThinkPHP和Vue.js等，采用了Cordova与Summernote等跨平台的动开发框架，有利于在多种平台上运行，相信本系统的运行可以为教师和学生提供一个方便快捷的课堂问答环境，也为其他课堂问答系统提供了一个有益参考。

[1]王晨.高等院校在线学习平台设计与实现[D].电子科技大学,2013.

[2]冯明.基于混合模式（Hybrid App）移动终端设计的方法[J].数字技术与应用,2015（4）:148-149.

[3]赵博文.解析 Restful Web Service架构[J].光盘技术,2008（10）:4,7.

[4]王昭英.基于MVC设计模式的thinkphp框架的研究与应用[D].西安建筑科技大学,2010.

[5]高嘉泽,高强,吴国全,等.面向移动应用的后端服务平台[J].计算机系统应用,2014,23（2）:22-27.

[6]朱凯南,李艳平,申闫春,等.基于Ionic和Cordova的跨平台移动App的研究与应用[J].电脑知识与技术,2016,12（1）:119-121.

[7]孙浩峰.场景化CDN是未来[J].网络安全和信息化,2016（5）:8-9.

Design and Implementation of Online Classroom Q&A System Based on Web

FANG Xiao-wei，HOU Chao-jun
（College of Computational Science,Zhongkai University of Agriculture and Engineering,Guangzhou 510225）

Presents the design and implementation of the online classroom Q&A system based on Web technology,develops the system by using Vue.js framework and ThinkPHP framework,which is mainly comprised of student platform and teacher platform.In particular,the student plat⁃form provides the functions of answering the online question and reviewing the result of answer.The teacher platform consists of the quiz re⁃lease module,quiz statistics module and so on.The results show that the system could effectively improve the quality of teaching and re⁃duce the work of teacher.

Q&A;Vue.js;ThinkPHP

1007-1423（2017）33-0075-05

10.3969/j.issn.1007-1423.2017.33.018

方晓玮（1994-），男，广东揭阳人，本科，研究方向为软件工程

侯超钧（1979-），男，广东广州人，讲师，博士，研究方向为智能信息处理，Email：houchaojun@21cn.com

2017-10-10 修改日期：2018-01-02