{"id":2752,"date":"2023-10-18T09:47:55","date_gmt":"2023-10-18T01:47:55","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2752"},"modified":"2025-08-20T01:59:20","modified_gmt":"2025-08-19T17:59:20","slug":"teamwork","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/teamwork","title":{"rendered":"\u5718\u968a\u7cbe\u795e\u514d\u8cbb\u7dda\u4e0a\u6e2c\u9a57"},"content":{"rendered":"\n    <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap\/5.3.3\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n    <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-icons\/1.11.3\/font\/bootstrap-icons.min.css\" rel=\"stylesheet\">\n    <style>\n        \/* \u81ea\u5b9a\u7fa9\u6a23\u5f0f *\/\n        .quiz-container-9 {\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n            font-size: 18px;\n            line-height: 1.6;\n            color: #2c3e50;\n            max-width: 750px;\n            margin: 0 auto;\n        }\n        \n        \/* \u5f15\u5c0e\u9801\u6a23\u5f0f *\/\n        .intro-hero-9 {\n            background: linear-gradient(135deg, #89c4a7 0%, #6fa5c2 100%);\n            color: white;\n            border-radius: 20px;\n            padding: 3rem 2rem;\n            margin-bottom: 2rem;\n            box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n        }\n        \n        .intro-hero-9 h2 {\n            font-size: 2.5rem;\n            font-weight: 700;\n            margin-bottom: 1rem;\n        }\n        \n        .intro-hero-9 .subtitle {\n            font-size: 1.25rem;\n            opacity: 0.95;\n        }\n        \n        .feature-icon-9 {\n            width: 80px;\n            height: 80px;\n            background: linear-gradient(135deg, #89c4a7 0%, #6fa5c2 100%);\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin: 0 auto 1rem;\n            box-shadow: 0 8px 20px rgba(137, 196, 167, 0.3);\n            transition: transform 0.3s ease;\n        }\n        \n        .feature-icon-9:hover {\n            transform: translateY(-5px);\n        }\n        \n        .feature-icon-9 i {\n            font-size: 2rem;\n            color: white;\n        }\n        \n        .start-btn-9 {\n            background: linear-gradient(135deg, #89c4a7 0%, #6fa5c2 100%);\n            border: none;\n            color: white;\n            font-size: 1.25rem;\n            padding: 1rem 3rem;\n            border-radius: 50px;\n            box-shadow: 0 8px 25px rgba(137, 196, 167, 0.3);\n            transition: all 0.3s ease;\n        }\n        \n        .start-btn-9:hover {\n            transform: translateY(-3px);\n            box-shadow: 0 12px 35px rgba(137, 196, 167, 0.4);\n            background: linear-gradient(135deg, #6fa5c2 0%, #89c4a7 100%);\n        }\n        \n        \/* \u6e2c\u9a57\u9801\u6a23\u5f0f *\/\n        .progress-header-9 {\n            background: linear-gradient(135deg, #89c4a7 0%, #6fa5c2 100%);\n            color: white;\n            padding: 1.5rem;\n            border-radius: 15px;\n            margin-bottom: 2rem;\n        }\n        \n        .progress-header-9 h3 {\n            font-size: 22px;\n            font-weight: 700;\n            margin-bottom: 1rem;\n        }\n        \n        \/* \u9023\u7dda\u5340\u57df\u6a23\u5f0f *\/\n        .matching-container-9 {\n            position: relative;\n            margin: 2rem 0;\n            padding: 1rem;\n        }\n        \n        .options-column-9,\n        .ranks-column-9 {\n            display: flex;\n            flex-direction: column;\n            gap: 1.25rem;\n        }\n        \n        .option-item-9,\n        .rank-item-9 {\n            background: white;\n            border-radius: 12px;\n            padding: 1.25rem;\n            box-shadow: 0 3px 10px rgba(0,0,0,0.08);\n            transition: all 0.3s ease;\n            cursor: pointer;\n            position: relative;\n            font-size: 18px;\n        }\n        \n        .option-item-9:hover,\n        .rank-item-9:hover {\n            box-shadow: 0 6px 20px rgba(0,0,0,0.12);\n            transform: translateY(-2px);\n        }\n        \n        .option-item-9.selected,\n        .rank-item-9.selected {\n            background: linear-gradient(135deg, #f0f9f5 0%, #e8f4f8 100%);\n            border: 2px solid #89c4a7;\n        }\n        \n        .option-item-9.connected,\n        .rank-item-9.connected {\n            background: #f8fcfa;\n            border: 2px solid #b8dcc8;\n        }\n        \n        .option-badge-9 {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: 32px;\n            height: 32px;\n            background: linear-gradient(135deg, #89c4a7 0%, #6fa5c2 100%);\n            color: white;\n            border-radius: 50%;\n            font-weight: 600;\n            margin-right: 1rem;\n            flex-shrink: 0;\n        }\n        \n        .rank-label-9 {\n            background: linear-gradient(135deg, #f4a261 0%, #e76f51 100%);\n            color: white;\n            padding: 0.5rem 1rem;\n            border-radius: 8px;\n            font-weight: 600;\n            text-align: center;\n        }\n        \n        \/* SVG \u9023\u7dda\u6a23\u5f0f *\/\n        .connection-svg-9 {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            pointer-events: none;\n            z-index: 1;\n        }\n        \n        .connection-line {\n            stroke: #89c4a7;\n            stroke-width: 3;\n            fill: none;\n            stroke-linecap: round;\n            opacity: 0.8;\n        }\n        \n        .connection-line.temp {\n            stroke: #6fa5c2;\n            stroke-dasharray: 5, 5;\n            opacity: 0.6;\n        }\n        \n        \/* \u5c0e\u822a\u6309\u9215\u6a23\u5f0f *\/\n        .nav-btn-9 {\n            background: #6c757d;\n            border: none;\n            color: white;\n            padding: 0.75rem 2rem;\n            border-radius: 50px;\n            font-size: 1.1rem;\n            transition: all 0.3s ease;\n        }\n        \n        .nav-btn-9:hover {\n            background: #5a6268;\n            transform: translateY(-2px);\n        }\n        \n        .submit-btn-9 {\n            background: linear-gradient(135deg, #48c774 0%, #3ec46d 100%);\n            border: none;\n            color: white;\n            padding: 1rem 3rem;\n            border-radius: 50px;\n            font-size: 1.25rem;\n            box-shadow: 0 8px 25px rgba(72, 199, 116, 0.3);\n            transition: all 0.3s ease;\n        }\n        \n        .submit-btn-9:hover:not(:disabled) {\n            transform: translateY(-3px);\n            box-shadow: 0 12px 35px rgba(72, 199, 116, 0.4);\n        }\n        \n        .submit-btn-9:disabled {\n            opacity: 0.5;\n            cursor: not-allowed;\n        }\n        \n        \/* \u6e05\u9664\u6309\u9215 *\/\n        .clear-btn-9 {\n            background: #e9ecef;\n            border: none;\n            color: #495057;\n            padding: 0.5rem 1.5rem;\n            border-radius: 50px;\n            font-size: 1rem;\n            transition: all 0.3s ease;\n        }\n        \n        .clear-btn-9:hover {\n            background: #dee2e6;\n            transform: translateY(-2px);\n        }\n        \n        \/* \u7d50\u679c\u9801\u6a23\u5f0f *\/\n        .result-hero-9 {\n            background: linear-gradient(135deg, #89c4a7 0%, #6fa5c2 100%);\n            color: white;\n            border-radius: 20px;\n            padding: 2rem;\n            margin-bottom: 2rem;\n            text-align: center;\n        }\n        \n        .score-display-9 {\n            font-size: 3rem;\n            font-weight: 700;\n            margin: 1rem 0;\n        }\n        \n        .result-card-9 {\n            background: white;\n            border-radius: 15px;\n            padding: 2rem;\n            box-shadow: 0 8px 25px rgba(0,0,0,0.08);\n            margin-bottom: 2rem;\n        }\n        \n        .chart-container-9 {\n            position: relative;\n            height: 400px;\n            margin: 2rem auto;\n            max-width: 600px;\n        }\n        \n        .dimension-card-9 {\n            background: linear-gradient(135deg, #f0f9f5 0%, #e8f4f8 100%);\n            border-radius: 12px;\n            padding: 1.5rem;\n            margin-bottom: 1.5rem;\n            border-left: 4px solid #89c4a7;\n        }\n        \n        .dimension-card-9 h5 {\n            color: #2c3e50;\n            font-weight: 600;\n            margin-bottom: 0.75rem;\n        }\n        \n        .retry-btn-9 {\n            background: linear-gradient(135deg, #89c4a7 0%, #6fa5c2 100%);\n            border: none;\n            color: white;\n            font-size: 1.25rem;\n            padding: 1rem 3rem;\n            border-radius: 50px;\n            box-shadow: 0 8px 25px rgba(137, 196, 167, 0.3);\n            transition: all 0.3s ease;\n        }\n        \n        .retry-btn-9:hover {\n            transform: translateY(-3px);\n            box-shadow: 0 12px 35px rgba(137, 196, 167, 0.4);\n            background: linear-gradient(135deg, #6fa5c2 0%, #89c4a7 100%);\n        }\n        \n        \/* \u97ff\u61c9\u5f0f\u8abf\u6574 *\/\n        @media (max-width: 768px) {\n            .intro-hero-9 h2 {\n                font-size: 2rem;\n            }\n            \n            .chart-container-9 {\n                height: 300px;\n            }\n            \n            .score-display-9 {\n                font-size: 2.5rem;\n            }\n            \n            .option-item-9,\n            .rank-item-9 {\n                padding: 1rem;\n                font-size: 16px;\n            }\n            \n            .option-badge-9 {\n                width: 28px;\n                height: 28px;\n                margin-right: 0.75rem;\n            }\n        }\n        \n        \/* \u8aaa\u660e\u6587\u5b57\u6a23\u5f0f *\/\n        .instruction-text-9 {\n            background: #f8f9fa;\n            border-radius: 10px;\n            padding: 1rem;\n            margin-bottom: 1.5rem;\n            text-align: center;\n            color: #6c757d;\n        }\n    <\/style>\n    <div class=\"quiz-container-9 py-4\">\n        <!-- \u5f15\u5c0e\u9801 -->\n        <section id=\"quizintro9\" data-page=\"intro9\">\n            <div class=\"intro-hero-9 text-center\">\n                <h2>\u5718\u968a\u7cbe\u795e\u6e2c\u9a57<\/h2>\n                <p class=\"subtitle\">\u63a2\u7d22\u60a8\u7684\u5718\u968a\u5408\u4f5c\u6f5b\u80fd\uff0c\u767c\u73fe\u60a8\u5728\u5718\u968a\u4e2d\u7684\u7368\u7279\u50f9\u503c<\/p>\n            <\/div>\n            \n            <div class=\"row g-4 mb-4\">\n                <div class=\"col-md-4\">\n                    <div class=\"text-center\">\n                        <div class=\"feature-icon-9\">\n                            <i class=\"bi bi-people-fill\"><\/i>\n                        <\/div>\n                        <h4>\u5718\u968a\u6548\u80fd\u8a55\u4f30<\/h4>\n                        <p>\u77ad\u89e3\u60a8\u5c0d\u5718\u968a\u76ee\u6a19\u8207\u6548\u7387\u7684\u7406\u89e3\u7a0b\u5ea6<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"col-md-4\">\n                    <div class=\"text-center\">\n                        <div class=\"feature-icon-9\">\n                            <i class=\"bi bi-trophy-fill\"><\/i>\n                        <\/div>\n                        <h4>\u9818\u5c0e\u6f5b\u80fd\u5206\u6790<\/h4>\n                        <p>\u767c\u73fe\u60a8\u7684\u9818\u5c0e\u98a8\u683c\u8207\u5718\u968a\u7ba1\u7406\u80fd\u529b<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"col-md-4\">\n                    <div class=\"text-center\">\n                        <div class=\"feature-icon-9\">\n                            <i class=\"bi bi-graph-up-arrow\"><\/i>\n                        <\/div>\n                        <h4>\u500b\u4eba\u6210\u9577\u5efa\u8b70<\/h4>\n                        <p>\u7372\u5f97\u5c08\u696d\u7684\u5718\u968a\u5354\u4f5c\u63d0\u5347\u5efa\u8b70<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"bg-light rounded-3 p-4 mb-4\">\n                <h4 class=\"mb-3\"><i class=\"bi bi-info-circle-fill me-2\" style=\"color: #89c4a7;\"><\/i>\u6e2c\u9a57\u8aaa\u660e<\/h4>\n                <p>\u672c\u6e2c\u9a57\u5305\u542b6\u7d44\u554f\u984c\uff0c\u6bcf\u7d44\u67094\u500b\u9078\u9805\u3002\u60a8\u9700\u8981\u6839\u64da\u81ea\u5df1\u7684\u5be6\u969b\u60c5\u6cc1\uff0c\u5c07\u5de6\u5074\u7684\u9078\u9805\u8207\u53f3\u5074\u7684\u7b26\u5408\u7a0b\u5ea6\u9032\u884c\u9023\u7dda\u914d\u5c0d\uff1a<\/p>\n                <ul>\n                    <li><strong>\u6700\u9069\u5408\uff1a<\/strong>\u6700\u7b26\u5408\u60a8\u7684\u60f3\u6cd5\u6216\u884c\u70ba<\/li>\n                    <li><strong>\u57fa\u672c\u9069\u5408\uff1a<\/strong>\u8f03\u70ba\u7b26\u5408\u60a8\u7684\u60c5\u6cc1<\/li>\n                    <li><strong>\u57fa\u672c\u4e0d\u9069\u5408\uff1a<\/strong>\u8f03\u4e0d\u7b26\u5408\u60a8\u7684\u60c5\u6cc1<\/li>\n                    <li><strong>\u6700\u4e0d\u9069\u5408\uff1a<\/strong>\u6700\u4e0d\u7b26\u5408\u60a8\u7684\u60f3\u6cd5\u6216\u884c\u70ba<\/li>\n                <\/ul>\n                <p class=\"mb-0\"><i class=\"bi bi-lightbulb-fill text-warning me-2\"><\/i>\u64cd\u4f5c\u63d0\u793a\uff1a\u9ede\u64ca\u5de6\u5074\u9078\u9805\uff0c\u518d\u9ede\u64ca\u53f3\u5074\u5c0d\u61c9\u7684\u7b26\u5408\u7a0b\u5ea6\u5373\u53ef\u5b8c\u6210\u9023\u7dda\u3002<\/p>\n            <\/div>\n            \n            <div class=\"text-center\">\n                <button class=\"btn start-btn-9 btn-lg\" onclick=\"quizApp9.startQuiz()\">\n                    \u958b\u59cb\u6e2c\u9a57 <i class=\"bi bi-arrow-right-circle ms-2\"><\/i>\n                <\/button>\n            <\/div>\n        <\/section>\n        \n        <!-- \u6e2c\u9a57\u9801 -->\n        <section id=\"quizmain9\" data-page=\"quiz9\" style=\"display: none;\">\n            <div class=\"progress-header-9\">\n                <h3 id=\"questionTitle9\" class=\"text-center mb-3\"><\/h3>\n                <div class=\"progress\" style=\"height: 8px;\">\n                    <div id=\"progressBar9\" class=\"progress-bar\" role=\"progressbar\" style=\"background: linear-gradient(90deg, #48c774 0%, #3ec46d 100%);\"><\/div>\n                <\/div>\n                <div class=\"text-center mt-2\">\n                    <span id=\"progressText9\"><\/span>\n                <\/div>\n            <\/div>\n            \n            <div class=\"instruction-text-9\">\n                <i class=\"bi bi-hand-index-thumb me-2\"><\/i>\n                \u9ede\u64ca\u5de6\u5074\u9078\u9805\uff0c\u518d\u9ede\u64ca\u53f3\u5074\u5c0d\u61c9\u7684\u7b26\u5408\u7a0b\u5ea6\u9032\u884c\u9023\u7dda\n            <\/div>\n            \n            <div class=\"matching-container-9\">\n                <svg class=\"connection-svg-9\" id=\"connectionSvg9\"><\/svg>\n                <div class=\"row\">\n                    <div class=\"col-6\">\n                        <h5 class=\"mb-3\">\u9078\u9805<\/h5>\n                        <div class=\"options-column-9\" id=\"optionsColumn9\"><\/div>\n                    <\/div>\n                    <div class=\"col-6\">\n                        <h5 class=\"mb-3\">\u7b26\u5408\u7a0b\u5ea6<\/h5>\n                        <div class=\"ranks-column-9\" id=\"ranksColumn9\">\n                            <div class=\"rank-item-9\" data-rank=\"\u6700\u9069\u5408\">\n                                <div class=\"rank-label-9\">\u6700\u9069\u5408<\/div>\n                            <\/div>\n                            <div class=\"rank-item-9\" data-rank=\"\u57fa\u672c\u9069\u5408\">\n                                <div class=\"rank-label-9\">\u57fa\u672c\u9069\u5408<\/div>\n                            <\/div>\n                            <div class=\"rank-item-9\" data-rank=\"\u57fa\u672c\u4e0d\u9069\u5408\">\n                                <div class=\"rank-label-9\">\u57fa\u672c\u4e0d\u9069\u5408<\/div>\n                            <\/div>\n                            <div class=\"rank-item-9\" data-rank=\"\u6700\u4e0d\u9069\u5408\">\n                                <div class=\"rank-label-9\">\u6700\u4e0d\u9069\u5408<\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"text-center mt-4\">\n                <button class=\"btn clear-btn-9 me-2\" onclick=\"quizApp9.clearConnections()\">\n                    <i class=\"bi bi-arrow-clockwise me-1\"><\/i>\u6e05\u9664\u9023\u7dda\n                <\/button>\n                <button id=\"prevBtn9\" class=\"btn nav-btn-9 me-2\" onclick=\"quizApp9.previousQuestion()\" style=\"display: none;\">\n                    <i class=\"bi bi-arrow-left me-2\"><\/i>\u4e0a\u4e00\u984c\n                <\/button>\n                <button id=\"nextBtn9\" class=\"btn submit-btn-9\" onclick=\"quizApp9.nextQuestion()\" disabled>\n                    \u4e0b\u4e00\u984c <i class=\"bi bi-arrow-right ms-2\"><\/i>\n                <\/button>\n            <\/div>\n        <\/section>\n        \n        <!-- \u7d50\u679c\u9801 -->\n        <section id=\"quizresult9\" data-page=\"result9\" style=\"display: none;\">\n            <div class=\"result-hero-9\">\n                <h2>\u6e2c\u9a57\u7d50\u679c<\/h2>\n                <div class=\"score-display-9\">\n                    <span id=\"totalScore9\"><\/span> \u5206\n                <\/div>\n                <p id=\"scoreLevel9\" class=\"fs-5\"><\/p>\n            <\/div>\n            \n            <div class=\"result-card-9\">\n                <h4 class=\"mb-4 text-center\">\u5718\u968a\u80fd\u529b\u5206\u6790\u5716\u8868<\/h4>\n                <div class=\"chart-container-9\">\n                    <canvas id=\"resultChart9\"><\/canvas>\n                <\/div>\n            <\/div>\n            \n            <div class=\"result-card-9\">\n                <h4 class=\"mb-4\"><i class=\"bi bi-bar-chart-line-fill me-2\" style=\"color: #89c4a7;\"><\/i>\u591a\u7dad\u5ea6\u5206\u6790<\/h4>\n                <div id=\"dimensionAnalysis9\"><\/div>\n            <\/div>\n            \n            <div class=\"result-card-9\">\n                <h4 class=\"mb-3\"><i class=\"bi bi-lightbulb-fill text-warning me-2\"><\/i>\u500b\u6027\u5316\u5efa\u8b70<\/h4>\n                <div id=\"resultAnalysis9\"><\/div>\n            <\/div>\n            \n            <div class=\"text-center mt-4\">\n                <button class=\"btn retry-btn-9 btn-lg\" onclick=\"quizApp9.resetQuiz()\">\n                    <i class=\"bi bi-arrow-clockwise me-2\"><\/i>\u91cd\u65b0\u6e2c\u8a66\n                <\/button>\n            <\/div>\n        <\/section>\n    <\/div>\n    \n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n    <script>\n        \/\/ \u6e2c\u9a57\u61c9\u7528\u7a0b\u5f0f\n        const quizApp9 = (function() {\n            \/\/ \u984c\u76ee\u6578\u64da\n            const questions = [\n                {\n                    title: \"I. \u6548\u7387\u610f\u8b58\",\n                    dimension: \"\u6548\u7387\u610f\u8b58\",\n                    options: [\n                        {id: 'A', text: '\u53ea\u6709\u7576\u5718\u968a\u7684\u76ee\u6a19\u8207\u6bcf\u500b\u5718\u968a\u6210\u54e1\u4fdd\u6301\u4e00\u81f4\u6642\uff0c\u624d\u80fd\u6700\u6709\u6548\u7387\u3002'},\n                        {id: 'B', text: '\u7576\u5718\u968a\u5167\u90e8\u904b\u4f5c\u826f\u597d\u6642\uff0c\u5718\u968a\u6548\u7387\u6700\u9ad8\u3002'},\n                        {id: 'C', text: '\u7576\u5718\u968a\u8a2d\u5b9a\u660e\u78ba\u7684\u76ee\u6a19\u6642\uff0c\u5176\u6548\u7387\u6700\u9ad8\u3002'},\n                        {id: 'D', text: '\u7576\u5718\u968a\u6240\u8a2d\u5b9a\u7684\u76ee\u6a19\u7b2c\u4e00\u773c\u770b\u4e0a\u53bb\u4f3c\u4e4e\u96e3\u4ee5\u5be6\u73fe\u6642\uff0c\u5718\u968a\u7684\u6548\u7387\u6700\u9ad8\u3002'}\n                    ]\n                },\n                {\n                    title: \"II. \u9818\u5c0e\u8005\",\n                    dimension: \"\u9818\u5c0e\u8005\",\n                    options: [\n                        {id: 'A', text: '\u6bcf\u500b\u5718\u968a\u4e2d\u90fd\u61c9\u7576\u6709\u4e00\u500b\u8ca0\u8cac\u4eba\u6216\u8005\u7e3d\u9ad4\u638c\u63a7\u8005\u3002'},\n                        {id: 'B', text: '\u5c0d\u65bc\u5718\u968a\u6210\u54e1\u800c\u8a00\uff0c\u64c1\u6709\u5404\u81ea\u56fa\u5b9a\u7684\u8077\u8cac\u6bd4\u64c1\u6709\u4e00\u500b\u7e3d\u9ad4\u8ca0\u8cac\u4eba\u66f4\u52a0\u91cd\u8981\u3002'},\n                        {id: 'C', text: '\u6700\u597d\u7684\u5718\u968a\u9818\u5c0e\u662f\u5275\u9020\u5fc5\u8981\u7684\u689d\u4ef6\u4f86\u6fc0\u52f5\u5176\u5718\u968a\u6210\u54e1\u7684\u3002'},\n                        {id: 'D', text: '\u6700\u597d\u7684\u5718\u968a\u9818\u5c0e\u64c1\u6709\u4e26\u85c9\u52a9\u611f\u53ec\u529b\u4f86\u6fc0\u52f5\u5718\u968a\u6210\u54e1\u3002'}\n                    ]\n                },\n                {\n                    title: \"III. \u9818\u8896\u4f5c\u7528\",\n                    dimension: \"\u9818\u8896\u4f5c\u7528\",\n                    options: [\n                        {id: 'A', text: '\u6700\u597d\u7684\u5718\u968a\u9818\u5c0e\u80fd\u5920\u5e6b\u52a9\u5718\u968a\u6210\u54e1\u8a8d\u8b58\u5230\u81ea\u5df1\u7684\u6700\u5927\u512a\u9ede\u3002'},\n                        {id: 'B', text: '\u6700\u597d\u7684\u5718\u968a\u9818\u5c0e\u662f\u90a3\u7a2e\u5e73\u6642\u9ed8\u9ed8\u7121\u805e\uff0c\u4f46\u5728\u5371\u6025\u95dc\u982d\u80fd\u5920\u529b\u633d\u72c2\u703e\u7684\u4eba\u3002'},\n                        {id: 'C', text: '\u597d\u7684\u5718\u968a\u9818\u5c0e\u61c9\u7576\u9f13\u52f5\u5718\u968a\u6210\u54e1\u4e4b\u9593\u7684\u540c\u5fd7\u53cb\u60c5\u3002'},\n                        {id: 'D', text: '\u597d\u7684\u5718\u968a\u9818\u5c0e\u662f\u6fc0\u52f5\u7684\u50ac\u5316\u5291\u3002'}\n                    ]\n                },\n                {\n                    title: \"IV. \u500b\u9ad4\u4f5c\u7528\",\n                    dimension: \"\u500b\u9ad4\u4f5c\u7528\",\n                    options: [\n                        {id: 'A', text: '\u6211\u76f8\u4fe1\u6211\u7684\u53c3\u8207\u80fd\u5920\u8b93\u5718\u968a\u8868\u73fe\u5f97\u66f4\u597d\u3002'},\n                        {id: 'B', text: '\u5718\u968a\u6210\u54e1\u61c9\u7576\u719f\u6089\u5718\u968a\u4e2d\u7684\u4efb\u4f55\u5de5\u4f5c\u3002'},\n                        {id: 'C', text: '\u5728\u6240\u6709\u6642\u5019\uff0c\u6211\u90fd\u53ef\u4ee5\u5e6b\u52a9\u968a\u53cb\uff0c\u9019\u4e00\u9ede\u5f88\u91cd\u8981\u3002'},\n                        {id: 'D', text: '\u70ba\u4e86\u8a55\u4f30\u5718\u968a\u7e3e\u6548\u4e26\u4e14\u91cd\u65b0\u4f30\u50f9\u76ee\u6a19\u800c\u7d93\u5e38\u53ec\u958b\u5718\u968a\u6703\u8b70\uff0c\u9019\u6a23\u505a\u5f88\u91cd\u8981\u3002'}\n                    ]\n                },\n                {\n                    title: \"V. \u53c3\u8207\u610f\u8b58\",\n                    dimension: \"\u53c3\u8207\u610f\u8b58\",\n                    options: [\n                        {id: 'A', text: '\u6211\u6703\u50be\u76e1\u5168\u90e8\u529b\u91cf\u53bb\u5b8c\u6210\u5718\u968a\u7684\u8981\u6c42\u548c\u76ee\u6a19\u3002'},\n                        {id: 'B', text: '\u6211\u96c4\u5fc3\u52c3\u52c3\uff0c\u4e26\u4e14\u6295\u5165\u5927\u91cf\u7cbe\u529b\u8b93\u81ea\u5df1\u6210\u70ba\u5718\u968a\u9818\u5c0e\u3002'},\n                        {id: 'C', text: '\u6700\u5927\u7684\u6fc0\u52f5\u4e4b\u4e00\u5c31\u662f\u8fce\u63a5\u6311\u6230\u3002'},\n                        {id: 'D', text: '\u6211\u6e34\u671b\u6210\u70ba\u5718\u968a\u9818\u5c0e\u3002'}\n                    ]\n                },\n                {\n                    title: \"VI. \u4e92\u52d5\u6027\",\n                    dimension: \"\u4e92\u52d5\u6027\",\n                    options: [\n                        {id: 'A', text: '\u901a\u904e\u5411\u5718\u968a\u548c\u5718\u968a\u6210\u54e1\u8ce6\u4e88\u8077\u8cac\uff0c\u53ef\u4ee5\u6fc0\u52f5\u4ed6\u5011\u3002'},\n                        {id: 'B', text: '\u5718\u968a\u6210\u54e1\u61c9\u7576\u77e5\u9053\u72af\u932f\u8aa4\u7684\u5f8c\u679c\u3002'},\n                        {id: 'C', text: '\u5718\u968a\u4e0d\u61c9\u7576\u5bb3\u6015\u8b8a\u9769\u3002'},\n                        {id: 'D', text: '\u5718\u968a\u6210\u54e1\u4e4b\u9593\u61c9\u7576\u7d93\u5e38\u4e92\u76f8\u5206\u6790\u548c\u8a55\u50f9\u3002'}\n                    ]\n                }\n            ];\n            \n            \/\/ \u8a55\u5206\u898f\u5247\n            const scoringRules = {\n                '\u6700\u9069\u5408': {'A': 3, 'B': 0, 'C': 2, 'D': 0},\n                '\u57fa\u672c\u9069\u5408': {'A': 2, 'B': 1, 'C': 3, 'D': 1},\n                '\u57fa\u672c\u4e0d\u9069\u5408': {'A': 1, 'B': 2, 'C': 1, 'D': 3},\n                '\u6700\u4e0d\u9069\u5408': {'A': 0, 'B': 3, 'C': 0, 'D': 2}\n            };\n            \n            \/\/ \u61c9\u7528\u72c0\u614b\n            let currentQuestion = 0;\n            let answers = [];\n            let currentConnections = {};\n            let selectedOption = null;\n            let chartInstance = null;\n            \n            \/\/ DOM \u5143\u7d20\u7de9\u5b58\n            const elements = {\n                intro: null,\n                quiz: null,\n                result: null,\n                questionTitle: null,\n                progressBar: null,\n                progressText: null,\n                optionsColumn: null,\n                ranksColumn: null,\n                connectionSvg: null,\n                nextBtn: null,\n                prevBtn: null,\n                totalScore: null,\n                scoreLevel: null,\n                resultAnalysis: null,\n                dimensionAnalysis: null\n            };\n            \n            \/\/ \u521d\u59cb\u5316 DOM \u5143\u7d20\n            function initElements() {\n                elements.intro = document.getElementById('quizintro9');\n                elements.quiz = document.getElementById('quizmain9');\n                elements.result = document.getElementById('quizresult9');\n                elements.questionTitle = document.getElementById('questionTitle9');\n                elements.progressBar = document.getElementById('progressBar9');\n                elements.progressText = document.getElementById('progressText9');\n                elements.optionsColumn = document.getElementById('optionsColumn9');\n                elements.ranksColumn = document.getElementById('ranksColumn9');\n                elements.connectionSvg = document.getElementById('connectionSvg9');\n                elements.nextBtn = document.getElementById('nextBtn9');\n                elements.prevBtn = document.getElementById('prevBtn9');\n                elements.totalScore = document.getElementById('totalScore9');\n                elements.scoreLevel = document.getElementById('scoreLevel9');\n                elements.resultAnalysis = document.getElementById('resultAnalysis9');\n                elements.dimensionAnalysis = document.getElementById('dimensionAnalysis9');\n            }\n            \n            \/\/ \u958b\u59cb\u6e2c\u9a57\n            function startQuiz() {\n                initElements();\n                currentQuestion = 0;\n                answers = [];\n                \n                elements.intro.style.display = 'none';\n                elements.quiz.style.display = 'block';\n                elements.result.style.display = 'none';\n                \n                loadQuestion();\n                scrollToTop();\n            }\n            \n            \/\/ \u8f09\u5165\u984c\u76ee\n            function loadQuestion() {\n                const question = questions[currentQuestion];\n                elements.questionTitle.textContent = question.title;\n                \n                \/\/ \u66f4\u65b0\u9032\u5ea6\n                const progress = ((currentQuestion + 1) \/ questions.length) * 100;\n                elements.progressBar.style.width = progress + '%';\n                elements.progressText.textContent = `\u7b2c ${currentQuestion + 1} \u984c \/ \u5171 ${questions.length} \u984c`;\n                \n                \/\/ \u6e05\u7a7a\u7576\u524d\u9023\u7dda\n                currentConnections = {};\n                selectedOption = null;\n                elements.connectionSvg.innerHTML = '';\n                \n                \/\/ \u5275\u5efa\u9078\u9805\n                elements.optionsColumn.innerHTML = '';\n                question.options.forEach(option => {\n                    const optionDiv = document.createElement('div');\n                    optionDiv.className = 'option-item-9';\n                    optionDiv.dataset.optionId = option.id;\n                    optionDiv.innerHTML = `\n                        <div class=\"d-flex align-items-start\">\n                            <span class=\"option-badge-9\">${option.id}<\/span>\n                            <div style=\"flex: 1;\">${option.text}<\/div>\n                        <\/div>\n                    `;\n                    optionDiv.addEventListener('click', () => selectOption(option.id));\n                    elements.optionsColumn.appendChild(optionDiv);\n                });\n                \n                \/\/ \u91cd\u7f6e\u6392\u5e8f\u9805\u76ee\n                document.querySelectorAll('.rank-item-9').forEach(item => {\n                    item.classList.remove('connected', 'selected');\n                    item.onclick = () => selectRank(item.dataset.rank);\n                });\n                \n                \/\/ \u5982\u679c\u6709\u4e4b\u524d\u7684\u7b54\u6848\uff0c\u6062\u5fa9\u9023\u7dda\n                if (answers[currentQuestion]) {\n                    restoreConnections(answers[currentQuestion]);\n                }\n                \n                \/\/ \u66f4\u65b0\u6309\u9215\u72c0\u614b\n                updateButtons();\n            }\n            \n            \/\/ \u9078\u64c7\u9078\u9805\n            function selectOption(optionId) {\n                \/\/ \u6e05\u9664\u4e4b\u524d\u7684\u9078\u64c7\n                document.querySelectorAll('.option-item-9').forEach(item => {\n                    item.classList.remove('selected');\n                });\n                \n                \/\/ \u6a19\u8a18\u7576\u524d\u9078\u64c7\n                const optionElement = document.querySelector(`[data-option-id=\"${optionId}\"]`);\n                optionElement.classList.add('selected');\n                selectedOption = optionId;\n                \n                \/\/ \u6e05\u9664\u81e8\u6642\u9023\u7dda\n                removeTempLine();\n            }\n            \n            \/\/ \u9078\u64c7\u6392\u5e8f\n            function selectRank(rank) {\n                if (!selectedOption) {\n                    \/\/ \u5982\u679c\u6c92\u6709\u9078\u4e2d\u9078\u9805\uff0c\u5148\u9078\u4e2d\u5df2\u9023\u63a5\u6b64\u6392\u5e8f\u7684\u9078\u9805\n                    const connectedOption = Object.keys(currentConnections).find(\n                        key => currentConnections[key] === rank\n                    );\n                    if (connectedOption) {\n                        selectOption(connectedOption);\n                    }\n                    return;\n                }\n                \n                \/\/ \u6aa2\u67e5\u8a72\u6392\u5e8f\u662f\u5426\u5df2\u88ab\u4f7f\u7528\n                const existingOption = Object.keys(currentConnections).find(\n                    key => currentConnections[key] === rank\n                );\n                \n                if (existingOption && existingOption !== selectedOption) {\n                    \/\/ \u5982\u679c\u5df2\u88ab\u5176\u4ed6\u9078\u9805\u4f7f\u7528\uff0c\u79fb\u9664\u8a72\u9023\u7dda\n                    delete currentConnections[existingOption];\n                }\n                \n                \/\/ \u5efa\u7acb\u65b0\u9023\u7dda\n                currentConnections[selectedOption] = rank;\n                \n                \/\/ \u91cd\u7e6a\u6240\u6709\u9023\u7dda\n                drawAllConnections();\n                \n                \/\/ \u6e05\u9664\u9078\u64c7\u72c0\u614b\n                document.querySelectorAll('.option-item-9').forEach(item => {\n                    item.classList.remove('selected');\n                });\n                selectedOption = null;\n                \n                \/\/ \u6aa2\u67e5\u662f\u5426\u5b8c\u6210\n                checkIfComplete();\n            }\n            \n            \/\/ \u7e6a\u88fd\u6240\u6709\u9023\u7dda\n            function drawAllConnections() {\n                elements.connectionSvg.innerHTML = '';\n                \n                Object.entries(currentConnections).forEach(([optionId, rank]) => {\n                    const optionElement = document.querySelector(`[data-option-id=\"${optionId}\"]`);\n                    const rankElement = document.querySelector(`[data-rank=\"${rank}\"]`);\n                    \n                    if (optionElement && rankElement) {\n                        optionElement.classList.add('connected');\n                        rankElement.classList.add('connected');\n                        \n                        const line = createConnectionLine(optionElement, rankElement);\n                        elements.connectionSvg.appendChild(line);\n                    }\n                });\n            }\n            \n            \/\/ \u5275\u5efa\u9023\u7dda\n            function createConnectionLine(startElement, endElement) {\n                const svg = elements.connectionSvg;\n                const svgRect = svg.getBoundingClientRect();\n                const startRect = startElement.getBoundingClientRect();\n                const endRect = endElement.getBoundingClientRect();\n                \n                const startX = startRect.right - svgRect.left;\n                const startY = startRect.top + startRect.height \/ 2 - svgRect.top;\n                const endX = endRect.left - svgRect.left;\n                const endY = endRect.top + endRect.height \/ 2 - svgRect.top;\n                \n                const path = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'path');\n                const midX = (startX + endX) \/ 2;\n                \n                \/\/ \u5275\u5efa\u66f2\u7dda\u8def\u5f91\n                const d = `M ${startX} ${startY} C ${midX} ${startY}, ${midX} ${endY}, ${endX} ${endY}`;\n                path.setAttribute('d', d);\n                path.setAttribute('class', 'connection-line');\n                \n                return path;\n            }\n            \n            \/\/ \u79fb\u9664\u81e8\u6642\u9023\u7dda\n            function removeTempLine() {\n                const tempLine = document.querySelector('.connection-line.temp');\n                if (tempLine) {\n                    tempLine.remove();\n                }\n            }\n            \n            \/\/ \u6e05\u9664\u6240\u6709\u9023\u7dda\n            function clearConnections() {\n                currentConnections = {};\n                selectedOption = null;\n                elements.connectionSvg.innerHTML = '';\n                \n                document.querySelectorAll('.option-item-9, .rank-item-9').forEach(item => {\n                    item.classList.remove('selected', 'connected');\n                });\n                \n                checkIfComplete();\n            }\n            \n            \/\/ \u6062\u5fa9\u9023\u7dda\n            function restoreConnections(answer) {\n                currentConnections = {...answer};\n                drawAllConnections();\n                checkIfComplete();\n            }\n            \n            \/\/ \u6aa2\u67e5\u662f\u5426\u5b8c\u6210\n            function checkIfComplete() {\n                const isComplete = Object.keys(currentConnections).length === 4;\n                elements.nextBtn.disabled = !isComplete;\n            }\n            \n            \/\/ \u66f4\u65b0\u6309\u9215\n            function updateButtons() {\n                elements.prevBtn.style.display = currentQuestion > 0 ? 'inline-block' : 'none';\n                \n                if (currentQuestion === questions.length - 1) {\n                    elements.nextBtn.innerHTML = '\u63d0\u4ea4\u6e2c\u9a57 <i class=\"bi bi-check-circle ms-2\"><\/i>';\n                } else {\n                    elements.nextBtn.innerHTML = '\u4e0b\u4e00\u984c <i class=\"bi bi-arrow-right ms-2\"><\/i>';\n                }\n            }\n            \n            \/\/ \u4e0b\u4e00\u984c\n            function nextQuestion() {\n                \/\/ \u4fdd\u5b58\u7576\u524d\u7b54\u6848\n                answers[currentQuestion] = {...currentConnections};\n                \n                if (currentQuestion < questions.length - 1) {\n                    currentQuestion++;\n                    loadQuestion();\n                    scrollToTop();\n                } else {\n                    showResults();\n                }\n            }\n            \n            \/\/ \u4e0a\u4e00\u984c\n            function previousQuestion() {\n                if (currentQuestion > 0) {\n                    \/\/ \u4fdd\u5b58\u7576\u524d\u7b54\u6848\n                    answers[currentQuestion] = {...currentConnections};\n                    \n                    currentQuestion--;\n                    loadQuestion();\n                    scrollToTop();\n                }\n            }\n            \n            \/\/ \u8a08\u7b97\u5206\u6578\n            function calculateScore() {\n                let totalScore = 0;\n                let categoryScores = [];\n                let detailedAnswers = [];\n                \n                answers.forEach((answer, index) => {\n                    let questionScore = 0;\n                    let questionDetail = {\n                        dimension: questions[index].dimension,\n                        answers: {}\n                    };\n                    \n                    Object.entries(answer).forEach(([optionId, rank]) => {\n                        const score = scoringRules[rank][optionId];\n                        questionScore += score;\n                        questionDetail.answers[optionId] = {rank, score};\n                    });\n                    \n                    categoryScores.push({\n                        category: questions[index].dimension,\n                        score: questionScore\n                    });\n                    detailedAnswers.push(questionDetail);\n                    totalScore += questionScore;\n                });\n                \n                return { totalScore, categoryScores, detailedAnswers };\n            }\n            \n            \/\/ \u751f\u6210\u591a\u7dad\u5ea6\u5206\u6790\n            function generateDimensionAnalysis(categoryScores, detailedAnswers) {\n                let html = '';\n                \n                categoryScores.forEach((category, index) => {\n                    const percentage = Math.round((category.score \/ 12) * 100);\n                    const detail = detailedAnswers[index];\n                    \n                    \/\/ \u5224\u65b7\u8a72\u7dad\u5ea6\u7684\u7279\u9ede\n                    let dimensionTrait = '';\n                    if (percentage >= 75) {\n                        dimensionTrait = '\u8868\u73fe\u512a\u7570';\n                    } else if (percentage >= 50) {\n                        dimensionTrait = '\u8868\u73fe\u826f\u597d';\n                    } else if (percentage >= 25) {\n                        dimensionTrait = '\u6709\u5f85\u52a0\u5f37';\n                    } else {\n                        dimensionTrait = '\u9700\u8981\u6539\u9032';\n                    }\n                    \n                    html += `\n                        <div class=\"dimension-card-9\">\n                            <h5>${category.category}<\/h5>\n                            <div class=\"d-flex justify-content-between align-items-center mb-2\">\n                                <span>\u5f97\u5206\uff1a${category.score}\/12 \u5206<\/span>\n                                <span class=\"badge bg-success\">${percentage}%<\/span>\n                            <\/div>\n                            <div class=\"progress mb-2\" style=\"height: 10px;\">\n                                <div class=\"progress-bar\" role=\"progressbar\" \n                                     style=\"width: ${percentage}%; background: linear-gradient(90deg, #89c4a7 0%, #6fa5c2 100%);\">\n                                <\/div>\n                            <\/div>\n                            <small class=\"text-muted\">\u8a55\u50f9\uff1a${dimensionTrait}<\/small>\n                        <\/div>\n                    `;\n                });\n                \n                return html;\n            }\n            \n            \/\/ \u751f\u6210\u500b\u6027\u5316\u5efa\u8b70\n            function generatePersonalizedAdvice(totalScore, categoryScores) {\n                let advice = '';\n                \n                \/\/ \u627e\u51fa\u6700\u5f37\u548c\u6700\u5f31\u7684\u7dad\u5ea6\n                const sortedScores = [...categoryScores].sort((a, b) => b.score - a.score);\n                const strongest = sortedScores[0];\n                const weakest = sortedScores[sortedScores.length - 1];\n                \n                advice += `<div class=\"mb-3\">`;\n                advice += `<h5><i class=\"bi bi-star-fill text-warning me-2\"><\/i>\u60a8\u7684\u512a\u52e2\u9818\u57df<\/h5>`;\n                advice += `<p>\u60a8\u5728\u300c${strongest.category}\u300d\u65b9\u9762\u8868\u73fe\u6700\u70ba\u7a81\u51fa\uff0c\u5f97\u5206\u9054\u5230 ${strongest.score}\/12 \u5206\u3002`;\n                \n                \/\/ \u6839\u64da\u6700\u5f37\u7dad\u5ea6\u7d66\u51fa\u5efa\u8b70\n                switch(strongest.category) {\n                    case '\u6548\u7387\u610f\u8b58':\n                        advice += '\u9019\u8868\u660e\u60a8\u5c0d\u5718\u968a\u76ee\u6a19\u6709\u6e05\u6670\u7684\u8a8d\u8b58\uff0c\u80fd\u5920\u6709\u6548\u63a8\u52d5\u5718\u968a\u9054\u6210\u76ee\u6a19\u3002\u5efa\u8b70\u60a8\u53ef\u4ee5\u64d4\u4efb\u9805\u76ee\u5354\u8abf\u6216\u76ee\u6a19\u5236\u5b9a\u7684\u89d2\u8272\u3002';\n                        break;\n                    case '\u9818\u5c0e\u8005':\n                        advice += '\u60a8\u5177\u5099\u512a\u79c0\u7684\u9818\u5c0e\u6f5b\u8cea\uff0c\u5584\u65bc\u6fc0\u52f5\u5718\u968a\u6210\u54e1\u3002\u53ef\u4ee5\u8003\u616e\u627f\u64d4\u66f4\u591a\u9818\u5c0e\u8cac\u4efb\uff0c\u5f15\u5c0e\u5718\u968a\u8d70\u5411\u6210\u529f\u3002';\n                        break;\n                    case '\u9818\u8896\u4f5c\u7528':\n                        advice += '\u60a8\u7406\u89e3\u9818\u5c0e\u7684\u771f\u6b63\u610f\u7fa9\uff0c\u77e5\u9053\u5982\u4f55\u767c\u63ee\u9818\u5c0e\u4f5c\u7528\u3002\u9069\u5408\u64d4\u4efb\u5718\u968a\u5c0e\u5e2b\u6216\u6559\u7df4\u7684\u89d2\u8272\u3002';\n                        break;\n                    case '\u500b\u9ad4\u4f5c\u7528':\n                        advice += '\u60a8\u5145\u5206\u8a8d\u8b58\u5230\u500b\u4eba\u5c0d\u5718\u968a\u7684\u8ca2\u737b\u50f9\u503c\uff0c\u7a4d\u6975\u53c3\u8207\u5718\u968a\u6d3b\u52d5\u3002\u9019\u7a2e\u614b\u5ea6\u6703\u611f\u67d3\u5176\u4ed6\u6210\u54e1\uff0c\u63d0\u5347\u6574\u9ad4\u58eb\u6c23\u3002';\n                        break;\n                    case '\u53c3\u8207\u610f\u8b58':\n                        advice += '\u60a8\u6709\u5f37\u70c8\u7684\u5718\u968a\u53c3\u8207\u610f\u9858\uff0c\u9858\u610f\u70ba\u5718\u968a\u4ed8\u51fa\u3002\u9019\u7a2e\u7a4d\u6975\u614b\u5ea6\u662f\u5718\u968a\u6210\u529f\u7684\u91cd\u8981\u56e0\u7d20\u3002';\n                        break;\n                    case '\u4e92\u52d5\u6027':\n                        advice += '\u60a8\u91cd\u8996\u5718\u968a\u6210\u54e1\u9593\u7684\u4e92\u52d5\u4ea4\u6d41\uff0c\u5584\u65bc\u4fc3\u9032\u5718\u968a\u6e9d\u901a\u3002\u53ef\u4ee5\u64d4\u4efb\u5718\u968a\u95dc\u4fc2\u5354\u8abf\u8005\u7684\u89d2\u8272\u3002';\n                        break;\n                }\n                advice += `<\/p><\/div>`;\n                \n                advice += `<div class=\"mb-3\">`;\n                advice += `<h5><i class=\"bi bi-graph-up me-2\" style=\"color: #89c4a7;\"><\/i>\u6210\u9577\u6a5f\u6703<\/h5>`;\n                advice += `<p>\u5728\u300c${weakest.category}\u300d\u65b9\u9762\u9084\u6709\u63d0\u5347\u7a7a\u9593\uff0c\u76ee\u524d\u5f97\u5206\u70ba ${weakest.score}\/12 \u5206\u3002`;\n                \n                \/\/ \u6839\u64da\u6700\u5f31\u7dad\u5ea6\u7d66\u51fa\u5efa\u8b70\n                switch(weakest.category) {\n                    case '\u6548\u7387\u610f\u8b58':\n                        advice += '\u5efa\u8b70\u591a\u95dc\u6ce8\u5718\u968a\u76ee\u6a19\u7684\u8a2d\u5b9a\u8207\u9054\u6210\uff0c\u5b78\u7fd2\u9805\u76ee\u7ba1\u7406\u76f8\u95dc\u77e5\u8b58\uff0c\u63d0\u5347\u5c0d\u5718\u968a\u6548\u7387\u7684\u7406\u89e3\u3002';\n                        break;\n                    case '\u9818\u5c0e\u8005':\n                        advice += '\u53ef\u4ee5\u901a\u904e\u89c0\u5bdf\u512a\u79c0\u9818\u5c0e\u8005\u7684\u884c\u70ba\uff0c\u53c3\u52a0\u9818\u5c0e\u529b\u57f9\u8a13\uff0c\u9010\u6b65\u57f9\u990a\u9818\u5c0e\u80fd\u529b\u3002';\n                        break;\n                    case '\u9818\u8896\u4f5c\u7528':\n                        advice += '\u5617\u8a66\u5728\u5c0f\u578b\u9805\u76ee\u4e2d\u627f\u64d4\u9818\u5c0e\u89d2\u8272\uff0c\u5b78\u7fd2\u5982\u4f55\u6fc0\u52f5\u548c\u652f\u6301\u5718\u968a\u6210\u54e1\u3002';\n                        break;\n                    case '\u500b\u9ad4\u4f5c\u7528':\n                        advice += '\u66f4\u7a4d\u6975\u5730\u53c3\u8207\u5718\u968a\u6d3b\u52d5\uff0c\u4e3b\u52d5\u627f\u64d4\u8cac\u4efb\uff0c\u76f8\u4fe1\u81ea\u5df1\u7684\u8ca2\u737b\u5c0d\u5718\u968a\u5f88\u91cd\u8981\u3002';\n                        break;\n                    case '\u53c3\u8207\u610f\u8b58':\n                        advice += '\u63d0\u9ad8\u5c0d\u5718\u968a\u76ee\u6a19\u7684\u8a8d\u540c\u611f\uff0c\u627e\u5230\u500b\u4eba\u76ee\u6a19\u8207\u5718\u968a\u76ee\u6a19\u7684\u7d50\u5408\u9ede\uff0c\u589e\u5f37\u53c3\u8207\u52d5\u529b\u3002';\n                        break;\n                    case '\u4e92\u52d5\u6027':\n                        advice += '\u591a\u8207\u5718\u968a\u6210\u54e1\u4ea4\u6d41\u6e9d\u901a\uff0c\u53c3\u52a0\u5718\u968a\u5efa\u8a2d\u6d3b\u52d5\uff0c\u589e\u9032\u76f8\u4e92\u77ad\u89e3\u548c\u4fe1\u4efb\u3002';\n                        break;\n                }\n                advice += `<\/p><\/div>`;\n                \n                \/\/ \u7e3d\u9ad4\u5efa\u8b70\n                advice += `<div class=\"alert alert-info\" role=\"alert\">`;\n                advice += `<h6 class=\"alert-heading\"><i class=\"bi bi-info-circle me-2\"><\/i>\u767c\u5c55\u5efa\u8b70<\/h6>`;\n                if (totalScore >= 48) {\n                    advice += `\u60a8\u5df2\u7d93\u5177\u5099\u512a\u79c0\u7684\u5718\u968a\u7cbe\u795e\uff0c\u5efa\u8b70\uff1a<br>`;\n                    advice += `\u2022 \u5206\u4eab\u60a8\u7684\u7d93\u9a57\uff0c\u5e6b\u52a9\u5176\u4ed6\u6210\u54e1\u6210\u9577<br>`;\n                    advice += `\u2022 \u627f\u64d4\u66f4\u5177\u6311\u6230\u6027\u7684\u5718\u968a\u9805\u76ee<br>`;\n                    advice += `\u2022 \u8003\u616e\u64d4\u4efb\u5718\u968a\u5c0e\u5e2b\u6216\u6559\u7df4\u89d2\u8272`;\n                } else if (totalScore >= 24) {\n                    advice += `\u60a8\u662f\u5408\u683c\u7684\u5718\u968a\u6210\u54e1\uff0c\u5efa\u8b70\uff1a<br>`;\n                    advice += `\u2022 \u4e3b\u52d5\u53c3\u8207\u5718\u968a\u6c7a\u7b56\u904e\u7a0b<br>`;\n                    advice += `\u2022 \u63d0\u5347\u5c08\u696d\u6280\u80fd\uff0c\u70ba\u5718\u968a\u8ca2\u737b\u66f4\u591a\u50f9\u503c<br>`;\n                    advice += `\u2022 \u57f9\u990a\u9818\u5c0e\u6280\u80fd\uff0c\u70ba\u672a\u4f86\u767c\u5c55\u505a\u6e96\u5099`;\n                } else {\n                    advice += `\u60a8\u53ef\u80fd\u66f4\u9069\u5408\u7368\u7acb\u5de5\u4f5c\uff0c\u4f46\u4e5f\u53ef\u4ee5\uff1a<br>`;\n                    advice += `\u2022 \u5617\u8a66\u53c3\u8207\u5c0f\u578b\u5718\u968a\u9805\u76ee\uff0c\u9010\u6b65\u9069\u61c9<br>`;\n                    advice += `\u2022 \u627e\u5230\u5718\u968a\u5408\u4f5c\u8207\u500b\u4eba\u7a7a\u9593\u7684\u5e73\u8861\u9ede<br>`;\n                    advice += `\u2022 \u767c\u5c55\u7279\u5b9a\u5c08\u696d\u6280\u80fd\uff0c\u4ee5\u5c08\u5bb6\u8eab\u4efd\u53c3\u8207\u5718\u968a`;\n                }\n                advice += `<\/div>`;\n                \n                return advice;\n            }\n            \n            \/\/ \u986f\u793a\u7d50\u679c\n            function showResults() {\n                const { totalScore, categoryScores, detailedAnswers } = calculateScore();\n                \n                elements.quiz.style.display = 'none';\n                elements.result.style.display = 'block';\n                \n                \/\/ \u986f\u793a\u7e3d\u5206\n                elements.totalScore.textContent = totalScore;\n                \n                \/\/ \u5224\u65b7\u7b49\u7d1a\n                let level, analysis;\n                if (totalScore >= 48) {\n                    level = '\u512a\u79c0\u7684\u5718\u968a\u9818\u5c0e\u8005';\n                    analysis = `\n                        <p>\u60a8\u64c1\u6709\u512a\u79c0\u7684\u5718\u968a\u610f\u8b58\uff0c\u5c0d\u65bc\u5982\u4f55\u5be6\u73fe\u5718\u968a\u7684\u6700\u5927\u6548\u80fd\u6709\u8457\u6e05\u6670\u7684\u7406\u89e3\u3002\u60a8\u4e0d\u50c5\u7406\u89e3\u5718\u968a\u76ee\u6a19\u548c\u6311\u6230\u7684\u91cd\u8981\u6027\uff0c\u66f4\u6ce8\u91cd\u7dad\u6301\u968a\u53cb\u4e4b\u9593\u7684\u60c5\u8abc\uff0c\u95dc\u6ce8\u5718\u968a\u7684\u8077\u8cac\u548c\u6210\u9577\u3002<\/p>\n                        <p>\u60a8\u5177\u5099\u5275\u9020\u826f\u597d\u5718\u968a\u74b0\u5883\u7684\u80fd\u529b\uff0c\u80fd\u5920\u8b93\u5718\u968a\u5728\u60a8\u7684\u5f15\u5c0e\u4e0b\u5be6\u73fe\u81ea\u6211\u6fc0\u52f5\u3002\u9019\u7a2e\u9818\u5c0e\u98a8\u683c\u4e0d\u662f\u901a\u904e\u547d\u4ee4\u548c\u63a7\u5236\uff0c\u800c\u662f\u901a\u904e\u6fc0\u767c\u548c\u8ce6\u80fd\u4f86\u5be6\u73fe\u5718\u968a\u76ee\u6a19\u3002<\/p>\n                    `;\n                } else if (totalScore >= 24) {\n                    level = '\u512a\u79c0\u7684\u5718\u968a\u6210\u54e1';\n                    analysis = `\n                        <p>\u60a8\u662f\u4e00\u4f4d\u503c\u5f97\u4fe1\u8cf4\u7684\u5718\u968a\u6210\u54e1\uff0c\u5c0d\u5f85\u8077\u8cac\u8a8d\u771f\u8ca0\u8cac\uff0c\u7406\u89e3\u5718\u7d50\u5354\u4f5c\u5c0d\u5be6\u73fe\u5718\u968a\u76ee\u6a19\u7684\u91cd\u8981\u6027\u3002\u60a8\u9858\u610f\u70ba\u5718\u968a\u8ca2\u737b\u81ea\u5df1\u7684\u529b\u91cf\uff0c\u540c\u6642\u4e5f\u5177\u5099\u4e00\u5b9a\u7684\u9818\u5c0e\u6f5b\u80fd\u3002<\/p>\n                        <p>\u60a8\u660e\u767d\u5718\u968a\u6210\u529f\u9700\u8981\u6bcf\u500b\u4eba\u7684\u5171\u540c\u52aa\u529b\uff0c\u7576\u5927\u5bb6\u70ba\u5171\u540c\u76ee\u6a19\u596e\u9b25\u6642\uff0c\u5718\u968a\u624d\u80fd\u767c\u63ee\u6700\u5927\u6548\u80fd\u3002\u7e7c\u7e8c\u4fdd\u6301\u9019\u7a2e\u7a4d\u6975\u614b\u5ea6\uff0c\u60a8\u7684\u5718\u968a\u5408\u4f5c\u80fd\u529b\u6703\u4e0d\u65b7\u63d0\u5347\u3002<\/p>\n                    `;\n                } else {\n                    level = '\u7368\u7acb\u5de5\u4f5c\u8005';\n                    analysis = `\n                        <p>\u60a8\u50be\u5411\u65bc\u7368\u7acb\u5b8c\u6210\u5de5\u4f5c\uff0c\u4eab\u53d7\u6309\u7167\u81ea\u5df1\u7684\u7bc0\u594f\u548c\u65b9\u5f0f\u8655\u7406\u4e8b\u52d9\u3002\u9019\u4e26\u4e0d\u610f\u5473\u8457\u60a8\u4e0d\u80fd\u5728\u5718\u968a\u4e2d\u5de5\u4f5c\uff0c\u800c\u662f\u60a8\u53ef\u80fd\u66f4\u9069\u5408\u90a3\u4e9b\u5141\u8a31\u500b\u4eba\u767c\u63ee\u7a7a\u9593\u7684\u89d2\u8272\u3002<\/p>\n                        <p>\u96d6\u7136\u60a8\u504f\u597d\u7368\u7acb\u5de5\u4f5c\uff0c\u4f46\u73fe\u4ee3\u8077\u5834\u8d8a\u4f86\u8d8a\u5f37\u8abf\u5354\u4f5c\u3002\u5efa\u8b70\u60a8\u53ef\u4ee5\u5f9e\u5c0f\u578b\u5718\u968a\u9805\u76ee\u958b\u59cb\uff0c\u9010\u6b65\u9069\u61c9\u5718\u968a\u74b0\u5883\uff0c\u627e\u5230\u500b\u4eba\u98a8\u683c\u8207\u5718\u968a\u9700\u6c42\u7684\u5e73\u8861\u9ede\u3002\u8a18\u4f4f\uff0c\u5373\u4f7f\u662f\u7368\u7acb\u5de5\u4f5c\u8005\uff0c\u4e5f\u80fd\u70ba\u5718\u968a\u5e36\u4f86\u7368\u7279\u7684\u50f9\u503c\u3002<\/p>\n                    `;\n                }\n                \n                elements.scoreLevel.textContent = level;\n                elements.resultAnalysis.innerHTML = analysis;\n                \n                \/\/ \u751f\u6210\u591a\u7dad\u5ea6\u5206\u6790\n                elements.dimensionAnalysis.innerHTML = generateDimensionAnalysis(categoryScores, detailedAnswers);\n                \n                \/\/ \u6dfb\u52a0\u500b\u6027\u5316\u5efa\u8b70\n                elements.resultAnalysis.innerHTML += generatePersonalizedAdvice(totalScore, categoryScores);\n                \n                \/\/ \u7e6a\u88fd\u5716\u8868\n                drawChart(categoryScores);\n                scrollToTop();\n            }\n            \n            \/\/ \u7e6a\u88fd\u5716\u8868\n            function drawChart(categoryScores) {\n                \/\/ \u92b7\u6bc0\u820a\u5716\u8868\n                if (chartInstance) {\n                    chartInstance.destroy();\n                }\n                \n                const ctx = document.getElementById('resultChart9').getContext('2d');\n                const labels = categoryScores.map(item => item.category);\n                const data = categoryScores.map(item => item.score);\n                const maxScore = 12;\n                \n                chartInstance = new Chart(ctx, {\n                    type: 'radar',\n                    data: {\n                        labels: labels,\n                        datasets: [{\n                            label: '\u60a8\u7684\u5f97\u5206',\n                            data: data,\n                            backgroundColor: 'rgba(137, 196, 167, 0.2)',\n                            borderColor: 'rgba(137, 196, 167, 1)',\n                            borderWidth: 2,\n                            pointBackgroundColor: 'rgba(137, 196, 167, 1)',\n                            pointBorderColor: '#fff',\n                            pointHoverBackgroundColor: '#fff',\n                            pointHoverBorderColor: 'rgba(137, 196, 167, 1)',\n                            pointRadius: 6,\n                            pointHoverRadius: 8\n                        }]\n                    },\n                    options: {\n                        responsive: true,\n                        maintainAspectRatio: false,\n                        scales: {\n                            r: {\n                                beginAtZero: true,\n                                max: maxScore,\n                                ticks: {\n                                    stepSize: 3,\n                                    font: {\n                                        size: 14\n                                    }\n                                },\n                                pointLabels: {\n                                    font: {\n                                        size: 18\n                                    }\n                                }\n                            }\n                        },\n                        plugins: {\n                            legend: {\n                                display: false\n                            },\n                            tooltip: {\n                                callbacks: {\n                                    label: function(context) {\n                                        const percentage = Math.round((context.parsed.r \/ maxScore) * 100);\n                                        return `\u5f97\u5206: ${context.parsed.r}\/${maxScore} (${percentage}%)`;\n                                    }\n                                }\n                            }\n                        }\n                    }\n                });\n            }\n            \n            \/\/ \u91cd\u7f6e\u6e2c\u9a57\n            function resetQuiz() {\n                currentQuestion = 0;\n                answers = [];\n                currentConnections = {};\n                selectedOption = null;\n                \n                if (chartInstance) {\n                    chartInstance.destroy();\n                    chartInstance = null;\n                }\n                \n                elements.result.style.display = 'none';\n                elements.intro.style.display = 'block';\n                scrollToTop();\n            }\n            \n            \/\/ \u6efe\u52d5\u5230\u9802\u90e8\n            function scrollToTop() {\n                const container = document.querySelector('.quiz-container-9');\n                if (container) {\n                    container.scrollIntoView({ behavior: 'smooth', block: 'start' });\n                }\n            }\n            \n            \/\/ \u516c\u958b\u65b9\u6cd5\n            return {\n                startQuiz,\n                nextQuestion,\n                previousQuestion,\n                clearConnections,\n                resetQuiz\n            };\n        })();\n    <\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u4f60\u5bf9\u56e2\u961f\u7cbe\u795e\u7684\u7406\u89e3\u662f\u5426\u4f7f\u4f60\u5584\u4e8e\u5728\u56e2\u961f\u4e2d\u7acb\u8db3\u5462\uff1f\u9605\u8bfb\u4e0b\u97626\u7ec4\u5171\u8ba124\u4e2a\u95ee\u9898\uff0c\u5224\u65ad\u662f\u5426\u7b26\u5408\u4f60\u7684\u5b9e\u9645\u3002\u7528\u300c\u6700\u9002\u5408\u300d\u3001\u300c\u57fa\u672c\u9002\u5408\u300d\u3001\u300c\u57fa\u672c\u4e0d\u9002\u5408\u300d\u548c\u300c\u6700\u4e0d\u9002\u5408\u300d\u56db\u4e2a\u9009\u9879\u6765\u63cf\u8ff0\u3002<\/p>","protected":false},"author":19,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"narrow-width-container","site-content-style":"unboxed","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","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":"","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,176,159,164],"tags":[],"class_list":["post-2752","post","type-post","status-publish","format-standard","hentry","category-personality","category-career","category-aptitude","category-interest-inventories"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2752","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/comments?post=2752"}],"version-history":[{"count":8,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2752\/revisions"}],"predecessor-version":[{"id":10596,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2752\/revisions\/10596"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2752"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2752"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2752"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}