Files
mama-box/guangchang/ceshi/index.html

424 lines
33 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<meta name="format-detection" content="telephone=no">
<title>测一测 · 孕妈广场</title>
<!-- 孕妈广场 · 测一测(2026-11-02 第一版)
用户原话:「把这 25 个测试放到孕妈广场里,加一个测试,点进去之后就是这 25 个测试;问题不要太简单、也不要太少,至少 12 个以上,不要有太负面的内容」。
· 题库 tests.js(window.GC_TESTS,25 个:知识考卷 / 趣味心理测试 / 闯关打分)。三种玩法:
quiz 有标准答案:选完立刻判对错 + 解析,结果按答对题数分档;
score 选项计分:选完自动下一题,结果按总分分档,显示「指数」= 得分 / 满分 × 100;
type 选项归类:选完自动下一题,结果取出现最多的类型(并列取先出现的)。
· URL:无参数 = 列表;?id=t01 = 进某个测试(开始页)。切换只用 replaceState 改 query,hash(身份 #openid)原样保留。
· 结果只存本机 localStorage「mmbox.gcts.v1」(按 openid 分开):列表上标「已测 · 结果」。
· 返回:测试中 → 回列表;列表 → 回孕妈广场(../ 带原 hash)。
· 禁止下拉回弹:固定外壳 + 容器滚动 + touchmove 拦截。 -->
<style>
:root{--ink:#2B2320;--ink2:#6B615B;--mu:#9A8380;--line:#F1E7E1;--bg:#F8F3EF;--c:#F2704E;--cl:#FFEEE7;--cd:#D9532F}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--bg);color:var(--ink);font:14px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;text-align:inherit}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.num{font-variant-numeric:tabular-nums;font-family:"DIN Alternate","Helvetica Neue",Arial,sans-serif}
#sc{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:none;padding-bottom:calc(30px + env(safe-area-inset-bottom));
background:radial-gradient(240px 200px at 100% 0,rgba(255,196,214,.45),transparent 70%),radial-gradient(260px 220px at 0 60px,rgba(255,206,170,.45),transparent 70%),var(--bg)}
#sc::-webkit-scrollbar{display:none}
.g-quiz{--c:#F2704E;--cl:#FFEEE7;--cd:#D9532F;--cg:linear-gradient(135deg,#FF9A6B,#F2604A)}
.g-psy{--c:#8C6BE0;--cl:#F2EDFF;--cd:#6E4FC6;--cg:linear-gradient(135deg,#B49CFF,#8461E0)}
.g-game{--c:#1FA08A;--cl:#E4F6F2;--cd:#14806E;--cg:linear-gradient(135deg,#5FD3B6,#1C9C86)}
/* 顶栏 */
.top{position:sticky;top:0;z-index:20;padding-top:env(safe-area-inset-top);background:rgba(248,243,239,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.nav{display:flex;align-items:center;height:46px;padding:0 10px}
.nav .bk{width:36px;height:36px;display:grid;place-items:center;border-radius:50%}
.nav .bk:active{background:rgba(0,0,0,.05)}
.nav .bk .ic{width:22px;height:22px}
.nav h1{flex:1;text-align:center;font-size:17px;font-weight:900;letter-spacing:.5px;margin-right:36px}
.nav h1 span{background:linear-gradient(transparent 60%,#FFD0DC 60%,#FFD0DC 92%,transparent 92%);padding:0 3px}
.view{display:none}.view.on{display:block;animation:vin .32s ease-out}
@keyframes vin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* ---------- 列表 ---------- */
.hero{margin:6px 16px 0;padding:18px 18px 16px;border-radius:22px;background:linear-gradient(140deg,#FFE7DD,#FFE3EC 55%,#EEE6FF);position:relative;overflow:hidden}
.hero b{display:block;font-size:22px;font-weight:900;letter-spacing:.5px}
.hero p{margin-top:4px;font-size:13px;color:var(--ink2)}
.hero .st{display:flex;gap:16px;margin-top:12px}
.hero .st span{font-size:12px;color:var(--mu)}.hero .st b{display:inline;font-size:18px;margin-right:2px;color:var(--ink)}
.hero i{position:absolute;right:-18px;top:-18px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.45)}
.hero i+i{right:46px;top:58px;width:46px;height:46px;background:rgba(255,255,255,.35)}
.tabs{display:flex;gap:8px;padding:14px 16px 0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;height:32px;padding:0 14px;border-radius:99px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--ink2)}
.tabs button i{font-style:normal;margin-left:3px;font-size:11px;color:var(--mu)}
.tabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}.tabs button.on i{color:rgba(255,255,255,.7)}
.grp{margin-top:20px;padding:0 16px}
.grp h2{display:flex;align-items:baseline;gap:8px;font-size:17px;font-weight:900}
.grp h2 small{font-size:12px;font-weight:600;color:var(--mu)}
.grp h2 em{width:8px;height:8px;border-radius:3px;background:var(--c);align-self:center;transform:rotate(45deg)}
.cards{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tc{position:relative;display:flex;flex-direction:column;min-height:132px;padding:13px 12px 12px;border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 6px 16px -12px rgba(120,60,40,.35)}
.tc:active{transform:scale(.98)}
.tc .ib{width:36px;height:36px;border-radius:12px;background:var(--cg);color:#fff;display:grid;place-items:center;box-shadow:0 6px 12px -6px var(--c)}
.tc .ib .ic{width:20px;height:20px}
.tc b{margin-top:10px;font-size:14.5px;font-weight:900;line-height:1.35}
.tc small{margin-top:3px;font-size:11.5px;color:var(--mu);line-height:1.45}
.tc .ft{margin-top:auto;padding-top:8px;display:flex;align-items:center;gap:6px;font-size:11px;color:var(--mu)}
.tc .ft .dn{margin-left:auto;padding:0 7px;border-radius:99px;background:var(--cl);color:var(--cd);font-weight:800;line-height:18px;max-width:84px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc::after{content:"";position:absolute;right:-26px;top:-26px;width:76px;height:76px;border-radius:50%;background:var(--cl);opacity:.8;z-index:0}
.tc>*{position:relative;z-index:1}
.tc.wide{grid-column:1/-1;flex-direction:row;align-items:center;gap:12px;min-height:0}
.tc.wide .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.tc.wide b{margin-top:0}.tc.wide .ft{padding-top:4px}
/* ---------- 开始页 ---------- */
.cover{margin:6px 16px 0;padding:22px 20px 20px;border-radius:24px;background:var(--cg);color:#fff;position:relative;overflow:hidden;box-shadow:0 14px 28px -16px var(--c)}
.cover .bg{position:absolute;right:-30px;bottom:-40px;width:180px;height:180px;opacity:.16}
.cover .bg .ic{width:100%;height:100%;stroke-width:1.4}
.cover .kd{display:inline-block;padding:0 9px;border-radius:99px;background:rgba(255,255,255,.22);font-size:11.5px;font-weight:700;line-height:21px}
.cover h2{margin-top:12px;font-size:24px;font-weight:900;line-height:1.3;letter-spacing:.5px}
.cover p{margin-top:6px;font-size:13.5px;opacity:.92}
.cover .meta{display:flex;gap:18px;margin-top:18px}
.cover .meta span{font-size:11.5px;opacity:.85}.cover .meta b{display:block;font-size:20px;font-weight:900;opacity:1}
.intro{margin:14px 16px 0;padding:16px;border-radius:18px;background:#fff;font-size:14px;color:var(--ink2);line-height:1.75}
.last{margin:10px 16px 0;padding:12px 14px;border-radius:14px;background:var(--cl);font-size:13px;color:var(--cd);display:flex;align-items:center;gap:6px}
.last b{color:var(--cd)}
.go{display:flex;align-items:center;justify-content:center;gap:4px;width:calc(100% - 32px);height:50px;margin:18px 16px 0;border-radius:99px;background:var(--cg);color:#fff;font-size:16px;font-weight:900;box-shadow:0 10px 20px -10px var(--c);position:relative;overflow:hidden}
.go:active{transform:scale(.98)}
.go::after{content:"";position:absolute;top:0;bottom:0;left:-50%;width:35%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);animation:sh 2.8s ease-in-out infinite}
@keyframes sh{0%,55%{left:-50%}100%{left:130%}}
.ghost{display:flex;align-items:center;justify-content:center;width:calc(100% - 32px);height:46px;margin:10px 16px 0;border-radius:99px;border:1.5px solid var(--c);color:var(--cd);font-size:15px;font-weight:800;background:#fff}
/* ---------- 答题 ---------- */
.qh{display:flex;align-items:center;gap:10px;margin:4px 16px 0}
.qh .pg{flex:1;height:8px;border-radius:99px;background:#fff;overflow:hidden}
.qh .pg i{display:block;height:100%;border-radius:99px;background:var(--cg);transition:width .35s ease}
.qh .n{font-size:13px;font-weight:800;color:var(--ink2)}.qh .n b{font-size:17px;color:var(--cd)}
.qc{margin:14px 16px 0;padding:20px 18px 18px;border-radius:22px;background:#fff;box-shadow:0 10px 24px -18px rgba(120,60,40,.4)}
.qc .qn{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--c)}
.qc h3{margin-top:6px;font-size:18.5px;font-weight:900;line-height:1.5}
.ops{margin-top:16px}
.op{display:flex;align-items:center;gap:10px;width:100%;padding:13px 14px;border-radius:14px;border:1.5px solid var(--line);background:#FFFCFA;font-size:15px;line-height:1.5;color:var(--ink);transition:border-color .15s,background .15s,transform .1s}
.op+.op{margin-top:10px}
.op:active{transform:scale(.985)}
.op .k{flex:none;width:26px;height:26px;border-radius:9px;background:var(--cl);color:var(--cd);display:grid;place-items:center;font-size:13px;font-weight:900}
.op .t{flex:1}
.op.sel{border-color:var(--c);background:var(--cl)}
.op.sel .k{background:var(--c);color:#fff}
.op.ok{border-color:#2DB37D;background:#EAF8F1}.op.ok .k{background:#2DB37D;color:#fff}
.op.no{border-color:#F08A8A;background:#FFF0F0}.op.no .k{background:#EE6B6B;color:#fff}
.op .r{flex:none;font-size:12px;font-weight:800}
.op.ok .r{color:#1E9A68}.op.no .r{color:#D9534F}
.ops.lock .op{pointer-events:none}
.exp{display:none;margin-top:14px;padding:12px 14px;border-radius:14px;background:#F7F4F1;font-size:13.5px;line-height:1.7;color:var(--ink2)}
.exp.on{display:block;animation:vin .3s ease-out}
.exp b{display:block;margin-bottom:2px;font-size:13px}
.exp.y b{color:#1E9A68}.exp.n b{color:#D9534F}
.qa{display:flex;align-items:center;gap:10px;margin:14px 16px 0}
.qa .pv{display:flex;align-items:center;gap:2px;height:44px;padding:0 10px;font-size:14px;color:var(--mu)}
.qa .nx{flex:1;text-align:center;height:48px;border-radius:99px;background:var(--cg);color:#fff;font-size:15.5px;font-weight:900;opacity:.35;pointer-events:none;transition:opacity .2s}
.qa .nx.on{opacity:1;pointer-events:auto}
.qt{margin:10px 16px 0;text-align:center;font-size:12px;color:var(--mu)}
/* ---------- 结果 ---------- */
.rs{margin:6px 16px 0;padding:24px 20px 22px;border-radius:24px;background:#fff;text-align:center;position:relative;overflow:hidden;box-shadow:0 14px 30px -20px rgba(120,60,40,.45)}
.rs::before{content:"";position:absolute;inset:0;background:var(--cg);opacity:.07}
.rs>*{position:relative}
.ring{width:132px;height:132px;margin:0 auto;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:11;stroke-linecap:round}
.ring .bgc{stroke:var(--cl)}
.ring .fg{stroke:var(--c);transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.3,1)}
.ring .v{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .v b{font-size:36px;font-weight:900;line-height:1;color:var(--cd)}
.ring .v small{margin-top:4px;font-size:11.5px;color:var(--mu)}
.badge{width:118px;height:118px;margin:0 auto;border-radius:36px;background:var(--cg);color:#fff;display:grid;place-items:center;box-shadow:0 14px 26px -12px var(--c);transform:rotate(-6deg)}
.badge .ic{width:58px;height:58px;stroke-width:1.6;transform:rotate(6deg)}
.rs .tg{display:inline-block;margin-top:16px;padding:0 10px;border-radius:99px;background:var(--cl);color:var(--cd);font-size:12px;font-weight:800;line-height:22px}
.rs h2{margin-top:8px;font-size:23px;font-weight:900;letter-spacing:.5px}
.rs p{margin-top:10px;font-size:14.5px;line-height:1.8;color:var(--ink2);text-align:left}
.tips{margin:12px 16px 0;padding:16px;border-radius:18px;background:#fff}
.tips h3{font-size:15px;font-weight:900}
.tips li{list-style:none;position:relative;margin-top:9px;padding-left:22px;font-size:14px;line-height:1.65;color:var(--ink2)}
.tips li::before{content:"";position:absolute;left:3px;top:6px;width:10px;height:10px;border-radius:3px;background:var(--c);transform:rotate(45deg);opacity:.8}
.rv{margin:12px 16px 0;border-radius:18px;background:#fff;overflow:hidden}
.rv summary{list-style:none;display:flex;align-items:center;padding:14px 16px;font-size:15px;font-weight:900;cursor:pointer}
.rv summary::-webkit-details-marker{display:none}
.rv summary small{margin-left:8px;font-size:12px;font-weight:600;color:var(--mu)}
.rv summary .ic{margin-left:auto;color:var(--mu);transition:transform .2s}
.rv[open] summary .ic{transform:rotate(180deg)}
.rv .it{padding:12px 16px;border-top:1px dashed var(--line);font-size:13.5px;line-height:1.65;color:var(--ink2)}
.rv .it b{display:block;color:var(--ink);font-size:14px}
.rv .it .an{display:block;margin:3px 0;color:#1E9A68;font-weight:700}
.more{margin:22px 16px 0}
.more h3{font-size:16px;font-weight:900}
.more .cards{grid-template-columns:1fr}
.fine{margin:18px 16px 0;font-size:11.5px;line-height:1.7;color:var(--mu);text-align:center}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
</style>
</head>
<body>
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
<symbol id="i-back" viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></symbol>
<symbol id="i-right" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></symbol>
<symbol id="i-down" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></symbol>
<symbol id="i-book" viewBox="0 0 24 24"><path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5z"/><path d="M4 20.5A2.5 2.5 0 0 0 6.5 23H20v-5"/><path d="M9 8h7M9 11.5h5"/></symbol>
<symbol id="i-dad" viewBox="0 0 24 24"><circle cx="12" cy="7" r="3.5"/><path d="M5 21c.6-4.2 3.4-6.5 7-6.5s6.4 2.3 7 6.5"/><path d="M12 14.5l-1.5 3 1.5 3 1.5-3z"/></symbol>
<symbol id="i-baby" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M9 10.5h.01M15 10.5h.01"/><path d="M9.5 14.5c1.4 1.2 3.6 1.2 5 0"/><path d="M12 3.5c-1.5 1.3-1.2 3 .4 3.2"/></symbol>
<symbol id="i-bag" viewBox="0 0 24 24"><rect x="4" y="7" width="16" height="13" rx="3"/><path d="M9 7V5.5A1.5 1.5 0 0 1 10.5 4h3A1.5 1.5 0 0 1 15 5.5V7"/><path d="M12 11v5M9.5 13.5h5"/></symbol>
<symbol id="i-bottle" viewBox="0 0 24 24"><path d="M10 2.5h4M10.5 2.5v3L9 8v11.5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2V8l-1.5-2.5v-3"/><path d="M9 12h6M9 15.5h6"/></symbol>
<symbol id="i-heart" viewBox="0 0 24 24"><path d="M12 20s-7.5-4.6-7.5-10.2A4.3 4.3 0 0 1 12 7.2a4.3 4.3 0 0 1 7.5 2.6C19.5 15.4 12 20 12 20z"/></symbol>
<symbol id="i-spoon" viewBox="0 0 24 24"><ellipse cx="12" cy="7" rx="4" ry="4.5"/><path d="M12 11.5V21"/></symbol>
<symbol id="i-moon" viewBox="0 0 24 24"><path d="M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z"/><path d="M16 4.5l.5 1.3 1.3.5-1.3.5-.5 1.3-.5-1.3-1.3-.5 1.3-.5z"/></symbol>
<symbol id="i-cup" viewBox="0 0 24 24"><path d="M5 8h12v6a5 5 0 0 1-5 5h-2a5 5 0 0 1-5-5z"/><path d="M17 10h1.5a2.5 2.5 0 0 1 0 5H17"/><path d="M9 3.5c-.8 1 .8 2-.1 3M12.5 3.5c-.8 1 .8 2-.1 3"/></symbol>
<symbol id="i-leaf" viewBox="0 0 24 24"><path d="M5 19c0-8 5-13 14-14 0 9-5 14-13 14z"/><path d="M5 19l8-8"/></symbol>
<symbol id="i-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2.5v2M12 19.5v2M4.6 4.6l1.4 1.4M18 18l1.4 1.4M2.5 12h2M19.5 12h2M4.6 19.4L6 18M18 6l1.4-1.4"/></symbol>
<symbol id="i-team" viewBox="0 0 24 24"><circle cx="8.5" cy="8" r="3"/><circle cx="16.5" cy="9" r="2.5"/><path d="M3 19c.5-3.5 2.7-5.5 5.5-5.5S13.5 15.5 14 19"/><path d="M14.5 14.2c.6-.3 1.3-.4 2-.4 2.3 0 4 1.6 4.5 4.7"/></symbol>
<symbol id="i-radar" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><circle cx="12" cy="12" r="4.5"/><path d="M12 12l5.5-5.5"/><circle cx="12" cy="12" r=".8"/></symbol>
<symbol id="i-compass" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M15.5 8.5l-2 5-5 2 2-5z"/></symbol>
<symbol id="i-ring" viewBox="0 0 24 24"><circle cx="9" cy="13" r="5.5"/><circle cx="15" cy="13" r="5.5"/></symbol>
<symbol id="i-cloud" viewBox="0 0 24 24"><path d="M7 18h10a4 4 0 0 0 .6-7.95A5.5 5.5 0 0 0 7 11a3.5 3.5 0 0 0 0 7z"/></symbol>
<symbol id="i-scale" viewBox="0 0 24 24"><path d="M12 4v16M7 20h10M5 8h14"/><path d="M5 8l-2.5 6a2.5 2.5 0 0 0 5 0zM19 8l-2.5 6a2.5 2.5 0 0 0 5 0z"/></symbol>
<symbol id="i-two" viewBox="0 0 24 24"><circle cx="8" cy="9" r="3.5"/><circle cx="17" cy="11" r="2.5"/><path d="M2.5 20c.6-3.8 2.8-6 5.5-6s4.9 2.2 5.5 6M13.5 20c.4-2.6 1.8-4.2 3.5-4.2s3.1 1.6 3.5 4.2"/></symbol>
<symbol id="i-home" viewBox="0 0 24 24"><path d="M3.5 11L12 4l8.5 7"/><path d="M6 9.5V20h12V9.5"/><path d="M10 20v-5h4v5"/></symbol>
<symbol id="i-music" viewBox="0 0 24 24"><path d="M9 18V6l10-2v12"/><circle cx="6.5" cy="18" r="2.5"/><circle cx="16.5" cy="16" r="2.5"/></symbol>
<symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 3l7.5 3v5.5c0 4.6-3.2 8-7.5 9.5-4.3-1.5-7.5-4.9-7.5-9.5V6z"/><path d="M8.8 12l2.2 2.2 4.2-4.4"/></symbol>
<symbol id="i-flower" viewBox="0 0 24 24"><circle cx="12" cy="10" r="2.2"/><path d="M12 7.8C12 5 14.5 4 15.5 5.6S14.2 9 14.2 9.2M14.2 10.8c2.6.7 2.9 3.4 1.2 3.9S12 13 12 12.2M9.8 10.8c-2.6.7-2.9 3.4-1.2 3.9S12 13 12 12.2M9.8 9.2C9.8 9 8.5 7.2 8.5 5.6S12 5 12 7.8"/><path d="M12 13v8M12 18c-1.5-1.5-3-1.5-4-1"/></symbol>
<symbol id="i-star" viewBox="0 0 24 24"><path d="M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.9z"/></symbol>
<symbol id="i-sprout" viewBox="0 0 24 24"><path d="M12 20v-8"/><path d="M12 12c0-3.5-2.5-6-7-6 0 3.5 2.5 6 7 6zM12 12c0-3 2-5.5 6.5-5.5 0 3-2 5.5-6.5 5.5z"/><path d="M7 20h10"/></symbol>
</svg>
<div id="sc">
<div class="top"><div class="nav">
<button class="bk" id="back" type="button" aria-label="返回"><svg class="ic"><use href="#i-back"/></svg></button>
<h1><span id="navT">测一测</span></h1>
</div></div>
<section class="view" id="vList">
<div class="hero"><i></i><i></i>
<b>孕育测一测</b>
<p>知识考卷、趣味心理、闯关挑战,测完就有专属解读</p>
<div class="st"><span><b class="num" id="hN">25</b>套测试</span><span><b class="num" id="hQ">0</b>道题</span><span><b class="num" id="hD">0</b>套已测</span></div>
</div>
<div class="tabs" id="tabs"></div>
<div id="groups"></div>
<p class="fine">测试内容为孕育知识科普与趣味自测,仅供参考,不能代替医生诊断。</p>
</section>
<section class="view" id="vStart">
<div class="cover" id="cover"></div>
<div class="intro" id="intro"></div>
<div class="last" id="last" style="display:none"></div>
<button class="go" id="goBtn" type="button">开始测试</button>
</section>
<section class="view" id="vQ">
<div class="qh"><span class="n num" id="qNo"></span><span class="pg"><i id="qBar"></i></span></div>
<div class="qc"><div class="qn" id="qKind"></div><h3 id="qText"></h3><div class="ops" id="ops"></div><div class="exp" id="exp"></div></div>
<div class="qa"><button class="pv" id="prev" type="button"><svg class="ic"><use href="#i-back"/></svg>上一题</button><button class="nx" id="next" type="button">下一题</button></div>
<p class="qt" id="qTip"></p>
</section>
<section class="view" id="vRes">
<div class="rs" id="rs"></div>
<div class="tips" id="tips"></div>
<div id="review"></div>
<button class="go" id="again" type="button">再测一次</button>
<button class="ghost" id="toList" type="button">看看其他测试</button>
<div class="more" id="more"></div>
<p class="fine">结果仅供参考与娱乐,不能代替医生诊断。</p>
</section>
</div>
<script src="tests.js?v=26110218"></script>
<script>
(function () {
'use strict';
var $ = function (s) { return document.querySelector(s); };
var T = window.GC_TESTS || [], TBY = {};
T.forEach(function (t) { TBY[t.id] = t; });
var GROUP = { quiz: ['知识考卷', '有标准答案,答完看解析'], psy: ['趣味心理测试', '没有对错,测测你是哪一型'], game: ['趣味闯关', '挑战一下,看看能拿什么称号'] };
var GORD = ['quiz', 'psy', 'game'];
/* 每个测试的图标(题库里不带,页面这里配) */
var ICON = { t01: 'i-book', t02: 'i-dad', t03: 'i-bottle', t04: 'i-team', t05: 'i-bag', t06: 'i-baby', t07: 'i-flower', t08: 'i-spoon', t09: 'i-moon', t10: 'i-cup',
t11: 'i-leaf', t12: 'i-shield', t13: 'i-compass', t14: 'i-radar', t15: 'i-sprout', t16: 'i-ring', t17: 'i-cloud', t18: 'i-scale', t19: 'i-two', t20: 'i-home',
t21: 'i-music', t22: 'i-shield', t23: 'i-heart', t24: 'i-star', t25: 'i-sun' };
function ic(id) { return '<svg class="ic"><use href="#' + (ICON[id] || 'i-star') + '"/></svg>'; }
function esc(s) { return String(s == null ? '' : s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
function param(n) { var h = (location.hash.slice(1) || '') + '&' + (location.search.slice(1) || ''); var m = h.match(new RegExp('(?:^|&)' + n + '=([^&]*)')); return m ? decodeURIComponent(m[1]) : ''; }
function haptic() { if (navigator.vibrate) navigator.vibrate(8); }
var sc = $('#sc');
/* ---------- 本机记录 ---------- */
var KEY = 'mmbox.gcts.v1', UID = param('openid') || '_guest';
function store() { try { var o = JSON.parse(localStorage.getItem(KEY) || '{}'); return o[UID] || {}; } catch (e) { return {}; } }
function saveRes(id, r) { try { var o = JSON.parse(localStorage.getItem(KEY) || '{}'); o[UID] = o[UID] || {}; o[UID][id] = r; localStorage.setItem(KEY, JSON.stringify(o)); } catch (e) {} }
/* ---------- 视图切换 ---------- */
function show(v, title) {
['vList', 'vStart', 'vQ', 'vRes'].forEach(function (x) { $('#' + x).classList.toggle('on', x === v); });
$('#navT').textContent = title || '测一测';
sc.scrollTop = 0;
}
function setQ(id) {
var q = new URLSearchParams(location.search); if (id) q.set('id', id); else q.delete('id');
var s = q.toString(); history.replaceState(null, '', location.pathname + (s ? '?' + s : '') + location.hash);
}
/* ---------- 列表 ---------- */
var tab = '';
function cardHTML(t, wide) {
var r = store()[t.id];
return '<button type="button" class="tc g-' + t.group + (wide ? ' wide' : '') + '" data-id="' + t.id + '"><span class="ib">' + ic(t.id) + '</span>' +
(wide ? '<span class="tx">' : '') + '<b>' + esc(t.title) + '</b><small>' + esc(t.sub) + '</small>' +
'<span class="ft"><span class="num">' + t.questions.length + ' 题 · 约 ' + (t.minutes || 3) + ' 分钟</span>' + (r ? '<span class="dn">已测 · ' + esc(r.title) + '</span>' : '') + '</span>' + (wide ? '</span>' : '') + '</button>';
}
function renderList() {
var st = store(), qn = 0; T.forEach(function (t) { qn += t.questions.length; });
$('#hN').textContent = T.length; $('#hQ').textContent = qn; $('#hD').textContent = Object.keys(st).filter(function (k) { return TBY[k]; }).length;
$('#tabs').innerHTML = [['', '全部', T.length]].concat(GORD.map(function (g) { return [g, GROUP[g][0], T.filter(function (t) { return t.group === g; }).length]; }))
.map(function (x) { return '<button type="button" data-g="' + x[0] + '"' + (tab === x[0] ? ' class="on"' : '') + '>' + x[1] + '<i class="num">' + x[2] + '</i></button>'; }).join('');
$('#groups').innerHTML = GORD.filter(function (g) { return !tab || tab === g; }).map(function (g) {
var list = T.filter(function (t) { return t.group === g; });
return '<div class="grp g-' + g + '"><h2><em></em>' + GROUP[g][0] + '<small>' + list.length + ' 套 · ' + GROUP[g][1] + '</small></h2><div class="cards">' +
list.map(function (t, i) { return cardHTML(t, list.length % 2 === 1 && i === list.length - 1); }).join('') + '</div></div>';
}).join('');
}
$('#tabs').addEventListener('click', function (e) { var b = e.target.closest('[data-g]'); if (!b) return; tab = b.dataset.g; haptic(); renderList(); });
document.addEventListener('click', function (e) { var c = e.target.closest('.tc[data-id]'); if (c) { haptic(); openStart(c.dataset.id); } });
/* ---------- 开始页 ---------- */
var cur = null, qi = 0, ans = [];
function openStart(id) {
cur = TBY[id]; if (!cur) { setQ(''); renderList(); show('vList'); return; }
setQ(id);
document.body.className = 'g-' + cur.group;
$('#cover').innerHTML = '<span class="bg">' + ic(cur.id) + '</span><span class="kd">' + GROUP[cur.group][0] + '</span><h2>' + esc(cur.title) + '</h2><p>' + esc(cur.sub) + '</p>' +
'<div class="meta"><span><b class="num">' + cur.questions.length + '</b>道题</span><span><b class="num">' + (cur.minutes || 3) + '</b>分钟左右</span><span><b>' + (cur.type === 'quiz' ? '有' : '无') + '</b>标准答案</span></div>';
$('#intro').textContent = cur.intro;
var r = store()[cur.id], la = $('#last');
if (r) { la.style.display = 'flex'; la.innerHTML = '上次结果:<b>' + esc(r.title) + '</b>' + (r.score != null ? '<span class="num">(' + esc(r.score) + ')</span>' : ''); } else la.style.display = 'none';
$('#goBtn').textContent = r ? '再测一次' : '开始测试';
show('vStart', GROUP[cur.group][0]);
}
$('#goBtn').addEventListener('click', function () { haptic(); qi = 0; ans = []; renderQ(); show('vQ', cur.title); });
/* ---------- 答题 ---------- */
var KS = 'ABCD';
function optT(o) { return typeof o === 'string' ? o : o.t; }
function renderQ() {
var q = cur.questions[qi], n = cur.questions.length, a = ans[qi];
$('#qNo').innerHTML = '<b>' + (qi + 1) + '</b> / ' + n;
$('#qBar').style.width = ((qi) / n * 100) + '%';
$('#qKind').textContent = '第 ' + (qi + 1) + ' 题' + (cur.type === 'quiz' ? ' · 单选' : '');
$('#qText').textContent = q.q;
$('#ops').className = 'ops';
$('#ops').innerHTML = q.opts.map(function (o, i) { return '<button type="button" class="op" data-i="' + i + '"><span class="k">' + KS[i] + '</span><span class="t">' + esc(optT(o)) + '</span><span class="r"></span></button>'; }).join('');
$('#exp').className = 'exp'; $('#exp').innerHTML = '';
$('#prev').style.visibility = qi ? 'visible' : 'hidden';
var nx = $('#next'); nx.classList.remove('on'); nx.textContent = qi === n - 1 ? '看结果' : '下一题';
$('#qTip').textContent = cur.type === 'quiz' ? '选完马上告诉你对不对' : '凭第一感觉选,选完自动下一题';
if (a != null) mark(a, true);
}
function mark(i, replay) {
var q = cur.questions[qi], bs = $('#ops').querySelectorAll('.op');
if (cur.type === 'quiz') {
$('#ops').classList.add('lock');
bs[q.a].classList.add('ok'); bs[q.a].querySelector('.r').textContent = '正确答案';
if (i !== q.a) { bs[i].classList.add('no'); bs[i].querySelector('.r').textContent = '你的选择'; }
var e = $('#exp'); e.className = 'exp on ' + (i === q.a ? 'y' : 'n');
e.innerHTML = '<b>' + (i === q.a ? '答对啦' : '差一点,正确答案是 ' + KS[q.a]) + '</b>' + esc(q.exp || '');
$('#next').classList.add('on');
if (!replay) setTimeout(function () { var r = e.getBoundingClientRect(); if (r.bottom > innerHeight - 90) sc.scrollBy({ top: r.bottom - innerHeight + 110, behavior: 'smooth' }); }, 60);
} else {
[].forEach.call(bs, function (b, k) { b.classList.toggle('sel', k === i); });
$('#next').classList.add('on');
}
}
$('#ops').addEventListener('click', function (e) {
var b = e.target.closest('.op'); if (!b || this.classList.contains('lock')) return;
var i = +b.dataset.i; haptic(); ans[qi] = i; mark(i);
if (cur.type !== 'quiz') { this.classList.add('lock'); setTimeout(next, 280); }
});
function next() {
if (qi < cur.questions.length - 1) { qi++; renderQ(); sc.scrollTop = 0; } else finish();
}
$('#next').addEventListener('click', function () { if (ans[qi] == null) return; haptic(); next(); });
$('#prev').addEventListener('click', function () { if (qi > 0) { qi--; renderQ(); } });
/* ---------- 结果 ---------- */
function band(list, v) { var r = list[0]; list.forEach(function (x) { if (x.min != null && v >= x.min) r = x; }); return r; }
function finish() {
var qs = cur.questions, r, head, score = null;
if (cur.type === 'quiz') {
var ok = 0; qs.forEach(function (q, i) { if (ans[i] === q.a) ok++; });
r = band(cur.results, ok); score = ok + '/' + qs.length;
head = ringHTML(ok / qs.length, '<b class="num">' + ok + '</b><small>答对 / 共 ' + qs.length + ' 题</small>');
} else if (cur.type === 'score') {
var s = 0, mx = 0;
qs.forEach(function (q, i) { var o = q.opts[ans[i]]; s += (o && o.s) || 0; mx += Math.max.apply(null, q.opts.map(function (x) { return x.s || 0; })); });
r = band(cur.results, s); var idx = Math.round(s / (mx || 1) * 100); score = '指数 ' + idx;
head = ringHTML(idx / 100, '<b class="num">' + idx + '</b><small>指数(满分 100)</small>');
} else {
var cnt = {}, order = [];
qs.forEach(function (q, i) { var o = q.opts[ans[i]]; if (!o) return; if (!cnt[o.k]) { cnt[o.k] = 0; order.push(o.k); } cnt[o.k]++; });
var best = order[0]; order.forEach(function (k) { if (cnt[k] > cnt[best]) best = k; });
r = cur.results.filter(function (x) { return x.k === best; })[0] || cur.results[0];
head = '<div class="badge">' + ic(cur.id) + '</div>';
}
saveRes(cur.id, { title: r.title, score: score, at: Date.now() });
$('#rs').innerHTML = head + '<span class="tg">' + esc(r.tag || '你的结果') + '</span><h2>' + esc(r.title) + '</h2><p>' + esc(r.text) + '</p>';
$('#tips').innerHTML = '<h3>给你的小建议</h3><ul>' + (r.tips || []).map(function (x) { return '<li>' + esc(x) + '</li>'; }).join('') + '</ul>';
$('#tips').style.display = (r.tips || []).length ? '' : 'none';
if (cur.type === 'quiz') {
var wrong = qs.map(function (q, i) { return { q: q, i: i }; }).filter(function (x) { return ans[x.i] !== x.q.a; });
$('#review').innerHTML = '<details class="rv"><summary>' + (wrong.length ? '错题解析' : '全部解析') + '<small>' + (wrong.length ? wrong.length + ' 道' : '全对,棒') + '</small><svg class="ic"><use href="#i-down"/></svg></summary>' +
(wrong.length ? wrong : qs.map(function (q, i) { return { q: q, i: i }; })).map(function (x) {
return '<div class="it"><b>' + (x.i + 1) + '. ' + esc(x.q.q) + '</b><span class="an">答案:' + KS[x.q.a] + '. ' + esc(optT(x.q.opts[x.q.a])) + '</span>' + esc(x.q.exp || '') + '</div>';
}).join('') + '</details>';
} else $('#review').innerHTML = '';
var others = T.filter(function (t) { return t.id !== cur.id && !store()[t.id]; });
if (others.length < 3) others = T.filter(function (t) { return t.id !== cur.id; });
var sd = cur.id.charCodeAt(2) * 7, pick = [];
for (var k = 0; k < others.length && pick.length < 3; k++) pick.push(others[(sd + k * 5) % others.length]);
pick = pick.filter(function (x, i) { return pick.indexOf(x) === i; });
$('#more').innerHTML = '<h3>再测一个</h3><div class="cards">' + pick.map(function (t) { return cardHTML(t, true); }).join('') + '</div>';
show('vRes', '测试结果');
var fg = $('#rs .fg'); if (fg) requestAnimationFrame(function () { requestAnimationFrame(function () { fg.style.strokeDashoffset = fg.dataset.to; }); });
}
function ringHTML(p, inner) {
var C = 2 * Math.PI * 54;
return '<div class="ring"><svg viewBox="0 0 132 132"><circle class="bgc" cx="66" cy="66" r="54"/><circle class="fg" cx="66" cy="66" r="54" stroke-dasharray="' + C + '" stroke-dashoffset="' + C + '" data-to="' + (C * (1 - Math.max(.02, Math.min(1, p)))) + '"/></svg><div class="v">' + inner + '</div></div>';
}
$('#again').addEventListener('click', function () { haptic(); qi = 0; ans = []; renderQ(); show('vQ', cur.title); });
$('#toList').addEventListener('click', function () { haptic(); goList(); });
function goList() { cur = null; document.body.className = ''; setQ(''); renderList(); show('vList'); }
/* ---------- 返回 ---------- */
$('#back').addEventListener('click', function () {
if ($('#vQ').classList.contains('on') && qi > 0) { qi--; renderQ(); return; }
if (!$('#vList').classList.contains('on')) { goList(); return; }
var q = new URLSearchParams(location.search); q.delete('id'); var s = q.toString();
location.href = '../' + (s ? '?' + s : '') + location.hash;
});
/* ---------- 禁止下拉回弹 ---------- */
var y0 = 0;
sc.addEventListener('touchstart', function (e) { y0 = e.touches[0].clientY; }, { passive: true });
sc.addEventListener('touchmove', function (e) {
var dy = e.touches[0].clientY - y0;
if ((sc.scrollTop <= 0 && dy > 0) || (sc.scrollTop + sc.clientHeight >= sc.scrollHeight - 1 && dy < 0)) { if (e.cancelable) e.preventDefault(); }
}, { passive: false });
document.addEventListener('touchmove', function (e) { if (!sc.contains(e.target) && e.cancelable) e.preventDefault(); }, { passive: false });
/* ---------- 启动 ---------- */
var id0 = new URLSearchParams(location.search).get('id');
if (id0 && TBY[id0]) openStart(id0); else { renderList(); show('vList'); }
})();
</script>
</body>
</html>