112 lines
3.8 KiB
Markdown
112 lines
3.8 KiB
Markdown
# 古诗文答题系统前端设计文档
|
||
|
||
## 概述
|
||
为 `p1/api.php` API 创建一个古风风格的前端答题页面，包含题目获取、答案提交、提示功能和答题统计。
|
||
|
||
## 设计决策
|
||
|
||
### 布局风格
|
||
- **选择**: 单卡片居中布局
|
||
- **原因**: 答题系统一次只显示一道题，居中卡片布局更专注
|
||
|
||
### 配色方案
|
||
- **选择**: 古风配色
|
||
- **原因**: 符合古诗文主题，营造文化氛围
|
||
|
||
### 功能模块
|
||
- 答题统计（答对/总题数）
|
||
- 题目导航（数字按钮）
|
||
- 题目详情（作者、朝代、年级、类型）
|
||
|
||
## 页面架构
|
||
|
||
```
|
||
┌─────────────────────────────────────────────┐
|
||
│ 页面头部 │
|
||
│ 📜 古诗文答题 · 统计信息 │
|
||
├─────────────────────────────────────────────┤
|
||
│ ┌─────────────────┐ │
|
||
│ │ 题目导航条 │ │
|
||
│ │ 1 2 3 4 5 ... │ │
|
||
│ └─────────────────┘ │
|
||
│ │
|
||
│ ┌─────────────────┐ │
|
||
│ │ 题目卡片 │ │
|
||
│ │ (宣纸质感) │ │
|
||
│ │ [选项按钮] │ │
|
||
│ │ 💡 提示按钮 │ │
|
||
│ └─────────────────┘ │
|
||
│ │
|
||
│ ┌─────────────────┐ │
|
||
│ │ 题目详情 │ │
|
||
│ │ 作者·朝代·年级 │ │
|
||
│ └─────────────────┘ │
|
||
└─────────────────────────────────────────────┘
|
||
```
|
||
|
||
## 配色方案
|
||
|
||
```css
|
||
--bg-primary: #f5f0e6; /* 米色背景 */
|
||
--bg-card: #fffef9; /* 宣纸白 */
|
||
--text-primary: #5d4e37; /* 棕色文字 */
|
||
--text-secondary: #8b7355; /* 浅棕色 */
|
||
--accent: #c94c4c; /* 朱红色（印章色） */
|
||
--border: #d4c5a9; /* 边框色 */
|
||
--success: #4a7c59; /* 正确提示绿 */
|
||
--error: #c94c4c; /* 错误提示红 */
|
||
```
|
||
|
||
## 视觉元素
|
||
|
||
- 卡片圆角: 12px
|
||
- 选项按钮: 印章风格，方形圆角，悬停时微微放大
|
||
- 动画: 平滑过渡 0.3s
|
||
- 字体: 题目使用「楷体」，选项使用「微软雅黑」
|
||
|
||
## 交互流程
|
||
|
||
1. 页面初始化 → 从 URL 获取 id 参数（默认 id=1）
|
||
2. 调用 API 获取题目 → 显示题目卡片
|
||
3. 用户选择选项 → 提交答案
|
||
4. API 返回结果 → 显示反馈
|
||
- 正确: 显示成功动画，自动加载下一题
|
||
- 错误: 显示错误提示，可点击「提示」按钮
|
||
- 提示: 显示提示信息
|
||
|
||
## API 调用
|
||
|
||
```javascript
|
||
// 获取题目
|
||
GET api.php?id=1
|
||
|
||
// 提交答案
|
||
GET api.php?id=1&msg=1
|
||
|
||
// 获取提示
|
||
GET api.php?id=1&msg=提示
|
||
```
|
||
|
||
## 状态管理
|
||
|
||
- `currentId`: 当前题目 ID
|
||
- `correctCount`: 答对题数
|
||
- `totalCount`: 总答题数
|
||
- `selectedOption`: 当前选中选项
|
||
|
||
## 文件结构
|
||
|
||
```
|
||
p1/
|
||
├── index.html # 页面结构
|
||
├── api.js # API 调用与交互逻辑
|
||
├── api.php # 后端 API
|
||
└── API文档.md # API 文档
|
||
```
|
||
|
||
## 错误处理
|
||
|
||
- 网络错误: 显示友好提示，提供重试按钮
|
||
- API 错误: 显示错误信息
|
||
- 题目不存在: 提示用户
|