基于Bootstrap的混合式學習評價系統的設計

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

摘要：文章介紹了混合式學習評價系統的設計思路，該系統旨在實現高校混合式教學中對學生的合理客觀的學習評價及對教師教學的綜合評價。文章著重介紹了混合式學習評價系統的網頁設計，詳細介紹了網頁中各個模塊的設計及其技術實現。該系統的網頁設計與開發是基于Bootstrap框架實現的，并結合html、css技術，通過自適應設計來適應不同的終端設備，為用戶帶來較好的體驗感，并為混合式評價系統的其他功能實現做好前端服務。該系統提供的評價數據對改進混合式教學效果具有重要意義．

關鍵詞：混合式學習評價系統；Bootstrap；網頁設計

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

0 引言

隨著慕課的不斷推廣應用，線上線下混合學習的模式成為信息化時代大學生的主流學習模式。在高校混合式教學中，由于網絡課程的學習存在“刷課”的現象，且課堂教學中學生的學習表現難以量化，因此建立對學生的合理有效的學習評價非常必要。同時，教師也有必要了解學生對教師混合式教學的多維度評價以改進教學。為此，我們設計了面向高校師生的混合式學習評價系統，結合多維評價指標，實現對學生學業的科學、合理、全面、客觀的評價以及學生對教師教學的綜合評價。

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

1 Bootstrap相關技術

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

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

中導人對應的bootstrap框架的代碼即可編寫對應網頁。

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

2 混合式學習評價系統的設計

2.1 系統設計思路

本混合式學習評價系統的設計包含系統需求分析、系統整體框架設計、系統開發與實現、系統測試與改進4個方面。其中系統整體框架設計包括學習評價和教師評價的指標及其權重設計、系統功能設計、網頁設計、數據呈現界面的設計。系統開發與實現包括學生學習數據及教師評價數據的采集、處理、分析及數據呈現。

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

2.2 用戶需求設計

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

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

3 混合式學習評價系統的網頁設計

3.1 ?首部導航欄實現

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