一、事情是这样的

公司突然通知：“要考安全生产，题库发群里了，大家自己看。”

打开那个 Word 文档，我沉默了。

500 道题，密密麻麻挤在一起。没有分类，没有标签，翻几页就忘了前面看过什么。错题得自己拿本子记，学到哪了全凭感觉。

我试着看了半小时，眼睛酸，脑子乱，完全不知道看了多少、还剩多少。

"这不行，得想个办法。"——我的第一反应不是 "硬看"，而是 "能不能做个工具？"

于是接下来几个周末，我折腾出了这个学习平台。

二、我遇到了哪些问题

问题1：记住答案位置，而不是知识点

按顺序做题，做着做着发现：我不是真会，只是记住了 "这题选 C"。

我的解法：每次打开，题目顺序随机；同一道题，选项顺序也随机。

// 题目顺序打乱
const questionOrder = Utils.shuffleArray([...Array(totalQuestions).keys()]);

// 选项顺序打乱，正确答案位置跟着变
const shuffledOptions = Utils.shuffleArray([...originalOptions]);
const shuffledAnswer = shuffledOptions.indexOf(originalAnswer);

这样一来，同一道题每次出现都不一样。你不能靠记位置，只能真懂。

问题2：进度总丢

Word 文档没有记忆功能。今天看到第 50 题，明天打开，得从头翻。

我的解法：自动保存学习进度，下次打开接着来。

// 存到本地
studySession: {
    questionIds: [],      // 题目列表
    currentIndex: 0,      // 做到哪题了
    answeredIds: [],      // 哪些题已经答过
    questionStates: {}    // 每道题的答题状态
}

关掉浏览器、重启电脑，回来还能继续。不用翻，不用找，打开就是上次离开的地方。

问题3：上一题下一题，跳来跳去

点 "上一题" 回去看看，再点 "下一题"，结果跳到一道全新的题。刚才那道去哪了？

我的解法：用数组记录浏览历史，像浏览器的前进后退。

图片生成词：简洁的流程图，显示浏览历史栈的工作原理，箭头指示前进后退，清晰的步骤标注，蓝色和白色主调，技术文档风格

浏览记录：[第1题, 第5题, 第3题]
                    ↑
                  当前在这里

点"上一题" → 回到第5题
点"下一题" → 回到第3题（不是新题！）

只有回到最末尾，点"下一题"才会出新题

这样导航就顺了。想回顾就回顾，回顾完继续往前走。

问题4：手机上看太难受

用手机做题，各种按钮、进度条占满屏幕，题目被挤到只剩一点点。

我的解法：压缩顶部空间，把进度直接放在题号后面。

之前：

• 第一行：题型、分类、题号

• 第二行：筛选控件

• 第三行：进度条 + 百分比

现在：

• 第一行：题型、分类、第 9/58 题 (14%)、筛选控件

• 没了

答题区域一下子大了不少。手机上按钮也改成垂直排列，不容易点错。

三、技术方面的一些事

纯前端，零后端

整个项目：

• 一个 HTML 文件

• 几个 JS 文件

• 没有服务器

• 没有数据库

• 数据存在浏览器本地

部署超简单，丢到 GitHub Pages 就行。

模块化

js/
├── app.js          // 页面切换、初始化
├── study.js        // 学习逻辑（最复杂）
├── exam.js         // 考试模块
├── state.js        // 状态管理
├── storage.js      // 本地存储
├── ui.js           // 界面控制
└── utils.js        // 工具函数

每个文件干一件事，改起来不头疼。

AI帮了大忙

说实话，没有 AI 辅助，我不可能在几个周末做完。

• 写代码：复杂逻辑先让 AI 生成骨架，我再改

• 找 Bug：出错直接把代码和报错给 AI，省得自己瞪眼看

• 查文档：不用翻 MDN，直接问 AI

AI 不是替代我，是让我更快。就像用计算器，你还是得知道怎么算。

四、功能清单

学习计划

• 分三个阶段：基础→强化→冲刺

• 完成一阶段才能解锁下一阶段

• 记录连续学习天数

题库学习

• 500+ 题，覆盖法律、法规、国标

• 题目随机出现

• 选项随机排列

• 按类别、题型筛选

• 自动保存进度

• 上一题 / 下一题导航

习题本

• 错题自动收集

• 收藏夹

• 错题重做

• 批量清空

模拟考试

• 60 分钟限时

• 60 道题

• 100 分制，60 分及格

• 考完自动算分

• 错题自动进习题本

体验优化

• 手机、平板、电脑都能用

• 提示消息从中间上方弹出，不挡题目

• 答题区域尽量大

五、踩过的坑

坑1：新学习继承了旧状态

现象：点开始新学习，第一题直接显示答案。

原因：questionStates 没清空，上次学习的答题状态还在。

修复：初始化新会话时，questionStates 必须设为空对象。

AppState.studySession = {
    // ...其他字段
    questionStates: {}  // 从这里开始，别继承旧的
};

坑2：最后一题进度不满

现象：500 题全做完了，进度显示 99%。

原因：更新进度的函数在记录答案之前执行了。

修复：调整执行顺序，先记录答案，再更新进度。

坑3：随机到重复题目

现象：同一道题连续出现好几次。

原因：纯随机，没有排除已答题。

修复：只从未答题里随机。

const unanswered = allQuestions.filter(q => !answeredIds.includes(q.id));
return unanswered[Math.floor(Math.random() * unanswered.length)];

六、亮点：答案解析和记忆技巧

本身题目只有题干和答案，这多不方便记忆啊，于是我用 kimi，花了好长时间调试，然后给每道题都加了答案解析和记忆技巧。

答案解析：题目出自哪条安全生产的法律法规，做到有法可依。

记忆技巧：有个口诀（顺口溜），帮助记忆。

​七、还有什么想做

• 成就系统（连续学习 7 天勋章之类的）

• 学习数据统计（哪类题错得多）

• 支持导入 Excel 题库

• 同事间排行榜

• 离线使用（PWA）

先这样吧，考过的话，就考过了...

八、最后说两句

做这个工具，我最大的感受是：

AI 真的能提高效率。 几个周末做完一个完整应用，以前不敢想。但 AI 只是工具，关键还是得有想法、知道要解决什么问题。

用户体验比技术重要。 从 Word 到网页，技术上没什么难的，但体验差太多了。题目随机、进度保存、手机适配，这些才是让人愿意用的原因。

简单最好。 纯前端、无后端、零依赖，部署和维护都省心。

相关链接

• 项目源码：

  https://github.com/NoEggEgg/learning_platform_xinsen

• 在线试用：

  https://noeggegg.github.io/learning_platform_xinsen/