無痛上手 Canva Code:生成五種生物教材互動遊戲(含生成指令)

先說結論:生物教材可把關係與流程變成配對、分類與系統任務:食物鏈、細胞構造、光合作用、人體系統與生態平衡都適合。Canva Code 能快速產生互動原型,但物種關係、器官功能與過程敘述仍要由教師校對。

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


① 食物鏈接力賽 Food Chain Relay

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

Cleanshot 2025 11 02 At 06.13.29@2x

基礎版指令(貼給 Canva Code):

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

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

【情境敘述】
- 我正在準備讓學生練習食物鏈概念的互動教材。

【任務講解】
- 生成一個 4 頁的互動教材,主題「食物鏈接力賽」。
- 頁面:
1. 封面:標題、開始按鈕「開始挑戰」。
2. 概念頁:以圖示+一句話說明能量由☀️→🌿→🐇→🦊→🦅;分解者🍄將有機物回收。
3. 遊戲頁:提供 8 張卡(🌿、🌾、🐛、🐇、🐟、🦊、🦅、🍄),學生拖曳到「食物鏈軌道」5 個空格。
- 規則:每題 60 秒;放對位置即綠邊框與加 10 分,放錯紅邊框與 −5 分;
- 「提示」按鈕每題可用一次,顯示最前兩格應是☀️/🌿(以文字說明,☀️只作為文字提示不成卡片)。
4. 結束頁:顯示分數、食物鏈正解示例(用 Emoji 直線箭頭 → 連接),按鈕「再玩一次」。
- 數據:追蹤作答時間、總分。

【格式補充】
- 整體風格:簡潔白底+淺綠重點,圓角卡片、微陰影、適合國小高年級~國中。
- Emoji 圖示:生產者🌿、草食動物🐇、肉食動物🦊、頂級掠食者🦅、分解者🍄。
- 易用性:按鈕尺寸至少 44px、卡片可鍵盤操作。
- 所有插圖皆用 Emoji,不使用外部圖片。

進階版指令(貼給 Canva Code):

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

【情境敘述】
- 接續上一段的「食物鏈接力賽」,這次要增加關卡與學習檢核。

【任務講解】
- 第二關「海洋食物鏈」卡片(浮游植物🌊🌿、浮游動物🦐、小魚🐟、大魚🐠、鯊魚🦈、分解者🍄),
- 並加入「能量條」動畫,完成每條正確鏈就填滿 20%。
- 第三關「情境卡」:隨機抽 1 張(如「過度捕撈🪝:移除🦈」),
- 讓學生修正剩餘鏈條並說明影響(提供 3 個選項讓勾選)。
- 學習檢核:3 題選擇題,解析附生態意義的一句話。

【格式補充】
- 保持無圖片、僅 Emoji 與簡潔圖形。

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


② 細胞城市 Cell City

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

Cleanshot 2025 11 02 At 06.13.29@2x

基礎版指令:

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

【情境敘述】
- 我正在準備用城市比喻介紹細胞構造的互動教材。

【任務講解】
- 建立 5 頁互動教材「細胞城市」。
- 頁面:
1. 封面+「開始探索」。
2. 介紹頁:用「職業比喻」條列(🔋像發電廠、📦像包裹中心…)。
3. 配對遊戲:左側功能描述卡(例:「能量工廠」),右側胞器卡(🔋粒線體、🧠細胞核…),拖曳正確配對。即時回饋、累積分數。
4. 差異頁:兩張大卡「動物細胞🧫」「植物細胞🧫🌿」,點擊葉綠體🌿與細胞壁🧱才會亮起並顯示說明。
5. 測驗頁:5 題單選,結束顯示分數與解析。

【格式補充】
- 風格:科學藍+淺灰、卡片式 UI、圓角、微陰影。
- Emoji:細胞🧫、細胞核🧠、粒線體🔋、葉綠體🌿、內質網🛤️、高基氏體📦、溶體🧪。
- 可及性:所有卡片可用鍵盤切換;無圖片、僅 Emoji。

進階版指令:

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

【情境敘述】
- 接續上一段的「細胞城市」,這次要增加任務與錯誤診斷。

【任務講解】
- 新增「微情境關卡」:角色💡收到任務「合成並運送蛋白質」,學生拖曳流程:
- DNA 指令🧠 → 內質網🛤️ → 高基氏體📦 → 細胞膜🚪(順序題)。
- 新增「錯誤診斷模式」:隨機故障 1 個胞器(如🔋粒線體效率下降),
- 學生選出可能症狀(能量不足、活動力下降…)。

【格式補充】
- 加入總結筆記小卡,可匯出成純文字(不含圖片)。

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


③ 光合作用工廠 Photosynthesis Factory

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

Cleanshot 2025 11 02 At 06.13.29@2x

基礎版指令:

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

【情境敘述】
- 我正在準備讓學生理解光合作用流程的互動教材。

【任務講解】
- 生成 4 頁互動教材「光合作用工廠」。
- 頁面:
1. 封面+開始。
2. 觀念頁:以「輸入→處理→輸出」三欄示意:
- 輸入☀️+💧+二氧化碳(用文字)→處理於葉綠體🌿→輸出🍞+🌬️。
3. 互動步驟:提供 5 張步驟卡(吸收光能、吸收二氧化碳、吸水、合成葡萄糖、釋放氧氣),
- 學生排序;對就綠勾並顯示簡述。
4. 小測 4 題(單選/是非),滿分 100;結束頁附「再試」按鈕。

【格式補充】
- 風格:淺綠+白、清爽科普質感。
- Emoji:☀️、🌿、💧、🍞(葡萄糖象徵)、🌬️(氧氣)、🧪。
- 僅用 Emoji 與形狀,不載入圖片。

進階版指令:

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

【情境敘述】
- 接續上一段的「光合作用工廠」,這次要增加模擬器與應用題。

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

【格式補充】
- 依然只用 Emoji 與圖形。

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


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

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

Cleanshot 2025 11 02 At 06.13.29@2x

基礎版指令:

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

【情境敘述】
- 我正在準備讓學生認識人體系統的互動教材。

【任務講解】
- 製作 5 頁教材「人體系統急救隊」。
- 頁面:
1. 封面+開始。
2. 總覽:五大系統各一張可點卡,點擊顯示主要功能一句話與 2 個常見關鍵詞。
3. 配對:左側給 10 張「症狀卡」(例:氣喘、心跳過快、胃痛、反射遲緩、扭傷…),
- 右側 5 個「系統槽」,學生拖放;正確加分、錯誤回饋。
4. 情境題:3 題單選,題幹提供 Emoji 提示(如🏃‍♂️+😮‍💨→🫁)。
5. 結束頁:分數與錯題列表。

【格式補充】
- 風格:醫療藍+白、清楚卡片分區。
- Emoji:🫁❤️🍽️🧠🦴。
- 無外部圖片,僅 Emoji。

進階版指令:

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

【情境敘述】
- 接續上一段的「人體系統急救隊」,這次要增加路徑與判斷練習。

【任務講解】
- 新增「路徑追蹤」小遊戲:動畫箭頭展示氧氣路徑(鼻腔👃→氣管→支氣管→肺泡🫁→血液❤️);
- 學生點選正確下一站才前進。
- 新增「系統協作題」2 題:例如「運動時為何心跳與呼吸都加快?」提供 3 個選項並解析。
- 新增「急救判斷」是非題 3 題(如扭傷應該冰敷🧊)。

【格式補充】
- 保持 Emoji 呈現。

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


⑤ 生態平衡建造者 Eco Balance Builder

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

Cleanshot 2025 11 02 At 06.13.29@2x

基礎版指令:

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

【情境敘述】
- 我正在準備讓學生觀察生態平衡的互動教材。

【任務講解】
- 生成 4 頁教材「生態平衡建造者」。
- 頁面:
1. 封面+開始。
2. 概念頁:用三欄卡片呈現生物因子(🌱🦋🦊…)與非生物因子(☀️🌡️💧)。
3. 建造頁:給學生三個槽位(生產者、初級消費者、次級/高階消費者)與 8 張卡(🌱🌿🌾🦋🐛🐭🦊🦅),
- 拖曳組合;右側三個旋鈕(光、溫、濕),即時顯示「穩定度指數」與訊息(例:「過少初級消費者→不穩定」)。
4. 測驗頁:4 題應用題,附簡短解析。

【格式補充】
- 風格:大地色+溫和漸層、圓角面板、易讀標題。
- Emoji:🌱🌸🦋🐞🦊🦅🍄☀️🌧️💧🌡️。
- 僅用 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)

Canva Code 生物教材常見問題

Canva Code 適合做哪些生物遊戲?

可做食物鏈排序、細胞構造配對、光合作用流程、人體系統任務與生態平衡模擬。

生物教材生成後要核對什麼?

要檢查物種關係、器官功能、流程先後與答案回饋,尤其避免把複雜系統寫成過度簡化或錯誤因果。

基礎指令和進階指令怎麼選?

先用基礎指令確認核心玩法,再逐項加入計分、提示、重玩與難度;一次加入太多功能反而不容易排錯。

關於作者

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

PPT.note 簡報仙貝

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

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

專業領域

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

服務項目

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