{"id":2721,"date":"2023-10-22T12:12:41","date_gmt":"2023-10-22T04:12:41","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2721"},"modified":"2025-08-28T21:54:00","modified_gmt":"2025-08-28T13:54:00","slug":"love-you-can-give","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/love-you-can-give","title":{"rendered":"\u5c0f\u6d4b\u9a8c\uff1a\u4f60\u80fd\u4ed8\u51fa\u54ea\u79cd\u7231"},"content":{"rendered":"<!-- \u611b\u60c5\u985e\u578b\u5fc3\u7406\u6e2c\u9a57 - WordPress \u5d4c\u5165\u7248 -->\n<!-- \u5f15\u5165 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<style>\n\/* \u81ea\u5b9a\u7fa9\u6a23\u5f0f *\/\n#loveQuizContainer9 {\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n    font-size: 18px;\n    line-height: 1.6;\n    color: #2c3e50;\n    max-width: 750px;\n    margin: 0 auto;\n    padding: 0 15px;\n}\n\n#loveQuizContainer9 h2 {\n    font-size: 32px;\n    font-weight: bold;\n    color: #2c3e50;\n    margin-bottom: 1.5rem;\n}\n\n#loveQuizContainer9 h3 {\n    font-size: 22px;\n    font-weight: bold;\n    color: #34495e;\n    margin-bottom: 1.5rem;\n}\n\n#loveQuizContainer9 .quiz-section {\n    min-height: 400px;\n    transition: opacity 0.3s ease-in-out;\n}\n\n#loveQuizContainer9 .quiz-section.hidden {\n    display: none;\n}\n\n\/* \u5f15\u5c0e\u9801\u6a23\u5f0f - \u7642\u6108\u7da0\u8272\u7cfb *\/\n#loveQuizContainer9 .intro-feature {\n    background: linear-gradient(135deg, #56CCB2 0%, #7DD3C0 100%);\n    width: 70px;\n    height: 70px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0 auto 1rem;\n    box-shadow: 0 8px 25px rgba(86, 204, 178, 0.25);\n    transition: transform 0.3s ease;\n}\n\n#loveQuizContainer9 .intro-feature:hover {\n    transform: translateY(-5px);\n}\n\n#loveQuizContainer9 .intro-feature i {\n    font-size: 32px;\n    color: white;\n}\n\n#loveQuizContainer9 .start-btn {\n    background: linear-gradient(135deg, #56CCB2 0%, #7DD3C0 100%);\n    border: none;\n    padding: 14px 45px;\n    font-size: 19px;\n    font-weight: 600;\n    border-radius: 50px;\n    color: white;\n    box-shadow: 0 8px 25px rgba(86, 204, 178, 0.25);\n    transition: all 0.3s ease;\n}\n\n#loveQuizContainer9 .start-btn:hover {\n    transform: translateY(-3px);\n    box-shadow: 0 12px 35px rgba(86, 204, 178, 0.35);\n    background: linear-gradient(135deg, #4DBDA8 0%, #6FC4B1 100%);\n}\n\n\/* \u6e2c\u9a57\u9801\u6a23\u5f0f *\/\n#loveQuizContainer9 .progress {\n    height: 6px;\n    background-color: #e8f5f0;\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n#loveQuizContainer9 .progress-bar {\n    background: linear-gradient(135deg, #56CCB2 0%, #7DD3C0 100%);\n    transition: width 0.3s ease;\n}\n\n#loveQuizContainer9 .option-card {\n    border: 2px solid #e8f5f0;\n    border-radius: 15px;\n    padding: 18px;\n    margin-bottom: 15px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    background: white;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n    position: relative;\n    padding-left: 55px;\n}\n\n#loveQuizContainer9 .option-card:hover {\n    border-color: #7DD3C0;\n    box-shadow: 0 4px 15px rgba(86, 204, 178, 0.15);\n    transform: translateX(3px);\n}\n\n#loveQuizContainer9 .option-card.selected {\n    border-color: #56CCB2;\n    background: linear-gradient(135deg, rgba(86, 204, 178, 0.05) 0%, rgba(125, 211, 192, 0.05) 100%);\n}\n\n#loveQuizContainer9 .option-indicator {\n    position: absolute;\n    left: 18px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 26px;\n    height: 26px;\n    border: 2px solid #7DD3C0;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: white;\n    transition: all 0.3s ease;\n}\n\n#loveQuizContainer9 .option-card.selected .option-indicator {\n    background: linear-gradient(135deg, #56CCB2 0%, #7DD3C0 100%);\n    border-color: #56CCB2;\n}\n\n#loveQuizContainer9 .option-card.selected .option-indicator::after {\n    content: '\u2713';\n    color: white;\n    font-size: 14px;\n    font-weight: bold;\n}\n\n#loveQuizContainer9 .option-text {\n    font-size: 18px;\n    color: #2c3e50;\n    margin: 0;\n}\n\n#loveQuizContainer9 .prev-btn {\n    background: #95a5a6;\n    border: none;\n    padding: 10px 28px;\n    font-size: 16px;\n    border-radius: 25px;\n    color: white;\n    transition: all 0.3s ease;\n}\n\n#loveQuizContainer9 .prev-btn:hover {\n    background: #7f8c8d;\n    transform: translateY(-2px);\n}\n\n\/* \u7d50\u679c\u9801\u6a23\u5f0f *\/\n#loveQuizContainer9 .result-card {\n    background: white;\n    border-radius: 18px;\n    padding: 25px;\n    box-shadow: 0 8px 30px rgba(0,0,0,0.06);\n    margin-bottom: 25px;\n}\n\n#loveQuizContainer9 .result-title {\n    background: linear-gradient(135deg, #56CCB2 0%, #7DD3C0 100%);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-clip: text;\n    font-size: 26px;\n    font-weight: bold;\n    margin-bottom: 20px;\n}\n\n#loveQuizContainer9 .restart-btn {\n    background: linear-gradient(135deg, #56CCB2 0%, #7DD3C0 100%);\n    border: none;\n    padding: 12px 36px;\n    font-size: 17px;\n    font-weight: 600;\n    border-radius: 50px;\n    color: white;\n    box-shadow: 0 8px 25px rgba(86, 204, 178, 0.25);\n    transition: all 0.3s ease;\n}\n\n#loveQuizContainer9 .restart-btn:hover {\n    transform: translateY(-3px);\n    box-shadow: 0 12px 35px rgba(86, 204, 178, 0.35);\n    background: linear-gradient(135deg, #4DBDA8 0%, #6FC4B1 100%);\n}\n\n#loveQuizContainer9 .chart-container {\n    position: relative;\n    height: 320px;\n    width: 100%;\n    max-width: 450px;\n    margin: 0 auto 25px;\n}\n\n#loveQuizContainer9 .feature-card {\n    background: white;\n    border: none;\n    border-radius: 12px;\n    box-shadow: 0 3px 12px rgba(0,0,0,0.05);\n    padding: 18px;\n    height: 100%;\n    transition: transform 0.3s ease;\n}\n\n#loveQuizContainer9 .feature-card:hover {\n    transform: translateY(-3px);\n    box-shadow: 0 5px 20px rgba(0,0,0,0.08);\n}\n\n#loveQuizContainer9 .feature-icon {\n    color: #56CCB2;\n    font-size: 22px;\n    margin-right: 8px;\n}\n\n#loveQuizContainer9 .personalized-advice {\n    background: linear-gradient(135deg, rgba(86, 204, 178, 0.08) 0%, rgba(125, 211, 192, 0.08) 100%);\n    border-left: 4px solid #56CCB2;\n    border-radius: 8px;\n    padding: 20px;\n    margin-top: 25px;\n}\n\n#loveQuizContainer9 .advice-title {\n    color: #56CCB2;\n    font-weight: bold;\n    font-size: 20px;\n    margin-bottom: 15px;\n}\n\n#loveQuizContainer9 .advice-item {\n    margin-bottom: 12px;\n    padding-left: 25px;\n    position: relative;\n}\n\n#loveQuizContainer9 .advice-item::before {\n    content: '\u2022';\n    position: absolute;\n    left: 8px;\n    color: #7DD3C0;\n    font-size: 20px;\n}\n\n\/* \u97ff\u61c9\u5f0f\u8a2d\u8a08 *\/\n@media (max-width: 576px) {\n    #loveQuizContainer9 h2 {\n        font-size: 26px;\n    }\n    \n    #loveQuizContainer9 h3 {\n        font-size: 20px;\n    }\n    \n    #loveQuizContainer9 .start-btn {\n        padding: 12px 35px;\n        font-size: 17px;\n    }\n    \n    #loveQuizContainer9 .option-card {\n        padding: 15px;\n        padding-left: 48px;\n    }\n    \n    #loveQuizContainer9 .chart-container {\n        height: 280px;\n    }\n    \n    #loveQuizContainer9 .intro-feature {\n        width: 60px;\n        height: 60px;\n    }\n    \n    #loveQuizContainer9 .intro-feature i {\n        font-size: 28px;\n    }\n}\n<\/style>\n\n<div id=\"loveQuizContainer9\">\n    <!-- \u5f15\u5c0e\u9801 -->\n    <section id=\"quizintro9\" data-page=\"intro9\" class=\"quiz-section\">\n        <div class=\"text-center mb-4\">\n            <h2>\u4f60\u80fd\u4ed8\u51fa\u54ea\u7a2e\u611b\uff1f<\/h2>\n            <p class=\"lead text-muted\">\u63a2\u7d22\u4f60\u7684\u611b\u60c5\u985e\u578b\uff0c\u4e86\u89e3\u5167\u5fc3\u6df1\u8655\u7684\u60c5\u611f\u6a21\u5f0f<\/p>\n        <\/div>\n        \n        <div class=\"row g-4 mb-4\">\n            <div class=\"col-6 col-md-3\">\n                <div class=\"text-center\">\n                    <div class=\"intro-feature\">\n                        <i class=\"bi bi-heart-fill\"><\/i>\n                    <\/div>\n                    <h6 class=\"fw-bold\">\u6df1\u5ea6\u5206\u6790<\/h6>\n                    <p class=\"text-muted small\">\u5fc3\u7406\u5b78\u5c08\u696d\u6e2c\u8a66<\/p>\n                <\/div>\n            <\/div>\n            <div class=\"col-6 col-md-3\">\n                <div class=\"text-center\">\n                    <div class=\"intro-feature\">\n                        <i class=\"bi bi-compass-fill\"><\/i>\n                    <\/div>\n                    <h6 class=\"fw-bold\">\u500b\u6027\u5316\u5efa\u8b70<\/h6>\n                    <p class=\"text-muted small\">\u91cf\u8eab\u5b9a\u88fd\u7684\u6307\u5c0e<\/p>\n                <\/div>\n            <\/div>\n            <div class=\"col-6 col-md-3\">\n                <div class=\"text-center\">\n                    <div class=\"intro-feature\">\n                        <i class=\"bi bi-lightbulb-fill\"><\/i>\n                    <\/div>\n                    <h6 class=\"fw-bold\">\u81ea\u6211\u8ba4\u8bc6<\/h6>\n                    <p class=\"text-muted small\">\u4e86\u89e3\u60c5\u611f\u9700\u6c42<\/p>\n                <\/div>\n            <\/div>\n            <div class=\"col-6 col-md-3\">\n                <div class=\"text-center\">\n                    <div class=\"intro-feature\">\n                        <i class=\"bi bi-stars\"><\/i>\n                    <\/div>\n                    <h6 class=\"fw-bold\">\u5c08\u696d\u6307\u5c0e<\/h6>\n                    <p class=\"text-muted small\">\u6539\u5584\u95dc\u4fc2\u5efa\u8b70<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <div class=\"card border-0 bg-light p-4 mb-4\">\n            <div class=\"card-body\">\n                <p class=\"mb-0\">\n                    <i class=\"bi bi-quote fs-4\" style=\"color: #56CCB2;\"><\/i>\n                    \u611b\u60c5\u5fc3\u7406\u5b78\u5927\u5e2b\u65af\u6ed5\u4f2f\u683c\u8a8d\u70ba\uff0c\u611b\u60c5\u5305\u62ec\u4e09\u7a2e\u6210\u5206\uff1a\u89aa\u5bc6\u3001\u6fc0\u60c5\u53ca\u627f\u8afe\u3002\u900f\u904e\u9019\u500b\u6e2c\u9a57\uff0c\u4f60\u5c07\u767c\u73fe\u81ea\u5df1\u7368\u7279\u7684\u611b\u60c5\u8868\u9054\u65b9\u5f0f\uff0c\u4e26\u7372\u5f97\u5c08\u5c6c\u65bc\u4f60\u7684\u500b\u6027\u5316\u5efa\u8b70\u3002\n                <\/p>\n            <\/div>\n        <\/div>\n        \n        <div class=\"text-center\">\n            <button type=\"button\" class=\"btn btn-primary btn-lg start-btn\" data-action=\"start\">\n                \u5f00\u59cb\u6d4b\u9a8c <i class=\"bi bi-arrow-right-circle-fill ms-2\"><\/i>\n            <\/button>\n        <\/div>\n    <\/section>\n    \n    <!-- \u6e2c\u9a57\u9801 -->\n    <section id=\"quizmain9\" data-page=\"quiz9\" class=\"quiz-section hidden\">\n        <div class=\"mb-4\">\n            <div class=\"d-flex justify-content-between align-items-center mb-2\">\n                <small class=\"text-muted\">\u6d4b\u9a8c\u8fdb\u5ea6<\/small>\n                <small class=\"text-muted\"><span data-current-question>1<\/span> \/ 15<\/small>\n            <\/div>\n            <div class=\"progress\">\n                <div class=\"progress-bar\" role=\"progressbar\" style=\"width: 0%\"><\/div>\n            <\/div>\n        <\/div>\n        \n        <div class=\"text-center mb-4\">\n            <h3 data-question-text>\u8f09\u5165\u4e2d&#8230;<\/h3>\n        <\/div>\n        \n        <div data-options-container class=\"mb-4\">\n            <!-- \u9078\u9805\u5c07\u52d5\u614b\u751f\u6210 -->\n        <\/div>\n        \n        <div class=\"text-center\">\n            <button type=\"button\" class=\"btn prev-btn hidden\" data-action=\"prev\">\n                <i class=\"bi bi-arrow-left-circle me-2\"><\/i>\u4e0a\u4e00\u9898\n            <\/button>\n        <\/div>\n    <\/section>\n    \n    <!-- \u7d50\u679c\u9801 -->\n    <section id=\"quizresult9\" data-page=\"result9\" class=\"quiz-section hidden\">\n        <div class=\"text-center mb-4\">\n            <h2>\u6d4b\u9a8c\u7ed3\u679c<\/h2>\n        <\/div>\n        \n        <div class=\"result-card\">\n            <div class=\"text-center\">\n                <h3 class=\"result-title\" data-result-title>\u4f60\u7684\u611b\u60c5\u985e\u578b<\/h3>\n            <\/div>\n            \n            <div class=\"chart-container mb-4\">\n                <canvas id=\"resultChart9\"><\/canvas>\n            <\/div>\n            \n            <div data-result-description class=\"mb-4\">\n                <!-- \u7d50\u679c\u63cf\u8ff0\u5c07\u52d5\u614b\u751f\u6210 -->\n            <\/div>\n            \n            <div class=\"row g-3 mb-4\">\n                <div class=\"col-md-6\">\n                    <div class=\"feature-card\">\n                        <h5 class=\"mb-3\">\n                            <i class=\"bi bi-star-fill feature-icon\"><\/i>\u4f60\u7684\u512a\u52e2\n                        <\/h5>\n                        <p data-strengths class=\"mb-0\"><\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"col-md-6\">\n                    <div class=\"feature-card\">\n                        <h5 class=\"mb-3\">\n                            <i class=\"bi bi-lightbulb-fill feature-icon\"><\/i>\u6210\u9577\u65b9\u5411\n                        <\/h5>\n                        <p data-suggestions class=\"mb-0\"><\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"personalized-advice\" data-personalized-advice>\n                <div class=\"advice-title\">\n                    <i class=\"bi bi-person-hearts me-2\"><\/i>\u500b\u6027\u5316\u5efa\u8b70\n                <\/div>\n                <div data-advice-content>\n                    <!-- \u500b\u6027\u5316\u5efa\u8b70\u5167\u5bb9\u5c07\u52d5\u614b\u751f\u6210 -->\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <div class=\"text-center mt-4\">\n            <button type=\"button\" class=\"btn restart-btn\" data-action=\"restart\">\n                <i class=\"bi bi-arrow-clockwise me-2\"><\/i>\u91cd\u65b0\u6d4b\u8bd5\n            <\/button>\n        <\/div>\n    <\/section>\n<\/div>\n\n<!-- \u5f15\u5165 Chart.js -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n\n<script>\n(function() {\n    'use strict';\n    \n    \/\/ \u6e2c\u9a57\u908f\u8f2f\u985e\n    class LoveQuiz {\n        constructor() {\n            \/\/ \u5feb\u53d6 DOM \u5143\u7d20\n            this.container = document.getElementById('loveQuizContainer9');\n            this.introSection = document.getElementById('quizintro9');\n            this.quizSection = document.getElementById('quizmain9');\n            this.resultSection = document.getElementById('quizresult9');\n            \n            \/\/ \u6e2c\u9a57\u72c0\u614b\n            this.currentQuestion = 1;\n            this.answers = [];\n            this.answerDetails = []; \/\/ \u8a18\u9304\u8a73\u7d30\u7684\u9078\u64c7\n            this.chartInstance = null;\n            \n            \/\/ \u984c\u76ee\u6578\u64da\n            this.questions = this.initQuestions();\n            \n            \/\/ \u521d\u59cb\u5316\u4e8b\u4ef6\n            this.initEvents();\n        }\n        \n        initQuestions() {\n            return {\n                1: {\n                    text: '\u4f60\u89ba\u5f97\u81ea\u5df1\u662f\uff1a',\n                    options: [\n                        { text: '\u5b87\u5b99\u4e2d\u4e00\u7c92\u5875\u57c3', next: 3, trait: 'humble' },\n                        { text: '\u6211\u5c31\u662f\u6211\uff0c\u4e0d\u662f\u5225\u7684', next: 2, trait: 'confident' }\n                    ]\n                },\n                2: {\n                    text: '\u4f60\u66f4\u559c\u6b61\uff1a',\n                    options: [\n                        { text: '\u9ec3\u8272\u9999\u8549\u86cb\u7cd5', next: 4, trait: 'warm' },\n                        { text: '\u767d\u8272\u512a\u916a\u4e73\u86cb\u7cd5', next: 3, trait: 'pure' }\n                    ]\n                },\n                3: {\n                    text: '\u5728\u7a97\u524d\u7684\u7da0\u8272\u690d\u7269\u65c1\u908a\u64fa\u4e00\u628a\u6905\u5b50\uff0c\u4f60\u8981\uff1a',\n                    options: [\n                        { text: '\u6a59\u8272\u6c99\u767c\u6905', next: 5, trait: 'comfort' },\n                        { text: '\u85e4\u88fd\u6416\u6905', next: 6, trait: 'natural' }\n                    ]\n                },\n                4: {\n                    text: '\u4f60\u5e0c\u671b\u64c1\u6709\uff1a',\n                    options: [\n                        { text: '\u5e73\u51e1\u7684\u611b\u60c5', next: 6, trait: 'stable' },\n                        { text: '\u8d77\u4f0f\u800c\u6232\u5287\u5316\u7684\u611b\u60c5', next: 7, trait: 'passionate' }\n                    ]\n                },\n                5: {\n                    text: '\u4f60\u4e0d\u559c\u6b61\u5c0f\u52d5\u7269\uff0c\u67d0\u5929\u56de\u5bb6\u767c\u73fe\u4e00\u96bb\u525b\u51fa\u751f\u7684\u5c0f\u8c93\uff0c\u4f60\u6703\uff1a',\n                    options: [\n                        { text: '\u6beb\u4e0d\u7336\u8c6b\u5730\u6254\u51fa\u53bb', next: 8, trait: 'decisive' },\n                        { text: '\u9084\u662f\u990a\u5e7e\u5929\u518d\u8aaa\u5427', next: 9, trait: 'compassionate' }\n                    ]\n                },\n                6: {\n                    text: '\u66fe\u7d93\u7529\u4e86\u4f60\u7684\u611b\u4eba\uff0c\u843d\u9b44\u4e86\u53c8\u56de\u982d\u54c0\u6c42\u4f60\uff0c\u4f60\u6253\u7b97\uff1a',\n                    options: [\n                        { text: '\u6c92\u6709\u4ec0\u9ebc\u597d\u8aaa\u7684\uff0c\u4e00\u8173\u8e22\u51fa\u53bb', next: 8, trait: 'firm' },\n                        { text: '\u53ef\u80fd\u6703\u4e0d\u8a08\u524d\u5acc\u518d\u6b21\u63a5\u7d0d\u5427', next: 7, trait: 'forgiving' }\n                    ]\n                },\n                7: {\n                    text: '\u5ddd\u7aef\u5eb7\u6210\u8aaa\uff1a\u611b\u904e\u4e00\u6b21\u7684\u8cac\u4efb\u662f\u7121\u6cd5\u6d88\u9664\u7684\u3002\u4f60\u89ba\u5f97\uff1a',\n                    options: [\n                        { text: '\u4f30\u8a08\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u662f\u4ed6\u767c\u71d2\u6642\u8aaa\u7684\u5427', next: 8, trait: 'rational' },\n                        { text: '\u6709\u4e00\u5b9a\u7684\u9053\u7406\uff0c\u8b93\u4eba\u611f\u52d5', next: 10, trait: 'sentimental' }\n                    ]\n                },\n                8: {\n                    text: '\u5df2\u7d93\u4f7f\u7528\u904e\u4e00\u6b21\u7684\u7bc0\u65e5\u88dd\u98fe\u54c1\uff0c\u4f60\u6703\uff1a',\n                    options: [\n                        { text: '\u96a8\u624b\u626f\u4e0b\u4f86\u6254\u6389', next: 9, trait: 'practical' },\n                        { text: '\u5c0f\u5fc3\u53d6\u4e0b\u4f86\u4fdd\u7559', next: 11, trait: 'cherishing' }\n                    ]\n                },\n                9: {\n                    text: '\u8cb7\u4e86\u65b0\u6a61\u76ae\u5f8c\uff0c\u767c\u73fe\u66f8\u684c\u4e0a\u9084\u5269\u4e0b\u5c0f\u534a\u584a\u820a\u7684\uff1a',\n                    options: [\n                        { text: '\u7559\u5728\u4e00\u908a\u7528\u5b8c', next: 10, trait: 'thrifty' },\n                        { text: '\u6254\u6389\uff0c\u63db\u65b0\u7684', next: 11, trait: 'renewal' }\n                    ]\n                },\n                10: {\n                    text: '\u4f60\u8a8d\u70ba\uff0c\u771f\u6b63\u523b\u9aa8\u9298\u5fc3\u7684\u611b\u60c5\u662f\uff1a',\n                    options: [\n                        { text: '\u7121\u79c1\u7684', next: 12, trait: 'selfless' },\n                        { text: '\u6b98\u5fcd\u7684', next: 14, trait: 'realistic' }\n                    ]\n                },\n                11: {\n                    text: '\u7d66\u75f4\u60c5\u7684\u4eba\u4e00\u500b\u5f62\u5bb9\u8a5e\uff0c\u61c9\u8a72\u662f\uff1a',\n                    options: [\n                        { text: '\u53ef\u656c\uff0c\u73cd\u8cb4\u7684', next: 13, trait: 'idealistic' },\n                        { text: '\u53ef\u6015\uff0c\u72e0\u6bd2\u7684', next: 12, trait: 'cautious' }\n                    ]\n                },\n                12: {\n                    text: '\u6bcd\u8718\u86db\u5fc5\u9808\u5403\u6389\u81ea\u5df1\u7684\u4e08\u592b\u624d\u80fd\u751f\u4e0b\u611b\u7684\u7d50\u6676\uff0c\u4f60\u611f\u89ba\uff1a',\n                    options: [\n                        { text: '\u5f88\u53ef\u6015\u3001\u5f88\u60e1\u5fc3\uff0c\u4e00\u822c\u4f86\u8aaa\uff0c\u6211\u4e0d\u559c\u6b61\u9019\u4e9b\u87f2\u5b50', next: 14, trait: 'sensitive' },\n                        { text: '\u662f\u81ea\u7136\u6cd5\u5247\uff0c\u4e0d\u6703\u8b93\u6211\u6709\u4e0d\u8212\u670d\u7684\u611f\u89ba', next: 13, trait: 'accepting' }\n                    ]\n                },\n                13: {\n                    text: '\u5728\u4f60\u5fc3\u76ee\u4e2d\uff0c\u52d5\u7269\u548c\u76ae\u8349\u4e4b\u9593\u7684\u95dc\u4fc2\u662f\uff1a',\n                    options: [\n                        { text: '\u6211\u559c\u611b\u52d5\u7269\uff0c\u4e5f\u559c\u6b61\u76ae\u8349', next: 15, trait: 'balanced' },\n                        { text: '\u6211\u559c\u611b\u52d5\u7269\uff0c\u56e0\u6b64\u6211\u5805\u6c7a\u53cd\u5c0d\u76ae\u8349', result: 'A', trait: 'protective' }\n                    ]\n                },\n                14: {\n                    text: '\u4f60\u559c\u6b61\u5728\u623f\u9593\u88e1\u64fa\u653e\u4ec0\u9ebc\u690d\u7269\uff1f',\n                    options: [\n                        { text: '\u76c6\u683d\u7684\u7da0\u8272\u690d\u7269', result: 'C', trait: 'nurturing' },\n                        { text: '\u9bae\u8c54\u7684\u622a\u679d\u74f6\u82b1', next: 15, trait: 'aesthetic' }\n                    ]\n                },\n                15: {\n                    text: '\u559c\u6b61\u4e0a\u8def\u908a\u4e00\u682a\u6839\u7cfb\u5f88\u6df1\u7684\u5c0f\u82b1\uff0c\u4f60\u6703\u600e\u9ebc\u505a\uff1f',\n                    options: [\n                        { text: '\u7528\u76e1\u5168\u529b\u62d4\u4e0b\u4f86\u5e36\u8d70', result: 'D', trait: 'possessive' },\n                        { text: '\u628a\u74f6\u5b50\u91cc\u7684\u7926\u6cc9\u6c34\u6f86\u5728\u5b83\u7684\u6839\u4e0a', result: 'B', trait: 'respectful' }\n                    ]\n                }\n            };\n        }\n        \n        initEvents() {\n            \/\/ \u4f7f\u7528\u4e8b\u4ef6\u59d4\u8a17\n            this.container.addEventListener('click', (e) => {\n                const action = e.target.closest('[data-action]')?.dataset.action;\n                \n                if (action === 'start') {\n                    this.startQuiz();\n                } else if (action === 'prev') {\n                    this.previousQuestion();\n                } else if (action === 'restart') {\n                    this.restartQuiz();\n                }\n                \n                \/\/ \u8655\u7406\u9078\u9805\u9ede\u64ca\n                const optionCard = e.target.closest('.option-card');\n                if (optionCard) {\n                    this.selectOption(optionCard);\n                }\n            });\n        }\n        \n        startQuiz() {\n            this.introSection.classList.add('hidden');\n            this.quizSection.classList.remove('hidden');\n            this.showQuestion(1);\n            this.scrollToTop();\n        }\n        \n        showQuestion(questionNumber) {\n            const question = this.questions[questionNumber];\n            if (!question) return;\n            \n            this.currentQuestion = questionNumber;\n            \n            \/\/ \u66f4\u65b0\u984c\u76ee\u6587\u5b57\n            const questionText = this.container.querySelector('[data-question-text]');\n            questionText.textContent = question.text;\n            \n            \/\/ \u66f4\u65b0\u9032\u5ea6\n            this.updateProgress();\n            \n            \/\/ \u751f\u6210\u9078\u9805\n            const optionsContainer = this.container.querySelector('[data-options-container]');\n            optionsContainer.innerHTML = '';\n            \n            question.options.forEach((option, index) => {\n                const optionCard = document.createElement('div');\n                optionCard.className = 'option-card';\n                optionCard.dataset.optionIndex = index;\n                optionCard.dataset.next = option.next || '';\n                optionCard.dataset.result = option.result || '';\n                optionCard.dataset.trait = option.trait || '';\n                \n                optionCard.innerHTML = `\n                    <div class=\"option-indicator\"><\/div>\n                    <p class=\"option-text\">${option.text}<\/p>\n                `;\n                \n                optionsContainer.appendChild(optionCard);\n            });\n            \n            \/\/ \u66f4\u65b0\u4e0a\u4e00\u984c\u6309\u9215\u72c0\u614b\n            const prevBtn = this.container.querySelector('[data-action=\"prev\"]');\n            if (this.answers.length > 0) {\n                prevBtn.classList.remove('hidden');\n            } else {\n                prevBtn.classList.add('hidden');\n            }\n        }\n        \n        selectOption(optionCard) {\n            \/\/ \u79fb\u9664\u5176\u4ed6\u9078\u9805\u7684\u9078\u4e2d\u72c0\u614b\n            this.container.querySelectorAll('.option-card').forEach(card => {\n                card.classList.remove('selected');\n            });\n            \n            \/\/ \u6dfb\u52a0\u9078\u4e2d\u72c0\u614b\n            optionCard.classList.add('selected');\n            \n            \/\/ \u5ef6\u9072\u8655\u7406\u4e0b\u4e00\u6b65\n            setTimeout(() => {\n                const next = optionCard.dataset.next;\n                const result = optionCard.dataset.result;\n                const trait = optionCard.dataset.trait;\n                const optionText = optionCard.querySelector('.option-text').textContent;\n                \n                \/\/ \u4fdd\u5b58\u7b54\u6848\n                this.answers.push({\n                    question: this.currentQuestion,\n                    option: parseInt(optionCard.dataset.optionIndex)\n                });\n                \n                \/\/ \u4fdd\u5b58\u8a73\u7d30\u9078\u64c7\n                this.answerDetails.push({\n                    questionNumber: this.currentQuestion,\n                    questionText: this.questions[this.currentQuestion].text,\n                    selectedOption: optionText,\n                    trait: trait\n                });\n                \n                if (result) {\n                    \/\/ \u986f\u793a\u7d50\u679c\n                    this.showResult(result);\n                } else if (next) {\n                    \/\/ \u986f\u793a\u4e0b\u4e00\u984c\n                    this.showQuestion(parseInt(next));\n                }\n            }, 300);\n        }\n        \n        previousQuestion() {\n            if (this.answers.length === 0) return;\n            \n            const lastAnswer = this.answers.pop();\n            this.answerDetails.pop();\n            this.showQuestion(lastAnswer.question);\n        }\n        \n        updateProgress() {\n            const current = this.container.querySelector('[data-current-question]');\n            const progressBar = this.container.querySelector('.progress-bar');\n            \n            current.textContent = this.answers.length + 1;\n            const progress = ((this.answers.length + 1) \/ 15) * 100;\n            progressBar.style.width = `${progress}%`;\n        }\n        \n        generatePersonalizedAdvice(type, traits) {\n            \/\/ \u7d71\u8a08\u7279\u8cea\n            const traitCounts = {};\n            traits.forEach(trait => {\n                traitCounts[trait] = (traitCounts[trait] || 0) + 1;\n            });\n            \n            \/\/ \u627e\u51fa\u4e3b\u8981\u7279\u8cea\n            const dominantTraits = Object.entries(traitCounts)\n                .sort((a, b) => b[1] - a[1])\n                .slice(0, 3)\n                .map(([trait]) => trait);\n            \n            \/\/ \u6839\u64da\u985e\u578b\u548c\u7279\u8cea\u751f\u6210\u500b\u6027\u5316\u5efa\u8b70\n            const adviceMap = {\n                'A': {\n                    base: ['\u5b78\u6703\u9069\u5ea6\u653e\u624b\uff0c\u7d66\u4e88\u4f34\u4fb6\u6210\u9577\u7684\u7a7a\u9593', '\u57f9\u990a\u5171\u540c\u8208\u8da3\uff0c\u589e\u9032\u96d9\u65b9\u4e92\u52d5', '\u5b9a\u671f\u8868\u9054\u611b\u610f\uff0c\u4e0d\u8981\u53ea\u662f\u9ed8\u9ed8\u5b88\u8b77'],\n                    traits: {\n                        'protective': '\u4f60\u7684\u4fdd\u8b77\u617e\u5f88\u5f37\uff0c\u8a18\u5f97\u5c0a\u91cd\u5c0d\u65b9\u7684\u7368\u7acb\u6027',\n                        'selfless': '\u7121\u79c1\u5949\u737b\u56fa\u7136\u53ef\u8cb4\uff0c\u4f46\u4e5f\u8981\u7167\u9867\u81ea\u5df1\u7684\u9700\u6c42',\n                        'forgiving': '\u5bec\u5bb9\u662f\u7f8e\u5fb7\uff0c\u4f46\u4e5f\u8981\u8a2d\u7acb\u9069\u7576\u7684\u754c\u9650',\n                        'stable': '\u7a69\u5b9a\u7684\u611b\u60c5\u9700\u8981\u6301\u7e8c\u7684\u7d93\u71df\u548c\u65b0\u9bae\u611f'\n                    }\n                },\n                'B': {\n                    base: ['\u52c7\u6562\u8868\u9054\u4f60\u7684\u60c5\u611f\uff0c\u8b93\u5c0d\u65b9\u611f\u53d7\u5230\u4f60\u7684\u611b', '\u5b78\u7fd2\u9069\u7576\u7684\u89aa\u5bc6\uff0c\u4e0d\u8981\u7e3d\u662f\u4fdd\u6301\u8ddd\u96e2', '\u76f8\u4fe1\u81ea\u5df1\u503c\u5f97\u88ab\u611b\uff0c\u63a5\u53d7\u5c0d\u65b9\u7684\u4ed8\u51fa'],\n                    traits: {\n                        'respectful': '\u5c0a\u91cd\u56fa\u7136\u91cd\u8981\uff0c\u4f46\u89aa\u5bc6\u95dc\u4fc2\u4e5f\u9700\u8981\u9069\u5ea6\u7684\u4ea4\u96c6',\n                        'rational': '\u7406\u6027\u601d\u8003\u5f88\u597d\uff0c\u4f46\u4e5f\u8981\u7d66\u611f\u6027\u7559\u4e9b\u7a7a\u9593',\n                        'humble': '\u8b19\u905c\u662f\u7f8e\u5fb7\uff0c\u4f46\u5728\u611b\u60c5\u4e2d\u4e5f\u8981\u5c55\u73fe\u81ea\u4fe1',\n                        'natural': '\u9806\u5176\u81ea\u7136\u5f88\u597d\uff0c\u4f46\u4e3b\u52d5\u722d\u53d6\u4e5f\u5f88\u91cd\u8981'\n                    }\n                },\n                'C': {\n                    base: ['\u63a5\u7d0d\u4f34\u4fb6\u7684\u771f\u5be6\u6a23\u8c8c\uff0c\u6e1b\u5c11\u6539\u9020\u7684\u6b32\u671b', '\u5b78\u7fd2\u96d9\u5411\u6e9d\u901a\uff0c\u8046\u807d\u5c0d\u65b9\u7684\u9700\u6c42', '\u57f9\u990a\u4fe1\u4efb\uff0c\u907f\u514d\u904e\u5ea6\u638c\u63a7'],\n                    traits: {\n                        'nurturing': '\u57f9\u80b2\u611b\u60c5\u5f88\u597d\uff0c\u4f46\u4e5f\u8981\u8b93\u611b\u60c5\u81ea\u7136\u751f\u9577',\n                        'cherishing': '\u73cd\u60dc\u5f88\u91cd\u8981\uff0c\u4f46\u4e0d\u8981\u8b93\u5c0d\u65b9\u611f\u5230\u58d3\u529b',\n                        'idealistic': '\u7406\u60f3\u5f88\u7f8e\u597d\uff0c\u4f46\u4e5f\u8981\u63a5\u53d7\u73fe\u5be6\u7684\u4e0d\u5b8c\u7f8e',\n                        'aesthetic': '\u8ffd\u6c42\u7f8e\u597d\u6c92\u932f\uff0c\u4f46\u5167\u5728\u7f8e\u66f4\u91cd\u8981'\n                    }\n                },\n                'D': {\n                    base: ['\u5b78\u7fd2\u5065\u5eb7\u7684\u4f9d\u6200\u65b9\u5f0f\uff0c\u907f\u514d\u904e\u5ea6\u4f54\u6709', '\u57f9\u990a\u5b89\u5168\u611f\uff0c\u76f8\u4fe1\u611b\u60c5\u7684\u7a69\u5b9a\u6027', '\u7df4\u7fd2\u653e\u624b\u7684\u85dd\u8853\uff0c\u7d66\u5f7c\u6b64\u5598\u606f\u7684\u7a7a\u9593'],\n                    traits: {\n                        'possessive': '\u4f54\u6709\u617e\u9700\u8981\u9069\u5ea6\u63a7\u5236\uff0c\u611b\u662f\u7d66\u4e88\u81ea\u7531',\n                        'passionate': '\u6fc0\u60c5\u5f88\u91cd\u8981\uff0c\u4f46\u4e5f\u9700\u8981\u51b7\u975c\u548c\u7406\u6027',\n                        'decisive': '\u679c\u65b7\u5f88\u597d\uff0c\u4f46\u5728\u611b\u60c5\u4e2d\u4e5f\u8981\u5b78\u6703\u59a5\u5354',\n                        'renewal': '\u8ffd\u6c42\u65b0\u9bae\u611f\u53ef\u4ee5\uff0c\u4f46\u4e5f\u8981\u73cd\u60dc\u64c1\u6709\u7684'\n                    }\n                }\n            };\n            \n            const advice = [...adviceMap[type].base];\n            \n            \/\/ \u6839\u64da\u7279\u8cea\u6dfb\u52a0\u500b\u6027\u5316\u5efa\u8b70\n            dominantTraits.forEach(trait => {\n                if (adviceMap[type].traits[trait]) {\n                    advice.push(adviceMap[type].traits[trait]);\n                }\n            });\n            \n            \/\/ \u6839\u64da\u9078\u64c7\u8def\u5f91\u6dfb\u52a0\u7279\u5b9a\u5efa\u8b70\n            const pathAdvice = this.getPathSpecificAdvice();\n            if (pathAdvice) {\n                advice.push(pathAdvice);\n            }\n            \n            return advice.slice(0, 5); \/\/ \u8fd4\u56de\u524d5\u689d\u6700\u76f8\u95dc\u7684\u5efa\u8b70\n        }\n        \n        getPathSpecificAdvice() {\n            \/\/ \u6839\u64da\u7279\u5b9a\u7684\u9078\u64c7\u7d44\u5408\u7d66\u51fa\u5efa\u8b70\n            const traits = this.answerDetails.map(a => a.trait);\n            \n            if (traits.includes('forgiving') && traits.includes('compassionate')) {\n                return '\u4f60\u7684\u5fc3\u5730\u5584\u826f\uff0c\u4f46\u8981\u5b78\u6703\u4fdd\u8b77\u81ea\u5df1\u4e0d\u88ab\u50b7\u5bb3';\n            }\n            if (traits.includes('decisive') && traits.includes('firm')) {\n                return '\u4f60\u7684\u679c\u65b7\u662f\u512a\u9ede\uff0c\u4f46\u5728\u611b\u60c5\u4e2d\u4e5f\u9700\u8981\u67d4\u8edf\u7684\u4e00\u9762';\n            }\n            if (traits.includes('sentimental') && traits.includes('idealistic')) {\n                return '\u6d6a\u6f2b\u60c5\u61f7\u5f88\u7f8e\u597d\uff0c\u4f46\u4e5f\u8981\u4fdd\u6301\u73fe\u5be6\u7684\u5e73\u8861';\n            }\n            if (traits.includes('practical') && traits.includes('rational')) {\n                return '\u7406\u6027\u52d9\u5be6\u5f88\u91cd\u8981\uff0c\u4f46\u5225\u5fd8\u4e86\u611b\u60c5\u4e5f\u9700\u8981\u611f\u6027\u7684\u6ecb\u6f64';\n            }\n            \n            return null;\n        }\n        \n        showResult(type) {\n            const results = {\n                'A': {\n                    title: 'A\u578b - \u611b\u7684\u5b88\u8b77\u795e',\n                    description: '\u88ab\u4f60\u6240\u611b\u662f\u4e00\u7a2e\u5e78\u798f\uff0c\u56e0\u70ba\u4f60\u8868\u9054\u611b\u7684\u65b9\u5f0f\u662f\u5b88\u8b77\u5c0d\u65b9\uff0c\u5305\u62ec\u62b5\u6297\u4efb\u4f55\u53ef\u80fd\u50b7\u5bb3\u5230\u5fc3\u611b\u4e4b\u7269\u7684\u884c\u70ba\u3002\u4f60\u662f\u885b\u58eb\u578b\u7684\u611b\u4eba\uff0c\u517c\u5177\u5fe0\u8aa0\u548c\u5805\u5b9a\uff0c\u7121\u8ad6\u4ec0\u9ebc\u60c5\u6cc1\u90fd\u4e0d\u80fd\u52d5\u6416\u4f60\u7684\u611f\u60c5\u3002\u4f60\u5177\u6709\u4e2d\u4e16\u7d00\u7684\u9a0e\u58eb\u7cbe\u795e\uff0c\u65e2\u6709\u5c0d\u4e16\u754c\u7684\u535a\u611b\u7cbe\u795e\u53c8\u80fd\u505a\u5230\u5c0d\u611b\u4eba\u7684\u5c08\u4e00\uff0c\u662f\u6700\u7406\u60f3\u7684\u611b\u4fb6\u3002',\n                    strengths: '\u5fe0\u8aa0\u5c08\u4e00\u3001\u8cac\u4efb\u611f\u5f37\u3001\u4fdd\u8b77\u617e\u5f37\u3001\u503c\u5f97\u4fe1\u8cf4',\n                    suggestions: '\u5b78\u7fd2\u7d66\u4e88\u4f34\u4fb6\u66f4\u591a\u7a7a\u9593\uff0c\u57f9\u990a\u5c0d\u4f34\u4fb6\u80fd\u529b\u7684\u4fe1\u4efb\u3002',\n                    scores: { \u5b88\u8b77\u529b: 95, \u5fe0\u8aa0\u5ea6: 90, \u5949\u737b\u5ea6: 85, \u5305\u5bb9\u5ea6: 75, \u4fe1\u4efb\u5ea6: 70 }\n                },\n                'B': {\n                    title: 'B\u578b - \u611b\u7684\u9060\u89c0\u8005',\n                    description: '\u4f60\u5c0d\u5fc3\u611b\u4e4b\u7269\u7684\u614b\u5ea6\u662f\uff1a\u53ef\u9060\u89c0\u800c\u4e0d\u53ef\u893b\u73a9\uff0c\u6240\u4ee5\u5be7\u53ef\u628a\u5076\u723e\u5145\u6eff\u611f\u60c5\u7684\u4e00\u77a5\u7576\u6210\u8868\u9054\u611b\u7684\u65b9\u5f0f\u3002\u4f60\u7684\u611b\u610f\u57fa\u65bc\u5e73\u5e38\u4e00\u9ede\u4e00\u6ef4\u7684\u7d30\u5fae\u6d41\u9732\uff0c\u6c92\u6709\u6fc0\u60c5\u7206\u767c\u7684\u8868\u767d\u3002\u4f46\u662f\u4f60\u5be7\u9858\u611b\u4eba\u5728\u9060\u96e2\u81ea\u5df1\u7684\u5730\u65b9\u5e78\u798f\u7dbb\u653e\uff0c\u800c\u4e0d\u60f3\u628a\u4ed6\uff08\u5979\uff09\u675f\u7e1b\u5728\u81ea\u5df1\u8eab\u908a\u3002\u4f60\u662f\u5177\u6709\u72a7\u7272\u7cbe\u795e\u7684\u611b\u4fb6\uff0c\u628a\u5c0d\u65b9\u7684\u5e78\u798f\u653e\u7f6e\u5728\u81ea\u5df1\u7684\u4e4b\u4e0a\u3002',\n                    strengths: '\u5c0a\u91cd\u5c0d\u65b9\u3001\u7121\u79c1\u5949\u737b\u3001\u6210\u719f\u7406\u6027\u3001\u60c5\u611f\u6df1\u6c89',\n                    suggestions: '\u5b78\u7fd2\u9069\u7576\u8868\u9054\u60c5\u611f\uff0c\u52c7\u6562\u9760\u8fd1\uff0c\u4e0d\u8981\u7e3d\u662f\u4fdd\u6301\u8ddd\u96e2\u3002',\n                    scores: { \u5c0a\u91cd\u5ea6: 90, \u72a7\u7272\u7cbe\u795e: 85, \u5167\u6582\u5ea6: 95, \u89aa\u5bc6\u5ea6: 45, \u8868\u9054\u529b: 40 }\n                },\n                'C': {\n                    title: 'C\u578b - \u611b\u7684\u57f9\u690d\u8005',\n                    description: '\u4f60\u4e0d\u76f8\u4fe1\u611b\u53ef\u4ee5\u9577\u4e45\u4fdd\u6eab\uff0c\u537b\u76f8\u4fe1\u81ea\u5df1\u53ef\u4ee5\u57f9\u690d\u51fa\u8301\u58ef\u7684\u611b\uff0c\u81ea\u4fe1\u5230\u6709\u4e9b\u81ea\u8ca0\u7684\u7a0b\u5ea6\u3002\u4f60\u611b\u7684\u65b9\u5f0f\u591a\u5c11\u6709\u4e9b\u4e00\u5ec2\u60c5\u9858\uff0c\u4e0d\u904e\u52d5\u6a5f\u537b\u7121\u53ef\u6311\u5254\uff0c\u65b9\u5f0f\u4e5f\u5341\u5206\u6eab\u548c\u3002\u7121\u8ad6\u662f\u82b1\u8349\u9084\u662f\u60c5\u4eba\uff0c\u4f60\u90fd\u5e0c\u671b\u80fd\u4ee5\u81ea\u5df1\u7684\u65b9\u5f0f\u53bb\u4fc3\u6210\u5c0d\u65b9\u5065\u5eb7\u6210\u9577\u3002\u4f60\u5728\u6f5b\u610f\u8b58\u4e2d\u8a8d\u70ba\u5c0d\u65b9\u96e2\u958b\u4f60\u7684\u611b\u5c31\u4e0d\u6703\u5e78\u798f\u3002',\n                    strengths: '\u5145\u6eff\u8010\u5fc3\u3001\u5584\u65bc\u7d93\u71df\u3001\u6a02\u65bc\u4ed8\u51fa\u3001\u7d30\u5fc3\u9ad4\u8cbc',\n                    suggestions: '\u5b78\u7fd2\u63a5\u53d7\u5c0d\u65b9\u7684\u672c\u4f86\u9762\u76ee\uff0c\u57f9\u990a\u96d9\u5411\u4ea4\u6d41\u3002',\n                    scores: { \u57f9\u80b2\u529b: 90, \u8010\u5fc3\u5ea6: 85, \u638c\u63a7\u5ea6: 65, \u63a5\u7d0d\u5ea6: 55, \u4fe1\u4efb\u5ea6: 60 }\n                },\n                'D': {\n                    title: 'D\u578b - \u611b\u7684\u63a0\u596a\u8005',\n                    description: '\u559c\u6b61\u4e00\u6a23\u6771\u897f\u4f46\u7121\u6cd5\u5230\u624b\uff0c\u4e7e\u8106\u5c07\u5b83\u6bc0\u6ec5\u3002\u4f60\u662f\u5c08\u5236\u7684\u611b\u7684\u66b4\u541b\uff0c\u4e0d\u80fd\u5bb9\u5fcd\u5c0d\u65b9\u7684\u80cc\u53db\u3002\u800c\u4e14\u4f60\u6709\u96b1\u542b\u7684\u5b8c\u7f8e\u4e3b\u7fa9\u50be\u5411\uff0c\u4e00\u65e6\u88ab\u611b\u7684\u6771\u897f\u6709\u4e86\u6b98\u7f3a\uff0c\u4f60\u4e5f\u8a31\u6703\u7522\u751f\u6bc0\u6ec5\u5c0d\u65b9\u7684\u60f3\u6cd5\u3002\u96d6\u7136\u52d5\u6a5f\u662f\u70ba\u4e86\u4fdd\u8b77\u5c0d\u65b9\u7684\u5b8c\u7f8e\uff0c\u4f46\u4f60\u5f9e\u6c92\u60f3\u904e\u81ea\u5df1\u7684\u65b9\u5f0f\u662f\u5426\u80fd\u4ee4\u5c0d\u65b9\u5e78\u798f\u3002',\n                    strengths: '\u71b1\u60c5\u5f37\u70c8\u3001\u8ffd\u6c42\u5b8c\u7f8e\u3001\u57f7\u8457\u5c08\u6ce8\u3001\u611b\u6068\u5206\u660e',\n                    suggestions: '\u5b78\u7fd2\u63a5\u7d0d\u4e0d\u5b8c\u7f8e\uff0c\u7406\u89e3\u611b\u662f\u7d66\u4e88\u81ea\u7531\u800c\u975e\u4f54\u6709\u3002',\n                    scores: { \u4f54\u6709\u617e: 95, \u6fc0\u60c5\u5ea6: 90, \u63a7\u5236\u617e: 85, \u5305\u5bb9\u5ea6: 30, \u4fe1\u4efb\u5ea6: 35 }\n                }\n            };\n            \n            const result = results[type];\n            \n            \/\/ \u5207\u63db\u5230\u7d50\u679c\u9801\n            this.quizSection.classList.add('hidden');\n            this.resultSection.classList.remove('hidden');\n            \n            \/\/ \u66f4\u65b0\u7d50\u679c\u5167\u5bb9\n            this.container.querySelector('[data-result-title]').textContent = result.title;\n            this.container.querySelector('[data-result-description]').innerHTML = `\n                <p>${result.description}<\/p>\n            `;\n            this.container.querySelector('[data-strengths]').textContent = result.strengths;\n            this.container.querySelector('[data-suggestions]').textContent = result.suggestions;\n            \n            \/\/ \u751f\u6210\u500b\u6027\u5316\u5efa\u8b70\n            const traits = this.answerDetails.map(a => a.trait);\n            const personalizedAdvice = this.generatePersonalizedAdvice(type, traits);\n            \n            const adviceContent = this.container.querySelector('[data-advice-content]');\n            adviceContent.innerHTML = personalizedAdvice.map(advice => \n                `<div class=\"advice-item\">${advice}<\/div>`\n            ).join('');\n            \n            \/\/ \u7e6a\u88fd\u5716\u8868\n            this.drawChart(result.scores);\n            \n            this.scrollToTop();\n        }\n        \n        drawChart(scores) {\n            \/\/ \u92b7\u6bc0\u820a\u5716\u8868\n            if (this.chartInstance) {\n                this.chartInstance.destroy();\n            }\n            \n            const ctx = document.getElementById('resultChart9').getContext('2d');\n            \n            this.chartInstance = new Chart(ctx, {\n                type: 'radar',\n                data: {\n                    labels: Object.keys(scores),\n                    datasets: [{\n                        label: '\u611b\u60c5\u7279\u8cea\u5206\u6790',\n                        data: Object.values(scores),\n                        fill: true,\n                        backgroundColor: 'rgba(86, 204, 178, 0.15)',\n                        borderColor: 'rgba(86, 204, 178, 1)',\n                        pointBackgroundColor: 'rgba(86, 204, 178, 1)',\n                        pointBorderColor: '#fff',\n                        pointHoverBackgroundColor: '#fff',\n                        pointHoverBorderColor: 'rgba(86, 204, 178, 1)',\n                        borderWidth: 2,\n                        pointRadius: 5,\n                        pointHoverRadius: 7\n                    }]\n                },\n                options: {\n                    responsive: true,\n                    maintainAspectRatio: false,\n                    plugins: {\n                        legend: {\n                            display: false\n                        },\n                        tooltip: {\n                            backgroundColor: 'rgba(0, 0, 0, 0.8)',\n                            titleFont: {\n                                size: 16\n                            },\n                            bodyFont: {\n                                size: 14\n                            },\n                            padding: 12,\n                            callbacks: {\n                                label: function(context) {\n                                    return context.raw + '%';\n                                }\n                            }\n                        }\n                    },\n                    scales: {\n                        r: {\n                            beginAtZero: true,\n                            max: 100,\n                            min: 0,\n                            ticks: {\n                                stepSize: 20,\n                                font: {\n                                    size: 11\n                                },\n                                color: '#666'\n                            },\n                            pointLabels: {\n                                font: {\n                                    size: 16,\n                                    weight: '600'\n                                },\n                                color: '#2c3e50'\n                            },\n                            grid: {\n                                color: 'rgba(0, 0, 0, 0.08)'\n                            }\n                        }\n                    }\n                }\n            });\n        }\n        \n        restartQuiz() {\n            \/\/ \u91cd\u7f6e\u72c0\u614b\n            this.currentQuestion = 1;\n            this.answers = [];\n            this.answerDetails = [];\n            \n            \/\/ \u92b7\u6bc0\u5716\u8868\n            if (this.chartInstance) {\n                this.chartInstance.destroy();\n                this.chartInstance = null;\n            }\n            \n            \/\/ \u5207\u63db\u9801\u9762\n            this.resultSection.classList.add('hidden');\n            this.introSection.classList.remove('hidden');\n            \n            this.scrollToTop();\n        }\n        \n        scrollToTop() {\n            const quizTop = this.container.offsetTop;\n            window.scrollTo({\n                top: quizTop - 20,\n                behavior: 'smooth'\n            });\n        }\n    }\n    \n    \/\/ \u521d\u59cb\u5316\u6e2c\u9a57\n    document.addEventListener('DOMContentLoaded', () => {\n        new LoveQuiz();\n    });\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u8fd9\u4e09\u79cd\u6210\u5206\u76f8\u4e92\u7ec4\u5408\uff0c\u5c31\u4ea7\u751f\u4e86\u4e0d\u540c\u7684\u7231\u7684\u65b9\u5f0f\uff0c\u6bd4\u5982\u53cb\u8c0a\u4e4b\u7231\u3001\u6d6a\u6f2b\u4e4b\u7231\u3001\u611a\u7231\u3001\u7a7a\u7231\u7b49\u7b49\u3002\u4f60\u7684\u7231\u60c5\u662f\u4ec0\u4e48\u6837\u7684\u5462\uff1f\u8bf7\u4ece\u7b2c\u4e00\u9898\u5f00\u59cb\uff0c\u6309\u6307\u793a\u524d\u8fdb\uff0c\u5c31\u53ef\u4ee5\u5f97\u5230\u7b54\u6848\u3002<\/p>","protected":false},"author":19,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"narrow-width-container","site-content-style":"unboxed","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[167,178],"tags":[],"class_list":["post-2721","post","type-post","status-publish","format-standard","hentry","category-personality","category-love"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2721","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=2721"}],"version-history":[{"count":1,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2721\/revisions"}],"predecessor-version":[{"id":10683,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2721\/revisions\/10683"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2721"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2721"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}