周琴 肖寧 包泯軒 胡方宇 李嘉俊

摘要：文章介紹了混合式學(xué)習(xí)評(píng)價(jià)系統(tǒng)的設(shè)計(jì)思路，該系統(tǒng)旨在實(shí)現(xiàn)高?；旌鲜浇虒W(xué)中對(duì)學(xué)生的合理客觀的學(xué)習(xí)評(píng)價(jià)及對(duì)教師教學(xué)的綜合評(píng)價(jià)。文章著重介紹了混合式學(xué)習(xí)評(píng)價(jià)系統(tǒng)的網(wǎng)頁設(shè)計(jì)，詳細(xì)介紹了網(wǎng)頁中各個(gè)模塊的設(shè)計(jì)及其技術(shù)實(shí)現(xiàn)。該系統(tǒng)的網(wǎng)頁設(shè)計(jì)與開發(fā)是基于Bootstrap框架實(shí)現(xiàn)的，并結(jié)合html、css技術(shù)，通過自適應(yīng)設(shè)計(jì)來適應(yīng)不同的終端設(shè)備，為用戶帶來較好的體驗(yàn)感，并為混合式評(píng)價(jià)系統(tǒng)的其他功能實(shí)現(xiàn)做好前端服務(wù)。該系統(tǒng)提供的評(píng)價(jià)數(shù)據(jù)對(duì)改進(jìn)混合式教學(xué)效果具有重要意義．

關(guān)鍵詞：混合式學(xué)習(xí)評(píng)價(jià)系統(tǒng)；Bootstrap；網(wǎng)頁設(shè)計(jì)

中圖分類號(hào)：TP319 文獻(xiàn)標(biāo)志碼：A

0 引言

隨著慕課的不斷推廣應(yīng)用，線上線下混合學(xué)習(xí)的模式成為信息化時(shí)代大學(xué)生的主流學(xué)習(xí)模式。在高?；旌鲜浇虒W(xué)中，由于網(wǎng)絡(luò)課程的學(xué)習(xí)存在“刷課”的現(xiàn)象，且課堂教學(xué)中學(xué)生的學(xué)習(xí)表現(xiàn)難以量化，因此建立對(duì)學(xué)生的合理有效的學(xué)習(xí)評(píng)價(jià)非常必要。同時(shí)，教師也有必要了解學(xué)生對(duì)教師混合式教學(xué)的多維度評(píng)價(jià)以改進(jìn)教學(xué)。為此，我們?cè)O(shè)計(jì)了面向高校師生的混合式學(xué)習(xí)評(píng)價(jià)系統(tǒng)，結(jié)合多維評(píng)價(jià)指標(biāo)，實(shí)現(xiàn)對(duì)學(xué)生學(xué)業(yè)的科學(xué)、合理、全面、客觀的評(píng)價(jià)以及學(xué)生對(duì)教師教學(xué)的綜合評(píng)價(jià)。

在混合式學(xué)習(xí)評(píng)價(jià)系統(tǒng)設(shè)計(jì)中，系統(tǒng)界面的網(wǎng)頁設(shè)計(jì)影響著用戶對(duì)系統(tǒng)的第一印象，布局合理簡(jiǎn)約的網(wǎng)頁能使用戶更加快速便捷地獲取其需要的信息。在目前最主流的網(wǎng)頁設(shè)計(jì)的技術(shù)中，運(yùn)用html+css技術(shù)是最為普遍的，這也是筆者在進(jìn)行網(wǎng)頁設(shè)計(jì)時(shí)采用的技術(shù)。本文結(jié)合了Bootscrap框架來對(duì)hcml與css進(jìn)行有機(jī)的整合，提高了開發(fā)效率，使網(wǎng)頁的風(fēng)格與混合式學(xué)習(xí)評(píng)價(jià)系統(tǒng)的主題相吻合。

1 Bootstrap相關(guān)技術(shù)

Boocscrap美國(guó)的Twitter公司開發(fā)的基于HTML、CSS、JavaScript的簡(jiǎn)潔直觀的前端開發(fā)框架，常用來開發(fā)響應(yīng)式布局和移動(dòng)設(shè)備優(yōu)先的Weh項(xiàng)目，能用于快速搭建前端的系統(tǒng)網(wǎng)頁[1-5]?；贐ootstrap框架開發(fā)的前端頁面采用了柵格系統(tǒng)和響應(yīng)式布局，可以自動(dòng)根據(jù)用戶屏幕尺寸調(diào)整網(wǎng)頁，使頁面能夠適應(yīng)手機(jī)、平板、電腦等不同的終端設(shè)備。實(shí)現(xiàn)這個(gè)功能依賴vlew、max -width和min-width三大視圖．Bootstrap框架預(yù)先定義了很多CSS類，使用時(shí)添加相應(yīng)的類名即可．

Bootstrap框架的開發(fā)模式與javaScript類似，首先定義一個(gè)類，實(shí)現(xiàn)類的主要功能，其次是預(yù)定義Plugin函數(shù)，把函數(shù)擴(kuò)展到JQuery原型上，最后通過委托的方式給特定元素綁定事件。Bootstrap框架中預(yù)定義了一套CSS樣式及與之對(duì)應(yīng)的iQuery代碼。相關(guān)拓展文件可到Bootstrap的官網(wǎng)下載，將其放入對(duì)應(yīng)編輯器的文件夾下，其中也包含了相對(duì)應(yīng)的JS文件、iQuary文件和css文件等。進(jìn)行代碼編輯時(shí)，在對(duì)應(yīng)的

中導(dǎo)人對(duì)應(yīng)的bootstrap框架的代碼即可編寫對(duì)應(yīng)網(wǎng)頁。

現(xiàn)有的主流瀏覽器基本支持Bootstrap框架的開發(fā)，有利于提高開發(fā)的效率。Bootstrap是開源的，白Bootstrap 3起，框架包含了貫穿于整個(gè)庫的移動(dòng)設(shè)備優(yōu)先的樣式及功能強(qiáng)大的內(nèi)置組件，易于定制。

2 混合式學(xué)習(xí)評(píng)價(jià)系統(tǒng)的設(shè)計(jì)

2.1 系統(tǒng)設(shè)計(jì)思路

本混合式學(xué)習(xí)評(píng)價(jià)系統(tǒng)的設(shè)計(jì)包含系統(tǒng)需求分析、系統(tǒng)整體框架設(shè)計(jì)、系統(tǒng)開發(fā)與實(shí)現(xiàn)、系統(tǒng)測(cè)試與改進(jìn)4個(gè)方面。其中系統(tǒng)整體框架設(shè)計(jì)包括學(xué)習(xí)評(píng)價(jià)和教師評(píng)價(jià)的指標(biāo)及其權(quán)重設(shè)計(jì)、系統(tǒng)功能設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、數(shù)據(jù)呈現(xiàn)界面的設(shè)計(jì)。系統(tǒng)開發(fā)與實(shí)現(xiàn)包括學(xué)生學(xué)習(xí)數(shù)據(jù)及教師評(píng)價(jià)數(shù)據(jù)的采集、處理、分析及數(shù)據(jù)呈現(xiàn)。

該系統(tǒng)的創(chuàng)新特色主要包含以下4點(diǎn)：（1）該系統(tǒng)實(shí)現(xiàn)的是高?；旌鲜浇虒W(xué)中對(duì)師生的多維評(píng)價(jià)，而非傳統(tǒng)教學(xué)模式下的評(píng)價(jià)。（2）系統(tǒng)的學(xué)生評(píng)價(jià)功能設(shè)計(jì)。該系統(tǒng)結(jié)合混合式教學(xué)中學(xué)生的課堂學(xué)習(xí)與線上學(xué)習(xí)情況，對(duì)學(xué)習(xí)態(tài)度、交流協(xié)作、學(xué)習(xí)效果三個(gè)重要的維度設(shè)置評(píng)價(jià)指標(biāo)，獲取對(duì)學(xué)生的過程性學(xué)業(yè)評(píng)價(jià)，幫助教師全面了解學(xué)生學(xué)習(xí)情況，激發(fā)學(xué)生學(xué)習(xí)動(dòng)力。（3）系統(tǒng)的教師評(píng)價(jià)功能設(shè)計(jì)。該系統(tǒng)結(jié)合教師的課堂教學(xué)和線上教學(xué)情況，從教學(xué)內(nèi)容、教師職業(yè)素養(yǎng)、教學(xué)水平方法、教學(xué)育人效果等多方面獲取教師的教學(xué)評(píng)價(jià)，促進(jìn)教師不斷完善教學(xué)，加強(qiáng)教學(xué)投入。（4）系統(tǒng)的界面設(shè)計(jì)。將Bootstrap框架、hrml、css技術(shù)進(jìn)行融合，對(duì)混合式學(xué)習(xí)評(píng)價(jià)系統(tǒng)進(jìn)行網(wǎng)頁設(shè)計(jì)與開發(fā)，并運(yùn)用數(shù)據(jù)庫管理系統(tǒng)對(duì)數(shù)據(jù)進(jìn)行及時(shí)的導(dǎo)入與分析，以表格、柱狀圖等多種形式呈現(xiàn)評(píng)價(jià)結(jié)果。

2.2 用戶需求設(shè)計(jì)

本混合式學(xué)習(xí)評(píng)價(jià)系統(tǒng)設(shè)置教師端、學(xué)生端兩種用戶模式。教師端主要包含以下5個(gè)功能模塊：學(xué)生學(xué)習(xí)過程管理模塊用于教師對(duì)學(xué)生的出勤、課堂表現(xiàn)、作業(yè)等進(jìn)行管理；數(shù)據(jù)統(tǒng)計(jì)模塊用于教師對(duì)學(xué)生線上學(xué)習(xí)、線上活動(dòng)等數(shù)據(jù)進(jìn)行統(tǒng)計(jì)；學(xué)習(xí)資源管理模塊用于教師發(fā)布并管理學(xué)習(xí)資源：學(xué)習(xí)評(píng)價(jià)模塊用于教師查看學(xué)生的過程性評(píng)價(jià)、終結(jié)性評(píng)價(jià)及總體評(píng)價(jià)；賬號(hào)管理模塊用于教師賬號(hào)管理及密碼修改等。

學(xué)生端主要包含以下5個(gè)功能模塊：學(xué)習(xí)活動(dòng)模塊用于學(xué)生實(shí)現(xiàn)簽到、學(xué)生互評(píng)和資源下載等；反饋互助模塊實(shí)現(xiàn)學(xué)生問題反饋、在線互助和資源共享等：查看學(xué)習(xí)評(píng)價(jià)模塊，學(xué)生可查看自己在學(xué)習(xí)過程中各指標(biāo)評(píng)價(jià)及總評(píng)價(jià)，并可查看班級(jí)平均水平；學(xué)生評(píng)教模塊用于學(xué)生從線上教學(xué)和課堂教學(xué)各維度評(píng)教；賬號(hào)管理模塊用于學(xué)生賬號(hào)管理及密碼修改等。

3 混合式學(xué)習(xí)評(píng)價(jià)系統(tǒng)的網(wǎng)頁設(shè)計(jì)

3.1 ?首部導(dǎo)航欄實(shí)現(xiàn)

使用Bootstrap制作相應(yīng)的首部導(dǎo)航欄主要有以下的步驟：首先使用彈性盒子技術(shù)Flexbox應(yīng)用于頭部header元素，使所有的子項(xiàng)目位于同一行。同時(shí)添加對(duì)應(yīng)的環(huán)繞效果wrap元素使得頁面能夠自適應(yīng)對(duì)應(yīng)的頁面寬度，并進(jìn)行頁面的滾動(dòng)。然后添加一個(gè)自定義容器標(biāo)簽