- 登入
- 註冊
從教學到創作：Canva Code 幫你做出會動的數學教材（含使用指令）
先說結論：數學互動教材應讓學生「做一次操作就得到一次可解釋的回饋」。用 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）
Canva Code 數學教材常見問題
Canva Code 能做哪些數學互動？
適合做比較、配對、拖曳、選擇、輸入答案與簡單計分，並用於分數、面積、代數、比例或小數等單元。
怎麼讓數學遊戲不只是好玩？
在指令中寫明學習目標、作答步驟、錯誤提示與解題說明，讓每次回饋都能連回數學概念。
生成後要測試哪些地方？
逐題驗算答案，測試邊界值、隨機題目、重玩、計分與不同螢幕尺寸，避免規則或版面影響作答。
