教学中交互网页的
应用与实操
应用与实操
教学设计 × AI 工具 × 一线实践
看见 → 理解 → 判断 → 上手
时长约 64–68 分钟 | 听众：一线教师 + 教研人员（跨学段）
讲座目录
今天我们要走过的路
开
🎬 开场
二
交互网页是什么、为什么需要它
三
哪些教学场景值得用
四
四要素提示词与讲师示范
五
分阶段递进演示
⚠
⚠️ 常见坑与应对
尾
🏁 结尾
贯穿全程：操作 → 思考 → 反馈
开场 · 案例一 · 3 min
地球自转 · 地方时与时区
地球以 30× 倍率自转，晨昏圈与时刻标签清晰可见
不做解释，直接提问：「地球自西向东转——北极上空往下看，顺时针还是逆时针？请举手。」停顿3秒 → 点北极俯视按钮 → 认知冲突
开场 · 案例二 · 2 min
太阳系探索课堂
拖动视角 · 切换俯视轨道 · 点击星球显示知识卡片
追问：「真正有价值的是 3D 吗？还是学生可以亲手改变视角、比较对象、验证判断？」
收尾：「AI 负责翻译想法，教师负责把知识变成值得操作的问题。」
第二节 · 开始
先看，再定义
不解释，先让听众操作——调参数、测量、验证。
🔭
预测
说出你的判断
→
🖱️
操作
调参数 · 拖动 · 选择
→
👀
观察
看变化 · 记录结果
→
✅
验证
对比预测 · 得出结论
操作完毕后提问：「刚才你做了什么？」— 让听众亲身走完这条链，比讲十遍"探究"更有效。
核心对比
普通课件 vs 交互网页
📊 普通课件
回答「教师要展示什么」
- 教师输出，学生观看
- 讲台的延伸
- 信息单向流动
- 学生是受体
⚡ 交互网页
关注「学生要做什么、思考什么，网页如何回应」
- 学生操作，网页回应
- 学生的实验台
- 信息双向流动
- 学生是主体
给教研人员：评一节用了交互网页的课，别只看「技术炫不炫」，要看「学生动没动脑」。
核心结构
交互网页的三要素
🖱️
操作
学生采取行动
点 · 拖 · 选 · 输入 · 排序
点 · 拖 · 选 · 输入 · 排序
→
🧠
思考
操作背后承载
判断 · 解释 · 比较 · 验证
判断 · 解释 · 比较 · 验证
→
💬
反馈
网页给出结果
提示 · 变化 · 新路径
提示 · 变化 · 新路径
这三个词是整场讲座的"钉子"——反复回扣。
用刚才的飞象案例拆一遍：你调参数是操作，你在判断规律是思考，屏幕变化是反馈。
核心定义 + 三大价值
交互网页，就是把知识变成
可以操作、判断、验证和反馈的学习活动。
可以操作、判断、验证和反馈的学习活动。
| 教学痛点 | 交互网页给的价值 |
|---|---|
| 😩 抽象概念难讲 几何、微观、立体 |
✅ 可视化 + 参数可调 学生自己"玩"出规律 |
| ⏳ 练习反馈延迟 作业隔天才批 |
✅ 即时判题、即时纠错 错因当场可见 |
| 📊 个体差异大 快的等、慢的赶 |
✅ 每人按自己节奏操作 快慢自适应 |
给教研人员：交互网页是「从展示到活动」「从教师中心到学生中心」转型的具体抓手，工具门槛被 AI 彻底拉平了。
第三节
面向学生的五大场景
| 场景 | 解决的问题 | 典型交互 | 认知层级 |
|---|---|---|---|
| 交互演示 | 抽象过程难以理解 | 分步 · 旋转 · 缩放 | 👁️ 看懂 |
| 探究实验 | 实验成本高、变量难控制 | 预测 · 调参 · 观察 · 验证 | 🔍 发现 |
| 情境学习 | 知识脱离真实任务 | 探索 · 选择 · 分支决策 | 🧩 决策 |
| 练习诊断 | 反馈慢、错因不可见 | 配对 · 分类 · 闯关 · 纠错 | 💪 巩固 |
| 作业评价 | 只看答案，看不到过程 | 分层任务 · 互评 · 记录 | 📤 输出 |
📌 可请听众对号入座：「你的学科最缺哪一环？」
重点展开①
情境学习 · 分支决策
🌿 什么是分支决策？
不同选择通向不同结果，学生为自己的判断负责。
🆚 和传统练习的核心差别
传统练习：对 / 错
分支决策：你的选择 → 后果显现 → 重新判断
分支决策：你的选择 → 后果显现 → 重新判断
提问：「刚才你做的选择，承载了什么思考？」
现场打开案例演示
🌐 HappySpark
重点展开②
练习诊断 · 即时反馈
📋 纸质练习 vs 即时诊断
| 📄 纸质 | 隔天批改 · 错因是个叉 |
| ⚡ 交互 | 当场出现 · 错因可见提示 |
提问：「和纸质练习相比，差别在哪？」
现场答一道题，看即时反馈与解析
🚀 飞象·练习诊断
面向教师
把重复流程变成工具
教师自己的重复劳动同样可以一键化：
💺
智慧排座
按身高、视力、成绩
条件组合一键排布
导出座位图直接投屏
条件组合一键排布
导出座位图直接投屏
⏱️
课堂计时
讨论倒计时 · 抢答计时
自定义时长与提示音
全屏大字展示
自定义时长与提示音
全屏大字展示
🎲
随机点名分组
随机抽人 · 随机分组
避免教师主观偏好
学生参与感更强
避免教师主观偏好
学生参与感更强
🏆
积分板 & 记录
实时加分 · 小组竞争
记录课堂参与情况
支持即时评价
记录课堂参与情况
支持即时评价
「先给自己减负，再给学生减负。」
四个工具提示词今天回去就能做，每个只需描述一句话。
什么时候不值得用
四种反面案例
1
伪交互——点按钮只显示下一句，没有认知任务，本质是 PPT 换了层壳
2
炫技压倒认知——操作成本高于学习收益，学生在学怎么用工具，不在学知识
3
纸笔更高效——启动设备和输入的时间超过任务本身
4
一次性重投入——制作成本高、使用时间短、无法复用
🔑 判断三问（回扣三要素）
①
操作是否承载了思考？
②
反馈是否推进了学习？
③
相比现有方法，是否真的更值？
三问都过，才值得做。
「知道什么时候不用」才是教研水平。可邀请听众举一个"见过的翻车案例"。
第四节
四要素提示词框架
📚
① 学科内容
面向什么年级 · 什么知识点
示例：「面向小学四年级的分数认识」
🖱️
② 交互方式
学生如何操作
示例：「拖动分割圆，输入分数判断对错」
🎨
③ 界面要求
视觉风格 · 设备适配
示例：「大按钮、卡通风格、手机能打开」
👥
④ 使用对象
学生使用还是教师演示
示例：「课堂个人探究，学生独立操作」
四要素好记、门槛低——今天回去就能用。
现场示范
从一句话到一个网页
工具：DeepSeek（代码能力强，国内直连）
deepseek.com → 对话框直接输入
现场示范步骤
1按四要素输入一句描述
2获取完整 HTML，在代码试验台预览
3检查"操作—思考—反馈"是否成立
4对话式迭代：当场说「按钮太小」「答错给提示」「加上计分」
示例提示词
帮我做一个【面向小学四年级】的
【分数认识】网页，
学生可以【拖动分割一个圆并输入分数判断对错】，
界面要【大按钮、卡通风格、手机能打开】。
【分数认识】网页，
学生可以【拖动分割一个圆并输入分数判断对错】，
界面要【大按钮、卡通风格、手机能打开】。
讲者重点：教师不需要从零写代码，但必须会描述、试用、判断和修改。「改」比「写」更重要。
保存与分发
做好了，怎么保存和发给学生？
📋
复制全部代码
Ctrl+A → Ctrl+C
→
📝
新建记事本
右键 → 新建 → 文本文档
→
💾
存为 .html
编码选 UTF-8
→
🌐
双击浏览器打开
Chrome / Edge 均可
→
📱
微信发文件
学生手机直接打开
💡 整个讲座文件夹要一起发——HTML 单独发无法显示本地案例。 分发给学生的作品只有一个 HTML 文件，直接发即可。
第五节 · 递进演示
天气与气候教学平台
一个文件，切 Tab 即是升级
| 阶段 | Tab | 能力 |
|---|---|---|
| ① 基础 | 教学中心 | 静态展示，零门槛入门 |
| ② 交互 | 动态题库 | 操作 + 判断 + 反馈 |
| ③ API | 天气查询 | 接入 Open-Meteo 实时数据 |
| ④ 数据库 | 管理后台 | localStorage 本地存储 |
收尾：「这一个文件，是我用 AI 生成的。」
五级进阶地图
从"能互动"到"能安全接入 AI"
①
能互动
操作 + 反馈 · 单文件，浏览器直开
②
能记忆
localStorage · 本机保存进度与配置
③
能获取数据
公开 API · 天气、地理等无需密钥的接口
④
能多人协作
后端 / 云服务 · 登录、提交、跨设备保存
⑤
能安全接入 AI
服务端密钥 · 云函数保管 API Key，调用模型
🔒
安全边界
不把 API Key 写进 HTML · 不把学生敏感信息提交给公共 AI · AI 生成的学科内容必须由教师审校
开场那个地球自转用的是 Three.js——这是⑤级的能力。提示词里我只说了"用 Three.js 做 3D 地球"，选库这件事 AI 帮我决定的。
常见坑与应对
遇到问题不要慌
✂️
代码被截断
AI 输出到一半停住了？
直接在对话框发：「继续」或「接着上面输出剩余代码」
不要重新开对话，保留上下文才能续写完整。
直接在对话框发：「继续」或「接着上面输出剩余代码」
不要重新开对话，保留上下文才能续写完整。
也可提前加一句：「请一次性输出完整代码」
🔄
生成不满意
不要删掉重来！在原对话里描述：
「按钮太小」「答错时加一句提示」「背景改成浅蓝色」
AI 会在原基础上修改，比重写快得多。
「按钮太小」「答错时加一句提示」「背景改成浅蓝色」
AI 会在原基础上修改，比重写快得多。
「改」比「写」更重要——这是今天最核心的技能
🖼️
需要图片素材
不要插入本地图片——学生打开会显示空白。
替代方案：用 emoji、纯 CSS 图形、SVG 图标
或让 AI「用代码画一个示意图」，之后再替换真实图片。
替代方案：用 emoji、纯 CSS 图形、SVG 图标
或让 AI「用代码画一个示意图」，之后再替换真实图片。
发给学生时 HTML 是独立文件，无法引用外部本地路径
💾
怎么保存
① 全选代码（Ctrl+A）→ 复制（Ctrl+C）
② 新建记事本 → 粘贴 → 另存为
③ 文件名改为 xxx.html，编码选 UTF-8
④ 双击用 Chrome / Edge 打开，微信直接发文件
② 新建记事本 → 粘贴 → 另存为
③ 文件名改为 xxx.html，编码选 UTF-8
④ 双击用 Chrome / Edge 打开，微信直接发文件
总 结
交互网页 = 把知识变成
「操作—思考—反馈」的学习活动
AI 让做它的门槛几乎归零
「操作—思考—反馈」的学习活动
AI 让做它的门槛几乎归零
行动号召
本周，做一个交互网页
用在你的下一节课上
哪怕只是一张能点的卡片
📲 扫码获取
📵
离线时无法显示
请联网后刷新
请联网后刷新
交互网页制作资料包
提取码：8ycv
提取码：8ycv