// MathBTI 前端逻辑 — 12题 → 16结果 → 4族
let testData = null, answers = [], currentQ = 0, myResult = null;
async function init() {
try {
const r = await fetch('/data/seed_mathbti.json');
testData = await r.json();
renderIntro();
} catch (e) {
document.getElementById('introScreen').innerHTML =
'';
}
}
function renderIntro() {
const axesEl = document.getElementById('introAxes');
if (axesEl && testData.axes) {
axesEl.innerHTML = testData.axes.map(a =>
'' +
'' + (a.emoji_left || '') + '' +
'' + a.name + '' +
'' + (a.emoji_right || '') + '' +
'
'
).join('');
}
document.querySelector('.intro-meta').textContent =
'⏱ 约2分钟 · 4选项 · 16种人格';
}
function startQuiz() {
answers = new Array(testData.questions.length).fill(-1);
currentQ = 0;
switchScreen('quizScreen');
renderQuestion();
}
function renderQuestion() {
const q = testData.questions[currentQ];
document.getElementById('quizQuestion').textContent = q.question;
const optEl = document.getElementById('quizOptions');
const sel = answers[currentQ];
optEl.innerHTML = q.options.map((o, i) =>
''
).join('');
// Progress
const pct = Math.round((currentQ + 1) / testData.questions.length * 100);
document.getElementById('progressFill').style.width = pct + '%';
// 最后一题时进度条末尾显示葫芦图标
const isLast=currentQ===testData.questions.length-1;
document.getElementById('progressFill').style.setProperty('--is-last',isLast?'1':'0');
document.getElementById('progressText').textContent = (currentQ + 1) + '/' + testData.questions.length;
// Next button
const btn = document.getElementById('btnNext');
btn.disabled = answers[currentQ] === -1;
btn.textContent = currentQ === testData.questions.length - 1 ? '查看结果' : '下一题';
}
function selectOption(idx) {
answers[currentQ] = idx;
document.getElementById('btnNext').disabled = false;
// Update visual
document.querySelectorAll('.quiz-option').forEach((el, i) => {
el.classList.toggle('selected', i === idx);
});
}
async function nextQuestion() {
if (answers[currentQ] === -1) return;
if (currentQ < testData.questions.length - 1) {
currentQ++;
renderQuestion();
return;
}
// Last question → calculate locally
const btn = document.getElementById('btnNext');
btn.disabled = true;
btn.textContent = '计算中…';
try {
myResult = calculateResult(answers);
// 自动获得对应的数学人物卡
const mbtiCode=myResult.binary_code;
let gotNewCard=false;
if(mbtiCode){
let cardState2=JSON.parse(localStorage.getItem('hulu_card_state')||'{}');
if(!cardState2.owned)cardState2.owned=[];
if(!cardState2.drawHistory)cardState2.drawHistory=[];
if(cardState2.owned.indexOf(mbtiCode)===-1){
cardState2.owned.push(mbtiCode);
cardState2.drawHistory.push({code:mbtiCode,date:new Date().toISOString().slice(0,10),method:'mathbti'});
localStorage.setItem('hulu_card_state',JSON.stringify(cardState2));
gotNewCard=true;
}
}
renderResult();
// 卡片领取提示
if(gotNewCard){
const res=myResult.result;
const notice=document.getElementById('cardNotice');
if(notice){notice.style.display='block';document.getElementById('cardNoticeName').textContent=res?res.name:'—'}
showToast('🎴 获得数学人物小卡！前往葫芦数学查看卡册');
}
switchScreen('resultScreen');
} catch (e) {
showToast('提交失败，请重试');
btn.disabled = false;
btn.textContent = currentQ === testData.questions.length - 1 ? '查看结果' : '下一题';
}
}
function calculateResult(answers) {
const axes = testData.scoring.axes; // ["style","purpose","era","social"]
const maxPerAxis = testData.scoring.max_per_axis;
const cutoff = testData.scoring.cutoff;
// 计算每个轴的得分
const axisScores = {};
axes.forEach(axis => {
axisScores[axis] = 0;
});
testData.questions.forEach((q, i) => {
const score = q.options[answers[i]].score;
axisScores[q.axis] += score;
});
// 生成二进制代码 (≤cutoff=0左极, ≥cutoff+1=1右极)
const binaryCode = axes.map(axis => axisScores[axis] <= cutoff ? '0' : '1').join('');
// 获取结果
const result = testData.results[binaryCode];
return {
binary_code: binaryCode,
axis_scores: axisScores,
result: result
};
}
function renderResult() {
const res = myResult.result;
if (!res) return;
// Portrait
const portraitEl = document.getElementById('resultPortrait');
if (res.portrait) {
portraitEl.innerHTML = '
' + (res.icon || 'Σ') + '' + (res.icon || 'Σ') + '
';
}
// Name + Clan
document.getElementById('resultName').innerHTML = res.name + ' ' + myResult.binary_code + '';
document.getElementById('resultTagline').textContent = res.tagline || '';
// Clan badge
const clanData = testData.clans[res.clan];
document.getElementById('resultMathematician').innerHTML =
(clanData ? '' + clanData.emoji + ' ' + clanData.name + ' · ' + res.mathematician + '' : '') +
'代表数学家：' + (res.mathematician || '—') + '';
// Keywords
const kwEl = document.getElementById('resultKeywords');
if (res.keywords) {
kwEl.innerHTML = res.keywords.map(k => '' + k + '').join('');
kwEl.style.display = 'flex';
} else {
kwEl.style.display = 'none';
}
// Description
document.getElementById('resultDesc').textContent = res.description || '';
document.getElementById('resultShort').textContent = res.short_desc || '';
// Bio
document.getElementById('bioTitle').textContent = '关于 ' + (res.mathematician || '这位数学家');
document.getElementById('bioText').textContent = res.bio || '';
document.getElementById('bioFact').textContent = res.bio_fact || '';
// Axes bars
const axesEl = document.getElementById('resultAxes');
if (testData.axes) {
axesEl.innerHTML = testData.axes.map(a => {
const score = myResult.axis_scores[a.id] || 0;
const maxScore = testData.scoring.max_per_axis || 9;
const pct = Math.round(score / maxScore * 100);
return '' +
'
' + (a.emoji_left || '') + ' ' + a.left + '' +
'
' +
'
' + a.right + ' ' + (a.emoji_right || '') + '' +
'
五维能力
' + labels.map(k => {
const v = res.stats5[k] || 0;
return '' +
'
' + k + '' +
'
' +
'
' + v + '' +
'