用 Canva Code 打造國中小英語互動教材：5 款課堂實戰模板（含指令建議）

想把單字、句型、情境對話變成可互動、可投影、可分組闖關的小遊戲？以下是我整理給國小高年級～國中的 5 款 Canva Code 模板。每款都有：介紹、實作 Demo 參考、示意圖、範例指令（可直接貼到 Canva Code）。
本篇用 Emoji 作為圖示（Canva 不載入資料夾圖片也能跑），資料結構一律走「好改、好複製」路線。

---

① Word Quest — 圖像字彙拖曳配對

介紹：把英文單字拖曳到正確的「Emoji 圖像卡」上，建立圖文對應與拼字辨識。完成後自動顯示用時與正確率。
情境：小五主題課「Animals」。投影全班玩 → 小組輪流上台操作 → 快速檢核誰已能正確對應。

實作 Demo 參考：https://kevin.pptnote.com/canva-code-word-quest

範例指令（貼到 Canva Code）

• 單頁 HTML，標題顯示「Word Quest」。
• 置頂放主題下拉（animals、classroom、food）與「開始」按鈕。
• 左欄：3×3 emoji 圖像卡（每張含放置區）；右欄：9 個可拖曳單字籤。
• 拖曳判定：
  • 對 → 卡片邊框轉綠並鎖定。
  • 錯 → 紅色閃爍 0.2 秒並回原位。
• 右上顯示計時與完成數；底部提供「重置」「提示」。
  • 提示：讓兩張尚未完成且正確的卡片邊緣閃爍 2 次（不直接給答案）。
• 全部完成顯示：用時、正確率、評語（Excellent / Great / Keep going）與「再玩一次」。
• 題庫載入 DATA（欄位：word、emoji、label）。

const DATA = {
  animals: [
    { word: 'giraffe',  emoji: '🦒', label: 'giraffe' },
    { word: 'elephant', emoji: '🐘', label: 'elephant' },
    { word: 'zebra',    emoji: '🦓', label: 'zebra' },
    { word: 'lion',     emoji: '🦁', label: 'lion' },
    { word: 'tiger',    emoji: '🐯', label: 'tiger' },
    { word: 'panda',    emoji: '🐼', label: 'panda' },
    { word: 'monkey',   emoji: '🐵', label: 'monkey' },
    { word: 'penguin',  emoji: '🐧', label: 'penguin' },
    { word: 'koala',    emoji: '🐨', label: 'koala' }
  ],
  classroom: [
    { word: 'ruler',    emoji: '📏', label: 'ruler' },
    { word: 'eraser',   emoji: '🩹', label: 'eraser' },
    { word: 'notebook', emoji: '📓', label: 'notebook' },
    { word: 'pencil',   emoji: '✏️', label: 'pencil' },
    { word: 'backpack', emoji: '🎒', label: 'backpack' },
    { word: 'glue',     emoji: '🧴', label: 'glue' },
    { word: 'marker',   emoji: '🖊️', label: 'marker' },
    { word: 'scissors', emoji: '✂️', label: 'scissors' },
    { word: 'clock',    emoji: '🕒', label: 'clock' }
  ],
  food: [
    { word: 'sandwich',  emoji: '🥪', label: 'sandwich' },
    { word: 'noodles',   emoji: '🍜', label: 'noodles' },
    { word: 'dumplings', emoji: '🥟', label: 'dumplings' },
    { word: 'salad',     emoji: '🥗', label: 'salad' },
    { word: 'soup',      emoji: '🍲', label: 'soup' },
    { word: 'rice',      emoji: '🍚', label: 'rice' },
    { word: 'juice',     emoji: '🧃', label: 'juice' },
    { word: 'apple',     emoji: '🍎', label: 'apple' },
    { word: 'egg',       emoji: '🥚', label: 'egg' }
  ]
};

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

---

② Sentence Lab — 句子積木重組

介紹：把單字積木拖到「句子軌道」排成正確語序，練肯定 / 否定 / 疑問句。可切「聽力模式」先播正解，再重組。

實作 Demo 參考：https://kevin.pptnote.com/canva-code-sentence-lab

範例指令（貼到 Canva Code）

• 建立三關：肯定 → 否定 → 一般疑問句。
• 中央「句子軌道」6–9 槽；下方提供可拖曳字塊（含 1–2 個干擾詞）。
• 「檢查」：
  • 全對 → 軌道轉綠並朗讀（Web Speech API）。
  • 錯誤 → 標出錯位字塊並顯示中文提示（語法註解）。
• 提供「打散」「聽句子再排」「下一關」；右上顯示進度與分數。
• 題庫載入 LEVELS：title、answer、blocks、ruleHint。

const LEVELS = [
  {
    title: 'Level 1 — 肯定句',
    answer: 'He runs every morning.',
    blocks: ['He','runs','every','morning','.','do','not'],
    ruleHint: '基本語序：主詞 + 動詞 + 其他成分'
  },
  {
    title: 'Level 2 — 否定句',
    answer: "She doesn't like apples.",
    blocks: ['She','doesn\'t','like','apples','.','do','plays'],
    ruleHint: '否定：助動詞 do/does + not 放在動詞前'
  },
  {
    title: 'Level 3 — 一般疑問句',
    answer: 'Do you play basketball?',
    blocks: ['Do','you','play','basketball','?','does','not'],
    ruleHint: '疑問句：Do/Does 置於句首，句尾加問號'
  }
];

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

---

③ Listening Bingo — 聽力賓果 5×5

介紹：播放句子或片語，學生在 5×5 盤上勾選對應格子；任一直 / 橫 / 斜連線即勝。
情境：小六英語社團暖身。切「隨機播放」模式，注意力拉滿，教室瞬間安靜（專注度 Buff 生效）。

實作 Demo 參考：https://kevin.pptnote.com/canva-code-listening-bingo

範例指令（貼到 Canva Code）

• 置頂播放列：「下一句」「重播」「播放速度」「字幕開關」；支援固定或隨機播放。
• 中間顯示 5×5 賓果盤，格子可呈現 emoji 或文字。
• 判定：對 → 閃綠 0.3s 加分；錯 → 閃紅扣 1 分。
• 任一直 / 橫 / 斜連線即顯示「Round Clear」。
• 題庫載入 AUDIO_ROUND：src（音檔）、captions、grid（3×3）、emojis（顯示層）。

const AUDIO_ROUND = {
  src: [
    'assets/audio/01_apple.mp3',
    'assets/audio/02_ride_a_bike.mp3',
    'assets/audio/03_read_a_book.mp3',
    'assets/audio/04_play_soccer.mp3',
    'assets/audio/05_cat.mp3',
    'assets/audio/06_dog.mp3',
    'assets/audio/07_bird.mp3',
    'assets/audio/08_banana.mp3',
    'assets/audio/09_orange.mp3'
  ],
  captions: [
    'a red apple','ride a bike','read a book','play soccer',
    'a cat','a dog','a bird','a banana','an orange'
  ],
  grid: [
    ['apple','banana','orange'],
    ['ride a bike','read a book','play soccer'],
    ['cat','dog','bird']
  ],
  emojis: {
    apple: '🍎', banana: '🍌', orange: '🍊',
    cat: '🐱', dog: '🐶', bird: '🐦',
    'ride a bike': '🚴', 'read a book': '📖', 'play soccer': '⚽'
  }
};

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

---

④ Dialogue Choices — 情境漫畫分支對話

介紹：在漫畫場景中選擇最合適的英文回應；正確給鼓勵與解釋，錯誤給語用提醒。支援 emoji 頭像與場景符號。

實作 Demo 參考：https://kevin.pptnote.com/canva-code-dialogue-choices

範例指令（貼到 Canva Code）

• 建立 2–3 格漫畫；每格含角色頭像（emoji）、對話氣泡、三選一。
• 點選後：
  • 正確 → 氣泡轉綠＋英文解釋＋中文補充。
  • 錯誤 → 氣泡轉橘＋為何不恰當（語用 / 禮貌 / 文法）。
• 完成顯示分數與回顧建議。
• 題庫載入 SCENES：每場景含 title、panels；每格含 avatar（emoji）、prompt、options（3 項）、correct（0 起算）、explain。

const SCENES = [
  {
    title: 'At the Cafeteria',
    panels: [
      {
        avatar: '🧑‍🍳',
        prompt: 'You want to order politely.',
        options: [
          'Give me a sandwich.',
          'I want a sandwich.',
          'Could I have a sandwich, please?'
        ],
        correct: 2,
        explain: '使用 could/can + please 更禮貌（句首大寫，句尾加問號）'
      },
      {
        avatar: '🧑‍🍳',
        prompt: 'Your friend offers you juice. What do you say?',
        options: [
          'No.',
          'No, thanks. I\'m fine.',
          'Give me water.'
        ],
        correct: 1,
        explain: '婉拒時加上 thanks 顯示禮貌'
      }
    ]
  },
  {
    title: 'Asking for Directions',
    panels: [
      {
        avatar: '🧑‍🏫',
        prompt: 'Ask a stranger where the library is.',
        options: [
          'Where library?',
          'Where is the library, please?',
          'Library there.'
        ],
        correct: 1,
        explain: '完整句型 + please 更禮貌'
      }
    ]
  }
];

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

---

⑤ Grammar Boss Battle — 闖關測驗（小頭目戰）

介紹：10 題四選一，答對就讓 Boss 掉血；結算自動彙整錯題成「弱點回顧」。支援 Emoji 造型（玩家 / Boss）。

實作 Demo 參考：https://kevin.pptnote.com/canva-code-grammar-boss-battle

範例指令（貼到 Canva Code）

• 介面：玩家＆Boss 血量條（可用 🛡️、👾）、中央題目、下方四選一；右下「提示」「跳過」各 1 次。
• 規則：
  • 對 → Boss 扣血＋顯示語法說明、+10 分、連擊加成。
  • 錯 → 玩家 -1 生命並顯示正解。
• 結束顯示總分與「弱點回顧」（列出錯題與規則）。
• 題庫載入 QUIZ：每題 q、options、ans（0 起算）、rule；可視需要加入 hero/boss emoji 外觀設定。

const UI_SKINS = { hero: '🛡️', boss: '👾' };

const QUIZ = [
  { q: 'She ____ to school every day.', options: ['go','goes','is go','going'], ans: 1, rule: '第三人稱單數一般現在式加 -es' },
  { q: 'The cat is ____ the box.', options: ['in','on','under','behind'], ans: 0, rule: '依語意判斷方位介系詞' },
  { q: 'Tom is ____ than Jim.', options: ['tall','taller','tallest','more tall'], ans: 1, rule: '兩者比較用比較級 -er' },
  { q: 'They ____ basketball now.', options: ['play','plays','are playing','played'], ans: 2, rule: '現在進行式：be + V-ing' },
  { q: 'I have ____ apples.', options: ['much','many','a','an'], ans: 1, rule: '可數名詞複數用 many' }
];

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

---