` 内的 `
` 显示什么颜色？
+```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` 单位，提升字体大小的可伸缩性与无障碍性
+
+虽然元素选择器适合通用样式，但针对生态瓶里的具体植物组件，你需要更具体的选择器。
+
+### ID 选择器用于唯一元素
+
+ID 选择器用 `#` 符号，定位具有唯一 `id` 属性的元素。ID 在页面中唯一，非常适合样式化单个特定元素，比如生态瓶左、右侧的植物容器。
+
+为你的生态瓶侧边容器创建样式：
+
+```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`，确保内边距包括在宽度内
+- **移除** 零值的 `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，类可以在 HTML 中多次使用，适合统一样式模式。
+
+在生态瓶中，每株植物样式相似但定位不同。我们会用类做共享样式，用 ID 做单独定位。
+
+**各植物的 HTML 结构如下：**
+```html
+
+
+
高度5%
顶部位置"] --> A
+ B1["宽度60%
高度80%
圆角
不透明度0.5"] --> B
+ C1["宽度60%
高度5%
深棕色
底层"] --> C
+ D1["宽度50%
高度1%
底部位置"] --> D
+ F1["细微阴影
透明度
层叠顺序"] --> 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` 单位来设置圆角，它相对于根字体大小缩放。这样创建的设计更易访问，尊重用户的字体偏好。详见官方规范中的 [CSS 相对单位](https://www.w3.org/TR/css-values-3/#font-relative-lengths)。
+
+✅ **视觉实验**：尝试修改这些数值，观察效果：
+- 将罐子的透明度从 0.5 改为 0.8——这如何影响玻璃外观？
+- 将土壤颜色从 `#3a241d` 改为 `#8B4513`——视觉效果怎样改变？
+- 修改土壤的 `z-index` 为 2——分层效果发生了什么？
+
+### 🔄 **教学检查点**
+**CSS 视觉设计理解**：确认你对视觉 CSS 的掌握：
+- ✅ 百分比尺寸如何实现响应式设计？
+- ✅ 为什么透明度能创建玻璃透明效果？
+- ✅ `z-index` 在分层中起什么作用？
+- ✅ 圆角值如何塑造罐子形状？
+
+**设计原则**：注意我们如何用简单形状构建复杂视觉：
+1. **矩形** → **圆角矩形** → **罐子组件**
+2. **纯色** → **透明度** → **玻璃效果**
+3. **单个元素** → **分层组合** → **三维效果**
+
+---
+
+## GitHub Copilot Agent 挑战 🚀
+
+使用 Agent 模式完成以下挑战：
+
+**描述：** 创建一个 CSS 动画，使生态瓶中的植物轻柔地摇摆，模拟自然微风效果。帮助你练习 CSS 动画、变换和关键帧，同时增强生态瓶的视觉吸引力。
+
+**提示：** 添加 CSS 关键帧动画，使生态瓶内的植物缓慢地左右摇摆。创建一个摇摆动画，让每棵植物左右旋转约 2-3 度，持续时间为 3-4 秒，应用于 `.plant` 类。确保动画无限循环，且采用缓动函数以获得自然流畅的动作。
+
+了解更多关于 [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 网格布局** - 强大工具，创建复杂布局
+- **CSS 变量** - 降低重复，提高可维护性
+- **响应式设计** - 确保网站在不同屏幕尺寸上表现良好
+
+### 互动学习资源
+
+通过这些有趣的实战游戏来练习概念：
+- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - 通过有趣挑战掌握 Flexbox
+- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - 通过种植虚拟胡萝卜学习 CSS 网格
+- 🎯 [CSS Battle](https://cssbattle.dev/) - 用编码挑战测试你的 CSS 技能
+
+### 额外学习资源
+
+想系统学习 CSS 基础，完成微软学习模块：[用 CSS 样式化你的 HTML 应用](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
+
+### ⚡ **接下来 5 分钟你可以做什么**
+- [ ] 打开开发者工具，使用元素面板检查任何网站的 CSS 样式
+- [ ] 创建一个简单的 CSS 文件，并链接到 HTML 页面
+- [ ] 尝试用不同方式改变颜色：十六进制、RGB 和命名颜色
+- [ ] 通过添加内边距和外边距练习盒模型
+
+### 🎯 **接下来一小时你能完成什么**
+- [ ] 完成课后测验，复习 CSS 基础
+- [ ] 给你的 HTML 页面添加字体、颜色和间距样式
+- [ ] 使用 flexbox 或 grid 创建简单布局
+- [ ] 试验 CSS 过渡实现平滑效果
+- [ ] 用媒体查询练习响应式设计
+
+### 📅 **你的 CSS 一周学习计划**
+- [ ] 富有创意地完成生态瓶样式作业
+- [ ] 通过建立照片图库布局掌握 CSS 网格
+- [ ] 学习 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-index）
+ ：响应式单位
+
+ section 视觉设计（30分钟）
+ 样式掌握：颜色与不透明度
+ ：阴影与效果
+ ：过渡
+ ：变换属性
+
+ section 响应式设计（45分钟）
+ 多设备支持：媒体查询
+ ：灵活布局
+ ：移动优先方法
+ ：视口优化
+
+ section 高级技巧（1周）
+ 现代 CSS：弹性盒布局
+ ：CSS 网格系统
+ ：自定义属性
+ ：动画关键帧
+
+ 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-CN/3-terrarium/2-intro-to-css/assignment.md b/translations/zh-CN/3-terrarium/2-intro-to-css/assignment.md
new file mode 100644
index 000000000..58ec822ed
--- /dev/null
+++ b/translations/zh-CN/3-terrarium/2-intro-to-css/assignment.md
@@ -0,0 +1,127 @@
+# CSS 重构作业
+
+## 目标
+
+将您的微型生态瓶项目转换为使用现代 CSS 布局技术！重构当前的绝对定位方法，改用 **Flexbox** 或 **CSS Grid** 实现更易维护、响应式的设计。此作业挑战您在保持生态瓶视觉美感的同时，应用现代 CSS 标准。
+
+理解何时及如何使用不同的布局方法，是现代网页开发的关键技能。本练习架起传统定位技术与现代 CSS 布局系统之间的桥梁。
+
+## 作业说明
+
+### 阶段 1：分析与规划
+1. **审查当前生态瓶代码** - 识别哪些元素当前使用绝对定位
+2. **选择布局方法** - 决定 Flexbox 还是 CSS Grid 更适合您的设计目标
+3. **绘制新布局结构图** - 规划容器及植物元素如何组织
+
+### 阶段 2：实现
+1. **创建生态瓶项目的新版本**，放在单独文件夹中
+2. **根据需要更新 HTML 结构**，以支持所选布局方法
+3. **重构 CSS**，使用 Flexbox 或 CSS Grid 替代绝对定位
+4. **保持视觉一致性** - 确保植物与生态瓶罐保持相同位置
+5. **实现响应式行为** - 使布局能优雅适应不同屏幕尺寸
+
+### 阶段 3：测试与文档
+1. **跨浏览器测试** - 验证设计在 Chrome、Firefox、Edge 和 Safari 中表现正常
+2. **响应式测试** - 检查布局在移动设备、平板和桌面屏幕尺寸上的表现
+3. **文档编写** - 在 CSS 中添加注释，说明布局设计选择
+4. **截图** - 捕捉生态瓶在不同浏览器及屏幕尺寸下的效果
+
+## 技术要求
+
+### 布局实现
+- **选择一项**：仅实现 Flexbox 或 CSS Grid（同一元素不可同时使用两者）
+- **响应式设计**：使用相对单位（`rem`、`em`、`%`、`vw`、`vh`）替代固定像素
+- **无障碍**：保持适当的语义 HTML 结构和替代文本
+- **代码质量**：使用一致的命名规范，逻辑清晰地组织 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**：最新 2 个版本
+- **Firefox**：最新 2 个版本
+- **Safari**：最新 2 个版本
+- **移动浏览器**：iOS Safari、Chrome Mobile
+
+## 交付物
+
+1. **更新的 HTML 文件**，改进语义结构
+2. **重构后的 CSS 文件**，采用现代布局技术
+3. **截图集**，展示跨浏览器兼容性：
+ - 桌面视图（1920x1080）
+ - 平板视图（768x1024）
+ - 手机视图（375x667）
+ - 至少包含 2 种不同浏览器
+4. **README.md 文件**，内容包括：
+ - 您的布局选择（Flexbox 或 Grid）及理由
+ - 重构过程中遇到的挑战
+ - 浏览器兼容性说明
+ - 运行代码说明
+
+## 评估标准
+
+| 评估项 | 优秀 (4) | 良好 (3) | 进行中 (2) | 初学 (1) |
+|--------|-----------|-----------|-------------|-----------|
+| **布局实现** | 熟练使用 Flexbox/Grid 及高级功能；完全响应式 | 正确实现，响应式表现良好 | 具备基本实现，响应式有轻微问题 | 实现不完整或错误 |
+| **代码质量** | CSS 清晰有序，注释丰富，命名规范 | 组织良好，包含部分注释 | 组织尚可，注释有限 | 组织混乱，不易理解 |
+| **跨浏览器兼容性** | 各要求浏览器表现一致，附截图证明 | 与部分浏览器兼容良好，差异注释明确 | 存在兼容性问题但不影响功能 | 主要兼容问题或缺少测试 |
+| **响应式设计** | 优秀的移动优先策略，断点流畅 | 响应式表现良好，断点合理 | 基本响应式，有局部布局问题 | 响应式表现有限或有缺陷 |
+| **文档** | README 详尽，解释深入，见解丰富 | 文档良好，涵盖所有必要内容 | 基础文档，解释有限 | 文档不完整或缺失 |
+
+## 有用资源
+
+### 布局方法指南
+- 📖 [Flexbox 完整指南](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+- 📖 [CSS Grid 完整指南](https://css-tricks.com/snippets/css/complete-guide-grid/)
+- 📖 [Flexbox 与 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-CN/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/zh-CN/3-terrarium/3-intro-to-DOM-and-closures/README.md
new file mode 100644
index 000000000..1fa81efc9
--- /dev/null
+++ b/translations/zh-CN/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
+```
+
+> 草图笔记作者：[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["Div: 页面容器"]
+ H --> I["Div: 左侧容器"]
+ H --> J["Div: 右侧容器"]
+ H --> K["Div: 生态瓶"]
+ I --> L["植物元素 1-7"]
+ J --> M["植物元素 8-14"]
+
+ L --> N["img#plant1"]
+ L --> O["img#plant2"]
+ M --> P["img#plant8"]
+ M --> Q["img#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` 文件的 `` 部分添加以下脚本标签：
+
+```html
+
+```
+
+**为什么 `defer` 属性很重要：**
+- **确保** JavaScript 脚本等到 HTML 完全加载后再执行
+- **防止** JavaScript 访问尚未准备好的元素时出错
+- **保证** 所有植物元素可交互
+- **相比将脚本放在页面底部，提供更好的性能**
+
+> ⚠️ **重要提示**：`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
+- **获取** 每个 HTML 元素的 JavaScript 引用
+- **将** 每个元素传入 `dragElement` 函数（我们接着会创建）
+- **为** 所有植物准备拖放交互功能
+- **将** HTML 结构与 JavaScript 功能连接起来
+
+> 🎯 **为什么用 ID 而不用类？** ID 为特定元素提供唯一标识，而 CSS 类用于样式分组。当 JavaScript 需要操作单个元素时，ID 提供精准且高效的定位。
+
+> 💡 **实用小贴士**：注意我们为每株植物单独调用了 `dragElement()`。这种方式确保每个植物拥有独立的拖动行为，是流畅交互的关键。
+
+### 🔄 **教学小结**
+**DOM 连接理解检查**：在继续拖动功能前，确认你能：
+- ✅ 解释 `document.getElementById()` 如何定位 HTML 元素
+- ✅ 理解为何每个植物需要唯一 ID
+- ✅ 描述 `defer` 属性在 script 标签中的作用
+- ✅ 识别 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` 函数** 提供清晰接口
+
+### 为什么使用指针事件？
+
+你可能好奇为何用 `onpointerdown`而不是更熟悉的 `onclick`。原因如下：
+
+| 事件类型 | 适用场景 | 缺点 |
+|------------|----------|-------------|
+| `onclick` | 简单按钮点击 | 只能处理点击和释放，无法拖动 |
+| `onpointerdown` | 鼠标和触摸均适用 | 新技术，但现已广泛支持 |
+| `onmousedown` | 仅限桌面鼠标 | 移动端用户体验不足 |
+
+**指针事件为何对我们构建的功能完美契合：**
+- **适用于** 鼠标、手指甚至触控笔
+- **在** 笔记本、平板和手机上体验一致
+- **负责** 拖动实际过程（不仅是点击）
+- **打造** 用户期望的流畅现代体验
+
+> 💡 **面向未来**：指针事件是处理用户交互的现代方法。无需为鼠标和触控分别写代码，二者兼得。很棒，对吧？
+
+### 🔄 **教学小结**
+**事件处理理解测试**：停顿确认你已理解事件：
+- ✅ 为什么用指针事件而非鼠标事件？
+- ✅ 闭包变量如何在函数调用间持续？
+- ✅ `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. **尝试不同布局**，探索界面可能性
+
+🥇 **成就**：你创建了一个完整的交互式网页应用，运用了专业开发者每日使用的核心概念。这个拖放功能与文件上传、看板（kanban）和其他交互界面背后的原理相同。
+
+### 🔄 **教学检查点**
+**完整系统理解**：验证你对整个拖拽系统的掌握：
+- ✅ 闭包如何为每棵植物维护独立状态？
+- ✅ 为什么坐标计算对于流畅移动是必需的？
+- ✅ 忘记清理事件监听器会有什么后果？
+- ✅ 这种模式如何扩展到更复杂的交互？
+
+**代码质量反思**：检查你的完整方案：
+- **模块化设计**：每棵植物拥有自己的闭包实例
+- **事件效率**：正确设置和清理监听器
+- **跨设备支持**：兼容桌面和移动端
+- **性能意识**：无内存泄漏或冗余计算
+
+
+
+---
+
+## GitHub Copilot 代理挑战 🚀
+
+使用代理模式完成以下挑战：
+
+**描述：** 通过添加重置功能，增强花园项目，使所有植物能够平滑动画回到它们的初始位置。
+
+**提示：** 创建一个重置按钮，点击时使用 CSS 过渡动画将所有植物平滑移回侧边栏的原始位置。函数应在页面加载时存储初始位置，点击重置按钮时以 1 秒动画过渡回这些位置。
+
+在此了解更多关于 [代理模式](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) | 文件上传，正式拖放区 | 理解浏览器原生功能 |
+| [触摸事件](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` 修改网页文本
+- [ ] 给网页上的任意按钮或链接添加点击事件监听器
+- [ ] 使用 Elements 面板查看 DOM 树结构
+
+### 🎯 **本小时你能完成的任务**
+- [ ] 完成课后测验并复习 DOM 操作概念
+- [ ] 创建响应用户点击的交互网页
+- [ ] 练习不同事件类型的事件处理（点击、悬停、按键）
+- [ ] 使用 DOM 操作构建简单待办清单或计数器
+- [ ] 探索 HTML 元素与 JavaScript 对象的关系
+
+### 📅 **你的为期一周的 JavaScript 学习计划**
+- [ ] 完成交互式花园项目，包含拖放功能
+- [ ] 掌握事件委托以提升事件处理效率
+- [ ] 了解事件循环与异步 JavaScript
+- [ ] 通过构建具私有状态的模块练习闭包
+- [ ] 学习现代 DOM API，如 Intersection Observer
+- [ ] 尝试无框架构建交互组件
+
+### 🌟 **你的为期一个月的 JavaScript 精通计划**
+- [ ] 使用原生 JavaScript 创建复杂单页应用
+- [ ] 学习现代框架（React、Vue 或 Angular），并对比原生日 DOM
+- [ ] 参与开源 JavaScript 项目贡献代码
+- [ ] 掌握高级概念，如 Web Components 和自定义元素
+- [ ] 构建高性能网页应用，优化 DOM 模式
+- [ ] 教授他人 DOM 操作与 JavaScript 基础知识
+
+## 🎯 你的 JavaScript DOM 精通时间线
+
+```mermaid
+timeline
+ title DOM 与 JavaScript 学习进度
+
+ section 基础（15分钟）
+ DOM 理解：元素选择方法
+ ：树结构导航
+ ：属性访问模式
+
+ section 事件处理（20分钟）
+ 用户交互：指针事件基础
+ ：事件监听设置
+ ：跨设备兼容性
+ ：事件阻止技术
+
+ section 闭包（25分钟）
+ 作用域管理：私有变量创建
+ ：函数持久化
+ ：状态管理模式
+ ：内存效率
+
+ section 拖拽系统（30分钟）
+ 交互特性：坐标跟踪
+ ：位置计算
+ ：运动数学
+ ：清理程序
+
+ section 高级模式（45分钟）
+ 专业技能：事件委托
+ ：性能优化
+ ：错误处理
+ ：无障碍考虑
+
+ section 框架理解（一周）
+ 现代开发：虚拟 DOM 概念
+ ：状态管理库
+ ：组件架构
+ ：构建工具集成
+
+ section 专家级别（一月）
+ 高级 DOM API：Intersection Observer
+ ：Mutation Observer
+ ：自定义元素
+ ：Web 组件
+```
+### 🛠️ 你的 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-CN/3-terrarium/3-intro-to-DOM-and-closures/assignment.md b/translations/zh-CN/3-terrarium/3-intro-to-DOM-and-closures/assignment.md
new file mode 100644
index 000000000..d3f3b0025
--- /dev/null
+++ b/translations/zh-CN/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` - 自定义元素与影子 DOM
+- `Canvas API` - 编程图形绘制
+- `Web Workers` - 后台处理
+- `Service Workers` - 离线功能
+
+### 第二步：研究与文档
+
+撰写一份全面分析（300-500字），内容包括：
+
+#### 技术概述
+- **定义**你的接口用简单易懂的语言说明其功能
+- **解释**关键方法、属性或事件
+- **描述**该接口设计解决的主要问题
+
+#### 现实世界应用
+- **找到**一个使用了你选择接口的网站（通过查看代码或研究案例）
+- **记录**具体的实现方式，如可能，包含代码片段
+- **分析**开发者选择这种方式的原因
+- **解释**它如何改善用户体验
+
+#### 实际应用
+- **比较**你的接口和我们在生态瓶项目中使用的技术
+- **建议**你的接口如何增强或扩展生态瓶的功能
+- **识别**其他适合使用该接口的项目
+
+### 第三步：代码示例
+
+包含一个简单且可运行的代码示例，用以演示你的接口。示例应：
+- **功能可用** - 代码应能实际运行
+- **加注释** - 解释每个部分的作用
+- **相关** - 与实际应用场景相关联
+- **友好初学者** - 易于学习前端开发者理解
+
+## 提交格式
+
+请用清晰的标题结构组织你的提交：
+
+```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 上的代码示例
+- **使用**浏览器开发者工具检查流行网站
+- **观看**视频教程获取直观讲解
+
+**写作指南：**
+- **使用**自己的语言，而非照抄文档
+- **包含**具体例子和代码片段
+- **像教朋友一样**解释技术概念
+- **连接**你的接口与更广泛的网页开发概念
+
+**代码示例思路：**
+- **设计**展示接口主要功能的简单演示
+- **借鉴**生态瓶项目的相关概念
+- **注重**功能实现而非视觉设计
+- **测试**确保代码正确运行
+
+## 截止提交日期
+
+[插入截止日期]
+
+## 有疑问？
+
+如果你对作业的任何方面有疑问，请随时提问！此调查将深化你对 DOM 如何支持我们日常使用的交互式网页体验的理解。
+
+---
+
+
+**免责声明**：
+本文档使用 AI 翻译服务 [Co-op Translator](https://github.com/Azure/co-op-translator) 进行翻译。虽然我们努力确保准确性，但请注意，自动翻译可能存在错误或不准确之处。原始文档的母语版本应视为权威来源。对于重要信息，建议使用专业人工翻译。对于因使用此翻译而产生的任何误解或误释，我们概不负责。
+
\ No newline at end of file
diff --git a/translations/zh-CN/3-terrarium/README.md b/translations/zh-CN/3-terrarium/README.md
new file mode 100644
index 000000000..22590b991
--- /dev/null
+++ b/translations/zh-CN/3-terrarium/README.md
@@ -0,0 +1,21 @@
+## 部署您的 Terrarium
+
+您可以使用 **Azure Static Web Apps** 将您的 Terrarium 部署或发布到网络上。
+
+1. Fork 此仓库
+
+2. 按下此按钮 👇
+
+[](https://portal.azure.com/#create/Microsoft.StaticApp)
+
+3. 按照设置向导创建您的应用。
+ - 将 **应用根目录** 设置为 `/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-CN/3-terrarium/solution/README.md b/translations/zh-CN/3-terrarium/solution/README.md
new file mode 100644
index 000000000..853cb2f1a
--- /dev/null
+++ b/translations/zh-CN/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 Static Web Apps将你的生态瓶部署或发布到网络上。
+
+1. Fork此仓库
+
+2. 点击这个按钮
+
+[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
+
+3. 按照向导创建你的应用程序。确保将应用程序根目录设置为`/solution`或你的代码库的根目录。这个应用程序中没有API，所以不用担心添加API。一个.github文件夹会在你Fork的仓库中创建，这将帮助Azure Static Web Apps的构建服务构建并将你的应用程序发布到一个新的URL。
+
+**免责声明**：
+本文档使用AI翻译服务 [Co-op Translator](https://github.com/Azure/co-op-translator) 进行翻译。尽管我们努力确保翻译的准确性，但请注意，自动翻译可能包含错误或不准确之处。应以原文档的原始语言版本为权威来源。对于关键信息，建议使用专业人工翻译。我们对因使用本翻译而引起的任何误解或误读不承担责任。
\ No newline at end of file
diff --git a/translations/zh-CN/4-typing-game/README.md b/translations/zh-CN/4-typing-game/README.md
new file mode 100644
index 000000000..5a29931fb
--- /dev/null
+++ b/translations/zh-CN/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 技能用起来了吗？我们将构建一个打字游戏，它会用传奇侦探 [夏洛克·福尔摩斯](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 美化游戏界面
+
+### 📅 **你一周内的游戏开发计划**
+- [ ] 完善完整的打字游戏及其所有功能和细节
+- [ ] 添加难度等级，提供不同复杂度的词汇
+- [ ] 实现用户统计跟踪（字数速度、准确率随时间变化）
+- [ ] 制作音效和动画提升用户体验
+- [ ] 使游戏支持移动设备响应和触摸操作
+- [ ] 在线分享你的游戏并收集用户反馈
+
+### 🌟 **你一个月的互动开发计划**
+- [ ] 构建多个游戏，探索不同的交互模式
+- [ ] 学习游戏循环、状态管理和性能优化
+- [ ] 参与开源游戏开发项目
+- [ ] 精通高级计时概念和平滑动画
+- [ ] 创建展示各类交互应用的作品集
+- [ ] 指导对游戏开发和用户交互感兴趣的其他人
+
+## 🎯 你的打字游戏精通时间线
+
+```mermaid
+timeline
+ title 游戏开发学习进度
+
+ section 设置 (10分钟)
+ 项目结构: HTML基础
+ : CSS样式设置
+ : JavaScript文件创建
+
+ section 用户界面 (20分钟)
+ 交互元素: 输入字段
+ : 按钮控制
+ : 显示区域
+ : 响应式布局
+
+ section 事件处理 (25分钟)
+ 用户交互: 键盘事件
+ : 鼠标事件
+ : 实时反馈
+ : 状态管理
+
+ section 游戏逻辑 (30分钟)
+ 核心功能: 引用生成
+ : 字符比较
+ : 准确率计算
+ : 计时器实现
+
+ section 性能跟踪 (35分钟)
+ 指标与分析: WPM计算
+ : 错误跟踪
+ : 进度可视化
+ : 结果显示
+
+ section 打磨与增强 (45分钟)
+ 用户体验: 视觉反馈
+ : 音效
+ : 动画
+ : 无障碍功能
+
+ section 高级功能 (1周)
+ 扩展功能: 难度等级
+ : 排行榜
+ : 自定义引用
+ : 多人选项
+
+ section 专业技能 (1个月)
+ 游戏开发: 性能优化
+ : 代码架构
+ : 测试策略
+ : 部署模式
+```
+### 🛠️ 你的游戏开发工具总结
+
+完成此项目后，你将掌握：
+- **事件驱动编程**：响应用户输入的互动界面
+- **实时反馈**：即时的视觉和性能更新
+- **性能测量**：精准的计时和计分系统
+- **游戏状态管理**：控制应用流程和用户体验
+- **交互设计**：打造引人入胜、令人上瘾的用户体验
+- **现代网页 API**：利用浏览器能力实现丰富互动
+- **无障碍模式**：为所有用户设计包容性体验
+
+**现实应用**：这些技能广泛应用于：
+- **网络应用**：任何互动界面或仪表盘
+- **教育软件**：学习平台和技能评估工具
+- **生产力工具**：文本编辑器、集成开发环境和协作软件
+- **游戏行业**：浏览器游戏和互动娱乐
+- **移动开发**：基于触控的界面和手势处理
+
+**下一步**：你已准备好探索高级游戏框架、实时多人系统或复杂交互应用！
+
+## 致谢
+
+由 [Christopher Harrison](http://www.twitter.com/geektrainer) 用 ♥️ 撰写
+
+---
+
+
+**免责声明**：
+本文件使用 AI 翻译服务 [Co-op Translator](https://github.com/Azure/co-op-translator) 进行翻译。虽然我们努力保证译文的准确性，但请注意，自动翻译可能存在错误或不准确之处。原始文档的原文版本应被视为权威来源。对于重要信息，建议采用专业人工翻译。对于因使用本翻译而产生的任何误解或曲解，我们不承担任何责任。
+
\ No newline at end of file
diff --git a/translations/zh-CN/4-typing-game/solution/README.md b/translations/zh-CN/4-typing-game/solution/README.md
new file mode 100644
index 000000000..f5ebc6ff3
--- /dev/null
+++ b/translations/zh-CN/4-typing-game/solution/README.md
@@ -0,0 +1,4 @@
+这是一个占位符，故意留空
+
+**免责声明**：
+本文档使用AI翻译服务[Co-op Translator](https://github.com/Azure/co-op-translator)进行翻译。尽管我们努力确保翻译的准确性，但请注意，自动翻译可能包含错误或不准确之处。原始语言的文档应被视为权威来源。对于重要信息，建议使用专业人工翻译。我们对因使用此翻译而产生的任何误解或误读不承担责任。
\ No newline at end of file
diff --git a/translations/zh-CN/4-typing-game/typing-game/README.md b/translations/zh-CN/4-typing-game/typing-game/README.md
new file mode 100644
index 000000000..dbb6ab7c6
--- /dev/null
+++ b/translations/zh-CN/4-typing-game/typing-game/README.md
@@ -0,0 +1,603 @@
+# 使用事件创建游戏
+
+你有没有想过网站是如何知道你点击了按钮或在文本框中输入的？这就是事件驱动编程的魔力！还有什么比通过构建一个能够响应你每一次按键的打字速度游戏来学习这项关键技能更好的方法呢。
+
+你将亲眼见证网页浏览器如何“与”你的JavaScript代码“对话”。每当你点击、输入或移动鼠标时，浏览器都会向你的代码发送小信息（我们称之为事件），而你来决定如何响应！
+
+完成本教程后，你将创建一个能够跟踪你的打字速度和准确率的真实打字游戏。更重要的是，你将理解支撑每个互动网站的基本概念。让我们开始吧！
+
+## 课前测验
+
+[课前测验](https://ff-quizzes.netlify.app/web/quiz/21)
+
+## 事件驱动编程
+
+想想你最喜欢的应用或网站——是什么让它感觉生动且响应灵敏？这全在于它如何对你的操作做出反应！每次点击、敲击、滑动或按键都会产生我们所说的“事件”，真正的网页开发魔力就在这里。
+
+让网页编程如此有趣的是：我们永远不知道别人什么时候会点击按钮或开始在文本框中输入。他们可能马上点击，等待五分钟，甚至可能从不点击！这种不可预测性意味着我们需要用不同的思路写代码。
+
+我们不再写那种像食谱一样自上而下执行的代码，而是写一段坐在那里耐心等待事情发生的代码。这有点像19世纪的电报操作员，坐在设备旁，准备在信息通过电线传来时立刻响应。
+
+那么什么是“事件”呢？简单来说，它就是发生的事情！你点击按钮——那是一个事件。你输入一个字母——那是一个事件。你移动鼠标——又是一个事件。
+
+事件驱动编程让我们可以设置代码去“监听”和响应这些事件。我们创建称为**事件监听器**的特殊函数，它们耐心等待特定事件发生，然后在事件发生时立即行动。
+
+把事件监听器想象成代码的门铃。你设置门铃（`addEventListener()`），告诉它要监听什么声音（比如“点击”或“按键”），然后指定有人按响时要执行什么（你自定义的函数）。
+
+**事件监听器的工作原理：**
+- **监听**用户的特定操作，如点击、按键或鼠标移动
+- **执行**在指定事件发生时你的自定义代码
+- **即时响应**用户交互，创造无缝体验
+- **支持**对同一元素使用多个监听器处理不同事件
+
+> **注意：**有很多创建事件监听器的方法。你可以使用匿名函数，也可以创建命名函数。可以使用各种快捷方式，比如设置`click`属性，或使用`addEventListener()`。本练习中我们重点使用`addEventListener()`和匿名函数，因为这是网络开发者最常用的方法。它也是最灵活的，适用于所有事件，事件名称可作为参数传入。
+
+### 常见事件
+
+虽然浏览器提供了数十种不同事件可供监听，但大多数互动应用只依赖其中几种核心事件。理解这些核心事件能为你构建复杂用户交互奠定基础。
+
+有[数十种事件](https://developer.mozilla.org/docs/Web/Events)可供你在创建应用时监听。基本上，用户在页面上所做的任何操作都会触发事件，赋予你强大能力确保他们得到理想的体验。幸运的是，通常只需少数几个事件。下面是几个常用事件（包括我们在游戏中会用到的两个）：
+
+| 事件 | 描述 | 常见用例 |
+|-------|-------------|------------------|
+| `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"` |
+| 开始按钮 | 开始游戏 | `