第 7 课 表单、按钮、抽题与即时反馈：交互式课件基础

本课定位

让老师掌握课堂上最常用的互动结构：点击、选择、输入、抽题、即时判断和反馈。

本课技术框架

• DOM 事件
• 表单输入
• 随机抽题
• 即时反馈 UI

学习目标

• 掌握问答型和抽题型课件的最小交互结构
• 能让学生在课堂上获得即时反馈
• 学会设计“低维护、高复用”的互动模块

课前准备

• 准备一个本学科 5 到 10 题的小题库

课堂流程（60 分钟）

时间	环节	讲师动作
0-10 分钟	展示抽题、抢答、输入答案、即时反馈的课件场景	展示抽题、抢答、输入答案、即时反馈的课件场景
10-25 分钟	讲解按钮、表单、随机数和反馈提示的基础逻辑	讲解按钮、表单、随机数和反馈提示的基础逻辑
25-45 分钟	用 Codex 生成一个抽题互动页	用 Codex 生成一个抽题互动页
45-55 分钟	学员替换成自己的学科题库	学员替换成自己的学科题库
55-60 分钟	小组互测	小组互测

核心讲授点

• 好的课堂交互不是复杂，而是规则清楚、反馈及时、能推动教学
• 抽题和反馈类课件最重要的是“老师控制感”和“学生参与感”同时存在
• 题库可以先从小规模开始，不要一上来追求几百题

课堂案例

化学方程配平抽题台

通过随机抽题与对错反馈，把练习页做成真正能调动课堂节奏的互动模块。

Codex 提示词

提示词 1：直接生成第一版课件

请直接帮我生成一版“表单、按钮、抽题与即时反馈：交互式课件基础”相关的可运行课件，不要只给页面策划或设计说明。

请直接把课件做出来。

这次课件的要求如下：
- 学科：初中化学九年级
- 课题：化学方程式配平练习
- 题库示例：H2 + O2 -> H2O；Fe + O2 -> Fe2O3；Al + HCl -> AlCl3 + H2
- 课堂目标：随机抽题、输入系数、即时反馈、显示标准答案
- 教师需求：支持重置、跳题和课堂讲评模式

请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js

提示词 2：补互动和老师控制

请在这个课件里补上课堂互动、即时反馈、老师控制按钮、重置功能和总结页，让老师拿来就能上课。

请直接把课件做出来。

这次课件的要求如下：
- 学科：初中化学九年级
- 课题：化学方程式配平练习
- 题库示例：H2 + O2 -> H2O；Fe + O2 -> Fe2O3；Al + HCl -> AlCl3 + H2
- 课堂目标：随机抽题、输入系数、即时反馈、显示标准答案
- 教师需求：支持重置、跳题和课堂讲评模式

请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js

提示词 3：升级成更完整的课堂版

请把这个课件再补完整一点，增加更清楚的课堂流程、互动环节和适合投屏的样式。

请直接把课件做出来。

这次课件的要求如下：
- 学科：初中化学九年级
- 课题：化学方程式配平练习
- 题库示例：H2 + O2 -> H2O；Fe + O2 -> Fe2O3；Al + HCl -> AlCl3 + H2
- 课堂目标：随机抽题、输入系数、即时反馈、显示标准答案
- 教师需求：支持重置、跳题和课堂讲评模式

请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js

本课交付物

• 一个可替换题库的互动练习组件

创意扩展

• 加入班级积分和闯关机制
• 增加“先思考再揭晓答案”模式

相关素材

• chemistry-equations-drill.txt

建议搭配案例

• 案例 10 化学方程配平挑战与滴定模拟