翻轉(zhuǎn)課堂輔助教學(xué)系統(tǒng)的設(shè)計(jì)

王雪梅，周虎成，周 璇

(1.南京郵電大學(xué) 計(jì)算機(jī)學(xué)院，江蘇 南京 210003；2.南京電研電力自動(dòng)化股份有限公司，江蘇 南京 210003)

0 引 言

近年來(lái)，隨著“互聯(lián)網(wǎng)+教育”的大力推廣，國(guó)內(nèi)各大高校都在積極開展基于SPOC的翻轉(zhuǎn)課堂教學(xué)。翻轉(zhuǎn)課堂不再以教師為中心，其最大的特色在于將線上自主學(xué)習(xí)和線下課堂學(xué)習(xí)進(jìn)行有機(jī)結(jié)合。翻轉(zhuǎn)形式下的課堂不再是課程知識(shí)的單向傳遞，更多表現(xiàn)為以學(xué)生為中心的探究式、合作式學(xué)習(xí)[1-2]。筆者所在教學(xué)團(tuán)隊(duì)開展的《網(wǎng)絡(luò)技術(shù)與應(yīng)用》課程的翻轉(zhuǎn)課堂教學(xué)設(shè)計(jì)了不同層次、不同形式的教學(xué)環(huán)節(jié)，以幫助學(xué)生達(dá)成知識(shí)的內(nèi)化和運(yùn)用[3-4]。為促進(jìn)線下課堂教學(xué)活動(dòng)順利開展，筆者專門設(shè)計(jì)了教學(xué)輔助系統(tǒng)，協(xié)助翻轉(zhuǎn)課堂教學(xué)活動(dòng)的開展，不僅更好地加強(qiáng)了師生之間的良性互動(dòng)，而且促成過程化、自動(dòng)化課程成績(jī)?cè)u(píng)價(jià)的真正落地。

1 系統(tǒng)功能需求

訪問系統(tǒng)的用戶包括三類：管理員、教師和學(xué)生。對(duì)于不同類型的用戶，系統(tǒng)提供不同的功能和操作權(quán)限。具體的功能分布見圖1。

圖1 系統(tǒng)功能分布

教師上課前登錄系統(tǒng)，使能簽到功能后，學(xué)生方可進(jìn)入系統(tǒng)進(jìn)行課前簽到。簽到完畢后，教師設(shè)定小組數(shù)目，啟動(dòng)分組功能。系統(tǒng)將根據(jù)實(shí)際簽到的學(xué)生名單，執(zhí)行隨機(jī)分組，顯示本次分組結(jié)果。學(xué)生查詢分組結(jié)果，根據(jù)其所在小組入座。

在實(shí)際的課堂教學(xué)過程中，教師經(jīng)常在重點(diǎn)知識(shí)回顧環(huán)節(jié)中，要求學(xué)生使用手機(jī)進(jìn)入系統(tǒng)進(jìn)行隨堂答題，以檢驗(yàn)學(xué)生課前線上自主學(xué)習(xí)的效果。教師也會(huì)根據(jù)學(xué)生的答題情況，調(diào)整講課的重點(diǎn)和節(jié)奏。

翻轉(zhuǎn)課堂以問題探究為主線，過程化記錄學(xué)生課堂上的學(xué)習(xí)效果。最初課程組教師對(duì)教學(xué)環(huán)節(jié)中學(xué)生的答題情況通過紅花、印章等形式進(jìn)行獎(jiǎng)勵(lì)，并依據(jù)這些獎(jiǎng)勵(lì)的數(shù)目作為每次線下課堂的成績(jī)。這種獎(jiǎng)勵(lì)方式往往需要安排助教協(xié)助，否則會(huì)占用主講教師的上課時(shí)間。為此，系統(tǒng)提供電子獎(jiǎng)勵(lì)功能，允許教師直接通過手機(jī)操作對(duì)小組進(jìn)行獎(jiǎng)勵(lì)，快捷便利，提高講課效率。

電子搶答器用在課堂上小組間的搶答環(huán)節(jié)中，教師發(fā)布問題后，啟動(dòng)搶答器，允許學(xué)生開始搶答。前三名搶答學(xué)生的名單會(huì)實(shí)時(shí)顯示在頁(yè)面上。

翻轉(zhuǎn)教學(xué)對(duì)學(xué)生平時(shí)學(xué)習(xí)行為的評(píng)價(jià)貫穿整個(gè)教學(xué)過程，無(wú)論是線上還是線下，評(píng)價(jià)過程過程化、精細(xì)化。線上成績(jī)來(lái)源于中國(guó)大學(xué)慕課，線下成績(jī)已記錄在系統(tǒng)中。系統(tǒng)中成績(jī)統(tǒng)計(jì)功能主要用于管理和統(tǒng)計(jì)學(xué)生成績(jī)，支持各類成績(jī)表的導(dǎo)入、導(dǎo)出和自動(dòng)生成，極大程度地減輕了教師的工作。

除了成績(jī)管理，系統(tǒng)為管理員開放了其他管理功能，包括允許對(duì)課程基本信息、開課信息、教師信息、學(xué)生信息等的錄入、編輯等。

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

系統(tǒng)設(shè)計(jì)分為前端界面設(shè)計(jì)與后臺(tái)服務(wù)實(shí)現(xiàn)兩部分，采用的集成開發(fā)環(huán)境是MyEclipse。為實(shí)現(xiàn)頁(yè)面樣式統(tǒng)一化和頁(yè)面布局的良好展示，系統(tǒng)選擇javascript+ jQuery+bootstrap[5-10]作為前端界面框架。Bootstrap的優(yōu)勢(shì)在于兼容所有主流瀏覽器，支持移動(dòng)設(shè)備優(yōu)先，不僅自身提供大量的樣式，還有許多第三方的基于Bootstrap的開源插件(比如ace)可用，大大簡(jiǎn)化了前端設(shè)計(jì)過程。

后臺(tái)服務(wù)包括Web應(yīng)用服務(wù)和數(shù)據(jù)庫(kù)服務(wù)。Web應(yīng)用服務(wù)采用基于Struts技術(shù)[11-13]的服務(wù)框架。Struts是最早得到認(rèn)可的基于MVC模式的開源框架，利用ajax+json接口，與前端JSP頁(yè)面進(jìn)行交互。數(shù)據(jù)庫(kù)采用SQL server。在Struts框架下，系統(tǒng)利用Hibernate技術(shù)[14-15]對(duì)各種數(shù)據(jù)表進(jìn)行各種操作。

2.1 多角色的頁(yè)面定制

系統(tǒng)學(xué)生主界面如圖2所示。頁(yè)面結(jié)構(gòu)包括導(dǎo)航欄、側(cè)邊欄、導(dǎo)航菜單列表和功能內(nèi)頁(yè)四個(gè)部分。其中功能內(nèi)頁(yè)(page)依據(jù)菜單項(xiàng)的不同選擇顯示不同的內(nèi)容。

圖2 系統(tǒng)主界面

系統(tǒng)為不同類型用戶開放不同的功能和操作權(quán)限。那么，針對(duì)多角色訪問如何實(shí)現(xiàn)靈活的頁(yè)面定制？傳統(tǒng)的設(shè)計(jì)思路是提供統(tǒng)一的頁(yè)面，不同角色訪問時(shí)，依據(jù)其權(quán)限，利用權(quán)限相關(guān)頁(yè)面元素的enable或disable狀態(tài)來(lái)區(qū)分。這種方法雖然很直觀，但不足在于引入過多的腳本判斷，而且過多的灰色禁用態(tài)元素會(huì)使頁(yè)面的視覺效果欠佳。為實(shí)現(xiàn)多角色頁(yè)面定制，系統(tǒng)引入權(quán)限標(biāo)簽樣式。在設(shè)計(jì)頁(yè)面時(shí)，為所有權(quán)限相關(guān)頁(yè)面元素加入對(duì)應(yīng)的標(biāo)簽類，并設(shè)置元素初始不可見。相應(yīng)的，在頁(yè)面加載的腳本中，針對(duì)登錄用戶的實(shí)際權(quán)限，顯示綁定對(duì)應(yīng)標(biāo)簽類的所有頁(yè)面元素，如圖3所示。不難看出，該方法僅僅需要角色判斷一次，而且頁(yè)面上顯示的是對(duì)應(yīng)角色的所有功能菜單項(xiàng)，不存在任何灰化的頁(yè)面元素。

圖3 不同角色頁(yè)面定制代碼示例

2.2 前端與后臺(tái)服務(wù)的交互

用戶對(duì)頁(yè)面元素的操作(比如點(diǎn)擊菜單項(xiàng))，會(huì)觸發(fā)相應(yīng)的事件(比如click event)。要響應(yīng)用戶操作，在頁(yè)面嵌入的javascript腳本中，必須提供相應(yīng)的事件響應(yīng)函數(shù)(比如OnClick)。事件響應(yīng)函數(shù)中，往往包括兩個(gè)方面的處理動(dòng)作：頁(yè)面端和服務(wù)端。頁(yè)面范圍的動(dòng)作一般是對(duì)用戶輸入數(shù)據(jù)進(jìn)行合法性判斷，比如，用戶填寫表單提交時(shí)，在遞交給服務(wù)器處理前，往往需要解釋執(zhí)行頁(yè)面腳本，檢查填寫信息是否有效，比如，信息是否為空，是否符合郵箱地址的規(guī)范等。服務(wù)端的操作需要將頁(yè)面提取的信息以一定的方式提交給服務(wù)端處理，處理結(jié)果再返回到頁(yè)面顯示。

圖4 基于struts的后臺(tái)服務(wù)模型

圖4顯示了該系統(tǒng)采用的前端頁(yè)面與后臺(tái)服務(wù)交互的過程。Web應(yīng)用啟動(dòng)時(shí)，會(huì)自動(dòng)加載運(yùn)行總控制器(ActionServlet)，讀取配置文件struts.xml，構(gòu)造和初始化所有注冊(cè)的Action。在前端頁(yè)面元素的事件響應(yīng)函數(shù)中，通過ajax接口向指定Action提出請(qǐng)求，除了指定請(qǐng)求類型之外(如get或post)，有時(shí)還需遞交數(shù)據(jù)。前后臺(tái)交互的數(shù)據(jù)需要約定一定的格式，json是當(dāng)前流行的格式，以類型：數(shù)值對(duì)的格式描述。頁(yè)面請(qǐng)求被分發(fā)到正確的action后，由其調(diào)用指定的javaBean來(lái)執(zhí)行相應(yīng)的業(yè)務(wù)邏輯。最終業(yè)務(wù)執(zhí)行結(jié)果仍以json格式返回到JSP頁(yè)面進(jìn)行顯示或處理。

前端后臺(tái)交互(頁(yè)面登錄功能)代碼示例如圖5所示。在登錄頁(yè)面中點(diǎn)擊“登錄”按鈕，觸發(fā)頁(yè)面(login.jsp)的事件響應(yīng)函數(shù)onLogin，函數(shù)腳本通過ajax將包括用戶名和密碼的json數(shù)據(jù)發(fā)送到Login.Action進(jìn)行處理。struts.xml中配置該Action對(duì)應(yīng)的JavaBean為“com.action.LoginAction”。運(yùn)行該類內(nèi)的“l(fā)ogin” method執(zhí)行登錄請(qǐng)求處理，依據(jù)頁(yè)面提交的用戶名和密碼兩項(xiàng)數(shù)據(jù)查找數(shù)據(jù)表，判斷用戶身份是否合法，最終將結(jié)果以json格式再返回到頁(yè)面中，按照ajax中success屬性指定的函數(shù)進(jìn)行后續(xù)處理。

2.3 數(shù)據(jù)庫(kù)訪問

系統(tǒng)選擇SQL server關(guān)系數(shù)據(jù)庫(kù)來(lái)存放所有數(shù)據(jù)。數(shù)據(jù)表分為三類。第一類存儲(chǔ)院系、課程、教師、學(xué)生等信息。這些表一般在管理員權(quán)限下進(jìn)行訪問和操作，數(shù)據(jù)一旦導(dǎo)入，變化小，相對(duì)靜態(tài)。比如，開課前，管理員負(fù)責(zé)將學(xué)期開展翻轉(zhuǎn)課堂教學(xué)涉及的課程、教師和學(xué)生清單導(dǎo)入到系統(tǒng)中。第二類負(fù)責(zé)記錄課堂教學(xué)過程中產(chǎn)生的動(dòng)態(tài)數(shù)據(jù)，包括學(xué)生隨機(jī)分組、課堂獎(jiǎng)勵(lì)、隨堂測(cè)試等。這些數(shù)據(jù)是學(xué)期末生成線下課堂成績(jī)表的元數(shù)據(jù)。第三類存儲(chǔ)用于學(xué)生學(xué)習(xí)評(píng)價(jià)的數(shù)據(jù)，包括來(lái)自中國(guó)大學(xué)慕課的各項(xiàng)成績(jī)、線下期末成績(jī)、總評(píng)成績(jī)、各項(xiàng)成績(jī)比例等等。

數(shù)據(jù)庫(kù)訪問的實(shí)現(xiàn)有兩種方式，一種常用的方法是直接使用JDBC技術(shù)，其基本流程是：加載JDBC驅(qū)動(dòng)程序，建立數(shù)據(jù)庫(kù)連接(Connection)，構(gòu)造Statement對(duì)象，執(zhí)行SQL語(yǔ)句，對(duì)數(shù)據(jù)表執(zhí)行查詢、更新等操作后，將結(jié)果返回到頁(yè)面顯示。這種方法往往需要很多代碼量，相對(duì)比較麻煩。

圖5 前端后臺(tái)交互(頁(yè)面登錄功能)代碼示例

文中系統(tǒng)使用的是另一種方法，即Hibernate。Hibernate是一種開源的基于JDBC的對(duì)象-關(guān)系映射引擎，目前非常流行，廣泛用于Web應(yīng)用開發(fā)中?；居梅ǎ篗yEclipse環(huán)境下，首先通過向?qū)Ъ尤際ibernate Capabilities，來(lái)添加Hibernate類庫(kù)、創(chuàng)建配置文件Hibernate.cfg.xml和生成SessionFactory類。然后，利用反向工程向?qū)Э焖偕蒍ava POJO(Plain and Old Java Object)類、實(shí)體映射文件和DAO(data access object)。

在此過程中，僅僅需要選擇數(shù)據(jù)庫(kù)表，就可以自動(dòng)生成對(duì)應(yīng)該表的POJO類和DAO類。POJO實(shí)體類的成員變量與對(duì)應(yīng)數(shù)據(jù)表中的字段一一對(duì)應(yīng)，并且為每個(gè)成員變量提供了相應(yīng)的get/set函數(shù)接口。DAO類中提供對(duì)應(yīng)該表的所有訪問和操作。實(shí)體映射文件中記錄了POJO類與數(shù)據(jù)表的映射關(guān)系。系統(tǒng)中所有的數(shù)據(jù)庫(kù)訪問都直接對(duì)數(shù)據(jù)表對(duì)應(yīng)的POJO類和DAO類對(duì)象進(jìn)行操作，無(wú)需關(guān)注具體的有關(guān)數(shù)據(jù)庫(kù)連接的訪問細(xì)節(jié)。

值得注意的是，雖然Hibernate能夠簡(jiǎn)化數(shù)據(jù)庫(kù)訪問的代碼實(shí)現(xiàn)，但使用Hibernate的前提是數(shù)據(jù)表結(jié)構(gòu)不會(huì)再發(fā)生變化，而且如果數(shù)據(jù)庫(kù)中包含大量的存儲(chǔ)過程或者涉及到多表查詢時(shí)，也不適合使用Hibernate。

有些Web應(yīng)用直接將數(shù)據(jù)庫(kù)訪問代碼嵌入到JSP頁(yè)面腳本中，但文中系統(tǒng)將所有數(shù)據(jù)庫(kù)操作細(xì)節(jié)均實(shí)現(xiàn)在Action對(duì)應(yīng)的JavaBean的內(nèi)部函數(shù)中。例如，在圖3中，對(duì)于用戶登錄的頁(yè)面請(qǐng)求，后臺(tái)服務(wù)需要查詢存儲(chǔ)用戶信息的數(shù)據(jù)表，經(jīng)過匹配來(lái)判斷訪問用戶身份是否合法。這部分所需的數(shù)據(jù)庫(kù)訪問代碼包含在LoginAction的Login函數(shù)中。

3 電子搶答器設(shè)計(jì)

系統(tǒng)提供電子搶答器的目的是協(xié)助完成課上以搶答形式進(jìn)行的小組PK環(huán)節(jié)。教師點(diǎn)擊“開始搶答”按鈕，啟動(dòng)新一輪搶答，學(xué)生點(diǎn)擊手機(jī)界面上的“搶答”按鈕進(jìn)行搶答。要實(shí)現(xiàn)電子搶答功能，需要解決兩個(gè)問題：其一，如何協(xié)調(diào)一輪搶答中學(xué)生和教師之間的相互作用；其二，課堂上教師隨時(shí)會(huì)啟動(dòng)新一輪搶答，如何區(qū)分不同輪次的搶答。

該系統(tǒng)中，電子搶答器的具體實(shí)現(xiàn)過程：首先在教師信息表中增加兩個(gè)字段“Responder_ID”和“First_responder”，分別用來(lái)記錄當(dāng)前搶答編號(hào)和第一個(gè)搶答的學(xué)生學(xué)號(hào)。學(xué)生信息表也增加兩個(gè)字段“Responder_ ID”和“Responder_Time”，分別表示搶答編號(hào)和搶答時(shí)間。教師啟動(dòng)一輪搶答時(shí)，系統(tǒng)提取搶答開始時(shí)刻的時(shí)間戳以及教師編號(hào)兩項(xiàng)信息，應(yīng)用MD5算法生成摘要，作為搶答的唯一編號(hào)填入到教師信息表對(duì)應(yīng)行中，并清空“First_responder”。學(xué)生點(diǎn)擊“搶答”按鈕，讀取教師信息表中“Responder_ID”，以更新學(xué)生信息表對(duì)應(yīng)行的搶答編號(hào)，并記錄學(xué)生搶答的時(shí)間。當(dāng)?shù)谝粋€(gè)學(xué)生搶答時(shí)，還需將其學(xué)號(hào)填入到對(duì)應(yīng)教師信息行的“First_responder”，并立即返回該生信息到頁(yè)面顯示。搶答結(jié)束后，從學(xué)生信息表中讀取對(duì)應(yīng)“Responder_ID”的所有行中，時(shí)間排序在前三名的學(xué)生信息，返回到前端頁(yè)面顯示，實(shí)現(xiàn)了搶答排名功能；同時(shí)，教師信息表中“Responder_ID”和“First_responder”會(huì)被立即清空。

4 系統(tǒng)應(yīng)用與驗(yàn)證

從2017年下學(xué)期開始，該系統(tǒng)已連續(xù)兩個(gè)學(xué)期應(yīng)用在《網(wǎng)絡(luò)技術(shù)與應(yīng)用》課程的翻轉(zhuǎn)課堂教學(xué)中，在協(xié)助開展教學(xué)活動(dòng)、促進(jìn)師生良性互動(dòng)等方面發(fā)揮了積極的作用。師生無(wú)須安裝任何APP軟件，使用手機(jī)上任何一款瀏覽器，即可訪問系統(tǒng)，執(zhí)行簽到、分組、隨堂測(cè)試、電子搶答、隨堂獎(jiǎng)勵(lì)等一系列功能。師生所有的操作痕跡都被保存下來(lái)，作為后續(xù)學(xué)習(xí)效果評(píng)價(jià)的依據(jù)，也成為教學(xué)模式研究的數(shù)據(jù)來(lái)源。

圖6顯示了系統(tǒng)的一些功能界面。其中圖6(a)是教師上課過程的主要界面，點(diǎn)擊“開始搶答”啟動(dòng)搶答過程，系統(tǒng)會(huì)顯示最先搶答的學(xué)生學(xué)號(hào)和所在組號(hào)，內(nèi)頁(yè)的下半部分是各小組名單及獎(jiǎng)勵(lì)數(shù)目。教學(xué)進(jìn)程中如果教師要對(duì)某個(gè)小組進(jìn)行獎(jiǎng)勵(lì)，就在對(duì)應(yīng)小組名單上方選擇指定的星數(shù)，點(diǎn)擊“加分”按鈕即可。每次授課結(jié)束，每個(gè)小組的獎(jiǎng)勵(lì)數(shù)目將作為小組成員課堂的學(xué)習(xí)評(píng)價(jià)結(jié)果。圖6(b)～(d)顯示了教師學(xué)期末成績(jī)統(tǒng)計(jì)界面。其中，圖6(b)顯示線下課堂表現(xiàn)成績(jī)，記錄每次翻轉(zhuǎn)課堂上的獎(jiǎng)勵(lì)數(shù)目以及獎(jiǎng)勵(lì)累計(jì)后折算的分?jǐn)?shù)；圖6(c)顯示來(lái)自中國(guó)大學(xué)慕課的線上學(xué)習(xí)評(píng)價(jià)，包括7次單元測(cè)驗(yàn)、互評(píng)作業(yè)以及線上期末考試成績(jī)等；圖6(d)顯示課程總體評(píng)價(jià)，包括線上、線下平時(shí)學(xué)習(xí)評(píng)價(jià)和學(xué)期末的卷面考試成績(jī)。成績(jī)構(gòu)成比例系統(tǒng)中也可以靈活設(shè)置。

(a)教師上課主界面

(b)課堂學(xué)習(xí)評(píng)價(jià)統(tǒng)計(jì)

(c)線上成績(jī)統(tǒng)計(jì)

(d)總體評(píng)價(jià)統(tǒng)計(jì)

5 結(jié)束語(yǔ)

實(shí)踐證明，翻轉(zhuǎn)課堂教學(xué)模式不僅能夠充分利用優(yōu)秀的慕課資源促進(jìn)學(xué)生的自主學(xué)習(xí)，還能實(shí)現(xiàn)課堂上探究式、合作式學(xué)習(xí)目標(biāo)的達(dá)成。近年來(lái)，“雨課堂”走進(jìn)高校課堂，受到越來(lái)越多的青睞。翻轉(zhuǎn)課堂教學(xué)中也可以引入“雨課堂”，使用其隨機(jī)分組、發(fā)布題目、限時(shí)答題等功能來(lái)促進(jìn)課堂上師生互動(dòng)。但“雨課堂”并非為翻轉(zhuǎn)課堂定制，缺少實(shí)際教學(xué)所需的簽到、搶答和成績(jī)管理等功能。而筆者自主設(shè)計(jì)開發(fā)的翻轉(zhuǎn)課堂輔助教學(xué)系統(tǒng)的目標(biāo)正是滿足實(shí)際翻轉(zhuǎn)課堂的具體教學(xué)需求，從而改善課堂教學(xué)效果和提高教師的工作效率。

文中著重從系統(tǒng)功能需求、關(guān)鍵技術(shù)、設(shè)計(jì)思想、電子搶答實(shí)現(xiàn)細(xì)節(jié)、應(yīng)用驗(yàn)證幾個(gè)方面對(duì)系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)進(jìn)行簡(jiǎn)要的介紹。系統(tǒng)采用javascript+bootstrap(ace)架構(gòu)設(shè)計(jì)前端頁(yè)面，既保證了界面美觀與樣式一致性，又兼容所有主流瀏覽器訪問；引入權(quán)限樣式標(biāo)簽，利用jQuery技術(shù)實(shí)現(xiàn)多角色頁(yè)面定制，為不同類型的訪問用戶呈現(xiàn)不同的頁(yè)面。后臺(tái)基于Struts的服務(wù)框架，利用Hibernate架構(gòu)簡(jiǎn)化數(shù)據(jù)庫(kù)表的訪問與操作，使用Ajax接口實(shí)現(xiàn)前端與后臺(tái)服務(wù)之間以json統(tǒng)一格式進(jìn)行數(shù)據(jù)交互。另外，系統(tǒng)具有較好的擴(kuò)展性，能夠根據(jù)今后出現(xiàn)的新的教學(xué)需求方便進(jìn)行功能擴(kuò)充。