{"id":2729,"date":"2023-10-18T09:47:49","date_gmt":"2023-10-18T01:47:49","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2729"},"modified":"2025-08-18T03:07:25","modified_gmt":"2025-08-17T19:07:25","slug":"what-partner-like-most","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/what-partner-like-most","title":{"rendered":"\u5c0f\u6d4b\u9a8c\uff1a\u4f60\u559c\u6b22\u4ec0\u4e48\u6837\u7684\u5f02\u6027"},"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    <style>\n        \/* \u81ea\u5b9a\u7fa9\u6a23\u5f0f - \u4f7f\u7528\u8212\u7de9\u7642\u6108\u7684\u8272\u5f69 *\/\n        body {\n            background: #ffffff;\n            min-height: 100vh;\n        }\n        \n        .quiz-container-9 {\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n            max-width: 750px;\n            margin: 0 auto;\n            padding: 20px 15px;\n        }\n        \n        \/* \u5f15\u5c0e\u9801\u6a23\u5f0f - \u4f7f\u7528\u6eab\u6696\u7684\u6f38\u8b8a\u8272 *\/\n        .intro-hero-9 {\n            background: linear-gradient(135deg, #F8E4D9 0%, #FADED4 50%, #F2C6A7 100%);\n            color: #6B4423;\n            padding: 2.5rem 2rem;\n            border-radius: 24px;\n            margin-bottom: 2rem;\n            box-shadow: 0 10px 30px rgba(242, 198, 167, 0.25);\n        }\n        \n        .intro-feature-9 {\n            background: #ffffff;\n            border-radius: 20px;\n            padding: 1.8rem;\n            box-shadow: 0 6px 20px rgba(0,0,0,0.08);\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\n            height: 100%;\n            border: 1px solid #FFF5F0;\n        }\n        \n        .intro-feature-9:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 12px 30px rgba(0,0,0,0.12);\n        }\n        \n        .intro-feature-icon-9 {\n            width: 60px;\n            height: 60px;\n            background: linear-gradient(135deg, #FFD4B2 0%, #F2C6A7 100%);\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin: 0 auto 1rem;\n            color: #6B4423;\n            font-size: 24px;\n            box-shadow: 0 4px 12px rgba(242, 198, 167, 0.3);\n        }\n        \n        .start-btn-9 {\n            background: linear-gradient(135deg, #F2C6A7 0%, #E8B299 100%);\n            border: none;\n            color: #FFFFFF;\n            padding: 14px 40px;\n            font-size: 18px;\n            font-weight: 600;\n            border-radius: 50px;\n            box-shadow: 0 6px 20px rgba(242, 198, 167, 0.4);\n            transition: all 0.3s ease;\n        }\n        \n        .start-btn-9:hover {\n            transform: translateY(-3px);\n            box-shadow: 0 8px 25px rgba(242, 198, 167, 0.5);\n            background: linear-gradient(135deg, #E8B299 0%, #F2C6A7 100%);\n            color: #FFFFFF;\n        }\n        \n        \/* \u6e2c\u9a57\u9801\u6a23\u5f0f *\/\n        .quiz-header-9 {\n            background: linear-gradient(135deg, #F8E4D9 0%, #FADED4 100%);\n            color: #6B4423;\n            padding: 1.8rem;\n            border-radius: 20px;\n            margin-bottom: 1.8rem;\n            box-shadow: 0 6px 20px rgba(242, 198, 167, 0.2);\n        }\n        \n        .quiz-header-9 h3 {\n            font-size: 24px;\n            font-weight: bold;\n            margin: 0;\n        }\n        \n        \/* \u5716\u7247\u7db2\u683c\u512a\u5316 *\/\n        .image-grid-9 {\n            display: grid;\n            grid-template-columns: repeat(2, 170px);\n            gap: 20px;\n            margin: 2rem auto;\n            justify-content: center;\n        }\n        \n        .image-slot-9 {\n            width: 170px;\n            height: 170px;\n            background: #FFFBF8;\n            border: 3px dashed #F2C6A7;\n            border-radius: 16px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            position: relative;\n            overflow: hidden;\n            transition: all 0.3s ease;\n            flex-direction: column;\n            cursor: pointer;\n        }\n        \n        .image-slot-9 .text-muted {\n            font-size: 14px;\n            color: #B8957A !important;\n            text-align: center;\n            padding: 0 10px;\n            font-weight: 500;\n        }\n        \n        .image-slot-9.filled {\n            border: 3px solid #F2C6A7;\n            background: white;\n            box-shadow: 0 4px 12px rgba(242, 198, 167, 0.2);\n        }\n        \n        .image-slot-9.drag-over {\n            background: #FFF5F0;\n            border-color: #E8B299;\n            transform: scale(1.05);\n            box-shadow: 0 8px 20px rgba(242, 198, 167, 0.3);\n        }\n        \n        .slot-label-9 {\n            position: absolute;\n            top: 10px;\n            right: 10px;\n            background: linear-gradient(135deg, #F2C6A7 0%, #E8B299 100%);\n            color: white;\n            padding: 4px 12px;\n            border-radius: 20px;\n            font-size: 13px;\n            font-weight: 600;\n            z-index: 10;\n            box-shadow: 0 2px 8px rgba(242, 198, 167, 0.3);\n        }\n        \n        \/* \u53ef\u62d6\u62fd\u5716\u7247\u6a23\u5f0f\u512a\u5316 *\/\n        .draggable-image-9 {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            cursor: grab;\n            transition: transform 0.2s ease, opacity 0.2s ease;\n            border-radius: 13px;\n            user-select: none;\n        }\n        \n        .draggable-image-9:active {\n            cursor: grabbing;\n        }\n        \n        .draggable-image-9:hover {\n            transform: scale(1.02);\n        }\n        \n        .draggable-image-9.dragging {\n            opacity: 0.6;\n            cursor: grabbing;\n        }\n        \n        \/* \u5716\u7247\u9078\u9805\u5340\u512a\u5316 *\/\n        .image-options-9 {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, 170px);\n            gap: 15px;\n            margin-top: 2rem;\n            padding: 1.5rem;\n            background: #FFFBF8;\n            border-radius: 20px;\n            border: 1px solid #FFF5F0;\n            justify-content: center;\n            box-shadow: 0 4px 15px rgba(0,0,0,0.05);\n        }\n        \n        .image-option-wrapper-9 {\n            position: relative;\n            width: 170px;\n            height: 170px;\n            border-radius: 14px;\n            overflow: hidden;\n            box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n            transition: all 0.3s ease;\n            background: white;\n            cursor: grab;\n        }\n        \n        .image-option-wrapper-9:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 8px 20px rgba(0,0,0,0.15);\n        }\n        \n        .image-option-wrapper-9.disabled {\n            opacity: 0.3;\n            pointer-events: none;\n        }\n        \n        \/* \u63d0\u4ea4\u6309\u9215\u512a\u5316 *\/\n        .submit-btn-9 {\n            background: linear-gradient(135deg, #98D4A9 0%, #7BC693 100%);\n            border: none;\n            color: white;\n            padding: 14px 40px;\n            font-size: 18px;\n            font-weight: 600;\n            border-radius: 50px;\n            box-shadow: 0 6px 20px rgba(123, 198, 147, 0.3);\n            transition: all 0.3s ease;\n            display: none;\n        }\n        \n        .submit-btn-9:hover:not(:disabled) {\n            transform: translateY(-3px);\n            box-shadow: 0 8px 25px rgba(123, 198, 147, 0.4);\n            background: linear-gradient(135deg, #7BC693 0%, #98D4A9 100%);\n            color: white;\n        }\n        \n        .submit-btn-9.show {\n            display: inline-block;\n            animation: fadeInScale 0.4s ease;\n        }\n        \n        @keyframes fadeInScale {\n            from { \n                opacity: 0; \n                transform: scale(0.9);\n            }\n            to { \n                opacity: 1; \n                transform: scale(1);\n            }\n        }\n        \n        \/* \u7d50\u679c\u9801\u6a23\u5f0f *\/\n        .result-header-9 {\n            background: linear-gradient(135deg, #F8E4D9 0%, #FADED4 100%);\n            color: #6B4423;\n            padding: 2rem;\n            border-radius: 20px;\n            margin-bottom: 2rem;\n            text-align: center;\n            box-shadow: 0 8px 25px rgba(242, 198, 167, 0.25);\n        }\n        \n        .result-card-9 {\n            background: white;\n            border-radius: 20px;\n            padding: 2rem;\n            box-shadow: 0 6px 20px rgba(0,0,0,0.08);\n            margin-bottom: 1.8rem;\n            border: 1px solid #FFF5F0;\n        }\n        \n        .result-type-9 {\n            background: linear-gradient(135deg, #F2C6A7 0%, #E8B299 100%);\n            color: white;\n            padding: 0.8rem 2rem;\n            border-radius: 50px;\n            display: inline-block;\n            font-size: 20px;\n            font-weight: bold;\n            margin-bottom: 1.5rem;\n            box-shadow: 0 4px 15px rgba(242, 198, 167, 0.3);\n        }\n        \n        .trait-badge-9 {\n            display: inline-block;\n            background: #FFF5F0;\n            color: #8B6B47;\n            padding: 8px 16px;\n            border-radius: 25px;\n            font-size: 14px;\n            margin: 4px;\n            border: 1px solid #FADED4;\n            font-weight: 500;\n        }\n        \n        .advice-section-9 {\n            background: linear-gradient(135deg, #FFF5F0 0%, #FFFBF8 100%);\n            border-left: 4px solid #F2C6A7;\n            padding: 1.2rem 1.5rem;\n            border-radius: 12px;\n            margin-top: 1.5rem;\n        }\n        \n        .advice-section-9 h5 {\n            color: #6B4423;\n            font-size: 17px;\n            font-weight: 600;\n            margin-bottom: 1rem;\n        }\n        \n        .retry-btn-9 {\n            background: linear-gradient(135deg, #98D4A9 0%, #7BC693 100%);\n            border: none;\n            color: white;\n            padding: 14px 40px;\n            font-size: 17px;\n            font-weight: 600;\n            border-radius: 50px;\n            box-shadow: 0 6px 20px rgba(123, 198, 147, 0.3);\n            transition: all 0.3s ease;\n        }\n        \n        .retry-btn-9:hover {\n            transform: translateY(-3px);\n            box-shadow: 0 8px 25px rgba(123, 198, 147, 0.4);\n            background: linear-gradient(135deg, #7BC693 0%, #98D4A9 100%);\n            color: white;\n        }\n        \n        \/* \u6307\u793a\u6587\u5b57\u512a\u5316 *\/\n        .instruction-text-9 {\n            background: linear-gradient(135deg, #FFF5F0 0%, #FFFBF8 100%);\n            border-left: 4px solid #F2C6A7;\n            padding: 1rem 1.5rem;\n            border-radius: 12px;\n            margin-bottom: 1.5rem;\n            font-size: 15px;\n            color: #6B4423;\n            box-shadow: 0 3px 10px rgba(0,0,0,0.05);\n        }\n        \n        \/* \u52d5\u756b\u6548\u679c *\/\n        .fade-in-9 {\n            animation: fadeIn 0.6s ease-in;\n        }\n        \n        @keyframes fadeIn {\n            from { \n                opacity: 0; \n                transform: translateY(20px); \n            }\n            to { \n                opacity: 1; \n                transform: translateY(0); \n            }\n        }\n        \n        \/* \u62d6\u62fd\u63d0\u793a\u52d5\u756b *\/\n        .drag-hint {\n            animation: pulse 2s infinite;\n        }\n        \n        @keyframes pulse {\n            0%, 100% { transform: scale(1); }\n            50% { transform: scale(1.05); }\n        }\n        \n        \/* \u79fb\u52d5\u7aef\u512a\u5316 *\/\n        @media (max-width: 480px) {\n            .image-grid-9 {\n                grid-template-columns: repeat(2, 150px);\n                gap: 15px;\n            }\n            \n            .image-slot-9,\n            .image-option-wrapper-9 {\n                width: 150px;\n                height: 150px;\n            }\n            \n            .image-options-9 {\n                grid-template-columns: repeat(2, 150px);\n            }\n        }\n        \n        \/* \u5716\u8868\u5bb9\u5668 *\/\n        .chart-container-9 {\n            position: relative;\n            height: 300px;\n            margin: 2rem auto;\n            max-width: 450px;\n        }\n        \n        \/* \u6539\u5584\u8996\u89ba\u53cd\u994b *\/\n        .image-slot-9.has-image {\n            animation: acceptImage 0.3s ease;\n        }\n        \n        @keyframes acceptImage {\n            0% { transform: scale(1); }\n            50% { transform: scale(1.08); }\n            100% { transform: scale(1); }\n        }\n        \n        \/* \u79fb\u9664\u5716\u7247\u7684\u8996\u89ba\u63d0\u793a *\/\n        .remove-hint {\n            position: absolute;\n            bottom: 8px;\n            left: 50%;\n            transform: translateX(-50%);\n            background: rgba(0,0,0,0.7);\n            color: white;\n            padding: 4px 10px;\n            border-radius: 12px;\n            font-size: 11px;\n            opacity: 0;\n            transition: opacity 0.3s ease;\n            pointer-events: none;\n        }\n        \n        .image-slot-9.filled:hover .remove-hint {\n            opacity: 1;\n        }\n    <\/style>\n    <div class=\"quiz-container-9\">\n        <!-- \u5f15\u5c0e\u9801 -->\n        <section id=\"quizintro9\" data-page=\"intro9\">\n            <div class=\"intro-hero-9 text-center fade-in-9\">\n                <h2 class=\"mb-3\">\u4f60\u559c\u6b61\u4ec0\u9ebc\u6a23\u7684\u7570\u6027\uff1f<\/h2>\n                <p class=\"lead mb-0\">\u63a2\u7d22\u4f60\u7684\u6f5b\u610f\u8b58\u611b\u60c5\u504f\u597d<\/p>\n            <\/div>\n            \n            <div class=\"row g-3 mb-4\">\n                <div class=\"col-md-4\">\n                    <div class=\"intro-feature-9\">\n                        <div class=\"intro-feature-icon-9\">\n                            <i class=\"bi bi-heart-fill\"><\/i>\n                        <\/div>\n                        <h4 class=\"text-center mb-3 fs-5\">\u6df1\u5165\u77ad\u89e3\u81ea\u5df1<\/h4>\n                        <p class=\"text-muted small\">\u900f\u904e\u7c21\u55ae\u7684\u5716\u7247\u6392\u5e8f\uff0c\u63ed\u793a\u4f60\u5728\u9078\u64c7\u4f34\u4fb6\u6642\u7684\u6f5b\u610f\u8b58\u504f\u597d\uff0c\u66f4\u597d\u5730\u8a8d\u8b58\u81ea\u5df1\u7684\u5167\u5fc3\u9700\u6c42\u3002<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"col-md-4\">\n                    <div class=\"intro-feature-9\">\n                        <div class=\"intro-feature-icon-9\">\n                            <i class=\"bi bi-eye-fill\"><\/i>\n                        <\/div>\n                        <h4 class=\"text-center mb-3 fs-5\">\u79d1\u5b78\u5fc3\u7406\u5206\u6790<\/h4>\n                        <p class=\"text-muted small\">\u57fa\u65bc\u5fc3\u7406\u5b78\u7814\u7a76\uff0c\u5206\u6790\u5916\u5728\u5f62\u8c61\u3001\u5167\u6db5\u50f9\u503c\u3001\u793e\u6703\u689d\u4ef6\u7b49\u56e0\u7d20\u5982\u4f55\u5f71\u97ff\u4f60\u7684\u611b\u60c5\u9078\u64c7\u3002<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"col-md-4\">\n                    <div class=\"intro-feature-9\">\n                        <div class=\"intro-feature-icon-9\">\n                            <i class=\"bi bi-stars\"><\/i>\n                        <\/div>\n                        <h4 class=\"text-center mb-3 fs-5\">\u500b\u6027\u5316\u5efa\u8b70<\/h4>\n                        <p class=\"text-muted small\">\u6839\u64da\u4f60\u7684\u9078\u64c7\u63d0\u4f9b\u591a\u7dad\u5ea6\u5206\u6790\uff0c\u7372\u5f97\u5c08\u5c6c\u7684\u611b\u60c5\u89c0\u89e3\u8b80\u548c\u5be6\u7528\u5efa\u8b70\u3002<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"text-center\">\n                <p class=\"mb-4 text-muted text-start\">\n\u5fc3\u7406\u5b78\u7814\u7a76\u767c\u73fe\uff0c\u5916\u5728\u5f62\u8c61\u3001\u5167\u6db5\u50f9\u503c\u3001\u793e\u6703\u689d\u4ef6\u4ee5\u53ca\u81ea\u8eab\u7684\u9700\u8981\u3001\u8208\u8da3\u3001\u7406\u60f3\u3001\u6027\u683c\u3001\u4fee\u990a\u7b49\u5f71\u97ff\u8457\u611b\u60c5\u5c0d\u8c61\u7684\u9078\u64c7\u3002<br>\u5f9e\u7ae5\u5e74\u8d77\uff0c\u6211\u5011\u5c31\u958b\u59cb\u8a8d\u8b58\u548c\u63a5\u89f8\u7570\u6027\uff0c\u5c0d\u7570\u6027\u7522\u751f\u597d\u611f\uff0c\u4e26\u628a\u5f15\u8d77\u597d\u611f\u7684\u67d0\u4e9b\u7570\u6027\u5f62\u8c61\u6f5b\u85cf\u5728\u6f5b\u610f\u8b58\u88e1\u3002\u5728\u6f5b\u610f\u8b58\u88e1\uff0c\u6211\u5011\u5c07\u65e5\u5e38\u751f\u6d3b\u4e2d\u6240\u8a8d\u8b58\u3001\u63a5\u89f8\u5230\u7684\u8a31\u591a\u96f6\u6563\u3001\u591a\u6a23\u7684\u7570\u6027\u5f62\u8c61\u9032\u884c\u7d9c\u5408\uff0c\u5f62\u6210\u4e00\u500b\u6726\u6726\u6727\u6727\u7684\u6a21\u7cca\u5f62\u8c61\uff0c\u4f5c\u70ba\u611b\u60c5\u7684\u5c0d\u8c61\uff0c\u6291\u58d3\u5728\u6f5b\u610f\u8b58\u88e1\u3002<br>\n\u600e\u6a23\u624d\u80fd\u77e5\u9053\u81ea\u5df1\u559c\u6b61\u4ec0\u9ebc\u6a23\u7684\u7570\u6027\u5462\uff1f\u56db\u5f35\u5716\u7247\u6309\u7167\u4f60\u81ea\u5df2\u559c\u6b61\u7684\u65b9\u5f0f\u91cd\u65b0\u6392\u5217\u4e00\u4e0b\uff0c\u770b\u770b\u4f60\u6703\u600e\u9ebc\u505a\u3002<br>\u73fe\u5728\uff0c\u8b93\u6211\u5011\u4e00\u8d77\u63a2\u7d22\u4f60\u5167\u5fc3\u6df1\u8655\u7684\u611b\u60c5\u5bc6\u78bc\uff01<\/p>\n                <button class=\"btn start-btn-9\" onclick=\"quizApp9.startQuiz()\">\n                    <i class=\"bi bi-play-circle-fill 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\" style=\"display: none;\">\n            <div class=\"quiz-header-9 text-center\">\n                <h3>\u5716\u7247\u6392\u5e8f\u6e2c\u9a57<\/h3>\n            <\/div>\n            \n            <div class=\"instruction-text-9\">\n                <i class=\"bi bi-info-circle-fill me-2\"><\/i>\n                \u8acb\u5c07\u4e0b\u65b9\u7684\u56db\u5f35\u5716\u7247\u6309\u7167\u4f60\u559c\u6b61\u7684\u9806\u5e8f\u62d6\u62fd\u5230\u4e0a\u65b9\u7684\u683c\u5b50\u4e2d\u3002\u9ede\u64ca\u5df2\u653e\u7f6e\u7684\u5716\u7247\u53ef\u4ee5\u79fb\u9664\u3002\n            <\/div>\n            \n            <div class=\"image-grid-9\">\n                <div class=\"image-slot-9\" data-position=\"1\">\n                    <span class=\"slot-label-9\">\u7b2c 1 \u4f4d<\/span>\n                    <span class=\"text-muted\">\u6700\u559c\u6b61<\/span>\n                    <span class=\"remove-hint\">\u9ede\u64ca\u79fb\u9664<\/span>\n                <\/div>\n                <div class=\"image-slot-9\" data-position=\"2\">\n                    <span class=\"slot-label-9\">\u7b2c 2 \u4f4d<\/span>\n                    <span class=\"text-muted\">\u6bd4\u8f03\u559c\u6b61<\/span>\n                    <span class=\"remove-hint\">\u9ede\u64ca\u79fb\u9664<\/span>\n                <\/div>\n                <div class=\"image-slot-9\" data-position=\"3\">\n                    <span class=\"slot-label-9\">\u7b2c 3 \u4f4d<\/span>\n                    <span class=\"text-muted\">\u4e00\u822c\u559c\u6b61<\/span>\n                    <span class=\"remove-hint\">\u9ede\u64ca\u79fb\u9664<\/span>\n                <\/div>\n                <div class=\"image-slot-9\" data-position=\"4\">\n                    <span class=\"slot-label-9\">\u7b2c 4 \u4f4d<\/span>\n                    <span class=\"text-muted\">\u76f8\u5c0d\u4e0d\u559c\u6b61<\/span>\n                    <span class=\"remove-hint\">\u9ede\u64ca\u79fb\u9664<\/span>\n                <\/div>\n            <\/div>\n            \n            <div class=\"image-options-9\">\n                <div class=\"image-option-wrapper-9\" data-wrapper-id=\"1\">\n                    <img decoding=\"async\" src=\"https:\/\/xinliceyan.org\/wp-content\/uploads\/2025\/08\/4lian-sm-nanren01.jpg\" \n                         class=\"draggable-image-9\" \n                         draggable=\"true\" \n                         data-image-id=\"1\"\n                         alt=\"\u6d6a\u6f2b\u6c1b\u570d\u7167\u7247\">\n                <\/div>\n                <div class=\"image-option-wrapper-9\" data-wrapper-id=\"2\">\n                    <img decoding=\"async\" src=\"https:\/\/xinliceyan.org\/wp-content\/uploads\/2025\/08\/4lian-sm-nanren02.jpg\" \n                         class=\"draggable-image-9\" \n                         draggable=\"true\" \n                         data-image-id=\"2\"\n                         alt=\"\u7345\u5b50\u7167\u7247\">\n                <\/div>\n                <div class=\"image-option-wrapper-9\" data-wrapper-id=\"3\">\n                    <img decoding=\"async\" src=\"https:\/\/xinliceyan.org\/wp-content\/uploads\/2025\/08\/4lian-sm-nanren03.jpg\" \n                         class=\"draggable-image-9\" \n                         draggable=\"true\" \n                         data-image-id=\"3\"\n                         alt=\"\u5973\u6027\u80cc\u5f71\">\n                <\/div>\n                <div class=\"image-option-wrapper-9\" data-wrapper-id=\"4\">\n                    <img decoding=\"async\" src=\"https:\/\/xinliceyan.org\/wp-content\/uploads\/2025\/08\/4lian-sm-nanren04.jpg\" \n                         class=\"draggable-image-9\" \n                         draggable=\"true\" \n                         data-image-id=\"4\"\n                         alt=\"\u98a8\u666f\u7167\u7247\">\n                <\/div>\n            <\/div>\n            \n            <div class=\"text-center mt-4\">\n                <button class=\"btn submit-btn-9\" onclick=\"quizApp9.submitQuiz()\">\n                    <i class=\"bi bi-check-circle-fill me-2\"><\/i>\u67e5\u770b\u7d50\u679c\n                <\/button>\n            <\/div>\n        <\/section>\n        \n        <!-- \u7d50\u679c\u9801 -->\n        <section id=\"quizresult9\" data-page=\"result9\" style=\"display: none;\">\n            <div class=\"result-header-9 fade-in-9\">\n                <h2>\u6d4b\u9a8c\u7ed3\u679c<\/h2>\n                <p class=\"mb-0\">\u4f60\u7684\u611b\u60c5\u504f\u597d\u985e\u578b\u5206\u6790<\/p>\n            <\/div>\n            \n            <div class=\"result-card-9 fade-in-9\">\n                <div class=\"text-center\">\n                    <div id=\"resultType9\" class=\"result-type-9\"><\/div>\n                <\/div>\n                <div id=\"resultDescription9\" class=\"lh-lg\"><\/div>\n                \n                <div class=\"mt-3\">\n                    <h5 class=\"mb-2\" style=\"color: #6B4423;\">\u4f60\u7684\u7279\u8cea\u6a19\u7c64\uff1a<\/h5>\n                    <div id=\"resultTraits9\"><\/div>\n                <\/div>\n                \n                <div class=\"advice-section-9\">\n                    <h5>\u500b\u6027\u5316\u5efa\u8b70<\/h5>\n                    <div id=\"personalAdvice9\"><\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"result-card-9 fade-in-9\">\n                <h4 class=\"text-center mb-4\" style=\"color: #6B4423;\">\u4f60\u7684\u611b\u60c5\u504f\u597d\u50be\u5411\u5206\u6790<\/h4>\n                <div class=\"chart-container-9\">\n                    <canvas id=\"resultChart9\"><\/canvas>\n                <\/div>\n                <div id=\"dimensionAnalysis9\" class=\"mt-3\"><\/div>\n            <\/div>\n            \n            <div class=\"text-center mt-4\">\n                <button class=\"btn retry-btn-9\" onclick=\"quizApp9.retryQuiz()\">\n                    <i class=\"bi bi-arrow-clockwise me-2\"><\/i>\u91cd\u65b0\u6d4b\u8bd5\n                <\/button>\n            <\/div>\n        <\/section>\n    <\/div>\n    \n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n    <script>\n        const quizApp9 = (() => {\n            let draggedElement = null;\n            let placedImages = {};\n            let chartInstance = null;\n            let touchItem = null;\n            \n            const resultTypes = {\n                1: {\n                    title: '\u5916\u8c8c\u9b45\u529b\u578b',\n                    description: '\u4f60\u662f\u4e00\u500b\u91cd\u8996\u7f8e\u611f\u8207\u548c\u8ae7\u7684\u4eba\u3002\u9078\u64c7\u6d6a\u6f2b\u6c1b\u570d\u7167\u7247\u986f\u793a\u4f60\u5bb9\u6613\u88ab\u5916\u5728\u7f8e\u611f\u6240\u5438\u5f15\uff0c\u9019\u4e0d\u50c5\u9650\u65bc\u5916\u8c8c\uff0c\u9084\u5305\u62ec\u6574\u9ad4\u6c23\u8cea\u3001\u54c1\u5473\u548c\u751f\u6d3b\u65b9\u5f0f\u3002\u4f60\u6b23\u8cde\u512a\u96c5\u7684\u8209\u6b62\u3001\u5f97\u9ad4\u7684\u7a7f\u8457\u548c\u7cbe\u7dfb\u7684\u751f\u6d3b\u614b\u5ea6\u3002',\n                    traits: ['\u5be9\u7f8e\u654f\u611f', '\u6d6a\u6f2b\u4e3b\u7fa9', '\u91cd\u8996\u7b2c\u4e00\u5370\u8c61', '\u8ffd\u6c42\u751f\u6d3b\u54c1\u8cea', '\u611f\u6027\u601d\u7dad'],\n                    advice: '\u5efa\u8b70\u5728\u6b23\u8cde\u5916\u5728\u7f8e\u7684\u540c\u6642\uff0c\u591a\u82b1\u6642\u9593\u77ad\u89e3\u5c0d\u65b9\u7684\u5167\u5728\u54c1\u8cea\u3002\u53ef\u4ee5\u900f\u904e\u5171\u540c\u8208\u8da3\u3001\u6df1\u5ea6\u5c0d\u8a71\u4f86\u767c\u73fe\u5c0d\u65b9\u7684\u50f9\u503c\u89c0\u548c\u6027\u683c\u7279\u8cea\uff0c\u9019\u6a23\u80fd\u5e6b\u52a9\u4f60\u627e\u5230\u5167\u5916\u517c\u4fee\u7684\u7406\u60f3\u4f34\u4fb6\u3002',\n                    scores: {\n                        appearance: 88,\n                        status: 35,\n                        reputation: 42,\n                        personality: 55,\n                        emotion: 75,\n                        compatibility: 60\n                    }\n                },\n                2: {\n                    title: '\u5730\u4f4d\u6b0a\u529b\u578b',\n                    description: '\u7345\u5b50\u8c61\u5fb5\u8457\u529b\u91cf\u8207\u9818\u5c0e\u3002\u4f60\u91cd\u8996\u4f34\u4fb6\u7684\u793e\u6703\u5730\u4f4d\u3001\u4e8b\u696d\u6210\u5c31\u548c\u7d93\u6fdf\u80fd\u529b\u3002\u9019\u53cd\u6620\u51fa\u4f60\u5c0d\u5b89\u5168\u611f\u548c\u7a69\u5b9a\u6027\u7684\u8ffd\u6c42\uff0c\u5e0c\u671b\u627e\u5230\u4e00\u500b\u80fd\u5920\u63d0\u4f9b\u4fdd\u8b77\u548c\u652f\u6301\u7684\u4f34\u4fb6\u3002',\n                    traits: ['\u8ffd\u6c42\u5b89\u5168\u611f', '\u91cd\u8996\u7a69\u5b9a', '\u76ee\u6a19\u5c0e\u5411', '\u52d9\u5be6\u4e3b\u7fa9', '\u9577\u9060\u898f\u5283'],\n                    advice: '\u5728\u95dc\u6ce8\u5c0d\u65b9\u6210\u5c31\u7684\u540c\u6642\uff0c\u4e5f\u8981\u91cd\u8996\u60c5\u611f\u9023\u7d50\u3002\u771f\u6b63\u7684\u5b89\u5168\u611f\u4f86\u81ea\u65bc\u76f8\u4e92\u7406\u89e3\u548c\u652f\u6301\u3002\u5efa\u8b70\u591a\u95dc\u6ce8\u5c0d\u65b9\u7684\u4eba\u683c\u7279\u8cea\u3001\u50f9\u503c\u89c0\u662f\u5426\u8207\u4f60\u5951\u5408\uff0c\u9019\u6a23\u624d\u80fd\u5efa\u7acb\u6301\u4e45\u7684\u95dc\u4fc2\u3002',\n                    scores: {\n                        appearance: 45,\n                        status: 92,\n                        reputation: 65,\n                        personality: 48,\n                        emotion: 55,\n                        compatibility: 70\n                    }\n                },\n                3: {\n                    title: '\u793e\u6703\u8a8d\u540c\u578b',\n                    description: '\u9078\u64c7\u5973\u6027\u80cc\u5f71\u8868\u793a\u4f60\u91cd\u8996\u4ed6\u4eba\u7684\u770b\u6cd5\u548c\u793e\u6703\u8a55\u50f9\u3002\u4f60\u7684\u611f\u60c5\u9078\u64c7\u5bb9\u6613\u53d7\u5230\u670b\u53cb\u3001\u5bb6\u4eba\u6216\u793e\u6703\u89c0\u9ede\u7684\u5f71\u97ff\u3002\u4f60\u5e0c\u671b\u4f60\u7684\u9078\u64c7\u80fd\u5f97\u5230\u5468\u570d\u4eba\u7684\u8a8d\u53ef\u548c\u8b9a\u8cde\u3002',\n                    traits: ['\u91cd\u8996\u548c\u8ae7', '\u793e\u4ea4\u654f\u611f', '\u7fa4\u9ad4\u610f\u8b58\u5f37', '\u5728\u610f\u5f62\u8c61', '\u9069\u61c9\u529b\u5f37'],\n                    advice: '\u5b78\u6703\u50be\u807d\u5167\u5fc3\u7684\u8072\u97f3\uff0c\u5206\u8fa8\u54ea\u4e9b\u662f\u771f\u6b63\u7684\u611f\u53d7\uff0c\u54ea\u4e9b\u662f\u5916\u754c\u7684\u5f71\u97ff\u3002\u53ef\u4ee5\u900f\u904e\u7368\u8655\u601d\u8003\u3001\u5beb\u65e5\u8a18\u7b49\u65b9\u5f0f\u4f86\u91d0\u6e05\u81ea\u5df1\u7684\u771f\u5be6\u9700\u6c42\uff0c\u627e\u5230\u771f\u6b63\u9069\u5408\u81ea\u5df1\u800c\u975e\u53ea\u662f\u7b26\u5408\u4ed6\u4eba\u671f\u5f85\u7684\u4f34\u4fb6\u3002',\n                    scores: {\n                        appearance: 62,\n                        status: 55,\n                        reputation: 90,\n                        personality: 58,\n                        emotion: 65,\n                        compatibility: 52\n                    }\n                },\n                4: {\n                    title: '\u6027\u683c\u6df1\u5ea6\u578b',\n                    description: '\u9078\u64c7\u98a8\u666f\u7167\u7247\u986f\u793a\u4f60\u6ce8\u91cd\u5167\u5728\u54c1\u8cea\u548c\u7cbe\u795e\u5c64\u9762\u7684\u5951\u5408\u3002\u4f60\u9700\u8981\u6642\u9593\u4f86\u77ad\u89e3\u5c0d\u65b9\uff0c\u91cd\u8996\u50f9\u503c\u89c0\u3001\u4eba\u751f\u614b\u5ea6\u548c\u6027\u683c\u7684\u5339\u914d\u3002\u4f60\u8ffd\u6c42\u7684\u662f\u5fc3\u9748\u4f34\u4fb6\uff0c\u800c\u975e\u8868\u9762\u7684\u5438\u5f15\u3002',\n                    traits: ['\u601d\u616e\u6df1\u9060', '\u91cd\u8996\u5167\u6db5', '\u60c5\u611f\u7a69\u5b9a', '\u5fe0\u8aa0\u5c08\u4e00', '\u7cbe\u795e\u8ffd\u6c42'],\n                    advice: '\u4f60\u7684\u512a\u52e2\u5728\u65bc\u80fd\u5efa\u7acb\u6df1\u539a\u6301\u4e45\u7684\u611f\u60c5\u3002\u4f46\u4e5f\u8981\u6ce8\u610f\u4e0d\u8981\u904e\u65bc\u7406\u6027\uff0c\u9069\u7576\u5730\u4fdd\u6301\u958b\u653e\u548c\u6d6a\u6f2b\u3002\u53ef\u4ee5\u5617\u8a66\u5728\u521d\u8b58\u968e\u6bb5\u5c31\u5c55\u73fe\u771f\u5be6\u7684\u81ea\u5df1\uff0c\u9019\u6a23\u66f4\u5bb9\u6613\u5438\u5f15\u5230\u5fd7\u540c\u9053\u5408\u7684\u4eba\u3002',\n                    scores: {\n                        appearance: 38,\n                        status: 45,\n                        reputation: 48,\n                        personality: 95,\n                        emotion: 85,\n                        compatibility: 88\n                    }\n                }\n            };\n            \n            const init = () => {\n                setupDragAndDrop();\n                setupTouchEvents();\n            };\n            \n            const setupDragAndDrop = () => {\n                const images = document.querySelectorAll('.draggable-image-9');\n                const slots = document.querySelectorAll('.image-slot-9');\n                \n                \/\/ \u684c\u9762\u7aef\u62d6\u62fd\u4e8b\u4ef6\n                images.forEach(img => {\n                    img.addEventListener('dragstart', handleDragStart);\n                    img.addEventListener('dragend', handleDragEnd);\n                });\n                \n                slots.forEach(slot => {\n                    slot.addEventListener('dragover', handleDragOver);\n                    slot.addEventListener('drop', handleDrop);\n                    slot.addEventListener('dragleave', handleDragLeave);\n                    slot.addEventListener('click', handleSlotClick);\n                });\n            };\n            \n            const setupTouchEvents = () => {\n                const images = document.querySelectorAll('.draggable-image-9');\n                \n                images.forEach(img => {\n                    img.addEventListener('touchstart', handleTouchStart, {passive: false});\n                    img.addEventListener('touchmove', handleTouchMove, {passive: false});\n                    img.addEventListener('touchend', handleTouchEnd);\n                });\n            };\n            \n            const handleDragStart = (e) => {\n                draggedElement = e.target;\n                e.target.classList.add('dragging');\n                e.dataTransfer.effectAllowed = 'move';\n                e.dataTransfer.setData('text\/html', e.target.innerHTML);\n            };\n            \n            const handleDragEnd = (e) => {\n                e.target.classList.remove('dragging');\n                draggedElement = null;\n            };\n            \n            const handleDragOver = (e) => {\n                e.preventDefault();\n                e.currentTarget.classList.add('drag-over');\n            };\n            \n            const handleDragLeave = (e) => {\n                e.currentTarget.classList.remove('drag-over');\n            };\n            \n            const handleDrop = (e) => {\n                e.preventDefault();\n                const slot = e.currentTarget;\n                slot.classList.remove('drag-over');\n                \n                if (draggedElement) {\n                    placeImageInSlot(draggedElement, slot);\n                }\n            };\n            \n            const handleSlotClick = (e) => {\n                const slot = e.currentTarget;\n                const image = slot.querySelector('.draggable-image-9');\n                if (image) {\n                    removeImageFromSlot(slot);\n                }\n            };\n            \n            \/\/ \u89f8\u63a7\u4e8b\u4ef6\u8655\u7406\n            const handleTouchStart = (e) => {\n                const touch = e.touches[0];\n                touchItem = e.target;\n                touchItem.classList.add('dragging');\n                \n                \/\/ \u5275\u5efa\u62d6\u52d5\u7684\u8996\u89ba\u53cd\u994b\n                const clone = touchItem.cloneNode(true);\n                clone.id = 'touch-clone';\n                clone.style.position = 'fixed';\n                clone.style.width = '170px';\n                clone.style.height = '170px';\n                clone.style.zIndex = '9999';\n                clone.style.opacity = '0.8';\n                clone.style.pointerEvents = 'none';\n                clone.style.left = (touch.clientX - 85) + 'px';\n                clone.style.top = (touch.clientY - 85) + 'px';\n                document.body.appendChild(clone);\n            };\n            \n            const handleTouchMove = (e) => {\n                e.preventDefault();\n                const touch = e.touches[0];\n                const clone = document.getElementById('touch-clone');\n                \n                if (clone) {\n                    clone.style.left = (touch.clientX - 85) + 'px';\n                    clone.style.top = (touch.clientY - 85) + 'px';\n                }\n                \n                \/\/ \u6aa2\u6e2c\u4e0b\u65b9\u7684\u5143\u7d20\n                const elementBelow = document.elementFromPoint(touch.clientX, touch.clientY);\n                \n                document.querySelectorAll('.image-slot-9').forEach(slot => {\n                    slot.classList.remove('drag-over');\n                });\n                \n                if (elementBelow && elementBelow.classList.contains('image-slot-9')) {\n                    elementBelow.classList.add('drag-over');\n                } else if (elementBelow && elementBelow.closest('.image-slot-9')) {\n                    elementBelow.closest('.image-slot-9').classList.add('drag-over');\n                }\n            };\n            \n            const handleTouchEnd = (e) => {\n                const clone = document.getElementById('touch-clone');\n                if (clone) {\n                    clone.remove();\n                }\n                \n                if (touchItem) {\n                    touchItem.classList.remove('dragging');\n                }\n                \n                const touch = e.changedTouches[0];\n                const elementBelow = document.elementFromPoint(touch.clientX, touch.clientY);\n                \n                document.querySelectorAll('.image-slot-9').forEach(slot => {\n                    slot.classList.remove('drag-over');\n                });\n                \n                if (elementBelow) {\n                    let targetSlot = null;\n                    if (elementBelow.classList.contains('image-slot-9')) {\n                        targetSlot = elementBelow;\n                    } else if (elementBelow.closest('.image-slot-9')) {\n                        targetSlot = elementBelow.closest('.image-slot-9');\n                    }\n                    \n                    if (targetSlot && touchItem) {\n                        placeImageInSlot(touchItem, targetSlot);\n                    }\n                }\n                \n                touchItem = null;\n            };\n            \n            const placeImageInSlot = (image, slot) => {\n                const position = slot.dataset.position;\n                const imageId = image.dataset.imageId;\n                \n                \/\/ \u5982\u679c\u683c\u5b50\u5df2\u6709\u5716\u7247\uff0c\u5c07\u5176\u8fd4\u56de\n                const existingImage = slot.querySelector('.draggable-image-9');\n                if (existingImage) {\n                    removeImageFromSlot(slot);\n                }\n                \n                \/\/ \u5982\u679c\u5716\u7247\u5df2\u5728\u5176\u4ed6\u683c\u5b50\uff0c\u5148\u79fb\u9664\n                Object.keys(placedImages).forEach(pos => {\n                    if (placedImages[pos] === imageId) {\n                        const oldSlot = document.querySelector(`.image-slot-9[data-position=\"${pos}\"]`);\n                        removeImageFromSlot(oldSlot);\n                    }\n                });\n                \n                \/\/ \u653e\u7f6e\u5716\u7247\n                const clonedImage = image.cloneNode(true);\n                slot.innerHTML = '';\n                \n                const label = document.createElement('span');\n                label.className = 'slot-label-9';\n                label.textContent = `\u7b2c ${position} \u4f4d`;\n                slot.appendChild(label);\n                \n                const removeHint = document.createElement('span');\n                removeHint.className = 'remove-hint';\n                removeHint.textContent = '\u9ede\u64ca\u79fb\u9664';\n                slot.appendChild(removeHint);\n                \n                slot.appendChild(clonedImage);\n                slot.classList.add('filled', 'has-image');\n                placedImages[position] = imageId;\n                \n                \/\/ \u96b1\u85cf\u539f\u5716\u7247\u5bb9\u5668\n                const wrapper = document.querySelector(`.image-option-wrapper-9[data-wrapper-id=\"${imageId}\"]`);\n                if (wrapper) {\n                    wrapper.classList.add('disabled');\n                }\n                \n                \/\/ \u8a2d\u7f6e\u514b\u9686\u5716\u7247\u7684\u4e8b\u4ef6\n                clonedImage.addEventListener('dragstart', handleDragStart);\n                clonedImage.addEventListener('dragend', handleDragEnd);\n                clonedImage.addEventListener('touchstart', handleTouchStart, {passive: false});\n                clonedImage.addEventListener('touchmove', handleTouchMove, {passive: false});\n                clonedImage.addEventListener('touchend', handleTouchEnd);\n                \n                \/\/ \u6aa2\u67e5\u662f\u5426\u53ef\u4ee5\u63d0\u4ea4\n                checkSubmitButton();\n            };\n            \n            const removeImageFromSlot = (slot) => {\n                const image = slot.querySelector('.draggable-image-9');\n                if (!image) return;\n                \n                const imageId = image.dataset.imageId;\n                const position = slot.dataset.position;\n                \n                \/\/ \u6062\u5fa9\u539f\u5716\u7247\u5bb9\u5668\n                const wrapper = document.querySelector(`.image-option-wrapper-9[data-wrapper-id=\"${imageId}\"]`);\n                if (wrapper) {\n                    wrapper.classList.remove('disabled');\n                }\n                \n                \/\/ \u91cd\u7f6e\u683c\u5b50\n                slot.innerHTML = '';\n                slot.classList.remove('filled', 'has-image');\n                \n                const label = document.createElement('span');\n                label.className = 'slot-label-9';\n                label.textContent = `\u7b2c ${position} \u4f4d`;\n                slot.appendChild(label);\n                \n                const textHint = document.createElement('span');\n                textHint.className = 'text-muted';\n                textHint.textContent = position === '1' ? '\u6700\u559c\u6b61' : \n                                       position === '2' ? '\u6bd4\u8f03\u559c\u6b61' : \n                                       position === '3' ? '\u4e00\u822c\u559c\u6b61' : '\u76f8\u5c0d\u4e0d\u559c\u6b61';\n                slot.appendChild(textHint);\n                \n                const removeHint = document.createElement('span');\n                removeHint.className = 'remove-hint';\n                removeHint.textContent = '\u9ede\u64ca\u79fb\u9664';\n                slot.appendChild(removeHint);\n                \n                delete placedImages[position];\n                checkSubmitButton();\n            };\n            \n            const checkSubmitButton = () => {\n                const submitBtn = document.querySelector('.submit-btn-9');\n                if (Object.keys(placedImages).length === 4) {\n                    submitBtn.classList.add('show');\n                } else {\n                    submitBtn.classList.remove('show');\n                }\n            };\n            \n            const startQuiz = () => {\n                document.getElementById('quizintro9').style.display = 'none';\n                document.getElementById('quizmain9').style.display = 'block';\n                window.scrollTo({ top: 0, behavior: 'smooth' });\n            };\n            \n            const submitQuiz = () => {\n                if (Object.keys(placedImages).length !== 4) return;\n                \n                const analysis = analyzeChoices(placedImages);\n                showResult(analysis);\n            };\n            \n            const analyzeChoices = (choices) => {\n                const primaryType = choices['1'];\n                \n                let weightedScores = {\n                    appearance: 0,\n                    status: 0,\n                    reputation: 0,\n                    personality: 0,\n                    emotion: 0,\n                    compatibility: 0\n                };\n                \n                const weights = { '1': 0.4, '2': 0.3, '3': 0.2, '4': 0.1 };\n                \n                Object.keys(choices).forEach(position => {\n                    const typeId = choices[position];\n                    const type = resultTypes[typeId];\n                    const weight = weights[position];\n                    \n                    Object.keys(type.scores).forEach(dimension => {\n                        weightedScores[dimension] += type.scores[dimension] * weight;\n                    });\n                });\n                \n                return {\n                    primaryType: primaryType,\n                    weightedScores: weightedScores,\n                    allChoices: choices\n                };\n            };\n            \n            const showResult = (analysis) => {\n                const result = resultTypes[analysis.primaryType];\n                \n                document.getElementById('quizmain9').style.display = 'none';\n                document.getElementById('quizresult9').style.display = 'block';\n                \n                document.getElementById('resultType9').textContent = result.title;\n                document.getElementById('resultDescription9').textContent = result.description;\n                \n                const traitsHtml = result.traits.map(trait => \n                    `<span class=\"trait-badge-9\">${trait}<\/span>`\n                ).join('');\n                document.getElementById('resultTraits9').innerHTML = traitsHtml;\n                \n                document.getElementById('personalAdvice9').textContent = result.advice;\n                \n                const dimensionText = generateDimensionAnalysis(analysis.weightedScores);\n                document.getElementById('dimensionAnalysis9').innerHTML = dimensionText;\n                \n                drawChart(analysis.weightedScores);\n                \n                window.scrollTo({ top: 0, behavior: 'smooth' });\n            };\n            \n            const generateDimensionAnalysis = (scores) => {\n                const dimensions = [\n                    { key: 'appearance', name: '\u5916\u8c8c\u5438\u5f15\u529b', score: scores.appearance },\n                    { key: 'status', name: '\u5730\u4f4d\u6b0a\u529b', score: scores.status },\n                    { key: 'reputation', name: '\u793e\u6703\u8a8d\u540c', score: scores.reputation },\n                    { key: 'personality', name: '\u6027\u683c\u5951\u5408', score: scores.personality },\n                    { key: 'emotion', name: '\u60c5\u611f\u6df1\u5ea6', score: scores.emotion },\n                    { key: 'compatibility', name: '\u50f9\u503c\u89c0\u5339\u914d', score: scores.compatibility }\n                ];\n                \n                dimensions.sort((a, b) => b.score - a.score);\n                \n                const topTwo = dimensions.slice(0, 2);\n                const text = `<p class=\"text-muted\">\u6839\u64da\u4f60\u7684\u9078\u64c7\uff0c\u4f60\u6700\u91cd\u8996\u7684\u662f<strong>${topTwo[0].name}<\/strong>\uff08${Math.round(topTwo[0].score)}%\uff09\u548c<strong>${topTwo[1].name}<\/strong>\uff08${Math.round(topTwo[1].score)}%\uff09\u3002\u9019\u986f\u793a\u4f60\u5728\u9078\u64c7\u4f34\u4fb6\u6642\uff0c\u6703\u512a\u5148\u8003\u616e\u9019\u4e9b\u65b9\u9762\u7684\u5951\u5408\u5ea6\u3002<\/p>`;\n                \n                return text;\n            };\n            \n            const drawChart = (scores) => {\n                const ctx = document.getElementById('resultChart9').getContext('2d');\n                \n                if (chartInstance) {\n                    chartInstance.destroy();\n                }\n                \n                chartInstance = new Chart(ctx, {\n                    type: 'radar',\n                    data: {\n                        labels: ['\u5916\u8c8c\u5438\u5f15\u529b', '\u5730\u4f4d\u6b0a\u529b', '\u793e\u6703\u8a8d\u540c', '\u6027\u683c\u5951\u5408', '\u60c5\u611f\u6df1\u5ea6', '\u50f9\u503c\u89c0\u5339\u914d'],\n                        datasets: [{\n                            label: '\u4f60\u7684\u504f\u597d\u50be\u5411',\n                            data: [\n                                scores.appearance,\n                                scores.status,\n                                scores.reputation,\n                                scores.personality,\n                                scores.emotion,\n                                scores.compatibility\n                            ],\n                            backgroundColor: 'rgba(242, 198, 167, 0.2)',\n                            borderColor: 'rgba(232, 178, 153, 1)',\n                            borderWidth: 2,\n                            pointBackgroundColor: 'rgba(232, 178, 153, 1)',\n                            pointBorderColor: '#fff',\n                            pointHoverBackgroundColor: '#fff',\n                            pointHoverBorderColor: 'rgba(232, 178, 153, 1)',\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.label + ': ' + Math.round(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: 12\n                                    }\n                                },\n                                pointLabels: {\n                                    font: {\n                                        size: 13,\n                                        weight: '500'\n                                    },\n                                    color: '#6B4423'\n                                },\n                                grid: {\n                                    color: 'rgba(0, 0, 0, 0.08)'\n                                }\n                            }\n                        }\n                    }\n                });\n            };\n            \n            const retryQuiz = () => {\n                \/\/ \u91cd\u7f6e\u72c0\u614b\n                placedImages = {};\n                document.querySelectorAll('.image-slot-9').forEach(slot => {\n                    const position = slot.dataset.position;\n                    slot.innerHTML = '';\n                    slot.classList.remove('filled', 'has-image');\n                    \n                    const label = document.createElement('span');\n                    label.className = 'slot-label-9';\n                    label.textContent = `\u7b2c ${position} \u4f4d`;\n                    slot.appendChild(label);\n                    \n                    const textHint = document.createElement('span');\n                    textHint.className = 'text-muted';\n                    textHint.textContent = position === '1' ? '\u6700\u559c\u6b61' : \n                                           position === '2' ? '\u6bd4\u8f03\u559c\u6b61' : \n                                           position === '3' ? '\u4e00\u822c\u559c\u6b61' : '\u76f8\u5c0d\u4e0d\u559c\u6b61';\n                    slot.appendChild(textHint);\n                    \n                    const removeHint = document.createElement('span');\n                    removeHint.className = 'remove-hint';\n                    removeHint.textContent = '\u9ede\u64ca\u79fb\u9664';\n                    slot.appendChild(removeHint);\n                });\n                \n                document.querySelectorAll('.image-option-wrapper-9').forEach(wrapper => {\n                    wrapper.classList.remove('disabled');\n                });\n                \n                document.querySelector('.submit-btn-9').classList.remove('show');\n                \n                \/\/ \u8fd4\u56de\u5f15\u5c0e\u9801\n                document.getElementById('quizresult9').style.display = 'none';\n                document.getElementById('quizintro9').style.display = 'block';\n                window.scrollTo({ top: 0, behavior: 'smooth' });\n            };\n            \n            \/\/ \u521d\u59cb\u5316\n            document.addEventListener('DOMContentLoaded', init);\n            \n            return {\n                startQuiz,\n                submitQuiz,\n                retryQuiz\n            };\n        })();\n    <\/script>\n\n\n\n<p class=\"has-text-align-right\"><a href=\"https:\/\/daxiaoduoshao.com\/xihuan-yixing\/\" rel=\"noopener\">\u7b80\u4f53\u4e2d\u6587\u7248\uff1a\u5c0f\u6d4b\u8bd5\uff1a\u4f60\u559c\u6b22\u4ec0\u4e48\u6837\u7684\u5f02\u6027<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>\u900f\u904e\u7c21\u55ae\u7684\u5716\u7247\u6392\u5e8f\uff0c\u63ed\u793a\u4f60\u5728\u9078\u64c7\u4f34\u4fb6\u6642\u7684\u6f5b\u610f\u8b58\u504f\u597d\uff0c\u4f60\u559c\u6b61\u4ec0\u9ebc\u6a23\u7684\u7570\u6027\uff1f\u63a2\u7d22\u4f60\u7684\u6f5b\u610f\u8b58\u611b\u60c5\u504f\u597d\u3002\u6839\u64da\u4f60\u7684\u9078\u64c7\u63d0\u4f9b\u591a\u7dad\u5ea6\u5206\u6790\uff0c\u7372\u5f97\u5c08\u5c6c\u7684\u611b\u60c5\u89c0\u89e3\u8b80\u548c\u5be6\u7528\u5efa\u8b70\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":"normal-width-container","site-content-style":"unboxed","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[179,178],"tags":[],"class_list":["post-2729","post","type-post","status-publish","format-standard","hentry","category-marriage","category-love"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2729","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=2729"}],"version-history":[{"count":10,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2729\/revisions"}],"predecessor-version":[{"id":10567,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2729\/revisions\/10567"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2729"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2729"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2729"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}