基于Data Structure Visualizations的算法教學(xué)實踐研究

葛星

隨著《義務(wù)教育信息科技課程標(biāo)準（2022年版）》對計算思維的強調(diào)，算法知識逐漸被大家所重視。但算法由于本身的抽象性，在中學(xué)生普遍程序設(shè)計基礎(chǔ)薄弱的當(dāng)下，較難高效地開展教學(xué)。因此，許多專家提出借助可視化工具將算法從復(fù)雜的代碼中抽離出來，讓學(xué)生直觀地感受算法本身，從而幫助理解。本文介紹了市面上的幾類算法可視化的方法，并為大家重點介紹Data Structure Visualizations這款工具的特點以及使用方法，同時我也會結(jié)合基于該工具的教學(xué)實踐，檢驗真實效果，并給出借助算法可視化工具的教學(xué)建議，希望可以幫助教師適應(yīng)新課程改革下對算法教學(xué)的要求，從而有效提升學(xué)生的計算思維。

一、可視化的教學(xué)理念

《義務(wù)教育信息科技課程標(biāo)準（2022年版）》的頒布，正式將計算思維確定為一項重要的信息科技學(xué)科核心素養(yǎng)。然而對剛剛步入初中的學(xué)生來說，算法知識依然較為抽象，在傳統(tǒng)講授加練習(xí)的教學(xué)模式下，學(xué)生會消耗大量時間在代碼的編寫上，但對算法思想?yún)s缺乏思考，導(dǎo)致大多數(shù)學(xué)生只能機械地套用基本模板，而無法將其應(yīng)用到解決實際問題上。

在此背景下，許多專家提出了基于可視化理念的算法教學(xué)策略。腦科學(xué)研究發(fā)現(xiàn)，人類1/3大腦都是處理視覺信息，因此在課堂上使用可視化工具來呈現(xiàn)教學(xué)信息，更容易幫助學(xué)生建構(gòu)認知。江蘇師范大學(xué)的王樹梅老師通過一個學(xué)期的對比實驗研究，發(fā)現(xiàn)借助算法可視化工具教學(xué)的班級，在學(xué)時量更少的情況下卻能夠取得更好的平均分成績。北京師范大學(xué)的趙國慶、黃榮懷等教授則以雙重編碼理論為基礎(chǔ)，借助知識制品的角度，從理論層面介紹了知識可視化的研究框架與應(yīng)用方法。

目前主要的算法可視化方法大致有三類：基于交互式動畫、圖形化編程以及演示系統(tǒng)。其中李曉鴻等借助Flash軟件完成了基于學(xué)習(xí)者視角的常見算法的交互式動畫，算法執(zhí)行過程更加直觀，但是其交互性依舊停留在最基本的開始、暫停兩個操作步驟，對算法運行過程中產(chǎn)生的中間數(shù)據(jù)支持不夠。常年執(zhí)教信息學(xué)競賽的一線教師梁雪梅提出了基于Scratch搭積木自主探究式的教學(xué)方法，提升學(xué)生在編程時的主觀能動性，但是這對學(xué)生的前置知識有要求，同時在語境較為抽象的問題中較難借助Scratch準確還原問題背景。杜鑫等一大批大學(xué)教授則致力于算法可視化仿真教學(xué)系統(tǒng)的設(shè)計，能夠有效幫助學(xué)生直觀化地理解算法執(zhí)行過程，但是這類系統(tǒng)往往是基于B/S架構(gòu)的封閉式系統(tǒng)，普通一線教師開發(fā)使用成本較高，不具有普適性。

因此我考慮使用市面上面向公眾開源的在線算法可視化工具，并經(jīng)過試用和對比，綜合各種考慮，最終選擇了Data Structure Visualizations這款工具。借助這款開源算法可視化工具，可以更高效地開展算法教學(xué)，幫助學(xué)生深入理解算法。

二、 Data Structure Vi -sualizations工具介紹

Data Structure Visualizations是美國舊金山大學(xué)計算機科學(xué)家大衛(wèi)·加勒基于HTML5和JavaScript開發(fā)的一款算法可視化網(wǎng)站。其集成了一整套從基本算法到數(shù)據(jù)結(jié)構(gòu)的交互式動畫，并提供了一系列用戶組件，包含特定算法的調(diào)參和常規(guī)動畫的控制功能等。

1.頁面模塊

Data Structure Visualizations網(wǎng)站的頁面設(shè)計簡約大方，一共6個模塊（如圖1），其中最主要的是算法模塊，內(nèi)置了包括遞歸、排序、動態(tài)規(guī)劃、線性表、棧、樹、圖等常見的算法及數(shù)據(jù)結(jié)構(gòu)，找到對應(yīng)算法點進去后可以通過文本框、按鈕等組件來幫助調(diào)整參數(shù)。

2. 算法可視化過程

這款網(wǎng)站是全英文的，但是詞匯量不多，難度也不大。低年級學(xué)生在使用過程中可以借助瀏覽器的翻譯功能，將其轉(zhuǎn)換為中文版（不同瀏覽器翻譯可能有區(qū)別，因此本文后續(xù)演示一律使用原版英文狀態(tài)）。

以常見的冒泡排序為例，我們選擇“Algorithms”模塊下的“Sorting”。系統(tǒng)會根據(jù)需要隨機生成一系列數(shù)據(jù)，并且以條形圖高低的方式來直觀展現(xiàn)數(shù)據(jù)量的大小，然后選擇對應(yīng)“冒泡排序”的按鈕，平臺就會自動調(diào)用后臺的程序，并且會將排序過程中兩兩變量的交換過程用不同顏色直觀地展示在界面上。整個過程中，學(xué)習(xí)者可以根據(jù)進度自主調(diào)整程序運行的速率，隨時暫停、繼續(xù)和回溯，實現(xiàn)了整個算法的可視化。這種直觀的展現(xiàn)非常有利于學(xué)生理解算法的基本思想，為后期的代碼實現(xiàn)提供了堅實的理論支撐。

3. 優(yōu)勢介紹

豐富的算法資源庫 平臺一共提供了包括線性表、樹、圖在內(nèi)的57種算法，基本涵蓋了中學(xué)階段需要涉及的程序，免去了一線教師高額的開發(fā)成本。

在線使用免注冊 這款工具是基于B/S架構(gòu)的在線網(wǎng)站，雖然是全英文，但是響應(yīng)速度極快，且支持包括IOS設(shè)備在內(nèi)的任何瀏覽器。另外這款網(wǎng)站免注冊、無需收費的特點，使其特別適合國內(nèi)中小學(xué)生學(xué)習(xí)。

交互式可控 市面上很多算法可視化平臺雖然也能夠?qū)λ惴ㄟM行形象化表達，但是互動性不足，學(xué)生無法根據(jù)自己的需求自行調(diào)節(jié)程序的進程。

強大的定制功能 該平臺考慮到部分用戶定制化的需求，提供了HTML模板示例以及對應(yīng)的JavaScript文件。借助于此，用戶甚至可以針對平臺尚未提供標(biāo)準可視化的算法自行創(chuàng)建自己的源代碼，并使其可視化展現(xiàn)。

三、可視化工具應(yīng)用分析（實際應(yīng)用案例）

接下來我以斐波那契數(shù)列為例，設(shè)計了基于Data Structure Visualizations的遞歸算法教學(xué)案例。

1.問題提出

有一種兔子，從出生后第3個月起每個月都生一只兔子，小兔子長到第3個月后每個月又生一只兔子。假設(shè)有一只兔子是第3個月出生的，那么它第5個月開始會每個月都生一只兔子。如果一月的時候有1只兔子，假如兔子都不死，請問第n個月（n≤50）的兔子總數(shù)是多少。

2.抽象建模

引導(dǎo)學(xué)生通過表格的形式，列舉出幾個月的兔子數(shù)量，嘗試找出規(guī)律。通過舉例，我們不難發(fā)現(xiàn)，第3個月的兔子數(shù)量是第1、2個月的兔子數(shù)量之和，第4個月的兔子數(shù)量又是第2、3個月的兔子數(shù)量之和，因此我們可以得出通項方程f（n）=f（n-1）+f（n-2），（n≥3）而這實際上就是非常有名的斐波那契數(shù)列。

3.問題分析

我們仔細觀察斐波那契數(shù)列會發(fā)現(xiàn)，第n項的值是通過解決第（n-1）項和第（n-2）項得來的，所以其本質(zhì)是一個將大問題轉(zhuǎn)換為小問題的過程，只要我們知道了起始項f（1）和f（2）的值，那么n無論取多大的值，理論上都是可以通過將其不斷拆解直到f（1）和f（2）無法再分解而求得。這種算法在數(shù)學(xué)上對應(yīng)的是歸納法，在程序設(shè)計中我們稱其為遞歸算法。

總結(jié)遞歸算法的思路，我們發(fā)現(xiàn)，遞歸算法需要包含三個方面，可見下表。

依據(jù)總結(jié)的遞歸算法解題步驟，給出遞歸代碼，形成初始化感性認知，遞歸算法模板如圖2。

4.Data Structure Visua-lizations分析遞歸過程

由于遞歸算法涉及函數(shù)的重復(fù)自我調(diào)用，因此這個過程一定會導(dǎo)致部分學(xué)生難以理解調(diào)用過程中數(shù)據(jù)的走向。我們這時打開Data Structure Visualizations中的斐波那契數(shù)列代碼，以10作為初始參數(shù)，展示程序是如何一步步將大問題逐漸分解為一個個小問題，直到最終求得f（1）和f（2），同時在這個過程中引導(dǎo)學(xué)生發(fā)現(xiàn)遞歸算法的精髓就是要找出跳出循環(huán)的條件，否則會陷入到死循環(huán)的困境中。遞歸算法可視化如圖3。

在這個過程中，我們甚至可以將n的初始值參數(shù)調(diào)大到50，此時程序的執(zhí)行過程是異常緩慢的，可以引導(dǎo)學(xué)生借助工具的暫停、步進等功能探索程序超時的原因，充分發(fā)揮主觀能動性，鼓勵其自主調(diào)試程序以改良遞歸算法的缺陷。

5.課堂小結(jié)

當(dāng)學(xué)生借助Data Structure Visualizations直觀地感受到遞歸算法中函數(shù)調(diào)用的過程后，再讓學(xué)生編寫并嘗試改良初始遞歸代碼，從可視化算法形成直觀感受，到借助平臺自主控制程序進程，自主摸索并深入理解代碼，就能夠讓學(xué)生將學(xué)習(xí)到的算法應(yīng)用到實際問題當(dāng)中，最終實現(xiàn)提高算法背后的計算思維。

四、可視化工具在教學(xué)應(yīng)用中的展望與困難

算法課應(yīng)該怎么上？其是否等同于編程課？這是我在執(zhí)教算法時一直思考的問題。算法的本質(zhì)應(yīng)該是計算思維，代碼只是其作用到計算機的手段。所以在算法教學(xué)上，我希望可以將數(shù)據(jù)可視化軟件融入到教學(xué)環(huán)節(jié)中，將學(xué)生從代碼中剝離出來，直觀地感受算法的執(zhí)行過程，體會其背后所蘊含的思想，以便培養(yǎng)學(xué)生的邏輯思維能力。這是之前傳統(tǒng)課堂所無法實現(xiàn)的，也是我認為可視化工具在日后算法教學(xué)上會得到重視的原因。

雖然可視化工具愈發(fā)受到重視，但是我們也需要了解可視化工具在教學(xué)應(yīng)用上面臨的困難。

1.針對信息科技課程的可視化應(yīng)用的理論研究不夠

由于可視化在知識傳遞和認知建構(gòu)中擁有巨大優(yōu)勢，因此中小學(xué)課堂中越來越多地使用可視化工具進行授課，但是更多把可視化教學(xué)局限在提供一種圖形化展示，而忽略了我們需要在教學(xué)形式上考慮借助可視化工具提供一種從抽象到具體的處理方法，以期高效地解決復(fù)雜知識的抽象問題。西北師范大學(xué)的梁瀟丹對“基于可視化的信息技術(shù)課的教學(xué)設(shè)計”進行了文獻研究，發(fā)現(xiàn)只有38條記錄是有關(guān)聯(lián)的，這說明當(dāng)前國內(nèi)對信息科技課程可視化教學(xué)的研究還太少，課程設(shè)計缺乏理論基礎(chǔ)。

2.可視化工具的教學(xué)資源加工難度偏重

另外，可視化工具在應(yīng)用過程中不可避免地需要教師更多的準備，課堂管理上的難度增加。我采訪發(fā)現(xiàn)，大部分教師并不是不愿意使用可視化工具，而是沒有精力去制作可視化內(nèi)容，更別談設(shè)計可視化教學(xué)了，因此這就需要從組織層面頂層設(shè)計，籌備可視化教學(xué)資源庫，以便進一步推廣使用。

綜上所述，算法可視化工具在目前的實際教學(xué)應(yīng)用中依然存在著許多不足。但或許，對我們而言更重要的是開始，而不是一次就完美。只要我們不斷努力，最終一定可以實現(xiàn)更高效的算法教學(xué)。