方曉瑋，侯超鈞

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

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

方曉瑋，侯超鈞

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

闡述基于Web的在線課堂問答統(tǒng)計系統(tǒng)的設(shè)計與實現(xiàn)。系統(tǒng)由學(xué)生端和教師管理端組成，教師管理端提供題目發(fā)布、答題情況查詢和分?jǐn)?shù)統(tǒng)計等功能，學(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 引言

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

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

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

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

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

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

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

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

（1）ThinkPHP框架

ThinkPHP是一個快速、兼容而且簡單的輕量級PHP開發(fā)框架，能簡化企業(yè)級應(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ù)庫訪問層、模板引擎、緩存機制、插件機制、角色認(rèn)證、表單處理等常用的組件，開發(fā)者在應(yīng)用開發(fā)過程中只需要關(guān)注業(yè)務(wù)邏輯。

（2）Vue.js框架

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

（3）Cordova

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

（4）Summernote

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

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

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

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

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

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

2.1 教師端模塊

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

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

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

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

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

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

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

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

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

2.2 學(xué)生端模塊

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

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

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

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

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

2.3 系統(tǒng)界面

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

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

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

圖6 教師端管理題目界面

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

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

3 結(jié)語

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

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

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

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

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

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

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

[7]孫浩峰.場景化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-），男，廣東揭陽人，本科，研究方向為軟件工程

侯超鈞（1979-），男，廣東廣州人，講師，博士，研究方向為智能信息處理，Email：houchaojun@21cn.com

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