ことこと卡

純前端日語單字卡 App，使用 HTML + CSS + JavaScript 單檔完成。

這個作品對應作業需求，包含：

• 至少 5 個打招呼單字卡，正面顯示日文假名與羅馬拼音
• 點擊卡片翻面顯示中文意思
• 使用瀏覽器 Web Speech API 朗讀日文，語言固定 ja-JP
• 語速切換：0.5x / 1x / 1.2x
• 分類切換：打招呼 / 數字 / 全部
• 每張卡背面都有例句與中文翻譯
• 兩個獨特功能：智慧複習模式、跟讀錄音鏡像模式

專案定位

• 純前端靜態網站
• 不需要後端
• 不需要資料庫
• 不需要登入
• 不需要外部 API 金鑰

所有資料都寫在前端程式中，學習進度只存在瀏覽器本機 localStorage。

檔案結構

hw3/
├── index.html
└── README.md

功能設計

1. 基礎功能

卡片模式

• 顯示 18 張卡片
• 分成 打招呼 8 張、數字 10 張
• 點擊卡片可翻面
• 正面顯示：
  • 日文
  • 假名
  • 羅馬拼音
• 背面顯示：
  • 中文意思
  • 日文例句
  • 中文翻譯

發音按鈕

• 使用 SpeechSynthesisUtterance
• lang 固定為 ja-JP
• 可以朗讀單字與例句
• 使用全域語速設定

語速選擇

• 0.5：慢速
• 1：普通
• 1.2：快速

分類切換

• 全部
• 打招呼
• 數字

2. 獨特功能一：智慧複習模式

目標

不是只看卡片，而是做「主動回想 + 自評 + 間隔複習」。

為什麼做這個

研究與教學實務都指出，單純重看不如「先回想再看答案」有效；把複習拉開間隔，也比一次密集重刷更能幫助保留。

做法

• 進入 智慧複習 後，卡片先顯示正面
• 使用者先在腦中回想中文
• 翻面後按自評：
  • 忘記了
  • 還可以
  • 記住了
• 每張卡都有本地進度資料：

{
  box: 1,
  dueAt: "ISO date",
  reviewedCount: 0,
  lapseCount: 0,
  lastResult: null,
  lastReviewedAt: null,
  lastShadowScore: null,
  lastPracticedAt: null,
  shadowPracticeCount: 0
}

複習規則

• 忘記了
  • 回到 Box 1
  • lapseCount + 1
  • 同一輪稍後再出現
• 還可以
  • 往下一盒
  • 最高到 Box 4
• 記住了
  • 往下一盒
  • 最高到 Box 5

盒子與間隔

• Box 1：立刻可再練
• Box 2：+1 天
• Box 3：+3 天
• Box 4：+7 天
• Box 5：+14 天

補充

• 智慧複習固定混合全部分類
• 錯題會在本輪複習尾端稍後回鍋
• 進度儲存在 localStorage

3. 獨特功能二：跟讀錄音鏡像模式

目標

解決「看得懂，但嘴巴說不順」。

做法

• 先播放單字或例句示範
• 使用者按 開始錄音
• 使用瀏覽器錄下自己的聲音
• 最長錄音 6 秒
• 錄音完成後可以立刻回放
• 使用者自評：
  • 需再練
  • 尚可
  • 清楚

為什麼這樣設計

這版維持純前端，因此不做語音辨識或雲端打分。

改用「示範播放 + 自錄回放 + 自評」：

• 可直接在瀏覽器完成
• 技術風險低
• 不需要後端
• 不需要外部服務

技術實作

• 示範播放：Web Speech API
• 麥克風錄音：getUserMedia
• 錄音封裝：MediaRecorder

資料保存

• 錄音檔不做長期保存
• 只保存：
  • 最後一次口說自評
  • 練習次數
  • 最後練習時間

技術設計

純前端原因

這個題目需要的能力都能由瀏覽器原生完成：

• 資料展示：HTML
• 視覺與翻卡動畫：CSS
• 狀態控制與互動：JavaScript
• 語音播放：Web Speech API
• 本地儲存：localStorage
• 錄音：MediaRecorder

因此這版 不需要後端。

狀態管理

主要狀態包含：

• 目前模式：browse / review / shadow
• 目前分類：all / greetings / numbers
• 目前卡片索引
• 是否翻面
• 語音速度
• 每張卡的複習進度
• 跟讀練習結果

響應式設計

• 桌機：左右雙欄
• 手機：上下堆疊
• 按鈕會自動換行，避免溢出

作業需求對照

圖片需求 1

做一個日語單字卡 App，用純 HTML 寫成一個檔案。包含至少 5 個打招呼用語，每張卡正面是日文假名和羅馬拼音，點擊翻面顯示中文意思。

對應方式：

• 單一 index.html
• 打招呼 8 張
• 正面顯示假名與羅馬拼音
• 翻面顯示中文

圖片需求 2

幫我加一個發音按鈕。點按鈕時用瀏覽器的語音合成（Web Speech API）唸出日文假名，語言設為 ja-JP。

對應方式：

• 單字與例句都有朗讀按鈕
• SpeechSynthesisUtterance.lang = "ja-JP"

圖片需求 3

加入語速選擇：慢速（0.5 倍）、普通、快速（1.2 倍）

對應方式：

• 提供 3 段式速度選單

圖片需求 4

除了打招呼，再加一個分類「數字」（いち、に、さん…）。再在每張卡片的背面加一個例句區，顯示一句使用這個單字的日文例句和中文翻譯

對應方式：

• 新增 數字 分類，共 10 張
• 每張卡背面都有例句日文與中文翻譯

圖片需求 5

加入兩個獨特功能

對應方式：

• 智慧複習模式
• 跟讀錄音鏡像模式

研究依據

1. 智慧複習模式

• Belardi, J., Jasińska, K., Berens, M., et al. 的研究指出，在詞彙 web app 中，spacing + feedback + testing 能帶來明顯學習收益。
  • 來源：https://www.frontiersin.org/journals/psychology/articles/10.3389/fpsyg.2021.757262/full
• Levlin, M., et al. 的研究指出，重複提取與間隔安排對字詞學習保留有幫助。
  • 來源：https://pubmed.ncbi.nlm.nih.gov/35320680/

2. 例句與語境

• Zhang 的研究指出，例句能幫助長期詞彙記憶。
  • 來源：https://www.iier.org.au/iier19/zhang.html
• WaniKani 社群討論也常提到，不少學習者在缺少語境時，容易只記得翻譯卻不會實際使用。
  • 來源：https://community.wanikani.com/t/attempting-sample-sentences/35303

3. 跟讀錄音

• Hashimoto 等人整理指出，shadowing 對發音、節奏、流暢度有幫助。
  • 來源：https://www.jstage.jst.go.jp/article/onseikenkyu/26/1/26_13/_article/-char/en
• 因為自動評分通常需要更重的語音辨識流程，所以本作採用純前端可穩定落地的 示範 + 自錄 + 回放 + 自評。

如何執行

本機執行

建議使用靜態伺服器，不要直接雙擊 file://。

例如：

python3 -m http.server 8000

然後打開：

http://localhost:8000

GitHub Pages

1. 把 index.html 與 README.md push 到 repo
2. 到 GitHub repo 的 Settings > Pages
3. Source 選 Deploy from a branch
4. Branch 選主分支
5. 儲存後即可使用靜態網址

測試與驗收

功能驗收

• 可切換 3 種模式
• 可切換 3 種分類
• 卡片可翻面
• 單字與例句可朗讀
• 語速切換可影響朗讀
• 智慧複習可以自評並更新盒子與到期時間
• 錯題會在同一輪稍後再出現
• 跟讀錄音可錄、停、播、評分
• 重整頁面後，複習進度仍存在

瀏覽器驗收

• Chrome
• Edge
• Safari
• 若沒聽到朗讀，請優先改用最新版 Chrome 瀏覽器開啟

已知限制

• SpeechSynthesis 的日文聲音品質依瀏覽器而異
• 若沒聽到朗讀，請優先改用最新版 Chrome 瀏覽器
• MediaRecorder 支援度取決於瀏覽器
• 若使用者拒絕麥克風權限，錄音功能會停用，但其他功能仍可使用
• 錄音檔不做跨工作階段保存
• localStorage 在 file: URL 下行為不穩定，因此建議走靜態伺服器

結論

這個作品維持 KISS 原則：

• 用單一 index.html 完成主要功能
• 不引入框架
• 不需要後端
• 把最有學習價值的兩個加分點放進去

如果後續要擴充，最自然的方向會是：

• 更多分類
• 匯入自訂單字
• IndexedDB 保存錄音
• 離線 PWA 化