{"id":2630,"date":"2023-10-18T09:48:01","date_gmt":"2023-10-18T01:48:01","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2630"},"modified":"2025-06-02T23:03:46","modified_gmt":"2025-06-02T15:03:46","slug":"optimism-pessimism","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/optimism-pessimism","title":{"rendered":"\u4e50\u89c2\u60b2\u89c2\u7ebf\u4e0a\u514d\u8d39\u6d4b\u9a8c\uff088\u9898\uff09"},"content":{"rendered":"<!-- \u6a02\u89c0\u60b2\u89c0\u6e2c\u9a57 - Bootstrap 5 \u539f\u751f\u7d44\u4ef6\u7248 -->\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap\/5.3.3\/css\/bootstrap.min.css\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-icons\/1.11.3\/font\/bootstrap-icons.min.css\">\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n\n<style>\n\/* \u6700\u5c0f\u5316\u81ea\u5b9a\u7fa9\u6a23\u5f0f\uff0c\u4e3b\u8981\u4f7f\u7528 Bootstrap \u539f\u751f\u7d44\u4ef6 *\/\n.quiz-app {\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft JhengHei', sans-serif;\n}\n\n\/* \u81ea\u5b9a\u7fa9\u6f38\u8b8a\u80cc\u666f *\/\n.bg-gradient-primary {\n    background: linear-gradient(135deg, var(--bs-primary) 0%, var(--bs-purple) 100%) !important;\n}\n\n.bg-gradient-success {\n    background: linear-gradient(135deg, var(--bs-success) 0%, var(--bs-teal) 100%) !important;\n}\n\n\/* \u5716\u8868\u5bb9\u5668 *\/\n.chart-wrapper {\n    max-width: 350px;\n    height: 350px;\n}\n\n\/* \u96b1\u85cf\u5143\u7d20 *\/\n.d-none-custom {\n    display: none !important;\n}\n\n\/* \u81ea\u5b9a\u7fa9\u61f8\u505c\u6548\u679c *\/\n.hover-lift:hover {\n    transform: translateY(-3px);\n    transition: transform 0.3s ease;\n}\n\n\/* \u6f38\u8b8a\u6587\u5b57 *\/\n.text-gradient {\n    background: linear-gradient(135deg, var(--bs-primary), var(--bs-purple));\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-clip: text;\n}\n\n\/* \u6e2c\u9a57\u9801\u9762\u7279\u6b8a\u6a23\u5f0f - \u79fb\u9664\u5782\u76f4\u5c45\u4e2d\uff0c\u6539\u70ba\u9802\u90e8\u5c0d\u9f4a *\/\n.quiz-section {\n    padding-top: 3rem;\n    padding-bottom: 3rem;\n    min-height: 100vh;\n}\n<\/style>\n\n<div class=\"container-fluid quiz-app\">\n    <!-- \u5f15\u5c0e\u9801 -->\n    <section id=\"landing-page\" class=\"min-vh-100 d-flex align-items-center\" data-page=\"landing\">\n        <div class=\"container\">\n            <div class=\"row justify-content-center\">\n                <div class=\"col-lg-10 col-xl-8\" style=\"min-width: 750px;\">\n                    <!-- \u4e3b\u6a19\u984c\u5361\u7247 -->\n                    <div class=\"card shadow-lg border-0 mb-5\">\n                        <div class=\"card-body text-center p-5 bg-light rounded\">\n                            <h2 class=\"display-3 fw-bold text-primary mb-4\">\u6a02\u89c0\u60b2\u89c0\u6e2c\u9a57<\/h2>\n                            <p class=\"fs-4 text-muted mb-4\">\u63a2\u7d22\u4f60\u7684\u5fc3\u7406\u50be\u5411\uff0c\u4e86\u89e3\u81ea\u5df1\u9762\u5c0d\u632b\u6298\u6642\u7684\u601d\u7dad\u6a21\u5f0f<\/p>\n                        <\/div>\n                    <\/div>\n\n                    <!-- \u7279\u8272\u4ecb\u7d39 -->\n                    <div class=\"card shadow-lg border-0 mb-4\">\n                        <div class=\"card-body p-5\">\n                            <h3 class=\"card-title text-center mb-5 fs-3\">\n                                <i class=\"bi bi-stars text-warning me-2\"><\/i>\u6e2c\u9a57\u7279\u8272\n                            <\/h3>\n                            \n                            <div class=\"row g-4\">\n                                <div class=\"col-md-4\">\n                                    <div class=\"text-center h-100\">\n                                        <div class=\"bg-warning bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3\" style=\"width: 80px; height: 80px;\">\n                                            <i class=\"bi bi-mortarboard text-warning\" style=\"font-size: 2rem;\"><\/i>\n                                        <\/div>\n                                        <h5 class=\"fw-bold fs-5\">\u79d1\u5b78\u6b0a\u5a01<\/h5>\n                                        <p class=\"text-muted fs-6\">\u57fa\u65bc\u5fc3\u7406\u5b78\u5bb6\u99ac\u4e01\u00b7\u585e\u5229\u683c\u66fc\u7684\u7d93\u5178\u7406\u8ad6\u8a2d\u8a08<\/p>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"col-md-4\">\n                                    <div class=\"text-center h-100\">\n                                        <div class=\"bg-info bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3\" style=\"width: 80px; height: 80px;\">\n                                            <i class=\"bi bi-speedometer2 text-info\" style=\"font-size: 2rem;\"><\/i>\n                                        <\/div>\n                                        <h5 class=\"fw-bold fs-5\">\u5feb\u901f\u6aa2\u6e2c<\/h5>\n                                        <p class=\"text-muted fs-6\">\u50c5\u9700 3-5 \u5206\u9418\u5b8c\u6210 8 \u9053\u7cbe\u5fc3\u8a2d\u8a08\u7684\u984c\u76ee<\/p>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"col-md-4\">\n                                    <div class=\"text-center h-100\">\n                                        <div class=\"bg-success bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3\" style=\"width: 80px; height: 80px;\">\n                                            <i class=\"bi bi-bar-chart text-success\" style=\"font-size: 2rem;\"><\/i>\n                                        <\/div>\n                                        <h5 class=\"fw-bold fs-5\">\u8996\u89ba\u5206\u6790<\/h5>\n                                        <p class=\"text-muted fs-6\">\u63d0\u4f9b\u8a73\u7d30\u7684\u5716\u8868\u5206\u6790\u548c\u500b\u4eba\u5316\u5efa\u8b70\u5831\u544a<\/p>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n\n                            <div class=\"text-center mt-5\">\n                                <p class=\"text-muted mb-4 fs-5\">\u900f\u904e\u5206\u6790\u4f60\u5728\u9762\u5c0d\u56f0\u96e3\u6642\u7684\u6b78\u56e0\u65b9\u5f0f\uff0c\u5e6b\u52a9\u4f60\u4e86\u89e3\u81ea\u5df1\u7684\u601d\u7dad\u6a21\u5f0f\uff0c\u57f9\u990a\u66f4\u7a4d\u6975\u6b63\u9762\u7684\u4eba\u751f\u614b\u5ea6\u3002<\/p>\n                                <button class=\"btn btn-primary btn-lg px-5 py-3 rounded-pill shadow hover-lift fs-4\" data-action=\"start-quiz\">\n                                    <i class=\"bi bi-play-circle me-2\"><\/i>\u5f00\u59cb\u6d4b\u9a8c\n                                <\/button>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- \u6e2c\u9a57\u9801 -->\n    <section id=\"quiz-page\" class=\"quiz-section d-none-custom\" data-page=\"quiz\">\n        <div class=\"container\">\n            <div class=\"row justify-content-center\">\n                <div class=\"col-lg-10 col-xl-8\" style=\"min-width: 750px;\">\n                    <!-- \u6e2c\u9a57\u6a19\u984c -->\n                    <div class=\"text-center mb-4\">\n                        <h2 class=\"display-5 fw-bold text-gradient\">\u6a02\u89c0\u60b2\u89c0\u6e2c\u9a57<\/h2>\n                        <p class=\"lead text-muted\">\u8acb\u9078\u64c7\u6700\u7b26\u5408\u4f60\u60f3\u6cd5\u7684\u7b54\u6848<\/p>\n                    <\/div>\n\n                    <!-- \u9032\u5ea6\u689d -->\n                    <div class=\"card border-0 shadow-sm mb-4\">\n                        <div class=\"card-body p-4\">\n                            <div class=\"d-flex justify-content-between align-items-center mb-3\">\n                                <span class=\"fw-bold text-muted\">\u9032\u5ea6<\/span>\n                                <span class=\"badge bg-primary rounded-pill px-3 py-2\">\n                                    \u95ee\u9898 <span data-current-question>1<\/span> \/ <span data-total-questions>8<\/span>\n                                <\/span>\n                            <\/div>\n                            <div class=\"progress\" style=\"height: 10px;\">\n                                <div class=\"progress-bar bg-gradient-primary progress-bar-striped progress-bar-animated\" \n                                     role=\"progressbar\" style=\"width: 12.5%\" data-progress-bar><\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- \u554f\u984c\u5361\u7247 -->\n                    <div class=\"card border-0 shadow-lg\">\n                        <div class=\"card-body p-5\">\n                            <h3 class=\"card-title h4 fw-bold mb-4\" data-question-text><\/h3>\n                            <div data-options-container><\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- \u5c0e\u822a\u6309\u9215 -->\n                    <div class=\"text-center mt-4\">\n                        <button class=\"btn btn-outline-secondary btn-lg px-4 py-3 rounded-pill d-none-custom\" data-action=\"prev-question\">\n                            <i class=\"bi bi-arrow-left me-2\"><\/i>\u4e0a\u4e00\u9898\n                        <\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- \u7d50\u679c\u9801 -->\n    <section id=\"result-page\" class=\"min-vh-100 d-flex align-items-center d-none-custom\" data-page=\"result\">\n        <div class=\"container\">\n            <div class=\"row justify-content-center\">\n                <div class=\"col-lg-10 col-xl-8\" style=\"min-width: 750px;\">\n                    <!-- \u7d50\u679c\u6a19\u984c\u5361\u7247 -->\n                    <div class=\"card border-0 shadow-lg mb-4\">\n                        <div class=\"card-body text-center p-5 bg-gradient-success text-white\">\n                            <h2 class=\"display-4 fw-bold mb-4\">\u6d4b\u9a8c\u7ed3\u679c<\/h2>\n                            <div class=\"display-2 fw-bold mb-3\" data-result-score><\/div>\n                            <p class=\"fs-4 mb-0\" data-result-description><\/p>\n                        <\/div>\n                    <\/div>\n\n                    <!-- \u5716\u8868\u5361\u7247 -->\n                    <div class=\"card border-0 shadow-lg mb-4\">\n                        <div class=\"card-body p-5 text-center\">\n                            <h4 class=\"card-title mb-4 fs-3\">\n                                <i class=\"bi bi-pie-chart text-primary me-2\"><\/i>\u8996\u89ba\u5316\u5206\u6790\n                            <\/h4>\n                            <div class=\"chart-wrapper mx-auto\">\n                                <canvas id=\"result-chart\"><\/canvas>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- \u8a73\u7d30\u5206\u6790\u5361\u7247 -->\n                    <div class=\"card border-0 shadow-lg mb-4\">\n                        <div class=\"card-body p-5\">\n                            <h4 class=\"card-title text-center mb-4 fs-3\">\n                                <i class=\"bi bi-clipboard-data text-success me-2\"><\/i>\u8be6\u7ec6\u5206\u6790\n                            <\/h4>\n                            <div data-detailed-analysis><\/div>\n                            \n                            <div class=\"alert alert-info border-0 mt-4\" role=\"alert\">\n                                <h5 class=\"alert-heading fs-4\">\n                                    <i class=\"bi bi-lightbulb text-warning me-2\"><\/i>\u5efa\u8b70\u8207\u555f\u767c\n                                <\/h5>\n                                <div data-suggestions class=\"mb-0 fs-5\"><\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- \u91cd\u65b0\u6e2c\u9a57\u6309\u9215 -->\n                    <div class=\"text-center\">\n                        <button class=\"btn btn-primary btn-lg px-5 py-3 rounded-pill shadow hover-lift fs-4\" data-action=\"restart-quiz\">\n                            <i class=\"bi bi-arrow-clockwise me-2\"><\/i>\u91cd\u65b0\u6d4b\u9a8c\n                        <\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n<\/div>\n\n<script>\n\/\/ \u6a02\u89c0\u60b2\u89c0\u6e2c\u9a57 JavaScript\n(function() {\n    'use strict';\n\n    \/\/ \u6e2c\u9a57\u6578\u64da\n    const quizData = {\n        questions: [\n            {\n                id: 1,\n                text: \"\u932f\u904e\u4e00\u500b\u91cd\u8981\u7d04\u6703\uff1a\",\n                options: [\n                    { text: \"\u8a18\u6027\u4e0d\u597d\", score: 1 },\n                    { text: \"\u5fd8\u8a18\u770b\u624b\u6a5f\u884c\u4e8b\u66c6\", score: 0 }\n                ]\n            },\n            {\n                id: 2,\n                text: \"\u672a\u80fd\u901a\u904e\u4e00\u9805\u91cd\u8981\u8003\u8a66\uff1a\",\n                options: [\n                    { text: \"\u53c3\u52a0\u8003\u8a66\u7684\u4eba\u90fd\u6bd4\u6211\u8070\u660e\", score: 1 },\n                    { text: \"\u6c92\u505a\u597d\u6e96\u5099\", score: 0 }\n                ]\n            },\n            {\n                id: 3,\n                text: \"\u4f60\u70ba\u670b\u53cb\u7cbe\u5fc3\u6e96\u5099\u4e86\u4e00\u9053\u83dc\uff0c\u4f46\u4ed6\/\u5979\u537b\u9023\u78b0\u90fd\u4e0d\u78b0\u4e00\u4e0b\uff1a\",\n                options: [\n                    { text: \"\u81ea\u5df1\u5eda\u85dd\u4e0d\u4f73\", score: 1 },\n                    { text: \"\u9019\u6b21\u6c92\u767c\u63ee\u597d\", score: 0 }\n                ]\n            },\n            {\n                id: 4,\n                text: \"\u96d6\u7136\u8a13\u7df4\u4e86\u5f88\u9577\u6642\u9593\uff0c\u4f46\u9084\u662f\u5728\u6bd4\u8cfd\u4e2d\u5931\u5229\uff1a\",\n                options: [\n                    { text: \"\u6211\u5929\u751f\u5c31\u4e0d\u662f\u505a\u904b\u52d5\u7684\u6599\", score: 1 },\n                    { text: \"\u6211\u4e0d\u64c5\u9577\u9019\u9805\u904b\u52d5\", score: 0 }\n                ]\n            },\n            {\n                id: 5,\n                text: \"\u4f60\u60f3\u548c\u5225\u4eba\u7d04\u6703\uff0c\u4f46\u4ed6\/\u5979\u7684\u7b54\u8986\u537b\u662f\u300c\u4e0d\u884c\u300d\uff1a\",\n                options: [\n                    { text: \"\u904b\u6c23\u4e0d\u597d\", score: 1 },\n                    { text: \"\u63d0\u51fa\u7d04\u6703\u7684\u6642\u5019\uff0c\u6211\u4e00\u5b9a\u8868\u9054\u5f97\u4e0d\u5920\u597d\", score: 0 }\n                ]\n            },\n            {\n                id: 6,\n                text: \"\u6200\u4eba\u5e0c\u671b\u548c\u4f60\u5206\u958b\u4e00\u6bb5\u6642\u9593\uff0c\u5f7c\u6b64\u51b7\u975c\u4e00\u4e0b\uff1a\",\n                options: [\n                    { text: \"\u6211\u592a\u4ee5\u81ea\u6211\u70ba\u4e2d\u5fc3\u4e86\", score: 1 },\n                    { text: \"\u6700\u8fd1\u966a\u4ed6\/\u5979\u7684\u6642\u9593\u592a\u5c11\u4e86\", score: 0 }\n                ]\n            },\n            {\n                id: 7,\n                text: \"\u4f60\u7684\u80a1\u7968\u4e00\u76f4\u8655\u65bc\u718a\u5e02\uff1a\",\n                options: [\n                    { text: \"\u5c0d\u80a1\u5e02\u4e0d\u5920\u4e86\u89e3\", score: 1 },\n                    { text: \"\u6c92\u6709\u9078\u5c0d\u80a1\u7968\", score: 0 }\n                ]\n            },\n            {\n                id: 8,\n                text: \"\u7528\u4fe1\u7528\u5361\u7d50\u5e33\u6642\u767c\u73fe\u984d\u5ea6\u4e0d\u8db3\uff1a\",\n                options: [\n                    { text: \"\u4ee5\u70ba\u4fe1\u7528\u5361\u9084\u6709\u984d\u5ea6\", score: 1 },\n                    { text: \"\u5fd8\u4e86\u7e73\u4fe1\u7528\u5361\u8cbb\", score: 0 }\n                ]\n            }\n        ]\n    };\n\n    \/\/ \u7d50\u679c\u89e3\u91cb\n    const resultInterpretations = {\n        0: { \n            level: \"\u975e\u5e38\u6a02\u89c0\", \n            description: \"\u4f60\u662f\u4e00\u500b\u975e\u5e38\u6a02\u89c0\u7684\u4eba\uff01\u9762\u5c0d\u56f0\u96e3\u6642\uff0c\u4f60\u7e3d\u80fd\u4fdd\u6301\u7a4d\u6975\u6b63\u9762\u7684\u5fc3\u614b\u3002\",\n            color: \"#198754\",\n            suggestions: \"\u7e7c\u7e8c\u4fdd\u6301\u9019\u7a2e\u7a4d\u6975\u7684\u601d\u7dad\u6a21\u5f0f\uff0c\u4f46\u4e5f\u8981\u9069\u5ea6\u95dc\u6ce8\u73fe\u5be6\u554f\u984c\uff0c\u78ba\u4fdd\u6a02\u89c0\u4e0d\u6703\u5f71\u97ff\u5be6\u969b\u884c\u52d5\u7684\u57f7\u884c\u3002\"\n        },\n        1: { \n            level: \"\u975e\u5e38\u6a02\u89c0\", \n            description: \"\u4f60\u662f\u4e00\u500b\u975e\u5e38\u6a02\u89c0\u7684\u4eba\uff01\u4f60\u5584\u65bc\u5f9e\u7a4d\u6975\u7684\u89d2\u5ea6\u770b\u5f85\u554f\u984c\u3002\",\n            color: \"#198754\",\n            suggestions: \"\u4f60\u7684\u6a02\u89c0\u614b\u5ea6\u662f\u5f88\u597d\u7684\u5fc3\u7406\u8cc7\u6e90\uff0c\u53ef\u4ee5\u5e6b\u52a9\u4f60\u5728\u56f0\u96e3\u4e2d\u4fdd\u6301\u97cc\u6027\u548c\u5275\u9020\u529b\u3002\"\n        },\n        2: { \n            level: \"\u6bd4\u8f03\u6a02\u89c0\", \n            description: \"\u4f60\u662f\u4e00\u500b\u6bd4\u8f03\u6a02\u89c0\u7684\u4eba\uff0c\u901a\u5e38\u80fd\u4ee5\u6b63\u9762\u7684\u614b\u5ea6\u9762\u5c0d\u632b\u6298\u3002\",\n            color: \"#20c997\",\n            suggestions: \"\u7e7c\u7e8c\u57f9\u990a\u9019\u7a2e\u7a4d\u6975\u7684\u601d\u7dad\u7fd2\u6163\uff0c\u5728\u9047\u5230\u632b\u6298\u6642\u591a\u95dc\u6ce8\u53ef\u63a7\u56e0\u7d20\u548c\u89e3\u6c7a\u65b9\u6848\u3002\"\n        },\n        3: { \n            level: \"\u6bd4\u8f03\u6a02\u89c0\", \n            description: \"\u4f60\u50be\u5411\u65bc\u6a02\u89c0\u601d\u8003\uff0c\u80fd\u5920\u5728\u56f0\u96e3\u4e2d\u627e\u5230\u5e0c\u671b\u3002\",\n            color: \"#20c997\",\n            suggestions: \"\u4f60\u5df2\u7d93\u5177\u5099\u826f\u597d\u7684\u5fc3\u7406\u8abf\u9069\u80fd\u529b\uff0c\u53ef\u4ee5\u5617\u8a66\u5e6b\u52a9\u5468\u570d\u7684\u4eba\u4e5f\u57f9\u990a\u9019\u7a2e\u7a4d\u6975\u5fc3\u614b\u3002\"\n        },\n        4: { \n            level: \"\u4e00\u822c\u6c34\u6e96\", \n            description: \"\u4f60\u7684\u6a02\u89c0\u7a0b\u5ea6\u8207\u4e00\u822c\u4eba\u76f8\u540c\uff0c\u5728\u4e0d\u540c\u60c5\u6cc1\u4e0b\u6703\u6709\u4e0d\u540c\u7684\u53cd\u61c9\u3002\",\n            color: \"#fd7e14\",\n            suggestions: \"\u53ef\u4ee5\u591a\u7df4\u7fd2\u6b63\u5411\u601d\u8003\u6280\u5de7\uff0c\u5b78\u7fd2\u5c07\u6ce8\u610f\u529b\u8f49\u5411\u53ef\u63a7\u5236\u548c\u53ef\u6539\u8b8a\u7684\u56e0\u7d20\u4e0a\u3002\"\n        },\n        5: { \n            level: \"\u7a0d\u5fae\u60b2\u89c0\", \n            description: \"\u4f60\u4e0d\u592a\u60b2\u89c0\uff0c\u4f46\u5728\u9762\u5c0d\u56f0\u96e3\u6642\u5076\u723e\u6703\u6709\u8ca0\u9762\u60f3\u6cd5\u3002\",\n            color: \"#fd7e14\",\n            suggestions: \"\u5617\u8a66\u8cea\u7591\u8ca0\u9762\u60f3\u6cd5\u7684\u771f\u5be6\u6027\uff0c\u591a\u95dc\u6ce8\u554f\u984c\u7684\u66ab\u6642\u6027\u548c\u7279\u5b9a\u6027\uff0c\u907f\u514d\u904e\u5ea6\u6982\u62ec\u3002\"\n        },\n        6: { \n            level: \"\u7a0d\u5fae\u60b2\u89c0\", \n            description: \"\u4f60\u6709\u4e00\u4e9b\u60b2\u89c0\u50be\u5411\uff0c\u5bb9\u6613\u5c07\u554f\u984c\u6b78\u56e0\u65bc\u500b\u4eba\u80fd\u529b\u4e0d\u8db3\u3002\",\n            color: \"#dc3545\",\n            suggestions: \"\u7df4\u7fd2\u5c07\u632b\u6298\u8996\u70ba\u5b78\u7fd2\u6a5f\u6703\uff0c\u95dc\u6ce8\u5916\u5728\u56e0\u7d20\u548c\u74b0\u5883\u689d\u4ef6\u5c0d\u7d50\u679c\u7684\u5f71\u97ff\u3002\"\n        },\n        7: { \n            level: \"\u975e\u5e38\u60b2\u89c0\", \n            description: \"\u4f60\u662f\u4e00\u500b\u975e\u5e38\u60b2\u89c0\u7684\u4eba\uff0c\u5e38\u5e38\u5c07\u56f0\u96e3\u6b78\u548e\u65bc\u81ea\u5df1\u7684\u80fd\u529b\u4e0d\u8db3\u3002\",\n            color: \"#dc3545\",\n            suggestions: \"\u5efa\u8b70\u5c0b\u6c42\u5c08\u696d\u5fc3\u7406\u8aee\u8a62\u7684\u5e6b\u52a9\uff0c\u5b78\u7fd2\u8a8d\u77e5\u91cd\u5efa\u6280\u5de7\uff0c\u57f9\u990a\u66f4\u5e73\u8861\u7684\u601d\u7dad\u6a21\u5f0f\u3002\"\n        },\n        8: { \n            level: \"\u975e\u5e38\u60b2\u89c0\", \n            description: \"\u4f60\u6709\u5f37\u70c8\u7684\u60b2\u89c0\u50be\u5411\uff0c\u9019\u53ef\u80fd\u6703\u5f71\u97ff\u4f60\u7684\u60c5\u7dd2\u548c\u884c\u70ba\u8868\u73fe\u3002\",\n            color: \"#dc3545\",\n            suggestions: \"\u5f37\u70c8\u5efa\u8b70\u5c0b\u6c42\u5c08\u696d\u5354\u52a9\uff0c\u5b78\u7fd2\u6b63\u5411\u5fc3\u7406\u5b78\u6280\u5de7\uff0c\u9010\u6b65\u6539\u8b8a\u8ca0\u9762\u7684\u601d\u7dad\u7fd2\u6163\u3002\"\n        }\n    };\n\n    \/\/ \u61c9\u7528\u72c0\u614b\n    const state = {\n        currentQuestion: 0,\n        answers: [],\n        totalScore: 0\n    };\n\n    \/\/ DOM \u5143\u7d20\n    const elements = {\n        landingPage: document.querySelector('[data-page=\"landing\"]'),\n        quizPage: document.querySelector('[data-page=\"quiz\"]'),\n        resultPage: document.querySelector('[data-page=\"result\"]'),\n        currentQuestionSpan: document.querySelector('[data-current-question]'),\n        totalQuestionsSpan: document.querySelector('[data-total-questions]'),\n        progressBar: document.querySelector('[data-progress-bar]'),\n        questionText: document.querySelector('[data-question-text]'),\n        optionsContainer: document.querySelector('[data-options-container]'),\n        prevBtn: document.querySelector('[data-action=\"prev-question\"]'),\n        resultScore: document.querySelector('[data-result-score]'),\n        resultDescription: document.querySelector('[data-result-description]'),\n        detailedAnalysis: document.querySelector('[data-detailed-analysis]'),\n        suggestions: document.querySelector('[data-suggestions]')\n    };\n\n    \/\/ \u521d\u59cb\u5316\n    function init() {\n        elements.totalQuestionsSpan.textContent = quizData.questions.length;\n        attachEventListeners();\n    }\n\n    \/\/ \u4e8b\u4ef6\u76e3\u807d\u5668\n    function attachEventListeners() {\n        document.addEventListener('click', handleClick);\n    }\n\n    \/\/ \u9ede\u64ca\u4e8b\u4ef6\u8655\u7406\n    function handleClick(e) {\n        const action = e.target.closest('[data-action]')?.dataset.action;\n        \n        switch(action) {\n            case 'start-quiz':\n                startQuiz();\n                break;\n            case 'prev-question':\n                goToPreviousQuestion();\n                break;\n            case 'restart-quiz':\n                restartQuiz();\n                break;\n        }\n\n        \/\/ \u8655\u7406\u9078\u9805\u9ede\u64ca\n        if (e.target.closest('[data-option]')) {\n            e.preventDefault();\n            selectOption(e.target.closest('[data-option]'));\n        }\n        \n        \/\/ \u8655\u7406\u6a19\u7c64\u9ede\u64ca\n        if (e.target.closest('.form-check-label')) {\n            e.preventDefault();\n            const input = e.target.closest('.form-check').querySelector('[data-option]');\n            if (input) {\n                input.checked = true;\n                selectOption(input);\n            }\n        }\n    }\n\n    \/\/ \u958b\u59cb\u6e2c\u9a57\n    function startQuiz() {\n        showPage('quiz');\n        state.currentQuestion = 0;\n        state.answers = [];\n        state.totalScore = 0;\n        displayQuestion();\n        scrollToTop();\n    }\n\n    \/\/ \u986f\u793a\u554f\u984c\n    function displayQuestion() {\n        const question = quizData.questions[state.currentQuestion];\n        \n        elements.currentQuestionSpan.textContent = state.currentQuestion + 1;\n        elements.questionText.textContent = question.text;\n        \n        \/\/ \u66f4\u65b0\u9032\u5ea6\u689d\n        const progress = ((state.currentQuestion + 1) \/ quizData.questions.length) * 100;\n        elements.progressBar.style.width = `${progress}%`;\n        \n        \/\/ \u986f\u793a\u9078\u9805 - \u4f7f\u7528 Bootstrap \u539f\u751f\u7d44\u4ef6\n        elements.optionsContainer.innerHTML = question.options.map((option, index) => `\n            <div class=\"form-check mb-3\">\n                <label class=\"form-check-label w-100 p-3 border rounded hover-lift d-flex align-items-center\" \n                       for=\"option${index}\" style=\"margin-left: 0; cursor: pointer; font-size: 1.1rem; transition: all 0.3s ease;\">\n                    <input class=\"form-check-input me-3\" type=\"radio\" name=\"question${state.currentQuestion}\" \n                           id=\"option${index}\" data-option=\"${index}\" style=\"transform: scale(1.4); margin-top: 0;\">\n                    <span class=\"badge bg-primary me-3\">${String.fromCharCode(65 + index)}<\/span>\n                    <span class=\"flex-grow-1\">${option.text}<\/span>\n                <\/label>\n            <\/div>\n        `).join('');\n        \n        \/\/ \u986f\u793a\/\u96b1\u85cf\u4e0a\u4e00\u984c\u6309\u9215\n        elements.prevBtn.classList.toggle('d-none-custom', state.currentQuestion === 0);\n        \n        \/\/ \u5982\u679c\u6709\u4e4b\u524d\u7684\u7b54\u6848\uff0c\u6a19\u8a18\u70ba\u5df2\u9078\n        if (state.answers[state.currentQuestion] !== undefined) {\n            const selectedInput = elements.optionsContainer.querySelector(`[data-option=\"${state.answers[state.currentQuestion]}\"]`);\n            if (selectedInput) {\n                selectedInput.checked = true;\n                updateOptionStyles();\n            }\n        }\n    }\n\n    \/\/ \u66f4\u65b0\u9078\u9805\u6a23\u5f0f\n    function updateOptionStyles() {\n        const labels = elements.optionsContainer.querySelectorAll('.form-check-label');\n        const inputs = elements.optionsContainer.querySelectorAll('.form-check-input');\n        \n        inputs.forEach((input, index) => {\n            const label = labels[index];\n            if (input.checked) {\n                label.classList.remove('border');\n                label.classList.add('bg-primary', 'text-white', 'border-primary');\n            } else {\n                label.classList.remove('bg-primary', 'text-white', 'border-primary');\n                label.classList.add('border');\n            }\n        });\n    }\n\n    \/\/ \u9078\u64c7\u9078\u9805\n    function selectOption(optionElement) {\n        const optionIndex = parseInt(optionElement.dataset.option);\n        \n        \/\/ \u4fdd\u5b58\u7b54\u6848\n        state.answers[state.currentQuestion] = optionIndex;\n        \n        \/\/ \u66f4\u65b0\u6a23\u5f0f\n        updateOptionStyles();\n        \n        \/\/ \u5ef6\u9072\u9032\u5165\u4e0b\u4e00\u984c\uff0c\u8b93\u7528\u6236\u770b\u5230\u9078\u4e2d\u6548\u679c\n        setTimeout(() => {\n            if (state.currentQuestion < quizData.questions.length - 1) {\n                state.currentQuestion++;\n                displayQuestion();\n            } else {\n                finishQuiz();\n            }\n        }, 400);\n    }\n\n    \/\/ \u4e0a\u4e00\u984c\n    function goToPreviousQuestion() {\n        if (state.currentQuestion > 0) {\n            state.currentQuestion--;\n            displayQuestion();\n        }\n    }\n\n    \/\/ \u5b8c\u6210\u6e2c\u9a57\n    function finishQuiz() {\n        \/\/ \u8a08\u7b97\u7e3d\u5206\n        state.totalScore = state.answers.reduce((total, answerIndex, questionIndex) => {\n            return total + quizData.questions[questionIndex].options[answerIndex].score;\n        }, 0);\n        \n        showResults();\n        scrollToTop();\n    }\n\n    \/\/ \u986f\u793a\u7d50\u679c\n    function showResults() {\n        const result = resultInterpretations[state.totalScore];\n        \n        elements.resultScore.textContent = result.level;\n        elements.resultDescription.textContent = result.description;\n        \n        \/\/ \u8a73\u7d30\u5206\u6790 - \u4f7f\u7528 Bootstrap \u7d44\u4ef6\n        elements.detailedAnalysis.innerHTML = `\n            <div class=\"row g-4\">\n                <div class=\"col-md-6\">\n                    <div class=\"d-flex align-items-start\">\n                        <div class=\"bg-primary bg-opacity-10 rounded-circle p-2 me-3\">\n                            <i class=\"bi bi-bar-chart text-primary\"><\/i>\n                        <\/div>\n                        <div>\n                            <h6 class=\"fw-bold mb-2 fs-6\">\u50be\u5411\u5206\u6790<\/h6>\n                            <p class=\"mb-1 fs-6\">\u6a02\u89c0\u7a0b\u5ea6\uff1a<span class=\"badge bg-secondary\">${result.level}<\/span><\/p>\n                            <p class=\"text-muted fs-6\">\u5728\u9762\u5c0d\u56f0\u96e3\u6642\uff0c\u4f60\u6709 <strong class=\"text-success\">${Math.round((8-state.totalScore)\/8*100)}%<\/strong> \u7684\u6a02\u89c0\u50be\u5411<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"col-md-6\">\n                    <div class=\"d-flex align-items-start\">\n                        <div class=\"bg-success bg-opacity-10 rounded-circle p-2 me-3\">\n                            <i class=\"bi bi-graph-up text-success\"><\/i>\n                        <\/div>\n                        <div>\n                            <h6 class=\"fw-bold mb-2 fs-6\">\u601d\u7dad\u6a21\u5f0f<\/h6>\n                            <p class=\"mb-1 fs-6\">\u4f60\u50be\u5411\u65bc\u5c07\u554f\u984c\u6b78\u56e0\u65bc\uff1a<\/p>\n                            <ul class=\"text-muted mb-0 fs-6\" style=\"padding-left: 1rem;\">\n                                <li>${state.totalScore >= 4 ? '\u500b\u4eba\u80fd\u529b\u6216\u7279\u8cea (\u8f03\u60b2\u89c0)' : '\u5177\u9ad4\u60c5\u6cc1\u6216\u5916\u5728\u56e0\u7d20 (\u8f03\u6a02\u89c0)'}<\/li>\n                                <li>${state.totalScore >= 4 ? '\u6301\u4e45\u4e14\u5ee3\u6cdb\u7684\u539f\u56e0' : '\u66ab\u6642\u4e14\u7279\u5b9a\u7684\u539f\u56e0'}<\/li>\n                            <\/ul>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        `;\n        \n        elements.suggestions.innerHTML = `<p class=\"mb-0\">${result.suggestions}<\/p>`;\n        \n        \/\/ \u5275\u5efa\u5716\u8868\n        createResultChart(result);\n        \n        showPage('result');\n    }\n\n    \/\/ \u5275\u5efa\u7d50\u679c\u5716\u8868\n    function createResultChart(result) {\n        const ctx = document.getElementById('result-chart').getContext('2d');\n        \n        \/\/ \u92b7\u6bc0\u4e4b\u524d\u7684\u5716\u8868\n        if (window.resultChart) {\n            window.resultChart.destroy();\n        }\n        \n        const optimismScore = 8 - state.totalScore;\n        const pessimismScore = state.totalScore;\n        \n        window.resultChart = new Chart(ctx, {\n            type: 'doughnut',\n            data: {\n                labels: ['\u6a02\u89c0\u50be\u5411', '\u60b2\u89c0\u50be\u5411'],\n                datasets: [{\n                    data: [optimismScore, pessimismScore],\n                    backgroundColor: [\n                        '#198754', \/\/ Bootstrap success\n                        '#dc3545'  \/\/ Bootstrap danger\n                    ],\n                    borderWidth: 4,\n                    borderColor: '#ffffff',\n                    hoverOffset: 8\n                }]\n            },\n            options: {\n                responsive: true,\n                maintainAspectRatio: true,\n                plugins: {\n                    legend: {\n                        position: 'bottom',\n                        labels: {\n                            padding: 25,\n                            font: {\n                                size: 16,\n                                weight: '600'\n                            },\n                            usePointStyle: true,\n                            pointStyle: 'circle'\n                        }\n                    },\n                    tooltip: {\n                        callbacks: {\n                            label: function(context) {\n                                const percentage = Math.round((context.parsed \/ 8) * 100);\n                                return `${context.label}: ${percentage}%`;\n                            }\n                        },\n                        titleFont: { size: 16 },\n                        bodyFont: { size: 16 }\n                    }\n                },\n                cutout: '60%'\n            }\n        });\n    }\n\n    \/\/ \u91cd\u65b0\u6e2c\u9a57\n    function restartQuiz() {\n        state.currentQuestion = 0;\n        state.answers = [];\n        state.totalScore = 0;\n        showPage('landing');\n        scrollToTop();\n    }\n\n    \/\/ \u986f\u793a\u9801\u9762\n    function showPage(page) {\n        document.querySelectorAll('[data-page]').forEach(el => {\n            el.classList.add('d-none-custom');\n        });\n        document.querySelector(`[data-page=\"${page}\"]`).classList.remove('d-none-custom');\n    }\n\n    \/\/ \u6efe\u52d5\u5230\u9802\u90e8\n    function scrollToTop() {\n        setTimeout(() => {\n            window.scrollTo({\n                top: 0,\n                behavior: 'smooth'\n            });\n        }, 100);\n    }\n\n    \/\/ \u555f\u52d5\u61c9\u7528\n    init();\n\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u4ece\u5fc3\u7406\u5b66\u5bb6\u9a6c\u4e01\u00b7\u585e\u5229\u683c\u66fc\u8bbe\u8ba1\u7684\u4e00\u9879\u4e50\u89c2\u6d4b\u8bd5\u9898\u4e2d\u6311\u9009\u51fa\u6765\u7684\uff0c\u901a\u8fc7\u8fd9\u4e9b\u95ee\u9898\uff0c\u4f60\u53ef\u4ee5\u77e5\u9053\u81ea\u5df1\u5728\u574f\u4e8b\u6765\u4e34\u65f6\u662f\u4e50\u89c2\u8fd8\u662f\u60b2\u89c2\u3002<br \/>\n\u9009\u62e9\u4e0e\u81ea\u5df1\u6700\u4e3a\u63a5\u8fd1\u7684\u7b54\u6848<\/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":"normal-width-container","site-content-style":"unboxed","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"","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-2630","post","type-post","status-publish","format-standard","hentry","category-personality"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2630","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=2630"}],"version-history":[{"count":10,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2630\/revisions"}],"predecessor-version":[{"id":10153,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2630\/revisions\/10153"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2630"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2630"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}