{"id":2734,"date":"2023-10-18T09:47:50","date_gmt":"2023-10-18T01:47:50","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2734"},"modified":"2025-08-18T20:23:35","modified_gmt":"2025-08-18T12:23:35","slug":"ready-for-marriage","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/ready-for-marriage","title":{"rendered":"\u5c0f\u6d4b\u9a8c\uff1a\u4f60\u9002\u5408\u7ed3\u5a5a\u4e86\u5417"},"content":{"rendered":"<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap\/5.3.3\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n    <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-icons\/1.11.3\/font\/bootstrap-icons.min.css\" rel=\"stylesheet\">\n<!-- \u5f15\u5c0e\u9801 -->\n<section id=\"quizintro9\" data-page=\"intro9\" class=\"py-5\">\n    <div class=\"container-fluid px-3\" style=\"max-width: 750px;\">\n        <header class=\"text-center mb-5\">\n            <h2 class=\"display-5 fw-bold mb-3\" style=\"color: #2d5f5f;\">\u4f60\u9069\u5408\u7d50\u5a5a\u4e86\u55ce\uff1f<\/h2>\n            <p class=\"lead text-muted fs-5\">\u63a2\u7d22\u4f60\u7684\u611b\u60c5\u6210\u719f\u5ea6\u8207\u5a5a\u59fb\u6e96\u5099\u7a0b\u5ea6<\/p>\n        <\/header>\n        \n        <div class=\"row justify-content-center mb-5\">\n            <div class=\"col-12\">\n                <div class=\"card border-0 shadow-sm p-4\" style=\"background: linear-gradient(135deg, rgba(139, 195, 161, 0.08) 0%, rgba(255, 218, 185, 0.08) 100%);\">\n                    <div class=\"card-body\">\n                        <p class=\"fs-5 mb-4 text-center\" style=\"color: #4a5568;\">\n                            \u5fc3\u7406\u5b78\u5bb6\u5f17\u6d1b\u59c6\u5728\u300a\u611b\u7684\u85dd\u8853\u300b\u4e2d\u6307\u51fa\uff0c\u611b\u662f\u4e00\u7a2e\u80fd\u529b\uff0c\u4e5f\u662f\u4e00\u7a2e\u85dd\u8853\u3002\n                            \u900f\u904e\u9019\u500b\u6e2c\u9a57\uff0c\u4e86\u89e3\u4f60\u5728\u9762\u5c0d\u8cac\u4efb\u6642\u7684\u614b\u5ea6\uff0c\u63a2\u7d22\u4f60\u7684\u5a5a\u59fb\u6e96\u5099\u7a0b\u5ea6\u3002\n                        <\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <div class=\"row g-4 mb-5\">\n            <div class=\"col-md-4\">\n                <div class=\"text-center\">\n                    <div class=\"rounded-circle shadow-sm mx-auto mb-3 d-flex align-items-center justify-content-center\" \n                         style=\"width: 70px; height: 70px; background: linear-gradient(135deg, #8BC3A1 0%, #6FA085 100%);\">\n                        <i class=\"bi bi-heart-fill fs-3\" style=\"color: white;\"><\/i>\n                    <\/div>\n                    <h5 class=\"fw-bold mb-2\" style=\"color: #2d5f5f;\">\u611b\u7684\u80fd\u529b<\/h5>\n                    <p class=\"text-muted small\">\u4e86\u89e3\u81ea\u5df1\u7684\u611b\u60c5\u89c0\u8207\u9700\u6c42<\/p>\n                <\/div>\n            <\/div>\n            <div class=\"col-md-4\">\n                <div class=\"text-center\">\n                    <div class=\"rounded-circle shadow-sm mx-auto mb-3 d-flex align-items-center justify-content-center\" \n                         style=\"width: 70px; height: 70px; background: linear-gradient(135deg, #FFB088 0%, #FFA574 100%);\">\n                        <i class=\"bi bi-shield-check fs-3\" style=\"color: white;\"><\/i>\n                    <\/div>\n                    <h5 class=\"fw-bold mb-2\" style=\"color: #2d5f5f;\">\u8cac\u4efb\u610f\u8b58<\/h5>\n                    <p class=\"text-muted small\">\u8a55\u4f30\u4f60\u7684\u8cac\u4efb\u627f\u64d4\u80fd\u529b<\/p>\n                <\/div>\n            <\/div>\n            <div class=\"col-md-4\">\n                <div class=\"text-center\">\n                    <div class=\"rounded-circle shadow-sm mx-auto mb-3 d-flex align-items-center justify-content-center\" \n                         style=\"width: 70px; height: 70px; background: linear-gradient(135deg, #9FC5C5 0%, #7DADAD 100%);\">\n                        <i class=\"bi bi-people-fill fs-3\" style=\"color: white;\"><\/i>\n                    <\/div>\n                    <h5 class=\"fw-bold mb-2\" style=\"color: #2d5f5f;\">\u5a5a\u59fb\u6642\u6a5f<\/h5>\n                    <p class=\"text-muted small\">\u767c\u73fe\u4f60\u7684\u7406\u60f3\u7d50\u5a5a\u6642\u6a5f<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <div class=\"text-center\">\n            <button class=\"btn btn-lg px-5 py-3 text-white fw-bold shadow-sm\" \n                    data-action=\"start-quiz\"\n                    style=\"background: linear-gradient(135deg, #8BC3A1 0%, #6FA085 100%);                            border: none;                            border-radius: 50px;                           font-size: 1.1rem;                           transition: all 0.3s ease;\">\n                <i class=\"bi bi-play-circle me-2\"><\/i>\u5f00\u59cb\u6d4b\u9a8c\n            <\/button>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- \u6e2c\u9a57\u9801 -->\n<section id=\"quizmain9\" data-page=\"quiz9\" class=\"py-5 d-none\">\n    <div class=\"container-fluid px-3\" style=\"max-width: 750px;\">\n        <header class=\"text-center mb-4\">\n            <h2 class=\"fw-bold fs-3\" style=\"color: #2d5f5f;\">\u60c5\u5883\u6e2c\u9a57<\/h2>\n        <\/header>\n        \n        <div class=\"row justify-content-center\">\n            <div class=\"col-12\">\n                <div class=\"card border-0 shadow-sm\">\n                    <div class=\"card-body p-4\">\n                        <h3 class=\"fw-bold mb-4\" style=\"font-size: 22px; color: #2d5f5f; line-height: 1.6;\">\n                            \u4e0a\u53f8\u7d66\u4f60\u548c\u53e6\u4e00\u4f4d\u540c\u4e8b\u4e00\u4efd\u8a08\u756b\u66f8\uff0c\u8981\u6c42\u4f60\u5011\u6309\u7167\u8a08\u756b\u66f8\u4e0a\u5beb\u7684\u505a\u3002\u4f60\u5011\u5169\u500b\u52aa\u529b\u5de5\u4f5c\uff0c\u7d42\u65bc\u5b8c\u6210\u4e86\u4efb\u52d9\uff0c\u4f46\u662f\u4e0a\u53f8\u537b\u8cac\u602a\u8aaa\uff1a\u300c\u6211\u4e0d\u662f\u8aaa\u6309\u8981\u6c42\u505a\u55ce\uff01\u300d\u9019\u6642\u4f60\u6703&#8230;\n                        <\/h3>\n                        \n                        <div class=\"options-container\">\n                            <div class=\"card mb-3 option-card border shadow-sm\" data-option=\"A\" \n                                 style=\"border-color: #e2e8f0 !important; cursor: pointer;\">\n                                <div class=\"card-body d-flex align-items-center p-3\">\n                                    <div class=\"option-indicator me-3 d-flex align-items-center justify-content-center\"\n                                         style=\"min-width: 28px; height: 28px;\">\n                                        <i class=\"bi bi-circle fs-5\"><\/i>\n                                    <\/div>\n                                    <div class=\"option-text flex-grow-1\" style=\"font-size: 18px; color: #2d5f5f;\">\n                                        \u81ea\u5df1\u9ed8\u9ed8\u5606\u6c23\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                            \n                            <div class=\"card mb-3 option-card border shadow-sm\" data-option=\"B\"\n                                 style=\"border-color: #e2e8f0 !important; cursor: pointer;\">\n                                <div class=\"card-body d-flex align-items-center p-3\">\n                                    <div class=\"option-indicator me-3 d-flex align-items-center justify-content-center\"\n                                         style=\"min-width: 28px; height: 28px;\">\n                                        <i class=\"bi bi-circle fs-5\"><\/i>\n                                    <\/div>\n                                    <div class=\"option-text flex-grow-1\" style=\"font-size: 18px; color: #2d5f5f;\">\n                                        \u300c\u90fd\u662f\u6211\u7684\u8cac\u4efb\u3002\u300d\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                            \n                            <div class=\"card mb-3 option-card border shadow-sm\" data-option=\"C\"\n                                 style=\"border-color: #e2e8f0 !important; cursor: pointer;\">\n                                <div class=\"card-body d-flex align-items-center p-3\">\n                                    <div class=\"option-indicator me-3 d-flex align-items-center justify-content-center\"\n                                         style=\"min-width: 28px; height: 28px;\">\n                                        <i class=\"bi bi-circle fs-5\"><\/i>\n                                    <\/div>\n                                    <div class=\"option-text flex-grow-1\" style=\"font-size: 18px; color: #2d5f5f;\">\n                                        \u300c\u6211\u5c31\u662f\u6309\u8981\u6c42\u505a\u7684\uff01\u300d\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                            \n                            <div class=\"card mb-3 option-card border shadow-sm\" data-option=\"D\"\n                                 style=\"border-color: #e2e8f0 !important; cursor: pointer;\">\n                                <div class=\"card-body d-flex align-items-center p-3\">\n                                    <div class=\"option-indicator me-3 d-flex align-items-center justify-content-center\"\n                                         style=\"min-width: 28px; height: 28px;\">\n                                        <i class=\"bi bi-circle fs-5\"><\/i>\n                                    <\/div>\n                                    <div class=\"option-text flex-grow-1\" style=\"font-size: 18px; color: #2d5f5f;\">\n                                        \u300c\u90fd\u662f\u4ed6\uff08\u540c\u4e8b\uff09\u505a\u7684\u3002\u300d\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- \u7d50\u679c\u9801 -->\n<section id=\"quizresult9\" data-page=\"result9\" class=\"py-5 d-none\">\n    <div class=\"container-fluid px-3\" style=\"max-width: 750px;\">\n        <header class=\"text-center mb-4\">\n            <h2 class=\"fw-bold fs-3\" style=\"color: #2d5f5f;\">\u4f60\u7684\u6d4b\u9a8c\u7ed3\u679c<\/h2>\n        <\/header>\n        \n        <div class=\"row justify-content-center mb-4\">\n            <div class=\"col-12\">\n                <div class=\"card border-0 shadow-sm\">\n                    <div class=\"card-body p-4\">\n                        <div id=\"result-content\" class=\"mb-3\">\n                            <!-- \u7d50\u679c\u5167\u5bb9\u5c07\u52d5\u614b\u63d2\u5165 -->\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <div class=\"row justify-content-center mb-4\">\n            <div class=\"col-12 col-md-10\">\n                <div class=\"card border-0 shadow-sm p-3\">\n                    <div class=\"chart-container\" style=\"position: relative; height: 280px;\">\n                        <canvas id=\"resultChart\"><\/canvas>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <div class=\"text-center mt-4\">\n            <button class=\"btn btn-lg px-5 py-3 text-white fw-bold shadow-sm\" \n                    data-action=\"restart-quiz\"\n                    style=\"background: linear-gradient(135deg, #8BC3A1 0%, #6FA085 100%);                            border: none;                            border-radius: 50px;                           font-size: 1.1rem;                           transition: all 0.3s ease;\">\n                <i class=\"bi bi-arrow-clockwise me-2\"><\/i>\u91cd\u65b0\u6d4b\u9a8c\n            <\/button>\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n\/* \u81ea\u5b9a\u7fa9\u6a23\u5f0f *\/\n.option-card {\n    cursor: pointer;\n    transition: all 0.3s ease;\n    border: 2px solid transparent;\n}\n\n.option-card:hover {\n    transform: translateY(-2px);\n    border-color: #667eea;\n    background-color: #f7fafc;\n}\n\n.option-card.selected {\n    border-color: #667eea;\n    background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);\n}\n\n.option-card.selected .option-indicator i::before {\n    content: \"\\F26B\";\n    color: #667eea;\n    font-weight: bold;\n}\n\n.option-indicator {\n    width: 30px;\n    height: 30px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #cbd5e0;\n    font-size: 1.2rem;\n}\n\n\/* \u6309\u9215\u61f8\u505c\u6548\u679c *\/\nbutton[data-action]:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;\n}\n\n\/* \u97ff\u61c9\u5f0f\u8abf\u6574 *\/\n@media (max-width: 768px) {\n    .display-4 {\n        font-size: 2rem;\n    }\n    \n    .lead {\n        font-size: 1.1rem;\n    }\n    \n    h3 {\n        font-size: 20px !important;\n    }\n    \n    .option-text {\n        font-size: 16px !important;\n    }\n}\n\n\/* \u9801\u9762\u904e\u6e21\u52d5\u756b *\/\n.fade-in {\n    animation: fadeIn 0.5s ease-in;\n}\n\n@keyframes fadeIn {\n    from {\n        opacity: 0;\n        transform: translateY(10px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n<\/style>\n\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 MarriageQuiz {\n        constructor() {\n            this.currentPage = 'intro9';\n            this.selectedAnswer = null;\n            this.chartInstance = null;\n            \n            \/\/ \u5feb\u53d6DOM\u5143\u7d20\n            this.introPage = document.getElementById('quizintro9');\n            this.quizPage = document.getElementById('quizmain9');\n            this.resultPage = document.getElementById('quizresult9');\n            \n            this.init();\n        }\n        \n        init() {\n            \/\/ \u4e8b\u4ef6\u59d4\u8a17\n            document.addEventListener('click', this.handleClick.bind(this));\n        }\n        \n        handleClick(e) {\n            const target = e.target.closest('[data-action], [data-option]');\n            if (!target) return;\n            \n            if (target.dataset.action === 'start-quiz') {\n                this.startQuiz();\n            } else if (target.dataset.action === 'restart-quiz') {\n                this.restartQuiz();\n            } else if (target.dataset.option) {\n                this.selectOption(target);\n            }\n        }\n        \n        startQuiz() {\n            this.showPage('quiz9');\n            this.scrollToTop();\n        }\n        \n        selectOption(optionElement) {\n            \/\/ \u79fb\u9664\u5176\u4ed6\u9078\u4e2d\u72c0\u614b\n            document.querySelectorAll('.option-card').forEach(card => {\n                card.classList.remove('selected');\n            });\n            \n            \/\/ \u6dfb\u52a0\u9078\u4e2d\u72c0\u614b\n            optionElement.classList.add('selected');\n            this.selectedAnswer = optionElement.dataset.option;\n            \n            \/\/ \u5ef6\u9072\u986f\u793a\u7d50\u679c\n            setTimeout(() => {\n                this.showResult();\n            }, 500);\n        }\n        \n        showResult() {\n            const results = {\n                'A': {\n                    title: '\u4f9d\u8cf4\u578b\u4f34\u4fb6',\n                    content: `\n                        <h4 class=\"fw-bold mb-3\" style=\"color: #667eea;\">\u4f60\u7684\u5a5a\u59fb\u6e96\u5099\u985e\u578b\uff1a\u4f9d\u8cf4\u578b\u4f34\u4fb6<\/h4>\n                        <p class=\"fs-5 mb-3\">\u5728\u4f60\u9677\u5165\u56f0\u5883\u7684\u6642\u5019\u7e3d\u6703\u4f9d\u8cf4\u5225\u4eba\u3002\u5c0f\u6642\u5019\u88ab\u8001\u5e2b\u6216\u7236\u6bcd\u8cac\u5099\u7684\u6642\u5019\u4e5f\u5e0c\u671b\u6709\u4eba\u80fd\u4f86\u5e87\u8b77\u81ea\u5df1\u3002<\/p>\n                        <p class=\"fs-5 mb-3\">\u6240\u4ee5\u8aaa\u9700\u8981\u5225\u4eba\u5e6b\u52a9\u7684\u6642\u671f\u5c31\u662f\u4f60\u9069\u5408\u7d50\u5a5a\u7684\u6642\u671f\u3002\u5982\u679c\u662f\u5973\u6027\u7684\u8a71\u6216\u8a31\u662f\u5728\u7d93\u6fdf\u4e0a\u56f0\u96e3\u7684\u6642\u5019\uff0c\u5982\u679c\u662f\u7537\u6027\u7684\u8a71\u6216\u8a31\u662f\u5728\u505a\u98ef\u548c\u6d17\u6ecc\u4e0a\u5e0c\u671b\u5225\u4eba\u5e6b\u52a9\u7684\u6642\u5019\u3002<\/p>\n                        <div class=\"alert alert-info mt-4\" role=\"alert\">\n                            <i class=\"bi bi-lightbulb me-2\"><\/i>\n                            <strong>\u5efa\u8b70\uff1a<\/strong>\u5728\u9032\u5165\u5a5a\u59fb\u524d\uff0c\u5148\u57f9\u990a\u7368\u7acb\u8655\u7406\u554f\u984c\u7684\u80fd\u529b\uff0c\u9019\u6a23\u4f60\u7684\u5a5a\u59fb\u95dc\u4fc2\u6703\u66f4\u52a0\u5e73\u8861\u548c\u5065\u5eb7\u3002\n                        <\/div>\n                    `,\n                    scores: {\n                        independence: 40,\n                        responsibility: 50,\n                        emotional: 80,\n                        readiness: 60\n                    }\n                },\n                'B': {\n                    title: '\u8cac\u4efb\u578b\u4f34\u4fb6',\n                    content: `\n                        <h4 class=\"fw-bold mb-3\" style=\"color: #667eea;\">\u4f60\u7684\u5a5a\u59fb\u6e96\u5099\u985e\u578b\uff1a\u8cac\u4efb\u578b\u4f34\u4fb6<\/h4>\n                        <p class=\"fs-5 mb-3\">\u4f60\u662f\u5bec\u5b8f\u5927\u91cf\u7684\u4eba\uff0c\u4e0d\u7ba1\u5225\u4eba\u5c0d\u4f60\u505a\u4e86\u4ec0\u9ebc\uff0c\u4f60\u90fd\u80fd\u539f\u8ad2\u5c0d\u65b9\u3002\u5373\u4f7f\u4e0d\u662f\u81ea\u5df1\u7684\u8cac\u4efb\u4e5f\u6703\u5e87\u8b77\u670b\u53cb\u53ca\u5f8c\u8f29\uff0c\u66ff\u5225\u4eba\u627f\u64d4\u8cac\u4efb\u3002<\/p>\n                        <p class=\"fs-5 mb-3\">\u4f60\u7684\u9019\u7a2e\u6027\u683c\u4e5f\u5f71\u97ff\u8457\u6c7a\u5b9a\u7d50\u5a5a\u7684\u6642\u5019\uff0c\u5373\u5728\u793e\u6703\u4e0a\u53d6\u5f97\u4e86\u4e00\u5b9a\u7684\u5730\u4f4d\u5f8c\uff0c\u5c0d\u81ea\u5df1\u6709\u81ea\u4fe1\u7684\u6642\u5019\u5c31\u6703\u958b\u59cb\u8003\u616e\u7d50\u5a5a\u7684\u4e8b\u60c5\u3002<\/p>\n                        <div class=\"alert alert-success mt-4\" role=\"alert\">\n                            <i class=\"bi bi-star me-2\"><\/i>\n                            <strong>\u512a\u52e2\uff1a<\/strong>\u4f60\u5177\u6709\u6210\u719f\u7684\u8cac\u4efb\u611f\uff0c\u9019\u662f\u7dad\u6301\u9577\u4e45\u5a5a\u59fb\u95dc\u4fc2\u7684\u91cd\u8981\u7279\u8cea\u3002\n                        <\/div>\n                    `,\n                    scores: {\n                        independence: 85,\n                        responsibility: 95,\n                        emotional: 75,\n                        readiness: 90\n                    }\n                },\n                'C': {\n                    title: '\u81ea\u6211\u4fdd\u8b77\u578b\u4f34\u4fb6',\n                    content: `\n                        <h4 class=\"fw-bold mb-3\" style=\"color: #667eea;\">\u4f60\u7684\u5a5a\u59fb\u6e96\u5099\u985e\u578b\uff1a\u81ea\u6211\u4fdd\u8b77\u578b\u4f34\u4fb6<\/h4>\n                        <p class=\"fs-5 mb-3\">\u4f60\u662f\u5c0d\u81ea\u5df1\u53d7\u50b7\u7684\u4e8b\u60c5\u4e0a\u6bd4\u8f03\u654f\u611f\u7684\u4eba\u3002\u4f60\u7684\u81ea\u6211\u9632\u885b\u672c\u80fd\u53ef\u4ee5\u8aaa\u662f\u5225\u4eba\u7684\u5341\u500d\uff0c\u6709\u6642\u6703\u628a\u8cac\u4efb\u63a8\u5378\u5230\u5225\u4eba\u8eab\u4e0a\u4f86\u7dad\u8b77\u81ea\u5df1\u7684\u5229\u76ca\u3002<\/p>\n                        <p class=\"fs-5 mb-3\">\u56e0\u70ba\u9019\u7a2e\u985e\u578b\u7684\u4eba\u5118\u53ef\u80fd\u4e0d\u60f3\u8ca0\u8cac\u4efb\uff0c\u6240\u4ee5\u6709\u5f88\u591a\u4eba\u90fd\u4e0d\u9858\u610f\u7d50\u5a5a\u3002\u6240\u4ee5\u5728\u7236\u6bcd\u50ac\u4f60\u7d50\u5a5a\u7684\u6642\u5019\u624d\u662f\u4f60\u6c7a\u5b9a\u7d50\u5a5a\u7684\u6642\u5019\u3002<\/p>\n                        <div class=\"alert alert-warning mt-4\" role=\"alert\">\n                            <i class=\"bi bi-exclamation-triangle me-2\"><\/i>\n                            <strong>\u63d0\u9192\uff1a<\/strong>\u5b78\u7fd2\u627f\u64d4\u8cac\u4efb\u548c\u4fe1\u4efb\u4ed6\u4eba\uff0c\u5c07\u6709\u52a9\u65bc\u5efa\u7acb\u66f4\u6df1\u5c64\u7684\u89aa\u5bc6\u95dc\u4fc2\u3002\n                        <\/div>\n                    `,\n                    scores: {\n                        independence: 70,\n                        responsibility: 35,\n                        emotional: 45,\n                        readiness: 40\n                    }\n                },\n                'D': {\n                    title: '\u89c0\u671b\u578b\u4f34\u4fb6',\n                    content: `\n                        <h4 class=\"fw-bold mb-3\" style=\"color: #667eea;\">\u4f60\u7684\u5a5a\u59fb\u6e96\u5099\u985e\u578b\uff1a\u89c0\u671b\u578b\u4f34\u4fb6<\/h4>\n                        <p class=\"fs-5 mb-3\">\u4f60\u770b\u8d77\u4f86\u662f\u628a\u81ea\u5df1\u548c\u5225\u4eba\u5206\u958b\u7684\u4eba\uff0c\u5373\u5225\u4eba\u662f\u5225\u4eba\uff0c\u81ea\u5df1\u662f\u81ea\u5df1\u3002\u4f46\u662f\u5be6\u969b\u4e0a\u4f60\u5f88\u5728\u610f\u5225\u4eba\u600e\u9ebc\u770b\u4f60\u3002<\/p>\n                        <p class=\"fs-5 mb-3\">\u4f60\u6700\u521d\u610f\u8b58\u5230\u8981\u7d50\u5a5a\u662f\u56e0\u70ba\u670b\u53cb\u5011\u7684\u7d50\u5a5a\u9ad8\u6f6e\u3002\u96d6\u7136\u5f9e\u672a\u60f3\u904e\u7d50\u5a5a\u7684\u4e8b\u5152\uff0c\u4f46\u662f\u770b\u5230\u670b\u53cb\u5011\u4e00\u500b\u4e00\u500b\u5730\u7d50\u5a5a\uff0c\u5c31\u6703\u958b\u59cb\u8457\u6025\u3002\u6240\u4ee5\u9019\u500b\u985e\u578b\u4e2d\uff0c\u9583\u96fb\u7d50\u5a5a\u7684\u4eba\u4e5f\u4e0d\u5c11\u3002<\/p>\n                        <div class=\"alert alert-info mt-4\" role=\"alert\">\n                            <i class=\"bi bi-info-circle me-2\"><\/i>\n                            <strong>\u5efa\u8b70\uff1a<\/strong>\u50be\u807d\u5167\u5fc3\u7684\u8072\u97f3\uff0c\u4e0d\u8981\u56e0\u70ba\u5916\u754c\u58d3\u529b\u800c\u5009\u4fc3\u6c7a\u5b9a\uff0c\u627e\u5230\u9069\u5408\u81ea\u5df1\u7684\u7bc0\u594f\u3002\n                        <\/div>\n                    `,\n                    scores: {\n                        independence: 60,\n                        responsibility: 55,\n                        emotional: 65,\n                        readiness: 50\n                    }\n                }\n            };\n            \n            const result = results[this.selectedAnswer];\n            document.getElementById('result-content').innerHTML = result.content;\n            \n            this.showPage('result9');\n            this.scrollToTop();\n            \n            \/\/ \u5ef6\u9072\u5275\u5efa\u5716\u8868\u4ee5\u78ba\u4fdd\u5bb9\u5668\u53ef\u898b\n            setTimeout(() => {\n                this.createChart(result.scores);\n            }, 100);\n        }\n        \n        createChart(scores) {\n            \/\/ \u92b7\u6bc0\u820a\u5716\u8868\n            if (this.chartInstance) {\n                this.chartInstance.destroy();\n            }\n            \n            const ctx = document.getElementById('resultChart').getContext('2d');\n            this.chartInstance = new Chart(ctx, {\n                type: 'radar',\n                data: {\n                    labels: ['\u7368\u7acb\u6027', '\u8cac\u4efb\u611f', '\u60c5\u611f\u6210\u719f\u5ea6', '\u5a5a\u59fb\u6e96\u5099\u5ea6'],\n                    datasets: [{\n                        label: '\u4f60\u7684\u7279\u8cea\u5206\u6790',\n                        data: [scores.independence, scores.responsibility, scores.emotional, scores.readiness],\n                        backgroundColor: 'rgba(102, 126, 234, 0.2)',\n                        borderColor: 'rgba(102, 126, 234, 1)',\n                        pointBackgroundColor: 'rgba(102, 126, 234, 1)',\n                        pointBorderColor: '#fff',\n                        pointHoverBackgroundColor: '#fff',\n                        pointHoverBorderColor: 'rgba(102, 126, 234, 1)',\n                        borderWidth: 2,\n                        pointRadius: 5,\n                        pointHoverRadius: 7\n                    }]\n                },\n                options: {\n                    responsive: true,\n                    maintainAspectRatio: false,\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: '#4a5568'\n                            },\n                            grid: {\n                                color: 'rgba(0, 0, 0, 0.1)'\n                            }\n                        }\n                    }\n                }\n            });\n        }\n        \n        restartQuiz() {\n            \/\/ \u91cd\u7f6e\u72c0\u614b\n            this.selectedAnswer = null;\n            document.querySelectorAll('.option-card').forEach(card => {\n                card.classList.remove('selected');\n            });\n            \n            \/\/ \u92b7\u6bc0\u5716\u8868\n            if (this.chartInstance) {\n                this.chartInstance.destroy();\n                this.chartInstance = null;\n            }\n            \n            this.showPage('intro9');\n            this.scrollToTop();\n        }\n        \n        showPage(pageId) {\n            \/\/ \u96b1\u85cf\u6240\u6709\u9801\u9762\n            this.introPage.classList.add('d-none');\n            this.quizPage.classList.add('d-none');\n            this.resultPage.classList.add('d-none');\n            \n            \/\/ \u986f\u793a\u76ee\u6a19\u9801\u9762\n            const targetPage = document.getElementById(pageId === 'intro9' ? 'quizintro9' : \n                                                      pageId === 'quiz9' ? 'quizmain9' : 'quizresult9');\n            targetPage.classList.remove('d-none');\n            targetPage.classList.add('fade-in');\n            \n            this.currentPage = pageId;\n        }\n        \n        scrollToTop() {\n            const target = document.querySelector(`#${this.currentPage === 'intro9' ? 'quizintro9' : \n                                                   this.currentPage === 'quiz9' ? 'quizmain9' : 'quizresult9'} h2`);\n            if (target) {\n                target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n            }\n        }\n    }\n    \n    \/\/ \u521d\u59cb\u5316\u6e2c\u9a57\n    document.addEventListener('DOMContentLoaded', () => {\n        new MarriageQuiz();\n    });\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u5a5a\u59fb\u4e0e\u604b\u7231\u4e0d\u540c\uff0c\u8981\u6c42\u4eba\u4eec\u8d1f\u8d77\u767e\u5206\u4e4b\u767e\u7684\u8d23\u4efb\u3002\u56e0\u6b64\uff0c\u53ea\u6709\u61c2\u5f97\u627f\u62c5\u8d23\u4efb\u7684\u4eba\u624d\u9002\u5408\u7ed3\u5a5a\u3002\u5728\u5de5\u4f5c\u4e0a\u51fa\u73b0\u5dee\u9519\uff0c\u800c\u88ab\u4e0a\u53f8\u8d23\u5907\u65f6\u6240\u8868\u73b0\u51fa\u7684\u8a00\u884c\u53cd\u6620\u7740\u4f60\u7684\u8d23\u4efb\u611f\u548c\u5fe0\u8bda\u5fc3\u3002\u8fd9\u4e9b\u5728\u7ed3\u5a5a\u4e2d\u4e5f\u662f\u5fc5\u4e0d\u53ef\u7f3a\u7684\u3002\u8bf7\u60f3\u8c61\u4e0b\u9762\u7684\u573a\u666f\uff0c\u505a\u51fa\u4f60\u7684\u9009\u62e9\u3002<\/p>","protected":false},"author":19,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","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":"default","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":[179,178],"tags":[],"class_list":["post-2734","post","type-post","status-publish","format-standard","hentry","category-marriage","category-love"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2734","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=2734"}],"version-history":[{"count":4,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2734\/revisions"}],"predecessor-version":[{"id":10572,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2734\/revisions\/10572"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2734"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2734"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}