Description

Description

...

Instructions

...

Tests

...

Challenge Seed

...

Solution

...

```

3.1 Description：面向学习者的教学正文

本例 Description 是 HTML 基础的第一课引导，讲解三个核心概念：

• 什么是 HTML element（元素），以 <h1>Hello</h1> 为例；
• 大多数元素由 opening tag（开始标记） 与 closing tag（结束标记） 成对构成；
• 两者的唯一区别是结束标记左尖括号后的正斜杠：<h1> 对 </h1>。

正文还介绍了平台交互机制：每个挑战都配有可随时点击「运行测试」按钮执行的测试，全部通过后系统提示提交并进入下一题。值得注意的是，中文版本中的 code editor、element、opening tag 等术语以 <code> 标签原样保留为英文——这符合课程本地化的惯例：代码相关的标识符不翻译，仅翻译叙述性文字。

3.2 Instructions：明确的通过条件

Instructions 一句话给出任务目标：

要通过此挑战的测试，请将 h1 元素的文本更改为"Hello World"。

3.3 Tests：正则驱动的行为断言

测试块以 YAML 格式声明，每条测试包含展示给用户的 text 与真正执行的 testString：

tests:
  - text: 你的<code>h1</code>元素应该有"Hello World"文本。
    testString: assert.isTrue((/hello(\s)+world/gi).test($('h1').text()));

testString 是一行 Node.js 表达式，可拆解为：

1. $('h1')：jQuery 选择器，获取当前编辑器 DOM 中的 h1 元素；
2. .text()：取其纯文本内容；
3. /hello(\s)+world/gi：正则断言——hello 与 world 之间允许任意多个空白字符（(\s)+），i 标志忽略大小写，g 为全局标志；
4. assert.isTrue(...)：匹配成功则通过。

这种「宽松正则」写法是课程测试的典型风格：它接受 Hello World、HELLO WORLD 等变体，避免学习者因空格或大小写细节而卡在第一课。用户看到的 text 字段则被本地化为中文，与断言逻辑解耦。

3.4 Challenge Seed：JSX 编辑器种子代码

<section id='challengeSeed'>
<div id='jsx-seed'>
```jsx
{ /* (Chinese) Add your code below this line (Chinese) */ }
{ /* (Chinese) Add your code above this line (Chinese) */ }

```

两个细节值得注意：

• <div id='jsx-seed'> 容器：它声明种子代码以 JSX 模式加载。学习者实际提交的仍是 HTML 片段，但会被包裹进一个 JSX 组件上下文，从而让 HTML 编码课程复用 React 编辑器基础设施。对照同目录的 combined.md（同一挑战的 HTML 种子版本，使用 <div id='html-seed'> 且预置了 <h1>Hello</h1>），jsx-seed 版本将初始代码留空、仅保留注释占位，由学习者从零书写；
• 注释的双语包裹格式：(Chinese) Add your code below this line (Chinese)——英文原始注释前后都拼上了语言标签 (Chinese)。这不是手工书写，而是注释翻译流水线的输出形态，见下一节。

3.5 Solution：参考解答

<h1>Hello World</h1>