{"id":2478,"date":"2023-10-15T10:02:54","date_gmt":"2023-10-15T02:02:54","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2478"},"modified":"2025-08-14T03:08:53","modified_gmt":"2025-08-13T19:08:53","slug":"learn-love-hacks","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/learn-love-hacks","title":{"rendered":"\u5c0f\u6d4b\u9a8c\uff1a\u4f60\u5e94\u8be5\u5b66\u90a3\u4e9b\u604b\u7231\u9ed1\u79d1\u6280\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    <!-- CSS \u6a23\u5f0f -->\n    <style>\n        :root {\n            --primary-color: #7c3aed;\n            --secondary-color: #a78bfa;\n            --accent-color: #fbbf24;\n            --success-color: #10b981;\n            --text-dark: #1f2937;\n            --text-light: #6b7280;\n            --bg-light: #faf5ff;\n            --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n        }\n\n        body {\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n            color: var(--text-dark);\n            line-height: 1.6;\n        }\n\n        .quiz-container {\n            min-height: 100vh;\n            padding: 2rem 1rem;\n        }\n\n        .fade-in {\n            animation: fadeIn 0.5s ease-in;\n        }\n\n        @keyframes fadeIn {\n            from { opacity: 0; transform: translateY(10px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n\n        \/* \u5f15\u5c0e\u9801\u6a23\u5f0f *\/\n        #quizintro9 {\n            background: linear-gradient(135deg, var(--bg-light) 0%, #fff 100%);\n        }\n\n        .intro-card {\n            background: white;\n            border-radius: 24px;\n            box-shadow: var(--card-shadow);\n            padding: 3rem 2rem;\n            max-width: 800px;\n            margin: 0 auto;\n        }\n\n        .intro-title {\n            font-size: 2.5rem;\n            font-weight: 700;\n            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            margin-bottom: 1rem;\n        }\n\n        .intro-subtitle {\n            font-size: 1.25rem;\n            color: var(--text-light);\n            margin-bottom: 2rem;\n        }\n\n        .feature-icon {\n            width: 80px;\n            height: 80px;\n            background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin: 0 auto 1rem;\n            box-shadow: 0 10px 25px -5px rgba(124, 58, 237, 0.3);\n        }\n\n        .feature-icon i {\n            font-size: 2rem;\n            color: white;\n        }\n\n        .btn-start {\n            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n            color: white;\n            border: none;\n            padding: 1rem 3rem;\n            font-size: 1.25rem;\n            border-radius: 50px;\n            transition: all 0.3s ease;\n            box-shadow: 0 10px 25px -5px rgba(124, 58, 237, 0.3);\n        }\n\n        .btn-start:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 15px 35px -5px rgba(124, 58, 237, 0.4);\n            color: white;\n        }\n\n        \/* \u6e2c\u9a57\u9801\u6a23\u5f0f *\/\n        .quiz-card {\n            background: white;\n            border-radius: 20px;\n            box-shadow: var(--card-shadow);\n            padding: 2.5rem 2rem;\n            max-width: 700px;\n            margin: 0 auto;\n        }\n\n        .quiz-question {\n            font-size: 22px;\n            font-weight: bold;\n            color: var(--text-dark);\n            margin-bottom: 2rem;\n        }\n\n        .option-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n            gap: 1.5rem;\n            margin-bottom: 2rem;\n        }\n\n        .option-btn {\n            background: white;\n            border: 2px solid #e5e7eb;\n            border-radius: 16px;\n            padding: 1.5rem;\n            transition: all 0.3s ease;\n            cursor: pointer;\n            min-height: 160px;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            font-size: 18px;\n            color: var(--text-dark);\n        }\n\n        .option-btn:hover {\n            border-color: var(--secondary-color);\n            background: var(--bg-light);\n            transform: translateY(-2px);\n            box-shadow: var(--card-shadow);color: var(--text-dark);\n        }\n\n        .option-btn.selected {\n            border-color: var(--primary-color);\n            background: var(--bg-light);\n        }\n\n        .option-img {\n            width: 100%;\n            max-width: 75px;\n            height: auto;\n            margin-bottom: 1rem;\n            border-radius: 8px;\n        }\n\n        .btn-prev {\n            background: #f3f4f6;\n            color: var(--text-dark);\n            border: none;\n            padding: 0.75rem 2rem;\n            font-size: 1.1rem;\n            border-radius: 50px;\n            transition: all 0.3s ease;\n        }\n\n        .btn-prev:hover {\n            background: #e5e7eb;\n            color: var(--text-dark);\n        }\n\n        \/* \u7d50\u679c\u9801\u6a23\u5f0f *\/\n        .result-card {\n            background: white;\n            border-radius: 24px;\n            box-shadow: var(--card-shadow);\n            padding: 3rem 2rem;\n            max-width: 800px;\n            margin: 0 auto;\n        }\n\n        .result-title {\n            font-size: 2rem;\n            font-weight: 700;\n            color: var(--primary-color);\n            margin-bottom: 1.5rem;\n        }\n\n        .result-subtitle {\n            font-size: 1.5rem;\n            font-weight: 600;\n            color: var(--text-dark);\n            margin-bottom: 1rem;\n        }\n\n        .result-description {\n            font-size: 1.125rem;\n            color: var(--text-light);\n            line-height: 1.8;\n            margin-bottom: 2rem;\n        }\n\n        .btn-restart {\n            background: linear-gradient(135deg, var(--success-color), #34d399);\n            color: white;\n            border: none;\n            padding: 1rem 3rem;\n            font-size: 1.25rem;\n            border-radius: 50px;\n            transition: all 0.3s ease;\n            box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.3);\n        }\n\n        .btn-restart:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 15px 35px -5px rgba(16, 185, 129, 0.4);\n            color: white;\n        }\n\n        .chart-container {\n            position: relative;\n            height: 300px;\n            margin: 2rem 0;\n        }\n\n        @media (max-width: 768px) {\n            .intro-title {\n                font-size: 2rem;\n            }\n            \n            .option-grid {\n                grid-template-columns: 1fr;\n            }\n            \n            .quiz-question {\n                font-size: 20px;\n            }\n        }\n    <\/style>\n\n    <!-- HTML \u7d50\u69cb -->\n    <div class=\"quiz-container\">\n        <!-- \u5f15\u5c0e\u9801 -->\n        <section id=\"quizintro9\" data-page=\"intro9\" class=\"fade-in\">\n            <div class=\"intro-card\">\n                <h2 class=\"intro-title text-center\">\u4f60\u61c9\u8a72\u5b78\u54ea\u4e9b\u6200\u611b\u9ed1\u79d1\u6280\uff1f<\/h2>\n                <p class=\"intro-subtitle text-center\">\u63ed\u958b\u5c08\u5c6c\u65bc\u4f60\u7684\u611b\u60c5\u5236\u52dd\u79d8\u8a23<\/p>\n                \n                <div class=\"row mb-4\">\n                    <div class=\"col-md-4 mb-3\">\n                        <div class=\"text-center\">\n                            <div class=\"feature-icon\">\n                                <i class=\"bi bi-heart-pulse-fill\"><\/i>\n                            <\/div>\n                            <h5 class=\"fw-bold\">\u6d1e\u5bdf\u5167\u5fc3<\/h5>\n                            <p class=\"text-muted\">\u6df1\u5165\u4e86\u89e3\u4f60\u7684\u6200\u611b\u6a21\u5f0f<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"col-md-4 mb-3\">\n                        <div class=\"text-center\">\n                            <div class=\"feature-icon\">\n                                <i class=\"bi bi-magic\"><\/i>\n                            <\/div>\n                            <h5 class=\"fw-bold\">\u5c08\u5c6c\u6280\u5de7<\/h5>\n                            <p class=\"text-muted\">\u767c\u73fe\u6700\u9069\u5408\u4f60\u7684\u6200\u611b\u7b56\u7565<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"col-md-4 mb-3\">\n                        <div class=\"text-center\">\n                            <div class=\"feature-icon\">\n                                <i class=\"bi bi-stars\"><\/i>\n                            <\/div>\n                            <h5 class=\"fw-bold\">\u63d0\u5347\u9b45\u529b<\/h5>\n                            <p class=\"text-muted\">\u638c\u63a7\u60c5\u611f\u8d70\u5411\u7684\u95dc\u9375<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <p class=\"lead mb-4\">\u6200\u611b\u4e5f\u6709\u9ed1\u79d1\u6280\uff01\u76f8\u4fe1\u807d\u5230\u9019\u7a2e\u7406\u8ad6\u4f60\u6703\u611f\u5230\u975e\u5e38\u9a5a\u8a1d\uff0c\u4f46\u4e8b\u5be6\u662f\uff0c\u5c0e\u81f4\u4f60\u5c62\u6b21\u6200\u611b\u5931\u6557\u7684\u539f\u56e0\u53ef\u80fd\u6b63\u662f\u56e0\u70ba\u4f60\u4e0d\u61c2\u5f97\u5c6c\u65bc\u81ea\u5df1\u7684\u611b\u60c5\u9ed1\u79d1\u6280\u3002<\/p>\n                \n                <p class=\"mb-4\">\u4e0d\u60f3\u518d\u5728\u60c5\u611f\u7684\u9053\u8def\u4e0a\u8d70\u5f4e\u8def\uff0c\u5e0c\u671b\u80fd\u5920\u638c\u63a7\u60c5\u611f\u8d70\u5411\u55ce\uff1f\u8b93\u6211\u5011\u900f\u904e\u4e00\u500b\u7c21\u55ae\u7684\u6e2c\u9a57\uff0c\u627e\u51fa\u6700\u9069\u5408\u4f60\u7684\u6200\u611b\u6280\u5de7\uff01<\/p>\n                \n                <div class=\"text-center\">\n                    <button class=\"btn btn-primary btn-start\" data-action=\"start-quiz\">\n                        \u5f00\u59cb\u6d4b\u9a8c <i class=\"bi bi-arrow-right-circle ms-2\"><\/i>\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- \u6e2c\u9a57\u9801 -->\n        <section id=\"quizmain9\" data-page=\"quiz9\" class=\"d-none\">\n            <div class=\"quiz-card\">\n                <h2 class=\"text-center mb-4\">\u6200\u611b\u9ed1\u79d1\u6280\u6e2c\u9a57<\/h2>\n                \n                <div class=\"quiz-content\">\n                    <h3 class=\"quiz-question\">\u5047\u8a2d\u6b64\u6642\u4f60\u53e3\u6e34\u96e3\u8010\uff0c\u4f60\u6703\u9078\u4e0b\u5716\u4e2d\u7684\u54ea\u4e00\u74f6\u98f2\u6599\u4f86\u559d\uff1f<\/h3>\n                    \n                    <div class=\"option-grid\">\n                        <button class=\"option-btn\" data-option=\"1\">\n                            <img decoding=\"async\" src=\"https:\/\/xinliceyan.org\/wp-content\/uploads\/2025\/08\/4pingkatongyinliang-1.png\" alt=\"\u98f2\u6599\u9078\u98051\" class=\"option-img\">\n                            <span>\u9078\u9805 1<\/span>\n                        <\/button>\n                        <button class=\"option-btn\" data-option=\"2\">\n                            <img decoding=\"async\" src=\"https:\/\/xinliceyan.org\/wp-content\/uploads\/2025\/08\/4pingkatongyinliang-2.png\" alt=\"\u98f2\u6599\u9078\u98052\" class=\"option-img\">\n                            <span>\u9078\u9805 2<\/span>\n                        <\/button>\n                        <button class=\"option-btn\" data-option=\"3\">\n                            <img decoding=\"async\" src=\"https:\/\/xinliceyan.org\/wp-content\/uploads\/2025\/08\/4pingkatongyinliang-3.png\" alt=\"\u98f2\u6599\u9078\u98053\" class=\"option-img\">\n                            <span>\u9078\u9805 3<\/span>\n                        <\/button>\n                        <button class=\"option-btn\" data-option=\"4\">\n                            <img decoding=\"async\" src=\"https:\/\/xinliceyan.org\/wp-content\/uploads\/2025\/08\/4pingkatongyinliang-4.png\" alt=\"\u98f2\u6599\u9078\u98054\" class=\"option-img\">\n                            <span>\u9078\u9805 4<\/span>\n                        <\/button>\n                    <\/div>\n                    \n                    <div class=\"text-center mt-3\">\n                        <button class=\"btn btn-prev d-none\" data-action=\"prev-question\">\n                            <i class=\"bi bi-chevron-left me-2\"><\/i>\u4e0a\u4e00\u9898\n                        <\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- \u7d50\u679c\u9801 -->\n        <section id=\"quizresult9\" data-page=\"result9\" class=\"d-none\">\n            <div class=\"result-card\">\n                <h2 class=\"result-title text-center\">\u6d4b\u9a8c\u7ed3\u679c<\/h2>\n                \n                <div class=\"result-content\">\n                    <div class=\"text-center mb-4\">\n                        <div class=\"feature-icon mx-auto\">\n                            <i class=\"bi bi-trophy-fill\"><\/i>\n                        <\/div>\n                    <\/div>\n                    \n                    <h3 class=\"result-subtitle text-center\" id=\"result-title\"><\/h3>\n                    \n                    <div class=\"chart-container\">\n                        <canvas id=\"resultChart\"><\/canvas>\n                    <\/div>\n                    \n                    <p class=\"result-description\" id=\"result-description\"><\/p>\n                    \n                    <div class=\"text-center mt-4\">\n                        <button class=\"btn btn-restart\" 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            <\/div>\n        <\/section>\n    <\/div>\n\n    <!-- JavaScript -->\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.js\"><\/script>\n    <script>\n        (function() {\n            'use strict';\n\n            class LoveQuiz {\n                constructor() {\n                    this.currentPage = 'intro9';\n                    this.selectedOption = null;\n                    this.chartInstance = null;\n                    \n                    \/\/ \u5feb\u53d6 DOM \u5143\u7d20\n                    this.pages = {\n                        intro: document.getElementById('quizintro9'),\n                        quiz: document.getElementById('quizmain9'),\n                        result: document.getElementById('quizresult9')\n                    };\n                    \n                    this.results = {\n                        1: {\n                            title: '\u5e73\u5e38\u5fc3',\n                            icon: 'bi-balloon-heart',\n                            description: '\u7528\u5e73\u5e38\u5fc3\u53bb\u5c0d\u5f85\u5c0d\u65b9\uff0c\u6200\u611b\u6642\u624d\u66f4\u5bb9\u6613\u53d6\u52dd\u3002\u7576\u4f60\u9762\u5c0d\u5c0d\u65b9\u7684\u6642\u5019\uff0c\u662f\u5426\u7e3d\u6703\u611f\u5230\u7dca\u5f35\uff0c\u64d4\u5fc3\u81ea\u5df1\u8868\u73fe\u4e0d\u5920\u597d\uff1f\u8d8a\u662f\u62b1\u6709\u9019\u7a2e\u5fc3\u614b\uff0c\u8868\u660e\u5728\u4f60\u5fc3\u76ee\u4e2d\u81ea\u5df1\u548c\u5c0d\u65b9\u7684\u5730\u4f4d\u662f\u4e0d\u5c0d\u7b49\u7684\u3002\u5169\u500b\u5730\u4f4d\u4e0d\u5c0d\u7b49\u7684\u4eba\u600e\u9ebc\u80fd\u5920\u5766\u7136\u76f8\u611b\u5462\uff1f\u7576\u4f60\u5b78\u6703\u7528\u5e73\u5e38\u5fc3\u53bb\u9762\u5c0d\u5c0d\u65b9\u7684\u6642\u5019\uff0c\u624d\u80fd\u5920\u8868\u73fe\u5f97\u66f4\u597d\uff0c\u7d50\u679c\u4e5f\u66f4\u52a0\u5982\u4f60\u6240\u9858\u3002',\n                            scores: [85, 60, 70, 75]\n                        },\n                        2: {\n                            title: '\u534a\u6eff\u8db3',\n                            icon: 'bi-cup-straw',\n                            description: '\u5c0d\u65bc\u5c0d\u65b9\u7684\u8981\u6c42\uff0c\u9054\u5230\u4e00\u534a\u6eff\u8db3\u7684\u7a0b\u5ea6\u5c31\u53ef\u4ee5\u4e86\u3002\u767e\u5206\u767e\u7684\u6eff\u8db3\u5c0d\u65b9\uff0c\u4e0d\u50c5\u81ea\u5df1\u6703\u89ba\u5f97\u5f88\u7d2f\u5fc3\uff0c\u800c\u9019\u7a2e\u8a0e\u597d\u5f0f\u7684\u611b\uff0c\u4e5f\u672a\u5fc5\u80fd\u5920\u5f97\u5230\u5c0d\u65b9\u7684\u6b23\u8cde\u3002\u5982\u679c\u8b93\u53e6\u4e00\u534a\u8655\u65bc\u534a\u6eff\u8db3\u7684\u72c0\u614b\u4e2d\uff0c\u6216\u8a31\u4f60\u66f4\u6709\u638c\u63a7\u5c40\u52e2\u7684\u4e3b\u52d5\u6b0a\u3002\u4e0d\u8981\u7e3d\u60f3\u8457\u52aa\u529b\u5730\u9054\u5230\u5c0d\u65b9\u7684\u8981\u6c42\uff0c\u505a\u597d\u4f60\u81ea\u5df1\uff0c\u8b93\u5c0d\u65b9\u611b\u4e0a\u81ea\u5c0a\u81ea\u611b\u7684\u4f60\u3002',\n                            scores: [70, 90, 65, 80]\n                        },\n                        3: {\n                            title: '\u8003\u8010\u5fc3',\n                            icon: 'bi-hourglass-split',\n                            description: '\u5982\u679c\u5c0d\u65b9\u771f\u7684\u91cd\u8996\u4f60\uff0c\u662f\u80af\u82b1\u9ede\u8010\u5fc3\u5728\u9019\u6bb5\u95dc\u4fc2\u4e0a\u7684\u3002\u5076\u723e\u8003\u9a57\u4e00\u4e0b\u5c0d\u65b9\u7684\u8010\u5fc3\uff0c\u4e5f\u662f\u611b\u7684\u4e00\u7a2e\u624b\u6bb5\uff0c\u4e5f\u53ef\u4ee5\u7d66\u5f7c\u6b64\u4e00\u4e9b\u601d\u8003\u7684\u6642\u9593\uff0c\u8b93\u5c0d\u65b9\u78ba\u8a8d\u81ea\u5df1\u5c0d\u4f60\u7684\u611f\u60c5\u7a76\u7adf\u6709\u591a\u6df1\u3002\u5728\u8003\u9a57\u8010\u5fc3\u7684\u540c\u6642\uff0c\u4f60\u6703\u660e\u767d\uff0c\u9019\u4e0d\u6703\u6bc0\u6389\u9019\u6bb5\u95dc\u4fc2\uff0c\u5b83\u6703\u8b93\u5f7c\u6b64\u66f4\u660e\u78ba\u9019\u6bb5\u95dc\u4fc2\u7684\u91cd\u8981\u6027\uff0c\u4e5f\u6703\u82b1\u66f4\u591a\u7684\u6642\u9593\u53bb\u7d93\u71df\u9019\u6bb5\u95dc\u4fc2\u3002',\n                            scores: [75, 70, 95, 65]\n                        },\n                        4: {\n                            title: '\u626e\u767d\u5154',\n                            icon: 'bi-emoji-smile',\n                            description: '\u8207\u5176\u7576\u7375\u8c79\u4e0d\u5982\u7576\u767d\u5154\uff0c\u61c2\u5f97\u9019\u500b\u9053\u7406\uff0c\u5728\u611f\u60c5\u4e2d\u4f60\u6703\u8868\u73fe\u5f97\u66f4\u81ea\u5982\u3002\u6210\u70ba\u5c0d\u65b9\u7684\u7375\u7269\uff0c\u6216\u8a31\u60c5\u611f\u8da8\u52e2\u7684\u767c\u5c55\u66f4\u6709\u5229\u65bc\u4f60\u3002\u96d6\u7136\u611b\u60c5\u4e0d\u5fc5\u722d\u8f38\u8d0f\uff0c\u4f46\u4f60\u4e00\u5b9a\u4e0d\u60f3\u8b93\u81ea\u5df1\u6210\u70ba\u4e00\u500b\u59cb\u7d42\u8ffd\u5728\u5c0d\u65b9\u8eab\u5f8c\u7684\u8ddf\u96a8\u8005\u5427\u3002\u53ef\u4ee5\u8edf\u7cef\u4e00\u9ede\uff0c\u4e5f\u53ef\u4ee5\u5076\u723e\u8ce3\u840c\uff0c\u9069\u5ea6\u7684\u793a\u5f31\uff0c\u624d\u66f4\u5bb9\u6613\u8d0f\u5f97\u5c0d\u65b9\u7684\u73cd\u60dc\u3002',\n                            scores: [65, 75, 70, 90]\n                        }\n                    };\n                    \n                    this.init();\n                }\n                \n                init() {\n                    this.bindEvents();\n                }\n                \n                bindEvents() {\n                    \/\/ \u4f7f\u7528\u4e8b\u4ef6\u59d4\u8a17\n                    document.addEventListener('click', (e) => {\n                        const target = e.target.closest('[data-action], [data-option]');\n                        if (!target) return;\n                        \n                        if (target.dataset.action) {\n                            this.handleAction(target.dataset.action);\n                        } else if (target.dataset.option) {\n                            this.selectOption(target.dataset.option);\n                        }\n                    });\n                }\n                \n                handleAction(action) {\n                    switch(action) {\n                        case 'start-quiz':\n                            this.showPage('quiz');\n                            break;\n                        case 'prev-question':\n                            this.showPage('intro');\n                            break;\n                        case 'restart-quiz':\n                            this.restart();\n                            break;\n                    }\n                }\n                \n                selectOption(option) {\n                    \/\/ \u79fb\u9664\u4e4b\u524d\u7684\u9078\u4e2d\u72c0\u614b\n                    document.querySelectorAll('.option-btn').forEach(btn => {\n                        btn.classList.remove('selected');\n                    });\n                    \n                    \/\/ \u6dfb\u52a0\u9078\u4e2d\u72c0\u614b\n                    const selectedBtn = document.querySelector(`[data-option=\"${option}\"]`);\n                    selectedBtn.classList.add('selected');\n                    \n                    this.selectedOption = option;\n                    \n                    \/\/ \u5ef6\u9072\u986f\u793a\u7d50\u679c\n                    setTimeout(() => {\n                        this.showResult();\n                    }, 500);\n                }\n                \n                showPage(page) {\n                    \/\/ \u96b1\u85cf\u6240\u6709\u9801\u9762\n                    Object.values(this.pages).forEach(p => {\n                        p.classList.add('d-none');\n                    });\n                    \n                    \/\/ \u986f\u793a\u76ee\u6a19\u9801\u9762\n                    switch(page) {\n                        case 'intro':\n                            this.pages.intro.classList.remove('d-none');\n                            this.currentPage = 'intro9';\n                            break;\n                        case 'quiz':\n                            this.pages.quiz.classList.remove('d-none');\n                            this.currentPage = 'quiz9';\n                            break;\n                        case 'result':\n                            this.pages.result.classList.remove('d-none');\n                            this.currentPage = 'result9';\n                            break;\n                    }\n                    \n                    \/\/ \u6efe\u52d5\u5230\u9801\u9762\u9802\u90e8\n                    const targetElement = this.pages[page === 'intro' ? 'intro' : page === 'quiz' ? 'quiz' : 'result'];\n                    if (targetElement) {\n                        targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });\n                    }\n                }\n                \n                showResult() {\n                    const result = this.results[this.selectedOption];\n                    \n                    \/\/ \u66f4\u65b0\u7d50\u679c\u5167\u5bb9\n                    document.getElementById('result-title').textContent = `\u4f60\u7684\u6200\u611b\u9ed1\u79d1\u6280\uff1a${result.title}`;\n                    document.getElementById('result-description').textContent = result.description;\n                    \n                    \/\/ \u66f4\u65b0\u5716\u6a19\n                    const iconElement = document.querySelector('#quizresult9 .feature-icon i');\n                    iconElement.className = `bi ${result.icon}`;\n                    \n                    \/\/ \u986f\u793a\u7d50\u679c\u9801\n                    this.showPage('result');\n                    \n                    \/\/ \u5275\u5efa\u5716\u8868\n                    this.createChart(result);\n                }\n                \n                createChart(result) {\n                    \/\/ \u92b7\u6bc0\u4e4b\u524d\u7684\u5716\u8868\u5be6\u4f8b\n                    if (this.chartInstance) {\n                        this.chartInstance.destroy();\n                    }\n                    \n                    const ctx = document.getElementById('resultChart').getContext('2d');\n                    \n                    this.chartInstance = new Chart(ctx, {\n                        type: 'radar',\n                        data: {\n                            labels: ['\u81ea\u4fe1\u5ea6', '\u638c\u63a7\u529b', '\u8010\u5fc3\u503c', '\u9b45\u529b\u503c'],\n                            datasets: [{\n                                label: result.title,\n                                data: result.scores,\n                                backgroundColor: 'rgba(124, 58, 237, 0.2)',\n                                borderColor: 'rgba(124, 58, 237, 1)',\n                                borderWidth: 2,\n                                pointBackgroundColor: 'rgba(124, 58, 237, 1)',\n                                pointBorderColor: '#fff',\n                                pointHoverBackgroundColor: '#fff',\n                                pointHoverBorderColor: 'rgba(124, 58, 237, 1)'\n                            }]\n                        },\n                        options: {\n                            responsive: true,\n                            maintainAspectRatio: false,\n                            scales: {\n                                r: {\n                                    beginAtZero: true,\n                                    max: 100,\n                                    ticks: {\n                                        stepSize: 20\n                                    },\n                                    grid: {\n                                        color: 'rgba(0, 0, 0, 0.05)'\n                                    }\n                                }\n                            },\n                            plugins: {\n                                legend: {\n                                    display: false\n                                },\n                                tooltip: {\n                                    backgroundColor: 'rgba(0, 0, 0, 0.8)',\n                                    padding: 12,\n                                    displayColors: false,\n                                    callbacks: {\n                                        label: function(context) {\n                                            return context.label + ': ' + context.raw + '%';\n                                        }\n                                    }\n                                }\n                            }\n                        }\n                    });\n                }\n                \n                restart() {\n                    this.selectedOption = null;\n                    \n                    \/\/ \u6e05\u9664\u9078\u4e2d\u72c0\u614b\n                    document.querySelectorAll('.option-btn').forEach(btn => {\n                        btn.classList.remove('selected');\n                    });\n                    \n                    \/\/ \u92b7\u6bc0\u5716\u8868\n                    if (this.chartInstance) {\n                        this.chartInstance.destroy();\n                        this.chartInstance = null;\n                    }\n                    \n                    \/\/ \u56de\u5230\u5f15\u5c0e\u9801\n                    this.showPage('intro');\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>\u4e0d\u60f3\u518d\u5728\u60c5\u611f\u7684\u9053\u8def\u4e0a\u8d70\u5f2f\u8def\uff0c\u5e0c\u671b\u80fd\u591f\u638c\u63a7\u60c5\u611f\u8d70\u5411\uff0c\u6216\u8bb8\u4f60\u5f53\u5148\u4e86\u89e3\u4e00\u4e0b\u4f60\u8be5\u5b66\u4ec0\u4e48\u604b\u7231\u9ed1\u79d1\u6280\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":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[178,167],"tags":[],"class_list":["post-2478","post","type-post","status-publish","format-standard","hentry","category-love","category-personality"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2478","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=2478"}],"version-history":[{"count":3,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2478\/revisions"}],"predecessor-version":[{"id":10448,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2478\/revisions\/10448"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2478"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2478"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2478"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}