從零到上線：5 個地科互動教材用 Canva Code 快速完成（附初始指令）

我們用 Canva Code 把五套互動教材做成地科展示，全程 不帶入外部圖片、以 Emoji 代圖，指令可直接複製貼上，可以嘗試看看製作簡單的課程網頁互動小遊戲。

① 板塊拼圖：地震與火山帶

• 介紹： 以拼圖理解板塊邊界（張裂／聚合／轉形）與地震、火山分布的關聯，完成拼接並得到即時回饋。
• 實作 Demo 參考：https://kevin.pptnote.com/canva-code-plate-tectonics-puzzle

基礎版指令

請建立「板塊拼圖：地震與火山帶」網頁互動教材（單頁）：
1) 版面：左上標題《板塊拼圖》，右上計分與計時(180s)，中央為簡化世界地圖（灰/藍色塊，不用圖片）。
2) 元件：
   - 可拖曳🧩板塊碎片 7–9 片（屬性：id、正確位置x/y/旋轉、邊界型態：張裂/聚合/轉形）。
   - 地震💥/火山🌋點位陣列 15–25 個（紅/橘圓點與三角Emoji）。
   - 工具列：🧭提示、↩️重置、▶️開始。
3) 規則：
   - 碎片咬合門檻：位置誤差≤20px、角度≤10°；接合後鎖定並✅。
   - 若鄰近邊界型態與點位分布一致（如聚合伴隨火山/深源地震）+2 分；否則 -1 分。
   - 全數完成或時間到結算，顯示分數與摘要。
4) UI：深藍標題、淺米底、圓角卡；支援 Tab/Enter；狀態 idle→playing→result。

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

---

② 岩石循環工廠

• 介紹： 用「作用卡」觸發火成岩 / 沉積岩 / 變質岩 / 岩漿的轉換路徑，連續達成任務獲得徽章。
• 實作 Demo 參考：https://kevin.pptnote.com/canva-code-rock-cycle-factory

基礎版指令

建立「岩石循環工廠」互動教材：
1) 版面：左側流程圖（節點：火成岩🪨、沉積岩🪨、變質岩🪨、岩漿🔥），右側「作用卡」托盤（💧風化搬運、🌪侵蝕、⛰擠壓變質、🔥熔融、⏱時間），下方進度/分數。
2) 互動：拖曳作用卡到節點；符合轉換（例：沉積岩+⛰→變質岩）則節點點亮+1分，彈出≤14字關鍵語；錯誤則抖動提示。
3) 任務徽章：完成指定路徑（岩漿→火成岩→風化→沉積岩）獲🏅。

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

③ 恆星的一生：從星雲到超新星（新）

• 介紹： 以質量為關鍵參數，推理太陽型與大質量恆星從形成到終末（白矮星／中子星／黑洞）的不同路徑。
• 實作 Demo 參考：https://kevin.pptnote.com/canva-code-star-life

基礎版指令

建立「恆星的一生」互動教材：
1) 版面：中央流程圖節點（🌫️星雲→✨原恆星→🌟主序星→分歧A：🟥紅巨星→🌫️行星狀星雲→⚪白矮星；分歧B：🔴紅超巨星→💥超新星→🌀中子星/🕳️黑洞）。
3) 互動：點擊流程圖，點亮並顯示 50-80 字說明卡，介紹完整 9 個流程。
4) 規則：完成任一路徑得分；兩條都完成顯示總結卡（比較壽命與結局）。

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

---

④ 水循環冒險：從海洋到雲再回家

• 介紹： 以路徑選擇引導蒸發、凝結、降水、逕流與地下水，並加入人為影響情境拿滿星。
• 實作 Demo 參考：https://kevin.pptnote.com/canva-code-water-cycle-adventure

基礎版指令

建立「水循環冒險」關卡式教材：
1) 場景：海洋、天空、山地、河川、地下層、城市（色塊+Emoji）。
2) 角色：水滴💧，屬性 phase: ["液態","氣態","固態"]。
3) 規則：海洋+🌞→蒸發；高空冷→凝結🌫️；雲量足→降水🌧️；城市分流：下水道→河→海，或滲入地下→泉→河。
4) 任務：完成閉環⭐；加入地下水路徑獲第二顆星；加入人為影響🏭得第三顆星。
5) 介面：顯示星數、步數、提示；右側知識卡（每步12–16字）；支援鍵盤；狀態 idle→playing→result。

進階版指令

增加：
1) 事件卡：暴雨⛈️、乾旱🌵、砍伐🪓、海溫上升🌡️，改變可執行路徑。
2) 增加說明：每次完成路徑或發生事件，會有小卡說明補充。

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

---

⑤ 地球分層密室：找出逃脫密碼

• 介紹： 用線索卡判斷地殼 / 地函 / 外核 / 內核的物性差異，最後輸入密碼逃脫；含證據實驗小互動。
• 實作 Demo 參考：https://kevin.pptnote.com/canva-code-earth-layers

基礎版指令

製作「地球分層密室」單頁式解謎：
1) 版面：中央同心圓剖面（4 層＋Emoji），右側「線索區」，左側「答案區」。
2) 線索卡≥8：如「導電性高🧲」「溫度最高🌡️」「密度次高📏」「對流發生🔄」「固態金屬🪙」「液態金屬💧」。
3) 互動：拖曳線索到分層；正確吸附並顯示≤18字解說；錯誤抖動提示。
4) 計分：每卡+1；全對顯示 4 位數密碼（由層首字或序號組成），輸入後通關。
5) UI：深色高對比、卡片投影；支援鍵盤與閱讀順序；狀態 idle→playing→result。

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

---