HTML Interactive Courseware Skill

高价值HTML互动课件开发专家 - OpenClaw 技能包

简介

这是一个专为K-12教学设计的OpenClaw技能，用于生成单文件、高互动、高容错、强教学属性的HTML课件。

核心特点

• ✅ 单文件交付 - 所有CSS/JS内联，开箱即用
• ✅ 双端兼容 - 同时支持鼠标和触控操作
• ✅ 大屏极简 - 专为教室大屏/白板设计
• ✅ 状态持久化 - 使用localStorage保存进度
• ✅ 数据反馈 - 实时显示剩余/正确数量

支持的课件类型

类型	说明
划线题	从A栏连线到B栏，如词语配对
拖拽题	拖拽元素到目标位置，如分类
点击选择	点击选择正确答案，如找错题
排序题	拖拽排序，如按时间顺序排列
填空题	点击或输入填入答案

安装方法

方法一：直接安装

openclaw skill install html-interactive-courseware.skill

方法二：从源码安装

git clone https://github.com/TangHuaShuJu/html-interactive-courseware.git
cd html-interactive-courseware
openclaw skill install .

使用方法

安装后，使用以下激活词触发：

课件类：课件、互动课件、HTML课件、教学课件

题型类：划线题、连线题、拖拽题、排序题、填空题

示例：

帮我做一个中英文词语配对的划线课件
创建一个数字分类拖拽课件
生成一个排序互动页面

技能结构

html-interactive-courseware/
├── SKILL.md                    # 核心技能文档
├── references/
│   ├── cdn-resources.md        # CDN资源列表
│   └── interaction-patterns.md # 交互设计模式
└── assets/
    └── courseware-template.html # HTML模板文件

设计理念

1. 学情为本 - 技术为教学服务
2. 深度互动 - 思考可视化，实时反馈
3. 大屏极简 - 剔除无关装饰
4. 低门槛操作 - 师生零学习成本
5. 价值升华 - 鼓励试错与探索

技术规范

• 一屏全显，无滚动条
• 最小字号16px，标题24px+
• 高对比度配色
• 精准防误触触发区
• 所有交互可撤销

许可证

MIT License

作者

糖糖虾 (Sugar Shrimp) 🦐