{"id":2488,"date":"2023-10-17T09:45:00","date_gmt":"2023-10-17T01:45:00","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2488"},"modified":"2025-08-17T00:22:27","modified_gmt":"2025-08-16T16:22:27","slug":"good-person-or-lover","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/good-person-or-lover","title":{"rendered":"\u4f60\u4f1a\u5ac1\u7ed9\u300c\u597d\u4eba\u300d\u8fd8\u662f\u300c\u7231\u4eba\u300d\uff1f \u2192\u7ebf\u4e0a\u514d\u8d39\u5c0f\u6d4b\u9a8c"},"content":{"rendered":"<!-- \u5a5a\u59fb\u50f9\u503c\u89c0\u6e2c\u9a57 - WordPress\u5d4c\u5165\u7248 -->\n<!-- Bootstrap 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<main class=\"marriage-quiz-wrapper9\">\n  <!-- \u5f15\u5c0e\u9801 -->\n  <section id=\"quizintro9\" data-page=\"intro9\" class=\"quiz-section9 active\">\n    <div class=\"container\">\n      <div class=\"row justify-content-center\">\n        <div class=\"col-12\">\n          <header class=\"text-center mb-5\">\n            <h2 class=\"display-5 fw-bold mb-4\" style=\"color: #7C3AED; background: linear-gradient(135deg, #7C3AED 0%, #DB2777 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;\">\n              \u4f60\u4f1a\u5ac1\u7ed9\u300c\u597d\u4eba\u300d\u8fd8\u662f\u300c\u7231\u4eba\u300d\uff1f\n            <\/h2>\n            <p class=\"lead text-muted fs-5\">\u63a2\u7d22\u4f60\u7684\u5a5a\u59fb\u50f9\u503c\u89c0\u8207\u5167\u5fc3\u771f\u5be6\u60f3\u6cd5<\/p>\n          <\/header>\n          \n          <div class=\"row g-4 mb-5\">\n            <div class=\"col-md-4\">\n              <div class=\"feature-card9 h-100 p-4 rounded-4 shadow-sm bg-white\">\n                <div class=\"feature-icon9 mb-3 text-center\">\n                  <div class=\"rounded-circle bg-gradient p-4 d-inline-flex\" style=\"background: linear-gradient(135deg, #FED7E2 0%, #FEF3C7 100%); width: 80px; height: 80px; align-items: center; justify-content: center;\">\n                    <i class=\"bi bi-heart\" style=\"color: #BE185D; font-size: 36px;\"><\/i>\n                  <\/div>\n                <\/div>\n                <h4 class=\"fw-semibold mb-2\">\u6df1\u5ea6\u5206\u6790<\/h4>\n                <p class=\"text-muted\">\u900f\u904e\u5fc3\u7406\u5b78\u5c08\u696d\u554f\u984c\uff0c\u6df1\u5165\u4e86\u89e3\u4f60\u7684\u5a5a\u59fb\u89c0\u5ff5<\/p>\n              <\/div>\n            <\/div>\n            <div class=\"col-md-4\">\n              <div class=\"feature-card9 h-100 p-4 rounded-4 shadow-sm bg-white\">\n                <div class=\"feature-icon9 mb-3 text-center\">\n                  <div class=\"rounded-circle bg-gradient p-4 d-inline-flex\" style=\"background: linear-gradient(135deg, #E9D5FF 0%, #BFDBFE 100%); width: 80px; height: 80px; align-items: center; justify-content: center;\">\n                    <i class=\"bi bi-graph-up\" style=\"color: #7C3AED; font-size: 36px;\"><\/i>\n                  <\/div>\n                <\/div>\n                <h4 class=\"fw-semibold mb-2\">\u6570\u636e\u89c6\u89c9\u5316<\/h4>\n                <p class=\"text-muted\">\u5c08\u696d\u5716\u8868\u5448\u73fe\u4f60\u7684\u611b\u60c5\u8207\u4eba\u54c1\u9700\u6c42\u5e73\u8861<\/p>\n              <\/div>\n            <\/div>\n            <div class=\"col-md-4\">\n              <div class=\"feature-card9 h-100 p-4 rounded-4 shadow-sm bg-white\">\n                <div class=\"feature-icon9 mb-3 text-center\">\n                  <div class=\"rounded-circle bg-gradient p-4 d-inline-flex\" style=\"background: linear-gradient(135deg, #FED7AA 0%, #FDE0E5 100%); width: 80px; height: 80px; align-items: center; justify-content: center;\">\n                    <i class=\"bi bi-person-hearts\" style=\"color: #EA580C; font-size: 36px;\"><\/i>\n                  <\/div>\n                <\/div>\n                <h4 class=\"fw-semibold mb-2\">\u500b\u4eba\u5316\u7d50\u679c<\/h4>\n                <p class=\"text-muted\">\u7372\u5f97\u5c08\u5c6c\u65bc\u4f60\u7684\u5a5a\u59fb\u5efa\u8b70\u8207\u6df1\u5ea6\u89e3\u6790<\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n          \n          <div class=\"intro-content9 p-5 rounded-4 bg-light\">\n            <p class=\"fs-5 mb-4\">\u4e0d\u5c11\u4eba\u89ba\u5f97\uff0c\u5ac1\u7684\u4eba\uff0c\u4eba\u597d\u5c31\u884c\u4e86\uff0c\u80fd\u5c0d\u81ea\u5df1\u597d\u5c31\u53ef\u4ee5\u4e86\u3002\u4f46\u662f\u4e5f\u6709\u5973\u6027\u8a8d\u70ba\uff0c\u9084\u662f\u8981\u5ac1\u4e00\u500b\u81ea\u5df1\u611b\u7684\u4eba\u3002<\/p>\n            <p class=\"fs-5 mb-4\">\u90a3\u9ebc\uff0c\u4f60\u6703\u5ac1\u7d66\u597d\u4eba\u9084\u662f\u611b\u4eba\uff1f\u9019\u500b\u6e2c\u9a57\u5c07\u5e6b\u52a9\u4f60\uff1a<\/p>\n            <ul class=\"list-unstyled fs-5\">\n              <li class=\"mb-2\"><i class=\"bi bi-check-circle-fill me-2\" style=\"color: #10B981;\"><\/i>\u4e86\u89e3\u81ea\u5df1\u5c0d\u5a5a\u59fb\u7684\u771f\u5be6\u671f\u5f85<\/li>\n              <li class=\"mb-2\"><i class=\"bi bi-check-circle-fill me-2\" style=\"color: #10B981;\"><\/i>\u767c\u73fe\u5167\u5fc3\u6df1\u8655\u7684\u60c5\u611f\u9700\u6c42<\/li>\n              <li class=\"mb-2\"><i class=\"bi bi-check-circle-fill me-2\" style=\"color: #10B981;\"><\/i>\u627e\u5230\u611b\u60c5\u8207\u73fe\u5be6\u7684\u5e73\u8861\u9ede<\/li>\n            <\/ul>\n          <\/div>\n          \n          <div class=\"text-center mt-5\">\n            <button data-action=\"start-quiz9\" class=\"btn btn-lg px-5 py-3 rounded-pill shadow-lg\" style=\"background: linear-gradient(135deg, #7C3AED 0%, #DB2777 100%); color: white; font-size: 1.25rem;\">\n              \u5f00\u59cb\u6d4b\u9a8c\n              <i class=\"bi bi-arrow-right-circle ms-2\"><\/i>\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u6e2c\u9a57\u9801 -->\n  <section id=\"quizmain9\" data-page=\"quiz9\" class=\"quiz-section9\">\n    <div class=\"container\">\n      <div class=\"row justify-content-center\">\n        <div class=\"col-12\">\n          <h2 class=\"text-center mb-4 fw-bold\" style=\"color: #7C3AED;\">\u5a5a\u59fb\u50f9\u503c\u89c0\u6e2c\u9a57<\/h2>\n          \n          <!-- \u9032\u5ea6\u689d -->\n          <div class=\"progress-wrapper9 mb-5\">\n            <div class=\"d-flex justify-content-between align-items-center mb-2\">\n              <span class=\"text-muted\">\u6d4b\u9a8c\u8fdb\u5ea6<\/span>\n              <span class=\"badge rounded-pill px-3 py-2\" style=\"background: #7C3AED; font-size: 1rem;\">\n                \u95ee\u9898 <span data-progress=\"current\">1<\/span>\/<span data-progress=\"total\">10<\/span>\n              <\/span>\n            <\/div>\n            <div class=\"progress\" style=\"height: 12px;\">\n              <div class=\"progress-bar\" data-progress=\"bar\" role=\"progressbar\" style=\"background: linear-gradient(90deg, #7C3AED 0%, #DB2777 100%); width: 10%\"><\/div>\n            <\/div>\n          <\/div>\n          \n          <!-- \u554f\u984c\u5bb9\u5668 -->\n          <div data-quiz=\"container\" class=\"quiz-container9\">\n            <!-- \u554f\u984c\u5c07\u52d5\u614b\u751f\u6210 -->\n          <\/div>\n          \n          <!-- \u4e0a\u4e00\u984c\u6309\u9215 -->\n          <div class=\"text-center mt-4\">\n            <button data-action=\"prev-question9\" class=\"btn btn-outline-secondary rounded-pill px-4 py-2\" style=\"display: none;\">\n              <i class=\"bi bi-arrow-left me-2\"><\/i>\u4e0a\u4e00\u9898\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u7d50\u679c\u9801 -->\n  <section id=\"quizresult9\" data-page=\"result9\" class=\"quiz-section9\">\n    <div class=\"container\">\n      <div class=\"row justify-content-center\">\n        <div class=\"col-12\">\n          <h2 class=\"text-center mb-5 fw-bold\" style=\"color: #7C3AED;\">\u6d4b\u9a8c\u7ed3\u679c<\/h2>\n          \n          <!-- \u7d50\u679c\u6a19\u984c -->\n          <div class=\"result-header9 text-center mb-4\">\n            <div class=\"result-badge9 d-inline-block px-5 py-3 rounded-pill mb-3\" style=\"background: linear-gradient(135deg, #FED7E2 0%, #FEF3C7 100%);\">\n              <h3 data-result=\"title\" class=\"mb-0 fw-bold\" style=\"color: #7C3AED; font-size: 1.75rem;\"><\/h3>\n            <\/div>\n          <\/div>\n          \n          <!-- \u7d50\u679c\u63cf\u8ff0 -->\n          <div class=\"result-content9 p-5 rounded-4 bg-light mb-5\">\n            <p data-result=\"description\" class=\"fs-5 lh-lg mb-0\"><\/p>\n          <\/div>\n          \n          <!-- \u6578\u64da\u8996\u89ba\u5316 -->\n          <div class=\"row mb-5\">\n            <div class=\"col-md-8 mx-auto\">\n              <div class=\"chart-container9 p-4 bg-white rounded-4 shadow-sm\">\n                <canvas id=\"resultChart9\"><\/canvas>\n              <\/div>\n            <\/div>\n          <\/div>\n          \n          <!-- \u8a73\u7d30\u5206\u6790 -->\n          <div class=\"analysis-cards9 row g-4 mb-5\">\n            <div class=\"col-md-6\">\n              <div class=\"analysis-card9 h-100 p-4 rounded-4 bg-white shadow-sm\">\n                <h4 class=\"fw-semibold mb-3\"><i class=\"bi bi-heart-fill me-2\" style=\"color: #BE185D;\"><\/i>\u611b\u60c5\u9700\u6c42\u5206\u6790<\/h4>\n                <p data-analysis=\"love\" class=\"text-muted\"><\/p>\n              <\/div>\n            <\/div>\n            <div class=\"col-md-6\">\n              <div class=\"analysis-card9 h-100 p-4 rounded-4 bg-white shadow-sm\">\n                <h4 class=\"fw-semibold mb-3\"><i class=\"bi bi-shield-fill-check me-2\" style=\"color: #10B981;\"><\/i>\u5b89\u5168\u611f\u8a55\u4f30<\/h4>\n                <p data-analysis=\"security\" class=\"text-muted\"><\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n          \n          <!-- \u91cd\u65b0\u6e2c\u8a66\u6309\u9215 -->\n          <div class=\"text-center\">\n            <button data-action=\"restart-quiz9\" class=\"btn btn-lg px-5 py-3 rounded-pill shadow-lg\" style=\"background: linear-gradient(135deg, #7C3AED 0%, #DB2777 100%); color: white; font-size: 1.25rem;\">\n              \u91cd\u65b0\u6d4b\u8bd5\n              <i class=\"bi bi-arrow-clockwise ms-2\"><\/i>\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n<\/main>\n\n<!-- CSS\u6a23\u5f0f -->\n<style>\n.marriage-quiz-wrapper9 {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Microsoft JhengHei\", \"\u5fae\u8edf\u6b63\u9ed1\u9ad4\", sans-serif;\n  padding: 2rem 0;\n  min-height: 600px;\n  max-width: 750px;\n  margin: 0 auto;\n}\n\n.quiz-section9 {\n  display: none;\n  opacity: 0;\n  transition: opacity 0.5s ease;\n}\n\n.quiz-section9.active {\n  display: block;\n  opacity: 1;\n}\n\n.feature-card9 {\n  transition: transform 0.3s ease, box-shadow 0.3s ease;\n  border: 1px solid #F3F4F6;\n}\n\n.feature-card9:hover {\n  transform: translateY(-5px);\n  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.1) !important;\n}\n\n.intro-content9 {\n  background: linear-gradient(135deg, #FAF5FF 0%, #FEF3F8 100%);\n  border: 2px solid #F3E8FF;\n}\n\n.quiz-question9 {\n  animation: fadeInUp 0.5s ease;\n}\n\n@keyframes fadeInUp {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n\/* \u65b0\u7684\u9078\u9805\u5361\u7247\u6a23\u5f0f *\/\n.option-card9 {\n  border: 2px solid #E5E7EB;\n  background: white;\n  transition: all 0.3s ease;\n  cursor: pointer;\n  min-height: 70px;\n  position: relative;\n  overflow: hidden;\n}\n\n.option-card9:hover {\n  border-color: #7C3AED;\n  background: linear-gradient(135deg, #FAF5FF 0%, #FEF3F8 100%);\n  transform: translateY(-2px);\n  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.12);\n}\n\n.option-card9.selected {\n  border-color: #7C3AED;\n  background: linear-gradient(135deg, #FAF5FF 0%, #FEF3F8 100%);\n  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.15);\n}\n\n.option-indicator9 {\n  width: 28px;\n  height: 28px;\n  border: 2px solid #D1D5DB;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.3s ease;\n  flex-shrink: 0;\n  background: white;\n}\n\n.option-card9:hover .option-indicator9 {\n  border-color: #7C3AED;\n  background: #FAF5FF;\n}\n\n.option-card9.selected .option-indicator9 {\n  background: #7C3AED;\n  border-color: #7C3AED;\n}\n\n.option-card9.selected .option-indicator9 i {\n  display: block !important;\n}\n\n.option-text9 {\n  font-size: 18px;\n  color: #374151;\n  line-height: 1.5;\n}\n\n.option-card9:hover .option-text9 {\n  color: #1F2937;\n}\n\n.option-card9.selected .option-text9 {\n  color: #7C3AED;\n  font-weight: 500;\n}\n\n.chart-container9 {\n  position: relative;\n  height: 400px;\n}\n\n.analysis-card9 {\n  transition: transform 0.3s ease;\n  border: 1px solid #F3F4F6;\n}\n\n.analysis-card9:hover {\n  transform: translateY(-3px);\n  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.08) !important;\n}\n\n\/* \u97ff\u61c9\u5f0f\u8a2d\u8a08 *\/\n@media (max-width: 768px) {\n  .marriage-quiz-wrapper9 {\n    padding: 1rem;\n  }\n  \n  .display-5 {\n    font-size: 1.75rem;\n  }\n  \n  .chart-container9 {\n    height: 300px;\n  }\n  \n  .option-text9 {\n    font-size: 16px;\n  }\n  \n  .option-card9 {\n    min-height: 60px;\n  }\n  \n  .option-indicator9 {\n    width: 24px;\n    height: 24px;\n  }\n}\n\n\/* \u6309\u9215\u52d5\u756b *\/\n.btn:hover {\n  transform: translateY(-2px);\n  transition: all 0.3s ease;\n}\n\n.btn:active {\n  transform: translateY(0);\n}\n\n\/* \u9032\u5ea6\u689d\u52d5\u756b *\/\n.progress-bar {\n  transition: width 0.5s ease;\n}\n\n\/* \u78ba\u4fddh3\u6a19\u984c\u6a23\u5f0f *\/\n.quiz-question9 h3 {\n  font-size: 22px;\n  font-weight: bold;\n  color: #1F2937;\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  \/\/ \u5a5a\u59fb\u6e2c\u9a57\u6a21\u7d44\n  class MarriageQuiz {\n    constructor() {\n      \/\/ \u554f\u984c\u6578\u64da\n      this.questions = [\n        {\n          id: 1,\n          question: \"\u4f60\u662f\u4e0d\u662f\u7e3d\u662f\u5f88\u7fa8\u6155\u90a3\u4e9b\u6709\u9322\u4eba\uff1f\",\n          options: [\n            { text: \"\u662f\u7684\", nextQuestion: 2 },\n            { text: \"\u4e0d\u662f\", nextQuestion: 3 },\n            { text: \"\u4e00\u822c\", nextQuestion: 4 }\n          ]\n        },\n        {\n          id: 2,\n          question: \"\u4f60\u73fe\u5728\u8ddf\u7236\u6bcd\u7684\u806f\u7e6b\u7dca\u5bc6\u55ce\uff1f\",\n          options: [\n            { text: \"\u662f\u7684\", nextQuestion: 3 },\n            { text: \"\u4e0d\u662f\", nextQuestion: 4 },\n            { text: \"\u4e00\u822c\", nextQuestion: 5 }\n          ]\n        },\n        {\n          id: 3,\n          question: \"\u4f60\u6bcf\u6b21\u8cb7\u6771\u897f\u6216\u8005\u65c5\u884c\u4e4b\u985e\u7684\uff0c\u5be6\u969b\u4e0a\u90fd\u6703\u8d85\u51fa\u9810\u7b97\u55ce\uff1f\",\n          options: [\n            { text: \"\u662f\u7684\", nextQuestion: 4 },\n            { text: \"\u525b\u525b\u597d\", nextQuestion: 5 },\n            { text: \"\u5c11\u65bc\u9810\u7b97\", nextQuestion: 6 }\n          ]\n        },\n        {\n          id: 4,\n          question: \"\u4f60\u7d93\u6b77\u904e\u300c\u4eba\u751f\u9677\u5165\u6ce5\u6f6d\u300d\u7684\u90a3\u7a2e\u611f\u89ba\u55ce\uff1f\",\n          options: [\n            { text: \"\u662f\u7684\", nextQuestion: 5 },\n            { text: \"\u6c92\u6709\", nextQuestion: 6 },\n            { text: \"\u6b63\u5728\u7d93\u6b77\", nextQuestion: 7 }\n          ]\n        },\n        {\n          id: 5,\n          question: \"\u4f60\u73fe\u5728\u82b1\u7684\u6bcf\u4e00\u5206\u9322\uff0c\u90fd\u77e5\u9053\u5b83\u7684\u53bb\u5411\u55ce\uff1f\",\n          options: [\n            { text: \"\u5e7e\u4e4e\u6e05\u695a\", nextQuestion: 6 },\n            { text: \"\u4e0d\u592a\u5728\u610f\", nextQuestion: 7 },\n            { text: \"\u5927\u9322\u77e5\u9053\", nextQuestion: 8 }\n          ]\n        },\n        {\n          id: 6,\n          question: \"\u5982\u679c\u7d66\u4f60\u4e00\u7a2e\u795e\u79d8\u7684\u9b54\u6cd5\uff0c\u4f60\u6700\u60f3\u4f7f\u7528\u4e0b\u9762\u54ea\u7a2e\u529f\u80fd\uff1f\",\n          options: [\n            { text: \"\u8a18\u61b6\u8d85\u7fa4\", nextQuestion: 7 },\n            { text: \"\u63a8\u7406\u8d85\u5f37\", nextQuestion: 8 },\n            { text: \"\u7e6a\u756b\u4e00\u6d41\", result: \"A\" }\n          ]\n        },\n        {\n          id: 7,\n          question: \"\u4f60\u6709\u88ab\u719f\u6089\u7684\u597d\u53cb\u80cc\u53db\u904e\u55ce\uff1f\",\n          options: [\n            { text: \"\u6709\u7684\", nextQuestion: 8 },\n            { text: \"\u6c92\u6709\", nextQuestion: 9 },\n            { text: \"\u4e0d\u77e5\u9053\", nextQuestion: 10 }\n          ]\n        },\n        {\n          id: 8,\n          question: \"\u5982\u679c\u4f60\u662f\u5973\u751f\uff0c\u4f60\u89ba\u5f97\u81ea\u5df1\u5728\u4ec0\u9ebc\u5e74\u9f61\u7d50\u5a5a\u6700\u7406\u60f3\uff1f\",\n          options: [\n            { text: \"24\u6b72\u4e4b\u524d\", nextQuestion: 9 },\n            { text: \"25~29\u6b72\u4e4b\u9593\", result: \"A\" },\n            { text: \"30\u6b72\u4e4b\u5f8c\", result: \"B\" }\n          ]\n        },\n        {\n          id: 9,\n          question: \"\u5982\u679c\u807d\u4e00\u6bb5\u53e4\u98a8\u97f3\u6a02\uff0c\u4f60\u66f4\u9858\u610f\u807d\u54ea\u7a2e\u6a02\u5668\u5f48\u594f\u7684\uff1f\",\n          options: [\n            { text: \"\u9577\u7c2b\", result: \"C\" },\n            { text: \"\u53e4\u7434\", result: \"D\" },\n            { text: \"\u7435\u7436\", result: \"A\" }\n          ]\n        },\n        {\n          id: 10,\n          question: \"\u5a5a\u5f8c\u4f60\u5bb3\u6015\u70ba\u4e86\u4ec0\u9ebc\u800c\u8ddf\u4f34\u4fb6\u5435\u67b6\uff1f\",\n          options: [\n            { text: \"\u9322\u8ca1\", result: \"B\" },\n            { text: \"\u5c0f\u4e09\", result: \"C\" },\n            { text: \"\u516c\u5a46\", result: \"D\" }\n          ]\n        }\n      ];\n      \n      \/\/ \u7d50\u679c\u6578\u64da\n      this.results = {\n        \"A\": {\n          title: \"\u5ac1\u4e00\u822c\u4eba\",\n          description: \"\u4f60\u4e00\u5411\u90fd\u89ba\u5f97\uff0c\u9019\u500b\u4e16\u754c\u4e0a\u6c92\u6709\u5b8c\u7f8e\u7684\u4eba\uff0c\u5224\u5b9a\u4e00\u500b\u4eba\u597d\u4e0d\u597d\u7684\u6a19\u6e96\u4e5f\u4e0d\u4e00\u6a23\uff0c\u6709\u7684\u4eba\u4e0d\u72af\u4e8b\u5c31\u884c\uff0c\u6709\u7684\u4eba\u8981\u6c42\u9053\u5fb7\u6977\u6a21\u3002\u800c\u4f60\u89ba\u5f97\uff0c\u81ea\u5df1\u5ac1\u4e00\u500b\u4e00\u822c\u7684\u4eba\u5c31\u884c\u4e86\uff0c\u4eba\u4e0d\u7528\u592a\u597d\uff0c\u4f46\u4e5f\u4e0d\u80fd\u592a\u58de\u3002\u81ea\u5df1\u4e0d\u7528\u592a\u611b\u5c0d\u65b9\uff0c\u4f46\u53c8\u4e0d\u80fd\u4e0d\u611b\u3002\u5c0d\u65b9\u4e5f\u7576\u7136\u8981\u5c0d\u81ea\u5df1\u6709\u611f\u89ba\u624d\u884c\u3002\u9019\u6a23\u7684\u9069\u4e2d\u4eba\u58eb\uff0c\u4f60\u662f\u6703\u8003\u616e\u7684\u3002\",\n          scores: {\n            \"\u611b\u60c5\u9700\u6c42\": 65,\n            \"\u4eba\u54c1\u9700\u6c42\": 70,\n            \"\u5b89\u5168\u611f\": 75,\n            \"\u52d9\u5be6\u7a0b\u5ea6\": 80\n          },\n          analysis: {\n            love: \"\u4f60\u5c0d\u611b\u60c5\u4fdd\u6301\u7406\u6027\u614b\u5ea6\uff0c\u4e0d\u8ffd\u6c42\u8f5f\u8f5f\u70c8\u70c8\uff0c\u4f46\u4e5f\u9700\u8981\u57fa\u672c\u7684\u60c5\u611f\u9023\u7d50\u3002\",\n            security: \"\u4f60\u91cd\u8996\u7a69\u5b9a\u7684\u95dc\u4fc2\uff0c\u5e0c\u671b\u5728\u5e73\u6de1\u4e2d\u627e\u5230\u5e78\u798f\u7684\u7bc0\u594f\u3002\"\n          }\n        },\n        \"B\": {\n          title: \"\u5ac1\u597d\u4eba\",\n          description: \"\u4f60\u662f\u4e00\u500b\u60c5\u7dd2\u5316\u6bd4\u8f03\u56b4\u91cd\u7684\u4eba\uff0c\u5e73\u6642\u7684\u751f\u6d3b\u88e1\u4f60\u4e5f\u70ba\u60c5\u7dd2\u5316\u7684\u554f\u984c\u5403\u4e86\u4e0d\u5c11\u7684\u82e6\u3002\u4f46\u4f60\u662f\u5584\u826f\u7684\uff0c\u6d3b\u5f97\u96d6\u7136\u5f88\u7d2f\uff0c\u4f46\u4e5f\u5805\u6301\u4e86\u4e0b\u4f86\u3002\u6700\u5f8c\u7684\u5a5a\u59fb\uff0c\u5927\u6982\u6703\u627e\u4e00\u500b\u540c\u6a23\u5584\u826f\u7684\u4eba\u5427\uff0c\u611b\u4e0d\u611b\u7684\u4e0d\u597d\u8aaa\uff0c\u53ea\u8981\u4eba\u597d\u5c0d\u4f60\u7167\u9867\uff0c\u6709\u8cac\u4efb\u6709\u64d4\u7576\u7684\u8a71\uff0c\u4f60\u4e5f\u662f\u6703\u6162\u6162\u5730\u96e2\u4e0d\u958b\u4ed6\u7684\u5427\u3002\",\n          scores: {\n            \"\u611b\u60c5\u9700\u6c42\": 55,\n            \"\u4eba\u54c1\u9700\u6c42\": 90,\n            \"\u5b89\u5168\u611f\": 85,\n            \"\u52d9\u5be6\u7a0b\u5ea6\": 75\n          },\n          analysis: {\n            love: \"\u4f60\u66f4\u91cd\u8996\u5c0d\u65b9\u7684\u54c1\u683c\u52dd\u904e\u6fc0\u60c5\uff0c\u76f8\u4fe1\u65e5\u4e45\u751f\u60c5\u7684\u529b\u91cf\u3002\",\n            security: \"\u4f60\u9700\u8981\u4e00\u500b\u53ef\u9760\u7684\u4f34\u4fb6\uff0c\u7d66\u4f60\u7a69\u5b9a\u7684\u60c5\u611f\u652f\u6490\u548c\u751f\u6d3b\u4fdd\u969c\u3002\"\n          }\n        },\n        \"C\": {\n          title: \"\u5ac1\u611b\u4eba\",\n          description: \"\u4f60\u662f\u4e00\u500b\u5f88\u6709\u4e3b\u898b\u7684\u4eba\uff0c\u4f60\u5c0d\u5a5a\u59fb\u5c0d\u611b\u60c5\u4e5f\u6709\u81ea\u5df1\u7684\u770b\u6cd5\u3002\u4f60\u89ba\u5f97\u4e16\u754c\u4e0a\u597d\u7684\u4eba\u90a3\u9ebc\u591a\uff0c\u4f46\u672a\u5fc5\u81ea\u5df1\u90fd\u6703\u52d5\u5fc3\uff0c\u9084\u662f\u8981\u5ac1\u4e00\u500b\u81ea\u5df1\u611b\u7684\u4eba\u624d\u884c\u554a\uff0c\u5426\u5247\u7684\u8a71\uff0c\u4f60\u771f\u7684\u6c92\u6709\u8fa6\u6cd5\u8207\u4e4b\u5171\u5ea6\u4e00\u751f\u7684\u3002\u96d6\u7136\u4f60\u662f\u633a\u5167\u5fc3\u5f37\u5927\uff0c\u4f46\u9084\u662f\u60f3\u8981\u6709\u611b\u7684\u4eba\u4f86\u7167\u9867\u81ea\u5df1\uff0c\u65e5\u5b50\u624d\u6703\u904e\u5f97\u66f4\u597d\u554a\u3002\u5426\u5247\u65e5\u5b50\u904e\u4e0d\u597d\uff0c\u5e79\u561b\u8981\u7d50\u5a5a\uff1f\",\n          scores: {\n            \"\u611b\u60c5\u9700\u6c42\": 95,\n            \"\u4eba\u54c1\u9700\u6c42\": 65,\n            \"\u5b89\u5168\u611f\": 70,\n            \"\u52d9\u5be6\u7a0b\u5ea6\": 50\n          },\n          analysis: {\n            love: \"\u4f60\u662f\u6d6a\u6f2b\u4e3b\u7fa9\u8005\uff0c\u5805\u4fe1\u611b\u60c5\u662f\u5a5a\u59fb\u7684\u6838\u5fc3\uff0c\u6c92\u6709\u611b\u60c5\u7684\u5a5a\u59fb\u5c0d\u4f60\u4f86\u8aaa\u6beb\u7121\u610f\u7fa9\u3002\",\n            security: \"\u4f60\u9858\u610f\u70ba\u611b\u60c5\u627f\u64d4\u98a8\u96aa\uff0c\u76f8\u4fe1\u771f\u611b\u80fd\u514b\u670d\u4e00\u5207\u56f0\u96e3\u3002\"\n          }\n        },\n        \"D\": {\n          title: \"\u5ac1\u611b\u4eba\u4e5f\u662f\u597d\u4eba\",\n          description: \"\u4f60\u5c0d\u611b\u60c5\u7684\u8981\u6c42\u883b\u9ad8\u7684\uff0c\u5c0d\u5a5a\u59fb\u81ea\u7136\u4e5f\u4e0d\u6703\u96a8\u4fbf\u61c9\u4ed8\u4e86\u4e8b\u3002\u904e\u53bb\u7684\u65e5\u5b50\uff0c\u4f60\u7684\u611b\u60c5\u7e3d\u662f\u51fa\u73fe\u5404\u7a2e\u610f\u5916\uff0c\u53ef\u80fd\u4f60\u4e5f\u53d7\u904e\u50b7\uff0c\u6216\u8005\u7a7a\u6b61\u559c\u4e00\u5834\u904e\u3002\u4f46\u662f\u4f60\u5c0d\u672a\u4f86\u8d8a\u4f86\u8d8a\u5805\u5b9a\u4e86\uff0c\u4f60\u89ba\u5f97\u81ea\u5df1\u8981\u5ac1\u7684\u8a71\uff0c\u5c31\u4e00\u5b9a\u6703\u5ac1\u4e00\u500b\u81ea\u5df1\u611b\u7684\uff0c\u611b\u81ea\u5df1\u7684\uff0c\u4e26\u4e14\u4eba\u9084\u5f88\u597d\u7684\u3002\u9019\u6a23\u7684\u4eba\u96e3\u5c0b\uff0c\u4f46\u518d\u96e3\u4f60\u90fd\u8981\u627e\u5230\u3002\",\n          scores: {\n            \"\u611b\u60c5\u9700\u6c42\": 90,\n            \"\u4eba\u54c1\u9700\u6c42\": 85,\n            \"\u5b89\u5168\u611f\": 80,\n            \"\u52d9\u5be6\u7a0b\u5ea6\": 60\n          },\n          analysis: {\n            love: \"\u4f60\u8ffd\u6c42\u5b8c\u7f8e\u7684\u611b\u60c5\uff0c\u5e0c\u671b\u627e\u5230\u9748\u9b42\u4f34\u4fb6\uff0c\u65e2\u6709\u6fc0\u60c5\u53c8\u6709\u6df1\u5ea6\u3002\",\n            security: \"\u4f60\u76f8\u4fe1\u771f\u6b63\u7684\u5b89\u5168\u611f\u4f86\u81ea\u65bc\u4e92\u76f8\u6df1\u611b\u4e14\u54c1\u683c\u512a\u826f\u7684\u4f34\u4fb6\u3002\"\n          }\n        }\n      };\n      \n      \/\/ \u72c0\u614b\u7ba1\u7406\n      this.currentQuestionId = 1;\n      this.questionHistory = [];\n      this.chart = null;\n      \n      \/\/ \u5feb\u53d6DOM\u5143\u7d20\n      this.elements = {\n        sections: document.querySelectorAll('.quiz-section9'),\n        container: document.querySelector('[data-quiz=\"container\"]'),\n        progressBar: document.querySelector('[data-progress=\"bar\"]'),\n        progressCurrent: document.querySelector('[data-progress=\"current\"]'),\n        progressTotal: document.querySelector('[data-progress=\"total\"]'),\n        prevButton: document.querySelector('[data-action=\"prev-question9\"]'),\n        resultTitle: document.querySelector('[data-result=\"title\"]'),\n        resultDescription: document.querySelector('[data-result=\"description\"]'),\n        analysisLove: document.querySelector('[data-analysis=\"love\"]'),\n        analysisSecurity: document.querySelector('[data-analysis=\"security\"]')\n      };\n      \n      this.init();\n    }\n    \n    init() {\n      \/\/ \u7d81\u5b9a\u4e8b\u4ef6\n      document.querySelector('[data-action=\"start-quiz9\"]').addEventListener('click', () => this.startQuiz());\n      document.querySelector('[data-action=\"restart-quiz9\"]').addEventListener('click', () => this.restartQuiz());\n      this.elements.prevButton.addEventListener('click', () => this.previousQuestion());\n      \n      \/\/ \u8a2d\u7f6e\u7e3d\u984c\u6578\n      this.elements.progressTotal.textContent = this.questions.length;\n    }\n    \n    startQuiz() {\n      this.switchPage('quiz9');\n      this.renderQuestion(this.currentQuestionId);\n      this.scrollToTop();\n    }\n    \n    restartQuiz() {\n      this.currentQuestionId = 1;\n      this.questionHistory = [];\n      this.switchPage('intro9');\n      this.scrollToTop();\n    }\n    \n    switchPage(pageName) {\n      this.elements.sections.forEach(section => {\n        section.classList.remove('active');\n      });\n      \n      const targetSection = document.querySelector(`[data-page=\"${pageName}\"]`);\n      if (targetSection) {\n        setTimeout(() => {\n          targetSection.classList.add('active');\n        }, 50);\n      }\n    }\n    \n    renderQuestion(questionId) {\n      const question = this.questions.find(q => q.id === questionId);\n      if (!question) return;\n      \n      \/\/ \u66f4\u65b0\u9032\u5ea6\n      this.updateProgress();\n      \n      \/\/ \u6e32\u67d3\u554f\u984c - \u4f7f\u7528\u65b0\u7684\u5361\u7247\u8a2d\u8a08\n      const questionHtml = `\n        <div class=\"quiz-question9\">\n          <div class=\"card border-0 shadow-sm rounded-4 p-4 mb-4\">\n            <h3 class=\"fw-bold mb-0\" style=\"font-size: 22px; color: #1F2937;\">${question.question}<\/h3>\n          <\/div>\n          <div class=\"options-container9\">\n            ${question.options.map((option, index) => `\n              <div class=\"option-card9 card mb-3 rounded-3\" data-option-index=\"${index}\">\n                <div class=\"card-body d-flex align-items-center p-3\">\n                  <div class=\"option-indicator9 me-3\">\n                    <i class=\"bi bi-check-lg text-white\" style=\"display: none; font-size: 16px;\"><\/i>\n                  <\/div>\n                  <div class=\"option-text9 flex-grow-1\">\n                    ${option.text}\n                  <\/div>\n                <\/div>\n              <\/div>\n            `).join('')}\n          <\/div>\n        <\/div>\n      `;\n      \n      this.elements.container.innerHTML = questionHtml;\n      \n      \/\/ \u7d81\u5b9a\u9078\u9805\u9ede\u64ca\u4e8b\u4ef6\n      const optionCards = this.elements.container.querySelectorAll('.option-card9');\n      optionCards.forEach((card, index) => {\n        card.addEventListener('click', () => this.selectOption(question.options[index], index));\n      });\n      \n      \/\/ \u66f4\u65b0\u4e0a\u4e00\u984c\u6309\u9215\u986f\u793a\n      this.elements.prevButton.style.display = this.questionHistory.length > 0 ? 'inline-block' : 'none';\n    }\n    \n    selectOption(option, index) {\n      \/\/ \u6a19\u8a18\u9078\u4e2d\n      const optionCards = this.elements.container.querySelectorAll('.option-card9');\n      optionCards.forEach(card => card.classList.remove('selected'));\n      optionCards[index].classList.add('selected');\n      \n      \/\/ \u5ef6\u9072\u8655\u7406\u4e0b\u4e00\u6b65\n      setTimeout(() => {\n        if (option.result) {\n          this.showResult(option.result);\n        } else if (option.nextQuestion) {\n          this.questionHistory.push(this.currentQuestionId);\n          this.currentQuestionId = option.nextQuestion;\n          this.renderQuestion(this.currentQuestionId);\n        }\n      }, 300);\n    }\n    \n    previousQuestion() {\n      if (this.questionHistory.length > 0) {\n        this.currentQuestionId = this.questionHistory.pop();\n        this.renderQuestion(this.currentQuestionId);\n      }\n    }\n    \n    updateProgress() {\n      const progress = (this.currentQuestionId \/ this.questions.length) * 100;\n      this.elements.progressBar.style.width = `${progress}%`;\n      this.elements.progressCurrent.textContent = this.currentQuestionId;\n    }\n    \n    showResult(resultKey) {\n      const result = this.results[resultKey];\n      if (!result) return;\n      \n      \/\/ \u8a2d\u7f6e\u7d50\u679c\u5167\u5bb9\n      this.elements.resultTitle.textContent = result.title;\n      this.elements.resultDescription.textContent = result.description;\n      this.elements.analysisLove.textContent = result.analysis.love;\n      this.elements.analysisSecurity.textContent = result.analysis.security;\n      \n      \/\/ \u5207\u63db\u5230\u7d50\u679c\u9801\n      this.switchPage('result9');\n      this.scrollToTop();\n      \n      \/\/ \u5275\u5efa\u5716\u8868\n      setTimeout(() => {\n        this.createChart(result.scores);\n      }, 500);\n    }\n    \n    createChart(scores) {\n      const ctx = document.getElementById('resultChart9').getContext('2d');\n      \n      \/\/ \u92b7\u6bc0\u820a\u5716\u8868\n      if (this.chart) {\n        this.chart.destroy();\n      }\n      \n      \/\/ \u5275\u5efa\u65b0\u5716\u8868\n      this.chart = new Chart(ctx, {\n        type: 'radar',\n        data: {\n          labels: Object.keys(scores),\n          datasets: [{\n            label: '\u4f60\u7684\u5a5a\u59fb\u50f9\u503c\u89c0',\n            data: Object.values(scores),\n            backgroundColor: 'rgba(124, 58, 237, 0.15)',\n            borderColor: '#7C3AED',\n            borderWidth: 2,\n            pointBackgroundColor: '#7C3AED',\n            pointBorderColor: '#fff',\n            pointHoverBackgroundColor: '#fff',\n            pointHoverBorderColor: '#7C3AED',\n            pointRadius: 6,\n            pointHoverRadius: 8\n          }]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          plugins: {\n            legend: {\n              display: false\n            },\n            tooltip: {\n              backgroundColor: 'rgba(124, 58, 237, 0.9)',\n              titleFont: {\n                size: 16\n              },\n              bodyFont: {\n                size: 14\n              },\n              callbacks: {\n                label: function(context) {\n                  return context.label + ': ' + context.raw + '%';\n                }\n              }\n            }\n          },\n          scales: {\n            r: {\n              beginAtZero: true,\n              max: 100,\n              ticks: {\n                stepSize: 20,\n                font: {\n                  size: 14\n                }\n              },\n              pointLabels: {\n                font: {\n                  size: 18,\n                  weight: 'bold'\n                },\n                color: '#6B7280'\n              },\n              grid: {\n                color: 'rgba(124, 58, 237, 0.1)'\n              },\n              angleLines: {\n                color: 'rgba(124, 58, 237, 0.1)'\n              }\n            }\n          },\n          animation: {\n            duration: 1500,\n            easing: 'easeInOutQuart'\n          }\n        }\n      });\n    }\n    \n    scrollToTop() {\n      const targetElement = document.querySelector('.quiz-section9.active h2');\n      if (targetElement) {\n        targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      }\n    }\n  }\n  \n  \/\/ \u521d\u59cb\u5316\u6e2c\u9a57\n  document.addEventListener('DOMContentLoaded', function() {\n    new MarriageQuiz();\n  });\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u5ac1\u7684\u4eba\uff0c\u4eba\u597d\u5c31\u884c\u4e86\uff0c\u80fd\u5bf9\u81ea\u5df1\u597d\u5c31\u53ef\u4ee5\u4e86\u3002\u4f46\u662f\u4e5f\u6709\u5973\u6027\u8ba4\u4e3a\uff0c\u8fd8\u662f\u8981\u5ac1\u4e00\u4e2a\u81ea\u5df1\u7231\u7684\u4eba\u3002\u90a3\u4e48\uff0c\u4f60\u4f1a\u5ac1\u7ed9\u597d\u4eba\u8fd8\u662f\u7231\u4eba\uff1f<\/p>","protected":false},"author":19,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"narrow-width-container","site-content-style":"unboxed","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"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":[178,179],"tags":[],"class_list":["post-2488","post","type-post","status-publish","format-standard","hentry","category-love","category-marriage"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2488","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=2488"}],"version-history":[{"count":4,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2488\/revisions"}],"predecessor-version":[{"id":10506,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2488\/revisions\/10506"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2488"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2488"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2488"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}