借助大模型設計交互式課件

摘要：生成式人工智能（GenAI）為教育信息化提供了新的技術范式，借助大模型，教師只需用自然語言描述需求，就能夠得到可直接運行的交互式課件代碼。本文針對教師在交互式課件開發中面臨的技術壁壘，通過三個真實開發案例，演示了大模型如何將編程門檻降低到“說話級操作”，為AI賦能教育提供了可復用的技術路徑。

關鍵詞：生成式人工智能；交互式課件；AI賦能

中圖分類號：G434" 文獻標識碼：A" 論文編號：1674-2117（2025）07-0000-03

問題提出：當教師遇上代碼，大模型能架起橋梁嗎？

“王老師花了三小時搜索拋物線動畫模板，最后只能對著不兼容的Flash文件嘆氣?！薄袄罾蠋熡肞PT制作的隨機點名系統，每次重啟都會重置數據”?！@些場景折射出教師群體在課件開發中的真實困境。幾乎每一位中小學教師都表示“迫切需要交互式課件但缺乏開發能力”，但編程的高門檻讓他們知難而退。

當GPT-4能寫出媲美程序員的代碼，當Midjourney能根據文字生成設計圖，一個問題自然浮現：AI能否幫助教師跨越技術鴻溝？經過一段時間的實踐，筆者發現大模型在課件開發領域展現出驚人潛力——不需要記憶編程語法，甚至不用安裝特定編程軟件，就能獲得定制化的交互式課件。

技術解碼：為什么HTML成為交互課件的最佳載體？

大模型生成Python、JavaScript等代碼早已不是新聞，但真正的突破在于運行環境的平民化。筆者測試了多種編程語言后發現，HTML+CSS+JavaScript的組合具有獨特優勢：①零安裝，任何瀏覽器都能直接運行；②可視化，所見即所得的界面開發；③跨平臺，手機、平板、電腦全兼容；④輕量化，單個文件即可承載完整功能。

以課堂上常用的“隨機點名”功能為例，只需向大模型輸入如下的提示詞：

請生成網頁，實現點擊按鈕隨機顯示學生姓名功能，學生名單包含張三、李四等名字，要求界面美觀，包含開始/停止按鈕。

AI會自動生成完整代碼文件，當復制到記事本文件后，教師只需將擴展名改為“.html”即可雙擊運行，效果如圖1所示。在上公開課時，教師只要提早把學生名字輸入就能使用了。經過測試，DeepSeek、Kimi、豆包、智譜清言、通義千問等大模型生成的代碼，都能夠做到一次性運行成功。

實戰記錄：三個交互式課件的開發日記

案例1：隨機點名系統進化史

教師可以不斷給大模型提出新的要求，如在第一次生成的網頁中，“學生名字”的變換比較慢，而且有兩個按鈕（一個就夠了），如果更換班級使用，還要修改源代碼加入新的名字。面對這些缺陷，可以繼續提出要求：

請增加跑馬燈動畫效果，用一個按鈕切換狀態，按空格鍵也能“開始”并“停止”，姓名顯示區域直徑200像素，使用漸變背景。在下方出現文本框，由用戶輸入姓名，姓名之間用空格分隔。

經過不斷“提示”，生成的代碼就比較人性化了，效果也更加酷炫（如圖2）。需要強調的是，不同的大模型生成代碼的能力不同，同樣的提示詞得到的代碼和效果都不一樣。即使是同一個大模型，生成的代碼效果也是隨機的，要耐心調試。

案例2：智能命題批改系統

小學生需要鍛煉口算能力，之前都是讓家長出題，最后批改的時候也很花時間。于是，可以給大模型這樣的提示詞，生成一個學生自己出題給自己練習的小網頁：

請幫我生成可以自動出題并且批改的網頁，輸入題目的數量（默認5道），點擊“確定”后生成。點擊“提交”則自動改卷，顯示得分（100分制）。試題內容是100以內的加減題。注意，不能出現負數，也不能超過100。

生成的網頁課件能夠隨機命題、自動判題，如圖3所示。

案例3：拋物線演示

在物理課上，關于公式的可視化演示是最常見的。那么教師可以編寫提示詞，制作一個“拋物線演示”課件。筆者特意把描述改為“憤怒的小鳥”場景，用發射力度來代替“初始速度”，大模型也能準確理解，并生成代碼（如圖4）。

需要說明的是，制作這個課件需要較多時間。大模型生成的代碼總是出現各種錯誤，如在畫布上沒有出現動畫效果。不過經過不斷的反饋，最終得到的效果還是令人滿意的：能夠記錄每一次的操作。這些數據可以用來驗證計算，也可以形成一個數據集，用于機器學習方面的研究。

高手秘籍：讓AI聽懂用戶需求的秘訣

在借助大模型編寫交互式課件的過程中，核心的能力在于能夠準確描述自己的需求，同時能清晰地了解網頁的能力，即哪些能做到，哪些不能做到。前者需要教師不斷提升自己的表達能力，做到無歧義。后者則需要多了解一些底層原理，如讀一些計算機科普書籍，多使用一些交互網頁課件。例如，不能要求點擊網頁按鈕就關閉某一臺電腦的電源，也不能期望網頁上隨意調用大模型的能力等。

雖然大模型的能力在不斷升級，它也越來越懂用戶，但有些技巧還是需要掌握，這樣可以讓大模型賦能編寫程序的工作更加輕松。為此，筆者總結了以下三個秘訣：

①與其用語言描述，不如提供界面。

在提示詞中提供準確而細致的描述，本來是基礎條件，如下面這段提示：

創建包含以下元素的HTML界面：三個輸入文本框，分別為輸入電壓（Vin）、電阻（R1）、電阻（R2）；1個“計算”按鈕；輸出文本框（Vout），為輸出電壓。應用分壓公式：Vout=Vin*R2/（R1+R2）。CSS 美化布局。

但實際上，如果能提供一張圖，效果會更好。這個圖可以用截圖、界面設計工具繪制甚至手繪等方式提供。例如，筆者提供了一張程序的截圖，附上一句很簡單的提示詞“這是一個程序的截圖，請用HTML語言，編寫一個類似功能的交互網頁”。通過大模型就能得到想要的代碼，如圖5所示。

②多用專業名詞，準確表達意圖。

計算機有計算機的術語，尤其是編程方面的術語，經過數十年的積累，基本上已經形成規范。大模型能很好地理解這些類似于“行業黑話”的術語。例如，前面提示詞中的“HTML”“文本框”“CSS”都是專用名詞。當然，大模型也在進化，現在也能理解用戶的錯誤表達，如文字框。即使不說美化，可能也會輸出美化后的HTML代碼。

③提供核心代碼，要求完善功能。

信息技術教師經常需要讓大模型編寫Python代碼。而對于一些新出現的庫，大模型如果沒有學習過（指訓練數據中沒有收錄），可能提供的代碼看起來整整齊齊，實際上并不能使用。遇到這種情況，就需要先提供核心代碼，再讓大模型去完善功能。這種思路就如同找醫生看病，需要提供之前的病歷一樣，因為AI并非萬能。

未來圖景：當每位教師都擁有“技術魔法”

當技術門檻消失，教師在AI賦能的過程中可以回歸教育本質，關注教育自身。程序本是人與計算機的溝通語言，掌握編程相當于多了一種表達能力。當然，除了網頁這一類型外，教師們還有更多的選擇，如使用數學動畫神器Manim，使用Python、Processing等。在教師培訓中，筆者不止一次地聽到教師們在感慨“這就像有個聽話的程序員住在電腦里”?；蛟S這就是AI賦能教育的終極形態——沒有炫技，只有恰到好處的融入。