{"id":9228,"date":"2025-04-25T09:06:08","date_gmt":"2025-04-25T01:06:08","guid":{"rendered":"https:\/\/xinliceyan.org\/?p=9228"},"modified":"2025-05-22T00:44:00","modified_gmt":"2025-05-21T16:44:00","slug":"sad","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/sad","title":{"rendered":"\u793e\u4ea4\u56de\u907f\u53ca\u82e6\u607c\u91cf\u8868\u514d\u8d39\u5728\u7ebf\u6d4b\u9a8c\uff0828\u9898\uff09"},"content":{"rendered":"\n<!-- HTML Structure -->\n<main class=\"saq-main-container\" data-current-page=\"landing\">\n    <!-- Landing Page -->\n    <section class=\"saq-page saq-landing-page\" data-page=\"landing\">\n        <header class=\"saq-landing-header\">\n            <h1 class=\"saq-main-title\">\u793e\u4ea4\u60c5\u5883\u7126\u616e\u91cf\u8868<\/h1>\n            <p class=\"saq-subtitle\">\u77ad\u89e3\u60a8\u7684\u793e\u4ea4\u4e92\u52d5\u6a21\u5f0f\uff0c\u63d0\u5347\u4eba\u969b\u95dc\u4fc2\u54c1\u8cea<\/p>\n        <\/header>\n        \n        <article class=\"saq-intro-content\">\n            <div class=\"saq-feature-cards\">\n                <div class=\"saq-feature-card\">\n                    <div class=\"saq-feature-icon saq-icon-assessment\"><\/div>\n                    <h3>\u5c08\u696d\u8a55\u4f30<\/h3>\n                    <p>\u57fa\u65bcWatson &#038; Friend\uff081969\uff09\u958b\u767c\u7684\u6b0a\u5a01\u91cf\u8868\uff0c\u79d1\u5b78\u6e2c\u91cf\u793e\u4ea4\u7126\u616e\u7a0b\u5ea6<\/p>\n                <\/div>\n                <div class=\"saq-feature-card\">\n                    <div class=\"saq-feature-icon saq-icon-insights\"><\/div>\n                    <h3>\u6df1\u5ea6\u6d1e\u5bdf<\/h3>\n                    <p>\u5168\u9762\u5206\u6790\u60a8\u7684\u793e\u4ea4\u8ff4\u907f\u8207\u82e6\u60f1\u6a21\u5f0f\uff0c\u63d0\u4f9b\u500b\u4eba\u5316\u6539\u5584\u5efa\u8b70<\/p>\n                <\/div>\n                <div class=\"saq-feature-card\">\n                    <div class=\"saq-feature-icon saq-icon-privacy\"><\/div>\n                    <h3>\u96b1\u79c1\u4fdd\u8b77<\/h3>\n                    <p>\u6240\u6709\u6e2c\u9a57\u7d50\u679c\u50c5\u4f9b\u500b\u4eba\u53c3\u8003\uff0c\u4e0d\u6703\u5132\u5b58\u6216\u5206\u4eab\u60a8\u7684\u4efb\u4f55\u8cc7\u6599<\/p>\n                <\/div>\n            <\/div>\n            \n            <div class=\"saq-intro-text\">\n                <p>\u793e\u4ea4\u60c5\u5883\u7126\u616e\u91cf\u8868\u662f\u8a55\u4f30\u500b\u9ad4\u5728\u793e\u4ea4\u5834\u5408\u4e2d\u7126\u616e\u7a0b\u5ea6\u7684\u6a19\u6e96\u5316\u5de5\u5177\u3002\u900f\u904e28\u500b\u7cbe\u5fc3\u8a2d\u8a08\u7684\u554f\u984c\uff0c\u6211\u5011\u5c07\u5e6b\u52a9\u60a8\uff1a<\/p>\n                <ul class=\"saq-benefits-list\">\n                    <li>\u8b58\u5225\u793e\u4ea4\u7126\u616e\u7684\u5177\u9ad4\u8868\u73fe\u5f62\u5f0f<\/li>\n                    <li>\u77ad\u89e3\u793e\u4ea4\u8ff4\u907f\u884c\u70ba\u7684\u5f71\u97ff\u7a0b\u5ea6<\/li>\n                    <li>\u7372\u5f97\u6539\u5584\u4eba\u969b\u95dc\u4fc2\u7684\u5be6\u7528\u5efa\u8b70<\/li>\n                    <li>\u5efa\u7acb\u66f4\u81ea\u4fe1\u7684\u793e\u4ea4\u4e92\u52d5\u6a21\u5f0f<\/li>\n                <\/ul>\n            <\/div>\n        <\/article>\n        \n        <footer class=\"saq-landing-footer\">\n            <button class=\"saq-start-btn\" type=\"button\" id=\"saq-start-quiz-btn\">\n                <span>\u958b\u59cb\u6e2c\u9a57<\/span>\n                <div class=\"saq-btn-icon\">\u2192<\/div>\n            <\/button>\n            <p class=\"saq-duration-info\">\u9810\u8a08\u9700\u89815-8\u5206\u9418<\/p>\n        <\/footer>\n    <\/section>\n\n    <!-- Quiz Page -->\n    <section class=\"saq-page saq-quiz-page\" data-page=\"quiz\">\n        <header class=\"saq-quiz-header\">\n            <h2 class=\"saq-page-title\">\u793e\u4ea4\u60c5\u5883\u7126\u616e\u91cf\u8868\u6e2c\u9a57<\/h2>\n            <div class=\"saq-progress-container\">\n                <div class=\"saq-progress-info\">\n                    <span class=\"saq-current-question\">1<\/span> \/ <span class=\"saq-total-questions\">28<\/span>\n                <\/div>\n                <div class=\"saq-progress-bar\">\n                    <div class=\"saq-progress-fill\"><\/div>\n                <\/div>\n            <\/div>\n        <\/header>\n        \n        <article class=\"saq-question-container\">\n            <h3 class=\"saq-question-text\" id=\"saq-question-text\"><\/h3>\n            <div class=\"saq-options-container\" id=\"saq-options-container\">\n                <!-- Options will be dynamically generated -->\n            <\/div>\n        <\/article>\n        \n        <footer class=\"saq-quiz-footer\">\n            <button class=\"saq-prev-btn\" type=\"button\" id=\"saq-prev-question-btn\" style=\"display: none;\">\u4e0a\u4e00\u984c<\/button>\n        <\/footer>\n    <\/section>\n\n    <!-- Results Page -->\n    <section class=\"saq-page saq-results-page\" data-page=\"results\">\n        <header class=\"saq-results-header\">\n            <h2 class=\"saq-page-title\">\u6e2c\u9a57\u7d50\u679c<\/h2>\n        <\/header>\n        \n        <article class=\"saq-results-content\">\n            <div class=\"saq-score-overview\">\n                <div class=\"saq-total-score\">\n                    <span class=\"saq-score-label\">\u7e3d\u5206<\/span>\n                    <span class=\"saq-score-value\" id=\"saq-total-score\">0<\/span>\n                    <span class=\"saq-score-max\">\/ 28<\/span>\n                <\/div>\n                <div class=\"saq-level-indicator\" id=\"saq-anxiety-level\"><\/div>\n            <\/div>\n\n            <div class=\"saq-chart-container\">\n                <canvas id=\"saqResultsChart\"><\/canvas>\n            <\/div>\n\n            <div class=\"saq-detailed-results\">\n                <div class=\"saq-interpretation\" id=\"saq-interpretation\"><\/div>\n                \n                <div class=\"saq-recommendations\">\n                    <h3>\u500b\u4eba\u5316\u5efa\u8b70<\/h3>\n                    <div class=\"saq-recommendation-content\" id=\"saq-recommendations\"><\/div>\n                <\/div>\n            <\/div>\n        <\/article>\n        \n        <footer class=\"saq-results-footer\">\n            <button class=\"saq-restart-btn\" type=\"button\" id=\"saq-restart-quiz-btn\">\u91cd\u65b0\u6e2c\u9a57<\/button>\n        <\/footer>\n    <\/section>\n<\/main>\n\n<!-- CSS Styles -->\n<style>\n    \/* CSS Variables and Custom Properties *\/\n    :root {\n        \/* Color Scheme *\/\n        --saq-primary-color: #2C5282;\n        --saq-primary-light: #3182CE;\n        --saq-primary-dark: #1A365D;\n        --saq-secondary-color: #38B2AC;\n        --saq-accent-color: #E53E3E;\n        --saq-success-color: #38A169;\n        --saq-warning-color: #D69E2E;\n        \n        \/* Neutral Colors *\/\n        --saq-text-primary: #1A202C;\n        --saq-text-secondary: #4A5568;\n        --saq-text-muted: #718096;\n        --saq-bg-primary: #FFFFFF;\n        --saq-bg-secondary: #F7FAFC;\n        --saq-bg-accent: #EBF8FF;\n        --saq-border-color: #E2E8F0;\n        --saq-border-light: #F1F5F9;\n        \n        \/* Gradients *\/\n        --saq-gradient-primary: linear-gradient(135deg, var(--saq-primary-color) 0%, var(--saq-primary-light) 100%);\n        --saq-gradient-secondary: linear-gradient(135deg, var(--saq-secondary-color) 0%, #4FD1C7 100%);\n        \n        \/* Typography *\/\n        --saq-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n        --saq-font-size-xs: 14px;\n        --saq-font-size-sm: 16px;\n        --saq-font-size-base: 18px;\n        --saq-font-size-lg: 20px;\n        --saq-font-size-xl: 24px;\n        --saq-font-size-2xl: 28px;\n        --saq-font-size-3xl: 32px;\n        --saq-font-size-4xl: 40px;\n        \n        \/* Spacing (8px grid system) *\/\n        --saq-space-1: 8px;\n        --saq-space-2: 16px;\n        --saq-space-3: 24px;\n        --saq-space-4: 32px;\n        --saq-space-5: 40px;\n        --saq-space-6: 48px;\n        --saq-space-8: 64px;\n        --saq-space-10: 80px;\n        \n        \/* Shadows *\/\n        --saq-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);\n        --saq-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);\n        --saq-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);\n        --saq-shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.15);\n        \n        \/* Border Radius *\/\n        --saq-radius-sm: 4px;\n        --saq-radius-md: 8px;\n        --saq-radius-lg: 12px;\n        --saq-radius-xl: 16px;\n        --saq-radius-full: 50%;\n        \n        \/* Transitions *\/\n        --saq-transition-fast: 0.15s ease;\n        --saq-transition-normal: 0.3s ease;\n        --saq-transition-slow: 0.5s ease;\n    }\n\n    \/* Reset and Base Styles *\/\n    .saq-main-container * {\n        box-sizing: border-box;\n    }\n\n    .saq-main-container {\n        font-family: var(--saq-font-family);\n        line-height: 1.6;\n        color: var(--saq-text-primary);\n        background-color: var(--saq-bg-primary);\n        margin: 0;\n        padding: var(--saq-space-2);\n        min-height: 100vh;\n        overflow-x: hidden;\n        max-width: 750px;\n        margin: 0 auto;\n    }\n\n    \/* Page Management *\/\n    .saq-page {\n        display: none;\n        opacity: 0;\n        transform: translateY(20px);\n        transition: opacity var(--saq-transition-normal), transform var(--saq-transition-normal);\n        width: 100%;\n        padding: var(--saq-space-3);\n    }\n\n    .saq-page.saq-active {\n        display: block;\n        opacity: 1;\n        transform: translateY(0);\n    }\n\n    \/* Typography *\/\n    .saq-main-title {\n        font-size: var(--saq-font-size-4xl);\n        font-weight: 700;\n        text-align: center;\n        color: var(--saq-primary-color);\n        margin: 0 0 var(--saq-space-2) 0;\n        line-height: 1.2;\n    }\n\n    .saq-subtitle {\n        font-size: var(--saq-font-size-lg);\n        color: var(--saq-text-secondary);\n        text-align: center;\n        margin: 0 0 var(--saq-space-6) 0;\n        font-weight: 400;\n    }\n\n    .saq-page-title {\n        font-size: var(--saq-font-size-2xl);\n        font-weight: 600;\n        text-align: center;\n        color: var(--saq-primary-color);\n        margin: 0 0 var(--saq-space-4) 0;\n    }\n\n    \/* Landing Page Styles *\/\n    .saq-landing-header {\n        margin-bottom: var(--saq-space-6);\n    }\n\n    .saq-feature-cards {\n        display: flex;\n        justify-content: space-between;\n        gap: var(--saq-space-2);\n        margin-bottom: var(--saq-space-6);\n        flex-wrap: nowrap;\n    }\n\n    .saq-feature-card {\n        background: var(--saq-bg-accent);\n        border-radius: var(--saq-radius-lg);\n        padding: var(--saq-space-3);\n        text-align: center;\n        border: 1px solid var(--saq-border-light);\n        transition: transform var(--saq-transition-fast), box-shadow var(--saq-transition-fast);\n        flex: 1;\n        min-width: 0;\n        max-width: none;\n    }\n\n    .saq-feature-card:hover {\n        transform: translateY(-4px);\n        box-shadow: var(--saq-shadow-lg);\n    }\n\n    .saq-feature-icon {\n        width: 56px;\n        height: 56px;\n        border-radius: var(--saq-radius-full);\n        margin: 0 auto var(--saq-space-2) auto;\n        background: var(--saq-gradient-primary);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        position: relative;\n        overflow: hidden;\n    }\n\n    .saq-feature-icon::before {\n        content: '';\n        position: absolute;\n        width: 24px;\n        height: 24px;\n        background: white;\n        border-radius: var(--saq-radius-sm);\n    }\n\n    .saq-icon-assessment::before {\n        mask: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'\/%3E%3C\/svg%3E\") center\/cover;\n    }\n\n    .saq-icon-insights::before {\n        mask: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'\/%3E%3C\/svg%3E\") center\/cover;\n    }\n\n    .saq-icon-privacy::before {\n        mask: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,7C13.4,7 14.8,8.6 14.8,10V11H15.5C16.4,11 17,11.4 17,12V16C17,16.6 16.6,17 16,17H8C7.4,17 7,16.6 7,16V12C7,11.4 7.4,11 8,11H8.5V10C8.5,8.6 9.6,7 12,7M12,8.2C10.2,8.2 9.5,9.2 9.5,10V11H14.5V10C14.5,9.2 13.8,8.2 12,8.2Z'\/%3E%3C\/svg%3E\") center\/cover;\n    }\n\n    .saq-feature-card h3 {\n        font-size: var(--saq-font-size-lg);\n        font-weight: 600;\n        color: var(--saq-primary-color);\n        margin: 0 0 var(--saq-space-1) 0;\n    }\n\n    .saq-feature-card p {\n        font-size: var(--saq-font-size-sm);\n        color: var(--saq-text-secondary);\n        margin: 0;\n        line-height: 1.5;\n    }\n\n    .saq-intro-text {\n        background: var(--saq-bg-secondary);\n        border-radius: var(--saq-radius-lg);\n        padding: var(--saq-space-4);\n        margin-bottom: var(--saq-space-6);\n    }\n\n    .saq-intro-text p {\n        font-size: var(--saq-font-size-base);\n        margin: 0 0 var(--saq-space-2) 0;\n    }\n\n    .saq-benefits-list {\n        list-style: none;\n        padding: 0;\n        margin: 0;\n    }\n\n    .saq-benefits-list li {\n        position: relative;\n        padding-left: var(--saq-space-4);\n        margin-bottom: var(--saq-space-1);\n        font-size: var(--saq-font-size-base);\n    }\n\n    .saq-benefits-list li::before {\n        content: '\u2713';\n        position: absolute;\n        left: 0;\n        color: var(--saq-success-color);\n        font-weight: bold;\n    }\n\n    .saq-landing-footer {\n        text-align: center;\n    }\n\n    .saq-start-btn {\n        background: var(--saq-gradient-primary);\n        color: white;\n        border: none;\n        border-radius: var(--saq-radius-lg);\n        padding: var(--saq-space-3) var(--saq-space-6);\n        font-size: var(--saq-font-size-lg);\n        font-weight: 600;\n        cursor: pointer;\n        display: inline-flex;\n        align-items: center;\n        gap: var(--saq-space-1);\n        transition: all var(--saq-transition-fast);\n        box-shadow: var(--saq-shadow-md);\n        min-height: 56px;\n        min-width: 200px;\n        justify-content: center;\n    }\n\n    .saq-start-btn:hover {\n        transform: translateY(-2px);\n        box-shadow: var(--saq-shadow-lg);\n        background: var(--saq-primary-dark);\n    }\n\n    .saq-btn-icon {\n        font-size: var(--saq-font-size-xl);\n        transition: transform var(--saq-transition-fast);\n    }\n\n    .saq-start-btn:hover .saq-btn-icon {\n        transform: translateX(4px);\n    }\n\n    .saq-duration-info {\n        margin-top: var(--saq-space-2);\n        color: var(--saq-text-muted);\n        font-size: var(--saq-font-size-sm);\n    }\n\n    \/* Quiz Page Styles *\/\n    .saq-quiz-header {\n        margin-bottom: var(--saq-space-4);\n    }\n\n    .saq-progress-container {\n        background: var(--saq-bg-secondary);\n        border-radius: var(--saq-radius-lg);\n        padding: var(--saq-space-3);\n        margin-top: var(--saq-space-2);\n    }\n\n    .saq-progress-info {\n        text-align: center;\n        font-size: var(--saq-font-size-lg);\n        font-weight: 600;\n        color: var(--saq-primary-color);\n        margin-bottom: var(--saq-space-2);\n    }\n\n    .saq-progress-bar {\n        width: 100%;\n        height: 8px;\n        background: var(--saq-border-color);\n        border-radius: var(--saq-radius-sm);\n        overflow: hidden;\n    }\n\n    .saq-progress-fill {\n        height: 100%;\n        background: var(--saq-gradient-primary);\n        transition: width var(--saq-transition-normal);\n        width: 0%;\n    }\n\n    .saq-question-container {\n        background: var(--saq-bg-secondary);\n        border-radius: var(--saq-radius-lg);\n        padding: var(--saq-space-4);\n        margin-bottom: var(--saq-space-4);\n        min-height: 320px;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n    }\n\n    .saq-question-text {\n        font-size: 22px;\n        font-weight: 700;\n        color: var(--saq-text-primary);\n        margin: 0 0 var(--saq-space-4) 0;\n        line-height: 1.4;\n        text-align: left;\n    }\n\n    .saq-options-container {\n        display: flex;\n        flex-direction: column;\n        gap: var(--saq-space-2);\n    }\n\n    .saq-option {\n        background: var(--saq-bg-primary);\n        border: 2px solid var(--saq-border-color);\n        border-radius: var(--saq-radius-md);\n        padding: var(--saq-space-3);\n        font-size: 18px;\n        cursor: pointer;\n        transition: all var(--saq-transition-fast);\n        min-height: 56px;\n        display: flex;\n        align-items: center;\n        color: var(--saq-text-primary);\n        font-weight: 500;\n    }\n\n    .saq-option:hover {\n        border-color: var(--saq-primary-light);\n        background: var(--saq-bg-accent);\n        color: var(--saq-primary-color);\n        transform: translateY(-1px);\n    }\n\n    .saq-option.saq-selected {\n        background: var(--saq-gradient-primary);\n        border-color: var(--saq-primary-color);\n        color: white;\n        transform: translateY(-2px);\n        box-shadow: var(--saq-shadow-md);\n    }\n\n    .saq-quiz-footer {\n        text-align: center;\n    }\n\n    .saq-prev-btn {\n        background: var(--saq-bg-secondary);\n        color: var(--saq-text-primary);\n        border: 2px solid var(--saq-border-color);\n        border-radius: var(--saq-radius-md);\n        padding: var(--saq-space-2) var(--saq-space-4);\n        font-size: var(--saq-font-size-base);\n        cursor: pointer;\n        transition: all var(--saq-transition-fast);\n        min-height: 48px;\n        display: inline-block;\n        margin: 0 auto;\n    }\n\n    .saq-prev-btn:hover {\n        background: var(--saq-bg-accent);\n        border-color: var(--saq-primary-light);\n    }\n\n    \/* Results Page Styles *\/\n    .saq-results-header {\n        margin-bottom: var(--saq-space-4);\n    }\n\n    .saq-score-overview {\n        background: var(--saq-gradient-primary);\n        color: white;\n        border-radius: var(--saq-radius-lg);\n        padding: var(--saq-space-4);\n        text-align: center;\n        margin-bottom: var(--saq-space-4);\n    }\n\n    .saq-total-score {\n        display: flex;\n        align-items: baseline;\n        justify-content: center;\n        gap: var(--saq-space-1);\n        margin-bottom: var(--saq-space-2);\n    }\n\n    .saq-score-label {\n        font-size: var(--saq-font-size-lg);\n        opacity: 0.9;\n    }\n\n    .saq-score-value {\n        font-size: var(--saq-font-size-4xl);\n        font-weight: 700;\n    }\n\n    .saq-score-max {\n        font-size: var(--saq-font-size-lg);\n        opacity: 0.8;\n    }\n\n    .saq-level-indicator {\n        font-size: var(--saq-font-size-xl);\n        font-weight: 600;\n        padding: var(--saq-space-1) var(--saq-space-3);\n        background: rgba(255, 255, 255, 0.2);\n        border-radius: var(--saq-radius-md);\n        display: inline-block;\n    }\n\n    .saq-chart-container {\n        background: var(--saq-bg-secondary);\n        border-radius: var(--saq-radius-lg);\n        padding: var(--saq-space-4);\n        margin-bottom: var(--saq-space-4);\n        height: 400px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    .saq-detailed-results {\n        display: flex;\n        flex-direction: column;\n        gap: var(--saq-space-4);\n    }\n\n    .saq-interpretation {\n        background: var(--saq-bg-accent);\n        border-radius: var(--saq-radius-lg);\n        padding: var(--saq-space-4);\n        border-left: 4px solid var(--saq-primary-color);\n    }\n\n    .saq-recommendations {\n        background: var(--saq-bg-secondary);\n        border-radius: var(--saq-radius-lg);\n        padding: var(--saq-space-4);\n    }\n\n    .saq-recommendations h3 {\n        font-size: var(--saq-font-size-xl);\n        font-weight: 600;\n        color: var(--saq-primary-color);\n        margin: 0 0 var(--saq-space-2) 0;\n    }\n\n    .saq-recommendation-content {\n        font-size: var(--saq-font-size-base);\n        line-height: 1.7;\n    }\n\n    .saq-results-footer {\n        text-align: center;\n        margin-top: var(--saq-space-6);\n    }\n\n    .saq-restart-btn {\n        background: var(--saq-gradient-secondary);\n        color: white;\n        border: none;\n        border-radius: var(--saq-radius-lg);\n        padding: var(--saq-space-3) var(--saq-space-6);\n        font-size: var(--saq-font-size-lg);\n        font-weight: 600;\n        cursor: pointer;\n        transition: all var(--saq-transition-fast);\n        box-shadow: var(--saq-shadow-md);\n        min-height: 56px;\n        min-width: 200px;\n    }\n\n    .saq-restart-btn:hover {\n        transform: translateY(-2px);\n        box-shadow: var(--saq-shadow-lg);\n        filter: brightness(1.1);\n    }\n\n    \/* Mobile Responsiveness *\/\n    @media (max-width: 600px) {\n        .saq-main-container {\n            padding: var(--saq-space-1);\n        }\n\n        .saq-page {\n            padding: var(--saq-space-2);\n        }\n\n        .saq-main-title {\n            font-size: var(--saq-font-size-3xl);\n        }\n\n        .saq-feature-cards {\n            flex-direction: column;\n            align-items: center;\n        }\n\n        .saq-feature-card {\n            width: 100%;\n            max-width: 100%;\n            padding: var(--saq-space-3);\n        }\n\n        .saq-question-text {\n            font-size: 20px;\n        }\n\n        .saq-option {\n            font-size: var(--saq-font-size-base);\n            padding: var(--saq-space-2);\n        }\n\n        .saq-chart-container {\n            height: 300px;\n            padding: var(--saq-space-2);\n        }\n\n        .saq-start-btn,\n        .saq-restart-btn {\n            width: 100%;\n            max-width: 300px;\n        }\n    }\n\n    @media (max-width: 480px) {\n        .saq-main-title {\n            font-size: var(--saq-font-size-2xl);\n        }\n\n        .saq-subtitle {\n            font-size: var(--saq-font-size-base);\n        }\n\n        .saq-question-text {\n            font-size: 18px;\n        }\n\n        .saq-chart-container {\n            height: 250px;\n        }\n    }\n\n    @media (min-width: 601px) {\n        .saq-feature-cards {\n            justify-content: space-around;\n        }\n        \n        .saq-feature-card {\n            flex: 0 1 30%;\n            min-width: 180px;\n        }\n    }\n<\/style>\n\n<!-- JavaScript Behavior -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n<script>\n    \/\/ Social Anxiety Quiz Application\n    (function() {\n        'use strict';\n\n        \/\/ Quiz Data Configuration\n        const QUIZ_DATA = {\n            questions: [\n                { id: 1, text: \"\u5373\u4f7f\u5728\u4e0d\u719f\u6089\u7684\u793e\u4ea4\u5834\u5408\u88e1\u6211\u4ecd\u611f\u5230\u653e\u9b06\", options: [{ text: \"\u662f\", score: 0 }, { text: \"\u5426\", score: 1 }] },\n                { id: 2, text: \"\u6211\u5118\u91cf\u907f\u514d\u8feb\u4f7f\u6211\u53c3\u52a0\u4ea4\u969b\u61c9\u916c\u7684\u60c5\u5f62\", options: [{ text: \"\u662f\", score: 1 }, { text: \"\u5426\", score: 0 }] },\n                { id: 3, text: \"\u6211\u540c\u964c\u751f\u4eba\u5728\u4e00\u8d77\u6642\u5f88\u5bb9\u6613\u653e\u9b06\", options: [{ text: \"\u662f\", score: 0 }, { text: \"\u5426\", score: 1 }] },\n                { id: 4, text: \"\u6211\u4e26\u4e0d\u7279\u5225\u60f3\u53bb\u8ff4\u907f\u4eba\u5011\", options: [{ text: \"\u662f\", score: 0 }, { text: \"\u5426\", score: 1 }] },\n                { id: 5, text: \"\u6211\u901a\u5e38\u767c\u73fe\u793e\u4ea4\u5834\u5408\u4ee4\u4eba\u5fc3\u7169\u610f\u4e82\", options: [{ text: \"\u662f\", score: 1 }, { text: \"\u5426\", score: 0 }] },\n                { id: 6, text: \"\u5728\u793e\u4ea4\u5834\u5408\u6211\u901a\u5e38\u611f\u89ba\u5e73\u975c\u53ca\u8212\u9069\", options: [{ text: \"\u662f\", score: 0 }, { text: \"\u5426\", score: 1 }] },\n                { id: 7, text: \"\u5728\u540c\u7570\u6027\u4ea4\u8ac7\u6642\uff0c\u6211\u901a\u5e38\u611f\u89ba\u653e\u9b06\", options: [{ text: \"\u662f\", score: 0 }, { text: \"\u5426\", score: 1 }] },\n                { id: 8, text: \"\u6211\u5118\u91cf\u907f\u514d\u8207\u4eba\u5bb6\u8b1b\u8a71\uff0c\u9664\u975e\u7279\u5225\u719f\", options: [{ text: \"\u662f\", score: 1 }, { text: \"\u5426\", score: 0 }] },\n                { id: 9, text: \"\u5982\u679c\u6709\u540c\u65b0\u4eba\u76f8\u6703\u7684\u6a5f\u6703\uff0c\u6211\u6703\u6293\u4f4f\u7684\", options: [{ text: \"\u662f\", score: 0 }, { text: \"\u5426\", score: 1 }] },\n                { id: 10, text: \"\u5728\u975e\u6b63\u5f0f\u7684\u805a\u6703\u4e0a\u5982\u6709\u7570\u6027\u53c3\u52a0\uff0c\u6211\u901a\u5e38\u89ba\u5f97\u7126\u616e\u548c\u7dca\u5f35\", options: [{ text: \"\u662f\", score: 1 }, { text: \"\u5426\", score: 0 }] },\n                { id: 11, text: \"\u6211\u901a\u5e38\u8207\u4eba\u5011\u5728\u4e00\u8d77\u6642\u611f\u5230\u7126\u616e\uff0c\u9664\u975e\u8207\u4ed6\u5011\u7279\u5225\u719f\", options: [{ text: \"\u662f\", score: 1 }, { text: \"\u5426\", score: 0 }] },\n                { id: 12, text: \"\u6211\u8207\u4e00\u7fa4\u4eba\u5728\u4e00\u8d77\u6642\u901a\u5e38\u611f\u5230\u653e\u9b06\", options: [{ text: \"\u662f\", score: 0 }, { text: \"\u5426\", score: 1 }] },\n                { id: 13, text: \"\u6211\u7d93\u5e38\u60f3\u96e2\u958b\u4eba\u7fa4\", options: [{ text: \"\u662f\", score: 1 }, { text: \"\u5426\", score: 0 }] },\n                { id: 14, text: \"\u5728\u7f6e\u8eab\u65bc\u4e0d\u8a8d\u8b58\u7684\u4eba\u7fa4\u4e2d\u6642\uff0c\u6211\u611f\u5230\u4e0d\u81ea\u5728\", options: [{ text: \"\u662f\", score: 1 }, { text: \"\u5426\", score: 0 }] },\n                { id: 15, text: \"\u5728\u521d\u6b21\u9047\u898b\u67d0\u4e9b\u4eba\u6642\uff0c\u6211\u901a\u5e38\u662f\u653e\u9b06\u7684\", options: [{ text: \"\u662f\", score: 0 }, { text: \"\u5426\", score: 1 }] },\n                { id: 16, text: \"\u88ab\u4ecb\u7d39\u7d66\u5225\u4eba\u4f7f\u6211\u611f\u5230\u7dca\u5f35\u7684\u7126\u616e\", options: [{ text: \"\u662f\", score: 1 }, { text: \"\u5426\", score: 0 }] },\n                { id: 17, text: \"\u5118\u7ba1\u6eff\u623f\u9593\u90fd\u662f\u751f\u4eba\uff0c\u6211\u53ef\u80fd\u9084\u662f\u6703\u9032\u53bb\u7684\", options: [{ text: \"\u662f\", score: 0 }, { text: \"\u5426\", score: 1 }] },\n                { id: 18, text: \"\u6211\u6703\u907f\u514d\u8d70\u4e0a\u524d\u53bb\u52a0\u5165\u5230\u4e00\u5927\u7fa4\u4eba\u4e2d\u9593\", options: [{ text: \"\u662f\", score: 1 }, { text: \"\u5426\", score: 0 }] },\n                { id: 19, text: \"\u7576\u4e0a\u53f8\u60f3\u540c\u6211\u8ac7\u8a71\u6642\uff0c\u6211\u5f88\u9ad8\u8208\u8207\u4ed6\u8ac7\u8a71\", options: [{ text: \"\u662f\", score: 0 }, { text: \"\u5426\", score: 1 }] },\n                { id: 20, text: \"\u7576\u8207\u4e00\u7fa4\u4eba\u5728\u4e00\u8d77\u6642\uff0c\u6211\u901a\u5e38\u611f\u89ba\u5fd0\u5fd1\u4e0d\u5b89\", options: [{ text: \"\u662f\", score: 1 }, { text: \"\u5426\", score: 0 }] },\n                { id: 21, text: \"\u6211\u559c\u6b61\u8eb2\u958b\u4eba\u7fa4\", options: [{ text: \"\u662f\", score: 1 }, { text: \"\u5426\", score: 0 }] },\n                { id: 22, text: \"\u5728\u7db2\u4e0a\u6216\u793e\u4ea4\u805a\u6703\u4e0a\u8207\u4eba\u5011\u4ea4\u8ac7\u5c0d\u6211\u4e0d\u6210\u554f\u984c\", options: [{ text: \"\u662f\", score: 0 }, { text: \"\u5426\", score: 1 }] },\n                { id: 23, text: \"\u5728\u4e00\u5927\u7fa4\u4eba\u4e2d\u9593\uff0c\u6211\u6975\u5c11\u80fd\u611f\u5230\u81ea\u5728\", options: [{ text: \"\u662f\", score: 1 }, { text: \"\u5426\", score: 0 }] },\n                { id: 24, text: \"\u6211\u7d93\u5e38\u60f3\u51fa\u4e00\u4e9b\u85c9\u53e3\u4ee5\u8ff4\u907f\u793e\u4ea4\u6d3b\u52d5\", options: [{ text: \"\u662f\", score: 1 }, { text: \"\u5426\", score: 0 }] },\n                { id: 25, text: \"\u6211\u6709\u6642\u5145\u7576\u70ba\u4eba\u5011\u76f8\u4e92\u4ecb\u7d39\u7684\u89d2\u8272\", options: [{ text: \"\u662f\", score: 0 }, { text: \"\u5426\", score: 1 }] },\n                { id: 26, text: \"\u6211\u5118\u91cf\u907f\u958b\u6b63\u5f0f\u7684\u793e\u4ea4\u5834\u5408\", options: [{ text: \"\u662f\", score: 1 }, { text: \"\u5426\", score: 0 }] },\n                { id: 27, text: \"\u6211\u901a\u5e38\u53c3\u52a0\u6211\u6240\u80fd\u53c3\u52a0\u7684\u5404\u7a2e\u793e\u6703\u4ea4\u5f80\u3002\u4e0d\u7ba1\u662f\u4ec0\u9ebc\u793e\u4ea4\u6d3b\u52d5\uff0c\u6211\u4e00\u822c\u662f\u80fd\u53bb\u5c31\u53bb\", options: [{ text: \"\u662f\", score: 0 }, { text: \"\u5426\", score: 1 }] },\n                { id: 28, text: \"\u6211\u767c\u73fe\u540c\u4ed6\u4eba\u5728\u4e00\u8d77\u6642\u653e\u9b06\u5f88\u5bb9\u6613\", options: [{ text: \"\u662f\", score: 0 }, { text: \"\u5426\", score: 1 }] }\n            ]\n        };\n\n        \/\/ Application State Management\n        const AppState = {\n            currentPage: 'landing',\n            currentQuestion: 0,\n            answers: [],\n            totalScore: 0,\n            chartInstance: null,\n            \n            reset: function() {\n                this.currentQuestion = 0;\n                this.answers = [];\n                this.totalScore = 0;\n                if (this.chartInstance) {\n                    this.chartInstance.destroy();\n                    this.chartInstance = null;\n                }\n            }\n        };\n\n        \/\/ DOM Element Management\n        const DOM = {\n            cache: {},\n            \n            init: function() {\n                this.cache = {\n                    container: document.querySelector('.saq-main-container'),\n                    pages: {\n                        landing: document.querySelector('[data-page=\"landing\"]'),\n                        quiz: document.querySelector('[data-page=\"quiz\"]'),\n                        results: document.querySelector('[data-page=\"results\"]')\n                    },\n                    buttons: {\n                        start: document.getElementById('saq-start-quiz-btn'),\n                        prev: document.getElementById('saq-prev-question-btn'),\n                        restart: document.getElementById('saq-restart-quiz-btn')\n                    },\n                    quiz: {\n                        questionText: document.getElementById('saq-question-text'),\n                        optionsContainer: document.getElementById('saq-options-container'),\n                        progressInfo: document.querySelector('.saq-progress-info'),\n                        progressFill: document.querySelector('.saq-progress-fill'),\n                        currentQuestion: document.querySelector('.saq-current-question'),\n                        totalQuestions: document.querySelector('.saq-total-questions')\n                    },\n                    results: {\n                        totalScore: document.getElementById('saq-total-score'),\n                        anxietyLevel: document.getElementById('saq-anxiety-level'),\n                        interpretation: document.getElementById('saq-interpretation'),\n                        recommendations: document.getElementById('saq-recommendations'),\n                        chart: document.getElementById('saqResultsChart')\n                    }\n                };\n                \n                \/\/ Set total questions count\n                if (this.cache.quiz.totalQuestions) {\n                    this.cache.quiz.totalQuestions.textContent = QUIZ_DATA.questions.length;\n                }\n            },\n            \n            get: function(path) {\n                return path.split('.').reduce((obj, key) => obj && obj[key], this.cache);\n            }\n        };\n\n        \/\/ Utility Functions\n        const Utils = {\n            scrollToTop: function() {\n                const container = DOM.get('container');\n                if (container) {\n                    container.scrollIntoView({ \n                        behavior: 'smooth', \n                        block: 'start'\n                    });\n                }\n            },\n            \n            animateValue: function(element, start, end, duration = 1500) {\n                if (!element) return;\n                \n                const startTime = performance.now();\n                const animate = (currentTime) => {\n                    const elapsed = currentTime - startTime;\n                    const progress = Math.min(elapsed \/ duration, 1);\n                    const current = start + (end - start) * progress;\n                    element.textContent = Math.round(current);\n                    \n                    if (progress < 1) {\n                        requestAnimationFrame(animate);\n                    }\n                };\n                requestAnimationFrame(animate);\n            },\n            \n            debounce: function(func, wait) {\n                let timeout;\n                return function executedFunction(...args) {\n                    const later = () => {\n                        clearTimeout(timeout);\n                        func(...args);\n                    };\n                    clearTimeout(timeout);\n                    timeout = setTimeout(later, wait);\n                };\n            }\n        };\n\n        \/\/ Page Management Module\n        const PageManager = {\n            showPage: function(pageName) {\n                \/\/ Hide all pages\n                Object.values(DOM.cache.pages).forEach(page => {\n                    if (page) {\n                        page.classList.remove('saq-active');\n                    }\n                });\n\n                \/\/ Show target page\n                const targetPage = DOM.cache.pages[pageName];\n                if (targetPage) {\n                    setTimeout(() => {\n                        targetPage.classList.add('saq-active');\n                        AppState.currentPage = pageName;\n                        DOM.cache.container.setAttribute('data-current-page', pageName);\n                        Utils.scrollToTop();\n                    }, 50);\n                }\n            },\n            \n            init: function() {\n                this.showPage('landing');\n            }\n        };\n\n        \/\/ Quiz Logic Module\n        const Quiz = {\n            start: function() {\n                AppState.reset();\n                PageManager.showPage('quiz');\n                this.showQuestion();\n            },\n\n            showQuestion: function() {\n                const question = QUIZ_DATA.questions[AppState.currentQuestion];\n                if (!question) return;\n\n                \/\/ Update question text\n                const questionElement = DOM.get('quiz.questionText');\n                if (questionElement) {\n                    questionElement.textContent = question.text;\n                }\n\n                \/\/ Update progress\n                this.updateProgress();\n\n                \/\/ Show\/hide prev button\n                const prevBtn = DOM.get('buttons.prev');\n                if (prevBtn) {\n                    prevBtn.style.display = AppState.currentQuestion > 0 ? 'block' : 'none';\n                }\n\n                \/\/ Create options\n                this.createOptions(question.options);\n            },\n\n            updateProgress: function() {\n                const progress = ((AppState.currentQuestion + 1) \/ QUIZ_DATA.questions.length) * 100;\n                const progressFill = DOM.get('quiz.progressFill');\n                const currentQuestionElement = DOM.get('quiz.currentQuestion');\n                \n                if (progressFill) {\n                    progressFill.style.width = `${progress}%`;\n                }\n                \n                if (currentQuestionElement) {\n                    currentQuestionElement.textContent = AppState.currentQuestion + 1;\n                }\n            },\n\n            createOptions: function(options) {\n                const container = DOM.get('quiz.optionsContainer');\n                if (!container) return;\n                \n                container.innerHTML = '';\n                \n                options.forEach((option, index) => {\n                    const optionElement = document.createElement('button');\n                    optionElement.className = 'saq-option';\n                    optionElement.textContent = option.text;\n                    optionElement.type = 'button';\n                    optionElement.setAttribute('data-score', option.score);\n                    optionElement.setAttribute('data-option-index', index);\n                    \n                    optionElement.addEventListener('click', this.selectOption.bind(this));\n                    container.appendChild(optionElement);\n                });\n            },\n\n            selectOption: function(event) {\n                const optionElement = event.target;\n                const score = parseInt(optionElement.getAttribute('data-score'));\n                const container = DOM.get('quiz.optionsContainer');\n                \n                \/\/ Remove previous selection\n                if (container) {\n                    container.querySelectorAll('.saq-option').forEach(opt => {\n                        opt.classList.remove('saq-selected');\n                    });\n                }\n                \n                \/\/ Add selection to clicked option\n                optionElement.classList.add('saq-selected');\n                \n                \/\/ Store answer\n                AppState.answers[AppState.currentQuestion] = score;\n                \n                \/\/ Auto-advance after delay\n                setTimeout(() => {\n                    this.nextQuestion();\n                }, 600);\n            },\n\n            nextQuestion: function() {\n                AppState.currentQuestion++;\n                \n                if (AppState.currentQuestion >= QUIZ_DATA.questions.length) {\n                    this.finish();\n                } else {\n                    this.showQuestion();\n                }\n            },\n\n            prevQuestion: function() {\n                if (AppState.currentQuestion > 0) {\n                    AppState.currentQuestion--;\n                    this.showQuestion();\n                }\n            },\n\n            finish: function() {\n                AppState.totalScore = AppState.answers.reduce((sum, score) => sum + score, 0);\n                Results.show();\n            }\n        };\n\n        \/\/ Results Logic Module\n        const Results = {\n            show: function() {\n                PageManager.showPage('results');\n                this.updateDisplay();\n                this.createChart();\n            },\n\n            updateDisplay: function() {\n                const scoreElement = DOM.get('results.totalScore');\n                if (scoreElement) {\n                    Utils.animateValue(scoreElement, 0, AppState.totalScore, 1500);\n                }\n\n                const { level, interpretation, recommendations } = this.getInterpretation(AppState.totalScore);\n                \n                const levelElement = DOM.get('results.anxietyLevel');\n                const interpretationElement = DOM.get('results.interpretation');\n                const recommendationsElement = DOM.get('results.recommendations');\n                \n                if (levelElement) levelElement.textContent = level;\n                if (interpretationElement) interpretationElement.innerHTML = `<h3>\u6e2c\u9a57\u89e3\u8b80<\/h3><p>${interpretation}<\/p>`;\n                if (recommendationsElement) recommendationsElement.innerHTML = recommendations;\n            },\n\n            getInterpretation: function(score) {\n                if (score <= 12) {\n                    return {\n                        level: '\u793e\u4ea4\u8868\u73fe\u6b63\u5e38',\n                        interpretation: '\u60a8\u5728\u4eba\u969b\u95dc\u4fc2\u793e\u4ea4\u4e0a\u8868\u73fe\u6b63\u5e38\uff0c\u7121\u9019\u65b9\u9762\u7684\u554f\u984c\u3002\u9019\u8868\u793a\u60a8\u80fd\u5920\u81ea\u7136\u4e14\u8212\u9069\u5730\u53c3\u8207\u5404\u7a2e\u793e\u4ea4\u6d3b\u52d5\uff0c\u8207\u4ed6\u4eba\u5efa\u7acb\u826f\u597d\u7684\u4e92\u52d5\u95dc\u4fc2\u3002',\n                        recommendations: '<p><strong>\u5efa\u8b70\uff1a<\/strong>\u8acb\u7e7c\u7e8c\u4fdd\u6301\u60a8\u826f\u597d\u7684\u793e\u4ea4\u80fd\u529b\u3002\u60a8\u53ef\u4ee5\u8003\u616e\u5e6b\u52a9\u8eab\u908a\u6709\u793e\u4ea4\u56f0\u64fe\u7684\u670b\u53cb\uff0c\u6216\u8005\u53c3\u8207\u66f4\u591a\u7684\u793e\u5340\u6d3b\u52d5\uff0c\u767c\u63ee\u60a8\u7684\u793e\u4ea4\u512a\u52e2\u3002<\/p>'\n                    };\n                } else if (score <= 20) {\n                    return {\n                        level: '\u8f15\u5ea6\u793e\u4ea4\u7126\u616e',\n                        interpretation: '\u60a8\u5728\u793e\u4ea4\u4e0a\u6709\u4e00\u5b9a\u7684\u8ff4\u907f\u548c\u82e6\u60f1\uff0c\u53ef\u80fd\u4f86\u6e90\u65bc\u60a8\u5c0d\u81ea\u6211\u8868\u73fe\u7684\u5426\u5b9a\u6027\u8a55\u50f9\uff0c\u6216\u8005\u904e\u5206\u95dc\u6ce8\u4ed6\u4eba\u5c0d\u60a8\u8a00\u884c\u7684\u8a55\u50f9\u548c\u770b\u6cd5\u3002\u9019\u4e9b\u60f3\u6cd5\u548c\u89c0\u5ff5\u8b93\u60a8\u66f4\u50be\u5411\u65bc\u4e00\u500b\u4eba\u5f85\u8457\u800c\u4e0d\u662f\u53bb\u878d\u5165\u96c6\u9ad4\u6027\u7684\u793e\u4ea4\u6d3b\u52d5\u3002',\n                        recommendations: '<p><strong>\u6539\u5584\u5efa\u8b70\uff1a<\/strong><\/p><ul><li>\u5617\u8a66\u63db\u4f4d\u601d\u8003\uff0c\u5f9e\u81ea\u5df1\u770b\u5f85\u5225\u4eba\u7684\u89d2\u5ea6\u4f86\u770b\u5f85\u81ea\u5df1\uff0c\u9019\u624d\u662f\u771f\u6b63\u7684\u5225\u4eba\u7684\u773c\u5149<\/li><li>\u8abf\u6574\u5c0d\u5f85\u81ea\u5df1\u7684\u76ee\u6a19\uff0c\u6839\u64da\u81ea\u5df1\u7684\u5be6\u969b\u60c5\u6cc1\u8a2d\u5b9a\u80fd\u5920\u5be6\u73fe\u7684\u77ed\u671f\u76ee\u6a19<\/li><li>\u7df4\u7fd2\u6b63\u5ff5\u51a5\u60f3\uff0c\u6e1b\u5c11\u5c0d\u4ed6\u4eba\u8a55\u50f9\u7684\u904e\u5ea6\u95dc\u6ce8<\/li><li>\u5f9e\u5c0f\u578b\u3001\u719f\u6089\u7684\u793e\u4ea4\u5834\u5408\u958b\u59cb\u9010\u6b65\u63d0\u5347\u4fe1\u5fc3<\/li><\/ul>'\n                    };\n                } else {\n                    return {\n                        level: '\u4e2d\u91cd\u5ea6\u793e\u4ea4\u7126\u616e',\n                        interpretation: '\u60a8\u5728\u793e\u4ea4\u4e0a\u6709\u8f03\u70ba\u56b4\u91cd\u7684\u8ff4\u907f\u548c\u82e6\u60f1\u3002\u60a8\u53ef\u80fd\u66fe\u7d93\u5617\u8a66\u904e\u5f88\u591a\u6b21\u53bb\u878d\u5165\u96c6\u9ad4\u4e2d\uff0c\u4f46\u90fd\u6c92\u80fd\u7372\u5f97\u6eff\u610f\u7684\u6548\u679c\u3002\u5c0d\u65bc\u9019\u4e9b\u5931\u6557\u7d93\u9a57\u7684\u5370\u8c61\u904e\u65bc\u6df1\u523b\uff0c\u6240\u4ee5\u60a8\u73fe\u5728\u53ef\u80fd\u6839\u672c\u6c92\u6709\u610f\u9858\u8207\u4ed6\u4eba\u505a\u4ea4\u6d41\u3002',\n                        recommendations: '<p><strong>\u5c08\u696d\u5efa\u8b70\uff1a<\/strong><\/p><ul><li>\u5c0b\u627e\u7b26\u5408\u81ea\u5df1\u8208\u8da3\u7684\u5834\u5408\u548c\u8a71\u984c\uff0c\u4e0d\u5fc5\u52c9\u5f37\u81ea\u5df1\u878d\u5165\u4efb\u4f55\u5718\u9ad4<\/li><li>\u8003\u616e\u5c0b\u6c42\u5c08\u696d\u5fc3\u7406\u8aee\u8a62\u5e2b\u7684\u5354\u52a9<\/li><li>\u5728\u8aee\u8a62\u7684\u5b89\u5168\u6c1b\u570d\u4e2d\u6162\u6162\u6062\u5fa9\u5c0d\u4eba\u969b\u4ea4\u5f80\u7684\u4fe1\u5fc3<\/li><li>\u5b78\u7fd2\u653e\u9b06\u6280\u5de7\uff0c\u5982\u6df1\u547c\u5438\u548c\u6f38\u9032\u5f0f\u808c\u8089\u653e\u9b06<\/li><li>\u5617\u8a66\u8a8d\u77e5\u884c\u70ba\u7642\u6cd5(CBT)\u76f8\u95dc\u7684\u81ea\u52a9\u7df4\u7fd2<\/li><\/ul><p><em>\u6ce8\u610f\uff1a\u5982\u679c\u793e\u4ea4\u7126\u616e\u56b4\u91cd\u5f71\u97ff\u65e5\u5e38\u751f\u6d3b\uff0c\u5efa\u8b70\u5c0b\u6c42\u5c08\u696d\u91ab\u7642\u5354\u52a9\u3002<\/em><\/p>'\n                    };\n                }\n            },\n\n            createChart: function() {\n                const canvas = DOM.get('results.chart');\n                if (!canvas) return;\n\n                \/\/ Destroy existing chart\n                if (AppState.chartInstance) {\n                    AppState.chartInstance.destroy();\n                }\n\n                const totalQuestions = QUIZ_DATA.questions.length;\n                \n                \/\/ Calculate data for chart\n                const comfortLevel = Math.max(0, 12 - AppState.totalScore);\n                const mildAnxiety = AppState.totalScore > 12 ? Math.min(8, AppState.totalScore - 12) : 0;\n                const severeAnxiety = AppState.totalScore > 20 ? AppState.totalScore - 20 : 0;\n                const remaining = Math.max(0, totalQuestions - AppState.totalScore);\n\n                AppState.chartInstance = new Chart(canvas, {\n                    type: 'doughnut',\n                    data: {\n                        labels: ['\u793e\u4ea4\u8212\u9069\u5ea6', '\u8f15\u5ea6\u7126\u616e', '\u56b4\u91cd\u7126\u616e', '\u5269\u9918\u5206\u6578'],\n                        datasets: [{\n                            data: [comfortLevel, mildAnxiety, severeAnxiety, remaining],\n                            backgroundColor: [\n                                '#38A169', \/\/ Green for comfort\n                                '#D69E2E', \/\/ Yellow for mild anxiety\n                                '#E53E3E', \/\/ Red for severe anxiety\n                                '#E2E8F0'  \/\/ Light gray for remaining\n                            ],\n                            borderWidth: 0,\n                            cutout: '60%'\n                        }]\n                    },\n                    options: {\n                        responsive: true,\n                        maintainAspectRatio: false,\n                        plugins: {\n                            legend: {\n                                position: 'bottom',\n                                labels: {\n                                    padding: 20,\n                                    usePointStyle: true,\n                                    font: {\n                                        size: 18\n                                    }\n                                }\n                            },\n                            tooltip: {\n                                callbacks: {\n                                    label: function(context) {\n                                        const label = context.label || '';\n                                        const value = context.parsed;\n                                        const percentage = Math.round((value \/ totalQuestions) * 100);\n                                        return `${label}: ${value}\u5206 (${percentage}%)`;\n                                    }\n                                }\n                            }\n                        },\n                        animation: {\n                            animateRotate: true,\n                            duration: 1500\n                        }\n                    }\n                });\n            }\n        };\n\n        \/\/ Event Management Module\n        const EventManager = {\n            init: function() {\n                this.bindEvents();\n            },\n            \n            bindEvents: function() {\n                \/\/ Use more reliable event binding\n                const startBtn = DOM.get('buttons.start');\n                const prevBtn = DOM.get('buttons.prev');\n                const restartBtn = DOM.get('buttons.restart');\n                \n                if (startBtn) {\n                    startBtn.addEventListener('click', function(e) {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        Quiz.start();\n                    }, false);\n                }\n                \n                if (prevBtn) {\n                    prevBtn.addEventListener('click', function(e) {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        Quiz.prevQuestion();\n                    }, false);\n                }\n                \n                if (restartBtn) {\n                    restartBtn.addEventListener('click', function(e) {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        Quiz.start();\n                    }, false);\n                }\n            }\n        };\n\n        \/\/ Application Initialization\n        const App = {\n            init: function() {\n                if (document.readyState === 'loading') {\n                    document.addEventListener('DOMContentLoaded', this.start.bind(this));\n                } else {\n                    this.start();\n                }\n            },\n\n            start: function() {\n                try {\n                    \/\/ Wait a bit for any dynamic content to load\n                    setTimeout(() => {\n                        DOM.init();\n                        EventManager.init();\n                        PageManager.init();\n                        \n                        console.log('Social Anxiety Quiz initialized successfully');\n                    }, 100);\n                } catch (error) {\n                    console.error('Failed to initialize Social Anxiety Quiz:', error);\n                }\n            }\n        };\n\n        \/\/ Public API\n        window.SocialAnxietyQuiz = {\n            restart: function() { Quiz.start(); },\n            getScore: function() { return AppState.totalScore; },\n            getAnswers: function() { return [...AppState.answers]; }\n        };\n\n        \/\/ Initialize the application\n        App.init();\n\n    })();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u793e\u4ea4\u60c5\u5883\u7126\u8651\u91cf\u8868(Social Avoidance and Distress Scale\uff0c\u7b80\u79f0SAD)\uff0c\u662f\u7531Watson \u548cFriend\uff081969\uff09\u6240\u63d0\u51fa\u5728\u6d4b\u91cf\u793e\u4f1a\u7126\u8651\u7684\u7a0b\u5ea6\u7684\u91cf\u8868\uff0c\u7528\u4e8e\u540c\u65f6\u6d4b\u67e5\u4e2a\u4f53\u7684\u793e\u4ea4\u7126\u8651\u548c\u56de\u907f\u884c\u4e3a\u3002\u793e\u4ea4\u7126\u865a\u91cf\u8868\u4e3b\u8981\u6d4b\u91cf\u4e3b\u89c2\u7126\u8651\u3001\u8a00\u8bed\u8868\u8fbe\u53ca\u884c\u4e3a\u4e3e\u6b62\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":"","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":[175,162],"tags":[],"class_list":["post-9228","post","type-post","status-publish","format-standard","hentry","category-relationships","category-clinical"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/9228","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=9228"}],"version-history":[{"count":7,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/9228\/revisions"}],"predecessor-version":[{"id":9969,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/9228\/revisions\/9969"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=9228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=9228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=9228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}