夜雨聆风学习资料网

ARTICLE · 1046324

小学英语老师用AI开发单词闯关游戏,0代码经验,2小时搞定!全班学生抢着玩

小学英语老师用AI开发单词闯关游戏,0代码经验,2小时搞定!全班学生抢着玩

你没看错!不懂编程的我,用WorkBuddy做出了家长端+教师端的单词闯关网页,操作步骤全公开


"刘老师,孩子回家就知道玩手机,单词一个都记不住……"

"老师,英语课能不能有趣点?孩子说背单词太枯燥了。"

开学第一个月,我手机里接到了很多家长们的私信。十五教龄头一回让我感到深深的无力感。

直到那天教研活动,我用WorkBuddy做论文结构梳理时,突然看到平台右下角蹦出一行小字:

"AI智能编程助手——用对话生成教学工具"

我心想:我一个连HTML是什么都不懂的小学英语老师,能做出什么工具来?

但好奇心驱使我点进去,输入了这样一句话:

"我是一个小学英语老师,我想搭建一个英语单词闯关的工作台,界面清新卡通,符合孩子的特点,分教师端和家长端……"

按下回车的那一刻,我人生第一次感受到什么叫"AI改变命运"——

2个小时后,一个可以用的英语单词闯关网页,真的跑起来了!

今天我就把这2小时的完整过程,每一步怎么做的,全部拆解给你看。


😱 先给你看看我做出来的成品

这个"英语单词大冒险"闯关工作台,具备以下完整功能:

功能模块
具体能力
🎮 家长端
家长输入孩子姓名→选择任务→完成闯关→获得积分和星星
👩‍🏫 教师端
发布单词任务→设置题型→查看学生成绩→修改密码
📝 三种题型
拼写题、连线题、图文匹配题,自由组合
🎨 界面风格
浅色渐变+漂浮云朵+emoji吉祥物+圆角卡片,孩子超喜欢
📚 内置词库
264个小学常用词,覆盖动物、水果、颜色、文具等12大类

电脑手机都能用——同一Wi-Fi下,手机打开就能玩!


🚀 实操全记录:2小时从0到1开发单词闯关游戏

下面就是我完整的开发过程,每一步都有截图,完全零代码基础也能看懂


第1步:在WorkBuddy里描述你的想法

打开WorkBuddy,新建一个任务。什么都不用管,直接在对话框里写下你的需求:

"我是一个小学英语老师,我想搭建一个英语单词闯关的工作台,这个工作台界面非常的清新卡通,符合孩子的特点,分教师端和家长端。教师在教师端发布单词闯关的任务,包含具体的单词有哪些,需要学生拼写、连线、图文匹配等任务。教师端发布之后,家长端点开网页工作台就可以通过输入学生姓名,完成单词闯关任务来获得积分,学生完成后教师端就可以看到学生的成绩!"

然后上传你的学生名单(Excel文件),AI就明白了你的教学场景和需求。


第2步:AI自动生成闯关网页

不到15分钟,WorkBuddy上的"智能词汇教练"就告诉我:

"你的「英语单词大冒险」闯关工作台已经搭好并跑起来了,现在就能用!"

我点开生成的链接,一个配色清新、带有云朵和emoji吉祥物的网页出现在眼前——

  • ✅ 家长端:点「家长入口」→输入孩子姓名(已自动导入名单里的46名学生)
  • ✅ 教师端:点「教师入口」,密码123450
  • ✅ 核心功能:三种题型全部实现,可自由组合成多个关卡 

第3步:优化单词库——让AI自动生成单词卡片

网页做出来了,但我觉得老师一个个输单词还是很麻烦。于是又提了一个改进需求:

"让教师端输入单词库的时候更简单,只要输入一个单词就可以自动生成单词卡片,包含单词的英文、中文、音标和配图。"

AI马上回应,内置了一个264个小学常用词的词典(wordbank.py),覆盖:

每个词都配了准确音标+形象emoji,直接就能做图文匹配题!

两种加词方式

  1. 批量导入
    :粘贴一串单词,点"自动生成卡片"
  2. 逐个添加
    :输入英文,自动带出中文、音标和图标 

第4步:解决核心需求——家长只能看到自己孩子

这时我突然想到一个重要的场景问题——如果一堆家长打开网页,每个家长只能看到自己孩子名字才行,不能看到别人的成绩。另外教师端也要设密码,防止家长误入。

于是又提了第三个需求:

"家长端每个家长打开只能输入自己学生的名字,教师端需要老师自己设置密码。教师端导入的单词都要生成单词的汉语意思和对应图片。"

AI这次花了8分钟搞定三个需求:

1️⃣ 家长端不再打字:改成"学生名字卡片墙",46个名字排成卡片,家长找到自己孩子点一下就能进,顶部有搜索框快速过滤

2️⃣ 教师端恢复密码:默认123456,教师登录后可以随时修改密码

3️⃣ 密码存本地数据库:改完立即生效,重启也不会丢


第5步:解决手机访问问题——让家长在手机上也能用

测试时发现:网页只能在电脑上打开,手机打不开。

我赶紧问AI:"我想在手机上打开这个网页,但无法打开。"

AI告诉我:这个网页是一个带小服务器的应用,数据存在电脑数据库里。手机和电脑连同一个Wi-Fi,然后在手机浏览器输入这个地址:

http://172.25.83.101:5000

就这一句话的问题,解决了大难题!家长在家用手机就能打开,孩子做完题教师端实时看到成绩。


第6步:导出单文件HTML——随时随地都能用

最后,为了更方便使用,我让AI把整个网页导出为单文件HTML。

AI完成了修复和导出,生成的文件叫 WordAdventure.html(107.7KB),存在电脑本地。

现在,我把这个文件发给家长,他们打开就能用!无需安装任何软件,双击就能玩。


📋 完整开发时间线总结

步骤
操作内容
耗时
使用的AI能力
1️⃣
描述需求,上传学生名单
5分钟
需求理解+场景建模
2️⃣
AI生成闯关网页
15分钟
代码生成+界面设计
3️⃣
优化单词库(内置264词)
9分钟
词典+自动生成卡片
4️⃣
家长端学生姓名卡片+教师密码
8分钟
权限+数据库设计
5️⃣
解决手机访问问题
1分钟
网络诊断+提供方案
6️⃣
导出单文件HTML
1.5分钟
文件打包+修复bug
合计约40分钟

算上前期需求沟通和测试,一共也才2小时

💬 刘老师真实感受:"以前我想做一个教学工具,要不就花几千块请人做,要不就自己学编程学到崩溃。现在,只要我会说中文、会描述我的课堂需求,AI就能帮我实现!"


🎯 为什么每个一线老师都应该试试这个方法?

很多老师看到这里可能会说:我不会编程啊,我不懂技术啊。

我想告诉你——AI时代,这些都不重要了。

你需要的只是:

  1. ✅ 清晰描述你的教学需求(你最擅长的)
  2. ✅ 用WorkBuddy这样的AI工具(免费的)
  3. ✅ 像和同事聊天一样,一步步提修改意见

剩下的,AI全帮你干了。


💬 写在最后:不要等学会了再开始,要在做中学

说实话,两个月前的我,连"API"是什么都不知道。

但那天晚上,当我看到手机浏览器里弹出那个色彩缤纷的单词闯关页面、看到同事家长群里大家纷纷说"孩子玩得停不下来"的时候,我真的很激动。

不是因为AI多强大,而是因为它让一个不懂编程的小学英语老师,也能做出自己想要的教学工具。

我们总说"信息技术与学科融合",以前觉得那是信息技术老师的事。

但现在我明白了——AI把"技术"的门槛降到几乎没有,剩下的事情,就是我们老师的教学设计了。


👇 如果这篇对你有用:

  • 点个「赞」+「在看」
    ,让更多被"背单词难"困扰的英语老师看到
  • 转发到你的英语教研组/教师群
    ,大家一起用AI减负
  • 评论区聊聊
    :你最想让学生玩的一款英语学习游戏是什么?
  • 点关注,留言,发给你我制作的网页游戏

作者:刘老师 |  AI赋能教学博主持续分享AI帮一线教师减负提效的实战经验关注我,让每个老师都能成为"技术型教师" 💪

相关学习资料