用间隔重复算法做一个碎片时间背卡工具：从设计到发布的实践记录

一、为什么要做背卡工具

背单词、记知识点最怕两件事：一是背完就忘，二是不知道今天该复习什么。间隔重复（Spaced Repetition）正好解决这两个问题：根据你对每张卡片的掌握程度，自动安排下一次复习时间，记得牢的隔得久，记不住的很快再出现。于是我在华为云 AI 开发者空间里做了一个纯前端的小工具“碎片背卡”，适合在课间、排队这类碎片时间使用。

二、功能设计

• 卡片翻转：点击正面查看答案，也支持空格或回车键翻转；
• 三档评分：忘记 / 模糊 / 记住，按钮上实时显示下次复习时间；
• 卡片组管理：新建、编辑、删除卡片组，手动添加卡片，支持 JSON 导入导出；
• 学习统计：今日待复习数量、连续打卡天数、累计复习次数；
• 数据全部保存在浏览器 localStorage，深浅色自适应，适配手机；
• 纯原生 HTML / CSS / JavaScript，不依赖后端和任何第三方 CDN。

三、简化版调度算法

完整的 FSRS 需要拟合记忆模型参数，对一个小工具来说太重。我采用了接近 Anki SM-2 思路的简化方案，每张卡片只记录三个量：间隔天数 interval、难度系数 ease（初始 2.5）、复习次数 reps。

• 记住：ease 加 0.1（上限 3.5），interval 乘以 ease；
• 模糊：ease 减 0.15（下限 1.3），interval 乘以 1.3；
• 忘记：ease 减 0.2（下限 1.3），interval 重置为 1 天，明天再复习。

新卡片第一次复习后间隔 1 天，第二次 3 天，之后按难度系数倍数增长。下次复习日期 = 今天 + interval。“今日待复习”就是筛选出到期日期不晚于今天的卡片。

这个方案的好处是逻辑透明、几十行代码就能实现；缺点是没有个性化拟合，对长期记忆的预测不如完整 FSRS 准确。对日常背单词来说已经够用。

四、几个实现细节

• 翻转动画：用 CSS 3D 的 rotateY 配合 backface-visibility，正反两面叠放，点击时切换类名即可。
• 连续打卡：记录每天是否有复习行为，从今天往前逐日检查，遇到断档就停止计数。
• 导入导出：导出时把卡片组序列化为 JSON 文件下载；导入时先校验字段结构，避免坏数据覆盖已有进度。
• 深浅色：默认跟随系统的 prefers-color-scheme，也可以手动切换，并记住用户选择。

五、发布作品时的改进

这已经是我第二次用开发者作品展览馆的发布 Skill 上架作品。根据第一次踩过的坑，这次提前做了几件事：

• 先写 .gitignore 再初始化仓库：发布 Skill 会安装到项目下的 .agents/ 目录并生成 skills-lock.json，提前排除后，首次提交就只包含项目源码，不用再重写提交历史。
• 凭证不落屏：要求智能体用脚本从配置文件读取 GitCode 令牌，只输出字段结构和用户名，不在命令或输出中出现令牌明文。
• 复用已有委托：首次发布创建的 IAM 自委托 SELF_VERIFY 直接复用，不重复创建，也不改动其他权限。
• 保留体验隧道：发布后不删除 DevBridge 隧道，作品页的在线体验入口在容器释放前都可以访问。

六、总结

间隔重复的核心思想很简单，难点在于把“什么时候复习”这件事交给程序。一个只有几百行代码的纯前端工具，就能把复习安排得井井有条。后续可以考虑加入复习记录导出和遗忘曲线可视化，让学习效果看得见。

项目代码已开源在 GitCode：hid86006757/study-flashcard。