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

SBTI 人格测试源码分析一个完整的纯前端心理测试项目项目来源52IIS 在线工具箱作者整理开源开源地址https://github.com/52IIS/52IIS_Tools/tree/main/public/SBTI52IIS部署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(score3)returnL;if(score4)returnM;returnH;}// 人格模式匹配基于 15 维向量constTYPE_LIBRARY{CTRL:{code:CTRL,cn:拿捏者,desc:...},// ... 共 28 种人格};// 计算用户向量与各人格的距离取最近匹配3. 视图层动态渲染renderQuestions()动态生成题目列表renderResult()展示测试结果、维度评分4. 特殊逻辑条件触发// 饮酒相关问题触发隐藏人格if(app.answers[drink_gate_q2]2){finalTypeTYPE_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 支持一下原作者。