\r \r

CSP课件制作技能\r

\r

技能简介\r

\r 为信息学 / CSP / NOIP C++ 课程生成完整教学资料套件，支持单课手动制作和批量 PDF→全套资料两种模式：\r \r | 产出物 | 格式 | 说明 |\r |--------|------|------|\r | 🎮 游戏化趣味课件 | .pptx | pptxgenjs 生成，闯关主线 |\r | 📄 详细教案 | .docx | 默认 40 分钟课时，可指定课时长度 |\r | 📝 学生任务单 | .docx | 递进式练习，填空+补代码+追踪 |\r | 💻 代码示例 | .cpp | UTF-8 BOM，含注释 |\r | 🎯 网页闯关游戏 | .html | 单文件，无依赖，双击可用 |\r \r

适用范围：小学高年级零基础 / 初中普通班 / CSP-J/S 竞赛班，均可通过年级参数切换难度风格。\r \r ---\r \r

触发场景\r

\r

• "帮我做 C++ 课件" / "做一节信息学课的课件"\r
• "做 CSP / NOIP / 信奥 课件"\r
• "生成教案和任务单" / "做 PPT 三件套"\r
• "把这些 PDF 做成课件"（批量模式）\r
• "做一节排序算法的课件" / "讲 STL 的课件"\r
• "重新制作课件" / "帮我更新教案"\r
• 涉及 C++ 任意知识点（变量/循环/函数/数组/指针/STL/图论/DP 等）的课程制作需求\r
• 涉及竞赛算法（贪心/搜索/动态规划/图论/树结构等）的讲解课件制作\r \r ---\r \r

工作流程\r

\r

模式 A：单课制作\r

\r

步骤 1：收集需求\r

\r 若用户未指定，询问：\r

1. 课件风格：活泼游戏化 / 专业简洁 / 科技暗色\r
2. 适用年级：\r
   • 小学高年级（零基础，多比喻，少公式）\r
   • 初中普通班（兼顾趣味与严谨）\r
   • CSP-J/S 竞赛班（算法导向，代码优先）\r
3. 知识点：函数/变量/循环/数组/字符串/STL/图论/DP 等\r
4. 课时长度（可选，默认 40 分钟）：40 / 45 / 60 分钟\r \r

⚠️ 重要：确认输出目录（绝对路径），避免文件散落。推荐格式：D:\课程资料\第XX课_知识点名\\r \r

步骤 2：生成 PPT\r

\r 以 assets/make_ppt.js 为模板：\r

• 修改标题、主题色、关卡数量、内容文字\r
• 小学版用比喻（榨汁机=函数、盒子=变量、侦探=判断）\r
• 代码用 Consolas 字体 + #0D1117 深色背景\r
• 输出文件名加 _v2 避免覆盖已打开文件\r
• 运行：node make_ppt.js\r \r

步骤 3：生成教案 + 任务单\r

\r 以 assets/make_docs.js 为模板：\r

• 教案：目标/重难点/教学过程（逐分钟）/板书/评价量规\r
• 任务单：圈数 → 填空 → 补代码 → 追踪表 → 挑战题\r
• 运行：node make_docs.js\r \r

步骤 4：生成代码示例\r

\r 将课件中所有代码片段保存为 .cpp：\r

const fs = require('fs');\r
fs.writeFileSync('代码示例.cpp', '\uFEFF' + content, 'utf8'); // UTF-8 BOM\r
```\r
\r
#### 步骤 5：生成网页闯关游戏\r
\r
以 `references/game_template.html` 为起点：\r
- 每关对应一个知识点，包含知识展示+交互题目\r
- 题型：选择题、判断题、填空题\r
- 功能：自动判对错、进度条、星级评价、通关彩纸动画\r
- 全部题答对才解锁下一关\r
- 单 HTML 文件，无需网络，双击即用\r
\r
#### 步骤 6：整理文件夹\r
\r
```powershell\r
# ⚠️ Windows 路径用双反斜杠或正斜杠，避免转义错误\r
$topic = "函数"\r
$dest = "D:\课程资料\$topic"\r
New-Item -ItemType Directory -Path $dest -Force | Out-Null\r
Move-Item -Path ".\*.pptx", ".\*.docx", ".\*.cpp", ".\*.html" -Destination $dest\r
Write-Host "✅ 文件已整理到：$dest"\r
```\r
\r
---\r
\r
### 模式 B：批量 PDF → 全套课程资料\r
\r
当用户提供**多个 PDF 教材文件**并要求批量生成时使用此模式。\r
\r
#### 步骤 1：安装依赖\r
\r
```powershell\r
# Python 依赖（PDF 提取）\r
python -m pip install pdfplumber\r
\r
# Node.js 依赖（PPT/Word 生成）\r
npm install pptxgenjs docx\r
```\r
\r
> **说明**：Windows 下优先使用 `python`，如提示命令不存在则改用 `python3`。Node.js 需 v16+，建议全局安装。\r
\r
#### 步骤 2：创建目录结构\r
\r
```powershell\r
# 示例：31课完整课程\r
$base = "C:\...\C++"\r
$courses = @("第00课_信息学竞赛介绍", "第01课_计算机中的数制", ...)\r
foreach ($c in $courses) {\r
  New-Item -ItemType Directory -Path "$base\$c" -Force | Out-Null\r
}\r
```\r
\r
#### 步骤 3：批量提取 PDF 内容\r
\r
使用 `scripts/extract_pdf_content.py` 提取所有 PDF 文本：\r
\r
```powershell\r
# Windows 下使用 PowerShell 执行\r
python scripts/extract_pdf_content.py `\r
  --input_dir "E:\课程\信奥初级教程\" `\r
  --output "course_content.json"\r
```\r
\r
脚本输出标准 JSON 格式，供后续生成脚本使用。参见 `references/course_schema.md` 了解 JSON 结构。\r
\r
> ⚠️ 若 PDF 为扫描版（无文本层），pdfplumber 会返回空内容，需先用 OCR 工具处理（见常见问题）。\r
\r
#### 步骤 4：批量生成 PPT\r
\r
为每课分别运行 `make_ppt.js`（修改课程数据参数）：\r
- 以 `assets/make_ppt.js` 为模板，将课程数据参数化\r
- 每课输出到对应子文件夹：`第XX课_课题名/课题名_课件.pptx`\r
\r
#### 步骤 5：批量生成教案 + 任务单\r
\r
以 `assets/make_docs.js` 为模板，参数化课程数据：\r
- 每课输出：`第XX课_课题名/课题名_教案.docx` + `课题名_任务单.docx`\r
\r
#### 步骤 6：批量生成网页闯关游戏\r
\r
以 `references/game_template.html` 为基础，为每课生成独立 HTML 游戏：\r
- 每课输出：`第XX课_课题名/课题名_闯关游戏.html`\r
- 关卡数量与课程知识点数量对应（通常 5～9 关）\r
\r
---\r
\r
## 文件结构规范\r
\r
批量生成后的目录结构：\r
```\r
C++/\r
├── 第00课_信息学竞赛介绍/\r
│   ├── 信息学竞赛介绍_课件.pptx\r
│   ├── 信息学竞赛介绍_教案.docx\r
│   ├── 信息学竞赛介绍_任务单.docx\r
│   ├── 信息学竞赛介绍_代码示例.cpp\r
│   └── 信息学竞赛介绍_闯关游戏.html\r
├── 第01课_计算机中的数制/\r
│   └── ...（同上）\r
└── ...（共31课）\r
```\r
\r
---\r
\r
## 参考资源\r
\r
- `references/game_template.html`：网页闯关游戏完整模板（含所有 JS/CSS 逻辑）\r
- `references/course_schema.md`：PDF 内容提取后的 JSON 数据结构说明\r
- `references/素数判断讲解.md`：适合小学生的素数讲解（矩形法、排队游戏、√n 原理）\r
- `references/代码示例.cpp`：素数计数完整代码（慢/快方法对比 + Bug 分析）\r
- `assets/make_ppt.js`：PPT 生成脚本模板（pptxgenjs，小学游戏化风格）\r
- `assets/make_docs.js`：教案+任务单生成脚本模板（docx 库）\r
- `scripts/extract_pdf_content.py`：批量 PDF 文本提取脚本\r
\r
---\r
\r
## 技术栈\r
\r
- **PPT 生成**：[pptxgenjs](https://gitbrent.github.io/PptxGenJS/)，`npm install pptxgenjs`\r
- **Word 生成**：[docx](https://docx.js.org/)，`npm install docx`\r
- **PDF 提取**：[pdfplumber](https://github.com/jsvine/pdfplumber)，`pip install pdfplumber`\r
- **网页游戏**：纯 HTML + CSS + JS，无框架，无外部依赖\r
- **运行环境**：Node.js（PPT/Word）+ Python（PDF 提取）\r
- **文件编码**：UTF-8 with BOM（Windows 中文兼容）\r
\r
---\r
\r
## 设计规范（小学版）\r
\r
| 元素 | 规范 |\r
|------|------|\r
| 主色调 | 暖白底 `#FFFBF0` + 深蓝黑 `#1E293B` |\r
| 代码背景 | `#0D1117`（GitHub 暗色） |\r
| 关键词色 | 黄 `#D97706`（类型）、粉 `#DB2777`（关键字）、青 `#0891B2`（函数名） |\r
| 字体 | 正文：系统默认中文；代码：Consolas |\r
| 动效 | 静态为主；HTML 游戏可加星星弹出 + 彩纸动画 |\r
| 比喻风格 | 榨汁机（函数）、盒子（变量）、侦探（判断逻辑）、闯关（课程进度）|\r
\r
## 设计规范（CSP 竞赛班）\r
\r
| 元素 | 规范 |\r
|------|------|\r
| 主色调 | 深灰底 `#0F172A` + 亮白字 `#F1F5F9` |\r
| 强调色 | 科技蓝 `#3B82F6` + 橙 `#F59E0B` |\r
| 代码背景 | `#0D1117`，代码块尽量宽 |\r
| 内容密度 | 可适当提高信息密度，减少装饰性图案 |\r
| 比喻风格 | 减少卡通比喻，改用算法原理图示（流程图、树状图、状态转移图）|\r
| 动效 | 最小化，重点放在代码演示步骤动画 |\r
\r
---\r
\r
## 常见问题\r
\r
**Q：运行 `node make_ppt.js` 报文件被占用？**  \r
A：输出文件名改为 `_v2.pptx`，避免覆盖已在 PowerPoint 打开的文件。\r
\r
**Q：生成的文件打开中文乱码？**  \r
A：用 Node.js 写出时加 `'\uFEFF'` BOM 头，或在 VS Code 右下角手动选 UTF-8 编码。\r
\r
**Q：pptxgenjs 出现颜色警告？**  \r
A：8 位 16 进制色码（含透明度）会警告，改用 6 位 + `transparency` 参数即可，不影响文件。\r
\r
**Q：PDF 文本提取乱码或内容为空？**  \r
A：部分 PDF 为扫描图片，pdfplumber 无法直接提取文字。可用 PaddleOCR 处理：`pip install paddlepaddle paddleocr`，运行 OCR 后得到文本再提取。\r
\r
**Q：批量生成 31 课 PPT 耗时太长？**  \r
A：先用 Python 批量提取并保存 `course_content.json`，再一次性运行 Node.js 批量脚本，避免逐课交互。估计耗时：31 课约 3～8 分钟（取决于磁盘速度）。\r
\r
**Q：竞赛班课件需要算法流程图 / 树状图怎么处理？**  \r
A：可在课件 PPT 中插入 SVG 图或用 Mermaid 生成 PNG 后嵌入。目前脚本暂不自动生成算法图，需手动补充或由 AI 生成 Mermaid 代码后转图片。\r
\r
**Q：如何为不同年级生成不同难度版本？**  \r
A：在 `make_ppt.js` 中加入 `grade` 参数（`primary` / `junior` / `csp`），根据参数切换文字风格、比喻密度和代码复杂度。\r