# 02 預告：聽力練習模式（2026-10-04）

## 1. 拆成幾票、順序

| 票 | 做什麼（打開就能實測） | 認領合約條號 | 阻塞 |
|---|---|---|---|
| 1 | 方法說明卡＋所有步驟提示文字 | 1、2、3、29 | 無 |
| 2 | 每題一行「什麼時候可以看」提示（題目與選項照原樣顯示） | 25、26、27 | 無 |
| 3 | 點字標記＋耳朵缺口清單 | 28、30 | 無 |
| 4 | 進度存放升級：保留舊紀錄、加次數與複習欄位、匯出／匯入 | 31、32、33 | 無 |
| 5 | 這一次的三區畫面＋新學區＋左側進度＋完成按鈕＋看全部切換 | 4–12、21–24、36 | 被票 4 擋 |
| 6 | 複習排程（1／3／7 次、上限 10）＋複習區 | 13–18 | 被票 3、4、5 擋 |
| 7 | 連續聽 | 19、20 | 被票 5 擋 |
| 8 | 進度存到 server（以 server 為準）＋連不上時暫存＋多裝置不互蓋＋介面說明文件 | 34、35、37、38 | 被票 4 擋 |

| 9 | 手機版面：底部進度條＋展開面板，所有新畫面在手機寬度可用 | 39 | 被票 1–8 擋 |

- 每一票都會改同一個網頁檔，所以**依序做、不平行**。
- 合約 41 條都有票認領；第 40、41 條是「不准做的事」，每一票都要遵守，並由第 2 關驗收逐條檢查。
- 沒有不可逆的決定：舊進度會先自動備份成另一份，再搬到新格式。

**收尾另交：** 一份「學習方法手冊」HTML——一次學習的每一步怎麼做、在練什麼、哪些做法是錯的、怎麼知道有進步、什麼時候調高語速。

## 2. 怎麼驗收（四關）

| 關 | 做什麼 |
|---|---|
| 1 機器關 | 用 Chrome 無頭模式跑自動測試腳本：網頁沒有錯誤訊息、每一條行為都有對應的測試 |
| 2 合約關 | 派一個沒參與製作的新助手，只拿合約逐條對照實際行為，寫「一樣／不一樣／沒做到」 |
| 3 畫面關 | 電腦寬度（1400）和手機寬度（390）各截圖：方法說明、這一次三區、蓋住的題目、點字後、複習、完成後。由一個角色打分：「下班後很累、晚上 10 點打開網頁的你」，看順不順、懂不懂下一步要做什麼 |
| 4 味道關 | 檢查程式有沒有壞味道（重複、太長、改一處要動很多處） |

截圖存在 `docs/work/2026-10-04-listening-mode/evidence/`。

## 3. 我已經自己決定的（技術）

- 維持單一網頁檔，不用任何框架或建置工具：你直接丟上 server 就能用。
- 舊進度自動搬到新格式，搬之前先另存一份舊的：避免資料不見。
- 同步只做「讀一份、寫一份」，兩邊不一樣時用比較新的那份：只有你一個人用，不需要更複雜的合併。
- 自動測試用 Chrome 無頭模式腳本，放在本案資料夾。

## 4. 白天做還是晚上自動跑

白天做（這次有很多文字和畫面要你確認）。

## 5. 預估時間

我這邊大約 4～6 小時的工作量，可能分 2～3 次對話完成。

---

## 6. 畫面上的所有文字（第 9 題答應先給你看）

### 6-1 方法說明卡（第一次打開時出現在最上面）

> **聽力的底層邏輯（先讀這段，大約 2 分鐘）**
>
> **為什麼只聽得到零碎的字**
> 多益每秒大約 3 個字。你在腦中把前一段翻成中文時，後面的話已經過去了。
> 很多「認得的字」聽不出來，是因為你記得它的拼法，沒記得它被念出來的聲音。
> 說快時，字會黏在一起（has been），小字會念得很輕（to、of、for）。時態和細節，正好藏在這些小字裡。
>
> **所以要練兩件事**
> 1. 耳朵直接認出聲音。
> 2. 照英文的順序，一小段一小段懂。不等整句，不轉中文。
>
> **四個習慣**
> ① **先聽，後看。** 先看過句子，就會用猜的，以為自己聽懂了。
> ② **只抓聲音，不翻譯。** 聽不出來的地方先空著，不要停下來想意思。
> ③ **看原文時修耳朵。** 找出「認識、但剛剛沒聽出來」的字，點它，再聽那一小段實際怎麼念。
> ④ **反覆聽已經懂的句子。** 中文是鑰匙，用一次就好，不是拐杖。同一段聲音聽懂過很多次，翻譯就會自己消失。
>
> **什麼時候可以看**
>
> | 時機 | 可以看什麼 | 為什麼 |
> |---|---|---|
> | 第 1～3 遍 | 什麼都不看，眼睛離開螢幕 | 先看就會用猜的，以為自己聽懂了 |
> | 聽完 3 遍 | 英文句子和選項，開始做文法題 | 這時再看，才會發現「原來那團聲音是這幾個字」 |
> | 做完題 | 點出沒聽出來的字，到句子拆解聽卡住的那幾塊 | 修耳朵：把聲音和字配起來 |
> | 修完耳朵 | 眼睛跟著英文再聽一遍 | 讓聲音和字同時進到腦中 |
> | 英文看了、拆解也聽了，意思還是不懂 | 翻譯，看一次 | 中文是鑰匙，不是拐杖 |
> | 最後 | 什麼都不看，再聽一遍 | 確認聲音能直接連到意思 |
> | 複習時 | 先聽 2 遍再看 | 意思你早就知道，要驗的是耳朵 |
>
> **怎麼知道有進步**
> 聽到學過的句子時，畫面比中文字先出來。
>
> 〔我懂了〕

收起後，最上方留一行：`📖 重看方法`

### 6-2 這一次的畫面

```
第 5 次學習
① 複習 3 句                         ✓ 已完成 / 進行中
   隔一段時間再聽一次，聲音才會跟意思連起來。
② 新學：第 4 組（5 個新字＋10 題）     6 / 10
   每一題：先聽，再看，再點出沒聽出來的字。
③ 連續聽                             □
   這次學的句子連著播，不看字。目的是跟上速度，不是每個字都懂。
〔這次完成 ✓〕
〔看全部題目〕
```

這次沒有到期的複習：`這次沒有要複習的 ✓`
10 組都學完：`第 1 冊的新題都學完了 🎉 之後每次只有複習和連續聽。`
按完成後：`辛苦了。下次打開會自動排好下一次的內容。`

### 6-3 每一題（題目與選項照原樣顯示）

播放鍵旁一行小字：
```
先聽 3 遍不看螢幕 → 看英文、做題 → 點出沒聽出來的字 → 跟著英文再聽 → 不看字再聽一遍。翻譯最後才看。
```

句子上方一行小字：
```
點一下「認識、但剛剛沒聽出來」的字。它會排進之後的複習。
```

翻譯的標題旁：
```
翻譯（中文是鑰匙：英文看了、拆解也聽了，還是不懂才看，看一次就好）
```

### 6-4 複習的每一句

```
🔊  先聽 2 遍不看螢幕，再看句子。上次沒聽出來的字會淡淡標出來，確認這次有沒有聽到。
〔這次都聽出來了〕  〔還是有沒聽出來的〕
```
小字：`老實按就好，沒有分數。猜出來的不算聽出來。`

### 6-5 左側面板

```
這一次的進度
複習    3 / 3 ✓
新學    6 / 10
連續聽  □
已練    42 分

🔊 語速 …（原本的按鈕）
耳朵缺口清單
匯出進度 ｜ 匯入進度 ｜ 同步設定
```

### 6-6 耳朵缺口清單

```
耳朵缺口清單
你點過「沒聽出來」的字。常出現的，通常是黏在一起或念得很輕的小字。
been   ×4   ▶
to     ×3   ▶
…
```