{"id":2398,"date":"2023-10-07T09:14:41","date_gmt":"2023-10-07T01:14:41","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2398"},"modified":"2025-05-11T03:07:22","modified_gmt":"2025-05-10T19:07:22","slug":"happiness-or-suffering-after-marriage","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/happiness-or-suffering-after-marriage","title":{"rendered":"\u7ebf\u4e0a\u514d\u8d39\u5c0f\u6d4b\u9a8c\uff1a\u4f60\u5a5a\u540e\u4f1a\u5e78\u798fOR\u714e\u71ac"},"content":{"rendered":"<!-- \u5728\u7ebf\u6d4b\u9a8c\u7cfb\u7edf - \u5a5a\u5f8c\u5e78\u798f\u6e2c\u9a57 -->\n<!-- HTML \u90e8\u5206 -->\n<div class=\"mpt-container\" id=\"marriage-personality-test\">\n  <!-- \u5f15\u5bfc\u9875 -->\n  <section class=\"mpt-intro-page\" id=\"mpt-intro\">\n    <header>\n      <h2>\u4f60\u5a5a\u540e\u66f4\u5e78\u798for \u714e\u71ac\uff1f<\/h2>\n      <p class=\"mpt-subtitle\">\u4e86\u89e3\u4f60\u7684\u5a5a\u59fb\u5e78\u798f\u6307\u6570<\/p>\n    <\/header>\n    \n    <div class=\"mpt-intro-content\">\n      <div class=\"mpt-intro-image\">\n        <div class=\"mpt-icon\">\n          <svg viewbox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"var(--mpt-primary-light)\" \/>\n            <path d=\"M50 20 C 30 40, 70 40, 50 20 Z\" fill=\"var(--mpt-accent)\" \/>\n            <path d=\"M35 45 C 35 60, 65 60, 65 45\" stroke=\"var(--mpt-primary)\" stroke-width=\"3\" fill=\"transparent\" \/>\n          <\/svg>\n        <\/div>\n      <\/div>\n      \n      <article class=\"mpt-intro-text\">\n        <p>\u6bcf\u4e2a\u4eba\u7684\u5a5a\u59fb\u90fd\u4e0d\u4e00\u6837\uff0c\u9047\u5230\u7684\u4eba\u4e0d\u540c\uff0c\u5e26\u6765\u7684\u611f\u53d7\u4e5f\u4e0d\u540c\u3002\u6709\u7684\u4eba\u89c9\u5f97\u81ea\u5df1\u5728\u5a5a\u59fb\u5f53\u4e2d\u4f1a\u8fc7\u5f97\u5341\u5206\u5e78\u798f\uff0c\u800c\u6709\u7684\u4eba\u89c9\u5f97\u5a5a\u540e\u6bcf\u4e00\u5206\u949f\u90fd\u662f\u714e\u71ac\u3002<\/p>\n        <p>\u4e0d\u77e5\u9053\u4f60\u66f4\u8d8b\u5411\u4e8e\u54ea\u4e00\u79cd\uff1f\u4e0d\u59a8\u6765\u6d4b\u4e00\u4e0b\u5427\u3002<\/p>\n        \n        <div class=\"mpt-features\">\n          <div class=\"mpt-feature\">\n            <span class=\"mpt-feature-icon\">\u23f1\ufe0f<\/span>\n            <span class=\"mpt-feature-text\">\u4ec5\u97002 \u5206\u949f<\/span>\n          <\/div>\n          <div class=\"mpt-feature\">\n            <span class=\"mpt-feature-icon\">\ud83d\udd0d<\/span>\n            <span class=\"mpt-feature-text\">\u7cbe\u51c6\u5206\u6790<\/span>\n          <\/div>\n          <div class=\"mpt-feature\">\n            <span class=\"mpt-feature-icon\">\ud83d\udcca<\/span>\n            <span class=\"mpt-feature-text\">\u89c6\u89c9\u5316\u7ed3\u679c<\/span>\n          <\/div>\n        <\/div>\n      <\/article>\n    <\/div>\n    \n    <div class=\"mpt-intro-cta\">\n      <button class=\"mpt-button mpt-start-btn\" id=\"mpt-start-test\">\u5f00\u59cb\u6d4b\u9a8c<\/button>\n    <\/div>\n  <\/section>\n\n  <!-- \u6d4b\u9a8c\u9875 -->\n  <section class=\"mpt-quiz-page\" id=\"mpt-quiz\" style=\"display: none;\">\n    <header>\n      <h2>\u5a5a\u59fb\u5e78\u798f\u5ea6\u6d4b\u9a8c<\/h2>\n    <\/header>\n    \n    <div class=\"mpt-progress-container\">\n      <div class=\"mpt-progress-bar\">\n        <div class=\"mpt-progress-fill\" id=\"mpt-progress\"><\/div>\n      <\/div>\n      <div class=\"mpt-progress-text\" id=\"mpt-progress-text\">\u95ee\u98981\/10<\/div>\n    <\/div>\n    \n    <div class=\"mpt-questions\" id=\"mpt-questions-container\">\n      <!-- \u95ee\u9898\u5c06\u901a\u8fc7JavaScript\u52a8\u6001\u751f\u6210 -->\n    <\/div>\n    \n    <div class=\"mpt-navigation\">\n      <button class=\"mpt-button mpt-secondary-btn\" id=\"mpt-prev-btn\" style=\"display: none;\">\u4e0a\u4e00\u9898<\/button>\n    <\/div>\n  <\/section>\n\n  <!-- \u7ed3\u679c\u9875 -->\n  <section class=\"mpt-result-page\" id=\"mpt-result\" style=\"display: none;\">\n    <header>\n      <h2>\u4f60\u7684\u5a5a\u59fb\u5e78\u798f\u6307\u6570<\/h2>\n    <\/header>\n    \n    <div class=\"mpt-result-container\">\n      <div class=\"mpt-result-summary\" id=\"mpt-result-summary\">\n        <!-- \u7ed3\u679c\u6458\u8981\u5c06\u901a\u8fc7JavaScript\u52a8\u6001\u751f\u6210 -->\n      <\/div>\n      \n      <div class=\"mpt-chart-container\">\n        <canvas id=\"mpt-result-chart\"><\/canvas>\n      <\/div>\n      \n      <div class=\"mpt-result-detail\" id=\"mpt-result-detail\">\n        <!-- \u8be6\u7ec6\u7ed3\u679c\u5c06\u901a\u8fc7JavaScript\u52a8\u6001\u751f\u6210 -->\n      <\/div>\n    <\/div>\n    \n    <div class=\"mpt-result-cta\">\n      <button class=\"mpt-button\" id=\"mpt-restart\">\u91cd\u65b0\u6d4b\u8bd5<\/button>\n    <\/div>\n  <\/section>\n<\/div>\n\n<!-- CSS \u90e8\u5206 -->\n<style>\n\/* \u53d8\u91cf\u5b9a\u4e49 *\/\n:root {\n  --mpt-primary: #4a6fa5;\n  --mpt-primary-light: #c5d5ea;\n  --mpt-primary-dark: #365785;\n  --mpt-secondary: #e27d60;\n  --mpt-accent: #e8a87c;\n  --mpt-background: #f8f9fa;\n  --mpt-text: #333;\n  --mpt-text-light: #666;\n  --mpt-border: #ddd;\n  --mpt-shadow: rgba(0, 0, 0, 0.1);\n  --mpt-success: #6bbd6e;\n  --mpt-warning: #f4d03f;\n  --mpt-danger: #e74c3c;\n  --mpt-white: #fff;\n  --mpt-gray-100: #f8f9fa;\n  --mpt-gray-200: #e9ecef;\n  --mpt-gray-300: #dee2e6;\n  --mpt-gray-400: #ced4da;\n  --mpt-gray-500: #adb5bd;\n  --mpt-font-main: -apple-system, BlinkMacSystemFont, \"PingFang TC\", \"Microsoft JhengHei\", \"\u5fae\u8edf\u6b63\u9ed1\u9ad4\", \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n}\n\n\/* \u91cd\u7f6e\u548c\u57fa\u7840\u6837\u5f0f *\/\n.mpt-container * {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n.mpt-container {\n  font-family: var(--mpt-font-main);\n  color: var(--mpt-text);\n  background-color: var(--mpt-background);\n  line-height: 1.6;\n  font-size: 16px;\n  max-width: 800px;\n  margin: 2rem auto;\n  padding: 2rem;\n  border-radius: 16px;\n  box-shadow: 0 8px 24px var(--mpt-shadow);\n}\n\n\/* \u6392\u7248 *\/\n.mpt-container h2 {\n  font-size: 32px;\n  text-align: center;\n  margin-bottom: 1.5rem;\n  color: var(--mpt-primary-dark);\n}\n\n.mpt-container h3 {\n  font-size: 22px;\n  font-weight: bold;\n  margin-bottom: 1rem;\n}\n\n.mpt-container p {\n  margin-bottom: 1rem;\n  font-size: 18px;\n}\n\n\/* \u6309\u94ae\u6837\u5f0f *\/\n.mpt-button {\n  display: inline-block;\n  padding: 0.875rem 2rem;\n  font-size: 18px;\n  font-weight: 600;\n  text-align: center;\n  text-decoration: none;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.3s ease;\n  background: linear-gradient(135deg, var(--mpt-primary), var(--mpt-primary-dark));\n  color: var(--mpt-white);\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  min-width: 160px;\n  min-height: 48px;\n}\n\n.mpt-button:hover, .mpt-button:focus {\n  background: linear-gradient(135deg, var(--mpt-primary-dark), var(--mpt-primary));\n  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);\n  transform: translateY(-2px);\n}\n\n.mpt-button:active {\n  transform: translateY(0);\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.mpt-secondary-btn {\n  background: linear-gradient(135deg, var(--mpt-gray-300), var(--mpt-gray-400));\n  color: var(--mpt-text);\n}\n\n.mpt-secondary-btn:hover, .mpt-secondary-btn:focus {\n  background: linear-gradient(135deg, var(--mpt-gray-400), var(--mpt-gray-500));\n}\n\n\/* \u5f15\u5bfc\u9875\u6837\u5f0f *\/\n.mpt-intro-page {\n  display: flex;\n  flex-direction: column;\n  gap: 2rem;\n}\n\n.mpt-subtitle {\n  font-size: 20px;\n  color: var(--mpt-text-light);\n  text-align: center;\n  margin-top: -0.5rem;\n}\n\n.mpt-intro-content {\n  display: flex;\n  flex-direction: column;\n  gap: 2rem;\n}\n\n@media (min-width: 768px) {\n  .mpt-intro-content {\n    flex-direction: row;\n    align-items: center;\n  }\n  \n  .mpt-intro-image {\n    flex: 1;\n  }\n  \n  .mpt-intro-text {\n    flex: 2;\n  }\n}\n\n.mpt-intro-image {\n  display: flex;\n  justify-content: center;\n}\n\n.mpt-icon {\n  width: 180px;\n  height: 180px;\n  animation: float 6s ease-in-out infinite;\n}\n\n@keyframes float {\n  0% {\n    transform: translateY(0px);\n  }\n  50% {\n    transform: translateY(-15px);\n  }\n  100% {\n    transform: translateY(0px);\n  }\n}\n\n.mpt-features {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n  margin-top: 1.5rem;\n}\n\n.mpt-feature {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  background-color: var(--mpt-primary-light);\n  padding: 0.5rem 1rem;\n  border-radius: 50px;\n  font-size: 16px;\n}\n\n.mpt-feature-icon {\n  font-size: 20px;\n}\n\n.mpt-intro-cta {\n  display: flex;\n  justify-content: center;\n  margin-top: 1rem;\n}\n\n\/* \u6d4b\u9a8c\u9875\u6837\u5f0f *\/\n.mpt-quiz-page {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n}\n\n.mpt-progress-container {\n  margin-bottom: 1rem;\n}\n\n.mpt-progress-bar {\n  height: 8px;\n  background-color: var(--mpt-gray-300);\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.mpt-progress-fill {\n  height: 100%;\n  background: linear-gradient(to right, var(--mpt-primary-light), var(--mpt-primary));\n  width: 10%;\n  transition: width 0.3s ease;\n}\n\n.mpt-progress-text {\n  text-align: center;\n  font-size: 16px;\n  color: var(--mpt-text-light);\n  margin-top: 0.5rem;\n}\n\n.mpt-questions {\n  min-height: 300px;\n}\n\n.mpt-question {\n  opacity: 0;\n  transform: translateY(20px);\n  transition: opacity 0.3s ease, transform 0.3s ease;\n}\n\n.mpt-question.active {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.mpt-options {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  margin-top: 1.5rem;\n}\n\n.mpt-option {\n  padding: 1rem 1.5rem;\n  border: 2px solid var(--mpt-gray-300);\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  font-size: 18px;\n  display: flex;\n  align-items: center;\n}\n\n.mpt-option:hover {\n  border-color: var(--mpt-primary);\n  background-color: var(--mpt-primary-light);\n  color: var(--mpt-primary-dark);\n}\n\n.mpt-option.selected {\n  border-color: var(--mpt-primary);\n  background-color: var(--mpt-primary-light);\n  color: var(--mpt-primary-dark);\n}\n\n.mpt-option-radio {\n  position: relative;\n  width: 24px;\n  height: 24px;\n  border: 2px solid var(--mpt-gray-400);\n  border-radius: 50%;\n  margin-right: 12px;\n  transition: all 0.2s ease;\n}\n\n.mpt-option.selected .mpt-option-radio {\n  border-color: var(--mpt-primary);\n}\n\n.mpt-option.selected .mpt-option-radio:after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 12px;\n  height: 12px;\n  background-color: var(--mpt-primary);\n  border-radius: 50%;\n}\n\n.mpt-option-text {\n  flex: 1;\n}\n\n.mpt-navigation {\n  display: flex;\n  justify-content: center;\n  margin-top: 1.5rem;\n}\n\n\/* \u7ed3\u679c\u9875\u6837\u5f0f *\/\n.mpt-result-page {\n  display: flex;\n  flex-direction: column;\n  gap: 2rem;\n}\n\n.mpt-result-container {\n  display: flex;\n  flex-direction: column;\n  gap: 2rem;\n}\n\n.mpt-result-summary {\n  background-color: var(--mpt-primary-light);\n  padding: 1.5rem;\n  border-radius: 12px;\n  text-align: center;\n}\n\n.mpt-result-title {\n  font-size: 28px;\n  font-weight: bold;\n  color: var(--mpt-primary-dark);\n  margin-bottom: 1rem;\n}\n\n.mpt-chart-container {\n  width: 100%;\n  max-width: 500px;\n  margin: 0 auto;\n  padding: 1rem;\n}\n\n.mpt-result-detail {\n  background-color: var(--mpt-white);\n  padding: 1.5rem;\n  border-radius: 12px;\n  box-shadow: 0 4px 8px var(--mpt-shadow);\n}\n\n.mpt-result-cta {\n  display: flex;\n  justify-content: center;\n  margin-top: 1rem;\n}\n\n\/* \u54cd\u5e94\u5f0f\u8c03\u6574 *\/\n@media (max-width: 767px) {\n  .mpt-container {\n    padding: 1.5rem;\n    margin: 1rem;\n  }\n  \n  .mpt-container h2 {\n    font-size: 28px;\n  }\n  \n  .mpt-icon {\n    width: 150px;\n    height: 150px;\n  }\n  \n  .mpt-option {\n    padding: 0.875rem 1.25rem;\n  }\n}\n<\/style>\n\n<!-- JavaScript \u90e8\u5206 -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n<script>\n\/\/ \u4f7f\u7528IIFE\u6a21\u5f0f\u5c01\u88c5\u4ee3\u7801\uff0c\u907f\u514d\u5168\u5c40\u53d8\u91cf\u6c61\u67d3\n(function() {\n  'use strict';\n  \n  \/\/ \u5a5a\u59fb\u5e78\u798f\u6d4b\u9a8c\u6a21\u5757\n  const MarriagePersonalityTest = (function() {\n    \/\/ \u79c1\u6709\u53d8\u91cf\n    const questions = [\n      {\n        id: 1,\n        text: '\u4f60\u89ba\u5f97\u6200\u611b\u4e2d\u7684\u4f60\u638c\u63a7\u6b32\u5f88\u5f37\u55ce\uff1f',\n        options: [\n          { id: 'a', text: '\u662f\u7684', nextQuestion: 2 },\n          { id: 'b', text: '\u4e0d\u662f', nextQuestion: 3 },\n          { id: 'c', text: '\u4e00\u822c', nextQuestion: 4 }\n        ]\n      },\n      {\n        id: 2,\n        text: '\u4f60\u770b\u4eba\u5f88\u6e96\uff0c\u5e38\u5e38\u80fd\u77ad\u89e3\u5225\u4eba\u5167\u5fc3\u7684\u4eba\u55ce\uff1f',\n        options: [\n          { id: 'a', text: '\u662f\u7684', nextQuestion: 3 },\n          { id: 'b', text: '\u4e0d\u662f', nextQuestion: 4 },\n          { id: 'c', text: '\u4e00\u822c', nextQuestion: 5 }\n        ]\n      },\n      {\n        id: 3,\n        text: '\u4f60\u5e0c\u671b\u81ea\u5df1\u7684\u914d\u5076\u662f\u81ea\u5df1\u4e3b\u52d5\u8ffd\u6c42\u7684\u55ce\uff1f',\n        options: [\n          { id: 'a', text: '\u662f\u7684', nextQuestion: 4 },\n          { id: 'b', text: '\u4e0d\u662f', nextQuestion: 5 },\n          { id: 'c', text: '\u770b\u60c5\u6cc1', nextQuestion: 6 }\n        ]\n      },\n      {\n        id: 4,\n        text: '\u5c0d\u8457\u5225\u4eba\u7684\u7a81\u5982\u8972\u4f86\u7684\u8868\u767d\uff0c\u4f60\u6703\u7b2c\u4e00\u53cd\u61c9\u662f\u62d2\u7d55\u5c0d\u65b9\u55ce\uff1f',\n        options: [\n          { id: 'a', text: '\u662f\u7684', nextQuestion: 5 },\n          { id: 'b', text: '\u4e0d\u662f', nextQuestion: 6 },\n          { id: 'c', text: '\u4e0d\u77e5\u9053', nextQuestion: 7 }\n        ]\n      },\n      {\n        id: 5,\n        text: '\u4f60\u4e00\u5411\u5c0d\u5a5a\u59fb\u4e0d\u62b1\u4ec0\u9ebc\u5e0c\u671b\u55ce\uff1f',\n        options: [\n          { id: 'a', text: '\u662f\u7684', nextQuestion: 6 },\n          { id: 'b', text: '\u4e0d\u662f', nextQuestion: 7 },\n          { id: 'c', text: '\u4e00\u822c', nextQuestion: 8 }\n        ]\n      },\n      {\n        id: 6,\n        text: '\u5982\u679c\u8b93\u5152\u5b50\u5b78\u7fd2\u4e00\u7a2e\u6a02\u5668\uff0c\u4f60\u6703\u9078\u64c7\uff1f',\n        options: [\n          { id: 'a', text: '\u7b1b\u5b50', nextQuestion: 7 },\n          { id: 'b', text: '\u92fc\u7434', nextQuestion: 8 },\n          { id: 'c', text: '\u5c0f\u63d0\u7434', result: 'A' }\n        ]\n      },\n      {\n        id: 7,\n        text: '\u4f60\u81ea\u6211\u8a55\u50f9\uff0c\u81ea\u5df1\u7684\u7570\u6027\u7de3\u597d\u55ce\uff1f',\n        options: [\n          { id: 'a', text: '\u5f88\u597d', nextQuestion: 8 },\n          { id: 'b', text: '\u4e00\u822c', nextQuestion: 9 },\n          { id: 'c', text: '\u5f88\u5dee', nextQuestion: 10 }\n        ]\n      },\n      {\n        id: 8,\n        text: '\u4f60\u559c\u6b61\u4e0b\u9762\u54ea\u4e00\u7a2e\u5f62\u72c0\u7684\u8033\u589c\uff1f',\n        options: [\n          { id: 'a', text: '\u661f\u5f62', nextQuestion: 9 },\n          { id: 'b', text: '\u83f1\u5f62', result: 'A' },\n          { id: 'c', text: '\u7403\u72c0', result: 'B' }\n        ]\n      },\n      {\n        id: 9,\n        text: '\u4f60\u66f4\u5e0c\u671b\u81ea\u5df1\u73fe\u5728\u7684\u54ea\u7a2e\u904b\u6c23\u6700\u597d\uff1f',\n        options: [\n          { id: 'a', text: '\u4e8b\u696d\u904b', result: 'C' },\n          { id: 'b', text: '\u9322\u8ca1\u904b', result: 'D' },\n          { id: 'c', text: '\u611b\u60c5\u904b', result: 'A' }\n        ]\n      },\n      {\n        id: 10,\n        text: '\u61c9\u9080\u51fa\u5e2d\u67d0\u500b\u524d\u8f29\u7684\u5bb6\u5ead\u5bb4\uff0c\u4f60\u6703\u5750\u5728\u54ea\u500b\u4f4d\u7f6e\uff1f',\n        options: [\n          { id: 'a', text: '\u96e2\u4e3b\u4eba\u8fd1\u4e00\u9ede', result: 'B' },\n          { id: 'b', text: '\u96e2\u4e3b\u4eba\u9060\u4e00\u9ede', result: 'C' },\n          { id: 'c', text: '\u9069\u4e2d\u4f4d\u7f6e', result: 'D' }\n        ]\n      }\n    ];\n    \n    const results = {\n      'A': {\n        title: '\u66f4\u52a0\u5e78\u798f',\n        description: '\u4eba\u7e3d\u662f\u8981\u6709\u9ede\u5152\u76fc\u982d\uff0c\u6709\u9ede\u5152\u8ffd\u6c42\u7684\uff0c\u5a5a\u59fb\u4e2d\u4e5f\u662f\u5982\u6b64\uff0c\u5982\u679c\u5a5a\u59fb\u904e\u5f97\u4e0d\u5e78\u798f\uff0c\u90a3\u9ebc\u7d50\u5a5a\u662f\u7528\u4f86\u5e79\u4ec0\u9ebc\u7684\u5462\uff1f\u7d14\u7cb9\u70ba\u4e86\u9003\u907f\u4e16\u4eba\u7684\u773c\u5149\uff0c\u5c31\u628a\u81ea\u5df1\u63a8\u9032\u706b\u5751\u88e1\u55ce\uff1f\u4f60\u662f\u4e0d\u6703\u7684\u3002\u6240\u4ee5\u4f60\u7684\u5a5a\u5f8c\u751f\u6d3b\uff0c\u4e00\u5b9a\u662f\u6703\u5e78\u798f\u7684\uff0c\u5426\u5247\u4f60\u4e00\u5b9a\u4e0d\u6703\u59d4\u5c48\u81ea\u5df1\u9078\u64c7\u5c07\u5c31\u904e\u4e00\u8f29\u5b50\u3002\u4f60\u4e00\u5b9a\u6703\u8df3\u51fa\u706b\u5751\u627e\u5230\u5e78\u798f\u3002',\n        stats: {\n          happiness: 90,\n          compatibility: 85,\n          communication: 80,\n          understanding: 75\n        }\n      },\n      'B': {\n        title: '\u66f4\u52a0\u714e\u71ac',\n        description: '\u4e5f\u8a31\u6709\u7684\u4eba\u6703\u8aaa\uff0c\u5982\u679c\u89ba\u5f97\u5a5a\u59fb\u4e2d\u5f88\u714e\u71ac\uff0c\u90a3\u9ebc\u5206\u624b\u96e2\u5a5a\u5c31\u597d\u5566\uff0c\u4e00\u500b\u4eba\u904e\u6703\u66f4\u52a0\u5e78\u798f\uff0c\u70ba\u4ec0\u9ebc\u8981\u59d4\u5c48\u81ea\u5df1\uff01\u4f46\u662f\u6709\u6642\u5019\u70ba\u4e86\u5b69\u5b50\u4e4b\u985e\u7684\uff0c\u4e0d\u5f97\u4e0d\u59d4\u5c48\u81ea\u5df1\u3002\u800c\u4f60\u5c31\u662f\u9019\u4e00\u985e\u578b\u7684\u4eba\uff0c\u4f60\u592a\u6709\u8cac\u4efb\u611f\u4e86\uff0c\u4e5f\u60f3\u76e1\u529b\u7d66\u5b69\u5b50\u5275\u9020\u597d\u5b8c\u6574\u7684\u5bb6\u5ead\uff0c\u6240\u4ee5\u4e0d\u5f97\u4e0d\u59d4\u5c48\u81ea\u5df1\uff0c\u904e\u8457\u714e\u71ac\u7684\u5a5a\u59fb\u751f\u6d3b\u3002',\n        stats: {\n          happiness: 30,\n          compatibility: 35,\n          communication: 40,\n          understanding: 45\n        }\n      },\n      'C': {\n        title: '\u4e00\u534a\u5e78\u798f\u4e00\u534a\u714e\u71ac',\n        description: '\u5f88\u591a\u4eba\u7684\u5a5a\u59fb\u7576\u4e2d\uff0c\u90fd\u5c11\u4e0d\u4e86\u6703\u722d\u5435\uff0c\u800c\u5f88\u591a\u4eba\u4e5f\u89ba\u5f97\uff0c\u5a5a\u59fb\u751f\u6d3b\u7576\u4e2d\uff0c\u6709\u6642\u5019\u4e5f\u662f\u6709\u5e78\u798f\u611f\u7684\u3002\u6240\u4ee5\u751f\u6d3b\u5c31\u662f\u5982\u6b64\uff0c\u65e2\u6709\u5e78\u798f\uff0c\u4e5f\u6703\u6709\u714e\u71ac\u7684\u6642\u5149\u3002\u800c\u4f60\u672a\u4f86\u4e5f\u662f\u9019\u6a23\uff0c\u6709\u8ddf\u611b\u4eba\u611f\u60c5\u5f88\u597d\uff0c\u80fd\u904e\u5f97\u5f88\u4e0d\u932f\u7684\u6642\u5149\uff0c\u4f46\u5169\u500b\u4eba\u7684\u751f\u6d3b\uff0c\u4e5f\u6703\u6709\u722d\u5435\u77db\u76fe\uff0c\u4e5f\u6703\u6709\u96e3\u71ac\u7684\u6642\u5019\uff0c\u5404\u5360\u4e00\u534a\u3002',\n        stats: {\n          happiness: 50,\n          compatibility: 55,\n          communication: 45,\n          understanding: 60\n        }\n      },\n      'D': {\n        title: '\u4e03\u6210\u5e78\u798f\uff0c\u4e09\u6210\u714e\u71ac',\n        description: '\u96d6\u7136\u6bd4\u8d77\u90a3\u4e9b\u5a5a\u59fb\u751f\u6d3b\u4e2d\uff0c\u53ea\u6709\u5e78\u798f\uff0c\u6c92\u6709\u4ec0\u9ebc\u96e3\u71ac\u7684\u6642\u5149\u7684\u4eba\uff0c\u4f60\u9084\u6709\u4e09\u5206\u7684\u714e\u71ac\uff0c\u4f46\u662f\u6bd4\u8d77\u5a5a\u59fb\u4e2d\u8655\u8655\u90fd\u662f\u78e8\u96e3\u8207\u8f9b\u82e6\uff0c\u8655\u8655\u90fd\u714e\u71ac\u7684\u4eba\uff0c\u4f60\u53c8\u7b97\u662f\u6bd4\u8f03\u5e78\u798f\u7684\u3002\u5e78\u798f\u6642\u5149\u4f60\u5f88\u73cd\u60dc\uff0c\u96e3\u71ac\u7684\u82e6\u65e5\u5b50\uff0c\u4e5f\u597d\u5728\u4f60\u4e0d\u6703\u8f15\u6613\u653e\u68c4\u3002\u6240\u4ee5\u6162\u6162\u7684\uff0c\u4f60\u6703\u8d8a\u4f86\u8d8a\u591a\u7684\u5e78\u798f\uff0c\u4f60\u503c\u5f97\u64c1\u6709\u3002',\n        stats: {\n          happiness: 70,\n          compatibility: 65,\n          communication: 60,\n          understanding: 75\n        }\n      }\n    };\n    \n    \/\/ \u79c1\u6709\u53d8\u91cf - DOM \u5143\u7d20\n    let currentQuestionIndex = 0;\n    let userAnswers = [];\n    let userResult = null;\n    \n    \/\/ DOM \u5143\u7d20\n    const introPage = document.getElementById('mpt-intro');\n    const quizPage = document.getElementById('mpt-quiz');\n    const resultPage = document.getElementById('mpt-result');\n    const startButton = document.getElementById('mpt-start-test');\n    const questionsContainer = document.getElementById('mpt-questions-container');\n    const progressBar = document.getElementById('mpt-progress');\n    const progressText = document.getElementById('mpt-progress-text');\n    const prevButton = document.getElementById('mpt-prev-btn');\n    const resultSummary = document.getElementById('mpt-result-summary');\n    const resultDetail = document.getElementById('mpt-result-detail');\n    const restartButton = document.getElementById('mpt-restart');\n    \n    \/\/ \u521d\u59cb\u5316\n    function init() {\n      bindEvents();\n    }\n    \n    \/\/ \u7ed1\u5b9a\u4e8b\u4ef6\n    function bindEvents() {\n      \/\/ \u5f00\u59cb\u6d4b\u9a8c\n      startButton.addEventListener('click', startQuiz);\n      \n      \/\/ \u4e0a\u4e00\u9898\n      prevButton.addEventListener('click', showPreviousQuestion);\n      \n      \/\/ \u91cd\u65b0\u5f00\u59cb\n      restartButton.addEventListener('click', restart);\n      \n      \/\/ \u9009\u9879\u70b9\u51fb\u59d4\u6258\n      questionsContainer.addEventListener('click', handleOptionClick);\n    }\n    \n    \/\/ \u8282\u6d41\u51fd\u6570\n    function throttle(func, delay) {\n      let lastCall = 0;\n      return function(...args) {\n        const now = new Date().getTime();\n        if (now - lastCall < delay) {\n          return;\n        }\n        lastCall = now;\n        return func.apply(this, args);\n      };\n    }\n    \n    \/\/ \u5f00\u59cb\u6d4b\u9a8c\n    function startQuiz() {\n      \/\/ \u6eda\u52a8\u5230\u9876\u90e8\n      window.scrollTo({\n        top: 0,\n        behavior: 'smooth'\n      });\n      \n      \/\/ \u5207\u6362\u9875\u9762\n      introPage.style.display = 'none';\n      quizPage.style.display = 'block';\n      \n      \/\/ \u521d\u59cb\u5316\u6d4b\u9a8c\u72b6\u6001\n      currentQuestionIndex = 0;\n      userAnswers = [];\n      \n      \/\/ \u663e\u793a\u7b2c\u4e00\u9898\n      showQuestion(0);\n    }\n    \n    \/\/ \u663e\u793a\u95ee\u9898\n    function showQuestion(index) {\n      \/\/ \u83b7\u53d6\u5f53\u524d\u95ee\u9898\n      const question = getQuestionById(index + 1);\n      if (!question) return;\n      \n      \/\/ \u66f4\u65b0\u8fdb\u5ea6\u6761\n      updateProgress(index);\n      \n      \/\/ \u751f\u6210\u95ee\u9898 HTML\n      const questionHTML = createQuestionHTML(question);\n      \n      \/\/ \u66f4\u65b0\u95ee\u9898\u5bb9\u5668\n      questionsContainer.innerHTML = questionHTML;\n      \n      \/\/ \u6dfb\u52a0 active \u7c7b\u4ee5\u89e6\u53d1\u52a8\u753b\n      setTimeout(() => {\n        const questionElement = document.querySelector('.mpt-question');\n        if (questionElement) {\n          questionElement.classList.add('active');\n        }\n      }, 10);\n      \n      \/\/ \u663e\u793a\/\u9690\u85cf\u4e0a\u4e00\u9898\u6309\u94ae\n      prevButton.style.display = index > 0 ? 'block' : 'none';\n      \n      \/\/ \u5982\u679c\u6709\u4e4b\u524d\u7684\u7b54\u6848\uff0c\u9009\u4e2d\u5bf9\u5e94\u9009\u9879\n      if (userAnswers[index]) {\n        const selectedOption = document.querySelector(`.mpt-option[data-option=\"${userAnswers[index].optionId}\"]`);\n        if (selectedOption) {\n          selectedOption.classList.add('selected');\n        }\n      }\n      \n      \/\/ \u6eda\u52a8\u5230\u95ee\u9898\u9876\u90e8\n      const quizPageTop = quizPage.getBoundingClientRect().top + window.pageYOffset - 20;\n      window.scrollTo({\n        top: quizPageTop,\n        behavior: 'smooth'\n      });\n    }\n    \n    \/\/ \u521b\u5efa\u95ee\u9898 HTML\n    function createQuestionHTML(question) {\n      const optionsHTML = question.options.map(option => `\n        <div class=\"mpt-option\" data-option=\"${option.id}\" data-next=\"${option.nextQuestion || ''}\" data-result=\"${option.result || ''}\">\n          <div class=\"mpt-option-radio\"><\/div>\n          <div class=\"mpt-option-text\">${option.text}<\/div>\n        <\/div>\n      `).join('');\n      \n      return `\n        <div class=\"mpt-question\" data-question=\"${question.id}\">\n          <h3>${question.text}<\/h3>\n          <div class=\"mpt-options\">\n            ${optionsHTML}\n          <\/div>\n        <\/div>\n      `;\n    }\n    \n    \/\/ \u66f4\u65b0\u8fdb\u5ea6\u6761\n    function updateProgress(index) {\n      const totalQuestions = 10; \/\/ \u6700\u591a\u9700\u8981\u56de\u7b5410\u9898\n      const progress = ((index + 1) \/ totalQuestions) * 100;\n      progressBar.style.width = `${progress}%`;\n      progressText.textContent = `\u554f\u984c ${index + 1}\/${totalQuestions}`;\n    }\n    \n    \/\/ \u5904\u7406\u9009\u9879\u70b9\u51fb\n    const handleOptionClick = throttle(function(event) {\n      const option = event.target.closest('.mpt-option');\n      if (!option) return;\n      \n      \/\/ \u5982\u679c\u5df2\u7ecf\u9009\u4e2d\uff0c\u4e0d\u505a\u4efb\u4f55\u5904\u7406\n      if (option.classList.contains('selected')) return;\n      \n      \/\/ \u79fb\u9664\u5176\u4ed6\u9009\u9879\u7684\u9009\u4e2d\u72b6\u6001\n      const allOptions = document.querySelectorAll('.mpt-option');\n      allOptions.forEach(opt => opt.classList.remove('selected'));\n      \n      \/\/ \u6dfb\u52a0\u9009\u4e2d\u72b6\u6001\n      option.classList.add('selected');\n      \n      \/\/ \u83b7\u53d6\u9009\u9879\u6570\u636e\n      const optionId = option.dataset.option;\n      const nextQuestion = option.dataset.next;\n      const result = option.dataset.result;\n      \n      \/\/ \u4fdd\u5b58\u7528\u6237\u56de\u7b54\n      userAnswers[currentQuestionIndex] = {\n        questionId: currentQuestionIndex + 1,\n        optionId: optionId,\n        nextQuestion: nextQuestion,\n        result: result\n      };\n      \n      \/\/ \u77ed\u6682\u5ef6\u8fdf\u540e\u5904\u7406\u4e0b\u4e00\u6b65\u64cd\u4f5c\n      setTimeout(() => {\n        if (result) {\n          \/\/ \u5982\u679c\u6709\u7ed3\u679c\uff0c\u663e\u793a\u7ed3\u679c\u9875\n          userResult = result;\n          showResult();\n        } else if (nextQuestion) {\n          \/\/ \u5982\u679c\u6709\u4e0b\u4e00\u9898\uff0c\u66f4\u65b0\u5f53\u524d\u95ee\u9898\u7d22\u5f15\u5e76\u663e\u793a\u4e0b\u4e00\u9898\n          currentQuestionIndex++;\n          showQuestion(currentQuestionIndex);\n        }\n      }, 300);\n    }, 500);\n    \n    \/\/ \u663e\u793a\u4e0a\u4e00\u9898\n    function showPreviousQuestion() {\n      if (currentQuestionIndex > 0) {\n        currentQuestionIndex--;\n        showQuestion(currentQuestionIndex);\n      }\n    }\n    \n    \/\/ \u663e\u793a\u7ed3\u679c\n    function showResult() {\n      \/\/ \u6eda\u52a8\u5230\u9876\u90e8\n      window.scrollTo({\n        top: 0,\n        behavior: 'smooth'\n      });\n      \n      \/\/ \u5207\u6362\u9875\u9762\n      quizPage.style.display = 'none';\n      resultPage.style.display = 'block';\n      \n      \/\/ \u83b7\u53d6\u7ed3\u679c\u6570\u636e\n      const result = results[userResult];\n      \n      \/\/ \u751f\u6210\u7ed3\u679c\u6458\u8981 HTML\n      const summaryHTML = `\n        <div class=\"mpt-result-title\">${result.title}<\/div>\n        <p>\u4f60\u7684\u5a5a\u59fb\u5e78\u798f\u578b\u614b\u5c6c\u65bc\uff1a${result.title}<\/p>\n      `;\n      \n      \/\/ \u751f\u6210\u7ed3\u679c\u8be6\u60c5 HTML\n      const detailHTML = `\n        <p>${result.description}<\/p>\n      `;\n      \n      \/\/ \u66f4\u65b0\u7ed3\u679c\u5bb9\u5668\n      resultSummary.innerHTML = summaryHTML;\n      resultDetail.innerHTML = detailHTML;\n      \n      \/\/ \u521b\u5efa\u56fe\u8868\n      createResultChart(result.stats);\n    }\n    \n    \/\/ \u521b\u5efa\u7ed3\u679c\u56fe\u8868\n    function createResultChart(stats) {\n      const ctx = document.getElementById('mpt-result-chart').getContext('2d');\n      \n      \/\/ \u9500\u6bc1\u73b0\u6709\u56fe\u8868\uff08\u5982\u679c\u6709\uff09\n      if (window.resultChart) {\n        window.resultChart.destroy();\n      }\n      \n      \/\/ \u521b\u5efa\u65b0\u56fe\u8868\n      window.resultChart = new Chart(ctx, {\n        type: 'radar',\n        data: {\n          labels: ['\u5e78\u798f\u611f', '\u76f8\u5bb9\u6027', '\u6e9d\u901a\u80fd\u529b', '\u76f8\u4e92\u7406\u89e3'],\n          datasets: [{\n            label: '\u5a5a\u59fb\u5e78\u798f\u6307\u6578',\n            data: [stats.happiness, stats.compatibility, stats.communication, stats.understanding],\n            backgroundColor: 'rgba(74, 111, 165, 0.2)',\n            borderColor: 'rgba(74, 111, 165, 1)',\n            pointBackgroundColor: 'rgba(74, 111, 165, 1)',\n            pointBorderColor: '#fff',\n            pointHoverBackgroundColor: '#fff',\n            pointHoverBorderColor: 'rgba(74, 111, 165, 1)'\n          }]\n        },\n        options: {\n          scales: {\n            r: {\n              angleLines: {\n                display: true\n              },\n              suggestedMin: 0,\n              suggestedMax: 100,\n              ticks: {\n                stepSize: 20,\n                font: {\n                  size: 14\n                }\n              },\n              pointLabels: {\n                font: {\n                  size: 18\n                }\n              }\n            }\n          },\n          plugins: {\n            legend: {\n              display: false\n            },\n            tooltip: {\n              callbacks: {\n                label: function(context) {\n                  return `${context.label}: ${context.raw}%`;\n                }\n              }\n            }\n          },\n          responsive: true,\n          maintainAspectRatio: true\n        }\n      });\n    }\n    \n    \/\/ \u91cd\u65b0\u5f00\u59cb\n    function restart() {\n      \/\/ \u91cd\u7f6e\u72b6\u6001\n      currentQuestionIndex = 0;\n      userAnswers = [];\n      userResult = null;\n      \n      \/\/ \u5207\u6362\u5230\u5f15\u5bfc\u9875\n      resultPage.style.display = 'none';\n      introPage.style.display = 'block';\n      \n      \/\/ \u6eda\u52a8\u5230\u9876\u90e8\n      window.scrollTo({\n        top: 0,\n        behavior: 'smooth'\n      });\n    }\n    \n    \/\/ \u8f85\u52a9\u51fd\u6570 - \u901a\u8fc7 ID \u83b7\u53d6\u95ee\u9898\n    function getQuestionById(id) {\n      return questions.find(q => q.id === id);\n    }\n    \n    return {\n      init: init\n    };\n  })();\n  \n  \/\/ DOM \u52a0\u8f7d\u5b8c\u6210\u540e\u521d\u59cb\u5316\n  document.addEventListener('DOMContentLoaded', function() {\n    MarriagePersonalityTest.init();\n  });\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u6709\u7684\u4eba\u89c9\u5f97\u81ea\u5df1\u5728\u5a5a\u59fb\u5f53\u4e2d\u4f1a\u8fc7\u5f97\u5341\u5206\u5e78\u798f\uff0c\u800c\u6709\u7684\u4eba\u89c9\u5f97\u5a5a\u540e\u6bcf\u4e00\u5206\u949f\u90fd\u662f\u714e\u71ac\u3002\u4e0d\u77e5\u9053\u4f60\u66f4\u8d8b\u5411\u4e8e\u54ea\u4e00\u79cd\uff1f\u4e0d\u59a8\u6765\u6d4b\u4e00\u4e0b\u5427\u3002<\/p>","protected":false},"author":19,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"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":"","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],"tags":[],"class_list":["post-2398","post","type-post","status-publish","format-standard","hentry","category-marriage"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2398","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=2398"}],"version-history":[{"count":3,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2398\/revisions"}],"predecessor-version":[{"id":10378,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2398\/revisions\/10378"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}