Chapter 5: Error Review & Mock Test

Key Vocabulary

只針對錯題、弱項複習，再配一份完整模擬測驗檢驗成果。這一章是讀完前四章後的最後一步，用來確認真正學會了什麼、還缺什麼。

---

1. Error Log (Complete It Yourself)

錯題記錄表

每次做完第三章的練習卷或本章的模擬測驗，把答錯的題目記錄下來，定期回頭複習，比反覆重看整份資料更有效率。

How to use / 使用方式：

1. 錯誤原因盡量寫具體，不要只寫「不會」——例如「把 sticky 記成 fixed」「忘記物件要先轉字串」，這樣才知道下次要注意什麼
2. 同一個錯誤原因出現兩次以上，代表這是弱項，優先回對應章節重讀
3. 考前一天只需要重看這張表 + 第一章的速查表，不用整份資料重讀一遍

---

2. Full Mock Tests (Two Official-style Papers)

完整模擬測驗

來源：NotebookLM 筆記本中的官方模擬筆試。限時作答（建議選擇題每題 1 分鐘、簡答題每題 3 分鐘），做完才對答案，模擬真實考試的時間壓力。

Paper 1 / 第一組

Choice Questions (2 marks each) / 選擇題

1. 在 HTML 表單中，若要讓使用者輸入電話號碼，最合適的 <input> 類型是： A. text　B. number　C. tel　D. phone
2. 在 CSS 中，若要將文字設定為紅色，應該使用： A. text-color: red;　B. color: red;　C. font-color: red;　D. background: red;
3. 在 JavaScript 中，使用哪個方法可以將物件轉換成 JSON 字串？ A. JSON.parse()　B. JSON.stringify()　C. object.toString()　D. localStorage.setItem()
4. 使用 LocalStorage 儲存資料時，下列哪項是正確的？ A. 儲存後關閉瀏覽器資料會消失　B. 只能存圖片，不能存文字　C. 可以透過 key-value 方式存取資料　D. LocalStorage 與 Cookie 完全相同
5. 在網站中加入圖片時，下列哪個屬性可以幫助視障人士理解圖片內容？ A. title　B. alt　C. name　D. description

Short-answer Questions (5 marks each) / 簡答題

1. 請寫出一個簡單的 HTML 表單範例，讓使用者可以輸入「姓名」與「電話」。
2. 若要讓「旅遊名片」更吸引人，請列出兩個設計方法（例如：配色、圖片）。
3. 當使用者輸入的資料不完整時，系統應該如何提醒他？請舉一個例子。

📘 第一組答案與解析（先作答完再展開）

Answers: Choice Questions / 選擇題

1. C。tel 是專門設計給電話號碼輸入的，手機會自動呼叫數字鍵盤。
2. B。設定文字顏色要用 color: red;。
3. B。JSON.stringify() 把物件轉成字串；JSON.parse() 則是把字串轉回物件。
4. C。LocalStorage 以 key-value 格式存取，例如：localStorage.setItem("name", "Wing");
5. B。alt 屬性提供替代文字，讓螢幕閱讀器能讀出圖片內容。

Answers: Short-answer Questions / 簡答題

1. 範例答案：

   <form>
     姓名：<input type="text" name="name"><br>
     電話：<input type="tel" name="phone"><br>
     <button type="submit">送出</button>
   </form>
   

   Key point: use text for a name and tel for a phone number. 重點：姓名用 text、電話用 tel。
2. 參考答案：使用明亮配色讓名片更有活力；加入景點圖片讓名片更直觀。
3. 參考答案：例如當「姓名」欄位空白時，顯示紅色字「請輸入姓名」，也可以加上紅色框方便使用者快速發現。

Paper 2 / 第二組

Choice Questions / 選擇題

1. 在瀏覽器中使用 LocalStorage 儲存團員資料，下列敘述正確的是： A. LocalStorage 的資料在瀏覽器關閉後會消失　B. LocalStorage 只能儲存文字資料，若要儲存物件需轉換為 JSON 字串　C. LocalStorage 的容量限制通常是 50MB　D. LocalStorage 與 SessionStorage 的差別在於速度
2. 若要在「景點自助點餐系統」中，讓分類標題在捲動過程中固定在螢幕頂端，應使用哪個 CSS 屬性？ A. position: fixed　B. position: absolute　C. position: sticky　D. position: relative
3. 在「旅遊報名系統」的第三步中，出生日期需要分為「年、月、日」輸入，最適合的 HTML 標籤組合是： A. <input type="text"> × 3　B. <input type="number"> × 3　C. <select> 下拉式選單 × 3　D. 任意皆可，但需考慮使用者體驗與驗證便利性
4. 在點餐系統中，若要點擊左邊分類時，右邊商品區塊「平滑捲動」而非瞬間跳轉，最合適的技術是： A. scrollIntoView({behavior: "smooth"})　B. CSS position: sticky　C. 使用 LocalStorage 保存滾動位置　D. 改用 iframe 嵌入
5. 關於「無障礙網站設計」，下列哪項不是常見的要求？ A. 提供高對比度文字與背景　B. 使用替代文字（alt）描述圖片　C. 所有操作必須使用滑鼠完成　D. 表單必須有清楚的標籤（label）

Short-answer Questions / 簡答題

1. 在旅遊報名系統中，若學生輸入了 3 位團員資料，但瀏覽器突然被關閉，當他重新開啟頁面時，這些資料應如何設計才能自動填回？請說明技術方法與主要步驟。
2. 請描述「旅遊名片」應包含哪些關鍵資訊，並簡單說明如何讓名片設計更容易被用戶截圖與分享。
3. 點餐系統的資料原本以「純文字檔」形式提供，請說明你會如何處理這份資料，才能在 JavaScript 中更方便地使用並生成商品列表？
4. 在設計表單時，若用戶填寫資料不完整或輸入錯誤，請說明你會如何設計「錯誤提示」的呈現方式，才能同時兼顧使用者體驗與無障礙設計。
5. 在「景點自助點餐系統」中，為何要將左邊分類與右邊商品區分開？請從使用者操作便利性與版面設計的角度作答。

📘 第二組答案與解析（先作答完再展開）

Answers: Choice Questions / 選擇題

1. B。LocalStorage 只能儲存字串資料，物件要先用 JSON.stringify() 轉換，取出時再用 JSON.parse()。（A 錯：關閉瀏覽器後不會消失，SessionStorage 才會；C 錯：大多數瀏覽器限制約 5MB；D 錯：差別在生命週期，不是速度）
2. C。position: sticky 可以在捲動時固定元素，直到下一個元素頂替。
3. D。出生日期輸入可用 number 或 select，也可以 text，關鍵在於驗證與易用性。
4. A。scrollIntoView({behavior: "smooth"}) 或 window.scrollTo({top, behavior: "smooth"}) 可讓頁面平滑捲動。
5. C。無障礙要求必須讓鍵盤操作可行，不能只依賴滑鼠。

Answers: Short-answer Questions / 簡答題

1. 答案要點：使用 LocalStorage 即時保存表單輸入；每次輸入（onchange／oninput）時即寫入 LocalStorage；頁面載入時（onload），檢查 LocalStorage，若有資料則自動填回。考生需理解「即時保存 → 重開後讀取 → 自動填寫」的流程，而不是只提「用 LocalStorage」。
2. 答案要點：包含姓名、景點名稱、圖片、旅遊日期。設計重點：美觀、易於截圖、適合手機螢幕比例。
3. 答案要點：將文字檔轉換為結構化資料（JSON／陣列），例如用分隔符號拆分，轉成 {category, name, price, image} 的 JSON；在 JS 中迴圈讀取，生成對應的商品卡片。
4. 答案要點：必填欄位若空白則顯示紅色邊框 + 錯誤訊息；使用 <label> 與 ARIA 屬性；錯誤訊息放在輸入框旁邊，不要只用顏色。
5. 答案要點：操作便利性——快速切換分類；版面設計——左窄右寬，符合手機使用習慣；用戶體驗——分類清楚，商品一目了然。

---

3. Final-round Implementation Checklist

決賽模擬實作檢查清單

如果本週的模擬練習是動手做一個小專案（例如挑一題舊決賽題目限時 1.5 小時實作），交件前用這份清單自我驗收，模擬決賽的雙軌評分（Cypress 自動化 + 人工評審）。

Files and Environment / 檔案與環境

• 作品放進題目指定的資料夾名稱，資料夾名稱要跟題目要求完全一致
• 附上 README.txt，清楚寫明如何運行
• 所有檔案使用 UTF-8 編碼

Automated Checks / 自動化評測必查

• 每個題目指定的 ID／class name 完全照抄（大小寫、連字號都要一致）
• 清單類結構若要求用 <ul> + <li>，不要偷懶改用 <div>
• 若題目要求特定資料格式，逐字比對輸出格式是否完全一致

Functional Logic / 功能邏輯

• 表單資料在未提交時，會即時存入 LocalStorage
• 頁面重新整理／重開瀏覽器後，未提交的資料能自動回填
• 若題目要求排序，排序邏輯要對到邊界情況（今天、已過期、未來）

Visual Design and Accessibility / 視覺與無障礙

• 佈局在手機螢幕（≤ 640px）下不會跑版
• 按鈕與可點擊元素大小至少 44×44px
• 所有 <img> 都有 alt 文字，所有表單欄位都有對應的 <label>
• 用 Tab 鍵測試，確認所有可互動元素都能用鍵盤操作到

Final Step Before Submission / 交件前最後一步

• 用無痕模式重新整理一次，確認第一次載入沒有殘留資料造成的假象
• 清空 LocalStorage 後重新測試一次完整流程
• 檢查 console 有沒有紅字錯誤（F12 開發者工具）

模擬測驗做完後，把答錯或做錯的地方填回本章第一節的錯題記錄表，下次複習只看錯題表即可。