Archived
103 lines
4.5 KiB
HTML
103 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>数学人格测试 · MathBTI</title>
|
|
<meta name="description" content="12题发现你的数学人格类型——16种人格，4大族群">
|
|
<link rel="stylesheet" href="/static/css/mathbti.css?v=4">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="app" id="app">
|
|
<!-- Intro Screen -->
|
|
<div class="screen active" id="introScreen">
|
|
<div class="intro-header">
|
|
<div class="intro-logo">葫</div>
|
|
<h1 class="intro-title">数学人格测试</h1>
|
|
<p class="intro-sub">12题发现你的数学人格类型</p>
|
|
<div class="intro-meta">⏱ 约2分钟 · 4选项 · 12人格</div>
|
|
</div>
|
|
<div class="intro-desc">
|
|
<span>你习惯靠直觉还是靠推演？</span>
|
|
<span>你更喜欢独自钻研还是和同伴讨论？</span>
|
|
<span>你偏爱古典数学还是现代科技？</span>
|
|
</div>
|
|
<div class="intro-axes" id="introAxes"></div>
|
|
<button class="btn-start" onclick="startQuiz()">开始测试</button>
|
|
</div>
|
|
|
|
<!-- Quiz Screen -->
|
|
<div class="screen" id="quizScreen">
|
|
<div class="quiz-progress-wrap">
|
|
<div class="quiz-progress-bar"><div class="quiz-progress-fill" id="progressFill" style="width:0%"></div></div>
|
|
<div class="quiz-progress-text" id="progressText">1/12</div>
|
|
</div>
|
|
<div class="quiz-question" id="quizQuestion"></div>
|
|
<div class="quiz-options" id="quizOptions"></div>
|
|
<button class="btn-next" id="btnNext" disabled onclick="nextQuestion()">下一题</button>
|
|
</div>
|
|
|
|
<!-- Result Screen -->
|
|
<div class="screen" id="resultScreen">
|
|
<div class="result-header">
|
|
<div class="result-portrait-wrap" id="resultPortrait"></div>
|
|
<h2 class="result-type-name" id="resultName"></h2>
|
|
<p class="result-tagline" id="resultTagline"></p>
|
|
<div class="result-mathematician" id="resultMathematician"></div>
|
|
</div>
|
|
<div class="result-keywords" id="resultKeywords"></div>
|
|
<div class="result-card">
|
|
<div class="result-card-title">你的数学人格画像</div>
|
|
<p class="result-card-desc" id="resultDesc"></p>
|
|
<p class="result-card-short" id="resultShort"></p>
|
|
</div>
|
|
<!-- Bio Expander -->
|
|
<div class="bio-expander" id="bioExpander">
|
|
<div class="bio-expander-header" id="bioHeader" onclick="toggleBio()">
|
|
<div class="bio-expander-left">
|
|
<span class="bio-expander-icon">📖</span>
|
|
<span class="bio-expander-title" id="bioTitle">关于 拉马努金</span>
|
|
</div>
|
|
<span class="bio-arrow" id="bioArrow">▾</span>
|
|
</div>
|
|
<div class="bio-expander-body" id="bioBody">
|
|
<div class="bio-inner">
|
|
<p class="bio-text" id="bioText"></p>
|
|
<div class="bio-fact-box">
|
|
<span class="bio-fact-emoji">💡</span>
|
|
<span class="bio-fact-text" id="bioFact"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="result-axes" id="resultAxes"></div>
|
|
<div class="result-stats5" id="resultStats5"></div>
|
|
<div class="result-adopt">
|
|
<button class="btn-adopt" onclick="adoptPet()">🧬 领养你的数学精灵</button>
|
|
<p class="adopt-hint">它将每天等你回来，喂经验、升级、解锁数学家的人生剧本</p>
|
|
</div>
|
|
<div class="result-card-notice" id="cardNotice">
|
|
<div class="rcn-icon">🎴</div>
|
|
<div class="rcn-text">恭喜获得「<span id="cardNoticeName">—</span>」数学人物小卡！</div>
|
|
<div class="rcn-hint">去葫芦数学 <a href="/web" style="color:#A8907E;text-decoration:underline">查看我的卡册</a>，还有15张等你收集</div>
|
|
</div>
|
|
<div class="result-share">
|
|
<button class="btn-share secondary" onclick="copyShare()">📋 复制结果</button>
|
|
<button class="btn-share primary" onclick="generateShareCard()">📸 生成分享卡片</button>
|
|
<button class="btn-share" onclick="shareResult()">📤 分享给朋友</button>
|
|
</div>
|
|
<div class="share-card-preview" id="shareCardPreview" style="display:none">
|
|
<canvas id="shareCardCanvas" width="600" height="800" style="max-width:100%;border-radius:12px;margin-top:16px"></canvas>
|
|
<button class="btn-share primary" onclick="downloadShareCard()" style="margin-top:8px">💾 保存图片</button>
|
|
</div>
|
|
<button class="btn-retry" onclick="retryQuiz()">↻ 重新测试</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toast" id="toast"></div>
|
|
|
|
<script src="/static/js/mathbti.js?v=4"></script>
|
|
</body>
|
|
</html>
|