103 lines
6.7 KiB
Markdown
103 lines
6.7 KiB
Markdown
|
## 1. 产品概述
|
|||
|
|
|
|||
|
|
问卷调查系统是一个功能完善的在线考试平台，支持多种题型、随机抽题、免注册答题等特性。系统主要解决企业、教育机构等组织的在线测评需求，提供便捷的题库管理和答题体验。
|
|||
|
|
|
|||
|
|
目标用户包括需要组织问卷调查的管理员和参与答题的普通用户，系统通过简化操作流程和提供友好的界面设计，提升在线测评的效率和用户体验。
|
|||
|
|
|
|||
|
|
## 2. 核心功能
|
|||
|
|
|
|||
|
|
### 2.1 用户角色
|
|||
|
|
|
|||
|
|
| 角色 | 注册方式 | 核心权限 |
|
|||
|
|
|------|----------|----------|
|
|||
|
|
| 普通用户 | 免注册，答题前填写基本信息 | 参与答题、查看答题结果 |
|
|||
|
|
| 管理员 | 系统预设账号登录 | 题库管理、配置抽题规则、查看统计数据 |
|
|||
|
|
|
|||
|
|
### 2.2 功能模块
|
|||
|
|
|
|||
|
|
问卷调查系统包含以下主要页面：
|
|||
|
|
|
|||
|
|
1. **用户答题页**：信息收集、题目展示、答题交互、结果提交
|
|||
|
|
2. **管理员登录页**：管理员身份验证
|
|||
|
|
3. **题库管理页**：Excel导入、题目编辑、题库查看
|
|||
|
|
4. **抽题配置页**：题型比例设置、总分配置、抽题规则管理
|
|||
|
|
5. **数据统计页**：答题记录查看、统计分析、数据导出
|
|||
|
|
|
|||
|
|
### 2.3 页面详情
|
|||
|
|
|
|||
|
|
| 页面名称 | 模块名称 | 功能描述 |
|
|||
|
|
|----------|----------|----------|
|
|||
|
|
| 用户答题页 | 信息收集模块 | 收集用户姓名（2-20字符中英文）和中国手机号（11位数字，1开头，第二位3-9），提供实时格式验证和错误提示 |
|
|||
|
|
| 用户答题页 | 题目展示模块 | 根据配置随机展示题目，支持单选、多选、判断、文字描述四种题型，题目内容清晰展示 |
|
|||
|
|
| 用户答题页 | 答题交互模块 | 单选题提供4个选项单选，多选题提供4-6个选项多选，判断题提供正确/错误选择，文字描述题提供文本输入框 |
|
|||
|
|
| 用户答题页 | 结果提交模块 | 收集所有答案，计算得分，保存答题记录，显示答题完成状态 |
|
|||
|
|
| 管理员登录页 | 身份验证模块 | 提供用户名密码登录界面，验证管理员身份，支持记住登录状态 |
|
|||
|
|
| 题库管理页 | Excel导入模块 | 支持上传Excel文件，验证文件格式，解析题目内容，批量导入题库，提供导入错误明细 |
|
|||
|
|
| 题库管理页 | 题目编辑模块 | 支持单题添加、编辑、删除，提供题型选择、内容编辑、选项设置、答案配置、分值设定 |
|
|||
|
|
| 题库管理页 | 题库查看模块 | 分页展示所有题目，支持按题型筛选，显示题目内容、题型、分值等关键信息 |
|
|||
|
|
| 抽题配置页 | 题型比例设置 | 设置单选、多选、判断、文字描述四种题型的比例，确保总和为100% |
|
|||
|
|
| 抽题配置页 | 总分配置模块 | 设置试卷总分，系统根据题型比例和各题分值自动计算各题型题目数量 |
|
|||
|
|
| 数据统计页 | 答题记录查看 | 展示所有用户答题记录，包括用户信息、答题时间、总得分等 |
|
|||
|
|
| 数据统计页 | 统计分析模块 | 按题型统计正确率，按时间统计答题趋势，支持数据筛选和排序 |
|
|||
|
|
| 数据统计页 | 数据导出模块 | 支持导出答题记录、统计报表，提供Excel格式导出 |
|
|||
|
|
|
|||
|
|
## 3. 核心流程
|
|||
|
|
|
|||
|
|
### 普通用户流程
|
|||
|
|
用户访问系统 → 填写个人信息（姓名+手机号）→ 系统验证信息格式 → 进入答题页面 → 系统根据配置随机抽题 → 用户逐题作答 → 提交答案 → 系统计算得分 → 保存答题记录 → 显示答题完成
|
|||
|
|
|
|||
|
|
### 管理员流程
|
|||
|
|
管理员登录 → 进入后台管理 → 题库管理（Excel导入/手动编辑）→ 抽题配置（设置题型比例和总分）→ 数据统计（查看答题记录和统计分析）
|
|||
|
|
|
|||
|
|
```mermaid
|
|||
|
|
graph TD
|
|||
|
|
A[用户访问] --> B{是否管理员}
|
|||
|
|
B -->|是| C[管理员登录]
|
|||
|
|
B -->|否| D[填写个人信息]
|
|||
|
|
C --> E[后台管理首页]
|
|||
|
|
D --> F[信息验证]
|
|||
|
|
F --> G[开始答题]
|
|||
|
|
E --> H[题库管理]
|
|||
|
|
E --> I[抽题配置]
|
|||
|
|
E --> J[数据统计]
|
|||
|
|
H --> K[Excel导入/题目编辑]
|
|||
|
|
I --> L[设置题型比例和总分]
|
|||
|
|
G --> M[随机抽题展示]
|
|||
|
|
M --> N[答题完成]
|
|||
|
|
N --> O[计算得分并保存]
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 4. 用户界面设计
|
|||
|
|
|
|||
|
|
### 4.1 设计风格
|
|||
|
|
- **主色调**：蓝色系（#1890ff）为主，体现专业和可信赖感
|
|||
|
|
- **辅助色**：灰色系（#f0f2f5）用于背景和分隔
|
|||
|
|
- **按钮样式**：圆角矩形设计，主要按钮使用主色调，次要按钮使用边框样式
|
|||
|
|
- **字体选择**：系统默认字体，标题16-18px，正文14px，小字12px
|
|||
|
|
- **布局风格**：卡片式布局，内容分区清晰，留白适当
|
|||
|
|
- **图标风格**：使用简洁的线性图标，保持视觉一致性
|
|||
|
|
|
|||
|
|
### 4.2 页面设计概述
|
|||
|
|
|
|||
|
|
| 页面名称 | 模块名称 | UI元素 |
|
|||
|
|
|----------|----------|--------|
|
|||
|
|
| 用户答题页 | 信息收集模块 | 居中卡片布局，白色背景，输入框带边框和圆角，错误提示使用红色文字，验证通过显示绿色勾选图标 |
|
|||
|
|
| 用户答题页 | 题目展示模块 | 题目编号和内容为黑色文字，选项使用单选/多选按钮，选中状态使用主色调高亮，题目间有明显分隔线 |
|
|||
|
|
| 用户答题页 | 答题交互模块 | 单选题使用圆形单选按钮，多选题使用方形复选框，判断题使用按钮式选择，文字描述题使用多行文本域 |
|
|||
|
|
| 管理员登录页 | 身份验证模块 | 简洁的登录表单，居中显示，包含用户名密码输入框和登录按钮，支持记住密码选项 |
|
|||
|
|
| 题库管理页 | Excel导入模块 | 拖拽上传区域，显示上传进度，错误信息使用红色警告框展示，成功导入显示绿色确认消息 |
|
|||
|
|
| 题库管理页 | 题目列表模块 | 表格形式展示，每行显示题目关键信息，操作按钮使用图标+文字，支持分页和筛选 |
|
|||
|
|
| 抽题配置页 | 比例设置模块 | 滑块或数字输入框设置百分比，实时显示当前比例总和，超出100%时显示警告 |
|
|||
|
|
| 数据统计页 | 图表展示模块 | 使用柱状图展示题型正确率，折线图展示答题趋势，表格展示详细数据，支持导出按钮 |
|
|||
|
|
|
|||
|
|
### 4.3 响应式设计
|
|||
|
|
- **桌面优先**：基础设计以桌面端为主，确保功能完整性
|
|||
|
|
- **移动端适配**：使用媒体查询实现响应式布局，移动端采用单列布局
|
|||
|
|
- **触摸优化**：按钮和交互元素在移动端增大点击区域，支持触摸滑动操作
|
|||
|
|
- **断点设置**：768px作为移动端和桌面端的分界点
|
|||
|
|
|
|||
|
|
### 4.4 数据可视化
|
|||
|
|
- **图表类型**：使用ECharts或Chart.js实现数据可视化
|
|||
|
|
- **颜色配置**：图表颜色与主色调保持一致，使用蓝色系渐变
|
|||
|
|
- **交互效果**：支持图表悬停显示详细数据，点击切换不同统计维度
|
|||
|
|
- **导出功能**：支持图表和数据表格的Excel导出，保持格式美观
|