知识问答游戏生成器

要解决的问题

想在浏览器里跑一个知识问答游戏，通常意味着三件事：先搭页面，再接题库，最后补上成绩存储。三者都要依赖前端框架、构建工具，部署时还得考虑服务器。而很多场景其实并不需要这些——给线下分享做一个答题页、给班级出一次随堂测验、或者只是把整理好的一份题库变成可交互的东西。

这个技能的目标就是把三步压缩成一步：给它一份纯文本题库，它输出一个可以直接双击打开的 HTML 文件。所有样式和逻辑都内联在同一个文件里，没有 npm install，没有构建步骤，也没有任何外部 CDN 请求。

核心能力

它处理的不只是「选择题」：

• 题型自动识别：单选、多选、判断三种格式在解析阶段按形态区分，不需要额外标记
• 7 种功能模式：题库浏览、限时答题、闯关挑战、学习模式、错题本、收藏、排名
• 自适应难度：答错的题目会以 3 倍权重重新出现
• 连击积分系统：连续答对 3 题触发 1.5x 倍率，5 题 2x，7 题 3x
• localStorage 持久化：成绩、错题、收藏、做题记录都保存在浏览器本地
• 响应式布局：600px 断点切换移动端布局

关键步骤

工作流分四步，每一步都有明确的输入和输出：

1. 收集题库：向用户索要题库内容，或按指定主题自动生成。题库用纯文本书写，格式有严格约定——每题包含题号、题干、选项和答案行，解析行可选，题目之间空行分隔。
2. 编码题库：将文本转成 Base64 字符串，填入模板里的 RAW_B64 变量。这一层只是为了压缩嵌入体积，不是加密手段。
3. 生成 HTML：复制模板，替换题库编码，然后自定义标题、导航文案、首页大标题、副标题和底部版权。
4. 调整配色：模板用 CSS 渐变定义主题，修改对应颜色变量即可换肤。内置太空蓝金、森林绿、深海蓝、暗夜紫、暖橘红五种预设。

适用边界与注意点

几个使用前需要清楚的限制：

• 题库格式有约束：必须严格遵循 正确答案：ABD 这类写法，格式错误会导致解析失败。多选答案支持 ABD 或 A、B、D 两种写法，判断题支持 对/错、正确/错误、√/×。
• 数据按文件隔离：localStorage 按 origin 存储，同一目录下不同 HTML 文件的数据互不相通。清空浏览器缓存会丢失全部记录。
• Base64 不是安全措施：任何人打开文件都能从源码里还原出题库原文。
• XSS 防护已内置：模板中的 escHtml 函数会转义所有渲染到页面的用户内容，扩展模板时不要绕过这层。