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 维度评分体系
- 基于模式匹配的人格类型判定
- 条件触发（如饮酒倾向检测）
- 详细的维度解读和结果展示
二、技术栈
| 部分 | 技术选型 | 说明 |
|---|---|---|
| 结构 | HTML5 | 语义化标签 |
| 样式 | CSS3 | 原生 CSS，无框架 |
| 交互 | 原生 JavaScript | 无依赖，体积小 |
| 部署 | 静态托管 | GitHub Pages / Vercel 等均可 |
三、核心代码结构
1. 数据层：题库与维度定义
// 维度元数据constdimensionMeta={S1:{name:'S1 自尊自信',model:'自我模型'},S2:{name:'S2 自我清晰度',model:'自我模型'},// ... 共 15 个维度};// 题目结构constquestions=[{id:'q1',dim:'S1',// 关联维度text:'题目内容...',options:[{label:'选项A',value:1},{label:'选项B',value:2},{label:'选项C',value:3}]}];2. 逻辑层：评分与人格匹配
// 分数转等级functionsumToLevel(score){if(score<=3)return'L';if(score===4)return'M';return'H';}// 人格模式匹配（基于 15 维向量）constTYPE_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 适配移动端和桌面端。
五、本地运行与二次开发
# 克隆项目gitclone https://github.com/52IIS/52IIS_Tools.git# 进入目录cd52IIS_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 支持一下原作者。