quiz-app-generator

by duzhilei951

Install this Skill

curl -fsSL -o quiz-app-generator.zip https://skill.seembox.com/api/v1/skills/quiz-app-generator/download && unzip quiz-app-generator.zip

Download quiz-app-generator.zip

SKILL.md About

---
name: quiz-app-generator
description: 生成适合学生使用的交互式刷题单文件 HTML 网页应用，支持练习、考试、背题、错题重练四种模式，零外部依赖，可直接部署到服务器。哪怕用户没有明确叫出本技能的名字，只要提到"帮我把这些题做成刷题网页"、"生成一个考试页面"、"制作交互式题目"、"把题库做成 HTML"、"给学生做一个测试工具"，就应当立即使用本技能。如果用户同时描述了美观、交互等要求，请隐式结合 frontend-dev 技能的视觉审美标准来生成输出。
---

# Quiz App Generator — 刷题网页生成器

## 核心目标

将用户提供的任意格式题目，生成一个功能完整、视觉精美、可直接部署的单文件 `.html` 刷题应用，让学生可以通过沉浸式的交互体验完成对题目的熟悉和记忆。

---

## 第一步：解析题目输入

用户提供的题目往往格式不规整（从 Word 拷贝、截图、临时笔记等），请主动、智能地解析结构，不需要要求用户二次整理格式。

解析完成后，在内部将题目转化为以下标准数据结构：

```json
[
  {
    "id": 1,
    "type": "single",
    "question": "题目文字",
    "options": ["A. 选项一", "B. 选项二", "C. 选项三", "D. 选项四"],
    "answer": "A",
    "explanation": "解析文字，说明为什么 A 正确..."
  }
]
```

`type` 支持：`single`（单选）、`multiple`（多选）、`judge`（判断题）、`qa`（简答）。如无解析内容，`explanation` 可留空字符串，不影响功能。

如果用户处于框架讨论阶段没有提供真实题目，请主动构造 4~6 道带有代表性的示例题目用于演示和测试。

---

## 第二步：生成单文件 HTML 应用

基于下方所有规范，从零编写并输出为一个完整的 `.html` 文件（写入到用户指定位置，或 `quiz-output.html`）。

### 规范一：四种核心模式（必须全部实现）

| 模式 | 交互要点 |
|------|----------|
| **刷题模式（Practice）** | 做一题即时显示该题答案和解析；可前后翻页；已答题目标记状态（对/错/未答）|
| **考试模式（Exam）** | 全程隐藏答案；答完离开后点击"交卷"统一出成绩与考试报告（含得分、正确率、错题列表）|
| **背题模式（Memorization）** | 直接展示所有题目和高亮正确答案与完整解析，便于快速复习记忆 |
| **错题本与重刷（Error Book）** | 自动汇总刷题/考试模式中做错的题目；支持"一键只刷错题"进入专项练习循环 |

四种模式通过顶部或侧边的 Tab / 导航切换，切换时有平滑过渡动画。

### 规范二：题库数据必须置于代码最顶部

生成的 HTML 文件中，**所有题目数据必须提取为一个独立的 JS 常量，放在 `<script>` 块的第一行**，形如：

```js
const QUESTION_BANK = [ /* ... 题目数据 ... */ ];
```

这样做的目的是：即便完全不懂代码的老师，用记事本打开文件后也可以直接定位到最上方修改题目文字、增删选项，而不会破坏下方的逻辑代码。

### 规范三：学习进度持久化与可迁移

- 利用 `localStorage` 在本地保存错题记录和历史成绩，刷新页面不丢失。
- 页面内必须提供"导出学习记录"（下载为 JSON 文件）和"导入记录"（拖拽或文件选择）功能，方便学生在不同设备之间转移进度。
- 这解决了纯前端应用的核心痛点：在机房做题、在家继续、换电脑复习，数据都能无缝延续。

### 规范四：绝对零外部依赖

不引入任何外部 CDN 链接（无 Bootstrap、无 Tailwind CDN、无 Vue/React CDN、无 Google Fonts 链接）。原因是学生可能在局域网、无网络的机房使用，外部依赖会导致样式崩坏或加载失败。

所有 CSS、JS、字体（使用系统字体栈）、图标（使用内联 SVG）全部内联在唯一的 `.html` 文件中。

### 规范五：高级视觉与顺滑微交互

参考 frontend-dev 技能的审美标准，不要使用浏览器默认样式。具体要求：

- **色彩**：背景使用带灰度的深色或浅色系，避免纯黑/纯白。正确反馈用低饱和绿色，错误反馈用低饱和红/橙色，绝不使用原色。
- **卡片排版**：题目以卡片形式展示，有内边距、圆角、细腻的阴影层次感。
- **交互反馈**：答对时选项区域出现绿色渐变 + 小勾动画；答错时答题区轻微"抖动"（CSS `shake` 动画），同时标红所选项并绿色高亮正确项，然后自动展开解析。
- **模式切换**：界面切换时使用淡入淡出过渡，不要生硬跳变。
- **响应式**：在手机、平板、桌面端均能完好显示，卡片宽度自适应。

---

## 示例：题目数据与输出格式

**输入示例（用户粘贴的原始文本）：**
```
1. 下列哪个是计算机的核心部件？
A 显示器  B CPU  C 键盘  D 打印机
答案：B  解析：CPU 是中央处理器，是计算机的核心...
```

**解析后的内部数据：**
```json
{"id":1,"type":"single","question":"下列哪个是计算机的核心部件？","options":["A. 显示器","B. CPU","C. 键盘","D. 打印机"],"answer":"B","explanation":"CPU 是中央处理器，是计算机的核心..."}
```

**输出：** 一个单文件 `quiz-output.html`，双击即可打开，无需服务器，无需联网。

---

## 交付清单

生成完成后，告知用户：
1. 文件保存位置
2. 如何在浏览器中打开
3. 如何通过记事本修改题目（找到文件顶部的 `QUESTION_BANK`）
4. 如何导出/导入学习记录

_meta.json Metadata

{
  "ownerId": "kn727sspfn8phcsjxfk2rna8h9827q8p",
  "publishedAt": 1775206789233,
  "slug": "quiz-app-generator",
  "version": "1.0.0"
}