{"id":2551,"date":"2023-10-20T08:39:03","date_gmt":"2023-10-20T00:39:03","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2551"},"modified":"2025-08-28T21:28:23","modified_gmt":"2025-08-28T13:28:23","slug":"rival-type-you-defeated","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/rival-type-you-defeated","title":{"rendered":"\u5c0f\u6d4b\u9a8c\uff1a\u9047\u54ea\u79cd\u60c5\u654c\u4f60\u4f1a\u5b8c\u8d25\uff1f"},"content":{"rendered":"<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<div class=\"quiz-container\">\n<!-- \u5f15\u5c0e\u9801 -->\n<section id=\"quizintro9\" data-page=\"intro9\">\n    <div class=\"quiz-content\">\n        <header class=\"text-center mb-4\">\n            <h2 class=\"quiz-title\">\n                \u9047\u54ea\u7a2e\u60c5\u6575\u4f60\u6703\u5b8c\u6557\uff1f\n            <\/h2>\n            <p class=\"quiz-subtitle\">\u63a2\u7d22\u4f60\u5728\u611b\u60c5\u6230\u5834\u4e0a\u7684\u5f31\u9ede<\/p>\n        <\/header>\n        <div><p class=\"lead-text\">\u867d\u8bf4\u611f\u60c5\u4e0d\u5206\u5148\u540e\uff0c\u552f\u6709\u4e0d\u88ab\u7231\u7684\u4eba\u624d\u662f\u7b2c\u4e09\u8005\uff0c\u4e0d\u8fc7\uff0c\u5982\u679c\u4e00\u6bb5\u604b\u60c5\u7684\u5931\u8d25\u662f\u56e0\u4e3a\u7b2c\u4e09\u8005\u7684\u4ecb\u5165\uff0c\u8fd9\u662f\u8ba9\u5927\u591a\u6570\u4eba\u89c9\u5f97\u96be\u4ee5\u63a5\u53d7\u7684\u4e00\u4ef6\u4e8b\u60c5\u3002\u6216\u8bb8\u4f60\u89c9\u5f97\u4e24\u4eba\u4e4b\u95f4\u53ea\u8981\u611f\u60c5\u597d\uff0c\u8db3\u591f\u76f8\u7231\uff0c\u5c31\u7b97\u54ea\u5929\u51fa\u73b0\u4e86\u7b2c\u4e09\u8005\uff0c\u4f60\u4e5f\u4e0d\u4f1a\u6210\u4e3a\u51fa\u5c40\u7684\u90a3\u4e00\u4e2a\u3002\u4e8b\u5b9e\u4f1a\u662f\u4f60\u671f\u5f85\u7684\u90a3\u6837\u4e48\uff1f\u5728\u611f\u60c5\u7684\u4e16\u754c\u91cc\uff0c\u4f60\u9047\u5230\u600e\u6837\u7684\u60c5\u654c\u4f1a\u5b8c\u8d25\u5462\uff1f\n\n        <\/p><p class=\"lead-text\">\u611f\u60c5\u4e16\u754c\u91cc\u4f60\u9047\u600e\u6837\u7684\u60c5\u654c\u4f1a\u5b8c\u8d25\uff1f<\/p> <\/div>\n        <div class=\"intro-cards-row mb-4\">\n            <div class=\"info-card sage-gradient\">\n                <div class=\"card-icon\">\n                    <i class=\"bi bi-heart-pulse\"><\/i>\n                <\/div>\n                <h4>\u6df1\u5ea6\u5fc3\u7406\u5206\u6790<\/h4>\n                <p>\u900f\u904e10\u9053\u7cbe\u5fc3\u8a2d\u8a08\u7684\u984c\u76ee\uff0c\u5256\u6790\u4f60\u5728\u611f\u60c5\u4e2d\u7684\u76f2\u9ede<\/p>\n            <\/div>\n            <div class=\"info-card mint-gradient\">\n                <div class=\"card-icon\">\n                    <i class=\"bi bi-shield-check\"><\/i>\n                <\/div>\n                <h4>\u5ba2\u88fd\u5316\u7d50\u679c<\/h4>\n                <p>\u6839\u64da\u4f60\u7684\u9078\u64c7\uff0c\u627e\u51fa\u6700\u5bb9\u6613\u8b93\u4f60\u5931\u5b88\u7684\u60c5\u6575\u985e\u578b<\/p>\n            <\/div>\n        <\/div>\n        \n        <div class=\"main-card\">\n            <i class=\"bi bi-chat-heart main-icon\"><\/i>\n            <h3>\u70ba\u4ec0\u9ebc\u8981\u505a\u9019\u500b\u6e2c\u9a57\uff1f<\/h3>\n            <p class=\"lead-text\">\n                \u5728\u611f\u60c5\u7684\u4e16\u754c\u88e1\uff0c\u77e5\u5df1\u77e5\u5f7c\u624d\u80fd\u767e\u6230\u4e0d\u6b86\u3002<br>\n                \u4e86\u89e3\u81ea\u5df1\u7684\u5f31\u9ede\uff0c\u624d\u80fd\u5728\u611b\u60c5\u4e2d\u66f4\u52a0\u5805\u5f37\u3002<br>\n                \u9019\u500b\u6e2c\u9a57\u5c07\u5e6b\u52a9\u4f60\u8a8d\u8b58\u81ea\u5df1\u5728\u611f\u60c5\u4e2d\u7684\u76f2\u9ede\uff0c<br>\n                \u8b93\u4f60\u5728\u9762\u5c0d\u60c5\u6575\u6642\u66f4\u6709\u6e96\u5099\uff01\n            <\/p>\n            <div class=\"features\">\n                <div class=\"feature-item\">\n                    <i class=\"bi bi-check-circle-fill\"><\/i>\n                    <span>3\u5206\u9418\u5b8c\u6210\u6e2c\u9a57<\/span>\n                <\/div>\n                <div class=\"feature-item\">\n                    <i class=\"bi bi-check-circle-fill\"><\/i>\n                    <span>\u5c08\u696d\u5fc3\u7406\u5206\u6790<\/span>\n                <\/div>\n                <div class=\"feature-item\">\n                    <i class=\"bi bi-check-circle-fill\"><\/i>\n                    <span>\u8996\u89ba\u5316\u7d50\u679c\u5448\u73fe<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <div class=\"text-center mt-4\">\n            <button type=\"button\" class=\"primary-btn\" 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<\/section>\n\n<!-- \u6e2c\u9a57\u9801 -->\n<section id=\"quizmain9\" data-page=\"quiz9\" style=\"display: none;\">\n    <div class=\"quiz-content\">\n        <header class=\"text-center mb-3\">\n            <h2 class=\"quiz-title-small\">\u9047\u54ea\u7a2e\u60c5\u6575\u4f60\u6703\u5b8c\u6557\uff1f<\/h2>\n        <\/header>\n        \n        <div class=\"progress-wrapper\">\n            <div class=\"progress-bar-custom\">\n                <div class=\"progress-fill\" role=\"progressbar\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div>\n            <\/div>\n        <\/div>\n        \n        <div class=\"question-card\">\n            <div class=\"question-header\">\n                <span class=\"question-badge\" data-question-number>\u95ee\u98981\/10<\/span>\n            <\/div>\n            \n            <h3 class=\"question-text\" data-question-text>\n                <!-- \u984c\u76ee\u6587\u5b57\u6703\u52d5\u614b\u63d2\u5165 -->\n            <\/h3>\n            \n            <div class=\"options-container\" data-options-container>\n                <!-- \u9078\u9805\u6703\u52d5\u614b\u63d2\u5165 -->\n            <\/div>\n        <\/div>\n        \n        <div class=\"text-center mt-4\">\n            <button type=\"button\" class=\"secondary-btn\" style=\"display: none;\" data-action=\"prev-question\">\n                <i class=\"bi bi-arrow-left me-2\"><\/i>\u4e0a\u4e00\u9898\n            <\/button>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- \u7d50\u679c\u9801 -->\n<section id=\"quizresult9\" data-page=\"result9\" style=\"display: none;\">\n    <div class=\"quiz-content\">\n        <header class=\"text-center mb-4\">\n            <h2 class=\"quiz-title\">\u6e2c\u9a57\u7d50\u679c\u63ed\u66c9<\/h2>\n            <p class=\"quiz-subtitle\">\u4f60\u7684\u60c5\u6575\u5f31\u9ede\u5206\u6790\u5831\u544a<\/p>\n        <\/header>\n        \n        <div class=\"result-card\">\n            <div class=\"result-header\">\n                <h3 data-result-title><!-- \u7d50\u679c\u6a19\u984c\u6703\u52d5\u614b\u63d2\u5165 --><\/h3>\n            <\/div>\n            <div class=\"result-body\">\n                <div class=\"chart-container\">\n                    <canvas id=\"resultChart\"><\/canvas>\n                <\/div>\n                \n                <div class=\"analysis-section\">\n                    <h4><i class=\"bi bi-lightbulb me-2\"><\/i>\u8be6\u7ec6\u5206\u6790<\/h4>\n                    <p data-result-description><!-- \u7d50\u679c\u63cf\u8ff0\u6703\u52d5\u614b\u63d2\u5165 --><\/p>\n                <\/div>\n                \n                <div class=\"insight-cards\">\n                    <div class=\"insight-card weakness-card\">\n                        <i class=\"bi bi-shield-x\"><\/i>\n                        <h5>\u4f60\u7684\u5f31\u9ede<\/h5>\n                        <p data-weakness><!-- \u52d5\u614b\u63d2\u5165 --><\/p>\n                    <\/div>\n                    <div class=\"insight-card suggestion-card\">\n                        <i class=\"bi bi-heart-pulse\"><\/i>\n                        <h5>\u6539\u5584\u5efa\u8bae<\/h5>\n                        <p data-suggestion><!-- \u52d5\u614b\u63d2\u5165 --><\/p>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"personalized-advice\">\n                    <h4><i class=\"bi bi-stars me-2\"><\/i>\u500b\u6027\u5316\u5efa\u8b70<\/h4>\n                    <div class=\"advice-content\" data-personalized-advice>\n                        <!-- \u500b\u6027\u5316\u5efa\u8b70\u6703\u52d5\u614b\u63d2\u5165 -->\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <div class=\"text-center mt-4\">\n            <button type=\"button\" class=\"primary-btn\" data-action=\"restart-quiz\">\n                <i class=\"bi bi-arrow-clockwise me-2\"><\/i>\u91cd\u65b0\u6d4b\u8bd5\n            <\/button>\n        <\/div>\n    <\/div>\n<\/section>\n<\/div>\n\n<!-- CSS -->\n<style>\n\/* \u5168\u57df\u6a23\u5f0f - \u9650\u5236\u6700\u5927\u5bec\u5ea6 *\/\n.quiz-container {\n    max-width: 750px;\n    margin: 0 auto;\n    padding: 15px;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Microsoft YaHei\", sans-serif;\n}\n\n.quiz-content {\n    width: 100%;\n}\n\n\/* \u6a19\u984c\u6a23\u5f0f *\/\n.quiz-title {\n    color: #2C5F2D;\n    font-size: 32px;\n    font-weight: bold;\n    margin-bottom: 15px;\n}\n\n.quiz-title-small {\n    color: #2C5F2D;\n    font-size: 24px;\n    font-weight: bold;\n}\n\n.quiz-subtitle {\n    color: #6B8E6B;\n    font-size: 16px;\n}\n\n\/* \u5361\u7247\u6a23\u5f0f *\/\n.intro-cards-row {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 15px;\n}\n\n.info-card {\n    padding: 20px;\n    border-radius: 15px;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n    transition: all 0.3s ease;\n}\n\n.info-card:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px rgba(0,0,0,0.12);\n}\n\n.sage-gradient {\n    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);\n    color: #2E7D32;\n}\n\n.mint-gradient {\n    background: linear-gradient(135deg, #E0F2F1 0%, #B2DFDB 100%);\n    color: #00695C;\n}\n\n.card-icon {\n    width: 50px;\n    height: 50px;\n    background: rgba(255,255,255,0.5);\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 12px;\n    font-size: 24px;\n}\n\n.info-card h4 {\n    font-size: 18px;\n    font-weight: bold;\n    margin-bottom: 8px;\n}\n\n.info-card p {\n    font-size: 14px;\n    margin: 0;\n    opacity: 0.9;\n}\n\n\/* \u4e3b\u5361\u7247 *\/\n.main-card {\n    background: #FAFAFA;\n    border-radius: 20px;\n    padding: 30px;\n    box-shadow: 0 4px 15px rgba(0,0,0,0.08);\n    text-align: center;\n}\n\n.main-icon {\n    font-size: 48px;\n    color: #81C784;\n    margin-bottom: 20px;\n}\n\n.main-card h3 {\n    color: #2C5F2D;\n    font-size: 22px;\n    font-weight: bold;\n    margin-bottom: 15px;\n}\n\n.lead-text {\n    color: #546E7A;\n    font-size: 16px;\n    line-height: 1.8;\n    margin-bottom: 20px;\n}\n\n.features {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    gap: 15px;\n}\n\n.feature-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    color: #4CAF50;\n    font-size: 14px;\n}\n\n\/* \u6309\u9215\u6a23\u5f0f *\/\n.primary-btn {\n    background: linear-gradient(135deg, #66BB6A 0%, #4CAF50 100%);\n    color: white;\n    border: none;\n    padding: 12px 30px;\n    font-size: 16px;\n    font-weight: 600;\n    border-radius: 30px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    box-shadow: 0 3px 10px rgba(76,175,80,0.3);\n}\n\n.primary-btn:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 5px 15px rgba(76,175,80,0.4);\n}\n\n.secondary-btn {\n    background: white;\n    color: #546E7A;\n    border: 2px solid #E0E0E0;\n    padding: 8px 20px;\n    font-size: 14px;\n    border-radius: 25px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n}\n\n.secondary-btn:hover {\n    border-color: #81C784;\n    color: #4CAF50;\n}\n\n\/* \u9032\u5ea6\u689d *\/\n.progress-wrapper {\n    margin-bottom: 25px;\n}\n\n.progress-bar-custom {\n    height: 8px;\n    background: #E8F5E9;\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.progress-fill {\n    height: 100%;\n    background: linear-gradient(90deg, #81C784 0%, #4CAF50 100%);\n    transition: width 0.5s ease;\n    border-radius: 10px;\n}\n\n\/* \u554f\u984c\u5361\u7247 *\/\n.question-card {\n    background: white;\n    border-radius: 20px;\n    padding: 25px;\n    box-shadow: 0 3px 12px rgba(0,0,0,0.08);\n}\n\n.question-header {\n    margin-bottom: 20px;\n}\n\n.question-badge {\n    background: linear-gradient(135deg, #FFE0B2 0%, #FFCC80 100%);\n    color: #E65100;\n    padding: 6px 16px;\n    border-radius: 20px;\n    font-size: 14px;\n    font-weight: 600;\n}\n\n.question-text {\n    color: #2D3748;\n    font-size: 22px;\n    font-weight: bold;\n    margin-bottom: 25px;\n    line-height: 1.4;\n}\n\n\/* \u9078\u9805\u6a23\u5f0f *\/\n.options-container {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.option-card {\n    background: white;\n    border: 2px solid #E8F5E9;\n    border-radius: 15px;\n    padding: 16px 20px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    display: flex;\n    align-items: center;\n    gap: 15px;\n}\n\n.option-card:hover {\n    border-color: #81C784;\n    background: #F1F8E9;\n    transform: translateX(5px);\n}\n\n.option-card.selected {\n    border-color: #4CAF50;\n    background: linear-gradient(135deg, rgba(129,199,132,0.1) 0%, rgba(76,175,80,0.1) 100%);\n}\n\n.option-indicator {\n    width: 24px;\n    height: 24px;\n    border: 2px solid #CFD8DC;\n    border-radius: 50%;\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all 0.3s ease;\n}\n\n.option-card:hover .option-indicator {\n    border-color: #81C784;\n}\n\n.option-card.selected .option-indicator {\n    background: #4CAF50;\n    border-color: #4CAF50;\n}\n\n.option-card.selected .option-indicator::after {\n    content: '\u2713';\n    color: white;\n    font-size: 14px;\n}\n\n.option-text {\n    color: #37474F;\n    font-size: 18px;\n    margin: 0;\n}\n\n\/* \u7d50\u679c\u9801\u9762 *\/\n.result-card {\n    background: white;\n    border-radius: 20px;\n    overflow: hidden;\n    box-shadow: 0 4px 15px rgba(0,0,0,0.08);\n}\n\n.result-header {\n    background: linear-gradient(135deg, #66BB6A 0%, #4CAF50 100%);\n    color: white;\n    padding: 20px;\n    text-align: center;\n}\n\n.result-header h3 {\n    margin: 0;\n    font-size: 22px;\n    font-weight: bold;\n}\n\n.result-body {\n    padding: 25px;\n}\n\n.chart-container {\n    max-width: 400px;\n    margin: 0 auto 30px;\n}\n\n.analysis-section {\n    background: #F5F5F5;\n    border-radius: 15px;\n    padding: 20px;\n    margin-bottom: 25px;\n}\n\n.analysis-section h4 {\n    color: #2C5F2D;\n    font-size: 18px;\n    font-weight: bold;\n    margin-bottom: 12px;\n}\n\n.analysis-section p {\n    color: #546E7A;\n    font-size: 15px;\n    line-height: 1.7;\n    margin: 0;\n}\n\n.insight-cards {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 15px;\n    margin-bottom: 25px;\n}\n\n.insight-card {\n    padding: 15px;\n    border-radius: 12px;\n    text-align: center;\n}\n\n.weakness-card {\n    background: linear-gradient(135deg, #FFE0B2 0%, #FFCC80 100%);\n    color: #E65100;\n}\n\n.suggestion-card {\n    background: linear-gradient(135deg, #E1F5FE 0%, #B3E5FC 100%);\n    color: #01579B;\n}\n\n.insight-card i {\n    font-size: 28px;\n    margin-bottom: 8px;\n}\n\n.insight-card h5 {\n    font-size: 14px;\n    font-weight: bold;\n    margin-bottom: 5px;\n}\n\n.insight-card p {\n    font-size: 12px;\n    margin: 0;\n}\n\n\/* \u500b\u6027\u5316\u5efa\u8b70 *\/\n.personalized-advice {\n    background: #E8F5E9;\n    border-radius: 15px;\n    padding: 20px;\n}\n\n.personalized-advice h4 {\n    color: #2C5F2D;\n    font-size: 18px;\n    font-weight: bold;\n    margin-bottom: 12px;\n}\n\n.advice-content {\n    color: #37474F;\n    font-size: 14px;\n    line-height: 1.6;\n}\n\n.advice-content ul {\n    margin: 10px 0;\n    padding-left: 20px;\n}\n\n.advice-content li {\n    margin-bottom: 8px;\n}\n\n\/* \u52d5\u756b\u6548\u679c *\/\n@keyframes fadeIn {\n    from { \n        opacity: 0; \n        transform: translateY(10px); \n    }\n    to { \n        opacity: 1; \n        transform: translateY(0); \n    }\n}\n\nsection {\n    animation: fadeIn 0.4s ease-in-out;\n}\n\n\/* \u97ff\u61c9\u5f0f\u8abf\u6574 *\/\n@media (max-width: 576px) {\n    .intro-cards-row {\n        grid-template-columns: 1fr;\n    }\n}\n\n@media (max-width: 480px) {\n    .quiz-title {\n        font-size: 26px;\n    }\n    \n    .question-text {\n        font-size: 20px;\n    }\n    \n    .option-text {\n        font-size: 16px;\n    }\n    \n    .insight-cards {\n        grid-template-columns: 1fr;\n    }\n    \n    .features {\n        flex-direction: column;\n        align-items: center;\n    }\n}\n<\/style>\n\n<!-- JavaScript -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n<script>\n(() => {\n'use strict';\n\nclass RivalQuiz {\n    constructor() {\n        \/\/ \u5feb\u53d6DOM\u5143\u7d20\n        this.pages = {\n            intro: document.querySelector('#quizintro9'),\n            quiz: document.querySelector('#quizmain9'),\n            result: document.querySelector('#quizresult9')\n        };\n        \n        \/\/ \u984c\u76ee\u6578\u64da\n        this.questions = [\n            {\n                id: 1,\n                text: '\u4f60\u662f\u5c6c\u65bc\u6bd4\u8f03\u5065\u5fd8\u7684\uff1f',\n                options: [\n                    { text: '\u4e0d\u662f', next: 3 },\n                    { text: '\u5076\u723e\u662f', next: 4 },\n                    { text: '\u662f', next: 2 }\n                ]\n            },\n            {\n                id: 2,\n                text: '\u4f60\u7d93\u5e38\u6703\u5e7b\u60f3\u81ea\u5df1\u4ee5\u5f8c\u6703\u64c1\u6709\u4e00\u6bb5\u7f8e\u597d\u800c\u6d6a\u6f2b\u7684\u611b\u60c5\uff1f',\n                options: [\n                    { text: '\u6703', next: 3 },\n                    { text: '\u4e0d\u6703', next: 4 },\n                    { text: '\u5076\u723e\u6703', next: 5 }\n                ]\n            },\n            {\n                id: 3,\n                text: '\u5018\u82e5\u628a\u4f60\u7529\u6389\u7684\u524d\u4efb\u6c42\u8907\u5408\uff0c\u4f60\u6703\uff1f',\n                options: [\n                    { text: '\u7b54\u61c9', next: 4 },\n                    { text: '\u4e0d\u7b54\u61c9', next: 5 },\n                    { text: '\u8996\u60c5\u6cc1\u800c\u5b9a', next: 6 }\n                ]\n            },\n            {\n                id: 4,\n                text: '\u4f60\u7684\u7b2c\u516d\u611f\u5f88\u6e96\uff1f',\n                options: [\n                    { text: '\u4e0d\u662f', next: 6 },\n                    { text: '\u662f', next: 5 },\n                    { text: '\u4e00\u822c', next: 7 }\n                ]\n            },\n            {\n                id: 5,\n                text: '\u5bb6\u4eba\u7d93\u5e38\u6703\u5410\u69fd\u4f60\u813e\u6c23\u5927\uff1f',\n                options: [\n                    { text: '\u5076\u723e\u6703', next: 8 },\n                    { text: '\u6703', next: 6 },\n                    { text: '\u4e0d\u6703', next: 7 }\n                ]\n            },\n            {\n                id: 6,\n                text: '\u5982\u679c\u53ef\u4ee5\u8b93\u4f60\u505a\u4e00\u500b\u9078\u64c7\uff0c\u4f60\u6700\u60f3\u6559\u54ea\u4e00\u79d1\uff1f',\n                options: [\n                    { text: '\u7f8e\u8853', next: 7 },\n                    { text: '\u97f3\u6a02', next: 8 },\n                    { text: '\u9ad4\u80b2', result: 'A' }\n                ]\n            },\n            {\n                id: 7,\n                text: '\u4f60\u89ba\u5f97\u7368\u81ea\u53bb\u65c5\u884c\u662f\u5f88\u9177\u7684\u4e00\u4ef6\u4e8b\u60c5\uff1f',\n                options: [\n                    { text: '\u662f', next: 8 },\n                    { text: '\u4e0d\u662f', next: 9 },\n                    { text: '\u770b\u60c5\u6cc1', next: 10 }\n                ]\n            },\n            {\n                id: 8,\n                text: '\u4f60\u6700\u671f\u5f85\u5728\u540d\u5c71\u4e0a\u770b\u5230\u4ee5\u4e0b\u54ea\u7a2e\u98a8\u666f\uff1f',\n                options: [\n                    { text: '\u96f2\u6d77', result: 'A' },\n                    { text: '\u4f5b\u5149', result: 'B' },\n                    { text: '\u7011\u5e03', next: 9 }\n                ]\n            },\n            {\n                id: 9,\n                text: '\u5728\u4f60\u5b85\u5bb6\u7684\u6642\u5019\u505c\u96fb\u4e86\uff0c\u800c\u4e14\u4f60\u7684\u624b\u6a5f\u4e5f\u96fb\u91cf\u4e0d\u8db3\u4e86\uff0c\u4f60\u6703\uff1f',\n                options: [\n                    { text: '\u770b\u66f8', result: 'D' },\n                    { text: '\u505a\u98ef', result: 'A' },\n                    { text: '\u7761\u89ba', result: 'C' }\n                ]\n            },\n            {\n                id: 10,\n                text: '\u5728\u72d0\u72f8\u3001\u5b54\u96c0\u548c\u7334\u5b50\u4e2d\uff0c\u4f60\u6700\u4e0d\u559c\u6b61\u7684\u662f\u4ec0\u9ebc\uff1f',\n                options: [\n                    { text: '\u5b54\u96c0', result: 'B' },\n                    { text: '\u72d0\u72f8', result: 'C' },\n                    { text: '\u7334\u5b50', result: 'D' }\n                ]\n            }\n        ];\n        \n        \/\/ \u7d50\u679c\u6578\u64da - \u589e\u52a0\u500b\u6027\u5316\u5efa\u8b70\n        this.results = {\n            'A': {\n                title: '\u4f60\u6703\u6557\u7d66\u984f\u503c\u66f4\u9ad8\u7684\u60c5\u6575',\n                description: '\u5728\u4eba\u7fa4\u4e2d\uff0c\u4f60\u7684\u5916\u8c8c\u8207\u4f60\u7684\u8a00\u884c\u8209\u6b62\uff0c\u4e26\u4e0d\u80fd\u7b97\u662f\u90a3\u7a2e\u7279\u5225\u51fa\u773e\u7684\u4eba\uff0c\u800c\u4f60\u53ef\u80fd\u6703\u559c\u6b61\u4e0a\u7684\u4eba\u53c8\u662f\u90a3\u7a2e\u5916\u8c8c\u5354\u6703\u7684\uff0c\u8ddf\u4f60\u5728\u4e00\u8d77\u5f8c\uff0c\u82e5\u662f\u9047\u4e0a\u4e86\u984f\u503c\u6bd4\u4f60\u9ad8\uff0c\u770b\u8d77\u4f86\u6bd4\u4f60\u6709\u6c23\u8cea\u7684\u4eba\uff0c\u4f60\u53ef\u80fd\u5c31\u6703\u4ee5\u7b2c\u4e09\u8005\u7684\u8eab\u4efd\u51fa\u5c40\uff0c\u6240\u4ee5\uff0c\u4f60\u53ef\u80fd\u6703\u6557\u65bc\u984f\u503c\u6bd4\u4f60\u9ad8\u7684\u60c5\u6575\u3002',\n                weakness: '\u5916\u5728\u5f62\u8c61\u4e0d\u5920\u7a81\u51fa',\n                suggestion: '\u63d0\u5347\u500b\u4eba\u9b45\u529b\u8207\u81ea\u4fe1',\n                scores: [75, 45, 60, 50],\n                personalizedAdvice: `\n                    <p><strong>\u7d66\u4f60\u7684\u500b\u6027\u5316\u5efa\u8b70\uff1a<\/strong><\/p>\n                    <ul>\n                        <li><strong>\u63d0\u5347\u5916\u5728\u5f62\u8c61\uff1a<\/strong>\u4e0d\u662f\u8981\u4f60\u6574\u5bb9\uff0c\u800c\u662f\u8981\u6ce8\u91cd\u5100\u5bb9\u6574\u6f54\u3001\u7a7f\u642d\u54c1\u5473\uff0c\u627e\u5230\u9069\u5408\u81ea\u5df1\u7684\u98a8\u683c<\/li>\n                        <li><strong>\u57f9\u990a\u5167\u5728\u9b45\u529b\uff1a<\/strong>\u591a\u95b1\u8b80\u3001\u57f9\u990a\u8208\u8da3\u611b\u597d\uff0c\u8b93\u81ea\u5df1\u6210\u70ba\u6709\u6df1\u5ea6\u7684\u4eba<\/li>\n                        <li><strong>\u589e\u5f37\u81ea\u4fe1\u5fc3\uff1a<\/strong>\u81ea\u4fe1\u662f\u6700\u597d\u7684\u5316\u599d\u54c1\uff0c\u591a\u80af\u5b9a\u81ea\u5df1\u7684\u512a\u9ede<\/li>\n                        <li><strong>\u767c\u5c55\u500b\u4eba\u7279\u8272\uff1a<\/strong>\u627e\u5230\u81ea\u5df1\u7368\u7279\u7684\u9b45\u529b\u9ede\uff0c\u4e0d\u8981\u7e3d\u662f\u8207\u4ed6\u4eba\u6bd4\u8f03<\/li>\n                    <\/ul>\n                    <p><em>\u8a18\u4f4f\uff1a\u771f\u6b63\u7684\u611b\u60c5\u770b\u7684\u4e0d\u53ea\u662f\u5916\u8868\uff0c\u800c\u662f\u5169\u500b\u9748\u9b42\u7684\u5951\u5408\u5ea6\u3002<\/em><\/p>\n                `\n            },\n            'B': {\n                title: '\u4f60\u6703\u6557\u7d66\u5584\u89e3\u4eba\u610f\u7684\u60c5\u6575',\n                description: '\u5728\u611f\u60c5\u88e1\uff0c\u4f60\u4e26\u975e\u662f\u90a3\u7a2e\u5584\u89e3\u4eba\u610f\u7684\u985e\u578b\uff0c\u5076\u723e\u4f60\u624d\u6703\u7ad9\u5728\u6200\u4eba\u7684\u89d2\u5ea6\uff0c\u4e0d\u518d\u4efb\u6027\u800c\u70ba\uff0c\u5728\u4f60\u751f\u6c23\u7684\u6642\u5019\uff0c\u4f60\u5f80\u5f80\u6703\u628a\u6c23\u6492\u5728\u6200\u4eba\u8eab\u4e0a\uff0c\u9084\u52d5\u4e0d\u52d5\u5c31\u4ee5\u5206\u624b\u76f8\u8981\u633e\uff0c\u5018\u82e5\u6200\u4eba\u9047\u4e0a\u4e86\u53e6\u4e00\u500b\u559c\u6b61\u4e14\u5584\u89e3\u4eba\u610f\u7684\u4eba\uff0c\u4f60\u53ef\u80fd\u5c31\u6b64\u4fbf\u51fa\u5c40\u4e86\u3002',\n                weakness: '\u7f3a\u4e4f\u540c\u7406\u5fc3\u8207\u9ad4\u8cbc',\n                suggestion: '\u5b78\u7fd2\u63db\u4f4d\u601d\u8003\u8207\u6e9d\u901a',\n                scores: [50, 80, 40, 65],\n                personalizedAdvice: `\n                    <p><strong>\u7d66\u4f60\u7684\u500b\u6027\u5316\u5efa\u8b70\uff1a<\/strong><\/p>\n                    <ul>\n                        <li><strong>\u7df4\u7fd2\u540c\u7406\u5fc3\uff1a<\/strong>\u5728\u8868\u9054\u81ea\u5df1\u4e4b\u524d\uff0c\u5148\u8a66\u8457\u7406\u89e3\u5c0d\u65b9\u7684\u611f\u53d7\u548c\u7acb\u5834<\/li>\n                        <li><strong>\u63a7\u5236\u60c5\u7dd2\uff1a<\/strong>\u751f\u6c23\u6642\u5148\u6df1\u547c\u5438\uff0c\u907f\u514d\u8aaa\u51fa\u50b7\u4eba\u7684\u8a71<\/li>\n                        <li><strong>\u5b78\u7fd2\u6e9d\u901a\u6280\u5de7\uff1a<\/strong>\u7528\"\u6211\u89ba\u5f97\"\u4ee3\u66ff\"\u4f60\u7e3d\u662f\"\uff0c\u6e1b\u5c11\u6307\u8cac\u6027\u8a9e\u8a00<\/li>\n                        <li><strong>\u57f9\u990a\u8010\u5fc3\uff1a<\/strong>\u7d66\u5c0d\u65b9\u66f4\u591a\u7406\u89e3\u548c\u5305\u5bb9\uff0c\u4e0d\u8981\u6025\u65bc\u4e0b\u7d50\u8ad6<\/li>\n                    <\/ul>\n                    <p><em>\u8a18\u4f4f\uff1a\u611b\u60c5\u9700\u8981\u96d9\u5411\u5954\u8d74\uff0c\u591a\u4e00\u4efd\u7406\u89e3\u5c31\u591a\u4e00\u4efd\u5e78\u798f\u3002<\/em><\/p>\n                `\n            },\n            'C': {\n                title: '\u4f60\u6703\u6557\u7d66\u6703\u6492\u5b0c\u7684\u60c5\u6575',\n                description: '\u4f60\u4e0d\u6703\u96a8\u96a8\u4fbf\u4fbf\u5728\u6200\u4eba\u9762\u524d\u6492\u5b0c\uff0c\u5927\u591a\u6578\u6642\u5019\uff0c\u4f60\u9084\u6703\u5728\u6200\u4eba\u9762\u524d\u5c55\u73fe\u81ea\u5df1\u5f37\u52e2\u7684\u4e00\u9762\uff0c\u53cd\u5012\u662f\u6200\u4eba\u9700\u8981\u8655\u8655\u9806\u5f9e\uff0c\u9077\u8b93\u8457\u4f60\uff0c\u5982\u679c\u51fa\u73fe\u4e00\u500b\u6bd4\u4f60\u6703\u6492\u5b0c\uff0c\u64c5\u9577\u8aaa\u4e00\u4e9b\u751c\u8a00\u871c\u8a9e\u7684\u60c5\u6575\uff0c\u95dc\u65bc\u4f60\u9084\u80fd\u5426\u628a\u6200\u4eba\u7559\u5728\u8eab\u908a\uff0c\u90a3\u662f\u4e00\u500b\u672a\u77e5\u6578\u3002',\n                weakness: '\u904e\u65bc\u5f37\u52e2\u7f3a\u5c11\u67d4\u60c5',\n                suggestion: '\u9069\u6642\u5c55\u73fe\u6eab\u67d4\u7684\u4e00\u9762',\n                scores: [60, 55, 75, 45],\n                personalizedAdvice: `\n                    <p><strong>\u7d66\u4f60\u7684\u500b\u6027\u5316\u5efa\u8b70\uff1a<\/strong><\/p>\n                    <ul>\n                        <li><strong>\u9069\u5ea6\u793a\u5f31\uff1a<\/strong>\u5076\u723e\u5c55\u73fe\u8106\u5f31\u7684\u4e00\u9762\uff0c\u8b93\u5c0d\u65b9\u611f\u53d7\u5230\u88ab\u9700\u8981<\/li>\n                        <li><strong>\u5b78\u7fd2\u8868\u9054\u611b\u610f\uff1a<\/strong>\u4e0d\u8981\u5bb3\u7f9e\uff0c\u591a\u8aaa\u4e9b\u751c\u871c\u7684\u8a71\u8a9e<\/li>\n                        <li><strong>\u5e73\u8861\u5f37\u5f31\u95dc\u4fc2\uff1a<\/strong>\u611f\u60c5\u4e2d\u4e0d\u9700\u8981\u7e3d\u662f\u5f37\u52e2\uff0c\u9069\u6642\u4f9d\u8cf4\u5c0d\u65b9<\/li>\n                        <li><strong>\u589e\u52a0\u89aa\u5bc6\u4e92\u52d5\uff1a<\/strong>\u591a\u4e9b\u64c1\u62b1\u3001\u727d\u624b\u7b49\u80a2\u9ad4\u63a5\u89f8\uff0c\u589e\u9032\u611f\u60c5<\/li>\n                    <\/ul>\n                    <p><em>\u8a18\u4f4f\uff1a\u771f\u6b63\u7684\u5f37\u5927\u662f\u80fd\u525b\u80fd\u67d4\uff0c\u61c2\u5f97\u5728\u611b\u4eba\u9762\u524d\u5378\u4e0b\u9632\u5099\u3002<\/em><\/p>\n                `\n            },\n            'D': {\n                title: '\u4f60\u6703\u6557\u7d66\u689d\u4ef6\u66f4\u597d\u7684\u60c5\u6575',\n                description: '\u73fe\u5be6\u751f\u6d3b\u4e2d\uff0c\u5176\u5be6\u6709\u4e0d\u5c11\u7684\u611f\u60c5\u6700\u7d42\u662f\u6557\u7d66\u4e86\u623f\u5b50\u8eca\u5b50\uff0c\u5f37\u8abf\u611b\u60c5\u8207\u7269\u8cea\u517c\u5f97\u7684\u4eba\u5176\u5be6\u4e26\u4e0d\u5c11\uff0c\u800c\u4f60\u7684\u6200\u4eba\u53ef\u80fd\u4e5f\u6709\u540c\u6a23\u7684\u60f3\u6cd5\uff0c\u5018\u82e5\u9047\u5230\u4e86\u4e00\u500b\u5404\u65b9\u9eb5\u689d\u4ef6\u90fd\u6bd4\u4f60\u597d\uff0c\u4f60\u559c\u6b61\u7684\u4eba\u53ef\u80fd\u5c31\u6703\u79fb\u60c5\u5225\u6200\uff0c\u70ba\u4e86\u8207\u5c0d\u65b9\u5728\u4e00\u8d77\uff0c\u53ef\u80fd\u5c31\u6703\u62cb\u68c4\u4f60\u3002',\n                weakness: '\u7269\u8cea\u689d\u4ef6\u76f8\u5c0d\u4e0d\u8db3',\n                suggestion: '\u63d0\u5347\u81ea\u6211\u50f9\u503c\u8207\u80fd\u529b',\n                scores: [55, 60, 50, 85],\n                personalizedAdvice: `\n                    <p><strong>\u7d66\u4f60\u7684\u500b\u6027\u5316\u5efa\u8b70\uff1a<\/strong><\/p>\n                    <ul>\n                        <li><strong>\u52aa\u529b\u63d0\u5347\u81ea\u5df1\uff1a<\/strong>\u5728\u5de5\u4f5c\u548c\u5b78\u696d\u4e0a\u7cbe\u9032\uff0c\u63d0\u9ad8\u6536\u5165\u548c\u793e\u6703\u5730\u4f4d<\/li>\n                        <li><strong>\u5c55\u73fe\u6f5b\u529b\uff1a<\/strong>\u8b93\u5c0d\u65b9\u770b\u5230\u4f60\u7684\u4e0a\u9032\u5fc3\u548c\u672a\u4f86\u898f\u5283<\/li>\n                        <li><strong>\u5275\u9020\u7cbe\u795e\u50f9\u503c\uff1a<\/strong>\u7528\u5fc3\u7d93\u71df\u611f\u60c5\uff0c\u5275\u9020\u91d1\u9322\u8cb7\u4e0d\u5230\u7684\u7f8e\u597d\u56de\u61b6<\/li>\n                        <li><strong>\u9078\u5c0d\u7684\u4eba\uff1a<\/strong>\u627e\u4e00\u500b\u91cd\u8996\u611f\u60c5\u591a\u65bc\u7269\u8cea\u7684\u4f34\u4fb6<\/li>\n                    <\/ul>\n                    <p><em>\u8a18\u4f4f\uff1a\u771f\u611b\u4e0d\u6703\u56e0\u70ba\u7269\u8cea\u800c\u6539\u8b8a\uff0c\u4f46\u52aa\u529b\u8b93\u81ea\u5df1\u8b8a\u5f97\u66f4\u597d\u6c38\u9060\u6c92\u932f\u3002<\/em><\/p>\n                `\n            }\n        };\n        \n        \/\/ \u72c0\u614b\u7ba1\u7406\n        this.state = {\n            currentQuestion: 1,\n            history: [],\n            answers: [], \/\/ \u8a18\u9304\u6240\u6709\u7b54\u6848\n            result: null,\n            chartInstance: null\n        };\n        \n        this.init();\n    }\n    \n    init() {\n        this.bindEvents();\n    }\n    \n    bindEvents() {\n        document.addEventListener('click', (e) => {\n            const action = e.target.closest('[data-action]')?.dataset.action;\n            \n            if (action === 'start-quiz') {\n                e.preventDefault();\n                this.startQuiz();\n            } else if (action === 'prev-question') {\n                e.preventDefault();\n                this.previousQuestion();\n            } else if (action === 'restart-quiz') {\n                e.preventDefault();\n                this.restartQuiz();\n            }\n            \n            \/\/ \u9078\u9805\u9ede\u64ca\n            const optionCard = e.target.closest('.option-card');\n            if (optionCard && !optionCard.classList.contains('disabled')) {\n                e.preventDefault();\n                this.selectOption(optionCard);\n            }\n        });\n    }\n    \n    startQuiz() {\n        this.showPage('quiz');\n        this.loadQuestion(1);\n        this.scrollToTop();\n    }\n    \n    loadQuestion(questionId) {\n        const question = this.questions.find(q => q.id === questionId);\n        if (!question) return;\n        \n        this.state.currentQuestion = questionId;\n        this.updateProgress();\n        this.renderQuestion(question);\n        \n        \/\/ \u986f\u793a\/\u96b1\u85cf\u4e0a\u4e00\u984c\u6309\u9215\n        const prevButton = document.querySelector('[data-action=\"prev-question\"]');\n        prevButton.style.display = this.state.history.length > 0 ? 'inline-block' : 'none';\n    }\n    \n    renderQuestion(question) {\n        const questionNumber = document.querySelector('[data-question-number]');\n        const questionText = document.querySelector('[data-question-text]');\n        const optionsContainer = document.querySelector('[data-options-container]');\n        \n        questionNumber.textContent = `\u554f\u984c ${question.id}\/10`;\n        questionText.textContent = question.text;\n        \n        \/\/ \u6e32\u67d3\u9078\u9805\n        optionsContainer.innerHTML = question.options.map((option, index) => `\n            <div class=\"option-card\" \n                 data-option-index=\"${index}\"\n                 data-option-text=\"${option.text}\"\n                 data-next=\"${option.next || ''}\"\n                 data-result=\"${option.result || ''}\">\n                <span class=\"option-indicator\"><\/span>\n                <span class=\"option-text\">${option.text}<\/span>\n            <\/div>\n        `).join('');\n    }\n    \n    selectOption(optionCard) {\n        \/\/ \u6a19\u8a18\u9078\u4e2d\n        document.querySelectorAll('.option-card').forEach(card => {\n            card.classList.remove('selected');\n            card.classList.add('disabled');\n        });\n        optionCard.classList.add('selected');\n        \n        \/\/ \u8a18\u9304\u7b54\u6848\n        this.state.answers.push({\n            questionId: this.state.currentQuestion,\n            answer: optionCard.dataset.optionText\n        });\n        \n        \/\/ \u4fdd\u5b58\u6b77\u53f2\n        this.state.history.push(this.state.currentQuestion);\n        \n        \/\/ \u5ef6\u9072\u5f8c\u9032\u5165\u4e0b\u4e00\u984c\u6216\u986f\u793a\u7d50\u679c\n        setTimeout(() => {\n            const next = optionCard.dataset.next;\n            const result = optionCard.dataset.result;\n            \n            if (result) {\n                this.showResult(result);\n            } else if (next) {\n                this.loadQuestion(parseInt(next));\n            }\n        }, 300);\n    }\n    \n    previousQuestion() {\n        if (this.state.history.length > 0) {\n            const prevQuestion = this.state.history.pop();\n            this.state.answers.pop(); \/\/ \u79fb\u9664\u4e0a\u4e00\u500b\u7b54\u6848\n            this.loadQuestion(prevQuestion);\n        }\n    }\n    \n    updateProgress() {\n        const progressFill = document.querySelector('.progress-fill');\n        const progress = (this.state.currentQuestion \/ 10) * 100;\n        progressFill.style.width = `${progress}%`;\n        progressFill.setAttribute('aria-valuenow', progress);\n    }\n    \n    showResult(resultType) {\n        this.state.result = resultType;\n        const result = this.results[resultType];\n        \n        \/\/ \u66f4\u65b0\u7d50\u679c\u5167\u5bb9\n        document.querySelector('[data-result-title]').textContent = result.title;\n        document.querySelector('[data-result-description]').textContent = result.description;\n        document.querySelector('[data-weakness]').textContent = result.weakness;\n        document.querySelector('[data-suggestion]').textContent = result.suggestion;\n        document.querySelector('[data-personalized-advice]').innerHTML = result.personalizedAdvice;\n        \n        this.showPage('result');\n        this.scrollToTop();\n        \n        \/\/ \u5ef6\u9072\u6e32\u67d3\u5716\u8868\u4ee5\u78ba\u4fdd\u5bb9\u5668\u53ef\u898b\n        setTimeout(() => this.renderChart(result), 300);\n    }\n    \n    renderChart(result) {\n        \/\/ \u92b7\u6bc0\u820a\u5716\u8868\n        if (this.state.chartInstance) {\n            this.state.chartInstance.destroy();\n        }\n        \n        const ctx = document.getElementById('resultChart').getContext('2d');\n        \n        this.state.chartInstance = new Chart(ctx, {\n            type: 'radar',\n            data: {\n                labels: ['\u5916\u5728\u9b45\u529b', '\u5584\u89e3\u4eba\u610f', '\u6492\u5b0c\u80fd\u529b', '\u7269\u8cea\u689d\u4ef6'],\n                datasets: [{\n                    label: '\u4f60\u7684\u9632\u79a6\u529b',\n                    data: result.scores,\n                    backgroundColor: 'rgba(129, 199, 132, 0.2)',\n                    borderColor: 'rgba(76, 175, 80, 1)',\n                    borderWidth: 2,\n                    pointBackgroundColor: 'rgba(76, 175, 80, 1)',\n                    pointBorderColor: '#fff',\n                    pointHoverBackgroundColor: '#fff',\n                    pointHoverBorderColor: 'rgba(76, 175, 80, 1)',\n                    pointRadius: 5,\n                    pointHoverRadius: 7\n                }]\n            },\n            options: {\n                responsive: true,\n                maintainAspectRatio: true,\n                plugins: {\n                    legend: {\n                        display: false\n                    },\n                    tooltip: {\n                        callbacks: {\n                            label: function(context) {\n                                return context.label + ': ' + context.parsed + '%';\n                            }\n                        }\n                    }\n                },\n                scales: {\n                    r: {\n                        beginAtZero: true,\n                        max: 100,\n                        ticks: {\n                            stepSize: 20,\n                            font: {\n                                size: 12\n                            },\n                            color: '#718096'\n                        },\n                        pointLabels: {\n                            font: {\n                                size: 14,\n                                weight: 'bold'\n                            },\n                            color: '#2C5F2D'\n                        },\n                        grid: {\n                            color: 'rgba(0, 0, 0, 0.05)'\n                        }\n                    }\n                }\n            }\n        });\n    }\n    \n    restartQuiz() {\n        \/\/ \u91cd\u7f6e\u72c0\u614b\n        this.state.currentQuestion = 1;\n        this.state.history = [];\n        this.state.answers = [];\n        this.state.result = null;\n        \n        \/\/ \u92b7\u6bc0\u5716\u8868\n        if (this.state.chartInstance) {\n            this.state.chartInstance.destroy();\n            this.state.chartInstance = null;\n        }\n        \n        \/\/ \u8fd4\u56de\u5f15\u5c0e\u9801\n        this.showPage('intro');\n        this.scrollToTop();\n    }\n    \n    showPage(pageName) {\n        Object.keys(this.pages).forEach(key => {\n            this.pages[key].style.display = key === pageName ? 'block' : 'none';\n        });\n    }\n    \n    scrollToTop() {\n        window.scrollTo({ top: 0, behavior: 'smooth' });\n    }\n}\n\n\/\/ \u521d\u59cb\u5316\u6e2c\u9a57\nif (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', () => new RivalQuiz());\n} else {\n    new RivalQuiz();\n}\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u6216\u8bb8\u4f60\u89c9\u5f97\u4e24\u4eba\u4e4b\u95f4\u53ea\u8981\u611f\u60c5\u597d\uff0c\u8db3\u591f\u76f8\u7231\uff0c\u5c31\u7b97\u54ea\u5929\u51fa\u73b0\u4e86\u7b2c\u4e09\u8005\uff0c\u4f60\u4e5f\u4e0d\u4f1a\u6210\u4e3a\u51fa\u5c40\u7684\u90a3\u4e00\u4e2a\u3002\u4e8b\u5b9e\u4f1a\u662f\u4f60\u671f\u5f85\u7684\u90a3\u6837\u4e48\uff1f\u5728\u611f\u60c5\u7684\u4e16\u754c\u91cc\uff0c\u4f60\u9047\u5230\u600e\u6837\u7684\u60c5\u654c\u4f1a\u5b8c\u8d25\u5462\uff1f<\/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,178],"tags":[],"class_list":["post-2551","post","type-post","status-publish","format-standard","hentry","category-personality","category-love"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2551","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=2551"}],"version-history":[{"count":1,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2551\/revisions"}],"predecessor-version":[{"id":10680,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2551\/revisions\/10680"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2551"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2551"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}