Mobile Website Skills Competition · Revision Overview

Revision guide for the Macau student mobile website competition, organised by CPTTM. Sources: NotebookLM, past final papers, mock papers, and the revision guide.

1. Extra Learning Resource (NotebookLM)

Notebook / 筆記本	Contents / 內容	Link / 連結
Mobile Website Competition Preparation	Past final papers, mock papers with explanations, results, and revision notes	https://notebooklm.google.com/notebook/d596146e-0e10-49d2-a2b0-f4a67114453e

How to use: Open the link and ask a direct question, for example: “What is the difference between LocalStorage and SessionStorage?” NotebookLM answers from the original questions and notes, with sources.

Key Vocabulary

English / 英文	中文	Simple Meaning / 簡單意思
preliminary round	初賽	first selection stage
final round	決賽	on-site development stage
automated check	自動化檢測	computer-based marking

2. Competition Format and Rules / 比賽形式與注意事項

Preliminary round: a written paper with multiple-choice questions only. Qualified teams enter the final.
Final: build a mobile-web feature on site, usually about 1.5 hours per task. Marks come from Cypress automated checks and human review of UI/UX.
Format update (v3-lite2): the current final-round spec has moved from pure front-end (LocalStorage) tasks to a full-stack database project — Laravel/PHP + MySQL, with a public front-end and a login-protected admin back-end. 中文提示：初賽選擇題範圍不受影響；新內容已併入第 1–5 章（環境見 01、資料庫概念見 02、情境見 03、陷阱見 04、驗收清單見 05）。
Team: normally two members. Both must participate throughout; changing a member counts as withdrawal.
School record: two CDSJ5 teams reached the 7th final. Use this as a reference, not a guarantee.
Final non-negotiables:
1. Put the project in the required folder, such as module_a, and include README.txt with run instructions.
2. Copy every required ID and class name exactly. Cypress checks these names; a naming error can lose automated marks.
3. Save every file in UTF-8 encoding.
4. Support accessibility: keyboard use, meaningful alt text, and sufficient contrast.
5. The assessment environment provides jQuery, Vue.js, React, moment.js, Tailwind, Bootstrap, and Foundation.

3. Folder Guide (Five Learning Chapters)

Chapter / 章節	Focus / 重點	Contents / 內容
01_必考基礎.md	Essential Knowledge	Definitions and quick reference
02_核心概念.md	Core Concepts	Five visual concept explanations
03_高頻應用.md	High-Frequency Applications	Final scenarios and practice questions
04_易錯陷阱與高難辨識.md	Common Traps	Similar concepts and advanced questions
05_錯題複習與模擬測驗.md	Error Review & Mock Test	Error log, mock papers, checklist

Recommended order: 01 → 02 → 03 → 04 → 05. This builds a full loop: know → understand → apply → avoid traps → check yourself. Do study the diagrams in Chapter 02; they reduce rote memorisation.

The preliminary round is multiple choice only. Do not spend early revision time on implementation or short answers. If time is limited, prioritise the choice-question parts of Chapters 01, 03, and 04. Save Chapter 05 short answers and final-round material for later.

Only 1–2 days left? Read two parts closely: Chapter 02 (five visual concepts, about 35–40 minutes), then Section 2 of Chapter 03 (31 choice questions and answers, about 30–40 minutes). In about 1.5 hours, you cover the core concepts and most frequent topics.

4. Four-Week Revision Plan / 四週讀書計畫（配合每週上機練習）

Week / 週次	Focus / 重點	Action / 具體行動
第 1 週	必考基礎	讀完 01 全部，實際手寫一個含表單的靜態頁面，速記單字卡刷一輪
第 2 週	核心概念 + LocalStorage 實作	讀完 02，練習寫一個能存取 LocalStorage 的小表單
第 3 週	高頻應用 + 易錯陷阱	讀完 03、04，先自己作答再對答案，特別留意辨識表跟 NOT 型題目
第 4 週	錯題複習 + 模擬測驗	讀完 05，限時做完整模擬筆試，錯題填回錯題表，決賽選手再挑一題舊題目實作驗收

High-frequency checklist / 高頻考點

Match each <input> type (tel, date, number, checkbox, radio) to its correct use.
Use setItem / getItem; objects must be JSON.stringify() first.
Use position: sticky for category headers, and distinguish it from fixed and absolute.
Use scrollIntoView({behavior: "smooth"}) for smooth scrolling.
Use @media queries for mobile, tablet, and desktop breakpoints.
Three accessibility essentials: keyboard access, alt text, high contrast（鍵盤可操作、alt 替代文字、高對比度）.
In the final round, always copy the required ID／class name exactly as given; a naming mismatch loses automated marks（決賽現場命名一定要照題目要求，否則自動評測拿不到分）.