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

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

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

中圖分類號：TP319 文獻標志碼：A

0 引言

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

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

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

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

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

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

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

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

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

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

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

2.2 用戶需求設(shè)計

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

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

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

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

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