上午 · AI 互动课堂先体验，再提问 9:00—9:15
AI 点亮课堂
零代码互动网页制作
与课堂应用实战
陈义顺
福建省泉州第一中学
9:00—12:00 · 互动网页工作坊
上午 · AI 互动课堂先体验，再提问 9:00—9:15
今天，带走两样东西
一个可运行的网页，一段可落地的教学活动。
上午 · AI 互动课堂先体验，再提问 9:00—9:15
看清边数，再选一选
说出边数依据 → 点选图形 → 检验 → 换规则再选
上午 · AI 互动课堂先体验，再提问 9:00—9:15
刚才，学生究竟学了什么？
哪一个表现，最能说明学生理解了分类？
先作出判断，再点击选项查看教学分析。
上午 · AI 互动课堂找到值得互动的地方 9:15—9:35
从一处小困难开始
选一个学生真实遇到的学习困难。
01
容易混淆
图形属性、词义关系、对应规则。
02
需要反复尝试
配对、分类、调整与重试。
03
需要看见关系
先后顺序、条件变化、选择结果。
上午 · AI 互动课堂找到值得互动的地方 9:15—9:35
三个问题，判断值不值得做
| 判断 | 备课时写清楚 |
|---|
| 学生做什么 | 比较、分类、排序，还是解释选择？ |
| 反馈帮助什么 | 看见错误、获得提示，还是调整想法？ |
| 教师继续做什么 | 追问依据、对比方案，还是组织迁移？ |
上午 · AI 互动课堂找到值得互动的地方 9:15—9:35
哪一个需求更适合先做？
作为今天的第一个作品，你会选哪一个？
先作出判断，再点击选项查看教学分析。
上午 · AI 互动课堂找到值得互动的地方 9:15—9:35
教师先写下这句话
我希望＿＿的学生，通过＿＿，能够＿＿。
01
示例
一年级学生通过按直边数量选择图形，能够说明判断依据。
02
现在写一写
先写学习任务，再决定页面怎样呈现。
上午 · AI 互动课堂把教学想法说清楚 9:35—10:00
需求五要素
把课堂中的需要，翻译成可以制作的说明。
01
给谁用
年龄、已有经验、设备。
02
学什么
一个具体学习目标。
03
怎样操作
点击、选择、配对、排序。
04
怎样反馈
答对、出错、重试。
05
怎样呈现
大字、清晰、容易操作。
上午 · AI 互动课堂把教学想法说清楚 9:35—10:00
把“好玩一点”说具体
| 原来的说法 | 可以这样改 |
|---|
| 做得适合孩子 | 低年级使用；图形为主；指令不超过两行。 |
| 增加互动 | 按规则点选图形，再点击检验。 |
| 错了有提示 | 先提示观察属性，允许重新选择。 |
| 界面好看一点 | 字号清晰；按钮明显；重点区域留白。 |
上午 · AI 互动课堂把教学想法说清楚 9:35—10:00
现场组装一份制作需求
填写五要素 → 检查需求 → 复制到所用 AI 工具
上午 · AI 互动课堂把教学想法说清楚 9:35—10:00
把反馈写成下一步提示
出错 → 获得线索 → 再试一次 → 解释原因
上午 · AI 互动课堂把教学想法说清楚 9:35—10:00
先提示，还是直接公布？
按“三条直边”选图形时选错了，哪句反馈更有助于思考？
先作出判断，再点击选项查看教学分析。
上午 · AI 互动课堂一起做出第一版 10:00—10:25
从想法到网页，走完一次
图形分类示范：一个目标，一种操作，明确反馈。
01
说明
提交五要素需求。
02
生成
获得单文件 HTML。
03
预览
检查内容和操作。
04
修改
一次解决一个问题。
05
保存
本地打开并复查。
上午 · AI 互动课堂一起做出第一版 10:00—10:25
第一版，先做小
少量图形＋点选与检验＋提示与重试。
01
先完成
题目正确，操作可用，结果能解释。
02
再增加
切换规则、调整外观、补充题目。
上午 · AI 互动课堂一起做出第一版 10:00—10:25
不只试“答对”的那条路
| 试用方式 | 检查什么 |
|---|
| 全部答对 | 结果是否正确，能否完成一轮。 |
| 故意答错 | 提示是否有用，能否再次选择。 |
| 重复点击 | 选择状态是否正确切换。 |
| 重新开始 | 选择状态与反馈是否复原。 |
| 投屏查看 | 文字、按钮、图形是否清楚。 |
上午 · AI 互动课堂一起做出第一版 10:00—10:25
把“不能用”变成修改说明
动作＋现象＋期望结果，让修改有据可依。
01
我做了什么
点击“重新开始”。
02
实际发生什么
选择已清空，旧反馈还在。
03
希望怎样
本轮所有状态一起恢复。
04
再验证
重复同样操作，检查结果。
上午 · AI 互动课堂一起做出第一版 10:00—10:25
保存下来，离开编辑器再打开
保存可用版本，检查课堂设备上的真实表现。
01
本地文件
下载 HTML，用浏览器重新打开。
02
版本记录
修改前留一份，名称标注版本。
03
课堂预演
投屏试用，准备截图或纸面备用。
上午 · AI 互动课堂休息与补进度 10:25—10:35
休息 10 分钟
10:25—10:35 · 保存进度，活动一下，再开始自己的作品。
上午 · AI 互动课堂教师跟做工作坊 10:35—11:15
三选一，开始你的作品
| 可选任务 | 准备内容 | 学生需要思考 |
|---|
| 图形分类 | 6 个图形与分类规则 | 按什么依据分组 |
| 词语配对 | 6 组明确对应关系 | 为什么这样对应 |
| 故事排序 | 4—5 个情节或图片 | 先后顺序与线索 |
上午 · AI 互动课堂教师跟做工作坊 10:35—11:15
工作坊：先完成基本版
确定内容 5 分钟 → 生成试用 20 分钟 → 修改保存 15 分钟
上午 · AI 互动课堂教师跟做工作坊 10:35—11:15
卡住时，沿这四步继续
先检查内容，再检查生成、操作与保存。
01
补全内容
题目与正确关系都写清。
02
生成文件
要求单文件 HTML。
03
试基本功能
至少完成一次正确和错误操作。
04
保存复开
下载后用浏览器再试。
上午 · AI 互动课堂教师跟做工作坊 10:35—11:15
让孩子看得清、点得准
外观调整，服务学生的理解与操作。
01
看得清
字号清楚，图形突出，提示简短。
02
点得准
按钮明显，间距足够，触控友好。
03
辨得出
用文字或图标补充颜色状态。
上午 · AI 互动课堂教师跟做工作坊 10:35—11:15
哪一条修改指令更有效？
“按钮太小，学生不易操作”应该怎样告诉 AI？
先作出判断，再点击选项查看教学分析。
上午 · AI 互动课堂教师跟做工作坊 10:35—11:15
留下一份可用版本
先保存，再互测；带着一个待改问题进入下一步。
01
基本检查
内容正确，操作可用，提示明确。
02
保存记录
文件名称、课堂用途、待改问题。
上午 · AI 互动课堂互相试用，放回课堂 11:15—11:40
互测：先看，再问，再改
作者先观察使用过程，再决定怎样修改。
01
独立试用
先读页面指令，完成一轮。
02
故意出错
检查提示与重试。
03
提出反馈
说一个优点、一个具体问题。
04
修改一处
说明为什么这样改。
上午 · AI 互动课堂互相试用，放回课堂 11:15—11:40
故事排序：操作后再追问
排好顺序以后，说出一条支持你的线索。
上午 · AI 互动课堂互相试用，放回课堂 11:15—11:40
把网页放进五分钟教学片段
| 环节 | 教师与学生做什么 |
|---|
| 预测 · 1 分钟 | 提出问题，每人先形成自己的判断。 |
| 操作 · 2 分钟 | 选择、配对或排序，观察反馈。 |
| 解释 · 1 分钟 | 说依据，比较不同想法。 |
| 迁移 · 1 分钟 | 换一个对象或条件，再作判断。 |
上午 · AI 互动课堂互相试用，放回课堂 11:15—11:40
页面显示全对，接下来呢？
网页显示“全部正确”，怎样再检查学生的理解？
先作出判断，再点击选项查看教学分析。
上午 · AI 互动课堂互相试用，放回课堂 11:15—11:40
课堂应用说明，只写三句话
何时用？学生想什么？怎样看见学习？
01
使用时机
用于＿＿，帮助学生理解＿＿。
02
学生任务
学生通过＿＿，作出＿＿判断。
03
评价办法
我通过＿＿，检查学生是否理解。
上午 · AI 互动课堂展示与教学迁移 11:40—12:00
一分钟，讲清你的作品
问题 20 秒 → 关键操作 20 秒 → 修改与课堂用途 20 秒
上午 · AI 互动课堂展示与教学迁移 11:40—12:00
评作品，也评教学设计
| 维度 | 看什么 |
|---|
| 内容正确 | 题目、关系和解释经过核对。 |
| 互动有效 | 操作对应明确的学习目标。 |
| 反馈有用 | 学生能获得下一步思考线索。 |
| 课堂能用 | 设备可用，提问与评价明确。 |
上午 · AI 互动课堂展示与教学迁移 11:40—12:00
下次上课，只改变一个环节
选择一节课，试用一个环节，留下一个改进依据。
01
课前
核对内容，实际设备试用。
02
课中
观察学生，记录典型表现。
03
课后
依据记录，修改一处设计。
上午 · AI 互动课堂展示与教学迁移 11:40—12:00
让互动留下思考的痕迹
学生有判断，操作有反馈，教师有追问。
01
上午成果
互动网页＋课堂应用说明＋一条改进记录。
02
下午继续
从教师制作工具，走向学生参与创造。
福建省泉州第一中学 · 陈义顺
上午 · AI 互动课堂附录与案例资源 按需查阅
原始案例 · 参考资料
点击打开原材料。案例与作者归属以原文为准。
上午 · AI 互动课堂附录与案例资源 按需查阅
操作与讲稿 · 参考资料
点击打开原材料。案例与作者归属以原文为准。
上午 · AI 互动课堂附录与案例资源 按需查阅
在线参考 · 参考资料
点击打开原材料。案例与作者归属以原文为准。