{"id":5696,"date":"2023-12-27T09:42:12","date_gmt":"2023-12-27T01:42:12","guid":{"rendered":"https:\/\/bookmark.tw\/?p=5696"},"modified":"2025-08-07T03:05:39","modified_gmt":"2025-08-06T19:05:39","slug":"depression-stress-detection-college","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/depression-stress-detection-college","title":{"rendered":"\u5fe7\u90c1\u60c5\u7eea\u53ca\u538b\u529b\u68c0\u6d4b\u5927\u4e13\u751f\u7248\uff0818-24\u5c81\uff09\u7ebf\u4e0a\u514d\u8d39\u6d4b\u9a8c\uff0832\u9898\uff09"},"content":{"rendered":"\n<!-- \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<!-- HTML\u7d50\u69cb -->\n<div id=\"mood-assessment-app\" class=\"container-fluid px-0\" style=\"max-width: 750px; margin: 0 auto;\">\n  <!-- \u5f15\u5c0e\u9801 -->\n  <section id=\"quizintro9\" data-page=\"intro9\" class=\"min-vh-100 d-flex align-items-center py-5\">\n    <div class=\"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 position-relative\">\n              <div class=\"rounded-circle d-inline-flex align-items-center justify-content-center shadow-lg\" style=\"width: 100px; height: 100px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\">\n                <i class=\"bi bi-heart-pulse-fill text-white\" style=\"font-size: 3rem;\"><\/i>\n              <\/div>\n            <\/div>\n            <h2 class=\"display-5 fw-bold mb-3\" style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;\">\u6182\u9b31\u60c5\u7dd2\u53ca\u58d3\u529b\u6aa2\u6e2c<\/h2>\n            <p class=\"fs-4 text-secondary\">\u8463\u6c0f\u6182\u9b31\u91cf\u8868 &#8211; \u5927\u5c08\u751f\u7248\uff0818-24\u6b72\uff09<\/p>\n          <\/div>\n          \n          <div class=\"row g-3 mb-5\">\n            <div class=\"col-md-4\">\n              <div class=\"card h-100 border-0 shadow-sm hover-card\">\n                <div class=\"card-body text-center p-4\">\n                  <div class=\"mb-3\">\n                    <div class=\"rounded-circle d-inline-flex align-items-center justify-content-center\" style=\"width: 60px; height: 60px; background-color: rgba(40, 167, 69, 0.1);\">\n                      <i class=\"bi bi-shield-check text-success\" style=\"font-size: 2rem;\"><\/i>\n                    <\/div>\n                  <\/div>\n                  <h5 class=\"fw-semibold\">\u5c08\u696d\u8a55\u4f30<\/h5>\n                  <p class=\"text-muted small mb-0\">\u7d93\u904e\u9a57\u8b49\u7684\u5fc3\u7406\u5065\u5eb7\u8a55\u4f30\u5de5\u5177<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n            <div class=\"col-md-4\">\n              <div class=\"card h-100 border-0 shadow-sm hover-card\">\n                <div class=\"card-body text-center p-4\">\n                  <div class=\"mb-3\">\n                    <div class=\"rounded-circle d-inline-flex align-items-center justify-content-center\" style=\"width: 60px; height: 60px; background-color: rgba(23, 162, 184, 0.1);\">\n                      <i class=\"bi bi-clock-history text-info\" style=\"font-size: 2rem;\"><\/i>\n                    <\/div>\n                  <\/div>\n                  <h5 class=\"fw-semibold\">\u5feb\u901f\u5b8c\u6210<\/h5>\n                  <p class=\"text-muted small mb-0\">\u50c5\u97005-10\u5206\u9418\u5373\u53ef\u5b8c\u6210\u6e2c\u9a57<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n            <div class=\"col-md-4\">\n              <div class=\"card h-100 border-0 shadow-sm hover-card\">\n                <div class=\"card-body text-center p-4\">\n                  <div class=\"mb-3\">\n                    <div class=\"rounded-circle d-inline-flex align-items-center justify-content-center\" style=\"width: 60px; height: 60px; background-color: rgba(255, 193, 7, 0.1);\">\n                      <i class=\"bi bi-graph-up text-warning\" style=\"font-size: 2rem;\"><\/i>\n                    <\/div>\n                  <\/div>\n                  <h5 class=\"fw-semibold\">\u8a73\u7d30\u5206\u6790<\/h5>\n                  <p class=\"text-muted small mb-0\">\u591a\u7dad\u5ea6\u60c5\u7dd2\u72c0\u614b\u8996\u89ba\u5316\u5448\u73fe<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n          \n          <div class=\"card border-0 shadow-lg mb-4\" style=\"border-radius: 15px; overflow: hidden;\">\n            <div class=\"card-body p-4\">\n              <div class=\"d-flex align-items-start mb-3\">\n                <i class=\"bi bi-info-circle-fill text-primary me-2 mt-1\"><\/i>\n                <div>\n                  <p class=\"fs-5 mb-2\">\u900f\u8996\u4f60\u7684\u60c5\u7dd2\uff0c\u5f88\u9ad8\u8208\u4f60\u6253\u958b\u4e86\u9019\u4efd\u91cf\u8868\uff0c\u8868\u793a\u4f60\u5df2 Open your mind\uff0c\u958b\u59cb\u548c\u60c5\u7dd2\u505a Friend\u3002<\/p>\n                  <p class=\"mb-0\">\u8acb\u4f60\u7528\u5fc3\u56de\u60f3<span class=\"badge bg-primary\">\u6700\u8fd1\u5169\u9031<\/span>\u7684\u5fc3\u60c5\uff0c\u4e26\u4e14\u8207\u904e\u53bb\u7684\u72c0\u6cc1\u6bd4\u8f03\uff0c\u52fe\u9078\u6700\u9069\u5408\u7684\u7b54\u6848\u3002<\/p>\n                <\/div>\n              <\/div>\n              \n              <div class=\"alert alert-info mb-3\" role=\"alert\" style=\"border-left: 4px solid #17a2b8;\">\n                <div class=\"d-flex align-items-center\">\n                  <i class=\"bi bi-person-check-fill me-2\"><\/i>\n                  <span>\u6b61\u8fce18\u6b72~24\u6b72\u4e14\u6b63\u5c31\u8b80\u65bc\u5927\u5c08\u9662\u6821\u7684\u5b78\u751f\u4f7f\u7528\uff01<\/span>\n                <\/div>\n              <\/div>\n              \n              <div class=\"alert alert-warning mb-0\" role=\"alert\" style=\"border-left: 4px solid #ffc107;\">\n                <div class=\"d-flex align-items-center\">\n                  <i class=\"bi bi-exclamation-triangle-fill me-2\"><\/i>\n                  <span>\u6b64\u91cf\u8868\u50c5\u7528\u65bc\u60c5\u7dd2\u72c0\u614b\u6aa2\u8996\uff0c\u4e26\u975e\u91ab\u5b78\u8a3a\u65b7\u3002\u5982\u6709\u6182\u9b31\u50be\u5411\u8acb\u5c0b\u6c42\u5c08\u696d\u5354\u52a9\u3002<\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n          \n          <div class=\"text-center\">\n            <button type=\"button\" class=\"btn btn-lg px-5 py-3 shadow-lg start-btn\" data-action=\"start-test\">\n              <i class=\"bi bi-play-circle-fill me-2\"><\/i>\u958b\u59cb\u6e2c\u9a57\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=\"d-none py-5\">\n    <div class=\"container\">\n      <div class=\"row justify-content-center\">\n        <div class=\"col-12\">\n          <h2 class=\"text-center mb-4 fw-bold\">\u60c5\u7dd2\u6aa2\u6e2c\u9032\u884c\u4e2d<\/h2>\n          \n          <!-- \u9032\u5ea6\u689d -->\n          <div id=\"progress-container\" class=\"mb-4\">\n            <div class=\"d-flex justify-content-between align-items-center mb-2\">\n              <span class=\"text-muted fw-semibold\">\u6e2c\u9a57\u9032\u5ea6<\/span>\n              <span class=\"badge rounded-pill px-3 py-2\" style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\">\n                \u554f\u984c <span id=\"current-question\">1<\/span> \/ <span id=\"total-questions\">32<\/span>\n              <\/span>\n            <\/div>\n            <div class=\"progress\" style=\"height: 12px; border-radius: 10px;\">\n              <div id=\"progress-bar\" class=\"progress-bar progress-bar-striped progress-bar-animated\" role=\"progressbar\" style=\"width: 0%; background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);\"><\/div>\n            <\/div>\n          <\/div>\n          \n          <!-- \u554f\u984c\u5bb9\u5668 -->\n          <div class=\"card border-0 shadow-lg\" style=\"border-radius: 15px;\">\n            <div class=\"card-body p-4\">\n              <div id=\"question-container\">\n                <!-- \u52d5\u614b\u8f09\u5165\u554f\u984c -->\n              <\/div>\n            <\/div>\n          <\/div>\n          \n          <!-- \u5c0e\u822a\u6309\u9215 -->\n          <div class=\"text-center mt-4\">\n            <button type=\"button\" class=\"btn btn-outline-secondary btn-lg px-4 py-2\" id=\"prev-button\" disabled>\n              <i class=\"bi bi-arrow-left-circle me-2\"><\/i>\u4e0a\u4e00\u984c\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=\"d-none py-5\">\n    <div class=\"container\">\n      <div class=\"row justify-content-center\">\n        <div class=\"col-12\">\n          <h2 class=\"text-center mb-5 fw-bold\">\u6e2c\u9a57\u7d50\u679c\u5206\u6790<\/h2>\n          \n          <!-- \u5206\u6578\u986f\u793a -->\n          <div class=\"row mb-4\">\n            <div class=\"col-md-6 mx-auto\">\n              <div class=\"card border-0 shadow-lg text-center\" style=\"border-radius: 20px; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\">\n                <div class=\"card-body py-5\">\n                  <div class=\"position-relative d-inline-block mb-3\">\n                    <div class=\"rounded-circle d-flex align-items-center justify-content-center mx-auto shadow\" id=\"score-circle\" style=\"width: 140px; height: 140px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\">\n                      <div>\n                        <div class=\"display-3 text-white fw-bold\" id=\"final-score\">0<\/div>\n                        <div class=\"text-white-50\">\u7e3d\u5206<\/div>\n                      <\/div>\n                    <\/div>\n                  <\/div>\n                  <h3 id=\"result-category\" class=\"mb-0 fw-bold\"><\/h3>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n          \n          <!-- \u5206\u6578\u5206\u5e03\u5716 -->\n          <div class=\"row mb-5\">\n            <div class=\"col-12\">\n              <div class=\"card border-0 shadow\">\n                <div class=\"card-body p-4\">\n                  <h4 class=\"card-title text-center mb-4 fw-bold\">\n                    <i class=\"bi bi-bar-chart-fill text-primary me-2\"><\/i>\u60a8\u7684\u5206\u6578\u4f4d\u7f6e\n                  <\/h4>\n                  <div id=\"score-distribution\" style=\"position: relative; height: 100px;\">\n                    <!-- \u52d5\u614b\u751f\u6210\u6a6b\u5411\u5806\u758a\u689d\u5f62\u5716 -->\n                  <\/div>\n                  <div id=\"distribution-legend\" class=\"mt-3\">\n                    <!-- \u52d5\u614b\u751f\u6210\u5716\u4f8b -->\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n          \n          <!-- \u500b\u6027\u5316\u5206\u6790 -->\n          <div class=\"row mb-4\">\n            <div class=\"col-12\">\n              <div class=\"card border-0 shadow\">\n                <div class=\"card-body p-4\">\n                  <h4 class=\"card-title mb-4 fw-bold\">\n                    <i class=\"bi bi-person-heart text-primary me-2\"><\/i>\u500b\u6027\u5316\u5206\u6790\n                  <\/h4>\n                  <div id=\"personalized-analysis\">\n                    <!-- \u52d5\u614b\u751f\u6210\u500b\u6027\u5316\u5206\u6790 -->\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n          \n          <!-- \u7d50\u679c\u89e3\u91cb -->\n          <div class=\"row mb-4\">\n            <div class=\"col-12\">\n              <div class=\"card border-0 shadow\">\n                <div class=\"card-body p-4\">\n                  <h4 class=\"card-title mb-3 fw-bold\">\n                    <i class=\"bi bi-chat-left-text-fill text-primary me-2\"><\/i>\u5c08\u696d\u5efa\u8b70\n                  <\/h4>\n                  <div id=\"result-interpretation\"><\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n          \n          <!-- \u96f7\u9054\u5716 -->\n          <div class=\"row mb-5\">\n            <div class=\"col-12\">\n              <div class=\"card border-0 shadow\">\n                <div class=\"card-body p-4\">\n                  <h4 class=\"card-title text-center mb-4 fw-bold\">\u60c5\u7dd2\u7dad\u5ea6\u5206\u6790<\/h4>\n                  <div style=\"height: 350px; position: relative;\">\n                    <canvas id=\"result-chart\"><\/canvas>\n                  <\/div>\n                  <div id=\"dimension-details\" class=\"row g-2 mt-4\">\n                    <!-- \u52d5\u614b\u8f09\u5165\u7dad\u5ea6\u8a73\u60c5 -->\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n          \n          <!-- \u6c42\u52a9\u8cc7\u6e90 -->\n          <div class=\"row mb-5\" id=\"help-resources-section\" style=\"display: none;\">\n            <div class=\"col-12\">\n              <div class=\"card border-danger shadow-lg\" style=\"border-width: 3px;\">\n                <div class=\"card-header bg-danger text-white text-center py-3\">\n                  <h5 class=\"mb-0 d-flex align-items-center justify-content-center\">\n                    <i class=\"bi bi-telephone-fill me-2\" style=\"font-size: 1.3rem;\"><\/i>\n                    <span>\u7dca\u6025\u6c42\u52a9\u8cc7\u6e90 Emergency Helplines<\/span>\n                    <i class=\"bi bi-telephone-fill ms-2\" style=\"font-size: 1.3rem;\"><\/i>\n                  <\/h5>\n                <\/div>\n                <div class=\"card-body p-4\" style=\"background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%);\">\n                  <p class=\"text-danger fw-bold mb-3 fs-5\"><i class=\"bi bi-exclamation-triangle-fill me-2\"><\/i>\u5982\u679c\u60a8\u6709\u81ea\u50b7\u5ff5\u982d\uff0c\u8acb\u7acb\u5373\u5c0b\u6c42\u5354\u52a9\uff1a<\/p>\n                  <div class=\"row\">\n                    <div class=\"col-md-6 mb-3\">\n                      <div class=\"bg-light rounded-3 p-3\">\n                        <h6 class=\"fw-bold text-primary mb-3 d-flex align-items-center\">\n                          <span class=\"badge bg-primary rounded-pill me-2 px-3 py-2\">\n                            <i class=\"bi bi-geo-alt-fill\"><\/i> TW\n                          <\/span>\n                          \u81fa\u7063\u6c42\u52a9\u71b1\u7dda\n                        <\/h6>\n                        <ul class=\"list-unstyled mb-0\">\n                          <li class=\"mb-3 d-flex align-items-center\">\n                            <i class=\"bi bi-telephone-fill text-success me-3\" style=\"font-size: 1.5rem;\"><\/i>\n                            <div class=\"flex-grow-1\">\n                              <strong class=\"d-block mb-1\">\u751f\u547d\u7dda\u5354\u8ac7\u5c08\u7dda<\/strong>\n                              <a href=\"tel:1995\" class=\"btn btn-success px-4 py-2 w-100\">\n                                <i class=\"bi bi-telephone-outbound-fill me-2\"><\/i><strong>\u64a5\u6253 1995<\/strong>\n                              <\/a>\n                            <\/div>\n                          <\/li>\n                          <li class=\"mb-3 d-flex align-items-center\">\n                            <i class=\"bi bi-telephone-fill text-info me-3\" style=\"font-size: 1.5rem;\"><\/i>\n                            <div class=\"flex-grow-1\">\n                              <strong class=\"d-block mb-1\">\u5b89\u5fc3\u5c08\u7dda<\/strong>\n                              <a href=\"tel:1925\" class=\"btn btn-info px-4 py-2 w-100 text-white\">\n                                <i class=\"bi bi-telephone-outbound-fill me-2\"><\/i><strong>\u64a5\u6253 1925<\/strong>\n                              <\/a>\n                            <\/div>\n                          <\/li>\n                          <li class=\"mb-2 d-flex align-items-center\">\n                            <i class=\"bi bi-telephone-fill text-warning me-3\" style=\"font-size: 1.5rem;\"><\/i>\n                            <div class=\"flex-grow-1\">\n                              <strong class=\"d-block mb-1\">\u5f35\u8001\u5e2b\u5c08\u7dda<\/strong>\n                              <a href=\"tel:1980\" class=\"btn btn-warning px-4 py-2 w-100\">\n                                <i class=\"bi bi-telephone-outbound-fill me-2\"><\/i><strong>\u64a5\u6253 1980<\/strong>\n                              <\/a>\n                            <\/div>\n                          <\/li>\n                        <\/ul>\n                      <\/div>\n                    <\/div>\n                    <div class=\"col-md-6 mb-3\">\n                      <div class=\"bg-light rounded-3 p-3\">\n                        <h6 class=\"fw-bold text-primary mb-3 d-flex align-items-center\">\n                          <span class=\"badge bg-primary rounded-pill me-2 px-3 py-2\">\n                            <i class=\"bi bi-geo-alt-fill\"><\/i> HK\n                          <\/span>\n                          \u9999\u6e2f\u6c42\u52a9\u71b1\u7dda\n                        <\/h6>\n                        <ul class=\"list-unstyled mb-0\">\n                          <li class=\"mb-3 d-flex align-items-center\">\n                            <i class=\"bi bi-telephone-fill text-success me-3\" style=\"font-size: 1.5rem;\"><\/i>\n                            <div class=\"flex-grow-1\">\n                              <strong class=\"d-block mb-1\">\u6492\u746a\u5229\u4e9e\u6703<\/strong>\n                              <a href=\"tel:+85228960000\" class=\"btn btn-success px-4 py-2 w-100\">\n                                <i class=\"bi bi-telephone-outbound-fill me-2\"><\/i><strong>2896 0000<\/strong>\n                              <\/a>\n                            <\/div>\n                          <\/li>\n                          <li class=\"mb-3 d-flex align-items-center\">\n                            <i class=\"bi bi-telephone-fill text-info me-3\" style=\"font-size: 1.5rem;\"><\/i>\n                            <div class=\"flex-grow-1\">\n                              <strong class=\"d-block mb-1\">\u9632\u6b62\u81ea\u6bba\u6703<\/strong>\n                              <a href=\"tel:+85223892222\" class=\"btn btn-info px-4 py-2 w-100 text-white\">\n                                <i class=\"bi bi-telephone-outbound-fill me-2\"><\/i><strong>2389 2222<\/strong>\n                              <\/a>\n                            <\/div>\n                          <\/li>\n                          <li class=\"mb-3 d-flex align-items-center\">\n                            <i class=\"bi bi-telephone-fill text-warning me-3\" style=\"font-size: 1.5rem;\"><\/i>\n                            <div class=\"flex-grow-1\">\n                              <strong class=\"d-block mb-1\">\u751f\u547d\u71b1\u7dda(\u660e\u611b)<\/strong>\n                              <a href=\"tel:+85223820000\" class=\"btn btn-warning px-4 py-2 w-100\">\n                                <i class=\"bi bi-telephone-outbound-fill me-2\"><\/i><strong>2382 0000<\/strong>\n                              <\/a>\n                            <\/div>\n                          <\/li>\n                          <li class=\"mb-2 d-flex align-items-center\">\n                            <i class=\"bi bi-telephone-fill text-danger me-3\" style=\"font-size: 1.5rem;\"><\/i>\n                            <div class=\"flex-grow-1\">\n                              <strong class=\"d-block mb-1\">\u7d05\u5341\u5b57\u6703\u95dc\u61f7\u71b1\u7dda<\/strong>\n                              <a href=\"tel:+85251645040\" class=\"btn btn-danger px-4 py-2 w-100\">\n                                <i class=\"bi bi-telephone-outbound-fill me-2\"><\/i><strong>5164 5040<\/strong>\n                              <\/a>\n                            <\/div>\n                          <\/li>\n                        <\/ul>\n                      <\/div>\n                    <\/div>\n                  <\/div>\n                  <div class=\"alert alert-info mb-0 mt-3\" role=\"alert\">\n                    <div class=\"d-flex align-items-start\">\n                      <i class=\"bi bi-heart-fill text-danger me-2 mt-1\" style=\"font-size: 1.2rem;\"><\/i>\n                      <div>\n                        <strong>\u60a8\u4e26\u4e0d\u5b64\u55ae<\/strong><br>\n                        \u9019\u4e9b\u71b1\u7dda\u63d0\u4f9b24\u5c0f\u6642\u670d\u52d9\uff0c\u5c08\u696d\u8f14\u5c0e\u54e1\u6703\u70ba\u60a8\u63d0\u4f9b\u5373\u6642\u652f\u63f4\u3002\u8a18\u4f4f\uff0c\u5c0b\u6c42\u5e6b\u52a9\u662f\u52c7\u6562\u7684\u8868\u73fe\u3002\n                      <\/div>\n                    <\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n          \n          <!-- \u91cd\u65b0\u6e2c\u9a57\u6309\u9215 -->\n          <div class=\"text-center mt-5\">\n            <button type=\"button\" class=\"btn btn-lg px-5 py-3 shadow-lg restart-btn\" data-action=\"restart-test\">\n              <i class=\"bi bi-arrow-clockwise me-2\"><\/i>\u91cd\u65b0\u6e2c\u9a57\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n<\/div>\n\n<!-- CSS\u6a23\u5f0f -->\n<style>\n\/* \u907f\u514d\u8207WordPress\u4e3b\u984c\u885d\u7a81\u7684\u547d\u540d\u7a7a\u9593 *\/\n#mood-assessment-app {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Microsoft JhengHei\", \"\u5fae\u8edf\u6b63\u9ed1\u9ad4\", \"PingFang TC\", \"\u860b\u65b9-\u7e41\", sans-serif;\n  line-height: 1.6;\n}\n\n#mood-assessment-app * {\n  box-sizing: border-box;\n}\n\n\/* \u6309\u9215\u6a23\u5f0f *\/\n#mood-assessment-app .start-btn,\n#mood-assessment-app .restart-btn {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  border: none;\n  color: white;\n  border-radius: 50px;\n  font-size: 18px;\n  font-weight: 600;\n  transition: all 0.3s ease;\n  min-height: 50px;\n}\n\n#mood-assessment-app .start-btn:hover,\n#mood-assessment-app .restart-btn:hover {\n  transform: translateY(-3px);\n  box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);\n}\n\n\/* \u5361\u7247\u61f8\u505c\u6548\u679c *\/\n#mood-assessment-app .hover-card {\n  transition: all 0.3s ease;\n}\n\n#mood-assessment-app .hover-card:hover {\n  transform: translateY(-5px);\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;\n}\n\n\/* \u554f\u984c\u6a23\u5f0f *\/\n#mood-assessment-app h3.question-text {\n  font-size: 22px;\n  font-weight: bold;\n  color: #2c3e50;\n  margin-bottom: 2rem;\n  line-height: 1.6;\n}\n\n\/* \u9078\u9805\u5361\u7247\u6a23\u5f0f *\/\n#mood-assessment-app .option-card {\n  border: 2px solid #e0e6ed;\n  border-radius: 12px;\n  padding: 1rem 1.25rem;\n  margin-bottom: 1rem;\n  cursor: pointer;\n  transition: all 0.3s ease;\n  background: #fff;\n  position: relative;\n  overflow: hidden;\n}\n\n#mood-assessment-app .option-card:hover {\n  border-color: #667eea;\n  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);\n  transform: translateX(5px);\n  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);\n}\n\n#mood-assessment-app .option-card.selected {\n  border-color: #667eea;\n  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);\n  box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3);\n}\n\n#mood-assessment-app .option-card .option-indicator {\n  width: 28px;\n  height: 28px;\n  border: 2px solid #dee2e6;\n  border-radius: 50%;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 12px;\n  flex-shrink: 0;\n  transition: all 0.3s ease;\n  background: white;\n}\n\n#mood-assessment-app .option-card.selected .option-indicator {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  border-color: #667eea;\n}\n\n#mood-assessment-app .option-card .option-text {\n  font-size: 18px;\n  color: #2c3e50;\n  flex: 1;\n}\n\n#mood-assessment-app .option-card.selected .option-text {\n  font-weight: 500;\n}\n\n\/* \u5206\u6578\u5206\u5e03\u689d\u5f62\u5716 *\/\n#mood-assessment-app .score-bar {\n  height: 60px;\n  border-radius: 30px;\n  overflow: hidden;\n  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);\n  display: flex;\n  position: relative;\n  background: #f8f9fa;\n}\n\n#mood-assessment-app .score-segment {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  font-weight: 600;\n  font-size: 14px;\n  transition: all 0.3s ease;\n  position: relative;\n}\n\n#mood-assessment-app .score-marker {\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 20px;\n  height: 20px;\n  background: #dc3545;\n  border: 3px solid white;\n  border-radius: 50%;\n  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.5);\n  z-index: 10;\n  animation: pulse 2s infinite;\n}\n\n@keyframes pulse {\n  0% {\n    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);\n  }\n  70% {\n    box-shadow: 0 0 0 15px rgba(220, 53, 69, 0);\n  }\n  100% {\n    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);\n  }\n}\n\n@keyframes phone-pulse {\n  0%, 100% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(1.1);\n  }\n}\n\n#mood-assessment-app #help-resources-section .bi-telephone-fill {\n  animation: phone-pulse 2s ease-in-out infinite;\n}\n\n#mood-assessment-app .legend-item {\n  display: inline-flex;\n  align-items: center;\n  margin: 0.5rem;\n  padding: 0.25rem 0.75rem;\n  background: #f8f9fa;\n  border-radius: 20px;\n  font-size: 14px;\n}\n\n#mood-assessment-app .legend-color {\n  width: 16px;\n  height: 16px;\n  border-radius: 4px;\n  margin-right: 8px;\n}\n\n\/* \u6c42\u52a9\u8cc7\u6e90\u5361\u7247\u6a23\u5f0f *\/\n#mood-assessment-app #help-resources-section .card {\n  border-width: 2px;\n}\n\n#mood-assessment-app #help-resources-section .btn {\n  transition: all 0.3s ease;\n  font-weight: 600;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n  font-size: 1rem;\n  padding: 0.75rem 1.5rem;\n}\n\n#mood-assessment-app #help-resources-section .btn:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 4px 8px rgba(0,0,0,0.2);\n}\n\n#mood-assessment-app #help-resources-section .btn:active {\n  transform: translateY(0);\n}\n\n#mood-assessment-app #help-resources-section .btn i {\n  font-size: 0.9rem;\n}\n\n\/* \u97ff\u61c9\u5f0f\u8a2d\u8a08 *\/\n@media (max-width: 768px) {\n  #mood-assessment-app h3.question-text {\n    font-size: 20px;\n  }\n  \n  #mood-assessment-app .option-card .option-text {\n    font-size: 16px;\n  }\n  \n  #mood-assessment-app .score-segment {\n    font-size: 12px;\n  }\n  \n  #mood-assessment-app .legend-item {\n    font-size: 12px;\n    margin: 0.25rem;\n  }\n  \n  #mood-assessment-app #help-resources-section .btn {\n    font-size: 0.9rem;\n    padding: 0.5rem 1rem;\n  }\n  \n  #mood-assessment-app #help-resources-section strong {\n    font-size: 0.9rem;\n  }\n  \n  #mood-assessment-app #help-resources-section .bi-telephone-fill {\n    font-size: 1.2rem !important;\n  }\n}\n\n\/* \u52d5\u756b\u6548\u679c *\/\n#mood-assessment-app section {\n  animation: fadeIn 0.3s ease;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n\/* \u79fb\u9664\u9ad8\u5ea6\u9650\u5236 *\/\n#mood-assessment-app .min-vh-100 {\n  min-height: auto;\n}\n<\/style>\n\n<!-- JavaScript\u884c\u70ba -->\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 MoodAssessmentQuiz {\n    constructor() {\n      \/\/ \u5feb\u53d6DOM\u5143\u7d20\n      this.app = document.getElementById('mood-assessment-app');\n      this.introPage = document.getElementById('quizintro9');\n      this.quizPage = document.getElementById('quizmain9');\n      this.resultPage = document.getElementById('quizresult9');\n      this.progressBar = document.getElementById('progress-bar');\n      this.currentQuestionEl = document.getElementById('current-question');\n      this.totalQuestionsEl = document.getElementById('total-questions');\n      this.questionContainer = document.getElementById('question-container');\n      this.prevButton = document.getElementById('prev-button');\n      this.finalScoreEl = document.getElementById('final-score');\n      this.resultCategoryEl = document.getElementById('result-category');\n      this.resultInterpretationEl = document.getElementById('result-interpretation');\n      this.dimensionDetailsEl = document.getElementById('dimension-details');\n      this.scoreDistributionEl = document.getElementById('score-distribution');\n      this.distributionLegendEl = document.getElementById('distribution-legend');\n      this.personalizedAnalysisEl = document.getElementById('personalized-analysis');\n      \n      \/\/ \u8cc7\u6599\u521d\u59cb\u5316\n      this.currentQuestion = 0;\n      this.answers = [];\n      this.chartInstance = null;\n      \n      \/\/ \u554f\u984c\u8cc7\u6599\n      this.questions = [\n        \"\u6211\u89ba\u5f97\u5fc3\u88e1\u5f88\u96e3\u904e\u3002\", \"\u78b0\u5230\u4e8b\u60c5\uff0c\u6211\u53ea\u60f3\u9003\u907f\u3002\", \"\u6211\u6700\u8fd1\u6709\u81ea\u6bba\u7684\u5ff5\u982d\u3002\", \"\u6211\u5fc3\u88e1\u89ba\u5f97\u5f88\u7a7a\u865b\u3002\",\n        \"\u6c92\u6709\u4eba\u77ad\u89e3\u6211\u3002\", \"\u6211\u611f\u5230\u7d55\u671b\u3002\", \"\u6211\u89ba\u5f97\u4eba\u751f\u662f\u7070\u6697\u7684\u3002\", \"\u6211\u5c0d\u539f\u672c\u559c\u6b61\u7684\u4e8b\uff0c\u8b8a\u5f97\u6c92\u8208\u8da3\u4e86\u3002\",\n        \"\u6211\u7684\u80f8\u53e3\u6703\u7dca\u7dca\u3001\u60b6\u60b6\u7684\u3002\", \"\u6211\u5728\u63a9\u98fe\u5fc3\u88e1\u7684\u75db\u82e6\u3002\", \"\u6211\u8b8a\u5f97\u8a0e\u53ad\u81ea\u5df1\u3002\", \"\u6211\u662f\u5225\u4eba\u7684\u8ca0\u64d4\u3002\",\n        \"\u6211\u89ba\u5f97\u5f88\u7169\u3002\", \"\u6211\u4e0a\u8ab2\u5538\u66f8\u4e0d\u80fd\u5c08\u5fc3\u3002\", \"\u6211\u611f\u5230\u660f\u660f\u6c88\u6c88\u7684\u3002\", \"\u6211\u89ba\u5f97\u81ea\u5df1\u6c92\u6709\u672a\u4f86\u3002\",\n        \"\u6211\u8a8d\u70ba\u81ea\u5df1\u505a\u4eba\u5931\u6557\u3002\", \"\u6211\u6703\u83ab\u540d\u5730\u60f3\u54ed\u3002\", \"\u6211\u89ba\u5f97\u65e5\u5b50\u75db\u82e6\u96e3\u71ac\u3002\", \"\u6211\u4e0d\u60f3\u51fa\u9580\u3002\",\n        \"\u6211\u89ba\u5f97\u751f\u6d3b\u6c92\u6709\u610f\u7fa9\u3002\", \"\u6211\u611f\u5230\u5f88\u5bc2\u5bde\u3002\", \"\u6211\u5c0d\u4efb\u4f55\u4e8b\u90fd\u63d0\u4e0d\u8d77\u52c1\u3002\", \"\u6211\u89ba\u5f97\u8a18\u61b6\u529b\u8b8a\u5dee\u4e86\u3002\",\n        \"\u6211\u6703\u7336\u8c6b\u4e0d\u6c7a\uff0c\u5f88\u96e3\u505a\u6c7a\u5b9a\u3002\", \"\u6211\u89ba\u5f97\u81ea\u5df1\u662f\u6c92\u6709\u50f9\u503c\u7684\u4eba\u3002\", \"\u6c92\u6709\u4eba\u95dc\u5fc3\u6211\u3002\", \"\u6211\u4e0d\u5feb\u6a02\u3002\",\n        \"\u6211\u6703\u60f3\u8981\u50b7\u5bb3\u81ea\u5df1\u3002\", \"\u6211\u6703\u4e00\u76f4\u767c\u5446\u3002\", \"\u6211\u4e0d\u60f3\u548c\u5225\u4eba\u4ea4\u8ac7\u3002\", \"\u6211\u60f3\u81ea\u5df1\u8eb2\u8d77\u4f86\u3002\"\n      ];\n      \n      this.options = [\n        { text: \"\u6c92\u6709\u6216\u6975\u5c11\uff08\u6bcf\u90311\u5929\u4ee5\u4e0b\uff09\", score: 0 },\n        { text: \"\u6709\u6642\u5019\uff08\u6bcf\u90311-2\u5929\uff09\", score: 1 },\n        { text: \"\u6642\u5e38\uff08\u6bcf\u90313-4\u5929\uff09\", score: 2 },\n        { text: \"\u5e38\u5e38\u6216\u7e3d\u662f\uff08\u6bcf\u90315-7\u5929\uff09\", score: 3 }\n      ];\n      \n      \/\/ \u7dad\u5ea6\u5206\u985e\n      this.dimensions = {\n        '\u60c5\u7dd2\u4f4e\u843d': [0, 6, 7, 17, 18, 21, 27],\n        '\u793e\u4ea4\u9000\u7e2e': [4, 10, 19, 22, 30, 31],\n        '\u8a8d\u77e5\u56f0\u96e3': [13, 14, 15, 23, 24, 25],\n        '\u81ea\u6211\u5426\u5b9a': [5, 11, 12, 16, 26, 29],\n        '\u8eab\u5fc3\u75c7\u72c0': [1, 2, 3, 8, 9, 20, 28]\n      };\n      \n      \/\/ \u5206\u6578\u7b49\u7d1a\n      this.scoreRanges = [\n        { min: 0, max: 28, label: '\u60c5\u7dd2\u7a69\u5b9a', color: '#28a745' },\n        { min: 29, max: 35, label: '\u8f15\u5ea6\u56f0\u64fe', color: '#17a2b8' },\n        { min: 36, max: 51, label: '\u4e2d\u5ea6\u6182\u9b31', color: '#ffc107' },\n        { min: 52, max: 96, label: '\u91cd\u5ea6\u6182\u9b31', color: '#dc3545' }\n      ];\n      \n      this.init();\n    }\n    \n    init() {\n      \/\/ \u521d\u59cb\u5316\u7b54\u6848\u9663\u5217\n      this.answers = new Array(this.questions.length).fill(-1);\n      this.totalQuestionsEl.textContent = this.questions.length;\n      \n      \/\/ \u7d81\u5b9a\u4e8b\u4ef6\uff08\u4e8b\u4ef6\u59d4\u8a17\uff09\n      this.app.addEventListener('click', (e) => this.handleClick(e));\n      \n      \/\/ \u96b1\u85cf\u9032\u5ea6\u689d\uff08\u5982\u679c\u53ea\u6709\u4e00\u984c\uff09\n      if (this.questions.length === 1) {\n        document.getElementById('progress-container').style.display = 'none';\n      }\n    }\n    \n    handleClick(e) {\n      const target = e.target.closest('[data-action], .option-card');\n      if (!target) return;\n      \n      if (target.dataset.action === 'start-test') {\n        this.startTest();\n      } else if (target.dataset.action === 'restart-test') {\n        this.restartTest();\n      } else if (target.classList.contains('option-card')) {\n        const value = parseInt(target.dataset.value);\n        this.selectAnswer(value);\n      }\n      \n      if (e.target.id === 'prev-button' || e.target.parentElement?.id === 'prev-button') {\n        this.showPreviousQuestion();\n      }\n    }\n    \n    startTest() {\n      this.introPage.classList.add('d-none');\n      this.quizPage.classList.remove('d-none');\n      this.showQuestion(0);\n      this.scrollToTop();\n    }\n    \n    showQuestion(index) {\n      this.currentQuestion = index;\n      const question = this.questions[index];\n      \n      \/\/ \u66f4\u65b0\u9032\u5ea6\n      this.updateProgress(index);\n      \n      \/\/ \u5efa\u7acb\u554f\u984cHTML\n      let html = `<h3 class=\"question-text\">${index + 1}. ${question}<\/h3>`;\n      html += '<div class=\"options-container\">';\n      \n      this.options.forEach((option, optionIndex) => {\n        const isSelected = this.answers[index] === optionIndex;\n        html += `\n          <div class=\"card option-card ${isSelected ? 'selected' : ''}\" data-value=\"${optionIndex}\">\n            <div class=\"card-body p-3 d-flex align-items-center\">\n              <div class=\"option-indicator\">\n                ${isSelected ? '<i class=\"bi bi-check text-white\"><\/i>' : ''}\n              <\/div>\n              <span class=\"option-text\">${option.text}<\/span>\n            <\/div>\n          <\/div>\n        `;\n      });\n      \n      html += '<\/div>';\n      this.questionContainer.innerHTML = html;\n      \n      \/\/ \u66f4\u65b0\u6309\u9215\u72c0\u614b\n      this.prevButton.disabled = index === 0;\n    }\n    \n    updateProgress(index) {\n      const progress = ((index + 1) \/ this.questions.length) * 100;\n      this.progressBar.style.width = `${progress}%`;\n      this.currentQuestionEl.textContent = index + 1;\n    }\n    \n    selectAnswer(value) {\n      this.answers[this.currentQuestion] = value;\n      \n      \/\/ \u66f4\u65b0\u9078\u4e2d\u72c0\u614b\n      const options = this.questionContainer.querySelectorAll('.option-card');\n      options.forEach((option, index) => {\n        const indicator = option.querySelector('.option-indicator');\n        if (index === value) {\n          option.classList.add('selected');\n          indicator.innerHTML = '<i class=\"bi bi-check text-white\"><\/i>';\n        } else {\n          option.classList.remove('selected');\n          indicator.innerHTML = '';\n        }\n      });\n      \n      \/\/ \u5ef6\u9072\u5f8c\u986f\u793a\u4e0b\u4e00\u984c\u6216\u7d50\u679c\n      setTimeout(() => {\n        if (this.currentQuestion === this.questions.length - 1) {\n          this.showResult();\n        } else {\n          this.showQuestion(this.currentQuestion + 1);\n        }\n      }, 300);\n    }\n    \n    showPreviousQuestion() {\n      if (this.currentQuestion > 0) {\n        this.showQuestion(this.currentQuestion - 1);\n      }\n    }\n    \n    calculateScore() {\n      return this.answers.reduce((total, answer, index) => {\n        return answer >= 0 ? total + this.options[answer].score : total;\n      }, 0);\n    }\n    \n    getResultInterpretation(score) {\n      if (score <= 28) {\n        return {\n          category: \"\u60c5\u7dd2\u7a69\u5b9a\",\n          color: \"success\",\n          description: \"\u4f60\u73fe\u5728\u7684\u60c5\u7dd2\u5927\u81f4\u7a69\u5b9a\uff0c\u6c92\u6709\u660e\u986f\u7684\u6182\u9b31\u60c5\u7dd2\u3002\u901a\u5e38\u53ef\u4ee5\u8655\u7406\u751f\u6d3b\u4e0a\u7684\u58d3\u529b\uff0c\u5efa\u8b70\u4f60\u7e7c\u7e8c\u4fdd\u6301\u826f\u597d\u7684\u5fc3\u60c5\u3002\",\n          suggestions: [\n            \"\u7e7c\u7e8c\u4fdd\u6301\u898f\u5f8b\u7684\u4f5c\u606f\u548c\u904b\u52d5\u7fd2\u6163\",\n            \"\u57f9\u990a\u8208\u8da3\u611b\u597d\uff0c\u8c50\u5bcc\u751f\u6d3b\u5167\u5bb9\",\n            \"\u7dad\u6301\u826f\u597d\u7684\u793e\u4ea4\u95dc\u4fc2\",\n            \"\u5b9a\u671f\u9032\u884c\u81ea\u6211\u60c5\u7dd2\u6aa2\u8996\"\n          ]\n        };\n      } else if (score <= 35) {\n        return {\n          category: \"\u8f15\u5ea6\u60c5\u7dd2\u56f0\u64fe\",\n          color: \"info\", \n          description: \"\u6700\u8fd1\u662f\u5426\u7d93\u6b77\u4e86\u4e00\u4e9b\u632b\u6298\u6216\u4e0d\u6109\u5feb\u7684\u7d93\u9a57\uff1f\u4f60\u53ef\u80fd\u9700\u8981\u591a\u95dc\u6ce8\u81ea\u5df1\u7684\u60c5\u7dd2\u72c0\u614b\u3002\",\n          suggestions: [\n            \"\u5617\u8a66\u5411\u4fe1\u4efb\u7684\u670b\u53cb\u6216\u5bb6\u4eba\u50be\u8a34\",\n            \"\u7df4\u7fd2\u653e\u9b06\u6280\u5de7\uff0c\u5982\u6df1\u547c\u5438\u3001\u51a5\u60f3\",\n            \"\u4fdd\u6301\u5145\u8db3\u7684\u7761\u7720\uff0c\u6bcf\u59297-9\u5c0f\u6642\",\n            \"\u9069\u5ea6\u904b\u52d5\uff0c\u6bcf\u9031\u81f3\u5c113\u6b2130\u5206\u9418\",\n            \"\u5982\u60c5\u6cc1\u6301\u7e8c\uff0c\u53ef\u8003\u616e\u5c0b\u6c42\u5fc3\u7406\u8aee\u8a62\"\n          ]\n        };\n      } else if (score <= 51) {\n        return {\n          category: \"\u4e2d\u5ea6\u6182\u9b31\u60c5\u7dd2\",\n          color: \"warning\",\n          description: \"\u4f60\u7684\u6182\u9b31\u7a0b\u5ea6\u5df2\u7d93\u8f03\u9ad8\uff0c\u53ef\u80fd\u5f71\u97ff\u5230\u65e5\u5e38\u751f\u6d3b\u529f\u80fd\u3002\",\n          suggestions: [\n            \"\u5f37\u70c8\u5efa\u8b70\u5c0b\u6c42\u5c08\u696d\u5fc3\u7406\u8aee\u8a62\u6216\u8f14\u5c0e\",\n            \"\u8207\u8f14\u5c0e\u8001\u5e2b\u6216\u5fc3\u7406\u5e2b\u8a0e\u8ad6\u4f60\u7684\u611f\u53d7\",\n            \"\u907f\u514d\u7368\u8655\u904e\u4e45\uff0c\u4fdd\u6301\u57fa\u672c\u793e\u4ea4\u6d3b\u52d5\",\n            \"\u5efa\u7acb\u65e5\u5e38\u898f\u5f8b\uff0c\u5373\u4f7f\u4e0d\u60f3\u505a\u4e5f\u8981\u5805\u6301\",\n            \"\u8a18\u9304\u5fc3\u60c5\u65e5\u8a18\uff0c\u8ffd\u8e64\u60c5\u7dd2\u8b8a\u5316\",\n            \"\u8003\u616e\u52a0\u5165\u652f\u6301\u5718\u9ad4\"\n          ]\n        };\n      } else {\n        return {\n          category: \"\u91cd\u5ea6\u6182\u9b31\u60c5\u7dd2\",\n          color: \"danger\",\n          description: \"\u4f60\u7684\u60c5\u7dd2\u72c0\u614b\u9700\u8981\u7acb\u5373\u95dc\u6ce8\uff0c\u8acb\u76e1\u5feb\u5c0b\u6c42\u5c08\u696d\u5354\u52a9\u3002\",\n          suggestions: [\n            \"\u8acb\u7acb\u5373\u806f\u7e6b\u5fc3\u7406\u5065\u5eb7\u5c08\u696d\u4eba\u54e1\",\n            \"\u524d\u5f80\u91ab\u9662\u7cbe\u795e\u79d1\u6216\u8eab\u5fc3\u79d1\u5c31\u8a3a\",\n            \"\u544a\u8a34\u4fe1\u4efb\u7684\u4eba\u4f60\u7684\u72c0\u6cc1\uff0c\u4e0d\u8981\u7368\u81ea\u627f\u53d7\",\n            \"\u5982\u6709\u81ea\u50b7\u5ff5\u982d\uff0c\u8acb\u53c3\u8003\u4e0b\u65b9\u7684\u7dca\u6025\u6c42\u52a9\u8cc7\u6e90\",\n            \"\u66ab\u6642\u907f\u514d\u505a\u91cd\u5927\u6c7a\u5b9a\",\n            \"\u63a5\u53d7\u5c08\u696d\u6cbb\u7642\uff0c\u5305\u62ec\u5fc3\u7406\u6cbb\u7642\u548c\u53ef\u80fd\u7684\u85e5\u7269\u6cbb\u7642\"\n          ]\n        };\n      }\n    }\n    \n    getPersonalizedAnalysis(score, dimensionScores) {\n      const highestDimension = Object.entries(dimensionScores).reduce((a, b) => \n        dimensionScores[a[0]] > dimensionScores[b[0]] ? a : b\n      );\n      \n      const lowestDimension = Object.entries(dimensionScores).reduce((a, b) => \n        dimensionScores[a[0]] < dimensionScores[b[0]] ? a : b\n      );\n      \n      let analysis = {\n        mainIssue: highestDimension[0],\n        mainScore: highestDimension[1],\n        strength: lowestDimension[0],\n        strengthScore: lowestDimension[1],\n        patterns: []\n      };\n      \n      \/\/ \u5206\u6790\u6a21\u5f0f\n      if (dimensionScores['\u8eab\u5fc3\u75c7\u72c0'] > 60) {\n        analysis.patterns.push(\"\u4f60\u53ef\u80fd\u6b63\u7d93\u6b77\u660e\u986f\u7684\u8eab\u9ad4\u4e0d\u9069\uff0c\u9019\u53ef\u80fd\u662f\u60c5\u7dd2\u58d3\u529b\u7684\u8868\u73fe\");\n      }\n      if (dimensionScores['\u793e\u4ea4\u9000\u7e2e'] > 60) {\n        analysis.patterns.push(\"\u4f60\u50be\u5411\u65bc\u8ff4\u907f\u793e\u4ea4\u4e92\u52d5\uff0c\u9019\u53ef\u80fd\u52a0\u91cd\u5b64\u7368\u611f\");\n      }\n      if (dimensionScores['\u8a8d\u77e5\u56f0\u96e3'] > 60) {\n        analysis.patterns.push(\"\u5c08\u6ce8\u529b\u548c\u6c7a\u7b56\u80fd\u529b\u53d7\u5230\u5f71\u97ff\uff0c\u53ef\u80fd\u5f71\u97ff\u5b78\u696d\u6216\u5de5\u4f5c\u8868\u73fe\");\n      }\n      if (dimensionScores['\u81ea\u6211\u5426\u5b9a'] > 60) {\n        analysis.patterns.push(\"\u81ea\u6211\u50f9\u503c\u611f\u8f03\u4f4e\uff0c\u9700\u8981\u91cd\u5efa\u81ea\u4fe1\u5fc3\");\n      }\n      if (dimensionScores['\u60c5\u7dd2\u4f4e\u843d'] > 60) {\n        analysis.patterns.push(\"\u6301\u7e8c\u7684\u4f4e\u843d\u60c5\u7dd2\u662f\u4e3b\u8981\u554f\u984c\uff0c\u9700\u8981\u5c08\u696d\u8a55\u4f30\");\n      }\n      \n      return analysis;\n    }\n    \n    calculateDimensionScores() {\n      const dimensionScores = {};\n      \n      Object.entries(this.dimensions).forEach(([dimension, indices]) => {\n        let total = 0;\n        let count = 0;\n        \n        indices.forEach(index => {\n          if (this.answers[index] >= 0) {\n            total += this.options[this.answers[index]].score;\n            count++;\n          }\n        });\n        \n        const percentage = count > 0 ? Math.round((total \/ (count * 3)) * 100) : 0;\n        dimensionScores[dimension] = percentage;\n      });\n      \n      return dimensionScores;\n    }\n    \n    createScoreDistribution(score) {\n      \/\/ \u5275\u5efa\u6a6b\u5411\u5806\u758a\u689d\u5f62\u5716\n      let html = '<div class=\"score-bar\">';\n      let markerPosition = (score \/ 96) * 100; \/\/ 96\u662f\u6700\u9ad8\u53ef\u80fd\u5206\u6578\n      \n      this.scoreRanges.forEach(range => {\n        const width = ((range.max - range.min + 1) \/ 97) * 100;\n        html += `\n          <div class=\"score-segment\" style=\"width: ${width}%; background: ${range.color};\">\n            ${range.label}\n          <\/div>\n        `;\n      });\n      \n      html += `<div class=\"score-marker\" style=\"left: ${markerPosition}%;\"><\/div>`;\n      html += '<\/div>';\n      \n      this.scoreDistributionEl.innerHTML = html;\n      \n      \/\/ \u5275\u5efa\u5716\u4f8b\n      let legendHtml = '<div class=\"text-center\">';\n      this.scoreRanges.forEach(range => {\n        legendHtml += `\n          <span class=\"legend-item\">\n            <span class=\"legend-color\" style=\"background: ${range.color};\"><\/span>\n            <span>${range.label}: ${range.min}-${range.max}\u5206<\/span>\n          <\/span>\n        `;\n      });\n      legendHtml += '<\/div>';\n      \n      this.distributionLegendEl.innerHTML = legendHtml;\n    }\n    \n    showResult() {\n      const score = this.calculateScore();\n      const interpretation = this.getResultInterpretation(score);\n      const dimensionScores = this.calculateDimensionScores();\n      const personalizedAnalysis = this.getPersonalizedAnalysis(score, dimensionScores);\n      \n      \/\/ \u66f4\u65b0\u5206\u6578\u548c\u985e\u5225\n      this.finalScoreEl.textContent = score;\n      this.resultCategoryEl.textContent = interpretation.category;\n      this.resultCategoryEl.className = `mb-0 fw-bold text-${interpretation.color}`;\n      \n      \/\/ \u66f4\u65b0\u5206\u6578\u5713\u5708\u984f\u8272\n      const scoreCircle = document.getElementById('score-circle');\n      const range = this.scoreRanges.find(r => score >= r.min && score <= r.max);\n      if (range) {\n        scoreCircle.style.background = `linear-gradient(135deg, ${range.color} 0%, ${range.color}dd 100%)`;\n      }\n      \n      \/\/ \u986f\u793a\u6216\u96b1\u85cf\u6c42\u52a9\u8cc7\u6e90\uff08\u5206\u6578\u5927\u65bc35\u5206\u6642\u986f\u793a\uff09\n      const helpResourcesSection = document.getElementById('help-resources-section');\n      if (score > 35) {\n        helpResourcesSection.style.display = 'block';\n      } else {\n        helpResourcesSection.style.display = 'none';\n      }\n      \n      \/\/ \u5275\u5efa\u5206\u6578\u5206\u5e03\u5716\n      this.createScoreDistribution(score);\n      \n      \/\/ \u986f\u793a\u500b\u6027\u5316\u5206\u6790\n      let analysisHtml = '<div class=\"row\">';\n      analysisHtml += '<div class=\"col-md-6 mb-3\">';\n      analysisHtml += `\n        <h5 class=\"fw-bold mb-3\">\u4e3b\u8981\u95dc\u6ce8\u9818\u57df<\/h5>\n        <div class=\"alert alert-warning\">\n          <strong>${personalizedAnalysis.mainIssue}<\/strong>\n          <div class=\"progress mt-2\" style=\"height: 20px;\">\n            <div class=\"progress-bar bg-warning\" style=\"width: ${personalizedAnalysis.mainScore}%;\">\n              ${personalizedAnalysis.mainScore}%\n            <\/div>\n          <\/div>\n        <\/div>\n      `;\n      analysisHtml += '<\/div>';\n      \n      analysisHtml += '<div class=\"col-md-6 mb-3\">';\n      analysisHtml += `\n        <h5 class=\"fw-bold mb-3\">\u76f8\u5c0d\u512a\u52e2\u9818\u57df<\/h5>\n        <div class=\"alert alert-success\">\n          <strong>${personalizedAnalysis.strength}<\/strong>\n          <div class=\"progress mt-2\" style=\"height: 20px;\">\n            <div class=\"progress-bar bg-success\" style=\"width: ${100 - personalizedAnalysis.strengthScore}%;\">\n              \u72c0\u6cc1\u8f03\u4f73\n            <\/div>\n          <\/div>\n        <\/div>\n      `;\n      analysisHtml += '<\/div>';\n      analysisHtml += '<\/div>';\n      \n      if (personalizedAnalysis.patterns.length > 0) {\n        analysisHtml += '<h5 class=\"fw-bold mb-3\">\u884c\u70ba\u6a21\u5f0f\u89c0\u5bdf<\/h5>';\n        analysisHtml += '<ul class=\"list-group list-group-flush\">';\n        personalizedAnalysis.patterns.forEach(pattern => {\n          analysisHtml += `<li class=\"list-group-item\"><i class=\"bi bi-arrow-right-circle text-primary me-2\"><\/i>${pattern}<\/li>`;\n        });\n        analysisHtml += '<\/ul>';\n      }\n      \n      this.personalizedAnalysisEl.innerHTML = analysisHtml;\n      \n      \/\/ \u66f4\u65b0\u5efa\u8b70\n      let interpretationHtml = `<p class=\"lead mb-4\">${interpretation.description}<\/p>`;\n      interpretationHtml += '<h5 class=\"fw-bold mb-3\">\u5efa\u8b70\u884c\u52d5<\/h5>';\n      interpretationHtml += '<div class=\"row\">';\n      interpretation.suggestions.forEach((suggestion, index) => {\n        interpretationHtml += `\n          <div class=\"col-md-6 mb-2\">\n            <div class=\"d-flex align-items-start\">\n              <span class=\"badge bg-primary me-2\">${index + 1}<\/span>\n              <span>${suggestion}<\/span>\n            <\/div>\n          <\/div>\n        `;\n      });\n      interpretationHtml += '<\/div>';\n      \n      this.resultInterpretationEl.innerHTML = interpretationHtml;\n      \n      \/\/ \u986f\u793a\u7dad\u5ea6\u8a73\u60c5\n      let dimensionHtml = '';\n      Object.entries(dimensionScores).forEach(([dimension, percentage]) => {\n        let badgeColor = 'secondary';\n        if (percentage >= 70) badgeColor = 'danger';\n        else if (percentage >= 50) badgeColor = 'warning';\n        else if (percentage >= 30) badgeColor = 'info';\n        else badgeColor = 'success';\n        \n        dimensionHtml += `\n          <div class=\"col-6 col-md-4 col-lg-2\">\n            <div class=\"text-center p-2\">\n              <div class=\"small text-muted\">${dimension}<\/div>\n              <span class=\"badge bg-${badgeColor} fs-6\">${percentage}%<\/span>\n            <\/div>\n          <\/div>\n        `;\n      });\n      this.dimensionDetailsEl.innerHTML = dimensionHtml;\n      \n      \/\/ \u5207\u63db\u9801\u9762\n      this.quizPage.classList.add('d-none');\n      this.resultPage.classList.remove('d-none');\n      this.scrollToTop();\n      \n      \/\/ \u5efa\u7acb\u5716\u8868\n      this.createChart(dimensionScores);\n    }\n    \n    createChart(dimensionScores) {\n      \/\/ \u92b7\u6bc0\u820a\u5716\u8868\n      if (this.chartInstance) {\n        this.chartInstance.destroy();\n      }\n      \n      const ctx = document.getElementById('result-chart').getContext('2d');\n      \n      this.chartInstance = new Chart(ctx, {\n        type: 'radar',\n        data: {\n          labels: Object.keys(dimensionScores),\n          datasets: [{\n            label: '\u60c5\u7dd2\u6aa2\u6e2c\u7d50\u679c',\n            data: Object.values(dimensionScores),\n            backgroundColor: 'rgba(102, 126, 234, 0.2)',\n            borderColor: 'rgba(102, 126, 234, 1)',\n            borderWidth: 2,\n            pointBackgroundColor: 'rgba(102, 126, 234, 1)',\n            pointBorderColor: '#fff',\n            pointHoverRadius: 8,\n            pointRadius: 6,\n            pointBorderWidth: 2\n          }]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          scales: {\n            r: {\n              beginAtZero: true,\n              max: 100,\n              ticks: {\n                stepSize: 20,\n                callback: value => value + '%',\n                font: {\n                  size: 14\n                }\n              },\n              pointLabels: {\n                font: {\n                  size: 18,\n                  family: '\"Microsoft JhengHei\", \"\u5fae\u8edf\u6b63\u9ed1\u9ad4\", sans-serif',\n                  weight: '600'\n                },\n                color: '#2c3e50'\n              },\n              grid: {\n                color: 'rgba(0, 0, 0, 0.1)',\n                lineWidth: 1\n              }\n            }\n          },\n          plugins: {\n            legend: {\n              display: false\n            },\n            tooltip: {\n              callbacks: {\n                label: context => `${context.label}: ${context.raw}%`\n              },\n              titleFont: {\n                size: 16\n              },\n              bodyFont: {\n                size: 14\n              },\n              padding: 12,\n              backgroundColor: 'rgba(0, 0, 0, 0.8)'\n            }\n          }\n        }\n      });\n    }\n    \n    restartTest() {\n      \/\/ \u91cd\u7f6e\u8cc7\u6599\n      this.answers = new Array(this.questions.length).fill(-1);\n      this.currentQuestion = 0;\n      \n      \/\/ \u92b7\u6bc0\u5716\u8868\n      if (this.chartInstance) {\n        this.chartInstance.destroy();\n        this.chartInstance = null;\n      }\n      \n      \/\/ \u5207\u63db\u9801\u9762\n      this.resultPage.classList.add('d-none');\n      this.introPage.classList.remove('d-none');\n      this.scrollToTop();\n    }\n    \n    scrollToTop() {\n      const targetElement = this.app.querySelector('section:not(.d-none) h2');\n      if (targetElement) {\n        targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      }\n    }\n  }\n  \n  \/\/ DOM\u8f09\u5165\u5b8c\u6210\u5f8c\u521d\u59cb\u5316\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', () => new MoodAssessmentQuiz());\n  } else {\n    new MoodAssessmentQuiz();\n  }\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u672c\u6d4b\u9a8c\u7ea6\u97005\u5206\u949f\uff0c\u76ee\u6807\u4e3a\u534f\u52a9\u5b66\u751f\u68c0\u6d4b\u81ea\u5df1\u8fd1\u671f\u7684\u60c5\u7eea\u72b6\u6001\u3002\u6b22\u8fce18\u5c81~24\u5c81\u4e14\u6b63\u5c31\u8bfb\u4e8e\u5927\u4e13\u9662\u6821\u7684\u5b66\u751f\u4f7f\u7528\uff01\u63d0\u9192\u60a8\uff0c\u6b64\u6d4b\u9a8c\u4e0d\u662f\u8bca\u65ad\uff0c\u6709\u5fe7\u90c1\u75c7\u503e\u5411\u8bf7\u5bfb\u6c42\u4e13\u4e1a\u533b\u7597\u534f\u52a9<\/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":"","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":[169,165,162],"tags":[187,182,180],"class_list":["post-5696","post","type-post","status-publish","format-standard","hentry","category-psychological-symptom-scales","category-neuropsychological","category-clinical","tag-college-students","tag-depression","tag-depression-1"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/5696","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=5696"}],"version-history":[{"count":25,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/5696\/revisions"}],"predecessor-version":[{"id":10261,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/5696\/revisions\/10261"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=5696"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=5696"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=5696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}