谷銳 徐斌 陳佳

摘要：本文介紹了一種將程序源代碼轉(zhuǎn)化為圖形以實(shí)現(xiàn)代碼質(zhì)量可視化評判的方法。該方法基于可視化理論，遵循程序代碼質(zhì)量評判原則，利用相關(guān)技術(shù)手段將學(xué)生提交的源程序代碼轉(zhuǎn)化為特定圖形，然后教師根據(jù)標(biāo)準(zhǔn)圖形模式對學(xué)生的代碼質(zhì)量進(jìn)行評判。試驗(yàn)表明，這種可視化的評判方法可以在不犧牲評價(jià)質(zhì)量的前提下極大地提高教師的評判速度，進(jìn)而提升整體教學(xué)效率。該方法還能夠有效激發(fā)學(xué)生的學(xué)習(xí)興趣，其實(shí)現(xiàn)思路也可向其他類型課程推廣。

關(guān)鍵詞：可視化;程序代碼質(zhì)量;評判

中圖分類號：G434? 文獻(xiàn)標(biāo)識碼：A? 論文編號：1674-2117（2019）19-0103-03

● 引言

當(dāng)代教學(xué)活動(dòng)正從傳統(tǒng)的課堂授課、考試和人工閱卷轉(zhuǎn)向更為多樣的教學(xué)和考核形式。利用計(jì)算機(jī)技術(shù)進(jìn)行自動(dòng)判分已經(jīng)非常常見，該方法雖然高效，但其結(jié)果不適合作為學(xué)生學(xué)習(xí)效果評判的主要依據(jù)，也不宜作為能力訓(xùn)練的工具?？梢?，現(xiàn)代科技手段在給教學(xué)活動(dòng)帶來便利的同時(shí)，也引入了規(guī)模擴(kuò)大和保持教學(xué)效果的矛盾。雖然目前尚不能完全解決這一問題，但在特定的領(lǐng)域和場合仍可做出一定改變。

目前，各大專院校計(jì)算機(jī)程序設(shè)計(jì)課程的開設(shè)非常普遍，筆者認(rèn)為，可以從這一類課程著手嘗試解決前述矛盾，因此結(jié)合所在學(xué)校的在線Java代碼質(zhì)量檢查系統(tǒng)WorkJava，提出了一種利用可視化技術(shù)進(jìn)行程序代碼質(zhì)量可視化主觀評判的方法。

● 可視化的基本理論

數(shù)據(jù)可視化（data visualization）主要研究數(shù)據(jù)的可視化表現(xiàn)。它不單純是科學(xué)，可以說是科學(xué)和藝術(shù)的混合體。[1]由于人類對圖形（長度、大小、顏色等）具有天然的敏感性，而對數(shù)字的識別和理解需要更高層次的思維活動(dòng)和更長的時(shí)間，因此對于教師測評而言，可視化的測評比基于文字或數(shù)字的測評更便捷，并且有利于減少誤判。

數(shù)據(jù)可視化主要應(yīng)用在兩個(gè)方面：數(shù)據(jù)分析和信息傳遞。[2]利用數(shù)據(jù)可視化技術(shù)可以更好地理解數(shù)據(jù)的含義，發(fā)掘其中隱藏的規(guī)律，并將發(fā)現(xiàn)表達(dá)出來以便他人了解。因此，數(shù)據(jù)可視化技術(shù)對于教學(xué)的主觀評價(jià)而言更有意義：數(shù)據(jù)可視化不但可以幫助教師更快、更好地進(jìn)行教學(xué)評價(jià)，而且可以在完全透明的情況下提高學(xué)生向教師傳遞信息的效率。

目前，數(shù)據(jù)可視化對教育教學(xué)的作用大多體現(xiàn)在教授環(huán)節(jié)，即利用可視化工具提高學(xué)生的學(xué)習(xí)興趣，提升學(xué)生的記憶和理解水平。但教學(xué)是雙向的，不僅要求從教師向?qū)W生方向的信息能夠正確高效地傳遞，還要求從學(xué)生到教師方向同樣能夠?qū)崿F(xiàn)良好溝通。因此數(shù)據(jù)可視化對于教師而言，面臨更多的挑戰(zhàn)是后者：前者是1∶n的關(guān)系，屬于“廣播”;而后者是n∶1的關(guān)系，屬于匯聚。很顯然，不借助現(xiàn)代信息技術(shù)手段，教師只能對來自學(xué)生的信息進(jìn)行“串行化”處理，即逐一地應(yīng)對，這必然會(huì)造成學(xué)生長時(shí)間排隊(duì)，并給教師帶來沉重負(fù)擔(dān)。

教學(xué)評價(jià)可視化中需要解決的主要問題有：第一，找到一組恰當(dāng)?shù)姆杹泶頂?shù)據(jù);第二，將這些符號用恰當(dāng)?shù)男问浇M織起來形成容易理解的圖形;第三，總結(jié)和歸納出評價(jià)中最關(guān)心、最重要問題所對應(yīng)的圖形模式（pattern）。筆者接下來就這三方面問題的實(shí)現(xiàn)展開討論。

● 代碼質(zhì)量可視化檢測方法

對程序代碼質(zhì)量的評判長久以來主要依賴于人的主觀判斷，即通過閱讀程序代碼，發(fā)現(xiàn)所謂的“壞味道”（bad smell）來對代碼質(zhì)量進(jìn)行評判。[3]但對于什么是“壞味道”，沒有一個(gè)精確客觀的定義，一般通過把待評判代碼與標(biāo)準(zhǔn)代碼作比較來得出結(jié)論。因此，筆者嘗試將符合最佳實(shí)踐（best practice）的代碼進(jìn)行可視化，從中找到一些典型的模式，再將其轉(zhuǎn)化為標(biāo)準(zhǔn)的圖形或標(biāo)準(zhǔn)圖形的某種組合。

圖形元素越多越不利于使用者記憶、掌握和理解，對于新手而言尤其如此。因此本研究中只采用圓和直線兩種基本的圖形實(shí)現(xiàn)可視化設(shè)計(jì)。其中圓形代表節(jié)點(diǎn)，對應(yīng)一個(gè)Java類，線代表從屬（包含）或繼承關(guān)系。

節(jié)點(diǎn)的半徑體現(xiàn)了該類的代碼行數(shù)：代碼行數(shù)越多的程序，對應(yīng)節(jié)點(diǎn)的半徑也越大。節(jié)點(diǎn)的顏色沒有特別含義，僅用于區(qū)別不同的類，以實(shí)現(xiàn)更好的視覺效果。一種特殊的節(jié)點(diǎn)是根節(jié)點(diǎn)（root），該節(jié)點(diǎn)位于畫面中心，是所有其他節(jié)點(diǎn)和關(guān)系連線依附的基礎(chǔ)，因此其半徑恒定設(shè)為3個(gè)像素。當(dāng)鼠標(biāo)移動(dòng)到節(jié)點(diǎn)上方時(shí)，可以自動(dòng)顯示該節(jié)點(diǎn)名稱（類名）和準(zhǔn)確的代碼行數(shù)。

線有虛實(shí)兩種，虛線只用在與根節(jié)點(diǎn)相連的節(jié)點(diǎn)上，表示位于整個(gè)圖形的第一層次，并非一定存在從屬關(guān)系。線的粗細(xì)和長短沒有意義，但對于同一節(jié)點(diǎn)而言，距離該節(jié)點(diǎn)近的節(jié)點(diǎn)（由較短的線連接的節(jié)點(diǎn)）為類的屬性，而較遠(yuǎn)者（由較長的線連接）為類的方法。

將節(jié)點(diǎn)與關(guān)系進(jìn)行組合，得到三種基本的圖形模式，如下圖中（1）所示。

A部分為按照J(rèn)avaBean規(guī)范設(shè)計(jì)的用于承載數(shù)據(jù)的類結(jié)構(gòu)。該圖形模式的特點(diǎn)是以一個(gè)直徑較大的節(jié)點(diǎn)為中心，周邊環(huán)繞比較密集的兩層小節(jié)點(diǎn)，且內(nèi)層節(jié)點(diǎn)的數(shù)量大致為外層節(jié)點(diǎn)的兩倍。該圖形模式具有較高的辨識度，非常有利于使用者觀察和識別。

B部分為采用繼承關(guān)系實(shí)現(xiàn)的多種分類的類結(jié)構(gòu)。其外觀為一個(gè)具有一定層次結(jié)構(gòu)的樹枝狀結(jié)構(gòu)。該結(jié)構(gòu)中的主要節(jié)點(diǎn)位于中間“樹枝”的位置，并且直徑較大，次要節(jié)點(diǎn)位于“葉子”位置，并且直徑較小。

C部分為主要邏輯實(shí)現(xiàn)部分。該圖形模式為以一個(gè)較大的節(jié)點(diǎn)為中心，輻射若干直徑大致均勻的子節(jié)點(diǎn)。與A部分的區(qū)別在于沒有明顯的雙層葉子，而且其對應(yīng)比例往往不是兩倍。這一部分的圖形模式較為靈活，需要具體問題具體分析，但只要提供了參考標(biāo)準(zhǔn)，對照分辨并不困難。

圖形的產(chǎn)生需要借助多種技術(shù)完成。首先利用Java編譯器對源代碼進(jìn)行編譯處理，驗(yàn)證基本語法;然后用自動(dòng)化測試工具進(jìn)行程序功能測試;接著利用JavaParser對提交的Java代碼進(jìn)行結(jié)構(gòu)分析，生成JSON字符串;最后交由D3.js按照設(shè)定的圖例進(jìn)行可視化展示。

● 試驗(yàn)驗(yàn)證

為了驗(yàn)證本評判方法，筆者對所在學(xué)校某年級的本科Java語言課（43人）的學(xué)習(xí)效果進(jìn)行檢驗(yàn)。教師預(yù)先做出標(biāo)準(zhǔn)程序代碼，并生成如圖中（1）所示的標(biāo)準(zhǔn)圖形。該圖中的A、B、C三部分是此次測試考核的重點(diǎn)。觀察可見標(biāo)準(zhǔn)圖形中三個(gè)部分分布均勻，每部分圖形均具有良好的對稱性。圖中（2）（3）（4）為從學(xué)生提交的答案生成的圖形中選出的三幅典型對比圖。

圖中的（2）中，僅有X1部分與標(biāo)準(zhǔn)圖形存在一定差異：該部分圖形中的一個(gè)葉子節(jié)點(diǎn)出現(xiàn)了輕微畸大的情況。通過仔細(xì)分析該學(xué)生的程序代碼，發(fā)現(xiàn)是由其類型結(jié)構(gòu)設(shè)計(jì)不合理所致。

圖中的（3）中，X2部分出現(xiàn)了較明顯的畸形，可見該學(xué)生的程序?qū)崿F(xiàn)思路存在重大偏差。通過分析該學(xué)生的程序代碼發(fā)現(xiàn)，該部分程序?qū)崿F(xiàn)雖然能夠正確運(yùn)行并通過功能測試，但結(jié)構(gòu)很差，是典型的實(shí)現(xiàn)了全部功能但設(shè)計(jì)不達(dá)標(biāo)的情況。

圖中的（4）與標(biāo)準(zhǔn)圖形完全不同。從該學(xué)生作業(yè)提交時(shí)間非?？拷刂箷r(shí)間這一現(xiàn)象判斷，該學(xué)生提交的代碼可能是應(yīng)急拼湊而成。編譯測試結(jié)果也表明，該學(xué)生提交的代碼僅通過了編譯，沒有通過全部功能測試。

為了對結(jié)果進(jìn)行更有效的分析，兩位教師對所有學(xué)生的代碼各自獨(dú)立進(jìn)行兩次評判：第一次采用直接閱讀程序代碼的方式，第二次采用圖形查看方式。評判結(jié)果表明，用直接閱讀程序代碼方式，教師平均的評判時(shí)間為37.38秒（平均265.4行Java代碼），而用圖形方式的教師的平均評判時(shí)間為4.01秒。兩種方式下評判結(jié)果平均分差異為0.02，可以認(rèn)為差異較小。

● 總結(jié)與展望

本研究是一次利用可視化方法對教學(xué)效果進(jìn)行檢驗(yàn)的嘗試，從試驗(yàn)結(jié)果看，可以在保證評判效果的基礎(chǔ)上，大幅度提高評判效率（約9倍）。可視化的方法不僅直觀、高效，而且由于在設(shè)定標(biāo)準(zhǔn)和圖形的過程中實(shí)際上已經(jīng)確定了評判的重點(diǎn)，因此可以避免干擾因素對評判結(jié)果的影響。例如，在對程序代碼評判過程中，個(gè)別代碼縮進(jìn)問題可能會(huì)對教師的主觀評分產(chǎn)生較大影響，但可視化評價(jià)可以忽略這一次要問題而使得教師的注意力更加集中，從而得到更公允的評判。評判效率的提升意味著在不影響教學(xué)質(zhì)量的前提下，課程的受眾規(guī)模可以進(jìn)一步擴(kuò)大，這對于提高有限教學(xué)資源的利用率而言大有裨益。

當(dāng)慕課風(fēng)潮過后學(xué)者們開始反思其中存在的問題[4]，可視化的評價(jià)手段有助于提高學(xué)生的學(xué)習(xí)興趣，也能成為在線教學(xué)的有益補(bǔ)充。最新的軟件可視化評估文獻(xiàn)綜述中也發(fā)現(xiàn)了對激發(fā)使用者興趣不夠重視的問題。[5]本試驗(yàn)中很多學(xué)生對由自己編寫的“枯燥”的程序代碼生成的五彩斑斕的圖形產(chǎn)生了很大興趣，甚至?xí)粩嘈拚a以提高圖形的“美觀”程度。很顯然，視覺上的美感和程序質(zhì)量之間可以通過可視化建立起緊密聯(lián)系，這方面值得展開更加深入的研究。

本文提出的思路和方法不僅可以應(yīng)用于程序設(shè)計(jì)教學(xué)，還可以進(jìn)一步推廣到其他學(xué)科領(lǐng)域中去。比如對于簡答或綜述類問題，可以用圖形化的方法進(jìn)行關(guān)鍵詞和答題結(jié)構(gòu)提示，從而加快教師的評判速度，提高評判的準(zhǔn)確率。當(dāng)然，其所需技術(shù)手段和具體實(shí)現(xiàn)方法，仍有待進(jìn)一步探索。

參考文獻(xiàn)：

[1]Manuela Aparicio and Carlos J，Costa.Data visualization[J].Communication Design Quarterly Review，2014（03）.

[2]Stephen Few.The Encyclopedia of Human-Computer Interaction，2nd Ed[M].2019.

[3]（美）福勒.重構(gòu)[M].北京：中國電力出版社，2003.

[4]代紀(jì)燕.學(xué)習(xí)科學(xué)視角下國外慕課發(fā)展面臨的困境與挑戰(zhàn)——以美國為例[J].中國信息技術(shù)教育，2019（05）：102-105.

[5]L.Merino，M. Ghafari，C. Anslow，O. Nierstrasz. A systematic literature review of software visualization evaluation[J].Journal of Systems and Software，2018（144）.