# 古诗文答题系统前端设计文档

## 概述
为 `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 错误: 显示错误信息
- 题目不存在: 提示用户