人格阴影测试完整HTML页面
完整可运行、适配移动端、含20道题目、9维度雷达图计分、完整交互逻辑，直接复制代码保存为 .html 即可打开使用。 人格阴影深度测试
body {
background-color: #f8f5f0;
min-height: 100vh;
padding: 20px 15px;
color: #444;
}
.container {
max-width: 800px;
margin: 0 auto;
}
/* 首页样式 */
.home-card, .question-card, .result-card {
background: #fff;
border-radius: 20px;
padding: 30px 25px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
margin-bottom: 20px;
display: none;
}
.active {
display: block;
animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.home-card h1 {
text-align: center;
color: #6b6358;
font-size: 24px;
margin-bottom: 20px;
}
.home-card p {
line-height: 1.8;
color: #888;
text-align: center;
margin-bottom: 30px;
}
.start-btn {
display: block;
width: 100%;
height: 50px;
background: #b8a999;
color: #fff;
border: none;
border-radius: 12px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
}
.start-btn:hover {
background: #a09080;
}
/* 题目页面样式 */
.q-title {
font-size: 16px;
line-height: 1.8;
margin-bottom: 25px;
color: #555;
}
.q-num {
color: #b8a999;
font-weight: bold;
}
.option-list {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 35px;
}
.option-item {
padding: 16px 20px;
border: 1px solid #e8e3db;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s;
}
.option-item:hover {
border-color: #b8a999;
background: #faf7f2;
}
.option-item.active {
border-color: #b8a999;
background: #f0ebe3;
}
.btn-group {
display: flex;
gap: 15px;
}
.btn {
flex: 1;
height: 48px;
border-radius: 12px;
border: none;
font-size: 15px;
cursor: pointer;
transition: all 0.3s;
}
.prev-btn {
background: #e8e3db;
color: #666;
}
.next-btn {
background: #b8a999;
color: #fff;
}
.prev-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* 结果页样式 */
.result-card h2 {
text-align: center;
color: #6b6358;
margin-bottom: 15px;
font-size: 22px;
}
.total-score {
text-align: center;
font-size: 16px;
color: #999;
margin-bottom: 25px;
}
.score-text {
font-size: 24px;
color: #b8a999;
font-weight: bold;
}
.radar-box {
width: 100%;
height: 380px;
margin: 20px 0;
}
.desc-box {
margin-top: 30px;
line-height: 2;
color: #666;
font-size: 15px;
}
.restart-btn {
width: 100%;
height: 50px;
margin-top: 30px;
background: #b8a999;
color: #fff;
border: none;
border-radius: 12px;
font-size: 16px;
cursor: pointer;
}
/* 弹窗提示 */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.2);
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
opacity: 0;
pointer-events: none;
transition: all 0.3s;
}
.modal.show {
opacity: 1;
pointer-events: auto;
}
.modal-content {
background: #fff;
padding: 25px 30px;
border-radius: 15px;
text-align: center;
width: 80%;
max-width: 300px;
}
.modal-content p {
margin-bottom: 20px;
color: #666;
}
.modal-btn {
padding: 8px 25px;
background: #b8a999;
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
}
人格阴影
每个人的内心都藏着不
20道专业测试题，精准解析你的9大潜意识阴影维度开始测试
上
阴影总分：0 / 1
重新
// 9大阴影维度（顺时针排序：控制欲、自我防御、优越感、野心、反击感、伪装、猜疑心、索取、胜负欲、嫉妒感） const dimensionList = [ '控制欲','自我防御','优越感','野心','反击感', '伪装','猜疑心','索取','胜负欲','嫉妒感' ];
// 初始化分数 10个维度默认0分
let scoreData = [0,0,0,0,0,0,0,0,0,0];
// 用户答题记录
let userAnswer = [];
// 当前题目索引
let currentQ = 0;
// 20道测试题，每题3选项，对应10个维度加分规则
const questionList = [
{
title: "当团队决策和你的想法冲突时，你会？",
options: [
"坚持自己观点，试图说服所有人（+15控制欲、+10胜负欲）",
"折中妥协，避免矛盾冲突（+10自我防御、+8伪装）",
"听从多数人安排，无所谓结果（无加分）"
],
score: [[15,0,0,0,0,0,0,0,10,0],[0,10,0,0,0,8,0,0,0,0],[0,0,0,0,0,0,0,0,0,0]]
},
{
title: "别人当众否定你的能力时，你的第一反应是？",
options: [
"立刻反驳，证明自己的实力（+12反击感、+10优越感）",
"表面平静，内心耿耿于怀（+10伪装、+12猜疑心）",
"坦然接受，反思自身问题（无加分）"
],
score: [[0,0,10,0,12,0,0,0,0,0],[0,0,0,0,0,10,12,0,0,0],[0,0,0,0,0,0,0,0,0,0]]
},
{
title: "面对更好的发展机会，你通常会？",
options: [
"主动争取，不惜付出代价（+15野心、+10胜负欲）",
"观望犹豫，害怕失败不敢尝试（+10自我防御、+8索取）",
"顺其自然，得之我幸失之我命（无加分）"
],
score: [[0,0,0,15,0,0,0,0,10,0],[0,10,0,0,0,0,0,8,0,0],[0,0,0,0,0,0,0,0,0,0]]
},
{
title: "朋友过得比你优秀顺遂，你会？",
options: [
"内心产生落差，暗自攀比（+12嫉妒感、+10胜负欲）",
"表面祝福，心里略带不甘（+10伪装、+8优越感）",
"真心祝福，为对方开心（无加分）"
],
score: [[0,0,0,0,0,0,0,0,10,12],[0,0,8,0,0,10,0,0,0,0],[0,0,0,0,0,0,0,0,0,0]]
},
{
title: "与人合作时，你更倾向于？",
options: [
"主导所有流程，把控全部细节（+18控制欲）",
"等待对方付出更多，自己顺势获利（+12索取）",
"分工协作，彼此互相包容（无加分）"
],
score: [[18,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,12,0,0],[0,0,0,0,0,0,0,0,0,0]]
},
{
title: "被人无意冒犯后，你会？",
options: [
"当场回击，不让自己吃亏（+15反击感）",
"记在心里，悄悄疏远对方（+10猜疑心、+8伪装）",
"一笑而过，不会放在心上（无加分）"
],
score: [[0,0,0,0,15,0,0,0,0,0],[0,0,0,0,0,8,10,0,0,0],[0,0,0,0,0,0,0,0,0,0]]
},
{
title: "你如何看待自己的优势和长处？",
options: [
"自认远超普通人，不甘平庸（+15优越感、+12野心）",
"偶尔炫耀，希望被他人认可（+10优越感、+8索取）",
"平常心看待，低调踏实做事（无加分）"
],
score: [[0,0,15,12,0,0,0,0,0,0],[0,0,10,0,0,0,0,8,0,0],[0,0,0,0,0,0,0,0,0,0]]
},
{
title: "遭遇失败挫折，你的第一心态是？",
options: [
"归咎他人或外界原因，从不认错（+12自我防御、+10控制欲）",
"情绪低落，害怕被他人嘲笑（+10自我防御、+8伪装）",
"坦然复盘，主动承担责任（无加分）"
],
score: [[10,12,0,0,0,0,0,0,0,0],[0,10,0,0,0,8,0,0,0,0],[0,0,0,0,0,0,0,0,0,0]]
},
{
title: "面对竞争比拼，你的心态是？",
options: [
"必须赢，输了会极度不甘心（+18胜负欲）",
"想赢但怕输，压力感极强（+10胜负欲、+10自我防御）",
"重在参与，输赢无所谓（无加分）"
],
score: [[0,0,0,0,0,0,0,0,18,0],[0,10,0,0,0,0,0,0,10,0],[0,0,0,0,0,0,0,0,0,0]]
},
{
title: "他人对你好，你内心的想法是？",
options: [
"理所当然，希望对方一直付出（+15索取）",
"怀疑对方带有目的，心存戒备（+12猜疑心）",
"心怀感恩，双向奔赴回馈（无加分）"
],
score: [[0,0,0,0,0,0,0,15,0,0],[0,0,0,0,0,0,12,0,0,0],[0,0,0,0,0,0,0,0,0,0]]
},
{
title: "在社交场合，你习惯隐藏真实情绪吗？",
options: [
"习惯性伪装，从不暴露真心（+18伪装）",
"只对陌生人伪装，熟人面前放松（+10伪装）",
"情绪直白，喜怒哀乐写在脸上（无加分）"
],
score: [[0,0,0,0,0,18,0,0,0,0],[0,0,0,0,0,10,0,0,0,0],[0,0,0,0,0,0,0,0,0,0]]
},
{
title: "看到别人拥有你没有的东西，你会？",
options: [
"心生嫉妒，希望对方失去优势（+15嫉妒感）",
"暗自努力，想超越对方证明自己（+10嫉妒感、+10野心）",
"专注自己生活，不与他人比较（无加分）"
],
score: [[0,0,0,0,0,0,0,0,0,15],[0,0,0,10,0,0,0,0,0,10],[0,0,0,0,0,0,0,0,0,0]]
},
{
title: "制定计划后，你希望一切按照预想发展？",
options: [
"绝对不允许偏差，强行修正一切（+16控制欲）",
"轻微偏差可以接受，大变动会烦躁（+10控制欲）",
"灵活变通，接受所有突发变化（无加分）"
],
score: [[16,0,0,0,0,0,0,0,0,0],[10,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0]]
},
{
title: "被他人质疑能力时，你是否会记仇？",
options: [
"会默默记着，等待机会证明/反击（+12反击感、+10猜疑心）",
"短暂介意，很快释怀（+8猜疑心）",
"完全不在意，不予理会（无加分）"
],
score: [[0,0,0,0,12,0,10,0,0,0],[0,0,0,0,0,0,8,0,0,0],[0,0,0,0,0,0,0,0,0,0]]
},
{
title: "你对未来的欲望程度是？",
options: [
"野心极大，想要名利双收、高人一等（+18野心、+12优越感）",
"希望生活更好，不甘平庸普通（+10野心）",
"知足常乐，安稳度日即可（无加分）"
],
score: [[0,0,12,18,0,0,0,0,0,0],[0,0,0,10,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0]]
},
{
title: "面对他人的求助，你的真实心态是？",
options: [
"不愿付出，担心自己吃亏（+12索取、+10自我防御）",
"选择性帮助，优先考虑自身利益（+8索取）",
"力所能及，乐于帮助他人（无加分）"
],
score: [[0,10,0,0,0,0,0,12,0,0],[0,0,0,0,0,0,0,8,0,0],[0,0,0,0,0,0,0,0,0,0]]
},
{
title: "你是否经常觉得别人不够理解你？",
options: [
"经常如此，对他人充满戒备（+15猜疑心、+10自我防御）",
"偶尔会有，情绪敏感细腻（+8猜疑心）",
"很少在意，坦然接纳人际关系（无加分）"
],
score: [[0,10,0,0,0,0,15,0,0,0],[0,0,0,0,0,0,8,0,0,0],[0,0,0,0,0,0,0,0,0,0]]
},
{
title: "竞争失利后，你最容易出现的状态是？",
options: [
"极度不服气，想尽办法翻盘（+15胜负欲、+10反击感）",
"自我怀疑，刻意伪装不在意（+10伪装、+8胜负欲）",
"接受结果，总结经验重新出发（无加分）"
],
score: [[0,0,0,0,10,0,0,0,15,0],[0,0,0,0,0,10,0,0,8,0],[0,0,0,0,0,0,0,0,0,0]]
},
{
title: "你是否会刻意塑造完美人设？",
options: [
举报
html2.link