JSLSTARGLOBE

class PersonalityTest {
    constructor() {
        this.currentQuestionIndex = 0;
        this.answers = [];
        this.mbtiScores = { E: 0, I: 0, S: 0, N: 0, T: 0, F: 0, J: 0, P: 0 };
        this.questions = [...]; // 20問のデータ
        this.personalityTypes = {...}; // 16タイプの詳細
    }
}

📝 状態管理を一元化し、テスト進行を制御するメインクラス

selectAnswer(target) {
    const value = answerBtn.getAttribute('data-value');
    this.answers[this.currentQuestionIndex] = value;

    // MBTIスコア更新
    const question = this.questions[this.currentQuestionIndex];
    const selectedTrait = question.answers[value].trait;
    this.mbtiScores[selectedTrait]++;

    // 自動遷移
    setTimeout(() => this.nextQuestion(), 800);
}

📝 回答選択と同時にスコア更新、UX向上の自動遷移実装

calculateMBTIType() {
    let type = '';
    type += this.mbtiScores.E > this.mbtiScores.I ? 'E' : 'I';
    type += this.mbtiScores.S > this.mbtiScores.N ? 'S' : 'N';
    type += this.mbtiScores.T > this.mbtiScores.F ? 'T' : 'F';
    type += this.mbtiScores.J > this.mbtiScores.P ? 'J' : 'P';
    return type; // "ENFP" など
}

📝 4軸の比較で16通りの性格タイプを決定する核心ロジック

updateTraitBars() {
    traits.forEach(trait => {
        const firstScore = this.mbtiScores[trait.first];
        const secondScore = this.mbtiScores[trait.second];
        const percentage = (firstScore / (firstScore + secondScore)) * 100;

        // アニメーション付きでバー表示
        setTimeout(() => {
            bar.style.width = `${percentage}%`;
        }, 100);
    });
}

📝 スコアをパーセンテージ化し、視覚的なバーグラフで表現

saveResults() {
    const results = {
        mbtiType: mbtiType,
        personalityName: personalityName,
        scores: this.mbtiScores,
        date: new Date().toISOString(),
        answers: this.answers
    };
    localStorage.setItem('personality-test-results', JSON.stringify(results));
}

📝 テスト結果をlocalStorageで永続化、再訪時の体験向上