- 登入
- 註冊

從零到上線:5 個地科互動教材用 Canva Code 快速完成(附初始指令)
先說結論:地科概念跨越時間與空間,適合用 Canva Code 做排序、循環、分層與密室任務。可從板塊、岩石循環、恆星生命、水循環與地球內部分層開始;生成後要特別核對流程順序、名詞與尺度,避免遊戲簡化成錯誤概念。
我們用 Canva Code 把五套互動教材做成地科展示,全程 不帶入外部圖片、以 Emoji 代圖,指令可直接複製貼上,可以嘗試看看製作簡單的課程網頁互動小遊戲。
① 板塊拼圖:地震與火山帶
- 介紹: 以拼圖理解板塊邊界(張裂/聚合/轉形)與地震、火山分布的關聯,完成拼接並得到即時回饋。
- 實作 Demo 參考:https://kevin.pptnote.com/canva-code-plate-tectonics-puzzle

基礎版指令
這些指令是參考範本,請依自己的對象、目的、資料與輸出需求修改;不是唯一寫法,也不保證每次生成相同結果。
參考範本|請依自己的需求修改;有提供範例資料時,記得一併調整。
【情境敘述】
- 我正在準備讓學生比較板塊邊界、地震與火山帶的互動教材。
【任務講解】
- 請建立「板塊拼圖:地震與火山帶」網頁互動教材(單頁):
2) 元件:
- 可拖曳🧩板塊碎片 7–9 片(屬性:id、正確位置x/y/旋轉、邊界型態:張裂/聚合/轉形)。
- 地震💥/火山🌋點位陣列 15–25 個(紅/橘圓點與三角Emoji)。
- 工具列:🧭提示、↩️重置、▶️開始。
3) 規則:
- 碎片咬合門檻:位置誤差≤20px、角度≤10°;接合後鎖定並✅。
- 若鄰近邊界型態與點位分布一致(如聚合伴隨火山/深源地震)+2 分;否則 -1 分。
- 全數完成或時間到結算,顯示分數與摘要。
【格式補充】
1) 版面:左上標題《板塊拼圖》,右上計分與計時(180s),中央為簡化世界地圖(灰/藍色塊,不用圖片)。
4) UI:深藍標題、淺米底、圓角卡;支援 Tab/Enter;狀態 idle→playing→result。備註:此段為 v1 指令與資料結構,實作後可依實際互動與班級反應微調。
② 岩石循環工廠
- 介紹: 用「作用卡」觸發火成岩 / 沉積岩 / 變質岩 / 岩漿的轉換路徑,連續達成任務獲得徽章。
- 實作 Demo 參考:https://kevin.pptnote.com/canva-code-rock-cycle-factory

基礎版指令
參考範本|請依自己的需求修改;有提供範例資料時,記得一併調整。
【情境敘述】
- 我正在準備讓學生操作岩石循環路徑的互動教材。
【任務講解】
- 建立「岩石循環工廠」互動教材:
2) 互動:拖曳作用卡到節點;符合轉換(例:沉積岩+⛰→變質岩)則節點點亮+1分,彈出≤14字關鍵語;錯誤則抖動提示。
3) 任務徽章:完成指定路徑(岩漿→火成岩→風化→沉積岩)獲🏅。
【格式補充】
1) 版面:左側流程圖(節點:火成岩🪨、沉積岩🪨、變質岩🪨、岩漿🔥),右側「作用卡」托盤(💧風化搬運、🌪侵蝕、⛰擠壓變質、🔥熔融、⏱時間),下方進度/分數。備註:此段為 v1 指令與資料結構,實作後可依實際互動與班級反應微調。
③ 恆星的一生:從星雲到超新星(新)
- 介紹: 以質量為關鍵參數,推理太陽型與大質量恆星從形成到終末(白矮星/中子星/黑洞)的不同路徑。
- 實作 Demo 參考:https://kevin.pptnote.com/canva-code-star-life

基礎版指令
參考範本|請依自己的需求修改;有提供範例資料時,記得一併調整。
【情境敘述】
- 我正在準備介紹恆星演化路徑的互動教材。
【任務講解】
- 建立「恆星的一生」互動教材:
3) 互動:點擊流程圖,點亮並顯示 50-80 字說明卡,介紹完整 9 個流程。
4) 規則:完成任一路徑得分;兩條都完成顯示總結卡(比較壽命與結局)。
【格式補充】
1) 版面:中央流程圖節點(🌫️星雲→✨原恆星→🌟主序星→分歧A:🟥紅巨星→🌫️行星狀星雲→⚪白矮星;分歧B:🔴紅超巨星→💥超新星→🌀中子星/🕳️黑洞)。備註:此段為 v1 指令與資料結構,實作後可依實際互動與班級反應微調。
④ 水循環冒險:從海洋到雲再回家
- 介紹: 以路徑選擇引導蒸發、凝結、降水、逕流與地下水,並加入人為影響情境拿滿星。
- 實作 Demo 參考:https://kevin.pptnote.com/canva-code-water-cycle-adventure

基礎版指令
參考範本|請依自己的需求修改;有提供範例資料時,記得一併調整。
【情境敘述】
- 我正在準備讓學生操作水循環與不同路徑的互動教材。
【任務講解】
- 建立「水循環冒險」關卡式教材:
2) 角色:水滴💧,屬性 phase: ["液態","氣態","固態"]。
3) 規則:海洋+🌞→蒸發;高空冷→凝結🌫️;雲量足→降水🌧️;城市分流:下水道→河→海,或滲入地下→泉→河。
4) 任務:完成閉環⭐;加入地下水路徑獲第二顆星;加入人為影響🏭得第三顆星。
【格式補充】
1) 場景:海洋、天空、山地、河川、地下層、城市(色塊+Emoji)。
5) 介面:顯示星數、步數、提示;右側知識卡(每步12–16字);支援鍵盤;狀態 idle→playing→result。進階版指令
參考範本|請依自己的需求修改;有提供範例資料時,記得一併調整。
【情境敘述】
- 接續上一段的「水循環冒險」,這次要增加影響路徑的事件卡。
【任務講解】
1) 事件卡:暴雨⛈️、乾旱🌵、砍伐🪓、海溫上升🌡️,改變可執行路徑。
【格式補充】
2) 增加說明:每次完成路徑或發生事件,會有小卡說明補充。備註:此段為 v1 指令與資料結構,實作後可依實際互動與班級反應微調。
⑤ 地球分層密室:找出逃脫密碼
- 介紹: 用線索卡判斷地殼 / 地函 / 外核 / 內核的物性差異,最後輸入密碼逃脫;含證據實驗小互動。
- 實作 Demo 參考:https://kevin.pptnote.com/canva-code-earth-layers

基礎版指令
參考範本|請依自己的需求修改;有提供範例資料時,記得一併調整。
【情境敘述】
- 我正在準備讓學生辨識地球分層的解謎教材。
【任務講解】
- 製作「地球分層密室」單頁式解謎:
2) 線索卡≥8:如「導電性高🧲」「溫度最高🌡️」「密度次高📏」「對流發生🔄」「固態金屬🪙」「液態金屬💧」。
3) 互動:拖曳線索到分層;正確吸附並顯示≤18字解說;錯誤抖動提示。
4) 計分:每卡+1;全對顯示 4 位數密碼(由層首字或序號組成),輸入後通關。
【格式補充】
1) 版面:中央同心圓剖面(4 層+Emoji),右側「線索區」,左側「答案區」。
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)
Canva Code 地科教材常見問題
哪些地科概念適合做互動教材?
板塊位置、岩石循環、恆星生命、水循環與地球分層都適合用排序、配對、拖曳或闖關呈現。
生成地科教材時最容易錯在哪裡?
流程順序、空間位置、尺度與名詞容易被過度簡化,因此要逐步核對內容,不要只檢查畫面能否操作。
沒有圖片也能做地科教材嗎?
可以先用形狀、色塊與 Emoji 建立低成本原型,確認教學流程後,再視需要加入經授權的圖片或圖表。



