女兒這學期開始學四邊形，考前希望我給她溫習一下，以我的經驗，這樣的知識通過常規背誦知識點、刷題方法效率不高，如果能有一個直觀的交互界面，想來不錯，於是打開Cluade，開工。花了幾個小時，成品如下：
點擊上圖可以在線訪問，在此將生成過程紀錄下來
以下為主要的提示詞和輸出
製作一個讓小學生理解各種四邊形的動畫，展現這些形狀特性的聯繫
第一次基本已經完成了一個可用的應用，可以看到和最終版本很接近了。
家族樹不是合適的表現形式，因為特殊四邊形之間具有相互變化的聯繫，更像一個網狀，將家族樹改為特殊四邊形之間的聯繫圖，展現各種形狀之間的聯繫，比如正方形的一條邊變長，就成為梯形
雖然有點亂，但是它完全明白我在講什麼
網狀圖內不用包括一般四邊形。另外，聯繫不用直接顯示內容，而是當用戶點擊兩個形狀之間的聯繫線時再顯示同時只顯示一種關係的說明，這樣觀看效果較好，而且可以做記憶訓練
聯繫線和箭頭尺寸太大，請改小
讓用戶可以改變箭頭的方向，增加相反方向的變化的說明，說明文字裡不用再提示變化本身，直接說變化的內容，比如「平行四邊形 → 長方形: 將平行四邊形的角度都變為直角，就成為長方形」，不用顯示「平行四邊形 → 長方形」
四邊形變換關係網裡，每種圖形按其字面意義顯示，而不是同一的圓角框
现在关系图的交互还是不太理想，请改为当点击一个形状时，该形状作为原形状，此时点击另一个形状，给出从原形状到目标形状的变化方式，之后启动新的对话
請將四邊形變換關係網中的箭頭部分的UI和相關代碼去掉，保留只能變化的功能
在关系图中，点击两个图形可以显示图形之间的变化方式，现在请你增加一个功能，将变化方式，用动态的方式显示出来
将「四邊形變換關係網」标题改为「四邊形變換」，为了页面显示紧凑，将各种形状按水平摆放即可，观看变换动画 按钮移到动画下方，让交互更合理
在比较特性时，请将有不同但是关联的特性放在一起比较，比如对边相等和四边相等，是两个有关联的特性，而且对边相等包含了四边相等，比较时将这种关系展现出来
到這裡已經基本差不多了
我打算再增加一個圖形關係圖
在選擇圖形區域增加一個顯示圖形關係圖按鈕，點擊後在主顯示區域切換為一個關係圖，顯示包括一般四邊形、不規則四邊形在內的所有四邊形的特性包含關係，一般四邊形包含梯形和不規則四邊形，梯形包含平行四邊形，平行四邊形包含長方形和菱形，長方形和菱形包含正方形，用內部圓表示包含關係，用相交圓表示共同包含關係。顯示關係圖時，如果點擊選擇圖形區域的其他圖形，切換回圖形特性顯示頁面
圓形看起來比較混亂，且無法說明完整的包含關係，現在將包含關係圖示改為採用長方形來表示，一般四邊形包含不規則四邊形和梯形，表示為一個大的長方形（一般四邊形）被分為兩個部分（不規則四邊形和梯形）以此類推
這裡的顯示比較繁瑣，通過cluade比較難描述修改內容，我就直接對修改了腳本，完成圖如下：
學習一定要有練習才能鞏固，所以我打算增加練習
在圖形關係圖旁邊增加一個挑戰按鈕，點擊後進入答題畫面，題目內容要求將四邊形特性內容製作成是非判斷題給學生進行知識檢驗，數量不限，但要求覆蓋所有圖形的特性，並將每道題和對應的特性高亮顯示建立聯繫，如果答錯，顯示對應的圖形高亮特性，挑戰結束將錯題相關知識點匯總，答題中可以返回首頁
至此，一個知識學習和練習鞏固兼備的課件完成了。
以上內容省略了一些細節的調整，但保留了主要的構建過程。
最終程序大約3000多行，受cluade上下文的限制，如果一個對話過長或處理的點太多，會導致對話異常終止。所以在過程中我基本上都需要每一個主題的改動重新開始一個對話。
後記：
前兩天將這個小程序分享給好友，好友反饋如果每個圖形都能增加一些真實世界中的圖片會比較好。昨晚我用cursor+claude利用google gemini配合先做了相關圖片的生成程序，再完成了圖片的顯示。
在跟目錄下創建一個real目錄，在下面為每個四邊形創建一個子目錄
調用google gemini api，在real目錄對應的子目錄中各生成一張現實世界中對應的實體的圖片
在每種類型的四邊形介紹頁面中，增加一個真實世界中的xxx的功能，打開可以查看一組
从前有个程序员 
發表留言