# 交互 · 探究 · 生成：AI时代教学网页的设计与实践

> 张艳楠 · 讲座大纲 · 时长约 90 分钟 · 听众：一线教师 + 教研人员（跨学段）
> 主线：**看见 → 理解 → 判断 → 上手**

---

## 全程时间盘（90 min）

| 段落 | 时长 | 累计 |
|------|------|------|
| 开场与案例体验 | 8 | 8 |
| 一、交互网页是什么、为什么需要它 | 12 | 20 |
| 二、哪些教学场景值得用 | 15 | 35 |
| 三、六要素提示词与讲师示范 | 10 | 45 |
| 四、教师动手实操 | 30 | 75 |
| 五、进阶地图 | 5 | 80 |
| 六、作品展示、互评与总结 | 10 | 90 |

**贯穿全程的一根线**：操作 → 思考 → 反馈。前半场用它理解和判断，后半场用它设计、生成、互评。

**现场成果标准**：人人完成一个包含“操作—思考—反馈”的单文件交互网页；部分教师继续加入本地记忆；全体理解公开 API、云端协作和安全接入 AI 的进阶方向。

---

## 封面与开场案例体验（8 min）

### 封面：先立主题，不讲技术（1 min）

- 标题：**交互 · 探究 · 生成：AI时代教学网页的设计与实践**
- 讲者：**张艳楠**
- 面向对象：一线教师 + 教研成员。
- 开场定位：「今天不从代码开始，而从课堂问题开始。」

### 第 1 页：教师为什么要亲自设计交互（7 min）

第一页不解释概念，只让听众先经历“预测—操作—冲突—落地”。两个案例都打开本地作品，避免网络不稳定影响开场节奏。对一线教师，重点是“课堂能不能用”；对教研成员，重点是“它是否真正促进学习”。

| 案例 | 本地文件 | 现场动作 | 认知钩子 |
|------|----------|----------|----------|
| 地球自转 · 地方时与时区 | `01-earth-rotation.html` | 30× 倍率自转，先提问，再切换“北极俯视” | 看见“北逆南顺”，纠正常见方向误判 |
| 太阳系探索课堂 | `solar-system.html` | 拖动、缩放、聚焦地球/木星，点击行星卡片 | 抽象尺度、运动和知识卡片变成可操作模型 |

#### 案例 1：地球自转 · 地方时与时区（4 min）

1. 打开「**地球自转 · 地方时与时区**」演示页（`01-earth-rotation.html`）。
2. 确认地球以 **30×** 倍率自转，**晨昏圈**与**时刻标签**清晰可见。
3. **不做任何解释，直接提问**：「地球自西向东转——从北极上空往下看，是顺时针还是逆时针？请举手。」
4. 停顿 **3 秒**，扫视举手分布。
5. 点击右侧「**北极俯视**」按钮，让逆时针旋转扑面而来。
6. 追问：「刚才举手说顺时针的，现在还确定吗？」停顿，让冲突沉淀。
7. 停顿一句：「这是我围绕真实教学难点做的作品，不是程序员写的——是我用 AI 生成的。」
8. 定位落地：**「不会写代码的老师，今天开始能做自己的教学动画。」**

#### 案例 2：太阳系探索课堂（3 min）

1. 打开「**太阳系探索课堂 · 八大行星交互模型**」（`solar-system.html`）。
2. 先拖动画面改变视角，再切换「**俯视轨道**」和「**聚焦地球**」。
3. 点击地球、木星等行星，让知识卡片随操作出现。
4. 追问：「这里真正有价值的是 3D 吗？还是学生可以亲手改变视角、比较对象、验证判断？」
5. 回扣一句：**「AI 负责把想法翻译成网页，教师负责把知识变成值得操作的问题。」**

> 讲者提示：开场不要解释技术路线。先让听众承认“我刚才也被误区抓住了”，再说 AI 让教师能够制作这种动画。可信度来自真实教学冲突，不来自炫技。

---

## 一、交互网页是什么、为什么需要它（12 min）

### 1. 核心对比（2 min）

> **普通课件回答“教师要展示什么”；**
> **交互网页关注“学生要做什么、思考什么，以及网页如何回应”。**

- 课件是“讲台的延伸”：教师输出，学生观看。
- 交互网页是“学生的实验台”：学生操作，网页回应。
- 评价重点不是技术炫不炫，而是学生有没有产生有效思考。

### 2. 核心结构：三要素（3 min）

1. **操作**：学生采取行动，如点击、拖动、选择、输入、排序。
2. **思考**：操作承载明确的判断、解释、比较或验证任务。
3. **反馈**：网页给出结果、提示、变化或新的学习路径。

> 如果没有思考，交互只是装饰；如果没有反馈，操作只是点击。

### 3. 核心定义（2 min）

> **交互网页，就是把知识变成可以操作、判断、验证和反馈的学习活动。**

本讲座聚焦可在浏览器直接打开、无需安装的单文件网页。分享方式以文件下载、网盘或网页链接为准，现场提前验证目标设备能否打开。

### 4. 教学价值（5 min）

- **有目标的主动加工**：只有操作真正承载判断、解释或验证时，才可能促进理解。
- **即时反馈**：学生当场发现问题，降低错误固化和延迟纠正的成本。
- **过程可见**：选择、调参、排序和提交能够显露学生的思考路径。
- **差异化节奏**：学生可以按自己的速度探索、重试和获得提示。

AI 显著降低了实现门槛，但教学设计、内容审校和运行测试仍由教师负责。

---

## 二、哪些教学场景值得用（15 min）

### 1. 面向学生：把知识变成学习活动（7 min）

| 场景 | 解决的问题 | 典型交互 | 代表案例 |
|------|-----------|---------|---------|
| 交互演示 | 抽象过程难以理解 | 分步、旋转、缩放、控制进程 | 球体体积、火箭分离 |
| 探究实验 | 实验成本高、变量难控制 | 预测、调参、观察、验证 | 钟楼高度、平面镜成像 |
| 情境学习 | 知识脱离真实任务 | 探索、选择、分支决策 | 故宫探索、小马过河 |
| 练习诊断 | 反馈慢、错因不可见 | 配对、分类、闯关、纠错 | 元素消消乐、古诗文转盘 |
| 作业评价 | 只看到答案，看不到过程 | 分层任务、互评、记录 | 《鸟的天堂》互评系统 |

### 2. 面向教师：把重复流程变成工具（3 min）

- 智慧排座：输入约束，自动生成并允许人工调整。
- 课堂计时：讨论、抢答、展示环节的倒计时。
- 随机点名与分组：降低重复操作成本。
- 积分板与活动记录：支持课堂组织和即时评价。

涉及学生姓名、成绩、健康、联系方式等数据时，必须遵循学校的数据与隐私要求；不把敏感信息直接提交给公共 AI。

### 3. 什么场景不值得用（5 min）

1. **伪交互**：点击按钮只为显示下一段文字，没有认知任务。
2. **炫技压倒认知**：操作成本高于学习收益。
3. **纸笔更高效**：启动设备和输入的成本超过任务本身。
4. **一次性重投入**：制作成本高、使用时间短、无法复用。

判断三问：

> **① 操作是否承载思考？② 反馈是否推进学习？③ 相比现有方法，它是否更值？**

三问都过，才值得做。

---

## 三、六要素提示词与讲师示范（10 min）

### 1. 唯一提示框架（4 min）

> **教学目标 → 学习任务 → 交互行为 → 反馈规则 → 页面风格 → 技术约束**

```text
请生成一个面向【年级、学科】学生的单文件交互教学网页。

教学目标：
【学生最终应理解或掌握什么】

学习任务：
【学生要完成什么具有思考价值的任务】

交互行为：
【点击、拖动、选择、排序、输入或调节参数】

反馈规则：
【正确、错误、不同选择分别得到什么反馈】

页面风格：
【年龄适配、文字大小、色彩、手机或投屏要求】

技术约束：
所有 HTML、CSS、JavaScript 写在一个文件中；
不依赖安装环境；不使用外部密钥；返回完整 HTML 代码。
```

### 2. 讲师示范（6 min）

使用 DeepSeek 完成一个最小交互网页：

1. 按六要素描述教学需求。
2. 获取完整 HTML，在代码试验台预览。
3. 现场操作，检查“操作—思考—反馈”是否成立。
4. 在原对话中提出修改：“按钮太小”“答错不要直接给答案”“增加一次重试机会”。
5. 下载 HTML，并用浏览器重新打开验证。

> 讲者重点：教师不需要从零写代码，但必须会描述、试用、判断、修改和审校。

---

## 四、教师动手实操（30 min）

### 1. 选择任务卡（3 min）

不统一学科题目，但统一作品规格。教师任选一种：

- **探索型**：点击热点、翻卡片或分层揭示，引导学生发现信息。
- **模拟型**：拖动参数或改变条件，观察规律变化。
- **诊断型**：选择、分类或排序，获得即时反馈和提示。

### 2. 人人完成一级：能互动（17 min）

最低验收标准：

- 浏览器能够正常打开；
- 至少包含一种有效操作；
- 操作对应明确的思考任务；
- 网页能够给出反馈；
- 教师完成至少一次对话式修改。

现场支持顺序：

1. 先检查提示词六要素是否完整。
2. 再检查 AI 是否输出完整 HTML。
3. 在代码试验台预览，避免先处理文件扩展名和编码。
4. 通过后再下载、保存和重新打开。

### 3. 部分教师升级二级：能记忆（10 min）

追加提示词：

```text
保留现有功能，使用 localStorage 保存学习进度、答题结果或教师设置。
刷新页面后自动恢复，并增加“清除记录”按钮。
不要上传数据，不使用外部服务器。请返回完整 HTML。
```

验证要求：

- 完成操作并刷新页面；
- 确认记录仍然存在；
- 点击“清除记录”后恢复初始状态。

---

## 五、进阶地图（5 min）

技术进阶按“教学能力”而不是“视觉炫酷程度”排列：

1. **能互动**：单文件网页完成操作、思考、反馈。
2. **能记忆**：使用 localStorage 保存本机进度与配置。
3. **能获取数据**：调用无需私密密钥的天气、地理等公开 API。
4. **能多人协作**：通过后端或合规云服务实现登录、提交、互评和跨设备保存。
5. **能安全接入 AI**：由服务端或云函数保管密钥并调用模型。

安全边界：

- 不把 API Key 写进 HTML；
- 不把学生敏感信息提交给公共 AI；
- AI 生成的学科内容必须由教师审校；
- ECharts、Three.js、动画库只是可选表现工具，不代表更高的教学层级。

---

## 六、作品展示、互评与总结（10 min）

### 1. 快速展示（5 min）

邀请不同学科的教师各用 60 秒展示：

- 面向什么学生；
- 学生需要完成什么任务；
- 网页如何反馈。

### 2. 三问互评（3 min）

1. 学生进行了什么操作？
2. 操作引发了什么思考？
3. 网页提供了什么反馈？

### 3. 行动收束（2 min）

> **教师负责目标、任务、反馈和审校；AI 负责把教学设计翻译成网页代码。**

行动号召：本周完成一个可在真实课堂试用的最小交互网页，使用后记录一个有效点和一个需要修改的问题。

---

## 讲者与现场保障

- 全程回扣：**操作 · 思考 · 反馈**。
- 主工具统一使用 DeepSeek，减少平台切换和界面差异。
- 讲座网页内置代码试验台：粘贴代码、即时预览、错误提示、下载 HTML、恢复示例。
- 提前验证现场网络、浏览器、文件下载权限和移动端打开方式。
- 开场作品使用本地版本并准备录屏；在线案例使用原始链接，离线仅使用自己的作品或获得授权的文件。
- 准备录屏、完整示例 HTML、六要素提示词和常见故障速查作为兜底。

---

## 后续交付物

1. **讲座网页**：流程导航、案例原始链接、代码试验台、任务卡与互评表。
2. **讲座 PPT**：概念、案例、场景判断、六要素提示词、进阶地图与安全边界。
3. **听众实操手册**：任务卡、六要素模板、保存步骤、故障速查与验收清单。
4. **离线保障包**：自制示例、授权案例、录屏和完整 HTML。