Chapter 3: High-Frequency Applications

Key Vocabulary

Frequent question types, typical scenarios, and common variations. Focus on how knowledge is packaged into a question—not on memorising definitions again.

本章重點：認出題型，再套用技術。

---

1. Four Typical Final-round Scenarios

決賽四大典型情境分類

Final-round themes change every year, but their technical combinations mostly fit these four scenarios. Identify the scenario first, then apply the matching technique.

Scenario Detail: 2022 Final / 2022 年決賽

Part 1: Macau Travel Registration (Form Auto-restore, 60%)

Task: Build a travel-registration form. Choose an attraction, enter data for 1–4 members, and generate a shareable travel card.

Flow: itinerary → attraction → member details → travel card. 流程：行程選擇 → 團員資料 → 旅遊卡。

Each member: surname, given name, gender, date of birth (year/month/day separately), phone, cities visited in the past 14 days, and final departure date.

Data rule: before submission, save everything to LocalStorage as it changes and restore it after reopening. After submission, show saved records and allow individual edit/delete.

Part 2: Attraction Self-service Ordering (Sticky Category List, 40%)

Task: display data and scrolling only; no cart logic. Convert the provided plain text into a useful data format.

Layout: categories on the left and products on the right. Group products by category; keep headers sticky. Clicking a category must scroll smoothly, not jump.

Scenario Detail: Fourth Final / 第四屆決賽

Task 1: Important-date Countdown List (Sorted List, 1.5 hours)

Task: a due-date reminder page. The user adds a title, date, and reminder colour; the list is sorted by days remaining.

Sort rule: today first; future dates from soonest to latest; past dates at the end, from most recent to oldest.

Visual rule: use the selected colour for border and text; today needs a special state; past items use 50% opacity.

Storage: keep records in LocalStorage, restore them on reload, and show an empty list after clearing.

Export: a button shows a <textarea> listing each record as date (title) days remaining, for example 2021-11-07 (Return book) 3 days later.

Required Element Markers / 自動化評測依賴

Task 2: Starbucks Responsive Website (Multi-device, 1.5 hours)

Task: reproduce a Starbucks China-style page that supports mobile, tablet, and desktop, including QR-code browser environments.

Breakpoints: mobile ≤ 640px, tablet ≤ 1024px, desktop > 1024px. The mobile-only navigation stays at the bottom with position: fixed.

Shared Requirements / 共通注意事項

Use the specified Desktop folder (for example module_a) and include README.txt. Diagram colours are references only. Follow accessibility guidance. The environment provides jQuery, Vue.js, React, moment.js, Tailwind, Bootstrap, and Zurb Foundation.

---

2. Preliminary Multiple-choice Practice (40 Questions)

初賽選擇題練習卷

Answer first, then check. The questions cover HTML, CSS, JavaScript, LocalStorage, responsiveness, and accessibility—the most typical preliminary-round format.

HTML

1. 在 HTML 表單中，若要讓使用者輸入電話號碼，最合適的 <input> 類型是？ A. text　B. number　C. tel　D. phone
2. 下列哪個屬性可用於設置圖片的替代文字，幫助視障人士理解圖片內容？ A. src　B. alt　C. title　D. href
3. HTML5 中，哪個標籤用於定義獨立、可自成一篇的內容？ A. section　B. article　C. div　D. aside
4. 哪個屬性可以使一個輸入框必須填寫？ A. required　B. placeholder　C. value　D. readonly
5. <input> 元素的哪個 type 值用於輸入日期？ A. text　B. datetime　C. date　D. datetime-local
6. 哪個元素用於定義一組相關表單控件的標籤？ A. label　B. legend　C. fieldset　D. form
7. 哪個屬性用於在表單中限制最大輸入長度？ A. maxlength　B. max　C. limit　D. range
8. 以下哪個元素是內聯（inline）元素？ A. div　B. span　C. section　D. article
9. 哪個 HTML 標籤用於定義表格的表頭單元格？ A. td　B. tr　C. th　D. caption

CSS

10. 在 CSS 中，若要將文字設定為紅色，應該使用哪個寫法？ A. text-color: red;　B. color: red;　C. font-color: red;　D. background: red;
11. CSS 盒子模型（Box Model）由哪四個部分組成？ A. content, padding, border, margin　B. content, margin, gap, border　C. width, height, padding, margin　D. content, border, gap, padding
12. 若要在「景點自助點餐系統」中，讓分類標題在捲動過程中固定在螢幕頂端，直到下一個分類到達為止，應使用哪個 CSS 屬性？ A. position: fixed　B. position: absolute　C. position: sticky　D. display: flex
13. em 和 rem 單位之間的區別是什麼？ A. em 基於根元素，rem 基於父元素　B. rem 基於根元素，em 基於父元素　C. 兩者都是基於根元素　D. 兩者都是基於父元素
14. 元素設定 padding: 20px、border: 5px、margin: 10px、width: 200px（預設 box-sizing），該元素的總佔用寬度是？ A. 200px　B. 230px　C. 250px　D. 270px
15. 在 display: flex 的容器中，若想讓某一個特定子元素垂直置中，且不影響其他子元素，應使用哪個屬性？ A. justify-content: center　B. align-self: center　C. vertical-align: middle　D. flex-direction: column
16. CSS 選擇器 div > p 能夠選中哪些元素？ A. 所有的 p 標籤　B. 直接位於 div 內的 p 元素　C. 所有 p 元素的子元素　D. 直接位於 p 內的 div 元素
17. 讓多個顏色平滑漸變的 CSS 函數是？ A. color-gradient()　B. linear-gradient()　C. bg-gradient()　D. smooth-gradient()

JavaScript

18. 在 JavaScript 中，使用哪個方法可以將物件轉換成 JSON 字串？ A. JSON.parse()　B. JSON.stringify()　C. object.toString()　D. localStorage.setItem()
19. 若要在點擊左邊分類時，右邊商品區塊「平滑捲動」而非瞬間跳轉，最合適的技術是？ A. scrollIntoView({behavior: "smooth"})　B. CSS position: sticky　C. 使用 LocalStorage 保存滾動位置　D. 改用 iframe 嵌入
20. 哪個運算子同時比較值與型別？ A. ==　B. ===　C. !=　D. ≤
21. const 變數的主要特點是什麼？ A. 變量的值永遠不能改變　B. 變量不能重新賦值，但其內容可以改變（如物件屬性）　C. 變量可以重新賦值但不能重新宣告　D. 變量的型別永遠不會改變
22. Array.prototype.map() 方法回傳什麼？ A. 修改原陣列　B. 遍歷陣列，無回傳　C. 一個新的陣列，包含處理後的值　D. 第一個滿足條件的元素
23. 哪種方法最適合實現內容懶加載（lazy loading）以提升性能？ A. IntersectionObserver　B. window.onload　C. 使用 setTimeout 延遲加載　D. window.onscroll
24. 事件 event.preventDefault() 的作用是什麼？ A. 停止事件的冒泡　B. 阻止事件的默認行為　C. 阻止事件的綁定　D. 強制事件重新觸發

LocalStorage and Data Handling / 資料處理

25. 使用 LocalStorage 儲存資料時，下列哪項敘述正確？ A. 儲存後關閉瀏覽器資料會消失　B. 只能存圖片，不能存文字　C. 可以透過 key-value 方式存取資料　D. LocalStorage 與 Cookie 完全相同
26. 當需要將 JavaScript 中的一個複雜物件儲存到 LocalStorage 時，必須先進行什麼處理？ A. 使用 JSON.stringify() 轉換成字串　B. 使用 JSON.parse() 進行轉換　C. 直接將物件賦值給 setItem　D. 將物件存入 Cookie 代替
27. 若要求「當瀏覽器意外關閉後，已填寫但未提交的資料需自動恢復」，最佳實踐方式為何？ A. 每秒自動向後端 API 傳送資料備份　B. 利用 oninput 事件即時將欄位內容存入 LocalStorage　C. 將資料暫存在 SessionStorage 中　D. 在提交按鈕點擊時才存入資料庫
28. 在旅遊報名系統的第三步中，出生日期需要分為「年、月、日」輸入，最適合的 HTML 標籤組合是？ A. input type="text" × 3　B. input type="number" × 3　C. select 下拉式選單 × 3　D. 任意皆可，但需考慮使用者體驗與驗證便利性

Responsiveness and Accessibility / 響應式與無障礙

29. 為了確保手機網站內容在不同尺寸的設備上都能正確縮放，應該在 <head> 加入哪項標記？ A. <meta name="viewport" content="width=device-width, initial-scale=1">　B. <meta name="screen-size" content="device-width">　C. <link rel="stylesheet" media="handheld" href="mobile.css">　D. <base target="_blank">
30. 為了提升手機版導航選單的無障礙性，導航連結所在的區域應優先使用哪個 HTML5 語意標籤？ A. menu　B. nav　C. section　D. div
31. 哪種技術最適合讓網站在不同螢幕尺寸上有最佳響應性？ A. 僅使用固定寬度的 CSS　B. 僅使用百分比單位　C. 使用 CSS media queries 搭配相對單位（如 vw、vh）　D. 僅使用 JavaScript 調整

原始 40 題練習卷中，涉及「相似概念辨識」與「NOT/EXCEPT 型」的題目（例如 LocalStorage 與 SessionStorage 與 Cookie 的三方比較、哪一項不是無障礙設計要求）已移到第四章「易錯陷阱與高難辨識」，因為那些題目的重點是辨識力，不是單純應用。

Answers and Explanations / 答案與解析

---

3. NotebookLM Scenario Cards (10 Questions)

情境測驗卡

這 10 題是 NotebookLM 根據原始資料自動生成的情境式選擇題，每題附提示，題型更貼近「情境包裝」的出題手法。

1. 在開發手機版點餐系統時，若希望「分類標題」在頁面捲動時固定在頂部，直到下一個分類到達為止，最合適的 CSS 屬性為何？ A. position: fixed　B. position: sticky　C. position: absolute　D. display: flex 　→ B。sticky 具有「捲動範圍內彈性吸附」的特性。

2. 當需要將 JavaScript 中的一個複雜物件（Object）儲存到 LocalStorage 時，必須先進行什麼處理？ A. 使用 JSON.stringify() 轉換成字串　B. 使用 JSON.parse() 進行轉換　C. 直接將物件賦值給 setItem　D. 將物件存入 Cookie 代替 　→ A。LocalStorage 只能接受字串型別。

3. 在手機網站的「無障礙設計」中，關於錯誤提示的呈現，下列敘述何者最符合規範？ A. 僅將輸入框邊框設為紅色以示警告　B. 提供明顯的文字說明並搭配 ARIA 屬性　C. 使用彈出視窗（alert）強制中斷操作　D. 將錯誤欄位隱藏直到修正完畢 　→ B。單一視覺符號不足以傳達資訊給所有障礙類別的使用者。

4. 在 HTML5 表單中，為手機用戶輸入「聯絡電話」時設置 <input type="tel"> 的主要優點是什麼？ A. 瀏覽器會自動驗證輸入是否為正確格式　B. 手機會自動切換至數字或撥號專用鍵盤　C. 可以自動加密儲存電話號碼　D. 會強制限制輸入長度為 10 位數 　→ B。與行動裝置的虛擬鍵盤彈出邏輯有關。

5. 若要實現點擊左側分類菜單後，右側商品列表能以「平滑動畫」捲動到指定位置，應調用哪個 JavaScript 方法？ A. window.scrollTo({top: 0})　B. element.scrollIntoView({behavior: "smooth"})　C. document.getElementById().focus()　D. CSS transition: all 0.5s 　→ B。專門用於將元素移動到可視區域，且支持 behavior 設定。

6. 為了確保手機網站內容在不同尺寸的設備上都能正確縮放，應該在 HTML 文件的 <head> 加入哪項標記？ A. <meta name="viewport" content="width=device-width, initial-scale=1">　B. <meta name="screen-size" content="device-width">　C. <link rel="stylesheet" media="handheld" href="mobile.css">　D. <base target="_blank"> 　→ A。定義網頁「可視區域」與「縮放規則」的 meta 標籤。

7. 在製作旅遊報名系統時，若要求「當瀏覽器意外關閉後，已填寫但未提交的團員資料需自動恢復」，最佳的實踐方式為何？ A. 每秒自動向後端 API 傳送資料備份　B. 利用 oninput 事件即時將欄位內容存入 LocalStorage　C. 將資料暫存在 SessionStorage 中　D. 在提交按鈕點擊時才存入資料庫 　→ B。需要在用戶輸入的同時，把資料存放在具有持久性的本地緩存中。

8. 在使用 CSS Flexbox 佈局時，若想讓容器內的某一個特定子元素垂直居中，且不影響其他子元素，應對該子元素使用哪個屬性？ A. justify-content: center　B. align-self: center　C. vertical-align: middle　D. flex-direction: column 　→ B。名稱中帶有「自我（self）」字樣，只影響單一元素。

9. 為了提升手機版導航選單的無障礙性，導航連結所在的區域應優先使用哪個 HTML5 語義標籤包裹？ A. <menu>　B. <nav>　C. <section>　D. <div> 　→ B。nav 縮寫代表 Navigation。

10. 關於 CSS 單位 rem 與 em 的區別，下列何者正確？ A. rem 是相對於根元素（html）的字體大小　B. rem 是相對於父元素的字體大小　C. em 是手機版專用的單位　D. 兩者皆是絕對長度單位，與字體大小無關 　→ A。「r」前綴代表 root（根元素）。

---

4. Final-round Short-answer Examples

決賽簡答題應用範例

決賽簡答題考的是「說明技術方法與步驟」，跟選擇題的準備方式不同，要能完整表達邏輯順序，不能只寫關鍵字。

Q1. 若學生輸入了 3 位團員資料，但瀏覽器突然被關閉，重新開啟頁面時資料應如何自動填回？請說明技術方法與主要步驟。 答案要點：使用 LocalStorage 即時保存表單輸入；每次輸入（onchange／oninput）時即寫入 LocalStorage；頁面載入時（onload），檢查 LocalStorage，若有資料則自動填回。要能講出「即時保存 → 重開後讀取 → 自動填寫」完整流程，不能只寫「用 LocalStorage」。

Q2. 點餐系統的資料原本以「純文字檔」形式提供，請說明你會如何處理這份資料，才能在 JavaScript 中更方便地使用並生成商品列表？ 答案要點：將文字檔轉換為結構化資料（JSON／陣列），例如用分隔符號拆分，轉成 {category, name, price, image} 的 JSON；在 JS 中迴圈讀取，生成對應的商品卡片。要能說出「轉換 → 結構化 → 迴圈生成」三步驟。

Q3. 在設計表單時，若用戶填寫資料不完整或輸入錯誤，請說明你會如何設計「錯誤提示」的呈現方式，才能同時兼顧使用者體驗與無障礙設計。 答案要點：必填欄位若空白則顯示紅色邊框 + 錯誤訊息；使用 <label> 與 ARIA 屬性確保螢幕閱讀器能讀出錯誤；錯誤訊息放在輸入框旁邊，不要只用顏色。要同時考慮 UX（直觀提示）與無障礙（文字+語音可讀）。

Q4. 在「景點自助點餐系統」中，為何要將左邊分類與右邊商品區分開？請從使用者操作便利性與版面設計的角度作答。 答案要點：操作便利性——快速切換分類，不用捲很久；版面設計——左窄右寬，符合手機使用習慣；用戶體驗——分類清楚，商品一目了然。這題考的是設計思維，不是技術。