{"id":2484,"date":"2023-10-17T09:44:58","date_gmt":"2023-10-17T01:44:58","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2484"},"modified":"2025-08-15T21:15:46","modified_gmt":"2025-08-15T13:15:46","slug":"your-love-loves-you","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/your-love-loves-you","title":{"rendered":"\u5c0f\u6d4b\u9a8c\uff1a\u4f60\u7231\u7684\u4eba\u7231\u4f60\u5417\uff1f"},"content":{"rendered":"<!-- \u5f15\u5165Bootstrap 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<!-- HTML\u7d50\u69cb -->\n<main id=\"loveQuizContainer9\" class=\"container-fluid px-3 py-4\">\n    <!-- \u5f15\u5c0e\u9801 -->\n    <section id=\"quizintro9\" data-page=\"intro9\" class=\"row justify-content-center\">\n        <article class=\"col-12 col-md-8 col-lg-6\">\n            <header class=\"text-center mb-5\">\n                <h2 class=\"display-5 fw-bold mb-3\" style=\"color: #6B5B95; font-size: 2.5rem;\">\u4f60\u611b\u7684\u4eba\u611b\u4f60\u55ce\uff1f<\/h2>\n                <p class=\"lead text-muted fs-5\">\u63a2\u7d22\u611b\u60c5\u7684\u771f\u76f8\uff0c\u4e86\u89e3\u5c0d\u65b9\u7684\u5fc3\u610f<\/p>\n            <\/header>\n            \n            <div class=\"row g-4 mb-5\">\n                <div class=\"col-6\">\n                    <div class=\"text-center p-3 rounded-3 shadow-sm bg-white h-100 d-flex flex-column align-items-center justify-content-center\">\n                        <div class=\"rounded-circle bg-gradient p-3 mb-3\" style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;\">\n                            <i class=\"bi bi-heart-pulse-fill text-danger fs-2\"><\/i>\n                        <\/div>\n                        <h3 class=\"h5 fw-semibold\">\u6df1\u5ea6\u5206\u6790<\/h3>\n                        <p class=\"text-muted small mb-0\">\u7cbe\u6e96\u5256\u6790\u611b\u60c5\u72c0\u614b<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"col-6\">\n                    <div class=\"text-center p-3 rounded-3 shadow-sm bg-white h-100 d-flex flex-column align-items-center justify-content-center\">\n                        <div class=\"rounded-circle bg-gradient p-3 mb-3\" style=\"background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;\">\n                            <i class=\"bi bi-stars text-danger fs-2\"><\/i>\n                        <\/div>\n                        <h3 class=\"h5 fw-semibold\">\u4e13\u4e1a\u6d4b\u8bc4<\/h3>\n                        <p class=\"text-muted small mb-0\">\u5fc3\u7406\u5b78\u539f\u7406\u652f\u6490<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"col-6\">\n                    <div class=\"text-center p-3 rounded-3 shadow-sm bg-white h-100 d-flex flex-column align-items-center justify-content-center\">\n                        <div class=\"rounded-circle bg-gradient p-3 mb-3\" style=\"background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;\">\n                            <i class=\"bi bi-lightning-charge-fill text-danger fs-2\"><\/i>\n                        <\/div>\n                        <h3 class=\"h5 fw-semibold\">\u5feb\u901f\u6d4b\u8bd5<\/h3>\n                        <p class=\"text-muted small mb-0\">1\u5206\u9418\u5f97\u51fa\u7d50\u679c<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"col-6\">\n                    <div class=\"text-center p-3 rounded-3 shadow-sm bg-white h-100 d-flex flex-column align-items-center justify-content-center\">\n                        <div class=\"rounded-circle bg-gradient p-3 mb-3\" style=\"background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;\">\n                            <i class=\"bi bi-shield-check text-danger fs-2\"><\/i>\n                        <\/div>\n                        <h3 class=\"h5 fw-semibold\">\u9690\u79c1\u4fdd\u62a4<\/h3>\n                        <p class=\"text-muted small mb-0\">\u7d50\u679c\u50c5\u4f60\u53ef\u898b<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"card border-0 shadow-sm rounded-4 p-4 mb-4\" style=\"background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);\">\n                <p class=\"fs-5 mb-0 text-dark\">\u5e7e\u4e4e\u6240\u6709\u9677\u9032\u611b\u60c5\u7684\u4eba\uff0c\u90fd\u6703\u601d\u8003\u9019\u6a23\u4e00\u500b\u554f\u984c\uff1a\u5c0d\u65b9\u611b\u81ea\u5df1\u55ce\uff1f\u611b\u81ea\u5df1\u591a\u5c11\u5462\uff1f\u901a\u904e\u9019\u500b\u7c21\u55ae\u7684\u5fc3\u7406\u6e2c\u8a66\uff0c\u5e6b\u52a9\u4f60\u4e86\u89e3\u4f60\u611b\u7684\u4eba\u5c0d\u4f60\u7684\u611f\u60c5\u6df1\u5ea6\u3002<\/p>\n            <\/div>\n            \n            <div class=\"text-center\">\n                <button type=\"button\" class=\"btn btn-lg px-5 py-3 rounded-pill shadow-lg text-white fw-semibold\" \n                        style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; font-size: 1.2rem;\"\n                        data-action=\"start-quiz\">\n                    <i class=\"bi bi-play-circle me-2\"><\/i>\u5f00\u59cb\u6d4b\u8bd5\n                <\/button>\n            <\/div>\n        <\/article>\n    <\/section>\n    \n    <!-- \u6e2c\u9a57\u9801 -->\n    <section id=\"quizmain9\" data-page=\"quiz9\" class=\"row justify-content-center d-none\">\n        <article class=\"col-12 col-md-8 col-lg-6\">\n            <header class=\"text-center mb-4\">\n                <h2 class=\"h3 fw-bold\" style=\"color: #6B5B95;\">\u611b\u60c5\u52d5\u7269\u6e2c\u9a57<\/h2>\n            <\/header>\n            \n            <div class=\"card border-0 shadow rounded-4 p-4\">\n                <h3 class=\"fw-bold mb-4\" style=\"font-size: 22px; color: #333;\">\u4e00\u60f3\u5230\u7231\u7684\u4eba\uff0c\u4f60\u89c9\u5f97\u4e0b\u9762\u54ea\u79cd\u52a8\u7269\u548c\u4ed6\u6700\u76f8\u4f3c\uff1f<\/h3>\n                \n                <div class=\"d-grid gap-3\" data-quiz-options>\n                    <button type=\"button\" class=\"btn btn-outline-secondary text-start p-3 rounded-3 border-2 option-btn\" \n                            style=\"font-size: 18px; transition: all 0.3s ease;\" \n                            data-value=\"A\">\n                        <i class=\"bi bi-circle me-3\"><\/i>\u725b\ud83d\udc2e\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-outline-secondary text-start p-3 rounded-3 border-2 option-btn\" \n                            style=\"font-size: 18px; transition: all 0.3s ease;\" \n                            data-value=\"B\">\n                        <i class=\"bi bi-circle me-3\"><\/i>\u864e\ud83d\udc2f\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-outline-secondary text-start p-3 rounded-3 border-2 option-btn\" \n                            style=\"font-size: 18px; transition: all 0.3s ease;\" \n                            data-value=\"C\">\n                        <i class=\"bi bi-circle me-3\"><\/i>\u7f8a\ud83d\udc10\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-outline-secondary text-start p-3 rounded-3 border-2 option-btn\" \n                            style=\"font-size: 18px; transition: all 0.3s ease;\" \n                            data-value=\"D\">\n                        <i class=\"bi bi-circle me-3\"><\/i>\u99ac\ud83d\udc34\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-outline-secondary text-start p-3 rounded-3 border-2 option-btn\" \n                            style=\"font-size: 18px; transition: all 0.3s ease;\" \n                            data-value=\"E\">\n                        <i class=\"bi bi-circle me-3\"><\/i>\u8c6c\ud83d\udc37\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/article>\n    <\/section>\n    \n    <!-- \u7d50\u679c\u9801 -->\n    <section id=\"quizresult9\" data-page=\"result9\" class=\"row justify-content-center d-none\">\n        <article class=\"col-12 col-md-10 col-lg-8\">\n            <header class=\"text-center mb-4\">\n                <h2 class=\"h3 fw-bold\" style=\"color: #6B5B95;\">\u4f60\u7684\u611b\u60c5\u5206\u6790\u7d50\u679c<\/h2>\n            <\/header>\n            \n            <div class=\"card border-0 shadow rounded-4 p-4 mb-4\">\n                <h3 class=\"h4 fw-bold mb-3 text-center\" style=\"color: #764ba2;\" data-result-title><\/h3>\n                <div class=\"row align-items-center\">\n                    <div class=\"col-12 col-md-6 mb-4 mb-md-0\">\n                        <div class=\"d-flex justify-content-center\">\n                            <canvas id=\"loveChart9\" style=\"max-width: 300px; max-height: 300px;\"><\/canvas>\n                        <\/div>\n                    <\/div>\n                    <div class=\"col-12 col-md-6\">\n                        <div class=\"p-3\" data-result-content><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"card border-0 shadow-sm rounded-4 p-4 mb-4\" style=\"background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);\">\n                <h4 class=\"h5 fw-semibold mb-3\">\ud83d\udca1 \u611b\u60c5\u5efa\u8b70<\/h4>\n                <p class=\"mb-0\" data-result-advice><\/p>\n            <\/div>\n            \n            <div class=\"text-center\">\n                <button type=\"button\" class=\"btn btn-lg px-5 py-3 rounded-pill shadow text-white fw-semibold\" \n                        style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none;\"\n                        data-action=\"restart-quiz\">\n                    <i class=\"bi bi-arrow-clockwise me-2\"><\/i>\u91cd\u65b0\u6d4b\u8bd5\n                <\/button>\n            <\/div>\n        <\/article>\n    <\/section>\n<\/main>\n\n<!-- CSS\u6a23\u5f0f -->\n<style>\n#loveQuizContainer9 {\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Microsoft JhengHei\", \"\u5fae\u8edf\u6b63\u9ed1\u9ad4\", sans-serif;\n    min-height: auto;\n    background: transparent;\n}\n\n#loveQuizContainer9 .option-btn {\n    background-color: #fff;\n    border-color: #e0e0e0;\n    color: #333;\n}\n\n#loveQuizContainer9 .option-btn:hover {\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n    border-color: #667eea;\n    color: #fff;\n    transform: translateY(-2px);\n    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);\n}\n\n#loveQuizContainer9 .option-btn.selected {\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n    border-color: #667eea;\n    color: #fff;\n}\n\n#loveQuizContainer9 .option-btn.selected i {\n    display: inline-block;\n}\n\n#loveQuizContainer9 .option-btn i.bi-circle {\n    transition: all 0.3s ease;\n}\n\n#loveQuizContainer9 .option-btn.selected i.bi-circle::before {\n    content: \"\\F26A\";\n    font-weight: bold;\n}\n\n#loveQuizContainer9 section {\n    animation: fadeIn 0.5s ease-in-out;\n}\n\n@keyframes fadeIn {\n    from {\n        opacity: 0;\n        transform: translateY(20px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n@media (max-width: 768px) {\n    #loveQuizContainer9 .display-5 {\n        font-size: 2rem !important;\n    }\n    \n    #loveQuizContainer9 .lead {\n        font-size: 1.1rem !important;\n    }\n}\n<\/style>\n\n<!-- JavaScript -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n<script>\n(function() {\n    'use strict';\n    \n    class LoveQuiz {\n        constructor() {\n            this.container = document.getElementById('loveQuizContainer9');\n            this.introPage = document.getElementById('quizintro9');\n            this.quizPage = document.getElementById('quizmain9');\n            this.resultPage = document.getElementById('quizresult9');\n            this.chartInstance = null;\n            this.selectedAnswer = null;\n            \n            this.results = {\n                'A': {\n                    title: '\u4e00\u822c\u611b',\n                    content: '\u725b\u4ee3\u8868\u4e8b\u696d\uff0c\u8aaa\u660e\u4f60\u611b\u7684\u4eba\u66f4\u6ce8\u91cd\u4ed6\u7684\u4e8b\u696d\uff0c\u57fa\u672c\u4e0a\u4e5f\u662f\u4e00\u500b\u5de5\u4f5c\u72c2\uff0c\u5c0d\u65bc\u751f\u6d3b\u4e5f\u662f\u4e00\u500b\u633a\u8e0f\u5be6\u7684\u4eba\u3002\u4ed6\u5c0d\u4f60\u4e5f\u4e0d\u662f\u4e0d\u611b\u5566\uff0c\u53ea\u4e0d\u904e\u6709\u66f4\u91cd\u8981\u7684\u4e8b\u60c5\u8981\u5be6\u73fe\u3002',\n                    advice: '\u4f60\u5982\u679c\u7cfe\u7e8f\u4e0d\u4f11\u53cd\u800c\u5bb9\u6613\u62db\u4f86\u4ed6\u7684\u8a0e\u53ad\u3002\u6240\u4ee5\u4f60\u5011\u76f8\u8655\u7684\u6642\u5019\uff0c\u4e0d\u59a8\u7d66\u4ed6\u591a\u4e00\u4e9b\u7684\u5bec\u5bb9\u8207\u9ad4\u8ad2\uff0c\u751a\u81f3\u53ef\u4ee5\u6210\u70ba\u4ed6\u7684\u5de6\u53f3\u624b\uff0c\u8b93\u4f60\u6210\u70ba\u4ed6\u4e8b\u696d\u7684\u4e00\u90e8\u5206\uff0c\u9019\u6a23\u66f4\u80fd\u52a0\u6df1\u4ed6\u5c0d\u4f60\u7684\u611b\u54e6\u3002',\n                    scores: { love: 60, career: 90, family: 70, self: 50, material: 40 }\n                },\n                'B': {\n                    title: '\u66f4\u611b\u4ed6\u81ea\u5df1',\n                    content: '\u864e\u4ee3\u8868\u81ea\u4fe1\uff0c\u4f60\u611b\u7684\u90a3\u500b\u4eba\uff0c\u6b63\u662f\u4e00\u500b\u633a\u6709\u81ea\u4fe1\u7684\u4eba\u3002\u53ea\u4e0d\u904e\uff0c\u5f80\u5f80\u81ea\u4fe1\u7684\u4eba\uff0c\u90fd\u6709\u4e00\u4e9b\u81ea\u8ca0\u8207\u81ea\u6200\uff0c\u6240\u4ee5\u4f60\u611b\u7684\u4eba\uff0c\u5f80\u5f80\u4e5f\u66f4\u611b\u4ed6\u81ea\u5df1\uff0c\u4ed6\u4eba\u6392\u5728\u5f8c\u9762\u3002',\n                    advice: '\u4e0d\u904e\u9019\u4e5f\u4e0d\u662f\u4ec0\u9ebc\u932f\uff0c\u73fe\u5728\u66f4\u611b\u81ea\u5df1\u6709\u4ec0\u9ebc\u932f\uff1f\u53ea\u4e0d\u904e\u5982\u679c\u4f60\u662f\u90a3\u7a2e\u9700\u8981\u767e\u5206\u767e\u611b\u60c5\u7684\u4eba\uff0c\u53ef\u80fd\u8ddf\u4ed6\u5bb9\u6613\u7522\u751f\u77db\u76fe\u548c\u885d\u7a81\u5566\u3002\u5982\u679c\u4f60\u5be6\u5728\u8981\u5e73\u8861\uff0c\u4e0d\u59a8\u4e5f\u5148\u611b\u81ea\u5df1\u5427\uff0c\u9019\u6a23\u4e0d\u7ba1\u6709\u6c92\u6709\u5f97\u5230\u4ed6\uff0c\u4f60\u90fd\u662f\u6700\u597d\u7684\u3002',\n                    scores: { love: 40, career: 70, family: 50, self: 95, material: 60 }\n                },\n                'C': {\n                    title: '\u5f88\u611b\u4f60',\n                    content: '\u7f8a\u4ee3\u8868\u611b\u60c5\uff0c\u56e0\u6b64\u9078\u64c7\u4e86\u9019\u500b\u7b54\u6848\u7684\u4f60\uff0c\u8981\u606d\u559c\u4f60\u5566\uff0c\u4f60\u611b\u7684\u4eba\u4e5f\u5f88\u611b\u4f60\u54e6\u3002\u5c0d\u65b9\u50cf\u7f8a\u4e00\u6a23\uff0c\u80fd\u70ba\u4e86\u4f60\u800c\u5949\u737b\u751a\u81f3\u72a7\u7272\u81ea\u5df1\u3002',\n                    advice: '\u9019\u6a23\u7684\u4eba\u4e0a\u54ea\u5152\u53bb\u627e\u54ea\uff0c\u5982\u679c\u4f60\u9084\u5728\u60f3\u8981\u8003\u9a57\u4ed6\uff0c\u90a3\u5c31\u6c92\u5fc5\u8981\u4e86\uff0c\u56e0\u70ba\u8003\u9a57\u591a\u662f\u50b7\u4eba\u7684\uff0c\u4e0d\u59a8\u5c0d\u4ed6\u6df1\u4fe1\u4e0d\u7591\u5427\uff0c\u4f60\u6700\u7d42\u6703\u5f97\u5230\u4f60\u60f3\u8981\u7684\u4e00\u5207\u7684\uff0c\u800c\u4ed6\u4e5f\u6703\u52aa\u529b\u8b93\u4f60\u904e\u4e0a\u6700\u5e78\u798f\u7684\u751f\u6d3b\uff0c\u8b93\u4f60\u6210\u70ba\u6700\u5e78\u798f\u7684\u4eba\u3002\u4e00\u76f4\u5bf5\u4f60\u611b\u4f60\u4fdd\u8b77\u4f60\u54e6\u3002',\n                    scores: { love: 95, career: 60, family: 80, self: 30, material: 50 }\n                },\n                'D': {\n                    title: '\u66f4\u611b\u5bb6',\n                    content: '\u99ac\u4ee3\u8868\u5bb6\u5ead\uff0c\u9019\u4e5f\u610f\u5473\u8457\u4f60\u611b\u8457\u7684\u90a3\u500b\u4eba\uff0c\u53ef\u80fd\u8207\u4f60\u5728\u6200\u611b\u7684\u6642\u5019\uff0c\u4e5f\u4e0d\u662f\u6c92\u6709\u4f60\uff0c\u53ea\u4e0d\u904e\u6703\u628a\u4ed6\u7684\u7236\u6bcd\u653e\u5728\u7b2c\u4e00\u4f4d\u3002',\n                    advice: '\u6240\u4ee5\u4f60\u5343\u842c\u4e0d\u8981\u554f\u4ed6\u300c\u6211\u548c\u4f60\u5abd\u540c\u6642\u6389\u9032\u6c34\u88e1\uff0c\u4f60\u5148\u6551\u8ab0\u300d\u9019\u6a23\u7684\u554f\u984c\u5566\uff0c\u56e0\u70ba\u4f60\u5f97\u5230\u7684\u7b54\u6848\u6703\u8b93\u4f60\u50b7\u5fc3\u96e3\u904e\u7684\u3002\u53ea\u8981\u4f60\u7262\u7262\u5730\u6293\u4f4f\u4ed6\uff0c\u4ed6\u6703\u5141\u8afe\u4f60\u4e00\u500b\u5bb6\u5ead\u7684\uff0c\u800c\u4e14\u6210\u5bb6\u4e4b\u5f8c\uff0c\u4ed6\u4e5f\u662f\u5c0d\u5bb6\u5ead\u5341\u5206\u8ca0\u8cac\u7684\u54e6\uff0c\u9019\u6a23\u5c31\u5920\u4e86\u5566\u3002',\n                    scores: { love: 70, career: 60, family: 95, self: 40, material: 45 }\n                },\n                'E': {\n                    title: '\u66f4\u611b\u9322',\n                    content: '\u8c6c\u4ee3\u8868\u91d1\u9322\uff0c\u7531\u6b64\u53ef\u898b\uff0c\u4f60\u611b\u8457\u7684\u9019\u500b\u4eba\uff0c\u4e26\u4e0d\u662f\u4e0d\u611b\u4f60\uff0c\u53ea\u4e0d\u904e\u4ed6\u66f4\u611b\u7684\u662f\u9322\u5566\uff0c\u4e5f\u6216\u8005\u8aaa\u4ed6\u66f4\u611b\u751f\u6d3b\u4e2d\u7684\u7269\u8cea\u4eab\u53d7\u5566\u3002',\n                    advice: '\u4e0d\u904e\u4f60\u4e5f\u89ba\u5f97\u6c92\u6709\u4ec0\u9ebc\uff0c\u56e0\u70ba\u4f60\u81ea\u5df1\u672c\u8eab\u4e5f\u662f\u611b\u9322\u7684\u50a2\u4f19\u54e6\uff0c\u53ea\u4e0d\u904e\u4f60\u89ba\u5f97\u5982\u679c\u4e00\u500b\u4eba\u611b\u9322\uff0c\u8981\u9760\u81ea\u5df1\u53bb\u52aa\u529b\u8cfa\u53d6\uff0c\u4e0d\u80fd\u4e0d\u52de\u800c\u7372\u3002\u6574\u9ad4\u4e0a\u770b\uff0c\u4f60\u611b\u7684\u4eba\u4e5f\u662f\u6bd4\u8f03\u6703\u751f\u6d3b\u7684\uff0c\u4f46\u662f\u4e5f\u5bb9\u6613\u79fb\u60c5\u5225\u6200\uff0c\u9019\u4e00\u9ede\u9084\u8981\u5c0f\u5fc3\u63d0\u9632\u4e00\u4e0b\u54e6\u3002',\n                    scores: { love: 50, career: 80, family: 60, self: 70, material: 95 }\n                }\n            };\n            \n            this.init();\n        }\n        \n        init() {\n            this.bindEvents();\n        }\n        \n        bindEvents() {\n            \/\/ \u958b\u59cb\u6e2c\u8a66\u6309\u9215\n            const startBtn = this.container.querySelector('[data-action=\"start-quiz\"]');\n            if (startBtn) {\n                startBtn.addEventListener('click', () => this.startQuiz());\n            }\n            \n            \/\/ \u9078\u9805\u6309\u9215\n            const optionBtns = this.container.querySelectorAll('[data-quiz-options] .option-btn');\n            optionBtns.forEach(btn => {\n                btn.addEventListener('click', (e) => this.selectOption(e));\n            });\n            \n            \/\/ \u91cd\u65b0\u6e2c\u8a66\u6309\u9215\n            const restartBtn = this.container.querySelector('[data-action=\"restart-quiz\"]');\n            if (restartBtn) {\n                restartBtn.addEventListener('click', () => this.restartQuiz());\n            }\n        }\n        \n        startQuiz() {\n            this.introPage.classList.add('d-none');\n            this.quizPage.classList.remove('d-none');\n            this.scrollToTop();\n        }\n        \n        selectOption(e) {\n            const btn = e.currentTarget;\n            const value = btn.dataset.value;\n            \n            \/\/ \u79fb\u9664\u5176\u4ed6\u9078\u4e2d\u72c0\u614b\n            const allBtns = this.container.querySelectorAll('[data-quiz-options] .option-btn');\n            allBtns.forEach(b => b.classList.remove('selected'));\n            \n            \/\/ \u6dfb\u52a0\u9078\u4e2d\u72c0\u614b\n            btn.classList.add('selected');\n            this.selectedAnswer = value;\n            \n            \/\/ \u5ef6\u9072\u986f\u793a\u7d50\u679c\n            setTimeout(() => {\n                this.showResult();\n            }, 500);\n        }\n        \n        showResult() {\n            if (!this.selectedAnswer) return;\n            \n            const result = this.results[this.selectedAnswer];\n            \n            \/\/ \u66f4\u65b0\u7d50\u679c\u5167\u5bb9\n            this.container.querySelector('[data-result-title]').textContent = result.title;\n            this.container.querySelector('[data-result-content]').innerHTML = `<p class=\"mb-0\">${result.content}<\/p>`;\n            this.container.querySelector('[data-result-advice]').textContent = result.advice;\n            \n            \/\/ \u986f\u793a\u7d50\u679c\u9801\n            this.quizPage.classList.add('d-none');\n            this.resultPage.classList.remove('d-none');\n            \n            \/\/ \u7e6a\u88fd\u5716\u8868\n            this.drawChart(result.scores);\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('loveChart9').getContext('2d');\n            \n            this.chartInstance = new Chart(ctx, {\n                type: 'radar',\n                data: {\n                    labels: ['\u5c0d\u4f60\u7684\u611b', '\u4e8b\u696d\u5fc3', '\u5bb6\u5ead\u89c0', '\u81ea\u6211', '\u7269\u8cea'],\n                    datasets: [{\n                        label: '\u611b\u60c5\u5206\u6790',\n                        data: [scores.love, scores.career, scores.family, scores.self, scores.material],\n                        backgroundColor: 'rgba(118, 75, 162, 0.2)',\n                        borderColor: 'rgba(118, 75, 162, 1)',\n                        borderWidth: 2,\n                        pointBackgroundColor: 'rgba(118, 75, 162, 1)',\n                        pointBorderColor: '#fff',\n                        pointHoverBackgroundColor: '#fff',\n                        pointHoverBorderColor: 'rgba(118, 75, 162, 1)',\n                        pointRadius: 5,\n                        pointHoverRadius: 7\n                    }]\n                },\n                options: {\n                    responsive: true,\n                    maintainAspectRatio: true,\n                    plugins: {\n                        legend: {\n                            display: false\n                        },\n                        tooltip: {\n                            callbacks: {\n                                label: function(context) {\n                                    return context.label + ': ' + context.parsed.r + '%';\n                                }\n                            }\n                        }\n                    },\n                    scales: {\n                        r: {\n                            beginAtZero: true,\n                            max: 100,\n                            ticks: {\n                                stepSize: 20,\n                                font: {\n                                    size: 14\n                                }\n                            },\n                            pointLabels: {\n                                font: {\n                                    size: 18,\n                                    weight: 'bold'\n                                },\n                                color: '#6B5B95'\n                            },\n                            grid: {\n                                color: 'rgba(0, 0, 0, 0.1)'\n                            }\n                        }\n                    }\n                }\n            });\n        }\n        \n        restartQuiz() {\n            \/\/ \u91cd\u7f6e\u72c0\u614b\n            this.selectedAnswer = null;\n            \n            \/\/ \u79fb\u9664\u9078\u4e2d\u72c0\u614b\n            const allBtns = this.container.querySelectorAll('[data-quiz-options] .option-btn');\n            allBtns.forEach(b => b.classList.remove('selected'));\n            \n            \/\/ \u92b7\u6bc0\u5716\u8868\n            if (this.chartInstance) {\n                this.chartInstance.destroy();\n                this.chartInstance = null;\n            }\n            \n            \/\/ \u986f\u793a\u5f15\u5c0e\u9801\n            this.resultPage.classList.add('d-none');\n            this.introPage.classList.remove('d-none');\n            this.scrollToTop();\n        }\n        \n        scrollToTop() {\n            const container = this.container;\n            if (container) {\n                container.scrollIntoView({ behavior: 'smooth', block: 'start' });\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>\u5bf9\u65b9\u7231\u81ea\u5df1\u5417\uff1f\u7231\u81ea\u5df1\u591a\u5c11\u5462\uff1f\u662f\u4e0d\u662f\u548c\u81ea\u5df1\u7231\u4ed6\u4e00\u6837\u7231\u4f60\u5462\uff1f\u4e8e\u662f\u4e3a\u4e86\u8fd9\u4e2a\u95ee\u9898\uff0c\u7ea0\u7ed3\u7684\u6709\uff0c\u6c89\u601d\u7684\u4e5f\u6709\u3002\u60f3\u77e5\u9053\u4f60\u7231\u7684\u4eba\u6709\u591a\u7231\u4f60\uff0c\u6765\u6d4b\u4e00\u4e0b\u5427<\/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":"normal-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":[178,179],"tags":[],"class_list":["post-2484","post","type-post","status-publish","format-standard","hentry","category-love","category-marriage"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2484","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=2484"}],"version-history":[{"count":5,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2484\/revisions"}],"predecessor-version":[{"id":10497,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2484\/revisions\/10497"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2484"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2484"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}