{"id":2534,"date":"2023-10-17T09:45:02","date_gmt":"2023-10-17T01:45:02","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2534"},"modified":"2025-08-17T01:18:14","modified_gmt":"2025-08-16T17:18:14","slug":"settle-for-love-when","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/settle-for-love-when","title":{"rendered":"\u5c0f\u6d4b\u9a8c\uff1a\u4ec0\u4e48\u65f6\u5019\u4f60\u4f1a\u840c\u751f\u51d1\u5408\u7231\u60c5\u7684\u5ff5\u5934?"},"content":{"rendered":"<!-- Bootstrap CSS -->\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\n<!-- \u81ea\u5b9a\u7fa9\u6a23\u5f0f -->\n<style>\n    \/* \u57fa\u790e\u6a23\u5f0f\u8a2d\u7f6e *\/\n    .quiz-container-9 {\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n        font-size: 18px;\n        line-height: 1.6;\n        color: #2c3e50;\n        max-width: 800px;\n        margin: 0 auto;\n        padding: 20px;\n    }\n    \n    .quiz-container-9 h2 {\n        font-size: 32px;\n        font-weight: 700;\n        color: #34495e;\n        margin-bottom: 1.5rem;\n        text-align: center;\n    }\n    \n    .quiz-container-9 h3 {\n        font-size: 22px;\n        font-weight: 700;\n        color: #34495e;\n        margin-bottom: 1.5rem;\n    }\n    \n    \/* \u9801\u9762\u5207\u63db\u52d5\u756b *\/\n    .quiz-container-9 section {\n        display: none;\n        animation: fadeIn 0.4s ease-in-out;\n    }\n    \n    .quiz-container-9 section.active {\n        display: block;\n    }\n    \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    \n    \/* \u5f15\u5c0e\u9801\u6a23\u5f0f *\/\n    .intro-hero-9 {\n        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n        border-radius: 20px;\n        padding: 3rem 2rem;\n        color: white;\n        text-align: center;\n        box-shadow: 0 20px 40px rgba(0,0,0,0.1);\n        margin-bottom: 2rem;\n    }\n    \n    .intro-hero-9 h2 {\n        color: white;\n        font-size: 36px;\n        margin-bottom: 1rem;\n    }\n    \n    .intro-subtitle-9 {\n        font-size: 20px;\n        opacity: 0.95;\n        margin-bottom: 2rem;\n    }\n    \n    .feature-icons-9 {\n        display: flex;\n        justify-content: center;\n        gap: 2rem;\n        margin: 3rem 0;\n        flex-wrap: wrap;\n    }\n    \n    .feature-icon-9 {\n        background: white;\n        border-radius: 50%;\n        width: 80px;\n        height: 80px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        box-shadow: 0 10px 25px rgba(0,0,0,0.1);\n        transition: transform 0.3s ease;\n    }\n    \n    .feature-icon-9:hover {\n        transform: translateY(-5px);\n    }\n    \n    .feature-icon-9 i {\n        font-size: 36px;\n        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n    }\n    \n    .intro-description-9 {\n        background: white;\n        border-radius: 15px;\n        padding: 2rem;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n        margin-bottom: 2rem;\n    }\n    \n    .intro-description-9 p {\n        color: #5a6c7d;\n        font-size: 18px;\n        line-height: 1.8;\n        margin-bottom: 1rem;\n    }\n    \n    .start-btn-9 {\n        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n        color: white;\n        border: none;\n        padding: 15px 50px;\n        font-size: 20px;\n        font-weight: 600;\n        border-radius: 50px;\n        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);\n        transition: all 0.3s ease;\n        min-width: 200px;\n    }\n    \n    .start-btn-9:hover {\n        transform: translateY(-3px);\n        box-shadow: 0 15px 35px rgba(102, 126, 234, 0.5);\n        background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);\n    }\n    \n    \/* \u6e2c\u9a57\u9801\u6a23\u5f0f *\/\n    .question-container-9 {\n        background: white;\n        border-radius: 15px;\n        padding: 2rem;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n        margin-bottom: 2rem;\n    }\n    \n    .options-container-9 {\n        display: flex;\n        flex-direction: column;\n        gap: 1rem;\n    }\n    \n    .option-card-9 {\n        background: #f8f9fa;\n        border: 2px solid transparent;\n        border-radius: 12px;\n        padding: 1.2rem;\n        cursor: pointer;\n        transition: all 0.3s ease;\n        display: flex;\n        align-items: center;\n        gap: 1rem;\n        min-height: 60px;\n    }\n    \n    .option-card-9:hover {\n        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);\n        transform: translateX(5px);\n        box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n    }\n    \n    .option-card-9.selected {\n        background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);\n        border-color: #667eea;\n    }\n    \n    .option-indicator-9 {\n        width: 24px;\n        height: 24px;\n        border: 2px solid #cbd5e0;\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        transition: all 0.3s ease;\n    }\n    \n    .option-card-9.selected .option-indicator-9 {\n        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n        border-color: #667eea;\n    }\n    \n    .option-card-9.selected .option-indicator-9::after {\n        content: '\u2713';\n        color: white;\n        font-size: 14px;\n        font-weight: bold;\n    }\n    \n    .option-text-9 {\n        font-size: 18px;\n        color: #2c3e50;\n        font-weight: 500;\n        margin: 0;\n    }\n    \n    .back-btn-9 {\n        background: #e9ecef;\n        color: #495057;\n        border: none;\n        padding: 10px 30px;\n        font-size: 16px;\n        border-radius: 50px;\n        transition: all 0.3s ease;\n        margin-top: 1rem;\n    }\n    \n    .back-btn-9:hover {\n        background: #dee2e6;\n        transform: translateY(-2px);\n    }\n    \n    \/* \u7d50\u679c\u9801\u6a23\u5f0f *\/\n    .result-hero-9 {\n        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n        border-radius: 20px;\n        padding: 2rem;\n        color: white;\n        text-align: center;\n        margin-bottom: 2rem;\n    }\n    \n    .result-hero-9 h2 {\n        color: white;\n        font-size: 32px;\n        margin-bottom: 1rem;\n    }\n    \n    .result-content-9 {\n        background: white;\n        border-radius: 15px;\n        padding: 2rem;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n        margin-bottom: 2rem;\n    }\n    \n    .result-title-9 {\n        font-size: 24px;\n        font-weight: 700;\n        color: #34495e;\n        margin-bottom: 1.5rem;\n        text-align: center;\n    }\n    \n    .result-description-9 {\n        font-size: 18px;\n        color: #5a6c7d;\n        line-height: 1.8;\n        margin-bottom: 2rem;\n    }\n    \n    .chart-container-9 {\n        position: relative;\n        height: 300px;\n        margin: 2rem auto;\n        max-width: 500px;\n    }\n    \n    .retry-btn-9 {\n        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n        color: white;\n        border: none;\n        padding: 15px 40px;\n        font-size: 18px;\n        font-weight: 600;\n        border-radius: 50px;\n        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);\n        transition: all 0.3s ease;\n        margin: 2rem auto;\n        display: block;\n    }\n    \n    .retry-btn-9:hover {\n        transform: translateY(-3px);\n        box-shadow: 0 15px 35px rgba(102, 126, 234, 0.5);\n        background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);\n    }\n    \n    \/* \u97ff\u61c9\u5f0f\u8a2d\u8a08 *\/\n    @media (max-width: 576px) {\n        .quiz-container-9 {\n            padding: 15px;\n        }\n        \n        .intro-hero-9 {\n            padding: 2rem 1rem;\n        }\n        \n        .intro-hero-9 h2 {\n            font-size: 28px;\n        }\n        \n        .feature-icons-9 {\n            gap: 1rem;\n        }\n        \n        .feature-icon-9 {\n            width: 60px;\n            height: 60px;\n        }\n        \n        .feature-icon-9 i {\n            font-size: 28px;\n        }\n        \n        .start-btn-9 {\n            padding: 12px 40px;\n            font-size: 18px;\n        }\n        \n        .option-text-9 {\n            font-size: 16px;\n        }\n    }\n<\/style>\n\n<!-- HTML\u7d50\u69cb -->\n<div class=\"quiz-container-9\">\n    <!-- \u5f15\u5c0e\u9801 -->\n    <section id=\"quizintro9\" data-page=\"intro9\" class=\"active\">\n        <div class=\"intro-hero-9\">\n            <h2>\u611b\u60c5\u6e4a\u5408\u5ff5\u982d\u5fc3\u7406\u6e2c\u9a57<\/h2>\n            <p class=\"intro-subtitle-9\">\u63a2\u7d22\u4f60\u5167\u5fc3\u6df1\u8655\u7684\u611b\u60c5\u89c0<\/p>\n        <\/div>\n        \n        <div class=\"feature-icons-9\">\n            <div class=\"feature-icon-9\">\n                <i class=\"bi bi-heart-fill\"><\/i>\n            <\/div>\n            <div class=\"feature-icon-9\">\n                <i class=\"bi bi-lightbulb-fill\"><\/i>\n            <\/div>\n            <div class=\"feature-icon-9\">\n                <i class=\"bi bi-stars\"><\/i>\n            <\/div>\n        <\/div>\n        \n        <div class=\"intro-description-9\">\n            <p>\u5728\u611b\u60c5\u7684\u65c5\u9014\u4e2d\uff0c\u6211\u5011\u90fd\u6e34\u671b\u627e\u5230\u90a3\u500b\u5c0d\u7684\u4eba\u3002\u4f46\u7de3\u5206\u6709\u6642\u5c31\u662f\u9019\u9ebc\u5947\u5999\uff0c\u53ef\u80fd\u5728\u5c0d\u7684\u6642\u9593\u9047\u5230\u932f\u7684\u4eba\uff0c\u4e5f\u53ef\u80fd\u5728\u932f\u7684\u6642\u9593\u9082\u9005\u5c0d\u7684\u4eba\u3002<\/p>\n            <p>\u9019\u500b\u6709\u8da3\u7684\u5fc3\u7406\u6e2c\u9a57\u5c07\u5e6b\u52a9\u4f60\u4e86\u89e3\uff0c\u5728\u4ec0\u9ebc\u60c5\u6cc1\u4e0b\u4f60\u53ef\u80fd\u6703\u840c\u751f\u6e4a\u5408\u611b\u60c5\u7684\u5ff5\u982d\u3002\u900f\u904e\u7c21\u55ae\u7684\u9078\u64c7\uff0c\u63a2\u7d22\u4f60\u5167\u5fc3\u6df1\u8655\u7684\u611b\u60c5\u89c0\u548c\u671f\u5f85\u3002<\/p>\n            <p>\u6e96\u5099\u597d\u4e86\u55ce\uff1f\u8b93\u6211\u5011\u4e00\u8d77\u958b\u59cb\u9019\u6bb5\u63a2\u7d22\u4e4b\u65c5\u5427\uff01<\/p>\n        <\/div>\n        \n        <button class=\"btn start-btn-9\" onclick=\"startQuiz9()\">\n            \u5f00\u59cb\u6d4b\u9a8c <i class=\"bi bi-arrow-right-circle-fill ms-2\"><\/i>\n        <\/button>\n    <\/section>\n    \n    <!-- \u6e2c\u9a57\u9801 -->\n    <section id=\"quizmain9\" data-page=\"quiz9\">\n        <div class=\"question-container-9\">\n            <h3>\u4f60\u66f4\u559c\u6b22\u54ea\u79cd\u7ecf\u5178\u7684\u5361\u901a\u4eba\u7269\uff1f<\/h3>\n            \n            <div class=\"options-container-9\">\n                <div class=\"option-card-9\" data-option=\"A\" onclick=\"selectOption9('A')\">\n                    <div class=\"option-indicator-9\"><\/div>\n                    <p class=\"option-text-9\">\u5510\u8001\u9d28<\/p>\n                <\/div>\n                \n                <div class=\"option-card-9\" data-option=\"B\" onclick=\"selectOption9('B')\">\n                    <div class=\"option-indicator-9\"><\/div>\n                    <p class=\"option-text-9\">\u7c73\u8001\u9f20<\/p>\n                <\/div>\n                \n                <div class=\"option-card-9\" data-option=\"C\" onclick=\"selectOption9('C')\">\n                    <div class=\"option-indicator-9\"><\/div>\n                    <p class=\"option-text-9\">\u8df3\u8df3\u864e<\/p>\n                <\/div>\n                \n                <div class=\"option-card-9\" data-option=\"D\" onclick=\"selectOption9('D')\">\n                    <div class=\"option-indicator-9\"><\/div>\n                    <p class=\"option-text-9\">\u7dad\u5c3c\u718a<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n    \n    <!-- \u7d50\u679c\u9801 -->\n    <section id=\"quizresult9\" data-page=\"result9\">\n        <div class=\"result-hero-9\">\n            <h2>\u4f60\u7684\u6d4b\u9a8c\u7ed3\u679c<\/h2>\n        <\/div>\n        \n        <div class=\"result-content-9\">\n            <h3 class=\"result-title-9\" id=\"resultTitle9\"><\/h3>\n            <p class=\"result-description-9\" id=\"resultDescription9\"><\/p>\n            \n            <div class=\"chart-container-9\">\n                <canvas id=\"resultChart9\"><\/canvas>\n            <\/div>\n        <\/div>\n        \n        <button class=\"btn retry-btn-9\" onclick=\"retryQuiz9()\">\n            <i class=\"bi bi-arrow-clockwise me-2\"><\/i> \u91cd\u65b0\u6d4b\u8bd5\n        <\/button>\n    <\/section>\n<\/div>\n\n<!-- Chart.js -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n\n<!-- JavaScript -->\n<script>\n(function() {\n    'use strict';\n    \n    \/\/ \u6e2c\u9a57\u63a7\u5236\u5668\n    class QuizController9 {\n        constructor() {\n            this.currentPage = 'intro9';\n            this.selectedOption = null;\n            this.chartInstance = null;\n            this.results = {\n                'A': {\n                    title: '\u751f\u75c5\u6642\u523b\u7684\u6e34\u671b',\n                    description: '\u4f60\u5728\u751f\u75c5\u7684\u6642\u5019\u5c31\u6703\u840c\u751f\u6e4a\u5408\u611b\u60c5\u7684\u5ff5\u982d\u3002\u56e0\u70ba\u4f60\u5728\u5e73\u5e38\u7684\u751f\u6d3b\u7576\u4e2d\uff0c\u7e3d\u662f\u6703\u7fd2\u6163\u6027\u7684\u7368\u4f86\u7368\u5f80\uff0c\u5f9e\u4f86\u90fd\u4e0d\u6703\u4f9d\u8cf4\u4efb\u4f55\u4eba\uff0c\u6240\u4ee5\u80fd\u529b\u5f80\u5f80\u90fd\u662f\u5f88\u7a81\u51fa\u7684\u3002\u96d6\u7136\u4f60\u5c0d\u65bc\u611b\u60c5\u6709\u8457\u5f88\u9ad8\u7684\u8981\u6c42\uff0c\u53ef\u662f\u5728\u81ea\u5df1\u9700\u8981\u5225\u4eba\u5e6b\u52a9\u7684\u6642\u5019\uff0c\u5c31\u5f88\u5bb9\u6613\u7522\u751f\u9019\u6a23\u7684\u60f3\u6cd5\u3002\u4f60\u662f\u4e00\u500b\u5805\u5f37\u7368\u7acb\u7684\u4eba\uff0c\u4f46\u5728\u8106\u5f31\u6642\u523b\u4e5f\u6e34\u671b\u6709\u4eba\u966a\u4f34\u3002',\n                    scores: {\n                        '\u7368\u7acb\u6027': 90,\n                        '\u5805\u5f37\u5ea6': 85,\n                        '\u9700\u6c42\u611f': 75,\n                        '\u7406\u60f3\u6027': 80\n                    }\n                },\n                'B': {\n                    title: '\u670b\u53cb\u805a\u6703\u7684\u89f8\u52d5',\n                    description: '\u5728\u53c3\u52a0\u670b\u53cb\u805a\u6703\u7684\u6642\u5019\uff0c\u4f60\u5f88\u6709\u53ef\u80fd\u6703\u840c\u751f\u6e4a\u5408\u611b\u60c5\u7684\u5ff5\u982d\u3002\u5176\u5be6\u5728\u5927\u5bb6\u55ae\u8eab\u7684\u6642\u523b\u88e1\uff0c\u4f60\u5f9e\u4f86\u90fd\u4e0d\u6703\u5728\u610f\u5225\u4eba\u7684\u773c\u5149\uff0c\u8a8d\u70ba\u53e6\u4e00\u534a\u6c92\u4f86\uff0c\u53ea\u662f\u7de3\u5206\u672a\u5230\u800c\u5df2\u3002\u53ef\u96a8\u8457\u8eab\u908a\u7684\u670b\u53cb\u90fd\u5df2\u7d93\u958b\u59cb\u812b\u55ae\u4e86\uff0c\u5c31\u96e3\u514d\u6703\u7522\u751f\u9019\u6a23\u7684\u5ff5\u982d\uff0c\u751a\u81f3\u9084\u6703\u8003\u616e\u76f8\u89aa\u3002\u4f60\u91cd\u8996\u793e\u4ea4\u95dc\u4fc2\uff0c\u5bb9\u6613\u53d7\u5230\u74b0\u5883\u5f71\u97ff\u3002',\n                    scores: {\n                        '\u793e\u4ea4\u6027': 85,\n                        '\u5f9e\u773e\u6027': 70,\n                        '\u958b\u653e\u5ea6': 75,\n                        '\u7406\u60f3\u6027': 65\n                    }\n                },\n                'C': {\n                    title: '\u7121\u804a\u6642\u5149\u7684\u601d\u7dd2',\n                    description: '\u4f60\u5728\u7121\u804a\u7684\u6642\u5019\u5c31\u6703\u840c\u751f\u6e4a\u5408\u611b\u60c5\u7684\u5ff5\u982d\u3002\u56e0\u70ba\u4f60\u6709\u5f88\u5f37\u7684\u4e8b\u696d\u5fc3\uff0c\u5e73\u5e38\u6703\u628a\u81ea\u5df1\u7684\u6642\u9593\u548c\u7cbe\u529b\u90fd\u6295\u5165\u5728\u5de5\u4f5c\u7576\u4e2d\uff0c\u4e0d\u6703\u89ba\u5f97\u4f34\u4fb6\u6709\u591a\u9ebc\u91cd\u8981\uff0c\u66f4\u4e0d\u80fd\u63a5\u53d7\u642d\u5925\u904e\u65e5\u5b50\u7684\u614b\u5ea6\u3002\u53ef\u5982\u679c\u5728\u7a7a\u9592\u7684\u6642\u9593\u88e1\uff0c\u5c31\u5f88\u5bb9\u6613\u5fd8\u8a18\u81ea\u5df1\u7684\u521d\u5fc3\uff0c\u5f88\u60f3\u5c07\u5c31\u3002\u4f60\u662f\u500b\u4e8b\u696d\u578b\u7684\u4eba\uff0c\u4f46\u4e5f\u9700\u8981\u60c5\u611f\u7684\u6ecb\u6f64\u3002',\n                    scores: {\n                        '\u4e8b\u696d\u5fc3': 95,\n                        '\u5c08\u6ce8\u5ea6': 90,\n                        '\u7a7a\u865b\u611f': 60,\n                        '\u7406\u60f3\u6027': 70\n                    }\n                },\n                'D': {\n                    title: '\u8fd4\u9109\u6642\u7bc0\u7684\u58d3\u529b',\n                    description: '\u5728\u904e\u5e74\u56de\u5bb6\u7684\u6642\u5019\uff0c\u4f60\u5f88\u6709\u53ef\u80fd\u6703\u840c\u751f\u6e4a\u5408\u611b\u60c5\u7684\u5ff5\u982d\u3002\u56e0\u70ba\u4f60\u5927\u90e8\u5206\u7684\u6642\u9593\u90fd\u5728\u5916\u95d6\u8569\uff0c\u8eab\u908a\u6c92\u6709\u4eba\u63d0\u9192\u81ea\u5df1\u3002\u53ef\u4e00\u65e6\u56de\u5230\u5bb6\u4e4b\u5f8c\uff0c\u6240\u6709\u89aa\u53cb\u90fd\u6703\u9032\u884c\u4e0d\u505c\u7684\u50ac\u4fc3\uff0c\u5c31\u6703\u5c0e\u81f4\u4f60\u60f3\u627e\u4e00\u500b\u80fd\u8b93\u81ea\u5df1\u4f9d\u8cf4\u7684\u5c0d\u8c61\uff0c\u5f7c\u6b64\u76f8\u4e92\u966a\u4f34\u5ea6\u904e\u9019\u4e00\u751f\u3002\u4f60\u91cd\u8996\u5bb6\u4eba\u7684\u770b\u6cd5\uff0c\u5bb9\u6613\u53d7\u5230\u50b3\u7d71\u89c0\u5ff5\u5f71\u97ff\u3002',\n                    scores: {\n                        '\u5bb6\u5ead\u89c0': 80,\n                        '\u50b3\u7d71\u6027': 75,\n                        '\u58d3\u529b\u611f': 85,\n                        '\u7406\u60f3\u6027': 60\n                    }\n                }\n            };\n        }\n        \n        \/\/ \u986f\u793a\u9801\u9762\n        showPage(pageId) {\n            const pages = document.querySelectorAll('.quiz-container-9 section');\n            pages.forEach(page => page.classList.remove('active'));\n            \n            const targetPage = document.getElementById(pageId);\n            if (targetPage) {\n                targetPage.classList.add('active');\n                this.currentPage = pageId;\n                \n                \/\/ \u6efe\u52d5\u5230\u9802\u90e8\n                targetPage.scrollIntoView({ behavior: 'smooth', block: 'start' });\n            }\n        }\n        \n        \/\/ \u958b\u59cb\u6e2c\u9a57\n        startQuiz() {\n            this.selectedOption = null;\n            this.showPage('quizmain9');\n        }\n        \n        \/\/ \u9078\u64c7\u9078\u9805\n        selectOption(option) {\n            \/\/ \u79fb\u9664\u6240\u6709\u9078\u4e2d\u72c0\u614b\n            const options = document.querySelectorAll('.option-card-9');\n            options.forEach(opt => opt.classList.remove('selected'));\n            \n            \/\/ \u6dfb\u52a0\u9078\u4e2d\u72c0\u614b\n            const selectedCard = document.querySelector(`.option-card-9[data-option=\"${option}\"]`);\n            if (selectedCard) {\n                selectedCard.classList.add('selected');\n                this.selectedOption = option;\n                \n                \/\/ \u5ef6\u9072\u986f\u793a\u7d50\u679c\n                setTimeout(() => {\n                    this.showResult();\n                }, 500);\n            }\n        }\n        \n        \/\/ \u986f\u793a\u7d50\u679c\n        showResult() {\n            if (!this.selectedOption) return;\n            \n            const result = this.results[this.selectedOption];\n            \n            \/\/ \u66f4\u65b0\u7d50\u679c\u5167\u5bb9\n            document.getElementById('resultTitle9').textContent = result.title;\n            document.getElementById('resultDescription9').textContent = result.description;\n            \n            \/\/ \u986f\u793a\u7d50\u679c\u9801\n            this.showPage('quizresult9');\n            \n            \/\/ \u7e6a\u88fd\u5716\u8868\n            setTimeout(() => {\n                this.drawChart(result.scores);\n            }, 300);\n        }\n        \n        \/\/ \u7e6a\u88fd\u5716\u8868\n        drawChart(scores) {\n            \/\/ \u92b7\u6bc0\u820a\u5716\u8868\n            if (this.chartInstance) {\n                this.chartInstance.destroy();\n                this.chartInstance = null;\n            }\n            \n            const ctx = document.getElementById('resultChart9');\n            if (!ctx) return;\n            \n            const labels = Object.keys(scores);\n            const data = Object.values(scores);\n            \n            this.chartInstance = new Chart(ctx, {\n                type: 'radar',\n                data: {\n                    labels: labels,\n                    datasets: [{\n                        label: '\u4f60\u7684\u7279\u8cea\u5206\u6790',\n                        data: data,\n                        backgroundColor: 'rgba(102, 126, 234, 0.2)',\n                        borderColor: 'rgba(102, 126, 234, 1)',\n                        borderWidth: 2,\n                        pointBackgroundColor: 'rgba(102, 126, 234, 1)',\n                        pointBorderColor: '#fff',\n                        pointHoverBackgroundColor: '#fff',\n                        pointHoverBorderColor: 'rgba(102, 126, 234, 1)',\n                        pointRadius: 5,\n                        pointHoverRadius: 8\n                    }]\n                },\n                options: {\n                    responsive: true,\n                    maintainAspectRatio: false,\n                    plugins: {\n                        legend: {\n                            display: true,\n                            position: 'top',\n                            labels: {\n                                font: {\n                                    size: 16,\n                                    weight: '600'\n                                },\n                                color: '#34495e',\n                                padding: 20\n                            }\n                        },\n                        tooltip: {\n                            callbacks: {\n                                label: function(context) {\n                                    return context.parsed.r + '%';\n                                }\n                            },\n                            backgroundColor: 'rgba(0, 0, 0, 0.8)',\n                            titleFont: {\n                                size: 14\n                            },\n                            bodyFont: {\n                                size: 14\n                            },\n                            padding: 12\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: '#6c757d'\n                            },\n                            grid: {\n                                color: 'rgba(0, 0, 0, 0.08)'\n                            },\n                            pointLabels: {\n                                font: {\n                                    size: 18,\n                                    weight: '500'\n                                },\n                                color: '#495057',\n                                padding: 15\n                            }\n                        }\n                    }\n                }\n            });\n        }\n        \n        \/\/ \u91cd\u65b0\u6e2c\u8a66\n        retryQuiz() {\n            this.selectedOption = null;\n            \n            \/\/ \u6e05\u9664\u9078\u4e2d\u72c0\u614b\n            const options = document.querySelectorAll('.option-card-9');\n            options.forEach(opt => opt.classList.remove('selected'));\n            \n            \/\/ \u92b7\u6bc0\u5716\u8868\n            if (this.chartInstance) {\n                this.chartInstance.destroy();\n                this.chartInstance = null;\n            }\n            \n            \/\/ \u8fd4\u56de\u5f15\u5c0e\u9801\n            this.showPage('quizintro9');\n        }\n    }\n    \n    \/\/ \u521d\u59cb\u5316\u6e2c\u9a57\u63a7\u5236\u5668\n    const quizController = new QuizController9();\n    \n    \/\/ \u5168\u5c40\u51fd\u6578\n    window.startQuiz9 = function() {\n        quizController.startQuiz();\n    };\n    \n    window.selectOption9 = function(option) {\n        quizController.selectOption(option);\n    };\n    \n    window.retryQuiz9 = function() {\n        quizController.retryQuiz();\n    };\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u5f88\u591a\u4eba\u5728\u8ffd\u6c42\u771f\u7231\u7684\u9053\u8def\u4e0a\uff0c\u4f1a\u89c9\u5f97\u5fc3\u7070\u610f\u51b7\uff0c\u8ba4\u4e3a\u5982\u679c\u9047\u4e0d\u5230\u771f\u6b63\u6295\u7f18\u7684\u5f02\u6027\uff0c\u90a3\u4e48\u5c06\u5c31\u4e5f\u662f\u4e0d\u9519\u7684\uff0c\u4e0b\u9762\u5c31\u505a\u4e2a\u7231\u60c5\u6d4b\u8bd5\uff0c\u4ec0\u4e48\u65f6\u5019\u4f60\u4f1a\u840c\u751f\u51d1\u5408\u7231\u60c5\u7684\u5ff5\u5934\uff1f<\/p>","protected":false},"author":19,"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":"default","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":[178],"tags":[],"class_list":["post-2534","post","type-post","status-publish","format-standard","hentry","category-love"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2534","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=2534"}],"version-history":[{"count":1,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2534\/revisions"}],"predecessor-version":[{"id":10512,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2534\/revisions\/10512"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2534"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2534"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}