周琴 肖寧 包泯軒 胡方宇 李嘉俊
摘要:文章介紹了混合式學(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)的頁面寬度,并進行頁面的滾動。然后添加一個自定義容器標簽
,用于存放標題“混合式評學(xué)評教系統(tǒng)”。再通過
3.2 頁面中心模塊實現(xiàn)
學(xué)生端頁面中心五大模塊通過5個自定義的區(qū)域模塊
來實現(xiàn),分別是學(xué)習(xí)活動、反饋互助、查看學(xué)習(xí)評價、學(xué)生評教、賬號管理。其中學(xué)習(xí)活動模塊的高度由stvle=”height:20px”來進行控制,學(xué)習(xí)活動標題下的子標題為參與學(xué)習(xí)活動,其文本的對應(yīng)格式為左對齊< class=”left”>。對應(yīng)的背景圖片由標簽來進行控制,其對應(yīng)圖片的寬度和高度均可進行設(shè)置,同時用標簽來導(dǎo)入對應(yīng)圖片的相對路徑,即可完成對應(yīng)模塊的設(shè)置,主要代碼如下。
學(xué)習(xí)活動
</
span>
參與學(xué)習(xí)活動
</figure>
類似的方法可完成學(xué)生端頁面中心其他四大模塊的相應(yīng)設(shè)置,其網(wǎng)頁呈現(xiàn)效果如圖1所示。教師端的頁面中心模塊實現(xiàn)與此類似。
3.3 尾部導(dǎo)航欄實現(xiàn)
在制作尾部導(dǎo)航欄時,首先添加自定義的分割區(qū)域