5 分鐘做一套！Canva Code 化學互動教材實作筆記（附指令參考）

先說結論：化學教材適合把抽象概念拆成可操作的分類、拼圖、滑桿與模擬：先讓學生改變一個變因，再立即看到狀態或答案。Canva Code 能快速做原型，但化學符號、因果關係與答案仍必須由教師逐題校對。

本文示範如何用 Canva Code 打造 5 套「化學」互動教材：從基礎的元素分類，到分子鍵拼圖、三態與相變、反應速率模擬，再到綜合測驗模組。每一套都附上可直接貼用的中文指令與實作 Demo 連結，而且全程只用 Emoji 呈現（不用圖片也能很專業）。

① 週期表探險 — 元素分類拖曳配對

介紹：
用關卡制小遊戲讓學生把元素卡拖放到正確區域（如金屬／非金屬／稀有氣體／類金屬），即時回饋正誤與提示。適合 8–12 分鐘暖身，穩固基本概念。

實作 Demo 參考：https://kevin.pptnote.com/canva-code-periodic-table-exploration

範例指令：

建立單頁互動式「週期表探險」；三個狀態：開始／遊戲／結算。

樣式：
- 12 欄置中網格、留白充足；主色 #3B82F6、輔色 #10B981、錯誤 #EF4444、灰 #64748B。
- 僅使用 Emoji，不導入圖片。

元件：
- 標題列：⚛️ 週期表探險（左）；分數⭐與計時⏱️（右）
- 分類卡槽（預設：🟨金屬、🟩非金屬、🟦稀有氣體、🟪類金屬；可替換為特定族）
- 元素卡列（可拖拉）
- 提示列 💡、按鈕（開始／重玩／下一關）

互動：
- 拖曳元素卡到卡槽即判斷；正確 ✅+1 分，錯誤 ❌ 抖動並顯示提示。
- 60 秒倒數；完成或倒數結束即結算，顯示正確率與易錯清單。

關卡：
- #1 分類（四大區）
- #2 指定族（1、2、17、18 族）
- #3 室溫下狀態（固／液／氣）

資料：
elements = [
 {symbol:"H", label:"氫", tags:["非金屬","氣體"], emoji:"💧"},
 {symbol:"Na",label:"鈉", tags:["金屬"], emoji:"🧂"},
 {symbol:"Cl",label:"氯", tags:["非金屬","氣體","鹵素"], emoji:"🟩"},
 {symbol:"Ne",label:"氖", tags:["稀有氣體","氣體"], emoji:"✨"},
 {symbol:"Mg",label:"鎂", tags:["金屬"], emoji:"🔩"},
 {symbol:"C", label:"碳", tags:["非金屬","固體"], emoji:"⬛"}
]

無障礙：
- 鍵盤可操作拖放（焦點＋Enter），ARIA live 播報正誤。

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

---

② 化學組成 — 分子鍵拼圖（離子／共價／金屬）

介紹：
拖放「原子卡」組成合理化合物並判斷鍵結類型（離子、共價、金屬）。送出即顯示錯因與講解，兼具概念理解與練習。

實作 Demo 參考：https://kevin.pptnote.com/canva-code-chemical-composition-learning

範例指令：

建立「分子鍵拼圖」拖放互動，風格專業卡片式；主色 #8B5CF6，強調 #06B6D4；全程使用 Emoji。

元件：
- 任務列（例：組成一個離子化合物）
- 原子卡池：Na➕、Cl➖、H、O、Cu（卡片附價電子提示•）
- 拼圖區（拖放形成配對或群組）
- 說明面板（即時推論鍵結與理由）
- 送出／重置／下一關

邏輯：
- Na➕ + Cl➖ → 離子鍵；H+H+O → 共價鍵（提示極性概念）；Cu+Cu+… → 金屬鍵
- 送出後：✅ 顯示化學式與解釋；❌ 指出價電子或電荷不平衡。

關卡建議：
- #1 NaCl（離子）
- #2 H₂O（共價；附極性說明）
- #3 Cu（金屬）
- #4 進階：CO₂、NH₃

資料：
atoms = [
 {id:"Na+", label:"Na➕", type:"metal", valence:1},
 {id:"Cl-", label:"Cl➖", type:"nonmetal", valence:7},
 {id:"H", label:"H", type:"nonmetal", valence:1},
 {id:"O", label:"O", type:"nonmetal", valence:6},
 {id:"Cu", label:"Cu", type:"metal", valence:1}
]

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

---

③ 三態與相變 — 溫度冒險滑桿

介紹：
用溫度滑桿（-30°C～120°C）操控水的狀態在 🧊／💧／💨 間轉換；在 0°C、100°C 附近彈出知識卡，講解相變與能量（吸熱／放熱）。

實作 Demo 參考：https://kevin.pptnote.com/canva-code-interactive-teaching-aids-for-three-states-and-phase-transitions

範例指令：

建立互動式「三態與相變」教具；主色 #0EA5E9、輔色 #F59E0B；字級清楚高對比；只用 Emoji。

元件：
- 溫度滑桿（-30~120）
- 狀態顯示：🧊 / 💧 / 💨（大尺寸）
- 能量說明：吸熱⬆️／放熱⬇️
- 任務區（找到融點／沸點／使其凝固）
- 回饋列（即時溫度與狀態）

邏輯：
- T < 0 → 🧊；0 ≤ T < 100 → 💧；T ≥ 100 → 💨
- T 在 -2~2 或 98~102：彈出知識卡（相變與溫度平台）

評量：
- 完成任務加分；通關後顯示重點摘要。

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

---

④ 反應速率 — 三因子迷你實驗

介紹：
用三個控制因子（濃度、溫度、表面積）操控反應進度條速度，觀察完成時間差異；搭配情境題讓學生能「說得出為什麼」。

實作 Demo 參考：https://kevin.pptnote.com/canva-code-reactions-and-rates

範例指令：

建置「反應速率模擬器」；主色 #14B8A6，重點 #F43F5E；只用 Emoji 表徵狀態。

元件：
- 控制面板：濃度🧴（Low/Med/High）、溫度🌡️（Low/Med/High）、表面積（🧱/🧊/🌫️）
- 開始反應按鈕、進度條⏳、剩餘時間、結果解釋卡

模型：
- base = 30s
- 濃度：L +10s、M +0s、H -10s
- 溫度：L +10s、M +0s、H -10s
- 表面積：🧱 +10s、🧊 +0s、🌫️ -10s
- 總時間 = clamp(10,60, base + 調整值)

題庫：
quiz = [
 {q:"想讓反應更快，濃度要如何調整？", a:["提高","不變","降低"], correct:0},
 {q:"把固體敲成粉末，速率通常會？", a:["變快","不變","變慢"], correct:0},
 {q:"升高溫度會讓粒子碰撞次數？", a:["增加","不變","減少"], correct:0}
]

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

---

⑤ 化學知識學習模組 — 關卡化小測驗（綜合複習）

介紹：
把前面單元重點（元素分類、鍵結、三態、速率）做成闖關式小測；每題即時回饋、補充知識卡與參考答案，適合課後複習或形成性評量。

實作 Demo 參考：https://kevin.pptnote.com/canva-code-chemistry-knowledge-learning-module

範例指令：

建立「化學知識學習模組」；採卡片式問答、即時回饋；所有圖像以 Emoji。

樣式：
- 清爽白底；主色 #6366F1、強調 #22C55E；卡片陰影極淺。

元件：
- 題目卡（單選或拖放題型）
- 回饋區（✅/❌ + 簡明講解）
- 進度與分數、重玩／下一題按鈕
- 結算畫面（正確率、易錯題回顧、下一步建議）

資料模型（示例）：
items = [
 {type:"choice", q:"Ne 屬於哪一類？", options:["金屬","非金屬","稀有氣體"], correct:2, hint:"✨"},
 {type:"drag", q:"把 Na 與 Cl 配成正確鍵結", target:"離子鍵", hint:"➕➖"},
 {type:"slider", q:"把水調到接近沸點", target:[98,102], hint:"💨"},
 {type:"choice", q:"提高溫度通常讓反應速率？", options:["變快","不變","變慢"], correct:0}
]

無障礙：
- 鍵盤操作、ARIA live；所有顏色配文字說明。

備註：此段為 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 與 Canva 網站差異

Canva Code 化學教材常見問題