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.
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.

初賽只考選擇題；時間有限時先讀 01、03、04。

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.
無障礙設計三要素：鍵盤可操作、alt 替代文字、高對比度
決賽現場一定要照題目要求的 ID／class name 命名，否則自動評測拿不到分