# 每日一题 · 小学奥数 · 第 58 题

> 活页公开模板 `sample-daily-puzzle` · 场景: 每日一练 · 打卡 · 行业: 教育培训
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://space.24haowan.com/s/kI8pUDt8QhyI · 详情: https://space.24haowan.com/examples/sample-daily-puzzle

## 这是什么

每日一题 · 老师每天发一道题，孩子页内作答、交卷看讲解

## 什么时候用

数学老师、培训机构、学习社群每天在家长群发一道题，要孩子在页面里计时作答、交卷后马上看到对错和一步步的讲解，再看到今天多少人答对、谁最快，选它：图形计数、找规律、应用题都合适，往期题目留在页内可以翻。要每天背单词、打卡累计天数的，选 sample-words-daily；要一屏一题、测完出一张结果海报的趣味测试，选 sample-quiz-card；排一份长期的学习计划并打卡，选 sample-study-plan。

## 用户对助手说的原话

帮我做一个每日一题的网页，每天发到家长群让孩子做：小学奥数第 58 题「数一数图中有几个三角形」（一个大三角形，顶点向底边连两条线，中间再一条平行底边的横线，答案 12 个）。手机竖屏为主；电脑上左边是题目大图，右边固定作答栏。页头写老师的小课堂名、第几题、日期、难度和建议用时。题目画在方格纸背景上，图用矢量画、打开时线条一条条画出来，右上角一个计时器从打开页面开始走；图里每一小块能点着涂色，并提示「拼起来是不是一个三角形」，下面一个拖动的滑块分三步给提示。作答有一道选择题（4 个选项）和一道填空加问（再加一条横线一共几个），填孩子称呼和年级后交卷，存进一张数据表（称呼、年级、答案、用时秒数）。交卷后就地显示每问对错和用时，并解锁分步讲解：在图上一个一个把三角形描出来，计数从 0 数到 12，可播放暂停单步，下面列出全部三角形的名字和算式。再往下是今日战况：读这张表算正确率环形图、第 1 问各选项人数的横条图、最快答对前五名。最后是往期 5 道题，用标签切换，每题配一张小图，答案折叠起来。颜色清爽，少用底色块。以后每天换题更新同一个链接。

如果你还没有活页连接器（MCP），先读 https://space.24haowan.com/for-agents.md ，照里面的说明接入，或不登录直接发布。

## 照着做一份

1. 读入口文件 https://space.24haowan.com/examples/sample-daily-puzzle/source/index.html（它引用的其他文件见下方列表）。
2. 保留结构、版式和交互，把内容**全部**换成用户自己的；模板里的公司、人名、数字都是虚构的，一样都别留。
3. 交付一个自包含的单文件 HTML：样式写在页面里，不引外部字体 / 脚本 / CDN；手机 375 宽和电脑 1440 宽都要好看，模板有暗色就保留暗色。
4. 要发成微信里能打开、改了链接不变的网页：接入活页（https://space.24haowan.com/for-agents.md）后发布；没有账号也可以让用户在 https://space.24haowan.com/quick 上传这个文件。
5. 没有活页工具、但能发 HTTPS 请求：把做好的 HTML 以 Content-Type: text/html POST 到 https://space.24haowan.com/api/quick?client=template-sample-daily-puzzle ，返回预览链接、7 天分享与认领链接（登录后保留、链接不变）。

## 页面结构

- 题目
- 作答
- 分步讲解
- 今日战况
- 往期题目

## 文件（公开，纯文本）

- https://space.24haowan.com/examples/sample-daily-puzzle/source/index.html（入口）

## 发成活页之后还能做的

- 页内作答写回数据表（原生表单 POST ./_data/answers 打底，脚本在时页内提交），answer 写成「选项,填空」，seconds 是用时
- 页面读回答题表：今日正确率环形图、第 1 问选项分布、「最快答对」前五三处同源，交卷的人在榜上标出「你」
- 交卷后解锁讲解：SVG 一步步把 12 个三角形描出来计数，可播放、暂停、单步
- 同一链接每天换题（往期留在页内），阅读回执看看家长看到了哪一节；微信卡片（share.title / share.desc）

## 发之前要备好

- 数据表 answers（列 name / grade / answer / seconds，append_open=true）：交卷写进这里，answer 是「选项,填空」（如 C,18），seconds 是从打开页面到交卷的秒数；页面读回算今日正确率、选项分布和最快答对前五。发布前先用 set_data 建好；每天换题前用 set_data delete=true 删表再建一张空表，读者交的行才会清零
- 排行榜会显示孩子的称呼和年级：页面上提示家长填小名，不要填全名

## 模板说明（README）

模板市场第三轮补齐的模板之一（总览见 `core/space/examples/README.md`，品质标准见 `core/space/examples/QUALITY.md`）。虚构的「周老师的数学小灶」每天早上 7:30 在四年级奥数家长群发一道题，这是第 58 题「数一数图中有几个三角形」。示例内容均为虚构。

## 演示哪个特色

**题目能点、能拖，交卷就出对错和讲解 —— 作答写回数据表，页面读回算今天的正确率和排行。**

- **记忆点**是方格纸上那张图形题：打开时 6 条线一条条画出来；图里 6 个小块都能点着涂黄，下面实时说「拼起来是一个三角形 ✓ / 不是三角形」；一根滑块拖到第 1 / 2 / 3 格，提示一条条多出来，图上同时亮出对应的线。右上角计时器从打开页面开始走（全页唯一的循环动效是它的小圆点）。
- 作答两问：选择题（9 / 10 / 12 / 15 个）+ 填空加问（再加一条横线一共几个），填孩子称呼和年级后交卷。交卷后表单收起，就地出每一问的对错、用时，以及「进了今天最快前五，排第几」。
- **分步讲解**交卷后解锁（之前是模糊的，也可以点「不做了，直接看讲解」）：讲解图上 12 个三角形按「横线 FI 一层、底边 BC 一层」一个个描出来（Web Animations 描边 + 填色），计数从 0 到 12，可播放 / 暂停 / 单步，下面三角形名字跟着亮。
- **今日战况**：正确率环形图、第 1 问各选项人数横条（SVG）、「最快答对」前五，交卷的人在榜上标「（你）」。再次打开页面时，读到自己交过的那一行（`_mine`）会直接显示结果、停住计时、解锁讲解。
- **答案都算过**：第 1 问每个三角形 = 两条从 A 出发的斜线 + 一条横线，4 条斜线挑 2 条有 6 种，2 条横线 ⇒ 12 个；第 2 问 3 条横线 ⇒ 18 个。往期 5 题：线段 10 条、3 × 3 方格正方形 14 个、鸡兔同笼兔 4 只、2 × 3 格子长方形 18 个、三角形数 21。
- **数字自洽**：脚本里的 `BASE`（发页时 46 人作答、31 人答对、选项分布 3 / 8 / 33 / 2、最快前五）是初值，页面读 `./_data/answers.json` 把每一行加进去；环形图、选项横条、排行三处同一个来源。
- 降级：脚本不跑时题目、提示、讲解（名字列表与算式）、往期题目与答案全部静态可读，文末原生表单（`<form method="post" action="./_data/answers">`）能交选择题（填空和用时要脚本）；`prefers-reduced-motion` 时画线、描边、进场动效都停在终态。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| `.brand` / `h1` / `.meta` | 小课堂名和群名、第几题、日期、题型、难度、建议用时 |
| `#question` 的 `.qtext` 与 `#fig` | 题干和图。换图形题时改 `#fig` 里的线和点；涂色小块是 `#regions` 里的 `polygon`（`data-r` 上层 `u0–u2`、下层 `l0–l2`），判断「是不是三角形」的规则在脚本 `judge()`；不是图形题可以整段换成文字题，删掉涂色那一行 |
| `#htext` | 三条提示，越往后越接近答案 |
| `#answer` 选项与第 2 问 | 选项文字、脚本里的 `KEY`（正确答案 `q1` / `q2`）和 `LABEL` |
| 脚本 `P` / `TRIS` / `CAPS` 与 `#n-up` `#n-low` `.sum` | 讲解动画要描的图形（点坐标、每一步的三角形、每一步的说明）、名字列表、算式 |
| 脚本 `BASE` 与 `#today` 的静态数字 | 发页时的作答人数、答对人数、选项分布、最快前五；新题发出去时写 `n: 0, right: 0`、分布全 0、`fast: []`，静态数字同步改（`stroke-dashoffset` = 326.73 × (1 − 答对 / 作答)，横条最长一条宽 230） |
| `#past` | 往期题目：每天把昨天那题挪进来，最多留 5 题，答案放 `<details>` 里 |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致，测试咬着）+ 一句适用场景；发自己的题时整段删掉 |
| `manifest.json` | `title` / `share.title` / `share.desc`（微信卡片上的字），每天换题号 |

## 数据表

作答写进数据表 `answers`（列 `name` 孩子称呼 / `grade` 年级 / `answer` 「选项,填空」如 `C,18` / `seconds` 用时秒数，`append_open=true`）。发之前先建表：

```
set_data  proposal_id: <id>  table: "answers"  columns: ["name","grade","answer","seconds"]  rows: []  append_open: true  revision: 0
```

用 `list_data_rows table=answers` 读回，挑出答错的孩子单独讲。**每天换题**：先用 `set_data` 传 `delete: true` 删掉昨天的 `answers`（读者交的行会一起删掉），再按上面建一张空表，然后发新一版页面（同一个链接）。想收卷就传 `append_open: false`，页面会提示「这道题已经收卷了」。
排行榜会显示称呼和年级，提醒家长填小名。本地 `space-cli serve` 会把作答写进包里的 `_data/answers.json`，试完记得改回 `[]`。

## 怎么发出去

```bash
export SPACE_TOKEN=sk-space-…            # MCP create_cli_token
node core/space/cli/space-cli.mjs push core/space/examples/sample-daily-puzzle \
  --proposal <proposal_id> --manifest core/space/examples/sample-daily-puzzle/manifest.json --hold
```

没有终端时也可以 MCP `publish_file`（`filename: "index.html"`、`content` 为全文、`manifest` 为 manifest.json 去掉 entry、`hold: true`），再按上面建表。确认后把链接转进家长群；每天早上换题可以交给定时任务，按「数据表」那一节先清表再发新版。

## 素材

- 没有位图：题图、讲解图、往期小图和标志都是内联 SVG；小课堂、老师、孩子称呼与统计数字均为虚构。
- `thumb.webp` / `phone.webp`：画廊缩略图与手机首屏图，由 `examples/verify-shots.mjs --write-thumb --write-phone` 从成品截出，不进发布包。