{"id":2461,"date":"2023-10-17T09:44:56","date_gmt":"2023-10-17T01:44:56","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2461"},"modified":"2025-08-15T19:59:56","modified_gmt":"2025-08-15T11:59:56","slug":"next-romance-fate-or-fiasco","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/next-romance-fate-or-fiasco","title":{"rendered":"\u5c0f\u6d4b\u9a8c\uff1a\u4f60\u7684\u4e0b\u4e00\u6bb5\u7231\u60c5\u662f\u300c\u7f18\u300d\u8fd8\u662f\u300c\u52ab\u300d\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    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n    <style>\n        \/* \u6d4b\u9a8c\u9009\u9879\u6309\u94ae\u6837\u5f0f *\/\n        .quiz-option-btn {\n            background: #f8f9fa;\n            border: 2px solid transparent;\n            color: #333;\n            padding: 1rem 1.5rem;\n            font-size: 18px;\n            text-align: left;\n            transition: all 0.3s ease;\n            border-radius: 12px;\n        }\n        \n        .quiz-option-btn:hover {\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            color: white;\n            transform: translateX(5px);\n            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);\n        }\n    <\/style>\n    <!-- \u5f15\u5bfc\u9875 -->\n    <section id=\"quizintro9\" data-page=\"intro9\" class=\"container py-5\">\n        <div class=\"row justify-content-center\">\n            <div class=\"col-12 col-md-10 col-lg-8\">\n                <div class=\"text-center mb-5\">\n                    <h2 class=\"display-5 fw-bold mb-3\" style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\">\n                        \u4f60\u7684\u4e0b\u4e00\u6bb5\u7231\u60c5\u662f\u300c\u7f18\u300d\u8fd8\u662f\u300c\u52ab\u300d\uff1f\n                    <\/h2>\n                    <p class=\"lead text-muted mb-4\">\u63a2\u7d22\u4f60\u7684\u7231\u60c5\u547d\u8fd0\uff0c\u53d1\u73b0\u5c5e\u4e8e\u4f60\u7684\u7f18\u5206\u5bc6\u7801<\/p>\n                <\/div>\n\n                <div class=\"card border-0 shadow-sm mb-4 p-4\">\n                    <div class=\"card-body\">\n                        <p class=\"fs-5 mb-4\" style=\"line-height: 1.8;\">\n                            \u300c\u4eba\u751f\u5c31\u50cf\u5de7\u514b\u529b\uff0c\u4f60\u6c38\u8fdc\u4e0d\u77e5\u9053\u4e0b\u4e00\u9897\u662f\u4ec0\u4e48\u5473\u9053\u300d\u3002\u7231\u4e0a\u4e00\u4e2a\u4eba\u53ef\u4ee5\u662f\u7f18\u5206\uff0c\u4e5f\u53ef\u4ee5\u662f\u707e\u96be\u3002\u8fd9\u4e2a\u6d4b\u9a8c\u5c06\u901a\u8fc710\u4e2a\u7cbe\u5fc3\u8bbe\u8ba1\u7684\u95ee\u9898\uff0c\u5e2e\u52a9\u4f60\u4e86\u89e3\u4e0b\u4e00\u6bb5\u7231\u60c5\u7684\u8d70\u5411\u3002\n                        <\/p>\n                        \n                        <div class=\"row g-4 mt-3\">\n                            <div class=\"col-md-4\">\n                                <div class=\"text-center p-3\">\n                                    <div class=\"rounded-circle bg-light p-3 mb-3 d-inline-block\">\n                                        <i class=\"bi bi-question-circle fs-3\" style=\"color: #667eea;\"><\/i>\n                                    <\/div>\n                                    <h5 class=\"fw-bold\">\u6df1\u5ea6\u63a2\u7d22<\/h5>\n                                    <p class=\"text-muted small\">10\u4e2a\u7cbe\u5fc3\u8bbe\u8ba1\u7684\u95ee\u9898<\/p>\n                                <\/div>\n                            <\/div>\n                            <div class=\"col-md-4\">\n                                <div class=\"text-center p-3\">\n                                    <div class=\"rounded-circle bg-light p-3 mb-3 d-inline-block\">\n                                        <i class=\"bi bi-clock fs-3\" style=\"color: #764ba2;\"><\/i>\n                                    <\/div>\n                                    <h5 class=\"fw-bold\">\u5feb\u901f\u6d4b\u9a8c<\/h5>\n                                    <p class=\"text-muted small\">\u53ea\u97003-5\u5206\u949f<\/p>\n                                <\/div>\n                            <\/div>\n                            <div class=\"col-md-4\">\n                                <div class=\"text-center p-3\">\n                                    <div class=\"rounded-circle bg-light p-3 mb-3 d-inline-block\">\n                                        <i class=\"bi bi-graph-up fs-3\" style=\"color: #f093fb;\"><\/i>\n                                    <\/div>\n                                    <h5 class=\"fw-bold\">\u4e13\u4e1a\u5206\u6790<\/h5>\n                                    <p class=\"text-muted small\">\u4e2a\u6027\u5316\u7ed3\u679c\u89e3\u8bfb<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"text-center mt-5\">\n                    <button class=\"btn btn-lg px-5 py-3 text-white shadow-lg\" \n                            style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 50px; font-size: 1.2rem; transition: all 0.3s ease;\"\n                            data-action=\"start-quiz\"\n                            onmouseover=\"this.style.transform='scale(1.05)'; this.style.boxShadow='0 10px 30px rgba(102, 126, 234, 0.4)';\"\n                            onmouseout=\"this.style.transform='scale(1)'; this.style.boxShadow='';\">\n                        <i class=\"bi bi-play-fill me-2\"><\/i>\u5f00\u59cb\u6d4b\u9a8c\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- \u6d4b\u9a8c\u9875 -->\n    <section id=\"quizmain9\" data-page=\"quiz9\" class=\"container py-5 d-none\">\n        <div class=\"row justify-content-center\">\n            <div class=\"col-12 col-md-10 col-lg-8\">\n                <h2 class=\"text-center mb-4\">\u7231\u60c5\u7f18\u52ab\u6d4b\u9a8c<\/h2>\n                \n                <!-- \u8fdb\u5ea6\u6761 -->\n                <div class=\"mb-4\">\n                    <div class=\"d-flex justify-content-between align-items-center mb-2\">\n                        <span class=\"text-muted\">\u95ee\u9898 <span data-current-question>1<\/span>\/10<\/span>\n                        <span class=\"text-muted\"><span data-progress-percent>10<\/span>%<\/span>\n                    <\/div>\n                    <div class=\"progress\" style=\"height: 8px;\">\n                        <div class=\"progress-bar\" role=\"progressbar\" style=\"width: 10%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\" data-progress-bar><\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- \u95ee\u9898\u5361\u7247 -->\n                <div class=\"card border-0 shadow-sm mb-4\">\n                    <div class=\"card-body p-4\">\n                        <h3 class=\"fw-bold mb-4\" style=\"font-size: 22px;\" data-question-text><\/h3>\n                        <div class=\"d-grid gap-3\" data-options-container><\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- \u4e0a\u4e00\u9898\u6309\u94ae -->\n                <div class=\"text-center mt-4\">\n                    <button class=\"btn btn-outline-secondary px-4 py-2 d-none\" data-action=\"prev-question\">\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    <!-- \u7ed3\u679c\u9875 -->\n    <section id=\"quizresult9\" data-page=\"result9\" class=\"container py-5 d-none\">\n        <div class=\"row justify-content-center\">\n            <div class=\"col-12 col-md-10 col-lg-8\">\n                <h2 class=\"text-center mb-4\">\u6d4b\u9a8c\u7ed3\u679c<\/h2>\n                \n                <!-- \u7ed3\u679c\u6807\u9898\u5361\u7247 -->\n                <div class=\"card border-0 shadow-sm mb-4\">\n                    <div class=\"card-body text-center p-4\">\n                        <div>\n                            <i class=\"bi bi-heart-fill text-danger\" style=\"font-size: 6.5rem;\"><\/i>\n                        <\/div>\n                        <h3 class=\"fw-bold mb-3\" data-result-title style=\"color: #764ba2;\"><\/h3>\n                        <p class=\"lead\" data-result-subtitle><\/p>\n                    <\/div>\n                <\/div>\n\n                <!-- \u56fe\u8868\u533a\u57df -->\n                <div class=\"card border-0 shadow-sm mb-4\">\n                    <div class=\"card-body p-4\">\n                        <h4 class=\"fw-bold mb-4 text-center\">\u4f60\u7684\u7231\u60c5\u547d\u8fd0\u5206\u6790<\/h4>\n                        <div class=\"text-center\" style=\"max-width: 400px; margin: 0 auto;\">\n                            <canvas id=\"resultChart\" width=\"400\" height=\"400\"><\/canvas>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- \u8be6\u7ec6\u89e3\u6790 -->\n                <div class=\"card border-0 shadow-sm mb-4\">\n                    <div class=\"card-body p-4\">\n                        <h4 class=\"fw-bold mb-3\">\u8be6\u7ec6\u89e3\u6790<\/h4>\n                        <p class=\"fs-5\" style=\"line-height: 1.8;\" data-result-description><\/p>\n                    <\/div>\n                <\/div>\n\n                <!-- \u91cd\u65b0\u6d4b\u8bd5\u6309\u94ae -->\n                <div class=\"text-center mt-5\">\n                    <button class=\"btn btn-lg px-5 py-3 text-white shadow-lg\" \n                            style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 50px; font-size: 1.1rem; transition: all 0.3s ease;\"\n                            data-action=\"restart-quiz\"\n                            onmouseover=\"this.style.transform='scale(1.05)'; this.style.boxShadow='0 10px 30px rgba(102, 126, 234, 0.4)';\"\n                            onmouseout=\"this.style.transform='scale(1)'; this.style.boxShadow='';\">\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\n    <script>\n        (() => {\n            'use strict';\n\n            class LoveFateQuiz {\n                constructor() {\n                    \/\/ \u7f13\u5b58DOM\u5143\u7d20\n                    this.introSection = document.getElementById('quizintro9');\n                    this.quizSection = document.getElementById('quizmain9');\n                    this.resultSection = document.getElementById('quizresult9');\n                    \n                    \/\/ \u6d4b\u9a8c\u6570\u636e\n                    this.questions = [\n                        {\n                            id: 1,\n                            text: \"\u5728\u4f60\u7684\u610f\u8bc6\u91cc\uff0c\u7231\u60c5\u4e00\u76f4\u662f\u751c\u871c\u7684\uff1f\",\n                            options: [\n                                { text: \"\u662f\u7684\", next: 2 },\n                                { text: \"\u4e0d\u662f\", next: 3 },\n                                { text: \"\u4e0d\u77e5\u9053\", next: 4 }\n                            ]\n                        },\n                        {\n                            id: 2,\n                            text: \"\u604b\u4eba\u9762\u524d\uff0c\u4f60\u4e00\u822c\u662f\u6bd4\u8f83\u4efb\u6027\u7684\u5417\uff1f\",\n                            options: [\n                                { text: \"\u662f\u7684\", next: 3 },\n                                { text: \"\u4e0d\u662f\", next: 4 },\n                                { text: \"\u4e0d\u77e5\u9053\", next: 5 }\n                            ]\n                        },\n                        {\n                            id: 3,\n                            text: \"\u5176\u5b9e\u4f60\u8ba4\u4e3a\u81ea\u5df1\u6700\u9700\u8981\u7684\u662f\u94b1\u5417\uff1f\",\n                            options: [\n                                { text: \"\u662f\u7684\", next: 4 },\n                                { text: \"\u4e0d\u662f\", next: 5 },\n                                { text: \"\u4e0d\u77e5\u9053\", next: 6 }\n                            ]\n                        },\n                        {\n                            id: 4,\n                            text: \"\u5982\u679c\u77e5\u9053\u604b\u4eba\u4e0e\u524d\u4efb\u8fd8\u6709\u8054\u7cfb\uff0c\u4f60\u4f1a\u5206\u624b\u5417\uff1f\",\n                            options: [\n                                { text: \"\u4f1a\u7684\", next: 5 },\n                                { text: \"\u4e0d\u4f1a\", next: 6 },\n                                { text: \"\u4e0d\u77e5\u9053\", next: 7 }\n                            ]\n                        },\n                        {\n                            id: 5,\n                            text: \"\u4f60\u89c9\u5f97\u81ea\u5df1\u662f\u4e00\u4e2a\u633a\u76f8\u4fe1\u7f18\u5206\u7684\u4eba\u5417\uff1f\",\n                            options: [\n                                { text: \"\u662f\u7684\", next: 6 },\n                                { text: \"\u4e0d\u662f\", next: 7 },\n                                { text: \"\u4e0d\u77e5\u9053\", next: 8 }\n                            ]\n                        },\n                        {\n                            id: 6,\n                            text: \"\u4e00\u676f\u6c34\uff0c\u5fc5\u987b\u8981\u52a0\u4e0b\u9762\u7684\u67d0\u4e00\u79cd\u4e1c\u897f\uff0c\u4f60\u4f1a\u52a0\uff1f\",\n                            options: [\n                                { text: \"\u76d0\", next: 7 },\n                                { text: \"\u7cd6\", next: 8 },\n                                { text: \"\u725b\u5976\", result: \"A\" }\n                            ]\n                        },\n                        {\n                            id: 7,\n                            text: \"\u524d\u4efb\u60f3\u8981\u89c1\u4f60\u4e00\u9762\uff0c\u5982\u679c\u4f60\u6ca1\u6709\u5bf9\u8c61\uff0c\u4f60\u4f1a\u53bb\u89c1\u5417\uff1f\",\n                            options: [\n                                { text: \"\u4f1a\u7684\", next: 8 },\n                                { text: \"\u4e0d\u4f1a\", next: 9 },\n                                { text: \"\u4e0d\u77e5\u9053\", next: 10 }\n                            ]\n                        },\n                        {\n                            id: 8,\n                            text: \"\u4e0b\u9762\u54ea\u79cd\u6c34\u679c\uff0c\u4f1a\u8ba9\u4f60\u5403\u8d77\u6765\u611f\u89c9\u4eba\u751f\u6700\u7f8e\u597d\uff1f\",\n                            options: [\n                                { text: \"\u897f\u74dc\", next: 9 },\n                                { text: \"\u8349\u8393\", result: \"A\" },\n                                { text: \"\u6a31\u6843\", result: \"B\" }\n                            ]\n                        },\n                        {\n                            id: 9,\n                            text: \"\u4e0b\u9762\u51e0\u79cd\u83dc\uff0c\u4f60\u6700\u559c\u6b22\u4ec0\u4e48\u83dc\uff1f\",\n                            options: [\n                                { text: \"\u8089\u7c7b\", result: \"C\" },\n                                { text: \"\u852c\u83dc\u7c7b\", result: \"D\" },\n                                { text: \"\u6d77\u9c9c\u7c7b\", result: \"A\" }\n                            ]\n                        },\n                        {\n                            id: 10,\n                            text: \"\u4e0b\u9762\u51e0\u79cd\u8138\u578b\uff0c\u4f60\u6700\u559c\u6b22\u54ea\u4e00\u79cd\uff1f\",\n                            options: [\n                                { text: \"\u74dc\u5b50\u8138\", result: \"B\" },\n                                { text: \"\u9e45\u86cb\u8138\", result: \"C\" },\n                                { text: \"\u5706\u8138\", result: \"D\" }\n                            ]\n                        }\n                    ];\n\n                    this.results = {\n                        A: {\n                            title: \"\u52ab\u6570\",\n                            subtitle: \"\u98ce\u96e8\u4e4b\u540e\u89c1\u5f69\u8679\",\n                            description: \"\u5f88\u591a\u4eba\u5728\u9047\u5230\u610f\u4e2d\u4eba\u65f6\uff0c\u90fd\u4f1a\u5e0c\u671b\u5b83\u662f\u597d\u7684\u7f18\u5206\uff0c\u4f46\u662f\u6709\u65f6\u5019\u603b\u662f\u4e8b\u4e0e\u613f\u8fdd\u3002\u4f60\u5c31\u662f\u5982\u6b64\uff0c\u54ea\u6015\u4f60\u77e5\u9053\u81ea\u5df1\u8981\u7684\u662f\u4ec0\u4e48\uff0c\u4ec0\u4e48\u4e0d\u80fd\u8981\uff0c\u4e5f\u96be\u514d\u4f1a\u6709\u5931\u53bb\u7406\u667a\u7684\u65f6\u5019\u3002\u4e0b\u4e00\u6bb5\u7231\u60c5\u4e5f\u662f\u5982\u6b64\uff0c\u4f60\u8ba4\u4e3a\u662f\u7f18\uff0c\u53ef\u80fd\u662f\u6f5c\u85cf\u7684\u52ab\u3002\u4f46\u6b63\u5982\u300c\u98ce\u96e8\u5f69\u8679\u300d\uff0c\u6216\u8bb8\u53ea\u6709\u6e21\u8fc7\u52ab\u6570\uff0c\u624d\u80fd\u9047\u89c1\u771f\u6b63\u5c5e\u4e8e\u4f60\u7684\u7f18\u5206\u3002\",\n                            scores: { \u6210\u957f\u6307\u6570: 85, \u6311\u6218\u6307\u6570: 90, \u7f18\u5206\u6307\u6570: 40, \u5e78\u798f\u6f5c\u529b: 60 }\n                        },\n                        B: {\n                            title: \"\u5148\u52ab\u540e\u7f18\",\n                            subtitle: \"\u78e8\u5408\u4e4b\u540e\u89c1\u771f\u60c5\",\n                            description: \"\u5f88\u5c11\u6709\u4eba\u7684\u7231\u60c5\u662f\u4e00\u5e06\u98ce\u987a\u7684\uff0c\u4f60\u4e5f\u662f\u5982\u6b64\uff0c\u6709\u65f6\u5019\u515c\u515c\u8f6c\u8f6c\uff0c\u8fd8\u662f\u8fd9\u4e2a\u4eba\u3002\u4f46\u662f\u4e24\u4e2a\u4eba\u5728\u4fee\u6210\u6b63\u679c\u4e4b\u524d\uff0c\u771f\u7684\u8981\u597d\u597d\u78e8\u5408\u4e00\u4e0b\uff0c\u4f60\u7684\u4e0b\u6bb5\u7231\u60c5\uff0c\u770b\u8d77\u6765\u662f\u52ab\u6570\uff0c\u8ba9\u4f60\u60f3\u907f\u5f00\uff0c\u4f46\u662f\u6162\u6162\u7684\uff0c\u4f60\u53d1\u73b0\uff0c\u5b83\u5176\u5b9e\u662f\u4f60\u7684\u7f18\u5206\uff0c\u5c31\u770b\u4f60\u81ea\u5df1\u600e\u4e48\u628a\u63e1\u3002\",\n                            scores: { \u6210\u957f\u6307\u6570: 75, \u6311\u6218\u6307\u6570: 70, \u7f18\u5206\u6307\u6570: 65, \u5e78\u798f\u6f5c\u529b: 80 }\n                        },\n                        C: {\n                            title: \"\u7f18\u5206\",\n                            subtitle: \"\u771f\u7231\u5373\u5c06\u964d\u4e34\",\n                            description: \"\u5bf9\u4e8e\u4f60\u6765\u8bf4\uff0c\u4f60\u603b\u662f\u8981\u5386\u7ecf\u4e00\u4e9b\u52ab\u6570\uff0c\u624d\u80fd\u9047\u5f97\u5230\u7231\u60c5\u7684\u3002\u56e0\u4e3a\u8fd9\u6837\u4f60\u624d\u4f1a\u660e\u767d\uff0c\u4ec0\u4e48\u6837\u7684\u4eba\u9002\u5408\u4f60\u3002\u800c\u4f60\u4e4b\u524d\u5df2\u7ecf\u7ecf\u5386\u8fc7\u4e00\u4e9b\u611f\u60c5\u7684\u574e\u5777\u4e86\uff0c\u4f60\u4e5f\u4e00\u76f4\u8ba4\u4e3a\u53ef\u80fd\u9047\u4e0d\u5230\u7231\u60c5\u4e86\u3002\u4f46\u662f\u4e0d\u8981\u7070\u5fc3\uff0c\u4e0b\u6bb5\u7231\u60c5\u51fa\u73b0\u7684\u65f6\u5019\uff0c\u52c7\u6562\u5730\u6293\u4f4f\u5b83\u5427\u3002\",\n                            scores: { \u6210\u957f\u6307\u6570: 60, \u6311\u6218\u6307\u6570: 30, \u7f18\u5206\u6307\u6570: 90, \u5e78\u798f\u6f5c\u529b: 95 }\n                        },\n                        D: {\n                            title: \"\u5148\u7f18\u540e\u52ab\",\n                            subtitle: \"\u751c\u871c\u4e4b\u540e\u9700\u7ecf\u8425\",\n                            description: \"\u4e0b\u4e00\u6bb5\u7231\u60c5\u770b\u8d77\u6765\u662f\u7f18\u5206\uff0c\u4f60\u4eec\u4f1a\u76f8\u5904\u5f97\u5f88\u597d\u5462\uff0c\u4f46\u4e0d\u5f97\u4e0d\u8bf4\uff0c\u5982\u679c\u524d\u671f\u6ca1\u6709\u78e8\u5408\u8fc7\uff0c\u540e\u671f\u7ed3\u5a5a\u4e4b\u540e\uff0c\u4e00\u5b9a\u4f1a\u4ea7\u751f\u6469\u64e6\u7684\uff0c\u5230\u65f6\u5019\u4f60\u624d\u4f1a\u660e\u767d\uff0c\u539f\u6765\u8fd9\u662f\u4e00\u79cd\u52ab\u6570\u3002\u53ea\u6709\u7ecf\u5386\u52ab\u6570\u7684\u8270\u8f9b\uff0c\u4f60\u624d\u80fd\u83b7\u5f97\u6210\u957f\u3002\",\n                            scores: { \u6210\u957f\u6307\u6570: 70, \u6311\u6218\u6307\u6570: 60, \u7f18\u5206\u6307\u6570: 75, \u5e78\u798f\u6f5c\u529b: 70 }\n                        }\n                    };\n\n                    this.currentQuestion = 1;\n                    this.answers = [];\n                    this.chartInstance = null;\n\n                    this.init();\n                }\n\n                init() {\n                    this.attachEventListeners();\n                }\n\n                attachEventListeners() {\n                    \/\/ \u5f00\u59cb\u6d4b\u9a8c\n                    document.querySelector('[data-action=\"start-quiz\"]').addEventListener('click', () => {\n                        this.startQuiz();\n                    });\n\n                    \/\/ \u91cd\u65b0\u6d4b\u8bd5\n                    document.querySelector('[data-action=\"restart-quiz\"]').addEventListener('click', () => {\n                        this.restartQuiz();\n                    });\n\n                    \/\/ \u4e0a\u4e00\u9898\n                    document.querySelector('[data-action=\"prev-question\"]').addEventListener('click', () => {\n                        this.previousQuestion();\n                    });\n                }\n\n                startQuiz() {\n                    this.introSection.classList.add('d-none');\n                    this.quizSection.classList.remove('d-none');\n                    this.currentQuestion = 1;\n                    this.answers = [];\n                    this.showQuestion(this.currentQuestion);\n                    this.scrollToTop();\n                }\n\n                showQuestion(questionId) {\n                    const question = this.questions.find(q => q.id === questionId);\n                    if (!question) return;\n\n                    \/\/ \u66f4\u65b0\u8fdb\u5ea6\n                    const progress = (this.answers.length + 1) \/ 10 * 100;\n                    document.querySelector('[data-current-question]').textContent = this.answers.length + 1;\n                    document.querySelector('[data-progress-percent]').textContent = Math.round(progress);\n                    document.querySelector('[data-progress-bar]').style.width = `${progress}%`;\n\n                    \/\/ \u663e\u793a\u95ee\u9898\n                    document.querySelector('[data-question-text]').textContent = question.text;\n\n                    \/\/ \u663e\u793a\u9009\u9879 - \u79fb\u9664\u4e86\u52a8\u753b\u5ef6\u8fdf\n                    const container = document.querySelector('[data-options-container]');\n                    container.innerHTML = '';\n                    \n                    question.options.forEach((option) => {\n                        const button = document.createElement('button');\n                        button.className = 'btn quiz-option-btn w-100';\n                        button.innerHTML = `<i class=\"bi bi-circle me-3\"><\/i>${option.text}`;\n                        button.addEventListener('click', () => this.selectOption(option));\n                        container.appendChild(button);\n                    });\n\n                    \/\/ \u63a7\u5236\u4e0a\u4e00\u9898\u6309\u94ae\n                    const prevBtn = document.querySelector('[data-action=\"prev-question\"]');\n                    if (this.answers.length > 0) {\n                        prevBtn.classList.remove('d-none');\n                    } else {\n                        prevBtn.classList.add('d-none');\n                    }\n                }\n\n                selectOption(option) {\n                    \/\/ \u8bb0\u5f55\u7b54\u6848\n                    this.answers.push({\n                        questionId: this.currentQuestion,\n                        option: option\n                    });\n\n                    \/\/ \u68c0\u67e5\u662f\u5426\u6709\u7ed3\u679c\n                    if (option.result) {\n                        this.showResult(option.result);\n                    } else if (option.next) {\n                        this.currentQuestion = option.next;\n                        this.showQuestion(this.currentQuestion);\n                    }\n                }\n\n                previousQuestion() {\n                    if (this.answers.length > 0) {\n                        const lastAnswer = this.answers.pop();\n                        this.currentQuestion = lastAnswer.questionId;\n                        this.showQuestion(this.currentQuestion);\n                    }\n                }\n\n                showResult(resultKey) {\n                    const result = this.results[resultKey];\n                    \n                    this.quizSection.classList.add('d-none');\n                    this.resultSection.classList.remove('d-none');\n                    \n                    \/\/ \u663e\u793a\u7ed3\u679c\u5185\u5bb9\n                    document.querySelector('[data-result-title]').textContent = result.title;\n                    document.querySelector('[data-result-subtitle]').textContent = result.subtitle;\n                    document.querySelector('[data-result-description]').textContent = result.description;\n                    \n                    \/\/ \u7ed8\u5236\u56fe\u8868\n                    this.drawChart(result.scores);\n                    this.scrollToTop();\n                }\n\n                drawChart(scores) {\n                    \/\/ \u9500\u6bc1\u65e7\u56fe\u8868\n                    if (this.chartInstance) {\n                        this.chartInstance.destroy();\n                    }\n\n                    const ctx = document.getElementById('resultChart').getContext('2d');\n                    const labels = Object.keys(scores);\n                    const data = Object.values(scores);\n\n                    this.chartInstance = new Chart(ctx, {\n                        type: 'radar',\n                        data: {\n                            labels: labels,\n                            datasets: [{\n                                label: '\u4f60\u7684\u7231\u60c5\u6307\u6570',\n                                data: data,\n                                borderColor: 'rgba(118, 75, 162, 1)',\n                                backgroundColor: 'rgba(118, 75, 162, 0.2)',\n                                pointBackgroundColor: 'rgba(118, 75, 162, 1)',\n                                pointBorderColor: '#fff',\n                                pointHoverBackgroundColor: '#fff',\n                                pointHoverBorderColor: 'rgba(118, 75, 162, 1)',\n                                borderWidth: 2,\n                                pointRadius: 6,\n                                pointHoverRadius: 8\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.dataset.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: '#495057'\n                                    },\n                                    grid: {\n                                        color: 'rgba(0, 0, 0, 0.1)'\n                                    }\n                                }\n                            }\n                        }\n                    });\n                }\n\n                restartQuiz() {\n                    if (this.chartInstance) {\n                        this.chartInstance.destroy();\n                        this.chartInstance = null;\n                    }\n                    \n                    this.resultSection.classList.add('d-none');\n                    this.introSection.classList.remove('d-none');\n                    this.currentQuestion = 1;\n                    this.answers = [];\n                    this.scrollToTop();\n                }\n\n                scrollToTop() {\n                    window.scrollTo({\n                        top: this.introSection.offsetTop - 100,\n                        behavior: 'smooth'\n                    });\n                }\n            }\n\n            \/\/ \u521d\u59cb\u5316\u6d4b\u9a8c\n            document.addEventListener('DOMContentLoaded', () => {\n                new LoveFateQuiz();\n            });\n        })();\n    <\/script>","protected":false},"excerpt":{"rendered":"<p>\u7231\u4e0a\u4e00\u4e2a\u4eba\u53ef\u4ee5\u662f\u7f18\u5206\uff0c\u4e5f\u53ef\u4ee5\u662f\u707e\u96be\u3002\u4e0d\u77e5\u9053\u4f60\u7684\u4e0b\u4e00\u6bb5\u7231\u60c5\uff0c\u662f\u7f18\u8fd8\u662f\u52ab\u5462\uff1f\u6765\u505a\u4e2a\u6d4b\u8bd5\u770b\u770b\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":"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],"tags":[],"class_list":["post-2461","post","type-post","status-publish","format-standard","hentry","category-love"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2461","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=2461"}],"version-history":[{"count":1,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2461\/revisions"}],"predecessor-version":[{"id":10488,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2461\/revisions\/10488"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2461"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2461"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2461"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}