wushu/ht/docs/superpowers/specs/2026-03-27-poetry-quiz-frontend-design.md

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

概述

为 p1/api.php API 创建一个古风风格的前端答题页面，包含题目获取、答案提交、提示功能和答题统计。

设计决策

布局风格

• 选择: 单卡片居中布局
• 原因: 答题系统一次只显示一道题，居中卡片布局更专注

配色方案

• 选择: 古风配色
• 原因: 符合古诗文主题，营造文化氛围

功能模块

• 答题统计（答对/总题数）
• 题目导航（数字按钮）
• 题目详情（作者、朝代、年级、类型）

页面架构

┌─────────────────────────────────────────────┐
│                  页面头部                    │
│         📜 古诗文答题 · 统计信息             │
├─────────────────────────────────────────────┤
│            ┌─────────────────┐              │
│            │   题目导航条     │              │
│            │  1 2 3 4 5 ...  │              │
│            └─────────────────┘              │
│                                             │
│            ┌─────────────────┐              │
│            │    题目卡片     │              │
│            │   (宣纸质感)    │              │
│            │   [选项按钮]    │              │
│            │   💡 提示按钮   │              │
│            └─────────────────┘              │
│                                             │
│            ┌─────────────────┐              │
│            │   题目详情      │              │
│            │ 作者·朝代·年级  │              │
│            └─────────────────┘              │
└─────────────────────────────────────────────┘

配色方案

--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 调用

// 获取题目
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 错误: 显示错误信息
• 题目不存在: 提示用户