现实场景互动课堂游戏
将以下提示词粘贴到你的 AI 对话框中:
请根据 https://skillhub.cn/install/skillhub.md,安装 @user_e08a6f3a/lesson-context-pro。
技能介绍
解决的问题
课堂游戏化课件常出现几个具体问题:练习多为抽象点击,缺乏真实任务;视觉风格偏成人化,低年级学生不易进入情境;多个关卡之间缺少故事线;缺少错误记录、扣分、评级和即时反馈。Lesson-game 面向小学英语和日常课堂,从教材图片、课件截图或主题素材出发,生成一套可运行的 HTML 互动游戏。
工作方式
- 4 个递进关卡:词汇认知、分类整理、任务执行、复习巩固,覆盖从
Remember到Evaluate的学习层次。 - 现实场景:仓库找货、超市购物、厨房烹饪、餐厅点餐、农场采摘、书包整理等,把目标词汇放进具体任务。
- Round & Cute UI:使用
Fredoka One、Quicksand、马卡龙配色、大圆角、胶囊按钮和 Q 弹动画,强调童趣和触控友好。 - 反馈系统:记录
errorCount、扣分、准确率、评级、英语星积分、奖励兑换,并可选用Web Audio API提供成功或错误音效。 - 输出内容:生成
level1至level4的 HTML 文件,并附带完整方案、教师串词和使用说明。
注意点
它更适合小学低年级、单词和主题教学场景,强调可爱风格与课堂沉浸感;若需要严肃商务风格、复杂业务系统或完整无障碍达标,需要在前端实现上做额外调整。
使用场景
- 根据英语单元图片生成 4 个 HTML 关卡,把单词练习放进仓库、超市等真实任务。
- 公开课前需要一套可爱风格互动课件,输出圆润 UI、动画反馈和最终评级。
- 设计低年级词汇课,将分类、购物、考核等任务串成绘本式大主线。
- 完成课件后检查是否包含错误记录、扣分、评级、奖励兑换和 4 个关卡文件。
适合人员
- 准备小学低学英语常态课、希望把单词训练包装成真实任务的英语教师
- 设计公开课互动环节、需要可爱圆润视觉和完整反馈的课堂设计师
- 负责教研课件模板化、要把教材主题转成 HTML 小游戏的教研组长
- 开发教育类前端 Demo、需要参考儿童向游戏 UI 与错误评级逻辑的工程师