視覺化工具

程式設計的心理學相關研究指出，對程式的理解需要廣泛的實務經驗作為心智 歷程（McKetihen et al, 1981），程式設計初學者需要仔細閱讀程式碼的區塊或逐行的 操作指令後，了解程式結構，而專家會創造一個心智模型來連結相關結構，融會貫 通（McKetihen et al, 1981；Crosby & Stelovsky, 1989），而上述專家具有的實務經驗 和建立心智模型的歷程，是初學者缺乏的，使得初學者必須花費更多時間，專注於 理解程式碼，無法掌握程式的整體架構，學習效率低落，且傳統的程式設計教學中，

學生可以記住語法結構，但是對於學習動機，也許是錯誤的教學方式：技術導向的 程式設計，也就是對資料的操作，是無趣且無法促進學習的（Guzdial & Soloway, 2002）。Guzdial 和 Soloway（2002）指出要讓學生保持對程式設計的興趣，就需要 更多促進動機和有趣的任務。從 1960 年代以來，當研究者建立許多不同的程式語言 及工具，目的是讓程式設計的初學階段更容易學習，對於更容易、更能促進學習動 機的初學導向程式設計環境相關研究就從未間斷（Kelleher & Pausch, 2005）。

利用視覺化工具輔助程式設計學習，可使學習者較容易理解概念，將概念轉換 到實際的程式設計任務中（Nevalainen & Sajaniemi, 2006）。視覺化工具誕生於 1980 年代後期，目的是創造和互動地探索電腦科學概念的圖像表徵（Brown, 1988）。

Kasurinen 等人將視覺化程式設計工具應用到程式設計課程還有作業中，提升學生的 學習動機和興趣，研究結果顯示，學生對於視覺化工具的使用，有正面的評價與高 度的興趣（Kasurinen, Purmonen, & Nikula, 2008)。Chaffin 等人將視覺化使用在深度 優先搜尋的遞迴概念的學習上，結果顯示學生在學習成就上有顯著增長，多數學生 也展現了學習的熱忱和繼續學習複雜概念的可能性(Chaffin, A., Doran, K., Hicks, D.,

& Barnes, T., 2009)。

視覺化工具應用於教學借鑑自許多相關學門，包含排版學、心理學和演算法等，

難有統整性的實務建議，Naps 等人（2002）探討了過去對於視覺化工具應用的經驗，

整理出最重要的 11 點對於視覺化工具應用在演算法教學的建議：

(1) 提供幫助學習者轉換圖像表徵的資源：視覺化工具必須提供學習者圖像表徵 與抽象概念間的關聯，例如加入文字敘述、旁白。

(2) 適應不同知識層級的使用者：視覺化工具應符合初學者和進階學習者的需 求。

(3) 提供多重觀點：視窗中呈現不同的觀點對應相同的資訊，可促進學習者對抽 象概念的理解，例如將演算法以程式碼的控制流程和資料結構的狀態同時呈 現。

(4) 納入效能資訊：效率分析對演算法而言是很重要的一部份，加入效能資訊來 幫助學習者了解演算法執行效率，可增強學習者對演算法的理解。

(5) 納入執行歷程：經過數個步驟後的演算法視覺化呈現，學習者容易忘記前面 步驟的內容，造成對前面步驟的誤解，納入執行歷程可幫助學習者解決這個 問題。

(6) 支援有彈性的執行控制：如演算法執行時快轉或是倒退，都能幫助學習者更 能理解演算法的概念。

(7) 支援學習者建立屬於自己的視覺化作品：學習者建立屬於自己的視覺化作品，

可增加學習者對於一個演算法的洞察。

(8) 支援自定義的輸入資料集：讓學習者自己設計特定的輸入資料，可讓學習者 更主動地投入視覺化歷程。

(9) 支援動態提問：為鼓勵學習者在視覺化工具中進行反思，視覺化工具可使用

「彈跳式提問」要求學生回答問題，藉此讓學生進行反思，促進學習。

(10) 支援動態回饋：視覺化工具需要針對學習者不同的操作方式而有不同的回 饋。

(11) 搭配視覺化的說明：根據雙碼理論，若視覺化工具搭配適當說明，可幫助 學習者了解演算法概念。

考量上述建議，教學者必須仔細衡量如何應用視覺化工具，來幫助學習者達到最好 的學習成效（Naps et al, 2002）。

在 Kelleher 和 Pausch(2005)的分類中，視覺化工具被分類在「教學系統」中，

在這個類別之下又分成兩個子類別：「微世界」（microworlds），例如 Karel the Robot(Pattis & Stehlik, 1994)和「直接互動環境」（direct interaction environments），例 如 BlueJ(Kölling, Quig, Patterson & Rosenberg, 2003)。「微世界」的特點是對於物件、

物件的狀態和物件的行為有絕佳的視覺化呈現，然而「微世界」缺少的則是對物件 的直接互動；「直接互動環境」的長處則是對於物件的直接互動性，且針對簡化撰寫 程式碼過程的困難，提供輔助工具如語法標記和結構化程式碼閱讀等增進程式設計 正確性。

以下針對幾個較為熱門的視覺化工具做介紹：

（1） Logo：

Logo 是由 Bolt, Beranek 和 Newman(BBN)在 1967 年的研究中，作為教學目的而 創造的程式語言，Logo 語言受 Lisp 程式語言影響甚深，Lisp 也是最初用來發展 Logo 的程式語言。Logo 最廣為人知的部分在 1969 年所發展出的「海龜圖像」，指的是視 覺化表徵的程式輸出，簡單且平易近人，但 Logo 也有進階的結構如輸出、輸入操 作、迭代、資料結構和演算法。然而 Logo 的出現已超過 40 年，已不符合現今的主 流程式語言如 C、Java 或 Python，因此 Logo 語言對於實務上的關聯性略顯薄弱。

（2） Karel the Robot（Pattis et al, 1997）：

Karel the Robot 的想法最初為 Richard 在 1981 年所提出（Pattis, Robers, & Stehlik, 1994），使用類似 Pascal 的程式語言，爾後也被採用不同的程式語言實作出來，像是 Java。學習者在 Karel 環境中，可以在二維環境中移動一個機器人，在環境中也可以

常在一個標準的編輯器和執行環境中實作，在環境中移動中的機器人將程式執行結 果以圖像化的表徵呈現，讓學習者可以容易地觀察程式撰寫結果，所造成機器人行 為上的不同，這讓學習者在實作時能使用到「問題解決」的思考技巧。但是 Karel 只提供了基本的控制，並未對物件本身提供任何的互動機制。Karel 的指令基礎受 到某種程度上的限制，且作為一種程式語言，Karel 只適合用在程式設計課程最初 的課程，而無法作為一個真正的程式語言來進行教學（Kelleher & Pausch, 2005）。

（3） BlueJ

BlueJ 是一個特別設計來進行教學的程式設計環境，鼓勵學習者定義「類別」

（classes）和類別間的關係，利用像是 UML 的方式表現出來，如果定義的類別編譯 成功，學習者就可實作出物件。BlueJ 的一項優點是能清楚的分別類別與物件的概念，

但是缺點是 BlueJ 的視覺化呈現只有物件的名稱和所屬類別，並沒有呈現任何物件 的狀態和行為。

（4） Alice

Alice 是一個物件優先導向的程式設計環境，具有可讓學習者控制的 3D 動畫呈 現，和內建的物件導向程式語言。為輔助程式設計歷程，Alice 環境提供一個可讓學 習者拖拉指令和物件的編輯器，並避免違反語法規則的錯誤操作，避免初學者受困 於語法錯誤，而無法學習重要概念。

（5） Greenfoot

Greenfoot 是一個針對程式設計教學的整合發展環境，目標學習者為 14 歲以上 的程式設計初學者，也適合大學階段教學。Greenfoot 結合視覺化、互動性輸出和 Java 程式設計，其設計目標是對物件導向程式設計的重要概念提供清楚的視覺化呈現，

使重要概念更容易理解。這使得程式設計教學不需要從語法或是程式碼開始學起，

可先介紹重要的程式設計基本概念。Greenfoot 作者 Kölling（2010）說明其設計理 念：

1. 從學生觀點來說，Greenfoot 的目標是讓學生從事程式設計學習更加投入、

富有創造性和獲得滿足。以下依據學生觀點的設計理念分為八個子目標：

1.1. 容易使用（ease of use）：系統必須容易使用，也就是讓學生學習時避 免操作上的問題造成困難。

1.2. 可探索性（discoverability)：系統必須可探索，也就是必須讓學習者找 到他們所需要使用的功能。

1.3. 提供促進投入的功能性（support engaging functionality）：系統必須加 入圖形、動畫和聲音等可以讓學生投入於學習中。

1.4. 彈性（flexibility）：系統必須能依照不同年齡和興趣的學生提供不同的 場景，引起學習者興趣並投入於學習中。

1.5. 快速的回饋循環（quick feedback loop）：系統必須能夠給予快速且頻繁 的成功經驗，也就是讓學習者在實作時能隨時執行、觀察和得到視覺 性回饋。

1.6. 取得容易（availability）：系統必須容易取得（包含花費），能在大部分 的作業系統、硬體之下運作。

1.7. 社交互動、分享（social interaction/sharing）：系統必須提供學習者間分 享和溝通的管道，社交互動是投入於創造的強大驅力。

1.8. 可擴充性（extendibility）：如果系統可以擴充，那麼就可以連結系統和 學習者的興趣。

2. 從教師觀點來說，Greenfoot 的目標是能夠幫助教師講解重要的程式設計概 念。下依據教師觀點的設計理念分為六個子目標：

1.1. 視覺化（visualization）：程式設計中的重要概念能夠視覺化呈現。

1.2. 互動（interactin）：透過與系統中的互動來了解程式設計概念。

1.3. 一致性的心智模型（consistent mental model）：系統中所有的表現必須 正確地反應出程式設計概念的本質，讓學習者從實驗與觀察中得到正 確的結果。

1.4. 概念先於語法（concepts before syntax）：語法不應是學習程式設計最 初的阻礙，那會直接影響學生獲得概念，且降低學習動機。

1.5. 避免認知超載（avoid cognitive overload）：許多程式設計發展環境的互 動性有很高的複雜度，讓初學者難以學習。認知負載理論告訴我們心 智歷程的容量是有限的（Miller, 1956），同時給予認知挑戰的數量直接 影響了學習的能力。讓學生保持可處理的認知負載量，所有額外的複 雜度都應該避免。

1.6. 支援教師（support for teachers）：中等學校的教師通常沒有太多時間發 展教材或是參加專業成長與訓練，因此，系統必須提供教師額外的支 援，像是教材的分享與討論。

上述目標皆影響了 Greenfoot 在使用者介面及互動性的設計（Kölling, 2010）。

上述目標皆影響了 Greenfoot 在使用者介面及互動性的設計（Kölling, 2010）。