從教學到創作：Canva Code 幫你做出會動的數學教材（含使用指令）

在 AI 教育時代，老師不只是教學者，更是設計師。透過 Canva Code，我們能以自然語言生成互動式教材，讓國小與國中學生在遊戲中學習，在操作中理解。這篇文章將帶你看見我們如何一步步使用 Canva Code 製作 6 款數學互動教材。

---

① 分數比大小大對決 Fraction Duel

介紹：學生常搞混異分母分數的大小？這款遊戲讓他們用點擊挑戰分數大小。透過視覺化卡片與即時回饋，學生能在遊戲中養成「分數直覺」。

實作 Demo 參考：https://kevin.pptnote.com/canva-code-fraction-duel

範例指令（分為兩階段）：

建立一個名為「分數比大小大對決」的互動教材。
版面中央放兩張卡片顯示隨機分數（例如：⅔、¾）。
下方有一個「重新出題」按鈕。
當學生點選較大的分數卡時，顯示「✅答對了！」並加分。
若答錯，顯示「❌再想想！」。
使用 Emoji 代替插圖，如 🎴🧠⭐。
背景採乾淨的數學風格（藍白色調）。

新增進階模式：在每回合計時 10 秒，並顯示倒數 ⏱。
加入排行榜區塊，顯示玩家名稱與得分。
延伸題型：加入「哪個分數更接近 1？」的挑戰。

備註：此段為 v1 指令與資料結構，實作後可依實際互動與班級反應微調。

---

② 面積配對王 Area Matcher

介紹：讓學生理解不同圖形的面積公式。以拖曳配對的方式練習矩形、三角形、平行四邊形等形狀的面積關係。

實作 Demo 參考：https://kevin.pptnote.com/canva-code-area-matcher

範例指令（分為兩階段）：

建立一個名為「面積配對王」的互動教材。
左側顯示三種圖形（🏠▱△），右側顯示三張卡片（底×高、底×高÷2、邊×邊）。
學生拖曳右側卡片配對到正確圖形。
答對卡片閃爍 ✨，答錯抖動 😵。
加入挑戰模式：限時 60 秒完成所有配對。

新增題庫系統：隨機出現不同尺寸的圖形與數值。
當學生配對成功後，自動顯示解題過程動畫。
加入「挑戰模式」：限時 60 秒內完成盡可能多題。

備註：此段為 v1 指令與資料結構，實作後可依實際互動與班級反應微調。

---

③ 代數找找看 Algebra Detective

介紹：把代數變成一場破案冒險！學生解方程式找到「犯人代號」，學習方程式解法的過程變成了故事化挑戰。

實作 Demo 參考：https://kevin.pptnote.com/canva-code-algebra-detective

範例指令（分為兩階段）：

建立「代數找找看」教材。
顯示一個偵探場景 🕵️‍♂️🔍。
每個線索包含一個方程式，例如：2x + 3 = 9。
學生輸入答案後按「確認」。
答對顯示「找到線索！」🔎，答錯提示「再檢查一次！」。
解完全部題目後顯示「你抓到犯人了！」🎉。

新增「劇情模式」：解完一題方程式會解鎖下一個線索。
加入角色對話框（🧙‍♂️🧑‍🎓）增加故事性。
提供「提示」按鈕，顯示解方程步驟動畫。
最終解出正確犯人名稱（例如 X=3 → 犯人代號 3）。

備註：此段為 v1 指令與資料結構，實作後可依實際互動與班級反應微調。

---

④ 比例大冒險 Ratio Quest

介紹：學生化身冒險家，必須選出正確的比例才能通關。從地圖比例、食譜配比到建築模型，全部變成任務挑戰。

實作 Demo 參考：https://kevin.pptnote.com/canva-code-ratio-quest

範例指令（分為兩階段）：

建立「比例大冒險」互動教材。
畫面中央為角色 🧗‍♂️，下方出現題目如「2:3 = ? : 9」。
學生選擇正確答案卡。
答對角色前進 🚶‍♂️➡️，答錯停留。
每過一關播放 🎉 動畫。
加入自訂題目功能：老師可輸入比例題。

新增「冒險地圖」🗺️，每一關代表不同情境（食譜、建築、地圖比例）。
每過一關播放動畫 🎉。
加入「自訂挑戰」：教師可輸入自訂比例題。

備註：此段為 v1 指令與資料結構，實作後可依實際互動與班級反應微調。

---

⑤ 小數超市 Decimal Market

介紹：結合生活與數學的最佳教材！學生模擬購物結帳，在購物中練習小數加減與金錢運算。

實作 Demo 參考：https://kevin.pptnote.com/canva-code-decimal-market

範例指令（分為兩階段）：

建立「小數超市」互動教材。
顯示三個商品（🍎$1.25、🍞$2.4、🥛$3.15）。
學生輸入購買數量。
系統計算總金額並要求學生輸入付款金額。
若找零正確，顯示「收銀成功！」💵🎉。
延伸挑戰：加入預算限制與小費計算。

新增「挑戰關卡」：每關預算不同，需選擇商品組合不超過預算。
加入「小費模式」：需計算 10% 服務費。
完成後顯示「今日消費報表」📊。

備註：此段為 v1 指令與資料結構，實作後可依實際互動與班級反應微調。

---

⑥ 圓周率記憶挑戰 Pi Memory Challenge

介紹：讓背誦圓周率變成節奏遊戲！學生挑戰在節拍內輸入正確數字，每 10 位數還能解鎖 π 的有趣知識卡。

實作 Demo 參考：https://kevin.pptnote.com/canva-code-pi-memory

範例指令（分為兩階段）：

建立「圓周率記憶挑戰」教材。
顯示「π = 3.」並有「開始挑戰」按鈕 ▶️。
學生依序輸入正確數字，答對顯示「太棒了！目前記到第 n 位！」🎉。
錯誤則顯示「錯啦！目前紀錄：n 位」。

加入「知識延伸卡」：每記對 10 位數，顯示一張關於圓周率的趣味知識卡（例如：「π 是無限不循環小數」📏）。
增加「排行榜模式」🏆，顯示班級同學的最高紀錄。
完成挑戰時顯示「你是圓周率大師！」🌟。

備註：此段為 v1 指令與資料結構，實作後可依實際互動與班級反應微調。

---

Canva Code 技術細節 Tips

• 先跑得動，再調內容與美感：先直接貼上範例生成第一個版本、確認雛形上 OK，再微調互動效果、字體、色塊、過場效果。
• 如何做一致視覺：做好一套版型 Header / Footer 後，先讓 Canva Code 完成版型，接著再於 Body 加上教材區塊。
• 手機版滑動不順：主要是 Canva Code 生成 CSS 時沒有考量到手機體驗，能請它加上 html {height: 100%;} body {height: 100%;} 讓它操作起來流暢些。
• 如何加入圖片：圖片先上傳到某個網站或圖床伺服器，取得連結後，提供給 Canva Code 放上（例如我們範例的 Logo 就是直接抓官網的連結：https://pptnote.com/wp-content/uploads/2025/04/scimg03G6pj.webp）

---