{"id":2466,"date":"2023-10-17T09:45:03","date_gmt":"2023-10-17T01:45:03","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2466"},"modified":"2025-08-17T02:55:31","modified_gmt":"2025-08-16T18:55:31","slug":"desired-marriage-relationship","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/desired-marriage-relationship","title":{"rendered":"\u5c0f\u6d4b\u9a8c\uff1a\u4e00\u5f20\u56fe\u6d4b\u51fa\u4f60\u6e34\u671b\u7684\u5a5a\u59fb\u5173\u7cfb\u662f\u4ec0\u4e48\u6837\u7684\uff1f"},"content":{"rendered":"<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap\/5.3.3\/css\/bootstrap.min.css\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-icons\/1.11.3\/font\/bootstrap-icons.min.css\">\n<!-- \u5f15\u5c0e\u9801 -->\n<section id=\"quizintro9\" data-page=\"intro9\" class=\"container py-5\">\n    <div class=\"row justify-content-center\">\n      <div class=\"col-12 col-md-10 col-lg-8\">\n        <header class=\"text-center mb-5\">\n          <h2 class=\"display-5 fw-bold mb-3\" style=\"color: #5a67d8; font-size: 2.5rem;\">\n            \u4e00\u5f35\u5716\u6e2c\u51fa\u4f60\u6e34\u671b\u7684\u5a5a\u59fb\u95dc\u4fc2\n          <\/h2>\n          <p class=\"lead text-muted fs-5\">\u900f\u904e\u89f8\u89ba\u8ad6\u63a2\u7d22\u4f60\u7684\u89aa\u5bc6\u95dc\u4fc2\u56ae\u5f80<\/p>\n        <\/header>\n  \n        <div class=\"mb-5\">\n          <div class=\"card border-0 shadow-sm mb-4\" style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;\">\n            <div class=\"card-body p-4\">\n              <div class=\"d-flex align-items-center mb-3\">\n                <div class=\"rounded-circle bg-white bg-opacity-25 p-3 me-3\">\n                  <i class=\"bi bi-heart-pulse-fill fs-3\"><\/i>\n                <\/div>\n                <h3 class=\"h4 mb-0\">\u4ec0\u9ebc\u662f\u89f8\u89ba\u8ad6\uff1f<\/h3>\n              <\/div>\n              <p class=\"mb-0\">\u89f8\u89ba\u8ad6(Haptics)\u662f\u793e\u6703\u5fc3\u7406\u5b78\u5bb6\u63d0\u51fa\u7684\u7406\u8ad6\uff0c\u4ee3\u8868\u8457\u80a2\u9ad4\u63a5\u89f8\u4e2d\u50b3\u905e\u7684\u7121\u8072\u8cc7\u8a0a\u6e9d\u901a\u3002\u5c08\u5bb6\u8a8d\u70ba\uff0c\u5149\u9760\u89c0\u5bdf\u4e00\u5c0d\u60c5\u4fb6\u7684\u80a2\u9ad4\u63a5\u89f8\uff0c\u5c31\u80fd\u5224\u65b7\u5169\u4eba\u7684\u89aa\u5bc6\u7a0b\u5ea6\u3002<\/p>\n            <\/div>\n          <\/div>\n  \n          <div class=\"row g-3 mb-4\">\n            <div class=\"col-md-4\">\n              <div class=\"card h-100 border-0 shadow-sm\">\n                <div class=\"card-body text-center p-4\">\n                  <div class=\"rounded-circle bg-light p-3 d-inline-block mb-3\">\n                    <i class=\"bi bi-eye-fill fs-3\" style=\"color: #7c3aed;\"><\/i>\n                  <\/div>\n                  <h5 class=\"card-title\">\u89c0\u5bdf\u5206\u6790<\/h5>\n                  <p class=\"card-text text-muted\">\u900f\u904e\u89c0\u5bdf\u4e0d\u540c\u592b\u59bb\u7684\u4e92\u52d5\u65b9\u5f0f<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n            <div class=\"col-md-4\">\n              <div class=\"card h-100 border-0 shadow-sm\">\n                <div class=\"card-body text-center p-4\">\n                  <div class=\"rounded-circle bg-light p-3 d-inline-block mb-3\">\n                    <i class=\"bi bi-people-fill fs-3\" style=\"color: #ec4899;\"><\/i>\n                  <\/div>\n                  <h5 class=\"card-title\">\u95dc\u4fc2\u985e\u578b<\/h5>\n                  <p class=\"card-text text-muted\">\u767c\u73fe\u4f60\u56ae\u5f80\u7684\u5a5a\u59fb\u95dc\u4fc2\u6a21\u5f0f<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n            <div class=\"col-md-4\">\n              <div class=\"card h-100 border-0 shadow-sm\">\n                <div class=\"card-body text-center p-4\">\n                  <div class=\"rounded-circle bg-light p-3 d-inline-block mb-3\">\n                    <i class=\"bi bi-stars fs-3\" style=\"color: #f59e0b;\"><\/i>\n                  <\/div>\n                  <h5 class=\"card-title\">\u6df1\u5ea6\u6d1e\u5bdf<\/h5>\n                  <p class=\"card-text text-muted\">\u4e86\u89e3\u4f60\u7684\u89aa\u5bc6\u95dc\u4fc2\u671f\u5f85<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n  \n          <div class=\"alert alert-light border-start border-5\" style=\"border-color: #7c3aed !important;\">\n            <h5 class=\"alert-heading\">\n              <i class=\"bi bi-lightbulb-fill me-2\" style=\"color: #7c3aed;\"><\/i>\n              \u6e2c\u9a57\u8aaa\u660e\n            <\/h5>\n            <p class=\"mb-0\">\u63a5\u4e0b\u4f86\uff0c\u4f60\u5c07\u770b\u52307\u7d44\u4e0d\u540c\u7684\u592b\u59bb\u7167\u7247\u3002\u8acb\u4ed4\u7d30\u89c0\u5bdf\u4ed6\u5011\u7684\u80a2\u9ad4\u4e92\u52d5\uff0c\u9078\u51fa\u4f60\u8a8d\u70ba\u6700\u751c\u871c\u5e78\u798f\u7684\u4e00\u7d44\u3002\u4f60\u7684\u9078\u64c7\u5c07\u63ed\u793a\u4f60\u5167\u5fc3\u6e34\u671b\u7684\u5a5a\u59fb\u95dc\u4fc2\u985e\u578b\u3002<\/p>\n          <\/div>\n        <\/div>\n  \n        <div class=\"text-center\">\n          <button id=\"startQuiz9\" class=\"btn btn-lg px-5 py-3 fs-5 shadow\" style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 50px;\">\n            <i class=\"bi bi-play-circle-fill me-2\"><\/i>\n            \u5f00\u59cb\u6d4b\u9a8c\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n  \n  <!-- \u6e2c\u9a57\u9801 -->\n  <section id=\"quizmain9\" data-page=\"quiz9\" class=\"container py-5\" style=\"display: none;\">\n    <div class=\"row justify-content-center\">\n      <div class=\"col-12 col-lg-10\">\n        <header class=\"text-center mb-5\">\n          <h2 class=\"h3 fw-bold\" style=\"color: #5a67d8;\">\u9078\u64c7\u6700\u8b93\u4f60\u611f\u5230\u5e78\u798f\u7684\u592b\u59bb<\/h2>\n          <p class=\"text-muted fs-5 mb-0\">\u8acb\u4ed4\u7d30\u89c0\u5bdf\u6bcf\u5c0d\u592b\u59bb\u7684\u4e92\u52d5\u65b9\u5f0f\uff0c\u9078\u51fa\u6700\u6253\u52d5\u4f60\u7684\u4e00\u7d44<\/p>\n        <\/header>\n  \n        <div id=\"quizOptions9\" class=\"quiz-grid\">\n          <!-- \u9078\u9805\u5c07\u7531JavaScript\u52d5\u614b\u751f\u6210 -->\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n  \n  <!-- \u7d50\u679c\u9801 -->\n  <section id=\"quizresult9\" data-page=\"result9\" class=\"container py-5\" style=\"display: none;\">\n    <div class=\"row justify-content-center\">\n      <div class=\"col-12 col-md-10 col-lg-8\">\n        <header class=\"text-center mb-5\">\n          <h2 class=\"display-5 fw-bold\" style=\"color: #5a67d8;\">\u4f60\u7684\u5a5a\u59fb\u95dc\u4fc2\u985e\u578b<\/h2>\n        <\/header>\n  \n        <div id=\"resultContent9\" class=\"mb-5\">\n          <!-- \u7d50\u679c\u5167\u5bb9\u5c07\u7531JavaScript\u52d5\u614b\u751f\u6210 -->\n        <\/div>\n  \n        <div class=\"row justify-content-center mb-5\">\n          <div class=\"col-12 col-md-8\">\n            <div class=\"card border-0 shadow-sm\">\n              <div class=\"card-body p-4\">\n                <h4 class=\"card-title text-center mb-4\" style=\"color: #7c3aed;\">\n                  <i class=\"bi bi-graph-up-arrow me-2\"><\/i>\n                  \u95dc\u4fc2\u7279\u8cea\u5206\u6790\n                <\/h4>\n                <div style=\"height: 300px; position: relative;\">\n                  <canvas id=\"resultChart9\"><\/canvas>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n  \n        <div class=\"text-center\">\n          <button id=\"restartQuiz9\" class=\"btn btn-lg px-5 py-3 fs-5 shadow\" style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 50px;\">\n            <i class=\"bi bi-arrow-repeat me-2\"><\/i>\n            \u91cd\u65b0\u6d4b\u8bd5\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n  \n  <!-- CSS -->\n  <style>\n    #quizintro9, #quizmain9, #quizresult9 {\n      min-height: 100vh;\n      font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n    }\n  \n    \/* \u7db2\u683c\u5e03\u5c40 - 3-4 \u6392\u5217 *\/\n    .quiz-grid {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 20px;\n      margin: 0 auto;\n    }\n    \n    \/* \u7b2c\u4e8c\u6392\uff084\u500b\uff09\u7684\u7279\u6b8a\u8655\u7406 *\/\n    .quiz-grid .quiz-option-item:nth-child(4),\n    .quiz-grid .quiz-option-item:nth-child(5),\n    .quiz-grid .quiz-option-item:nth-child(6),\n    .quiz-grid .quiz-option-item:nth-child(7) {\n      grid-column: span 1;\n    }\n    \n    \/* \u70ba\u7b2c\u4e8c\u6392\u5275\u5efa4\u5217\u5e03\u5c40 *\/\n    @media (min-width: 992px) {\n      .quiz-grid {\n        grid-template-columns: repeat(12, 1fr);\n      }\n      \n      \/* \u7b2c\u4e00\u6392 - \u6bcf\u500b\u4f544\u683c\uff0812\/3=4\uff09 *\/\n      .quiz-grid .quiz-option-item:nth-child(1),\n      .quiz-grid .quiz-option-item:nth-child(2),\n      .quiz-grid .quiz-option-item:nth-child(3) {\n        grid-column: span 3;\n      }\n      \n      \/* \u7b2c\u4e8c\u6392 - \u6bcf\u500b\u4f543\u683c\uff0812\/4=3\uff09 *\/\n      .quiz-grid .quiz-option-item:nth-child(4),\n      .quiz-grid .quiz-option-item:nth-child(5),\n      .quiz-grid .quiz-option-item:nth-child(6),\n      .quiz-grid .quiz-option-item:nth-child(7) {\n        grid-column: span 3;\n      }\n    }\n    \n    \/* \u5e73\u677f\u5e03\u5c40 *\/\n    @media (min-width: 768px) and (max-width: 991px) {\n      .quiz-grid {\n        grid-template-columns: repeat(2, 1fr);\n      }\n      \n      .quiz-grid .quiz-option-item {\n        grid-column: span 1 !important;\n      }\n    }\n    \n    \/* \u624b\u6a5f\u5e03\u5c40 *\/\n    @media (max-width: 767px) {\n      .quiz-grid {\n        grid-template-columns: 1fr;\n        gap: 15px;\n      }\n      \n      .quiz-grid .quiz-option-item {\n        grid-column: span 1 !important;\n      }\n    }\n  \n    .quiz-option-item {\n      position: relative;\n      cursor: pointer;\n      border-radius: 12px;\n      overflow: hidden;\n      transition: all 0.3s ease;\n      background: white;\n      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n    }\n  \n    .quiz-option-item:hover {\n      transform: translateY(-5px);\n      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);\n    }\n  \n    .quiz-option-item.selected {\n      box-shadow: 0 0 0 3px #7c3aed;\n    }\n  \n    .quiz-option-item .quiz-img-wrapper {\n      position: relative;\n      height: 300px; \/* \u76f4\u63a5\u56fa\u5b9a\u9ad8\u5ea6 *\/\n      padding-bottom: 120%; \/* 5:6 \u6bd4\u4f8b *\/\n      overflow: hidden;\n      background: #f8f9fa;\n    }\n  \n    .quiz-option-item img {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 300px; \/* \u76f4\u63a5\u56fa\u5b9a\u9ad8\u5ea6 *\/\n      object-fit: cover;\n      transition: transform 0.3s ease;\n    }\n  \n    .quiz-option-item:hover img {\n      transform: scale(1.05);\n    }\n  \n    \/* \u9078\u4e2d\u6a19\u8a18 *\/\n    .quiz-option-item .selected-badge {\n      position: absolute;\n      top: 10px;\n      right: 10px;\n      width: 32px;\n      height: 32px;\n      border-radius: 50%;\n      background: white;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      opacity: 0;\n      transform: scale(0.8);\n      transition: all 0.3s ease;\n      z-index: 10;\n    }\n  \n    .quiz-option-item.selected .selected-badge {\n      opacity: 1;\n      transform: scale(1);\n      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n    }\n  \n    .quiz-option-item.selected .selected-badge::after {\n      content: \"\u2713\";\n      color: white;\n      font-weight: bold;\n      font-size: 18px;\n    }\n  \n    \/* \u9078\u9805\u7de8\u865f *\/\n    .quiz-option-item .option-number {\n      position: absolute;\n      bottom: 10px;\n      left: 10px;\n      width: 28px;\n      height: 28px;\n      border-radius: 50%;\n      background: rgba(255, 255, 255, 0.9);\n      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-weight: 600;\n      color: #4a5568;\n      font-size: 14px;\n      z-index: 10;\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    .fade-in {\n      animation: fadeIn 0.5s ease;\n    }\n  \n    @media (max-width: 768px) {\n      .display-5 {\n        font-size: 2rem !important;\n      }\n      \n      .quiz-option-item .quiz-img-wrapper {\n        padding-bottom: 100%; \/* \u624b\u6a5f\u4e0a\u6539\u70ba\u6b63\u65b9\u5f62 *\/\n      }\n    }\n  <\/style>\n  \n  <!-- JavaScript -->\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n  <script>\n  (function() {\n    'use strict';\n  \n    class MarriageQuiz {\n      constructor() {\n        this.currentQuestion = 0;\n        this.selectedOption = null;\n        this.chartInstance = null;\n        \n        \/\/ \u5feb\u53d6DOM\u5143\u7d20\n        this.introSection = document.getElementById('quizintro9');\n        this.quizSection = document.getElementById('quizmain9');\n        this.resultSection = document.getElementById('quizresult9');\n        this.startBtn = document.getElementById('startQuiz9');\n        this.restartBtn = document.getElementById('restartQuiz9');\n        this.optionsContainer = document.getElementById('quizOptions9');\n        this.resultContainer = document.getElementById('resultContent9');\n        \n        this.initializeData();\n        this.bindEvents();\n      }\n  \n      initializeData() {\n        this.couples = [\n          {\n            id: 1,\n            image: 'https:\/\/xinliceyan.org\/wp-content\/uploads\/2025\/08\/couple-1.jpg',\n            title: '\u5d07\u62dc\u8207\u4fe1\u4efb',\n            description: '\u59bb\u5b50\u5d07\u62dc\u8457\u4e08\u592b\uff0c\u8996\u4ed6\u70ba\u6700\u597d\u7684\u7537\u4eba',\n            keywords: ['\u7368\u7acb', '\u5766\u767d', '\u5fe0\u8aa0', '\u4fe1\u4efb'],\n            result: '\u4f60\u56ae\u5f80\u4e00\u7a2e\u5efa\u7acb\u5728\u6df1\u5ea6\u4fe1\u4efb\u548c\u76f8\u4e92\u5d07\u62dc\u57fa\u790e\u4e0a\u7684\u5a5a\u59fb\u95dc\u4fc2\u3002\u5728\u9019\u6a23\u7684\u95dc\u4fc2\u4e2d\uff0c\u96d9\u65b9\u90fd\u4fdd\u6301\u8457\u7368\u7acb\u7684\u5fc3\u667a\u548c\u7d93\u6fdf\u80fd\u529b\uff0c\u540c\u6642\u5c0d\u5f7c\u6b64\u4fdd\u6301\u7d55\u5c0d\u7684\u5fe0\u8aa0\u548c\u4fe1\u4efb\u3002\u4f60\u5e0c\u671b\u627e\u5230\u4e00\u500b\u503c\u5f97\u8a17\u4ed8\u7684\u4f34\u4fb6\uff0c\u5171\u540c\u7dad\u8b77\u9019\u6bb5\u89aa\u5bc6\u95dc\u4fc2\u3002',\n            traits: {\n              '\u4fe1\u4efb\u5ea6': 95,\n              '\u7368\u7acb\u6027': 90,\n              '\u89aa\u5bc6\u5ea6': 85,\n              '\u4f9d\u8cf4\u6027': 60,\n              '\u4fdd\u8b77\u6b32': 70,\n              '\u548c\u8ae7\u5ea6': 88\n            }\n          },\n          {\n            id: 2,\n            image: 'https:\/\/xinliceyan.org\/wp-content\/uploads\/2025\/08\/couple-2.jpg',\n            title: '\u9ed8\u9ed8\u652f\u6301',\n            description: '\u59bb\u5b50\u5728\u80cc\u5f8c\u9ed8\u9ed8\u652f\u6301\u4e08\u592b\u7684\u4e8b\u696d',\n            keywords: ['\u7537\u4e3b\u5916\u5973\u4e3b\u5167', '\u5206\u5de5', '\u4e92\u52a9'],\n            result: '\u4f60\u56ae\u5f80\u50b3\u7d71\u800c\u6eab\u99a8\u7684\u5a5a\u59fb\u6a21\u5f0f\uff0c\u8a8d\u70ba\u300c\u6bcf\u500b\u6210\u529f\u7537\u58eb\u80cc\u5f8c\u90fd\u6709\u4e00\u4f4d\u9ed8\u9ed8\u4ed8\u51fa\u7684\u59bb\u5b50\u300d\u3002\u5728\u9019\u7a2e\u95dc\u4fc2\u4e2d\uff0c\u96d9\u65b9\u6709\u660e\u78ba\u7684\u5206\u5de5\uff0c\u76f8\u4e92\u652f\u6301\uff0c\u5171\u540c\u7d93\u71df\u5bb6\u5ead\u3002\u4f60\u9858\u610f\u70ba\u5c0d\u65b9\u4ed8\u51fa\uff0c\u4e5f\u671f\u5f85\u5c0d\u65b9\u7684\u7406\u89e3\u548c\u611f\u6fc0\u3002',\n            traits: {\n              '\u4fe1\u4efb\u5ea6': 85,\n              '\u7368\u7acb\u6027': 65,\n              '\u89aa\u5bc6\u5ea6': 80,\n              '\u4f9d\u8cf4\u6027': 75,\n              '\u4fdd\u8b77\u6b32': 80,\n              '\u548c\u8ae7\u5ea6': 85\n            }\n          },\n          {\n            id: 3,\n            image: 'https:\/\/xinliceyan.org\/wp-content\/uploads\/2025\/08\/couple-3.jpg',\n            title: '\u6027\u683c\u4e92\u88dc',\n            description: '\u4e08\u592b\u4e3b\u5c0e\uff0c\u59bb\u5b50\u6eab\u67d4\u5982\u6c34',\n            keywords: ['\u6027\u683c\u4e92\u88dc', '\u7537\u5f37\u5973\u5f31', '\u4ed6\u638c\u63a7\u6211\u6211\u638c\u63a7\u5bb6'],\n            result: '\u4f60\u56ae\u5f80\u4e00\u7a2e\u6027\u683c\u4e92\u88dc\u7684\u5a5a\u59fb\u95dc\u4fc2\u3002\u5728\u9019\u7a2e\u6a21\u5f0f\u4e2d\uff0c\u4e00\u65b9\u8f03\u70ba\u5f37\u52e2\u4e3b\u5c0e\uff0c\u53e6\u4e00\u65b9\u6eab\u67d4\u9ad4\u8cbc\u3002\u4f60\u76f8\u4fe1\u300c\u767e\u934a\u92fc\u6210\u7e5e\u6307\u67d4\u300d\uff0c\u8a8d\u70ba\u4e0d\u540c\u6027\u683c\u7684\u7d50\u5408\u80fd\u5275\u9020\u51fa\u548c\u8ae7\u7684\u5bb6\u5ead\u6c1b\u570d\u3002',\n            traits: {\n              '\u4fe1\u4efb\u5ea6': 80,\n              '\u7368\u7acb\u6027': 55,\n              '\u89aa\u5bc6\u5ea6': 85,\n              '\u4f9d\u8cf4\u6027': 85,\n              '\u4fdd\u8b77\u6b32': 90,\n              '\u548c\u8ae7\u5ea6': 80\n            }\n          },\n          {\n            id: 4,\n            image: 'https:\/\/xinliceyan.org\/wp-content\/uploads\/2025\/08\/couple-4.jpg',\n            title: '\u5b88\u8b77\u8207\u4f9d\u9760',\n            description: '\u4e08\u592b\u60f3\u6210\u70ba\u59bb\u5b50\u7684\u4f9d\u9760\uff0c\u70ba\u5979\u64cb\u98a8\u906e\u96e8',\n            keywords: ['\u4fdd\u8b77\u6b32', '\u5c0a\u91cd', '\u7121\u689d\u4ef6\u7684\u4fe1\u4efb'],\n            result: '\u4f60\u6e34\u671b\u4e00\u7a2e\u5145\u6eff\u4fdd\u8b77\u6b32\u548c\u5b89\u5168\u611f\u7684\u5a5a\u59fb\u95dc\u4fc2\u3002\u4f60\u5e0c\u671b\u4f34\u4fb6\u80fd\u5728\u4efb\u4f55\u60c5\u6cc1\u4e0b\u90fd\u70ba\u4f60\u64cb\u98a8\u906e\u96e8\uff0c\u6210\u70ba\u4f60\u5805\u5be6\u7684\u4f9d\u9760\u3002\u9019\u7a2e\u95dc\u4fc2\u7684\u6838\u5fc3\u662f\u5c0a\u91cd\u548c\u7121\u689d\u4ef6\u7684\u4fe1\u4efb\uff0c\u8b93\u5f7c\u6b64\u90fd\u611f\u5230\u88ab\u73cd\u8996\u548c\u4fdd\u8b77\u3002',\n            traits: {\n              '\u4fe1\u4efb\u5ea6': 92,\n              '\u7368\u7acb\u6027': 60,\n              '\u89aa\u5bc6\u5ea6': 90,\n              '\u4f9d\u8cf4\u6027': 80,\n              '\u4fdd\u8b77\u6b32': 95,\n              '\u548c\u8ae7\u5ea6': 87\n            }\n          },\n          {\n            id: 5,\n            image: 'https:\/\/xinliceyan.org\/wp-content\/uploads\/2025\/08\/couple-5.jpg',\n            title: '\u89aa\u5bc6\u7121\u9593',\n            description: '\u6642\u523b\u9ecf\u5728\u4e00\u8d77\uff0c\u4eab\u53d7\u96f6\u8ddd\u96e2\u7684\u89aa\u5bc6',\n            keywords: ['0cm\u7684\u89aa\u5bc6\u548c\u8ae7', '-15cm\u7684\u89aa\u5bc6\u548c\u8ae7'],\n            result: '\u4f60\u56ae\u5f80\u6975\u5ea6\u89aa\u5bc6\u7121\u9593\u7684\u5a5a\u59fb\u95dc\u4fc2\u3002\u4f60\u5e0c\u671b\u548c\u4f34\u4fb6\u5e7e\u4e4e\u6bcf\u5206\u6bcf\u79d2\u90fd\u5728\u4e00\u8d77\uff0c\u4e0d\u8ad6\u505a\u4ec0\u9ebc\u90fd\u540c\u9032\u540c\u51fa\u3002\u9019\u7a2e\u95dc\u4fc2\u8b93\u4f60\u611f\u5230\u5145\u5be6\u548c\u5e78\u798f\uff0c\u4f60\u5011\u6c38\u9060\u6709\u8aaa\u4e0d\u5b8c\u7684\u8a71\uff0c\u4eab\u53d7\u5f7c\u6b64\u7684\u966a\u4f34\u3002',\n            traits: {\n              '\u4fe1\u4efb\u5ea6': 88,\n              '\u7368\u7acb\u6027': 40,\n              '\u89aa\u5bc6\u5ea6': 100,\n              '\u4f9d\u8cf4\u6027': 95,\n              '\u4fdd\u8b77\u6b32': 75,\n              '\u548c\u8ae7\u5ea6': 92\n            }\n          },\n          {\n            id: 6,\n            image: 'https:\/\/xinliceyan.org\/wp-content\/uploads\/2025\/08\/couple-6.jpg',\n            title: '\u4f4e\u8abf\u73cd\u60dc',\n            description: '\u4e0d\u79c0\u6069\u611b\uff0c\u4f46\u5728\u5fc3\u5e95\u9ed8\u9ed8\u73cd\u60dc\u5f7c\u6b64',\n            keywords: ['\u81ea\u7531', '\u5e73\u7b49', '\u4fdd\u6301\u96b1\u79c1\u548c\u4f4e\u8abf'],\n            result: '\u4f60\u56ae\u5f80\u4e00\u7a2e\u4f4e\u8abf\u800c\u6df1\u523b\u7684\u5a5a\u59fb\u95dc\u4fc2\u3002\u4f60\u8a8d\u70ba\u771f\u6b63\u7684\u611b\u60c5\u4e0d\u9700\u8981\u5411\u5916\u5c55\u793a\uff0c\u53ea\u8981\u5f7c\u6b64\u5fc3\u4e2d\u73cd\u60dc\u5c31\u8db3\u5920\u3002\u4f60\u91cd\u8996\u500b\u4eba\u7a7a\u9593\u548c\u96b1\u79c1\uff0c\u5c0a\u91cd\u5c0d\u65b9\u7684\u8208\u8da3\u611b\u597d\uff0c\u4fdd\u6301\u9069\u5ea6\u7684\u8ddd\u96e2\u611f\u3002',\n            traits: {\n              '\u4fe1\u4efb\u5ea6': 85,\n              '\u7368\u7acb\u6027': 95,\n              '\u89aa\u5bc6\u5ea6': 70,\n              '\u4f9d\u8cf4\u6027': 45,\n              '\u4fdd\u8b77\u6b32': 60,\n              '\u548c\u8ae7\u5ea6': 83\n            }\n          },\n          {\n            id: 7,\n            image: 'https:\/\/xinliceyan.org\/wp-content\/uploads\/2025\/08\/couple-7.jpg',\n            title: '\u9ad8\u8abf\u6069\u611b',\n            description: '\u7d93\u5e38\u79c0\u6069\u611b\uff0c\u5206\u4eab\u751f\u6d3b\u7684\u6bcf\u500b\u7f8e\u597d\u77ac\u9593',\n            keywords: ['\u81a9\u6b6a', '\u5fd7\u8da3\u76f8\u6295', '\u4fdd\u6301\u516c\u958b\u548c\u9ad8\u8abf'],\n            result: '\u4f60\u56ae\u5f80\u4e00\u7a2e\u9ad8\u8abf\u800c\u751c\u871c\u7684\u5a5a\u59fb\u95dc\u4fc2\u3002\u4f60\u9858\u610f\u8207\u4e16\u754c\u5206\u4eab\u4f60\u5011\u7684\u5e78\u798f\uff0c\u7d93\u5e38\u5728\u793e\u4ea4\u5a92\u9ad4\u4e0a\u5c55\u793a\u5169\u4eba\u7684\u7f8e\u597d\u6642\u5149\u3002\u4f60\u5011\u5fd7\u8da3\u76f8\u6295\uff0c\u80fd\u4e00\u6574\u5929\u81a9\u5728\u4e00\u8d77\u4e5f\u4e0d\u89ba\u5f97\u7121\u804a\uff0c\u4eab\u53d7\u88ab\u670b\u53cb\u7fa8\u6155\u7684\u611f\u89ba\u3002',\n            traits: {\n              '\u4fe1\u4efb\u5ea6': 82,\n              '\u7368\u7acb\u6027': 50,\n              '\u89aa\u5bc6\u5ea6': 95,\n              '\u4f9d\u8cf4\u6027': 88,\n              '\u4fdd\u8b77\u6b32': 72,\n              '\u548c\u8ae7\u5ea6': 90\n            }\n          }\n        ];\n      }\n  \n      bindEvents() {\n        this.startBtn?.addEventListener('click', () => this.startQuiz());\n        this.restartBtn?.addEventListener('click', () => this.restartQuiz());\n      }\n  \n      startQuiz() {\n        this.introSection.style.display = 'none';\n        this.quizSection.style.display = 'block';\n        this.quizSection.classList.add('fade-in');\n        this.renderOptions();\n        this.scrollToTop();\n      }\n  \n      renderOptions() {\n        this.optionsContainer.innerHTML = '';\n        \n        this.couples.forEach((couple, index) => {\n          const item = document.createElement('div');\n          item.className = 'quiz-option-item';\n          item.dataset.option = couple.id;\n          \n          item.innerHTML = `\n            <div class=\"quiz-img-wrapper\">\n              <img decoding=\"async\" src=\"${couple.image}\" alt=\"\u9078\u9805${couple.id}\">\n              <div class=\"selected-badge\"><\/div>\n              <div class=\"option-number\">${couple.id}<\/div>\n            <\/div>\n          `;\n          \n          item.addEventListener('click', () => this.selectOption(couple.id));\n          this.optionsContainer.appendChild(item);\n        });\n      }\n  \n      selectOption(optionId) {\n        \/\/ \u79fb\u9664\u6240\u6709\u9078\u4e2d\u72c0\u614b\n        document.querySelectorAll('.quiz-option-item').forEach(item => {\n          item.classList.remove('selected');\n        });\n        \n        \/\/ \u6dfb\u52a0\u9078\u4e2d\u72c0\u614b\n        const selectedItem = document.querySelector(`[data-option=\"${optionId}\"]`);\n        selectedItem?.classList.add('selected');\n        \n        this.selectedOption = optionId;\n        \n        \/\/ \u5ef6\u9072\u986f\u793a\u7d50\u679c\n        setTimeout(() => this.showResult(), 800);\n      }\n  \n      showResult() {\n        if (!this.selectedOption) return;\n        \n        const couple = this.couples.find(c => c.id === this.selectedOption);\n        if (!couple) return;\n        \n        this.quizSection.style.display = 'none';\n        this.resultSection.style.display = 'block';\n        this.resultSection.classList.add('fade-in');\n        \n        \/\/ \u751f\u6210\u7d50\u679c\u5167\u5bb9\n        this.resultContainer.innerHTML = `\n          <div class=\"card border-0 shadow-lg mb-4\" style=\"background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);\">\n            <div class=\"card-body p-4 p-md-5\">\n              <div class=\"text-center mb-4\">\n                <div class=\"rounded-circle d-inline-block p-3 mb-3\" style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\">\n                  <i class=\"bi bi-heart-fill fs-1 text-white\"><\/i>\n                <\/div>\n                <h3 class=\"h2 fw-bold\" style=\"color: #7c3aed;\">${couple.title}<\/h3>\n              <\/div>\n              \n              <p class=\"fs-5 text-muted mb-4\">${couple.result}<\/p>\n              \n              <div class=\"border-top pt-4\">\n                <h5 class=\"fw-bold mb-3\" style=\"color: #5a67d8;\">\n                  <i class=\"bi bi-tags-fill me-2\"><\/i>\n                  \u95dc\u9375\u7279\u8cea\n                <\/h5>\n                <div class=\"d-flex flex-wrap gap-2\">\n                  ${couple.keywords.map(keyword => `\n                    <span class=\"badge fs-6 px-3 py-2\" style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\">\n                      ${keyword}\n                    <\/span>\n                  `).join('')}\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        `;\n        \n        \/\/ \u7e6a\u88fd\u5716\u8868\n        this.drawChart(couple.traits);\n        this.scrollToTop();\n      }\n  \n      drawChart(traits) {\n        \/\/ \u92b7\u6bc0\u820a\u5716\u8868\n        if (this.chartInstance) {\n          this.chartInstance.destroy();\n        }\n        \n        const ctx = document.getElementById('resultChart9');\n        if (!ctx) return;\n        \n        const labels = Object.keys(traits);\n        const data = Object.values(traits);\n        \n        this.chartInstance = new Chart(ctx, {\n          type: 'radar',\n          data: {\n            labels: labels,\n            datasets: [{\n              label: '\u95dc\u4fc2\u7279\u8cea',\n              data: data,\n              backgroundColor: 'rgba(124, 58, 237, 0.2)',\n              borderColor: 'rgba(124, 58, 237, 1)',\n              borderWidth: 2,\n              pointBackgroundColor: 'rgba(124, 58, 237, 1)',\n              pointBorderColor: '#fff',\n              pointHoverBackgroundColor: '#fff',\n              pointHoverBorderColor: 'rgba(124, 58, 237, 1)',\n              pointRadius: 5,\n              pointHoverRadius: 7\n            }]\n          },\n          options: {\n            responsive: true,\n            maintainAspectRatio: false,\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              }\n            },\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                titleFont: {\n                  size: 16\n                },\n                bodyFont: {\n                  size: 14\n                }\n              }\n            }\n          }\n        });\n      }\n  \n      restartQuiz() {\n        this.selectedOption = null;\n        this.currentQuestion = 0;\n        \n        if (this.chartInstance) {\n          this.chartInstance.destroy();\n          this.chartInstance = null;\n        }\n        \n        this.resultSection.style.display = 'none';\n        this.introSection.style.display = 'block';\n        this.introSection.classList.add('fade-in');\n        this.scrollToTop();\n      }\n  \n      scrollToTop() {\n        window.scrollTo({\n          top: this.introSection.offsetTop - 100,\n          behavior: 'smooth'\n        });\n      }\n    }\n  \n    \/\/ \u7b49\u5f85DOM\u52a0\u8f09\u5b8c\u6210\n    if (document.readyState === 'loading') {\n      document.addEventListener('DOMContentLoaded', () => new MarriageQuiz());\n    } else {\n      new MarriageQuiz();\n    }\n  })();\n  <\/script>","protected":false},"excerpt":{"rendered":"<p>\u5149\u9760\u89c2\u5bdf\u4e00\u5bf9\u60c5\u4fa3\u5728\u65e5\u5e38\u751f\u6d3b\u4e2d\u4e0d\u7ecf\u610f\u7684\u80a2\u4f53\u63a5\u89e6\uff0c\u5c31\u80fd\u5224\u65ad\u4e24\u4eba\u7684\u4eb2\u5bc6\u7a0b\u5ea6\uff1b\u751a\u81f3\uff0c\u4f60\u5bf9\u4eb2\u5bc6\u5173\u7cfb\u7684\u5411\u5f80\uff0c\u5230\u5e95\u662f\u5c5e\u4e8e\u54ea\u79cd\u7c7b\u578b\uff0c\u4e5f\u80fd\u901a\u8fc7\u4f60\u5bf9\u4ed6\u4eba\u7684\u89c2\u5bdf\u6765\u5f97\u51fa\u7ed3\u8bba\u4e00\u4e8c\u3002\u4eca\u5929\uff0c\u6211\u4eec\u5c31\u5e26\u9886\u5927\u5bb6\u4f53\u9a8c\u4e00\u4e0b<\/p>","protected":false},"author":19,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"normal-width-container","site-content-style":"unboxed","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[179,178],"tags":[],"class_list":["post-2466","post","type-post","status-publish","format-standard","hentry","category-marriage","category-love"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2466","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=2466"}],"version-history":[{"count":9,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2466\/revisions"}],"predecessor-version":[{"id":10535,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2466\/revisions\/10535"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}