课堂互动游戏

解决什么问题

很多老师手里有教材图片或课件截图，却缺少把内容变成可玩互动游戏的工具。常见困境是：

• 成品要么走「专业演示」路线，要么只是简单选择题，和小学生注意力不搭
• 关卡数量固定为 3 关，缺少复习巩固环节，学生玩完就忘
• 没有错误追踪机制，教师无法知道学生在哪一步卡住，更谈不上针对性讲评
• 前端样式分散，每次重新写颜色、动画、组件很耗时间

这个技能瞄准的就是这条链路：从一张教材图片出发，产出一套有完整故事线、四个递进关卡、自带扣分与评级机制的 HTML 教学游戏，视觉风格锁定在 Round & Cute（圆润可爱）。

技能如何工作

核心流程分六个阶段：

1. 图片内容分析：识别教材图片中的视觉元素与文字，提取主题词汇和句型
2. 情境主线设计：从 10+ 个现实场景题库（仓库整理、超市购物、厨房烹饪、农场采摘、图书馆借书等）中挑选场景，设计 4 关卡矩阵（词汇认知 → 分类整理 → 任务执行 → 复习考核），并串联成一条完整的绘本式大主线故事
3. 视觉规范注入：Fredoka One + Quicksand 字体、马卡龙色系、超大圆角胶囊按钮、Q 弹果冻动画，所有组件样式在生成时统一套用
4. 关卡详细设计：每关都有明确错误处理——错一次扣分、记录错误次数、给出星级评级
5. HTML 文件生成：输出 4 个独立 HTML，包含 Web Audio API 音效、响应式布局、触屏支持
6. 方案交付：附带教师串词（课前导入、关卡过渡、总结升华），让非技术老师也能直接上课

即时反馈激励机制是另一条暗线：学生每关完成即触发视觉+听觉双重反馈，英语星积分、奖励兑换商城都内嵌在生成的页面里。

适用边界与注意点

• 目标学段：小学低年级日常课堂，公开课/示范课也可。不适合初中以上或抽象概念教学
• 视觉风格锁定：只能是 Round & Cute，无法切换到简约、专业或极简风格
• 触发条件：需要用户提供教材图片、课件截图或主题关键词，否则无法启动场景设计
• 输出形态：纯前端 HTML，无后端依赖。积分与兑换数据存储在浏览器本地，换设备不互通
• 版权注意：生成内容基于用户提供的教材素材，使用时仍需确认素材授权