{"id":6003,"date":"2024-02-08T21:44:13","date_gmt":"2024-02-08T13:44:13","guid":{"rendered":"https:\/\/bookmark.tw\/?p=6003"},"modified":"2025-08-03T03:17:47","modified_gmt":"2025-08-02T19:17:47","slug":"sds","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/sds","title":{"rendered":"\u5fe7\u90c1\u81ea\u8bc4\u91cf\u8868\uff08SDS\uff09\u7ebf\u4e0a\u514d\u8d39\u6d4b\u9a8c\uff0820\u9898\uff09"},"content":{"rendered":"<!-- Bootstrap CSS -->\n    <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap\/5.3.3\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n    <!-- Bootstrap Icons -->\n    <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-icons\/1.11.3\/font\/bootstrap-icons.min.css\" rel=\"stylesheet\">\n    <!-- Chart.js -->\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n\n    <!-- \u5f15\u5c0e\u9801 -->\n    <section id=\"quizintro9\" data-page=\"intro9\" class=\"container-fluid d-flex align-items-center justify-content-center py-5\">\n        <div class=\"quiz-container\">\n            <div class=\"row justify-content-center\">\n                <div class=\"col-12\">\n                    <div class=\"text-center mb-5\">\n                        <div class=\"mb-4\">\n                            <div class=\"d-inline-flex align-items-center justify-content-center bg-primary bg-gradient rounded-circle shadow-lg\" style=\"width: 100px; height: 100px;\">\n                                <i class=\"bi bi-heart-pulse-fill text-white\" style=\"font-size: 3rem;\"><\/i>\n                            <\/div>\n                        <\/div>\n                        \n                        <h2 class=\"display-5 fw-bold text-primary mb-3\">\u6182\u9b31\u81ea\u8a55\u91cf\u8868\uff08SDS\uff09<\/h2>\n                        <p class=\"lead text-muted mb-4\">\u5c08\u696d\u5fc3\u7406\u5065\u5eb7\u8a55\u4f30\u5de5\u5177\uff0c\u5e6b\u52a9\u60a8\u4e86\u89e3\u8fd1\u671f\u7684\u60c5\u7dd2\u72c0\u614b<\/p>\n                        \n                        <div class=\"row g-3 mb-5\">\n                            <div class=\"col-md-4\">\n                                <div class=\"card border-0 shadow-sm h-100\">\n                                    <div class=\"card-body text-center p-3\">\n                                        <div class=\"bg-info bg-gradient rounded-circle d-inline-flex align-items-center justify-content-center mb-3\" style=\"width: 50px; height: 50px;\">\n                                            <i class=\"bi bi-clock text-white fs-5\"><\/i>\n                                        <\/div>\n                                        <h6 class=\"card-title text-dark mb-2\">\u5feb\u901f\u4fbf\u6377<\/h6>\n                                        <p class=\"card-text text-muted small mb-0\">\u50c5\u9700 5-10 \u5206\u9418\u5b8c\u6210 20 \u9053\u5c08\u696d\u984c\u76ee<\/p>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                            \n                            <div class=\"col-md-4\">\n                                <div class=\"card border-0 shadow-sm h-100\">\n                                    <div class=\"card-body text-center p-3\">\n                                        <div class=\"bg-success bg-gradient rounded-circle d-inline-flex align-items-center justify-content-center mb-3\" style=\"width: 50px; height: 50px;\">\n                                            <i class=\"bi bi-shield-check text-white fs-5\"><\/i>\n                                        <\/div>\n                                        <h6 class=\"card-title text-dark mb-2\">\u5c08\u696d\u53ef\u9760<\/h6>\n                                        <p class=\"card-text text-muted small mb-0\">\u57fa\u65bc Zung \u535a\u58eb\u958b\u767c\u7684\u570b\u969b\u6a19\u6e96\u91cf\u8868<\/p>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                            \n                            <div class=\"col-md-4\">\n                                <div class=\"card border-0 shadow-sm h-100\">\n                                    <div class=\"card-body text-center p-3\">\n                                        <div class=\"bg-warning bg-gradient rounded-circle d-inline-flex align-items-center justify-content-center mb-3\" style=\"width: 50px; height: 50px;\">\n                                            <i class=\"bi bi-graph-up text-white fs-5\"><\/i>\n                                        <\/div>\n                                        <h6 class=\"card-title text-dark mb-2\">\u5373\u6642\u5206\u6790<\/h6>\n                                        <p class=\"card-text text-muted small mb-0\">\u7acb\u5373\u7372\u5f97\u8a73\u7d30\u7684\u8a55\u4f30\u7d50\u679c\u8207\u5efa\u8b70<\/p>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        \n                        <div class=\"alert alert-info border-0 shadow-sm mb-4\" role=\"alert\">\n                            <div class=\"d-flex align-items-center\">\n                                <i class=\"bi bi-info-circle-fill me-3 fs-4\"><\/i>\n                                <div class=\"text-start\">\n                                    <h6 class=\"alert-heading mb-1\">\u4f7f\u7528\u8aaa\u660e<\/h6>\n                                    <p class=\"mb-0 small\">\u8acb\u6839\u64da\u60a8\u6700\u8fd1\u4e00\u9031\u5167\u7684\u771f\u5be6\u611f\u53d7\u9032\u884c\u4f5c\u7b54\u3002\u6b64\u91cf\u8868\u50c5\u4f9b\u521d\u6b65\u4e86\u89e3\uff0c\u4e0d\u80fd\u53d6\u4ee3\u5c08\u696d\u8a3a\u65b7\u3002<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        \n                        <button type=\"button\" class=\"btn btn-primary btn-lg px-5 py-3 shadow-lg\" data-action=\"start-quiz\">\n                            <i class=\"bi bi-play-circle-fill me-2\"><\/i>\n                            \u5f00\u59cb\u6d4b\u9a8c\n                        <\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- \u6e2c\u9a57\u9801 -->\n    <section id=\"quizmain9\" data-page=\"quiz9\" class=\"container-fluid py-5 d-none\">\n        <div class=\"quiz-container\">\n            <div class=\"row justify-content-center\">\n                <div class=\"col-12\">\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=\"small text-muted\">\u9032\u5ea6<\/span>\n                            <span class=\"small fw-bold\" data-element=\"progress-text\">1 \/ 20<\/span>\n                        <\/div>\n                        <div class=\"progress\" style=\"height: 8px;\">\n                            <div class=\"progress-bar bg-primary\" role=\"progressbar\" data-element=\"progress-bar\" style=\"width: 5%;\" aria-valuenow=\"5\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- \u984c\u76ee\u5361\u7247 -->\n                    <div class=\"card border-0 shadow-sm mb-4\">\n                        <div class=\"card-body p-4 p-md-5\">\n                            <h3 class=\"fw-bold mb-4\" style=\"font-size: 22px; line-height: 1.4;\" data-element=\"question-text\"><\/h3>\n                            \n                            <div class=\"row g-3\" data-element=\"options-container\"><\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- \u63a7\u5236\u6309\u9215 -->\n                    <div class=\"text-center\">\n                        <button type=\"button\" class=\"btn btn-outline-secondary\" data-action=\"prev-question\" style=\"display: none;\">\n                            <i class=\"bi bi-arrow-left me-2\"><\/i>\u4e0a\u4e00\u9898\n                        <\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- \u7d50\u679c\u9801 -->\n    <section id=\"quizresult9\" data-page=\"result9\" class=\"container-fluid py-5 d-none\">\n        <div class=\"quiz-container\">\n            <div class=\"row justify-content-center\">\n                <div class=\"col-12\">\n                    <div class=\"text-center mb-5\">\n                        <div class=\"mb-3\">\n                            <div class=\"d-inline-flex align-items-center justify-content-center rounded-circle shadow-lg\" style=\"width: 80px; height: 80px;\" data-element=\"result-icon\">\n                                <i class=\"bi bi-check-circle-fill text-white\" style=\"font-size: 2.5rem;\"><\/i>\n                            <\/div>\n                        <\/div>\n                        \n                        <h2 class=\"h3 fw-bold mb-3\">\u6d4b\u9a8c\u7ed3\u679c<\/h2>\n                        <p class=\"lead text-muted\">\u57fa\u65bc\u60a8\u7684\u7b54\u6848\u5206\u6790<\/p>\n                    <\/div>\n\n                    <!-- \u7d50\u679c\u5361\u7247 -->\n                    <div class=\"row g-3 mb-4\">\n                        <div class=\"col-md-6\">\n                            <div class=\"card border-0 shadow-sm h-100\">\n                                <div class=\"card-body p-3 text-center\">\n                                    <h5 class=\"card-title text-primary mb-3\">\u7e3d\u5206\u6578<\/h5>\n                                    <div class=\"display-5 fw-bold text-dark mb-2\" data-element=\"total-score\">0<\/div>\n                                    <p class=\"card-text small\" data-element=\"score-description\">\u8a55\u4f30\u4e2d&#8230;<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        \n                        <div class=\"col-md-6\">\n                            <div class=\"card border-0 shadow-sm h-100\">\n                                <div class=\"card-body p-3 text-center\">\n                                    <h5 class=\"card-title text-primary mb-3\">\u8bc4\u4f30\u7ed3\u679c<\/h5>\n                                    <div class=\"h4 fw-bold mb-2\" data-element=\"result-level\">\u5206\u6790\u4e2d&#8230;<\/div>\n                                    <p class=\"card-text small text-muted\" data-element=\"result-subtitle\">\u8acb\u7a0d\u5019&#8230;<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- \u6578\u64da\u53ef\u8996\u5316 -->\n                    <div class=\"card border-0 shadow-sm mb-4\">\n                        <div class=\"card-body p-3\">\n                            <h5 class=\"card-title text-center mb-3\">\u5206\u6790\u5716\u8868<\/h5>\n                            <div class=\"d-flex justify-content-center\">\n                                <div style=\"width: 100%; height: 200px;\">\n                                    <canvas id=\"resultChart\" width=\"100%\" height=\"200\"><\/canvas>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- \u8a73\u7d30\u5206\u6790 -->\n                    <div class=\"card border-0 shadow-sm mb-4\">\n                        <div class=\"card-body p-3\">\n                            <h5 class=\"card-title mb-3\">\n                                <i class=\"bi bi-clipboard-data me-2 text-primary\"><\/i>\n                                \u8be6\u7ec6\u5206\u6790\n                            <\/h5>\n                            <div data-element=\"detailed-analysis\">\n                                <p class=\"text-muted\">\u6b63\u5728\u5206\u6790\u60a8\u7684\u7b54\u6848&#8230;<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- \u91cd\u8981\u63d0\u9192 -->\n                    <div class=\"alert alert-warning border-0 shadow-sm mb-3\" role=\"alert\">\n                        <div class=\"d-flex align-items-start\">\n                            <i class=\"bi bi-exclamation-triangle-fill me-3 mt-1 fs-4\"><\/i>\n                            <div>\n                                <h6 class=\"alert-heading mb-2\">\u91cd\u8981\u63d0\u9192<\/h6>\n                                <p class=\"mb-2 small\">\u6b64\u91cf\u8868\u50c5\u4f9b\u521d\u6b65\u81ea\u6211\u4e86\u89e3\u8207\u5fc3\u7406\u72c0\u614b\u7be9\u6aa2\uff0c\u4e0d\u80fd\u53d6\u4ee3\u5c08\u696d\u5fc3\u7406\u8a3a\u65b7\u3002<\/p>\n                                <p class=\"mb-0 small\">\u82e5\u60a8\u7e3d\u5206\u504f\u9ad8\u6216\u6709\u9577\u671f\u60c5\u7dd2\u56f0\u64fe\uff0c\u5efa\u8b70\u5118\u65e9\u8207\u5fc3\u7406\u5e2b\u6216\u7cbe\u795e\u79d1\u91ab\u5e2b\u8a0e\u8ad6\u3002<\/p>\n                                <hr class=\"my-2\">\n                                <p class=\"mb-0 small\">\n                                    <strong>\u53f0\u7063\u5730\u5340\u8aee\u8a62\u8cc7\u6e90\uff1a<\/strong><br>\n                                    \u2022 1925\uff08\u5b89\u5fc3\u5c08\u7dda\uff0c24\u5c0f\u6642\u514d\u8cbb\uff09<br>\n                                    \u2022 \u5404\u7e23\u5e02\u5fc3\u7406\u885b\u751f\u4e2d\u5fc3\u3001\u91ab\u9662\u5fc3\u7406\u8aee\u5546\u9580\u8a3a\n                                <\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- \u91cd\u65b0\u6e2c\u8a66\u6309\u9215 -->\n                    <div class=\"text-center\">\n                        <button type=\"button\" class=\"btn btn-primary btn-lg px-5 py-3 shadow-lg\" data-action=\"restart-quiz\">\n                            <i class=\"bi bi-arrow-clockwise me-2\"><\/i>\n                            \u91cd\u65b0\u6d4b\u9a8c\n                        <\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <style>\n        \/* \u81ea\u5b9a\u7fa9\u6a23\u5f0f *\/\n        .quiz-container {\n            max-width: 100% !important;\n            width: 100% !important;\n            padding-left: 20px;\n            padding-right: 20px;\n            margin: 0 auto;\n        }\n        \n        \/* \u9ed8\u8ba4\u684c\u9762\u7aef\u6837\u5f0f *\/\n        .option-text {\n            font-size: 18px;\n        }\n        \n        .option-indicator {\n            width: 24px;\n            height: 24px;\n        }\n        \n        .card-body {\n            padding: 1rem !important;\n        }\n        \n        .option-card {\n            transition: all 0.3s ease;\n            border: 2px solid #e9ecef;\n            cursor: pointer;\n            min-height: 60px;\n        }\n        \n        .option-card:hover {\n            border-color: #0d6efd;\n            background: #f8f9ff;\n            transform: translateY(-2px);\n            box-shadow: 0 4px 15px rgba(13, 110, 253, 0.2);\n        }\n        \n        .option-card.selected {\n            border-color: #0d6efd;\n            background: #e7f3ff;\n            box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);\n        }\n        \n        .option-indicator {\n            width: 24px;\n            height: 24px;\n            border: 2px solid #dee2e6;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-shrink: 0;\n            transition: all 0.3s ease;\n            background: #ffffff;\n        }\n        \n        .option-card:hover .option-indicator {\n            border-color: #0d6efd;\n        }\n        \n        .option-card.selected .option-indicator {\n            border-color: #0d6efd;\n            background: #0d6efd;\n            color: #ffffff;\n        }\n        \n        .option-text {\n            font-size: 18px;\n            color: #495057;\n            line-height: 1.4;\n            margin: 0;\n        }\n        \n        .option-card:hover .option-text {\n            color: #0d6efd;\n        }\n        \n        .option-card.selected .option-text {\n            color: #0d6efd;\n            font-weight: 500;\n        }\n        \n        .card {\n            transition: all 0.3s ease;\n        }\n        \n        .card:hover {\n            transform: translateY(-2px);\n        }\n        \n        .btn {\n            transition: all 0.3s ease;\n        }\n        \n        .btn:hover {\n            transform: translateY(-2px);\n        }\n        \n        @media (min-width: 768px) {\n            .quiz-container {\n                padding-left: 30px;\n                padding-right: 30px;\n            }\n            \n            .option-text {\n                font-size: 18px;\n            }\n            \n            .option-indicator {\n                width: 24px;\n                height: 24px;\n            }\n            \n            .card-body {\n                padding: 1.25rem !important;\n            }\n            \n            .display-5 {\n                font-size: 2.5rem;\n            }\n            \n            .h3 {\n                font-size: 2rem;\n            }\n        }\n        \n        @media (min-width: 992px) {\n            .quiz-container {\n                padding-left: 40px;\n                padding-right: 40px;\n            }\n            \n            .card-body {\n                padding: 1.5rem !important;\n            }\n            \n            .py-5 {\n                padding-top: 3rem !important;\n                padding-bottom: 3rem !important;\n            }\n        }\n        \n        @media (max-width: 767px) {\n            .display-4 {\n                font-size: 2.5rem;\n            }\n            \n            .display-5 {\n                font-size: 2rem;\n            }\n            \n            .option-card {\n                min-height: 50px;\n            }\n            \n            .option-text {\n                font-size: 16px;\n            }\n            \n            .option-indicator {\n                width: 20px;\n                height: 20px;\n            }\n            \n            .card-body {\n                padding: 0.75rem !important;\n            }\n            \n            .quiz-container {\n                padding-left: 10px;\n                padding-right: 10px;\n            }\n            \n            .py-5 {\n                padding-top: 2rem !important;\n                padding-bottom: 2rem !important;\n            }\n        }\n        \n        @media (max-width: 575px) {\n            .quiz-container {\n                padding-left: 8px;\n                padding-right: 8px;\n            }\n            \n            .display-4 {\n                font-size: 2rem;\n            }\n            \n            .display-5 {\n                font-size: 1.75rem;\n            }\n        }\n        \n        \/* \u78ba\u4fdd\u9801\u9762\u5207\u63db\u6642\u5e73\u6ed1\u904e\u6e21 *\/\n        .section-transition {\n            opacity: 0;\n            transform: translateY(20px);\n            transition: all 0.5s ease;\n        }\n        \n        .section-transition.active {\n            opacity: 1;\n            transform: translateY(0);\n        }\n        \n        \/* \u78ba\u4fdd\u96b1\u85cf\u7684\u9801\u9762\u5b8c\u5168\u4e0d\u53ef\u898b *\/\n        .d-none {\n            display: none !important;\n        }\n        \n        #quizintro9.d-none,\n        #quizmain9.d-none,\n        #quizresult9.d-none {\n            display: none !important;\n            visibility: hidden !important;\n            position: absolute !important;\n            left: -9999px !important;\n        }\n        \n        \/* Chart.js \u5bb9\u5668\u6a23\u5f0f *\/\n        #resultChart {\n            max-width: 100%;\n            height: auto !important;\n        }\n    <\/style>\n\n    <script>\n        (() => {\n            'use strict';\n            \n            \/\/ \u6e2c\u9a57\u6578\u64da\n            const QUIZ_DATA = {\n                questions: [\n                    { text: \"\u6211\u89ba\u5f97\u60c5\u7dd2\u4f4e\u843d\u3001\u63d0\u4e0d\u8d77\u52c1\u3002\", scores: [1.25, 2.5, 3.75, 5] },\n                    { text: \"\u6211\u89ba\u5f97\u65e9\u4e0a\u8d77\u4f86\u6642\u5fc3\u60c5\u6700\u597d\u3002\", scores: [5, 3.75, 2.5, 1.25] },\n                    { text: \"\u6211\u6703\u7a81\u7136\u60f3\u54ed\uff0c\u6216\u5fcd\u4e0d\u4f4f\u60f3\u54ed\u3002\", scores: [1.25, 2.5, 3.75, 5] },\n                    { text: \"\u6211\u665a\u4e0a\u7d93\u5e38\u96e3\u4ee5\u5165\u7761\uff0c\u7761\u4e0d\u597d\u3002\", scores: [1.25, 2.5, 3.75, 5] },\n                    { text: \"\u6211\u7684\u98df\u617e\u548c\u4ee5\u5f80\u5dee\u4e0d\u591a\uff0c\u6c92\u6709\u6539\u8b8a\u3002\", scores: [5, 3.75, 2.5, 1.25] },\n                    { text: \"\u6211\u8207\u7570\u6027\u4e92\u52d5\u6642\uff0c\u4ecd\u7136\u611f\u5230\u6109\u5feb\u3002\", scores: [5, 3.75, 2.5, 1.25] },\n                    { text: \"\u6211\u767c\u73fe\u9ad4\u91cd\u6709\u8b8a\u8f15\u7684\u60c5\u6cc1\u3002\", scores: [1, 2, 3, 4] },\n                    { text: \"\u6211\u6709\u4fbf\u79d8\u7684\u56f0\u64fe\u3002\", scores: [1, 2, 3, 4] },\n                    { text: \"\u6211\u611f\u89ba\u5fc3\u8df3\u6bd4\u5e73\u5e38\u5feb\u3002\", scores: [1, 2, 3, 4] },\n                    { text: \"\u6211\u5e38\u5e38\u89ba\u5f97\u75b2\u5026\uff0c\u6c92\u6709\u4f86\u7531\u5730\u7d2f\u3002\", scores: [1, 2, 3, 4] },\n                    { text: \"\u6211\u7684\u601d\u7dd2\u548c\u4ee5\u5f80\u4e00\u6a23\u6e05\u6670\u3002\", scores: [5, 3.75, 2.5, 1.25] },\n                    { text: \"\u6211\u89ba\u5f97\u505a\u5e73\u5e38\u7684\u4e8b\u6c92\u6709\u4ec0\u9ebc\u56f0\u96e3\u3002\", scores: [5, 3.75, 2.5, 1.25] },\n                    { text: \"\u6211\u611f\u5230\u7126\u8e81\u4e0d\u5b89\uff0c\u96e3\u4ee5\u975c\u4e0b\u5fc3\u4f86\u3002\", scores: [1, 2, 3, 4] },\n                    { text: \"\u6211\u5c0d\u672a\u4f86\u4ecd\u62b1\u6301\u5e0c\u671b\u3002\", scores: [5, 3.75, 2.5, 1.25] },\n                    { text: \"\u6211\u6bd4\u5e73\u5e38\u5bb9\u6613\u6fc0\u52d5\u6216\u60c5\u7dd2\u8d77\u4f0f\u8f03\u5927\u3002\", scores: [1, 2, 3, 4] },\n                    { text: \"\u6211\u89ba\u5f97\u505a\u6c7a\u5b9a\u9084\u7b97\u5bb9\u6613\u3002\", scores: [5, 3.75, 2.5, 1.25] },\n                    { text: \"\u6211\u89ba\u5f97\u81ea\u5df1\u662f\u6709\u50f9\u503c\u7684\u4eba\uff0c\u5c0d\u5225\u4eba\u6709\u5e6b\u52a9\u3002\", scores: [5, 3.75, 2.5, 1.25] },\n                    { text: \"\u6211\u89ba\u5f97\u6bcf\u5929\u751f\u6d3b\u6709\u610f\u7fa9\uff0c\u6709\u4e8b\u60c5\u8b93\u6211\u671f\u5f85\u3002\", scores: [5, 3.75, 2.5, 1.25] },\n                    { text: \"\u6211\u89ba\u5f97\u5982\u679c\u6211\u4e0d\u5728\u4e86\uff0c\u5225\u4eba\u7684\u751f\u6d3b\u53ef\u80fd\u6703\u8b8a\u5f97\u66f4\u597d\u3002\", scores: [1, 2, 3, 4] },\n                    { text: \"\u6211\u5c0d\u5e73\u5e38\u6709\u8208\u8da3\u7684\u4e8b\u7269\uff0c\u4f9d\u7136\u4fdd\u6301\u8208\u8da3\u3002\", scores: [5, 3.75, 2.5, 1.25] }\n                ],\n                options: [\n                    \"\u6c92\u6709\u6216\u5f88\u5c11\u6642\u9593\uff081\u5929\u4ee5\u5167\uff09\",\n                    \"\u5c0f\u90e8\u5206\u6642\u9593\uff081\uff5e2\u5929\uff09\", \n                    \"\u76f8\u7576\u591a\u6642\u9593\uff083\uff5e4\u5929\uff09\",\n                    \"\u7d55\u5927\u90e8\u5206\u6216\u5168\u90e8\u6642\u9593\uff085\uff5e7\u5929\uff09\"\n                ]\n            };\n\n            class DepressionQuiz {\n                constructor() {\n                    this.currentQuestion = 0;\n                    this.answers = [];\n                    this.chart = null;\n                    \n                    \/\/ \u7de9\u5b58DOM\u5143\u7d20\n                    this.elements = {\n                        intro: document.getElementById('quizintro9'),\n                        quiz: document.getElementById('quizmain9'),\n                        result: document.getElementById('quizresult9'),\n                        progressBar: document.querySelector('[data-element=\"progress-bar\"]'),\n                        progressText: document.querySelector('[data-element=\"progress-text\"]'),\n                        questionText: document.querySelector('[data-element=\"question-text\"]'),\n                        optionsContainer: document.querySelector('[data-element=\"options-container\"]'),\n                        prevBtn: document.querySelector('[data-action=\"prev-question\"]'),\n                        totalScore: document.querySelector('[data-element=\"total-score\"]'),\n                        scoreDescription: document.querySelector('[data-element=\"score-description\"]'),\n                        resultLevel: document.querySelector('[data-element=\"result-level\"]'),\n                        resultSubtitle: document.querySelector('[data-element=\"result-subtitle\"]'),\n                        resultIcon: document.querySelector('[data-element=\"result-icon\"]'),\n                        detailedAnalysis: document.querySelector('[data-element=\"detailed-analysis\"]')\n                    };\n                    \n                    this.init();\n                }\n\n                init() {\n                    this.bindEvents();\n                    this.initializePages();\n                }\n\n                initializePages() {\n                    \/\/ \u786e\u4fdd\u521d\u59cb\u72b6\u6001\u53ea\u663e\u793a\u5f15\u5bfc\u9875\n                    this.elements.quiz.classList.add('d-none');\n                    this.elements.result.classList.add('d-none');\n                    this.elements.intro.classList.remove('d-none');\n                    \n                    \/\/ \u5f3a\u5236\u8bbe\u7f6edisplay\u6837\u5f0f\n                    this.elements.quiz.style.display = 'none';\n                    this.elements.result.style.display = 'none';\n                    this.elements.intro.style.display = 'block';\n                }\n\n                bindEvents() {\n                    \/\/ \u4f7f\u7528\u4e8b\u4ef6\u59d4\u6258\n                    document.addEventListener('click', this.handleClick.bind(this));\n                    document.addEventListener('keydown', this.handleKeydown.bind(this));\n                }\n\n                handleClick(e) {\n                    const action = e.target.closest('[data-action]')?.dataset.action;\n                    const option = e.target.closest('[data-option]');\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 (option) {\n                        this.selectOption(parseInt(option.dataset.option));\n                    }\n                }\n\n                handleKeydown(e) {\n                    if (e.key === 'Enter' || e.key === ' ') {\n                        const option = e.target.closest('[data-option]');\n                        if (option) {\n                            e.preventDefault();\n                            this.selectOption(parseInt(option.dataset.option));\n                        }\n                    }\n                }\n\n                startQuiz() {\n                    \/\/ \u91cd\u7f6e\u6d4b\u9a8c\u72b6\u6001\n                    this.currentQuestion = 0;\n                    this.answers = [];\n                    \n                    \/\/ \u663e\u793a\u6d4b\u9a8c\u9875\n                    this.showSection('quiz');\n                    \n                    \/\/ \u6e32\u67d3\u7b2c\u4e00\u4e2a\u95ee\u9898\n                    this.renderQuestion();\n                    \n                    \/\/ \u6eda\u52a8\u5230\u9876\u90e8\n                    this.scrollToTop();\n                }\n\n                renderQuestion() {\n                    const question = QUIZ_DATA.questions[this.currentQuestion];\n                    \n                    \/\/ \u66f4\u65b0\u9032\u5ea6\n                    const progress = ((this.currentQuestion + 1) \/ QUIZ_DATA.questions.length) * 100;\n                    this.elements.progressBar.style.width = `${progress}%`;\n                    this.elements.progressBar.setAttribute('aria-valuenow', progress);\n                    this.elements.progressText.textContent = `${this.currentQuestion + 1} \/ ${QUIZ_DATA.questions.length}`;\n                    \n                    \/\/ \u66f4\u65b0\u984c\u76ee\n                    this.elements.questionText.textContent = question.text;\n                    \n                    \/\/ \u6e32\u67d3\u9078\u9805\n                    this.elements.optionsContainer.innerHTML = '';\n                    QUIZ_DATA.options.forEach((optionText, index) => {\n                        const col = document.createElement('div');\n                        col.className = 'col-12 mb-3';\n                        \n                        const card = document.createElement('div');\n                        card.className = 'card option-card';\n                        card.dataset.option = index;\n                        card.setAttribute('role', 'button');\n                        card.setAttribute('tabindex', '0');\n                        card.setAttribute('aria-label', `\u9078\u9805 ${index + 1}: ${optionText}`);\n                        \n                        card.innerHTML = `\n                            <div class=\"card-body d-flex align-items-center p-3 p-md-4\">\n                                <div class=\"option-indicator me-3\">\n                                    <i class=\"bi bi-check\" style=\"font-size: 14px; display: none;\"><\/i>\n                                <\/div>\n                                <p class=\"option-text mb-0\">${optionText}<\/p>\n                            <\/div>\n                        `;\n                        \n                        col.appendChild(card);\n                        this.elements.optionsContainer.appendChild(col);\n                    });\n                    \n                    \/\/ \u66f4\u65b0\u4e0a\u4e00\u984c\u6309\u9215\u986f\u793a\u72c0\u614b\n                    this.elements.prevBtn.style.display = this.currentQuestion > 0 ? 'inline-block' : 'none';\n                }\n\n                selectOption(optionIndex) {\n                    \/\/ \u8a18\u9304\u7b54\u6848\n                    this.answers[this.currentQuestion] = optionIndex;\n                    \n                    \/\/ \u66f4\u65b0\u9078\u9805\u8996\u89ba\u72c0\u614b\n                    const cards = this.elements.optionsContainer.querySelectorAll('.option-card');\n                    cards.forEach((card, index) => {\n                        const isSelected = index === optionIndex;\n                        card.classList.toggle('selected', isSelected);\n                        \n                        const checkIcon = card.querySelector('.bi-check');\n                        if (checkIcon) {\n                            checkIcon.style.display = isSelected ? 'block' : 'none';\n                        }\n                    });\n                    \n                    \/\/ \u5ef6\u9072\u9032\u5165\u4e0b\u4e00\u984c\uff0c\u8b93\u7528\u6236\u770b\u5230\u9078\u4e2d\u6548\u679c\n                    setTimeout(() => {\n                        if (this.currentQuestion < QUIZ_DATA.questions.length - 1) {\n                            this.nextQuestion();\n                        } else {\n                            this.showResults();\n                        }\n                    }, 500);\n                }\n\n                nextQuestion() {\n                    this.currentQuestion++;\n                    this.renderQuestion();\n                    this.scrollToTop();\n                }\n\n                previousQuestion() {\n                    if (this.currentQuestion > 0) {\n                        this.currentQuestion--;\n                        this.renderQuestion();\n                        this.scrollToTop();\n                    }\n                }\n\n                showResults() {\n                    const totalScore = this.calculateScore();\n                    const result = this.getResult(totalScore);\n                    \n                    this.elements.totalScore.textContent = totalScore.toFixed(1);\n                    this.elements.scoreDescription.textContent = result.description;\n                    this.elements.resultLevel.textContent = result.level;\n                    this.elements.resultSubtitle.textContent = result.subtitle;\n                    \n                    \/\/ \u66f4\u65b0\u7d50\u679c\u5716\u6a19\n                    const iconContainer = this.elements.resultIcon;\n                    iconContainer.className = `d-inline-flex align-items-center justify-content-center rounded-circle shadow-lg ${result.bgClass}`;\n                    iconContainer.innerHTML = `<i class=\"${result.icon} text-white\" style=\"font-size: 2.5rem;\"><\/i>`;\n                    \n                    \/\/ \u5275\u5efa\u8a73\u7d30\u5206\u6790\n                    this.elements.detailedAnalysis.innerHTML = this.generateDetailedAnalysis(totalScore, result);\n                    \n                    this.showSection('result');\n                    this.createChart(totalScore, result);\n                    this.scrollToTop();\n                }\n\n                calculateScore() {\n                    let total = 0;\n                    this.answers.forEach((answerIndex, questionIndex) => {\n                        total += QUIZ_DATA.questions[questionIndex].scores[answerIndex];\n                    });\n                    return total;\n                }\n\n                getResult(score) {\n                    if (score <= 52) {\n                        return {\n                            level: '\u6b63\u5e38\u7bc4\u570d',\n                            description: '\u5fc3\u7406\u72c0\u614b\u826f\u597d',\n                            subtitle: '\u60a8\u7684\u60c5\u7dd2\u72c0\u614b\u5728\u6b63\u5e38\u7bc4\u570d\u5167',\n                            bgClass: 'bg-success bg-gradient',\n                            icon: 'bi bi-check-circle-fill',\n                            color: '#198754',\n                            advice: '\u60a8\u76ee\u524d\u7684\u5fc3\u7406\u72c0\u614b\u5f88\u5065\u5eb7\u3002\u5efa\u8b70\u7e7c\u7e8c\u4fdd\u6301\u826f\u597d\u7684\u751f\u6d3b\u7fd2\u6163\uff0c\u9069\u5ea6\u904b\u52d5\uff0c\u7dad\u6301\u793e\u4ea4\u9023\u7d50\uff0c\u4e26\u6ce8\u610f\u5de5\u4f5c\u8207\u751f\u6d3b\u7684\u5e73\u8861\u3002'\n                        };\n                    } else if (score <= 62) {\n                        return {\n                            level: '\u8f15\u5ea6\u6182\u9b31\u50be\u5411',\n                            description: '\u9700\u8981\u95dc\u6ce8\u60c5\u7dd2\u8b8a\u5316',\n                            subtitle: '\u5efa\u8b70\u591a\u95dc\u6ce8\u81ea\u5df1\u7684\u60c5\u7dd2\u72c0\u614b',\n                            bgClass: 'bg-warning bg-gradient',\n                            icon: 'bi bi-exclamation-triangle-fill',\n                            color: '#ffc107',\n                            advice: '\u60a8\u53ef\u80fd\u6709\u8f15\u5ea6\u7684\u6182\u9b31\u50be\u5411\u3002\u5efa\u8b70\u589e\u52a0\u6236\u5916\u6d3b\u52d5\uff0c\u8207\u89aa\u53cb\u591a\u4ea4\u6d41\uff0c\u4fdd\u6301\u898f\u5f8b\u4f5c\u606f\u3002\u5982\u679c\u60c5\u7dd2\u6301\u7e8c\u4f4e\u843d\uff0c\u5efa\u8b70\u5c0b\u6c42\u5c08\u696d\u5354\u52a9\u3002'\n                        };\n                    } else if (score <= 72) {\n                        return {\n                            level: '\u4e2d\u5ea6\u6182\u9b31\u50be\u5411',\n                            description: '\u5efa\u8b70\u5c0b\u6c42\u5c08\u696d\u5354\u52a9',\n                            subtitle: '\u60a8\u7684\u60c5\u7dd2\u72c0\u614b\u9700\u8981\u66f4\u591a\u95dc\u6ce8',\n                            bgClass: 'bg-danger bg-gradient',\n                            icon: 'bi bi-heart-pulse-fill',\n                            color: '#dc3545',\n                            advice: '\u60a8\u986f\u793a\u51fa\u4e2d\u5ea6\u6182\u9b31\u50be\u5411\u3002\u5f37\u70c8\u5efa\u8b70\u60a8\u4e3b\u52d5\u5c0b\u6c42\u5fc3\u7406\u5e2b\u6216\u7cbe\u795e\u79d1\u91ab\u5e2b\u7684\u5c08\u696d\u5354\u52a9\uff0c\u5236\u5b9a\u9069\u5408\u7684\u6cbb\u7642\u8a08\u5283\u3002\u540c\u6642\uff0c\u4fdd\u6301\u8207\u5bb6\u4eba\u670b\u53cb\u7684\u806f\u7e6b\u5f88\u91cd\u8981\u3002'\n                        };\n                    } else {\n                        return {\n                            level: '\u91cd\u5ea6\u6182\u9b31\u50be\u5411',\n                            description: '\u8acb\u7acb\u5373\u5c0b\u6c42\u5c08\u696d\u5354\u52a9',\n                            subtitle: '\u60a8\u7684\u60c5\u7dd2\u72c0\u614b\u9700\u8981\u7dca\u6025\u95dc\u6ce8',\n                            bgClass: 'bg-dark bg-gradient',\n                            icon: 'bi bi-exclamation-octagon-fill',\n                            color: '#6f42c1',\n                            advice: '\u60a8\u986f\u793a\u51fa\u91cd\u5ea6\u6182\u9b31\u50be\u5411\u3002\u8acb\u7acb\u5373\u806f\u7e6b\u5fc3\u7406\u5065\u5eb7\u5c08\u696d\u4eba\u54e1\u6216\u64a5\u6253 1925 \u5b89\u5fc3\u5c08\u7dda\u3002\u8a18\u4f4f\uff0c\u5c0b\u6c42\u5e6b\u52a9\u662f\u52c7\u6562\u7684\u8868\u73fe\uff0c\u60a8\u4e26\u4e0d\u5b64\u55ae\u3002'\n                        };\n                    }\n                }\n\n                generateDetailedAnalysis(totalScore, result) {\n                    const analysisData = this.analyzeAnswers();\n                    \n                    return `\n                        <div class=\"row g-4\">\n                            <div class=\"col-md-6\">\n                                <h6 class=\"fw-bold mb-3\">\u8a55\u4f30\u5efa\u8b70<\/h6>\n                                <p class=\"text-muted mb-3\">${result.advice}<\/p>\n                                \n                                <h6 class=\"fw-bold mb-3\">\u7b54\u984c\u5206\u5e03<\/h6>\n                                <div class=\"small\">\n                                    <div class=\"d-flex justify-content-between mb-2\">\n                                        <span>\u6b63\u5411\u56de\u7b54<\/span>\n                                        <span class=\"badge bg-success\">${analysisData.positive}\u984c<\/span>\n                                    <\/div>\n                                    <div class=\"d-flex justify-content-between mb-2\">\n                                        <span>\u4e2d\u6027\u56de\u7b54<\/span>\n                                        <span class=\"badge bg-warning\">${analysisData.neutral}\u984c<\/span>\n                                    <\/div>\n                                    <div class=\"d-flex justify-content-between\">\n                                        <span>\u8ca0\u5411\u56de\u7b54<\/span>\n                                        <span class=\"badge bg-danger\">${analysisData.negative}\u984c<\/span>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                            \n                            <div class=\"col-md-6\">\n                                <h6 class=\"fw-bold mb-3\">\u95dc\u6ce8\u9818\u57df<\/h6>\n                                <div class=\"small\">\n                                    ${this.getHighConcernAreas().map(area => \n                                        `<div class=\"d-flex align-items-center mb-2\">\n                                            <i class=\"bi bi-dot text-primary me-2\"><\/i>\n                                            <span>${area}<\/span>\n                                        <\/div>`\n                                    ).join('')}\n                                <\/div>\n                                \n                                <h6 class=\"fw-bold mb-3 mt-4\">\u5efa\u8b70\u8cc7\u6e90<\/h6>\n                                <div class=\"small\">\n                                    <div class=\"d-flex align-items-center mb-2\">\n                                        <i class=\"bi bi-telephone text-primary me-2\"><\/i>\n                                        <span>1925 \u5b89\u5fc3\u5c08\u7dda\uff0824\u5c0f\u6642\uff09<\/span>\n                                    <\/div>\n                                    <div class=\"d-flex align-items-center mb-2\">\n                                        <i class=\"bi bi-hospital text-primary me-2\"><\/i>\n                                        <span>\u5404\u7e23\u5e02\u5fc3\u7406\u885b\u751f\u4e2d\u5fc3<\/span>\n                                    <\/div>\n                                    <div class=\"d-flex align-items-center\">\n                                        <i class=\"bi bi-person-heart text-primary me-2\"><\/i>\n                                        <span>\u91ab\u9662\u5fc3\u7406\u8aee\u5546\u9580\u8a3a<\/span>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    `;\n                }\n\n                analyzeAnswers() {\n                    let positive = 0, neutral = 0, negative = 0;\n                    \n                    this.answers.forEach((answer, index) => {\n                        const score = QUIZ_DATA.questions[index].scores[answer];\n                        if (score <= 2) positive++;\n                        else if (score <= 3.5) neutral++;\n                        else negative++;\n                    });\n                    \n                    return { positive, neutral, negative };\n                }\n\n                getHighConcernAreas() {\n                    const areas = [];\n                    \n                    \/\/ \u6aa2\u67e5\u9ad8\u5206\u984c\u76ee\uff08\u53ef\u80fd\u7684\u554f\u984c\u9818\u57df\uff09\n                    this.answers.forEach((answer, index) => {\n                        const score = QUIZ_DATA.questions[index].scores[answer];\n                        if (score >= 4) {\n                            if (index === 0) areas.push('\u60c5\u7dd2\u72c0\u614b');\n                            if (index === 2) areas.push('\u60c5\u7dd2\u63a7\u5236');\n                            if (index === 3) areas.push('\u7761\u7720\u54c1\u8cea');\n                            if (index === 6 || index === 4) areas.push('\u8eab\u9ad4\u72c0\u6cc1');\n                            if (index === 12) areas.push('\u7126\u616e\u611f\u53d7');\n                            if (index === 18) areas.push('\u81ea\u6211\u50f9\u503c\u611f');\n                        }\n                    });\n                    \n                    \/\/ \u79fb\u9664\u91cd\u8907\u4e26\u9650\u5236\u6578\u91cf\n                    const uniqueAreas = [...new Set(areas)].slice(0, 4);\n                    \n                    if (uniqueAreas.length === 0) {\n                        return ['\u6574\u9ad4\u60c5\u7dd2\u72c0\u614b\u9700\u8981\u95dc\u6ce8'];\n                    }\n                    \n                    return uniqueAreas;\n                }\n\n                createChart(totalScore, result) {\n                    \/\/ \u92b7\u6bc0\u820a\u5716\u8868\n                    if (this.chart) {\n                        this.chart.destroy();\n                    }\n                    \n                    const ctx = document.getElementById('resultChart');\n                    if (!ctx) return;\n                    \n                    \/\/ \u5b9a\u7fa9\u8a55\u5206\u5340\u9593\n                    const scoreRanges = [\n                        { label: '\u6b63\u5e38\u7bc4\u570d', min: 20, max: 52, color: '#198754', textColor: '#ffffff' },\n                        { label: '\u8f15\u5ea6\u6182\u9b31', min: 53, max: 62, color: '#ffc107', textColor: '#000000' },\n                        { label: '\u4e2d\u5ea6\u6182\u9b31', min: 63, max: 72, color: '#fd7e14', textColor: '#ffffff' },\n                        { label: '\u91cd\u5ea6\u6182\u9b31', min: 73, max: 100, color: '#dc3545', textColor: '#ffffff' }\n                    ];\n                    \n                    \/\/ \u8a08\u7b97\u7528\u6236\u5206\u6578\u5728\u6574\u9ad4\u7bc4\u570d\u4e2d\u7684\u4f4d\u7f6e\u767e\u5206\u6bd4\n                    const totalRange = 100 - 20; \/\/ 20-100\u5206\u7684\u7bc4\u570d\n                    const userPosition = ((totalScore - 20) \/ totalRange) * 100;\n                    \n                    this.chart = new Chart(ctx, {\n                        type: 'bar',\n                        data: {\n                            labels: ['\u8a55\u5206\u5206\u5e03'],\n                            datasets: scoreRanges.map(range => ({\n                                label: `${range.label} (${range.min}-${range.max}\u5206)`,\n                                data: [range.max - range.min + 1],\n                                backgroundColor: range.color,\n                                borderWidth: 0,\n                                barThickness: 60\n                            }))\n                        },\n                        options: {\n                            indexAxis: 'y',\n                            responsive: true,\n                            maintainAspectRatio: false,\n                            scales: {\n                                x: {\n                                    stacked: true,\n                                    display: false,\n                                    max: 81 \/\/ \u7e3d\u7bc4\u570d (100-20+1)\n                                },\n                                y: {\n                                    stacked: true,\n                                    display: false\n                                }\n                            },\n                            plugins: {\n                                legend: {\n                                    display: true,\n                                    position: 'bottom',\n                                    labels: {\n                                        font: {\n                                            size: 14\n                                        },\n                                        padding: 15,\n                                        usePointStyle: true,\n                                        pointStyle: 'rect',\n                                        generateLabels: function(chart) {\n                                            return scoreRanges.map(range => ({\n                                                text: `${range.label} (${range.min}-${range.max}\u5206)`,\n                                                fillStyle: range.color,\n                                                strokeStyle: range.color,\n                                                pointStyle: 'rect'\n                                            }));\n                                        }\n                                    }\n                                },\n                                tooltip: {\n                                    titleFont: { size: 16 },\n                                    bodyFont: { size: 14 },\n                                    callbacks: {\n                                        title: function() {\n                                            return '\u8a55\u5206\u5206\u5e03';\n                                        },\n                                        label: function(context) {\n                                            const range = scoreRanges[context.datasetIndex];\n                                            return `${range.label}: ${range.min}-${range.max}\u5206`;\n                                        },\n                                        afterBody: function() {\n                                            return [`\u60a8\u7684\u5206\u6578: ${totalScore.toFixed(1)}\u5206`];\n                                        }\n                                    }\n                                }\n                            },\n                            layout: {\n                                padding: {\n                                    top: 40,\n                                    bottom: 20\n                                }\n                            },\n                            animation: {\n                                onComplete: function() {\n                                    \/\/ \u5728\u52d5\u756b\u5b8c\u6210\u5f8c\u7e6a\u88fd\u7528\u6236\u4f4d\u7f6e\u6a19\u8a18\n                                    const chart = this;\n                                    const ctx = chart.ctx;\n                                    const chartArea = chart.chartArea;\n                                    \n                                    \/\/ \u8a08\u7b97\u7528\u6236\u5206\u6578\u7684\u50cf\u7d20\u4f4d\u7f6e\n                                    let xPosition = chartArea.left;\n                                    let cumulativeWidth = 0;\n                                    \n                                    for (let i = 0; i < scoreRanges.length; i++) {\n                                        const range = scoreRanges[i];\n                                        const rangeWidth = (range.max - range.min + 1) \/ 81 * (chartArea.right - chartArea.left);\n                                        \n                                        if (totalScore >= range.min && totalScore <= range.max) {\n                                            const positionInRange = (totalScore - range.min) \/ (range.max - range.min);\n                                            xPosition = chartArea.left + cumulativeWidth + (rangeWidth * positionInRange);\n                                            break;\n                                        }\n                                        cumulativeWidth += rangeWidth;\n                                    }\n                                    \n                                    const yPosition = chartArea.top + (chartArea.bottom - chartArea.top) \/ 2;\n                                    \n                                    \/\/ \u7e6a\u88fd\u5782\u76f4\u7dda\n                                    ctx.save();\n                                    ctx.strokeStyle = '#dc3545';\n                                    ctx.lineWidth = 2;\n                                    ctx.setLineDash([]);\n                                    ctx.beginPath();\n                                    ctx.moveTo(xPosition, chartArea.top - 30);\n                                    ctx.lineTo(xPosition, chartArea.bottom + 10);\n                                    ctx.stroke();\n                                    \n                                    \/\/ \u7e6a\u88fd\u5713\u9ede\u6a19\u8a18\n                                    ctx.fillStyle = '#dc3545';\n                                    ctx.beginPath();\n                                    ctx.arc(xPosition, chartArea.top - 15, 6, 0, 2 * Math.PI);\n                                    ctx.fill();\n                                    \n                                    \/\/ \u7e6a\u88fd\u5206\u6578\u6a19\u7c64\n                                    ctx.fillStyle = '#dc3545';\n                                    ctx.font = 'bold 14px sans-serif';\n                                    ctx.textAlign = 'center';\n                                    ctx.fillText(totalScore.toFixed(1), xPosition, chartArea.top - 25);\n                                    \n                                    ctx.restore();\n                                }\n                            }\n                        }\n                    });\n                }\n\n                showSection(sectionName) {\n                    \/\/ \u83b7\u53d6\u6240\u6709\u9875\u9762\u5143\u7d20\n                    const allSections = [this.elements.intro, this.elements.quiz, this.elements.result];\n                    \n                    \/\/ \u9690\u85cf\u6240\u6709\u9875\u9762\n                    allSections.forEach(section => {\n                        if (section) {\n                            section.classList.add('d-none');\n                            section.classList.remove('section-transition', 'active');\n                            section.style.display = 'none'; \/\/ \u5f3a\u5236\u9690\u85cf\n                        }\n                    });\n                    \n                    \/\/ \u786e\u5b9a\u8981\u663e\u793a\u7684\u76ee\u6807\u9875\u9762\n                    let targetSection;\n                    switch(sectionName) {\n                        case 'quiz':\n                            targetSection = this.elements.quiz;\n                            break;\n                        case 'result':\n                            targetSection = this.elements.result;\n                            break;\n                        default:\n                            targetSection = this.elements.intro;\n                    }\n                    \n                    \/\/ \u663e\u793a\u76ee\u6807\u9875\u9762\n                    if (targetSection) {\n                        targetSection.classList.remove('d-none');\n                        targetSection.style.display = 'block'; \/\/ \u5f3a\u5236\u663e\u793a\n                        targetSection.classList.add('section-transition');\n                        \n                        \/\/ \u89e6\u53d1\u52a8\u753b\n                        setTimeout(() => {\n                            targetSection.classList.add('active');\n                        }, 50);\n                    }\n                }\n\n                restartQuiz() {\n                    \/\/ \u91cd\u7f6e\u6240\u6709\u72b6\u6001\n                    this.currentQuestion = 0;\n                    this.answers = [];\n                    \n                    \/\/ \u9500\u6bc1\u56fe\u8868\n                    if (this.chart) {\n                        this.chart.destroy();\n                        this.chart = null;\n                    }\n                    \n                    \/\/ \u6e05\u7a7a\u7ed3\u679c\u9875\u5185\u5bb9\n                    this.elements.totalScore.textContent = '0';\n                    this.elements.scoreDescription.textContent = '\u8a55\u4f30\u4e2d...';\n                    this.elements.resultLevel.textContent = '\u5206\u6790\u4e2d...';\n                    this.elements.resultSubtitle.textContent = '\u8acb\u7a0d\u5019...';\n                    this.elements.detailedAnalysis.innerHTML = '<p class=\"text-muted\">\u6b63\u5728\u5206\u6790\u60a8\u7684\u7b54\u6848...<\/p>';\n                    \n                    \/\/ \u8fd4\u56de\u5f15\u5bfc\u9875\n                    this.showSection('intro');\n                    this.scrollToTop();\n                }\n\n                scrollToTop() {\n                    \/\/ \u627e\u5230\u5f53\u524d\u663e\u793a\u7684\u9875\u9762\n                    let targetSection = null;\n                    if (!this.elements.intro.classList.contains('d-none')) {\n                        targetSection = this.elements.intro;\n                    } else if (!this.elements.quiz.classList.contains('d-none')) {\n                        targetSection = this.elements.quiz;\n                    } else if (!this.elements.result.classList.contains('d-none')) {\n                        targetSection = this.elements.result;\n                    }\n                    \n                    if (targetSection) {\n                        targetSection.scrollIntoView({ \n                            behavior: 'smooth', \n                            block: 'start' \n                        });\n                    } else {\n                        \/\/ \u5907\u7528\u65b9\u6848\uff1a\u6eda\u52a8\u5230\u9875\u9762\u9876\u90e8\n                        window.scrollTo({ top: 0, behavior: 'smooth' });\n                    }\n                }\n            }\n\n            \/\/ \u521d\u59cb\u5316\u6e2c\u9a57\n            document.addEventListener('DOMContentLoaded', () => {\n                new DepressionQuiz();\n            });\n        })();\n    <\/script>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>\u5fe7\u90c1\u81ea\u8bc4\u91cf\u8868\uff08Self-rating Depression Scale, SDS\uff09\u662f\u7531Zung\u4e8e1965\u5e74\u7f16\u5236\u800c\u6210\u3002\u80fd\u5168\u9762\u3001\u51c6\u786e\u3001\u8fc5\u901f\u5730\u53cd\u6620\u88ab\u8bd5\u5fe7\u90c1\u72b6\u6001\u7684\u6709\u5173\u75c7\u72b6\u53ca\u5176\u4e25\u91cd\u7a0b\u5ea6\u548c\u53d8\u5316\u3002\u672c\u6d4b\u9a8c\u4e3a\u77ed\u7a0b\u81ea\u8bc4\u91cf\u8868\u3002<\/p>","protected":false},"author":1,"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":"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":"disabled","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":[169,165,162],"tags":[182],"class_list":["post-6003","post","type-post","status-publish","format-standard","hentry","category-psychological-symptom-scales","category-neuropsychological","category-clinical","tag-depression"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/6003","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/comments?post=6003"}],"version-history":[{"count":4,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/6003\/revisions"}],"predecessor-version":[{"id":10242,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/6003\/revisions\/10242"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=6003"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=6003"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=6003"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}