{"id":2736,"date":"2023-10-18T09:47:51","date_gmt":"2023-10-18T01:47:51","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2736"},"modified":"2025-08-18T21:32:17","modified_gmt":"2025-08-18T13:32:17","slug":"reaction-to-heartbreak","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/reaction-to-heartbreak","title":{"rendered":"\u5c0f\u6d4b\u9a8c\uff1a\u4f60\u5931\u604b\u65f6\u4f1a\u6709\u4ec0\u4e48\u53cd\u5e94\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    <!-- HTML\u7d50\u69cb -->\n    <main class=\"container\" style=\"max-width: 750px;\">\n        <!-- \u5f15\u5c0e\u9801 -->\n        <section id=\"quizintro9\" data-page=\"intro9\" class=\"quiz-section active\">\n            <header class=\"text-center mb-5\">\n                <h2 class=\"display-5 fw-bold mb-3\" style=\"color: #5a8a7e;\">\u4f60\u5931\u6200\u6642\u6703\u6709\u4ec0\u9ebc\u53cd\u61c9\uff1f<\/h2>\n                <p class=\"lead text-muted\">\u6df1\u5165\u63a2\u7d22\u4f60\u7684\u60c5\u611f\u6a21\u5f0f\uff0c\u4e86\u89e3\u771f\u5be6\u7684\u81ea\u5df1<\/p>\n            <\/header>\n            \n            <article class=\"row g-4 mb-5\">\n                <div class=\"col-12 mb-4\">\n                    <div class=\"card border-0 shadow-sm p-4\">\n                        <div class=\"card-body\">\n                            <p class=\"fs-5 text-secondary lh-lg\">\n                                \u5931\u6200\uff0c\u5c0d\u65bc\u4efb\u4f55\u4eba\u4f86\u8aaa\u90fd\u662f\u4e00\u676f\u6fc3\u70c8\u7684\u82e6\u9152\u3002\u9019\u7a2e\u75db\u82e6\uff0c\u5c07\u4eba\u7684\u60c5\u611f\u5f9e\u5cf0\u5dd4\u63a8\u5165\u6df1\u8c37\u3002\n                                \u4e0d\u540c\u7684\u4eba\u6703\u6709\u4e0d\u540c\u7684\u60c5\u611f\u614b\u5ea6\u548c\u89e3\u812b\u65b9\u5f0f\u3002\u5931\u6200\u65e2\u53ef\u4ee5\u4f7f\u4eba\u6d88\u6c89\uff0c\u4e5f\u53ef\u4ee5\u4f7f\u4eba\u596e\u8d77\u3002\n                            <\/p>\n                            <p class=\"fs-5 text-secondary lh-lg mb-0\">\n                                \u900f\u904e\u9019\u500b\u7c21\u55ae\u7684\u5fc3\u7406\u6e2c\u9a57\uff0c\u63a2\u7d22\u4f60\u9762\u5c0d\u5931\u6200\u6642\u7684\u771f\u5be6\u53cd\u61c9\u6a21\u5f0f\uff0c\n                                \u4e86\u89e3\u81ea\u5df1\u7684\u60c5\u611f\u7279\u8cea\uff0c\u70ba\u672a\u4f86\u7684\u611f\u60c5\u8def\u505a\u597d\u6e96\u5099\u3002\n                            <\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"col-md-4\">\n                    <div class=\"text-center p-3\">\n                        <div class=\"icon-circle mx-auto mb-3\">\n                            <i class=\"bi bi-clock-history fs-1\"><\/i>\n                        <\/div>\n                        <h3 class=\"h5 fw-bold\">\u5feb\u901f\u6e2c\u9a57<\/h3>\n                        <p class=\"text-muted\">\u50c5\u97002\u5206\u9418\u5373\u53ef\u5b8c\u6210<\/p>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"col-md-4\">\n                    <div class=\"text-center p-3\">\n                        <div class=\"icon-circle mx-auto mb-3\">\n                            <i class=\"bi bi-graph-up fs-1\"><\/i>\n                        <\/div>\n                        <h3 class=\"h5 fw-bold\">\u4e13\u4e1a\u5206\u6790<\/h3>\n                        <p class=\"text-muted\">\u6df1\u5ea6\u89e3\u6790\u4f60\u7684\u60c5\u611f\u6a21\u5f0f<\/p>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"col-md-4\">\n                    <div class=\"text-center p-3\">\n                        <div class=\"icon-circle mx-auto mb-3\">\n                            <i class=\"bi bi-heart-pulse fs-1\"><\/i>\n                        <\/div>\n                        <h3 class=\"h5 fw-bold\">\u81ea\u6211\u6210\u957f<\/h3>\n                        <p class=\"text-muted\">\u8a8d\u8b58\u81ea\u5df1\uff0c\u7642\u7652\u5167\u5fc3<\/p>\n                    <\/div>\n                <\/div>\n            <\/article>\n            \n            <div class=\"text-center mt-5\">\n                <button type=\"button\" class=\"btn btn-primary btn-lg px-5 py-3 shadow start-quiz-btn\" data-action=\"start-quiz\">\n                    <i class=\"bi bi-play-circle me-2\"><\/i>\u5f00\u59cb\u6d4b\u9a8c\n                <\/button>\n            <\/div>\n        <\/section>\n\n        <!-- \u6e2c\u9a57\u9801 -->\n        <section id=\"quizmain9\" data-page=\"quiz9\" class=\"quiz-section d-none\">\n            <header class=\"mb-4\">\n                <div class=\"progress mb-4\" style=\"height: 8px;\">\n                    <div class=\"progress-bar\" role=\"progressbar\" data-quiz-progress style=\"width: 50%\"><\/div>\n                <\/div>\n                <p class=\"text-center text-muted fw-semibold\">\n                    <span data-current-question>1<\/span> \/ <span data-total-questions>2<\/span>\n                <\/p>\n            <\/header>\n            \n            <article class=\"quiz-content\">\n                <!-- \u554f\u984c1 - \u93e1\u5b50\u88c2\u75d5 -->\n                <div class=\"question-container\" data-question=\"1\">\n                    <h3 class=\"fw-bold mb-4\" style=\"font-size: 22px;\">\u4f60\u7684\u93e1\u5b50\u88c2\u4e86\uff0c\u8acb\u5728\u93e1\u5b50\u4e0a\u756b\u51fa\u88c2\u75d5<\/h3>\n                    <div class=\"text-center\">\n                        <div class=\"mirror-container mx-auto mb-3\">\n                            <canvas id=\"mirrorCanvas\" width=\"400\" height=\"400\"><\/canvas>\n                        <\/div>\n                        <p class=\"text-muted mb-3\" style=\"font-size: 18px;\">\u7528\u6ed1\u9f20\u6216\u624b\u6307\u5728\u93e1\u5b50\u4e0a\u756b\u51fa\u88c2\u75d5<\/p>\n                        <div class=\"d-flex gap-3 justify-content-center\">\n                            <button type=\"button\" class=\"btn btn-outline-secondary\" data-action=\"clear-mirror\">\n                                <i class=\"bi bi-arrow-clockwise me-2\"><\/i>\u6e05\u9664\u91cd\u756b\n                            <\/button>\n                            <button type=\"button\" class=\"btn btn-primary\" data-action=\"confirm-mirror\">\n                                <i class=\"bi bi-check-lg me-2\"><\/i>\u78ba\u8a8d\u88c2\u75d5\n                            <\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- \u554f\u984c2 - \u6642\u9418\u6307\u5411 -->\n                <div class=\"question-container d-none\" data-question=\"2\">\n                    <h3 class=\"fw-bold mb-4\" style=\"font-size: 22px;\">\u4f60\u7684\u624b\u9336\u58de\u4e86\uff0c\u9577\u91dd\u505c\u572812\u9ede\uff0c\u8acb\u62d6\u52d5\u77ed\u91dd\u5230\u4f60\u60f3\u8981\u7684\u4f4d\u7f6e<\/h3>\n                    <div class=\"text-center\">\n                        <div class=\"clock-container mx-auto mb-3\">\n                            <svg id=\"clockSvg\" width=\"400\" height=\"400\" viewbox=\"0 0 400 400\">\n                                <!-- \u9336\u76e4 -->\n                                <circle cx=\"200\" cy=\"200\" r=\"180\" fill=\"#fef9f0\" stroke=\"#d4b896\" stroke-width=\"4\"\/>\n                                <circle cx=\"200\" cy=\"200\" r=\"8\" fill=\"#8b7355\"\/>\n                                \n                                <!-- \u6642\u9418\u523b\u5ea6\u548c\u6578\u5b57 -->\n                                <g id=\"clockNumbers\">\n                                    <text x=\"200\" y=\"50\" text-anchor=\"middle\" font-size=\"28\" font-weight=\"bold\" fill=\"#8b7355\">12<\/text>\n                                    <text x=\"340\" y=\"210\" text-anchor=\"middle\" font-size=\"28\" font-weight=\"bold\" fill=\"#8b7355\">3<\/text>\n                                    <text x=\"200\" y=\"360\" text-anchor=\"middle\" font-size=\"28\" font-weight=\"bold\" fill=\"#8b7355\">6<\/text>\n                                    <text x=\"60\" y=\"210\" text-anchor=\"middle\" font-size=\"28\" font-weight=\"bold\" fill=\"#8b7355\">9<\/text>\n                                    \n                                    <!-- \u5176\u4ed6\u6578\u5b57 -->\n                                    <text x=\"290\" y=\"90\" text-anchor=\"middle\" font-size=\"20\" fill=\"#8b7355\">1<\/text>\n                                    <text x=\"340\" y=\"130\" text-anchor=\"middle\" font-size=\"20\" fill=\"#8b7355\">2<\/text>\n                                    <text x=\"340\" y=\"290\" text-anchor=\"middle\" font-size=\"20\" fill=\"#8b7355\">4<\/text>\n                                    <text x=\"290\" y=\"330\" text-anchor=\"middle\" font-size=\"20\" fill=\"#8b7355\">5<\/text>\n                                    <text x=\"110\" y=\"330\" text-anchor=\"middle\" font-size=\"20\" fill=\"#8b7355\">7<\/text>\n                                    <text x=\"60\" y=\"290\" text-anchor=\"middle\" font-size=\"20\" fill=\"#8b7355\">8<\/text>\n                                    <text x=\"60\" y=\"130\" text-anchor=\"middle\" font-size=\"20\" fill=\"#8b7355\">10<\/text>\n                                    <text x=\"110\" y=\"90\" text-anchor=\"middle\" font-size=\"20\" fill=\"#8b7355\">11<\/text>\n                                <\/g>\n                                \n                                <!-- \u523b\u5ea6\u7dda -->\n                                <g id=\"clockTicks\"><\/g>\n                                \n                                <!-- \u9577\u91dd\uff08\u5206\u91dd\uff09\u56fa\u5b9a\u572812 -->\n                                <line x1=\"200\" y1=\"200\" x2=\"200\" y2=\"70\" stroke=\"#5a8a7e\" stroke-width=\"6\" stroke-linecap=\"round\"\/>\n                                \n                                <!-- \u77ed\u91dd\uff08\u6642\u91dd\uff09\u53ef\u62d6\u52d5 -->\n                                <line id=\"hourHand\" x1=\"200\" y1=\"200\" x2=\"200\" y2=\"100\" stroke=\"#8b7355\" stroke-width=\"8\" stroke-linecap=\"round\" style=\"cursor: grab;\"\/>\n                                \n                                <!-- \u4e2d\u5fc3\u9ede -->\n                                <circle cx=\"200\" cy=\"200\" r=\"10\" fill=\"#5a5a5a\"\/>\n                            <\/svg>\n                        <\/div>\n                        <p class=\"text-muted mb-3\" style=\"font-size: 18px;\">\n                            \u62d6\u52d5\u77ed\u91dd\u5230\u60f3\u8981\u7684\u6642\u9593\u4f4d\u7f6e\n                            <br>\n                            <span class=\"badge bg-secondary fs-6 mt-2\">\u77ed\u91dd\u6307\u5411\uff1a<span id=\"hourDisplay\">12<\/span> \u9ede<\/span>\n                        <\/p>\n                        <div class=\"text-center\">\n                            <button type=\"button\" class=\"btn btn-primary btn-lg\" data-action=\"confirm-clock\">\n                                <i class=\"bi bi-check-lg me-2\"><\/i>\u78ba\u8a8d\u6642\u9593\n                            <\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/article>\n            \n            <div class=\"text-center mt-5\">\n                <button type=\"button\" class=\"btn btn-secondary btn-lg px-4 py-2 d-none\" data-action=\"previous\">\n                    <i class=\"bi bi-arrow-left me-2\"><\/i>\u4e0a\u4e00\u9898\n                <\/button>\n            <\/div>\n        <\/section>\n\n        <!-- \u7d50\u679c\u9801 -->\n        <section id=\"quizresult9\" data-page=\"result9\" class=\"quiz-section d-none\">\n            <header class=\"text-center mb-5\">\n                <h2 class=\"display-5 fw-bold mb-3\" style=\"color: #5a8a7e;\">\u6d4b\u9a8c\u7ed3\u679c\u5206\u6790<\/h2>\n                <p class=\"lead text-muted\">\u4f60\u7684\u5931\u6200\u53cd\u61c9\u6a21\u5f0f<\/p>\n            <\/header>\n            \n            <article class=\"row g-4\">\n                <div class=\"col-lg-6 mb-4\">\n                    <div class=\"card border-0 shadow-sm h-100\">\n                        <div class=\"card-body p-4\">\n                            <h3 class=\"h4 fw-bold mb-3 text-center\">\n                                <i class=\"bi bi-speedometer2 me-2\"><\/i>\u4f60\u7684\u5f97\u5206\uff1a<span data-total-score style=\"color: #5a8a7e;\">0<\/span> \u5206\n                            <\/h3>\n                            <div class=\"chart-container\" style=\"position: relative; height: 300px;\">\n                                <canvas id=\"resultChart\"><\/canvas>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"col-lg-6 mb-4\">\n                    <div class=\"card border-0 shadow-sm h-100\">\n                        <div class=\"card-body p-4\">\n                            <h3 class=\"h4 fw-bold mb-3 text-center\">\n                                <i class=\"bi bi-chat-heart me-2\"><\/i>\u4f60\u7684\u985e\u578b\n                            <\/h3>\n                            <div data-result-type class=\"alert\" style=\"background-color: #f0f4f3; border: 1px solid #a8c5ba;\">\n                                <h4 class=\"alert-heading fw-bold\" data-type-title style=\"color: #5a8a7e;\"><\/h4>\n                                <p class=\"mb-0 lh-lg\" data-type-description style=\"color: #666;\"><\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"col-12\">\n                    <div class=\"card border-0 shadow-sm\">\n                        <div class=\"card-body p-4\">\n                            <h3 class=\"h4 fw-bold mb-4 text-center\">\n                                <i class=\"bi bi-lightbulb me-2\"><\/i>\u8be6\u7ec6\u89e3\u6790\n                            <\/h3>\n                            <div data-detailed-analysis class=\"lh-lg\"><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/article>\n            \n            <div class=\"text-center mt-5\">\n                <button type=\"button\" class=\"btn btn-primary btn-lg px-5 py-3 shadow\" data-action=\"restart\">\n                    <i class=\"bi bi-arrow-clockwise me-2\"><\/i>\u91cd\u65b0\u6d4b\u8bd5\n                <\/button>\n            <\/div>\n        <\/section>\n    <\/main>\n\n    <!-- CSS\u6a23\u5f0f -->\n    <style>\n        \/* \u57fa\u790e\u6a23\u5f0f *\/\n        body {\n            background: transparent !important;\n        }\n        \n        .quiz-section {\n            min-height: 400px;\n            animation: fadeIn 0.5s ease-in;\n        }\n\n        @keyframes fadeIn {\n            from { opacity: 0; transform: translateY(20px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n\n        \/* \u5713\u5f62\u5716\u6a19\u6a23\u5f0f *\/\n        .icon-circle {\n            width: 80px;\n            height: 80px;\n            border-radius: 50%;\n            background: linear-gradient(135deg, #a8c5ba 0%, #5a8a7e 100%);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            box-shadow: 0 4px 12px rgba(90, 138, 126, 0.2);\n            color: white;\n        }\n\n        \/* \u93e1\u5b50\u5bb9\u5668\u6a23\u5f0f *\/\n        .mirror-container {\n            max-width: 400px;\n            width: 100%;\n            padding: 20px;\n            background: white;\n            border-radius: 20px;\n            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n        }\n\n        #mirrorCanvas {\n            width: 100%;\n            height: auto;\n            max-width: 360px;\n            border-radius: 12px;\n            cursor: crosshair;\n            touch-action: none;\n        }\n\n        \/* \u6642\u9418\u5bb9\u5668\u6a23\u5f0f *\/\n        .clock-container {\n            max-width: 400px;\n            width: 100%;\n            padding: 20px;\n            background: white;\n            border-radius: 20px;\n            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n        }\n\n        #clockSvg {\n            width: 100%;\n            height: auto;\n            max-width: 360px;\n        }\n\n        \/* \u9032\u5ea6\u689d\u6a23\u5f0f *\/\n        .progress {\n            background-color: #f0f4f3;\n            border-radius: 10px;\n            overflow: hidden;\n        }\n\n        .progress-bar {\n            transition: width 0.6s ease;\n            background: linear-gradient(90deg, #a8c5ba 0%, #5a8a7e 100%);\n        }\n\n        \/* \u6309\u9215\u6a23\u5f0f *\/\n        .btn {\n            transition: all 0.3s ease;\n            font-weight: 600;\n            border: none;\n        }\n\n        .btn:hover {\n            transform: translateY(-2px);\n        }\n\n        .btn-primary {\n            background: linear-gradient(135deg, #5a8a7e 0%, #7ba498 100%);\n            color: white;\n        }\n\n        .btn-primary:hover {\n            background: linear-gradient(135deg, #7ba498 0%, #5a8a7e 100%);\n        }\n\n        .btn-secondary {\n            background: linear-gradient(135deg, #d4b896 0%, #e6d2b8 100%);\n            color: #5a5a5a;\n        }\n\n        .btn-secondary:hover {\n            background: linear-gradient(135deg, #e6d2b8 0%, #d4b896 100%);\n        }\n\n        .btn-outline-secondary {\n            border: 2px solid #d4b896;\n            color: #8b7355;\n            background: transparent;\n        }\n\n        .btn-outline-secondary:hover {\n            background: #fef9f0;\n            border-color: #8b7355;\n            color: #8b7355;\n        }\n\n        \/* \u5361\u7247\u6a23\u5f0f *\/\n        .card {\n            background: white;\n        }\n\n        .shadow-sm {\n            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;\n        }\n\n        .shadow {\n            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;\n        }\n\n        \/* \u97ff\u61c9\u5f0f\u8a2d\u8a08 *\/\n        @media (max-width: 768px) {\n            .display-5 {\n                font-size: 1.8rem;\n            }\n            \n            .btn-lg {\n                padding: 0.75rem 2rem !important;\n            }\n\n            .icon-circle {\n                width: 70px;\n                height: 70px;\n            }\n\n            .mirror-container, .clock-container {\n                padding: 15px;\n            }\n        }\n\n        \/* \u5716\u8868\u5bb9\u5668 *\/\n        .chart-container {\n            position: relative;\n            margin: auto;\n            max-width: 100%;\n        }\n    <\/style>\n\n    <!-- JavaScript\u884c\u70ba -->\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n    <script>\n        (() => {\n            'use strict';\n\n            class BreakupQuiz {\n                constructor() {\n                    this.currentQuestion = 1;\n                    this.totalQuestions = 2;\n                    this.answers = {};\n                    this.chart = null;\n                    this.mirrorLines = [];\n                    this.isDrawing = false;\n                    this.hourAngle = 0;\n                    this.isDragging = false;\n                    \n                    \/\/ \u5feb\u53d6DOM\u5143\u7d20\n                    this.introSection = document.querySelector('[data-page=\"intro9\"]');\n                    this.quizSection = document.querySelector('[data-page=\"quiz9\"]');\n                    this.resultSection = document.querySelector('[data-page=\"result9\"]');\n                    this.progressBar = document.querySelector('[data-quiz-progress]');\n                    this.currentQuestionSpan = document.querySelector('[data-current-question]');\n                    this.previousBtn = document.querySelector('[data-action=\"previous\"]');\n                    \n                    this.init();\n                }\n\n                init() {\n                    \/\/ \u7d81\u5b9a\u4e8b\u4ef6\n                    document.addEventListener('click', this.handleClick.bind(this));\n                    \n                    \/\/ \u521d\u59cb\u5316Canvas\u548c\u6642\u9418\n                    this.initMirrorCanvas();\n                    this.initClock();\n                    this.drawClockTicks();\n                }\n\n                initMirrorCanvas() {\n                    const canvas = document.getElementById('mirrorCanvas');\n                    if (!canvas) return;\n                    \n                    const ctx = canvas.getContext('2d');\n                    const rect = canvas.getBoundingClientRect();\n                    const scale = window.devicePixelRatio || 1;\n                    \n                    \/\/ \u8a2d\u7f6eCanvas\u5be6\u969b\u5c3a\u5bf8\n                    canvas.width = 400;\n                    canvas.height = 400;\n                    \n                    \/\/ \u7e6a\u88fd\u93e1\u5b50\u80cc\u666f\n                    this.drawMirror(ctx);\n                    \n                    \/\/ \u7d81\u5b9a\u7e6a\u5716\u4e8b\u4ef6\n                    let startX, startY;\n                    \n                    const getCoords = (e) => {\n                        const rect = canvas.getBoundingClientRect();\n                        const scaleX = canvas.width \/ rect.width;\n                        const scaleY = canvas.height \/ rect.height;\n                        \n                        if (e.touches) {\n                            return {\n                                x: (e.touches[0].clientX - rect.left) * scaleX,\n                                y: (e.touches[0].clientY - rect.top) * scaleY\n                            };\n                        }\n                        return {\n                            x: (e.clientX - rect.left) * scaleX,\n                            y: (e.clientY - rect.top) * scaleY\n                        };\n                    };\n                    \n                    const startDrawing = (e) => {\n                        e.preventDefault();\n                        this.isDrawing = true;\n                        const coords = getCoords(e);\n                        startX = coords.x;\n                        startY = coords.y;\n                    };\n                    \n                    const draw = (e) => {\n                        if (!this.isDrawing) return;\n                        e.preventDefault();\n                        \n                        const coords = getCoords(e);\n                        \n                        \/\/ \u91cd\u7e6a\u93e1\u5b50\u548c\u4e4b\u524d\u7684\u7dda\u689d\n                        this.drawMirror(ctx);\n                        this.drawLines(ctx);\n                        \n                        \/\/ \u7e6a\u88fd\u7576\u524d\u7dda\u689d\u9810\u89bd\n                        ctx.beginPath();\n                        ctx.moveTo(startX, startY);\n                        ctx.lineTo(coords.x, coords.y);\n                        ctx.strokeStyle = '#5a8a7e';\n                        ctx.lineWidth = 3;\n                        ctx.setLineDash([5, 5]);\n                        ctx.stroke();\n                        ctx.setLineDash([]);\n                    };\n                    \n                    const stopDrawing = (e) => {\n                        if (!this.isDrawing) return;\n                        e.preventDefault();\n                        \n                        const coords = getCoords(e);\n                        \n                        \/\/ \u5132\u5b58\u7dda\u689d\n                        this.mirrorLines.push({\n                            x1: startX, y1: startY,\n                            x2: coords.x, y2: coords.y\n                        });\n                        \n                        \/\/ \u91cd\u7e6a\n                        this.drawMirror(ctx);\n                        this.drawLines(ctx);\n                        \n                        this.isDrawing = false;\n                    };\n                    \n                    \/\/ \u6ed1\u9f20\u4e8b\u4ef6\n                    canvas.addEventListener('mousedown', startDrawing);\n                    canvas.addEventListener('mousemove', draw);\n                    canvas.addEventListener('mouseup', stopDrawing);\n                    canvas.addEventListener('mouseleave', stopDrawing);\n                    \n                    \/\/ \u89f8\u63a7\u4e8b\u4ef6\n                    canvas.addEventListener('touchstart', startDrawing);\n                    canvas.addEventListener('touchmove', draw);\n                    canvas.addEventListener('touchend', stopDrawing);\n                }\n\n                drawMirror(ctx) {\n                    \/\/ \u6e05\u7a7a\u756b\u5e03\n                    ctx.clearRect(0, 0, 400, 400);\n                    \n                    \/\/ \u7e6a\u88fd\u93e1\u5b50\u80cc\u666f\n                    ctx.fillStyle = '#f0f4f3';\n                    ctx.fillRect(0, 0, 400, 400);\n                    \n                    \/\/ \u7e6a\u88fd\u93e1\u5b50\u908a\u6846\n                    ctx.strokeStyle = '#a8c5ba';\n                    ctx.lineWidth = 4;\n                    ctx.strokeRect(10, 10, 380, 380);\n                    \n                    \/\/ \u6dfb\u52a0\u5149\u6fa4\u6548\u679c\n                    const gradient = ctx.createLinearGradient(0, 0, 400, 400);\n                    gradient.addColorStop(0, 'rgba(255, 255, 255, 0.2)');\n                    gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');\n                    ctx.fillStyle = gradient;\n                    ctx.fillRect(10, 10, 380, 380);\n                }\n\n                drawLines(ctx) {\n                    ctx.strokeStyle = '#5a8a7e';\n                    ctx.lineWidth = 3;\n                    ctx.setLineDash([8, 4]);\n                    \n                    this.mirrorLines.forEach(line => {\n                        ctx.beginPath();\n                        ctx.moveTo(line.x1, line.y1);\n                        ctx.lineTo(line.x2, line.y2);\n                        ctx.stroke();\n                    });\n                    \n                    ctx.setLineDash([]);\n                }\n\n                calculateMirrorRegions() {\n                    \/\/ \u7c21\u5316\u8a08\u7b97\uff1a\u6839\u64da\u7dda\u689d\u6578\u91cf\u4f30\u7b97\u5340\u57df\u6578\n                    const lineCount = this.mirrorLines.length;\n                    if (lineCount === 0) return 1;\n                    if (lineCount === 1) return 2;\n                    if (lineCount === 2) return 3 + Math.floor(Math.random() * 2);\n                    return Math.min(lineCount + 2 + Math.floor(Math.random() * 2), 8);\n                }\n\n                initClock() {\n                    const svg = document.getElementById('clockSvg');\n                    const hourHand = document.getElementById('hourHand');\n                    const hourDisplay = document.getElementById('hourDisplay');\n                    \n                    if (!svg || !hourHand) return;\n                    \n                    const centerX = 200;\n                    const centerY = 200;\n                    const handLength = 100;\n                    \n                    const updateHourHand = (angle) => {\n                        const radian = (angle - 90) * Math.PI \/ 180;\n                        const x2 = centerX + handLength * Math.cos(radian);\n                        const y2 = centerY + handLength * Math.sin(radian);\n                        \n                        hourHand.setAttribute('x2', x2);\n                        hourHand.setAttribute('y2', y2);\n                        \n                        \/\/ \u8a08\u7b97\u5c0d\u61c9\u7684\u5c0f\u6642\n                        let hour = Math.round(angle \/ 30);\n                        if (hour === 0) hour = 12;\n                        if (hourDisplay) {\n                            hourDisplay.textContent = hour;\n                        }\n                        \n                        this.hourAngle = angle;\n                    };\n                    \n                    \/\/ \u521d\u59cb\u4f4d\u7f6e\u8a2d\u572812\u9ede\n                    updateHourHand(0);\n                    \n                    \/\/ \u62d6\u52d5\u529f\u80fd\n                    const getAngle = (clientX, clientY) => {\n                        const rect = svg.getBoundingClientRect();\n                        const svgX = (clientX - rect.left) * (400 \/ rect.width);\n                        const svgY = (clientY - rect.top) * (400 \/ rect.height);\n                        \n                        const dx = svgX - centerX;\n                        const dy = svgY - centerY;\n                        \n                        let angle = Math.atan2(dy, dx) * 180 \/ Math.PI + 90;\n                        if (angle < 0) angle += 360;\n                        \n                        \/\/ \u5438\u9644\u5230\u6700\u8fd1\u7684\u5c0f\u6642\n                        angle = Math.round(angle \/ 30) * 30;\n                        \n                        return angle;\n                    };\n                    \n                    const handleStart = (e) => {\n                        e.preventDefault();\n                        this.isDragging = true;\n                        hourHand.style.cursor = 'grabbing';\n                    };\n                    \n                    const handleMove = (e) => {\n                        if (!this.isDragging) return;\n                        e.preventDefault();\n                        \n                        const clientX = e.touches ? e.touches[0].clientX : e.clientX;\n                        const clientY = e.touches ? e.touches[0].clientY : e.clientY;\n                        \n                        const angle = getAngle(clientX, clientY);\n                        updateHourHand(angle);\n                    };\n                    \n                    const handleEnd = (e) => {\n                        if (!this.isDragging) return;\n                        e.preventDefault();\n                        this.isDragging = false;\n                        hourHand.style.cursor = 'grab';\n                    };\n                    \n                    \/\/ \u6ed1\u9f20\u4e8b\u4ef6\n                    hourHand.addEventListener('mousedown', handleStart);\n                    svg.addEventListener('mousemove', handleMove);\n                    svg.addEventListener('mouseup', handleEnd);\n                    svg.addEventListener('mouseleave', handleEnd);\n                    \n                    \/\/ \u89f8\u63a7\u4e8b\u4ef6\n                    hourHand.addEventListener('touchstart', handleStart);\n                    svg.addEventListener('touchmove', handleMove);\n                    svg.addEventListener('touchend', handleEnd);\n                }\n\n                drawClockTicks() {\n                    const tickGroup = document.getElementById('clockTicks');\n                    if (!tickGroup) return;\n                    \n                    \/\/ \u7e6a\u88fd\u5c0f\u6642\u523b\u5ea6\n                    for (let i = 0; i < 12; i++) {\n                        const angle = (i * 30 - 90) * Math.PI \/ 180;\n                        const x1 = 200 + 160 * Math.cos(angle);\n                        const y1 = 200 + 160 * Math.sin(angle);\n                        const x2 = 200 + 170 * Math.cos(angle);\n                        const y2 = 200 + 170 * Math.sin(angle);\n                        \n                        const tick = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'line');\n                        tick.setAttribute('x1', x1);\n                        tick.setAttribute('y1', y1);\n                        tick.setAttribute('x2', x2);\n                        tick.setAttribute('y2', y2);\n                        tick.setAttribute('stroke', '#8b7355');\n                        tick.setAttribute('stroke-width', '3');\n                        tickGroup.appendChild(tick);\n                    }\n                }\n\n                handleClick(e) {\n                    const target = e.target.closest('[data-action]');\n                    if (!target) return;\n\n                    const action = target.dataset.action;\n                    \n                    switch(action) {\n                        case 'start-quiz':\n                            this.startQuiz();\n                            break;\n                        case 'clear-mirror':\n                            this.clearMirror();\n                            break;\n                        case 'confirm-mirror':\n                            this.confirmMirror();\n                            break;\n                        case 'confirm-clock':\n                            this.confirmClock();\n                            break;\n                        case 'previous':\n                            this.previousQuestion();\n                            break;\n                        case 'restart':\n                            this.restartQuiz();\n                            break;\n                    }\n                }\n\n                clearMirror() {\n                    this.mirrorLines = [];\n                    const canvas = document.getElementById('mirrorCanvas');\n                    const ctx = canvas.getContext('2d');\n                    this.drawMirror(ctx);\n                }\n\n                confirmMirror() {\n                    const regions = this.calculateMirrorRegions();\n                    this.answers[1] = Math.min(regions, 5); \/\/ \u9650\u5236\u6700\u5927\u503c\u70ba5\n                    \n                    this.currentQuestion = 2;\n                    this.showQuestion(2);\n                    this.scrollToTop();\n                }\n\n                confirmClock() {\n                    const hour = Math.round(this.hourAngle \/ 30);\n                    this.answers[2] = hour === 0 ? 12 : hour;\n                    \n                    this.showResults();\n                    this.scrollToTop();\n                }\n\n                startQuiz() {\n                    this.showSection('quiz');\n                    this.showQuestion(1);\n                    this.scrollToTop();\n                }\n\n                showSection(section) {\n                    \/\/ \u96b1\u85cf\u6240\u6709\u5340\u584a\n                    document.querySelectorAll('.quiz-section').forEach(sec => {\n                        sec.classList.add('d-none');\n                        sec.classList.remove('active');\n                    });\n\n                    \/\/ \u986f\u793a\u6307\u5b9a\u5340\u584a\n                    let targetSection;\n                    switch(section) {\n                        case 'intro':\n                            targetSection = this.introSection;\n                            break;\n                        case 'quiz':\n                            targetSection = this.quizSection;\n                            break;\n                        case 'result':\n                            targetSection = this.resultSection;\n                            break;\n                    }\n                    \n                    if (targetSection) {\n                        targetSection.classList.remove('d-none');\n                        targetSection.classList.add('active');\n                    }\n                }\n\n                showQuestion(questionNum) {\n                    \/\/ \u96b1\u85cf\u6240\u6709\u554f\u984c\n                    document.querySelectorAll('.question-container').forEach(q => {\n                        q.classList.add('d-none');\n                    });\n\n                    \/\/ \u986f\u793a\u7576\u524d\u554f\u984c\n                    const currentQuestionEl = document.querySelector(`[data-question=\"${questionNum}\"]`);\n                    if (currentQuestionEl) {\n                        currentQuestionEl.classList.remove('d-none');\n                    }\n\n                    \/\/ \u66f4\u65b0\u9032\u5ea6\n                    this.updateProgress();\n\n                    \/\/ \u63a7\u5236\u4e0a\u4e00\u984c\u6309\u9215\n                    if (questionNum === 1) {\n                        this.previousBtn.classList.add('d-none');\n                    } else {\n                        this.previousBtn.classList.remove('d-none');\n                    }\n                }\n\n                previousQuestion() {\n                    if (this.currentQuestion > 1) {\n                        this.currentQuestion--;\n                        this.showQuestion(this.currentQuestion);\n                        this.scrollToTop();\n                    }\n                }\n\n                updateProgress() {\n                    const progress = (this.currentQuestion \/ this.totalQuestions) * 100;\n                    this.progressBar.style.width = `${progress}%`;\n                    this.currentQuestionSpan.textContent = this.currentQuestion;\n                }\n\n                calculateScore() {\n                    return (this.answers[1] || 0) + (this.answers[2] || 0);\n                }\n\n                getResultType(score) {\n                    if (score <= 5) {\n                        return {\n                            title: '\u701f\u7051\u578b',\n                            description: '\u4f60\u64c1\u6709\u5f37\u5927\u7684\u5fc3\u7406\u97cc\u6027\uff0c\u80fd\u5920\u5feb\u901f\u5f9e\u5931\u6200\u4e2d\u6062\u5fa9\u3002\u96d6\u7136\u77ed\u66ab\u7684\u5931\u843d\u96e3\u514d\uff0c\u4f46\u4f60\u7e3d\u80fd\u5f88\u5feb\u632f\u4f5c\u8d77\u4f86\uff0c\u7a4d\u6975\u5c0b\u627e\u65b0\u7684\u53ef\u80fd\u3002\u4f60\u7684\u6a02\u89c0\u614b\u5ea6\u662f\u4f60\u6700\u5927\u7684\u512a\u52e2\u3002',\n                            color: 'rgba(168, 197, 186, 0.3)',\n                            borderColor: 'rgba(90, 138, 126, 1)'\n                        };\n                    } else if (score <= 10) {\n                        return {\n                            title: '\u596e\u9b25\u578b',\n                            description: '\u5931\u6200\u53cd\u800c\u6703\u6fc0\u767c\u4f60\u7684\u9b25\u5fd7\uff0c\u8b93\u4f60\u66f4\u52aa\u529b\u63d0\u5347\u81ea\u5df1\u3002\u4f60\u6703\u628a\u9019\u4efd\u75db\u82e6\u8f49\u5316\u70ba\u524d\u9032\u7684\u52d5\u529b\uff0c\u5728\u4e8b\u696d\u6216\u500b\u4eba\u6210\u9577\u4e0a\u53d6\u5f97\u66f4\u5927\u7684\u6210\u5c31\u3002\u5931\u6200\u5c0d\u4f60\u4f86\u8aaa\u662f\u6210\u9577\u7684\u50ac\u5316\u5291\u3002',\n                            color: 'rgba(212, 184, 150, 0.3)',\n                            borderColor: 'rgba(139, 115, 85, 1)'\n                        };\n                    } else if (score <= 15) {\n                        return {\n                            title: '\u5167\u6582\u578b',\n                            description: '\u8868\u9762\u4e0a\u4f60\u986f\u5f97\u51b7\u975c\u7406\u667a\uff0c\u4f46\u5167\u5fc3\u5176\u5be6\u627f\u53d7\u8457\u5de8\u5927\u7684\u50b7\u75db\u3002\u4f60\u9700\u8981\u8f03\u9577\u7684\u6642\u9593\u4f86\u7642\u7652\uff0c\u9019\u6bb5\u7d93\u6b77\u53ef\u80fd\u6703\u5728\u5fc3\u4e2d\u7559\u4e0b\u6df1\u523b\u7684\u5370\u8a18\u3002\u8a18\u5f97\u7d66\u81ea\u5df1\u6642\u9593\u548c\u7a7a\u9593\u53bb\u7642\u7652\u3002',\n                            color: 'rgba(180, 200, 210, 0.3)',\n                            borderColor: 'rgba(100, 140, 160, 1)'\n                        };\n                    } else {\n                        return {\n                            title: '\u57f7\u8457\u578b',\n                            description: '\u4f60\u5f88\u96e3\u653e\u4e0b\u904e\u53bb\u7684\u611f\u60c5\uff0c\u7e3d\u89ba\u5f97\u5931\u53bb\u7684\u624d\u662f\u6700\u7f8e\u597d\u7684\u3002\u9019\u7a2e\u57f7\u8457\u53ef\u80fd\u6703\u8b93\u4f60\u9677\u5165\u75db\u82e6\u7684\u5faa\u74b0\u3002\u5b78\u7fd2\u653e\u624b\u548c\u5411\u524d\u770b\uff0c\u5c0d\u4f60\u7684\u6210\u9577\u6703\u66f4\u6709\u5e6b\u52a9\u3002',\n                            color: 'rgba(230, 190, 190, 0.3)',\n                            borderColor: 'rgba(180, 120, 120, 1)'\n                        };\n                    }\n                }\n\n                showResults() {\n                    const score = this.calculateScore();\n                    const resultType = this.getResultType(score);\n\n                    \/\/ \u986f\u793a\u7d50\u679c\u9801\n                    this.showSection('result');\n\n                    \/\/ \u66f4\u65b0\u5206\u6578\n                    document.querySelector('[data-total-score]').textContent = score;\n\n                    \/\/ \u66f4\u65b0\u985e\u578b\n                    document.querySelector('[data-type-title]').textContent = resultType.title;\n                    document.querySelector('[data-type-description]').textContent = resultType.description;\n\n                    \/\/ \u66f4\u65b0\u8a73\u7d30\u5206\u6790\n                    const detailedAnalysis = this.getDetailedAnalysis(score);\n                    document.querySelector('[data-detailed-analysis]').innerHTML = detailedAnalysis;\n\n                    \/\/ \u7e6a\u88fd\u5716\u8868\n                    this.drawChart(score, resultType);\n                }\n\n                getDetailedAnalysis(score) {\n                    const mirrorParts = this.answers[1] || 0;\n                    const clockPosition = this.answers[2] || 0;\n\n                    let analysis = '<div class=\"row g-4\">';\n                    \n                    \/\/ \u93e1\u5b50\u5206\u6790\n                    analysis += '<div class=\"col-md-6\">';\n                    analysis += '<h5 class=\"fw-bold mb-3\" style=\"color: #5a8a7e;\"><i class=\"bi bi-mirror me-2\"><\/i>\u93e1\u5b50\u88c2\u75d5\u5206\u6790<\/h5>';\n                    analysis += '<p class=\"text-muted\">';\n                    \n                    if (mirrorParts <= 2) {\n                        analysis += '\u4f60\u756b\u7684\u88c2\u75d5\u7c21\u55ae\uff0c\u986f\u793a\u4f60\u7684\u5167\u5fc3\u76f8\u5c0d\u5b8c\u6574\uff0c\u4e0d\u5bb9\u6613\u88ab\u5916\u754c\u6253\u64ca\u6240\u64ca\u57ae\u3002';\n                    } else if (mirrorParts <= 4) {\n                        analysis += '\u4f60\u756b\u7684\u88c2\u75d5\u4e2d\u7b49\u8907\u96dc\uff0c\u8868\u793a\u4f60\u6703\u53d7\u5230\u4e00\u5b9a\u7a0b\u5ea6\u7684\u5f71\u97ff\uff0c\u4f46\u4ecd\u4fdd\u6709\u81ea\u6211\u4fee\u5fa9\u7684\u80fd\u529b\u3002';\n                    } else {\n                        analysis += '\u4f60\u756b\u7684\u88c2\u75d5\u8f03\u70ba\u8907\u96dc\uff0c\u6697\u793a\u4f60\u7684\u5167\u5fc3\u8f03\u70ba\u654f\u611f\uff0c\u60c5\u611f\u53d7\u5275\u6642\u9700\u8981\u66f4\u591a\u6642\u9593\u7642\u7652\u3002';\n                    }\n                    \n                    analysis += '<\/p><\/div>';\n                    \n                    \/\/ \u6642\u9418\u5206\u6790\n                    analysis += '<div class=\"col-md-6\">';\n                    analysis += '<h5 class=\"fw-bold mb-3\" style=\"color: #5a8a7e;\"><i class=\"bi bi-clock me-2\"><\/i>\u6642\u9418\u6307\u5411\u5206\u6790<\/h5>';\n                    analysis += '<p class=\"text-muted\">';\n                    \n                    if (clockPosition >= 2 && clockPosition <= 4) {\n                        analysis += `${clockPosition}\u9ede\u65b9\u5411\u4ee3\u8868\u4f60\u50be\u5411\u65bc\u5411\u524d\u770b\uff0c\u96d6\u6709\u632b\u6298\u4f46\u4ecd\u4fdd\u6301\u5e0c\u671b\u3002`;\n                    } else if (clockPosition >= 5 && clockPosition <= 7) {\n                        analysis += `${clockPosition}\u9ede\u65b9\u5411\u986f\u793a\u4f60\u8655\u65bc\u60c5\u7dd2\u7684\u4f4e\u8c37\uff0c\u9700\u8981\u6642\u9593\u4f86\u8abf\u6574\u5fc3\u614b\u3002`;\n                    } else if (clockPosition >= 8 && clockPosition <= 10) {\n                        analysis += `${clockPosition}\u9ede\u65b9\u5411\u6697\u793a\u4f60\u6703\u56de\u9867\u904e\u53bb\uff0c\u5f9e\u7d93\u9a57\u4e2d\u5b78\u7fd2\u6210\u9577\u3002`;\n                    } else {\n                        analysis += `${clockPosition}\u9ede\u65b9\u5411\u8868\u793a\u4f60\u5e0c\u671b\u91cd\u65b0\u958b\u59cb\uff0c\u6709\u5f37\u70c8\u7684\u5fa9\u539f\u52d5\u529b\u3002`;\n                    }\n                    \n                    analysis += '<\/p><\/div>';\n                    analysis += '<\/div>';\n                    \n                    return analysis;\n                }\n\n                drawChart(score, 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                    \/\/ \u8a08\u7b97\u5404\u7dad\u5ea6\u5206\u6578\n                    const resilience = score <= 5 ? 90 : score <= 10 ? 70 : score <= 15 ? 40 : 20;\n                    const growth = score <= 5 ? 60 : score <= 10 ? 95 : score <= 15 ? 50 : 30;\n                    const emotional = score <= 5 ? 30 : score <= 10 ? 50 : score <= 15 ? 85 : 95;\n                    const letting = score <= 5 ? 85 : score <= 10 ? 70 : score <= 15 ? 45 : 15;\n                    const recovery = score <= 5 ? 95 : score <= 10 ? 75 : score <= 15 ? 35 : 25;\n\n                    this.chart = new Chart(ctx, {\n                        type: 'radar',\n                        data: {\n                            labels: ['\u5fa9\u539f\u529b', '\u6210\u9577\u529b', '\u60c5\u611f\u6df1\u5ea6', '\u653e\u624b\u80fd\u529b', '\u6062\u5fa9\u901f\u5ea6'],\n                            datasets: [{\n                                label: '\u4f60\u7684\u7279\u8cea',\n                                data: [resilience, growth, emotional, letting, recovery],\n                                backgroundColor: resultType.color,\n                                borderColor: resultType.borderColor,\n                                borderWidth: 2,\n                                pointBackgroundColor: resultType.borderColor,\n                                pointBorderColor: '#fff',\n                                pointHoverBackgroundColor: '#fff',\n                                pointHoverBorderColor: resultType.borderColor,\n                                pointRadius: 6,\n                                pointHoverRadius: 8\n                            }]\n                        },\n                        options: {\n                            responsive: true,\n                            maintainAspectRatio: false,\n                            plugins: {\n                                legend: {\n                                    display: false\n                                },\n                                tooltip: {\n                                    callbacks: {\n                                        label: (context) => {\n                                            return `${context.label}: ${context.parsed.r}%`;\n                                        }\n                                    },\n                                    titleFont: {\n                                        size: 16\n                                    },\n                                    bodyFont: {\n                                        size: 14\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                                        padding: 15,\n                                        color: '#5a8a7e'\n                                    },\n                                    grid: {\n                                        color: 'rgba(0, 0, 0, 0.05)'\n                                    }\n                                }\n                            }\n                        }\n                    });\n                }\n\n                restartQuiz() {\n                    \/\/ \u91cd\u7f6e\u72c0\u614b\n                    this.currentQuestion = 1;\n                    this.answers = {};\n                    this.mirrorLines = [];\n                    this.hourAngle = 0;\n                    \n                    \/\/ \u6e05\u9664\u93e1\u5b50\n                    const canvas = document.getElementById('mirrorCanvas');\n                    if (canvas) {\n                        const ctx = canvas.getContext('2d');\n                        this.drawMirror(ctx);\n                    }\n                    \n                    \/\/ \u91cd\u7f6e\u6642\u9418\n                    const hourHand = document.getElementById('hourHand');\n                    const hourDisplay = document.getElementById('hourDisplay');\n                    if (hourHand) {\n                        hourHand.setAttribute('x2', 200);\n                        hourHand.setAttribute('y2', 100);\n                    }\n                    if (hourDisplay) {\n                        hourDisplay.textContent = '12';\n                    }\n                    \n                    \/\/ \u986f\u793a\u5f15\u5c0e\u9801\n                    this.showSection('intro');\n                    this.scrollToTop();\n                }\n\n                scrollToTop() {\n                    const mainElement = document.querySelector('main');\n                    if (mainElement) {\n                        mainElement.scrollIntoView({ behavior: 'smooth', block: 'start' });\n                    }\n                }\n            }\n\n            \/\/ \u521d\u59cb\u5316\u6e2c\u9a57\n            new BreakupQuiz();\n        })();\n    <\/script>","protected":false},"excerpt":{"rendered":"<p>\u900f\u904e\u9019\u500b\u7c21\u55ae\u7684\u5fc3\u7406\u6e2c\u9a57\uff0c\u63a2\u7d22\u4f60\u9762\u5c0d\u5931\u6200\u6642\u7684\u771f\u5be6\u53cd\u61c9\u6a21\u5f0f\uff0c \u4e86\u89e3\u81ea\u5df1\u7684\u60c5\u611f\u7279\u8cea\uff0c\u70ba\u672a\u4f86\u7684\u611f\u60c5\u8def\u505a\u597d\u6e96\u5099\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],"tags":[],"class_list":["post-2736","post","type-post","status-publish","format-standard","hentry","category-love"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2736","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=2736"}],"version-history":[{"count":2,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2736\/revisions"}],"predecessor-version":[{"id":10574,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2736\/revisions\/10574"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}