# 教学中交互网页的应用与实操

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

---

## 全程时间盘

| 段落 | 时长 | 累计 |
|------|------|------|
| 开场 | 5 | 5 |
| 二、交互网页是什么、为什么需要它 | 15 | 20 |
| 三、哪些教学场景值得用 | 15 | 35 |
| 四、四要素提示词与讲师示范 | 8–10 | 45 |
| 五、分阶段递进演示 | 13–15 | 60 |
| 常见坑与应对 | 3 | 63 |
| 结尾 | 5 | 68 |

**贯穿全程的一根线**：操作 → 思考 → 反馈。第二部分立起来，第三部分用它判断场景，第四五部分用它写提示词、评成品。

---

## 开场（5 min）

**核心动作**：不解释，先制造认知冲突，再锚定"我们今天要做什么"。

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

本地文件：`geography-viz-kit-main/01-earth-rotation.html`

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

> 讲者提示：30 秒内让听众看到"活的东西"。认知冲突靠「举手猜测 → 一键翻转」完成，不要提前解释。

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

本地文件：`太阳系网页制作讲座/outputs/solar-system.html`

1. 打开页面，拖动视角，切换「俯视轨道」和「聚焦地球」。
2. 点击地球、木星，让知识卡片随操作出现。
3. 追问：「真正有价值的是 3D 吗？还是学生可以亲手改变视角、比较对象、验证判断？」
4. 收尾：**「AI 负责把想法翻译成网页，教师负责把知识变成值得操作的问题。」**

> 讲者提示：地球自转制造"我错了"的认知冲突，太阳系锚定"这就是今天要做的东西"。不讲技术路线，可信度来自真实教学冲突。

---

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

### 1. 案例导入：先看，再定义（6 min）

嵌入飞象链接，选探究型案例（钟楼高度或平面镜成像）。不解释，先让听众操作——调参数、测量、验证。

操作完毕后提问：「刚才你做了什么？」引出完整探究链：

> **预测 → 操作 → 观察 → 验证**

> 讲者提示：让听众亲身走完这条链，比讲十遍"探究"更有效。

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

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

- 课件是"讲台的延伸"：教师输出，学生观看。
- 交互网页是"学生的实验台"：学生操作，网页回应。
- 给教研人员：评一节用了交互网页的课，别只看"技术炫不炫"，要看"学生动没动脑"。

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

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

用刚才的飞象案例拆一遍：你调参数是操作，你在判断规律是思考，屏幕变化是反馈。

> 这三个词是整场讲座的"钉子"，反复回扣。

### 4. 核心定义（1 min）

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

聚焦可在浏览器直接打开、无需安装的单文件网页。AI 让做它的门槛几乎归零，但教学设计和内容审校仍由教师负责。

### 5. 为什么教学需要它（4 min）

**三个痛点 → 三个价值：**

| 教学痛点 | 交互网页给的价值 |
|---------|----------------|
| 抽象概念难讲（几何、微观、立体） | 可视化 + 参数可调，学生自己"玩"出规律 |
| 练习反馈延迟（作业隔天才批） | 即时判题、即时纠错 |
| 个体差异大（快的等、慢的赶） | 每人按自己节奏操作，快慢自适应 |

给教研人员一句：交互网页是"从展示到活动""从教师中心到学生中心"转型的具体抓手，工具门槛被 AI 彻底拉平了。

---

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

### 1. 面向学生：五场景快速过（2 min）

| 场景 | 解决的问题 | 典型交互 |
|------|-----------|---------|
| 交互演示 | 抽象过程难以理解 | 分步、旋转、缩放 |
| 探究实验 | 实验成本高、变量难控制 | 预测、调参、观察、验证 |
| 情境学习 | 知识脱离真实任务 | 探索、选择、分支决策 |
| 练习诊断 | 反馈慢、错因不可见 | 配对、分类、闯关、纠错 |
| 作业评价 | 只看到答案，看不到过程 | 分层任务、互评、记录 |

> 讲者提示：按认知层级从低到高排——演示（看懂）→ 探究（发现）→ 情境（决策）→ 练习（巩固）→ 评价（输出）。可请听众对号入座：「你的学科最缺哪一环？」

### 2. 重点展开①：情境学习——分支决策（3 min）

打开链接：`https://happyspark-lab.github.io/new-insight`

现场演示一个分支路径，走到一个决策节点，选择后进入不同结果。

提问：「刚才你做的选择，承载了什么思考？」

> 和传统练习的核心差别：分支决策让不同选择通向不同结果，学生为自己的判断负责。

### 3. 重点展开②：练习诊断（3 min）

打开链接：`https://www.feixianglaoshi.com/#/chat?share=1&communityContentId=9ED3E3086F6F5C695EE2DB025DCBEDA3&featureId=20&si=undefined&suid=620954164`

现场答一道题，看即时反馈与解析。

提问：「和纸质练习相比，差别在哪？」

> 关键点：反馈不是隔天批改，是当场出现；错因不是"打个叉"，是可见的提示和解析。

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

教师自己的重复劳动同样可以一键化：

- 智慧排座：按身高、视力、成绩一键排布
- 课堂计时：讨论、抢答倒计时
- 随机点名与分组：降低重复操作成本
- 积分板与活动记录：支持即时评价

> 给听众一句：「先给自己减负，再给学生减负。」

### 5. 反面案例：什么场景不值得用（5 min）

帮听众（尤其教研人员评课时）建立判断力：

1. **伪交互**——点按钮只显示下一句，没有认知任务，本质是 PPT 换了层壳。
2. **炫技压倒认知**——操作成本高于学习收益，学生在学怎么用工具，不在学知识。
3. **纸笔更高效**——启动设备和输入的时间超过任务本身。
4. **一次性重投入**——制作成本高、使用时间短、无法复用。

**判断三问（回扣三要素）：**

> **① 操作是否承载了思考？**
> **② 反馈是否推进了学习？**
> **③ 相比现有方法，它是否真的更值？**
>
> 三问都过，才值得做。

> 讲者提示：「知道什么时候不用」才是教研水平。可邀请听众举一个"见过的翻车案例"。

---

## 四、四要素提示词与讲师示范（8–10 min）

### 1. 四要素框架（2 min）

> **学科内容 + 交互方式 + 界面要求 + 使用对象**

示例：
> 「帮我做一个【面向小学四年级】的【分数认识】网页，学生可以【拖动分割一个圆并输入分数判断对错】，界面要【大按钮、卡通风格、手机能打开】。」

四要素好记、门槛低——今天回去就能用。

### 2. 现场示范：从一句话到一个网页（5 min）

工具：DeepSeek（代码能力强，国内直连）

1. 按四要素现场输入一句描述。
2. 获取完整 HTML，在代码试验台预览。
3. 检查"操作—思考—反馈"是否成立。
4. **对话式迭代**：当场说「按钮太小」「答错给提示」「加上计分」，让听众看到"改"比"写"更重要。

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

### 3. 保存与分发（2 min）

复制全部代码 → 新建记事本 → 粘贴 → 存为 `名字.html`（编码选 UTF-8）→ 双击用浏览器打开 → 微信直接发文件。

---

## 五、分阶段递进演示（13–15 min）

**核心策略**：一个文件走四个阶段，最后用开场案例收尾第五阶段。

### 天气与气候教学平台：阶段 ①②③④（10 min）

本地文件：`风飓(1)/风飓/weather-climate-teaching.html`

打开文件，切 Tab 即是升级，现场依次演示：

| 阶段 | Tab | 演示动作 | 能力 |
|------|-----|---------|------|
| ① 基础网页 | 教学中心 | 展示天气类型、气候对比表 | 静态展示，零门槛入门 |
| ② 交互实现 | 动态题库 | 答题、自动判分、即时反馈 | 操作 + 判断 + 反馈 |
| ③ 外部 API | 天气查询 | 点地图任意位置查实时天气 | 接入 Open-Meteo 免费 API |
| ④ 数据库 | 管理后台 | 查看学生提交记录、题库管理 | localStorage 本地存储 |

收尾一句：**「这一个文件，是我用 AI 生成的。」**

### 地球自转：阶段 ⑤ 引擎库（3–5 min）

本地文件：`geography-viz-kit-main/01-earth-rotation.html`（即开场案例）

> 「开场那个地球自转，用的是 Three.js——这是⑤级的能力。提示词里我只说了"用 Three.js 做 3D 地球"，选库这件事 AI 帮我决定的。」

**五级进阶地图完整版：**

| 级别 | 能力 | 说明 |
|------|------|------|
| ① 能互动 | 操作 + 反馈 | 单文件，浏览器直开 |
| ② 能记忆 | localStorage | 本机保存进度与配置 |
| ③ 能获取数据 | 公开 API | 天气、地理等无需密钥的接口 |
| ④ 能多人协作 | 后端 / 云服务 | 登录、提交、跨设备保存 |
| ⑤ 能安全接入 AI | 服务端密钥 | 云函数保管 API Key，调用模型 |

**安全边界：**
- 不把 API Key 写进 HTML
- 不把学生敏感信息提交给公共 AI
- AI 生成的学科内容必须由教师审校

---

## 常见坑与应对（3 min）

- **代码被截断**：直接说「继续」或「接着上面输出剩余代码」。
- **生成不满意**：不要重开，在原对话里描述「哪里不对、想要什么」，让它改。
- **素材图片**：用 emoji、纯 CSS 图形，或让 AI 生成占位图，真实图片后续替换。
- **保存方法**：复制全部代码 → 新建记事本 → 粘贴 → 存为 `名字.html`（编码选 UTF-8）→ 双击用浏览器打开。

---

## 结尾（5 min）

- **一句话总结**：交互网页 = 把知识变成「操作—思考—反馈」的学习活动；AI 让做它的门槛几乎归零。
- **行动号召**：**本周，做一个交互网页，用在你的下一节课上。** 哪怕只是一张能点的卡片。
- **二维码钩子**：提示词模板库 + 分阶段实操手册（扫码获取）。

> 讲者提示：结尾不要讲新知识，只收束到「行动」。最好的结束是听众打开手机就想试一下。

---

## 讲者备忘

- 全程回扣：**操作 · 思考 · 反馈**，这是听众唯一需要记住的框架。
- 每部分都有「给教研人员」的专业视角，避免讲成纯工具教程。
- 现场演示准备两套备份：断网时用本地 HTML，AI 生成失败时用录屏。
- 所有案例文件提前存到桌面，一键即开，不现场翻找。
- 主工具统一使用 DeepSeek，减少平台切换。

---

## 后续交付物

1. **讲座投屏页**：按本大纲逐页更新现有 HTML。
2. **听众实操手册**：四要素模板 + 保存步骤 + 常见问题速查。
3. **离线保障包**：所有本地案例 HTML + 录屏备份。