# 个人答题系统

**Repository Path**: ccccuuuu/personal-answering-system

## Basic Information

- **Project Name**: 个人答题系统
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-24
- **Last Updated**: 2026-05-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 📝 在线答题系统

一个基于 Vue 3 + Vite + Element Plus + Flask 的现代化答题系统。

## ✨ 功能特性

- 🎯 **现代化界面**：采用 Element Plus 组件库，打造专业、高级的视觉效果
- 📱 **响应式设计**：支持各种屏幕尺寸
- ⏱️ **倒计时功能**：实时显示剩余时间，时间不足自动提醒
- 📊 **成绩分析**：直观的成绩展示和详细的答题解析
- 📤 **题目上传**：支持 Word 文档批量上传题目
- 💾 **本地存储**：使用 JSON 文件存储数据

## 🛠️ 技术栈

### 前端
- **框架**: Vue 3 (Composition API)
- **构建工具**: Vite 5
- **UI 组件库**: Element Plus
- **状态管理**: Pinia
- **路由**: Vue Router 4
- **HTTP 客户端**: Axios

### 后端
- **框架**: Python Flask
- **CORS**: flask-cors
- **文档处理**: python-docx
- **数据存储**: JSON 文件

## 📦 安装与运行

### 后端设置

1. 进入后端目录：
```bash
cd backend
```

2. 安装依赖：
```bash
pip install -r requirements.txt
```

3. （可选）创建示例题目文档：
```bash
python create_sample.py
```

4. 解析 Word 文档：
```bash
python parse_word.py
```

5. 启动后端服务：
```bash
python app.py
```

后端服务将运行在 `http://127.0.0.1:5000`

### 前端设置

1. 进入前端目录：
```bash
cd frontend
```

2. 安装依赖（如果还没安装）：
```bash
npm install
```

3. 启动开发服务器：
```bash
npm run dev
```

前端应用将运行在 `http://localhost:5173`

## 📖 使用说明

### 1. 上传题目

- 访问首页
- 点击或拖拽 Word 文档到上传区域
- 文档格式要求：
  ```
    1、题目（）。
    A、 XXXX
    B、 XXXX
    C、 XXXX
    D、 XXXX
    E、 XXXX
    正确答案：ADE
    答案解析：XXXXXXXX。

  ```

### 2. 开始考试

- 设置题目数量（1-100）
- 设置考试时长（5-180 分钟）
- 点击"开始刷题"按钮

### 3. 答题过程

- 使用顶部导航查看进度和倒计时
- 选择答案后自动保存
- 使用底部按钮切换题目
- 可随时提前交卷

### 4. 查看结果

- 提交后自动显示成绩
- 查看详细的答案解析
- 可返回重新考试

## 📁 项目结构

```
my_quiz_app/
├── backend/                  # Python Flask 后端
│   ├── app.py                # Flask 主程序
│   ├── parse_word.py         # Word 解析脚本
│   ├── create_sample.py      # 创建示例文档
│   ├── requirements.txt      # 后端依赖
│   └── data/                 # 数据存储
│       ├── questions.docx
│       ├── questions.json
│       └── records.json
│
└── frontend/                 # Vue 3 前端
    ├── src/
    │   ├── api/              # API 请求封装
    │   ├── components/       # 公共组件
    │   ├── router/           # 路由配置
    │   ├── stores/           # 状态管理
    │   ├── views/            # 页面组件
    │   ├── App.vue           # 根组件
    │   └── main.js           # 入口文件
    ├── index.html
    ├── vite.config.js
    └── package.json
```

## 🔧 API 接口

| 接口 | 方法 | 说明 |
|------|------|------|
| `/api/health` | GET | 健康检查 |
| `/api/upload_questions` | POST | 上传并解析 Word 文档 |
| `/api/get_questions` | GET | 获取所有题目 |
| `/api/start_exam` | POST | 开始考试 |
| `/api/submit_exam` | POST | 提交考试答案 |
| `/api/get_records` | GET | 获取考试记录 |
| `/api/get_record_detail/<session_id>` | GET | 获取单次考试详情 |

## 🎨 界面预览

- **首页**：渐变背景 + 卡片式表单
- **考试页**：吸顶导航 + 倒计时 + 题目卡片
- **结果页**：环形进度条 + 折叠面板解析

## 📝 注意事项

- 确保 Node.js 版本 >= 18
- 确保 Python 版本 >= 3.7
- 首次使用需要先上传题目文档
- 跨域已通过 CORS 和 Vite Proxy 处理

## 🚀 部署

### 前端构建

```bash
cd frontend
npm run build
```

构建后的文件位于 `frontend/dist` 目录，可使用 Nginx 或其他静态服务器部署。

### 后端部署

建议使用 Gunicorn 部署 Flask 应用：

```bash
pip install gunicorn
gunicorn -w 4 -b 0.0.0.0:5000 app:app
```

## 📄 License

MIT

---

Made with ❤️ using Vue 3 + Flask