知识问答游戏生成器
生成单文件、零依赖的多功能知识问答 HTML 游戏。
核心能力
- 单选 / 多选 / 判断 三种题型自动识别
- 7 大功能模式（题库浏览、限时答题、闯关挑战、学习模式、错题本、收藏、排名）
- 自适应难度（错题 3 倍权重出现）
- 连击积分系统（3 连 1.5x / 5 连 2x / 7 连 3x）
- localStorage 持久化（成绩、错题、收藏、做题记录）
- 响应式设计（手机/桌面自适应）
- 纯 vanilla JS，无任何外部依赖
工作流程
1. 收集题库
向用户索要题库内容，或根据用户指定的主题自动生成题目。题库使用纯文本格式：
1. 题目文本？
A、选项A内容
B、选项B内容
C、选项C内容
D、选项D内容
正确答案：D
解析：解析说明文本
2. 判断题：地球是太阳系中最大的行星吗？
对
错
正确答案：错
解析：木星才是太阳系中最大的行星。
格式规则详见 references/question-format.md。
2. 编码题库
将题库文本编码为 Base64，嵌入 HTML 模板。使用脚本自动完成：
python scripts/encode_questions.py input.txt
输出 Base64 字符串，填入模板的 RAW_B64 变量。
3. 生成 HTML
基于 assets/quiz-template.html 模板生成最终文件：
- 复制模板到目标路径
- 替换
RAW_B64为编码后的题库 - 自定义以下内容：
-<title>标签：游戏标题
-.nav-title文本：导航栏标题
-.home-header h1文本：首页大标题
-.subtitle文本：副标题
- 底部版权文本
- CSS 变量/渐变色：调整主题配色（可选）
4. 自定义主题配色
模板使用 CSS 渐变色定义主题。修改以下 CSS 值即可换肤：
/* 背景渐变 */
body { background: linear-gradient(135deg, #0a0a2e 0%, #1a1a4e 50%, #0d0d35 100%); }
/* 主色调（金橙渐变） */
background: linear-gradient(135deg, #ffd700, #ff8c00);
/* 强调色 */
color: #ffd700; /* 金色文字 */
常见配色方案：
- 太空蓝金（默认）：#0a0a2e + #ffd700/#ff8c00
- 森林绿：#0a2e1a + #00ff88/#00c853
- 深海蓝：#001a33 + #00bfff/#1e90ff
- 暗夜紫：#1a0a2e + #bb86fc/#7c3aed
- 暖橘红：#2e1a0a + #ff6b6b/#ff8c00
题库文本格式速查
| 题型 | 格式示例 | 答案行 |
|---|---|---|
| 单选 | A、xxx B、xxx C、xxx D、xxx |
正确答案：D |
| 多选 | A、xxx B、xxx C、xxx D、xxx |
正确答案：ABD 或 正确答案：A、B、D |
| 判断 | 对 / 错（或 正确/错误、√/×） |
正确答案：对 或 正确答案：√ |
每题必须包含：题号 + 题干 + 选项 + 答案行。解析行可选。题与题之间空行分隔。
详见 references/question-format.md。
文件结构
knowledge-quiz-game/
├── SKILL.md # 本文件
├── assets/
│ └── quiz-template.html # 完整 HTML 模板（7 大模式全功能）
├── references/
│ └── question-format.md # 题库文本格式详细文档
└── scripts/
└── encode_questions.py # 题库编码工具
使用示例
用户说："帮我做一个古诗词知识问答游戏"
- 生成 20-50 道古诗词题目（单选为主，穿插判断和多选）
- 按题库文本格式编写
- 运行
encode_questions.py编码 - 复制模板，填入编码后的题库
- 修改标题为"古诗词知识问答"，调整配色为森林绿
- 输出最终 HTML 文件
注意事项
- 单文件输出，所有 CSS/JS 内联，无需服务器即可运行
- localStorage 按 origin 隔离，不同文件路径数据独立
- 题库 Base64 编码仅用于压缩嵌入，非加密
- 模板已内置 XSS 防护（
escHtml函数转义所有用户内容） - 移动端适配已内置（600px 断点）
