基于Web在線課堂問答統(tǒng)計(jì)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

方曉瑋，侯超鈞

（仲愷農(nóng)業(yè)工程學(xué)院計(jì)算科學(xué)學(xué)院，廣州510225）

基于Web在線課堂問答統(tǒng)計(jì)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

方曉瑋，侯超鈞

（仲愷農(nóng)業(yè)工程學(xué)院計(jì)算科學(xué)學(xué)院，廣州510225）

闡述基于Web的在線課堂問答統(tǒng)計(jì)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)。系統(tǒng)由學(xué)生端和教師管理端組成，教師管理端提供題目發(fā)布、答題情況查詢和分?jǐn)?shù)統(tǒng)計(jì)等功能，學(xué)生端提供答題和查看試卷等功能，系統(tǒng)前端基于Vue.js框架進(jìn)行開發(fā)，系統(tǒng)后端采用ThinkPHP框架進(jìn)行開發(fā)。該系統(tǒng)的使用結(jié)果表明本系統(tǒng)可以有效降低教師的工作量，并提升教學(xué)質(zhì)量。

問答系統(tǒng)；Vue.js；ThinkPHP

0 引言

近年來，隨著我國(guó)經(jīng)濟(jì)的高速發(fā)展，高等教育也進(jìn)入快速發(fā)展期。隨著高校招生規(guī)模的不斷擴(kuò)大，大學(xué)教師的教學(xué)任務(wù)日益加重[1]。對(duì)于大學(xué)教師，授課學(xué)生可能是上百人一個(gè)課堂，在大學(xué)課堂上的一個(gè)重要環(huán)節(jié)是課堂提問，它是教師課堂教學(xué)藝術(shù)的組成部分，通過提問可以引導(dǎo)學(xué)生思考，提高學(xué)生課堂參與度，增加師生互動(dòng)。但由于課堂時(shí)間與學(xué)生人數(shù)的約束，難以讓教師了解本次提問的教學(xué)效果以及全部學(xué)生的參與程度[2]。

本文擬開發(fā)一個(gè)在線課堂問答系統(tǒng)，提供一個(gè)網(wǎng)上即時(shí)問答功能，讓學(xué)生充分參與到教師的課堂提問環(huán)節(jié)，使教師可以很好了解班級(jí)學(xué)生的課堂參與情況。本文提出的在線問答統(tǒng)計(jì)系統(tǒng)是基于響應(yīng)式設(shè)計(jì)的Web技術(shù)開發(fā)，能夠同時(shí)發(fā)布到移動(dòng)瀏覽器上，通過hybrid技術(shù)打包成Android和iOS的App軟件。教師通過本系統(tǒng)可以在桌面瀏覽器發(fā)布題目，學(xué)生通過移動(dòng)端瀏覽器或手機(jī)App參與教師在課堂上的即時(shí)提問進(jìn)行作答。本系統(tǒng)后端采用ThinkPHP開發(fā)，為客戶端提供Restful API接口，前端采用Vue.js框架，使用JavaScript的ECMAScript 6標(biāo)準(zhǔn)進(jìn)行開發(fā)，同時(shí)使用Babel進(jìn)行轉(zhuǎn)碼處理以保證在低版本瀏覽器上的兼容性。本系統(tǒng)為學(xué)生提供了友好的答題界面，提供答題，查看試卷等功能；為教師提供了管理學(xué)生，管理班級(jí)，發(fā)布試卷和題目的功能，同時(shí)作為本系統(tǒng)重要的一塊，數(shù)據(jù)統(tǒng)計(jì)以圖表的形式可為教師方便地呈現(xiàn)學(xué)生的答題情況。

1 系統(tǒng)設(shè)計(jì)

1.1 系統(tǒng)框架設(shè)計(jì)

本系統(tǒng)采用前后端分離的架構(gòu)進(jìn)行開發(fā)。后端負(fù)責(zé)為各個(gè)客戶端提供Restful API，客戶端請(qǐng)求API接口后進(jìn)行模板的渲染和數(shù)據(jù)呈現(xiàn)，移動(dòng)版本采用了單頁面開發(fā)，路由也由前端負(fù)責(zé)。如圖1所示，教師主要通過桌面瀏覽器進(jìn)行管理，通過服務(wù)端提供的API與后端進(jìn)行交互，并將數(shù)據(jù)存儲(chǔ)在服務(wù)器。學(xué)生可以通過智能手機(jī)和個(gè)人電腦兩個(gè)終端進(jìn)行與服務(wù)端進(jìn)行交互。服務(wù)端不需要判斷請(qǐng)求從哪里發(fā)起和幾種客戶端形式，只需按照接口設(shè)計(jì)進(jìn)行響應(yīng)，這樣就達(dá)到了前后端分離的目的。

1.2 技術(shù)實(shí)現(xiàn)

系統(tǒng)后臺(tái)使用ThinkPHP框架整合開發(fā)，使用RESTful接口和JSON數(shù)據(jù)格式實(shí)現(xiàn)系統(tǒng)前后端的分離設(shè)計(jì)[3]。前端采用了Vue.js框架實(shí)現(xiàn)前端的數(shù)據(jù)綁定和組件式開發(fā)。系統(tǒng)的移動(dòng)瀏覽器版本是一個(gè)單頁面的Web App，并利用Cordova打包成Android和iOS的App軟件。教師端的發(fā)布題目模塊采用了基于Bootstrap前端UI框架的所見即所得編輯器Summer?note.js，可以方便地進(jìn)行富文本編輯等操作。

圖1 系統(tǒng)響應(yīng)流程圖

（1）ThinkPHP框架

ThinkPHP是一個(gè)快速、兼容而且簡(jiǎn)單的輕量級(jí)PHP開發(fā)框架，能簡(jiǎn)化企業(yè)級(jí)應(yīng)用開發(fā)和敏捷Web應(yīng)用開發(fā)。ThinkPHP遵循Apache2開源協(xié)議發(fā)布，從Struts結(jié)構(gòu)移植過來并做了改進(jìn)和完善，使用面向?qū)ο蟮拈_發(fā)結(jié)構(gòu)和MVC模式，融合了Struts的思想和TagLib（標(biāo)簽庫）、RoR的ORM映射和ActiveRecord模式[4]。ThinkPHP框架包含了底層架構(gòu)、兼容處理、基類庫、數(shù)據(jù)庫訪問層、模板引擎、緩存機(jī)制、插件機(jī)制、角色認(rèn)證、表單處理等常用的組件，開發(fā)者在應(yīng)用開發(fā)過程中只需要關(guān)注業(yè)務(wù)邏輯。

（2）Vue.js框架

Vue.js是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的Web界面的庫，可以通過簡(jiǎn)單的API實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。Vue.js不是一個(gè)全能框架，它只聚焦于視圖層，比較容易與其他庫或已有項(xiàng)目整合。另一方面，在與相關(guān)工具和支持庫一起使用時(shí)，Vue.js可以驅(qū)動(dòng)復(fù)雜的單頁應(yīng)用。

（3）Cordova

Cordova是一個(gè)開源的移動(dòng)開發(fā)框架，可以使用標(biāo)準(zhǔn)的Web技術(shù)，如HTML5、CSS3和JavaScript等，進(jìn)行跨平臺(tái)開發(fā)[6]。應(yīng)用在每個(gè)平臺(tái)的具體執(zhí)行被封裝了起來，并依靠符合標(biāo)準(zhǔn)的API綁定去訪問每個(gè)設(shè)備的功能，如傳感器、數(shù)據(jù)、網(wǎng)絡(luò)狀態(tài)等。Web開發(fā)者可以包裝部署自己的Web App，并將其分發(fā)到各個(gè)應(yīng)用商店門戶。

（4）Summernote

圖2 數(shù)據(jù)庫E-R圖

Summernote是基于jQuery和Bootstrap構(gòu)建的一個(gè)簡(jiǎn)單靈活、所見即所得（WYSIWYG）的編輯器。Sum?mernote有一個(gè)功能強(qiáng)大的API，它提供了大量的自定義選項(xiàng)的設(shè)計(jì)和功能。本系統(tǒng)自定義了插件圖片上傳功能，選擇七牛云存儲(chǔ)作為云服務(wù)，與七牛云進(jìn)行對(duì)接，將富文本編輯器上傳的圖片通過七牛云提供的接口上傳到了七牛云。利用七牛云高速云服務(wù)的優(yōu)勢(shì)，減輕了系統(tǒng)服務(wù)器的壓力，可以提高用戶對(duì)系統(tǒng)圖片的訪問速度[7]。

（5）數(shù)據(jù)庫設(shè)計(jì)

本系統(tǒng)采用MySQL數(shù)據(jù)庫，MySQL是一種開放源代碼的關(guān)系型數(shù)據(jù)庫管理系統(tǒng)（RDBMS）。MySQL因?yàn)槠渌俣?、可靠性和適應(yīng)性而備受關(guān)注。我們使用MySQL Workbench來設(shè)計(jì)數(shù)據(jù)庫物理結(jié)構(gòu)，如圖2所示。

2 系統(tǒng)實(shí)現(xiàn)

系統(tǒng)分學(xué)生端和教師端兩部分。教師注冊(cè)后先添加相應(yīng)課程，再創(chuàng)建班級(jí)，教師可以對(duì)該班級(jí)的學(xué)生，試卷，試卷對(duì)應(yīng)的題目進(jìn)行管理。教師可以預(yù)先設(shè)計(jì)課堂上的問題，在達(dá)到提問點(diǎn)時(shí)，教師通過客戶端觸發(fā)題目發(fā)布，然后等待學(xué)生答題后，就可以查看學(xué)生答題情況的統(tǒng)計(jì)。另一方面，學(xué)生通過客戶端注冊(cè)后，可以查看班級(jí)下的試卷并參與答題，答題結(jié)束后查看答題情況。

2.1 教師端模塊

教師端系統(tǒng)分為基本操作模塊、課程管理模塊、班級(jí)管理模塊、學(xué)生管理模塊、試卷管理模塊和題目管理模塊，如圖3所示。

(2)進(jìn)口Mach數(shù)降低及進(jìn)口壓強(qiáng)增加導(dǎo)致燃燒室中流場(chǎng)的高溫區(qū)覆蓋面積增大, 燃燒反應(yīng)發(fā)生的區(qū)域增大.

圖3 教師端模塊結(jié)構(gòu)圖

（1）基本操作模塊，教師可以修改個(gè)人信息，如教師工號(hào)、密碼、姓名、Email、性別等。

（2）課程管理模塊，用于管理教師該學(xué)期講授的所有課程，對(duì)課程信息提供添加、修改、刪除課程等功能，課程信息包括課程名稱、課程號(hào)碼，還有一個(gè)課程狀態(tài)的修改操作，主要用作標(biāo)記該課程是否啟用給學(xué)生使用。

（3）班級(jí)管理模塊，提供對(duì)授課班級(jí)進(jìn)行管理的功能，可以對(duì)授課班級(jí)進(jìn)行新增、修改、刪除以及修改狀態(tài)等等操作，可以進(jìn)一步管理班級(jí)中的學(xué)生，還有試卷等等操作。

（4）學(xué)生管理模塊，主要是對(duì)學(xué)生的課程申請(qǐng)進(jìn)行管理，可以對(duì)學(xué)生的申請(qǐng)做出批準(zhǔn)或者刪除回應(yīng)，還能剔除班級(jí)上已經(jīng)存在的學(xué)生，也可以將班級(jí)中所有學(xué)生的名單形成Excel格式導(dǎo)出。學(xué)生管理模塊還提供學(xué)生信息查詢功能。

（5）試卷管理模塊，可以對(duì)在課堂上待提問的多個(gè)問題進(jìn)行組卷，對(duì)試卷提供新增、修改、刪除以及修改狀態(tài)等功能，試卷有3個(gè)狀態(tài)（未啟用、啟用中以及結(jié)束）。對(duì)于已經(jīng)結(jié)束的試卷，提供學(xué)生答題情況與分?jǐn)?shù)分析的功能。

（6）題目管理模塊，提供對(duì)題目進(jìn)行新增、修改以及刪除等功能，本系統(tǒng)的題目類型有5種，分別是判斷、單選、多選、填空以及簡(jiǎn)答題，提供Excel模板實(shí)現(xiàn)對(duì)題目的批量導(dǎo)入功能，對(duì)于簡(jiǎn)答題則不計(jì)入答題成績(jī)。

2.2 學(xué)生端模塊

學(xué)生端的主要模塊包括：基本操作模塊、班級(jí)管理模塊、消息管理模塊和答題模塊，如圖4所示：

（2）班級(jí)管理模塊，主要提供班級(jí)搜索、申請(qǐng)加入班級(jí)、退出班級(jí)、查看班級(jí)中的同學(xué)、查看班級(jí)中的試卷以及參加班級(jí)的試卷測(cè)試等功能。學(xué)生可以參加屬于該班級(jí)的試卷測(cè)試，對(duì)于已經(jīng)結(jié)束的試卷，學(xué)生可以查看答題情況以及答題結(jié)果。

（3）消息管理模塊，主要提供消息閱讀、消息刪除、消息標(biāo)記等功能，消息主要是提醒學(xué)生有新的測(cè)試開啟了。

（4）答題模塊，教師發(fā)布題目后，學(xué)生可以進(jìn)入對(duì)應(yīng)班級(jí)查看該班級(jí)的試卷進(jìn)行答題。每答完一個(gè)題目系統(tǒng)會(huì)自動(dòng)保存，即使退出當(dāng)前頁面返回也能看到之前保存的答題，答完題后再進(jìn)行試卷的提交，系統(tǒng)將會(huì)統(tǒng)計(jì)本次答題的情況。

圖4 學(xué)生模塊結(jié)構(gòu)圖

2.3 系統(tǒng)界面

圖5是教師端的主界面，右上方是個(gè)人信息，界面上部分是班級(jí)的基本信息，往下是導(dǎo)航欄，可以進(jìn)入系統(tǒng)其他模塊，圖5展示的是學(xué)生管理界面。

圖5 教師端學(xué)生管理界面

圖6是編輯測(cè)試試卷的頁面，上方導(dǎo)航欄可以跳轉(zhuǎn)到編輯測(cè)試頁面和測(cè)試分析頁面。導(dǎo)航欄下面是該試卷的組卷信息，如標(biāo)題，發(fā)布時(shí)間等，界面有一個(gè)“發(fā)布按鈕”可以發(fā)布測(cè)試或結(jié)束測(cè)試。左方的選擇試卷類型按鈕組，點(diǎn)擊其中一種題目類型，都會(huì)在該試卷下添加一條該類型的題目，可以接著填寫該題目的題干信息。編輯題目提供富文本編輯，可以插入圖片等。把鼠標(biāo)移動(dòng)到任何一個(gè)題目的上方鼠標(biāo)指針會(huì)變成移動(dòng)的指針指示，可以對(duì)各個(gè)題目進(jìn)行拖拽排序。

圖6 教師端管理題目界面

圖7是學(xué)生在移動(dòng)端下的答題界面，對(duì)于選擇題，學(xué)生只需點(diǎn)擊選項(xiàng)即可勾選該選項(xiàng)，簡(jiǎn)答題和填空題則需要點(diǎn)擊對(duì)應(yīng)區(qū)域填入答案，右上方是提交按鈕，固定在最下方的是當(dāng)前的答題數(shù)目。

圖7 學(xué)生移動(dòng)端答題界面

3 結(jié)語

本文通過Web技術(shù)幫助教師解決課堂提問工作，幫助教師提高了學(xué)生課堂參與程度，可以對(duì)學(xué)生答題情況進(jìn)行很好的統(tǒng)計(jì)操作，方便教師了解班級(jí)學(xué)生的答題情況。本系統(tǒng)使用了目前比較流行的開源框架ThinkPHP和Vue.js等，采用了Cordova與Summernote等跨平臺(tái)的動(dòng)開發(fā)框架，有利于在多種平臺(tái)上運(yùn)行，相信本系統(tǒng)的運(yùn)行可以為教師和學(xué)生提供一個(gè)方便快捷的課堂問答環(huán)境，也為其他課堂問答系統(tǒng)提供了一個(gè)有益參考。

[1]王晨.高等院校在線學(xué)習(xí)平臺(tái)設(shè)計(jì)與實(shí)現(xiàn)[D].電子科技大學(xué),2013.

[2]馮明.基于混合模式（Hybrid App）移動(dòng)終端設(shè)計(jì)的方法[J].數(shù)字技術(shù)與應(yīng)用,2015（4）:148-149.

[3]趙博文.解析 Restful Web Service架構(gòu)[J].光盤技術(shù),2008（10）:4,7.

[4]王昭英.基于MVC設(shè)計(jì)模式的thinkphp框架的研究與應(yīng)用[D].西安建筑科技大學(xué),2010.

[5]高嘉澤,高強(qiáng),吳國(guó)全,等.面向移動(dòng)應(yīng)用的后端服務(wù)平臺(tái)[J].計(jì)算機(jī)系統(tǒng)應(yīng)用,2014,23（2）:22-27.

[6]朱凱南,李艷平,申閆春,等.基于Ionic和Cordova的跨平臺(tái)移動(dòng)App的研究與應(yīng)用[J].電腦知識(shí)與技術(shù),2016,12（1）:119-121.

[7]孫浩峰.場(chǎng)景化CDN是未來[J].網(wǎng)絡(luò)安全和信息化,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-），男，廣東揭陽人，本科，研究方向?yàn)檐浖こ?/p>

侯超鈞（1979-），男，廣東廣州人，講師，博士，研究方向?yàn)橹悄苄畔⑻幚?，Email：houchaojun@21cn.com

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