{"id":2476,"date":"2023-10-15T10:02:54","date_gmt":"2023-10-15T02:02:54","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2476"},"modified":"2025-08-14T03:35:29","modified_gmt":"2025-08-13T19:35:29","slug":"betray-love","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/betray-love","title":{"rendered":"\u5c0f\u6d4b\u9a8c\uff1a\u4ed6\u4f1a\u8f9c\u8d1f\u4f60\u7684\u6df1\u60c5\u5417?"},"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<!-- \u5f15\u5c0e\u9801 -->\n<section id=\"quizintro9\" data-page=\"intro9\" class=\"container py-5\">\n    <div class=\"row justify-content-center\">\n        <div class=\"col-lg-8\">\n            <header class=\"text-center mb-5\">\n                <h2 class=\"display-5 fw-bold mb-3\" style=\"color: #6B5B95; font-size: 36px;\">\n                    \u4ed6\u6703\u8f9c\u8ca0\u4f60\u7684\u6df1\u60c5\u55ce\uff1f\n                <\/h2>\n                <p class=\"lead text-muted\" style=\"font-size: 20px;\">\n                    \u63a2\u7d22\u4f60\u5011\u611f\u60c5\u7684\u6df1\u5c64\u771f\u76f8\n                <\/p>\n            <\/header>\n            \n            <div class=\"card border-0 shadow-sm mb-5\" style=\"background: linear-gradient(135deg, #FFF5F5 0%, #FFF0F5 100%);\">\n                <div class=\"card-body p-5\">\n                    <div class=\"text-center mb-4\">\n                        <div class=\"rounded-circle bg-white shadow-sm d-inline-flex align-items-center justify-content-center\" style=\"width: 100px; height: 100px;\">\n                            <i class=\"bi bi-heart-fill\" style=\"font-size: 48px; color: #FF6B9D;\"><\/i>\n                        <\/div>\n                    <\/div>\n                    <p class=\"mb-4\" style=\"font-size: 18px; line-height: 1.8; color: #5A5A5A;\">\n                        \u4ed8\u51fa\u4e86\u771f\u60c5\uff0c\u90fd\u4e00\u5b9a\u4e0d\u60f3\u88ab\u5c0d\u65b9\u8f9c\u8ca0\u3002\u4e0d\u7ba1\u591a\u611b\u4e00\u500b\u4eba\uff0c\u4e5f\u4e0d\u6703\u9858\u610f\u53ea\u6709\u81ea\u5df1\u4ed8\u51fa\u611b\uff0c\u5c0d\u65b9\u4e00\u9ede\u4e5f\u4e0d\u61c2\u56de\u5831\u3002\n                    <\/p>\n                    <p style=\"font-size: 18px; line-height: 1.8; color: #5A5A5A;\">\n                        \u4f60\u70ba\u4ed6\u505a\u4e86\u90a3\u9ebc\u591a\uff0c\u4f60\u89ba\u5f97\u4ed6\u6709\u53ef\u80fd\u6703\u8f9c\u8ca0\u4f60\u7684\u6df1\u60c5\u55ce\uff1f\u900f\u904e\u9019\u500b\u7c21\u55ae\u7684\u5fc3\u7406\u6e2c\u9a57\uff0c\u63ed\u958b\u4f60\u5011\u611f\u60c5\u7684\u771f\u5be6\u9762\u8c8c\u3002\n                    <\/p>\n                <\/div>\n            <\/div>\n            \n            <div class=\"row g-4 mb-5\">\n                <div class=\"col-md-4\">\n                    <div class=\"text-center\">\n                        <div class=\"rounded-circle bg-white shadow-sm d-inline-flex align-items-center justify-content-center mb-3\" style=\"width: 80px; height: 80px;\">\n                            <i class=\"bi bi-clock-history\" style=\"font-size: 36px; color: #C39BD3;\"><\/i>\n                        <\/div>\n                        <h5 style=\"color: #6B5B95;\">\u5feb\u901f\u6e2c\u9a57<\/h5>\n                        <p class=\"text-muted\">\u53ea\u97001\u5206\u9418\u6642\u9593<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"col-md-4\">\n                    <div class=\"text-center\">\n                        <div class=\"rounded-circle bg-white shadow-sm d-inline-flex align-items-center justify-content-center mb-3\" style=\"width: 80px; height: 80px;\">\n                            <i class=\"bi bi-lightbulb\" style=\"font-size: 36px; color: #C39BD3;\"><\/i>\n                        <\/div>\n                        <h5 style=\"color: #6B5B95;\">\u6df1\u5ea6\u5206\u6790<\/h5>\n                        <p class=\"text-muted\">\u5c08\u696d\u7684\u611f\u60c5\u89e3\u8b80<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"col-md-4\">\n                    <div class=\"text-center\">\n                        <div class=\"rounded-circle bg-white shadow-sm d-inline-flex align-items-center justify-content-center mb-3\" style=\"width: 80px; height: 80px;\">\n                            <i class=\"bi bi-shield-check\" style=\"font-size: 36px; color: #C39BD3;\"><\/i>\n                        <\/div>\n                        <h5 style=\"color: #6B5B95;\">\u79c1\u5bc6\u5b89\u5168<\/h5>\n                        <p class=\"text-muted\">\u4f60\u7684\u9078\u64c7\u5b8c\u5168\u4fdd\u5bc6<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"text-center\">\n                <button class=\"btn btn-lg px-5 py-3 shadow-sm\" \n                        data-action=\"start-quiz\"\n                        style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);                                color: white;                                border: none;                                border-radius: 50px;                                font-size: 20px;                               transition: transform 0.3s;\">\n                    <i class=\"bi bi-play-circle me-2\"><\/i>\n                    \u5f00\u59cb\u6d4b\u9a8c\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- \u6e2c\u9a57\u9801 -->\n<section id=\"quizmain9\" data-page=\"quiz9\" class=\"container py-5\" style=\"display: none;\">\n    <div class=\"row justify-content-center\">\n        <div class=\"col-lg-7\">\n            <header class=\"text-center mb-5\">\n                <h2 class=\"fw-bold\" style=\"color: #6B5B95; font-size: 32px;\">\u7231\u60c5\u6d4b\u9a8c<\/h2>\n                <div class=\"progress mt-4\" style=\"height: 8px;\">\n                    <div class=\"progress-bar\" role=\"progressbar\" \n                         style=\"width: 100%; background: linear-gradient(90deg, #667eea, #764ba2);\"\n                         aria-valuenow=\"100\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div>\n                <\/div>\n            <\/header>\n            \n            <div class=\"card border-0 shadow-sm\">\n                <div class=\"card-body p-5\">\n                    <h3 class=\"mb-4 fw-bold\" style=\"font-size: 22px; color: #4A4A4A; line-height: 1.6;\">\n                        \u4ed6\u8981\u9001\u4f60\u4e00\u4e2a\u94b1\u5305\uff0c\u4f60\u731c\u731c\uff0c\u4ed6\u4f1a\u9001\u4ec0\u4e48\u6837\u7684\u94b1\u5305\u7ed9\u4f60\u5462\uff1f\n                    <\/h3>\n                    \n                    <div class=\"d-grid gap-3\" data-quiz-options>\n                        <button class=\"btn btn-outline-secondary text-start p-4 rounded-3 border-2 option-btn\" \n                                data-option=\"A\"\n                                style=\"font-size: 18px; transition: all 0.3s;\">\n                            <span class=\"fw-bold me-3\" style=\"color: #764ba2;\">A.<\/span>\n                            \u73ab\u7c89\u8272\uff0c\u5973\u4eba\u5473\u5f88\u91cd\u7684\u9322\u5305\n                        <\/button>\n                        \n                        <button class=\"btn btn-outline-secondary text-start p-4 rounded-3 border-2 option-btn\" \n                                data-option=\"B\"\n                                style=\"font-size: 18px; transition: all 0.3s;\">\n                            <span class=\"fw-bold me-3\" style=\"color: #764ba2;\">B.<\/span>\n                            \u9ed1\u8272\u99ac\u6bdb\uff0c\u6bd4\u8f03\u9738\u6c23\u7684\u9322\u5305\n                        <\/button>\n                        \n                        <button class=\"btn btn-outline-secondary text-start p-4 rounded-3 border-2 option-btn\" \n                                data-option=\"C\"\n                                style=\"font-size: 18px; transition: all 0.3s;\">\n                            <span class=\"fw-bold me-3\" style=\"color: #764ba2;\">C.<\/span>\n                            \u5f88\u6709\u8cea\u611f\u7684\u725b\u76ae\u5fa9\u53e4\u9322\u5305\n                        <\/button>\n                        \n                        <button class=\"btn btn-outline-secondary text-start p-4 rounded-3 border-2 option-btn\" \n                                data-option=\"D\"\n                                style=\"font-size: 18px; transition: all 0.3s;\">\n                            <span class=\"fw-bold me-3\" style=\"color: #764ba2;\">D.<\/span>\n                            \u767d\u8272\u5c0f\u9999\u98a8\uff0c\u540d\u5a9b\u6c23\u8cea\u9322\u5305\n                        <\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"text-center mt-4\">\n                <button class=\"btn btn-light px-4 py-2\" data-action=\"prev-question\" style=\"display: none;\">\n                    <i class=\"bi bi-arrow-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=\"container py-5\" style=\"display: none;\">\n    <div class=\"row justify-content-center\">\n        <div class=\"col-lg-8\">\n            <header class=\"text-center mb-5\">\n                <h2 class=\"display-5 fw-bold\" style=\"color: #6B5B95; font-size: 36px;\">\u6d4b\u9a8c\u7ed3\u679c<\/h2>\n            <\/header>\n            \n            <div class=\"card border-0 shadow-sm mb-5\" style=\"background: linear-gradient(135deg, #FFF5F5 0%, #FFF0F5 100%);\">\n                <div class=\"card-body p-5\">\n                    <div class=\"text-center mb-4\">\n                        <div class=\"rounded-circle bg-white shadow-sm d-inline-flex align-items-center justify-content-center\" \n                             style=\"width: 100px; height: 100px;\">\n                            <i class=\"bi bi-heart-fill result-icon\" style=\"font-size: 48px;\"><\/i>\n                        <\/div>\n                    <\/div>\n                    \n                    <h3 class=\"text-center mb-4 result-title\" style=\"color: #6B5B95;\"><\/h3>\n                    \n                    <div class=\"result-content\" style=\"font-size: 18px; line-height: 1.8; color: #5A5A5A;\">\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"text-center\">\n                <button class=\"btn btn-lg px-5 py-3 shadow-sm\" \n                        data-action=\"restart-quiz\"\n                        style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);                                color: white;                                border: none;                                border-radius: 50px;                                font-size: 20px;                               transition: transform 0.3s;\">\n                    <i class=\"bi bi-arrow-clockwise me-2\"><\/i>\n                    \u91cd\u65b0\u6d4b\u8bd5\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n\/* \u81ea\u5b9a\u7fa9\u6a23\u5f0f *\/\n.option-btn {\n    color: #4A4A4A !important;\n    background-color: white !important;\n    border-color: #E0E0E0 !important;\n}\n\n.option-btn:hover {\n    background: linear-gradient(135deg, #F5F3FF 0%, #FFF0F5 100%) !important;\n    border-color: #764ba2 !important;\n    transform: translateX(5px);\n}\n\n.option-btn.selected {\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;\n    color: white !important;\n    border-color: #764ba2 !important;\n}\n\n.option-btn.selected span {\n    color: white !important;\n}\n\nbutton[data-action]:hover {\n    transform: translateY(-2px);\n}\n\n\/* \u5e73\u6ed1\u904e\u6e21 *\/\nsection {\n    transition: opacity 0.3s ease-in-out;\n}\n\n\/* \u97ff\u61c9\u5f0f\u8abf\u6574 *\/\n@media (max-width: 768px) {\n    .display-5 {\n        font-size: 28px !important;\n    }\n    \n    h3 {\n        font-size: 20px !important;\n    }\n    \n    .option-btn {\n        font-size: 16px !important;\n    }\n    \n    button[data-action] {\n        font-size: 18px !important;\n    }\n}\n<\/style>\n\n<script>\n(() => {\n    'use strict';\n    \n    class LoveQuiz {\n        constructor() {\n            this.currentPage = 'intro9';\n            this.selectedAnswer = null;\n            this.results = {\n                A: {\n                    title: '\u9700\u8981\u8abf\u6574\u611b\u7684\u65b9\u5f0f',\n                    icon: 'bi-heart-pulse-fill',\n                    iconColor: '#FFA07A',\n                    content: `\u4f60\u77e5\u9053\u4ed6\u591a\u611b\u4f60\uff0c\u4ed6\u770b\u5f97\u5230\u4f60\u5c31\u662f\u60f3\u5c0d\u4ed6\u597d\uff0c\u75bc\u611b\u4ed6\uff0c\u751a\u81f3\u6709\u9ede\u6bcd\u6027\u628a\u4ed6\u7576\u5c0f\u5bf6\u5bf6\u3002\u8ddf\u4ed6\u5728\u4e00\u8d77\u5f88\u958b\u5fc3\uff0c\u7576\u7136\u4e5f\u6703\u5f88\u4f9d\u8cf4\u4ed6\uff0c\u4ec0\u9ebc\u4e8b\u60c5\u90fd\u544a\u8a34\u4ed6\uff0c\u628a\u4ed6\u7576\u505a\u4f9d\u9760\uff0c\u50cf\u500b\u7238\u7238\u4e00\u6a23\u6709\u5b89\u5168\u611f\u3002<br><br>\n                    \u4f46\u662f\uff0c\u6b63\u662f\u56e0\u70ba\u4f60\u611b\u4ed6\u611b\u5f97\u6709\u9ede\u904e\u5ea6\u4e86\uff0c\u628a\u4ed6\u5bf5\u5f97\u771f\u628a\u4f60\u7576\u6210\u81ea\u5df1\u7684\u5bb6\u4eba\uff0c\u5728\u4f60\u9762\u524d\u8086\u7121\u5fcc\u619a\u5730\u66b4\u9732\u81ea\u5df1\u7684\u7f3a\u9ede\uff0c\u751a\u81f3\u53ef\u80fd\u8f9c\u8ca0\u4f60\u7684\u6df1\u60c5\u3002\u56e0\u70ba\u5c0d\u65bc\u4ed6\u4f86\u8aaa\uff0c\u4f60\u5011\u7684\u95dc\u4fc2\u662f\u7d55\u5c0d\u5b89\u5168\u7684\uff0c\u4ed6\u76f8\u4fe1\u4f60\u4e0d\u53ef\u80fd\u56e0\u70ba\u4ed6\u7684\u8f9c\u8ca0\u800c\u8d70\u6389\uff0c\u6240\u4ee5\uff0c\u7121\u6240\u9867\u616e\u5730\u624d\u6703\u50b7\u5bb3\u4f60\u3002<br><br>\n                    <strong>\u5efa\u8b70\uff1a<\/strong>\u9069\u5ea6\u4fdd\u6301\u81ea\u5df1\u7684\u7368\u7acb\u6027\uff0c\u8b93\u611b\u60c5\u4fdd\u6301\u5065\u5eb7\u7684\u8ddd\u96e2\u611f\u3002`\n                },\n                B: {\n                    title: '\u4ed6\u73cd\u60dc\u4f60\u7684\u512a\u79c0',\n                    icon: 'bi-gem',\n                    iconColor: '#9370DB',\n                    content: `\u4f60\u672c\u4f86\u5f88\u61e6\u5f31\uff0c\u672c\u4f86\u4ee5\u70ba\u4f60\u5f88\u5bb3\u6015\uff0c\u4ed6\u4e00\u8ddf\u4f60\u8aaa\u8a71\uff0c\u4f60\u5c31\u89ba\u5f97\u8981\u70ba\u4ed6\u5805\u5f37\u3002\u6240\u4ee5\u5be6\u969b\u4e0a\u4f60\u662f\u5728\u70ba\u4ed6\u4f5c\u51fa\u6539\u8b8a\uff0c\u4f60\u628a\u81ea\u5df1\u8b8a\u5f97\u8d8a\u4f86\u8d8a\u512a\u79c0\uff0c\u4ed6\u81ea\u7136\u8d8a\u4f86\u8d8a\u96e2\u4e0d\u958b\u4f60\u3002<br><br>\n                    \u4ed6\u4e26\u6c92\u6709\u770b\u5230\u4f60\u5c0d\u4ed6\u7684\u6df1\u60c5\uff0c\u53ea\u662f\u89ba\u5f97\u4f60\u662f\u4e00\u500b\u503c\u5f97\u88ab\u4ed6\u73cd\u60dc\u7684\u611b\u4eba\uff0c\u65bc\u662f\u8ac7\u4e0d\u4e0a\u8f9c\u4e0d\u8f9c\u8ca0\uff0c\u4ed6\u53ea\u662f\u5f88\u60f3\u628a\u4f60\u7559\u5728\u4ed6\u8eab\u908a\u3002<br><br>\n                    <strong>\u5efa\u8b70\uff1a<\/strong>\u7e7c\u7e8c\u4fdd\u6301\u81ea\u6211\u6210\u9577\uff0c\u540c\u6642\u4e5f\u8981\u9069\u6642\u8868\u9054\u4f60\u7684\u611f\u60c5\uff0c\u8b93\u4ed6\u770b\u898b\u4f60\u7684\u6df1\u60c5\u3002`\n                },\n                C: {\n                    title: '\u4ed6\u6703\u8207\u4f60\u651c\u624b\u5171\u9032',\n                    icon: 'bi-infinity',\n                    iconColor: '#20B2AA',\n                    content: `\u4ed6\u611b\u4f60\u7576\u7136\u4e0d\u6703\u8f9c\u8ca0\u4f60\uff0c\u800c\u4e14\u5728\u4ed6\u770b\u4f86\uff0c\u611b\u5c31\u662f\u8981\u52aa\u529b\u5728\u4e00\u8d77\u3002\u4ed6\u4e0d\u76f8\u4fe1\u65e5\u97d3\u80a5\u7682\u5287\u4e2d\u6240\u8b02\u7684\u56e0\u70ba\u4e0d\u80fd\u8b93\u5f7c\u6b64\u5e78\u798f\u800c\u96e2\u958b\u3002<br><br>\n                    \u611b\u4e0d\u662f\u9003\u907f\uff0c\u662f\u52aa\u529b\u3002\u4e0d\u662f\u9003\u907f\u8457\u7d66\u5f7c\u6b64\u5e78\u798f\u7684\u8cac\u4efb\uff0c\u800c\u662f\u52aa\u529b\u5730\u5be6\u73fe\u8b93\u5f7c\u6b64\u5e78\u798f\u7684\u7fa9\u52d9\u3002\u6240\u4ee5\u4f60\u53ea\u8981\u8b93\u4ed6\u770b\u5230\u4f60\u9858\u610f\u8207\u4ed6\u5805\u6301\u5728\u4e00\u8d77\u7684\u6c7a\u5fc3\uff0c\u4ed6\u7576\u7136\u4e0d\u6703\u7368\u81ea\u8d70\u958b\u3002<br><br>\n                    <strong>\u5efa\u8b70\uff1a<\/strong>\u9019\u662f\u4e00\u4efd\u503c\u5f97\u73cd\u60dc\u7684\u611f\u60c5\uff0c\u7e7c\u7e8c\u7528\u5fc3\u7d93\u71df\uff0c\u5171\u540c\u5275\u9020\u7f8e\u597d\u672a\u4f86\u3002`\n                },\n                D: {\n                    title: '\u4f60\u662f\u4ed6\u7684\u771f\u5fc3\u4eba',\n                    icon: 'bi-heart-arrow',\n                    iconColor: '#FF69B4',\n                    content: `\u4f60\u5c31\u662f\u4ed6\u7684\u771f\u5fc3\u4eba\uff0c\u800c\u4e14\u4ed6\u89ba\u5f97\uff0c\u771f\u6b63\u7684\u611b\u60c5\uff0c\u8981\u61c2\u5f97\u73cd\u60dc\u3002\u6c92\u6709\u8ab0\u548c\u8ab0\u662f\u5929\u751f\u5c31\u8a3b\u5b9a\u5728\u4e00\u8d77\u7684\u3002<br><br>\n                    \u771f\u5be6\u7684\u611b\u60c5\u662f\u4e0d\u5bb9\u8f9c\u8ca0\u7684\uff0c\u4ed6\u6368\u4e0d\u5f97\u8f9c\u8ca0\u4f60\u3002\u5c0d\u4ed6\u4f86\u8aaa\uff0c\u4e00\u8f29\u5b50\u5176\u5be6\u4e0d\u9577\uff0c\u80fd\u9047\u5fc3\u611b\u7684\u4eba\uff0c\u662f\u591a\u9ebc\u5e78\u904b\u7684\u4e8b\uff0c\u70ba\u4f55\u4e0d\u7dca\u63e1\u8457\u4f60\u7684\u624b\u5462\u3002\u4e00\u9846\u5fc3\u9700\u8981\u53e6\u4e00\u9846\u5fc3\u5766\u8aa0\u76f8\u5f85\uff0c\u9019\u6a23\u5c31\u89ba\u5f97\u5e78\u798f\u4e86\u3002<br><br>\n                    <strong>\u5efa\u8b70\uff1a<\/strong>\u597d\u597d\u73cd\u60dc\u9019\u4efd\u771f\u646f\u7684\u611f\u60c5\uff0c\u7528\u5fc3\u7dad\u8b77\uff0c\u8b93\u611b\u60c5\u4e4b\u82b1\u6c38\u9060\u7dbb\u653e\u3002`\n                }\n            };\n            \n            this.init();\n        }\n        \n        init() {\n            this.cacheElements();\n            this.bindEvents();\n        }\n        \n        cacheElements() {\n            this.introPage = document.querySelector('#quizintro9');\n            this.quizPage = document.querySelector('#quizmain9');\n            this.resultPage = document.querySelector('#quizresult9');\n            this.optionButtons = document.querySelectorAll('[data-option]');\n            this.startBtn = document.querySelector('[data-action=\"start-quiz\"]');\n            this.restartBtn = document.querySelector('[data-action=\"restart-quiz\"]');\n            this.prevBtn = document.querySelector('[data-action=\"prev-question\"]');\n        }\n        \n        bindEvents() {\n            \/\/ \u958b\u59cb\u6e2c\u9a57\n            this.startBtn?.addEventListener('click', () => this.startQuiz());\n            \n            \/\/ \u9078\u64c7\u9078\u9805\n            this.optionButtons.forEach(btn => {\n                btn.addEventListener('click', (e) => this.selectOption(e.target.closest('[data-option]')));\n            });\n            \n            \/\/ \u91cd\u65b0\u6e2c\u8a66\n            this.restartBtn?.addEventListener('click', () => this.restartQuiz());\n            \n            \/\/ \u4e0a\u4e00\u984c\uff08\u672c\u6e2c\u9a57\u53ea\u6709\u4e00\u984c\uff0c\u6240\u4ee5\u8fd4\u56de\u5f15\u5c0e\u9801\uff09\n            this.prevBtn?.addEventListener('click', () => this.goToIntro());\n        }\n        \n        startQuiz() {\n            this.showPage('quiz9');\n            this.scrollToTop();\n        }\n        \n        selectOption(button) {\n            if (!button) return;\n            \n            \/\/ \u79fb\u9664\u5176\u4ed6\u9078\u4e2d\u72c0\u614b\n            this.optionButtons.forEach(btn => btn.classList.remove('selected'));\n            \n            \/\/ \u6dfb\u52a0\u9078\u4e2d\u72c0\u614b\n            button.classList.add('selected');\n            \n            \/\/ \u8a18\u9304\u7b54\u6848\n            this.selectedAnswer = button.dataset.option;\n            \n            \/\/ \u5ef6\u9072\u986f\u793a\u7d50\u679c\n            setTimeout(() => {\n                this.showResult();\n            }, 500);\n        }\n        \n        showResult() {\n            const result = this.results[this.selectedAnswer];\n            \n            if (!result) return;\n            \n            \/\/ \u66f4\u65b0\u7d50\u679c\u5167\u5bb9\n            const resultIcon = this.resultPage.querySelector('.result-icon');\n            const resultTitle = this.resultPage.querySelector('.result-title');\n            const resultContent = this.resultPage.querySelector('.result-content');\n            \n            resultIcon.className = `bi ${result.icon} result-icon`;\n            resultIcon.style.color = result.iconColor;\n            resultTitle.textContent = result.title;\n            resultContent.innerHTML = result.content;\n            \n            \/\/ \u986f\u793a\u7d50\u679c\u9801\n            this.showPage('result9');\n            this.scrollToTop();\n        }\n        \n        restartQuiz() {\n            \/\/ \u91cd\u7f6e\u9078\u64c7\n            this.selectedAnswer = null;\n            this.optionButtons.forEach(btn => btn.classList.remove('selected'));\n            \n            \/\/ \u8fd4\u56de\u5f15\u5c0e\u9801\n            this.showPage('intro9');\n            this.scrollToTop();\n        }\n        \n        goToIntro() {\n            this.showPage('intro9');\n            this.scrollToTop();\n        }\n        \n        showPage(pageName) {\n            \/\/ \u96b1\u85cf\u6240\u6709\u9801\u9762\n            [this.introPage, this.quizPage, this.resultPage].forEach(page => {\n                if (page) page.style.display = 'none';\n            });\n            \n            \/\/ \u986f\u793a\u76ee\u6a19\u9801\u9762\n            switch(pageName) {\n                case 'intro9':\n                    if (this.introPage) this.introPage.style.display = 'block';\n                    break;\n                case 'quiz9':\n                    if (this.quizPage) this.quizPage.style.display = 'block';\n                    break;\n                case 'result9':\n                    if (this.resultPage) this.resultPage.style.display = 'block';\n                    break;\n            }\n            \n            this.currentPage = pageName;\n        }\n        \n        scrollToTop() {\n            const target = document.querySelector(`#quiz${this.currentPage.replace('9', '')}9`);\n            if (target) {\n                target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n            }\n        }\n    }\n    \n    \/\/ \u521d\u59cb\u5316\u6e2c\u9a57\n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', () => new LoveQuiz());\n    } else {\n        new LoveQuiz();\n    }\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u4ed8\u51fa\u4e86\u771f\u60c5\uff0c\u90fd\u4e00\u5b9a\u4e0d\u60f3\u88ab\u5bf9\u65b9\u8f9c\u8d1f\uff0c\u4e0d\u7ba1\u591a\u7231\u4e00\u4e2a\u4eba\uff0c\u4e5f\u4e0d\u4f1a\u613f\u610f\u53ea\u6709\u81ea\u5df1\u4ed8\u51fa\u7231\uff0c\u5bf9\u65b9\u4e00\u70b9\u4e5f\u4e0d\u61c2\u56de\u62a5\u3002\u4f60\u4e3a\u4ed6\u505a\u4e86\u90a3\u4e48\u591a\uff0c\u4f60\u89c9\u5f97\u4ed6\u6709\u53ef\u80fd\u4f1a\u8f9c\u8d1f\u4f60\u7684\u6df1\u60c5\u5417\uff1f<\/p>","protected":false},"author":19,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"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,175],"tags":[],"class_list":["post-2476","post","type-post","status-publish","format-standard","hentry","category-love","category-relationships"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2476","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=2476"}],"version-history":[{"count":2,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2476\/revisions"}],"predecessor-version":[{"id":10451,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2476\/revisions\/10451"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2476"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2476"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}