{"id":2580,"date":"2023-10-18T09:47:57","date_gmt":"2023-10-18T01:47:57","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2580"},"modified":"2025-08-21T01:57:43","modified_gmt":"2025-08-20T17:57:43","slug":"who-likes-you","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/who-likes-you","title":{"rendered":"\u5c0f\u6d4b\u9a8c\uff1a\u8c01\u5728\u6697\u604b\u4f60\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<!-- \u5f15\u5c0e\u9801 -->\n<section id=\"quizintro9\" data-page=\"intro9\" class=\"container my-5\">\n    <div class=\"row justify-content-center\">\n        <div class=\"col-12 col-md-10 col-lg-8\">\n            <header class=\"text-center mb-5\">\n                <h2 class=\"display-4 fw-bold text-primary mb-3\">\u8ab0\u5728\u6697\u6200\u4f60\uff1f<\/h2>\n                <p class=\"lead text-muted\">\u63a2\u7d22\u4f60\u8eab\u908a\u96b1\u85cf\u7684\u611b\u6155\u8005<\/p>\n            <\/header>\n            \n            <div class=\"row g-4 mb-5\">\n                <div class=\"col-6 col-md-3\">\n                    <div class=\"text-center\">\n                        <div class=\"rounded-circle bg-primary bg-opacity-10 p-4 mx-auto\" style=\"width: 100px; height: 100px; display: flex; align-items: center; justify-content: center;\">\n                            <i class=\"bi bi-heart-fill text-primary fs-1\"><\/i>\n                        <\/div>\n                        <p class=\"mt-3 small fw-semibold\">\u767c\u73fe\u6697\u6200<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"col-6 col-md-3\">\n                    <div class=\"text-center\">\n                        <div class=\"rounded-circle bg-success bg-opacity-10 p-4 mx-auto\" style=\"width: 100px; height: 100px; display: flex; align-items: center; justify-content: center;\">\n                            <i class=\"bi bi-people-fill text-success fs-1\"><\/i>\n                        <\/div>\n                        <p class=\"mt-3 small fw-semibold\">\u77ad\u89e3\u95dc\u4fc2<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"col-6 col-md-3\">\n                    <div class=\"text-center\">\n                        <div class=\"rounded-circle bg-info bg-opacity-10 p-4 mx-auto\" style=\"width: 100px; height: 100px; display: flex; align-items: center; justify-content: center;\">\n                            <i class=\"bi bi-stars text-info fs-1\"><\/i>\n                        <\/div>\n                        <p class=\"mt-3 small fw-semibold\">\u63a2\u7d22\u53ef\u80fd<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"col-6 col-md-3\">\n                    <div class=\"text-center\">\n                        <div class=\"rounded-circle bg-warning bg-opacity-10 p-4 mx-auto\" style=\"width: 100px; height: 100px; display: flex; align-items: center; justify-content: center;\">\n                            <i class=\"bi bi-lightbulb-fill text-warning fs-1\"><\/i>\n                        <\/div>\n                        <p class=\"mt-3 small fw-semibold\">\u7372\u5f97\u6d1e\u5bdf<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <article class=\"mb-5\">\n                <div class=\"card border-0 shadow-sm\">\n                    <div class=\"card-body p-4\">\n                        <p class=\"fs-5 mb-3\">\u6697\u6200\uff0c\u662f\u4e00\u7a2e\u4e0d\u660e\u8aaa\u7684\u6200\u611b\u60c5\u611f\uff0c\u5f88\u591a\u6642\u5019\u90fd\u662f\u4ee5\u96b1\u533f\u7684\u65b9\u5f0f\u85cf\u5728\u67d0\u500b\u4eba\u7684\u5fc3\u4e2d\u3002<\/p>\n                        <p class=\"mb-3\">\u5f88\u591a\u6642\u5019\uff0c\u6211\u5011\u90fd\u5728\u627e\u559c\u6b61\u81ea\u5df1\u7684\u4eba\uff0c\u53ef\u6700\u6709\u53ef\u80fd\u6703\u559c\u6b61\u81ea\u5df1\u7684\uff0c\u4e0d\u5c31\u662f\u5728\u81ea\u5df1\u7684\u8eab\u908a\u55ce\uff1f\u7562\u7adf\u77ad\u89e3\u76f8\u8655\u904e\uff0c\u66f4\u5bb9\u6613\u6703\u840c\u751f\u6200\u60c5\u7684\u60c5\u612b\u3002<\/p>\n                        <p class=\"fw-semibold text-primary\">\u90a3\u9ebc\uff0c\u4f60\u8eab\u908a\u54ea\u500bTA\u6700\u6709\u53ef\u80fd\u6697\u6200\u4f60\uff1f\u505a\u500b\u6e2c\u8a66\u770b\u770b\u5427\u3002<\/p>\n                    <\/div>\n                <\/div>\n            <\/article>\n            \n            <div class=\"text-center\">\n                <button type=\"button\" data-start-quiz=\"true\" class=\"btn btn-primary btn-lg px-5 py-3 rounded-pill shadow\">\n                    <span class=\"fs-5\">\u5f00\u59cb\u6d4b\u9a8c<\/span>\n                    <i class=\"bi bi-arrow-right-circle-fill ms-2\"><\/i>\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- \u6e2c\u9a57\u9801 -->\n<section id=\"quizmain9\" data-page=\"quiz9\" class=\"container my-5 d-none\">\n    <div class=\"row justify-content-center\">\n        <div class=\"col-12 col-md-10 col-lg-8\">\n            <header class=\"text-center mb-4\">\n                <h2 class=\"h3 fw-bold\">\u8ab0\u5728\u6697\u6200\u4f60\uff1f\u5fc3\u7406\u6e2c\u9a57<\/h2>\n            <\/header>\n            \n            <div class=\"progress mb-4\" style=\"height: 8px;\">\n                <div class=\"progress-bar bg-primary\" data-progress-bar role=\"progressbar\" style=\"width: 10%\"><\/div>\n            <\/div>\n            \n            <div class=\"text-center mb-4\">\n                <span class=\"badge bg-primary fs-6 px-3 py-2\" data-question-counter>\u554f\u984c 1 \/ 10<\/span>\n            <\/div>\n            \n            <div data-question-container>\n                <h3 class=\"h4 fw-bold mb-4\" data-question-text><\/h3>\n                <div data-options-container class=\"d-grid gap-3\">\n                    <!-- \u9078\u9805\u5c07\u52d5\u614b\u751f\u6210 -->\n                <\/div>\n            <\/div>\n            \n            <div class=\"text-center mt-4\">\n                <button type=\"button\" data-prev-btn class=\"btn btn-outline-secondary d-none\">\n                    <i class=\"bi bi-arrow-left-circle 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 my-5 d-none\">\n    <div class=\"row justify-content-center\">\n        <div class=\"col-12 col-md-10 col-lg-8\">\n            <header class=\"text-center mb-5\">\n                <h2 class=\"display-5 fw-bold text-primary\">\u6d4b\u9a8c\u7ed3\u679c<\/h2>\n                <p class=\"lead text-muted\" data-result-title><\/p>\n            <\/header>\n            \n            <div class=\"row mb-5\">\n                <div class=\"col-12 col-md-6 mx-auto\">\n                    <div class=\"card border-0 shadow-sm mb-4\">\n                        <div class=\"card-body p-4 text-center\">\n                            <canvas id=\"resultChart\" width=\"300\" height=\"300\"><\/canvas>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <article class=\"mb-5\">\n                <div class=\"card border-0 shadow-sm\">\n                    <div class=\"card-body p-4\">\n                        <h3 class=\"h4 fw-bold mb-3 text-primary\" data-result-type><\/h3>\n                        <div data-result-description class=\"fs-5\"><\/div>\n                    <\/div>\n                <\/div>\n            <\/article>\n            \n            <div class=\"text-center\">\n                <button type=\"button\" data-restart-quiz class=\"btn btn-primary btn-lg px-5 py-3 rounded-pill shadow\">\n                    <i class=\"bi bi-arrow-clockwise me-2\"><\/i>\n                    <span class=\"fs-5\">\u91cd\u65b0\u6d4b\u8bd5<\/span>\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- CSS -->\n<style>\n    \/* \u57fa\u790e\u6a23\u5f0f *\/\n    [id^=\"quiz\"] {\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n        min-height: 100vh;\n        padding: 2rem 0;\n    }\n    \n    \/* \u9078\u9805\u5361\u7247\u6a23\u5f0f *\/\n    .option-card {\n        position: relative;\n        background: #fff;\n        border: 2px solid #e9ecef;\n        border-radius: 12px;\n        padding: 1.25rem 1.25rem 1.25rem 3.5rem;\n        transition: all 0.3s ease;\n        cursor: pointer;\n        min-height: 60px;\n        display: flex;\n        align-items: center;\n        font-size: 18px;\n        color: #212529;\n    }\n    \n    .option-card:hover {\n        background: #f8f9fa;\n        border-color: #0d6efd;\n        transform: translateY(-2px);\n        box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15);\n    }\n    \n    .option-card::before {\n        content: '';\n        position: absolute;\n        left: 1rem;\n        top: 50%;\n        transform: translateY(-50%);\n        width: 24px;\n        height: 24px;\n        border: 2px solid #dee2e6;\n        border-radius: 50%;\n        background: white;\n        transition: all 0.3s ease;\n    }\n    \n    .option-card.selected {\n        background: #e7f3ff;\n        border-color: #0d6efd;\n    }\n    \n    .option-card.selected::before {\n        background: #0d6efd;\n        border-color: #0d6efd;\n    }\n    \n    .option-card.selected::after {\n        content: '\\2713';\n        position: absolute;\n        left: 1.3rem;\n        top: 50%;\n        transform: translateY(-50%);\n        color: white;\n        font-weight: bold;\n        font-size: 14px;\n    }\n    \n    \/* \u52d5\u756b\u6548\u679c *\/\n    .fade-in {\n        animation: fadeIn 0.5s ease-in;\n    }\n    \n    @keyframes fadeIn {\n        from { opacity: 0; transform: translateY(10px); }\n        to { opacity: 1; transform: translateY(0); }\n    }\n    \n    \/* \u97ff\u61c9\u5f0f\u8a2d\u8a08 *\/\n    @media (max-width: 768px) {\n        [id^=\"quiz\"] {\n            padding: 1rem 0;\n        }\n        \n        .display-4 {\n            font-size: 2rem;\n        }\n        \n        .option-card {\n            font-size: 16px;\n            padding: 1rem 1rem 1rem 3rem;\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.currentQuestion = 1;\n            this.answers = {};\n            this.chart = null;\n            \n            \/\/ \u554f\u984c\u908f\u8f2f\u6620\u5c04\n            this.questions = {\n                1: {\n                    text: '\u4f60\u9592\u8457\u6c92\u4e8b\u6703\u5e38\u5230\u5716\u66f8\u9928\u770b\u66f8\u55ce\uff1f',\n                    options: [\n                        { text: '\u6c92\u6709', next: 2 },\n                        { text: '\u662f\u7684', next: 3 },\n                        { text: '\u9084\u597d', next: 4 }\n                    ]\n                },\n                2: {\n                    text: '\u4f60\u662f\u5426\u66f4\u9858\u610f\u5230\u5927\u57ce\u5e02\u767c\u5c55\uff1f',\n                    options: [\n                        { text: '\u4e0d\u662f', next: 5 },\n                        { text: '\u54ea\u5152\u90fd\u884c', next: 6 },\n                        { text: '\u662f\u7684', next: 7 }\n                    ]\n                },\n                3: {\n                    text: '\u4ee5\u4e0b\u7684\u8077\u696d\u4e2d\uff0c\u4f60\u66f4\u559c\u6b61\u54ea\u500b\uff1f',\n                    options: [\n                        { text: '\u7d93\u7d00\u4eba', next: 2 },\n                        { text: '\u79d1\u7814', next: 7 },\n                        { text: '\u7a7a\u4e58', next: 6 }\n                    ]\n                },\n                4: {\n                    text: '\u4f60\u5728\u8cb7\u8863\u670d\u6642\uff0c\u6703\u504f\u611b\u4ee5\u4e0b\u54ea\u500b\u8272\uff1f',\n                    options: [\n                        { text: '\u767d\u8272', next: 2 },\n                        { text: '\u85cd\u8272', next: 3 },\n                        { text: '\u7d05\u8272', next: 7 }\n                    ]\n                },\n                5: {\n                    text: '\u4ee5\u4e0b\u7684\u5973\u6027\u4e2d\uff0c\u4f60\u6bd4\u8f03\u5d07\u62dc\u54ea\u500b\uff1f',\n                    options: [\n                        { text: '\u6b66\u5247\u5929', next: 8 },\n                        { text: '\u897f\u65bd', next: 9 },\n                        { text: '\u8c82\u87ec', next: 10 }\n                    ]\n                },\n                6: {\n                    text: '\u4f60\u5e73\u6642\u559c\u6b61\u548c\u670b\u53cb\u4e00\u8d77\u5403\u559d\u73a9\u6a02\u55ce\uff1f',\n                    options: [\n                        { text: '\u662f\u7684', next: 5 },\n                        { text: '\u4e0d\u662f', next: 8 },\n                        { text: '\u9084\u597d', next: 9 }\n                    ]\n                },\n                7: {\n                    text: '\u4f60\u6700\u60f3\u81ea\u5df1\u672a\u4f86\u80fd\u64c1\u6709\u4ee5\u4e0b\u4ec0\u9ebc\uff1f',\n                    options: [\n                        { text: '\u7528\u4e0d\u5b8c\u7684\u9322', next: 6 },\n                        { text: '\u7f8e\u6eff\u7684\u5bb6\u5ead', next: 9 },\n                        { text: '\u611b\u60c5\u4e8b\u696d\u96d9\u8c50\u6536', next: 5 }\n                    ]\n                },\n                8: {\n                    text: '\u4f60\u5e73\u6642\u6703\u4e3b\u52d5\u53bb\u7d50\u8b58\u65b0\u670b\u53cb\u55ce\uff1f',\n                    options: [\n                        { text: '\u770b\u60c5\u6cc1', result: 'C' },\n                        { text: '\u6703\u7684', result: 'A' },\n                        { text: '\u4e0d\u6703', result: 'B' }\n                    ]\n                },\n                9: {\n                    text: '\u4f60\u89ba\u5f97\u81ea\u5df1\u7684\u6027\u683c\u5916\u5411\u55ce\uff1f',\n                    options: [\n                        { text: '\u4e0d\u662f', next: 8 },\n                        { text: '\u662f\u7684', next: 10 },\n                        { text: '\u9084\u597d', result: 'B' }\n                    ]\n                },\n                10: {\n                    text: '\u7576\u6709\u964c\u751f\u4eba\u8ddf\u4f60\u71b1\u60c5\u6253\u62db\u547c\uff0c\u4f60\u4e5f\u6703\u71b1\u60c5\u56de\u61c9\u55ce\uff1f',\n                    options: [\n                        { text: '\u770b\u60c5\u6cc1', result: 'C' },\n                        { text: '\u662f\u7684', result: 'D' },\n                        { text: '\u4e0d\u6703', result: 'A' }\n                    ]\n                }\n            };\n            \n            this.results = {\n                'A': {\n                    title: '\u77e5\u5df1\u85cd\u984f',\n                    description: '\u5e73\u6642\u4f60\u7684\u4eba\u7de3\u5c31\u5f88\u597d\uff0c\u5f85\u4eba\u53cb\u5584\uff0c\u7e3d\u80fd\u8ddf\u5f88\u591a\u4eba\u9054\u6210\u4e00\u7247\uff0c\u4f60\u8eab\u908a\u7684\u670b\u53cb\u4e5f\u591a\u3002\u9019\u6a23\u7684\u4f60\uff0c\u5728\u670b\u53cb\u7684\u773c\u88e1\u6709\u8457\u6bd4\u8f03\u597d\u7684\u8a55\u50f9\uff0c\u4e0d\u6703\u6d6e\u8a87\u53c8\u597d\u76f8\u8655\uff0c\u662f\u500b\u6bd4\u8f03\u7279\u5225\u7684\u4eba\u3002\u800c\u548c\u4f60\u76f8\u8655\u591a\u4e86\uff0c\u6703\u4f60\u6709\u9032\u4e00\u6b65\u77ad\u89e3\u7684\u77e5\u5df1\u85cd\u984f\u5011\uff0c\u5c31\u80fd\u611f\u53d7\u5230\u4f60\u7684\u9b45\u529b\u3002\u6240\u4ee5\u6697\u6200\u4f60\u7684TA\uff0c\u6700\u6709\u53ef\u80fd\u5c31\u662f\u96b1\u85cf\u5728\u77e5\u5df1\u85cd\u984f\u7576\u4e2d\u3002'\n                },\n                'B': {\n                    title: '\u540c\u5b78\u6821\u53cb',\n                    description: '\u4f60\u5728\u5b78\u751f\u6642\u4ee3\u662f\u500b\u6bd4\u8f03\u8000\u773c\u53c8\u512a\u79c0\u7684\u4eba\uff0c\u4e0d\u7ba1\u5728\u73ed\u7d1a\u3001\u5e74\u7d1a\uff0c\u9084\u662f\u5b78\u6821\u4e2d\uff0c\u4f60\u901a\u5e38\u90fd\u5099\u53d7\u5927\u5bb6\u7684\u77da\u76ee\u3002\u9019\u6a23\u7684\u4f60\uff0c\u5176\u5be6\u65e9\u5c31\u5728\u540c\u5b78\u6216\u662f\u6821\u53cb\u7576\u4e2d\u7559\u4e0b\u7f8e\u597d\u7684\u5370\u8c61\u3002\u5373\u4fbf\u4e0d\u80fd\u8ac7\u4e00\u5834\u6821\u5712\u611b\u60c5\uff0c\u5728\u8e0f\u5165\u793e\u6703\u4e4b\u5f8c\uff0c\u518d\u6b21\u9082\u9005\u9047\u898b\u4f60\uff0c\u5c0d\u65b9\u9084\u662f\u6703\u5fcd\u4e0d\u4f4f\u6709\u5fc3\u52d5\u7684\u611f\u89ba\u3002\u800c\u6697\u6200\u4f60\u7684TA\uff0c\u5f88\u53ef\u80fd\u5c31\u5728\u540c\u5b78\u6216\u662f\u6821\u53cb\u7576\u4e2d\u3002'\n                },\n                'C': {\n                    title: '\u7570\u6027\u597d\u53cb',\n                    description: '\u4f60\u672c\u8eab\u5c31\u662f\u500b\u689d\u4ef6\u4e0d\u932f\u7684\u4eba\uff0c\u5728\u5225\u4eba\u773c\u4e2d\u770b\u4f86\u5c31\u662f\u512a\u79c0\u7684\u985e\u578b\u3002\u4f60\u6e3e\u8eab\u90fd\u6563\u767c\u8457\u967d\u5149\u7684\u6b63\u80fd\u91cf\uff0c\u5e73\u65e5\u7684\u4f60\u5c31\u5f88\u559c\u6b61\u7b11\uff0c\u5f88\u591a\u4eba\u90fd\u5bb9\u6613\u88ab\u4f60\u9019\u6a23\u967d\u5149\u7684\u4e00\u9762\u611f\u67d3\uff0c\u559c\u6b61\u548c\u4f60\u76f8\u8655\u3002\u9019\u6a23\u7684\u4f60\uff0c\u6700\u5bb9\u6613\u5c31\u662f\u5438\u5f15\u5230\u8eab\u908a\u7684\u7570\u6027\u597d\u53cb\u7684\u559c\u6b61\uff0c\u56e0\u70ba\u4f60\u7b11\u8d77\u4f86\u662f\u90a3\u6a23\u7684\u8ff7\u4eba\u554a\u3002\u6240\u4ee5\u6697\u6200\u4f60\u7684TA\uff0c\u5f88\u6709\u53ef\u80fd\u6703\u85cf\u5728\u7570\u6027\u597d\u53cb\u4e2d\u3002'\n                },\n                'D': {\n                    title: '\u671d\u5915\u76f8\u8655\u7684TA',\n                    description: '\u4f60\u4e26\u4e0d\u662f\u5f35\u63da\u7684\u4eba\uff0c\u4e5f\u4e0d\u6703\u505a\u4e9b\u4ec0\u9ebc\u8f5f\u8f5f\u70c8\u70c8\u7684\u8209\u52d5\u3002\u4f60\u5c6c\u65bc\u8e0f\u5be6\u52e4\u596e\u7684\u985e\u578b\uff0c\u5e73\u65e5\u505a\u4e8b\u7e3d\u662f\u4e00\u7d72\u4e0d\u82df\u3002\u5e73\u65e5\u7684\u4f60\uff0c\u5c31\u50cf\u662f\u4e00\u584a\u749e\u7389\uff0c\u9700\u8981\u6162\u6162\u76f8\u8655\u624d\u80fd\u767c\u73fe\u5230\u4f60\u7684\u9b45\u529b\u3002\u6240\u4ee5\u77ed\u6642\u9593\u7684\u76f8\u8655\uff0c\u4f60\u4e26\u4e0d\u80fd\u7d66\u5c0d\u65b9\u5f88\u9583\u4eae\u7684\u5370\u8c61\u3002\u4e0d\u904e\u548c\u4f60\u671d\u5915\u76f8\u8655\u7684\u5c31\u4e0d\u4e00\u6a23\uff0c\u4ed6\u5011\u61c2\u5f97\u4f60\u7684\u7f8e\uff0c\u800c\u6697\u6200\u4f60\u7684\u4eba\uff0c\u4e5f\u6700\u6709\u53ef\u80fd\u6703\u5728\u9019\u4e9b\u4eba\u7576\u4e2d\u3002'\n                }\n            };\n            \n            this.init();\n        }\n        \n        init() {\n            \/\/ \u7de9\u5b58DOM\u5143\u7d20\n            this.introPage = document.querySelector('[data-page=\"intro9\"]');\n            this.quizPage = document.querySelector('[data-page=\"quiz9\"]');\n            this.resultPage = document.querySelector('[data-page=\"result9\"]');\n            \n            this.questionText = document.querySelector('[data-question-text]');\n            this.optionsContainer = document.querySelector('[data-options-container]');\n            this.questionCounter = document.querySelector('[data-question-counter]');\n            this.progressBar = document.querySelector('[data-progress-bar]');\n            this.prevBtn = document.querySelector('[data-prev-btn]');\n            \n            this.bindEvents();\n        }\n        \n        bindEvents() {\n            \/\/ \u958b\u59cb\u6e2c\u9a57\n            document.querySelector('[data-start-quiz]').addEventListener('click', () => {\n                this.startQuiz();\n            });\n            \n            \/\/ \u91cd\u65b0\u6e2c\u9a57\n            document.querySelector('[data-restart-quiz]').addEventListener('click', () => {\n                this.restartQuiz();\n            });\n            \n            \/\/ \u4e0a\u4e00\u984c\n            this.prevBtn.addEventListener('click', () => {\n                this.goToPreviousQuestion();\n            });\n            \n            \/\/ \u9078\u9805\u9ede\u64ca\u4e8b\u4ef6\u59d4\u8a17\n            this.optionsContainer.addEventListener('click', (e) => {\n                const optionCard = e.target.closest('.option-card');\n                if (optionCard) {\n                    this.selectOption(optionCard);\n                }\n            });\n        }\n        \n        startQuiz() {\n            this.introPage.classList.add('d-none');\n            this.quizPage.classList.remove('d-none');\n            this.quizPage.classList.add('fade-in');\n            this.showQuestion(1);\n            this.scrollToTop();\n        }\n        \n        showQuestion(questionId) {\n            const question = this.questions[questionId];\n            if (!question) return;\n            \n            this.currentQuestion = questionId;\n            this.questionText.textContent = question.text;\n            this.questionCounter.textContent = `\u554f\u984c ${Object.keys(this.answers).length + 1} \/ 10`;\n            this.progressBar.style.width = `${(Object.keys(this.answers).length + 1) * 10}%`;\n            \n            \/\/ \u986f\u793a\/\u96b1\u85cf\u4e0a\u4e00\u984c\u6309\u9215\n            if (Object.keys(this.answers).length > 0) {\n                this.prevBtn.classList.remove('d-none');\n            } else {\n                this.prevBtn.classList.add('d-none');\n            }\n            \n            \/\/ \u751f\u6210\u9078\u9805\n            this.optionsContainer.innerHTML = '';\n            question.options.forEach((option, index) => {\n                const optionCard = document.createElement('button');\n                optionCard.className = 'option-card text-start w-100';\n                optionCard.textContent = option.text;\n                optionCard.dataset.optionIndex = index;\n                this.optionsContainer.appendChild(optionCard);\n            });\n        }\n        \n        selectOption(optionCard) {\n            const optionIndex = parseInt(optionCard.dataset.optionIndex);\n            const question = this.questions[this.currentQuestion];\n            const selectedOption = question.options[optionIndex];\n            \n            \/\/ \u8996\u89ba\u53cd\u994b\n            document.querySelectorAll('.option-card').forEach(card => {\n                card.classList.remove('selected');\n            });\n            optionCard.classList.add('selected');\n            \n            \/\/ \u5132\u5b58\u7b54\u6848\n            this.answers[this.currentQuestion] = optionIndex;\n            \n            \/\/ \u5ef6\u9072\u8655\u7406\u4e0b\u4e00\u6b65\n            setTimeout(() => {\n                if (selectedOption.result) {\n                    this.showResult(selectedOption.result);\n                } else if (selectedOption.next) {\n                    this.showQuestion(selectedOption.next);\n                }\n            }, 300);\n        }\n        \n        goToPreviousQuestion() {\n            const answerKeys = Object.keys(this.answers).map(Number).sort((a, b) => a - b);\n            if (answerKeys.length > 0) {\n                const lastAnsweredQuestion = answerKeys[answerKeys.length - 1];\n                delete this.answers[lastAnsweredQuestion];\n                this.showQuestion(lastAnsweredQuestion);\n            }\n        }\n        \n        showResult(resultType) {\n            const result = this.results[resultType];\n            \n            this.quizPage.classList.add('d-none');\n            this.resultPage.classList.remove('d-none');\n            this.resultPage.classList.add('fade-in');\n            \n            document.querySelector('[data-result-title]').textContent = '\u4f60\u7684\u6697\u6200\u8005\u985e\u578b\u5df2\u63ed\u66c9\uff01';\n            document.querySelector('[data-result-type]').textContent = result.title;\n            document.querySelector('[data-result-description]').textContent = result.description;\n            \n            this.createChart(resultType);\n            this.scrollToTop();\n        }\n        \n        createChart(resultType) {\n            \/\/ \u92b7\u6bc0\u820a\u5716\u8868\n            if (this.chart) {\n                this.chart.destroy();\n            }\n            \n            const ctx = document.getElementById('resultChart').getContext('2d');\n            \n            \/\/ \u6839\u64da\u7d50\u679c\u985e\u578b\u8a2d\u5b9a\u6578\u64da\n            const dataValues = {\n                'A': [85, 70, 60, 75],\n                'B': [70, 85, 65, 80],\n                'C': [75, 65, 85, 70],\n                'D': [80, 75, 70, 85]\n            };\n            \n            this.chart = new Chart(ctx, {\n                type: 'radar',\n                data: {\n                    labels: ['\u89aa\u5bc6\u5ea6', '\u77ad\u89e3\u5ea6', '\u5438\u5f15\u529b', '\u53ef\u80fd\u6027'],\n                    datasets: [{\n                        label: '\u6697\u6200\u6307\u6578',\n                        data: dataValues[resultType],\n                        backgroundColor: 'rgba(54, 162, 235, 0.2)',\n                        borderColor: 'rgba(54, 162, 235, 1)',\n                        borderWidth: 2,\n                        pointBackgroundColor: 'rgba(54, 162, 235, 1)',\n                        pointBorderColor: '#fff',\n                        pointHoverBackgroundColor: '#fff',\n                        pointHoverBorderColor: 'rgba(54, 162, 235, 1)'\n                    }]\n                },\n                options: {\n                    responsive: true,\n                    maintainAspectRatio: true,\n                    plugins: {\n                        legend: {\n                            display: false\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                                }\n                            }\n                        }\n                    }\n                }\n            });\n        }\n        \n        restartQuiz() {\n            this.currentQuestion = 1;\n            this.answers = {};\n            \n            this.resultPage.classList.add('d-none');\n            this.introPage.classList.remove('d-none');\n            this.introPage.classList.add('fade-in');\n            \n            this.scrollToTop();\n        }\n        \n        scrollToTop() {\n            window.scrollTo({\n                top: this.quizPage.classList.contains('d-none') ? 0 : this.quizPage.offsetTop - 50,\n                behavior: 'smooth'\n            });\n        }\n    }\n    \n    \/\/ \u521d\u59cb\u5316\u6e2c\u9a57\n    document.addEventListener('DOMContentLoaded', () => {\n        new LoveQuiz();\n    });\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u6211\u4eec\u90fd\u5728\u627e\u559c\u6b22\u81ea\u5df1\u7684\u4eba\uff0c\u53ef\u6700\u6709\u53ef\u80fd\u4f1a\u559c\u6b22\u81ea\u5df1\u7684\uff0c\u4e0d\u5c31\u662f\u5728\u81ea\u5df1\u7684\u8eab\u8fb9\u5417\uff1f\u6bd5\u7adf\u4e86\u89e3\u76f8\u5904\u8fc7\uff0c\u66f4\u5bb9\u6613\u4f1a\u840c\u751f\u604b\u60c5\u7684\u60c5\u612b\u3002\u90a3\u4e48\uff0c\u4f60\u8eab\u8fb9\u54ea\u4e2aTA\u6700\u6709\u53ef\u80fd\u6697\u604b\u4f60\uff1f\u505a\u4e2a\u6d4b\u8bd5\u770b\u770b\u5427\u3002<\/p>","protected":false},"author":19,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"narrow-width-container","site-content-style":"unboxed","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[178,175],"tags":[],"class_list":["post-2580","post","type-post","status-publish","format-standard","hentry","category-love","category-relationships"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2580","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=2580"}],"version-history":[{"count":1,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2580\/revisions"}],"predecessor-version":[{"id":10602,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2580\/revisions\/10602"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2580"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2580"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2580"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}