SBTI 人格测试源码分析：一个完整的纯前端心理测试项目（附源码）

SBTI 人格测试源码分析：一个完整的纯前端心理测试项目

项目来源：52IIS 在线工具箱作者整理开源
开源地址：https://github.com/52IIS/52IIS_Tools/tree/main/public/SBTI
52IIS部署：https://www.52iis.com/SBTI/index.html

最近看到一个有趣的开源项目 —— SBTI 人格测试。这是一个纯前端实现的互动式心理测试工具，包含完整的题库、多维度评分、人格匹配算法和结果展示。本文从技术角度分析这个项目的代码结构、核心逻辑和可学习之处。

一、项目概述

这是一个静态 HTML/CSS/JS 项目，无需后端、无需数据库，部署在任何 Web 服务器上即可运行。项目实现了：

• 多题互动测试界面
• 15 维度评分体系
• 基于模式匹配的人格类型判定
• 条件触发（如饮酒倾向检测）
• 详细的维度解读和结果展示

二、技术栈

三、核心代码结构

1. 数据层：题库与维度定义

// 维度元数据
const dimensionMeta = {
S1: { name: 'S1 自尊自信', model: '自我模型' },
S2: { name: 'S2 自我清晰度', model: '自我模型' },
// … 共 15 个维度
};

// 题目结构
const questions = [
{
id: 'q1',
dim: 'S1', // 关联维度
text: '题目内容…',
options: [
{ label: '选项A', value: 1 },
{ label: '选项B', value: 2 },
{ label: '选项C', value: 3 }
]
}
];

2. 逻辑层：评分与人格匹配

// 分数转等级
function sumToLevel(score) {
if (score <= 3) return 'L';
if (score === 4) return 'M';
return 'H';
}

// 人格模式匹配（基于 15 维向量）
const TYPE_LIBRARY = {
"CTRL": { code: "CTRL", cn: "拿捏者", desc: "…" },
// … 共 28 种人格
};

// 计算用户向量与各人格的距离，取最近匹配

3. 视图层：动态渲染

renderQuestions()：动态生成题目列表

renderResult()：展示测试结果、维度评分

4. 特殊逻辑：条件触发

// 饮酒相关问题触发隐藏人格
if (app.answers['drink_gate_q2'] === 2) {
finalType = TYPE_LIBRARY.DRUNK; // 酒鬼人格
}

四、项目亮点

完全前端化
不需要后端，降低了部署和维护成本。

可配置的数据结构
题库、维度、人格库都是纯 JS 对象，便于修改和扩展。

向量匹配算法
将 15 维的 L/M/H 等级转化为数值向量，通过距离计算找到最匹配人格。

条件分支
支持题目之间的依赖关系（如饮酒问题触发隐藏结果）。

响应式设计
CSS 适配移动端和桌面端。

五、本地运行与二次开发

# 克隆项目
git clone https://github.com/52IIS/52IIS_Tools.git

# 进入目录
cd 52IIS_Tools/public/SBTI

# 用任意静态服务器运行（如 VS Code Live Server）

可以修改的内容：

题库文案（questions 数组）

人格类型与描述（TYPE_LIBRARY）

维度解读（DIM_EXPLANATIONS）

样式（CSS 变量在 :root 中）

六、适合的学习场景

前端初学者：学习原生 JS 操作 DOM、事件监听、动态渲染

想做互动测试工具的人：参考题库结构和结果匹配逻辑

静态页面爱好者：了解如何做一个完整的多页面交互应用

七、开源信息

原作者：B站 @蛆肉肉串儿（UID417038183）

整理开源：52IIS 在线工具箱作者

开源协议：宽松协议，可学习修改

开源地址：https://github.com/52IIS/52IIS_Tools/tree/main/public/SBTI

如果觉得这个项目对你有帮助，可以 Star 支持一下原作者。