無痛上手 Canva Code：生成五種生物教材互動遊戲（含生成指令）

這篇一次整理如何用 Canva Code 做出可複用的生物教材。每個主題都給你：簡短介紹 → Demo 參考連結 → 兩階段指令（基礎版 / 進階版）。全部中文、可直接貼上使用；也都已避免使用圖片，僅以 Emoji 圖示呈現。

---

① 食物鏈接力賽 Food Chain Relay

介紹： 以拖曳卡片的方式，快速建立從生產者到高階消費者的能量流向概念。內建限時與即時回饋機制，既像遊戲又不失學術嚴謹。
實作 Demo 參考：https://kevin.pptnote.com/canva-code-food-chain-relay

基礎版指令（貼給 Canva Code）：

生成一個 4 頁的互動教材，主題「食物鏈接力賽」。
- 整體風格：簡潔白底＋淺綠重點，圓角卡片、微陰影、適合國小高年級～國中。
- Emoji 圖示：生產者🌿、草食動物🐇、肉食動物🦊、頂級掠食者🦅、分解者🍄。
- 頁面：
  1. 封面：標題、開始按鈕「開始挑戰」。
  2. 概念頁：以圖示＋一句話說明能量由☀️→🌿→🐇→🦊→🦅；分解者🍄將有機物回收。
  3. 遊戲頁：提供 8 張卡（🌿、🌾、🐛、🐇、🐟、🦊、🦅、🍄），學生拖曳到「食物鏈軌道」5 個空格。
     - 規則：每題 60 秒；放對位置即綠邊框與加 10 分，放錯紅邊框與 −5 分；
       「提示」按鈕每題可用一次，顯示最前兩格應是☀️/🌿（以文字說明，☀️只作為文字提示不成卡片）。
  4. 結束頁：顯示分數、食物鏈正解示例（用 Emoji 直線箭頭 → 連接），按鈕「再玩一次」。
- 數據：追蹤作答時間、總分。
- 易用性：按鈕尺寸至少 44px、卡片可鍵盤操作。
- 所有插圖皆用 Emoji，不使用外部圖片。

進階版指令（貼給 Canva Code）：

在既有專案基礎上新增：
- 第二關「海洋食物鏈」卡片（浮游植物🌊🌿、浮游動物🦐、小魚🐟、大魚🐠、鯊魚🦈、分解者🍄），
  並加入「能量條」動畫，完成每條正確鏈就填滿 20%。
- 第三關「情境卡」：隨機抽 1 張（如「過度捕撈🪝：移除🦈」），
  讓學生修正剩餘鏈條並說明影響（提供 3 個選項讓勾選）。
- 學習檢核：3 題選擇題，解析附生態意義的一句話。
- 保持無圖片、僅 Emoji 與簡潔圖形。

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

---

② 細胞城市 Cell City

介紹： 用「城市職業」隱喻理解胞器功能，從配對到故障診斷，將抽象概念轉成可操作的流程。
實作 Demo 參考：https://kevin.pptnote.com/canva-code-cell-city

基礎版指令：

建立 5 頁互動教材「細胞城市」。
- 風格：科學藍＋淺灰、卡片式 UI、圓角、微陰影。
- Emoji：細胞🧫、細胞核🧠、粒線體🔋、葉綠體🌿、內質網🛤️、高基氏體📦、溶體🧪。
- 頁面：
  1. 封面＋「開始探索」。
  2. 介紹頁：用「職業比喻」條列（🔋像發電廠、📦像包裹中心…）。
  3. 配對遊戲：左側功能描述卡（例：「能量工廠」），右側胞器卡（🔋粒線體、🧠細胞核…），拖曳正確配對。即時回饋、累積分數。
  4. 差異頁：兩張大卡「動物細胞🧫」「植物細胞🧫🌿」，點擊葉綠體🌿與細胞壁🧱才會亮起並顯示說明。
  5. 測驗頁：5 題單選，結束顯示分數與解析。
- 可及性：所有卡片可用鍵盤切換；無圖片、僅 Emoji。

進階版指令：

擴充：
- 新增「微情境關卡」：角色💡收到任務「合成並運送蛋白質」，學生拖曳流程：
  DNA 指令🧠 → 內質網🛤️ → 高基氏體📦 → 細胞膜🚪（順序題）。
- 新增「錯誤診斷模式」：隨機故障 1 個胞器（如🔋粒線體效率下降），
  學生選出可能症狀（能量不足、活動力下降…）。
- 加入總結筆記小卡，可匯出成純文字（不含圖片）。

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

---

③ 光合作用工廠 Photosynthesis Factory

介紹： 把方程式拆成「輸入—處理—輸出」，再用滑桿模擬光、水、二氧化碳對產量的影響，兼顧概念與應用。
實作 Demo 參考：https://kevin.pptnote.com/canva-code-photosynthesis-factory

基礎版指令：

生成 4 頁互動教材「光合作用工廠」。
- 風格：淺綠＋白、清爽科普質感。
- Emoji：☀️、🌿、💧、🍞（葡萄糖象徵）、🌬️（氧氣）、🧪。
- 頁面：
  1. 封面＋開始。
  2. 觀念頁：以「輸入→處理→輸出」三欄示意：
     輸入☀️+💧+二氧化碳（用文字）→處理於葉綠體🌿→輸出🍞+🌬️。
  3. 互動步驟：提供 5 張步驟卡（吸收光能、吸收二氧化碳、吸水、合成葡萄糖、釋放氧氣），
     學生排序；對就綠勾並顯示簡述。
  4. 小測 4 題（單選/是非），滿分 100；結束頁附「再試」按鈕。
- 僅用 Emoji 與形狀，不載入圖片。

進階版指令：

在同專案新增「迷你模擬器」：
- 三個滑桿：光照強度、可用水量、二氧化碳濃度；
  輸出區顯示「產量指示條」與文字解釋（例：「光照偏低→產量下降」）。
- 新增「日夜模式」切換：夜間提示「無光亦可呼吸作用，但不進行光合作用」。
- 加入 3 題應用題（解讀圖表），每題附一句解析。
- 依然只用 Emoji 與圖形。

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

---

④ 人體系統急救隊 Body Systems Rescue Squad

介紹： 從症狀判讀對應系統，到氧氣路徑的分站闖關，讓抽象「系統協作」有連續故事感。
實作 Demo 參考：https://kevin.pptnote.com/canva-code-body-systems

基礎版指令：

製作 5 頁教材「人體系統急救隊」。
- 風格：醫療藍＋白、清楚卡片分區。
- Emoji：🫁❤️🍽️🧠🦴。
- 頁面：
  1. 封面＋開始。
  2. 總覽：五大系統各一張可點卡，點擊顯示主要功能一句話與 2 個常見關鍵詞。
  3. 配對：左側給 10 張「症狀卡」（例：氣喘、心跳過快、胃痛、反射遲緩、扭傷…），
     右側 5 個「系統槽」，學生拖放；正確加分、錯誤回饋。
  4. 情境題：3 題單選，題幹提供 Emoji 提示（如🏃‍♂️+😮‍💨→🫁）。
  5. 結束頁：分數與錯題列表。
- 無外部圖片，僅 Emoji。

進階版指令：

擴充：
- 新增「路徑追蹤」小遊戲：動畫箭頭展示氧氣路徑（鼻腔👃→氣管→支氣管→肺泡🫁→血液❤️）；
  學生點選正確下一站才前進。
- 新增「系統協作題」2 題：例如「運動時為何心跳與呼吸都加快？」提供 3 個選項並解析。
- 新增「急救判斷」是非題 3 題（如扭傷應該冰敷🧊）。
- 保持 Emoji 呈現。

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

---

⑤ 生態平衡建造者 Eco Balance Builder

介紹： 讓學生在「限制條件」下組裝微型生態系，並透過擾動事件學會調整策略、觀察穩定度指數變化。
實作 Demo 參考：https://kevin.pptnote.com/canva-code-eco-balance-builder

基礎版指令：

生成 4 頁教材「生態平衡建造者」。
- 風格：大地色＋溫和漸層、圓角面板、易讀標題。
- Emoji：🌱🌸🦋🐞🦊🦅🍄☀️🌧️💧🌡️。
- 頁面：
  1. 封面＋開始。
  2. 概念頁：用三欄卡片呈現生物因子（🌱🦋🦊…）與非生物因子（☀️🌡️💧）。
  3. 建造頁：給學生三個槽位（生產者、初級消費者、次級/高階消費者）與 8 張卡（🌱🌿🌾🦋🐛🐭🦊🦅），
     拖曳組合；右側三個旋鈕（光、溫、濕），即時顯示「穩定度指數」與訊息（例：「過少初級消費者→不穩定」）。
  4. 測驗頁：4 題應用題，附簡短解析。
- 僅用 Emoji、圖形，不載圖片。

進階版指令：

擴充：
- 新增「擾動事件」隨機卡 1 張（如「乾旱🌵」「外來種🚫🦎」「棲地破碎🧱」），
  要求學生在 30 秒內調整配置以恢復「穩定度指數＞70」。
- 新增「資料紀錄面板」：顯示本輪配置的生產者比例、消費者層級數、穩定度曲線小圖。
- 新增「反思提問」2 題可輸入文字（不含圖片）。

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

---