- 登入
- 註冊

無痛上手 Canva Code:生成五種生物教材互動遊戲(含生成指令)
先說結論:生物教材可把關係與流程變成配對、分類與系統任務:食物鏈、細胞構造、光合作用、人體系統與生態平衡都適合。Canva Code 能快速產生互動原型,但物種關係、器官功能與過程敘述仍要由教師校對。
這篇一次整理如何用 Canva Code 做出可重複使用的生物教材。每個主題都給你:簡短介紹 → Demo 參考連結 → 兩階段指令(基礎版 / 進階版)。全部中文、可直接貼上使用;也都已避免使用圖片,僅以 Emoji 圖示呈現。
① 食物鏈接力賽 Food Chain Relay
介紹: 以拖曳卡片的方式,快速建立從生產者到高階消費者的能量流向概念。內建限時與即時回饋機制,既像遊戲又不失學術嚴謹。
實作 Demo 參考:https://kevin.pptnote.com/canva-code-food-chain-relay

基礎版指令(貼給 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

基礎版指令:
參考範本|請依自己的需求修改;有提供範例資料時,記得一併調整。
【情境敘述】
- 我正在準備用城市比喻介紹細胞構造的互動教材。
【任務講解】
- 建立 5 頁互動教材「細胞城市」。
- 頁面:
1. 封面+「開始探索」。
2. 介紹頁:用「職業比喻」條列(🔋像發電廠、📦像包裹中心…)。
3. 配對遊戲:左側功能描述卡(例:「能量工廠」),右側胞器卡(🔋粒線體、🧠細胞核…),拖曳正確配對。即時回饋、累積分數。
4. 差異頁:兩張大卡「動物細胞🧫」「植物細胞🧫🌿」,點擊葉綠體🌿與細胞壁🧱才會亮起並顯示說明。
5. 測驗頁:5 題單選,結束顯示分數與解析。
【格式補充】
- 風格:科學藍+淺灰、卡片式 UI、圓角、微陰影。
- Emoji:細胞🧫、細胞核🧠、粒線體🔋、葉綠體🌿、內質網🛤️、高基氏體📦、溶體🧪。
- 可及性:所有卡片可用鍵盤切換;無圖片、僅 Emoji。進階版指令:
參考範本|請依自己的需求修改;有提供範例資料時,記得一併調整。
【情境敘述】
- 接續上一段的「細胞城市」,這次要增加任務與錯誤診斷。
【任務講解】
- 新增「微情境關卡」:角色💡收到任務「合成並運送蛋白質」,學生拖曳流程:
- DNA 指令🧠 → 內質網🛤️ → 高基氏體📦 → 細胞膜🚪(順序題)。
- 新增「錯誤診斷模式」:隨機故障 1 個胞器(如🔋粒線體效率下降),
- 學生選出可能症狀(能量不足、活動力下降…)。
【格式補充】
- 加入總結筆記小卡,可匯出成純文字(不含圖片)。備註:此段為 v1 指令與資料結構,實作後可依實際互動與班級反應微調。
③ 光合作用工廠 Photosynthesis Factory
介紹: 把方程式拆成「輸入—處理—輸出」,再用滑桿模擬光、水、二氧化碳對產量的影響,兼顧概念與應用。
實作 Demo 參考:https://kevin.pptnote.com/canva-code-photosynthesis-factory

基礎版指令:
參考範本|請依自己的需求修改;有提供範例資料時,記得一併調整。
【情境敘述】
- 我正在準備讓學生理解光合作用流程的互動教材。
【任務講解】
- 生成 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

基礎版指令:
參考範本|請依自己的需求修改;有提供範例資料時,記得一併調整。
【情境敘述】
- 我正在準備讓學生認識人體系統的互動教材。
【任務講解】
- 製作 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

基礎版指令:
參考範本|請依自己的需求修改;有提供範例資料時,記得一併調整。
【情境敘述】
- 我正在準備讓學生觀察生態平衡的互動教材。
【任務講解】
- 生成 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 適合做哪些生物遊戲?
可做食物鏈排序、細胞構造配對、光合作用流程、人體系統任務與生態平衡模擬。
生物教材生成後要核對什麼?
要檢查物種關係、器官功能、流程先後與答案回饋,尤其避免把複雜系統寫成過度簡化或錯誤因果。
基礎指令和進階指令怎麼選?
先用基礎指令確認核心玩法,再逐項加入計分、提示、重玩與難度;一次加入太多功能反而不容易排錯。



