# 每日 5 词 · 雅思 · 第 12 天

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

## 这是什么

每日 5 词 · 背单词翻卡、小测和打卡榜

## 什么时候用

每天一小组内容让人点开就练：背单词、每日一题、口语句型，翻卡记、小测检查、打卡进同一张榜，适合老师或学习群每天发一个链接，大家在里面打卡比分数。要把整段备考的阶段安排、日历打卡和分数目标放在一页、自己长期记的选 sample-study-plan；要教别人一步一步做事选 sample-handbook。

## 用户对助手说的原话

帮我做一个每天背 5 个单词的打卡小页，发成一个网页链接：页头一个词库标签、连续打卡天数和「每日 5 词 · 第几天」，下面三段进度；第一步是一叠单词卡，正面是单词、音标、词性，轻点翻面看释义、例句（带中文）和一句记忆法，右滑或点「认识」、左滑或点「不认识」，滑动时卡上盖「认识 / 不认识」的章；五张翻完进第二步，三道选择题小测，选完当场标对错并给出正确答案；第三步显示今天的分数（认识几个 + 答对几题）、一行两周的打卡日历（今天那格虚线框，打卡后填色弹一下），一个只填昵称的打卡表单，提交后存到一张数据表，下面的今日打卡榜从同一张表读回、按分数排、我的那行高亮。颜色清爽、大圆角卡片，手机上单手能滑。以后每天早上 7 点换新词，更新同一个链接。

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

## 照着做一份

1. 读入口文件 https://space.24haowan.com/examples/sample-words-daily/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-words-daily ，返回预览链接、7 天分享与认领链接（登录后保留、链接不变）。

## 页面结构

- 翻卡
- 小测
- 打卡

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

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

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

- 每天 7:00 往同一链接换新词（每天发一个新版本）
- 打卡写回数据表 checkins（原生表单 POST ./_data/checkins，脚本在时页内提交），打卡榜读回同一张表（./_data/checkins.json）
- 阅读回执（谁练到了哪一步：翻卡 / 小测 / 打卡）

## 发之前要备好

- 数据表 checkins（列 name / day / score，append_open=true）：打卡表单写进这里，打卡榜从同一张表读回；发布前先用 set_data 建好
- 每天定时换新词：让助手每天早上跑一次（需要助手那边能设定时任务），改 WORDS / QUIZ 与 DAY，用同一个 proposal_id 发新版本

## 模板说明（README）

按 `core/space/examples/QUALITY.md` 整理成模板市场的样例包。示例内容，人名与数据均为虚构。

## 演示哪个特色

**页内写回数据表再读回 + 每天往同一条链接换新内容。**

- 三步，一屏一步：翻卡（`#cards`）→ 小测（`#test`）→ 打卡（`#checkin`）。`id` = `data-track-section` = `manifest.sections[].anchor`，
  阅读回执能看出读者练到了哪一步；壳页目录点某一步，页内脚本收到 `{space:'goto'}` 就切到那一步。
- 打卡是一张原生 `<form method="post" action="./_data/checkins">`（昵称 + 隐藏的 day / score）：不跑脚本也能提交；
  脚本在时 `fetch` 页内提交，就地显示「打卡成功」，日历今天那格填色。
- 今日打卡榜从同一张表读回：`fetch('./_data/checkins.json')`，按 `day` 过滤、按分数排；自己那行（`_mine`）高亮，
  被审核拦下的行（`_status:"held"`）只有提交的人自己看得到，标「审核中」。
- 记忆点是那叠单词卡：轻点翻面（3D），左右滑带「认识 / 不认识」的章，iOS 微信左缘 24px 留给右滑返回。
- 浅色 / 深色两套（`prefers-color-scheme` + `:root[data-theme]`，manifest `theme:"system"`）。

## 改哪里变成我的

| 位置 | 改什么 |
|---|---|
| 页头 `.tag` / `#streakN` / `h1` | 词库名、连续天数、第几天 |
| 脚本 `DAY` | 今天是第几天：打卡写进去的 `day`，打卡榜也按它过滤 |
| `WORDS` | 五个词：`w` 单词、`ph` 音标、`pos` 词性、`m` 释义、`ex` / `exz` 例句与翻译、`memo` 记忆法 |
| `QUIZ` | 三道题：`q` 题干、`o` 三个选项、`a` 正确选项的下标 |
| `renderCal` | 日历显示几天（现在 1–14）、已打卡到哪天 |
| `_data/checkins.json` | 本地 `space-cli serve` 用的示例行（列 `name` / `day` / `score`）；上线后数据在平台的表里 |
| 页脚 | 平台标志与名称与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致（测试咬着），发自己的时候整段删掉 |
| `manifest.json` | `title` / `share.title`（第几天跟着改）/ `share.desc` |

## 数据表

打卡写进数据表 `checkins`（列 `name` / `day` / `score`，一次打卡一行，`append_open=true`）。发布前先建表：

```
set_data  proposal_id: <id>  table: "checkins"  columns: ["name","day","score"]  rows: []  append_open: true  revision: 0
```

用 `list_data_rows table=checkins` 读回谁打了卡。表跨天保留，榜单只显示 `day` 等于今天的行；想把往期打卡清掉，用 `set_data` 整表替换。

## 怎么发出去

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

没有终端时用 MCP `publish_file`（`files` 里放 `index.html`，`manifest` 传 manifest.json 去掉 `entry`，`hold: true` 先看预览）。
**每天换新词**：改 `WORDS` / `QUIZ` / `DAY` 和标题里的天数，用同一个 `proposal_id` 再发一次 —— 链接不变，群里那条消息一直有效。
给学员看：`set_visibility` 改成 `passcode`（口令可看）或 `public`。

## 素材

- `cover.webp`：分享卡封面，从页面截出。
- `thumb.webp`：画廊缩略图，由 `examples/verify-shots.mjs --write-thumb` 从成品截出，不进发布包。