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

先說結論:地科概念跨越時間與空間,適合用 Canva Code 做排序、循環、分層與密室任務。可從板塊、岩石循環、恆星生命、水循環與地球內部分層開始;生成後要特別核對流程順序、名詞與尺度,避免遊戲簡化成錯誤概念。

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

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

Cleanshot 2025 11 02 At 06.13.29@2x

基礎版指令

這些指令是參考範本,請依自己的對象、目的、資料與輸出需求修改;不是唯一寫法,也不保證每次生成相同結果。

參考範本|請依自己的需求修改;有提供範例資料時,記得一併調整。

【情境敘述】
- 我正在準備讓學生比較板塊邊界、地震與火山帶的互動教材。

【任務講解】
- 請建立「板塊拼圖:地震與火山帶」網頁互動教材(單頁):
2) 元件:
- 可拖曳🧩板塊碎片 7–9 片(屬性:id、正確位置x/y/旋轉、邊界型態:張裂/聚合/轉形)。
- 地震💥/火山🌋點位陣列 15–25 個(紅/橘圓點與三角Emoji)。
- 工具列:🧭提示、↩️重置、▶️開始。
3) 規則:
- 碎片咬合門檻:位置誤差≤20px、角度≤10°;接合後鎖定並✅。
- 若鄰近邊界型態與點位分布一致(如聚合伴隨火山/深源地震)+2 分;否則 -1 分。
- 全數完成或時間到結算,顯示分數與摘要。

【格式補充】
1) 版面:左上標題《板塊拼圖》,右上計分與計時(180s),中央為簡化世界地圖(灰/藍色塊,不用圖片)。
4) UI:深藍標題、淺米底、圓角卡;支援 Tab/Enter;狀態 idle→playing→result。

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


② 岩石循環工廠

Cleanshot 2025 11 02 At 06.13.29@2x

基礎版指令

參考範本|請依自己的需求修改;有提供範例資料時,記得一併調整。

【情境敘述】
- 我正在準備讓學生操作岩石循環路徑的互動教材。

【任務講解】
- 建立「岩石循環工廠」互動教材:
2) 互動:拖曳作用卡到節點;符合轉換(例:沉積岩+⛰→變質岩)則節點點亮+1分,彈出≤14字關鍵語;錯誤則抖動提示。
3) 任務徽章:完成指定路徑(岩漿→火成岩→風化→沉積岩)獲🏅。

【格式補充】
1) 版面:左側流程圖(節點:火成岩🪨、沉積岩🪨、變質岩🪨、岩漿🔥),右側「作用卡」托盤(💧風化搬運、🌪侵蝕、⛰擠壓變質、🔥熔融、⏱時間),下方進度/分數。

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

③ 恆星的一生:從星雲到超新星(新)

Cleanshot 2025 11 02 At 06.13.29@2x

基礎版指令

參考範本|請依自己的需求修改;有提供範例資料時,記得一併調整。

【情境敘述】
- 我正在準備介紹恆星演化路徑的互動教材。

【任務講解】
- 建立「恆星的一生」互動教材:
3) 互動:點擊流程圖,點亮並顯示 50-80 字說明卡,介紹完整 9 個流程。
4) 規則:完成任一路徑得分;兩條都完成顯示總結卡(比較壽命與結局)。

【格式補充】
1) 版面:中央流程圖節點(🌫️星雲→✨原恆星→🌟主序星→分歧A:🟥紅巨星→🌫️行星狀星雲→⚪白矮星;分歧B:🔴紅超巨星→💥超新星→🌀中子星/🕳️黑洞)。

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


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

Cleanshot 2025 11 02 At 06.13.29@2x

基礎版指令

參考範本|請依自己的需求修改;有提供範例資料時,記得一併調整。

【情境敘述】
- 我正在準備讓學生操作水循環與不同路徑的互動教材。

【任務講解】
- 建立「水循環冒險」關卡式教材:
2) 角色:水滴💧,屬性 phase: ["液態","氣態","固態"]。
3) 規則:海洋+🌞→蒸發;高空冷→凝結🌫️;雲量足→降水🌧️;城市分流:下水道→河→海,或滲入地下→泉→河。
4) 任務:完成閉環⭐;加入地下水路徑獲第二顆星;加入人為影響🏭得第三顆星。

【格式補充】
1) 場景:海洋、天空、山地、河川、地下層、城市(色塊+Emoji)。
5) 介面:顯示星數、步數、提示;右側知識卡(每步12–16字);支援鍵盤;狀態 idle→playing→result。

進階版指令

參考範本|請依自己的需求修改;有提供範例資料時,記得一併調整。

【情境敘述】
- 接續上一段的「水循環冒險」,這次要增加影響路徑的事件卡。

【任務講解】
1) 事件卡:暴雨⛈️、乾旱🌵、砍伐🪓、海溫上升🌡️,改變可執行路徑。

【格式補充】
2) 增加說明:每次完成路徑或發生事件,會有小卡說明補充。

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


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

Cleanshot 2025 11 02 At 06.13.29@2x

基礎版指令

參考範本|請依自己的需求修改;有提供範例資料時,記得一併調整。

【情境敘述】
- 我正在準備讓學生辨識地球分層的解謎教材。

【任務講解】
- 製作「地球分層密室」單頁式解謎:
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 建立低成本原型,確認教學流程後,再視需要加入經授權的圖片或圖表。

關於作者

  • 550+場企業與組織培訓
  • 23,000+位學員
  • 150+家教育培訓場域
PPT.note 簡報仙貝

PPT.note 簡報仙貝

簡報培訓・提案接案・AI 工具教學

PPT.note 簡報仙貝成立於 2021 年,由兩位夥伴共同經營,「仙貝」取自日文「先輩(せんぱい)」。我們從 2016 年開始做簡報培訓,2022 年起開辦 Canva 與 AI 工具工作坊。比起把畫面做漂亮,我們更在意一份簡報能不能讓對方聽懂、做出判斷並採取行動;這裡分享 PPT、Canva 與 AI 工具的操作,也分享提案、接案與品牌經營的實戰經驗。

專業領域

簡報策略、提案與接案、品牌經營、PPT、Canva 與 AI 工具教學

服務項目

企業內訓、講座分享、線上課程、品牌合作