學習玩轉物理教材！運用 Canva Code 的五大範例靈感（含參考指令）

在這個專案中，我們嘗試用 Canva Code 製作出一系列可直接互動、具備實驗精神的「物理互動教材」。只需用 Canva 內建的互動與指令結構，即可快速產出可用於課堂的小遊戲或模擬器。

---

① 重力大挑戰 Gravity Challenge

介紹：這個教材以「自由落體」為核心，讓學生透過操作觀察物體下落速度與時間，進而理解「重力加速度」與「空氣阻力」的概念。適合用於國中「重力與自由落體」單元，學生可實際比較不同物體的落下速度。

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

Canva Code 基礎版指令：

版面配置 Layout：上方標題「重力模擬器 Gravity Simulator」，中間置中掉落區（落點地面線與刻度），下方控制區。

物體選擇 Objects：建立 3 個按鈕：「羽毛 🪶」「球 🏀」「鐵球 ⚙️」。每個按鈕綁定 currentMass（質量）與 dragCoeff（阻力係數，先預設 0）。

變數與狀態 Variables：
　　- g = 9.81（m/s²），startHeight = 5（m），currentMass 依物體切換。
　　- time = 0、isFalling = false。

動畫邏輯 Animation：點選物體→將物體 Y 座標重置到 startHeight、time 歸零、isFalling=true，以每幀 v = v + g*dt、y = y + v*dt 更新；當 y >= 0（地面）→停止、顯示「下落時間：{time.toFixed(2)} 秒」。

提示語 Prompt：落地後顯示：「重力加速度是否與物體質量無關？」

UI 微互動：落地瞬間微晃動（0.2 秒輕微縮放），加強回饋。

Canva Code 進階版指令：

重力場切換 Gravity Context：新增切換鈕「地球」「月球」「木星」。

空氣阻力 Air Resistance：加入開關「空氣阻力 Air Resistance」；開啟時將更新運動方程 a = g - (k*dragCoeff*v)/currentMass（k 為比例常數），羽毛 dragCoeff 明顯較大。

資料呈現 Data HUD：右側顯示即時式：F = m × g 與 g 值；落地後顯示表格：物體/重力場/是否有阻力/下落時間。

挑戰題 Challenge：按鈕「我來預測！」→彈出選單讓學生選「誰最快落地？」→比對結果，顯示 ✅/❌ 與簡短解釋。

可及性與質感：按鈕有焦點樣式、動畫 300ms 緩動；全畫面留白、統一字級階層。

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

---

② 靜電魔法師 Electrostatic Wizard

介紹：模擬靜電現象，讓學生用拖曳氣球的動作實際「看到」電荷吸附的結果。適合國小自然與國中理化課，作為導入電與磁的第一堂體驗課。

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

Canva Code 基礎版指令：

場景 Scene：桌面背景（簡約淺色），放入「氣球 🎈」「頭髮 💇‍♀️」「紙片 📄」。

狀態與參數 States：
　　- chargeBalloon = 0（-5~+5），isCharged = false（基礎版可直接預設 true）。

拖曳互動 Drag：拖曳氣球接近紙片→當距離 < 80px，紙片以 250ms 動畫上移並輕微旋轉；接近頭髮→頭髮上方髮絲圖示「✨」抖動。

文字提示 Text：顯示「帶電產生吸引力 Charged objects attract!」。

回復機制 Reset：離開距離門檻即恢復原位，避免誤觸。

Canva Code 進階版指令：

摩擦步驟 Friction：新增「摩擦 Rub」按鈕與「拖曳摩擦區域」；當氣球在頭髮上左右摩擦超過 2 秒或點擊摩擦按鈕 3 次→chargeBalloon 累加（顯示電荷條 📶）。

效果門檻 Threshold：isCharged = (chargeBalloon >= 2)；只有達門檻時靠近紙片/頭髮才觸發吸附/飄起特效。

細節與質感：介面加上 8px 圓角卡片、陰影、微漸層；動畫 200–300ms 緩動。

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

---

③ 牛頓動力學挑戰 Newton Motion Challenge

介紹：以牛頓第二定律 F = m × a 為核心，學生可調整「推力」與「質量」滑桿，觀察加速度變化。
幫助學生將公式轉化為直觀的動態體驗。

實作 Demo 參考：https://kevin.pptnote.com/canva-code-newton-motion-challenge

Canva Code 基礎版指令：

版面 Layout：上方標題，中間水平賽道，左端小車 🚗，右端終點旗 🏁，下方控制面板。

控制 Controls：
　　- 滑桿 Force（0–100 N），滑桿 Mass（1–10 kg）。

狀態與方程 States：v=0、x=0、a = F/m（基礎版忽略摩擦）。

流程 Flow：按「開始 ▶️」→每幀更新 v += a*dt、x += v*dt；觸達終點或 10 秒超時即結束。

回饋 Feedback：顯示「加速度 a = {a.toFixed(2)} m/s²」與「完賽時間」。結束彈出小結論：「在相同推力下，質量越大，加速度越小」。

Canva Code 進階版指令：

地面材質 Friction Models：三種選項：「冰面 ❄️（μ=0.02）」「木板 🪵（μ=0.2）」「粗糙 🪨（μ=0.4）」；顯示摩擦力 f = μ × m × g。

動態方程：a = (F - f)/m；若 F < f → 顯示「無法啟動」的提示與微抖動效果。

資料面板 HUD：同步呈現 F、m、μ、f、a；完賽後寫入紀錄表（時間戳、參數、成績）。

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

---

④ 光線探險隊 Light Explorer

介紹：模擬光線反射與折射，讓學生透過角度操作觀察光線行為，視覺化抽象概念。

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

Canva Code 基礎版指令：

裝置與軸線：中央擺放平面鏡 🪞，繪製法線（虛線），左側入射光。

控制 Control：滑桿 θi（0–80°），動態顯示數值。

反射規則：繪製反射光，保持 θr = θi；角標以弧度動畫展現。

即時標註：於畫面下方同步顯示「入射角 = 反射角 Angle of incidence = Angle of reflection」。

Canva Code 進階版指令：

介質 Mediums：下拉選單「空氣 🌫️(n=1.00)」「水 💧(n=1.33)」「玻璃 🪩(n=1.50)」，可自訂 n（1.0–1.6）。

折射 Snell 定律：依 n1 sin θi = n2 sin θt 計算折射角；臨界角條件下顯示「全反射」並轉為反射光動態閃爍。

指引與挑戰：按鈕「哪個介質折射最明顯？」→出題（多選）→答後顯示折射率排序與解析。

學習摘要：小卡片列出 n = sin(i)/sin(r) 與各材質 n 值；提供「一鍵重設」確保多回合實驗流暢。

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

---

⑤ 聲波實驗室 Sound Lab

介紹：模擬聲音在不同介質中的傳播速度，學生可觀察「聲音需要介質」的現象。適合自然科或物理課堂的聲音單元教學。

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

Canva Code 基礎版指令：

介質選擇 Medium：三顆按鈕「空氣 🌬️」「水 💧」「金屬 🧱」。

動畫與速度：按下後播放自左向右的波前動畫；設定示意速度比：空氣 1x、水 4x、金屬 15x（相對速度即可）。

說明文字：顯示「聲音需要介質傳播 Sound needs a medium.」。

節奏音效：依速度播放對應節拍（慢/中/快），並提供靜音切換。

Canva Code 進階版指令：

真空 Vacuum：新增「真空 🪐」按鈕，按下時波形不顯示並提示「真空中無法傳播」。

數據面板 Data：表格顯示介質與示意速度；提供拖曳排序題「請由慢到快排序」。

情境任務：三題小任務（如「哪個介質最快到達右端感測器？」），每題答後給即時反饋與解析。

備註：此段為 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）

---