{"id":3216,"date":"2023-10-09T21:50:03","date_gmt":"2023-10-09T13:50:03","guid":{"rendered":"https:\/\/bookmark.tw\/?p=3216"},"modified":"2025-08-14T01:55:05","modified_gmt":"2025-08-13T17:55:05","slug":"phobia-self-test","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/phobia-self-test","title":{"rendered":"\u6050\u60e7\u75c7\u7ebf\u4e0a\u514d\u8d39\u6d4b\u9a8c\uff0818\u9898\uff09"},"content":{"rendered":"<!-- \u5f15\u5165 Bootstrap CSS -->\n    <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap\/5.3.3\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n    <!-- \u5f15\u5165 Bootstrap Icons -->\n    <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-icons\/1.11.3\/font\/bootstrap-icons.min.css\" rel=\"stylesheet\">\n    <!-- \u5f15\u5165 Chart.js -->\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n<!-- HTML \u7d50\u69cb -->\n<div id=\"phobia-quiz-container\" class=\"container-fluid px-3 px-md-4 py-4\">\n  <!-- \u5f15\u5c0e\u9801 -->\n  <section id=\"quizintro9\" data-page=\"intro9\" class=\"row justify-content-center\">\n    <div class=\"col-12\" style=\"max-width: 750px;\">\n      <header class=\"text-center mb-5\">\n        <h2 class=\"display-5 fw-bold text-gradient mb-3\">\u6050\u61fc\u75c7\u5fc3\u7406\u6e2c\u9a57<\/h2>\n        <p class=\"lead text-muted\">\u6df1\u5165\u4e86\u89e3\u5167\u5fc3\u4e16\u754c\uff0c\u627e\u5230\u514b\u670d\u6050\u61fc\u7684\u529b\u91cf<\/p>\n      <\/header>\n      \n      <main>\n        <div class=\"row g-4 mb-5\">\n          <div class=\"col-12 col-md-4\">\n            <div class=\"card h-100 border-0 shadow-soft hover-lift\">\n              <div class=\"card-body text-center p-4\">\n                <div class=\"rounded-circle bg-gradient-healing d-inline-flex align-items-center justify-content-center mb-3\" style=\"width: 80px; height: 80px;\">\n                  <i class=\"bi bi-heart-pulse fs-1 text-white\"><\/i>\n                <\/div>\n                <h3 class=\"h5 fw-bold mb-2\">\u5fc3\u7406\u8a55\u4f30<\/h3>\n                <p class=\"text-muted small mb-0\">\u5c08\u696d\u7684\u6050\u61fc\u75c7\u8a55\u4f30\u7cfb\u7d71<\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n          \n          <div class=\"col-12 col-md-4\">\n            <div class=\"card h-100 border-0 shadow-soft hover-lift\">\n              <div class=\"card-body text-center p-4\">\n                <div class=\"rounded-circle bg-gradient-calm d-inline-flex align-items-center justify-content-center mb-3\" style=\"width: 80px; height: 80px;\">\n                  <i class=\"bi bi-graph-up fs-1 text-white\"><\/i>\n                <\/div>\n                <h3 class=\"h5 fw-bold mb-2\">\u591a\u7ef4\u5206\u6790<\/h3>\n                <p class=\"text-muted small mb-0\">\u5168\u65b9\u4f4d\u89e3\u6790\u6050\u61fc\u985e\u578b<\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n          \n          <div class=\"col-12 col-md-4\">\n            <div class=\"card h-100 border-0 shadow-soft hover-lift\">\n              <div class=\"card-body text-center p-4\">\n                <div class=\"rounded-circle bg-gradient-balance d-inline-flex align-items-center justify-content-center mb-3\" style=\"width: 80px; height: 80px;\">\n                  <i class=\"bi bi-shield-check fs-1 text-white\"><\/i>\n                <\/div>\n                <h3 class=\"h5 fw-bold mb-2\">\u5c08\u696d\u5efa\u8b70<\/h3>\n                <p class=\"text-muted small mb-0\">\u63d0\u4f9b\u5be6\u7528\u6539\u5584\u65b9\u6848<\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n        \n        <div class=\"card border-0 shadow-soft mb-4\">\n          <div class=\"card-body p-4\">\n            <div class=\"d-flex align-items-start\">\n              <i class=\"bi bi-info-circle-fill text-healing fs-4 me-3 flex-shrink-0\"><\/i>\n              <div>\n                <p class=\"mb-0\">\u6240\u8c13\u6050\u60e7\u75c7\uff0c\u662f\u5bf9\u67d0\u4e2a\u7269\u4f53\u6216\u67d0\u79cd\u73af\u5883\u7684\u4e00\u79cd\u65e0\u7406\u6027\u7684\u3001\u4e0d\u9002\u5f53\u7684\u6050\u60e7\u611f\u3002\u4e00\u65e6\u9762\u5bf9\u8fd9\u79cd\u7269\u4f53\u6216\u73af\u5883\u65f6\uff0c\u6050\u60e7\u75c7\u60a3\u8005\u5c31\u4f1a\u4ea7\u751f\u4e00\u79cd\u6781\u7aef\u7684\u6050\u6016\u611f\u3002\u5168\u7403\u6709\u56db\u5206\u4e4b\u4e00\u7684\u4eba\u60a3\u6709\u4e0d\u540c\u7a0b\u5ea6\u7684\u6050\u60e7\u75c7\uff0c\u751f\u6d3b\u4e2d\u7684\u4f60\u6709\u6050\u60e7\u75c7\u5417\uff1f\u7528\u300c\u662f\u300d\u6216\u300c\u5426\u300d\u6765\u56de\u7b54\u4e0b\u9762\u7684\u6d4b\u8bd5\u9898\u76ee\u3002<\/p>\n<p class=\"mb-0\">\u900f\u904e\u9019\u500b\u6e2c\u9a57\uff0c\u60a8\u53ef\u4ee5\u4e86\u89e3\u81ea\u5df1\u7684\u6050\u61fc\u50be\u5411\uff0c\u4e26\u7372\u5f97\u5c08\u696d\u7684\u6539\u5584\u5efa\u8b70\u3002<\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n        \n        <div class=\"text-center\">\n          <button type=\"button\" class=\"btn btn-lg btn-gradient-healing px-5 py-3 rounded-pill shadow-soft\" data-action=\"start-quiz\">\n            <i class=\"bi bi-play-fill me-2\"><\/i>\u5f00\u59cb\u6d4b\u9a8c\n          <\/button>\n        <\/div>\n      <\/main>\n    <\/div>\n  <\/section>\n\n  <!-- \u6e2c\u9a57\u9801 -->\n  <section id=\"quizmain9\" data-page=\"quiz9\" class=\"row justify-content-center d-none\">\n    <div class=\"col-12\" style=\"max-width: 750px;\">\n      <header class=\"text-center mb-4\">\n        <h2 class=\"h3 fw-bold mb-3\">\u6050\u61fc\u75c7\u5fc3\u7406\u6e2c\u9a57<\/h2>\n        <div class=\"progress mb-2\" style=\"height: 8px;\">\n          <div class=\"progress-bar bg-gradient-progress\" role=\"progressbar\" data-progress-bar style=\"width: 0%\"><\/div>\n        <\/div>\n        <p class=\"text-muted small mb-0\" data-progress-text>\u95ee\u98981\/18<\/p>\n      <\/header>\n      \n      <main>\n        <div class=\"card border-0 shadow-soft\">\n          <div class=\"card-body p-4 p-md-5\">\n            <h3 class=\"fw-bold mb-4\" style=\"font-size: 22px;\" data-question-text><\/h3>\n            <div class=\"row g-3\" data-options-container>\n              <!-- \u9078\u9805\u5c07\u52d5\u614b\u751f\u6210 -->\n            <\/div>\n          <\/div>\n        <\/div>\n        \n        <div class=\"text-center mt-4\">\n          <button type=\"button\" class=\"btn btn-outline-secondary rounded-pill px-4 d-none\" data-action=\"prev-question\">\n            <i class=\"bi bi-arrow-left me-2\"><\/i>\u4e0a\u4e00\u9898\n          <\/button>\n        <\/div>\n      <\/main>\n    <\/div>\n  <\/section>\n\n  <!-- \u7d50\u679c\u9801 -->\n  <section id=\"quizresult9\" data-page=\"result9\" class=\"row justify-content-center d-none\">\n    <div class=\"col-12\" style=\"max-width: 750px;\">\n      <header class=\"text-center mb-4\">\n        <h2 class=\"h3 fw-bold\">\u6d4b\u9a8c\u7ed3\u679c<\/h2>\n      <\/header>\n      \n      <main>\n        <!-- \u7d50\u679c\u6458\u8981\u5361\u7247 -->\n        <div class=\"card border-0 shadow-soft mb-4\">\n          <div class=\"card-body p-4 text-center\">\n            <div class=\"mb-3\" data-result-emoji style=\"font-size: 72px;\"><\/div>\n            <h3 class=\"h4 fw-bold mb-2\" data-result-title><\/h3>\n            <p class=\"lead mb-3\" data-result-score><\/p>\n            <p class=\"text-muted mb-0\" data-result-description><\/p>\n          <\/div>\n        <\/div>\n\n        <!-- \u8a55\u5206\u5206\u5e03\u5716 -->\n        <div class=\"card border-0 shadow-soft mb-4\">\n          <div class=\"card-body p-4\">\n            <h4 class=\"h5 fw-bold mb-4\">\u6574\u9ad4\u8a55\u5206\u5206\u5e03<\/h4>\n            <div class=\"score-distribution-container\" style=\"position: relative; height: 60px; margin: 20px 0;\">\n              <canvas id=\"score-distribution-chart\"><\/canvas>\n            <\/div>\n            <div class=\"mt-3 d-flex flex-wrap justify-content-center gap-3\">\n              <div class=\"d-flex align-items-center\">\n                <span class=\"badge-dot bg-healing me-2\"><\/span>\n                <small class=\"text-muted\">\u6b63\u5e38 (0-5\u5206)<\/small>\n              <\/div>\n              <div class=\"d-flex align-items-center\">\n                <span class=\"badge-dot bg-calm me-2\"><\/span>\n                <small class=\"text-muted\">\u8f15\u5ea6 (6-10\u5206)<\/small>\n              <\/div>\n              <div class=\"d-flex align-items-center\">\n                <span class=\"badge-dot bg-warning-soft me-2\"><\/span>\n                <small class=\"text-muted\">\u4e2d\u5ea6 (11-15\u5206)<\/small>\n              <\/div>\n              <div class=\"d-flex align-items-center\">\n                <span class=\"badge-dot bg-purple-soft me-2\"><\/span>\n                <small class=\"text-muted\">\u8f03\u56b4\u91cd (16-18\u5206)<\/small>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n        \n        <!-- \u96f7\u9054\u5716 -->\n        <div class=\"card border-0 shadow-soft mb-4\">\n          <div class=\"card-body p-4\">\n            <h4 class=\"h5 fw-bold text-center mb-4\">\u6050\u61fc\u985e\u578b\u5206\u6790<\/h4>\n            <div class=\"chart-container\" style=\"position: relative; height: 350px;\">\n              <canvas id=\"phobia-radar-chart\"><\/canvas>\n            <\/div>\n          <\/div>\n        <\/div>\n        \n        <!-- \u8a73\u7d30\u5206\u6790 -->\n        <div class=\"card border-0 shadow-soft mb-4\">\n          <div class=\"card-body p-4\">\n            <h4 class=\"h5 fw-bold mb-3\">\u8be6\u7ec6\u5206\u6790<\/h4>\n            <div data-detail-analysis><\/div>\n          <\/div>\n        <\/div>\n\n        <!-- \u55ae\u9805\u8a73\u7d30\u5206\u6790 -->\n        <div class=\"card border-0 shadow-soft mb-4\">\n          <div class=\"card-body p-4\">\n            <h4 class=\"h5 fw-bold mb-3\">\u55ae\u9805\u6df1\u5ea6\u89e3\u6790<\/h4>\n            <div data-category-analysis><\/div>\n          <\/div>\n        <\/div>\n        \n        <!-- \u6539\u5584\u5efa\u8b70 -->\n        <div class=\"card border-0 shadow-soft mb-4\">\n          <div class=\"card-body p-4\">\n            <h4 class=\"h5 fw-bold mb-3\">\u500b\u6027\u5316\u6539\u5584\u5efa\u8b70<\/h4>\n            <div data-suggestions><\/div>\n          <\/div>\n        <\/div>\n        \n        <div class=\"text-center\">\n          <button type=\"button\" class=\"btn btn-lg btn-gradient-healing px-5 py-3 rounded-pill shadow-soft\" data-action=\"restart-quiz\">\n            <i class=\"bi bi-arrow-clockwise me-2\"><\/i>\u91cd\u65b0\u6d4b\u9a8c\n          <\/button>\n        <\/div>\n      <\/main>\n    <\/div>\n  <\/section>\n<\/div>\n\n<!-- CSS \u6a23\u5f0f -->\n<style>\n\/* \u81ea\u5b9a\u7fa9\u984f\u8272\u8b8a\u6578 - \u8212\u7de9\u7642\u6108\u8272\u7cfb *\/\n#phobia-quiz-container {\n  --quiz-healing: #7cb5a3;\n  --quiz-calm: #81b4d6;\n  --quiz-balance: #a69dc4;\n  --quiz-soft-green: #95d5b2;\n  --quiz-soft-yellow: #f4d35e;\n  --quiz-soft-purple: #c9a9d9;\n  --quiz-light-healing: rgba(124, 181, 163, 0.1);\n  --quiz-light-calm: rgba(129, 180, 214, 0.1);\n}\n\n\/* \u6f38\u8b8a\u80cc\u666f *\/\n#phobia-quiz-container .bg-gradient-healing {\n  background: linear-gradient(135deg, var(--quiz-healing), var(--quiz-calm)) !important;\n}\n\n#phobia-quiz-container .bg-gradient-calm {\n  background: linear-gradient(135deg, var(--quiz-calm), var(--quiz-balance)) !important;\n}\n\n#phobia-quiz-container .bg-gradient-balance {\n  background: linear-gradient(135deg, var(--quiz-balance), var(--quiz-soft-green)) !important;\n}\n\n#phobia-quiz-container .bg-gradient-progress {\n  background: linear-gradient(90deg, var(--quiz-healing), var(--quiz-calm)) !important;\n}\n\n\/* \u6587\u5b57\u6f38\u8b8a *\/\n#phobia-quiz-container .text-gradient {\n  background: linear-gradient(135deg, var(--quiz-healing), var(--quiz-calm));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n}\n\n#phobia-quiz-container .text-healing {\n  color: var(--quiz-healing);\n}\n\n\/* \u67d4\u548c\u9670\u5f71 *\/\n#phobia-quiz-container .shadow-soft {\n  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;\n}\n\n\/* \u6309\u9215\u6a23\u5f0f *\/\n#phobia-quiz-container .btn-gradient-healing {\n  background: linear-gradient(135deg, var(--quiz-healing), var(--quiz-calm));\n  border: none;\n  color: white;\n  font-weight: 600;\n  transition: all 0.3s ease;\n}\n\n#phobia-quiz-container .btn-gradient-healing:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 10px 25px rgba(124, 181, 163, 0.25) !important;\n  color: white;\n}\n\n\/* \u5361\u7247\u61f8\u505c\u6548\u679c *\/\n#phobia-quiz-container .hover-lift {\n  transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n#phobia-quiz-container .hover-lift:hover {\n  transform: translateY(-4px);\n  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;\n}\n\n\/* \u9078\u9805\u5361\u7247\u6a23\u5f0f *\/\n#phobia-quiz-container .option-card {\n  border: 2px solid #e8f3f1;\n  background: white;\n  transition: all 0.3s ease;\n  cursor: pointer;\n  position: relative;\n  overflow: hidden;\n}\n\n#phobia-quiz-container .option-card:hover {\n  border-color: var(--quiz-healing);\n  background: #f8fcfb;\n  transform: translateY(-2px);\n  box-shadow: 0 4px 12px rgba(124, 181, 163, 0.15);\n}\n\n#phobia-quiz-container .option-card.selected {\n  border-color: var(--quiz-healing);\n  background: linear-gradient(135deg, rgba(124, 181, 163, 0.05), rgba(129, 180, 214, 0.05));\n}\n\n#phobia-quiz-container .option-card.selected .selection-indicator {\n  background: var(--quiz-healing);\n  color: white;\n}\n\n#phobia-quiz-container .selection-indicator {\n  width: 32px;\n  height: 32px;\n  border: 2px solid #e8f3f1;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.3s ease;\n  flex-shrink: 0;\n}\n\n#phobia-quiz-container .option-text {\n  font-size: 18px;\n  font-weight: 500;\n  color: #374151;\n}\n\n\/* \u80cc\u666f\u8272\u8a2d\u7f6e *\/\n#phobia-quiz-container .bg-healing {\n  background-color: var(--quiz-healing);\n}\n\n#phobia-quiz-container .bg-calm {\n  background-color: var(--quiz-calm);\n}\n\n#phobia-quiz-container .bg-warning-soft {\n  background-color: var(--quiz-soft-yellow);\n}\n\n#phobia-quiz-container .bg-purple-soft {\n  background-color: var(--quiz-soft-purple);\n}\n\n\/* \u67d4\u548c\u80cc\u666f *\/\n#phobia-quiz-container .bg-soft-healing {\n  background-color: rgba(124, 181, 163, 0.1);\n}\n\n#phobia-quiz-container .bg-soft-calm {\n  background-color: rgba(129, 180, 214, 0.1);\n}\n\n#phobia-quiz-container .bg-soft-balance {\n  background-color: rgba(166, 157, 196, 0.1);\n}\n\n\/* \u5c0f\u5713\u9ede\u6a23\u5f0f *\/\n#phobia-quiz-container .badge-dot {\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  display: inline-block;\n}\n\n\/* \u97ff\u61c9\u5f0f\u8abf\u6574 *\/\n@media (max-width: 768px) {\n  #phobia-quiz-container .display-5 {\n    font-size: 1.8rem;\n  }\n  \n  #phobia-quiz-container .lead {\n    font-size: 1rem;\n  }\n  \n  #phobia-quiz-container h3 {\n    font-size: 20px !important;\n  }\n  \n  #phobia-quiz-container .option-text {\n    font-size: 16px;\n  }\n}\n\n\/* \u5716\u8868\u5bb9\u5668 *\/\n#phobia-quiz-container .chart-container {\n  max-width: 500px;\n  margin: 0 auto;\n}\n\n\/* \u52d5\u756b *\/\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideIn {\n  from {\n    opacity: 0;\n    transform: translateX(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n#phobia-quiz-container section {\n  animation: fadeIn 0.5s ease;\n}\n\n#phobia-quiz-container .option-card {\n  animation: slideIn 0.4s ease;\n}\n\n\/* \u5206\u6790\u5361\u7247\u6a23\u5f0f *\/\n#phobia-quiz-container .analysis-card {\n  background: linear-gradient(135deg, rgba(124, 181, 163, 0.03), rgba(129, 180, 214, 0.03));\n  border-left: 4px solid var(--quiz-healing);\n  padding: 1.25rem;\n  margin-bottom: 1rem;\n  border-radius: 0.5rem;\n}\n\n\/* \u5efa\u8b70\u9805\u76ee\u6a23\u5f0f *\/\n#phobia-quiz-container .suggestion-item {\n  padding: 1rem;\n  background: white;\n  border-radius: 0.75rem;\n  border: 1px solid rgba(124, 181, 163, 0.2);\n  margin-bottom: 1rem;\n  transition: all 0.3s ease;\n}\n\n#phobia-quiz-container .suggestion-item:hover {\n  box-shadow: 0 4px 12px rgba(124, 181, 163, 0.1);\n  transform: translateY(-2px);\n}\n\n\/* \u8a55\u5206\u5206\u5e03\u5bb9\u5668 *\/\n#phobia-quiz-container .score-distribution-container {\n  position: relative;\n}\n\n#phobia-quiz-container #score-distribution-chart {\n  width: 100%;\n  display: block;\n}\n\n\/* \u79fb\u9664list\u6a23\u5f0f *\/\n#phobia-quiz-container ul {\n  list-style: none;\n  padding-left: 0;\n}\n\n#phobia-quiz-container li {\n  position: relative;\n  padding-left: 1.5rem;\n  margin-bottom: 0.5rem;\n}\n\n#phobia-quiz-container li:before {\n  content: \"\u2022\";\n  color: var(--quiz-healing);\n  font-weight: bold;\n  position: absolute;\n  left: 0;\n}\n<\/style>\n\n<!-- JavaScript \u884c\u70ba -->\n<script>\n(function() {\n  'use strict';\n  \n  \/\/ \u6e2c\u9a57\u6578\u64da\n  const quizData = {\n    questions: [\n      { id: 1, text: \"\u7d93\u5e38\u60f3\u5230\u89aa\u4eba\u6703\u6709\u4e0d\u5e78\u3002\" },\n      { id: 2, text: \"\u6709\u6642\u64d4\u5fc3\u6703\u7d66\u81ea\u5df1\u6216\u6240\u611b\u7684\u4eba\u5e36\u4f86\u50b7\u5bb3\u3002\" },\n      { id: 3, text: \"\u7d93\u5e38\u6aa2\u67e5\u71c8\u548c\u6c34\u9f8d\u982d\u95dc\u597d\u6c92\u6709\u3002\" },\n      { id: 4, text: \"\u5728\u4eba\u7fa4\u4e2d\u53d7\u5230\u63a8\u6421\u89ba\u5f97\u53cd\u611f\u3002\" },\n      { id: 5, text: \"\u6709\u6f54\u7656\uff0c\u591a\u6b21\u53cd\u5fa9\u5730\u5237\u6d17\u8863\u670d\u548c\u5bb6\u5177\u6216\u8001\u6d17\u624b\u3002\" },\n      { id: 6, text: \"\u4f60\u8001\u662f\u5c0d\u81ea\u5df1\u548c\u81ea\u5df1\u6240\u5e79\u7684\u4e8b\u4e0d\u6eff\u610f\uff0c\u5118\u7ba1\u52aa\u529b\u60f3\u5e79\u597d\u3002\" },\n      { id: 7, text: \"\u4f60\u7e3d\u662f\u76e1\u91cf\u63d0\u524d\u96e2\u958b\u6709\u53ef\u80fd\u4f7f\u4f60\u906d\u9047\u5c37\u5c2c\u7684\u5883\u5730\u3002\" },\n      { id: 8, text: \"\u4f60\u89ba\u5f97\u5f88\u96e3\u505a\u51fa\u56f0\u96e3\u7684\u6c7a\u5b9a\u3002\" },\n      { id: 9, text: \"\u4f60\u89ba\u5f97\u6709\u4e00\u7a2e\u505a\u67d0\u7a2e\u591a\u9918\u4e8b\u7684\u5fc5\u8981\u3002\" },\n      { id: 10, text: \"\u7d93\u5e38\u89ba\u5f97\u8eab\u4e0a\u8863\u670d\u6709\u4e9b\u4e0d\u5c0d\u52c1\u3002\" },\n      { id: 11, text: \"\u6709\u904e\u56de\u5bb6\u6aa2\u67e5\u9580\u7a97\u662f\u5426\u9396\u597d\u7684\u60c5\u6cc1\u55ce\uff1f\" },\n      { id: 12, text: \"\u8001\u6368\u4e0d\u5f97\u6254\u6389\u5df2\u6c92\u7528\u7684\u820a\u6771\u897f\u3002\" },\n      { id: 13, text: \"\u4f60\u8001\u5728\u60f3\u4e00\u4e9b\u4e0d\u7531\u81ea\u4e3b\u505a\u7684\u4e8b\u3002\" },\n      { id: 14, text: \"\u4f60\u6709\u904e\u8001\u91cd\u8907\u8aaa\u540c\u4e00\u53e5\u8a71\u6216\u6578\u4e00\u4e9b\u6c92\u5fc5\u8981\u6578\u7684\u6771\u897f\u7684\u6642\u5019\u3002\" },\n      { id: 15, text: \"\u7761\u89ba\u524d\u6703\u628a\u8863\u670d\u6574\u9f4a\u78bc\u597d\u55ce\uff1f\" },\n      { id: 16, text: \"\u4f60\u5e79\u4e00\u4e9b\u4e0d\u91cd\u8981\u7684\u4e8b\u4e5f\u5f88\u8a8d\u771f\u3002\" },\n      { id: 17, text: \"\u4f60\u5468\u570d\u7684\u6771\u897f\u96a8\u6642\u90fd\u8981\u653e\u5728\u540c\u4e00\u500b\u5730\u65b9\u3002\" },\n      { id: 18, text: \"\u8001\u662f\u505a\u4e00\u4e9b\u7121\u8db3\u8f15\u91cd\u7684\u52d5\u4f5c\u3002\" }\n    ],\n    categories: {\n      social: [4, 7],\n      obsessive: [3, 5, 11, 14, 15, 17],\n      environmental: [1, 2, 9, 12, 18],\n      personal: [6, 8, 10, 13, 16]\n    },\n    categoryDetails: {\n      social: {\n        name: '\u793e\u4ea4\u6050\u61fc',\n        description: '\u5c0d\u793e\u4ea4\u5834\u5408\u548c\u4eba\u969b\u4e92\u52d5\u7684\u6050\u61fc',\n        symptoms: ['\u5bb3\u6015\u5728\u516c\u773e\u5834\u5408\u88ab\u95dc\u6ce8', '\u8ff4\u907f\u793e\u4ea4\u6d3b\u52d5', '\u64d4\u5fc3\u88ab\u4ed6\u4eba\u8a55\u5224'],\n        advice: ['\u5faa\u5e8f\u6f38\u9032\u5730\u53c3\u8207\u793e\u4ea4\u6d3b\u52d5', '\u7df4\u7fd2\u6df1\u547c\u5438\u548c\u653e\u9b06\u6280\u5de7', '\u57f9\u990a\u81ea\u4fe1\u5fc3']\n      },\n      obsessive: {\n        name: '\u5f37\u8feb\u6027\u6050\u61fc',\n        description: '\u5c0d\u79e9\u5e8f\u3001\u6e05\u6f54\u548c\u63a7\u5236\u7684\u904e\u5ea6\u9700\u6c42',\n        symptoms: ['\u53cd\u8986\u6aa2\u67e5\u884c\u70ba', '\u904e\u5ea6\u6e05\u6f54', '\u5c0d\u7d30\u7bc0\u7684\u904e\u5206\u95dc\u6ce8'],\n        advice: ['\u5b78\u7fd2\u63a5\u53d7\u4e0d\u78ba\u5b9a\u6027', '\u8a2d\u5b9a\u5408\u7406\u7684\u6a19\u6e96', '\u7df4\u7fd2\u6b63\u5ff5\u51a5\u60f3']\n      },\n      environmental: {\n        name: '\u74b0\u5883\u6050\u61fc',\n        description: '\u5c0d\u5916\u5728\u74b0\u5883\u548c\u672a\u77e5\u4e8b\u7269\u7684\u64d4\u6182',\n        symptoms: ['\u904e\u5ea6\u64d4\u5fc3\u5b89\u5168\u554f\u984c', '\u5c0d\u8b8a\u5316\u611f\u5230\u4e0d\u5b89', '\u5bb3\u6015\u5931\u53bb\u63a7\u5236'],\n        advice: ['\u5efa\u7acb\u5b89\u5168\u611f', '\u5b78\u7fd2\u61c9\u5c0d\u6280\u5de7', '\u57f9\u990a\u9069\u61c9\u80fd\u529b']\n      },\n      personal: {\n        name: '\u5b8c\u7f8e\u4e3b\u7fa9\u6050\u61fc',\n        description: '\u5c0d\u81ea\u6211\u8868\u73fe\u548c\u5b8c\u7f8e\u7684\u904e\u5ea6\u8ffd\u6c42',\n        symptoms: ['\u81ea\u6211\u6279\u8a55', '\u6c7a\u7b56\u56f0\u96e3', '\u5c0d\u932f\u8aa4\u7684\u6050\u61fc'],\n        advice: ['\u63a5\u7d0d\u4e0d\u5b8c\u7f8e', '\u8a2d\u5b9a\u5be6\u969b\u76ee\u6a19', '\u57f9\u990a\u81ea\u6211\u540c\u60c5']\n      }\n    }\n  };\n  \n  \/\/ \u6e2c\u9a57\u63a7\u5236\u5668\u985e\n  class PhobiaQuizController {\n    constructor() {\n      this.currentQuestion = 0;\n      this.answers = {};\n      this.chartInstance = null;\n      \n      \/\/ \u5feb\u53d6DOM\u5143\u7d20\n      this.container = document.getElementById('phobia-quiz-container');\n      this.pages = {\n        intro: document.getElementById('quizintro9'),\n        quiz: document.getElementById('quizmain9'),\n        result: document.getElementById('quizresult9')\n      };\n      \n      this.elements = {\n        progressBar: this.container.querySelector('[data-progress-bar]'),\n        progressText: this.container.querySelector('[data-progress-text]'),\n        questionText: this.container.querySelector('[data-question-text]'),\n        optionsContainer: this.container.querySelector('[data-options-container]'),\n        prevButton: this.container.querySelector('[data-action=\"prev-question\"]'),\n        resultEmoji: this.container.querySelector('[data-result-emoji]'),\n        resultTitle: this.container.querySelector('[data-result-title]'),\n        resultScore: this.container.querySelector('[data-result-score]'),\n        resultDescription: this.container.querySelector('[data-result-description]'),\n        detailAnalysis: this.container.querySelector('[data-detail-analysis]'),\n        categoryAnalysis: this.container.querySelector('[data-category-analysis]'),\n        suggestions: this.container.querySelector('[data-suggestions]')\n      };\n      \n      this.init();\n    }\n    \n    init() {\n      \/\/ \u4e8b\u4ef6\u59d4\u8a17\n      this.container.addEventListener('click', this.handleClick.bind(this));\n    }\n    \n    handleClick(e) {\n      const action = e.target.closest('[data-action]')?.dataset.action;\n      const optionCard = e.target.closest('.option-card');\n      \n      if (action === 'start-quiz') {\n        this.startQuiz();\n      } else if (action === 'prev-question') {\n        this.previousQuestion();\n      } else if (action === 'restart-quiz') {\n        this.restartQuiz();\n      } else if (optionCard) {\n        const value = optionCard.dataset.optionValue;\n        this.selectOption(value, optionCard);\n      }\n    }\n    \n    startQuiz() {\n      this.showPage('quiz');\n      this.renderQuestion();\n      this.scrollToTop();\n    }\n    \n    showPage(pageName) {\n      Object.values(this.pages).forEach(page => page.classList.add('d-none'));\n      this.pages[pageName].classList.remove('d-none');\n    }\n    \n    renderQuestion() {\n      const question = quizData.questions[this.currentQuestion];\n      \n      \/\/ \u66f4\u65b0\u554f\u984c\u6587\u5b57\n      this.elements.questionText.textContent = question.text;\n      \n      \/\/ \u66f4\u65b0\u9032\u5ea6\n      this.updateProgress();\n      \n      \/\/ \u751f\u6210\u9078\u9805\u5361\u7247\n      this.elements.optionsContainer.innerHTML = `\n        <div class=\"col-6\">\n          <div class=\"card option-card h-100 ${this.answers[question.id] === 'yes' ? 'selected' : ''}\" data-option-value=\"yes\">\n            <div class=\"card-body p-3 d-flex align-items-center\">\n              <div class=\"selection-indicator me-3\">\n                ${this.answers[question.id] === 'yes' ? '<i class=\"bi bi-check-lg\"><\/i>' : ''}\n              <\/div>\n              <span class=\"option-text\">\u662f<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n        <div class=\"col-6\">\n          <div class=\"card option-card h-100 ${this.answers[question.id] === 'no' ? 'selected' : ''}\" data-option-value=\"no\">\n            <div class=\"card-body p-3 d-flex align-items-center\">\n              <div class=\"selection-indicator me-3\">\n                ${this.answers[question.id] === 'no' ? '<i class=\"bi bi-check-lg\"><\/i>' : ''}\n              <\/div>\n              <span class=\"option-text\">\u5426<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n      `;\n      \n      \/\/ \u986f\u793a\/\u96b1\u85cf\u4e0a\u4e00\u984c\u6309\u9215\n      if (this.currentQuestion > 0) {\n        this.elements.prevButton.classList.remove('d-none');\n      } else {\n        this.elements.prevButton.classList.add('d-none');\n      }\n    }\n    \n    updateProgress() {\n      const progress = ((this.currentQuestion + 1) \/ quizData.questions.length) * 100;\n      this.elements.progressBar.style.width = `${progress}%`;\n      this.elements.progressText.textContent = `\u554f\u984c ${this.currentQuestion + 1}\/${quizData.questions.length}`;\n    }\n    \n    selectOption(value, card) {\n      \/\/ \u79fb\u9664\u5176\u4ed6\u9078\u4e2d\u72c0\u614b\n      this.elements.optionsContainer.querySelectorAll('.option-card').forEach(c => {\n        c.classList.remove('selected');\n        c.querySelector('.selection-indicator').innerHTML = '';\n      });\n      \n      \/\/ \u6dfb\u52a0\u9078\u4e2d\u72c0\u614b\n      card.classList.add('selected');\n      card.querySelector('.selection-indicator').innerHTML = '<i class=\"bi bi-check-lg\"><\/i>';\n      \n      \/\/ \u5132\u5b58\u7b54\u6848\n      const question = quizData.questions[this.currentQuestion];\n      this.answers[question.id] = value;\n      \n      \/\/ \u5ef6\u9072\u9032\u5165\u4e0b\u4e00\u984c\n      setTimeout(() => {\n        if (this.currentQuestion < quizData.questions.length - 1) {\n          this.nextQuestion();\n        } else {\n          this.showResults();\n        }\n      }, 400);\n    }\n    \n    nextQuestion() {\n      this.currentQuestion++;\n      this.renderQuestion();\n      this.scrollToHeader();\n    }\n    \n    previousQuestion() {\n      if (this.currentQuestion > 0) {\n        this.currentQuestion--;\n        this.renderQuestion();\n        this.scrollToHeader();\n      }\n    }\n    \n    calculateScores() {\n      const scores = {\n        total: 0,\n        categories: {\n          social: 0,\n          obsessive: 0,\n          environmental: 0,\n          personal: 0\n        }\n      };\n      \n      \/\/ \u8a08\u7b97\u7e3d\u5206\n      Object.values(this.answers).forEach(answer => {\n        if (answer === 'yes') scores.total++;\n      });\n      \n      \/\/ \u8a08\u7b97\u5404\u985e\u5225\u5206\u6578\n      for (const [category, questions] of Object.entries(quizData.categories)) {\n        questions.forEach(qId => {\n          if (this.answers[qId] === 'yes') {\n            scores.categories[category]++;\n          }\n        });\n      }\n      \n      return scores;\n    }\n    \n    showResults() {\n      const scores = this.calculateScores();\n      \n      \/\/ \u5224\u65b7\u7d50\u679c\u7b49\u7d1a\n      let level, emoji, title, color, description;\n      if (scores.total <= 5) {\n        level = 'normal';\n        emoji = '\ud83d\ude0a';\n        title = '\u5fc3\u7406\u5065\u5eb7\u72c0\u614b\u826f\u597d';\n        color = '#7cb5a3';\n        description = '\u4f60\u8ddf\u6050\u61fc\u75c7\u6cbe\u4e0d\u4e0a\u908a\u3002\u4f60\u7684\u5fc3\u7406\u72c0\u614b\u76f8\u7576\u5065\u5eb7\uff0c\u80fd\u5920\u7406\u6027\u5730\u9762\u5c0d\u751f\u6d3b\u4e2d\u7684\u5404\u7a2e\u60c5\u6cc1\u3002';\n      } else if (scores.total <= 10) {\n        level = 'mild';\n        emoji = '\ud83d\ude0c';\n        title = '\u8f15\u5ea6\u6050\u61fc\u75c7\u50be\u5411';\n        color = '#81b4d6';\n        description = '\u4f60\u53ef\u80fd\u6709\u8f15\u5ea6\u6050\u61fc\u75c7\u50be\u5411\u3002\u5728\u67d0\u4e9b\u7279\u5b9a\u60c5\u6cc1\u4e0b\u6703\u611f\u5230\u4e0d\u9069\uff0c\u5efa\u8b70\u591a\u6ce8\u610f\u81ea\u6211\u8abf\u7bc0\u3002';\n      } else if (scores.total <= 15) {\n        level = 'moderate';\n        emoji = '\ud83d\ude1f';\n        title = '\u4e2d\u5ea6\u6050\u61fc\u75c7';\n        color = '#f4d35e';\n        description = '\u4f60\u53ef\u80fd\u6709\u4e2d\u5ea6\u6050\u61fc\u75c7\u3002\u5efa\u8b70\u5c0b\u6c42\u5c08\u696d\u8aee\u8a62\uff0c\u5b78\u7fd2\u61c9\u5c0d\u6280\u5de7\u3002';\n      } else {\n        level = 'severe';\n        emoji = '\ud83d\ude14';\n        title = '\u8f03\u56b4\u91cd\u6050\u61fc\u75c7';\n        color = '#c9a9d9';\n        description = '\u4f60\u7684\u6050\u61fc\u75c7\u72c0\u8f03\u70ba\u660e\u986f\uff0c\u5efa\u8b70\u53ca\u6642\u5c0b\u6c42\u5fc3\u7406\u91ab\u751f\u7684\u5c08\u696d\u5e6b\u52a9\u3002';\n      }\n      \n      \/\/ \u66f4\u65b0\u7d50\u679c\u9801\u9762\n      this.elements.resultEmoji.textContent = emoji;\n      this.elements.resultTitle.textContent = title;\n      this.elements.resultTitle.style.color = color;\n      this.elements.resultScore.textContent = `\u7e3d\u5206\uff1a${scores.total}\/18`;\n      this.elements.resultDescription.textContent = description;\n      \n      \/\/ \u751f\u6210\u5404\u7a2e\u5206\u6790\n      this.generateDetailAnalysis(scores);\n      this.generateCategoryAnalysis(scores);\n      this.generatePersonalizedSuggestions(scores, level);\n      \n      \/\/ \u986f\u793a\u7d50\u679c\u9801\n      this.showPage('result');\n      this.scrollToTop();\n      \n      \/\/ \u5ef6\u9072\u751f\u6210\u5716\u8868\uff0c\u78ba\u4fddDOM\u5df2\u7d93\u6e32\u67d3\n      setTimeout(() => {\n        this.createRadarChart(scores);\n        this.createDistributionChart(scores.total);\n      }, 100);\n    }\n    \n    generateDetailAnalysis(scores) {\n      const maxScores = {\n        social: 2,\n        obsessive: 6,\n        environmental: 5,\n        personal: 5\n      };\n      \n      const categoryNames = {\n        social: '\u793e\u4ea4\u6050\u61fc',\n        obsessive: '\u5f37\u8feb\u6027\u6050\u61fc',\n        environmental: '\u74b0\u5883\u6050\u61fc',\n        personal: '\u5b8c\u7f8e\u4e3b\u7fa9\u6050\u61fc'\n      };\n      \n      let html = '<div class=\"row g-3\">';\n      \n      for (const [category, score] of Object.entries(scores.categories)) {\n        const percentage = Math.round((score \/ maxScores[category]) * 100);\n        const name = categoryNames[category];\n        \n        let levelText = '';\n        let levelColor = '';\n        if (percentage === 0) {\n          levelText = '\u7121\u660e\u986f\u75c7\u72c0';\n          levelColor = '#7cb5a3';\n        } else if (percentage <= 30) {\n          levelText = '\u8f15\u5fae\u50be\u5411';\n          levelColor = '#81b4d6';\n        } else if (percentage <= 60) {\n          levelText = '\u4e2d\u5ea6\u50be\u5411';\n          levelColor = '#f4d35e';\n        } else {\n          levelText = '\u8f03\u9ad8\u50be\u5411';\n          levelColor = '#c9a9d9';\n        }\n        \n        html += `\n          <div class=\"col-12 col-md-6\">\n            <div class=\"p-3 bg-soft-healing rounded-3\">\n              <div class=\"d-flex justify-content-between align-items-center mb-2\">\n                <h6 class=\"fw-bold mb-0\">${name}<\/h6>\n                <span class=\"badge\" style=\"background-color: ${levelColor}; color: white;\">${percentage}%<\/span>\n              <\/div>\n              <div class=\"progress mb-2\" style=\"height: 8px;\">\n                <div class=\"progress-bar\" style=\"width: ${percentage}%; background: linear-gradient(90deg, #7cb5a3, #81b4d6);\"><\/div>\n              <\/div>\n              <p class=\"text-muted small mb-0\">${levelText} (${score}\/${maxScores[category]})<\/p>\n            <\/div>\n          <\/div>\n        `;\n      }\n      \n      html += '<\/div>';\n      this.elements.detailAnalysis.innerHTML = html;\n    }\n    \n    generateCategoryAnalysis(scores) {\n      const maxScores = {\n        social: 2,\n        obsessive: 6,\n        environmental: 5,\n        personal: 5\n      };\n      \n      let html = '';\n      \n      \/\/ \u627e\u51fa\u5f97\u5206\u6700\u9ad8\u7684\u985e\u5225\n      let highestCategory = null;\n      let highestPercentage = 0;\n      \n      for (const [category, score] of Object.entries(scores.categories)) {\n        const percentage = (score \/ maxScores[category]) * 100;\n        if (percentage > highestPercentage) {\n          highestPercentage = percentage;\n          highestCategory = category;\n        }\n      }\n      \n      \/\/ \u70ba\u6bcf\u500b\u6709\u5f97\u5206\u7684\u985e\u5225\u751f\u6210\u8a73\u7d30\u5206\u6790\n      for (const [category, score] of Object.entries(scores.categories)) {\n        if (score > 0) {\n          const details = quizData.categoryDetails[category];\n          const percentage = Math.round((score \/ maxScores[category]) * 100);\n          const isHighest = category === highestCategory;\n          \n          html += `\n            <div class=\"analysis-card ${isHighest ? 'border-start-4' : ''}\">\n              <h5 class=\"h6 fw-bold mb-3 text-healing\">\n                ${details.name} \n                ${isHighest ? '<span class=\"badge bg-soft-healing text-healing ms-2\">\u4e3b\u8981\u985e\u578b<\/span>' : ''}\n              <\/h5>\n              <p class=\"text-muted mb-3\">${details.description}<\/p>\n              \n              <div class=\"mb-3\">\n                <h6 class=\"fw-semibold mb-2\" style=\"font-size: 14px;\">\u5e38\u898b\u8868\u73fe\uff1a<\/h6>\n                <ul class=\"mb-0\">\n                  ${details.symptoms.map(s => `<li class=\"text-muted small\">${s}<\/li>`).join('')}\n                <\/ul>\n              <\/div>\n              \n              <div>\n                <h6 class=\"fw-semibold mb-2\" style=\"font-size: 14px;\">\u6539\u5584\u65b9\u5411\uff1a<\/h6>\n                <ul class=\"mb-0\">\n                  ${details.advice.map(a => `<li class=\"text-muted small\">${a}<\/li>`).join('')}\n                <\/ul>\n              <\/div>\n            <\/div>\n          `;\n        }\n      }\n      \n      if (html === '') {\n        html = `\n          <div class=\"text-center py-4\">\n            <i class=\"bi bi-emoji-smile fs-1 text-healing mb-3 d-block\"><\/i>\n            <p class=\"text-muted\">\u606d\u559c\uff01\u60a8\u5728\u5404\u500b\u7dad\u5ea6\u90fd\u6c92\u6709\u660e\u986f\u7684\u6050\u61fc\u75c7\u50be\u5411\u3002<\/p>\n          <\/div>\n        `;\n      }\n      \n      this.elements.categoryAnalysis.innerHTML = html;\n    }\n    \n    generatePersonalizedSuggestions(scores, level) {\n      let suggestions = [];\n      \n      \/\/ \u6839\u64da\u7e3d\u9ad4\u7b49\u7d1a\u63d0\u4f9b\u5efa\u8b70\n      const generalSuggestions = {\n        normal: [\n          {\n            icon: 'bi-heart',\n            title: '\u4fdd\u6301\u826f\u597d\u72c0\u614b',\n            content: '\u7e7c\u7e8c\u4fdd\u6301\u7a4d\u6975\u6a02\u89c0\u7684\u751f\u6d3b\u614b\u5ea6\uff0c\u5b9a\u671f\u9032\u884c\u81ea\u6211\u6aa2\u8996\u3002'\n          },\n          {\n            icon: 'bi-sun',\n            title: '\u9810\u9632\u52dd\u65bc\u6cbb\u7642',\n            content: '\u57f9\u990a\u5065\u5eb7\u7684\u751f\u6d3b\u7fd2\u6163\uff0c\u5305\u62ec\u898f\u5f8b\u4f5c\u606f\u3001\u9069\u5ea6\u904b\u52d5\u548c\u793e\u4ea4\u6d3b\u52d5\u3002'\n          }\n        ],\n        mild: [\n          {\n            icon: 'bi-lungs',\n            title: '\u5b78\u7fd2\u653e\u9b06\u6280\u5de7',\n            content: '\u7df4\u7fd2\u6df1\u547c\u5438\u3001\u6f38\u9032\u5f0f\u808c\u8089\u653e\u9b06\u6216\u51a5\u60f3\uff0c\u6bcf\u5929\u81f3\u5c1110\u5206\u9418\u3002'\n          },\n          {\n            icon: 'bi-journal-text',\n            title: '\u8a18\u9304\u60c5\u7dd2\u65e5\u8a18',\n            content: '\u8a18\u9304\u5f15\u767c\u6050\u61fc\u7684\u60c5\u5883\u548c\u60f3\u6cd5\uff0c\u5e6b\u52a9\u8b58\u5225\u89f8\u767c\u56e0\u7d20\u3002'\n          }\n        ],\n        moderate: [\n          {\n            icon: 'bi-people',\n            title: '\u5c0b\u6c42\u652f\u6301',\n            content: '\u8207\u4fe1\u4efb\u7684\u670b\u53cb\u6216\u5bb6\u4eba\u5206\u4eab\u611f\u53d7\uff0c\u6216\u53c3\u52a0\u652f\u6301\u5c0f\u7d44\u3002'\n          },\n          {\n            icon: 'bi-ladder',\n            title: '\u6f38\u9032\u5f0f\u66b4\u9732',\n            content: '\u5728\u5b89\u5168\u74b0\u5883\u4e0b\uff0c\u9010\u6b65\u9762\u5c0d\u6050\u61fc\u7684\u60c5\u5883\uff0c\u5f9e\u6700\u8f15\u5fae\u958b\u59cb\u3002'\n          },\n          {\n            icon: 'bi-chat-heart',\n            title: '\u8003\u616e\u5c08\u696d\u8aee\u8a62',\n            content: '\u5fc3\u7406\u8aee\u8a62\u5e2b\u53ef\u4ee5\u63d0\u4f9b\u8a8d\u77e5\u884c\u70ba\u7642\u6cd5\u7b49\u5c08\u696d\u5e6b\u52a9\u3002'\n          }\n        ],\n        severe: [\n          {\n            icon: 'bi-hospital',\n            title: '\u5c08\u696d\u8a55\u4f30',\n            content: '\u5efa\u8b70\u76e1\u5feb\u5c0b\u6c42\u5fc3\u7406\u91ab\u751f\u7684\u5c08\u696d\u8a55\u4f30\u548c\u8a3a\u65b7\u3002'\n          },\n          {\n            icon: 'bi-capsule',\n            title: '\u7d9c\u5408\u6cbb\u7642',\n            content: '\u53ef\u80fd\u9700\u8981\u5fc3\u7406\u6cbb\u7642\u914d\u5408\u85e5\u7269\u6cbb\u7642\uff0c\u8acb\u9075\u91ab\u56d1\u3002'\n          },\n          {\n            icon: 'bi-shield-check',\n            title: '\u5efa\u7acb\u652f\u6301\u7cfb\u7d71',\n            content: '\u8b93\u5bb6\u4eba\u4e86\u89e3\u4f60\u7684\u60c5\u6cc1\uff0c\u7372\u5f97\u7406\u89e3\u548c\u652f\u6301\u3002'\n          }\n        ]\n      };\n      \n      suggestions = generalSuggestions[level] || generalSuggestions.normal;\n      \n      \/\/ \u6839\u64da\u6700\u9ad8\u5206\u985e\u5225\u6dfb\u52a0\u7279\u5b9a\u5efa\u8b70\n      const maxScores = {\n        social: 2,\n        obsessive: 6,\n        environmental: 5,\n        personal: 5\n      };\n      \n      let highestCategory = null;\n      let highestPercentage = 0;\n      \n      for (const [category, score] of Object.entries(scores.categories)) {\n        const percentage = (score \/ maxScores[category]) * 100;\n        if (percentage > highestPercentage && percentage > 30) {\n          highestPercentage = percentage;\n          highestCategory = category;\n        }\n      }\n      \n      if (highestCategory) {\n        const categorySpecificSuggestions = {\n          social: {\n            icon: 'bi-chat-dots',\n            title: '\u793e\u4ea4\u6280\u5de7\u8a13\u7df4',\n            content: '\u7df4\u7fd2\u773c\u795e\u63a5\u89f8\u3001\u4e3b\u52d5\u6253\u62db\u547c\u7b49\u57fa\u672c\u793e\u4ea4\u6280\u5de7\uff0c\u5f9e\u719f\u6089\u7684\u4eba\u958b\u59cb\u3002'\n          },\n          obsessive: {\n            icon: 'bi-clock-history',\n            title: '\u8a2d\u5b9a\u6642\u9593\u9650\u5236',\n            content: '\u70ba\u6aa2\u67e5\u884c\u70ba\u8a2d\u5b9a\u6642\u9593\u9650\u5236\uff0c\u9010\u6f38\u6e1b\u5c11\u91cd\u8907\u6b21\u6578\u3002'\n          },\n          environmental: {\n            icon: 'bi-compass',\n            title: '\u64f4\u5c55\u8212\u9069\u5340',\n            content: '\u6bcf\u9031\u5617\u8a66\u4e00\u500b\u65b0\u7684\u5c0f\u6311\u6230\uff0c\u9010\u6b65\u64f4\u5927\u6d3b\u52d5\u7bc4\u570d\u3002'\n          },\n          personal: {\n            icon: 'bi-trophy',\n            title: '\u91cd\u65b0\u5b9a\u7fa9\u6210\u529f',\n            content: '\u8a2d\u5b9a\u300c\u8db3\u5920\u597d\u300d\u7684\u6a19\u6e96\uff0c\u5b78\u7fd2\u6176\u795d\u5c0f\u6210\u5c31\u3002'\n          }\n        };\n        \n        if (categorySpecificSuggestions[highestCategory]) {\n          suggestions.push(categorySpecificSuggestions[highestCategory]);\n        }\n      }\n      \n      \/\/ \u751f\u6210HTML\n      let html = '<div class=\"row g-3\">';\n      \n      suggestions.forEach(suggestion => {\n        html += `\n          <div class=\"col-12\">\n            <div class=\"suggestion-item\">\n              <div class=\"d-flex align-items-start\">\n                <div class=\"rounded-circle bg-soft-healing d-inline-flex align-items-center justify-content-center flex-shrink-0 me-3\" style=\"width: 48px; height: 48px;\">\n                  <i class=\"${suggestion.icon} fs-5 text-healing\"><\/i>\n                <\/div>\n                <div>\n                  <h5 class=\"h6 fw-bold mb-1\">${suggestion.title}<\/h5>\n                  <p class=\"text-muted small mb-0\">${suggestion.content}<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        `;\n      });\n      \n      html += '<\/div>';\n      \n      \/\/ \u6dfb\u52a0\u901a\u7528\u5efa\u8b70\n      html += `\n        <div class=\"mt-4 p-3 bg-soft-calm rounded-3\">\n          <p class=\"small text-muted mb-0\">\n            <i class=\"bi bi-info-circle me-2\"><\/i>\n            \u8a18\u4f4f\uff1a\u514b\u670d\u6050\u61fc\u662f\u4e00\u500b\u6f38\u9032\u7684\u904e\u7a0b\uff0c\u8acb\u5c0d\u81ea\u5df1\u4fdd\u6301\u8010\u5fc3\u548c\u540c\u60c5\u3002\u6bcf\u500b\u5c0f\u9032\u6b65\u90fd\u503c\u5f97\u6176\u795d\u3002\n          <\/p>\n        <\/div>\n      `;\n      \n      this.elements.suggestions.innerHTML = html;\n    }\n    \n    createRadarChart(scores) {\n      \/\/ \u92b7\u6bc0\u4e4b\u524d\u7684\u5716\u8868\n      if (this.chartInstance) {\n        this.chartInstance.destroy();\n      }\n      \n      const ctx = document.getElementById('phobia-radar-chart').getContext('2d');\n      \n      const data = {\n        labels: ['\u793e\u4ea4\u6050\u61fc', '\u5f37\u8feb\u6027\u6050\u61fc', '\u74b0\u5883\u6050\u61fc', '\u5b8c\u7f8e\u4e3b\u7fa9\u6050\u61fc'],\n        datasets: [{\n          label: '\u6050\u61fc\u7a0b\u5ea6',\n          data: [\n            Math.round((scores.categories.social \/ 2) * 100),\n            Math.round((scores.categories.obsessive \/ 6) * 100),\n            Math.round((scores.categories.environmental \/ 5) * 100),\n            Math.round((scores.categories.personal \/ 5) * 100)\n          ],\n          backgroundColor: 'rgba(124, 181, 163, 0.2)',\n          borderColor: 'rgba(124, 181, 163, 1)',\n          borderWidth: 2,\n          pointBackgroundColor: 'rgba(124, 181, 163, 1)',\n          pointBorderColor: '#fff',\n          pointHoverBackgroundColor: '#fff',\n          pointHoverBorderColor: 'rgba(124, 181, 163, 1)'\n        }]\n      };\n      \n      this.chartInstance = new Chart(ctx, {\n        type: 'radar',\n        data: data,\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          scales: {\n            r: {\n              beginAtZero: true,\n              max: 100,\n              ticks: {\n                stepSize: 25,\n                font: {\n                  size: 12\n                },\n                callback: function(value) {\n                  return value + '%';\n                }\n              },\n              pointLabels: {\n                font: {\n                  size: 14,\n                  weight: '500'\n                }\n              },\n              grid: {\n                color: 'rgba(0, 0, 0, 0.1)'\n              }\n            }\n          },\n          plugins: {\n            legend: {\n              display: false\n            },\n            tooltip: {\n              callbacks: {\n                label: function(context) {\n                  return context.label + ': ' + context.parsed.r + '%';\n                }\n              },\n              titleFont: {\n                size: 14\n              },\n              bodyFont: {\n                size: 12\n              }\n            }\n          }\n        }\n      });\n    }\n    \n    createDistributionChart(userScore) {\n      const canvas = document.getElementById('score-distribution-chart');\n      const ctx = canvas.getContext('2d');\n      \n      \/\/ \u8a2d\u7f6ecanvas\u5be6\u969b\u5927\u5c0f\n      const containerWidth = canvas.parentElement.offsetWidth;\n      canvas.width = containerWidth;\n      canvas.height = 60;\n      \n      \/\/ \u5b9a\u7fa9\u5206\u6578\u5340\u9593\u548c\u984f\u8272\n      const ranges = [\n        { label: '\u6b63\u5e38', min: 0, max: 5, color: '#7cb5a3' },\n        { label: '\u8f15\u5ea6', min: 6, max: 10, color: '#81b4d6' },\n        { label: '\u4e2d\u5ea6', min: 11, max: 15, color: '#f4d35e' },\n        { label: '\u8f03\u56b4\u91cd', min: 16, max: 18, color: '#c9a9d9' }\n      ];\n      \n      \/\/ \u7e6a\u88fd\u53c3\u6578\n      const barHeight = 20;\n      const barY = 20;\n      const padding = 20;\n      const barWidth = containerWidth - (padding * 2);\n      const totalScore = 18;\n      \n      \/\/ \u7e6a\u88fd\u80cc\u666f\u689d\n      ctx.fillStyle = '#f3f4f6';\n      ctx.fillRect(padding, barY, barWidth, barHeight);\n      \n      \/\/ \u7e6a\u88fd\u6bcf\u500b\u5340\u9593\n      let currentX = padding;\n      ranges.forEach(range => {\n        const segmentWidth = ((range.max - range.min + 1) \/ totalScore) * barWidth;\n        \n        \/\/ \u7e6a\u88fd\u5340\u9593\u689d\n        ctx.fillStyle = range.color;\n        ctx.fillRect(currentX, barY, segmentWidth, barHeight);\n        \n        \/\/ \u7e6a\u88fd\u5340\u9593\u5206\u9694\u7dda\n        ctx.strokeStyle = '#ffffff';\n        ctx.lineWidth = 2;\n        ctx.beginPath();\n        ctx.moveTo(currentX + segmentWidth, barY);\n        ctx.lineTo(currentX + segmentWidth, barY + barHeight);\n        ctx.stroke();\n        \n        currentX += segmentWidth;\n      });\n      \n      \/\/ \u7e6a\u88fd\u908a\u6846\n      ctx.strokeStyle = '#e5e7eb';\n      ctx.lineWidth = 1;\n      ctx.strokeRect(padding, barY, barWidth, barHeight);\n      \n      \/\/ \u8a08\u7b97\u7528\u6236\u5206\u6578\u4f4d\u7f6e\n      const userX = padding + (userScore \/ totalScore) * barWidth;\n      \n      \/\/ \u7e6a\u88fd\u6307\u793a\u7dda\n      ctx.strokeStyle = '#dc2626';\n      ctx.lineWidth = 2;\n      ctx.setLineDash([4, 4]);\n      ctx.beginPath();\n      ctx.moveTo(userX, 5);\n      ctx.lineTo(userX, 55);\n      ctx.stroke();\n      ctx.setLineDash([]);\n      \n      \/\/ \u7e6a\u88fd\u7d05\u8272\u5713\u9ede\n      ctx.beginPath();\n      ctx.arc(userX, barY + barHeight \/ 2, 6, 0, 2 * Math.PI);\n      ctx.fillStyle = '#dc2626';\n      ctx.fill();\n      ctx.strokeStyle = '#ffffff';\n      ctx.lineWidth = 2;\n      ctx.stroke();\n      \n      \/\/ \u7e6a\u88fd\u5206\u6578\u6a19\u7c64\u80cc\u666f\n      const labelText = `\u4f60\u7684\u5206\u6578: ${userScore}`;\n      ctx.font = 'bold 12px sans-serif';\n      const textWidth = ctx.measureText(labelText).width;\n      const labelX = Math.min(Math.max(userX - textWidth \/ 2, padding), containerWidth - padding - textWidth);\n      \n      \/\/ \u7e6a\u88fd\u6a19\u7c64\u80cc\u666f (\u4f7f\u7528fillRect\u66ff\u4ee3roundRect\u4ee5\u78ba\u4fdd\u517c\u5bb9\u6027)\n      ctx.fillStyle = '#dc2626';\n      ctx.fillRect(labelX - 5, 2, textWidth + 10, 16);\n      \n      \/\/ \u7e6a\u88fd\u6a19\u7c64\u6587\u5b57\n      ctx.fillStyle = '#ffffff';\n      ctx.textAlign = 'left';\n      ctx.fillText(labelText, labelX, 13);\n      \n      \/\/ \u7e6a\u88fd\u523b\u5ea6\u6578\u5b57\n      ctx.fillStyle = '#6b7280';\n      ctx.font = '10px sans-serif';\n      ctx.textAlign = 'center';\n      \n      \/\/ \u8d77\u59cb\u548c\u7d50\u675f\u523b\u5ea6\n      ctx.fillText('0', padding, barY + barHeight + 12);\n      ctx.fillText('18', padding + barWidth, barY + barHeight + 12);\n      \n      \/\/ \u7e6a\u88fd\u5340\u9593\u5206\u754c\u9ede\u523b\u5ea6\n      const divisionPoints = [5, 10, 15];\n      divisionPoints.forEach(point => {\n        const x = padding + (point \/ totalScore) * barWidth;\n        ctx.fillText(point.toString(), x, barY + barHeight + 12);\n      });\n    }\n    \n    restartQuiz() {\n      this.currentQuestion = 0;\n      this.answers = {};\n      \n      if (this.chartInstance) {\n        this.chartInstance.destroy();\n        this.chartInstance = null;\n      }\n      \n      this.showPage('intro');\n      this.scrollToTop();\n    }\n    \n    scrollToTop() {\n      window.scrollTo({ top: 0, behavior: 'smooth' });\n    }\n    \n    scrollToHeader() {\n      const header = this.pages.quiz.querySelector('h2');\n      if (header) {\n        header.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      }\n    }\n  }\n  \n  \/\/ \u521d\u59cb\u5316\u6e2c\u9a57\n  document.addEventListener('DOMContentLoaded', function() {\n    new PhobiaQuizController();\n  });\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u4e00\u65e6\u9762\u5bf9\u8fd9\u79cd\u7269\u4f53\u6216\u73af\u5883\u65f6\uff0c\u6050\u60e7\u75c7\u60a3\u8005\u5c31\u4f1a\u4ea7\u751f\u4e00\u79cd\u6781\u7aef\u7684\u6050\u6016\u611f\u3002\u5168\u7403\u6709\u56db\u5206\u4e4b\u4e00\u7684\u4eba\u60a3\u6709\u4e0d\u540c\u7a0b\u5ea6\u7684\u6050\u60e7\u75c7\uff0c\u751f\u6d3b\u4e2d\u7684\u4f60\u6709\u6050\u60e7\u75c7\u5417\uff1f<\/p>","protected":false},"author":19,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"narrow-width-container","site-content-style":"unboxed","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[169,162],"tags":[215],"class_list":["post-3216","post","type-post","status-publish","format-standard","hentry","category-psychological-symptom-scales","category-clinical","tag-phobia"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/3216","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/comments?post=3216"}],"version-history":[{"count":4,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/3216\/revisions"}],"predecessor-version":[{"id":10437,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/3216\/revisions\/10437"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=3216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=3216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=3216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}