{"id":5755,"date":"2023-12-31T21:08:35","date_gmt":"2023-12-31T13:08:35","guid":{"rendered":"https:\/\/bookmark.tw\/?p=5755"},"modified":"2025-08-06T19:01:02","modified_gmt":"2025-08-06T11:01:02","slug":"phq-9","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/phq-9","title":{"rendered":"\u75c5\u4eba\u5065\u5eb7\u95ee\u5377(PHQ-9)\u7ebf\u4e0a\u514d\u8d39\u6d4b\u9a8c\uff089\u9898\uff09"},"content":{"rendered":"<!-- \u5f15\u5165Bootstrap\u548cBootstrap Icons -->\n<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap\/5.3.3\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-icons\/1.11.3\/font\/bootstrap-icons.min.css\" rel=\"stylesheet\">\n\n<!-- PHQ-9 \u6182\u9b31\u75c7\u7be9\u6aa2\u6e2c\u9a57 -->\n<div id=\"phq9-container\" class=\"container-fluid px-3 px-md-4\" style=\"max-width: 750px; margin: 0 auto;\">\n  \n  <!-- \u5f15\u5c0e\u9801 -->\n  <section id=\"quizintro9\" data-page=\"intro9\" class=\"py-5\">\n    <div class=\"row justify-content-center\">\n      <div class=\"col-12\">\n        <div class=\"text-center mb-5\">\n          <h2 class=\"display-5 fw-bold text-primary mb-3\">\u75c5\u4eba\u5065\u5eb7\u554f\u5377 PHQ-9<\/h2>\n          <p class=\"lead text-secondary\">\u5c08\u696d\u6182\u9b31\u75c7\u72c0\u81ea\u6211\u8a55\u4f30\u91cf\u8868<\/p>\n        <\/div>\n        \n        <div class=\"row g-4 mb-5\">\n          <div class=\"col-md-4\">\n            <div class=\"text-center p-4 h-100 rounded-4 bg-light shadow-sm hover-lift\">\n              <div class=\"bg-primary bg-gradient rounded-circle d-inline-flex align-items-center justify-content-center mb-3\" style=\"width: 80px; height: 80px;\">\n                <i class=\"bi bi-clipboard2-check text-white fs-2\"><\/i>\n              <\/div>\n              <h5 class=\"fw-bold mb-2\">\u79d1\u5b78\u9a57\u8b49<\/h5>\n              <p class=\"text-muted mb-0\">\u570b\u969b\u8a8d\u53ef\u7684\u6a19\u6e96\u5316\u8a55\u4f30\u5de5\u5177\uff0c\u5177\u6709\u826f\u597d\u4fe1\u5ea6\u8207\u6548\u5ea6<\/p>\n            <\/div>\n          <\/div>\n          <div class=\"col-md-4\">\n            <div class=\"text-center p-4 h-100 rounded-4 bg-light shadow-sm hover-lift\">\n              <div class=\"bg-success bg-gradient rounded-circle d-inline-flex align-items-center justify-content-center mb-3\" style=\"width: 80px; height: 80px;\">\n                <i class=\"bi bi-clock-history text-white fs-2\"><\/i>\n              <\/div>\n              <h5 class=\"fw-bold mb-2\">\u5feb\u901f\u7c21\u4fbf<\/h5>\n              <p class=\"text-muted mb-0\">\u53ea\u97003-5\u5206\u9418\u5373\u53ef\u5b8c\u6210\uff0c\u51719\u9053\u984c\u76ee<\/p>\n            <\/div>\n          <\/div>\n          <div class=\"col-md-4\">\n            <div class=\"text-center p-4 h-100 rounded-4 bg-light shadow-sm hover-lift\">\n              <div class=\"bg-info bg-gradient rounded-circle d-inline-flex align-items-center justify-content-center mb-3\" style=\"width: 80px; height: 80px;\">\n                <i class=\"bi bi-graph-up-arrow text-white fs-2\"><\/i>\n              <\/div>\n              <h5 class=\"fw-bold mb-2\">\u8be6\u7ec6\u5206\u6790<\/h5>\n              <p class=\"text-muted mb-0\">\u63d0\u4f9b\u5c08\u696d\u8a55\u4f30\u7d50\u679c\u8207\u8996\u89ba\u5316\u5206\u6790\u5831\u544a<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n        \n        <div class=\"bg-white rounded-4 shadow p-4 p-md-5 mb-4\">\n          <h4 class=\"fw-bold mb-3\">\u95dc\u65bc\u6b64\u6e2c\u9a57<\/h4>\n          <p class=\"mb-3\">PHQ-9\uff08Patient Health Questionnaire-9\uff09\u662f\u4e00\u500b\u5ee3\u6cdb\u4f7f\u7528\u7684\u6182\u9b31\u75c7\u7be9\u6aa2\u5de5\u5177\uff0c\u80fd\u6709\u6548\u8a55\u4f30\u904e\u53bb\u5169\u9031\u7684\u6182\u9b31\u75c7\u72c0\u3002<\/p>\n          <p class=\"mb-4\">\u672c\u6e2c\u9a57\u5c07\u8a62\u554f\u60a8\u5728\u904e\u53bb\u5169\u9031\u5167\uff0c\u53d7\u5230\u67d0\u4e9b\u554f\u984c\u56f0\u64fe\u7684\u983b\u7387\u3002\u8acb\u6839\u64da\u60a8\u7684\u5be6\u969b\u611f\u53d7\u8aa0\u5be6\u4f5c\u7b54\uff0c\u4ee5\u7372\u5f97\u6700\u6e96\u78ba\u7684\u8a55\u4f30\u7d50\u679c\u3002<\/p>\n          \n          <div class=\"alert alert-warning border-0 shadow-sm\" role=\"alert\">\n            <i class=\"bi bi-info-circle me-2\"><\/i>\n            <strong>\u91cd\u8981\u63d0\u9192\uff1a<\/strong>\u6b64\u6e2c\u9a57\u7d50\u679c\u50c5\u4f9b\u521d\u6b65\u7be9\u6aa2\u53c3\u8003\uff0c\u4e0d\u80fd\u53d6\u4ee3\u5c08\u696d\u91ab\u7642\u8a3a\u65b7\u3002\u5982\u6709\u9700\u8981\uff0c\u8acb\u8aee\u8a62\u5fc3\u7406\u5065\u5eb7\u5c08\u696d\u4eba\u54e1\u3002\n          <\/div>\n        <\/div>\n        \n        <div class=\"text-center\">\n          <button id=\"phq9-start-btn\" class=\"btn btn-primary btn-lg px-5 py-3 rounded-pill shadow hover-lift\">\n            <i class=\"bi bi-play-circle me-2\"><\/i>\u5f00\u59cb\u6d4b\u9a8c\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n  \n  <!-- \u6e2c\u9a57\u9801 -->\n  <section id=\"quizmain9\" data-page=\"quiz9\" class=\"py-5 d-none\">\n    <div class=\"row justify-content-center\">\n      <div class=\"col-12\">\n        <h2 class=\"text-center mb-4\">\u6182\u9b31\u75c7\u72c0\u8a55\u4f30<\/h2>\n        \n        <!-- \u9032\u5ea6\u689d -->\n        <div class=\"mb-4\">\n          <div class=\"d-flex justify-content-between align-items-center mb-2\">\n            <span class=\"text-muted\">\u9032\u5ea6<\/span>\n            <span id=\"phq9-progress-text\" class=\"fw-bold\">\u554f\u984c 1 \/ 9<\/span>\n          <\/div>\n          <div class=\"progress\" style=\"height: 8px;\">\n            <div id=\"phq9-progress-bar\" class=\"progress-bar bg-primary\" role=\"progressbar\" style=\"width: 11.11%;\" aria-valuenow=\"11.11\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div>\n          <\/div>\n        <\/div>\n        \n        <!-- \u984c\u76ee\u5340\u57df -->\n        <div class=\"bg-white rounded-4 shadow p-4 p-md-5 mb-4\">\n          <p class=\"text-muted mb-3\">\u5728\u904e\u53bb\u5169\u500b\u661f\u671f\uff0c\u6709\u591a\u5c11\u6642\u5019\u60a8\u53d7\u5230\u4ee5\u4e0b\u554f\u984c\u6240\u56f0\u64fe\uff1f<\/p>\n          <h3 id=\"phq9-question\" class=\"fw-bold mb-4\" style=\"font-size: 22px;\">\u505a\u4e8b\u6642\u63d0\u4e0d\u8d77\u52c1\u6216\u6c92\u6709\u6a02\u8da3<\/h3>\n          \n          <div id=\"phq9-options\" class=\"row g-3\" role=\"group\" aria-label=\"\u7b54\u6848\u9078\u9805\">\n            <div class=\"col-12\">\n              <div class=\"card option-card border-2 rounded-3 hover-lift\" data-value=\"0\">\n                <div class=\"card-body p-3 d-flex align-items-center\">\n                  <div class=\"option-indicator me-3\">\n                    <i class=\"bi bi-circle\"><\/i>\n                  <\/div>\n                  <div class=\"option-text flex-grow-1\" style=\"font-size: 18px;\">\n                    \u5b8c\u5168\u6ca1\u6709\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n            <div class=\"col-12\">\n              <div class=\"card option-card border-2 rounded-3 hover-lift\" data-value=\"1\">\n                <div class=\"card-body p-3 d-flex align-items-center\">\n                  <div class=\"option-indicator me-3\">\n                    <i class=\"bi bi-circle\"><\/i>\n                  <\/div>\n                  <div class=\"option-text flex-grow-1\" style=\"font-size: 18px;\">\n                    \u6709\u8fc7\u51e0\u5929\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n            <div class=\"col-12\">\n              <div class=\"card option-card border-2 rounded-3 hover-lift\" data-value=\"2\">\n                <div class=\"card-body p-3 d-flex align-items-center\">\n                  <div class=\"option-indicator me-3\">\n                    <i class=\"bi bi-circle\"><\/i>\n                  <\/div>\n                  <div class=\"option-text flex-grow-1\" style=\"font-size: 18px;\">\n                    \u4e00\u534a\u4ee5\u4e0a\u5929\u6570\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n            <div class=\"col-12\">\n              <div class=\"card option-card border-2 rounded-3 hover-lift\" data-value=\"3\">\n                <div class=\"card-body p-3 d-flex align-items-center\">\n                  <div class=\"option-indicator me-3\">\n                    <i class=\"bi bi-circle\"><\/i>\n                  <\/div>\n                  <div class=\"option-text flex-grow-1\" style=\"font-size: 18px;\">\n                    \u51e0\u4e4e\u6bcf\u5929\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n        \n        <!-- \u4e0a\u4e00\u984c\u6309\u9215 -->\n        <div class=\"text-center\">\n          <button id=\"phq9-prev-btn\" class=\"btn btn-secondary px-4 py-2 rounded-pill d-none\">\n            <i class=\"bi bi-arrow-left me-2\"><\/i>\u4e0a\u4e00\u9898\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n  \n  <!-- \u7d50\u679c\u9801 -->\n  <section id=\"quizresult9\" data-page=\"result9\" class=\"py-5 d-none\">\n    <div class=\"row justify-content-center\">\n      <div class=\"col-12\">\n        <h2 class=\"text-center mb-4\">\u8bc4\u4f30\u7ed3\u679c<\/h2>\n        \n        <!-- \u7e3d\u5206\u986f\u793a -->\n        <div class=\"text-center mb-5\">\n          <div class=\"bg-white rounded-4 shadow p-4 d-inline-block\">\n            <div class=\"display-1 fw-bold text-primary mb-2\" id=\"phq9-total-score\">0<\/div>\n            <div class=\"text-muted\">\u7e3d\u5206 (\u6eff\u520627\u5206)<\/div>\n          <\/div>\n        <\/div>\n        \n        <!-- \u6a6b\u5411\u8a55\u5206\u5206\u5e03\u5716 -->\n        <div class=\"bg-white rounded-4 shadow p-4 p-md-5 mb-4\">\n          <h4 class=\"fw-bold mb-4\">\u8a55\u5206\u7b49\u7d1a\u5206\u5e03<\/h4>\n          <div id=\"phq9-score-distribution\" class=\"position-relative mb-3\" style=\"height: 60px;\">\n            <!-- \u5c07\u7531JavaScript\u52d5\u614b\u751f\u6210 -->\n          <\/div>\n          <div id=\"phq9-score-legend\" class=\"d-flex flex-wrap justify-content-center gap-3\">\n            <!-- \u5c07\u7531JavaScript\u52d5\u614b\u751f\u6210 -->\n          <\/div>\n        <\/div>\n        \n        <!-- \u56b4\u91cd\u7a0b\u5ea6 -->\n        <div class=\"bg-white rounded-4 shadow p-4 p-md-5 mb-4\">\n          <h4 class=\"fw-bold mb-3\">\u56b4\u91cd\u7a0b\u5ea6\u8a55\u4f30<\/h4>\n          <div id=\"phq9-severity\" class=\"alert alert-info\" role=\"alert\">\n            <h5 class=\"alert-heading fw-bold mb-2\"><\/h5>\n            <p class=\"mb-0\"><\/p>\n          <\/div>\n        <\/div>\n        \n        <!-- \u8996\u89ba\u5316\u5716\u8868 -->\n        <div class=\"bg-white rounded-4 shadow p-4 p-md-5 mb-4\">\n          <h4 class=\"fw-bold mb-4\">\u75c7\u72c0\u5206\u6790\u5716\u8868<\/h4>\n          <div class=\"row\">\n            <div class=\"col-md-6 mb-4\">\n              <canvas id=\"phq9-radar-chart\" style=\"max-height: 350px;\"><\/canvas>\n            <\/div>\n            <div class=\"col-md-6 mb-4\">\n              <canvas id=\"phq9-bar-chart\" style=\"max-height: 350px;\"><\/canvas>\n            <\/div>\n          <\/div>\n        <\/div>\n        \n        <!-- \u8a73\u7d30\u5206\u6790 -->\n        <div class=\"bg-white rounded-4 shadow p-4 p-md-5 mb-4\">\n          <h4 class=\"fw-bold mb-3\">\u8be6\u7ec6\u5206\u6790<\/h4>\n          <div id=\"phq9-analysis\"><\/div>\n        <\/div>\n        \n        <!-- \u500b\u6027\u5316\u5efa\u8b70 -->\n        <div class=\"bg-white rounded-4 shadow p-4 p-md-5 mb-4\">\n          <h4 class=\"fw-bold mb-3\">\u500b\u6027\u5316\u5efa\u8b70<\/h4>\n          <div id=\"phq9-recommendations\"><\/div>\n        <\/div>\n        \n        <!-- \u91cd\u65b0\u6e2c\u8a66\u6309\u9215 -->\n        <div class=\"text-center mt-5\">\n          <button id=\"phq9-restart-btn\" class=\"btn btn-primary btn-lg px-5 py-3 rounded-pill shadow hover-lift\">\n            <i class=\"bi bi-arrow-clockwise me-2\"><\/i>\u91cd\u65b0\u6d4b\u8bd5\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n  \n<\/div>\n\n<!-- CSS\u6a23\u5f0f -->\n<style>\n#phq9-container {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  color: #333;\n}\n\n#phq9-container .hover-lift {\n  transition: all 0.3s ease;\n  cursor: pointer;\n}\n\n#phq9-container .hover-lift:hover {\n  transform: translateY(-5px);\n  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;\n}\n\n#phq9-container .option-card {\n  border-color: #dee2e6;\n  cursor: pointer;\n  transition: all 0.3s ease;\n  background-color: #fff;\n}\n\n#phq9-container .option-card:hover {\n  border-color: #0d6efd;\n  background-color: #f8f9fa;\n  transform: translateX(5px);\n}\n\n#phq9-container .option-card.selected {\n  border-color: #0d6efd;\n  background-color: #e7f1ff;\n}\n\n#phq9-container .option-indicator {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background-color: #f8f9fa;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.3s ease;\n}\n\n#phq9-container .option-card:hover .option-indicator {\n  background-color: #e9ecef;\n}\n\n#phq9-container .option-card.selected .option-indicator {\n  background-color: #0d6efd;\n  color: white;\n}\n\n#phq9-container .option-indicator i {\n  font-size: 20px;\n  color: #6c757d;\n}\n\n#phq9-container .option-card.selected .option-indicator i {\n  color: white;\n}\n\n#phq9-container .shadow {\n  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08) !important;\n}\n\n#phq9-container .shadow-sm {\n  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05) !important;\n}\n\n#phq9-container .rounded-4 {\n  border-radius: 1rem !important;\n}\n\n#phq9-container .btn-lg {\n  font-size: 1.125rem;\n}\n\n#phq9-container .display-5 {\n  font-size: calc(1.425rem + 2.1vw);\n}\n\n@media (min-width: 1200px) {\n  #phq9-container .display-5 {\n    font-size: 3rem;\n  }\n}\n\n#phq9-container .fade-in {\n  animation: fadeIn 0.5s ease-in;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; transform: translateY(10px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n\/* \u8a55\u5206\u5206\u5e03\u5716\u6a23\u5f0f *\/\n#phq9-container .score-bar {\n  height: 100%;\n  display: flex;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n#phq9-container .score-segment {\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  font-weight: bold;\n  font-size: 14px;\n  position: relative;\n}\n\n#phq9-container .score-marker {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  background-color: #dc3545;\n  border: 3px solid white;\n  border-radius: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.5);\n  z-index: 10;\n}\n\n#phq9-container .score-marker::after {\n  content: attr(data-score);\n  position: absolute;\n  top: -30px;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: #dc3545;\n  color: white;\n  padding: 2px 8px;\n  border-radius: 4px;\n  font-size: 12px;\n  white-space: nowrap;\n}\n\n#phq9-container .legend-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n#phq9-container .legend-color {\n  width: 20px;\n  height: 20px;\n  border-radius: 4px;\n}\n<\/style>\n\n<!-- JavaScript -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n<script>\n(function() {\n  'use strict';\n  \n  class PHQ9Quiz {\n    constructor() {\n      this.questions = [\n        '\u505a\u4e8b\u6642\u63d0\u4e0d\u8d77\u52c1\u6216\u6c92\u6709\u6a02\u8da3',\n        '\u611f\u5230\u5fc3\u60c5\u4f4e\u843d\u3001\u6cae\u55aa\u6216\u7d55\u671b',\n        '\u5165\u7761\u56f0\u96e3\u3001\u7761\u4e0d\u5b89\u7a69\u6216\u7761\u7720\u904e\u591a',\n        '\u611f\u89ba\u75b2\u5026\u6216\u6c92\u6709\u6d3b\u529b',\n        '\u98df\u617e\u4e0d\u632f\u6216\u5403\u592a\u591a',\n        '\u89ba\u5f97\u81ea\u5df1\u5f88\u7cdf\u3001\u5931\u6557\uff0c\u6216\u8b93\u81ea\u5df1\u6216\u5bb6\u4eba\u5931\u671b',\n        '\u5c0d\u4e8b\u7269\u5c08\u6ce8\u6709\u56f0\u96e3\uff0c\u4f8b\u5982\u95b1\u8b80\u5831\u7d19\u6216\u770b\u96fb\u8996',\n        '\u52d5\u4f5c\u6216\u8aaa\u8a71\u901f\u5ea6\u7de9\u6162\uff0c\u6216\u7169\u8e81\u6216\u5750\u7acb\u4e0d\u5b89',\n        '\u6709\u4e0d\u5982\u6b7b\u6389\u6216\u7528\u67d0\u7a2e\u65b9\u5f0f\u50b7\u5bb3\u81ea\u5df1\u7684\u5ff5\u982d'\n      ];\n      \n      this.answers = new Array(9).fill(null);\n      this.currentQuestion = 0;\n      this.charts = {};\n      \n      this.initElements();\n      this.bindEvents();\n    }\n    \n    initElements() {\n      \/\/ \u9801\u9762\n      this.introPage = document.getElementById('quizintro9');\n      this.quizPage = document.getElementById('quizmain9');\n      this.resultPage = document.getElementById('quizresult9');\n      \n      \/\/ \u6309\u9215\n      this.startBtn = document.getElementById('phq9-start-btn');\n      this.prevBtn = document.getElementById('phq9-prev-btn');\n      this.restartBtn = document.getElementById('phq9-restart-btn');\n      \n      \/\/ \u6e2c\u9a57\u5143\u7d20\n      this.questionEl = document.getElementById('phq9-question');\n      this.optionsEl = document.getElementById('phq9-options');\n      this.progressBar = document.getElementById('phq9-progress-bar');\n      this.progressText = document.getElementById('phq9-progress-text');\n      \n      \/\/ \u7d50\u679c\u5143\u7d20\n      this.totalScoreEl = document.getElementById('phq9-total-score');\n      this.severityEl = document.getElementById('phq9-severity');\n      this.analysisEl = document.getElementById('phq9-analysis');\n      this.recommendationsEl = document.getElementById('phq9-recommendations');\n      this.scoreDistributionEl = document.getElementById('phq9-score-distribution');\n      this.scoreLegendEl = document.getElementById('phq9-score-legend');\n    }\n    \n    bindEvents() {\n      this.startBtn.addEventListener('click', () => this.startQuiz());\n      this.prevBtn.addEventListener('click', () => this.previousQuestion());\n      this.restartBtn.addEventListener('click', () => this.restartQuiz());\n      \n      \/\/ \u4f7f\u7528\u4e8b\u4ef6\u59d4\u8a17\u8655\u7406\u9078\u9805\u9ede\u64ca\n      this.optionsEl.addEventListener('click', (e) => {\n        const card = e.target.closest('.option-card');\n        if (card && card.hasAttribute('data-value')) {\n          this.selectAnswer(parseInt(card.getAttribute('data-value')));\n        }\n      });\n    }\n    \n    startQuiz() {\n      this.showPage('quiz');\n      this.displayQuestion();\n      this.scrollToTop();\n    }\n    \n    showPage(page) {\n      this.introPage.classList.add('d-none');\n      this.quizPage.classList.add('d-none');\n      this.resultPage.classList.add('d-none');\n      \n      const targetPage = page === 'intro' ? this.introPage :\n                        page === 'quiz' ? this.quizPage : this.resultPage;\n      targetPage.classList.remove('d-none');\n      targetPage.classList.add('fade-in');\n    }\n    \n    displayQuestion() {\n      this.questionEl.textContent = this.questions[this.currentQuestion];\n      this.updateProgress();\n      \n      \/\/ \u66f4\u65b0\u9078\u9805\u5361\u7247\u72c0\u614b\n      const cards = this.optionsEl.querySelectorAll('.option-card');\n      cards.forEach(card => {\n        card.classList.remove('selected');\n        const icon = card.querySelector('.option-indicator i');\n        if (icon) {\n          icon.className = 'bi bi-circle';\n        }\n      });\n      \n      \/\/ \u5982\u679c\u6709\u4e4b\u524d\u7684\u7b54\u6848\uff0c\u986f\u793a\u9078\u4e2d\u72c0\u614b\n      if (this.answers[this.currentQuestion] !== null) {\n        const selectedCard = this.optionsEl.querySelector(`.option-card[data-value=\"${this.answers[this.currentQuestion]}\"]`);\n        if (selectedCard) {\n          selectedCard.classList.add('selected');\n          const icon = selectedCard.querySelector('.option-indicator i');\n          if (icon) {\n            icon.className = 'bi bi-check-circle-fill';\n          }\n        }\n      }\n      \n      \/\/ \u986f\u793a\/\u96b1\u85cf\u4e0a\u4e00\u984c\u6309\u9215\n      this.prevBtn.classList.toggle('d-none', this.currentQuestion === 0);\n    }\n    \n    updateProgress() {\n      const progress = ((this.currentQuestion + 1) \/ this.questions.length) * 100;\n      this.progressBar.style.width = progress + '%';\n      this.progressBar.setAttribute('aria-valuenow', progress);\n      this.progressText.textContent = `\u554f\u984c ${this.currentQuestion + 1} \/ ${this.questions.length}`;\n    }\n    \n    selectAnswer(value) {\n      this.answers[this.currentQuestion] = value;\n      \n      \/\/ \u66f4\u65b0\u5361\u7247\u72c0\u614b\n      const cards = this.optionsEl.querySelectorAll('.option-card');\n      cards.forEach(card => {\n        card.classList.remove('selected');\n        const icon = card.querySelector('.option-indicator i');\n        if (icon) {\n          icon.className = 'bi bi-circle';\n        }\n      });\n      \n      const selectedCard = this.optionsEl.querySelector(`.option-card[data-value=\"${value}\"]`);\n      if (selectedCard) {\n        selectedCard.classList.add('selected');\n        const icon = selectedCard.querySelector('.option-indicator i');\n        if (icon) {\n          icon.className = 'bi bi-check-circle-fill';\n        }\n      }\n      \n      \/\/ \u5ef6\u9072\u5f8c\u9032\u5165\u4e0b\u4e00\u984c\u6216\u986f\u793a\u7d50\u679c\n      setTimeout(() => {\n        if (this.currentQuestion < this.questions.length - 1) {\n          this.currentQuestion++;\n          this.displayQuestion();\n        } else {\n          this.showResults();\n        }\n        this.scrollToTop();\n      }, 300);\n    }\n    \n    previousQuestion() {\n      if (this.currentQuestion > 0) {\n        this.currentQuestion--;\n        this.displayQuestion();\n        this.scrollToTop();\n      }\n    }\n    \n    showResults() {\n      const totalScore = this.answers.reduce((sum, val) => sum + val, 0);\n      this.showPage('result');\n      \n      \/\/ \u986f\u793a\u7e3d\u5206\n      this.totalScoreEl.textContent = totalScore;\n      \n      \/\/ \u5275\u5efa\u8a55\u5206\u5206\u5e03\u5716\n      this.createScoreDistribution(totalScore);\n      \n      \/\/ \u8a55\u4f30\u56b4\u91cd\u7a0b\u5ea6\n      let severity, description, alertClass;\n      if (totalScore <= 4) {\n        severity = '\u6b63\u5e38\u7bc4\u570d';\n        description = '\u60a8\u7684\u6e2c\u9a57\u7d50\u679c\u986f\u793a\u76ee\u524d\u6c92\u6709\u660e\u986f\u7684\u6182\u9b31\u75c7\u72c0\u3002';\n        alertClass = 'alert-success';\n      } else if (totalScore <= 9) {\n        severity = '\u8f15\u5ea6\u6182\u9b31\u50be\u5411';\n        description = '\u60a8\u53ef\u80fd\u6709\u8f15\u5ea6\u6182\u9b31\u75c7\u72c0\uff0c\u5efa\u8b70\u8aee\u8a62\u5fc3\u7406\u5065\u5eb7\u5c08\u696d\u4eba\u54e1\u4ee5\u7372\u5f97\u66f4\u591a\u652f\u63f4\u3002';\n        alertClass = 'alert-info';\n      } else if (totalScore <= 14) {\n        severity = '\u4e2d\u5ea6\u6182\u9b31\u50be\u5411';\n        description = '\u60a8\u53ef\u80fd\u6709\u4e2d\u5ea6\u6182\u9b31\u75c7\u72c0\uff0c\u5efa\u8b70\u5118\u5feb\u8aee\u8a62\u5fc3\u7406\u91ab\u5e2b\u6216\u5fc3\u7406\u5065\u5eb7\u5de5\u4f5c\u8005\u3002';\n        alertClass = 'alert-warning';\n      } else if (totalScore <= 19) {\n        severity = '\u4e2d\u91cd\u5ea6\u6182\u9b31\u50be\u5411';\n        description = '\u60a8\u53ef\u80fd\u6709\u4e2d\u91cd\u5ea6\u6182\u9b31\u75c7\u72c0\uff0c\u5f37\u70c8\u5efa\u8b70\u8aee\u8a62\u5fc3\u7406\u91ab\u5e2b\u6216\u7cbe\u795e\u79d1\u91ab\u5e2b\u3002';\n        alertClass = 'alert-warning';\n      } else {\n        severity = '\u91cd\u5ea6\u6182\u9b31\u50be\u5411';\n        description = '\u60a8\u53ef\u80fd\u6709\u91cd\u5ea6\u6182\u9b31\u75c7\u72c0\uff0c\u8acb\u52d9\u5fc5\u5118\u5feb\u5c0b\u6c42\u5fc3\u7406\u91ab\u5e2b\u6216\u7cbe\u795e\u79d1\u91ab\u5e2b\u7684\u5c08\u696d\u5354\u52a9\u3002';\n        alertClass = 'alert-danger';\n      }\n      \n      this.severityEl.className = `alert ${alertClass}`;\n      this.severityEl.querySelector('.alert-heading').textContent = severity;\n      this.severityEl.querySelector('p').textContent = description;\n      \n      \/\/ \u751f\u6210\u8a73\u7d30\u5206\u6790\n      this.generateAnalysis();\n      \n      \/\/ \u751f\u6210\u500b\u6027\u5316\u5efa\u8b70\n      this.generateRecommendations(totalScore);\n      \n      \/\/ \u5275\u5efa\u8996\u89ba\u5316\u5716\u8868\n      this.createCharts();\n      \n      this.scrollToTop();\n    }\n    \n    createScoreDistribution(score) {\n      const ranges = [\n        { min: 0, max: 4, label: '\u6b63\u5e38', color: '#28a745' },\n        { min: 5, max: 9, label: '\u8f15\u5ea6', color: '#17a2b8' },\n        { min: 10, max: 14, label: '\u4e2d\u5ea6', color: '#ffc107' },\n        { min: 15, max: 19, label: '\u4e2d\u91cd\u5ea6', color: '#fd7e14' },\n        { min: 20, max: 27, label: '\u91cd\u5ea6', color: '#dc3545' }\n      ];\n      \n      \/\/ \u5275\u5efa\u6a6b\u5411\u689d\u5f62\u5716\n      let barHTML = '<div class=\"score-bar\">';\n      ranges.forEach(range => {\n        const width = ((range.max - range.min + 1) \/ 28) * 100;\n        barHTML += `\n          <div class=\"score-segment\" style=\"width: ${width}%; background-color: ${range.color};\">\n            ${range.min}-${range.max}\n          <\/div>\n        `;\n      });\n      barHTML += '<\/div>';\n      \n      \/\/ \u6dfb\u52a0\u5206\u6578\u6a19\u8a18\n      const markerPosition = (score \/ 27) * 100;\n      barHTML += `<div class=\"score-marker\" style=\"left: ${markerPosition}%;\" data-score=\"${score}\u5206\"><\/div>`;\n      \n      this.scoreDistributionEl.innerHTML = barHTML;\n      \n      \/\/ \u5275\u5efa\u5716\u4f8b\n      let legendHTML = '';\n      ranges.forEach(range => {\n        legendHTML += `\n          <div class=\"legend-item\">\n            <div class=\"legend-color\" style=\"background-color: ${range.color};\"><\/div>\n            <span>${range.label} (${range.min}-${range.max}\u5206)<\/span>\n          <\/div>\n        `;\n      });\n      this.scoreLegendEl.innerHTML = legendHTML;\n    }\n    \n    generateAnalysis() {\n      const coreSymptoms = [this.answers[0], this.answers[3]];\n      const suicidalIdeation = this.answers[8];\n      \n      let analysisHTML = '<div class=\"mb-3\">';\n      \n      \/\/ \u6838\u5fc3\u75c7\u72c0\u5206\u6790\n      if (coreSymptoms.some(score => score >= 2)) {\n        analysisHTML += `\n          <div class=\"alert alert-warning border-0 mb-3\">\n            <h6 class=\"fw-bold mb-2\"><i class=\"bi bi-exclamation-triangle me-2\"><\/i>\u6838\u5fc3\u75c7\u72c0\u8b66\u793a<\/h6>\n            <p class=\"mb-0\">\u60a8\u5728\u6182\u9b31\u75c7\u7684\u6838\u5fc3\u75c7\u72c0\uff08\u8208\u8da3\u55aa\u5931\u3001\u75b2\u5026\u611f\uff09\u65b9\u9762\u986f\u793a\u8f03\u9ad8\u5206\u6578\uff0c\u9019\u4e9b\u662f\u9700\u8981\u7279\u5225\u95dc\u6ce8\u7684\u91cd\u8981\u6307\u6a19\u3002<\/p>\n          <\/div>\n        `;\n      }\n      \n      \/\/ \u81ea\u6bba\u610f\u5ff5\u8b66\u793a\n      if (suicidalIdeation > 0) {\n        analysisHTML += `\n          <div class=\"alert alert-danger border-0 mb-3\">\n            <h6 class=\"fw-bold mb-2\"><i class=\"bi bi-exclamation-octagon me-2\"><\/i>\u91cd\u8981\u63d0\u9192<\/h6>\n            <p class=\"mb-0\">\u60a8\u8868\u793a\u6709\u81ea\u6211\u50b7\u5bb3\u7684\u5ff5\u982d\u3002\u8acb\u7acb\u5373\u5c0b\u6c42\u5c08\u696d\u5354\u52a9\uff1a<\/p>\n            <ul class=\"mb-0 mt-2\">\n              <li>(\u81fa\u7063)\u751f\u547d\u7dda\u5354\u8ac7\u5c08\u7dda\uff1a1995<\/li>\n              <li>(\u81fa\u7063)\u5b89\u5fc3\u5c08\u7dda\uff1a1925<\/li>\n              <li>(\u81fa\u7063)\u5f35\u8001\u5e2b\u5c08\u7dda\uff1a1980<\/li>\n\t\t\t  <li>(\u9999\u6e2f)\u6492\u746a\u5229\u4e9e\u6703\uff1a2896 0000<\/li>\n\t\t\t  <li>(\u9999\u6e2f)\u6492\u746a\u5229\u4e9e\u9632\u6b62\u81ea\u6bba\u6703\uff1a2389 2222<\/li>\n\t\t\t  <li>(\u9999\u6e2f)\u751f\u547d\u71b1\u7dda\uff08\u660e\u611b\u5411\u6674\u8ed2\uff09\uff1a2382 0000<\/li>\n\t\t\t  <li>(\u9999\u6e2f)\u9999\u6e2f\u7d05\u5341\u5b57\u6703\u95dc\u61f7\u71b1\u7dda\uff1a5164 5040<\/li>\n            <\/ul>\n          <\/div>\n        `;\n      }\n      \n      \/\/ \u75c7\u72c0\u5206\u985e\u5206\u6790\n      const symptomCategories = {\n        '\u60c5\u7dd2\u75c7\u72c0': [0, 1, 5],\n        '\u8eab\u9ad4\u75c7\u72c0': [2, 3, 4, 7],\n        '\u8a8d\u77e5\u75c7\u72c0': [6, 8]\n      };\n      \n      analysisHTML += '<h6 class=\"fw-bold mb-3\">\u75c7\u72c0\u985e\u5225\u5206\u6790\uff1a<\/h6>';\n      analysisHTML += '<div class=\"row g-3\">';\n      \n      for (const [category, indices] of Object.entries(symptomCategories)) {\n        const categoryScores = indices.map(i => this.answers[i]);\n        const avgScore = (categoryScores.reduce((a, b) => a + b, 0) \/ categoryScores.length).toFixed(1);\n        const maxScore = 3;\n        const percentage = ((avgScore \/ maxScore) * 100).toFixed(0);\n        \n        analysisHTML += `\n          <div class=\"col-md-4\">\n            <div class=\"card border-0 bg-light\">\n              <div class=\"card-body\">\n                <h6 class=\"card-title\">${category}<\/h6>\n                <div class=\"progress mb-2\" style=\"height: 10px;\">\n                  <div class=\"progress-bar bg-primary\" role=\"progressbar\" style=\"width: ${percentage}%\" aria-valuenow=\"${percentage}\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div>\n                <\/div>\n                <small class=\"text-muted\">\u5e73\u5747\u5206\u6578\uff1a${avgScore} \/ 3.0<\/small>\n              <\/div>\n            <\/div>\n          <\/div>\n        `;\n      }\n      \n      analysisHTML += '<\/div><\/div>';\n      \n      this.analysisEl.innerHTML = analysisHTML;\n    }\n    \n    generateRecommendations(totalScore) {\n      let recommendationsHTML = '<div class=\"recommendations\">';\n      \n      \/\/ \u6839\u64da\u7e3d\u5206\u63d0\u4f9b\u4e0d\u540c\u7684\u5efa\u8b70\n      if (totalScore <= 4) {\n        recommendationsHTML += `\n          <div class=\"mb-4\">\n            <h6 class=\"fw-bold mb-3\"><i class=\"bi bi-heart-fill text-success me-2\"><\/i>\u7dad\u6301\u5fc3\u7406\u5065\u5eb7\u5efa\u8b70<\/h6>\n            <ul class=\"list-unstyled\">\n              <li class=\"mb-2\"><i class=\"bi bi-check-circle text-success me-2\"><\/i>\u4fdd\u6301\u898f\u5f8b\u7684\u904b\u52d5\u7fd2\u6163\uff0c\u6bcf\u9031\u81f3\u5c11150\u5206\u9418\u4e2d\u7b49\u5f37\u5ea6\u904b\u52d5<\/li>\n              <li class=\"mb-2\"><i class=\"bi bi-check-circle text-success me-2\"><\/i>\u7dad\u6301\u826f\u597d\u7684\u7761\u7720\u54c1\u8cea\uff0c\u6bcf\u665a7-9\u5c0f\u6642\u7761\u7720<\/li>\n              <li class=\"mb-2\"><i class=\"bi bi-check-circle text-success me-2\"><\/i>\u57f9\u990a\u8208\u8da3\u611b\u597d\uff0c\u8c50\u5bcc\u751f\u6d3b\u5167\u5bb9<\/li>\n              <li class=\"mb-2\"><i class=\"bi bi-check-circle text-success me-2\"><\/i>\u4fdd\u6301\u793e\u4ea4\u9023\u7d50\uff0c\u8207\u89aa\u53cb\u5b9a\u671f\u4e92\u52d5<\/li>\n            <\/ul>\n          <\/div>\n        `;\n      } else if (totalScore <= 9) {\n        recommendationsHTML += `\n          <div class=\"mb-4\">\n            <h6 class=\"fw-bold mb-3\"><i class=\"bi bi-shield-check text-info me-2\"><\/i>\u8f15\u5ea6\u75c7\u72c0\u7ba1\u7406\u5efa\u8b70<\/h6>\n            <ul class=\"list-unstyled\">\n              <li class=\"mb-2\"><i class=\"bi bi-arrow-right-circle text-info me-2\"><\/i>\u5617\u8a66\u6b63\u5ff5\u51a5\u60f3\u6216\u6df1\u547c\u5438\u7df4\u7fd2\uff0c\u6bcf\u592910-15\u5206\u9418<\/li>\n              <li class=\"mb-2\"><i class=\"bi bi-arrow-right-circle text-info me-2\"><\/i>\u5efa\u7acb\u898f\u5f8b\u7684\u65e5\u5e38\u4f5c\u606f\uff0c\u907f\u514d\u71ac\u591c<\/li>\n              <li class=\"mb-2\"><i class=\"bi bi-arrow-right-circle text-info me-2\"><\/i>\u8a18\u9304\u5fc3\u60c5\u65e5\u8a18\uff0c\u89ba\u5bdf\u60c5\u7dd2\u8b8a\u5316<\/li>\n              <li class=\"mb-2\"><i class=\"bi bi-arrow-right-circle text-info me-2\"><\/i>\u8003\u616e\u8aee\u8a62\u5fc3\u7406\u8aee\u5546\u5e2b\uff0c\u53ca\u65e9\u4ecb\u5165<\/li>\n            <\/ul>\n          <\/div>\n        `;\n      } else if (totalScore <= 14) {\n        recommendationsHTML += `\n          <div class=\"mb-4\">\n            <h6 class=\"fw-bold mb-3\"><i class=\"bi bi-exclamation-circle text-warning me-2\"><\/i>\u4e2d\u5ea6\u75c7\u72c0\u8655\u7406\u5efa\u8b70<\/h6>\n            <ul class=\"list-unstyled\">\n              <li class=\"mb-2\"><i class=\"bi bi-arrow-right-circle text-warning me-2\"><\/i>\u5efa\u8b70\u5c0b\u6c42\u5c08\u696d\u5fc3\u7406\u8aee\u5546\u6216\u6cbb\u7642<\/li>\n              <li class=\"mb-2\"><i class=\"bi bi-arrow-right-circle text-warning me-2\"><\/i>\u8207\u4fe1\u4efb\u7684\u89aa\u53cb\u5206\u4eab\u60a8\u7684\u611f\u53d7<\/li>\n              <li class=\"mb-2\"><i class=\"bi bi-arrow-right-circle text-warning me-2\"><\/i>\u907f\u514d\u9152\u7cbe\u548c\u5496\u5561\u56e0\u7b49\u523a\u6fc0\u6027\u7269\u8cea<\/li>\n              <li class=\"mb-2\"><i class=\"bi bi-arrow-right-circle text-warning me-2\"><\/i>\u8003\u616e\u53c3\u52a0\u652f\u6301\u5718\u9ad4\u6216\u7dda\u4e0a\u8cc7\u6e90<\/li>\n              <li class=\"mb-2\"><i class=\"bi bi-arrow-right-circle text-warning me-2\"><\/i>\u5236\u5b9a\u5c0f\u76ee\u6a19\uff0c\u9010\u6b65\u6062\u5fa9\u65e5\u5e38\u6d3b\u52d5<\/li>\n            <\/ul>\n          <\/div>\n        `;\n      } else {\n        recommendationsHTML += `\n          <div class=\"mb-4\">\n            <h6 class=\"fw-bold mb-3\"><i class=\"bi bi-exclamation-triangle text-danger me-2\"><\/i>\u91cd\u5ea6\u75c7\u72c0\u7dca\u6025\u5efa\u8b70<\/h6>\n            <ul class=\"list-unstyled\">\n              <li class=\"mb-2\"><i class=\"bi bi-telephone-fill text-danger me-2\"><\/i><strong>\u7acb\u5373\u5c0b\u6c42\u5c08\u696d\u91ab\u7642\u5354\u52a9<\/strong><\/li>\n              <li class=\"mb-2\"><i class=\"bi bi-arrow-right-circle text-danger me-2\"><\/i>\u806f\u7d61\u7cbe\u795e\u79d1\u91ab\u5e2b\u6216\u5fc3\u7406\u91ab\u5e2b\u8a55\u4f30<\/li>\n              <li class=\"mb-2\"><i class=\"bi bi-arrow-right-circle text-danger me-2\"><\/i>\u8003\u616e\u85e5\u7269\u6cbb\u7642\u914d\u5408\u5fc3\u7406\u6cbb\u7642<\/li>\n              <li class=\"mb-2\"><i class=\"bi bi-arrow-right-circle text-danger me-2\"><\/i>\u5efa\u7acb\u5b89\u5168\u8a08\u756b\uff0c\u78ba\u4fdd\u4eba\u8eab\u5b89\u5168<\/li>\n              <li class=\"mb-2\"><i class=\"bi bi-arrow-right-circle text-danger me-2\"><\/i>\u8acb\u89aa\u53cb\u966a\u4f34\uff0c\u907f\u514d\u7368\u8655<\/li>\n            <\/ul>\n          <\/div>\n        `;\n      }\n      \n      \/\/ \u6839\u64da\u5177\u9ad4\u75c7\u72c0\u63d0\u4f9b\u500b\u6027\u5316\u5efa\u8b70\n      if (this.answers[2] >= 2) { \/\/ \u7761\u7720\u554f\u984c\n        recommendationsHTML += `\n          <div class=\"alert alert-light border-start border-primary border-4 mb-3\">\n            <h6 class=\"fw-bold\"><i class=\"bi bi-moon-stars me-2\"><\/i>\u7761\u7720\u6539\u5584\u5efa\u8b70<\/h6>\n            <p class=\"mb-0\">\u60a8\u6709\u7761\u7720\u56f0\u64fe\u3002\u5efa\u8b70\uff1a\u7761\u524d\u907f\u514d\u4f7f\u7528\u96fb\u5b50\u7522\u54c1\u3001\u4fdd\u6301\u81e5\u5ba4\u6dbc\u723d\u9ed1\u6697\u3001\u5efa\u7acb\u56fa\u5b9a\u7761\u7720\u6642\u9593\u3002<\/p>\n          <\/div>\n        `;\n      }\n      \n      if (this.answers[4] >= 2) { \/\/ \u98df\u617e\u554f\u984c\n        recommendationsHTML += `\n          <div class=\"alert alert-light border-start border-success border-4 mb-3\">\n            <h6 class=\"fw-bold\"><i class=\"bi bi-egg-fried me-2\"><\/i>\u98f2\u98df\u8abf\u6574\u5efa\u8b70<\/h6>\n            <p class=\"mb-0\">\u60a8\u6709\u98df\u617e\u8b8a\u5316\u3002\u5efa\u8b70\uff1a\u5b9a\u6642\u9032\u9910\u3001\u9078\u64c7\u71df\u990a\u5747\u8861\u98df\u7269\u3001\u907f\u514d\u66b4\u98f2\u66b4\u98df\u6216\u7bc0\u98df\u3002<\/p>\n          <\/div>\n        `;\n      }\n      \n      if (this.answers[6] >= 2) { \/\/ \u5c08\u6ce8\u529b\u554f\u984c\n        recommendationsHTML += `\n          <div class=\"alert alert-light border-start border-info border-4 mb-3\">\n            <h6 class=\"fw-bold\"><i class=\"bi bi-bullseye me-2\"><\/i>\u5c08\u6ce8\u529b\u63d0\u5347\u5efa\u8b70<\/h6>\n            <p class=\"mb-0\">\u60a8\u6709\u5c08\u6ce8\u56f0\u96e3\u3002\u5efa\u8b70\uff1a\u5206\u6bb5\u5de5\u4f5c\u3001\u6e1b\u5c11\u5e72\u64fe\u3001\u5617\u8a66\u756a\u8304\u5de5\u4f5c\u6cd5\u3001\u9069\u5ea6\u4f11\u606f\u3002<\/p>\n          <\/div>\n        `;\n      }\n      \n      recommendationsHTML += '<\/div>';\n      \n      this.recommendationsEl.innerHTML = recommendationsHTML;\n    }\n    \n    createCharts() {\n      \/\/ \u92b7\u6bc0\u820a\u5716\u8868\n      if (this.charts.radar) this.charts.radar.destroy();\n      if (this.charts.bar) this.charts.bar.destroy();\n      \n      \/\/ \u96f7\u9054\u5716\n      const radarCtx = document.getElementById('phq9-radar-chart').getContext('2d');\n      this.charts.radar = new Chart(radarCtx, {\n        type: 'radar',\n        data: {\n          labels: this.questions.map((q, i) => `Q${i + 1}`),\n          datasets: [{\n            label: '\u60a8\u7684\u5206\u6578',\n            data: this.answers,\n            backgroundColor: 'rgba(13, 110, 253, 0.2)',\n            borderColor: 'rgba(13, 110, 253, 1)',\n            borderWidth: 2,\n            pointBackgroundColor: 'rgba(13, 110, 253, 1)',\n            pointBorderColor: '#fff',\n            pointHoverBackgroundColor: '#fff',\n            pointHoverBorderColor: 'rgba(13, 110, 253, 1)'\n          }]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: true,\n          plugins: {\n            legend: {\n              display: false\n            },\n            title: {\n              display: true,\n              text: '\u5404\u984c\u76ee\u5f97\u5206\u5206\u5e03',\n              font: {\n                size: 18\n              }\n            }\n          },\n          scales: {\n            r: {\n              beginAtZero: true,\n              max: 3,\n              ticks: {\n                stepSize: 1,\n                font: {\n                  size: 14\n                }\n              },\n              pointLabels: {\n                font: {\n                  size: 14\n                }\n              }\n            }\n          }\n        }\n      });\n      \n      \/\/ \u9577\u689d\u5716\n      const barCtx = document.getElementById('phq9-bar-chart').getContext('2d');\n      this.charts.bar = new Chart(barCtx, {\n        type: 'bar',\n        data: {\n          labels: ['\u5b8c\u5168\u6c92\u6709', '\u6709\u904e\u5e7e\u5929', '\u4e00\u534a\u4ee5\u4e0a\u5929\u6578', '\u5e7e\u4e4e\u6bcf\u5929'],\n          datasets: [{\n            label: '\u9078\u64c7\u6b21\u6578',\n            data: [0, 1, 2, 3].map(val => this.answers.filter(a => a === val).length),\n            backgroundColor: [\n              'rgba(40, 167, 69, 0.7)',\n              'rgba(23, 162, 184, 0.7)',\n              'rgba(255, 193, 7, 0.7)',\n              'rgba(220, 53, 69, 0.7)'\n            ],\n            borderColor: [\n              'rgba(40, 167, 69, 1)',\n              'rgba(23, 162, 184, 1)',\n              'rgba(255, 193, 7, 1)',\n              'rgba(220, 53, 69, 1)'\n            ],\n            borderWidth: 2\n          }]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: true,\n          plugins: {\n            legend: {\n              display: false\n            },\n            title: {\n              display: true,\n              text: '\u7b54\u6848\u5206\u5e03\u7d71\u8a08',\n              font: {\n                size: 18\n              }\n            }\n          },\n          scales: {\n            y: {\n              beginAtZero: true,\n              ticks: {\n                stepSize: 1,\n                font: {\n                  size: 14\n                }\n              }\n            },\n            x: {\n              ticks: {\n                font: {\n                  size: 14\n                }\n              }\n            }\n          }\n        }\n      });\n    }\n    \n    restartQuiz() {\n      this.answers = new Array(9).fill(null);\n      this.currentQuestion = 0;\n      this.showPage('intro');\n      this.scrollToTop();\n    }\n    \n    scrollToTop() {\n      const container = document.getElementById('phq9-container');\n      if (container) {\n        container.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      }\n    }\n  }\n  \n  \/\/ \u521d\u59cb\u5316\u6e2c\u9a57\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', () => new PHQ9Quiz());\n  } else {\n    new PHQ9Quiz();\n  }\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u75c5\u4eba\u5065\u5eb7\u95ee\u5377(Patient Health Questionnaire-9,PHQ-9)\u662f\u4e00\u4e2a\u7b80\u4fbf\u3001\u6709\u6548\u7684\u6291\u90c1\u969c\u788d\u81ea\u8bc4\u91cf\u8868,\u5728\u6291\u90c1\u75c7\u8bca\u65ad\u7684\u8f85\u52a9\u548c\u75c7\u72b6\u4e25\u91cd\u7a0b\u5ea6\u8bc4\u4f30\u65b9\u9762,\u5747\u5177\u6709\u826f\u597d\u7684\u4fe1\u5ea6\u548c\u6548\u5ea6.<\/p>","protected":false},"author":19,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","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":"default","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":[162,169,165],"tags":[182],"class_list":["post-5755","post","type-post","status-publish","format-standard","hentry","category-clinical","category-psychological-symptom-scales","category-neuropsychological","tag-depression"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/5755","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=5755"}],"version-history":[{"count":1,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/5755\/revisions"}],"predecessor-version":[{"id":10253,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/5755\/revisions\/10253"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=5755"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=5755"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=5755"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}