葛星

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

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

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

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

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

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

二、 Data Structure Vi -sualizations工具介紹

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

1.頁面模塊

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

2. 算法可視化過程

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

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

3. 優(yōu)勢(shì)介紹

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

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

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

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

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

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

1.問題提出

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

2.抽象建模

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

3.問題分析

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

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

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

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

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

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

5.課堂小結(jié)

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

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

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

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

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

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

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

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

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