背题练习应用

基于Vue 3框架开发的现代化背题练习前端应用，支持题目导入、答题练习、进度管理等功能。

功能特性

1. 题目导入与存储

• ✅ 支持拖拽和选择JSON文件上传
• ✅ 自动验证JSON格式和题目结构
• ✅ 支持增量导入，避免重复题目
• ✅ 数据持久化存储到LocalStorage
• ✅ 导入成功/失败反馈提示

2. 题目数据处理

• ✅ 严格解析JSON格式题目数据
• ✅ 智能解析选项格式（使用"、"分隔符）
• ✅ 支持单选题和多选题
• ✅ 答案匹配和高亮显示

3. 界面设计与美化

• ✅ 基于Tailwind CSS的现代化界面
• ✅ 完全响应式设计，适配各种设备
• ✅ 清晰的视觉层次结构
• ✅ 流畅的动画和过渡效果
• ✅ 美观的卡片式布局

4. 设置功能

• ✅ 清除LocalStorage数据
• ✅ 重置学习进度
• ✅ 确认机制防止误操作
• ✅ 简洁明了的设置界面

5. 键盘快捷键

• ✅ 数字键1-9快速选择选项
• ✅ 左右方向键切换题目
• ✅ Enter键提交答案
• ✅ Esc键关闭弹窗
• ✅ 快捷键帮助提示

6. 题目列表与状态

• ✅ 左侧题目列表导航
• ✅ 按章节分组显示
• ✅ 题目状态标识（未答/正确/错误）
• ✅ 当前题目高亮显示
• ✅ 快速跳转功能

7. 答题与判断

• ✅ 多选题形式答题
• ✅ 即时答案判断
• ✅ 正确答案高亮显示
• ✅ 答题历史记录
• ✅ 进度统计和反馈

技术栈

• 前端框架: Vue 3 + Composition API
• 状态管理: Pinia
• 样式框架: Tailwind CSS
• 构建工具: Vite
• 图标: SVG内联图标
• 数据存储: LocalStorage

项目结构

src/
├── assets/
│   └── main.css          # 全局样式和Tailwind配置
├── components/
│   ├── FileUpload.vue    # 文件上传组件
│   ├── QuestionList.vue  # 题目列表组件
│   ├── QuestionDisplay.vue # 答题界面组件
│   └── SettingsModal.vue # 设置弹窗组件
├── composables/
│   └── useKeyboardShortcuts.js # 键盘快捷键组合式函数
├── stores/
│   └── question.js       # Pinia状态管理
├── App.vue              # 主应用组件
└── main.js              # 应用入口文件

安装和运行

1. 安装依赖

npm install

2. 启动开发服务器

npm run dev

3. 构建生产版本

npm run build

4. 预览生产版本

npm run preview

使用方法

1. 导入题目

• 点击"选择文件"按钮或拖拽JSON文件到上传区域
• 支持批量导入和增量导入
• 自动验证文件格式和题目结构

2. 答题练习

• 在题目列表中选择要作答的题目
• 点击选项或使用数字键1-9选择答案
• 按Enter键或点击"提交答案"按钮提交
• 查看答题结果和正确答案

3. 导航和切换

• 使用左右方向键或按钮切换题目
• 在左侧题目列表中点击快速跳转
• 查看题目状态和进度统计

4. 设置管理

• 点击设置按钮打开设置面板
• 重置学习进度或清除所有数据
• 查看快捷键帮助

题目数据格式

应用支持标准JSON格式的题目数据：

[
  {
    "section": "章节名称",
    "problem": "【题型】题目内容",
    "options": [
      "A、选项内容",
      "B、选项内容",
      "C、选项内容",
      "D、选项内容"
    ],
    "answer": ["A"]
  }
]

快捷键

快捷键	功能
1-9	选择对应选项
← →	上一题 / 下一题
Enter	提交答案
Esc	关闭弹窗
Ctrl+?	显示帮助

浏览器兼容性

• Chrome 88+
• Firefox 85+
• Safari 14+
• Edge 88+

错误处理

• JSON格式验证和错误提示
• 文件大小限制（10MB）
• 数据存储异常处理
• 边界情况处理

许可证

MIT License