斷詞生魚片｜設計指南
版本 v0.1｜2026-10-26｜單檔 HTML 原型，交給 Claude Code 接手
定位：測量斷詞能力、觀察學習者願不願意用的測試工具。不是教學成效的證據。
一句話目標
把一句華語當成一條魚片，學習者在字與字的縫上下刀切成詞，按「上菜」後系統用 F1 對照可接受的切法，並記錄每一盤的時間、下刀位置與錯誤型態。
需求
- 單檔 HTML，手機直式與桌機 2K 都能玩；第一個畫面就能做第一個動作。
- 核心操作只有兩種：點縫下刀（再點一次取消）、按「上菜」。
- 一桌 6 盤：初級 2、中級 2、高級 2，每級從句庫隨機抽。
- 計分容許多種合理切法，也容許歧義句有多種讀法。
- 每盤記錄：用時、點擊次數、取消次數、求助次數、下刀位置、F1、精確率、召回率、過切與漏切位置。
- 可複製結果（JSON），因為 artifact 禁止下載。
- 學習者可選填程度（母語者、初、中、高），用來之後分組比較。
問題
- 「正確切法」不唯一。 「喝咖啡」可以是一個動賓詞，也可以是「喝｜咖啡」。單一標準答案會懲罰合理的切法。
- 歧義句有多種讀法。 「乒乓球拍賣完了」「這個學生會說英文」兩種切法都通順。計分必須承認多種讀法，並讓學習者知道另一種讀法存在。
- 詞的界線沒有共識。 不同詞表（國教院分詞、CKIP、華語八千詞）對複合詞切法不同。遊戲內的標準是人工標註的示範資料，不代表任何一套官方標準。
- 遊戲分數不等於閱讀能力。 目前有的證據只是相關：二語學習者的斷詞能力與閱讀流暢度、理解有關（Yang 2021）。沒有證據說明玩這個遊戲會提升閱讀。
- 詞級資料還沒接上。 華語八千詞的 Excel 尚未取得，因此遊戲內只有三個難度級，沒有對照 TBCL 級別。
- 偏向誘因。 玩家若亂點很多刀，召回率會很高。需要同時看精確率，所以用 F1，並分開記錄過切與漏切。
討論
為什麼是切魚片
句子是連續字串，詞是要切出來的單位，刀工與這個動作一一對應。魚片的顏色在每一刀後輪替（鮭魚橘、鮪魚紅、白身米白），玩家不用讀數字就能看見自己切出幾個詞。
為什麼用 F1，不用對錯
只看是否與答案完全相同，會讓一刀之差得零分，玩家學不到「差在哪」。F1 對過切（精確率）與漏切（召回率）各自扣分，結果頁再指出是哪一條縫。
可切可不切
每條縫有三種身分：
| 標記 |
意義 |
計分 |
\| |
必切 |
切了得分，沒切算漏切 |
· |
可切可不切 |
切不切都不影響分數 |
| 無標記 |
禁切（詞的內部） |
切了算過切 |
這樣一條 pattern 就代表一組合理切法，不必逐一列舉。
與 LLM 分詞的區別
這個遊戲練的是語言學的「詞」，不是 LLM tokenizer 的 token。兩者的切分單位與目的不同，不能互相替代。
可能方案
句庫格式
{ id: 'c1', lv: 3,
readings: ['乒乓·球|拍賣·完|了', '乒乓·球拍|賣·完|了'],
note: '兩種讀法都通……' }
- 同一句的所有 reading 去掉標記後文字必須完全相同；啟動時與測試腳本都會檢查。
- 位置 k 表示「前 k 個字後面」的縫，範圍 1 到 n-1。
計分
對每個 reading：
TP = 學習者下刀位置 ∩ 必切
FP = 學習者下刀位置 − 必切 − 可選 （切進詞裡）
FN = 必切 − 學習者下刀位置 （漏切）
P = TP/(TP+FP)，R = TP/|必切|，F1 = 2PR/(P+R)
取所有 reading 中 F1 最高者。
零刀的 F1 為 0。
資料記錄（複製結果）
{ "game": "duanci-sashimi", "v": "0.1", "sid": "…", "profile": "l2-mid",
"plates": [ { "id": "c1", "lv": 3, "ms": 8200, "taps": 5, "undo": 1, "hints": 0,
"cuts": [3,5,6], "f1": 1, "p": 1, "r": 1, "reading": 0,
"over": [], "miss": [] } ] }
不收任何個資。profile 為自填，可略過。
畫面與刀工
- 刀的畫法：刀柄朝畫面下方（朝向玩家），刀尖朝上，從下往上切入縫。
- 整句永遠排成單行，不換行：換行會讓同一個詞塊看起來被拆開。手機上字太多時橫向捲動，並顯示「左右滑動」提示。
- 沒切的縫只在上下緣留小缺口，中間與魚片同色相連；細線貫穿全高會被誤認為已切開（實測回饋）。
- 點擊在 pointerup 判定且位移小於 10px，避免橫向滑動被當成下刀；重繪時保留捲動位置。
- 切完的縫：必切為綠、可選為綠、切進詞裡為紅、漏切為橘色虛框。
- 結果頁同時顯示「你的切法」與「師傅的切法」，歧義句多顯示另一種讀法。
- 「問師傅」會把一條漏切的縫閃爍標示，每次使用都記錄。
驗收
- 360×800、390×844、800×360、1920×1080、2560×1440 都不破版。
- 淺色與深色主題都可讀。
- localStorage 不可用時照常可玩。
- 切到背景時計時暫停；開啟指南時計時暫停。
- 計分函式有腳本測試（切法、可選、過切、漏切、雙讀法、禁切陷阱）。
借用零件
| id |
用法 |
cute-real |
外觀可愛（師傅、魚片、刀工視角），系統嚴謹（F1、多讀法、可選縫），操作極簡（點縫、上菜） |
res-2k-390 |
以 390×844 與 2560×1440 驗收；桌機用 12 字一行的寬版，不做窄欄置中 |
rules-charter |
只借「計分、回饋、進度」三條的精神；沒有一錯出局，因為目標是測量不是淘汰 |
drill-shell |
出題、作答、回饋、下一題的節奏，原型內用最簡版占位 |
learner |
之後接共用學習者模型：記每個詞切對或切錯幾次，決定下次出什麼句子 |
cc-packs |
之後作為句庫與詞表來源之一（當代中文詞彙 4,920 詞） |
snd |
原型內的音效是簡版占位；進產線換成正本（手機解鎖、靜音記憶、背景暫停） |
新零件
| 名稱 |
一句話用途 |
怎麼接 |
cut-pattern |
用 \| · 與無標記，一條字串表達一組可接受的切分 |
純函式 parsePattern、scoreCuts、bestReading、segments，原型內以 /*LOGIC*/ 標記包住，可整段搬走 |
seam-input |
在連續字串的字縫上點選，點擊區比視覺寬（約 1 個字寬），可與橫向捲動共存 |
rowsHTML(text, cuts, opts) 產生可點的縫，事件綁在容器上（Pointer Events） |
fish-chunks |
切出的詞依序換三種魚色，讓玩家直接看見詞塊 |
以 data-k = 詞序 % 3 與 CSS 變數 --fish0..2 |
session-log |
每盤記錄 F1、用時、點擊、取消、求助，匯出一段 JSON |
summary() 與複製按鈕；artifact 內不可下載，改用剪貼簿，失敗時選取文字框 |
待決事項
- 學生程度（初、中、高）要不要分三組做測試？目前只有自填欄位。
- 句庫要不要改成從教材課文抽句？來源與授權待定。
- 標準切法要對齊哪一套？目前是人工示範資料。可選：國教院分詞、CKIP、華語八千詞斷詞原則。國教院分詞的引擎、API 與授權資訊目前缺失。
- 要不要加「詞性或主謂賓」的第二層玩法（切完後標主語、謂語、賓語）？
- 研究用途需要的同意書與資料保存方式。
交給 Claude Code 的第一步
- 取得華語八千詞，建立詞表比對：每個切出的詞標出級別（300／500／1000／2500／5000／8000），結果頁顯示「這一塊是幾級詞」。
- 把句庫從 12 句擴到每級至少 30 句，每句至少兩位標註者標註，記錄不一致處。
- 加上伺服端或試算表收集（
rank、beacon 的做法），取代手動複製。
- 先不做：排行榜、教學成效宣稱、詞性層玩法。
Markdown 原文