排序演算法學習

為了改善傳統紙筆教學，使用視覺化工具輔助演算法教學已有一段時間，

視覺化工具誕生於 1980 年代後期，利用圖像表徵方式具體呈現電腦科學概念 (Brown, 1988)。研究者指出使用視覺化教材可以幫助學生克服在學習排序演算 法上的困難 (Byrne, Catrambone, & Stasko, 1999) 。由 Baecker（1981）發表的

「Sorting out Sorting」是知名的演算法視覺化影片。「Balsa」則是使用系統製 作的演算法視覺化工具 (Brown & Sedgewick, 1984)。之後，陸續有許多使用視 覺化來輔助學習排序演算法的工具與研究，以下為不同的視覺化工具於排序演 算法教學的介紹：

1. Sorting out Sorting (Baecker, 1998)：使用影片呈現，利用長條圖來代表 資料元素，長條圖的長度分別對應排序元素值的大小，並使用動畫、

顏色和聲音解釋各種不同的排序演算法，如圖 2-2 所示。

2. Balsa (Brown, 1988)：是一個即時互動的演算法視覺工具，系統增加開 始、停止、上一步等功能，讓使用者可以自行操作，且可同時使用不 Note. Form Sorting out sorting: a case study of software

visualization for teaching computer science (p. 5), Baecker(1998). MIT Press.

369-381

圖 2-3 Balsa Note. Form Exploring algorithms using BalsaII (p.

17), Brown(1988). IEEE Computer Society. 21(5).

3. Xtango ES (Stasko, 1990)：除了可讓使用者和視覺化工具互動外（例如 讓使用者可在任何時間停止排序過程），也可讓使用者自行建立和運行 自己的排序演算法，同樣也支持使用視覺化工具可幫助學習者學習排 序演算法，如圖 2-4 所示。

4. Sort Animator (Dershem & Brummund, 1998)：此系統支持使用視覺化 呈現排序動畫和排序程式碼之間的關係，學生可以指定排序動畫的背 景顏色、排序元素的顏色和排序速度等等，此外，在動畫執行時，會 突顯相對應的程式碼，如圖 2-5 所示。

5. Algorithm Explorer (Carson, Parberry, & Jensen, 2007)：同樣是一個演算 法視覺化工具，但此系統使用 3D 的物件代表常用的資料結構進行演 算法動畫的呈現。此系統介面允許使用者自行控制影片的播放，如圖 2-6 所示。

圖2-4 Xtango ES

Note. Form Tango: A Framework and system for algorithm

animation (p. 28), Stasko, 1990, IEEE Computer Society. 23(9).

圖 2-5 Sort Animator Note. Form Tools for Web-Based sorting animation (p. 223), Herbert & Peter, 1998, SIGSCE 98.

對於視覺化工具設計，Naps 等人 (2002)探討了過去對視覺化工具應用的經 驗，整理出最重要的 11 點對於視覺化工具應用在演算法教學的建議：

1. 提供幫助學習者轉換圖像表徵的資源：雖然視覺化工具可以幫助學習 者理解演算法，但很難同時解釋視覺化設計的表徵跟演算法之間的對 應關係，所以好的視覺化工具必須提供學習者圖像表徵與抽象概念間 的關聯，例如加入文字敘述、旁白。

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

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

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

5. 包含執行歷程：經過數個步驟後的演算法視覺化呈現，學習者容易忘 圖 2-6 Algorithm Explorer

Note. Form Algorithm explorer: visualizing algorithms in a 3D multimedia environment (p.

159), by Carson & Parberry & Jensen, 2007, SIGCSE’07.

記前面的步驟內容，造成對前面步驟的誤解，將執行歷程納入可幫助 學習者解決此問題。

6. 支援有彈性的執行控制：在演算法執行時加入快轉或是倒退等功能，

幫助學習者更能理解演算法的概念。

7. 支援學習者建立屬於自己的視覺化作品：學習者建立屬於自己的視覺 化作品，可增加學習者對於一個演算法的洞察。

8. 支援自定義的輸入資料：讓學習者自己設計特定的輸入資料，可讓學 習者更主動地投入視覺化過程，並了解不同資料的執行結果。

9. 支援動態題問題：為鼓勵學習者在視覺化工具中進行反思，視覺化工 具可使用彈跳式提問要求學生回答問題，藉此讓學生進行反思，促進 思考。

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

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

教育者可根據以上建議，考慮如何利用視覺化工具的特色，來幫助學習者 達到最好的學習成效 (Naps et al., 2002)。雖然現今已有許多好的演算法視覺化 工具可以使用，但還需要更多高品質的視覺化工具，因為仍有許多視覺化工具 沒有滿足其可用性，且現在比起過去的十年來說，較少有新的視覺化工具 (Shaffer, Cooper, & Edwards, 2007)。

雖然動畫方式可以輔助學習排序演算法，但是無法讓學習者親自動手操作 排序演算過程。Boticki 等人 (2012) 設計了手機應用程式「Sortko」幫助學生 於課後學習排序演算法，如圖 2-7 所示，給予一組隨機的數列，於上方給予文 字敘述教學，學生可根據文字敘述進行實際操作排序，並有計分功能，排序完 成後，其結果會送到伺服器，於遊戲結束畫面顯示得分排行。

Shabanah 與 Chen (2009) 提出使用遊戲方式於演算法教學，介紹使用遊戲 作為一種新的形式，讓學生在學習過程能夠有最大的參與感，使用遊戲的好處 是，藉由玩遊戲的過程，因玩家對勝利的渴望、喜愛競爭以及娛樂性，使得學 生有動機去學習演算法，並針對排序演算法遊戲設計提出建議，如圖 2-8 為演 算法遊戲架構，其中對選擇排序遊戲的設計提出以下幾點建議：

1. 於固定的時間內排序完成一組骨牌。

2. 遊戲畫面顯示：遊戲等級、需排序的一組骨牌、可重玩的次數、玩家 分數和時間。

3. 遊戲設計多個關卡，隨著關卡的增加，骨牌的數量增加，而時間減少，

讓遊戲更具有挑戰性。

4. 當遊戲關卡全部完成或是可重複玩的次數為零時，遊戲結束。

5. 遊戲每個關卡都是新的開始。

6. 遊戲使用者介面包含骨牌的圖型、每個骨牌的數值、遊戲聲音（包含 時間結束、贏和輸時的音效）以及遊戲畫面（顯示標題、選單、遊戲 開始、贏和輸）。

7. 遊戲玩法模擬演算法步驟。

圖2-7 Sortko

Note. Form Teaching and learning computer science sorting algorithms with mobile devices: a case study (p.

3), by Boticki, Barisic, Martin, & Drljevic, 2012 , Computer Applications in Engineering Education.

圖 2-8 演算法遊戲架構

Note. Form Designing Computer Games to Teach Algorithms (p. 1122), by

Shabanah, Chen, Wechsler, Carr, & Wegman , 2010.