{"id":2578,"date":"2023-10-24T09:21:51","date_gmt":"2023-10-24T01:21:51","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2578"},"modified":"2025-08-29T22:10:29","modified_gmt":"2025-08-29T14:10:29","slug":"why-low-romance-success","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/why-low-romance-success","title":{"rendered":"\u5c0f\u6d4b\u9a8c\uff1a\u4e3a\u4ec0\u4e48\u4f60\u7684\u604b\u7231\u6210\u529f\u7387\u8fbe\u4e0d\u5230100%\uff1f"},"content":{"rendered":"<!-- \u5f15\u5165Bootstrap CSS -->\n<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\n<!-- HTML\u7d50\u69cb -->\n<div id=\"loveQuizContainer9\" class=\"container-fluid px-3 py-4\">\n  <!-- \u5f15\u5c0e\u9801 -->\n  <section id=\"quizintro9\" data-page=\"intro9\" class=\"quiz-section active\">\n    <header class=\"text-center mb-4\">\n      <h2 class=\"display-5 fw-bold mb-3\" style=\"color: #2d5f3f; font-size: 2.2rem;\">\n        \u70ba\u4ec0\u9ebc\u4f60\u7684\u6200\u611b\u6210\u529f\u7387\u9054\u4e0d\u5230100%\uff1f\n      <\/h2>\n      <p class=\"lead text-muted fs-5 mb-4\">\u63a2\u7d22\u4f60\u5728\u611f\u60c5\u4e2d\u7684\u76f2\u9ede\uff0c\u627e\u5230\u63d0\u5347\u6200\u611b\u6210\u529f\u7387\u7684\u95dc\u9375<\/p>\n    <\/header>\n    \n    <div class=\"intro-text mb-4 px-3\">\n      <p class=\"fs-5\" style=\"color: #555; line-height: 1.8;\">\n        \u5728\u604b\u7231\u5f53\u4e2d\uff0c\u5982\u679c\u4e24\u4e2a\u4eba\u7684\u611f\u60c5\u51fa\u73b0\u95ee\u9898\uff0c\u6216\u8005\u662f\u5bf9\u65b9\u4e3b\u52a8\u63d0\u51fa\u4e86\u5206\u624b\uff0c\u6211\u4eec\u5f80\u5f80\u559c\u6b22\u628a\u81ea\u5df1\u653e\u5728\u4e00\u4e2a\u88ab\u4f24\u5bb3\u8005\u7684\u4f4d\u7f6e\u4e0a\uff0c\u89c9\u5f97\u90a3\u4e2a\u5634\u4e0a\u8bf4\u7740\u4e0d\u7231\u4f60\u7684\u4eba\u6df1\u6df1\u4f24\u5bb3\u4e86\u4f60\u3002\u5176\u5b9e\uff0c\u5982\u679c\u4f60\u7684\u604b\u60c5\u5c61\u5c61\u5931\u8d25\u7684\u8bdd\uff0c\u4f60\u662f\u5426\u66fe\u60f3\u8fc7\u662f\u81ea\u5df1\u7684\u95ee\u9898\u5462\uff1f\u90a3\u4e48\uff0c\u4f1a\u662f\u4ec0\u4e48\u95ee\u9898\u5bfc\u81f4\u4f60\u7684\u604b\u7231\u6210\u529f\u7387\u8fbe\u4e0d\u5230100%\u5462\uff1f\n      <\/p>\n    <\/div>\n    \n    <main class=\"row g-3 mb-4\">\n      <article class=\"col-6 col-md-3\">\n        <div class=\"card h-100 border-0 shadow-sm hover-lift\">\n          <div class=\"card-body text-center p-3\">\n            <div class=\"rounded-circle mx-auto mb-2 d-flex align-items-center justify-content-center\" \n                 style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #88c999 0%, #56b870 100%);\">\n              <i class=\"bi bi-heart-pulse fs-3 text-white\"><\/i>\n            <\/div>\n            <h5 class=\"card-title fw-bold fs-6\">\u6df1\u5ea6\u5256\u6790<\/h5>\n            <p class=\"card-text text-muted small\">\u7cbe\u6e96\u5206\u6790\u4f60\u7684\u611f\u60c5\u6a21\u5f0f<\/p>\n          <\/div>\n        <\/div>\n      <\/article>\n      \n      <article class=\"col-6 col-md-3\">\n        <div class=\"card h-100 border-0 shadow-sm hover-lift\">\n          <div class=\"card-body text-center p-3\">\n            <div class=\"rounded-circle mx-auto mb-2 d-flex align-items-center justify-content-center\" \n                 style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #ffd89b 0%, #f4b66a 100%);\">\n              <i class=\"bi bi-lightbulb fs-3 text-white\"><\/i>\n            <\/div>\n            <h5 class=\"card-title fw-bold fs-6\">\u5c08\u696d\u5efa\u8b70<\/h5>\n            <p class=\"card-text text-muted small\">\u7372\u5f97\u5be6\u7528\u6539\u5584\u6307\u5f15<\/p>\n          <\/div>\n        <\/div>\n      <\/article>\n      \n      <article class=\"col-6 col-md-3\">\n        <div class=\"card h-100 border-0 shadow-sm hover-lift\">\n          <div class=\"card-body text-center p-3\">\n            <div class=\"rounded-circle mx-auto mb-2 d-flex align-items-center justify-content-center\" \n                 style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #a8d5e2 0%, #7fb8d0 100%);\">\n              <i class=\"bi bi-graph-up fs-3 text-white\"><\/i>\n            <\/div>\n            <h5 class=\"card-title fw-bold fs-6\">\u89c6\u89c9\u5316\u7ed3\u679c<\/h5>\n            <p class=\"card-text text-muted small\">\u6e05\u6670\u5c55\u793a\u512a\u52a3\u52e2<\/p>\n          <\/div>\n        <\/div>\n      <\/article>\n      \n      <article class=\"col-6 col-md-3\">\n        <div class=\"card h-100 border-0 shadow-sm hover-lift\">\n          <div class=\"card-body text-center p-3\">\n            <div class=\"rounded-circle mx-auto mb-2 d-flex align-items-center justify-content-center\" \n                 style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #f9c5d1 0%, #f4a3b4 100%);\">\n              <i class=\"bi bi-clock-history fs-3 text-white\"><\/i>\n            <\/div>\n            <h5 class=\"card-title fw-bold fs-6\">\u5feb\u901f\u6e2c\u9a57<\/h5>\n            <p class=\"card-text text-muted small\">1\u5206\u9418\u7372\u5f97\u7d50\u679c<\/p>\n          <\/div>\n        <\/div>\n      <\/article>\n    <\/main>\n    \n    <div class=\"text-center mb-4\">\n      <p class=\"fs-5 text-muted mb-4\">\u6e96\u5099\u597d\u4e86\u89e3\u4f60\u5728\u611f\u60c5\u4e2d\u7684\u771f\u5be6\u6a23\u8c8c\u4e86\u55ce\uff1f<\/p>\n      <button type=\"button\" class=\"btn btn-lg px-5 py-3 shadow start-quiz-btn\" \n              style=\"background: linear-gradient(135deg, #88c999 0%, #56b870 100%);                      border: none; color: white; font-size: 1.2rem; border-radius: 50px;\">\n        <i class=\"bi bi-arrow-right-circle me-2\"><\/i>\u5f00\u59cb\u6d4b\u9a8c\n      <\/button>\n    <\/div>\n  <\/section>\n\n  <!-- \u6e2c\u9a57\u9801 -->\n  <section id=\"quizmain9\" data-page=\"quiz9\" class=\"quiz-section d-none\">\n    <header class=\"text-center mb-4\">\n      <h2 class=\"fw-bold\" style=\"color: #2d5f3f;\">\u6200\u611b\u6210\u529f\u7387\u6e2c\u9a57<\/h2>\n    <\/header>\n    \n    <main>\n      <div class=\"question-container\">\n        <h3 class=\"fw-bold mb-4\" style=\"font-size: 22px; color: #2d5f3f;\">\u5728\u5929\u6c23\u5f88\u51b7\u7684\u6642\u5019\uff0c\u4f60\u548c\u53e6\u4e00\u534a\u4e00\u822c\u6703\u600e\u9ebc\u89e3\u6c7a\u5403\u98ef\u7684\u554f\u984c\uff1f<\/h3>\n        \n        <div class=\"options-container\">\n          <div class=\"card option-card mb-3 shadow-sm\" data-option=\"A\">\n            <div class=\"card-body d-flex align-items-center p-4\">\n              <div class=\"option-indicator me-3\">\n                <i class=\"bi bi-circle\"><\/i>\n                <i class=\"bi bi-check-circle-fill d-none\"><\/i>\n              <\/div>\n              <span class=\"option-text\" style=\"font-size: 18px;\">\u5c0d\u65b9\u51fa\u53bb\u8cb7<\/span>\n            <\/div>\n          <\/div>\n          \n          <div class=\"card option-card mb-3 shadow-sm\" data-option=\"B\">\n            <div class=\"card-body d-flex align-items-center p-4\">\n              <div class=\"option-indicator me-3\">\n                <i class=\"bi bi-circle\"><\/i>\n                <i class=\"bi bi-check-circle-fill d-none\"><\/i>\n              <\/div>\n              <span class=\"option-text\" style=\"font-size: 18px;\">\u81ea\u5df1\u51fa\u53bb\u8cb7<\/span>\n            <\/div>\n          <\/div>\n          \n          <div class=\"card option-card mb-3 shadow-sm\" data-option=\"C\">\n            <div class=\"card-body d-flex align-items-center p-4\">\n              <div class=\"option-indicator me-3\">\n                <i class=\"bi bi-circle\"><\/i>\n                <i class=\"bi bi-check-circle-fill d-none\"><\/i>\n              <\/div>\n              <span class=\"option-text\" style=\"font-size: 18px;\">\u4e00\u8d77\u51fa\u53bb\u5403<\/span>\n            <\/div>\n          <\/div>\n          \n          <div class=\"card option-card mb-3 shadow-sm\" data-option=\"D\">\n            <div class=\"card-body d-flex align-items-center p-4\">\n              <div class=\"option-indicator me-3\">\n                <i class=\"bi bi-circle\"><\/i>\n                <i class=\"bi bi-check-circle-fill d-none\"><\/i>\n              <\/div>\n              <span class=\"option-text\" style=\"font-size: 18px;\">\u4e00\u8d77\u8cb7\u56de\u5bb6\u5403<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/main>\n  <\/section>\n\n  <!-- \u7d50\u679c\u9801 -->\n  <section id=\"quizresult9\" data-page=\"result9\" class=\"quiz-section d-none\">\n    <header class=\"text-center mb-4\">\n      <h2 class=\"fw-bold\" style=\"color: #2d5f3f;\">\u4f60\u7684\u6200\u611b\u6210\u529f\u7387\u5206\u6790<\/h2>\n    <\/header>\n    \n    <main>\n      <div class=\"result-content\">\n        <div class=\"card border-0 shadow-sm mb-4\">\n          <div class=\"card-body p-4\">\n            <h4 class=\"card-title fw-bold mb-3 text-center\" style=\"color: #56b870;\" id=\"resultTitle9\"><\/h4>\n            <p class=\"card-text fs-5\" style=\"line-height: 1.8; color: #555;\" id=\"resultDescription9\"><\/p>\n          <\/div>\n        <\/div>\n        \n        <div class=\"chart-container mb-5\" style=\"max-width: 450px; margin: 0 auto;\">\n          <canvas id=\"loveChart9\"><\/canvas>\n        <\/div>\n        \n        <div class=\"text-center\">\n          <button type=\"button\" class=\"btn btn-lg px-5 py-3 shadow restart-quiz-btn\" \n                  style=\"background: linear-gradient(135deg, #88c999 0%, #56b870 100%);                          border: none; color: white; font-size: 1.1rem; border-radius: 50px;\">\n            <i class=\"bi bi-arrow-clockwise me-2\"><\/i>\u91cd\u65b0\u6d4b\u8bd5\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/main>\n  <\/section>\n<\/div>\n\n<!-- CSS\u6a23\u5f0f -->\n<style>\n  #loveQuizContainer9 {\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n    max-width: 750px;\n    margin: 0 auto;\n    min-height: 400px;\n  }\n  \n  #loveQuizContainer9 .quiz-section {\n    opacity: 0;\n    transition: opacity 0.3s ease-in-out;\n  }\n  \n  #loveQuizContainer9 .quiz-section.active {\n    opacity: 1;\n  }\n  \n  #loveQuizContainer9 .hover-lift {\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\n  }\n  \n  #loveQuizContainer9 .hover-lift:hover {\n    transform: translateY(-3px);\n    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;\n  }\n  \n  #loveQuizContainer9 .start-quiz-btn,\n  #loveQuizContainer9 .restart-quiz-btn {\n    transition: transform 0.2s ease, box-shadow 0.2s ease;\n    min-height: 50px;\n  }\n  \n  #loveQuizContainer9 .start-quiz-btn:hover,\n  #loveQuizContainer9 .restart-quiz-btn:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 8px 20px rgba(86, 184, 112, 0.3) !important;\n  }\n  \n  #loveQuizContainer9 .option-card {\n    cursor: pointer;\n    border: 2px solid #e8f5e9;\n    transition: all 0.3s ease;\n    background-color: #ffffff;\n    min-height: 60px;\n  }\n  \n  #loveQuizContainer9 .option-card:hover {\n    border-color: #88c999;\n    transform: translateX(5px);\n    box-shadow: 0 5px 15px rgba(136, 201, 153, 0.2) !important;\n    background-color: #fafffe;\n  }\n  \n  #loveQuizContainer9 .option-card.selected {\n    border-color: #56b870;\n    background: linear-gradient(to right, rgba(136, 201, 153, 0.08), rgba(86, 184, 112, 0.08));\n  }\n  \n  #loveQuizContainer9 .option-indicator {\n    width: 30px;\n    height: 30px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #56b870;\n    font-size: 1.5rem;\n    flex-shrink: 0;\n  }\n  \n  #loveQuizContainer9 .option-text {\n    color: #333333;\n    flex: 1;\n    line-height: 1.5;\n  }\n  \n  #loveQuizContainer9 .option-card:hover .option-text {\n    color: #2d5f3f;\n    font-weight: 500;\n  }\n  \n  #loveQuizContainer9 .intro-text {\n    max-width: 650px;\n    margin: 0 auto;\n  }\n  \n  @media (max-width: 768px) {\n    #loveQuizContainer9 h2 {\n      font-size: 1.8rem !important;\n    }\n    \n    #loveQuizContainer9 .display-5 {\n      font-size: 1.9rem !important;\n    }\n    \n    #loveQuizContainer9 h3 {\n      font-size: 20px !important;\n    }\n    \n    #loveQuizContainer9 .option-text {\n      font-size: 16px !important;\n    }\n    \n    #loveQuizContainer9 .intro-text p {\n      font-size: 1.05rem !important;\n    }\n    \n    #loveQuizContainer9 .card-title {\n      font-size: 0.95rem !important;\n    }\n  }\n<\/style>\n\n<!-- JavaScript -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n<script>\n(function() {\n  'use strict';\n  \n  class LoveQuiz {\n    constructor() {\n      this.container = document.getElementById('loveQuizContainer9');\n      this.introSection = document.getElementById('quizintro9');\n      this.quizSection = document.getElementById('quizmain9');\n      this.resultSection = document.getElementById('quizresult9');\n      this.selectedAnswer = null;\n      this.chartInstance = null;\n      \n      this.results = {\n        A: {\n          title: '\u773c\u5149\u6311\u5254\u578b',\n          description: '\u5728\u611f\u60c5\u4e0a\uff0c\u4f60\u662f\u4e00\u500b\u773c\u5149\u6bd4\u8f03\u6311\u5254\uff0c\u8981\u6c42\u6bd4\u8f03\u9ad8\u7684\u4eba\u3002\u5728\u8ac7\u8d77\u6200\u611b\u6642\uff0c\u4f60\u4e5f\u662f\u6bd4\u8f03\u4e0d\u8d70\u5fc3\u7684\uff0c\u54ea\u6015\u5c0d\u65b9\u60f3\u8981\u8ddf\u4f60\u4e00\u76f4\u8d70\u4e0b\u53bb\uff0c\u4f60\u7684\u5fc3\u9084\u662f\u6839\u672c\u5c31\u4e0d\u60f3\u5b9a\u4e0b\u4f86\uff0c\u505a\u4e0d\u5230\u5168\u5fc3\u5168\u610f\u611b\u8457\u4e00\u500b\u4eba\u3002\u9762\u5c0d\u5fc3\u7e3d\u662f\u5f88\u96e3\u5b9a\u4e0b\u4f86\u7684\u4f60\uff0c\u8ddf\u4f60\u5728\u4e00\u8d77\u6642\uff0c\u5c0d\u65b9\u5f80\u5f80\u6703\u89ba\u5f97\u5f88\u7d2f\u3002\u5efa\u8b70\u4f60\u8a66\u8457\u653e\u4e0b\u904e\u9ad8\u7684\u6a19\u6e96\uff0c\u5b78\u7fd2\u6b23\u8cde\u5c0d\u65b9\u7684\u512a\u9ede\uff0c\u7d66\u611f\u60c5\u4e00\u500b\u771f\u6b63\u767c\u5c55\u7684\u6a5f\u6703\u3002',\n          scores: {\n            commitment: 30,\n            communication: 60,\n            trust: 50,\n            independence: 85,\n            emotional: 40\n          }\n        },\n        B: {\n          title: '\u5de5\u4f5c\u512a\u5148\u578b',\n          description: '\u4f5c\u70ba\u4e00\u500b\u540d\u526f\u5176\u5be6\u7684\u5de5\u4f5c\u72c2\uff0c\u4f60\u7d93\u5e38\u6703\u56e0\u70ba\u5de5\u4f5c\u4e0a\u7684\u4e8b\u60c5\u800c\u5ffd\u8996\u559c\u6b61\u7684\u4eba\uff0c\u5c0e\u81f4\u81ea\u5df1\u8207\u559c\u6b61\u7684\u4eba\u96e2\u5f97\u8d8a\u4f86\u8d8a\u9060\u3002\u6642\u9593\u9577\u4e86\uff0c\u7576\u4f60\u9577\u6642\u9593\u6c89\u8ff7\u65bc\u5de5\u4f5c\u6642\uff0c\u4f60\u6703\u50cf\u5fd8\u4e86\u5c0d\u65b9\u7684\u5b58\u5728\u4e00\u6a23\uff0c\u5169\u4eba\u4e4b\u9593\u6703\u56e0\u70ba\u7f3a\u5c11\u6e9d\u901a\uff0c\u611f\u60c5\u4e5f\u6703\u8d8a\u4f86\u8d8a\u51b7\u3002\u5efa\u8b70\u4f60\u5b78\u6703\u5e73\u8861\u5de5\u4f5c\u8207\u611f\u60c5\uff0c\u5b9a\u671f\u5b89\u6392\u5c08\u5c6c\u65bc\u5169\u4eba\u7684\u6642\u9593\uff0c\u8b93\u5c0d\u65b9\u611f\u53d7\u5230\u88ab\u91cd\u8996\u3002',\n          scores: {\n            commitment: 70,\n            communication: 35,\n            trust: 65,\n            independence: 90,\n            emotional: 30\n          }\n        },\n        C: {\n          title: '\u904e\u5ea6\u4f9d\u8cf4\u578b',\n          description: '\u5728\u611f\u60c5\u88e1\uff0c\u4f60\u662f\u6bd4\u8f03\u559c\u6b61\u4f9d\u8cf4\u5c0d\u65b9\u7684\u3002\u4f60\u6703\u6574\u5929\u570d\u8457\u5c0d\u65b9\u8f49\uff0c\u6068\u4e0d\u5f97\u8ddf\u5c0d\u65b924\u5c0f\u6642\u9ecf\u5728\u4e00\u8d77\u3002\u5728\u5c0d\u65b9\u770b\u4f86\uff0c\u9019\u662f\u500b\u751c\u871c\u7684\u8ca0\u64d4\uff0c\u4e5f\u53ef\u80fd\u6210\u70ba\u5206\u624b\u7684\u539f\u56e0\u3002\u4e0d\u7ba1\u662f\u53cb\u60c5\u9084\u662f\u611b\u60c5\uff0c\u5f7c\u6b64\u90fd\u9700\u8981\u6709\u7368\u7acb\u7684\u7a7a\u9593\u3002\u5efa\u8b70\u4f60\u57f9\u990a\u81ea\u5df1\u7684\u8208\u8da3\u611b\u597d\uff0c\u4fdd\u6301\u9069\u7576\u7684\u8ddd\u96e2\uff0c\u8b93\u611f\u60c5\u6709\u547c\u5438\u7684\u7a7a\u9593\u3002',\n          scores: {\n            commitment: 90,\n            communication: 70,\n            trust: 60,\n            independence: 20,\n            emotional: 85\n          }\n        },\n        D: {\n          title: '\u7f3a\u4e4f\u5b89\u5168\u611f\u578b',\n          description: '\u5728\u611f\u60c5\u4e0a\uff0c\u4f60\u662f\u4e00\u500b\u5f88\u6c92\u6709\u5b89\u5168\u611f\u7684\u4eba\u3002\u54ea\u6015\u5c0d\u65b9\u4e26\u6c92\u6709\u505a\u4ec0\u9ebc\uff0c\u4f60\u5f80\u5f80\u9084\u662f\u6703\u60f3\u6771\u60f3\u897f\u3002\u4f60\u5c0d\u559c\u6b61\u7684\u4eba\u7e3d\u662f\u62b1\u8457\u731c\u5fcc\u548c\u4e0d\u4fe1\u4efb\uff0c\u7d66\u5c0d\u65b9\u9020\u6210\u4e86\u5f88\u5927\u7684\u58d3\u529b\u611f\uff0c\u4f7f\u5169\u4eba\u4e4b\u9593\u7684\u611f\u60c5\u983b\u7e41\u51fa\u73fe\u5371\u6a5f\u3002\u5efa\u8b70\u4f60\u5b78\u6703\u4fe1\u4efb\u5c0d\u65b9\uff0c\u57f9\u990a\u81ea\u4fe1\u5fc3\uff0c\u7576\u6709\u7591\u616e\u6642\u9078\u64c7\u958b\u8aa0\u5e03\u516c\u5730\u6e9d\u901a\uff0c\u800c\u4e0d\u662f\u7368\u81ea\u731c\u6e2c\u3002',\n          scores: {\n            commitment: 75,\n            communication: 45,\n            trust: 25,\n            independence: 55,\n            emotional: 70\n          }\n        }\n      };\n      \n      this.init();\n    }\n    \n    init() {\n      this.bindEvents();\n    }\n    \n    bindEvents() {\n      \/\/ \u958b\u59cb\u6e2c\u9a57\u6309\u9215\n      const startBtn = this.container.querySelector('.start-quiz-btn');\n      if (startBtn) {\n        startBtn.addEventListener('click', () => this.startQuiz());\n      }\n      \n      \/\/ \u9078\u9805\u9ede\u64ca\n      const options = this.container.querySelectorAll('.option-card');\n      options.forEach(option => {\n        option.addEventListener('click', (e) => this.selectOption(e));\n      });\n      \n      \/\/ \u91cd\u65b0\u6e2c\u8a66\u6309\u9215\n      const restartBtn = this.container.querySelector('.restart-quiz-btn');\n      if (restartBtn) {\n        restartBtn.addEventListener('click', () => this.restartQuiz());\n      }\n    }\n    \n    startQuiz() {\n      this.switchSection('quiz');\n      this.scrollToTop();\n    }\n    \n    selectOption(e) {\n      const option = e.currentTarget;\n      const answer = option.dataset.option;\n      \n      \/\/ \u6e05\u9664\u4e4b\u524d\u7684\u9078\u64c7\n      this.container.querySelectorAll('.option-card').forEach(card => {\n        card.classList.remove('selected');\n        card.querySelector('.bi-circle').classList.remove('d-none');\n        card.querySelector('.bi-check-circle-fill').classList.add('d-none');\n      });\n      \n      \/\/ \u6a19\u8a18\u7576\u524d\u9078\u64c7\n      option.classList.add('selected');\n      option.querySelector('.bi-circle').classList.add('d-none');\n      option.querySelector('.bi-check-circle-fill').classList.remove('d-none');\n      \n      this.selectedAnswer = answer;\n      \n      \/\/ \u5ef6\u9072\u986f\u793a\u7d50\u679c\n      setTimeout(() => {\n        this.showResult();\n      }, 500);\n    }\n    \n    showResult() {\n      const result = this.results[this.selectedAnswer];\n      \n      \/\/ \u66f4\u65b0\u7d50\u679c\u5167\u5bb9\n      document.getElementById('resultTitle9').textContent = result.title;\n      document.getElementById('resultDescription9').textContent = result.description;\n      \n      \/\/ \u5207\u63db\u5230\u7d50\u679c\u9801\n      this.switchSection('result');\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      }, 300);\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('loveChart9').getContext('2d');\n      \n      this.chartInstance = new Chart(ctx, {\n        type: 'radar',\n        data: {\n          labels: ['\u627f\u8afe\u5ea6', '\u6e9d\u901a\u529b', '\u4fe1\u4efb\u611f', '\u7368\u7acb\u6027', '\u60c5\u611f\u6295\u5165'],\n          datasets: [{\n            label: '\u4f60\u7684\u6200\u611b\u7279\u8cea',\n            data: [\n              scores.commitment,\n              scores.communication,\n              scores.trust,\n              scores.independence,\n              scores.emotional\n            ],\n            backgroundColor: 'rgba(136, 201, 153, 0.2)',\n            borderColor: 'rgba(86, 184, 112, 1)',\n            borderWidth: 2,\n            pointBackgroundColor: 'rgba(86, 184, 112, 1)',\n            pointBorderColor: '#fff',\n            pointHoverBackgroundColor: '#fff',\n            pointHoverBorderColor: 'rgba(86, 184, 112, 1)',\n            pointRadius: 5,\n            pointHoverRadius: 7\n          }]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: true,\n          plugins: {\n            legend: {\n              display: false\n            },\n            tooltip: {\n              callbacks: {\n                label: function(context) {\n                  return context.label + ': ' + context.parsed.r + '%';\n                }\n              },\n              backgroundColor: 'rgba(45, 95, 63, 0.9)',\n              titleColor: '#fff',\n              bodyColor: '#fff',\n              borderColor: 'rgba(86, 184, 112, 1)',\n              borderWidth: 1\n            }\n          },\n          scales: {\n            r: {\n              beginAtZero: true,\n              max: 100,\n              ticks: {\n                stepSize: 20,\n                font: {\n                  size: 14\n                },\n                color: '#666'\n              },\n              pointLabels: {\n                font: {\n                  size: 18,\n                  weight: 'bold'\n                },\n                color: '#2d5f3f'\n              },\n              grid: {\n                color: 'rgba(0, 0, 0, 0.08)'\n              }\n            }\n          }\n        }\n      });\n    }\n    \n    restartQuiz() {\n      \/\/ \u91cd\u7f6e\u9078\u9805\n      this.container.querySelectorAll('.option-card').forEach(card => {\n        card.classList.remove('selected');\n        card.querySelector('.bi-circle').classList.remove('d-none');\n        card.querySelector('.bi-check-circle-fill').classList.add('d-none');\n      });\n      \n      this.selectedAnswer = null;\n      \n      \/\/ \u92b7\u6bc0\u5716\u8868\n      if (this.chartInstance) {\n        this.chartInstance.destroy();\n        this.chartInstance = null;\n      }\n      \n      \/\/ \u56de\u5230\u5f15\u5c0e\u9801\n      this.switchSection('intro');\n      this.scrollToTop();\n    }\n    \n    switchSection(section) {\n      const sections = {\n        'intro': this.introSection,\n        'quiz': this.quizSection,\n        'result': this.resultSection\n      };\n      \n      \/\/ \u96b1\u85cf\u6240\u6709\u90e8\u5206\n      Object.values(sections).forEach(sec => {\n        sec.classList.add('d-none');\n        sec.classList.remove('active');\n      });\n      \n      \/\/ \u986f\u793a\u76ee\u6a19\u90e8\u5206\n      const targetSection = sections[section];\n      if (targetSection) {\n        targetSection.classList.remove('d-none');\n        setTimeout(() => {\n          targetSection.classList.add('active');\n        }, 10);\n      }\n    }\n    \n    scrollToTop() {\n      const containerTop = this.container.getBoundingClientRect().top + window.pageYOffset - 20;\n      window.scrollTo({\n        top: containerTop,\n        behavior: 'smooth'\n      });\n    }\n  }\n  \n  \/\/ \u521d\u59cb\u5316\u6e2c\u9a57\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', () => {\n      new LoveQuiz();\n    });\n  } else {\n    new LoveQuiz();\n  }\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u6211\u4eec\u5f80\u5f80\u559c\u6b22\u628a\u81ea\u5df1\u653e\u5728\u4e00\u4e2a\u88ab\u4f24\u5bb3\u8005\u7684\u4f4d\u7f6e\u4e0a\uff0c\u89c9\u5f97\u90a3\u4e2a\u5634\u4e0a\u8bf4\u7740\u4e0d\u7231\u4f60\u7684\u4eba\u6df1\u6df1\u4f24\u5bb3\u4e86\u4f60\u3002\u5176\u5b9e\uff0c\u5982\u679c\u4f60\u7684\u604b\u60c5\u5c61\u5c61\u5931\u8d25\u7684\u8bdd\uff0c\u4f60\u662f\u5426\u66fe\u60f3\u8fc7\u662f\u81ea\u5df1\u7684\u95ee\u9898\u5462\uff1f\u90a3\u4e48\uff0c\u4f1a\u662f\u4ec0\u4e48\u95ee\u9898\u5bfc\u81f4\u4f60\u7684\u604b\u7231\u6210\u529f\u7387\u8fbe\u4e0d\u5230100%\u5462\uff1f<\/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":[178],"tags":[],"class_list":["post-2578","post","type-post","status-publish","format-standard","hentry","category-love"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2578","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=2578"}],"version-history":[{"count":1,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2578\/revisions"}],"predecessor-version":[{"id":10702,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2578\/revisions\/10702"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2578"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2578"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}