Cnki Edu Interactive Animation

---
name: cnki-edu-interactive-animation
display_name: 交互动画
display_name_en: Interactive Animation
description: 面向中小学教师的课堂级 HTML 交互式教学动画生成：覆盖全学段全学科，产出插画级 / 真 3D 画面且离线可运行。
description_zh: 面向中小学教师的课堂级 HTML 交互式教学动画生成技能。覆盖小学到高中全学段与全部学科，按各学科特点（物理仿真、化学分子、生物结构、地理空间、数学几何、语文情境、英语游戏等）匹配专属动画类型与内容规范，产出插画级 / 真 3D 画面、离线单文件、可直接投屏或嵌入 PPT / 希沃。
description_en: A classroom-grade HTML interactive teaching-animation generator for K-12 teachers. Covers all grades (primary through senior high) and every subject, matching each subject's character — physics simulation, chemistry molecules, biology structures, geography space, math geometry, Chinese-text context, English games — to dedicated animation types and content rules. Outputs illustration-grade / true-3D visuals as a single offline file that drops into PPT or interactive whiteboards.
category: education
version: 1.0.2
author: 知网 edu

---

# CNKI 教育 · 交互式教学动画

教师给一个教学点 → 产出一个**能直接投屏用的 HTML 交互式动画**。双击打开、断网可用、插 PPT / 希沃白板 / 投屏 / 发学生都行。

## 四条硬标准（缺一即返工）

1. **单文件、零外部依赖**：内联全部 CSS/JS/图片；图片用 base64 内嵌，无外链、无 CDN、无网络请求，断网双击可开。
2. **画面是插画级**：要么 AI 生图做底图、代码做交互层，要么代码本身按 `references/02-rendering-and-visual.md` 画出有光影材质的画面。严禁纯色块 + 几何图形拼凑的"科技感"抽象图。
3. **内容准确**：知识点与教材口径一致；公式、单位、符号、数值、史实、原文无误；所有需精确的文字（课文原句、公式、标签、读数）一律用 HTML 文字层，绝不让 AI 生图把文字"烤"进图里。
4. **交互完整**：全屏按钮、选中态、操作提示、即时反馈、重置、触屏可用，一屏内完成；每个知识点要有"引入问题 → 操作探究 → 即时反馈 → 小结迁移"的最小学习闭环。

## 创意生成总纲（质量第一，还原融合前标准）

> 生成动画时，以下优先级**高于一切机器契约**。本技能后补的「机器校验契约」只是交付质检用的盖章步骤，**绝不为迎合它牺牲下面任何一条**。

1. **专业深度**：把"引入问题 → 操作探究 → 即时反馈 → 小结迁移"的最小学习闭环做扎实；每个可操作点都要让学生"拖一拖 / 点一点就懂"，不堆空架子。
2. **画面是插画级**：要么 AI 生图做底图 + 代码交互层，要么代码画出有光影材质的画面（见 `references/02`）。严禁纯色块 + 几何拼凑的"科技感"抽象图；丰富、有质感、有情境。
3. **真实感优先**：物 / 地 / 生 / 化场景默认追求 T3 真实感（贴图地球、具形器官、矢量场、真实器材）；能 3D 就 3D、能质感就质感，不要为了"稳"而主动降级。
4. **交互完整且顺手**：全屏、选中态、操作提示、即时反馈、重置、触屏热区大；低龄更要大圆角大热区、点击有鼓励反馈。
5. **学段设计系统**：小学糖果拟物 / 初中清新蓝绿 / 高中深色毛玻璃，从配色、圆角、语气、练习结构整体重设计（见 `references/02`），不靠"改字号"糊弄。
6. **留白与聚焦**：主视觉占满一屏、信息聚焦、无冗余装饰；关键读数 / 结论实时可见。
7. **内容红线**：公式、单位、符号、数值、史实、原文无误；所有精确文字（课文原句、公式、标签、读数）一律 HTML 文字层，绝不烤进图。

> ⚠️ **质量优先铁律**：`data-cnki-*` / `window.__selfTest` / `data-fact` / `prefers-reduced-motion` 等机器契约是**生成完成后**才补的"盖章"步骤。先出好作品，再盖章；契约与画质冲突时，以画质与教学为准。

## 版权红线（生成前必守）

- **只生"自绘风格"素材，不模仿特定 IP**（如某动画角色/佩奇/奶龙），不抓取网络第三方图片/插画/照片/专有代码当产物素材——校园/商用场景下未授权嵌入即侵权（北京互联网法院：网络课堂用他人作品不构成合理使用；标注来源不免责）。
- **开源库可嵌但须署名**：物理仿真确需第三方引擎时，仅可内联**宽松许可（MIT / Apache-2.0，如 Three.js、Matter.js）**的压缩源码，并在文件注释与交付说明中附许可与版权声明；**禁止**内联专有/未知来源/从网络随意抓取的代码。自绘代码（Canvas/SVG/WebGL 手绘）不受此限、优先。
- **AI 生图底图必须 `NO text`**，所有精确文字（课文原句、公式、标签、读数）放 HTML 文字层，绝不烤进图。
- 事实与定律（沸点 100℃、凸透镜公式等）不受版权保护可自由用，但应注明权威出处。
- 如需真实贴图/插画：走 ① 程序化自绘 ② edu 授权教材图库 ③ CC0/公有领域并标注，默认不抓网络图。
- **题库题目标注出处、图片外链不入卷**：用 CNKI 基教题库（`edu` 连接器）检索的真题，**只取题干与选项文字**，剔除 `<img>` 等外链（既破坏离线单文件，又涉第三方图版权）；每题标注来源（年份·地区·题型），改编须标明。**答案与学科常识冲突的题一律弃用**（详见 `references/09`）。
- 这反而是进校园的合规卖点，与"严谨可审计"定位一致。

## 画质策略

画质不靠形容词，靠**选对渲染介质**：

- **插画 / 情境 / 叙事 / 人物 / 地貌 / 生态类**（语文情境、历史场面、地理景观、生物生态、小学拟物故事）→ 用 AI 生图生成底图（规范见 `references/02` 的"AI 生图底图"节），base64 内嵌，再叠加 Canvas / SVG 交互层。这是达到高保真插画质感的关键路径。
- **3D / 仿真 / 函数图像 / 分子 / 立体几何**（地磁场、太阳系、电路、抛物、圆锥体积推导）→ 代码手绘，照 `references/02` 的 3D / 2D 配方；仅在"真实 3D 质感"要求高时，可内联 Three.js / Matter.js（均 MIT 许可）的压缩源码做物理仿真，并保留其许可声明（见版权红线"开源库可嵌但须署名"）。
- **数据 / 图表 / 游戏 / 课堂工具**（统计、分类配对、计时器、抽签）→ SVG + CSS，矢量清晰、动效顺滑。

## 触发与边界

**触发**：教师要做"动画 / 互动 / 演示 / 模拟 / 小实验 / 小游戏 / 可视化"，或贴一段课文、一道题、一个公式、一个实验名要"能动的"，或提到微课、公开课、信息化教学、希沃、PPT 插入、投屏、教学比赛。

**不做**：整套课件 / 整节课 PPT / 教案 / 微课视频 / 试卷 / 论文。直接说明边界即可。

**不承诺**：不替代教研判断（数值结论教师需过目）；不做重型物理仿真（按 `references/02` 轻量路径实现）。

## 🔐 前置权限校验（最高优先级，必须最先执行）（技能触发即查，硬性）

> 权限校验的「三态诊断 / 通用版兜底 / 强制转化卡 / 连接器加载指引」统一见本技能 `references/_shared.md`「一、权限固定提示」，本章节仅保留本技能专属说明，不重复展开。

> **权益 ≠ 引用（本技能适用）**：本技能**动画本体**是纯模型生成、**不依赖知网文献**；但「练习 / 小测题目」环节可调用知网题库（`mcp__<SERVER>__tkSearchQuestion` 等）获取真题素材，属于**弱依赖 / 可选增强**——缺失不影响动画本体，仅少一个真题练习层。无论权益 `true` 与否，动画本体内容与质量一致，差异仅在无权益时不产出依赖题库的练习题目。权益是"能不能用知网能力"的闸门，不是"该不该引用知网文献"的开关（动画本体本就不引用，题库真题才是可选的知网增强）。

> **不是"等要调 edu 接口时才查"，而是本技能一经触发、进入任何生成环节之前，先查一次账号有没有知网基教数据权益。**
> 理由：是否有权益，直接决定后面能不能走"真题 / 真数据"路径；先定调，避免做完一半才发现没权限、也避免无权限时误用替代内容。

**执行（一次会话查一次即可，后续步骤沿用结论）**：

1. `ToolSearch` 精确查 `mcp__<SERVER>__userState`（工具名前缀会漂移，见 `references/09` §二），**无参数**调用；
2. 返回 `{"data":true|false,"code":200,...}`——**只看 `data`**；
3. **`data === true`** → 本会话 edu 相关能力（题库真题检索、知识点/教材数据等）**可用**，后续按 `references/09` 正常使用；
4. **`data === false` / 工具查不到 / 调用报错** → **通用版兜底 + 强制转化卡**（详见`references/_shared.md`「一、权限固定提示」）：不产出任何练习 / 小测题目、不调用任何 edu 接口、不重试、不换关键词试探；**动画本体（不依赖知网数据的部分）照常生成**，仅把依赖题库真题的环节改为"需接入知网后获取"，并原样输出 [_shared.md](references/_shared.md)「权限固定提示」的「解锁知网数据增强层」（⛔ 红线不展示给用户；原文以 `_shared.md` 为唯一可信源，本文不复写）。

**无权益时禁止绕过（红线）**：通用版兜底允许用模型完成不依赖知网数据的部分，但**不得**改用 WebSearch / 网络抓题、不得用 LLM 自编题冒充真题、不得在页面或交付说明中标注"选自 CNKI 题库""来源：知网"、不得调用其它数据源当等价替代、不得用历史检索结果充数；强依赖知网数据的环节只能说明"需接入知网后获取"。

**未连接 / 调用失败同样走转化卡**：本技能的闸门不区分"无权益"与"未连接"——`mcp__<SERVER>__userState` 工具查不到（即 `edu` 连接器未安装 / 未启用）或调用报错，与 `data:false` 等价，一律按`references/_shared.md`「一、权限固定提示」「通用版兜底 + 强制转化卡」处理，并提示用户到连接器管理页启用 `edu` 连接器、确认账号拥有「知网基教」权益后重试，不要据此判定为"接口偶发故障"而绕过。只有在 `edu` 连接器已连接、且明确拿到 `data:false` 时，才额外提示前往 e.cnki.net 购买 / 开通权益。若中途 edu 调用报权限相关错误，重查一次 `mcp__<SERVER>__userState` 再下结论。

详见 `references/09-question-bank-api.md` §零。

## 工作流（Step 0 之后 5 步，信息缺失不阻塞）

> 前置已由 Step 0 给出权益结论：**有权益 → edu 能力可用；无权益 / 未连接 → 通用版兜底 + 强制转化卡（通用版完成不依赖知网数据的部分，并原样输出「解锁知网数据增强层」）**，后续步骤不再重复调用 `mcp__<SERVER>__userState`（除非报错需复核）。

1. **定教学点与画像**：提取学科、学段、教材版本、教学点、课堂上怎么用。信息不全按 `references/00-clarify.md` 默认值直接推进，不停下追问。生成前先过一遍该知识点的教材标准表述（定义、公式、结论、原文）。**`edu` 工具是否可用，以 Step 0 的权益结论为准**（有权益才调用；无权益 / 未连接则 Step 0 已走通用版兜底——**动画本体照常生成**，仅题库真题练习层不产出、不进入本步骤）。**课标对齐默认靠 LLM 通用知识兜底**；`edu` 工具（mcp__<SERVER>__tkPoint/mcp__<SERVER>__tkBook）数据可用但单学科返回 6MB+ 且无关键词过滤，不可内联进本 Skill 生成链，归 Dify 产品层检索节点（详见 `references/06`）。
2. **定类型 × 学科 × 学段 × 介质**：先判**学科**，按 `references/05-subject-specs.md` 加载该学科的强需求、首选形态、内容红线与视觉惯例；再按 `references/01-types-and-interactions.md` 把教学点映射到 10 类形态之一（必要时叠加 1 个辅助类型）；按学段定深度与界面形态；按"画质策略"定渲染介质；并在学段基准上叠加学科种子 + 知识点母题 + 用户风格词，落实「一素材一特点」（见下节）。
3. **渲染**：插画类先 AI 生图底图再叠加交互；代码类照 `references/02-rendering-and-visual.md` 的配方与设计系统。先画场景 / 主体，再上 UI。
4. **内容收口**：按 `references/03-content-accuracy.md` 通用规则 + `references/05-subject-specs.md` 该**学科的内容红线**逐条核对（公式、单位、符号、数值、图形、史实、原文引用、安全提示）；确认精确文字都在 HTML 文字层。学科红线与通用规则冲突时以学科红线为准。**动画内的练习 / 小测题目来源走 `references/09-question-bank-api.md`**：按 **Step 0 的权益结论**执行——有权益则检索 CNKI 基教题库真题并标注出处；无权益 / 未连接则**本技能走通用版兜底**（动画本体照常生成），**仅不产出依赖题库真题的练习题目**（严禁改用网络抓题、自编题冒充真题或"自编仿真题"充数，练习层改为说明"需接入知网后获取"）。
5. **交付前质检（可选，不回灌创意）**：作品先确保画面与教学到位；再跑 `scripts/validate_html.py` 结构自检、`scripts/verify_render.py <文件>` 真浏览器校验（JS 错误 + `__selfTest` + 主视觉占比 + 触控尺寸）、`lint_facts.py` 核对 `data-fact`。校验**只管"能不能跑 / 满不满"**，有 FAIL 优先修"能跑"类问题；若某契约项与画质冲突，**以画质与教学为准**。写到当前工作目录（中文教学点命名），按 `templates/delivery-note.md` 给说明。

## 学段适配

学段适配不是"改字号"：小学（糖果色 + 圆角拟物 + 闯关 + 一次一件事）、初中（清新蓝绿 + 规范器材 + 多步操作）、高中（深色毛玻璃 + 公式框 + 推导步骤）从配色、圆角、语气、练习结构整体重设计，精确变量见 `references/02`。

## 一素材一特点（禁止学段套皮）

学段设计系统（见 `references/02` §0、§1）是**基准底色**，不是统一模板。每个素材必须在基准之上，按下面四要素派生出**专属**样式，绝不允许"同色系同版式、只换文字"：

- **学科种子**：从 `references/02` §0.1 学科风格种子取该学科的专属色相 + 母题/图标语言（如初中物理=电路橙+场线，初中地理=地貌棕+星图，初中生物=叶绿+细胞）。同学段不同学科必须一眼可辨。
- **知识点母题**：同一学科不同知识点也要换母题——例：初中物理"浮力"用游泳池生活化场景，"地磁场"用深空矢量场；二者同属初中物理，但版式、配色、交互完全不同。
- **用户显式风格词（最高优先）**：生成前先读提示词，提取"国风 / 科技感 / 手绘 / 低饱和 / 闯关 / 安静演示"等意图，直接覆盖默认。
- **内容情绪**：欢快 / 严谨 / 抒情 / 探究 决定插画气质与动效节奏。

> 判定标准：同一学段、不同学科/知识点的两个素材并排，应能**仅凭配色与母题一眼区分**；同一知识点换用户要求应呈现**不同版式**。达不到即返工（见 `references/02` §7 红线）。

## 生成后盖章（机器校验契约，可选）

> 这一节是**交付质检用的盖章步骤，不是创意生成要求**。生成动画时**不要**为迎合下面的契约牺牲画面丰富度、交互深度或教学准确——**先出好作品，再盖章**。契约只验证"能不能跑 / 画得满不满 / 有没有错误"，不验证"好不好"。

生成完成后，如需批量质检或可审计，可补以下声明（**不写也合规**）：

- **渲染档**：`<html lang="zh-CN" data-cnki-tier="T2" data-cnki-stage="junior">`。`tier` ∈ {T1,T2,T3}（见 `02` §9，仅表示降级档位，不得为过校验主动选低档）；`stage` ∈ {primary,junior,senior} 决定触控下限（小学≥48 / 初中≥44 / 高中≥40）。
- **路线 / 布局族**：可选 `data-cnki-route`（sim / explainer / step / build / game / coach）+ `data-cnki-family`（stage / board / coach / arcade / bench），见 `references/04-layout-families.md`。**按需选用、不强制**，不必为凑槽位牺牲版式。
- **主视觉**：在 canvas / svg / 舞台元素上写 `data-cnki-visual`，`verify_render.py` 据此量占比（须 ≥ 视口 25%，内容包围盒 ≥ 主视觉盒 30%）。
- **权威数字**：会被教材对一遍的精确数字用 `<span data-fact="名称">数值</span>` 标记（名称见 `references/_facts.json`），`lint_facts.py` 比对容差。
- **数值 / 几何自检**：含读数 / 公式 / 比例 / 几何断言的作品可暴露 `window.__selfTest()` 返回 `{pass, cases:[{name,ok,expect,actual}]}`，见 `references/07-selfcheck.md`。
- **降级**：`<style>` 内建议含 `prefers-reduced-motion` 媒体查询（见 `02` §9），降级后功能完整。
- **语音（可选）**：英语 / 语文可加 `speechSynthesis` 朗读按钮——离线、点击触发、不引外部音频，见 `references/08-voice-narration.md`。

**发布状态（v5.2.0）**：v5.2.0 新增 **Step 0 · 权益校验**——**使用本技能时第一时间**就查 `mcp__<SERVER>__userState`（不是等要调 edu 接口时才查），`data:true` 则 edu 能力全程可用，`data:false` 则 edu 链路整体关闭并提示前往 e.cnki.net 购买 / 开通，**明令禁止绕过**（不得网络抓题、不得自编题冒充真题、不得用其它数据源当等价替代、不得用历史缓存充数）。一次会话查一次，后续步骤沿用结论。

**v5.1.0**：新增**练习题目来源通道**——`references/09-question-bank-api.md` 打通 CNKI 基教题库（`edu` 连接器）真题检索，含前缀漂移处理、入库三闸（剔除图片外链 / 二次核验答案 / 标注出处与改编）与筛题偏好，让动画内练习从"自编仿真题"升级为"可溯源真题"。

**v5.0.0 正式发布版**：已补齐四类可机器校验的硬机制——① 权威常量单一来源（`_facts.json` + `lint_facts.py`）；② DOM 无关自校验（`window.__selfTest` + `references/07-selfcheck.md`）；③ 真浏览器交付校验（`scripts/verify_render.py`，离线 msedge，H1–H7）；④ 真实感渲染与降级（T1/T2/T3 + `prefers-reduced-motion` + 贴图地球/具形器官/矢量场配方），并补齐布局族与可选离线语音。五大典型场景样例收在 `examples/`，全部通过 `verify_render.py` 真机校验（H1–H7 全 PASS）。

## 参考文件

| 文件 | 用途 |
|---|---|
| `references/00-clarify.md` | 需求澄清与默认值表（不阻塞推进） |
| `references/01-types-and-interactions.md` | 10 类形态 + 交互形态库 + 学段适配矩阵 + 生活化实验规范 |
| `references/02-rendering-and-visual.md` | **画质核心**：三学段设计系统 + AI 生图底图规范 + 3D/2D/SVG 配方 + 交互完整度 + 内容红线 |
| `references/05-subject-specs.md` | **分学科专项规范**：各学科强动画需求、首选形态、生成规则、内容红线、视觉惯例、典型教学点 |
| `references/03-content-accuracy.md` | 教材原文规则 + 分学科准确性核对 + 文字层分离 |
| `references/06-visual-presets.md` | **P0/P1 改进基线**：轻量 3D 引擎预设 + AI 插画底图预设 + 游戏化/容错叙事/统一组件库 + edu 实测结论 |
| `references/09-question-bank-api.md` | **练习题目来源**：edu 权益校验（`mcp__<SERVER>__userState`）+ CNKI 基教题库（`edu` 连接器 `mcp__<SERVER>__tkSearchQuestion`）检索真题的调用要点、入库三闸（剔图外链 / 核答案 / 标出处）、筛题偏好与页面呈现规范 |
| `templates/animation-template.html` | 通用 HTML 骨架（全屏 / 选中态 / 提示 / 重置齐备） |
| `templates/illustrated-scene-demo.html` | 画质基准件：AI 生图底图 + 代码交互层的混合范式样例 |
| `templates/geomagnetic-3d.html` | 画质基准件：3D 类内容的参照样板 |
| `templates/earth-solstice.html` | 画质基准件：地理「地球运动」参照样板（3D 地球 + 昼夜更替 + 黄赤交角 + 节气切换 + 极昼极夜） |
| `templates/pseudo-3d-roaming.html` | 空间漫游参照（透视投影 + 八方向 + 罗盘 + 信息卡） |
| `templates/delivery-note.md` | 交付说明模板 |
| `scripts/validate_html.py` | 交付前结构自检（外链 / 占位 / 字号） |
| `scripts/verify_render.py` | **真浏览器校验**：JS 错误 + `__selfTest` 断言 + 主视觉占比 + 溢出 + 触控尺寸（离线 msedge） |
| `scripts/lint_facts.py` | 学科常量核对：`data-fact` 标记 vs `references/_facts.json` |
| `references/_facts.md` + `_facts.json` | 学科硬约束单一真相源（权威常量库，机器可读） |
| `references/04-layout-families.md` | **布局族骨架**：stage/board/coach/arcade/bench 槽位 + 路线×族矩阵 + 安全区计算 |
| `references/07-selfcheck.md` | 数值 / 几何自检接口 `window.__selfTest` 规范与模板 |
| `references/08-voice-narration.md` | 可选语音朗读（speechSynthesis，离线点击触发） |
| `examples/` | 五大典型场景已验证样例（真浏览器 H1–H7 全 PASS，可直接对照生成） |

---

## 输出成功 / 失败的处理方式

### 成功（交付标准）

- 四条硬标准全部满足：单文件零外部依赖、画面插画级、内容准确、交互完整。
- 内容经「内容收口」逐条核对，无学科红线冲突；课文原句 / 公式 / 标签 / 读数等精确文字均在 HTML 文字层。
- 机器校验（可选）：`scripts/validate_html.py` 无外链 / 占位 / 字号 FAIL；`scripts/verify_render.py` 无 JS 错误、主视觉 ≥ 视口 25%、触控热区 ≥ 学段下限；若暴露 `window.__selfTest` 须通过。
- 依 `templates/delivery-note.md` 生成交付说明，文件用中文教学点命名。
- 向用户用一句话说清：作品是什么、课堂怎么用、可改哪里、怎么插进 PPT / 希沃。

### 失败（分级回退，均回到「工作流」对应步骤，不跳过学习闭环）

- **A 类 · 内容红线冲突**（公式 / 单位 / 史实错、精确文字烤进图、模仿特定 IP）：必须修，不交付；回退「内容收口」重核学科红线，必要时标注"示意模型，数值以教材为准"。
- **B 类 · 渲染 / 交互异常**（JS 报错、主视觉 < 25%、触控不达标、画面雷同 / 纯色块）：先修"能跑"类（JS 错误、溢出），版式 / 画质问题回到 `references/02` §0 多样性与 §7 红线重做，不靠降档蒙混。
- **C 类 · 机器契约 FAIL 但与画质冲突**（如某 `data-fact` 容差、降级动效）：以画质与教学为准，豁免该契约并在交付说明注明。
- **D 类 · 无法离线 / 单文件**（外链、CDN、网络请求）：硬失败，必须改为内联或程序化生成，不交付带外链版本。