/tags/english-learning/ Recent content in English Learning on Wayne X.Y. Blog Hugo zh-TW Tue, 05 May 2026 00:00:00 +0000 /zh/2026/05/05/vocabulary-test/ Tue, 05 May 2026 00:00:00 +0000 /zh/2026/05/05/vocabulary-test/ <h2 id="為什麼做這個工具">為什麼做這個工具？</h2> <p>學英文最痛的環節大概就是背單字。市面上有不少 App 可以用，但總覺得少了點什麼——要嘛廣告太多，要嘛介面複雜，要嘛沒辦法塞進自己想練的詞彙。</p> <p>所以我乾脆自己做一個。</p> <p><strong><a href="https://vocabulary-test.wayne-xy.com/">VocabularyTest</a></strong> 是我最近完成的 Side Project，一個輕量的英文單字測驗網頁應用，目標很簡單：打開就能練，練完就能走。</p> <hr> <h2 id="主要功能">主要功能</h2> <ul> <li><strong>題數選擇</strong>：開始測驗前可選擇 10、20、30 題或全部單字</li> <li><strong>即時回饋</strong>：每題作答後，正確選項變綠色，答錯的選項變橘紅色，立刻知道哪裡錯</li> <li><strong>錯題複習</strong>：測驗結束後，若答錯 4 題以上可進入錯題重測，針對弱點加強</li> <li><strong>單字列表</strong>：切換到 📋 頁籤可瀏覽所有單字，支援關鍵字搜尋、詞性篩選、A–Z / Z–A 排序，以及列表 / 格狀兩種顯示模式</li> </ul> <hr> <h2 id="如何匯入單字">如何匯入單字</h2> <p>應用程式讀取 <code>.md</code> 或 <code>.txt</code> 格式的檔案，每一筆單字須依照以下格式撰寫：</p> <pre tabindex="0"><code>- **單字**，[音標]，詞性，中文意思 </code></pre><p>實際範例：</p> <pre tabindex="0"><code>- **absolute**，[ˈæb.sə.luːt]，adj，絕對的、完全的 - **ambiguous**，[æmˈbɪɡ.ju.əs]，adj，模糊的、不明確的 </code></pre><p>中文全形逗號 <code>，</code> 與英文半形逗號 <code>,</code> 都可辨識，格式相當彈性。整理好單字檔後，直接上傳到網頁即可開始測驗。</p> <hr> <h2 id="技術架構">技術架構</h2> <p>整個專案以純前端實作，部署在 Cloudflare Pages 上。單字解析、測驗邏輯與介面渲染各自拆分成獨立模組（<code>parser.js</code>、<code>quiz.js</code>、<code>ui.js</code>），方便日後維護與擴充。</p> <hr> <h2 id="試試看">試試看</h2> <p>直接前往：<strong><a href="https://vocabulary-test.wayne-xy.com/">vocabulary-test.wayne-xy.com</a></strong></p>