teaching-aid

教學便利通：讓語言老師用遊戲來教學的網站。

A website that helps language teachers teach through games.

程式架構與檔案導覽請見 Codebase 結構。

功能

使用 Next.js（App Router）。左邊側欄是軟木布告欄，分成遊戲、教材、工具三區；上課時可以在各頁之間切換，遊戲進度不會中斷。

• 側欄右上角的「«」收起整個側欄，讓畫面變寬；「»」再打開。
• 「遊戲」和「工具」的標題可以點，展開或收起下面的清單（一開始是收起的）；「教材」一直展開。
• 側欄最下面是 LINE 官方帳號的 QR code，網址異動時會通知老師。

遊戲

• Hangman 吊人遊戲
• Tic-Tac-Toe 圈圈叉叉：格子可放圖片或文字，可選字型（繁體、注音、簡體、漢語拼音）並指定破音字讀音。
• Mystery Gift 開禮物：上傳禮物 Excel（好禮物、不好的禮物、炸彈，各有數量），每一份禮物一個禮物盒。盒子顏色可隨機或自訂，正面可放圖片或文字（字型和破音字寫法同圈圈叉叉）取代數字。點盒子會搖晃（drum.mp3），打開後禮物從盒中出來放在盒子前面，依種類播 wow.mp3、oh oh.mp3 或 bomb.mp3。
• Read Aloud 唸課文：課文用大字寫在左邊的黑板上，讓全班一起唸；右邊的紙是老師的編輯區。
  • 直接打字或貼上，也可以上傳 .docx（舊版 .doc 要先另存成 .docx）。
  • 選取幾個字再按字型按鈕（繁體、注音・繁體楷書、只有注音、簡體＋漢語拼音…），就只改那幾個字；沒有選取就整篇一起改。注音字型在編輯區就看得到，簡體和拼音在編輯區用淺綠底標出來，到黑板上才轉換。
  • 預先在 Word 裡設定注音：用螢光筆（顏色不限）把要加注音的字標起來，上傳後這些字是「注音・繁體楷書」，其他的字是繁體。整份都沒標的話，整篇用上次選的字型。Google 文件的「醒目提示顏色」下載成 .docx 也算。
  • 破音字寫成 長[ㄓㄤˇ] 指定讀音，打字貼上和上傳都可以用；只標了「長」、沒標 [ㄓㄤˇ] 也沒關係。
  • 上方 A−／A＋ 調整黑板字的大小；點黑板上的一行會用黃粉筆框起來，標出正在唸的地方。
  • 課文、每個字的字型和字的大小都存在瀏覽器裡，下次打開接著用。
• Fill in the Blanks 填空：課文寫在黑板上，挖掉的字詞變成黑板下方打亂的單字卡，學生把卡片拖到對應的空格。
  • 課文的打字、上傳、字型按鈕和破音字寫法都和唸課文一樣；單字卡用的是那些字在課文裡的字型，所以選取挖空的字再按字型按鈕，卡片也會跟著換。
  • 在右邊的課文選取字詞按「挖空」，就變成一個空格和一張單字卡；游標放在挖空的字上（標黃色）再按一次「取消挖空」。挖空的字詞不能跨行。
  • 預先在 Word 裡挖空：把要挖空的字詞加底線（任何底線樣式都可以），上傳後每一段加底線的字就是一個空格。螢光筆和唸課文一樣是加注音，所以同一份檔案兩個遊戲都能用：螢光筆標還沒學過的字，底線標這課的目標詞；兩個都標的詞就是有注音的單字卡。
  • 空格都一樣寬（依最長的答案），不會洩漏答案長短。
  • 用滑鼠或手指（觸控螢幕、電子白板）拖曳。放對了卡片留在空格裡並叮一聲；放錯了卡片搖一搖回到原處。兩個空格答案一樣的話，哪張卡放哪格都算對。全部答對放彩帶和歡呼聲。
  • 「重新洗牌」清空空格、重新打亂卡片；「完成編輯」收起右邊的課文，讓黑板變寬。課文、字型、字的大小都存在瀏覽器裡。
• Quick Check 快判卡：黑板上排一張張卡片（文字、圖片或兩個都有），學生判斷對不對；老師點卡片揭曉，正確的打綠色 ✓ 並播 wow.mp3，錯誤的打 × 並播 oh oh.mp3。黑板上方統計 ✅、❌ 和待判的張數。
  • 上傳 Excel：「素材」工作表每列一張卡片（文字、圖片、Y/N），Y 是正確、N 是錯誤；「設定」選字型和 Dropbox 圖片資料夾。圖片的檔名、網址和 Dropbox 資料夾規則同開禮物，破音字寫成 長[ㄓㄤˇ]。
  • 「⚙️ 設定」打開右邊的素材區，可以直接改文字、Y/N、換圖片、刪除或「＋ 新增一張」，也可以選卡片字型（繁體、注音、簡體、漢語拼音…）。
  • 「🔀 打散」重新排列卡片，「清除勾叉」把所有卡片變回待判；可以靜音。卡片、字型和勾叉都存在瀏覽器裡。
• Instant Camera 立可拍：黑板上有一台立可拍，按相機上的紅色快門（或「拍一張」），閃光加上快門聲，一張照片從出片口慢慢出來，接著放大到整個畫面並慢慢顯影；點一下（或按 Esc）照片就縮小放到相機旁邊。點旁邊的照片可以再放大一次。
  • 照片直接匯入圖片檔（不用 Excel）：一次選很多張、一張一張加、或把檔案拖進頁面都可以。照片會縮到最長邊 1600 像素，存在瀏覽器的 IndexedDB（和教材一樣），重新整理後還在。
  • 黑板左上角選「照順序」或「隨機」。照順序是依加入的順序，同一次選的照片依檔名排列（1、2、10 而不是 1、10、2）。每張照片每輪只出現一次；「收回照片」重新開始。
  • 「⚙️ 照片」列出所有照片和順序，已拍的蓋「已拍」章，可以一張張刪除或全部刪除。
  • 黑板下方是文字區：點一下就能打字，可選字型（繁體、注音、簡體、漢語拼音…）和字的大小；破音字寫成 長[ㄓㄤˇ]。簡體和拼音在打完字、點旁邊之後轉換。
• Slot Machine 拉霸機：黑板上一台拉霸機，有 2～5 欄轉輪，每欄 2～5 格。拉右邊的拉桿（或按「拉一下」），轉輪一欄一欄停下，每欄隨機停在一格；停好時燈泡閃爍並叮一聲。
  • 上傳 Excel：「拉霸」工作表每列一格（欄、文字、圖片），用到幾欄就有幾欄；「設定」可寫每欄的標題（例如 誰／在哪裡／做什麼），適合造句練習。
  • 格子可放圖片或文字，字型和破音字寫法同圈圈叉叉；圖片的檔名、網址和 Dropbox 資料夾規則同開禮物。
  • 每欄下面的「固定」讓那一欄不轉，例如主詞不變、只換動作。內容、字型和目前停的位置都存在瀏覽器裡。
• Rock Paper Scissors 剪刀石頭布：黑板上兩隊對戰。按「開始猜拳」，兩隊的手在剪刀、石頭、布之間不停變換；按「停！」兩隊各自隨機定拳，黑板上寫出哪一隊贏或平手。
  • 老師按一下贏的那隊的手，就有歡呼聲和彩帶，那一隊加一顆星（同一局只加一次）。「分數歸零」重新計分。
  • 點隊名就能改名；隊名可選字型（繁體、注音、簡體、漢語拼音…），破音字寫成 長[ㄓㄤˇ]。隊名和分數存在瀏覽器裡。
• Draw a Card 抽牌：黑板上放一副或兩副牌，每副各自隨機排列，兩副牌背顏色不同。沒有匯入時是撲克牌（每副 52 張）。按「抽一張」或點牌堆，最上面的牌滑到旁邊；抽過的牌用小字列在下面。
  • 上傳 Excel 換成自己的卡片：「卡片」工作表每列一張（副、文字、圖片），「副」選 1 或 2；只填第 1 副的話，第 2 副還是撲克牌。「設定」選字型和 Dropbox 圖片資料夾。圖片的檔名、網址和 Dropbox 資料夾規則同開禮物，破音字寫成 長[ㄓㄤˇ]。
  • 「⚙️ 設定」可以匯入、下載範本、換卡片字型（繁體、注音、簡體、漢語拼音…），或「改回撲克牌」。
  • 黑板左上角選「一副牌」或「兩副牌」；兩副的時候可以各抽各的，也可以「兩副一起抽」。
  • 「🔀 洗牌」把抽過的牌收回、整副重新洗。
  • 選「馬上開牌」抽出來就是正面；選「先蓋牌」抽出來是背面，老師點牌才翻開。蓋著的時候按住「👀 偷看」可以先看，放開就蓋回去。
  • 牌局和設定存在瀏覽器裡；可以靜音。

教材

老師可上傳 PDF 或圖片（存在瀏覽器的 IndexedDB），上課時直接在側欄打開。

• 側欄「＋ 上傳教材」打開上傳區：點一下選檔案，或把檔案拖進頁面，可以一次選多個。
• 打開教材時，檔名和「🗑️ 刪除」收在左上角的「檔案資訊」小標籤裡，讓 PDF 或圖片佔滿畫面；點標籤展開或收起。

工具

• 我的獎勵：上傳學生名單 Excel（學生、金幣），每位學生一張釘在「金幣榜」布告欄上的紙卡，點卡片就有一枚金幣掉進寶箱，今天加的分數顯示在綠色徽章上（按錯可以按卡片右上角的「−1」收回）；下課後下載紀錄到電腦，下次再上傳接著累積。
• 抽籤筒：上傳學生名單 Excel（「學生」欄，或 A 欄不加標題；我的獎勵的檔案也能用），每位學生一支籤。抽籤時籤筒搖晃，抽中的籤升起落在籤筒前面，再用黃色粉筆在黑板上寫出名字和「第 N 位」。右邊的名單是筆記紙：抽過的人標黃並蓋上「第 N 位」印章；可選「抽過的不再抽」，點名字可標成缺席（名字劃掉）；進度存在瀏覽器裡。
• 圖片瘦身：把圖片縮到最長邊 600 像素、每張約 200 KB 以下（檔名和格式不變），方便放上 Dropbox 給遊戲使用。
• 🧹 清除所有遊戲設定：換一班上課前用，一鍵清掉所有遊戲的內容（圈圈叉叉、開禮物、唸課文、填空、快判卡、拉霸機、抽牌），剪刀石頭布的隊名和分數，立可拍的照片和文字，以及抽籤名單和我的獎勵。會先跳出確認視窗；教材、音效和字型設定不會被刪除。清除後頁面會重新整理。

每個需要 Excel 的地方都有範本可下載；範本裡需要選擇的欄位都是下拉選單。

開發

npm install
npm run dev   # http://localhost:3000

外觀（學校主題）

整個網站是「黑板／粉筆／布告欄」的學校主題：遊戲畫在黑板上，側欄、上傳區和獎勵榜是軟木布告欄，面板是釘著或貼著的紙。

• 規格在 school-theme.css（app/globals.css 開頭 import）：顏色、字型都是 CSS 變數，元件是現成的 class，例如 .chalkboard、.chalk-tray、.cork、.paper、.pin、.tape、.btn-chalk、.btn-tag、.btn-board、.stamp。新的樣式先找這裡有沒有可用的，缺少的補進這支檔案，不要寫死色碼。
• 字型：--font-chalk（霞鶩文楷，標題、黑板上的字、按鈕）和 --font-body（Noto Sans TC，一般文字），在 app/layout.tsx 用 next/font/google 載入。
• 共用元件：components/Chalkboard.tsx（黑板加粉筆槽）、components/DropZone.tsx（布告欄上的上傳區）、components/Icons.tsx（按鈕用的線條圖示）。
• 題目字型不跟著主題：題目文字（圈圈叉叉的格子、禮物盒封面、唸課文和填空黑板上的課文、填空的單字卡）一律用字型選單選到的字型；「繁體」「簡體」用系統字型（--font-board-text），不會被黑板的 --font-chalk 蓋掉。

字型與破音字

• 字型都是可自由分享的開放授權字型（ButTaiwan/bpmfvs 系列）：楷書、圓體、芫荽由 Google Fonts 提供，「只有注音」放在 public/fonts/（授權檔在同一個資料夾）。
• 破音字用 IVS（讀音選擇記號）指定讀音。Excel 裡寫 長[ㄓㄤˇ]，匯入時（唸課文、填空是上傳或貼上時）會換成對應的記號；對照表是 lib/polyphones.json，來源是 bpmfvs 的 poyin_db.txt（教育部《國語一字多音審訂表》）。
• 更新對照表：node scripts/build-polyphones.mjs
• 簡體和漢語拼音不用特別的字型：老師照樣打繁體，顯示時用 opencc-js 轉成簡體（只換字，不換用詞），用 pinyin-pro 依詞語加上拼音（lib/hanzi.ts）。Excel 裡用注音寫的破音字讀音會換算成拼音，蓋過自動判斷的讀音。這兩個套件只在選到簡體或拼音時才載入。
• 唸課文的課文存成一段段「文字＋字型」（lib/readAloud.ts）。編輯區是 contentEditable="plaintext-only"：打字時以畫面為準，每次輸入後讀回成一段段；按字型按鈕時改資料再重畫編輯區，並還原選取範圍。改字型時不會把破音字和它的讀音記號拆開，不然讀音會失效。編輯區的共用程式在 lib/runEditor.ts。
• 填空也用同樣的一段段課文，挖空的字多一個 blank 編號：編號相同的幾段是同一個空格（可以混用字型），答案比對的是文字（含讀音記號）。挖空和洗牌在 lib/fillBlank.ts。