前言

最近，小朋友学习让我非常焦虑，尤其是英语，可能是面对每天枯燥的背诵、默写，情绪上非常抵触。

于是，为了调动她的积极性，一开始想给她制作闪卡，找了一些项目，也差不多完成了，打印出来后，感觉还是无聊了一点，要图片没有图片，要发音没有发音，对着几个字母在那边干看着。

其实也是觉得A4纸打印出来的不怎么行，几天过去，纸容易坏，就算彩打，颜色也不丰富，白白增加自己很多工作量，有点事倍功半的感觉。

接着，就打算做一个网站或者App，App的门槛要高点，而且使用维护起来也不方便，最后决定做个简单的网站。

功能

确定做网站后，那么就要决定相关的功能，在思考良久之后，确定了如下几项：

  1. 📱 PWA 支持 ：保存到桌面后，与App一致，避免网页式的有很多按钮；

  2. 🗣️ 双语发音 ：在学习中，可以顺便听，边听边看，有助于听力训练，顺便再加上男女声交替发音；

  3. 🧠 错题本 ：做错的题目会生成错题本，可以回头进行精准教学；

  4. 🏅光荣榜 ：这个网站可以分享给班级（或者年级）其他小朋友使用，对前十名测试正确率最高的小朋友登榜的奖励；

  5. 📅打卡记录 ： 可以查看历史记录以及每次测试的准确率

技术栈

  • 前端：HTML5, CSS3, 原生 JavaScript (无框架，追求极致轻量) + PWA (Service Worker, Manifest)

  • 后端：Python 3, Flask

  • 数据库：SQLite (纯本地轻量级存储)

  • 部署：Docker, Docker Compose

唯一让我纠结的就是题库的格式，最终选择最简单的txt格式，采用 单词 | 音标 | 释义 这样的内容以便读取，txt的读取效率高，维护也相对简单一些，json格式稍显复杂，性能开销反倒不是重点。

成果展示

Github项目地址：GitHub - luuaiyan/EnglishWordsChallenge: 一个简单的英语单词挑战网站，内置PWA，每天随时学习一点点 · GitHub

  1. 登陆界面

  2. 个人界面

    • 数据概览

    • 测验设置

    • 错题本

    • 错题复习

    • 光荣榜

    • 打卡日历

    • 题目

部署

  1. 克隆项目

    git clone https://github.com/luuaiyan/EnglishWordsChallenge.git
cd EnglishWordsChallenge

  2. 一键启动

    确保你的服务器已安装 Docker 和 Docker Compose。在项目根目录下执行：

    docker compose up -d

    服务启动后，打开浏览器访问 http://你的服务器IP:5000 即可开始体验！

系统会自动初始化一个全新的 SQLite 数据库用于存放成绩与错题。

简要说明

由于出发点是可以分享给其他小朋友一起学习，因此加了注册功能，每个小朋友的数据都是独立的，这样即确保了每个小朋友学习不会出现重复现象（比如词库里面有500道题，学习过程中会优先将这500道题学习一遍，才会开始第二轮的循环），又能正常展示后台的打卡记录以及光荣榜的结果。

注册需要提前在项目根目录中的 班级名单.txt 中添加姓名，防止被恶意注册。

关于词库生成的说明(重要）

由于不同阶段，小朋友学习的知识也是不同的，一个单词有很多释义，即使通过本地字典或者网上爬虫相关的信息对学习的帮助意义不大，因此：题库的维护基本需要自行手动！

项目内置了词库打包脚本 generate_words/build_words.py，它可以帮助从 现代英汉词典.json 中抓取音标和翻译，顺便完成自动去重和排版。

使用方法：

  1. generate_words 目录下放一个words_input.txt，内容是单词（每行一个）

  2. 运行 python3 build_words.py，提示输入的文件，即words_input.txt，输出文件名任意，会得到单词 | 音标 | 释义这样内容的txt文件，推荐使用VScode安装Rainbow CSV等插件进行整理

词库读取：

项目默认会读取 generate_words 目录下的文件：

  • 一年级上学期 对应 words_1a.txt

  • 一年级下学期 对应 words_1b.txt

  • 二年级上学期 对应 words_2a.txt

  • 二年级下学期 对应 words_2b.txt

  • 三年级上学期 对应 words_3a.txt

  • 三年级下学期 对应 words_3b.txt

  • 四年级上学期 对应 words_4a.txt

  • 四年级下学期 对应 words_4b.txt

  • 五年级上学期 对应 words_5a.txt

  • 五年级下学期 对应 words_5b.txt

  • 六年级上学期 对应 words_6a.txt

  • 六年级下学期 对应 words_6b.txt

如果目录中没有这些文件，回退检索 words.txt 作为备用题库

简要说明

项目创建的初衷，是给班级的小朋友日常学习相关词汇的积累使用，无法做到任何人都能直接使用，最大的原因是全国每个地区学习的内容都不一致，无法将每个年级每个学期学习的单词一次性做到位。

比如北上广深的教学，可能对他们来说这些内容太简单，但是对其他地区的小朋友而言，教材的不一致，导致学习内容很多都不一样，学习现在接触不到的单词，没有实际意义。

因此，维护这个词库需要根据不同的课本进行更新。

后续计划

后续可能会适配单词默写，根据释义填单词等，但由于现在小朋友还小，手机按键都没搞明白，待定。

愿景

接着准备把这个网站推给朋友家的小孩以及班里的小朋友，班里的小朋友看着光荣榜肯定也会冲劲十足，到时候设置一些激励计划，每月前十的小朋友可以得到不同的奖励（到时候光荣榜也要调整为每月更新）。

最后

这个项目我已经给小朋友玩了两天了，给我的反馈非常好，一点也不排斥，每天就给她做50道题目，做完了她还想接着做，但是由于其他学科还有作业，就没给她多玩。

最后，这个项目虽然耗费了我比较多的脑细胞，而且熬了几个夜才搞出来，但是成就感以及满足感是拉满的，可以说是一个非常稳定的项目。

分享给有同样需求的家长，共勉之。