{"id":9104,"date":"2025-04-17T18:19:20","date_gmt":"2025-04-17T10:19:20","guid":{"rendered":"https:\/\/xinliceyan.org\/?p=9104"},"modified":"2025-05-22T00:08:33","modified_gmt":"2025-05-21T16:08:33","slug":"cses","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/cses","title":{"rendered":"\u6838\u5fc3\u81ea\u6211\u8bc4\u4ef7\u91cf\u8868\u7ebf\u4e0a\u514d\u8d39\u6d4b\u9a8c\uff0810\u9898\uff09"},"content":{"rendered":"<div class=\"cses-quiz-container\">\n    <main class=\"cses-main\" role=\"main\">\n        <!-- Welcome Page -->\n        <section class=\"cses-page cses-welcome cses-active\" data-page=\"welcome\" aria-labelledby=\"welcome-title\">\n            <header class=\"cses-hero\">\n                <h2 id=\"welcome-title\" class=\"cses-title\">\u6838\u5fc3\u81ea\u6211\u8bc4\u4ef7\u91cf\u8868<\/h2>\n                <p class=\"cses-subtitle\">\u6df1\u5165\u4e86\u89e3\u60a8\u7684\u4eba\u683c\u7279\u8d28\u4e0e\u81ea\u6211\u8ba4\u77e5<\/p>\n            <\/header>\n\n            <div class=\"cses-features\">\n                <article class=\"cses-feature\">\n                    <div class=\"cses-feature-icon\" aria-hidden=\"true\">\ud83c\udfaf<\/div>\n                    <h3 class=\"cses-feature-title\">\u79d1\u5b66\u8bc4\u4f30<\/h3>\n                    <p class=\"cses-feature-text\">\u57fa\u4e8e\u5fc3\u7406\u5b66\u7814\u7a76\u7684\u6838\u5fc3\u81ea\u6211\u8bc4\u4ef7\u91cf\u8868\uff0c\u6d4b\u91cf\u81ea\u5c0a\u3001\u63a7\u5236\u70b9\u3001\u60c5\u7eea\u7a33\u5b9a\u6027\u548c\u81ea\u6211\u6548\u80fd<\/p>\n                <\/article>\n                <article class=\"cses-feature\">\n                    <div class=\"cses-feature-icon\" aria-hidden=\"true\">\u26a1<\/div>\n                    <h3 class=\"cses-feature-title\">\u5feb\u901f\u4fbf\u6377<\/h3>\n                    <p class=\"cses-feature-text\">\u4ec5\u970010 \u9053\u9898\u76ee\uff0c3-5 \u5206\u949f\u5373\u53ef\u5b8c\u6210\uff0c\u83b7\u5f97\u4e2a\u4eba\u5316\u7684\u8be6\u7ec6\u5206\u6790\u62a5\u544a<\/p>\n                <\/article>\n                <article class=\"cses-feature\">\n                    <div class=\"cses-feature-icon\" aria-hidden=\"true\">\ud83d\udcca<\/div>\n                    <h3 class=\"cses-feature-title\">\u89c6\u89c9\u5316\u7ed3\u679c<\/h3>\n                    <p class=\"cses-feature-text\">\u63d0\u4f9b\u6e05\u6670\u7684\u56fe\u8868\u5c55\u793a\u548c\u6df1\u5165\u89e3\u6790\uff0c\u5e2e\u52a9\u60a8\u66f4\u597d\u5730\u8ba4\u8bc6\u81ea\u5df1<\/p>\n                <\/article>\n            <\/div>\n\n            <div class=\"cses-content\">\n                <p class=\"cses-text\">\u6838\u5fc3\u81ea\u6211\u8bc4\u4ef7\u91cf\u8868\u5305\u542b\u4e864 \u79cd\u6838\u5fc3\u4eba\u683c\u7279\u8d28\u7684\u6d4b\u91cf\uff1a\u81ea\u5c0a\u3001\u63a7\u5236\u70b9\u3001\u795e\u7ecf\u8d28\u548c\u4e00\u822c\u81ea\u6211\u6548\u80fd\u3002\u8be5\u91cf\u8868\u5e38\u7528\u4e8e\u7814\u7a76\u6216\u804c\u573a\u5fc3\u7406\u5b66\uff0c\u5e2e\u52a9\u9884\u6d4b\u5de5\u4f5c\u6ee1\u610f\u5ea6\u3001\u7ee9\u6548\u8868\u73b0\u7b49\u3002<\/p>\n            <\/div>\n\n            <div class=\"cses-button-container\">\n                <button type=\"button\" class=\"cses-button\" data-action=\"start-quiz\" aria-describedby=\"quiz-description\">\n                    \u5f00\u59cb\u6d4b\u9a8c\n                <\/button>\n            <\/div>\n            <p id=\"quiz-description\" class=\"sr-only\">\u5f00\u59cb\u8fdb\u884c\u6838\u5fc3\u81ea\u6211\u8bc4\u4ef7\u91cf\u8868\u6d4b\u9a8c<\/p>\n        <\/section>\n\n        <!-- Quiz Page -->\n        <section class=\"cses-page\" data-page=\"quiz\" aria-labelledby=\"quiz-title\">\n            <div class=\"cses-progress-container\" data-progress-container>\n                <div class=\"cses-progress-info\">\n                    <span class=\"cses-progress-text\" data-progress-text>\u9898\u76ee1 \/ 10<\/span>\n                    <span class=\"cses-progress-text\" data-progress-percent>10%<\/span>\n                <\/div>\n                <div class=\"cses-progress-bar\">\n                    <div class=\"cses-progress-fill\" data-progress-fill><\/div>\n                <\/div>\n            <\/div>\n\n            <h2 id=\"quiz-title\" class=\"cses-question-title\" data-question-title><\/h2>\n            \n            <div class=\"cses-options\" data-options role=\"radiogroup\" aria-labelledby=\"quiz-title\"><\/div>\n\n            <nav class=\"cses-navigation\">\n                <button type=\"button\" class=\"cses-button cses-button-secondary\" data-action=\"prev-question\" style=\"display: none;\">\n                    \u4e0a\u4e00\u9898\n                <\/button>\n            <\/nav>\n        <\/section>\n\n        <!-- Results Page -->\n        <section class=\"cses-page\" data-page=\"results\" aria-labelledby=\"results-title\">\n            <header>\n                <h2 id=\"results-title\" class=\"cses-title\">\u60a8\u7684\u6d4b\u9a8c\u7ed3\u679c<\/h2>\n            <\/header>\n\n            <div class=\"cses-score-display\">\n                <div class=\"cses-score-number\" data-total-score aria-label=\"\u603b\u5206\">&#8212;<\/div>\n                <div class=\"cses-score-label\">\u603b\u5206(10-50)<\/div>\n            <\/div>\n\n            <div class=\"cses-result-category\" data-result-category><\/div>\n            <div class=\"cses-result-description\" data-result-description><\/div>\n\n            <div class=\"cses-chart-container\">\n                <div class=\"cses-chart-wrapper\">\n                    <canvas id=\"cses-result-chart\" aria-label=\"\u6838\u5fc3\u81ea\u6211\u8bc4\u4ef7\u5404\u7ef4\u5ea6\u5206\u6790\u56fe\u8868\"><\/canvas>\n                <\/div>\n            <\/div>\n\n            <div class=\"cses-button-container\">\n                <button type=\"button\" class=\"cses-button\" data-action=\"restart-quiz\">\n                    \u91cd\u65b0\u6d4b\u9a8c\n                <\/button>\n            <\/div>\n\n            <div class=\"cses-disclaimer\">\n                <p>\u5185\u5bb9\u4ec5\u4f9b\u53c2\u8003\uff0c\u5982\u679c\u60a8\u9700\u8981\u89e3\u51b3\u5177\u4f53\u95ee\u9898\uff08\u5c24\u5176\u5728\u6cd5\u5f8b\u3001\u533b\u5b66\u7b49\u9886\u57df\uff09\uff0c\u5efa\u8bae\u60a8\u8be6\u7ec6\u54a8\u8be2\u76f8\u5173\u9886\u57df\u4e13\u4e1a\u4eba\u58eb\u3002<\/p>\n            <\/div>\n        <\/section>\n    <\/main>\n<\/div>\n\n<style>\n    \/* CSS Variables *\/\n    :root {\n        --cses-primary: #6366f1;\n        --cses-primary-dark: #4f46e5;\n        --cses-secondary: #8b5cf6;\n        --cses-accent: #06b6d4;\n        --cses-success: #10b981;\n        --cses-warning: #f59e0b;\n        --cses-text-primary: #1f2937;\n        --cses-text-secondary: #6b7280;\n        --cses-background: #ffffff;\n        --cses-background-alt: #f8fafc;\n        --cses-border: #e5e7eb;\n        --cses-border-hover: #d1d5db;\n        --cses-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n        --cses-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n        --cses-radius: 16px;\n        --cses-radius-sm: 8px;\n        --cses-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    \/* Reset and Base Styles *\/\n    .cses-quiz-container * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n    }\n\n    .cses-quiz-container {\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n        line-height: 1.6;\n        color: var(--cses-text-primary);\n        background: var(--cses-background);\n        min-height: 100vh;\n        padding: 16px;\n    }\n\n    .cses-main {\n        max-width: 800px;\n        margin: 0 auto;\n        background: var(--cses-background);\n        border-radius: var(--cses-radius);\n        box-shadow: var(--cses-shadow-lg);\n        overflow: hidden;\n        min-height: 600px;\n        position: relative;\n    }\n\n    \/* Typography *\/\n    .cses-title {\n        font-size: clamp(32px, 5vw, 40px);\n        font-weight: 700;\n        line-height: 1.2;\n        text-align: center;\n        color: var(--cses-text-primary);\n        margin-bottom: 16px;\n    }\n\n    .cses-subtitle {\n        font-size: clamp(18px, 3vw, 22px);\n        font-weight: 500;\n        line-height: 1.4;\n        text-align: center;\n        color: var(--cses-text-secondary);\n        margin-bottom: 32px;\n    }\n\n    .cses-question-title {\n        font-size: 22px;\n        font-weight: 700;\n        line-height: 1.4;\n        color: var(--cses-text-primary);\n        margin-bottom: 24px;\n    }\n\n    .cses-text {\n        font-size: clamp(16px, 2.5vw, 18px);\n        line-height: 1.7;\n        color: var(--cses-text-primary);\n    }\n\n    \/* Layout *\/\n    .cses-page {\n        padding: 40px 32px;\n        display: none;\n        min-height: 600px;\n    }\n\n    .cses-page.cses-active {\n        display: block;\n    }\n\n    .cses-content {\n        text-align: left;\n    }\n\n    \/* Welcome Page *\/\n    .cses-welcome {\n        text-align: center;\n        background: linear-gradient(135deg, var(--cses-background) 0%, var(--cses-background-alt) 100%);\n    }\n\n    .cses-hero {\n        margin-bottom: 48px;\n    }\n\n    .cses-features {\n        display: flex;\n        justify-content: space-between;\n        gap: 16px;\n        margin-bottom: 48px;\n    }\n\n    .cses-feature {\n        flex: 1;\n        max-width: 220px;\n        background: var(--cses-background);\n        padding: 20px;\n        border-radius: var(--cses-radius);\n        box-shadow: var(--cses-shadow);\n        transition: var(--cses-transition);\n    }\n\n    .cses-feature:hover {\n        transform: translateY(-4px);\n        box-shadow: var(--cses-shadow-lg);\n    }\n\n    .cses-feature-icon {\n        width: 64px;\n        height: 64px;\n        background: linear-gradient(135deg, var(--cses-primary), var(--cses-secondary));\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        margin: 0 auto 16px;\n        font-size: 28px;\n        color: white;\n    }\n\n    .cses-feature-title {\n        font-size: 18px;\n        font-weight: 600;\n        margin-bottom: 8px;\n        color: var(--cses-text-primary);\n    }\n\n    .cses-feature-text {\n        font-size: 14px;\n        color: var(--cses-text-secondary);\n        line-height: 1.5;\n    }\n\n    \/* Progress Bar *\/\n    .cses-progress-container {\n        margin-bottom: 32px;\n    }\n\n    .cses-progress-info {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: 8px;\n    }\n\n    .cses-progress-text {\n        font-size: 14px;\n        font-weight: 500;\n        color: var(--cses-text-secondary);\n    }\n\n    .cses-progress-bar {\n        width: 100%;\n        height: 8px;\n        background: var(--cses-border);\n        border-radius: 4px;\n        overflow: hidden;\n    }\n\n    .cses-progress-fill {\n        height: 100%;\n        background: linear-gradient(90deg, var(--cses-primary), var(--cses-accent));\n        border-radius: 4px;\n        transition: width 0.5s ease;\n        width: 0%;\n    }\n\n    \/* Options *\/\n    .cses-options {\n        margin-bottom: 32px;\n    }\n\n    .cses-option {\n        display: block;\n        width: 100%;\n        background: var(--cses-background);\n        border: 2px solid var(--cses-border);\n        border-radius: var(--cses-radius-sm);\n        padding: 20px 24px;\n        margin-bottom: 12px;\n        cursor: pointer;\n        transition: var(--cses-transition);\n        font-size: 18px;\n        color: var(--cses-text-primary);\n        font-weight: 500;\n        text-align: left;\n    }\n\n    .cses-option:hover {\n        border-color: var(--cses-primary);\n        background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));\n        transform: translateY(-2px);\n        box-shadow: var(--cses-shadow);\n        color: var(--cses-text-primary);\n    }\n\n    .cses-option.cses-selected {\n        border-color: var(--cses-primary);\n        background: linear-gradient(135deg, var(--cses-primary), var(--cses-secondary));\n        color: white;\n    }\n\n    .cses-option.cses-selected:hover {\n        color: white;\n    }\n\n    .cses-option:focus {\n        outline: none;\n        border-color: var(--cses-primary);\n        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n        color: var(--cses-text-primary);\n    }\n\n    \/* Buttons *\/\n    .cses-button {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        padding: 16px 32px;\n        background: linear-gradient(135deg, var(--cses-primary), var(--cses-secondary));\n        color: white;\n        border: none;\n        border-radius: var(--cses-radius-sm);\n        font-size: 18px;\n        font-weight: 600;\n        cursor: pointer;\n        transition: var(--cses-transition);\n        text-decoration: none;\n        min-width: 180px;\n        min-height: 44px;\n        box-shadow: var(--cses-shadow);\n    }\n\n    .cses-button:hover {\n        transform: translateY(-2px);\n        box-shadow: var(--cses-shadow-lg);\n        background: linear-gradient(135deg, var(--cses-primary-dark), var(--cses-secondary));\n    }\n\n    .cses-button:active {\n        transform: translateY(0);\n    }\n\n    .cses-button:focus {\n        outline: none;\n        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);\n    }\n\n    .cses-button-secondary {\n        background: var(--cses-background);\n        color: var(--cses-text-primary);\n        border: 2px solid var(--cses-border);\n    }\n\n    .cses-button-secondary:hover {\n        background: var(--cses-background-alt);\n        border-color: var(--cses-border-hover);\n    }\n\n    .cses-button-container {\n        text-align: center;\n        margin-top: 32px;\n    }\n\n    \/* Navigation *\/\n    .cses-navigation {\n        display: flex;\n        justify-content: center;\n        margin-top: 24px;\n    }\n\n    \/* Results *\/\n    .cses-results {\n        text-align: center;\n    }\n\n    .cses-score-display {\n        background: linear-gradient(135deg, var(--cses-background-alt), var(--cses-background));\n        border-radius: var(--cses-radius);\n        padding: 32px;\n        margin: 32px 0;\n        border: 2px solid var(--cses-border);\n        text-align: center;\n    }\n\n    .cses-score-number {\n        font-size: 48px;\n        font-weight: 700;\n        color: var(--cses-primary);\n        margin-bottom: 8px;\n    }\n\n    .cses-score-label {\n        font-size: 16px;\n        color: var(--cses-text-secondary);\n        font-weight: 500;\n    }\n\n    .cses-result-category {\n        font-size: 24px;\n        font-weight: 600;\n        color: var(--cses-secondary);\n        margin: 24px 0 16px;\n    }\n\n    .cses-result-description {\n        font-size: 16px;\n        line-height: 1.7;\n        color: var(--cses-text-primary);\n        text-align: left;\n        background: var(--cses-background-alt);\n        padding: 24px;\n        border-radius: var(--cses-radius-sm);\n        margin: 24px 0;\n    }\n\n    .cses-chart-container {\n        margin: 32px 0;\n        background: var(--cses-background);\n        border-radius: var(--cses-radius);\n        padding: 24px;\n        box-shadow: var(--cses-shadow);\n    }\n\n    .cses-chart-wrapper {\n        position: relative;\n        height: 300px;\n        max-width: 500px;\n        margin: 0 auto;\n    }\n\n    .cses-disclaimer {\n        font-size: 14px;\n        color: var(--cses-text-secondary);\n        font-style: italic;\n        text-align: center;\n        margin-top: 32px;\n        padding: 16px;\n        background: var(--cses-background-alt);\n        border-radius: var(--cses-radius-sm);\n    }\n\n    \/* Responsive Design *\/\n    @media (max-width: 640px) {\n        .cses-quiz-container {\n            padding: 8px;\n        }\n\n        .cses-page {\n            padding: 24px 20px;\n        }\n\n        .cses-features {\n            flex-direction: column;\n        }\n\n        .cses-option {\n            padding: 16px 20px;\n            font-size: 16px;\n        }\n\n        .cses-button {\n            padding: 14px 24px;\n            font-size: 16px;\n            min-width: 160px;\n        }\n\n        .cses-chart-wrapper {\n            height: 250px;\n        }\n    }\n\n    \/* Accessibility *\/\n    @media (prefers-reduced-motion: reduce) {\n        .cses-quiz-container * {\n            animation-duration: 0.01ms !important;\n            animation-iteration-count: 1 !important;\n            transition-duration: 0.01ms !important;\n        }\n    }\n\n    \/* Focus indicators *\/\n    .cses-option:focus-visible,\n    .cses-button:focus-visible {\n        outline: 2px solid var(--cses-primary);\n        outline-offset: 2px;\n    }\n\n    \/* Screen reader only *\/\n    .sr-only {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        padding: 0;\n        margin: -1px;\n        overflow: hidden;\n        clip: rect(0, 0, 0, 0);\n        white-space: nowrap;\n        border: 0;\n    }\n<\/style>\n\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        \/\/ Quiz Data\n        const QUIZ_DATA = {\n            questions: [\n                { id: 1, text: \"\u6211\u76f8\u4fe1\u81ea\u5df1\u5728\u751f\u6d3b\u4e2d\u80fd\u7372\u5f97\u6210\u529f\", type: \"positive\" },\n                { id: 2, text: \"\u6211\u7d93\u5e38\u611f\u5230\u60c5\u7dd2\u4f4e\u843d\", type: \"negative\" },\n                { id: 3, text: \"\u5931\u6557\u6642\uff0c\u6211\u611f\u89ba\u81ea\u5df1\u5f88\u6c92\u7528\", type: \"negative\" },\n                { id: 4, text: \"\u6211\u80fd\u6210\u529f\u5f97\u5b8c\u6210\u5404\u9805\u4efb\u52d9\", type: \"positive\" },\n                { id: 5, text: \"\u6211\u89ba\u5f97\u81ea\u5df1\u5c0d\u5de5\u4f5c\uff08\u5b78\u7fd2\uff09\u6c92\u6709\u628a\u63e1\", type: \"negative\" },\n                { id: 6, text: \"\u7e3d\u7684\u4f86\u8aaa\uff0c\u6211\u5c0d\u81ea\u5df1\u6eff\u610f\", type: \"positive\" },\n                { id: 7, text: \"\u6211\u61f7\u7591\u81ea\u5df1\u7684\u80fd\u529b\", type: \"negative\" },\n                { id: 8, text: \"\u6211\u89ba\u5f97\u81ea\u5df1\u5c0d\u4e8b\u696d\u4e0a\u7684\u6210\u529f\u6c92\u6709\u628a\u63e1\", type: \"negative\" },\n                { id: 9, text: \"\u6211\u6709\u80fd\u529b\u8655\u7406\u81ea\u5df1\u7684\u5927\u591a\u6578\u554f\u984c\", type: \"positive\" },\n                { id: 10, text: \"\u5f88\u591a\u4e8b\u60c5\u6211\u90fd\u89ba\u5f97\u5f88\u7cdf\u7cd5\u3001\u6c92\u6709\u5e0c\u671b\", type: \"negative\" }\n            ],\n            options: [\n                { text: \"\u5b8c\u5168\u4e0d\u540c\u610f\", value: 1 },\n                { text: \"\u4e0d\u540c\u610f\", value: 2 },\n                { text: \"\u4e0d\u78ba\u5b9a\", value: 3 },\n                { text: \"\u540c\u610f\", value: 4 },\n                { text: \"\u5b8c\u5168\u540c\u610f\", value: 5 }\n            ],\n            results: {\n                \"10-20\": {\n                    category: \"\u60a8\u5c0d\u6838\u5fc3\u81ea\u6211\u7684\u8a55\u50f9\u5f88\u4f4e\",\n                    description: \"\u6838\u5fc3\u81ea\u6211\u8a55\u50f9\u5f88\u4f4e\u6703\u8b93\u60a8\u5728\u9762\u5c0d\u4e8b\u696d\uff08\u5b78\u7fd2\uff09\u6642\u96e3\u4ee5\u7372\u5f97\u6210\u529f\u7684\u6fc0\u52f5\uff0c\u800c\u5c0d\u632b\u6298\u7684\u6cae\u55aa\u6703\u52a0\u6210\uff0c\u5efa\u8b70\u60a8\u9032\u884c\u4e00\u6bb5\u5c08\u696d\u7684\u5fc3\u7406\u8aee\u8a62\u53bb\u8a8d\u8b58\u771f\u5be6\u7684\u81ea\u6211\u3002\",\n                    color: \"#ef4444\"\n                },\n                \"21-30\": {\n                    category: \"\u60a8\u5c0d\u6838\u5fc3\u81ea\u6211\u7684\u8a55\u50f9\u8f03\u4f4e\",\n                    description: \"\u6838\u5fc3\u81ea\u6211\u8f03\u4f4e\u4e26\u4e0d\u80fd\u8b93\u60a8\u5c0d\u81ea\u6211\u5f62\u6210\u4e00\u500b\u6e96\u78ba\u7684\u8a8d\u8b58\uff0c\u8f03\u4f4e\u7684\u6838\u5fc3\u81ea\u6211\u6703\u963b\u64cb\u60a8\u5c0d\u65bc\u67d0\u4e9b\u6a5f\u9047\u7684\u628a\u63e1\uff0c\u5efa\u8b70\u4f60\u53ef\u4ee5\u901a\u904e\u5fc3\u7406\u8aee\u8a62\u4f86\u8a8d\u8b58\u771f\u5be6\u7684\u81ea\u6211\u3002\",\n                    color: \"#f59e0b\"\n                },\n                \"31-40\": {\n                    category: \"\u60a8\u5c0d\u6838\u5fc3\u81ea\u6211\u7684\u8a55\u50f9\u8f03\u9ad8\",\n                    description: \"\u6838\u5fc3\u81ea\u6211\u8a55\u50f9\u8f03\u9ad8\u8b93\u60a8\u5c0d\u5927\u591a\u6578\u4e8b\u60c5\u90fd\u5145\u6eff\u4e86\u81ea\u4fe1\uff0c\u9019\u662f\u6210\u529f\u7684\u8d77\u6b65\uff0c\u4e5f\u662f\u9b45\u529b\u7684\u4e00\u7a2e\uff0c\u8acb\u7e7c\u7e8c\u4fdd\u6301\u3002\",\n                    color: \"#10b981\"\n                },\n                \"41-50\": {\n                    category: \"\u60a8\u5c0d\u6838\u5fc3\u81ea\u6211\u7684\u8a55\u50f9\u5f88\u9ad8\",\n                    description: \"\u6838\u5fc3\u81ea\u6211\u8a55\u50f9\u5f88\u9ad8\u7684\u60a8\u4e00\u5b9a\u662f\u4e00\u500b\u975e\u5e38\u81ea\u4fe1\u7684\u4eba\u5427\uff0c\u73fe\u5be6\u7684\u751f\u6d3b\u4e2d\u662f\u5426\u6703\u7d66\u4eba\u4e00\u7a2e\u592a\u904e\u5f37\u52e2\u7684\u611f\u89ba\u5462\uff1f\u6b63\u6240\u8b02\u6709\u5229\u5247\u6709\u5f0a\uff0c\u5f88\u9ad8\u7684\u6838\u5fc3\u81ea\u6211\u8a55\u50f9\u80fd\u5920\u5e6b\u52a9\u80fd\u81ea\u4fe1\u5f97\u8d70\u5728\u81ea\u5df1\u8a8d\u5b9a\u7684\u9053\u8def\u4e0a\uff0c\u4f46\u6709\u6642\u5019\u60a8\u4e5f\u9700\u8981\u807d\u807d\u5468\u570d\u7684\u8072\u97f3\u3002\",\n                    color: \"#6366f1\"\n                }\n            }\n        };\n\n        \/\/ Quiz State\n        const quizState = {\n            currentQuestion: 0,\n            answers: [],\n            totalQuestions: QUIZ_DATA.questions.length\n        };\n\n        \/\/ DOM Elements\n        const elements = {\n            pages: {\n                welcome: document.querySelector('[data-page=\"welcome\"]'),\n                quiz: document.querySelector('[data-page=\"quiz\"]'),\n                results: document.querySelector('[data-page=\"results\"]')\n            },\n            quiz: {\n                progressContainer: document.querySelector('[data-progress-container]'),\n                progressText: document.querySelector('[data-progress-text]'),\n                progressPercent: document.querySelector('[data-progress-percent]'),\n                progressFill: document.querySelector('[data-progress-fill]'),\n                questionTitle: document.querySelector('[data-question-title]'),\n                optionsContainer: document.querySelector('[data-options]'),\n                prevButton: document.querySelector('[data-action=\"prev-question\"]')\n            },\n            results: {\n                totalScore: document.querySelector('[data-total-score]'),\n                category: document.querySelector('[data-result-category]'),\n                description: document.querySelector('[data-result-description]')\n            }\n        };\n\n        \/\/ Utility Functions\n        const utils = {\n            scrollToTop: () => {\n                const mainElement = document.querySelector('.cses-main');\n                if (mainElement) {\n                    mainElement.scrollIntoView({ behavior: 'smooth', block: 'start' });\n                }\n            },\n\n            debounce: (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            calculateScore: (answers) => {\n                return answers.reduce((total, answer, index) => {\n                    const question = QUIZ_DATA.questions[index];\n                    const score = question.type === 'positive' ? answer : (6 - answer);\n                    return total + score;\n                }, 0);\n            },\n\n            getResultCategory: (score) => {\n                if (score >= 10 && score <= 20) return \"10-20\";\n                if (score >= 21 && score <= 30) return \"21-30\";\n                if (score >= 31 && score <= 40) return \"31-40\";\n                if (score >= 41 && score <= 50) return \"41-50\";\n                return \"31-40\"; \/\/ fallback\n            },\n\n            generateDimensionScores: (answers) => {\n                const dimensions = {\n                    selfEsteem: [0, 5], \/\/ questions 1, 6\n                    locusOfControl: [3, 8], \/\/ questions 4, 9\n                    neuroticism: [1, 2, 6, 9], \/\/ questions 2, 3, 7, 10\n                    generalSelfEfficacy: [4, 7] \/\/ questions 5, 8\n                };\n\n                const scores = {};\n                \n                Object.entries(dimensions).forEach(([key, questionIndices]) => {\n                    const dimensionScore = questionIndices.reduce((sum, questionIndex) => {\n                        const question = QUIZ_DATA.questions[questionIndex];\n                        const answer = answers[questionIndex];\n                        const score = question.type === 'positive' ? answer : (6 - answer);\n                        return sum + score;\n                    }, 0);\n                    \n                    const maxScore = questionIndices.length * 5;\n                    scores[key] = Math.round((dimensionScore \/ maxScore) * 100);\n                });\n\n                return scores;\n            }\n        };\n\n        \/\/ Page Management\n        const pageManager = {\n            showPage: (pageName) => {\n                Object.values(elements.pages).forEach(page => {\n                    if (page) page.classList.remove('cses-active');\n                });\n                \n                if (elements.pages[pageName]) {\n                    elements.pages[pageName].classList.add('cses-active');\n                    utils.scrollToTop();\n                }\n            },\n\n            showWelcome: () => pageManager.showPage('welcome'),\n            showQuiz: () => pageManager.showPage('quiz'),\n            showResults: () => pageManager.showPage('results')\n        };\n\n        \/\/ Quiz Logic\n        const quizManager = {\n            start: () => {\n                quizState.currentQuestion = 0;\n                quizState.answers = [];\n                quizManager.showQuestion();\n                pageManager.showQuiz();\n            },\n\n            showQuestion: () => {\n                const question = QUIZ_DATA.questions[quizState.currentQuestion];\n                const isFirstQuestion = quizState.currentQuestion === 0;\n                const progress = ((quizState.currentQuestion + 1) \/ quizState.totalQuestions) * 100;\n\n                \/\/ Update progress (hide if only one question)\n                if (quizState.totalQuestions > 1 && elements.quiz.progressContainer) {\n                    elements.quiz.progressContainer.style.display = 'block';\n                    if (elements.quiz.progressText) {\n                        elements.quiz.progressText.textContent = `\u984c\u76ee ${quizState.currentQuestion + 1} \/ ${quizState.totalQuestions}`;\n                    }\n                    if (elements.quiz.progressPercent) {\n                        elements.quiz.progressPercent.textContent = `${Math.round(progress)}%`;\n                    }\n                    if (elements.quiz.progressFill) {\n                        elements.quiz.progressFill.style.width = `${progress}%`;\n                    }\n                } else if (elements.quiz.progressContainer) {\n                    elements.quiz.progressContainer.style.display = 'none';\n                }\n\n                \/\/ Update question\n                if (elements.quiz.questionTitle) {\n                    elements.quiz.questionTitle.textContent = question.text;\n                }\n\n                \/\/ Show\/hide previous button\n                if (elements.quiz.prevButton) {\n                    elements.quiz.prevButton.style.display = isFirstQuestion ? 'none' : 'block';\n                }\n\n                \/\/ Generate options\n                quizManager.renderOptions();\n            },\n\n            renderOptions: () => {\n                if (!elements.quiz.optionsContainer) return;\n\n                const optionsHTML = QUIZ_DATA.options.map((option, index) => \n                    `<button type=\"button\" class=\"cses-option\" data-option-value=\"${option.value}\" role=\"radio\" aria-checked=\"false\" tabindex=\"${index === 0 ? '0' : '-1'}\">\n                        ${option.text}\n                    <\/button>`\n                ).join('');\n\n                elements.quiz.optionsContainer.innerHTML = optionsHTML;\n                \n                \/\/ Focus first option for keyboard navigation\n                const firstOption = elements.quiz.optionsContainer.querySelector('.cses-option');\n                if (firstOption) {\n                    firstOption.focus();\n                }\n            },\n\n            selectOption: (value) => {\n                const numValue = parseInt(value);\n                quizState.answers[quizState.currentQuestion] = numValue;\n\n                \/\/ Update UI\n                if (elements.quiz.optionsContainer) {\n                    const options = elements.quiz.optionsContainer.querySelectorAll('.cses-option');\n                    options.forEach(option => {\n                        option.classList.remove('cses-selected');\n                        option.setAttribute('aria-checked', 'false');\n                        if (parseInt(option.dataset.optionValue) === numValue) {\n                            option.classList.add('cses-selected');\n                            option.setAttribute('aria-checked', 'true');\n                        }\n                    });\n                }\n\n                \/\/ Auto-advance after short delay\n                setTimeout(() => {\n                    quizManager.nextQuestion();\n                }, 300);\n            },\n\n            nextQuestion: () => {\n                if (quizState.currentQuestion < quizState.totalQuestions - 1) {\n                    quizState.currentQuestion++;\n                    quizManager.showQuestion();\n                } else {\n                    quizManager.finish();\n                }\n            },\n\n            prevQuestion: () => {\n                if (quizState.currentQuestion > 0) {\n                    quizState.currentQuestion--;\n                    quizManager.showQuestion();\n                }\n            },\n\n            finish: () => {\n                try {\n                    const totalScore = utils.calculateScore(quizState.answers);\n                    const resultCategory = utils.getResultCategory(totalScore);\n                    const result = QUIZ_DATA.results[resultCategory];\n                    \n                    \/\/ Update results\n                    if (elements.results.totalScore) {\n                        elements.results.totalScore.textContent = totalScore;\n                        elements.results.totalScore.setAttribute('aria-label', `\u7e3d\u5206 ${totalScore} \u5206`);\n                    }\n                    if (elements.results.category) {\n                        elements.results.category.textContent = result.category;\n                    }\n                    if (elements.results.description) {\n                        elements.results.description.textContent = result.description;\n                    }\n\n                    \/\/ Create chart\n                    quizManager.createChart(quizState.answers);\n\n                    pageManager.showResults();\n                } catch (error) {\n                    console.error('\u8655\u7406\u6e2c\u9a57\u7d50\u679c\u6642\u767c\u751f\u932f\u8aa4:', error);\n                    \/\/ \u63d0\u4f9b\u5099\u7528\u986f\u793a\n                    if (elements.results.totalScore) {\n                        elements.results.totalScore.textContent = '\u8a08\u7b97\u4e2d...';\n                    }\n                    if (elements.results.category) {\n                        elements.results.category.textContent = '\u6b63\u5728\u5206\u6790\u60a8\u7684\u7d50\u679c';\n                    }\n                    if (elements.results.description) {\n                        elements.results.description.textContent = '\u8acb\u7a0d\u7b49\u7247\u523b\uff0c\u6211\u5011\u6b63\u5728\u70ba\u60a8\u6e96\u5099\u8a73\u7d30\u7684\u5206\u6790\u5831\u544a\u3002';\n                    }\n                    pageManager.showResults();\n                }\n            },\n\n            createChart: (answers) => {\n                try {\n                    const ctx = document.getElementById('cses-result-chart');\n                    if (!ctx || typeof Chart === 'undefined') {\n                        console.warn('Chart.js \u672a\u6b63\u78ba\u8f09\u5165\u6216\u756b\u5e03\u5143\u7d20\u4e0d\u5b58\u5728');\n                        return;\n                    }\n\n                    \/\/ \u6e05\u9664\u73fe\u6709\u5716\u8868\n                    const existingChart = Chart.getChart(ctx);\n                    if (existingChart) {\n                        existingChart.destroy();\n                    }\n\n                    const dimensionScores = utils.generateDimensionScores(answers);\n                    \n                    new Chart(ctx, {\n                        type: 'radar',\n                        data: {\n                            labels: ['\u81ea\u5c0a', '\u63a7\u5236\u9ede', '\u60c5\u7dd2\u7a69\u5b9a\u6027', '\u81ea\u6211\u6548\u80fd'],\n                            datasets: [{\n                                label: '\u60a8\u7684\u5206\u6578',\n                                data: [\n                                    dimensionScores.selfEsteem,\n                                    dimensionScores.locusOfControl,\n                                    100 - dimensionScores.neuroticism, \/\/ \u53cd\u5411\u8a08\u5206\n                                    dimensionScores.generalSelfEfficacy\n                                ],\n                                backgroundColor: 'rgba(99, 102, 241, 0.2)',\n                                borderColor: 'rgb(99, 102, 241)',\n                                pointBackgroundColor: 'rgb(99, 102, 241)',\n                                pointBorderColor: '#fff',\n                                pointHoverBackgroundColor: '#fff',\n                                pointHoverBorderColor: 'rgb(99, 102, 241)',\n                                borderWidth: 3,\n                                pointRadius: 6,\n                                pointHoverRadius: 8\n                            }]\n                        },\n                        options: {\n                            responsive: true,\n                            maintainAspectRatio: false,\n                            plugins: {\n                                legend: {\n                                    display: false\n                                }\n                            },\n                            scales: {\n                                r: {\n                                    beginAtZero: true,\n                                    max: 100,\n                                    min: 0,\n                                    ticks: {\n                                        stepSize: 20,\n                                        font: {\n                                            size: 14\n                                        },\n                                        color: '#6b7280'\n                                    },\n                                    pointLabels: {\n                                        font: {\n                                            size: 18,\n                                            weight: '600'\n                                        },\n                                        color: '#1f2937'\n                                    },\n                                    grid: {\n                                        color: '#e5e7eb'\n                                    },\n                                    angleLines: {\n                                        color: '#e5e7eb'\n                                    }\n                                }\n                            }\n                        }\n                    });\n                } catch (error) {\n                    console.error('\u5efa\u7acb\u5716\u8868\u6642\u767c\u751f\u932f\u8aa4:', error);\n                    \/\/ \u96b1\u85cf\u5716\u8868\u5bb9\u5668\u5982\u679c\u51fa\u73fe\u932f\u8aa4\n                    const chartContainer = document.querySelector('.cses-chart-container');\n                    if (chartContainer) {\n                        chartContainer.style.display = 'none';\n                    }\n                }\n            }\n        };\n\n        \/\/ Event Handlers\n        const handleButtonClick = (e) => {\n            const action = e.target.dataset.action;\n            if (!action) return;\n\n            switch (action) {\n                case 'start-quiz':\n                    quizManager.start();\n                    break;\n                case 'prev-question':\n                    quizManager.prevQuestion();\n                    break;\n                case 'restart-quiz':\n                    quizManager.start();\n                    break;\n            }\n        };\n\n        const handleOptionClick = (e) => {\n            if (!e.target.classList.contains('cses-option')) return;\n            const value = e.target.dataset.optionValue;\n            if (value) {\n                quizManager.selectOption(value);\n            }\n        };\n\n        \/\/ Keyboard Navigation\n        const handleKeyDown = (e) => {\n            const target = e.target;\n            \n            if (target.classList.contains('cses-option')) {\n                const optionsContainer = elements.quiz.optionsContainer;\n                if (!optionsContainer) return;\n\n                const options = Array.from(optionsContainer.querySelectorAll('.cses-option'));\n                const currentIndex = options.indexOf(target);\n                \n                switch (e.key) {\n                    case 'ArrowDown':\n                    case 'ArrowRight':\n                        e.preventDefault();\n                        const nextIndex = (currentIndex + 1) % options.length;\n                        options[nextIndex].focus();\n                        break;\n                    case 'ArrowUp':\n                    case 'ArrowLeft':\n                        e.preventDefault();\n                        const prevIndex = (currentIndex - 1 + options.length) % options.length;\n                        options[prevIndex].focus();\n                        break;\n                    case 'Enter':\n                    case ' ':\n                        e.preventDefault();\n                        target.click();\n                        break;\n                }\n            }\n        };\n\n        \/\/ Event Listeners\n        const init = () => {\n            \/\/ Button clicks\n            document.addEventListener('click', handleButtonClick);\n            \n            \/\/ Option clicks with event delegation\n            const optionsContainer = elements.quiz.optionsContainer;\n            if (optionsContainer) {\n                optionsContainer.addEventListener('click', handleOptionClick);\n            }\n            \n            \/\/ Keyboard navigation\n            document.addEventListener('keydown', handleKeyDown);\n\n            \/\/ Touch\/click optimization\n            document.addEventListener('touchstart', () => {}, { passive: true });\n        };\n\n        \/\/ Initialize when DOM is ready\n        if (document.readyState === 'loading') {\n            document.addEventListener('DOMContentLoaded', init);\n        } else {\n            init();\n        }\n\n    })();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u6838\u5fc3\u81ea\u6211\u8bc4\u4ef7\u91cf\u8868\uff08the Core Self-Evaluations Scales, CSES\uff09\u5305\u542b\u4e864\u79cd\u6838\u5fc3\u4eba\u683c\u7279\u8d28\u7684\u6d4b\u91cf\uff1a\u81ea\u5c0a\u3001\u63a7\u5236\u70b9\u3001\u795e\u7ecf\u8d28\u548c\u4e00\u822c\u81ea\u6211\u6548\u80fd\u3002\u8be5\u91cf\u8868\u7531Judge\u7b49\u7f16\u5236\u3002\u6838\u5fc3\u81ea\u6211\u8bc4\u4ef7\u91cf\u8868\u7ebf\u4e0a\u514d\u8d39\u6d4b\u9a8c\uff0810\u9898\uff09<\/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":[167],"tags":[],"class_list":["post-9104","post","type-post","status-publish","format-standard","hentry","category-personality"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/9104","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=9104"}],"version-history":[{"count":2,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/9104\/revisions"}],"predecessor-version":[{"id":9965,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/9104\/revisions\/9965"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=9104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=9104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=9104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}