机器人学院 - 综合性智能学习平台

一个现代化、高度互动、支持数据导入导出的在线学习平台，专注于服务机器人应用开发（中级）证书考试的学习与练习。

✨ 核心特色

📦 数据管理系统（新增）

• 数据导入/导出：一键导出所有学习数据（JSON格式），支持跨设备迁移
• 完整的用户数据保存：
  • 练习进度和历史记录
  • 教程学习进度
  • 个人笔记和标注
  • 复习计划和时间表
  • 学习统计和分析数据
• 离线优先设计：所有数据存储在本地LocalStorage，无需后端服务器
• 数据恢复功能：导入数据后立即恢复之前的学习状态

📊 数据分析系统（新增）

• 学习统计看板：
  • 🔥 连续学习天数追踪
  • ⏱️ 总学习时长统计
  • 📝 待复习题目提醒
  • 📚 笔记数量统计
• 可视化图表：
  • 14天学习趋势图（每日答题情况）
  • 知识点分布图（各模块掌握情况）
  • 题型正确率分析
  • 模块表现对比
• 多维度量化参数：
  • 按题型统计（单选/多选/判断）
  • 按模块统计（8大知识模块）
  • 按时间统计（日/周/月）
  • 学习效率分析

📄 文档中心（新增）

• 多格式上传：支持 PDF / JPG / PNG / JPEG，单文件最大 10MB
• 智能OCR识别：基于 Tesseract.js，自动识别图片文字（中英文）
• IndexedDB 永久存储：文档元数据+内容持久化保存，离线可用
• 高效检索：内置搜索与类型筛选，上传记录实时更新
• 双栏预览器：左侧列表、右侧内容预览 + OCR 文本查看/复制
• 批量管理：支持单个下载、删除以及一键清空全部文档

📝 复盘回顾系统（新增）

• 智能复习计划：
  • 基于艾宾浩斯遗忘曲线的复习间隔（1、3、7、14、30天）
  • 自动标记到期复习题目
  • 复习成功/失败智能调整
• 个人笔记系统：
  • 为每道题目添加个人笔记
  • 笔记支持时间戳记录
  • 一键查看所有笔记
• 错题集：
  • 自动收集所有答错的题目
  • 显示尝试次数
  • 一键重新练习

🎓 交互式教程系统

• W3Schools风格学习体验：
  • 📚 系统化理论讲解
  • 💻 实践代码示例
  • 🎯 交互式练习
  • 🧩 自测题验证
  • ✅ 学习进度追踪

💡 智能练习系统

• 300道精选练习题：涵盖单选题、多选题和判断题
• 8大知识模块：
  • 语音与语音识别
  • 图像处理与视觉感知
  • 机器学习与数据建模
  • 机器人基础与硬件
  • ROS系统与导航
  • SLAM与定位建图
  • 控制协同与系统集成
  • 综合拓展与行业认知

🎯 完整学习路径

理论教程 → 交互练习 → 针对性考题 → 模拟考试 → 数据分析 → 复盘回顾

🚀 技术栈

• 前端框架：原生HTML5 + CSS3 + JavaScript (ES6+)
• 样式设计：CSS变量 + Flexbox + Grid布局
• 数据存储：
  • LocalStorage：用户进度、笔记、分析数据
  • IndexedDB：文档文件存储（最大10MB）
• 数据格式：JSON + Base64
• OCR引擎：Tesseract.js v5（中英文识别）
• 离线支持：Service Worker（PWA能力）
• 部署平台：Vercel（零配置部署）
• 字体：Inter, PingFang SC, Microsoft YaHei

📁 项目结构

robotics-learning-platform/
├── index.html              # 主页面（含文档中心、移动导航）
├── styles.css              # 样式表（含响应式设计、移动端优化）
├── app.js                  # 核心应用逻辑（学习系统、数据管理）
├── document-manager.js     # 文档中心模块（上传、预览、OCR）
├── sw.js                   # Service Worker（离线缓存策略）
├── data/
│   ├── questions.json      # 题库数据（300题）
│   └── tutorials.json      # 交互式教程数据
├── parse_questions.py      # 题库解析脚本
├── DEMO.md                 # 原始题库来源
├── favicon.svg             # 网站图标
└── README.md               # 项目说明

🎉 快速开始

方法一：直接打开（推荐）

1. 下载或克隆本项目
2. 使用浏览器打开 index.html 文件
3. 开始学习！

⚠️ 提示：直接打开文件模式下无法注册 Service Worker，离线缓存功能不可用。若需要完整 PWA 体验，请使用方法三或部署到 HTTPS 环境。

方法二：使用Vercel部署

# 安装Vercel CLI
npm i -g vercel

# 部署项目
vercel

# 或使用GitHub集成自动部署
# 1. 推送到GitHub仓库
# 2. 在Vercel导入项目
# 3. 自动部署完成

方法三：使用本地服务器

# 使用Python内置服务器
python3 -m http.server 8000

# 或使用Node.js的http-server
npx http-server -p 8000

# 然后在浏览器中访问
# http://localhost:8000

📖 使用指南

数据管理（新功能）

导出数据

1. 点击顶部导航栏的「导出数据」按钮
2. 系统自动下载JSON文件到本地
3. 文件包含所有学习数据（进度、笔记、统计等）

导入数据

1. 点击顶部导航栏的「导入数据」按钮
2. 选择之前导出的JSON文件
3. 系统自动恢复所有数据
4. 页面刷新后即可看到恢复的数据

数据分析（新功能）

1. 点击导航栏的「📊 数据分析」按钮
2. 查看学习统计看板：
   • 连续学习天数
   • 总学习时长
   • 待复习题目数量
   • 笔记数量
3. 查看可视化图表：
   • 学习趋势图（最近14天）
   • 知识点分布图

复盘回顾（新功能）

1. 点击导航栏的「📝 复盘回顾」按钮
2. 三大功能标签：
   • 待复习：查看到期需要复习的题目
   • 我的笔记：查看所有个人笔记
   • 错题集：查看所有答错的题目
3. 每个题目显示详细的复习信息

文档中心（新功能）

1. 点击导航栏的「📄 文档中心」按钮
2. 上传文档：
   • 拖拽文件到上传区域，或点击「选择文件」按钮
   • 支持 PDF、JPG、PNG、JPEG 格式，单文件最大 10MB
   • 图片自动进行 OCR 识别（中英文）
3. 管理文档：
   • 使用搜索框快速查找文档
   • 按类型筛选（PDF、图片）
   • 点击文档卡片查看预览
4. 预览和操作：
   • 左侧：文档列表
   • 右侧：预览区域 + OCR 识别结果
   • 可下载、删除单个文档，或一键清空所有文档
   • OCR 文字可一键复制

交互式教程

1. 点击导航栏的「📚 交互教程」按钮
2. 左侧选择知识模块，展开查看课程列表
3. 点击课程开始学习
4. 完成自测题后自动标记为已掌握

模块概览

1. 点击导航栏的「模块概览」按钮
2. 查看各模块的学习进度和教程完成情况
3. 点击「进入交互教程」或「进入针对性练习」

练习模式

1. 点击导航栏的「练习」按钮
2. 使用筛选器选择特定模块或题型
3. 逐题作答并提交
4. 查看即时反馈和正确答案解析
5. （新）系统自动记录学习时长和答题统计

模拟考试

1. 点击导航栏的「模拟考试」按钮
2. 点击「开始考试」
3. 系统随机抽取30道题
4. 计时答题
5. 提交后查看成绩和用时

💾 数据持久化详情

LocalStorage 键值

• robotics_learning_progress: 练习题进度
• robotics_learning_lessons: 教程学习进度
• robotics_learning_notes: 用户笔记
• robotics_learning_review: 复习计划
• robotics_learning_analytics: 学习统计数据
• theme: 主题设置（light/dark）

IndexedDB 数据库

• 数据库名称：RoboticsLearningDocuments
• 存储对象：documents
• 存储内容：文档文件（PDF、图片）+ OCR 结果
• 存储策略：Base64 编码，支持离线访问

导出数据格式

{
  "version": "1.0.0",
  "exportDate": "2024-01-01T00:00:00.000Z",
  "data": {
    "questionProgress": { /* 练习进度 */ },
    "lessonProgress": { /* 教程进度 */ },
    "notes": { /* 个人笔记 */ },
    "reviewSchedule": { /* 复习计划 */ },
    "analytics": { /* 统计数据 */ }
  }
}

🎨 特色设计

现代UI设计

• 流畅动画和过渡效果
• 渐变背景和模糊效果
• 卡片式布局
• 基于CSS变量的主题色彩

亮暗主题

• 点击右上角主题切换按钮
• 自动保存主题偏好

响应式设计

• 桌面端：完整功能，最佳体验
• 平板：自适应布局
• 手机：垂直排列，触摸优化

🌐 浏览器兼容性

• ✅ Chrome 90+
• ✅ Firefox 88+
• ✅ Safari 14+
• ✅ Edge 90+

🔧 开发与维护

添加新题目

1. 在 DEMO.md 中添加新题目
2. 运行 python3 parse_questions.py 重新生成JSON
3. 刷新浏览器即可看到新题目

修改样式

• 编辑 styles.css 文件
• 使用CSS变量可快速调整主题色

扩展功能

• 所有核心逻辑在 app.js 中
• 使用原生JavaScript，易于理解和修改

📈 第一性原理设计

本平台遵循以下第一性原理：

1. 用户数据主权：所有数据归用户所有，可随时导出
2. 简单至上：纯前端实现，无需后端服务器
3. 效率优先：本地存储，响应迅速
4. 可扩展性：JSON数据格式，易于扩展
5. 离线可用：所有功能无需网络连接
6. 数据安全：数据存储在用户本地，不上传到服务器

🚀 部署到Vercel

使用Vercel CLI

vercel

使用GitHub集成

1. 推送代码到GitHub
2. 在Vercel控制台导入项目
3. 自动部署完成

vercel.json配置（已包含）

{
  "routes": [
    {
      "src": "/[^.]+",
      "dest": "/index.html"
    }
  ]
}

🆕 版本更新记录

v2.0.0 - 综合性学习平台（当前版本）

• ✨ 新增数据导入/导出功能
• ✨ 新增数据分析系统
• ✨ 新增复盘回顾系统（智能复习、笔记、错题集）
• ✨ 新增学习时长追踪
• ✨ 新增连续学习天数统计
• ✨ 新增多维度学习分析
• 🎨 优化UI设计
• 🚀 优化Vercel部署支持

v1.0.0 - 基础学习平台

• 📚 交互式教程系统
• 💡 300道练习题
• 🎯 模拟考试功能
• 📊 基础进度追踪

💡 学习建议

1. 系统学习：从交互教程开始，掌握理论知识
2. 定期练习：每天坚持练习，利用连续学习天数功能
3. 记录笔记：为重要题目添加笔记，方便复习
4. 关注复习：及时完成到期的复习题目
5. 分析数据：定期查看数据分析，了解学习状况
6. 导出备份：定期导出学习数据，防止数据丢失
7. 跨设备学习：通过导入导出功能在多设备间同步进度

🤝 贡献

欢迎提交Issue和Pull Request！

📄 许可证

MIT License

📧 联系方式

如有问题或建议，欢迎反馈。

---

© 2024 机器人学院 - 从零基础到满分，掌握服务机器人核心技术

新一代综合性智能学习平台 | 支持数据导入导出 | 跨设备学习 | 智能复习系统