# 测测你是哪种通勤搭子

> 活页公开模板 `sample-quiz-card` · 场景: 互动玩法 · 行业: 自媒体营销 / 教育培训
> 任何人、任何 Agent 都可以读、照着改，不需要账号。示例内容均为虚构。
> 真页面: https://space.24haowan.com/s/vLXo79ISv1zQ · 详情: https://space.24haowan.com/examples/sample-quiz-card

## 这是什么

趣味测试 · 一屏一题，测完出一张能转发的结果卡

## 什么时候用

公众号、社群、课程想做一个让人点开就想答、答完想转发的小测试（性格、学习风格、职场类型、专业匹配），要一屏一题、测完出一张结果海报、并看到大家都测出了什么，选它。只是收报名或投票、不需要算结果，选 sample-event-signup；要每天一题、打卡累计，选 sample-words-daily。

## 用户对助手说的原话

帮我做一个微信里转发用的趣味测试，发成一个网页链接：手机上一屏一画面——封面是测试名、出品的公众号、一句「几道题几分钟」、一个大的开始按钮和一个「已有多少人测过」的小环形图，封面插画要有一点会动的东西；然后一屏一题共 6 题，顶部用一条有 6 站的进度条，每题 4 个卡片式选项，点下去有回弹动效、轻震和一声短音效（有静音按钮），选完自动进下一题、可以退回上一题；最后一屏是「计算中」的小动画，再翻出一张竖版结果海报：一个专门画的角色插画、类型名、三个关键词、一句话、最配的搭子，并画成一张图片供长按保存；下面有「再测一次」「看看全部类型」两个按钮。测完把结果和答案存进一张数据表，页面读回显示总人数和各类型占比的环形图。页面下方列出全部类型的说明；脚本不跑时也能看到全部题目和每个选项算哪一种。插画都用矢量现画，颜色清爽，电脑上居中一块手机大小的舞台。

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

## 照着做一份

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

## 页面结构

- 开始测试
- 全部 6 种
- 大家都是哪种

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

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

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

- 测完把结果写进数据表 results（列 type / answers），页面读回算「已有 N 人测过 · 各类型占比」
- 结果海报用 canvas 画成一张 PNG，微信里长按即可保存；画不出来时保留同样内容的网页版
- 不跑脚本也能用：全部题目（标明每个选项计入哪一种）、6 种结果说明和一张原生表单
- 同一个链接一直开着，改题、加结果后更新同一条链接

## 发之前要备好

- 数据表 results（列 type / answers，append_open=true）：测完自动写进这里（answers 是每题选的字母，如 B,A,D,C,A,B），页面读回算总人数和各类型占比；发布前先用 set_data 建好

## 模板说明（README）

模板市场「互动玩法」那一组的一份（总览见 `core/space/examples/README.md`，品质标准见 `core/space/examples/QUALITY.md`）。
虚构公众号「早八研究所」第 37 期的推送：「测测你是哪种通勤搭子」。示例内容均为虚构。

## 演示哪个特色

**测完就地出一张能保存的结果卡，所有人的结果写回同一张数据表、再读回成占比图。**

- **记忆点**是那条地铁线：封面上 6 个角色站在 6 站上、一列小黄车沿线慢慢跑（全页唯一的循环动画，`prefers-reduced-motion` 时停）；答题时顶部进度就是「第几站」，小车跟着往前开。
- 一屏一题、共 6 题，每题 4 张卡片式选项：点下去有回弹、`navigator.vibrate` 轻震（不支持就跳过）和一声 Web Audio 合成的短音（只在点按后出声，每屏右上角可静音）。选完自动进下一题，左上角可退回。
- 最后一屏「列车进站中」的小动画约 1.8 秒，再翻出一张车票样式的竖版海报：角色插画、类型名、三个关键词、一句话、最配的搭子、「N 人测过，X% 和你一样」。海报用 `<canvas>` 画成一张 PNG 叠在上面，微信里长按就能保存；画布被拦或画不出来时，留着同样内容的网页版（截图保存）。
- 发出去之后：测完把 `{type, answers}` POST 到数据表 `results`；页面读 `./_data/results.json`，加上页面里写的起始数，算出「已有 N 人测过」和封面、页末两张环形图。同一页里重复测只写第一次。
- 脚本不跑时：舞台下面显示全部 6 道题（每个选项后面标了计入哪一种）、6 种结果说明，以及一张原生表单（`<form method="post" action="./_data/results">`，自己数完选一种提交，`answers` 记为「对照题目自己数」）。

## 改哪里变成我的

题目和结果**只写一份**，脚本从页面里读：

| 位置 | 改什么 |
|---|---|
| 封面 `#s-cover` | 出品方（`.brand` 里的名字和期数）、`h1` 测试名（`<em>` 那几个字带荧光笔底）、`.sub` 一句话、开始按钮的字 |
| 封面地铁线 `.map svg` | 6 个站点的颜色与小头像，和 6 种结果一一对应；结果不是 6 种时增删站点（`circle.stn` 与 `g.head`） |
| 题目 `#questions` | 一题一个 `<li data-q>`：`.q` 是题目，每个选项 `<li data-t="结果名"><span>选项</span><em>计入：结果名</em></li>`。`data-t` 必须和下面某一种的 `data-name` 完全一样。题数随意，进度条会跟着变 |
| 6 种结果 `#types .type` | `data-name` 名字、`data-c` 主色、`data-l` 浅色、`data-mate` 最配的那一种；里面的 SVG 插画、`.keys` 三个关键词、`.say` 一句话、`.mate`「最配<b>名字</b>：理由」 |
| 起始数 | 脚本里的 `BASE`，和 `#types` 的 `h3 small`、`#stats` 的数字、环形图一起改。自己发新测试时写 0（页面就从 0 人开始，读回多少算多少） |
| 结果海报 | 跟着结果数据走，不用单独改；页眉的「早八研究所 · 通勤搭子鉴定」在 `#poster .ph` 和脚本 `paintPoster` 里各一处 |
| 无脚本表单 `form.pick` | 单选项与结果名一致 |
| 页脚 | 平台标志与名称（与 `core/space/src/theme.ts` 的 `MARK_SVG` / `PUBLIC_NAME` 逐字一致，测试咬着）+ 一句适用场景；发自己的测试时整段删掉 |
| `manifest.json` | `title` / `share.title` / `share.desc`（微信卡片上的字） |

打分规则：每个选项计入一种，最多的那种就是结果；一样多时取最后选到的那一种（`score()`）。

## 数据表

测完写进数据表 `results`（一次一行，`append_open=true`）。发之前先建表：

```
set_data  proposal_id: <id>  table: "results"  columns: ["type","answers"]  rows: []  append_open: true  revision: 0
```

`type` 是结果名，`answers` 是每题选的字母（如 `B,A,D,C,A,B`）。用 `list_data_rows table=results` 读回。本地 `space-cli serve` 会把提交写进包里的 `_data/results.json`，试完记得改回 `[]`。

## 怎么发出去

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

没有终端时也可以 MCP `publish_file`（`filename: "index.html"`、`content` 为全文、`manifest` 为 manifest.json 去掉 entry、`hold: true`），再按上面建表。
测试要转发出去才有意思：确认后用 `set_visibility` 设成 `public`。

## 素材

- 没有位图：6 个角色、地铁线、小车、出品方标志都是内联 SVG 手画的，人名与公众号均为虚构。
- `thumb.webp` / `phone.webp`：画廊缩略图与手机大图，由 `examples/verify-shots.mjs --write-thumb --write-phone` 从成品截出，不进发布包。