缘起：学生背单词的那个死循环
带高三这些年，我发现学生背单词永远卡在同一个地方：不是背不下来，是背完就忘，而且不知道该什么时候回头复习。
问他们怎么复习的，答案基本是"想起来就翻翻""考前突击一遍"。这就麻烦了——单词记忆拼的从来不是单次用功，拼的是复习的时点。该在 20 分钟后回头看的时候你在做数学题，该在 2 天后巩固的时候你在赶作文，等到一周后再见，这个词就跟第一次见一样陌生。
我不是没试过现成的 App。但用下来总有几个别扭的地方：要么词库是四六级、雅思的，跟课标对不上；要么背后有商业化的推课逻辑；要么数据存在别人服务器上，学生换个设备就断了。想来想去，干脆自己做一套——词库我自己圈定，节奏按遗忘曲线自动排，数据全存在本地浏览器里，不联网也能用。
于是就有了这两个东西：
一个《课标 3100 词》速查网页，随手查词、按词性/话题/课标筛词； 一个高考高频词闪卡，管记忆、管复习节奏，桌面版和手机版各一套。
断断续续做了几轮，现在算是能拿出来了。下面把制作过程和功能都摊开讲一遍，也用得上的老师、家长可以直接拿去用。
第一件：一个能随手查的《课标 3100 词》速查页
3100词检测/训练（近期会分享一些轻量化html格式运用）
教研组必看：用AI把3100词表变成“智能检测工具”，备课效率翻倍
做闪卡之前，我先把词库这块挖通了。手上是完整的 3100 词表数据，每条都带音标、词性、中文释义、真题例句、常见搭配，还有"是否课标词""是否超纲""是否黄标高频词"这些标记。
这些数据如果只躺在表格里，用起来太麻烦了。所以第一件事是把它做成一个能随手查的网页。
怎么用
打开就是全量词表，按字母分组。左边是 A–Z 的字母导航，点一下直接跳；也可以切成"乱序自测"，打乱顺序看自己认不认识。
上面一排筛选器是最好用的地方：
按话题筛（人物、科技、环境、文化、健康……） 按词性筛（名词、动词、形容词、副词……） 按类别筛：全部词 / 课标词 / 超纲词 / 黄标高频词
比如"我想把课标内的动词全部拉出来过一遍"，两步就筛完了。
搜索框支持英文或中文输入。搜 abandon 能定位，搜"放弃"也能定位——这个对老师备课特别顺手，有时候我只记得中文意思，想找对应的英文表达。
点开看详情
点任意一张卡片，会弹出详情层：
音标、按词性分开写的释义、真题例句（带翻译）、常见搭配，一屏看完。点右上角叉或者点旁边的灰色遮罩就能关掉。
整页就是一个 HTML 文件，数据全嵌在文件里，不依赖任何外部资源，不联网也能跑。
第二件：管复习节奏的高考高频词闪卡（今天要分享的是这个“百词斩”
两个版本都分享给大家：
速查页解决了"查"，但没解决"记"。记忆这件事必须有个东西盯着你——什么时候该复习哪个词，这是人脑不擅长、程序很擅长的事。
核心逻辑：艾宾浩斯遗忘曲线自动排卡
这是整个闪卡最值钱的部分。
每个词背后都挂着一个"复习阶段"。你把一个词评成"认识"，它就往前跳一级；评成"不认识"，它就退回去、10 分钟后再来找你。整条台阶是这样：
10 分钟 → 30 分钟 → 半天 → 1 天 → 2 天 → 4 天 → 7 天 → 15 天 → 30 天 → 60 天
打开的时候，程序自动挑出今天到期的词排进队列，你不用自己规划哪天复习什么。顶部那个进度条和小统计条会告诉你：今天到期几个、今天还能学几个新词、已经掌握了几个。
一轮刷完，学到的东西是这样的：
不认识的词自动降级，重新排进近期队列，很快再来找你； 认识的词按曲线延长下次复习间隔，逐渐把复习密度降下来。
进度存在浏览器的 localStorage 里，关掉页面、明天再打开，进度一点不丢。
卡片正反面
正面只有单词、音标和一个小 emoji，逼你先自己回忆；点一下翻面。
背面是完整信息：
我特意加了 "词根拆解" 这一块。比如 actor 旁边写着 act（做）+ or（人；物），学生看多了自己就能拆词，遇到生词也能猜个八九不离十。这个比死背拼写有用得多。
两个模式：计划复习 / 随机抽词
📅 计划复习：走遗忘曲线，优先推今天到期的词。日常用这个。 🎲 随机抽词：从整个词库里随机抽，纯练习用，不影响复习计划——你练了多久、对了多少个，都不会写进记忆进度里。
这个区分很重要。学生想"随便练几道"的时候，不至于把复习节奏搞乱。
发音：用的是词典真人录音
一开始我用的是浏览器自带的语音合成，读出来特别生硬，一听就是机器音。后来换成词典的真人发音接口，美式和英式都能选，点击喇叭就是地道读音。断网的时候会自动退回合成音，不至于没声音。
词库：从 3100 词收到 1000 个高频词
这是个重要的调整。
一开始是全量上，结果发现——a、the、go、he 这种词占着卡位，学生刷半天全是已经会的东西，时间全浪费了。
所以我给每个词算了个"值不值得背"的分，规则大概是：
黄标高频词加分（这是重点中的重点） 超纲词加分（说明有难度、有区分度） 一词多词性的加分（信息量大） 长词加分、有词根可拆的加分、有常用搭配的加分 最基础的功能词直接减分，缩写和专名（Mr、Wi-Fi、X-ray 这类）也减分
按分数排序取前 1000 个。结果是我很满意的：208 个黄标词里保住了 204 个，256 个超纲词一个没丢，被剔掉的全是 a / I / OK / Mr / bus / go 这种真正不需要背的。
留下的最短的词像 ad / act / app / bug / dam / web——这些看着短，但都是多义词，值得背。
例句和 emoji：做到 100% 覆盖
我一直觉得，单词脱离句子就是一堆字母。所以给 1000 个词逐个补了真题风格的例句，做到 100% 覆盖，一句英文配一句中文翻译。
emoji 是给学生的一点小甜头——每个词配一个图标，actor 配 🎭，看到图就能记住词。一共用了 80 多种。
卡片字体：专门放大了
这点我改了不只一轮。一开始字号偏小，投影到教室屏幕上后排根本看不清。所以正面的单词放大到接近 88px，背面的释义、例句都提到 21px 以上——宁可一屏少放两行，也不能让学生眯着眼睛看。
第三件：手机版——上滑翻面，左右滑评分
桌面版做完，新的问题来了：学生真正会用的场景是在手机上。
睡前躺床上刷两组、课间排队刷两组、地铁上刷两组——这些碎片时间才是背单词的主战场。桌面版那些按钮在手机上点起来太费劲了。
所以我专门做了个手机版。核心就一句话：用手指就能背单词。
三个手势
| ☝️ 上滑 | ||
| 👉 右滑 | ||
| 👈 左滑 |
正面就一行小字提示"☝️ 上滑看答案"，背面才给评分——这个顺序是刻意的，先自己想，再看答案，最后才评分。
滑动的时候卡片是跟着手指走的，还能看到徽标一点点亮起来：
几个细节上的讲究
做手势交互，最容易翻车的地方是误触。上滑的时候手稍微歪一点，系统就以为你要评分，直接把卡刷走了——这体验非常糟。
我的处理是：纵向优先判定。手一移动，先看是竖向动作还是横向动作，竖向优先识别。上滑的容错区间给得更宽一点，翻面不会误触成评分。
另外几个小地方：
没翻面就横滑，不会给你评分，只弹一行提示"先上滑看答案 ☝️"——避免学生还没看答案就把词刷过去； 没过阈值的滑动自动弹回，手抖一下不会误操作； 滑动时有轻微振动反馈（支持振动的机型）； 不想划也可以点，轻点卡片照样翻面。
适配各种手机
手机屏幕尺寸差别太大了，这块花了不少功夫：
刘海屏和小白条：用安全区适配，内容不会被挡住； 禁止橡皮筋效果：滑到底不会整页跟着弹，操作更稳； 顶栏高度自动测量：不同浏览器地址栏高度不一样，写死高度会错位，所以打开时动态量一次。
小屏手机（比如 320×568 的老机型）和大屏都试过：
横屏看也没问题——顶栏自动压扁，把高度让给卡片：
做这个东西踩的坑
这部分可能是同行最想看的。整个过程里有两个 bug 印象特别深，都是那种"看起来完全正常，但就是不动"的类型。
第一个：手势代码压根没跑起来。
我把手势逻辑拼进 HTML 的时候，位置放错了一格——拼到了 </script> 标签的后面。结果这段代码被浏览器当成页面上的普通文字渲染了出来，完全没执行。
症状是：引导页点不动，上滑也不翻面。但控制台里一条报错都没有。这种"静默失效"最耗时间，因为你根本不知道从哪找起。最后是靠把文件里的脚本抽出来单独做语法分析，才发现代码根本不在 script 标签里。
第二个：桌面版才有的元素，把手机版拖崩了。
桌面版顶部有个小统计条，显示"到期复习 / 今日新词 / 已掌握"。这个条手机版没有——屏幕太小，塞不下。
问题在于，两个版本共用同一套记忆逻辑的代码，而这段代码里有一句会去写那个统计条的数字。手机版没有这个元素，一执行就崩，然后整个初始化流程全挂——页面能打开，但什么都不工作。
修法很简单，加了个"元素不存在就跳过"的安全写法。教训是：多端共用代码的时候，任何对 DOM 元素的直接操作都得考虑"万一这个元素不在"的情况。
还有个实用的经验：测试不要靠手点。 我后来用脚本模拟真实触摸事件（按下 → 移动十几次 → 抬起），把翻面、左右滑评分、误触保护这些场景全跑一遍。前面那个"代码没执行"的 bug，就是被这套自动测试逮住的——手点的话，你只会觉得"怎么没反应"，然后反复怀疑自己划得不对。
现在的样子
两个文件，都是单个 HTML，双击就能用：
数据全部存在浏览器本地，不联网能用，换设备的话把进度导出带走就行（这个功能我还在加）。
最后想说的
做这东西最大的体会是：老师自己下场做工具，优势在于知道痛点长什么样。
市面上的背单词 App 不缺，缺的是"词库对得上课标、节奏符合真实学情、不夹带任何商业目的"的那一个。这些需求市面上买不到，但自己动手能做出来。
下一步我想试的是把它跟阅读教学串起来——学生在阅读里遇到的生词，能不能一键加进闪卡队列，按遗忘曲线自动安排复习。那才是完整的闭环。
如果你也想拿去给学生用，或者对哪一块的做法感兴趣，欢迎在评论区聊聊。
