\r \r

📚 自学教练\r

\r

学完就练，练完就过\r

\r ---\r \r

是什么\r

\r 「自学教练」是一个专为自考/成考/职业考试教师设计的 AI 教学工具，由两个配合使用的能力组成：\r \r

• 能力一 · 学习指南：将抽象的讲义知识点转化为可视化、交互式的单文件 HTML 学习网页\r
• 能力二 · 刷题应用：将真题/模拟题转化为带四种练习模式的交互式刷题网页\r \r 两个能力组合形成完整的学习闭环：老师上传讲义 → 生成学习指南 → 学生自学 → 生成刷题网页 → 学生练习 → 通过率提升。\r \r

核心理念：不是替代老师，而是让老师的知识以最友好的方式到达学生手中。\r \r ---\r \r

能力一：学习指南\r

\r

把抽象知识变成看得见、点得开的交互式网页\r

\r

核心设计理念\r

\r

1. 拒绝密集文字：大字号、宽行距、宽内边距，留白呼吸感\r
2. 沉浸式交互：知识点不全部摊开，通过"点击、切换、展开"逐步曝光\r
3. 讲师友好：标注"互动提示"，方便老师引导学生\r
4. 单文件交付：所有代码封装在一个 HTML 文件中\r \r

5 大核心交互组件\r

\r | 组件 | 适用场景 | 效果 |\r |:---|:---|:---|\r | 渐变沉浸式头部 | 网页顶部标题区 | 主色+辅助色渐变，视觉冲击力强 |\r | 横向标签页切换 | 步骤/原则/方法论 | 点击切换内容，带淡入动画 |\r | 情景连线高亮测试 | 案例与理论匹配 | 点击场景，对应知识点放大高亮 |\r | 魔法反转 | 对比错误vs正确示例 | 点击按钮，低分答案升级为满分卷面 |\r | 互动自测翻牌 | 简答题/问答题复习 | 点击展开标准答案，带淡入动画 |\r \r

技术规格\r

\r

• Tailwind CSS (CDN) + FontAwesome (CDN) + Vanilla JS\r
• 配色系统可自定义（主色/辅助色/点缀色/背景色）\r
• 响应式设计：桌面/平板/手机均适配\r
• 文件大小：约 50-100KB\r \r

输入输出\r

\r 输入：任意格式的教学资料\r

• Markdown / Word / PDF 讲义\r
• 真题解析 / 复习提纲\r
• 纯文本知识点\r \r 输出：单文件 HTML 学习指南网页\r
• 双击即可打开\r
• 可通过微信/邮件/网盘分享\r
• 老师用记事本就能改内容\r \r ---\r \r

能力二：刷题应用\r

\r

把真题变成学生愿意刷的交互式应用\r

\r

四种练习模式\r

\r | 模式 | 交互要点 |\r |:---|:---|\r | 刷题模式 | 做一题即时显示答案和解析，标记对/错/未答 |\r | 考试模式 | 全程隐藏答案，交卷后统一出成绩与考试报告 |\r | 背题模式 | 直接展示所有题目+高亮正确答案+完整解析 |\r | 错题本 | 自动汇总错题，支持"一键只刷错题" |\r \r

核心特性\r

\r

1. 智能解析题目：用户粘贴任意格式题目，AI 自动解析为标准结构\r
2. 题库数据在文件顶部：QUESTION_BANK 常量置于代码第一行，老师用记事本就能改\r
3. 学习进度持久化：localStorage 保存错题和成绩，支持导出/导入 JSON 跨设备迁移\r
4. 零外部依赖：不引入任何 CDN，纯内联 CSS/JS，机房断网也能用\r
5. 精美交互反馈：答对绿色渐变+勾动画，答错轻微抖动+红色标记+自动展开解析\r \r

支持的题型\r

\r | 类型 | 代码 |\r |:---|:---|\r | 单选题 | single |\r | 多选题 | multiple |\r | 判断题 | judge |\r | 简答题 | qa |\r \r

输入输出\r

\r 输入：任意格式的题目\r

• 从 Word 拷贝的题目\r
• 截图/笔记中的题目\r
• 真题 PDF 中的题目\r \r 输出：单文件 HTML 刷题应用\r
• 双击即可打开\r
• 学生可在机房/手机/家用电脑使用\r
• 学习记录可跨设备迁移\r \r ---\r \r

两个能力如何配合\r

\r

老师的工作流：\r
\r
  讲义/知识点              真题/模拟题\r
      ↓                       ↓\r
  学习指南能力              刷题应用能力\r
      ↓                       ↓\r
  可视化学习网页            交互式刷题网页\r
      ↓                       ↓\r
      └────── 发给学生 ──────┘\r
                ↓\r
         学完就练，练完就过\r
                ↓\r
           通过率提升\r
```\r
\r
**学习指南**解决"看不懂"的问题：把抽象知识变成可视化、可交互的学习体验。\r
**刷题应用**解决"记不住"的问题：把枯燥题目变成有反馈、有成就感的练习体验。\r
\r
两者组合，就是一个完整的教学闭环。\r
\r
---\r
\r
# 工作流程\r
\r
## 场景一：老师备课\r
\r
```\r
老师：\r
  "这是《马克思主义基本原理》第三章的讲义，帮我做一个学习指南网页"\r
  "这是近5年的真题，帮我做一个刷题网页"\r
\r
AI：\r
  → 解析讲义，提取知识点，生成学习指南 HTML\r
  → 解析真题，构建题库，生成刷题应用 HTML\r
\r
老师拿到两个文件，发到班级群，学生双击就能用。\r
```\r
\r
## 场景二：学生自学\r
\r
```\r
学生打开学习指南：\r
  → 看到精美的知识点页面\r
  → 点击标签页切换不同章节\r
  → 点击"查看答案"自测\r
  → 点击"魔法按钮"看满分答案 vs 低分答案对比\r
\r
学生打开刷题网页：\r
  → 选择"刷题模式"逐题练习\r
  → 做对的题标绿，做错的自动展开解析\r
  → 考前切换到"考试模式"模拟真实考试\r
  → 考前最后看"错题本"，只刷做错的题\r
```\r
\r
## 场景三：考试前突击\r
\r
```\r
考前3天：\r
  1. 打开学习指南，快速过一遍知识点（标签页切换）\r
  2. 打开自测翻牌，遮住答案自问自答\r
  3. 打开刷题网页，进入"考试模式"模拟一次\r
  4. 打开错题本，只刷做错的题\r
  5. 进考场 ✅\r
```\r
\r
---\r
\r
## 报告输出格式\r
\r
所有生成的网页都是**单文件 HTML**：\r
\r
| 类型 | 技术栈 | 特点 |\r
|:---|:---|:---|\r
| 学习指南 | Tailwind CSS + FontAwesome CDN + Vanilla JS | 视觉冲击力强，交互丰富 |\r
| 刷题应用 | 纯内联 CSS/JS（零外部依赖） | 断网也能用，机房友好 |\r
\r
共同特点：\r
- 单文件交付，双击即可打开\r
- 响应式布局，手机/电脑/平板均可使用\r
- 可通过微信/邮件/网盘分享\r
- 老师用记事本就能修改内容\r
- 可部署到 COS/Netlify 生成在线链接\r
\r
---\r
\r
## 信号灯系统\r
\r
本技能不涉及信号灯（非成长跟踪类工具）。\r
\r
## 数据安全\r
\r
- 所有数据存储在浏览器本地（localStorage）\r
- 不上传任何数据到服务器\r
- 学习记录可导出为 JSON 文件备份\r
- 学生的做题数据完全在本地，保护隐私\r