# 05d 第 3 關（畫面關）第 4 輪：真人角色實測

- 角色：研究生／助教。每天能專心學約 1.5 小時。聽力只跟得上 70%，習慣邊聽邊翻中文。想「無腦學習」，承認會偷懶，晚上很累，常被打斷。電腦和手機都用。
- 我是新的試用者。沒做過第 1～3 輪，也沒參與開發。
- 做法：用 puppeteer 操作真的 Chrome（無頭）。電腦 1400×900；手機 390×800（觸控、isMobile）。電腦和手機各用一個獨立的瀏覽器資料夾，等於兩台裝置。
- server：http://127.0.0.1:8773/（一開始是空的進度，密碼 eval）。音檔是假的（按 🔊 就當作聽過）。
- 走過的路：第 1 次（電腦開頭 3 題 → 手機做完）→ 第 2 次（手機，只複習就結束）→ 第 3 次（手機，複習第二輪、新學 4 題、斷線關頁、電腦接手、手機提早結束）→ 第 4 次開頭。另外在手機上讀學習方法手冊。
- 截圖：`evidence/gate3-r4/`（s1-… 到 s7-…）。腳本與完整紀錄：scratchpad `gate3r4/`（log.txt）。
- 實測時間：2026-10-05 00:11–00:18。這段時間程式沒有被改（ui.js、app.css 最後修改 00:07）。
- 整輪沒有任何 JavaScript 錯誤。

---

## 一句話總評

方法卡和每一題的提示，不用手冊就教得會方法；換裝置、斷線、被打斷都接得很好。
但手機上有兩個畫面錯誤：**底部那條的「完成 ✓」「下一次」按鈕是白字白底，看起來是一個空白方框**；**「下一題 ↓」在還沒作答時就出現**（第 3 輪修好的又跑回來了）。
另外，第 3 輪加的「今天只複習」出口做得好，可是照著「下一題」走的人會直接被帶過去，看不到它。

---

## 分數表

1～5 分。低於 3 分就一定要修。**這一輪沒有低於 3 分的格子。**

| 情境 | 好用度 | 順暢度 | 方便性 | 手機介面 | 學習引導 |
|---|---|---|---|---|---|
| 1 第一次打開的 10 分鐘（電腦） | 4 | 3 | 4 | — | 4 |
| 2 手機做完一整次（晚上、單手、中途被打斷） | 4 | 4 | 4 | 3 | 3 |
| 3 第 2 次：只想複習的晚上（手機） | 4 | 3 | 3 | 3 | 4 |
| 4 第 3 次：複習第二輪＋新學＋斷線（手機→電腦） | 4 | 4 | 4 | 4 | 3 |
| 5 手機讀學習方法手冊 | 4 | 4 | 3 | 3 | 4 |
| **第 4 輪平均** | **4.0** | **3.6** | **3.6** | **3.3** | **3.6** |
| 第 3 輪平均 | 3.8 | 3.8 | 4.0 | 3.5 | 3.4 |
| 第 2 輪平均 | 3.9 | 3.6 | 4.0 | 3.5 | 3.4 |
| 第 1 輪平均 | 3.4 | 3.3 | 3.4 | 3.3 | 3.3 |

> 每一輪的情境不一樣。這輪看的是「第一次用」和「手機的第 2、3 次」。學習引導升到 3.6，是因為方法卡和複習的淡色標記真的有教到；方便性和手機介面下降，主要是下面 M1、M3 兩個手機上的問題。

給 3 分的理由：

- 情境 1 順暢度 3：按「我懂了」後停在 5 個新字表中間（L1）；每一題還沒作答就有「下一題 ↓」，按了沒反應（M2）。
- 情境 2 手機介面 3：做完三區後，底部那條的主按鈕變成空白方框（M1）。學習引導 3：6-7 沒聽就看翻譯作答，只得到一行很淡的灰字，之後也不會再出現（P4、L4）。
- 情境 3 順暢度、方便性 3：最後一句複習按「下一題 ↓」，直接跳到 7-1，跳過「今天只複習」的框（M3）。手機介面 3：複習卡一張約 899 px，還有上次的選項和對錯（L3）；完成後底部按鈕空白（M1）。
- 情境 4 學習引導 3：面板寫「已學會 0 句・待複習 9 句」，可是這一次複習已經 2/2 ✓。我第一個反應是「還有 7 句沒做？」（M4）。
- 情境 5 方便性、手機介面 3：手冊在手機上還寫「左邊點一節」；「← 回到練習」藏在 ☰ 裡；第 7 節還在教用舊網頁和拿一張紙（L5）。

---

## 第 3 輪修正驗收

| 編號 | 第 3 輪的問題 | 這輪實際操作看到的 | 判定 |
|---|---|---|---|
| M1 | 完成後面板像歸零、按鈕沒反應 | 按完完成，面板寫「第 1 次 已完成 ✓」和一顆「開始下一次」，不再顯示「複習 0/10」。手機上從面板按「提早結束」，面板會自己收起（量過：open=false）。**但**手機底部那條的「下一次」是白字白底，看起來是空白方框（s2-08、s7）。按下去功能正常，會開始第 4 次。 | 面板修好；底部那條出現新問題（M1） |
| M2 | 只想複習的晚上沒有出口 | 複習做完，複習區最下面出現綠框「複習做完了 ✓ 今天要繼續學新的，還是先到這裡？〔接著學新的 ↓〕〔今天只複習，這次完成 ✓〕」，字眼很舒服（s3-06）。連續聽改成「這次複習的 6 句」，可以播完。面板的「這次完成（沒做完的留到下次）」現在是 358×39 px 的正常按鈕（原本 21 px 高）。**但**照著「下一題 ↓」走，會直接跳到 7-1，綠框在畫面上方 958 px 處，看不到（s3-05）。 | 框做得好；走到它的路被跳過（M3） |
| M3 | 斷線時關頁沒提醒 | 手機斷線後作答 7-4，關頁時跳出瀏覽器的離開確認（beforeunload）。我選留下，連回來約 15 秒內補存，電腦打開直接停在 7-5。紅條文字還是「連上後會自動補存」，沒提到「先不要換裝置」；那句「要等連上後才會出現在別台」只在「一打開就連不上」時才出現。 | 有感覺修好（文字小問題見 L7） |
| 新 | 面板「已學會 N 句・待複習 M 句」 | 有出現（電腦面板直接看得到；手機要點 ☰）。第 1 次結束「已學會 0・待複習 6」，第 3 次「已學會 0・待複習 9」。意思讓我看不懂（M4）。 | 有做，但字眼會誤會 |

順帶看到第 3 輪的低度問題：L1（按「我懂了」停在單字表中間）沒改；L2（從複習的最後一句跳過單字表）沒改；L3（複習卡有舊選項）沒改；L4（偷懶灰字沒建議）沒改；L5（手冊手機版）沒改，而且第 3 輪說「舊網頁和拿一張紙已拿掉」，這輪實際看到第 7 節還在；L10（☰ 39×37、語速鍵 29 px 高）沒改。**第 3 輪說已修好的「沒作答就出現下一題」（第 2 輪 L6），這輪又出現了**（M2）。

---

## 對 P3、P4 的看法（以這個學習者的角度）

**P3 複習越堆越多：影響大，但前 3 次感覺不到。**
- 我走了 3 次，每次的複習只有 6、2、3 句，還沒碰到 10 句的上限。
- 可是「待複習」已經從 6 變 9。我大約 6 成的句子會點字，照這個速度，大約第 5 次以後就會開始排不進去（第 3 輪連用 9 次時積到 48 句）。
- 這個人最怕的是「做了很多，卻看不到盡頭在縮小」。現在面板把「待複習」顯示出來了，數字只會一直往上，「已學會」卻要很久才會動（見 M4）。這會讓問題更早被感覺到。
- 停車場的推薦做法（複習優先、總量 20 句不變）很適合他：不用自己決定、每次時間一樣、而且「先鞏固再學新的」符合他說的「紮實」。我建議採用。

**P4 偷懶的題不回來：影響中等，而且會常發生。**
- 他自己說會偷懶，晚上很累。我這輪照他的習慣偷懶了 2 題（6-2 先看翻譯、6-7 沒聽就答）。兩題都只得到題號旁一行很淡的灰字，之後的複習清單裡沒有它們。
- 對他來說，這等於「偷懶比認真輕鬆」，而且沒人會發現。
- 停車場的推薦做法（沒先聽的也排進下一次複習）是「不加鎖、只讓它回來」，跟他要的「抓分寸」一致。建議採用，並把灰字改成「已作答（這題沒先聽，下次複習會再聽一次）」，讓後果看得到、又不是懲罰。

---

## 問題清單（依嚴重度排）

| 編號 | 情境 | 看到什麼 | 為什麼困擾 | 建議改法 | 嚴重度 | 截圖 |
|---|---|---|---|---|---|---|
| M1 | 2、3 | 手機底部那條：三區都做完時，主按鈕「完成 ✓」是**白字白底**，只看到一個空白方框。按完完成後，「下一次」也一樣是空白方框。量過：文字 rgb(255,255,255)、底色 rgb(255,255,255)。原因是 `.bar button{background:#fff}` 蓋掉了 `.primary` 的黑底，白字還留著。 | 手機上最常用的就是底部那條，大拇指就在那裡。做完一整次，最重要的那顆鈕卻變空白，很累的時候會以為壞了，或不敢按。 | `.bar .primary` 補上 `background:var(--ink);color:#fff`。 | 中 | s2-07-phone-cont-done.png、s2-08-phone-finished.png |
| M2 | 1、2 | 每一題還沒作答，下方就有「下一題 ↓」（電腦、手機都有）。第一次打開的 6-1、6-2 都看得到。在手機上按 6-5 的「下一題」（6-4 還沒做）：畫面完全沒動。原因是 `.nextbtn{display:block}` 蓋掉了 `hidden`。依同一條 CSS，複習卡也一樣（s3-02 的 6-1 卡下方有「下一題」）。 | 新手會以為可以跳過這題。偷懶的人遇到難題會直接按它，按了又沒反應，會覺得網頁壞了。第 3 輪記錄這已修好，這輪又回來了。 | 加一條 `.nextbtn[hidden]{display:none}`。 | 中 | s1-04-q61-before.png、s2-01-phone-open.png、s3-02-phone-first-review.png |
| M3 | 3 | 只想複習的晚上（手機第 2 次）：最後一句複習 6-9 按「下一題 ↓」，畫面直接捲到 7-1（scrollY 6515）。「今天只複習」的綠框在畫面上方 958 px 處，看不到。底部那條還是「↓ 接著做」。也順便跳過了第 7 組的 5 個新字表。第 3 次也一樣：複習完按「下一題」直接到 7-1。 | 第 3 輪做的出口很好，可是「無腦」照下一題走的人永遠看不到它，就會被推進新題，又回到第 3 輪的問題。 | 複習的最後一句按「下一題」（或底部「↓ 接著做」）時，捲到綠框，不是捲到第一題新題。按「接著學新的 ↓」再捲到「② 新學」標題（單字表在它下面）。 | 中 | s3-04-phone-last-review-done.png、s3-05-phone-after-reviews.png、s3-06-phone-rvdone-box.png |
| M4 | 4 | 面板寫「已學會 0 句・待複習 9 句」，同一時間這一次的複習是「2 / 2 ✓」。查程式：「待複習」算的是所有排在之後的句子，不是「今天還沒做的」。「已學會」要連續按 3 次「都聽出來了」，最早要到**第 12 次**才會出現第 1 句（程式：隔 1、3、7 次）。而第一次就全部聽出來、沒點字的句子（我這輪有 6-5、6-10、7-4）永遠不會算進「已學會」。 | 「待複習 9」看起來像「還有 9 句欠著」，跟「複習 ✓」互相矛盾。「已學會 0」會掛將近兩週，而且越認真聽、越少點字，這數字越不會動。對一個討厭分數、需要看到進步的人，這行字反而像在扣分。 | 字眼要主理人拍板。我推薦改成：「用新方法練過 14 句 · 之後會再聽 9 句」，「已學會 N 句」等 N 大於 0 才顯示。第一次就全部聽出來的句子，算在「練過」裡。 | 中 | s7-02-phone-session4.png（面板文字見 log） |
| L1 | 1 | 第一次按「我懂了」，畫面停在單字表中間（scrollY 500），「第 1 次學習」「① 複習：這次沒有要複習的 ✓」「② 新學」都在畫面外。手機上中途「重看方法」再按「我懂了」，停在某張複習卡的下半（scrollY 993）。 | 第一次用時看不到「這次要做三件事」的全貌。 | 按「我懂了」後捲到「第 N 次學習」那一行（中途重看時捲回原本的位置）。 | 低 | s1-03-after-ok.png、s6-04-phone-after-ok.png |
| L2 | 1 | 「這組的 5 個新字」表沒有一句說要怎麼用。 | 新手不知道要不要聽、要聽幾遍。 | 表上方加一行：「先按 🔊 把這 5 個字各聽一次（約 1 分鐘），再開始做題。」 | 低 | s1-03-after-ok.png |
| L3 | 3、4 | 複習卡還有上次的 5 個選項、對錯（例如紅色「✗ 錯誤」）、標記。手機一張約 899 px。 | 複習是驗耳朵，舊的對錯讓人分心；手機要多滑。 | 選項、對錯、標記收進「看上次的題目」，預設收起。 | 低 | s3-03-phone-missed-again.png |
| L4 | 1、2 | 偷懶的題只有題號旁一行淡灰小字「已作答（這題沒先聽）」，沒有下一步。 | 很累的時候根本不會注意到。 | 見 P4：灰字後加「下次複習會再聽一次」。 | 低 | s1-07-q62-lazy.png、s2-05-phone-lazy-6-7.png |
| L5 | 5 | 手冊（手機）：開頭還寫「左邊點一節看一節」；「← 回到練習」在 ☰ 裡（☰ 34×34 px）。第 7 節「這兩天怎麼練」還寫「網頁位置 C:\D槽\…\toeic-drill-01.html」和「拿一張紙」，手機上沒有意義，上線後也過期了。表格裡的 code 會從字中間斷行（「has bee／n」「fo／r」）。上下節按鈕 43 px 高，很好按。 | 手機上不知道怎麼回練習；第 7 節會讓人以為還要用舊網頁。 | 手機版文字改「點左上角 ☰ 選一節」；標題上方放一個看得到的「← 回到練習」；第 7 節上線後拿掉或收起；code 不要在字中間斷行。 | 低 | s5-01-phone-guide-top.png、s5-03-phone-guide-next.png |
| L6 | 2、5 | 手機點擊大小：選項 358×42、🔊 136×38、下一題 94×42、複習兩顆 42 px 高、面板主按鈕 39 px 高，都好按。偏小：底部 ☰ 39×37、語速鍵 43×29、面板下方連結一行 22 px 高、最上方「重看方法」21 px 高。 | 單手用大拇指點語速和 ☰ 偶爾會點歪（推測）。 | ☰、語速鍵、面板連結至少 44 px 高。 | 低 | s2-09-phone-panel-finished.png |
| L7 | 4 | 做到一半斷線，紅條寫「連不上 server，進度暫存在這台裝置，連上後會自動補存。」沒有說「先不要換裝置」。關頁時會跳出離開確認，這點有保護到。 | 被打斷、換裝置時，還是可能看到進度倒退（第 3 輪 M3 的情況）。 | 斷線中的紅條也用「這台做的事要等連上後才會出現在別台」那一句。 | 低 | s4-03-phone-offline.png |
| L8 | 3 | 「今天只複習」的綠框沒有連續聽的選項。連續聽在頁面最下面，中間隔著 10 題新題（手機約 7,000 px）。 | 累的晚上不會滑那麼遠，「反覆聽已經懂的句子」這一步就被跳過。 | 綠框加一顆〔連續聽這 N 句〕。 | 低 | s3-06-phone-rvdone-box.png |

---

## 做得好的地方（保留）

- **方法卡不用手冊就看得懂。** 電腦 677 字、約 2 分鐘讀完；手機 1.7 個畫面，表格不會超出畫面。「為什麼只聽得到零碎的字」直接講中了這個人的痛點。
- **每一題的提示把方法講清楚。** 播放鍵旁的 5 步、句子上的「點一下認識但沒聽出來的字」、翻譯旁的「中文是鑰匙」，照著做就是方法本身。
- **複習的淡色標記很清楚。** 上次的字是淡粉底紅字，這次又沒聽到是實心紅底白字，一眼分得出來。點了字，「這次都聽出來了」自動變灰，不會按錯；取消後又可以按（s3-03）。
- **「今天只複習」的框字眼很舒服**：「今天要繼續學新的，還是先到這裡？」沒有罪惡感。
- **打開就在對的地方。** 手機一打開就停在電腦做到的 6-4；做到 6-6 關掉再開，停在 6-7；電腦隔天打開，停在手機斷線時做完的下一題 7-5。
- **沒做完的會接著排。** 第 3 次提早結束（新學 4/10），第 4 次自動排「7-5～7-10，6 題」。
- **斷線有保護。** 紅條固定在上方、底部有「⚠ 未同步」、關頁會跳確認、連回來自動補存。
- **完成後面板不再像歸零**，手機面板會自己收起。
- **沒有日期、沒有連續天數、沒有紅色數字。** 隔天打開就是下一次，沒有壓力。
- 整輪 4 次學習、兩台裝置、斷線一次，沒有任何 JavaScript 錯誤。

---

## 需要真人確認的事

1. **P3、P4 要主理人拍板**（會動到合約第 11、13、15 條）。M4 的字眼也要主理人選。
2. **真的聲音和時間。** 無頭 Chrome 沒有聲音，「已練 N 分」整輪都是 0（推測是無頭瀏覽器沒有視窗焦點，第 3 輪也記錄過）。一次學習實際多久，要真人計時。
3. **「先聽 3 遍不看螢幕」做不做得到。** 🔊 鈕就在句子和選項正上方，手機上按播放時眼睛一定會看到句子。合約第 25 條決定不蓋住，所以不列成問題；真人可以留意會不會因此用猜的。
4. **「✓ 用新方法練過」的門檻。** 6-3 只聽 1 遍就作答，也拿到綠色「✓ 用新方法練過」（提示寫的是 3 遍）。是否要更嚴，要主理人感覺（我覺得不用加規則，推測）。
5. **每題重複的 5 步提示**，用幾天後會不會變成「看不到的壁紙」（推測）。
6. **真的手指和手機瀏覽器。** ☰ 39×37 px、語速 29 px 高，大拇指會不會點錯；手機瀏覽器自己的工具列會不會蓋住網頁底部那條。

本報告的每一項判斷，都來自實際操作畫面、量元素尺寸與顏色、讀網頁的進度和看截圖；M1、M2 的原因來自讀 app.css，M4 的「第 12 次」來自讀 plan.js 的排程規則。標「推測」的是我無法直接驗證的部分。