{"id":9150,"date":"2025-04-21T17:12:45","date_gmt":"2025-04-21T09:12:45","guid":{"rendered":"https:\/\/xinliceyan.org\/?p=9150"},"modified":"2025-05-25T18:22:44","modified_gmt":"2025-05-25T10:22:44","slug":"classmate-friend","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/classmate-friend","title":{"rendered":"\u540c\u5b66\u670b\u53cb\u5173\u7cfb\u7ebf\u4e0a\u514d\u8d39\u6d4b\u9a8c\uff0828\u9898\uff09"},"content":{"rendered":"<!-- \u5f15\u5165\u5fc5\u8981\u7684CSS\u548cJS\u5e93 -->\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<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n\n<!-- \u540c\u5b78\u670b\u53cb\u95dc\u4fc2\u6e2c\u9a57 -->\n<div class=\"quiz-wrapper\" style=\"max-width: 750px; margin: 0 auto; padding: 1rem; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans TC', sans-serif;\">\n    <main class=\"quiz-container\" role=\"main\">\n        <!-- \u5f15\u5c0e\u9801 -->\n        <section class=\"quiz-intro-page\" data-page=\"intro\">\n            <!-- Hero Section -->\n            <div class=\"hero-section\" style=\"text-align: center; padding: 2rem 1rem; margin: 1rem 0; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 12px;\">\n                <h1 style=\"font-size: 2.5rem; font-weight: bold; color: #0d6efd; margin-bottom: 1rem;\">\n                    \ud83d\udc65 \u540c\u5b78\u670b\u53cb\u95dc\u4fc2\u6e2c\u9a57\n                <\/h1>\n                <p style=\"font-size: 1.25rem; color: #6c757d; margin-bottom: 2rem;\">\u63a2\u7d22\u4f60\u7684\u4eba\u969b\u95dc\u4fc2\u6a21\u5f0f\uff0c\u63d0\u5347\u793e\u4ea4\u6280\u5de7<\/p>\n                <div style=\"display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem;\">\n                    <div>\n                        <div style=\"font-size: 1.75rem; color: #0d6efd; font-weight: bold;\">28<\/div>\n                        <small style=\"color: #6c757d;\">\u5c08\u696d\u554f\u984c<\/small>\n                    <\/div>\n                    <div>\n                        <div style=\"font-size: 1.75rem; color: #198754; font-weight: bold;\">5\u5206\u9418<\/div>\n                        <small style=\"color: #6c757d;\">\u5feb\u901f\u5b8c\u6210<\/small>\n                    <\/div>\n                    <div>\n                        <div style=\"font-size: 1.75rem; color: #0dcaf0; font-weight: bold;\">\u5373\u6642<\/div>\n                        <small style=\"color: #6c757d;\">\u7372\u5f97\u7d50\u679c<\/small>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Features Section -->\n            <div style=\"margin-bottom: 2rem;\">\n                <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;\">\n                    <div class=\"feature-card\" style=\"background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); text-align: center; transition: transform 0.3s ease;\">\n                        <div style=\"width: 60px; height: 60px; background: #0d6efd; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.5rem;\">\u2764\ufe0f<\/div>\n                        <h6 style=\"font-weight: bold; margin-bottom: 0.5rem;\">\u6df1\u5165\u4e86\u89e3<\/h6>\n                        <p style=\"color: #6c757d; font-size: 0.875rem;\">\u900f\u904e28\u500b\u554f\u984c\uff0c\u5168\u9762\u8a55\u4f30\u4f60\u5728\u4eba\u969b\u95dc\u4fc2\u4e2d\u7684\u884c\u70ba\u6a21\u5f0f<\/p>\n                    <\/div>\n                    <div class=\"feature-card\" style=\"background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); text-align: center; transition: transform 0.3s ease;\">\n                        <div style=\"width: 60px; height: 60px; background: #198754; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.5rem;\">\ud83d\udcca<\/div>\n                        <h6 style=\"font-weight: bold; margin-bottom: 0.5rem;\">\u79d1\u5b78\u5206\u6790<\/h6>\n                        <p style=\"color: #6c757d; font-size: 0.875rem;\">\u57fa\u65bc\u5fc3\u7406\u5b78\u7814\u7a76\uff0c\u63d0\u4f9b\u5c08\u696d\u7684\u4eba\u969b\u95dc\u4fc2\u5206\u6790\u5831\u544a<\/p>\n                    <\/div>\n                    <div class=\"feature-card\" style=\"background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); text-align: center; transition: transform 0.3s ease;\">\n                        <div style=\"width: 60px; height: 60px; background: #0dcaf0; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.5rem;\">\ud83d\udca1<\/div>\n                        <h6 style=\"font-weight: bold; margin-bottom: 0.5rem;\">\u5b9e\u7528\u5efa\u8bae<\/h6>\n                        <p style=\"color: #6c757d; font-size: 0.875rem;\">\u7372\u5f97\u500b\u6027\u5316\u7684\u6539\u5584\u5efa\u8b70\uff0c\u63d0\u5347\u4f60\u7684\u4eba\u969b\u4ea4\u5f80\u80fd\u529b<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Description Section -->\n            <div style=\"margin-bottom: 2rem;\">\n                <div style=\"background: #f8f9fa; border-radius: 12px; padding: 1.5rem;\">\n                    <div style=\"display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center;\">\n                        <div>\n                            <h5 style=\"font-weight: bold; color: #212529; margin-bottom: 0.75rem;\">\u70ba\u4ec0\u9ebc\u8981\u9032\u884c\u9019\u500b\u6e2c\u9a57\uff1f<\/h5>\n                            <p style=\"margin-bottom: 0.75rem; font-size: 0.875rem; line-height: 1.5;\">\u672c\u6e2c\u9a57\u5c08\u70ba\u4e2d\u5b78\u751f\u8a2d\u8a08\uff0c\u5e6b\u52a9\u4f60\u4e86\u89e3\u81ea\u5df1\u8207\u540c\u5b78\u670b\u53cb\u76f8\u8655\u6642\u7684\u884c\u70ba\u7279\u9ede\u3002\u900f\u904e\u56de\u7b54\u554f\u984c\uff0c\u4f60\u5c07\u767c\u73fe\u81ea\u5df1\u5728\u793e\u4ea4\u4e92\u52d5\u4e2d\u7684\u512a\u52e2\u8207\u9700\u8981\u6539\u9032\u7684\u5730\u65b9\u3002<\/p>\n                            <p style=\"margin-bottom: 0; font-size: 0.875rem; line-height: 1.5;\">\u6e2c\u9a57\u5305\u542b28\u500b\u60c5\u5883\u554f\u984c\uff0c\u8acb\u6839\u64da\u4f60\u7684\u771f\u5be6\u611f\u53d7\u8aa0\u5be6\u56de\u7b54\u3002\u5b8c\u6210\u5f8c\u4f60\u5c07\u7372\u5f97\u8a73\u7d30\u7684\u5206\u6790\u5831\u544a\u548c\u5be6\u7528\u7684\u5efa\u8b70\u3002<\/p>\n                        <\/div>\n                        <div style=\"font-size: 3rem;\">\ud83d\udccb<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- CTA Section -->\n            <div style=\"text-align: center; margin-bottom: 2rem;\">\n                <button class=\"quiz-start-btn\" style=\"background: #0d6efd; color: white; border: none; padding: 1rem 2rem; font-size: 1.125rem; font-weight: bold; border-radius: 50px; box-shadow: 0 0.25rem 0.5rem rgba(13,110,253,0.3); cursor: pointer; transition: all 0.3s ease; min-height: 44px;\">\n                    \u25b6\ufe0f \u958b\u59cb\u6e2c\u9a57 \u2192\n                <\/button>\n                <p style=\"font-size: 0.875rem; color: #6c757d; margin-top: 1rem; margin-bottom: 0;\">\n                    \ud83d\udee1\ufe0f \u5b8c\u5168\u514d\u8cbb \u2022 \u7121\u9700\u8a3b\u518a \u2022 \u7d50\u679c\u5373\u6642\u986f\u793a\n                <\/p>\n            <\/div>\n        <\/section>\n\n        <!-- \u6e2c\u9a57\u9801 -->\n        <section class=\"quiz-test-page\" data-page=\"quiz\" style=\"display: none;\">\n            <header style=\"text-align: center; margin-bottom: 2rem;\">\n                <h2 style=\"color: #212529; margin-bottom: 1rem;\">\u540c\u5b78\u670b\u53cb\u95dc\u4fc2\u6e2c\u9a57<\/h2>\n                <div style=\"margin-bottom: 1rem;\">\n                    <span>\u95ee\u9898 <span class=\"current-question\">1<\/span> \/ <span>28<\/span><\/span>\n                <\/div>\n                <div style=\"background: #e9ecef; border-radius: 10px; height: 8px; overflow: hidden;\">\n                    <div class=\"progress-bar\" style=\"background: #0d6efd; height: 100%; width: 0%; transition: width 0.3s ease;\"><\/div>\n                <\/div>\n            <\/header>\n\n            <article style=\"margin-bottom: 2rem;\">\n                <h3 class=\"quiz-question\" style=\"font-size: 1.75rem; font-weight: bold; line-height: 1.4; margin-bottom: 2rem; text-align: center; color: #212529;\">\u8f09\u5165\u4e2d&#8230;<\/h3>\n                <div class=\"quiz-options\" style=\"display: flex; gap: 1rem; justify-content: center;\">\n                    <button class=\"quiz-option\" data-option=\"yes\" style=\"flex: 1; max-width: 200px; background: white; border: 2px solid #198754; color: #198754; padding: 1rem; border-radius: 12px; font-size: 1.125rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; min-height: 60px; display: flex; align-items: center; justify-content: center;\">\n                        \u2705 \u662f\n                    <\/button>\n                    <button class=\"quiz-option\" data-option=\"no\" style=\"flex: 1; max-width: 200px; background: white; border: 2px solid #dc3545; color: #dc3545; padding: 1rem; border-radius: 12px; font-size: 1.125rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; min-height: 60px; display: flex; align-items: center; justify-content: center;\">\n                        \u274c \u5426\n                    <\/button>\n                <\/div>\n            <\/article>\n\n            <footer style=\"text-align: center;\">\n                <button class=\"quiz-prev-btn\" style=\"background: #6c757d; color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; display: none;\">\n                    \u2190 \u4e0a\u4e00\u984c\n                <\/button>\n            <\/footer>\n        <\/section>\n\n        <!-- \u7d50\u679c\u9801 -->\n        <section class=\"quiz-result-page\" data-page=\"result\" style=\"display: none;\">\n            <header style=\"text-align: center; margin-bottom: 2rem;\">\n                <h2 style=\"color: #212529; margin-bottom: 1rem;\">\ud83c\udf89 \u6e2c\u9a57\u7d50\u679c<\/h2>\n            <\/header>\n\n            <article>\n                <!-- \u5206\u6578\u7e3d\u89bd -->\n                <div style=\"text-align: center; margin-bottom: 3rem; padding: 2rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 20px; color: white;\">\n                    <div style=\"margin-bottom: 1rem;\">\n                        <span style=\"font-size: 1.25rem; opacity: 0.9;\">\u603b\u5206<\/span>\n                        <div style=\"font-size: 4rem; font-weight: bold; margin: 0.5rem 0;\">\n                            <span class=\"total-score\">0<\/span><span style=\"font-size: 2rem; opacity: 0.8;\"> \/ 28<\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"level-badge\" style=\"display: inline-block; padding: 0.75rem 1.5rem; border-radius: 50px; background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); font-size: 1.125rem; font-weight: 600;\">\n                        \u8a55\u4f30\u4e2d&#8230;\n                    <\/div>\n                <\/div>\n\n                <!-- \u96f7\u9054\u5716 -->\n                <div style=\"margin-bottom: 3rem; background: white; padding: 2rem; border-radius: 20px; box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);\">\n                    <h3 style=\"text-align: center; margin-bottom: 1.5rem; color: #212529;\">\ud83d\udcca \u80fd\u529b\u5206\u6790\u5716<\/h3>\n                    <div style=\"position: relative; height: 400px; width: 100%;\">\n                        <canvas id=\"quizResultChart\" style=\"max-width: 100%; max-height: 100%;\"><\/canvas>\n                    <\/div>\n                <\/div>\n\n                <!-- \u8a73\u7d30\u5206\u6790 -->\n                <div style=\"margin-bottom: 2rem; background: white; padding: 2rem; border-radius: 20px; box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);\">\n                    <h3 style=\"color: #212529; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;\">\n                        \ud83d\udd0d \u8a73\u7d30\u5206\u6790\n                    <\/h3>\n                    <div class=\"analysis-content\" style=\"line-height: 1.6; color: #495057;\">\n                        <p>\u5206\u6790\u4e2d&#8230;<\/p>\n                    <\/div>\n                <\/div>\n\n                <!-- \u6539\u5584\u5efa\u8b70 -->\n                <div style=\"margin-bottom: 2rem; background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%); padding: 2rem; border-radius: 20px;\">\n                    <h3 style=\"color: #2d3436; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;\">\n                        \ud83d\udca1 \u6539\u5584\u5efa\u8b70\n                    <\/h3>\n                    <div class=\"suggestions-content\" style=\"line-height: 1.6; color: #2d3436;\">\n                        <p>\u5efa\u8b70\u751f\u6210\u4e2d&#8230;<\/p>\n                    <\/div>\n                <\/div>\n\n                <!-- \u91cd\u65b0\u6e2c\u9a57\u6309\u9215 -->\n                <div style=\"text-align: center; margin-top: 3rem;\">\n                    <button class=\"quiz-restart-btn\" style=\"background: linear-gradient(135deg, #00b894, #00cec9); color: white; border: none; padding: 1rem 2rem; font-size: 1.125rem; font-weight: bold; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 0.25rem 0.5rem rgba(0,184,148,0.3);\">\n                        \ud83d\udd04 \u91cd\u65b0\u6e2c\u9a57\n                    <\/button>\n                <\/div>\n            <\/article>\n        <\/section>\n    <\/main>\n<\/div>\n\n<!-- CSS \u6a23\u5f0f -->\n<style>\n\/* \u6e2c\u9a57\u61c9\u7528\u6a23\u5f0f *\/\n.quiz-wrapper * {\n    box-sizing: border-box;\n}\n\n\/* \u61f8\u505c\u6548\u679c *\/\n.feature-card:hover {\n    transform: translateY(-3px) !important;\n    box-shadow: 0 0.375rem 1rem rgba(0,0,0,0.15) !important;\n}\n\n.quiz-start-btn:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 0.375rem 0.75rem rgba(13,110,253,0.4) !important;\n    background: #0b5ed7 !important;\n}\n\n.quiz-restart-btn:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 0.375rem 0.75rem rgba(0,184,148,0.4) !important;\n}\n\n.quiz-option:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1) !important;\n}\n\n.quiz-option.selected[data-option=\"yes\"] {\n    background: #198754 !important;\n    color: white !important;\n    border-color: #198754 !important;\n    transform: translateY(-2px);\n    box-shadow: 0 0.25rem 0.5rem rgba(25,135,84,0.3) !important;\n}\n\n.quiz-option.selected[data-option=\"no\"] {\n    background: #dc3545 !important;\n    color: white !important;\n    border-color: #dc3545 !important;\n    transform: translateY(-2px);\n    box-shadow: 0 0.25rem 0.5rem rgba(220,53,69,0.3) !important;\n}\n\n.quiz-prev-btn:hover {\n    background: #5a6268 !important;\n    transform: translateY(-1px);\n}\n\n\/* \u97ff\u61c9\u5f0f\u8a2d\u8a08 *\/\n@media (max-width: 768px) {\n    .quiz-wrapper {\n        padding: 0.5rem !important;\n    }\n    \n    .hero-section {\n        padding: 1.5rem 1rem !important;\n    }\n    \n    .hero-section h1 {\n        font-size: 2rem !important;\n    }\n    \n    .quiz-options {\n        flex-direction: column !important;\n        align-items: center;\n    }\n    \n    .quiz-option {\n        max-width: 300px !important;\n        width: 100% !important;\n    }\n    \n    .quiz-question {\n        font-size: 1.5rem !important;\n        font-weight: bold !important;\n    }\n}\n\n@media (max-width: 480px) {\n    .hero-section div[style*=\"grid-template-columns\"] {\n        grid-template-columns: 1fr !important;\n        gap: 0.5rem !important;\n    }\n    \n    .quiz-wrapper div[style*=\"grid-template-columns: repeat(auto-fit\"] {\n        grid-template-columns: 1fr !important;\n    }\n\n    .quiz-question {\n        font-size: 1.375rem !important;\n        font-weight: bold !important;\n    }\n}\n\n\/* \u7121\u969c\u7919\u6027 *\/\n.quiz-option:focus,\n.quiz-start-btn:focus,\n.quiz-restart-btn:focus,\n.quiz-prev-btn:focus {\n    outline: 2px solid #0d6efd;\n    outline-offset: 2px;\n}\n\n\/* \u6e1b\u5c11\u52d5\u756b\u504f\u597d\u652f\u6301 *\/\n@media (prefers-reduced-motion: reduce) {\n    * {\n        transition: none !important;\n        animation: none !important;\n    }\n}\n<\/style>\n\n<!-- JavaScript \u884c\u70ba -->\n<script>\n\/\/ \u7b49\u5f85 Chart.js \u5b8c\u5168\u52a0\u8f09\nfunction initQuizApp() {\n    if (typeof Chart === 'undefined') {\n        setTimeout(initQuizApp, 100);\n        return;\n    }\n\n    const QuizApp = {\n        \/\/ \u6e2c\u9a57\u554f\u984c\n        questions: [\n            \"\u95dc\u65bc\u81ea\u5df1\u7684\u7169\u60f1\u6709\u53e3\u96e3\u8a00\u3002\",\n            \"\u548c\u964c\u751f\u4eba\u898b\u9762\u611f\u89ba\u4e0d\u81ea\u7136\u3002\",\n            \"\u904e\u5206\u5730\u7fa8\u6155\u548c\u5992\u5fcc\u5225\u4eba\u3002\",\n            \"\u8207\u7570\u6027\u4ea4\u5f80\u592a\u5c11\u3002\",\n            \"\u5c0d\u9023\u7e8c\u4e0d\u65b7\u7684\u6703\u8ac7\u611f\u5230\u56f0\u96e3\u3002\",\n            \"\u5728\u793e\u4ea4\u5834\u5408\uff0c\u611f\u5230\u7dca\u5f35\u3002\",\n            \"\u6642\u5e38\u50b7\u5bb3\u5225\u4eba\u3002\",\n            \"\u8207\u7570\u6027\u4f86\u5f80\u611f\u89ba\u4e0d\u81ea\u7136\u3002\",\n            \"\u8207\u4e00\u5927\u7fa4\u670b\u53cb\u5728\u4e00\u8d77\uff0c\u5e38\u611f\u5230\u5b64\u5bc2\u6216\u5931\u843d\u3002\",\n            \"\u6975\u6613\u53d7\u7a98\u3002\",\n            \"\u8207\u5225\u4eba\u4e0d\u80fd\u548c\u7766\u76f8\u8655\u3002\",\n            \"\u4e0d\u77e5\u9053\u8207\u7570\u6027\u76f8\u8655\u5982\u4f55\u9069\u53ef\u800c\u6b62\u3002\",\n            \"\u7576\u4e0d\u719f\u6089\u7684\u4eba\u5c0d\u81ea\u5df1\u50be\u8a34\u4ed6\u7684\u751f\u5e73\u906d\u9047\u4ee5\u6c42\u540c\u60c5\u6642\uff0c\u81ea\u5df1\u5e38\u89ba\u5f97\u4e0d\u81ea\u5728\u3002\",\n            \"\u64d4\u5fc3\u5225\u4eba\u5c0d\u81ea\u5df1\u6709\u4ec0\u9ebc\u5370\u8c61\u3002\",\n            \"\u7e3d\u662f\u76e1\u529b\u4f7f\u5225\u4eba\u8cde\u8b58\u81ea\u5df1\u3002\",\n            \"\u6697\u81ea\u601d\u6155\u7570\u6027\u3002\",\n            \"\u6642\u5e38\u907f\u514d\u8868\u9054\u81ea\u5df1\u7684\u611f\u53d7\u3002\",\n            \"\u4e0d\u80fd\u78ba\u4fe1\u81ea\u5df1\u7684\u5100\u8868\uff08\u5bb9\u8c8c\uff09\u3002\",\n            \"\u8a0e\u53ad\u67d0\u4eba\u6216\u88ab\u67d0\u4eba\u6240\u8a0e\u53ad\u3002\",\n            \"\u77a7\u4e0d\u8d77\u7570\u6027\u3002\",\n            \"\u4e0d\u80fd\u5c08\u6ce8\u5730\u50be\u807d\u3002\",\n            \"\u81ea\u5df1\u7684\u7169\u60f1\u7121\u4eba\u53ef\u7533\u8a34\u3002\",\n            \"\u53d7\u5225\u4eba\u6392\u65a5\u8207\u51b7\u6f20\u3002\",\n            \"\u88ab\u7570\u6027\u77a7\u4e0d\u8d77\u3002\",\n            \"\u4e0d\u80fd\u5ee3\u6cdb\u5730\u807d\u53d6\u5404\u7a2e\u610f\u898b\u3001\u770b\u6cd5\u3002\",\n            \"\u81ea\u5df1\u5e38\u56e0\u53d7\u50b7\u5bb3\u800c\u6697\u81ea\u50b7\u5fc3\u3002\",\n            \"\u5e38\u88ab\u5225\u4eba\u8ac7\u8ad6\u3001\u611a\u5f04\u3002\",\n            \"\u8207\u7570\u6027\u4ea4\u5f80\u4e0d\u77e5\u5982\u4f55\u66f4\u597d\u5730\u76f8\u8655\u3002\"\n        ],\n        \n        \/\/ \u61c9\u7528\u72c0\u614b\n        state: {\n            currentQuestion: 0,\n            answers: [],\n            totalScore: 0\n        },\n        \n        \/\/ DOM \u5143\u7d20\n        elements: {},\n        \n        \/\/ \u5716\u8868\u5be6\u4f8b\n        chartInstance: null,\n        \n        \/\/ \u521d\u59cb\u5316\n        init() {\n            this.cacheElements();\n            this.bindEvents();\n            this.showIntroPage();\n        },\n        \n        \/\/ \u5feb\u53d6DOM\u5143\u7d20\n        cacheElements() {\n            const wrapper = document.querySelector('.quiz-wrapper');\n            this.elements = {\n                introPage: wrapper.querySelector('[data-page=\"intro\"]'),\n                quizPage: wrapper.querySelector('[data-page=\"quiz\"]'),\n                resultPage: wrapper.querySelector('[data-page=\"result\"]'),\n                questionText: wrapper.querySelector('.quiz-question'),\n                optionsContainer: wrapper.querySelector('.quiz-options'),\n                progressBar: wrapper.querySelector('.progress-bar'),\n                currentQuestionSpan: wrapper.querySelector('.current-question'),\n                prevButton: wrapper.querySelector('.quiz-prev-btn'),\n                totalScoreSpan: wrapper.querySelector('.total-score'),\n                levelBadge: wrapper.querySelector('.level-badge'),\n                analysisContent: wrapper.querySelector('.analysis-content'),\n                suggestionsContent: wrapper.querySelector('.suggestions-content')\n            };\n        },\n        \n        \/\/ \u7d81\u5b9a\u4e8b\u4ef6\n        bindEvents() {\n            document.addEventListener('click', this.handleClick.bind(this));\n        },\n        \n        \/\/ \u8655\u7406\u9ede\u64ca\u4e8b\u4ef6\n        handleClick(event) {\n            if (event.target.classList.contains('quiz-start-btn')) {\n                this.startQuiz();\n            } else if (event.target.classList.contains('quiz-prev-btn')) {\n                this.prevQuestion();\n            } else if (event.target.classList.contains('quiz-restart-btn')) {\n                this.restartQuiz();\n            } else if (event.target.classList.contains('quiz-option')) {\n                this.selectOption(event.target.dataset.option);\n            }\n        },\n        \n        \/\/ \u986f\u793a\u5f15\u5c0e\u9801\n        showIntroPage() {\n            this.hideAllPages();\n            this.elements.introPage.style.display = 'block';\n            this.scrollToTop();\n        },\n        \n        \/\/ \u958b\u59cb\u6e2c\u9a57\n        startQuiz() {\n            this.state.currentQuestion = 0;\n            this.state.answers = [];\n            this.state.totalScore = 0;\n            this.showQuizPage();\n            this.updateQuestion();\n        },\n        \n        \/\/ \u986f\u793a\u6e2c\u9a57\u9801\n        showQuizPage() {\n            this.hideAllPages();\n            this.elements.quizPage.style.display = 'block';\n            this.scrollToTop();\n        },\n        \n        \/\/ \u66f4\u65b0\u554f\u984c\n        updateQuestion() {\n            const question = this.questions[this.state.currentQuestion];\n            this.elements.questionText.textContent = question;\n            this.updateProgress();\n            this.clearOptionSelection();\n            \n            if (this.state.currentQuestion > 0) {\n                this.elements.prevButton.style.display = 'inline-block';\n            } else {\n                this.elements.prevButton.style.display = 'none';\n            }\n        },\n        \n        \/\/ \u66f4\u65b0\u9032\u5ea6\n        updateProgress() {\n            const progress = ((this.state.currentQuestion + 1) \/ this.questions.length) * 100;\n            this.elements.progressBar.style.width = `${progress}%`;\n            this.elements.currentQuestionSpan.textContent = this.state.currentQuestion + 1;\n        },\n        \n        \/\/ \u6e05\u9664\u9078\u9805\u9078\u64c7\n        clearOptionSelection() {\n            const options = this.elements.optionsContainer.querySelectorAll('.quiz-option');\n            options.forEach(option => {\n                option.classList.remove('selected');\n            });\n        },\n        \n        \/\/ \u9078\u64c7\u9078\u9805\n        selectOption(option) {\n            const score = option === 'yes' ? 1 : 0;\n            this.state.answers[this.state.currentQuestion] = score;\n            \n            this.clearOptionSelection();\n            const selectedElement = document.querySelector(`[data-option=\"${option}\"]`);\n            selectedElement.classList.add('selected');\n            \n            setTimeout(() => {\n                this.nextQuestion();\n            }, 300);\n        },\n        \n        \/\/ \u4e0b\u4e00\u984c\n        nextQuestion() {\n            if (this.state.currentQuestion < this.questions.length - 1) {\n                this.state.currentQuestion++;\n                this.updateQuestion();\n                this.scrollToTop();\n            } else {\n                this.finishQuiz();\n            }\n        },\n        \n        \/\/ \u4e0a\u4e00\u984c\n        prevQuestion() {\n            if (this.state.currentQuestion > 0) {\n                this.state.currentQuestion--;\n                this.updateQuestion();\n                this.scrollToTop();\n            }\n        },\n        \n        \/\/ \u5b8c\u6210\u6e2c\u9a57\n        finishQuiz() {\n            this.calculateScore();\n            this.showResultPage();\n            this.displayResults();\n        },\n        \n        \/\/ \u8a08\u7b97\u5206\u6578\n        calculateScore() {\n            this.state.totalScore = this.state.answers.reduce((sum, answer) => sum + answer, 0);\n        },\n        \n        \/\/ \u986f\u793a\u7d50\u679c\u9801\n        showResultPage() {\n            this.hideAllPages();\n            this.elements.resultPage.style.display = 'block';\n            this.scrollToTop();\n        },\n        \n        \/\/ \u986f\u793a\u7d50\u679c\n        displayResults() {\n            this.elements.totalScoreSpan.textContent = this.state.totalScore;\n            \n            const level = this.getScoreLevel(this.state.totalScore);\n            this.updateLevelBadge(level);\n            this.updateAnalysis(level);\n            this.updateSuggestions(level);\n            \n            setTimeout(() => {\n                this.createChart();\n            }, 500);\n        },\n        \n        \/\/ \u7372\u53d6\u5206\u6578\u7b49\u7d1a\n        getScoreLevel(score) {\n            if (score <= 8) return 1;\n            if (score <= 14) return 2;\n            if (score <= 19) return 3;\n            return 4;\n        },\n        \n        \/\/ \u66f4\u65b0\u7b49\u7d1a\u5fbd\u7ae0\n        updateLevelBadge(level) {\n            const levelTexts = {\n                1: \"\ud83c\udf89 \u4eba\u969b\u95dc\u4fc2\u826f\u597d\",\n                2: \"\ud83d\ude0a \u8f15\u5ea6\u4eba\u969b\u56f0\u64fe\",\n                3: \"\ud83d\ude10 \u4e2d\u5ea6\u4eba\u969b\u56f0\u64fe\", \n                4: \"\ud83d\ude1f \u91cd\u5ea6\u4eba\u969b\u56f0\u64fe\"\n            };\n            \n            this.elements.levelBadge.textContent = levelTexts[level];\n        },\n        \n        \/\/ \u66f4\u65b0\u5206\u6790\u5167\u5bb9\n        updateAnalysis(level) {\n            const analyses = {\n                1: `\n                    <p>\ud83c\udf8a \u606d\u559c\u4f60\uff01\u4f60\u5728\u8207\u670b\u53cb\u76f8\u8655\u65b9\u9762\u8868\u73fe\u5f97\u975e\u5e38\u597d\u3002\u4f60\u7684\u4eba\u969b\u95dc\u4fc2\u6280\u5de7\u76f8\u7576\u6210\u719f\uff0c\u80fd\u5920\u81ea\u7136\u5730\u8207\u4ed6\u4eba\u5efa\u7acb\u826f\u597d\u7684\u95dc\u4fc2\u3002<\/p>\n                    <p><strong>\ud83c\udf1f \u4f60\u7684\u512a\u52e2\uff1a<\/strong><\/p>\n                    <ul>\n                        <li>\u2705 \u80fd\u5920\u81ea\u5728\u5730\u8868\u9054\u81ea\u5df1\u7684\u60f3\u6cd5\u548c\u611f\u53d7<\/li>\n                        <li>\u2705 \u5728\u793e\u4ea4\u5834\u5408\u4e2d\u611f\u5230\u8212\u9069\u548c\u81ea\u7136<\/li>  \n                        <li>\u2705 \u5177\u5099\u826f\u597d\u7684\u50be\u807d\u548c\u6e9d\u901a\u6280\u5de7<\/li>\n                        <li>\u2705 \u80fd\u5920\u8207\u4e0d\u540c\u985e\u578b\u7684\u4eba\u5efa\u7acb\u53cb\u8abc<\/li>\n                    <\/ul>\n                `,\n                2: `\n                    <p>\ud83d\ude0a \u4f60\u5728\u4eba\u969b\u95dc\u4fc2\u65b9\u9762\u57fa\u672c\u8868\u73fe\u826f\u597d\uff0c\u4f46\u5728\u67d0\u4e9b\u60c5\u6cc1\u4e0b\u53ef\u80fd\u6703\u611f\u5230\u4e00\u4e9b\u56f0\u64fe\u3002\u9019\u4e9b\u56f0\u64fe\u662f\u6b63\u5e38\u7684\uff0c\u901a\u904e\u9069\u7576\u7684\u8abf\u6574\u53ef\u4ee5\u5f97\u5230\u6539\u5584\u3002<\/p>\n                    <p><strong>\u26a0\ufe0f \u9700\u8981\u6ce8\u610f\u7684\u5730\u65b9\uff1a<\/strong><\/p>\n                    <ul>\n                        <li>\ud83d\udd38 \u53ef\u80fd\u5728\u67d0\u4e9b\u793e\u4ea4\u60c5\u5883\u4e2d\u611f\u5230\u8f15\u5fae\u7684\u4e0d\u81ea\u5728<\/li>\n                        <li>\ud83d\udd38 \u5076\u723e\u6703\u5c0d\u81ea\u5df1\u7684\u8868\u73fe\u7522\u751f\u7591\u616e<\/li>\n                        <li>\ud83d\udd38 \u5728\u8868\u9054\u6df1\u5c64\u611f\u53d7\u6642\u53ef\u80fd\u6703\u6709\u6240\u4fdd\u7559<\/li>\n                    <\/ul>\n                `,\n                3: `\n                    <p>\ud83d\ude10 \u4f60\u5728\u4eba\u969b\u95dc\u4fc2\u4e2d\u9762\u81e8\u4e00\u4e9b\u660e\u986f\u7684\u6311\u6230\uff0c\u9019\u53ef\u80fd\u6703\u5f71\u97ff\u4f60\u8207\u670b\u53cb\u7684\u95dc\u4fc2\u54c1\u8cea\u3002\u4e0d\u904e\uff0c\u9019\u4e9b\u56f0\u64fe\u662f\u53ef\u4ee5\u901a\u904e\u52aa\u529b\u548c\u7df4\u7fd2\u4f86\u6539\u5584\u7684\u3002<\/p>\n                    <p><strong>\ud83d\udea8 \u4e3b\u8981\u56f0\u64fe\u5305\u62ec\uff1a<\/strong><\/p>\n                    <ul>\n                        <li>\ud83d\udd39 \u5728\u793e\u4ea4\u5834\u5408\u4e2d\u7d93\u5e38\u611f\u5230\u7dca\u5f35\u6216\u4e0d\u81ea\u5728<\/li>\n                        <li>\ud83d\udd39 \u96e3\u4ee5\u6df1\u5165\u5730\u8207\u4ed6\u4eba\u5206\u4eab\u500b\u4eba\u611f\u53d7<\/li>\n                        <li>\ud83d\udd39 \u53ef\u80fd\u904e\u5ea6\u5728\u610f\u4ed6\u4eba\u5c0d\u81ea\u5df1\u7684\u770b\u6cd5<\/li>\n                        <li>\ud83d\udd39 \u5728\u8655\u7406\u885d\u7a81\u6216\u8aa4\u89e3\u6642\u611f\u5230\u56f0\u96e3<\/li>\n                    <\/ul>\n                `,\n                4: `\n                    <p>\ud83d\ude1f \u4f60\u5728\u4eba\u969b\u95dc\u4fc2\u4e2d\u9762\u81e8\u8457\u76f8\u7576\u56b4\u91cd\u7684\u56f0\u64fe\uff0c\u9019\u53ef\u80fd\u5c0d\u4f60\u7684\u793e\u4ea4\u751f\u6d3b\u548c\u5fc3\u7406\u5065\u5eb7\u7522\u751f\u986f\u8457\u5f71\u97ff\u3002\u5efa\u8b70\u4f60\u7a4d\u6975\u5c0b\u6c42\u6539\u5584\u7684\u65b9\u6cd5\u3002<\/p>\n                    <p><strong>\ud83c\udd98 \u56b4\u91cd\u56f0\u64fe\u8868\u73fe\uff1a<\/strong><\/p>\n                    <ul>\n                        <li>\ud83d\udd3a \u5728\u5927\u591a\u6578\u793e\u4ea4\u60c5\u5883\u4e2d\u611f\u5230\u6975\u5ea6\u4e0d\u9069<\/li>\n                        <li>\ud83d\udd3a \u96e3\u4ee5\u5efa\u7acb\u548c\u7dad\u6301\u6df1\u5ea6\u7684\u53cb\u8abc\u95dc\u4fc2<\/li>\n                        <li>\ud83d\udd3a \u7d93\u5e38\u611f\u5230\u5b64\u7368\u548c\u88ab\u6392\u65a5<\/li>\n                        <li>\ud83d\udd3a \u5c0d\u81ea\u5df1\u7684\u793e\u4ea4\u80fd\u529b\u7f3a\u4e4f\u4fe1\u5fc3<\/li>\n                        <li>\ud83d\udd3a \u53ef\u80fd\u907f\u514d\u53c3\u8207\u793e\u4ea4\u6d3b\u52d5<\/li>\n                    <\/ul>\n                `\n            };\n            \n            this.elements.analysisContent.innerHTML = analyses[level];\n        },\n        \n        \/\/ \u66f4\u65b0\u5efa\u8b70\u5167\u5bb9\n        updateSuggestions(level) {\n            const suggestions = {\n                1: `\n                    <p>\ud83c\udfaf \u4f60\u5df2\u7d93\u5177\u5099\u4e86\u826f\u597d\u7684\u4eba\u969b\u95dc\u4fc2\u6280\u5de7\uff0c\u53ef\u4ee5\u8003\u616e\u4ee5\u4e0b\u65b9\u5f0f\u4f86\u9032\u4e00\u6b65\u63d0\u5347\uff1a<\/p>\n                    <ul>\n                        <li><strong>\ud83e\udd1d \u6210\u70ba\u670b\u53cb\u5708\u7684\u652f\u6301\u8005\uff1a<\/strong>\u4e3b\u52d5\u95dc\u5fc3\u670b\u53cb\uff0c\u5728\u4ed6\u5011\u9700\u8981\u6642\u63d0\u4f9b\u5e6b\u52a9\u548c\u5efa\u8b70<\/li>\n                        <li><strong>\ud83d\udc51 \u57f9\u990a\u9818\u5c0e\u80fd\u529b\uff1a<\/strong>\u5728\u7fa4\u9ad4\u6d3b\u52d5\u4e2d\u627f\u64d4\u66f4\u591a\u8cac\u4efb\uff0c\u5e6b\u52a9\u7d44\u7e54\u548c\u5354\u8abf<\/li>\n                        <li><strong>\ud83c\udf10 \u64f4\u5c55\u793e\u4ea4\u5708\uff1a<\/strong>\u5617\u8a66\u7d50\u8b58\u4e0d\u540c\u80cc\u666f\u7684\u670b\u53cb\uff0c\u8c50\u5bcc\u4f60\u7684\u4eba\u969b\u7db2\u7d61<\/li>\n                        <li><strong>\ud83d\udcda \u5206\u4eab\u7d93\u9a57\uff1a<\/strong>\u5e6b\u52a9\u5176\u4ed6\u540c\u5b78\u63d0\u5347\u4ed6\u5011\u7684\u793e\u4ea4\u6280\u5de7<\/li>\n                    <\/ul>\n                `,\n                2: `\n                    <p>\ud83d\udcaa \u4f60\u53ef\u4ee5\u901a\u904e\u4ee5\u4e0b\u65b9\u6cd5\u4f86\u6e1b\u5c11\u4eba\u969b\u56f0\u64fe\uff0c\u63d0\u5347\u793e\u4ea4\u81ea\u4fe1\uff1a<\/p>\n                    <ul>\n                        <li><strong>\ud83d\udde3\ufe0f \u7df4\u7fd2\u81ea\u6211\u8868\u9054\uff1a<\/strong>\u5f9e\u8207\u4fe1\u4efb\u7684\u670b\u53cb\u5206\u4eab\u66f4\u591a\u500b\u4eba\u60f3\u6cd5\u958b\u59cb<\/li>\n                        <li><strong>\ud83d\udc65 \u53c3\u8207\u5c0f\u578b\u805a\u6703\uff1a<\/strong>\u9078\u64c7\u8f03\u70ba\u8212\u9069\u7684\u793e\u4ea4\u74b0\u5883\u4f86\u7df4\u7fd2\u793e\u4ea4\u6280\u5de7<\/li>\n                        <li><strong>\ud83d\udc8e \u5efa\u7acb\u81ea\u4fe1\uff1a<\/strong>\u8a18\u9304\u81ea\u5df1\u5728\u793e\u4ea4\u4e2d\u7684\u6210\u529f\u7d93\u9a57\uff0c\u589e\u5f37\u81ea\u4fe1\u5fc3<\/li>\n                        <li><strong>\ud83d\udcdd \u5b78\u7fd2\u6e9d\u901a\u6280\u5de7\uff1a<\/strong>\u7df4\u7fd2\u7a4d\u6975\u50be\u807d\u548c\u9069\u7576\u7684\u56de\u61c9\u65b9\u5f0f<\/li>\n                    <\/ul>\n                `,\n                3: `\n                    <p>\ud83c\udfaf \u5efa\u8b70\u4f60\u63a1\u53d6\u4ee5\u4e0b\u7b56\u7565\u4f86\u6539\u5584\u4eba\u969b\u95dc\u4fc2\u56f0\u64fe\uff1a<\/p>\n                    <ul>\n                        <li><strong>\ud83e\ude9c \u9010\u6b65\u6311\u6230\uff1a<\/strong>\u5f9e\u6700\u8212\u9069\u7684\u793e\u4ea4\u60c5\u5883\u958b\u59cb\uff0c\u9010\u6f38\u64f4\u5c55\u5230\u66f4\u5177\u6311\u6230\u6027\u7684\u5834\u5408<\/li>\n                        <li><strong>\ud83c\udd98 \u5c0b\u6c42\u652f\u6301\uff1a<\/strong>\u8207\u4fe1\u4efb\u7684\u8001\u5e2b\u3001\u5bb6\u9577\u6216\u670b\u53cb\u8ac7\u8ad6\u4f60\u7684\u56f0\u64fe<\/li>\n                        <li><strong>\ud83e\uddd8 \u7df4\u7fd2\u653e\u9b06\u6280\u5de7\uff1a<\/strong>\u5b78\u7fd2\u6df1\u547c\u5438\u3001\u51a5\u60f3\u7b49\u65b9\u6cd5\u4f86\u7de9\u89e3\u793e\u4ea4\u7126\u616e<\/li>\n                        <li><strong>\ud83c\udfaf \u8a2d\u5b9a\u5c0f\u76ee\u6a19\uff1a<\/strong>\u6bcf\u9031\u8a2d\u5b9a\u4e00\u500b\u5c0f\u7684\u793e\u4ea4\u76ee\u6a19\uff0c\u5982\u4e3b\u52d5\u8207\u4e00\u4f4d\u540c\u5b78\u5c0d\u8a71<\/li>\n                        <li><strong>\ud83c\udfaa \u52a0\u5165\u8208\u8da3\u5c0f\u7d44\uff1a<\/strong>\u53c3\u8207\u4f60\u611f\u8208\u8da3\u7684\u793e\u5718\u6216\u6d3b\u52d5\uff0c\u5728\u5171\u540c\u8208\u8da3\u57fa\u790e\u4e0a\u5efa\u7acb\u53cb\u8abc<\/li>\n                    <\/ul>\n                `,\n                4: `\n                    <p>\ud83c\udd98 \u4f60\u7684\u4eba\u969b\u56f0\u64fe\u8f03\u70ba\u56b4\u91cd\uff0c\u5efa\u8b70\u63a1\u53d6\u66f4\u7a4d\u6975\u7684\u6539\u5584\u63aa\u65bd\uff1a<\/p>\n                    <ul>\n                        <li><strong>\ud83d\udc68\u200d\u2695\ufe0f \u5c08\u696d\u8aee\u8a62\uff1a<\/strong>\u8003\u616e\u5411\u5b78\u6821\u8f14\u5c0e\u8001\u5e2b\u6216\u5fc3\u7406\u8aee\u8a62\u5e2b\u5c0b\u6c42\u5c08\u696d\u5e6b\u52a9<\/li>\n                        <li><strong>\ud83c\udf93 \u793e\u4ea4\u6280\u80fd\u8a13\u7df4\uff1a<\/strong>\u53c3\u52a0\u793e\u4ea4\u6280\u80fd\u57f9\u8a13\u8ab2\u7a0b\u6216\u5de5\u4f5c\u574a<\/li>\n                        <li><strong>\ud83c\udfe0 \u5efa\u7acb\u652f\u6301\u7cfb\u7d71\uff1a<\/strong>\u8207\u5bb6\u4eba\u3001\u4fe1\u4efb\u7684\u8001\u5e2b\u5efa\u7acb\u7a69\u5b9a\u7684\u652f\u6301\u95dc\u4fc2<\/li>\n                        <li><strong>\ud83d\udc64 \u5f9e\u4e00\u5c0d\u4e00\u958b\u59cb\uff1a<\/strong>\u5148\u7df4\u7fd2\u8207\u4e00\u500b\u4eba\u7684\u6df1\u5ea6\u4ea4\u6d41\uff0c\u518d\u9010\u6f38\u64f4\u5c55\u5230\u7fa4\u9ad4<\/li>\n                        <li><strong>\ud83d\udc9d \u81ea\u6211\u95dc\u611b\uff1a<\/strong>\u7df4\u7fd2\u81ea\u6211\u63a5\u7d0d\uff0c\u6e1b\u5c11\u81ea\u6211\u6279\u8a55\uff0c\u5efa\u7acb\u6b63\u9762\u7684\u81ea\u6211\u5f62\u8c61<\/li>\n                        <li><strong>\u23f0 \u8010\u5fc3\u5c0d\u5f85\u9032\u6b65\uff1a<\/strong>\u6539\u5584\u4eba\u969b\u95dc\u4fc2\u9700\u8981\u6642\u9593\uff0c\u8981\u5c0d\u81ea\u5df1\u7684\u9032\u6b65\u4fdd\u6301\u8010\u5fc3<\/li>\n                    <\/ul>\n                `\n            };\n            \n            this.elements.suggestionsContent.innerHTML = suggestions[level];\n        },\n        \n        \/\/ \u5275\u5efa\u5716\u8868\n        createChart() {\n            const canvas = document.getElementById('quizResultChart');\n            if (!canvas) return;\n            \n            \/\/ \u5982\u679c\u5b58\u5728\u4e4b\u524d\u7684\u5716\u8868\u5be6\u4f8b\uff0c\u5148\u92b7\u6bc0\u5b83\n            if (this.chartInstance) {\n                this.chartInstance.destroy();\n            }\n            \n            const ctx = canvas.getContext('2d');\n            const categories = this.analyzeAnswerDistribution();\n            \n            this.chartInstance = new Chart(ctx, {\n                type: 'radar',\n                data: {\n                    labels: categories.labels,\n                    datasets: [{\n                        label: '\u56f0\u64fe\u7a0b\u5ea6',\n                        data: categories.scores,\n                        backgroundColor: 'rgba(52, 152, 219, 0.2)',\n                        borderColor: 'rgba(52, 152, 219, 1)',\n                        borderWidth: 3,\n                        pointBackgroundColor: 'rgba(52, 152, 219, 1)',\n                        pointBorderColor: '#fff',\n                        pointBorderWidth: 2,\n                        pointRadius: 6\n                    }]\n                },\n                options: {\n                    responsive: true,\n                    maintainAspectRatio: true,\n                    plugins: {\n                        legend: {\n                            display: false\n                        }\n                    },\n                    scales: {\n                        r: {\n                            beginAtZero: true,\n                            max: 100,\n                            ticks: {\n                                display: false\n                            },\n                            grid: {\n                                color: 'rgba(0, 0, 0, 0.1)'\n                            },\n                            angleLines: {\n                                color: 'rgba(0, 0, 0, 0.1)'\n                            },\n                            pointLabels: {\n                                font: {\n                                    size: 12\n                                },\n                                color: '#2c3e50'\n                            }\n                        }\n                    }\n                }\n            });\n        },\n        \n        \/\/ \u5206\u6790\u7b54\u6848\u5206\u4f48\n        analyzeAnswerDistribution() {\n            const categories = {\n                '\u81ea\u6211\u8868\u9054': [0, 4, 16, 21],\n                '\u793e\u4ea4\u7126\u616e': [1, 5, 9, 13],\n                '\u4eba\u969b\u885d\u7a81': [6, 10, 18, 22],\n                '\u7570\u6027\u4ea4\u5f80': [3, 7, 11, 15, 19, 23, 27],\n                '\u81ea\u6211\u5f62\u8c61': [2, 14, 17, 25],\n                '\u6e9d\u901a\u6280\u5de7': [12, 20, 24, 26]\n            };\n            \n            const labels = Object.keys(categories);\n            const scores = labels.map(category => {\n                const questionIndices = categories[category];\n                const categoryScore = questionIndices.reduce((sum, index) => {\n                    return sum + (this.state.answers[index] || 0);\n                }, 0);\n                return (categoryScore \/ questionIndices.length) * 100;\n            });\n            \n            return { labels, scores };\n        },\n        \n        \/\/ \u91cd\u65b0\u958b\u59cb\u6e2c\u9a57\n        restartQuiz() {\n            this.state.currentQuestion = 0;\n            this.state.answers = [];\n            this.state.totalScore = 0;\n            \n            \/\/ \u92b7\u6bc0\u5716\u8868\u5be6\u4f8b\n            if (this.chartInstance) {\n                this.chartInstance.destroy();\n                this.chartInstance = null;\n            }\n            \n            this.showIntroPage();\n        },\n        \n        \/\/ \u96b1\u85cf\u6240\u6709\u9801\u9762\n        hideAllPages() {\n            this.elements.introPage.style.display = 'none';\n            this.elements.quizPage.style.display = 'none';\n            this.elements.resultPage.style.display = 'none';\n        },\n        \n        \/\/ \u6efe\u52d5\u5230\u9802\u90e8\n        scrollToTop() {\n            setTimeout(() => {\n                const wrapper = document.querySelector('.quiz-wrapper');\n                if (wrapper) {\n                    wrapper.scrollIntoView({ \n                        behavior: 'smooth', \n                        block: 'start' \n                    });\n                }\n            }, 50);\n        }\n    };\n    \n    \/\/ \u521d\u59cb\u5316\u61c9\u7528\n    QuizApp.init();\n}\n\n\/\/ \u78ba\u4fddDOM\u548cChart.js\u90fd\u5df2\u52a0\u8f09\u5f8c\u518d\u521d\u59cb\u5316\nif (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', initQuizApp);\n} else {\n    initQuizApp();\n}\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u672c\u6d4b\u9a8c\u53ef\u7528\u6765\u5e2e\u52a9\u4e2d\u5b66\u751f\u4e86\u89e3\u81ea\u5df1\u4e0e\u670b\u53cb\u7684\u5173\u7cfb\uff0c \u4e86\u89e3\u81ea\u5df1\u5728\u4e0e\u540c\u5b66\u76f8\u5904\u8fc7\u7a0b\u4e2d\u5b58\u5728\u54ea\u4e9b\u5178\u578b\u7684\u884c\u4e3a\u95ee\u9898\u3002\u753128 \u4e2a\u9648\u8ff0\u53e5\u7ec4\u6210\uff0c\u6bcf\u4e2a\u51e0\u5b50\u540e\u9762\u5217\u6709\u201c\u662f\u201d\u548c\u201c\u5426\u201d\u4e24\u79cd\u7b54\u6848\u3002\u8bf7\u8ba4\u771f\u9605\u8bfb\u6bcf\u4e00\u4e2a\u53e5\u5b50\uff0c\u5e76\u5bf9\u7167\u81ea\u5df1\u7684\u5b9e\u9645\u60c5\u51b5\uff0c\u4f5c\u51fa\u662f\u6216\u5426\u7684\u5224\u65ad\u3002<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"narrow-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[175],"tags":[],"class_list":["post-9150","post","type-post","status-publish","format-standard","hentry","category-relationships"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/9150","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/comments?post=9150"}],"version-history":[{"count":8,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/9150\/revisions"}],"predecessor-version":[{"id":10254,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/9150\/revisions\/10254"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=9150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=9150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=9150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}