如何为MBTI类人格测验的showResults()函数保留Top2结果并展示

我正在适配一款MBTI类人格测验，该测验包含9道题目（3组×3题），根据选择“A”或“B”输出字母结果，当前最终会生成含三个核心字母的人格类型。现需为showResults()函数新增功能：仅保留得分占比最高的两个字母组合，并展示该组合对应的标题、描述等对象信息。

现有函数代码如下：

function showResults() {

    type += (s >= n) ? "S" : "N";
    type += (t >= f) ? "T" : "F";

    type2 += (s >= n) ? "S" : "N";
    type2 += (t >= f) ? "T" : "F";
    type2 += (j >= p) ? "J" : "P";
    
    document.querySelector("#type").innerHTML = type;
    document.querySelector("#largest").innerHTML = type2;
    document.querySelector("#type-title").innerHTML = types[type].title;
    document.querySelector("#type-percentage").innerHTML = types[type].percentage;
    document.querySelector("#type-description").innerHTML = types[type].description;
    document.querySelector("#type-site").href = types[type].site;
    document.querySelector("#type-details").classList.remove("hidden");
    document.querySelector("#scroll-down").classList.remove("hidden");
    document.querySelector("#results").classList.remove("hidden");
}

优化后的代码实现 #

function showResults() {
    // 计算各维度得分占比（每组3题，取该维度最高得分占比）
    const dimensionData = [
        { letter: s >= n ? "S" : "N", ratio: Math.max(s, n) / 3 },
        { letter: t >= f ? "T" : "F", ratio: Math.max(t, f) / 3 },
        { letter: j >= p ? "J" : "P", ratio: Math.max(j, p) / 3 }
    ];

    // 按占比从高到低排序，取前两个字母组成目标组合
    dimensionData.sort((a, b) => b.ratio - a.ratio);
    const topTwoType = dimensionData[0].letter + dimensionData[1].letter;

    // 计算两个维度的平均占比，可根据需求调整展示逻辑
    const averageRatio = ((dimensionData[0].ratio + dimensionData[1].ratio) / 2 * 100).toFixed(1) + "%";

    // 更新页面结果内容
    document.querySelector("#type").innerHTML = topTwoType;
    document.querySelector("#largest").innerHTML = topTwoType;
    document.querySelector("#type-title").innerHTML = types[topTwoType].title;
    document.querySelector("#type-percentage").innerHTML = averageRatio;
    document.querySelector("#type-description").innerHTML = types[topTwoType].description;
    document.querySelector("#type-site").href = types[topTwoType].site;
    
    // 显示结果区域
    document.querySelector("#type-details").classList.remove("hidden");
    document.querySelector("#scroll-down").classList.remove("hidden");
    document.querySelector("#results").classList.remove("hidden");
}

关键说明 #

• 先计算每个维度的得分占比（每组3题，用该维度的最高得分除以3）；
• 对三个维度按占比降序排序，取前两个字母组成新的人格类型组合；
• 百分比展示采用两个维度的平均占比，可根据需求改为展示两个维度各自占比或总和；
• 确保types对象中包含所有可能的两字母组合对应的title、description等属性。

内容的提问来源于stack exchange，提问作者Chevax