基于MVC的教學(xué)數(shù)據(jù)可視化平臺(tái)研究

付曉倩，劉志強(qiáng)，劉曉靜

（青海大學(xué)計(jì)算機(jī)技術(shù)與應(yīng)用系，西寧 810016）

0 引言

數(shù)據(jù)可視化技術(shù)是指利用計(jì)算機(jī)圖形學(xué)和圖像處理技術(shù)，將數(shù)據(jù)轉(zhuǎn)化為圖形或圖像顯示在屏幕上，并進(jìn)行交互處理的理論、方法和技術(shù)[1-2]。友好的用戶界面是平臺(tái)搭建的關(guān)鍵，MVC（Model-View-Controller）是隨著Smalltalk Language語(yǔ)言的發(fā)展提出的，是一個(gè)著名的用戶界面設(shè)計(jì)架構(gòu)?；贛VC框架，結(jié)合數(shù)據(jù)可視化插件ECharts及相應(yīng)的Microsoft包開(kāi)發(fā)設(shè)計(jì)友好且趣味十足的用戶界面，簡(jiǎn)潔的后臺(tái)界面，不同用戶權(quán)限的數(shù)據(jù)庫(kù)安全性設(shè)計(jì)，將Access多次成績(jī)進(jìn)行整體或局部可視化分析，同時(shí)分析知識(shí)點(diǎn)的掌握情況，方便教師調(diào)整教學(xué)計(jì)劃，學(xué)生加強(qiáng)該方面知識(shí)學(xué)習(xí)。

1 平臺(tái)開(kāi)發(fā)背景及意義

目前，各大高校普遍存在以下現(xiàn)象：任課教師與學(xué)生除了在課堂上授業(yè)解惑之外，學(xué)生很少跟教師進(jìn)行課外交流，對(duì)于教師而言，了解每個(gè)學(xué)生的學(xué)習(xí)情況和背景信息，需要花費(fèi)太大的時(shí)間和精力，因此亟待開(kāi)發(fā)一個(gè)可視化的數(shù)據(jù)展示平臺(tái)，來(lái)有效地呈現(xiàn)學(xué)生的學(xué)習(xí)情況。

本平臺(tái)運(yùn)用MVC框架，在可視化平臺(tái)上開(kāi)發(fā)可以面向教學(xué)使用的輔助平臺(tái)，使得教師可以及時(shí)知道各班學(xué)生對(duì)知識(shí)點(diǎn)的掌握情況[3]，并對(duì)學(xué)生薄弱的環(huán)節(jié)給予更多的幫助。教學(xué)輔助平臺(tái)能夠使教學(xué)應(yīng)用更加合理有效，取得更好的教學(xué)效果。

2 平臺(tái)開(kāi)發(fā)技術(shù)

MVC框架是將一個(gè)應(yīng)用的輸入、處理、輸出流程分離為Model、View、Controller三個(gè)部分。簡(jiǎn)化軟件開(kāi)發(fā)的復(fù)雜度，實(shí)現(xiàn)數(shù)據(jù)層與表示層的分離，撰寫出更模塊化且可維護(hù)性更高的代碼。其中Model代表模型，用來(lái)定義信息的格式及信息訪問(wèn)的界面。View表示視圖，負(fù)責(zé)用戶界面的數(shù)據(jù)展示。Controller為控制器，控制系統(tǒng)的運(yùn)行的流程以及與瀏覽器的交互和響應(yīng)客戶端的要求等[4]。MVC之所以應(yīng)用廣泛，是因?yàn)閷?duì)于一個(gè)已經(jīng)提過(guò)需求的系統(tǒng)來(lái)說(shuō)，由于程序的高耦合性，新的用戶需求會(huì)使得項(xiàng)目改動(dòng)異常困難，而使用MVC框架設(shè)計(jì)開(kāi)發(fā)平臺(tái)時(shí)，將開(kāi)發(fā)過(guò)程切割為三個(gè)部分，在設(shè)計(jì)階段可以降低一定程度的耦合性，是一個(gè)靈活性很高、擴(kuò)展性很強(qiáng)的平臺(tái)搭建框架。圖1所示顯示了Model、View、Controller之間的相互關(guān)系及與數(shù)據(jù)庫(kù)和服務(wù)器的關(guān)系。

圖1 Web中的MVC框架

ECharts是Enterprise Charts的縮寫，是由國(guó)內(nèi)百度公司開(kāi)發(fā)并開(kāi)源的商業(yè)級(jí)數(shù)據(jù)圖表技術(shù)，支持眾多的瀏覽器，并能夠在移動(dòng)設(shè)備的瀏覽器中流暢運(yùn)行[5]。它可以提供豐富的數(shù)據(jù)可視化圖表，每種類型的數(shù)據(jù)可視化圖表又有多種實(shí)現(xiàn)效果。ECharts提供組件和混搭技術(shù)，支持個(gè)性化圖表定制。

3 系統(tǒng)功能設(shè)計(jì)

基于MVC框架，結(jié)合數(shù)據(jù)可視化的前沿技術(shù)，進(jìn)一步整理開(kāi)發(fā)了常用圖表的數(shù)據(jù)可視化開(kāi)發(fā)庫(kù)和基于圖的數(shù)據(jù)可視化分析開(kāi)發(fā)庫(kù)[6]。在可視化平臺(tái)之上開(kāi)發(fā)可以面向各大高校教師以及學(xué)生的網(wǎng)站，為之提供了一個(gè)簡(jiǎn)潔美觀的平臺(tái)。

本平臺(tái)分別設(shè)置了對(duì)應(yīng)教師和學(xué)生的接口，師生可以隨時(shí)查看每一次的成績(jī)，并下載成績(jī)展示圖，通過(guò)成績(jī)展示圖得知各知識(shí)點(diǎn)的掌握情況，輔助指導(dǎo)學(xué)生調(diào)整學(xué)習(xí)重點(diǎn)或?qū)W習(xí)方法，同時(shí)為教師改進(jìn)教學(xué)方法提供教學(xué)數(shù)據(jù)依據(jù)，以期達(dá)到不斷改進(jìn)學(xué)習(xí)效果、趨近學(xué)習(xí)目標(biāo)的目的。

根據(jù)用戶的權(quán)限不同，教師模塊分為兩個(gè)部分：課程組組長(zhǎng)（管理員）和課程組教師。兩者最主要的區(qū)別就在于只有課程組組長(zhǎng)可以上傳成績(jī)，并在上傳過(guò)程中選擇知識(shí)點(diǎn)和課程科目。課程組組長(zhǎng)可以查看任何一個(gè)班級(jí)的成績(jī)，而課程組普通教師只能查看當(dāng)前所教班級(jí)的成績(jī)。課程組教師在查看成績(jī)的時(shí)候，可以選擇學(xué)生的成績(jī)分段統(tǒng)計(jì)表，若發(fā)現(xiàn)某個(gè)知識(shí)點(diǎn)的分?jǐn)?shù)相較其他知識(shí)點(diǎn)低，那么教師有必要再對(duì)此知識(shí)點(diǎn)進(jìn)行更多的教學(xué)或輔導(dǎo)，從而做到因材施教，達(dá)到更好的教學(xué)效果[7-8]。圖2所示為整個(gè)平臺(tái)的系統(tǒng)功能結(jié)構(gòu)圖。

圖2 平臺(tái)的系統(tǒng)功能結(jié)構(gòu)圖

4 數(shù)據(jù)可視化平臺(tái)設(shè)計(jì)

研究發(fā)現(xiàn)，用圖形和表格代替關(guān)鍵數(shù)據(jù)的呈現(xiàn)，對(duì)用戶的記憶力有很大提升，尤其是具有顯著吸引力的圖表。圖形色彩也能幫助用戶提高對(duì)數(shù)據(jù)的記憶，學(xué)習(xí)者往往能夠記住一個(gè)配有突出顏色和色調(diào)的圖形[9]。在學(xué)習(xí)過(guò)程中，學(xué)習(xí)者能夠記住一些具有吸引力的圖形，而對(duì)簡(jiǎn)單普通的圖形沒(méi)有印象。在顯示學(xué)生成績(jī)模塊，設(shè)置了可以用兩種方式呈現(xiàn)數(shù)據(jù)，即柱狀圖和折線圖，可以選擇任何一種你認(rèn)為更直觀的方式去查看成績(jī)。

此外，為了增加平臺(tái)的吸引性，提高學(xué)生觀察平臺(tái)數(shù)據(jù)過(guò)程中的注意力，鼓勵(lì)學(xué)生們形成良好的競(jìng)爭(zhēng)，使數(shù)據(jù)更好地為其所用，平臺(tái)從趣味性下手，在學(xué)生部分特別設(shè)計(jì)了個(gè)性功能：看一看你在學(xué)校的地位、測(cè)一測(cè)你在學(xué)校的緣分。前者是指可以通過(guò)一系列的數(shù)據(jù)得出來(lái)成績(jī)等級(jí)，此處的等級(jí)名稱借鑒了學(xué)生受眾較多的熱門游戲——王者榮耀的排位設(shè)計(jì)，降低學(xué)生對(duì)學(xué)習(xí)的抵觸感，增加平臺(tái)親切性，界面如圖3所示；后者是列出全校成績(jī)和當(dāng)前登錄學(xué)生的成績(jī)一致的人數(shù)，從感官上刺激并增加學(xué)生的競(jìng)爭(zhēng)心理，間接提高其學(xué)習(xí)的主動(dòng)性和投入度。

5 平臺(tái)應(yīng)用與實(shí)踐

在教學(xué)應(yīng)用實(shí)踐中，圖表可視化發(fā)揮了較大的作用，利用基本圖形的動(dòng)畫可視化模板以及圖表的可視化模板，輸入相應(yīng)的數(shù)據(jù)，做出展示數(shù)據(jù)可視化的應(yīng)用作品[10]。本平臺(tái)對(duì)于學(xué)生和教師的查看功能類似，本章節(jié)以學(xué)生查看為例，介紹平臺(tái)對(duì)于可視化的應(yīng)用和呈現(xiàn)。

學(xué)生成績(jī)的可視化使用ECharts插件實(shí)現(xiàn)，可以用不同的格式呈現(xiàn)出來(lái)。該學(xué)生Access課程考試成績(jī)使用柱狀圖表示為：第一次（90分），第二次（80分），第三次（63.3分），第四次（100分），如圖4所示，亦可以采用折線圖呈現(xiàn)出來(lái)，如圖5所示。圖中紅色實(shí)心部分代表該學(xué)生該課程的每次考試成績(jī)，虛線為平均分（83.53分），滿分設(shè)置為百分制。

圖4 直方圖呈現(xiàn)學(xué)生成績(jī)

圖5 折線圖呈現(xiàn)學(xué)生成績(jī)

從上述兩幅圖中得知，第三次考試相較其他考試，分?jǐn)?shù)明顯低處很多，為了驗(yàn)證此情況的原因，分析推測(cè)是否是某個(gè)知識(shí)點(diǎn)掌握不到位。故選擇該科目中的一個(gè)知識(shí)點(diǎn)，得知該學(xué)生Access課程關(guān)于數(shù)據(jù)庫(kù)基礎(chǔ)知識(shí)的考試成績(jī)?yōu)椋旱谝淮危?00分），第二次（100分），第三次（50分），第四次（100分），如圖6所示。圖中紅色實(shí)線代表該學(xué)號(hào)學(xué)生該知識(shí)點(diǎn)的掌握情況，虛線為平均分（87.5分），滿分設(shè)置為百分制。

圖6 關(guān)于數(shù)據(jù)庫(kù)基礎(chǔ)知識(shí)考試成績(jī)

因此可以得知，這次本學(xué)生的考試成績(jī)較好，證明此知識(shí)點(diǎn)掌握較好，進(jìn)而可以去查看一下其他知識(shí)點(diǎn)的成績(jī)圖，找到知識(shí)點(diǎn)薄弱的環(huán)節(jié)，更好更快地提高自身成績(jī)。

教師亦可以通過(guò)此方法找到學(xué)生相對(duì)較差的部分，此平臺(tái)對(duì)于學(xué)生來(lái)說(shuō)，可以及時(shí)知道自己的不足，對(duì)于教師來(lái)說(shuō)，也可以更直接地看到學(xué)生的劣勢(shì)所在，至此，兩者再有針對(duì)性地進(jìn)行改正，制定個(gè)性化學(xué)習(xí)和施教方案，有針對(duì)性地彌補(bǔ)不足，適時(shí)調(diào)整學(xué)習(xí)方法和側(cè)重點(diǎn)，優(yōu)化調(diào)整施教方案[11]。

6 結(jié)語(yǔ)

本文通過(guò)調(diào)研普通高校課程教學(xué)的現(xiàn)狀，設(shè)計(jì)實(shí)現(xiàn)了教學(xué)數(shù)據(jù)的可視化平臺(tái)。利用MVC框架和圖表表示工具ECharts插件，將可視化的平臺(tái)呈現(xiàn)出來(lái)。通過(guò)對(duì)學(xué)生成績(jī)的篩選，了解學(xué)生的學(xué)習(xí)情況，教師可以根據(jù)具體情況隨時(shí)調(diào)整教學(xué)方法，達(dá)到更好的教學(xué)效果。事實(shí)證明，數(shù)據(jù)可視化平臺(tái)可以滿足多學(xué)科的研究及教學(xué)的應(yīng)用目的，為教學(xué)實(shí)踐提供了一種新的便捷的可視化交互途徑。