{
“@context”: “https://schema.org”,
“@type”: “WebSite”,
“name”: “seek80”,
“url”: “https://www.seek80.com”,
“description”: “职业性格测试与人才测评平台”,
“potentialAction”: {
“@type”: “SearchAction”,
“target”: “https://www.seek80.com/?s={search_term_string}”,
“query-input”: “required name=search_term_string”
}
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: ‘Microsoft YaHei’, sans-serif;
}

body {
background-color: #f5f7fa;
color: #333;
line-height: 1.6;
padding: 2px;
background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
}

.container {
max-width: 800px;
margin: 0 auto;
background-color: #fff;
border-radius: 15px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
overflow: hidden;
transition: transform 0.3s ease;
}

.container:hover {
transform: translateY(-5px);
}

header {
background: linear-gradient(135deg, #654ea3 0%, #3494e6 100%);
color: white;
padding: 0px;
text-align: center;
position: relative;
}

h1 {
font-size: 2.5rem;
margin-bottom: 12px;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
letter-spacing: 1px;
}

/* 修正标题颜色 */
header h1,
header p {
color: white !important; /* 确保标题和副标题都是白色的 */
}

.subtitle {
font-size: 1.15rem;
opacity: 0.92;
max-width: 600px;
margin: 0 auto;
line-height: 1.7;
}

.section {
padding: 30px;
display: none;
animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}

.instructions h2, .questions h2, .results h2 {
color: #2c3e50;
margin-bottom: 25px;
padding-bottom: 12px;
border-bottom: 2px solid #eaeef2;
position: relative;
}

.instructions-content {
background-color: #f8f9fa;
border-radius: 12px;
padding: 25px;
margin-bottom: 30px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03);
border: 1px solid #eaeef5;
}

.instructions-content p {
margin-bottom: 18px;
font-size: 1.08rem;
line-height: 1.8;
}

.instructions-content ul {
padding-left: 0; /* 修复：去除左侧内边距 */
margin-bottom: 25px;
list-style-type: none; /* 移除默认项目符号 */
}

.instructions-content li {
margin-bottom: 12px; /* 适当增加间距 */
display: flex; /* 修复：使用flex布局使内容顶格 */
align-items: flex-start; /* 顶部对齐 */
}

.instructions-content li:before {
content: “•”;
color: #3498db;
margin-right: 10px; /* 修复：适当增加右侧间距 */
font-size: 1.5rem;
line-height: 1.2;
}

.question-container {
border: 1px solid #e1e5eb;
border-radius: 12px;
padding: 22px;
margin-bottom: 30px;
transition: all 0.3s ease;
background-color: #f8fafc;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.03);
}

.question-container:hover {
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transform: translateY(-3px);
}

.question-text {
font-size: 1.18rem;
margin-bottom: 18px;
color: #2d3748;
line-height: 1.7;
font-weight: 500;
}

.options {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
margin-top: 20px;
}

.option {
display: flex;
align-items: center;
padding: 14px;
background-color: #edf2f7;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s;
font-size: 1.05rem;
}

.option:hover {
background-color: #e2e8f0;
transform: translateY(-2px);
}

.option.selected {
background-color: #3498db;
color: white;
box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}

.option input {
margin-right: 12px;
transform: scale(1.1);
cursor: pointer;
}

.pagination {
display: flex;
justify-content: center;
margin-top: 30px;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}

.pagination-btn {
padding: 14px 30px;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 1.05rem;
transition: all 0.3s;
font-weight: 500;
min-width: 140px;
letter-spacing: 0.5px;
}

.pagination-btn:disabled {
background: #cbd5e0;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}

.pagination-btn:hover:not(:disabled) {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.page-indicator {
font-size: 1.15rem;
font-weight: bold;
min-width: 120px;
text-align: center;
color: #4a5568;
padding: 0 20px;
background: #f1f7ff;
border-radius: 50px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e0ebff;
}

.result-container {
margin-top: 30px;
display: flex;
flex-wrap: wrap;
gap: 25px;
}

.chart-container {
flex: 1;
min-width: 300px;
height: 400px; /* 修复：设置固定高度 */
background-color: white;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
padding: 20px;
border: 1px solid #eaeef5;
/* 确保图表在容器内正确显示 */
position: relative;
}

.chart-wrapper {
position: absolute;
left: 20px;
right: 20px;
top: 50px;
bottom: 20px;
}

.type-info {
flex: 1;
min-width: 300px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 12px;
padding: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
border: 1px solid #eaeef5;
}

.type-info h3 {
margin-bottom: 20px;
color: #2c3e50;
position: relative;
padding-bottom: 10px;
}

.type-info h3:after {
content: ”;
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background: #3498db;
border-radius: 3px;
}

.type-info ul {
list-style-type: none;
padding-left: 5px;
}

.type-info li {
margin-bottom: 18px;
padding-left: 25px;
position: relative;
line-height: 1.7;
}

.type-info li:before {
content: “→”;
position: absolute;
left: 0;
color: #3498db;
font-weight: bold;
}

.personality-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 30px;
}

.personality-type {
padding: 20px;
border-radius: 12px;
background-color: white;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07);
text-align: center;
transition: all 0.4s ease;
cursor: pointer;
border: 2px solid transparent;
}

.personality-type:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.type-number {
font-size: 1.5rem;
font-weight: bold;
color: #2c3e50;
margin-bottom: 10px;
}

.type-name {
font-size: 1.05rem;
color: #4a5568;
margin-bottom: 18px;
font-weight: 500;
}

.type-score {
font-size: 1.8rem;
font-weight: bold;
color: #2980b9;
position: relative;
display: inline-block;
}

.type-score:after {
content: ”;
position: absolute;
bottom: -5px;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, #3498db, transparent);
border-radius: 3px;
}

.primary-type {
border: 3px solid #3498db;
transform: scale(1.05);
box-shadow: 0 8px 20px rgba(52, 152, 219, 0.2);
animation: pulse 2s infinite;
}

@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.5); }
70% { box-shadow: 0 0 0 12px rgba(52, 152, 219, 0); }
100% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0); }
}

.btn {
display: block;
padding: 16px 40px;
margin: 30px auto;
background: linear-gradient(135deg, #00c06f 0%, #00b4db 100%);
color: white;
border: none;
border-radius: 50px;
cursor: pointer;
font-size: 1.15rem;
font-weight: bold;
transition: all 0.4s;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
min-width: 220px;
text-align: center;
letter-spacing: 0.8px;
}

.btn:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.btn-back {
background: linear-gradient(135deg, #ff5e62 0%, #ff9966 100%);
margin-right: 20px;
}

.btn-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
margin-top: 40px;
}

.main-type {
background: linear-gradient(120deg, #e0f7fa 0%, #f9fbe7 100%);
padding: 30px;
border-radius: 15px;
margin: 35px 0;
text-align: center;
border: 3px solid #81d4fa;
position: relative;
overflow: hidden;
}

.main-type:before {
content: ”;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, #3498db, #9b59b6, #3498db);
}

.main-type h3 {
font-size: 1.7rem;
color: #2c3e50;
margin-bottom: 25px;
}

.type-description {
font-size: 1.2rem;
color: #34495e;
line-height: 1.8;
max-width: 700px;
margin: 0 auto;
}

.type-title {
font-size: 2.2rem;
font-weight: bold;
color: #2980b9;
margin-bottom: 20px;
position: relative;
padding-bottom: 15px;
}

.type-title:after {
content: ”;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, #3498db, #9b59b6);
border-radius: 4px;
}

.progress-container {
background-color: #f1f5f9;
border-radius: 50px;
height: 10px;
width: 100%;
margin: 25px 0;
position: relative;
overflow: hidden;
}

.progress-bar {
position: absolute;
height: 100%;
left: 0;
top: 0;
background: linear-gradient(90deg, #6a11cb, #2575fc);
border-radius: 50px;
transition: width 0.5s ease;
}

.progress-text {
text-align: center;
font-weight: 500;
color: #4a5568;
font-size: 1.1rem;
margin-top: 15px;
}

/* 新增调试信息样式 */
.debug-info {
background-color: #ffeaa7;
padding: 15px;
border-radius: 8px;
margin-top: 20px;
font-family: monospace;
font-size: 14px;
color: #2d3436;
white-space: pre-wrap;
}

@media (max-width: 768px) {
.personality-grid {
grid-template-columns: repeat(2, 1fr);
}

.options {
grid-template-columns: 1fr;
}

.pagination {
flex-direction: column;
}

.page-indicator {
width: 100%;
}

.btn-container {
flex-direction: column;
align-items: center;
}

.btn-back {
margin-right: 0;
margin-bottom: 10px;
}

.container {
padding: 15px;
}

h1 {
font-size: 1.8rem;
}

/* 中等屏幕高度调整 */
.chart-container {
height: 350px;
}
}

@media (max-width: 480px) {
.personality-grid {
grid-template-columns: 1fr;
}

.result-container {
flex-direction: column;
}

.section {
padding: 20px;
}

.type-description {
font-size: 1rem;
}

/* 小屏幕高度调整 */
.chart-container {
height: 300px;
}
}

.chart-title {
font-size: 1.3rem;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
color: #2c3e50;
}

// 九型人格类型信息和对应得分
const personalityTypes = [
{ id: 1, name: “完美型”, color: ‘#4e73df’, descShort: “理想主义，讲求原则” },
{ id: 2, name: “助人型”, color: ‘#1cc88a’, descShort: “关怀他人，善于支持” },
{ id: 3, name: “成就型”, color: ‘#36b9cc’, descShort: “高效实干，注重成功” },
{ id: 4, name: “自我型”, color: ‘#f6c23e’, descShort: “感性独特，追求深度” },
{ id: 5, name: “理智型”, color: ‘#5a5c69’, descShort: “善于观察，寻求知识” },
{ id: 6, name: “忠诚型”, color: ‘#e74a3b’, descShort: “忠诚谨慎，注重安全” },
{ id: 7, name: “活跃型”, color: ‘#fd7e14’, descShort: “热情乐观，追求自由” },
{ id: 8, name: “领袖型”, color: ‘#6610f2’, descShort: “自信果断，掌控全局” },
{ id: 9, name: “和平型”, color: ‘#20c997’, descShort: “适应包容，追求和谐” }
];

// 九型人格类型详细描述
const personalityDescriptions = {
1: “您是一位追求完美的类型，生活中注重原则和正确性。您有着强烈的是非观念，重视细节并不断改进自己。在团队中，您是有责任感的成员，总是力求做到最好。您的挑战在于过度自我批评，需要学会接纳自己和他人的不完美。在安全状态下，您能展现出7号型的积极特质，获得更多乐趣。”,
2: “您是一位关怀者，总是将他人需求置于自己之上。您善于觉察他人情绪，乐于提供情感支持，在人际关系中处于中心位置。您可能过度关注他人认可而忽略自身需求，需要学习设立界限并关爱自己。在安全状态下，您能展现出4号型的特质，更好地表达自己的情感和需要。”,
3: “您是目标导向的高效执行者，非常重视成功和认可。您善于制定计划并达成目标，在社会环境中表现出色。您的挑战在于因追求成就而忽视内心真实感受，需要学会平衡工作与生活，接纳真实的自我。在安全状态下，您能展现出6号型的忠诚特质，建立更牢固的关系。”,
4: “您是情感深刻的浪漫主义者，追求独特性和真实体验。您对美有敏锐感受，富有创造力，渴望深层的情感联系。您的挑战在于情绪波动较大，需要培养情绪管理能力。在安全状态下，您能展现出1号型的优秀特质，表现出更多自律和组织能力。”,
5: “您是知识寻求者，渴望理解世界运行原理。您善于观察和分析，独立自主并重视个人空间。您可能因过度思考而脱离行动，需要学习更多参与现实生活。在安全状态下，您能展现出8号型的领导特质，更加自信地表达自己的观点。”,
6: “您是忠诚谨慎的守护者，注重安全和稳定。您善于预见风险，在团队中是可靠的支持者。您的挑战在于过度担心不确定性，需要培养对自我能力的信任。在安全状态下，您能展现出9号型的平静特质，获得更多内在平和。”,
7: “您是充满热情的冒险家，热爱自由和新体验。您乐观积极，常常为周围带来欢乐气氛。您可能因寻求刺激而逃避痛苦，需要学习面对和处理困难情绪。在安全状态下，您能展现出5号型的分析特质，获得更多深度思考能力。”,
8: “您是掌控者，自信果断且善于领导。您保护自己关心的人和事物，在危机中表现出色。您的挑战在于控制欲过强，需要学会适时柔软。在安全状态下，您能展现出2号型的关怀特质，更好地理解他人需求。”,
9: “您是和平缔造者，追求和谐并善于调解冲突。您包容多元观点，为他人创造舒适空间。您可能因避免冲突而忽略自我需求，需要学习明确表达自己立场。在安全状态下，您能展现出3号型的行动力，更高效地实现目标。”
};

// 九型人格发展建议
const personalityAdvice = {
1: [
“练习自我同情：减少对自己的批评，接纳自己和他人都是不完美的存在”,
“灵活应对变化：当事情没有按计划发展时，学会接受并调整”,
“区分合理与完美：明白有时完成比完美更重要”,
“表达内心感受：适当分享你的负面情绪，不要总是表现出一切完美”,
“工作休闲平衡：培养工作之外的兴趣爱好，避免过度工作”
],
2: [
“设定健康界限：学会在过度付出前说’不’，保护自己的时间和精力”,
“关心自身需求：每天花时间反思自己的真实感受和需求”,
“减少过度依赖：接受他人并不总是需要你的帮助”,
“真诚表达自我：不要为了取悦他人而牺牲自己的真实想法”,
“培养个人兴趣：寻找让你快乐而不涉及照顾他人的活动”
],
3: [
“重视过程体验：不只关注结果，也欣赏过程中的学习和成长”,
“连接真实情感：抽时间反思内心真实感受，而不只是成就”,
“接受脆弱性：允许自己展现不完美的一面”,
“工作生活平衡：安排不具生产力的休闲时间，纯粹为了乐趣”,
“真诚建立关系：避免因目标而建立关系，练习真诚的交往”
],
4: [
“情绪管理技巧：发展应对强烈情绪的健康策略，如正念或艺术表达”,
“行动导向实践：当感到情绪低落时，尝试完成一些具体的小目标”,
“珍惜日常时刻：在追求独特体验的同时，也学会珍视平凡美好”,
“避免过度比较：减少将自己与他人比较的倾向”,
“稳定规律生活：制定并保持规律的作息时间表，提供安全感”
],
5: [
“参与人际互动：定期安排社交活动，避免过度孤立”,
“行动取代思考：设定时限，将想法付诸实践”,
“分享知识技能：寻找安全方式表达想法，不必等待成为专家”,
“关注身体需求：确保满足基本需求，如营养餐食和充分休息”,
“现实连接：平衡理论知识学习和实际生活应用”
],
6: [
“积极思维训练：练习识别灾难化思维并用更理性想法替代”,
“逐步面对恐惧：设定小挑战，证明自己有应对能力”,
“寻找安全支持：建立可靠信任的人际关系网”,
“自信培养练习：从小决策开始实践信任自己的判断”,
“正念当下：练习专注于当下而非担忧未来”
],
7: [
“面对痛苦经历：允许自己体验并处理困难情绪而非逃避”,
“专注当下实践：培养专注力，如正念冥想练习”,
“承诺坚持：选择一个目标坚持到底，而不是不断转移”,
“深入体验：尝试专注于一个活动而不是同时参与多件事”,
“平静时刻：每天安排安静独处时间反思自我”
],
8: [
“感知身体信号：注意愤怒的早期身体信号，在爆发前处理”,
“主动倾听技巧：练习在回应前先充分理解他人观点”,
“展现脆弱一面：选择安全环境分享你的弱点和感受”,
“放松防御机制：逐步学习不需要对抗状态下与他人交流”,
“耐心培养：在决策前留出时间考虑不同选项”
],
9: [
“表达个人立场：每天至少分享一个自己的观点或偏好”,
“明确目标优先：将个人需求纳入待办事项清单重要位置”,
“主动参与决策：在会议和关系中主动表达意见而非被动附和”,
“解决小冲突：练习在争议升级前温和地表达不同意见”,
“能量管理：识别拖延的迹象，并使用计时器启动任务”
]
};

// 问题库（180题）
const questions = [
“1. 我觉得许多人倚赖我的帮忙和慷慨。”,
“2. 我很努力纠正自己的缺失。”,
“3. 我是一个不断朝向目标生活的外向人。”,
“4. 我认为大多数人都不懂得欣赏生命的内在美。”,
“5. 我倾于收藏自己的感情，是个多接受少付出的人。”,
“6. 我是一个彻头彻尾、站在路中心的人，我最大的敌人是自己的恐惧。”,
“7. 我喜欢让事情呈现得轻松、幽默。”,
“8. 我是个易于满足的人，极少感到忧虑，几乎常是心平气和的。”,
“9. 我很善于挺身而出，为自己的需要争持到底。”,
“10. 我常为事情未能按意想中的路向发展而烦躁不乐。”,
“11. 我需要在别人生活上占重要席位，我喜欢别人需要我。”,
“12. 我处事精确及具备专业精神。”,
“13. 我不善于小组讨论或作简短谈话，我需要很多私人时间和空间。”,
“14. 我对过去的事有着一份近乎执着的怀恋。”,
“15. 我很重视对某一团体的忠贞。”,
“16. 我善于计划却不善于施行。”,
“17. 我很容易察觉别人的弱点，假如我遇到不公平的待遇，我会攻击这弱点。”,
“18. 我觉得生命中许多事情不值得人为它过份操劳而情绪低落。”,
“19. 我对现存的总觉不满。”,
“20. 人们说我是个好的推销员。”,
“21. 许多人感到和我很接近。”,
“22. 我常被有象征性的事物吸引。”,
“23. 当我感到窘促或被人询问即时感受时，我脑里常是一片空白的。”,
“24. 我很难违抗有权位者的意见。”,
“25. 我对于「人」和他们做事的动机从不抱很大的怀疑态度。”,
“26. 我不害怕面对别人，事实上，我经常面对不同类型的人。”,
“27. 我喜欢享有完全不用工作的时间。”,
“28. 我常为许多事情忧虑。”,
“29. 我经常尽全力，为成全别人。”,
“30. 我似具有策划，组织工作的本能而且能使工作顺利完成。”,
“31. 别人常欠缺那份深度去了解我的感受。”,
“32. 我讨厌自己貌似愚笨也憎恶被人视为愚笨。”,
“33. 我似乎比大多数人更懂得享受生命。”,
“34. 我在作任何抉择前必先搜集多方面资料，确保准确充足。”,
“35. 我喜欢唱反调，我对很多事情都很抗拒，尤其在开会的时候。”,
“36. 我是很容易说话的人，凡事都有商量余地。”,
“37. 我讨厌浪费时间。”,
“38. 我喜欢把别人从困难或尴尬的境况下解救出来。”,
“39. 我做事能干、称职、效率极高。”,
“40. 我对生命抱有悲观的感觉，有某些事是早已注定了的。”,
“41. 我常靠边站，我喜欢从旁边看别人怎样做而自己却不参与。”,
“42. 我需要较长时间才能作出决定，一般来说，我喜欢行事谨慎。”,
“43. 生命中没有很多事物是我不能欣赏的。”,
“44. 我向往掌权的职位，喜欢行使权力。”,
“45. 即使存在着个别差异，但我仍觉得人大多数是善良的，美好的。”,
“46. 我常怪责自己没有把事情做得好些。”,
“47. 我总是最后才想到自己。”,
“48. 「成功」一词对我异常重要。”,
“49. 我当事情不如意时，我会尽速引退。”,
“50. 我喜欢把事情安排得井井有条和具有高贵品味，亦很重视仪态。”,
“51. 我常怀疑自己有否足够的勇气去完成那应做的事。”,
“52. 我生命中经验过的痛苦和不愉快的事很少。”,
“53. 我对所做的每件事大都能善加掌握。”,
“54. 一般来说，我不会过份投入任何一件事。”,
“55. 我经常因少许细节而破坏了整件事。”,
“56. 我感到助人是应份的，不论我是否喜欢，我也会迫自己这样做。”,
“57. 我做事喜欢事先知道自己在进展途上站在那个位置。”,
“58. 我不喜欢想象自己仅是个平凡人，在很多方面我都是与众不同。”,
“59. 我较其他人沉默，别人往往要问我在想甚么。”,
“60. 我认为没有严格的规律很难指示人该作甚么。”,
“61. 我有一个愉快的童年。”,
“62. 我甚少机会受到挫败或让自己处于窘境。”,
“63. 我从不觉得有任何事情是那么重要，以至不能留待明天。”,
“64. 许多人常向我寻找安慰和劝勉。”,
“65. 我不懂得自娱，也难于让自己的精神松弛下来。”,
“66. 我喜欢用进度表、等级表或其他指标显示自己工作进展状况。”,
“67. 我的心神易被死亡、失落、痛苦等事情所占据。”,
“68. 我很难和人交往，要向人表达我所需要的更是难于启齿。”,
“69. 我很重视别人对我所持的原则和观点，不论他们是赞成或反对。”,
“70. 在我生命里不论任何事物都是以最佳状态出现的。”,
“71. 我是一个很主动甚或具攻击性和自我肯定的人。”,
“72. 我需要有外来的动力，或刺激我继续工作、行动。”,
“73. 我脑子里常自我批评，也批评别人。”,
“74. 我多次感到别人对我的倚赖成了我无法负荷的重担。”,
“75. 我常因所完成的工作较多而招人妒忌。”,
“76. 我的忧虑和重压，别人常觉察不到。”,
“77. 遇有问题出现时，我喜欢先行研究思索，然后才和他人商议。”,
“78. 我觉得任何事情在采取行动前应先取得有职权人仕的批准才好。”,
“79. 我是个近乎反常的乐观主义者，「理想」为我重于一切。”,
“80. 我讨厌浪费精力，做任何事情我都以省力为原则。”,
“81. 我十分抗拒别人干预我的行径，或强把他们的行径加诸我。”,
“82. 我感到很大的压力，推使我忠诚处事。”,
“83. 我不觉得自己有许多需要。”,
“84. 我重视在人眼前展示一个成功的形象。”,
“85. 我有时担心自己对一般性的感受反应迟缓。”,
“86. 即使我很喜欢一项活动，我从不知怎样介入，我总觉自己是局外人。”,
“87. 我常受怀疑所困扰，对存在着的矛盾别具警觉，也很敏感。”,
“88. 我希望别人对事情看得轻松点。”,
“89. 我觉得很难把自己品性上温柔的一面呈露出来，例如温柔、接纳关怀等。”,
“90. 我可被尊为最公正的仲裁者，因为我认为诉讼双方都是同样好的。”,
“91. 我重视做事准确无误。”,
“92. 我有时会觉得别人不欣赏我为他们所做的一切。”,
“93. 要成功有时要对自己的原则或标准适度协调。”,
“94. 我似易于把自己套入一组人的感受里，无法介定自己的感受。”,
“95. 我宁愿自己独力计划一件工作而不愿和一组人合作。”,
“96. 我工作纯为了责任和职务。”,
“97. 我经常想事情光明的一面而不看生命中黑暗的另一面。”,
“98. 我处事通常选择没有太多阻力的门径。”,
“99. 无论做任何事，我都会以积极的态度，怀着欣赏的心去做。”,
“100. 我常感到要和时间竞赛，许多应做的事情仍待完成。”,
“101. 有时候，我觉得自己是个受害者，别人都尽在利用我。”,
“102. 我喜欢展露出一个年轻活泼的形象。”,
“103. 我似乎较其他人更深刻地感受人际关系终断时的那份困扰。”,
“104. 我喜欢对事情采观望态度，把观察所得收藏起来。”,
“105. 我对一切不清楚的事，一定要问个明白，含糊不清是我最接受不了的。”,
“106. 我想自己是个怀有赤子童心的人，能与人同乐。”,
“107. 公义与不公义常是我最关注的论题。”,
“108. 有时候人们认为我是属于懒惰类型的人。”,
“109. 我有和一些要人交往的欲望。”,
“110. 我觉得必须对自己每时每刻负责。”,
“111. 每遇到新事物的出现，我通常会走到活动的最前端。”,
“112. 我为自己拥有高级品味和格调而自豪。”,
“113. 我对时间、金钱和所拥有的一切都很吝啬。”,
“114. 我似在不停地向我的恐惧挑战，要与它抗衡。”,
“115. 我喜欢把事情「描绘」出来，看看我曾到过那些地方也计划往那儿去。”,
“116. 我认为自己是个脚踏实地的人。”,
“117. 我为自己性情稳定而自豪。”,
“118. 每天晚上，我定要细心反省当日所做的，看是否每件工作都做得妥当。”,
“119. 我感到身心内外都经常在压力笼罩下。”,
“120. 我是活跃的竞争份子，亦很渴望别人的赞赏。”,
“121. 我常因感到被遗弃，孤独而饱受煎熬。”,
“122. 我比任何人更关心自己，更重视如何保护自己和自己的地位。”,
“123. 我对别人侵犯性的行为很敏感，我不喜欢别人勉强我作任何事。”,
“124. 人们认为我应该认真点，要和实际生命多接触。”,
“125. 我想我是个不受限制，不易妥协的人。”,
“126. 我喜欢以低调处理事情，让别人也因而安稳下来。”,
“127. 我很容易与正义之士认同，和他们共同反抗，攻击不义的事。”,
“128. 我觉得爱与被爱是生命中最重要的。”,
“129. 我憎恨别人指出我正在行一些看似没法完成的工作。”,
“130. 我理解小丑笑脸背后隐藏着忧伤，也对这事感到共鸣。”,
“131. 我声线柔弱，人们常要我说话大声点，而这却使我动怒。”,
“132. 当我和有权势的人接近时，我一方面感到安全，但另一方面却惧怕他们。”,
“133. 我不认为长久停留在伤痛中是一件好事。”,
“134. 我似比其他人更有精力，我认为自己是个勤劳的人。”,
“135. 我总没法记得前次我睡不安宁是多久以前的事。”,
“136. 我认为自己是一个很负责的人。”,
“137. 我常觉得必要为别人交付自己。”,
“138. 我宁愿参与策划工程而不愿选择只是监管工程的进行。”,
“139. 我发现自己的情绪常往来在高低起落两极之中，很不平稳。”,
“140. 我要求了解事情的架构或纲目多于其详细内容。”,
“141. 我讨厌人们逃避现实底触犯法纪，我觉得必须把他们抓出来。”,
“142. 我对未来充满热忱，充满希望。”,
“143. 我觉得大多数事件都是无关重要的，那又如何需要如此紧张让它们牵着走呢？”,
“144. 我若接自己安排的计划去工作，定然较按别人为我编排的工作会有更佳成绩。”,
“145. 「感情」为我是很重要的。”,
“146. 我极其投入自己的工作，认同工作上的角色，有时甚而忘记「我是谁」。”,
“147. 我感到强烈的催迫，要求我不断改善自己，不可表达内在的愤怒。”,
“148. 别人常指责我行为过于戏剧化，其实是他们不了解我的感受。”,
“149. 我保留我所拥有的，也收集一些日后可能适用的物资。”,
“150. 我不喜欢人们盯着我。”,
“151. 我喜欢使人快乐，并把事情弄得美好。”,
“152. 我很重视现在，我常感到一份催迫，现在应是要行动的一刻。”,
“153. 我很难静心倾听或专注于某一件事。”,
“154. 我认为要别人爱我，和认同我，我必先样样做到最好。”,
“155. 我若有一天假期，我常不知道可以为自己做些甚么。”,
“156. 我相信一个人的外表是很重要的。”,
“157. 艺术及艺术性的表达方式对我很重要，他们可以帮助我疏导情绪。”,
“158. 我常幻想自己是某方面的英雄人物或属于某重要阶层。”,
“159. 我常静悄悄地进出，不为同室中人察觉。”,
“160. 我大部份时间都避免卷入严肃的问题。”,
“161. 我要每件事情都做得妥妥当当，我喜欢每件事情（包括个人感情）有始有终。”,
“162. 我的精力底线很低。”,
“163. 我常因自己或其他人没有表「应该」的生活行事而感到失望。”,
“164. 我觉得因着我所作的一切，我堪当在人们心中占重要席位。”,
“165. 我依稀记得童年时代曾有被父亲或母亲遗弃的感受。”,
“166. 我认为必须多方面有成就别人才会注意我。”,
“167. 当我觉我自己处于无大作为的境况时，我会一事不理。”,
“168. 我衡量他人时，常以他人会否对我构成威胁为据点。”,
“169. 我只愿从事件的表面掠过，而不愿进入事情的深处。”,
“170. 我不以为自己是个举足轻重的人。”,
“171. 我很容易觉察到欺骗和羞辱，当我意识到受骗时，我会极度愤怒。”,
“172. 我对事物的观点似乎紧于事情的「对与错」或「好与坏」。”,
“173. 我认为自己能滋养别人比任何工作更令我自豪。”,
“174. 我是个勇往直前，力求进取的人。”,
“175. 我尝试靠思考去解决难题。”,
“176. 我感到有些时候自己像是一个被流放的贵族。”,
“177. 我实在不喜欢工作，除非是娱乐性丰富的。”,
“178. 我喜欢工作方面有规范。”,
“179. 我坚持「不让事情困扰我」的态度。”,
“180. 我坚持「不让事情困扰我」的态度。”
];

// 完整180题的题目类型映射
const questionTypes = [
9,1,3,4,5,6,7,9,8,1,2,1,5,4,6,7,8,7,1,3,
2,4,5,6,2,3,7,6,2,3,4,3,7,5,6,9,3,2,3,4,
9,6,9,8,2,1,2,3,9,1,6,7,3,9,1,2,6,4,5,1,
9,1,3,4,5,6,7,9,8,1,2,1,5,4,6,7,8,7,1,3,
2,4,5,6,2,3,7,6,2,3,4,3,7,5,6,9,3,2,3,4,
9,6,9,8,2,1,2,3,9,1,6,7,3,9,1,2,6,4,5,1,
9,1,3,4,5,6,7,9,8,1,2,1,5,4,6,7,8,7,1,3,
2,4,5,6,2,3,7,6,2,3,4,3,7,5,6,9,3,2,3,4,
9,6,9,8,2,1,2,3,9,1,6,7,3,9,1,2,6,4,5,1
];

// 全局变量
let currentPage = 1;
const questionsPerPage = 10;
let userAnswers = new Array(questions.length).fill(-1); // -1表示未回答
let scores = new Array(9).fill(0); // 1-9型得分

// 页面加载完成后初始化应用
window.onload = function() {
updateProgress();
showInstructions();
};

// 显示说明页面
function showInstructions() {
hideAllSections();
document.getElementById(‘instructions’).style.display = ‘block’;
currentPage = 1;
userAnswers = new Array(questions.length).fill(-1);
scores.fill(0);
}

// 隐藏所有区域
function hideAllSections() {
document.getElementById(‘instructions’).style.display = ‘none’;
document.getElementById(‘questions’).style.display = ‘none’;
document.getElementById(‘results’).style.display = ‘none’;
}

// 开始测试
function startTest() {
hideAllSections();
document.getElementById(‘questions’).style.display = ‘block’;
loadPage(1);
updateProgress();
}

// 更新进度显示
function updateProgress() {
const answeredCount = userAnswers.filter(a => a !== -1).length;
const percent = Math.round((answeredCount / questions.length) * 100);
document.getElementById(‘progress-bar’).style.width = percent + ‘%’;
document.getElementById(‘progress-text’).textContent = percent + ‘%’;
document.getElementById(‘completed-count’).textContent = answeredCount;
document.getElementById(‘completed-percent’).textContent = percent + ‘%’;
document.getElementById(‘test-progress’).style.width = percent + ‘%’;
}

// 加载问题页面
function loadPage(page) {
currentPage = page;
const questionContainer = document.getElementById(‘question-container’);
questionContainer.innerHTML = ”;

const startIndex = (page – 1) * questionsPerPage;
const endIndex = Math.min(startIndex + questionsPerPage, questions.length);

for (let i = startIndex; i < endIndex; i++) {
const qIndex = i;
const questionDiv = document.createElement('div');
questionDiv.className = 'question-container';

const questionText = document.createElement('div');
questionText.className = 'question-text';
questionText.innerHTML = questions[i];
questionDiv.appendChild(questionText);

const optionsDiv = document.createElement('div');
optionsDiv.className = 'options';

// 创建5个选项
for (let j = 0; j < 5; j++) {
const option = document.createElement('div');
option.className = `option ${userAnswers[qIndex] === j ? 'selected' : ''}`;
option.dataset.value = j;
option.innerHTML = `

${getOptionText(j)}
`;
option.onclick = () => {
userAnswers[qIndex] = j;
refreshQuestionOptions(qIndex);
updateProgress();
};
optionsDiv.appendChild(option);
}

questionDiv.appendChild(optionsDiv);
questionContainer.appendChild(questionDiv);
}

updatePagination();
}

// 获取选项文本
function getOptionText(index) {
const texts = [‘非常不同意’, ‘不同意’, ‘一般’, ‘同意’, ‘非常同意’];
return texts[index];
}

// 更新分页指示器
function updatePagination() {
const totalPages = Math.ceil(questions.length / questionsPerPage);
document.getElementById(‘page-indicator’).textContent = `${currentPage}/${totalPages}`;

const prevBtn = document.getElementById(‘prev-btn’);
const nextBtn = document.getElementById(‘next-btn’);

prevBtn.disabled = (currentPage === 1);

if (currentPage === totalPages) {
nextBtn.textContent = ‘完成测试’;
nextBtn.onclick = showResults;
} else {
nextBtn.textContent = ‘下一页’;
nextBtn.onclick = nextPage;
}
}

// 刷新问题选项状态
function refreshQuestionOptions(qIndex) {
const container = document.getElementById(‘question-container’);
const questionDivs = container.querySelectorAll(‘.question-container’);

for (let i = 0; i = questions.length) break;

if (qNum === qIndex) {
const options = questionDivs[i].querySelectorAll(‘.option’);
options.forEach((opt, idx) => {
opt.classList.toggle(‘selected’, idx === userAnswers[qIndex]);
opt.querySelector(‘input’).checked = (idx === userAnswers[qIndex]);
});
}
}
}

// 上一页
function prevPage() {
if (currentPage > 1) {
loadPage(currentPage – 1);
}
}

// 下一页
function nextPage() {
const totalPages = Math.ceil(questions.length / questionsPerPage);
if (currentPage < totalPages) {
loadPage(currentPage + 1);
}
}

// 显示结果
function showResults() {
hideAllSections();
document.getElementById('results').style.display = 'block';
calculateScores();
displayResults();
}

// 重新测试
function retakeTest() {
userAnswers = new Array(questions.length).fill(-1);
scores.fill(0);
startTest();
}

// 计算分数（修复了类型映射错误）
function calculateScores() {
scores = new Array(9).fill(0); // 重置分数

for (let i = 0; i = 0) {
const typeIndex = questionTypes[i] – 1; // 题目类型映射是1-9，需要减去1得到数组索引
if (typeIndex >= 0 && typeIndex < 9) { // 确保索引在有效范围内
scores[typeIndex] += userAnswers[i] + 1; // 答案0-4转换为1-5分
}
}
}
}

// 显示结果
function displayResults() {
// 找出最高分的类型
let primaryTypeIndex = 0;
let maxScore = scores[0];

for (let i = 1; i maxScore) {
maxScore = scores[i];
primaryTypeIndex = i;
}
}

const primaryType = personalityTypes[primaryTypeIndex];

// 显示主类型信息
document.getElementById(‘type-title’).textContent = `您是${primaryType.id}号型人格：${primaryType.name}`;
document.getElementById(‘type-description’).innerHTML = personalityDescriptions[primaryType.id];
document.getElementById(‘primary-type’).textContent = `${primaryType.id}号`;
document.getElementById(‘primary-score’).textContent = maxScore;

// 设置主要类型描述区域边框颜色
document.querySelector(‘.main-type’).style.borderColor = primaryType.color;

// 计算相邻类型（翅膀类型）
const wingTypeIndex = findWingType(primaryTypeIndex);
const wingType = personalityTypes[wingTypeIndex];
document.getElementById(‘wing-type’).textContent = `${wingType.id}号`;
document.getElementById(‘wing-score’).textContent = scores[wingTypeIndex];

// 显示压力和安全状态
const stressType = personalityTypes[(primaryTypeIndex + 4) % 9];
const securityType = personalityTypes[(primaryTypeIndex + 5) % 9];
document.getElementById(‘stress-type’).textContent = `${stressType.id}号`;
document.getElementById(‘security-type’).textContent = `${securityType.id}号`;

// 人格动态分析
document.getElementById(‘dynamics-description’).textContent =
`积极状态更接近${securityType.id}号型人格，压力状态表现为${stressType.id}号特征`;

// 显示人格发展建议
displayAdvice(primaryType.id);

// 显示得分网格
displayScoresGrid(primaryTypeIndex);

// 绘制柱状图
renderBarChart();
}

// 寻找相邻类型（翅膀类型）
function findWingType(primaryIndex) {
const leftIndex = primaryIndex === 0 ? 8 : primaryIndex – 1;
const rightIndex = primaryIndex === 8 ? 0 : primaryIndex + 1;
return scores[leftIndex] > scores[rightIndex] ? leftIndex : rightIndex;
}

// 显示发展建议
function displayAdvice(typeId) {
const adviceList = document.getElementById(‘advice-list’);
adviceList.innerHTML = ”;

personalityAdvice[typeId].forEach(item => {
const li = document.createElement(‘li’);
li.textContent = item;
adviceList.appendChild(li);
});
}

// 显示得分网格
function displayScoresGrid(primaryIndex) {
const gridContainer = document.getElementById(‘personality-grid’);
gridContainer.innerHTML = ”;

personalityTypes.forEach((type, index) => {
const typeDiv = document.createElement(‘div’);
typeDiv.className = `personality-type ${index === primaryIndex ? ‘primary-type’ : ”}`;
typeDiv.style.background = index === primaryIndex ? `linear-gradient(135deg, ${type.color}30, #ffffff 90%)` : ‘#ffffff’;

typeDiv.innerHTML = `

`;

gridContainer.appendChild(typeDiv);
});
}

// 使用Chart.js绘制柱状图
function renderBarChart() {
const ctx = document.getElementById(‘personalityChart’).getContext(‘2d’);
const labels = personalityTypes.map(t => t.id + ‘号’);
const backgroundColors = personalityTypes.map(t => t.color);

// 创建柱状图
new Chart(ctx, {
type: ‘bar’,
data: {
labels: labels,
datasets: [{
label: ‘得分’,
data: scores,
backgroundColor: backgroundColors,
borderColor: backgroundColors,
borderWidth: 1,
borderRadius: 5,
maxBarThickness: 50
}]
},
options: {
responsive: true,
maintainAspectRatio: false, // 确保使用容器固定尺寸
plugins: {
legend: {
display: false
},
tooltip: {
callbacks: {
title: function(tooltipItems) {
const index = tooltipItems[0].dataIndex;
return personalityTypes[index].name;
},
label: function(context) {
return `得分: ${context.parsed.y}`;
}
}
}
},
scales: {
y: {
beginAtZero: true,
max: Math.max(…scores) + 20, // 确保y轴最大值足够显示所有数据
title: {
display: true,
text: ‘得分’,
font: {
size: 14,
weight: ‘bold’
}
},
grid: {
color: ‘rgba(0, 0, 0, 0.05)’
}
},
x: {
grid: {
display: false
}
}
},
animation: {
duration: 1500,
easing: ‘easeOutCubic’
}
}
});
}