` 中的 `
` 會是什麼顏色？
+```css
+div { color: blue; }
+.special { color: green; }
+h1 { color: red; }
+```
+*答案：紅色（元素選擇器直接針對 h1）*
+
+## 精通 CSS 選擇器
+
+CSS 選擇器是針對特定元素應用樣式的方式。它就像給出精確方向，與其說「那棟房子」，不如說「楓樹街上紅門的藍色房子」。
+
+CSS 有多種精確程度，選擇正確的選擇器就像挑選合適工具。有時你想給整區所有門塗色，有時只要針對一扇門。
+
+### 元素選擇器（標籤）
+
+元素選擇器根據標籤名稱標的 HTML 元素，適合設定廣泛適用的基礎樣式：
+
+```css
+body {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ margin: 0;
+ padding: 0;
+}
+
+h1 {
+ color: #3a241d;
+ text-align: center;
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+}
+```
+
+**理解這些樣式：**
+- **對整頁** 用 `body` 設定一致的字型排版
+- **移除** 瀏覽器預設的邊距與內距，方便控制
+- **為** 所有標題元素設定顏色、對齊與間距
+- **使用** `rem` 單位，確保字型大小可延展且易讀
+
+元素選擇器非常適合設定通用風格，但對於 terrarium 內部像植物這類個別元件，需要更細緻選擇器。
+
+### ID 選擇器：獨特元素
+
+ID 選擇器使用 `#`，針對具有特定 `id` 屬性的元素。因 ID 在頁面中應唯一，非常適合為獨特元素（如左、右兩邊的植物容器）設定樣式。
+
+讓我們設計 terrarium 側邊容器的樣式，放置植物：
+
+```css
+#left-container {
+ background-color: #f5f5f5;
+ width: 15%;
+ left: 0;
+ top: 0;
+ position: absolute;
+ height: 100vh;
+ padding: 1rem;
+ box-sizing: border-box;
+}
+
+#right-container {
+ background-color: #f5f5f5;
+ width: 15%;
+ right: 0;
+ top: 0;
+ position: absolute;
+ height: 100vh;
+ padding: 1rem;
+ box-sizing: border-box;
+}
+```
+
+**此段程式碼成果：**
+- **用** `absolute` 定位把容器固定在左右兩側
+- **使用** `vh`（視窗高度）單位製作響應式高度
+- **設定** `box-sizing: border-box`，包含 padding 計算寬度
+- **移除** `px` 單位的零值，使程式碼更乾淨
+- **搭配** 柔和背景色，較不刺眼
+
+✅ **程式碼質量挑戰**：此 CSS 違反 DRY（不要重複自己）原則，你能用 ID 和類別混合重構它嗎？
+
+**改良方法：**
+```html
+
+
+```
+
+```css
+.container {
+ background-color: #f5f5f5;
+ width: 15%;
+ top: 0;
+ position: absolute;
+ height: 100vh;
+ padding: 1rem;
+ box-sizing: border-box;
+}
+
+#left-container {
+ left: 0;
+}
+
+#right-container {
+ right: 0;
+}
+```
+
+### 類別選擇器：可復用樣式
+
+類別選擇器用 `.` 表示，適合將相同樣式套用到多個元素。與 ID 不同，類別可多處重複使用，非常適合樣式一致性的模式。
+
+在 terrarium 裡，每株植物需要共用樣式，但位置不同。可用類別分享樣式，ID 定位。
+
+**這是每株植物的 HTML 結構：**
+```html
+
+
+
5% 高度
頂部位置"] --> A
+ B1["60% 寬度
80% 高度
圓角
0.5 透明度"] --> B
+ C1["60% 寬度
5% 高度
深啡色
底層"] --> C
+ D1["50% 寬度
1% 高度
底部位置"] --> D
+ F1["細微陰影
透明度
Z 索引分層"] --> F
+
+ style E fill:#d1e1df,stroke:#3a241d
+ style A fill:#e8f5e8
+ style B fill:#e8f5e8
+ style C fill:#8B4513
+ style D fill:#e8f5e8
+```
+### 建造玻璃罐組件
+
+讓我們逐一建造生態瓶罐的各部分。每個部分都使用絕對定位以及百分比大小以達到響應式設計：
+
+```css
+.jar-walls {
+ height: 80%;
+ width: 60%;
+ background: #d1e1df;
+ border-radius: 1rem;
+ position: absolute;
+ bottom: 0.5%;
+ left: 20%;
+ opacity: 0.5;
+ z-index: 1;
+ box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
+}
+
+.jar-top {
+ width: 50%;
+ height: 5%;
+ background: #d1e1df;
+ position: absolute;
+ bottom: 80.5%;
+ left: 25%;
+ opacity: 0.7;
+ z-index: 1;
+ border-radius: 0.5rem 0.5rem 0 0;
+}
+
+.jar-bottom {
+ width: 50%;
+ height: 1%;
+ background: #d1e1df;
+ position: absolute;
+ bottom: 0;
+ left: 25%;
+ opacity: 0.7;
+ border-radius: 0 0 0.5rem 0.5rem;
+}
+
+.dirt {
+ width: 60%;
+ height: 5%;
+ background: #3a241d;
+ position: absolute;
+ border-radius: 0 0 1rem 1rem;
+ bottom: 1%;
+ left: 20%;
+ opacity: 0.7;
+ z-index: -1;
+}
+```
+
+**了解生態瓶的構造：**
+- **使用**百分比尺寸，實現在所有螢幕尺寸上的響應式縮放
+- **絕對定位**元素以精確堆疊和對齊
+- **應用**不同透明度值來創造玻璃的透光效果
+- **實施**`z-index`分層，讓植物看起來在罐子內部
+- **加入**微妙的盒陰影和圓角，讓外觀更真實
+
+### 使用百分比的響應式設計
+
+注意所有尺寸都使用百分比，而非固定像素值：
+
+**為什麼這很重要：**
+- **確保**生態瓶在任意螢幕尺寸上按比例縮放
+- **維持**罐子組件之間的視覺關係
+- **提供**從手機到大螢幕桌面一致的體驗
+- **允許**設計適應變化，不破壞視覺佈局
+
+### CSS 單位的運用
+
+我們使用 `rem` 單位為 border-radius 設定大小，這會相對於根字體大小縮放，創建更可及的設計，尊重使用者字體偏好。詳細可參考官方規範的 [CSS relative units](https://www.w3.org/TR/css-values-3/#font-relative-lengths)。
+
+✅ **視覺實驗**：嘗試修改這些值並觀察效果：
+- 將罐子透明度從 0.5 改為 0.8 — 玻璃外觀如何變化？
+- 調整污土顏色從 `#3a241d` 改為 `#8B4513` — 視覺影響是什麼？
+- 將污土的 `z-index` 改為 2 — 分層順序會怎樣？
+
+### 🔄 **教學檢查點**
+**CSS 視覺設計理解**：確認你對視覺 CSS 的掌握：
+- ✅ 百分比尺寸如何創造響應式設計？
+- ✅ 為什麼透明度能營造玻璃透光效果？
+- ✅ `z-index` 在元素分層中扮演什麼角色？
+- ✅ border-radius 如何塑造罐子形狀？
+
+**設計原則**：注意我們如何用簡單圖形構建複雜視覺：
+1. **矩形** → **圓角矩形** → **罐子組件**
+2. **純色** → **透明度** → **玻璃效果**
+3. **單一元素** → **分層組合** → **3D 外觀**
+
+---
+
+## GitHub Copilot Agent 挑戰 🚀
+
+使用 Agent 模式完成以下挑戰：
+
+**說明：** 創建一個 CSS 動畫，讓生態瓶中的植物輕輕搖擺，模擬自然微風吹拂效果。這將幫助你練習 CSS 動畫、變形和關鍵影格，並提升生態瓶的視覺吸引力。
+
+**提示：** 為 `.plant` 類添加 CSS 關鍵影格動畫，使植物輕輕左右擺動。創建一個擺動動畫，使每株植物沿水平方向旋轉約 2-3 度，持續時間 3-4 秒，且動畫無限循環，並使用平滑的緩動函數。
+
+在這了解更多[Agent 模式](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)。
+
+## 🚀 挑戰：加入玻璃反光效果
+
+準備好用逼真的玻璃反光效果增強你的生態瓶了嗎？這技術將增加層次感與真實感。
+
+你將創建細膩的高光，模擬光線如何在玻璃面反射。這類似文藝復興畫家 Jan van Eyck 利用光影與反射使繪畫中的玻璃呈現立體感。目標如下：
+
+
+
+**你的挑戰：**
+- **創建**細膩的白色或淺色橢圓形，用於玻璃反光
+- **策略性定位**在罐子左側
+- **應用**適當透明度和模糊效果，模擬真實光反射
+- **使用**`border-radius` 創造自然泡泡狀形狀
+- **嘗試**漸層或盒陰影以增強真實感
+
+## 課後測驗
+
+[課後測驗](https://ff-quizzes.netlify.app/web/quiz/18)
+
+## 擴展你的 CSS 知識
+
+CSS 一開始可能會覺得複雜，但掌握這些核心概念將為進階技巧打下紮實基礎。
+
+**接下來的 CSS 學習領域：**
+- **Flexbox** - 簡化元素對齊和分佈
+- **CSS Grid** - 強大工具，建造複雜佈局
+- **CSS 變數** - 減少重複，提升維護性
+- **響應式設計** - 確保網站適用不同螢幕尺寸
+
+### 互動學習資源
+
+用這些有趣的實作遊戲練習概念：
+- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - 通過挑戰精通 Flexbox
+- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - 種胡蘿蔔學 CSS Grid
+- 🎯 [CSS Battle](https://cssbattle.dev/) - 編碼挑戰測試你的 CSS 技能
+
+### 額外學習
+
+欲獲得完整 CSS 基礎教學，完成這個 Microsoft Learn 課程：[使用 CSS 美化你的 HTML 應用程式](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+
+### ⚡ **接下來 5 分鐘你可以做**
+- [ ] 開啟 DevTools，使用 Elements 面板檢查任一網站 CSS 樣式
+- [ ] 建立簡單 CSS 文件並連結至 HTML 頁面
+- [ ] 嘗試用不同方式改色：十六進位、RGB、命名顏色
+- [ ] 練習盒模型，為 div 加入 padding 和 margin
+
+### 🎯 **這小時你能完成的目標**
+- [ ] 完成課後測驗並複習 CSS 基礎
+- [ ] 用字型、顏色和間距美化你的 HTML 頁面
+- [ ] 使用 flexbox 或 grid 建立簡單佈局
+- [ ] 嘗試 CSS 過渡效果，實現流暢效果
+- [ ] 利用媒體查詢練習響應式設計
+
+### 📅 **你的 CSS 一週冒險**
+- [ ] 完成生態瓶樣式作業並加添創意
+- [ ] 精通 CSS Grid，打造相片集佈局
+- [ ] 學習 CSS 動畫讓設計生動起來
+- [ ] 探索 Sass 或 Less 等 CSS 預處理器
+- [ ] 研究設計原則並應用於 CSS
+- [ ] 分析並重現你在線看到的有趣設計
+
+### 🌟 **你的 CSS 一個月設計精通**
+- [ ] 建立完整響應式網站設計系統
+- [ ] 學習 CSS-in-JS 或類似 Tailwind 的功能型框架
+- [ ] 為開源專案貢獻 CSS 優化
+- [ ] 精通進階 CSS 概念，如客製屬性與內容隔離
+- [ ] 創建可重用的組件庫與模組化 CSS
+- [ ] 指導 CSS 初學者並分享設計心得
+
+## 🎯 你的 CSS 精通時間表
+
+```mermaid
+timeline
+ title CSS 學習進度
+
+ section 基礎 (10分鐘)
+ 檔案連結：將 CSS 連結到 HTML
+ ：了解層疊規則
+ ：學習繼承基礎
+
+ section 選擇器 (15分鐘)
+ 目標元素：元素選擇器
+ ：類別模式
+ ：ID 特異性
+ ：組合器
+
+ section 盒模型 (20分鐘)
+ 版面基礎：外邊距與內邊距
+ ：邊框屬性
+ ：內容尺寸
+ ：盒模型行為
+
+ section 定位 (25分鐘)
+ 元素位置：靜態與相對定位
+ ：絕對定位
+ ：Z 索引層次
+ ：響應單位
+
+ section 視覺設計 (30分鐘)
+ 樣式掌握：顏色與透明度
+ ：陰影與特效
+ ：過渡效果
+ ：變形屬性
+
+ section 響應式設計 (45分鐘)
+ 多裝置支援：媒體查詢
+ ：彈性版面
+ ：行動優先
+ ：視口最佳化
+
+ section 進階技術 (1週)
+ 現代 CSS：Flexbox 版面
+ ：CSS Grid 系統
+ ：自訂屬性
+ ：動畫關鍵影格
+
+ section 專業能力 (1個月)
+ CSS 架構：元件模式
+ ：可維護程式碼
+ ：效能優化
+ ：跨瀏覽器相容性
+```
+### 🛠️ 你的 CSS 工具總結
+
+完成本課後，你已掌握：
+- **層疊理解**：樣式如何繼承與覆蓋
+- **選擇器精通**：準確鎖定元素、類別與 ID
+- **定位技巧**：策略性擺放與分層
+- **視覺設計**：創造玻璃效果、陰影與透明度
+- **響應式技術**：百分比佈局，適應任意螢幕
+- **代碼組織**：整潔且易維護的 CSS 結構
+- **現代實踐**：運用相對單位與可及設計模式
+
+**下一步**：你的生態瓶已有結構（HTML）與樣式（CSS）。最後一課將用 JavaScript 加入互動！
+
+## 作業
+
+[CSS 重構](assignment.md)
+
+---
+
+
+**免責聲明**：
+本文件由 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於追求準確性，請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議聘請專業人工翻譯。因使用本翻譯所產生的任何誤解或誤譯，我們概不負責。
+
\ No newline at end of file
diff --git a/translations/zh-HK/3-terrarium/2-intro-to-css/assignment.md b/translations/zh-HK/3-terrarium/2-intro-to-css/assignment.md
new file mode 100644
index 000000000..acd4422d9
--- /dev/null
+++ b/translations/zh-HK/3-terrarium/2-intro-to-css/assignment.md
@@ -0,0 +1,127 @@
+# CSS 重構作業
+
+## 目標
+
+將你的玻璃花房項目轉換為使用現代 CSS 佈局技術！將目前的絕對定位方式重構為使用 **Flexbox** 或 **CSS Grid**，以實現更易於維護且響應式的設計。此作業挑戰你在保持玻璃花房視覺吸引力的同時，應用現代 CSS 標準。
+
+理解什麼時候以及如何使用不同的佈局方法是現代網頁開發的重要技能。此練習將傳統定位技術與當代 CSS 佈局系統連接起來。
+
+## 作業指示
+
+### 第一階段：分析與規劃
+1. **檢視你目前的玻璃花房程式碼**－找出哪些元素目前使用絕對定位
+2. **選擇你的佈局方法**－決定 Flexbox 或 CSS Grid 哪個更適合你的設計目標
+3. **繪製你的新佈局結構草圖**－規劃容器與植物元素如何被組織
+
+### 第二階段：實作
+1. **在另一個資料夾中建立你的玻璃花房新版本**
+2. **依需要更新 HTML 結構**以支援你選擇的佈局方法
+3. **重構 CSS**，用 Flexbox 或 CSS Grid 取代絕對定位
+4. **保持視覺一致性**－確保植物和玻璃罐顯示於相同位置
+5. **實作響應式行為**－你的佈局應能優雅地適應不同螢幕尺寸
+
+### 第三階段：測試與文件撰寫
+1. **跨瀏覽器測試**－確保你的設計在 Chrome、Firefox、Edge 及 Safari 中正常運作
+2. **響應式測試**－在手機、平板及桌面尺寸上檢視佈局
+3. **文件撰寫**－於 CSS 加入說明你的佈局選擇的註解
+4. **截圖**－擷取不同瀏覽器與螢幕尺寸中你的玻璃花房畫面
+
+## 技術規範
+
+### 佈局實作
+- **選擇其中一個**：實作 Flexbox 或 CSS Grid（相同元素不可兩者同時使用）
+- **響應式設計**：使用相對單位（`rem`、`em`、`%`、`vw`、`vh`）替代固定像素
+- **可及性**：保持適當的語義化 HTML 結構與替代文字 (alt)
+- **程式碼品質**：使用一致命名規則且有條理地組織 CSS
+
+### 要使用的現代 CSS 功能
+```css
+/* Example Flexbox approach */
+.terrarium-container {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+ align-items: center;
+ justify-content: center;
+}
+
+.plant-containers {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ max-width: 1200px;
+}
+
+/* Example Grid approach */
+.terrarium-layout {
+ display: grid;
+ grid-template-columns: 1fr 3fr 1fr;
+ grid-template-rows: auto 1fr;
+ min-height: 100vh;
+ gap: 1rem;
+}
+```
+
+### 瀏覽器支援需求
+- **Chrome/Edge**：最新兩個版本
+- **Firefox**：最新兩個版本
+- **Safari**：最新兩個版本
+- **行動瀏覽器**：iOS Safari, Chrome Mobile
+
+## 交付項目
+
+1. **更新過的 HTML 檔案**，結構更語義化
+2. **重構後的 CSS 檔案**，使用現代佈局技術
+3. **截圖集**，展示跨瀏覽器相容性：
+ - 桌面版 (1920x1080)
+ - 平板版 (768x1024)
+ - 手機版 (375x667)
+ - 至少兩款不同瀏覽器
+4. **README.md 文件**，記錄：
+ - 你的佈局選擇（Flexbox 還是 Grid）及其理由
+ - 重構過程中面臨的挑戰
+ - 瀏覽器相容性說明
+ - 執行程式碼的說明
+
+## 評分標準
+
+| 評分項目 | 優異 (4) | 精通 (3) | 發展中 (2) | 初學 (1) |
+|----------|----------|----------|------------|----------|
+| **佈局實作** | 熟練使用 Flexbox/Grid 進階功能；完全響應式 | 正確實作並具有良好響應式行為 | 基本實作，有輕微響應式問題 | 佈局實作不完整或錯誤 |
+| **程式碼品質** | 乾淨、條理分明的 CSS，具意義的註解與一致命名 | 良好組織並附有部分註解 | 適當組織，註解較少 | 組織差，難以理解 |
+| **跨瀏覽器相容性** | 在所有要求瀏覽器中完美一致，附截圖 | 良好相容，少量差異並有記錄 | 部分相容問題但不影響功能 | 重大相容問題或缺少測試 |
+| **響應式設計** | 優秀的 mobile-first 策略，切換點順暢 | 良好響應性，切換點適當 | 基本響應功能，佈局有些問題 | 響應性有限或失效 |
+| **文件撰寫** | 詳盡的 README，含充分解釋與見解 | 良好文件，涵蓋所有必需項目 | 基本文件，解釋不足 | 文件不完整或缺失 |
+
+## 參考資源
+
+### 佈局方法指南
+- 📖 [Flexbox 完整指南](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+- 📖 [CSS Grid 完整指南](https://css-tricks.com/snippets/css/complete-guide-grid/)
+- 📖 [Flexbox vs Grid - 選擇正確工具](https://blog.webdevsimplified.com/2022-11/flexbox-vs-grid/)
+
+### 瀏覽器測試工具
+- 🛠️ [瀏覽器開發者工具響應模式](https://developer.chrome.com/docs/devtools/device-mode/)
+- 🛠️ [Can I Use - 功能支援](https://caniuse.com/)
+- 🛠️ [BrowserStack - 跨瀏覽器測試](https://www.browserstack.com/)
+
+### 程式碼品質工具
+- ✅ [CSS 驗證器](https://jigsaw.w3.org/css-validator/)
+- ✅ [HTML 驗證器](https://validator.w3.org/)
+- ✅ [WebAIM 對比度檢查器](https://webaim.org/resources/contrastchecker/)
+
+## 額外挑戰
+
+🌟 **進階佈局**：於設計不同部分同時實作 Flexbox 和 Grid
+🌟 **動畫整合**：加入搭配新佈局的 CSS 過渡或動畫
+🌟 **暗黑模式**：實作基於 CSS 自訂屬性的主題切換器
+🌟 **容器查詢**：使用現代容器查詢技巧以達元件級響應式
+
+> 💡 **記住**：目標不只是讓它能用，而是理解為何你選擇的佈局方法是這個設計挑戰的最佳解決方案！
+
+---
+
+
+**免責聲明**：
+本文件經由 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於提供準確的翻譯，但請注意自動翻譯結果可能包含錯誤或不準確之處。原始文件的母語版本應被視為具權威性的來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用此翻譯而產生的任何誤解或誤釋承擔責任。
+
\ No newline at end of file
diff --git a/translations/zh-HK/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/zh-HK/3-terrarium/3-intro-to-DOM-and-closures/README.md
new file mode 100644
index 000000000..df07b3e91
--- /dev/null
+++ b/translations/zh-HK/3-terrarium/3-intro-to-DOM-and-closures/README.md
@@ -0,0 +1,762 @@
+# Terrarium 項目第三部分：DOM 操作與 JavaScript 閉包
+
+```mermaid
+journey
+ title 你的 JavaScript DOM 之旅
+ section 基礎
+ 理解 DOM: 3: Student
+ 學習閉包: 4: Student
+ 連接元素: 4: Student
+ section 互動
+ 設置拖曳事件: 4: Student
+ 追蹤座標: 5: Student
+ 處理移動: 5: Student
+ section 精進
+ 新增清理功能: 4: Student
+ 測試功能: 5: Student
+ 完成生態箱: 5: Student
+```
+
+> Sketchnote 由 [Tomomi Imura](https://twitter.com/girlie_mac) 製作
+
+歡迎來到網頁開發中最吸引人的部分之一——讓事物互動起來！文件物件模型（DOM）就像你的 HTML 與 JavaScript 之間的橋樑，今天我們將利用它讓你的植物箱活起來。當 Tim Berners-Lee 發明第一台網頁瀏覽器時，他就想像了一個文件可以動態且互動的網路，而 DOM 讓這個願景成為可能。
+
+我們還會探索 JavaScript 閉包，這聽起來一開始可能會令人害怕。你可以把閉包想成創造「記憶口袋」，讓你的函數能記住重要資訊。就像你植物箱中的每棵植物各自擁有自己的資料記錄以追蹤位置一樣。在這課結束時，你會明白閉包是多麼自然且實用。
+
+我們要做的是這樣的：一個讓使用者可以將植物拖放到任意位置的植物箱。你將學會推動從拖放檔案上傳到互動遊戲的 DOM 操作技巧。讓我們來讓你的植物箱活起來。
+
+```mermaid
+mindmap
+ root((DOM & JavaScript))
+ DOM Tree
+ 元素選擇
+ 屬性存取
+ 事件處理
+ 動態更新
+ Events
+ 指標事件
+ 滑鼠事件
+ 觸控事件
+ 事件監聽器
+ Closures
+ 私有變數
+ 函數作用域
+ 記憶體持久化
+ 狀態管理
+ Drag & Drop
+ 位置追蹤
+ 坐標運算
+ 事件生命週期
+ 使用者互動
+ Modern Patterns
+ 事件委派
+ 效能
+ 跨裝置
+ 可達性
+```
+## 講課前測驗
+
+[講課前測驗](https://ff-quizzes.netlify.app/web/quiz/19)
+
+## 了解 DOM：你通往互動網頁的門戶
+
+文件物件模型（DOM）是 JavaScript 與 HTML 元素溝通的方式。當你的瀏覽器載入 HTML 頁面時，它會在記憶體中建立該頁面的結構化表示，那就是 DOM。可以把它想成一棵家譜樹，頁面中的每個 HTML 元素都是家族成員，而 JavaScript 可以存取、修改或重新排列他們。
+
+DOM 操作能將靜態網頁轉變成互動式網站。每次你看到按鈕在滑鼠懸停時改變顏色、內容在不重新載入頁面下更新或可以拖曳的元素，那就是 DOM 操作在運作。
+
+```mermaid
+flowchart TD
+ A["文件"] --> B["HTML"]
+ B --> C["標頭"]
+ B --> D["主體"]
+ C --> E["標題"]
+ C --> F["元標籤"]
+ D --> G["H1：我的生態瓶"]
+ D --> H["區塊：頁面容器"]
+ H --> I["區塊：左側容器"]
+ H --> J["區塊：右側容器"]
+ H --> K["區塊：生態瓶"]
+ I --> L["植物元素 1-7"]
+ J --> M["植物元素 8-14"]
+
+ L --> N["圖像#plant1"]
+ L --> O["圖像#plant2"]
+ M --> P["圖像#plant8"]
+ M --> Q["圖像#plant9"]
+
+ style A fill:#e1f5fe
+ style B fill:#f3e5f5
+ style D fill:#e8f5e8
+ style H fill:#fff3e0
+ style N fill:#ffebee
+ style O fill:#ffebee
+ style P fill:#ffebee
+ style Q fill:#ffebee
+```
+
+
+> DOM 與對應 HTML 標記的示意圖。來自 [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
+
+**以下使 DOM 強大的原因：**
+- **提供** 一種結構化方式存取頁面上的任何元素
+- **使得** 在不用重新整理的情況下動態更新內容成為可能
+- **允許** 即時對使用者互動如點擊與拖曳做出回應
+- **創造** 現代互動式網頁應用程式的基礎
+
+## JavaScript 閉包：創造有組織且強大的程式碼
+
+[JavaScript 閉包](https://developer.mozilla.org/docs/Web/JavaScript/Closures) 就像給函數自己的私人工作區，裡面有持續存在的記憶。想像達爾文在加拉巴哥群島上每種雀鳥根據環境發展出專門喙的故事——閉包也是類似，創造專門的函數，使其「記得」特定上下文，即使父函數已經完成執行。
+
+在我們的植物箱中，閉包讓每棵植物能獨立記住自己的位置。這種模式在專業 JavaScript 開發中到處可見，是個非常寶貴的概念。
+
+```mermaid
+flowchart LR
+ A["dragElement(plant1)"] --> B["建立閉包"]
+ A2["dragElement(plant2)"] --> B2["建立閉包"]
+
+ B --> C["私有變數"]
+ B2 --> C2["私有變數"]
+
+ C --> D["pos1, pos2, pos3, pos4"]
+ C --> E["pointerDrag 函數"]
+ C --> F["elementDrag 函數"]
+ C --> G["stopElementDrag 函數"]
+
+ C2 --> D2["pos1, pos2, pos3, pos4"]
+ C2 --> E2["pointerDrag 函數"]
+ C2 --> F2["elementDrag 函數"]
+ C2 --> G2["stopElementDrag 函數"]
+
+ H["植物 1 記住它的位置"] --> B
+ H2["植物 2 記住它的位置"] --> B2
+
+ style B fill:#e8f5e8
+ style B2 fill:#e8f5e8
+ style C fill:#fff3e0
+ style C2 fill:#fff3e0
+```
+> 💡 **理解閉包**：閉包是 JavaScript 中一個重要主題，許多開發者使用多年後才完全掌握所有理論面。今天我們主要探討實務應用——你會自然看到閉包在我們建構互動功能時出現。當你看到它們如何解決實際問題，理解就會逐漸形成。
+
+
+
+> DOM 與對應 HTML 標記的示意圖。來自 [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
+
+在本課中，我們將完成互動植物箱專案，寫出 JavaScript 讓使用者能操控頁面上的植物。
+
+## 開始之前：為成功做準備
+
+你需要之前植物箱課程的 HTML 與 CSS 檔案——我們即將把靜態設計變成交互式。如果你是第一次加入，先完成那些課程會有重要的背景知識。
+
+以下是我們要做的事：
+- **為所有植物實現流暢的拖放功能**
+- **追蹤座標，讓植物記住自己的位置**
+- **建立完整的互動介面，使用純 JavaScript**
+- **用閉包模式寫出乾淨、有組織的程式碼**
+
+## 設定你的 JavaScript 檔案
+
+讓我們開始建立讓你的植物箱互動的 JavaScript 檔案。
+
+**步驟 1：建立你的程式檔**
+
+在你的植物箱資料夾中，建立一個新檔案命名為 `script.js`。
+
+**步驟 2：將 JavaScript 連結到你的 HTML**
+
+在你的 `index.html` 的 `` 區塊加入這個 script 標籤：
+
+```html
+
+```
+
+**`defer` 屬性的重要性：**
+- **確保** JavaScript 等待所有 HTML 載入完成後才執行
+- **避免** JavaScript 在元素尚未準備好時尋找它們而造成錯誤
+- **保證** 所有植物元素都可被互動使用
+- **比把 script 放到頁面底部有更好的效能**
+
+> ⚠️ **重要提醒**：`defer` 屬性可以避免常見的時序問題。沒有它，JavaScript 可能嘗試存取還沒載入的 HTML 元素，導致錯誤。
+
+---
+
+## 將 JavaScript 與 HTML 元素連結
+
+在讓元素可拖放前，JavaScript 需要找到它們，在 DOM 中定位它們。可以把這看成圖書館的目錄系統——只要有目錄號碼，你就能準確找到想要的書。
+
+我們會使用 `document.getElementById()` 來建立這連結。這就像有一個精確的檔案系統——你給出 ID，它就能找到你 HTML 中的正確元素。
+
+### 讓所有植物都能拖曳
+
+在你的 `script.js` 檔案加入以下程式碼：
+
+```javascript
+// 啟用所有14種植物的拖曳功能
+dragElement(document.getElementById('plant1'));
+dragElement(document.getElementById('plant2'));
+dragElement(document.getElementById('plant3'));
+dragElement(document.getElementById('plant4'));
+dragElement(document.getElementById('plant5'));
+dragElement(document.getElementById('plant6'));
+dragElement(document.getElementById('plant7'));
+dragElement(document.getElementById('plant8'));
+dragElement(document.getElementById('plant9'));
+dragElement(document.getElementById('plant10'));
+dragElement(document.getElementById('plant11'));
+dragElement(document.getElementById('plant12'));
+dragElement(document.getElementById('plant13'));
+dragElement(document.getElementById('plant14'));
+```
+
+**這段程式碼完成了什麼：**
+- **定位** 每個植物元素於 DOM 中，根據其獨特的 ID
+- **取得** JavaScript 對應的 HTML 元素參考
+- **將** 每個元素傳遞給 `dragElement` 函數（接下來我們會寫）
+- **準備** 每棵植物成為可拖放物件
+- **橋接** 你的 HTML 結構與 JavaScript 功能
+
+> 🎯 **為什麼用 ID 而不用 Class？** ID 是專屬於特定元素的唯一識別碼，而 CSS 的類別（class）主要是用來對多個元素做樣式設定。當 JavaScript 需要操作單一元素時，ID 提供了精確且效能佳的方式。
+
+> 💡 **小貼士**：注意我們對每棵植物都呼叫了 `dragElement()` 一次。這確保每棵植物都有獨立的拖曳行為，這對流暢的使用體驗很重要。
+
+### 🔄 **教學回顧檢查**
+**DOM 連結理解**：在進入拖曳功能前，確認你理解：
+- ✅ 如何用 `document.getElementById()` 定位 HTML 元素
+- ✅ 為什麼我們為每棵植物使用獨特的 ID
+- ✅ script 標籤中 `defer` 屬性的目的
+- ✅ JavaScript 與 HTML 透過 DOM 如何互相連接
+
+**自我測試**：如果兩個元素有相同 ID，會發生什麼事？為什麼 `getElementById()` 只回傳一個元素？
+*答案：ID 應該唯一；如果重複，只有第一個元素會被找到*
+
+---
+
+## 建立拖曳元素的閉包函數
+
+現在我們來打造拖曳功能的核心：一個閉包，用來管理每棵植物的拖曳行為。這閉包包含多個內部函數，協同追蹤滑鼠移動並更新元素位置。
+
+閉包很適合這項任務，因為它能讓我們創造「私有」變數，在函數調用間持續存在，給每棵植物獨立的座標追蹤系統。
+
+### 用簡單範例理解閉包
+
+讓我用一個簡單範例說明閉包的概念：
+
+```javascript
+function createCounter() {
+ let count = 0; // 這就像一個私有變量
+
+ function increment() {
+ count++; // 內部函數會記住外部變量
+ return count;
+ }
+
+ return increment; // 我們將內部函數返回
+}
+
+const myCounter = createCounter();
+console.log(myCounter()); // 1
+console.log(myCounter()); // 2
+```
+
+**這個閉包模式做了什麼：**
+- **建立** 一個私有的 `count` 變數，只存在於此閉包中
+- **內部函數** 可以存取並修改外部變數（這就是閉包機制）
+- **我們回傳內部函數時**，它會保留與那份私有資料的連結
+- **即使 `createCounter()` 執行完後**，`count` 依然存在並記得它的值
+
+### 閉包為什麼特別適合拖曳功能
+
+對我們的植物箱來說，每棵植物需要記住目前的位置座標。閉包提供了完美解決方案：
+
+**專案的主要好處：**
+- **獨立維持** 每棵植物私有的位置變數
+- **保留** 拖曳事件間的座標數據
+- **避免** 不同可拖曳元素間的變數衝突
+- **創造** 乾淨且有組織的程式碼結構
+
+> 🎯 **學習目標**：你現在不需要完全精通閉包。專注於看出它們如何幫我們整理程式碼、維持拖曳功能狀態。
+
+```mermaid
+stateDiagram-v2
+ [*] --> Ready: 頁面加載
+ Ready --> DragStart: 使用者按下 (pointerdown)
+ DragStart --> Dragging: 鼠標/手指移動 (pointermove)
+ Dragging --> Dragging: 繼續移動
+ Dragging --> DragEnd: 使用者放開 (pointerup)
+ DragEnd --> Ready: 重設以便下一次拖曳
+
+ state DragStart {
+ [*] --> CapturePosition
+ CapturePosition --> SetupListeners
+ SetupListeners --> [*]
+ }
+
+ state Dragging {
+ [*] --> CalculateMovement
+ CalculateMovement --> UpdatePosition
+ UpdatePosition --> [*]
+ }
+
+ state DragEnd {
+ [*] --> RemoveListeners
+ RemoveListeners --> CleanupState
+ CleanupState --> [*]
+ }
+```
+### 建立 dragElement 函數
+
+現在我們寫出控制拖曳邏輯的主要函數。把它加入你聲明植物元素的程式碼下面：
+
+```javascript
+function dragElement(terrariumElement) {
+ // 初始化位置追蹤變數
+ let pos1 = 0, // 之前的滑鼠 X 位置
+ pos2 = 0, // 之前的滑鼠 Y 位置
+ pos3 = 0, // 目前的滑鼠 X 位置
+ pos4 = 0; // 目前的滑鼠 Y 位置
+
+ // 設定初始拖曳事件監聽器
+ terrariumElement.onpointerdown = pointerDrag;
+}
+```
+
+**位置追蹤系統解說：**
+- **`pos1` 和 `pos2`**：儲存舊滑鼠位置和新滑鼠位置之間的差距
+- **`pos3` 和 `pos4`**：追蹤滑鼠目前的座標
+- **`terrariumElement`**：我們正在改造成可拖曳的那個植物元素
+- **`onpointerdown`**：使用者開始拖曳時觸發的事件
+
+**閉包模式運作方式：**
+- **為每個植物元素建立** 私有位置變數
+- **在拖曳過程中維持** 這些變數
+- **確保** 每棵植物獨立追蹤自己的座標
+- **透過 `dragElement` 函數提供** 乾淨的介面
+
+### 為什麼使用 pointer 事件？
+
+你可能會想，為什麼我們用 `onpointerdown` 而不是較常見的 `onclick`。原因如下：
+
+| 事件類型 | 適用情境 | 注意事項 |
+|------------|----------|-------------|
+| `onclick` | 簡單按鈕點擊 | 只能處理點擊與放開，無法拖曳 |
+| `onpointerdown` | 滑鼠和觸控都適用 | 新穎且目前廣泛支援 |
+| `onmousedown` | 只適用桌面滑鼠 | 忽略行動裝置使用者 |
+
+**為什麼 pointer 事件很適合我們的需求：**
+- **不論是滑鼠、手指或觸控筆** 都能正常運作
+- **無論用筆電、平板或手機都一樣流暢**
+- **能處理真正的拖曳動作，而非只是點擊放開**
+- **帶來使用者期望的順暢體驗**
+
+> 💡 **未來趨勢**：Pointer 事件是最新的使用者互動標準。比起寫分開的滑鼠與觸控程式碼，這種方式同時涵蓋兩者。非常酷對吧？
+
+### 🔄 **教學回顧檢查**
+**事件處理理解**：暫停確認你掌握：
+- ✅ 為何用 pointer 事件而非 mouse 事件？
+- ✅ 閉包變數如何在函數調用間持續存在？
+- ✅ `preventDefault()` 在流暢拖曳中扮演什麼角色？
+- ✅ 為什麼事件監聽器是綁在文件（document）而不是各個元素上？
+
+**與現實連結**：想想你每天使用過的拖放介面：
+- **檔案上傳**：將檔案拖到瀏覽器視窗
+- **看板任務板**：任務在欄目間移動
+- **圖片集**：重新排列照片順序
+- **行動介面**：觸控螢幕上的滑動與拖曳
+
+---
+
+## pointerDrag 函數：捕捉拖曳的開始
+
+當使用者按下植物（不論是滑鼠點擊或手指觸控），`pointerDrag` 函數就會啟動。它會存下初始座標並準備拖曳系統。
+
+把這個函數加到你的 `dragElement` 閉包裡，緊接在 `terrariumElement.onpointerdown = pointerDrag;` 這行後面：
+
+```javascript
+function pointerDrag(e) {
+ // 阻止瀏覽器預設行為（例如文字選取）
+ e.preventDefault();
+
+ // 捕捉初始鼠標/觸摸位置
+ pos3 = e.clientX; // 拖曳開始的 X 座標
+ pos4 = e.clientY; // 拖曳開始的 Y 座標
+
+ // 設置拖曳過程的事件監聽器
+ document.onpointermove = elementDrag;
+ document.onpointerup = stopElementDrag;
+}
+```
+
+**逐步解說：**
+- **防止** 瀏覽器的預設行為，以免干擾拖曳
+- **記錄** 使用者開始拖曳時的確切座標
+- **建立** 對持續拖曳移動的事件監聽器
+- **準備** 追蹤整個文件中的滑鼠或手指動作
+
+### 理解事件預防
+
+`e.preventDefault()` 這行對順暢拖曳至關重要：
+
+**若不防止，瀏覽器可能會：**
+- **選取** 用戶拖曳時劃過的文字
+- **觸發** 右鍵拖曳時的選單
+- **干擾** 我們自訂的拖曳功能
+- **造成** 拖動過程中的視覺異常
+
+> 🔍 **實驗**：完成本課後，試著移除 `e.preventDefault()`，觀察拖曳體驗如何改變。你會很快知道這行為什麼必要！
+
+### 座標追蹤系統
+
+`e.clientX` 和 `e.clientY` 屬性給出滑鼠/觸控點的精確座標：
+
+| 屬性 | 量測項目 | 使用案例 |
+|----------|------------------|----------|
+| `clientX` | 相對於視窗的水平位置 | 追蹤左右移動 |
+| `clientY` | 相對於視窗的垂直位置 | 追蹤上下移動 |
+**了解這些座標：**
+- **提供** 像素級精確的定位資訊
+- **隨使用者移動指標** 實時更新
+- **跨不同螢幕尺寸和縮放等級** 保持一致
+- **啟用** 平滑、響應式的拖放互動
+
+### 設置文件級事件監聽器
+
+注意我們如何將移動和停止事件附加在整個 `document` 上，而不僅是植物元素：
+
+```javascript
+document.onpointermove = elementDrag;
+document.onpointerup = stopElementDrag;
+```
+
+**為何附加到 document：**
+- **即使滑鼠離開植物元素也能繼續追蹤**
+- **防止使用者快速移動時拖動中斷**
+- **在整個螢幕上提供平滑拖動體驗**
+- **處理游標移出瀏覽器視窗的邊界情況**
+
+> ⚡ **效能提示**：拖動停止時，我們會清理這些文件級監聽器，避免記憶體洩漏和效能問題。
+
+## 完善拖曳系統：移動與清理
+
+現在我們將新增兩個處理實際拖曳移動和拖曳停止時清理的函式。這些函式協同工作，為你的植物造景提供平滑、響應式的移動功能。
+
+### elementDrag 函式：追蹤移動
+
+在 `pointerDrag` 的結束花括號後面添加 `elementDrag` 函式：
+
+```javascript
+function elementDrag(e) {
+ // 計算自上次事件以來移動的距離
+ pos1 = pos3 - e.clientX; // 水平移動距離
+ pos2 = pos4 - e.clientY; // 垂直移動距離
+
+ // 更新當前位置追蹤
+ pos3 = e.clientX; // 新的當前 X 位置
+ pos4 = e.clientY; // 新的當前 Y 位置
+
+ // 將移動應用至元素的位置
+ terrariumElement.style.top = (terrariumElement.offsetTop - pos2) + 'px';
+ terrariumElement.style.left = (terrariumElement.offsetLeft - pos1) + 'px';
+}
+```
+
+**理解座標數學運算：**
+- **`pos1` 和 `pos2`**：計算滑鼠自上次更新以來移動的距離
+- **`pos3` 和 `pos4`**：儲存當前滑鼠位置供下次計算使用
+- **`offsetTop` 和 `offsetLeft`**：獲取元素當前在頁面上的位置
+- **減法邏輯**：將元素移動與滑鼠移動距離同步
+
+```mermaid
+sequenceDiagram
+ participant User
+ participant Mouse
+ participant JavaScript
+ participant Plant
+
+ User->>Mouse: 在 (100, 50) 開始拖曳
+ Mouse->>JavaScript: pointerdown 事件
+ JavaScript->>JavaScript: 儲存初始位置 (pos3=100, pos4=50)
+ JavaScript->>JavaScript: 設置移動/鬆開偵聽器
+
+ User->>Mouse: 移動至 (110, 60)
+ Mouse->>JavaScript: pointermove 事件
+ JavaScript->>JavaScript: 計算: pos1=10, pos2=10
+ JavaScript->>Plant: 更新: left += 10px, top += 10px
+ Plant->>Plant: 在新位置渲染
+
+ User->>Mouse: 在 (120, 65) 放開
+ Mouse->>JavaScript: pointerup 事件
+ JavaScript->>JavaScript: 移除偵聽器
+ JavaScript->>JavaScript: 重設以供下次拖曳
+```
+**移動計算解析：**
+1. **測量** 新舊滑鼠位置差異
+2. **計算** 根據滑鼠移動決定元素移動距離
+3. **即時更新** 元素的 CSS 位置屬性
+4. **儲存** 新位置作為下一次計算基準
+
+### 數學的視覺化表示
+
+```mermaid
+sequenceDiagram
+ participant Mouse
+ participant JavaScript
+ participant Plant
+
+ Mouse->>JavaScript: 從 (100,50) 移動到 (110,60)
+ JavaScript->>JavaScript: 計算：向右移動 10px，向下移動 10px
+ JavaScript->>Plant: 位置更新：向右 +10px，向下 +10px
+ Plant->>Plant: 在新位置渲染
+```
+### stopElementDrag 函式：清理工作
+
+在 `elementDrag` 的結束花括號後添加此清理函式：
+
+```javascript
+function stopElementDrag() {
+ // 移除文件層級的事件監聽器
+ document.onpointerup = null;
+ document.onpointermove = null;
+}
+```
+
+**清理為何重要：**
+- **防止因殘留事件監聽器導致的記憶體洩漏**
+- **使用者釋放植物後停止拖曳行為**
+- **允許其他元素獨立拖動**
+- **重設系統以便下一次拖曳操作**
+
+**未清理會發生什麼：**
+- 事件監聽器在拖曳停止後仍持續執行
+- 累積未使用的監聽器導致效能下降
+- 與其他元素互動時產生意外行為
+- 瀏覽器資源浪費於不必要的事件處理
+
+### 理解 CSS 位置屬性
+
+我們的拖動系統操作兩個關鍵 CSS 屬性：
+
+| 屬性 | 控制內容 | 我們如何使用 |
+|------|----------|--------------|
+| `top` | 距離頂部邊緣的距離 | 拖動過程中的垂直定位 |
+| `left` | 距離左側邊緣的距離 | 拖動過程中的水平定位 |
+
+**關於 offset 屬性的重要觀察：**
+- **`offsetTop`**：距離已定位祖先元素頂部的當前距離
+- **`offsetLeft`**：距離已定位祖先元素左側的當前距離
+- **定位上下文**：這些值相對於最近的已定位祖先元素
+- **即時更新**：當修改 CSS 屬性時立即變動
+
+> 🎯 **設計理念**：此拖曳系統刻意保持彈性—沒有「放置區域」或其他限制。用戶可自由將植物放置於任意位置，完全掌控自己的造景設計。
+
+## 綜合整合：完整拖曳系統
+
+恭喜！你剛完成了一個用純 JavaScript 製作的高級拖放系統。你的完整 `dragElement` 函式內含一個功能強大的閉包，管理著：
+
+**你的閉包達成的功能：**
+- **獨立維護** 每個植物的私有位置變數
+- **處理** 從開始拖曳到結束的整個生命週期
+- **提供** 跨整個螢幕的平滑、響應式移動
+- **妥善清理** 資源以預防記憶體洩漏
+- **創造** 直覺且具創造力的造景介面
+
+### 測試你的互動式植物瓶景觀
+
+現在測試你的互動式植物瓶景觀！在瀏覽器中打開你的 `index.html` 並嘗試操作：
+
+1. **點擊並按住** 任一植物開始拖曳
+2. **移動滑鼠或手指** 看著植物平滑跟隨
+3. **放開** 以將植物放置在新位置
+4. **嘗試** 不同的排列方式探索介面
+
+🥇 **成就感**：你已創建一個完全互動的網頁應用，掌握專業開發者每天使用的核心概念。這拖放功能底層原理同時支撐著檔案上傳、看板列表及各種互動介面。
+
+### 🔄 **教學檢視點**
+**完整系統理解**：檢驗你對拖曳系統的掌握：
+- ✅ 閉包如何維護每個植物的獨立狀態？
+- ✅ 為什麼座標計算的數學對平滑移動必要？
+- ✅ 忘記清理事件監聽器會導致什麼？
+- ✅ 這種模式如何擴展到更複雜的互動？
+
+**程式碼品質反思**：回顧完整方案：
+- **模組化設計**：每個植物獲得自己的閉包實例
+- **事件效能**：妥善設定與清理監聽器
+- **跨裝置支援**：適用桌面與行動裝置
+- **效能意識**：無記憶體洩漏或多餘計算
+
+
+
+---
+
+## GitHub Copilot Agent 挑戰 🚀
+
+使用 Agent 模式完成以下挑戰：
+
+**描述：** 擴充植物瓶專案，新增重設功能，讓所有植物能夠平滑動畫回復原始位置。
+
+**提示：** 創建一個重設按鈕，點擊後會使用 CSS 過渡動畫將所有植物平滑回復原側欄的原始位置。函式應在頁面載入時儲存原始位置，按下重設按鈕時以 1 秒動畫平滑回復。
+
+了解更多關於 [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) 的資訊。
+
+## 🚀 額外挑戰：擴展你的技能
+
+準備好將植物瓶昇華到下一層嗎？試試以下擴充功能：
+
+**創意延伸：**
+- **雙擊** 植物將其置頂（z-index 操作）
+- **加入視覺反饋**，如滑鼠懸停時植物微光效果
+- **實作邊界限制**，避免將植物拖出植物瓶範圍
+- **創建儲存功能**，利用 localStorage 記錄植物位置
+- **加入音效**，在拾取與放置植物時播放聲音
+
+> 💡 **學習機會**：這些挑戰將教你更多 DOM 操控、事件處理及用戶體驗設計技巧。
+
+## 課後測驗
+
+[課後測驗](https://ff-quizzes.netlify.app/web/quiz/20)
+
+## 複習與自學：深化理解
+
+你已掌握 DOM 操控和閉包的基本，還有更多可學！以下是擴展知識和技能的路徑。
+
+### 替代的拖放實作方法
+
+我們使用了指標事件以獲得最大彈性，但網頁開發還有其他方法：
+
+| 方法 | 適合用例 | 學習價值 |
+|------|----------|----------|
+| [HTML 拖放 API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) | 檔案上傳、正式拖放區域 | 了解瀏覽器原生能力 |
+| [Touch 事件](https://developer.mozilla.org/docs/Web/API/Touch_events) | 行動裝置特定互動 | 行動優先開發模式 |
+| CSS `transform` 屬性 | 平滑動畫 | 效能最佳化技巧 |
+
+### 進階 DOM 操作主題
+
+**下一步學習重點：**
+- **事件委託**：高效處理多個元素事件
+- **交叉觀察器 (Intersection Observer)**：偵測元素進出視窗
+- **變動觀察器 (Mutation Observer)**：監控 DOM 結構變化
+- **網頁元件 (Web Components)**：創建可重用封裝 UI 元素
+- **虛擬 DOM 概念**：了解框架如何優化 DOM 更新
+
+### 持續學習的必要資源
+
+**技術文件：**
+- [MDN 指標事件指南](https://developer.mozilla.org/docs/Web/API/Pointer_events) - 完整指標事件參考
+- [W3C 指標事件規範](https://www.w3.org/TR/pointerevents1/) - 官方標準文件
+- [JavaScript 閉包深度解析](https://developer.mozilla.org/docs/Web/JavaScript/Closures) - 進階閉包範例
+
+**瀏覽器相容性：**
+- [CanIUse.com](https://caniuse.com/) - 檢查跨瀏覽器功能支援
+- [MDN 瀏覽器兼容性資料](https://github.com/mdn/browser-compat-data) - 詳細支援資料
+
+**練習機會：**
+- **構建** 拼圖遊戲，使用類似拖曳機制
+- **製作** 看板列表，拖放任務管理
+- **設計** 可拖動的圖片集
+- **嘗試** 移動裝置手勢互動開發
+
+> 🎯 **學習策略**：最好的鞏固方式就是實作。試著建立不同拖曳介面，每個專案都能教你更多關於用戶互動和 DOM 操控。
+
+### ⚡ **接下來 5 分鐘的事**
+- [ ] 開啟瀏覽器開發者工具，在控制台輸入 `document.querySelector('body')`
+- [ ] 嘗試使用 `innerHTML` 或 `textContent` 變更網頁文字
+- [ ] 為網頁中任一按鈕或連結添加點擊事件監聽
+- [ ] 使用元素面板檢查 DOM 樹結構
+
+### 🎯 **本小時可達成目標**
+- [ ] 完成課後測驗並回顧 DOM 操作概念
+- [ ] 創建一個回應使用者點擊的互動網頁
+- [ ] 練習各類事件處理（click、mouseover、keypress）
+- [ ] 製作簡易待辦清單或計數器，使用 DOM 操控
+- [ ] 探索 HTML 元素與 JavaScript 物件的關係
+
+### 📅 **一週的 JavaScript 旅程**
+- [ ] 完成帶拖放功能的互動植物瓶專案
+- [ ] 掌握事件委託以提升事件處理效率
+- [ ] 學習事件循環與非同步 JavaScript
+- [ ] 透過建立模組練習閉包私有狀態
+- [ ] 探索現代 DOM API，如交叉觀察器
+- [ ] 製作互動元件，無需框架
+
+### 🌟 **一個月的 JavaScript 精通**
+- [ ] 建立複雜單頁應用，使用純 JavaScript
+- [ ] 學習並比較現代框架（React、Vue、Angular）與純 DOM 操控
+- [ ] 貢獻開源 JavaScript 專案
+- [ ] 精通進階主題，如網頁元件和自定義元素
+- [ ] 打造高效能網頁應用，優化 DOM 操作
+- [ ] 教授他人 DOM 操控與 JavaScript 基礎
+
+## 🎯 你的 JavaScript DOM 掌握進度
+
+```mermaid
+timeline
+ title DOM 與 JavaScript 學習進度
+
+ section 基礎 (15 分鐘)
+ DOM 理解: 元素選取方法
+ : 樹狀結構導航
+ : 屬性存取模式
+
+ section 事件處理 (20 分鐘)
+ 使用者互動: 指標事件基礎
+ : 事件監聽器設定
+ : 跨裝置相容性
+ : 事件阻止技術
+
+ section 閉包 (25 分鐘)
+ 範圍管理: 私有變數建立
+ : 函式持續存在
+ : 狀態管理模式
+ : 記憶體效率
+
+ section 拖曳系統 (30 分鐘)
+ 互動功能: 座標追蹤
+ : 位置計算
+ : 移動數學
+ : 清理程序
+
+ section 進階模式 (45 分鐘)
+ 專業技能: 事件代理
+ : 性能優化
+ : 錯誤處理
+ : 無障礙考量
+
+ section 框架理解 (1 週)
+ 現代開發: 虛擬 DOM 概念
+ : 狀態管理函式庫
+ : 元件架構
+ : 建置工具整合
+
+ section 專家級 (1 個月)
+ 進階 DOM API: 交集觀察器
+ : 變異觀察器
+ : 自訂元素
+ : 網頁元件
+```
+### 🛠️ 你的 JavaScript 工具包總結
+
+完成本課後，你已具備：
+- **DOM 精通**：元素選取、屬性操作、樹狀結構導覽
+- **事件專業**：跨裝置指標事件互動處理
+- **閉包理解**：私有狀態管理與函式持續性
+- **互動系統**：從零打造完整拖放實作
+- **效能意識**：妥善清理事件避免記憶體洩漏
+- **現代模式**：專業開發中的程式碼組織技巧
+- **用戶體驗**：打造直覺、響應式界面
+
+**你已習得的專業技能：**
+- **Trello/看板列表**：欄位間的卡片拖曳
+- **檔案上傳系統**：拖放檔案處理
+- **圖片庫**：照片重新排列介面
+- **行動應用**：基於觸控的互動模式
+
+**下一階段**：你已準備好探索 React、Vue 或 Angular 等現代框架，這些框架基於你目前 DOM 操控的基本概念建立！
+
+## 作業
+
+[多練習操作 DOM](assignment.md)
+
+---
+
+
+**免責聲明**：
+本文件乃使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們力求準確，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應視為權威資料來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤釋負責。
+
\ No newline at end of file
diff --git a/translations/zh-HK/3-terrarium/3-intro-to-DOM-and-closures/assignment.md b/translations/zh-HK/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
new file mode 100644
index 000000000..9875fdb19
--- /dev/null
+++ b/translations/zh-HK/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
@@ -0,0 +1,130 @@
+# DOM 元素調查作業
+
+## 概覽
+
+現在你已經親身體驗了 DOM 操作的威力，是時候探索更廣泛的 DOM 介面世界。此作業將加深你對不同網頁技術如何與 DOM 互動的理解，而不僅僅是拖曳元素。
+
+## 學習目標
+
+完成此作業後，你將能夠：
+- **研究** 並深入了解特定的 DOM 介面
+- **分析** 實際應用中的 DOM 操作實現
+- **連結** 理論概念與實務應用
+- **培養** 技術文件撰寫與分析能力
+
+## 指示
+
+### 第一步：選擇你的 DOM 介面
+
+造訪 MDN 的完整 [DOM 介面列表](https://developer.mozilla.org/docs/Web/API/Document_Object_Model)，並選擇一個你感興趣的介面。建議從以下類別中挑選，以豐富學習內容：
+
+**初學者友善選項：**
+- `Element.classList` - 動態管理 CSS 類別
+- `Document.querySelector()` - 進階元素選取
+- `Element.addEventListener()` - 指標事件以外的事件處理
+- `Window.localStorage` - 用戶端資料儲存
+
+**中級挑戰：**
+- `Intersection Observer API` - 偵測元素可見性
+- `MutationObserver` - 監視 DOM 變化
+- `Drag and Drop API` - 指標拖曳替代方案
+- `Geolocation API` - 取得用戶位置
+
+**進階探索：**
+- `Web Components` - 自訂元素與 Shadow DOM
+- `Canvas API` - 程式化繪圖
+- `Web Workers` - 背景處理
+- `Service Workers` - 離線功能
+
+### 第二步：研究並撰寫文件
+
+撰寫一份 300-500 字的完整分析內容，包含：
+
+#### 技術概述
+- **定義** 你所選介面是什麼，並以清楚且初學者友善的語言說明
+- **說明** 其主要方法、屬性或事件
+- **描述** 該介面設計用來解決的問題類型
+
+#### 實際應用
+- **尋找** 一個使用該介面的網站（檢查原始碼或搜尋範例）
+- **記錄** 具體的實現方式，若可能附上程式碼片段
+- **分析** 為什麼開發者會採用這種方案
+- **解釋** 它如何提升使用者體驗
+
+#### 實務應用
+- **比較** 你選的介面與我們在 terrarium 專案中使用的方法
+- **建議** 這個介面如何增強或擴展 terrarium 功能
+- **指出** 其他適合使用此介面的項目
+
+### 第三步：程式碼範例
+
+包含一個簡單且可執行的程式碼範例，展現你的介面實際運作。此程式碼應該：
+- **具功能性** — 測試後可正確執行
+- **有註解** — 解釋各部分功能
+- **相關性** — 與實際使用案例相關
+- **適合初學者** — 容易被學習網頁開發的人理解
+
+## 繳交格式
+
+請使用清楚的標題結構來安排你的提交內容：
+
+```markdown
+# [Interface Name] DOM Investigation
+
+## What It Does
+[Technical overview]
+
+## Real-World Example
+[Website analysis and implementation details]
+
+## Code Demonstration
+[Your working example with comments]
+
+## Reflection
+[How this connects to our terrarium project and future applications]
+```
+
+## 評分標準
+
+| 評分準則 | 優異 (A) | 精熟 (B) | 發展中 (C) | 需改進 (D) |
+|----------|-----------|----------|------------|------------|
+| **技術理解** | 展現深刻理解，說明精準且用詞恰當 | 展示紮實理解，多數說明準確 | 基本理解，有部分誤解 | 理解不足，錯誤明顯 |
+| **實際分析** | 定位且徹底分析真實案例並具體說明 | 找到實例且分析一定程度充分 | 找到案例但分析較淺 | 實體連結不清或錯誤 |
+| **程式碼範例** | 工作正常且註解清晰，明確演示介面 | 功能正常且有適當註解 | 程式有效，但說明不足 | 程式有錯誤或解釋差 |
+| **文筆品質** | 文字清晰且吸引人，結構完善且具技術溝通能力 | 結構良好且技術寫作佳 | 結構與清晰度尚可 | 結構鬆散或表達不清 |
+| **批判性思考** | 深刻連結概念，提出創新應用建議 | 有分析思考並相關連結 | 有部分分析但不夠深入 | 缺乏批判性思考跡象 |
+
+## 成功秘訣
+
+**研究策略：**
+- **從** MDN 文件開始，取得權威資訊
+- **尋找** GitHub 或 CodePen 的程式碼範例
+- **利用** 瀏覽器開發工具檢查熱門網站
+- **觀看** 教學影片以獲得視覺說明
+
+**寫作指導：**
+- **用** 自己的話說明，不要照抄文件
+- **包含** 具體範例及程式碼片段
+- **用** 教學的語氣解釋技術概念
+- **將** 介面與更廣泛的網頁開發概念連結
+
+**程式碼範例點子：**
+- **製作** 展示介面主要功能的簡單示範
+- **延伸** 我們 terrarium 專案相關的概念
+- **重點** 放在功能性而非視覺設計
+- **測試** 程式碼，確保可正常執行
+
+## 繳交截止日
+
+[在此插入截止日期]
+
+## 有問題嗎？
+
+如需釐清任何相關問題，歡迎隨時詢問！本次調查將深化你對 DOM 如何支援日常網頁互動體驗的理解。
+
+---
+
+
+**免責聲明**：
+本文件由 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 協助翻譯。雖然我們致力於確保準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始語言版本的文件應被視為權威來源。對於關鍵資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤釋負責。
+
\ No newline at end of file
diff --git a/translations/zh-HK/3-terrarium/README.md b/translations/zh-HK/3-terrarium/README.md
new file mode 100644
index 000000000..047490841
--- /dev/null
+++ b/translations/zh-HK/3-terrarium/README.md
@@ -0,0 +1,21 @@
+## 部署你的 Terrarium
+
+你可以使用 **Azure Static Web Apps** 在網絡上部署或發佈你的 Terrarium。
+
+1. 分叉此倉庫
+
+2. 按下此按鈕 👇
+
+[](https://portal.azure.com/#create/Microsoft.StaticApp)
+
+3. 按照設置嚮導創建你的應用。
+ - 將 **App root** 設定為 `/solution` 或你的代碼庫根目錄。
+ - 這個應用沒有 API，因此你可以跳過 API 配置。
+ - 系統會自動創建一個 `.github` 文件夾，以幫助 Azure Static Web Apps 構建和發佈你的應用。
+
+---
+
+
+**免責聲明**：
+本文件乃使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於確保準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應視為權威來源。對於重要資訊，建議尋求專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤釋負責。
+
\ No newline at end of file
diff --git a/translations/zh-HK/3-terrarium/solution/README.md b/translations/zh-HK/3-terrarium/solution/README.md
new file mode 100644
index 000000000..1f8809590
--- /dev/null
+++ b/translations/zh-HK/3-terrarium/solution/README.md
@@ -0,0 +1,28 @@
+# 我的微型植物園：一個學習 HTML、CSS 和使用 JavaScript 操控 DOM 的項目 🌵🌱
+
+一個小型的拖放代碼冥想項目。通過一點 HTML、JS 和 CSS，你可以構建一個網頁界面，為其設計樣式，並添加互動功能。
+
+
+
+## 鳴謝
+
+由 [Jen Looper](https://www.twitter.com/jenlooper) 用 ♥️ 編寫
+
+這個通過 CSS 創建的微型植物園靈感來自 Jakub Mandra 的玻璃罐 [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY)。
+
+插圖由 [Jen Looper](http://jenlooper.com) 使用 Procreate 手繪完成。
+
+## 部署你的微型植物園
+
+你可以使用 Azure 靜態網頁應用程序將你的微型植物園部署或發布到網絡上。
+
+1. Fork 此倉庫
+
+2. 按下這個按鈕
+
+[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
+
+3. 按照向導創建你的應用程序。確保將應用程序根目錄設置為 `/solution` 或你的代碼庫根目錄。此應用程序中沒有 API，因此不需要擔心添加它。一個 .github 文件夾將會在你 fork 的倉庫中創建，這將幫助 Azure 靜態網頁應用程序的構建服務構建並將你的應用程序發布到一個新的 URL。
+
+**免責聲明**：
+本文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原文文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。
\ No newline at end of file
diff --git a/translations/zh-HK/4-typing-game/README.md b/translations/zh-HK/4-typing-game/README.md
new file mode 100644
index 000000000..37bb7b5dd
--- /dev/null
+++ b/translations/zh-HK/4-typing-game/README.md
@@ -0,0 +1,281 @@
+# 事件驅動程式設計 - 建立一個打字遊戲
+
+```mermaid
+journey
+ title 你的打字遊戲開發旅程
+ section 基礎
+ 計劃遊戲結構: 3: Student
+ 設計用戶界面: 4: Student
+ 設置 HTML 元素: 4: Student
+ section 功能
+ 處理用戶輸入: 4: Student
+ 跟蹤時間: 5: Student
+ 計算準確度: 5: Student
+ section 功能特色
+ 增加視覺反饋: 5: Student
+ 實現遊戲邏輯: 5: Student
+ 美化體驗: 5: Student
+```
+## 介紹
+
+有一件每個開發者都知道但很少談論的事：打字快是超能力！🚀 想想看——你越快把腦中的想法輸入到程式編輯器，創造力就能流動得越順暢。就像你的思緒和螢幕之間有條直接的管道。
+
+```mermaid
+pie title 遊戲功能
+ "即時反饋" : 25
+ "效能追蹤" : 20
+ "互動介面" : 20
+ "計時系統" : 15
+ "引言管理" : 10
+ "結果顯示" : 10
+```
+想知道提升這項技能的最佳方法之一嗎？你猜對了——我們要做一款遊戲！
+
+```mermaid
+flowchart LR
+ A[玩家開始遊戲] --> B[隨機顯示語錄]
+ B --> C[玩家輸入字元]
+ C --> D{字元正確嗎？}
+ D -->|是| E[綠色高亮]
+ D -->|否| F[紅色高亮]
+ E --> G[更新準確率]
+ F --> G
+ G --> H{語錄完成了嗎？}
+ H -->|否| C
+ H -->|是| I[計算每分鐘字數]
+ I --> J[顯示結果]
+ J --> K[再玩一次？]
+ K -->|是| B
+ K -->|否| L[遊戲結束]
+
+ style A fill:#e1f5fe
+ style D fill:#fff3e0
+ style E fill:#e8f5e8
+ style F fill:#ffebee
+ style I fill:#f3e5f5
+```
+> 讓我們一起創造一款超棒的打字遊戲吧！
+
+準備好運用你學習的 JavaScript、HTML 和 CSS 技能了嗎？我們要建立一個打字遊戲，遊戲內容會挑戰你打出來自傳奇偵探 [Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes) 的隨機名言。遊戲會追蹤你打字的速度和準確性——相信我，這比你想像中還要令人上癮！
+
+```mermaid
+mindmap
+ root((打字遊戲開發))
+ User Interface
+ Input Elements
+ Visual Feedback
+ Responsive Design
+ Accessibility
+ Game Logic
+ Quote Selection
+ Timer Management
+ Accuracy Tracking
+ Score Calculation
+ Event Handling
+ Keyboard Input
+ Button Clicks
+ Real-time Updates
+ Game State Changes
+ Performance Metrics
+ Words Per Minute
+ Character Accuracy
+ Error Tracking
+ Progress Display
+ User Experience
+ Immediate Feedback
+ Clear Instructions
+ Engaging Content
+ Achievement System
+```
+
+
+## 你需要知道的
+
+```mermaid
+flowchart TD
+ A[用戶動作] --> B{事件類型？}
+ B -->|鍵盤按鍵| C[鍵盤事件]
+ B -->|按鈕點擊| D[滑鼠事件]
+ B -->|計時器| E[時間事件]
+
+ C --> F[檢查字元]
+ D --> G[開始/重設遊戲]
+ E --> H[更新計時器]
+
+ F --> I{正確？}
+ I -->|是| J[標示綠色]
+ I -->|否| K[標示紅色]
+
+ J --> L[更新分數]
+ K --> L
+ L --> M[檢查遊戲狀態]
+
+ G --> N[生成新名言]
+ H --> O[顯示時間]
+
+ M --> P{遊戲完成？}
+ P -->|是| Q[顯示結果]
+ P -->|否| R[繼續遊戲]
+
+ style A fill:#e1f5fe
+ style F fill:#e8f5e8
+ style I fill:#fff3e0
+ style Q fill:#f3e5f5
+```
+在深入之前，請確保你熟悉以下概念（如果需要快速複習也沒關係——我們都經歷過！）：
+
+- 建立文字輸入和按鈕控件
+- CSS 與使用類別設定樣式
+- JavaScript 基礎
+ - 建立陣列
+ - 產生隨機數字
+ - 取得目前時間
+
+如果有任何部分感覺有點生疏，也完全沒問題！有時候鞏固知識的最好方式就是開始實作，邊做邊學。
+
+### 🔄 **教學確認**
+**基礎評估**：開始開發前，確保你了解：
+- ✅ HTML 表單與輸入元素的工作原理
+- ✅ CSS 類別與動態樣式設定
+- ✅ JavaScript 事件監聽器與處理程序
+- ✅ 陣列操作與隨機選擇
+- ✅ 時間測量與計算
+
+**快速自我測驗**：你能解釋這些概念如何在互動遊戲中協同運作嗎？
+- **事件** 在使用者與元素互動時觸發
+- **處理程序** 負責處理事件並更新遊戲狀態
+- **CSS** 提供使用者行為的視覺反饋
+- **計時** 使得效能測量和遊戲進展成為可能
+
+```mermaid
+quadrantChart
+ title 打字遊戲技能發展
+ x-axis 初學者 --> 專家
+ y-axis 靜態 --> 互動式
+ quadrant-1 進階遊戲
+ quadrant-2 即時應用程式
+ quadrant-3 基本頁面
+ quadrant-4 互動網站
+
+ HTML Forms: [0.3, 0.2]
+ CSS Styling: [0.4, 0.3]
+ Event Handling: [0.7, 0.8]
+ Game Logic: [0.8, 0.9]
+ Performance Tracking: [0.9, 0.7]
+```
+## 開工吧！
+
+[利用事件驅動程式設計創建打字遊戲](./typing-game/README.md)
+
+### ⚡ **接下來 5 分鐘你可以做什麼**
+- [ ] 開啟瀏覽器主控台，試試用 `addEventListener` 監聽鍵盤事件
+- [ ] 建立一個簡單 HTML 頁面，有輸入欄並測試打字偵測
+- [ ] 練習字串操作，將輸入文字與目標文字比對
+- [ ] 嘗試使用 `setTimeout` 理解定時功能
+
+### 🎯 **這一小時你可以完成什麼**
+- [ ] 完成課後小測，理解事件驅動程式設計
+- [ ] 建立打字遊戲的基本版本並驗證字詞
+- [ ] 新增正確與錯誤打字的視覺反饋
+- [ ] 實作基於速度與準確性的簡單計分系統
+- [ ] 用 CSS 美化遊戲介面，使之更吸引人
+
+### 📅 **這一週你的遊戲開發路線**
+- [ ] 完成具備所有功能與細節的完整打字遊戲
+- [ ] 新增難度等級，包含不同複雜度的字詞
+- [ ] 實作用戶統計追蹤（WPM、準確率變化）
+- [ ] 添加音效與動畫，提升使用體驗
+- [ ] 讓遊戲響應式適用於觸控裝置
+- [ ] 將遊戲分享線上並收集用戶回饋
+
+### 🌟 **這一個月你的互動開發計畫**
+- [ ] 開發多款遊戲，探索不同互動模式
+- [ ] 學習遊戲循環、狀態管理與效能優化
+- [ ] 貢獻開源遊戲開發專案
+- [ ] 精通高階計時概念與流暢動畫
+- [ ] 建立展示各式互動應用的作品集
+- [ ] 指導其他對遊戲開發與用戶互動有興趣的人
+
+## 🎯 你的打字遊戲精通時間表
+
+```mermaid
+timeline
+ title 遊戲開發學習進度
+
+ section 設置 (10分鐘)
+ 專案結構: HTML 基礎
+ : CSS 樣式設置
+ : JavaScript 檔案建立
+
+ section 使用者介面 (20分鐘)
+ 互動元素: 輸入欄位
+ : 按鈕控制
+ : 顯示區域
+ : 響應式佈局
+
+ section 事件處理 (25分鐘)
+ 使用者互動: 鍵盤事件
+ : 滑鼠事件
+ : 即時反饋
+ : 狀態管理
+
+ section 遊戲邏輯 (30分鐘)
+ 核心功能: 引言產生
+ : 角色比較
+ : 精確度計算
+ : 計時器實作
+
+ section 性能追蹤 (35分鐘)
+ 指標與分析: 每分鐘字數計算
+ : 錯誤追蹤
+ : 進度可視化
+ : 結果顯示
+
+ section 美化與增強 (45分鐘)
+ 使用者體驗: 視覺反饋
+ : 音效
+ : 動畫
+ : 無障礙功能
+
+ section 進階功能 (1週)
+ 擴展功能: 難度等級
+ : 排行榜
+ : 自訂引言
+ : 多人選項
+
+ section 專業技能 (1個月)
+ 遊戲開發: 性能優化
+ : 代碼架構
+ : 測試策略
+ : 部署模式
+```
+### 🛠️ 你的遊戲開發工具包總結
+
+完成這個專案後，你將掌握：
+- **事件驅動程式設計**：對輸入反應的互動界面
+- **即時反饋**：快速視覺與效能更新
+- **效能測量**：精確的計時與計分系統
+- **遊戲狀態管理**：控制應用流程與用戶體驗
+- **互動設計**：創造引人入勝、令人上癮的使用體驗
+- **現代網頁 API**：利用瀏覽器能力實現豐富互動
+- **無障礙模式**：為所有使用者打造包容性設計
+
+**實際應用場景**：這些技能適用於：
+- **網頁應用程式**：任何互動界面或儀表板
+- **教育軟體**：學習平台與技能評估工具
+- **生產力工具**：文字編輯器、整合開發環境、協作軟體
+- **遊戲產業**：瀏覽器遊戲與互動娛樂
+- **行動開發**：觸控介面與手勢處理
+
+**下一階段**：準備探索進階遊戲框架、即時多人系統或複雜的互動應用！
+
+## 致謝
+
+由 [Christopher Harrison](http://www.twitter.com/geektrainer) 以 ♥️ 撰寫
+
+---
+
+
+**免責聲明**：
+本文件乃使用人工智能翻譯服務【Co-op Translator】(https://github.com/Azure/co-op-translator) 翻譯而成。雖然我們致力於確保準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威資料。對於重要資訊，建議使用專業人工翻譯。對於因使用本翻譯而引致的任何誤解或誤釋，我們概不負責。
+
\ No newline at end of file
diff --git a/translations/zh-HK/4-typing-game/solution/README.md b/translations/zh-HK/4-typing-game/solution/README.md
new file mode 100644
index 000000000..a4045a8dc
--- /dev/null
+++ b/translations/zh-HK/4-typing-game/solution/README.md
@@ -0,0 +1,4 @@
+這是一個佔位符，故意留空
+
+**免責聲明**：
+本文件已使用人工智能翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始語言的文件應被視為具權威性的來源。對於重要資訊，建議使用專業的人類翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。
\ No newline at end of file
diff --git a/translations/zh-HK/4-typing-game/typing-game/README.md b/translations/zh-HK/4-typing-game/typing-game/README.md
new file mode 100644
index 000000000..362d6e4f0
--- /dev/null
+++ b/translations/zh-HK/4-typing-game/typing-game/README.md
@@ -0,0 +1,604 @@
+# 使用事件創建一個遊戲
+
+你是否曾經想過網站如何知道你何時點按按鈕或在文字框中輸入？這就是事件驅動程式設計的魔力！有什麼比構建一個有用的東西更好的方式來學習這項基本技能呢——一個會對你每次敲打的按鍵作出反應的打字速度遊戲。
+
+你將親身看到網頁瀏覽器如何「與」你的 JavaScript 代碼「對話」。每次你點按、輸入或移動滑鼠時，瀏覽器都會向你的代碼發送小訊息（我們稱之為事件），而你則決定如何回應！
+
+到本文結束時，你將建立一個真實的打字遊戲，追蹤你的速度和準確度。更重要的是，你將理解驅動每一個你曾使用過的互動網站的基本概念。讓我們開始吧！
+
+## 課前測驗
+
+[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/21)
+
+## 事件驅動程式設計
+
+想想你最喜歡的應用程式或網站——是什麼令它感覺生動且反應靈敏？全在於它如何回應你的操作！每一次點按、點擊、滑動或鍵入都會創造一個我們稱之為「事件」的東西，而這正是網頁開發中真正的魔法所在。
+
+這就是為什麼針對網頁編程如此有趣的原因：我們永遠不知道何時有人會點擊按鈕或開始輸入文字。他們可能立即點擊，也可能等待五分鐘，或者可能根本不點擊！這種不可預測性意味著我們需要用不同的方法來撰寫代碼。
+
+我們不是寫一段從上到下運行的程式碼（就像食譜一樣），而是寫程式碼耐心地等待事情發生。這就像 1800 年代的電報操作員守候在他們的機器旁，準備在訊息通過電線時立即回應一樣。
+
+那麼，「事件」究竟是什麼？簡單地說，它是發生的事情！你點擊一個按鈕——這就是一個事件。你輸入一個字母——這是另一個事件。你移動滑鼠——還有另一個事件。
+
+事件驅動程式設計讓我們能夠設定代碼來聆聽和回應。我們創建特殊函數稱為**事件監聽器（event listeners）**，它們耐心等待特定事件發生，然後在事件發生時立即執行。
+
+把事件監聽器想像成你的代碼的門鈴。你安裝門鈴 (`addEventListener()`)，告訴它要聽哪種聲音（如「click」或「keypress」），然後指定誰按鐘時該做什麼（你的自訂函數）。
+
+**事件監聽器的工作原理：**
+- **監聽**特定的用戶操作，如點擊、鍵擊或滑鼠移動
+- **執行**指定事件發生時的自訂代碼
+- **立即回應**用戶互動，創造無縫體驗
+- **可處理**同一元素上的多個不同事件監聽器
+
+> **NOTE:** 值得一提的是，創建事件監聽器的方法有很多。你可以使用匿名函數，或者建立有名稱的函數。你也可以用各種快捷方式，比如設定 `click` 屬性，或者使用 `addEventListener()`。在我們的練習中，我們將專注於 `addEventListener()` 和匿名函數，因為這可能是網頁開發者最常用的技術。它也是最靈活的，因為 `addEventListener()` 適用於所有事件，且事件名稱可作為參數傳入。
+
+### 常見事件
+
+雖然網頁瀏覽器提供數十種不同的事件可供監聽，但大多數互動應用程式只依賴幾個基本事件。理解這些核心事件將為你建立複雜的用戶互動奠定基礎。
+
+有[數十種事件](https://developer.mozilla.org/docs/Web/Events)可供你監聽，幾乎用戶在頁面上做的任何事情都可以引發事件，這讓你能夠掌控用戶體驗。幸運的是，你通常只需要少數幾種事件。以下是一些常見的（包括我們創建遊戲時將使用的兩種）：
+
+| Event | 說明 | 常見用例 |
+|-------|-------|---------|
+| `click` | 用戶點擊了某些東西 | 按鈕、鏈結、互動元素 |
+| `contextmenu` | 用戶點擊了滑鼠右鍵 | 自訂右鍵選單 |
+| `select` | 用戶選取了部分文字 | 文字編輯、複製操作 |
+| `input` | 用戶輸入了文字 | 表單驗證、即時搜尋 |
+
+**理解這些事件類型：**
+- **觸發**用戶與頁面上特定元素互動
+- **提供**關於用戶操作的詳細事件對象資訊
+- **啟用**你創造反應迅速、互動性強的網頁應用程式
+- **跨瀏覽器裝置**皆可一致運作
+
+## 創建遊戲
+
+既然你了解事件如何運作，讓我們將這些知識付諸實踐，做一些有用的東西。我們將建立一個打字速度遊戲，演示事件處理的同時幫助你培養重要的開發技能。
+
+我們要創建一個遊戲來探索 JavaScript 中事件的運作。遊戲將測試玩家的打字技能，這是每個開發者都應該擁有且被低估的技能。趣聞：我們如今使用的 QWERTY 鍵盤布局其實是在 1870 年代為打字機設計的——而良好的打字技能對程式設計師來說依然十分有價值！遊戲的一般流程如下：
+
+```mermaid
+flowchart TD
+ A[玩家點擊開始] --> B[顯示隨機名言]
+ B --> C[玩家在文字框輸入]
+ C --> D{單字完成？}
+ D -->|是| E[突出顯示下一個單字]
+ D -->|否| F{目前正確嗎？}
+ F -->|是| G[保持正常樣式]
+ F -->|否| H[顯示錯誤樣式]
+ E --> I{名言完成？}
+ I -->|否| C
+ I -->|是| J[顯示成功訊息和時間]
+ G --> C
+ H --> C
+```
+**遊戲流程：**
+- **開始**：玩家按下開始按鈕，顯示一段隨機引言
+- **追蹤**：即時追蹤玩家的逐字輸入進度
+- **標示**：高亮顯示當前字詞，引導玩家專注
+- **回饋**：立即以視覺效果提示輸入錯誤
+- **計算**：完成全部引言時顯示花費的總時間
+
+讓我們一起開發遊戲，並了解事件！
+
+### 檔案結構
+
+在撰寫代碼前，讓我們做好組織！有一個整潔的檔案結構能避免日後的麻煩，讓你的專案看起來更專業。😊
+
+我們將保持簡單，只使用三個檔案：`index.html` 放我們的頁面結構，`script.js` 包含遊戲的邏輯，還有 `style.css` 讓頁面美觀。這是網頁開發最經典的三劍客！
+
+**打開命令列或終端機視窗，輸入以下指令，來為你的工作建立一個新資料夾：**
+
+```bash
+# Linux 或 macOS
+mkdir typing-game && cd typing-game
+
+# Windows
+md typing-game && cd typing-game
+```
+
+**這些指令做了什麼：**
+- **創建**一個名為 `typing-game` 的新目錄，用來存放你的專案檔案
+- **自動切換到**新建的目錄中
+- **為你的遊戲開發搭建了**一個乾淨的工作環境
+
+**打開 Visual Studio Code：**
+
+```bash
+code .
+```
+
+**此指令作用：**
+- **在目前目錄啟動** Visual Studio Code
+- **打開**你的專案資料夾到編輯器中
+- **提供**所有你需要的開發工具
+
+**在 Visual Studio Code 中新增三個檔案，命名如下：**
+- `index.html` - 包含遊戲的結構和內容
+- `script.js` - 處理所有遊戲邏輯和事件監聽器
+- `style.css` - 定義視覺外觀和樣式
+
+## 創建使用者介面
+
+現在讓我們搭建實際進行遊戲操作的舞台！把它想成為飛船設計控制面板——我們要確保玩家需要的所有東西都在他們預期的位置。
+
+先想想遊戲需要些什麼。如果你在玩打字遊戲，你希望畫面上看到什麼？這裡是我們需要的：
+
+| UI 元素 | 用途 | HTML 元素 |
+|---------|-------|-----------|
+| 引言顯示區 | 顯示要輸入的文字 | ``，具有 `id="quote"` |
+| 訊息區域 | 顯示狀態及成功訊息 | `
`，具有 `id="message"` |
+| 文字輸入框 | 玩家輸入引言 | ``，具有 `id="typed-value"` |
+| 開始按鈕 | 開始遊戲 | `