{"id":2417,"date":"2023-10-07T09:14:38","date_gmt":"2023-10-07T01:14:38","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2417"},"modified":"2025-05-10T01:47:04","modified_gmt":"2025-05-09T17:47:04","slug":"flash-marriage-suitability","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/flash-marriage-suitability","title":{"rendered":"\u95ea\u5a5a\u9002\u5408\u5ea6\u7ebf\u4e0a\u514d\u8d39\u6d4b\u9a8c"},"content":{"rendered":"<!-- \u9583\u5a5a\u9069\u5408\u5ea6\u6e2c\u9a57 \u958b\u59cb -->\n<!-- \u78ba\u4fdd\u52a0\u8f09Chart.js -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n\n<div class=\"fmq-container\" id=\"flash-marriage-quiz\">\n  <!-- \u5f15\u5c0e\u9801 -->\n  <div class=\"fmq-page fmq-intro active\" id=\"fmq-intro\">\n    <h2 class=\"fmq-title\">\u95ea\u5a5a\u9002\u5408\u5ea6\u6d4b\u9a8c<\/h2>\n    <div class=\"fmq-intro-icon\">\n      <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"64\" height=\"64\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF4B91\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z\"><\/path>\n      <\/svg>\n    <\/div>\n    <p class=\"fmq-intro-text\">\u5f88\u591a\u4eba\u89c9\u5f97\u95ea\u5a5a\u662f\u4e00\u4ef6\u5f88\u5192\u9669\u7684\u4e8b\u60c5\uff0c\u6bd5\u7adf\u5a5a\u59fb\u5927\u4e8b\u5e94\u8be5\u8ba4\u771f\u5bf9\u5f85\uff0c\u9700\u8981\u591a\u7559\u70b9\u65f6\u95f4\uff0c\u8003\u9a8c\u5f7c\u6b64\u4e4b\u95f4\u7684\u611f\u60c5\u3002<\/p>\n    <p class=\"fmq-intro-text\">\u5176\u5b9e\uff0c\u505a\u51b3\u5b9a\u7684\u901f\u5ea6\u5feb\u4e0d\u4ee3\u8868\u6ca1\u6709\u7ecf\u8fc7\u8003\u8651\uff0c\u5982\u679c\u4f60\u4e5f\u8003\u8651\u8fc7\u95ea\u5a5a\uff0c\u4e0b\u9762\u7684\u6d4b\u8bd5\u4f1a\u4e3a\u4f60\u6d4b\u51fa\u4f60\u662f\u5426\u9002\u5408\u95ea\u5a5a\u3002<\/p>\n    <button class=\"fmq-button\" id=\"fmq-start-button\">\u5f00\u59cb\u6d4b\u9a8c<\/button>\n  <\/div>\n\n  <!-- \u6e2c\u9a57\u9801 -->\n  <div class=\"fmq-page fmq-quiz\" id=\"fmq-quiz\">\n    <h2 class=\"fmq-title\">\u95ea\u5a5a\u9002\u5408\u5ea6\u6d4b\u9a8c<\/h2>\n    \n    <div class=\"fmq-question\">\n      <h3 class=\"fmq-question-title\">\u4e0b\u5217\u56db\u7ec4\u56fe\u4e2d\u7684\u666f\u8c61\uff0c\u54ea\u4e00\u79cd\u66f4\u7b26\u5408\u4f60\u5bf9\u665a\u5e74\u592b\u59bb\u65c5\u884c\u7684\u60f3\u8c61\uff1f<\/h3>\n      <div class=\"fmq-options\">\n        <button class=\"fmq-option\" data-option=\"1\" id=\"option-1\">\u90091<\/button>\n        <button class=\"fmq-option\" data-option=\"2\" id=\"option-2\">\u90092<\/button>\n        <button class=\"fmq-option\" data-option=\"3\" id=\"option-3\">\u90093<\/button>\n        <button class=\"fmq-option\" data-option=\"4\" id=\"option-4\">\u90094<\/button>\n      <\/div>\n      <div class=\"fmq-image-container\">\n        <img decoding=\"async\" src=\"https:\/\/xinliceyan.org\/wp-content\/uploads\/2023\/10\/wannianfuqilving.png\" alt=\"\u665a\u5e74\u592b\u59bb\u65c5\u884c\u56fe\" class=\"fmq-question-image\">\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- \u7d50\u679c\u9801 -->\n  <div class=\"fmq-page fmq-result\" id=\"fmq-result\">\n    <h2 class=\"fmq-title\">\u6d4b\u9a8c\u7ed3\u679c<\/h2>\n    <div class=\"fmq-result-score\">\n      <div class=\"fmq-result-chart-container\">\n        <canvas id=\"fmq-result-chart\"><\/canvas>\n      <\/div>\n    <\/div>\n    <div class=\"fmq-result-content\" id=\"fmq-result-content\"><\/div>\n    <button class=\"fmq-button\" id=\"fmq-restart-button\">\u91cd\u65b0\u6d4b\u8bd5<\/button>\n  <\/div>\n<\/div>\n\n<style>\n\/* \u9632\u6b62\u6a23\u5f0f\u885d\u7a81\u7684\u547d\u540d\u7a7a\u9593 *\/\n.fmq-container * {\n  box-sizing: border-box;\n  font-family: \"\u5fae\u8edf\u6b63\u9ed1\u9ad4\", \"Microsoft JhengHei\", \"\u860b\u65b9-\u7e41\", \"PingFang TC\", sans-serif;\n}\n\n.fmq-container {\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 20px;\n  background: linear-gradient(to bottom right, #fff, #FFF5F7);\n  border-radius: 16px;\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n  position: relative;\n}\n\n.fmq-title {\n  font-size: 28px;\n  font-weight: 700;\n  text-align: center;\n  margin-bottom: 24px;\n  color: #FF4B91;\n  text-shadow: 0 2px 4px rgba(255, 75, 145, 0.1);\n}\n\n.fmq-page {\n  display: none;\n  opacity: 0;\n  transition: opacity 0.5s ease;\n}\n\n.fmq-page.active {\n  display: block;\n  opacity: 1;\n}\n\n\/* \u5f15\u5c0e\u9801\u8a2d\u8a08 *\/\n.fmq-intro-icon {\n  width: 120px;\n  height: 120px;\n  margin: 0 auto 24px;\n  background: linear-gradient(135deg, #FFD1DA, #FFC2D1);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 8px 20px rgba(255, 75, 145, 0.2);\n  transform: translateY(0);\n  transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.fmq-intro-icon:hover {\n  transform: translateY(-5px);\n  box-shadow: 0 12px 24px rgba(255, 75, 145, 0.3);\n}\n\n.fmq-intro-text {\n  font-size: 18px;\n  line-height: 1.6;\n  color: #555;\n  margin-bottom: 16px;\n  text-align: left;\n  max-width: 600px;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.fmq-button {\n  background: linear-gradient(135deg, #FF4B91, #FF287B);\n  color: white;\n  border: none;\n  border-radius: 50px;\n  padding: 14px 32px;\n  font-size: 18px;\n  font-weight: 600;\n  cursor: pointer;\n  margin-top: 24px;\n  box-shadow: 0 6px 16px rgba(255, 75, 145, 0.3);\n  transition: all 0.3s ease;\n  min-width: 180px;\n  display: block;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.fmq-button:hover {\n  transform: translateY(-3px);\n  box-shadow: 0 8px 20px rgba(255, 75, 145, 0.4);\n  background: linear-gradient(135deg, #FF5C9E, #FF3987);\n}\n\n.fmq-button:active {\n  transform: translateY(-1px);\n  box-shadow: 0 4px 12px rgba(255, 75, 145, 0.4);\n}\n\n\/* \u6e2c\u9a57\u9801\u8a2d\u8a08 *\/\n.fmq-question-title {\n  font-size: 22px;\n  font-weight: 600;\n  color: #333;\n  margin-bottom: 20px;\n  line-height: 1.4;\n  text-align: left;\n}\n\n.fmq-image-container {\n  margin-top: 20px;\n  text-align: center;\n}\n\n.fmq-question-image {\n  max-width: 100%;\n  border-radius: 12px;\n  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n}\n\n.fmq-options {\n  display: flex;\n  justify-content: center;\n  flex-wrap: wrap;\n  gap: 16px;\n  margin-bottom: 24px;\n}\n\n.fmq-option {\n  background-color: white;\n  border: 2px solid #FFD1DA;\n  border-radius: 12px;\n  padding: 12px 20px;\n  font-size: 18px;\n  font-weight: 500;\n  color: #555;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  min-height: 56px;\n  min-width: 80px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.fmq-option:hover {\n  background-color: #FFF0F5;\n  border-color: #FF8FB1;\n  color: #FF4B91;\n  transform: translateY(-2px);\n  box-shadow: 0 4px 12px rgba(255, 75, 145, 0.1);\n}\n\n.fmq-option.selected {\n  background-color: #FF4B91;\n  border-color: #FF4B91;\n  color: white;\n  transform: translateY(-2px);\n  box-shadow: 0 4px 12px rgba(255, 75, 145, 0.2);\n}\n\n\/* \u7d50\u679c\u9801\u8a2d\u8a08 *\/\n.fmq-result-score {\n  margin-bottom: 30px;\n}\n\n.fmq-result-chart-container {\n  width: 100%;\n  max-width: 400px;\n  height: 300px;\n  margin: 0 auto 20px;\n  position: relative;\n}\n\n.fmq-result-title {\n  font-size: 24px;\n  font-weight: 600;\n  color: #FF4B91;\n  margin-bottom: 16px;\n  text-align: center;\n}\n\n.fmq-result-content {\n  background-color: white;\n  border-radius: 12px;\n  padding: 24px;\n  margin-bottom: 24px;\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);\n  text-align: left;\n}\n\n.fmq-result-content p {\n  font-size: 18px;\n  line-height: 1.6;\n  color: #555;\n  margin-bottom: 16px;\n}\n\n.fmq-result-content strong {\n  color: #FF4B91;\n  font-weight: 600;\n}\n\n\/* \u54cd\u5e94\u5f0f\u8bbe\u8ba1 *\/\n@media (max-width: 768px) {\n  .fmq-container {\n    padding: 16px;\n    border-radius: 12px;\n  }\n  \n  .fmq-title {\n    font-size: 24px;\n  }\n  \n  .fmq-intro-text {\n    font-size: 16px;\n  }\n  \n  .fmq-question-title {\n    font-size: 20px;\n  }\n  \n  .fmq-options {\n    justify-content: space-between;\n  }\n  \n  .fmq-option {\n    padding: 10px 15px;\n    font-size: 16px;\n    min-width: 70px;\n  }\n  \n  .fmq-button {\n    padding: 12px 24px;\n    font-size: 16px;\n  }\n  \n  .fmq-result-content {\n    padding: 16px;\n  }\n}\n\n\/* \u6dfb\u52a0\u9078\u9805\u9ede\u64ca\u5f8c\u7684\u904e\u6e21\u6a23\u5f0f *\/\n.fmq-option-clicked {\n  background-color: #FF4B91 !important;\n  border-color: #FF4B91 !important;\n  color: white !important;\n}\n\n\/* \u5716\u8868\u4e2d\u5fc3\u7684\u5206\u6578\u986f\u793a *\/\n.fmq-score-display {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  font-size: 36px;\n  font-weight: bold;\n  color: #FF4B91;\n  text-align: center;\n}\n<\/style>\n\n<script>\n\/\/ \u7b49\u5f85\u9801\u9762\u52a0\u8f09\u5b8c\u6210\nwindow.addEventListener('DOMContentLoaded', function() {\n  console.log('DOM fully loaded');\n  \n  \/\/ DOM \u5143\u7d20\n  const introPage = document.getElementById('fmq-intro');\n  const quizPage = document.getElementById('fmq-quiz');\n  const resultPage = document.getElementById('fmq-result');\n  const startButton = document.getElementById('fmq-start-button');\n  const restartButton = document.getElementById('fmq-restart-button');\n  const resultContent = document.getElementById('fmq-result-content');\n  \n  \/\/ \u78ba\u4fdd\u6240\u6709\u9078\u9805\u5143\u7d20\u5b58\u5728\n  const option1 = document.getElementById('option-1');\n  const option2 = document.getElementById('option-2');\n  const option3 = document.getElementById('option-3');\n  const option4 = document.getElementById('option-4');\n  \n  if (!option1 || !option2 || !option3 || !option4) {\n    console.error('Some option elements are missing');\n    return;\n  }\n  \n  \/\/ \u6e2c\u9a57\u7d50\u679c\u6578\u64da\n  const results = {\n    \"1\": {\n      title: \"\u975e\u5e38\u9069\u5408\",\n      text: \"\u4f60\u975e\u5e38\u9069\u5408\u9583\u5a5a\uff0c\u5982\u679c\u548c\u4e00\u500b\u4eba\u6200\u611b\u7684\u6642\u9593\u592a\u4e45\u4e86\uff0c\u4f60\u5c0d\u5c0d\u65b9\u7684\u611f\u89ba\u6703\u9010\u6f38\u8b8a\u77ed\u6de1\u3002\u96d6\u7136\u4f60\u77e5\u9053\u60c5\u4fb6\u8655\u7684\u6642\u9593\u4e45\u4e86\u5c31\u8b8a\u6210\u4e86\u89aa\u4eba\uff0c\u4f46\u662f\u4f60\u53ef\u4e0d\u60f3\u8ddf\u81ea\u5df1\u7684\u89aa\u4eba\u7d50\u5a5a\uff0c\u4f60\u9084\u662f\u5e0c\u671b\u5728\u7d50\u5a5a\u7684\u6642\u5019\u5169\u4eba\u9084\u80fd\u4fdd\u7559\u4e00\u4efd\u6fc0\u60c5\uff0c\u6240\u4ee5\u5982\u679c\u9078\u64c7\u9583\u5a5a\u7684\u8a71\uff0c\u5a5a\u5f8c\u751f\u6d3b\u61c9\u8a72\u6703\u975e\u5e38\u7684\u5e78\u798f\u751c\u871c\uff0c\u800c\u4f60\u6703\u9858\u610f\u7dad\u6301\u9019\u4efd\u751c\u871c\u3002\",\n      score: 95\n    },\n    \"2\": {\n      title: \"\u57fa\u672c\u9069\u5408\",\n      text: \"\u5982\u679c\u9047\u5230\u4e00\u500b\u65b9\u65b9\u9762\u90fd\u9084\u4e0d\u932f\u7684\u4eba\uff0c\u4f60\u53ef\u4ee5\u9078\u64c7\u548c\u5c0d\u65b9\u9583\u5a5a\uff0c\u9583\u5a5a\u5f8c\uff0c\u53ef\u80fd\u4f60\u89ba\u5f97\u751f\u6d3b\u4e2d\u7684\u5f88\u591a\u7463\u4e8b\u78e8\u6ec5\u4e86\u4f60\u7684\u6fc0\u60c5\uff0c\u4f46\u597d\u5728\u4f60\u65e9\u5c31\u5df2\u7d93\u505a\u597d\u4e86\u63a5\u53d7\u9019\u4e00\u9ede\u7684\u6e96\u5099\uff0c\u4f60\u4e0d\u6703\u8f15\u6613\u653e\u68c4\u81ea\u5df1\u9078\u64c7\u7684\u5a5a\u59fb\uff0c\u5176\u5be6\u662f\u56e0\u70ba\u9583\u5a5a\u8fc5\u901f\u7684\u6b65\u5165\u4e86\u5a5a\u59fb\uff0c\u537b\u4e0d\u80fd\u5920\u5f88\u597d\u5730\u9069\u61c9\u5a5a\u59fb\u751f\u6d3b\uff0c\u4f60\u4e5f\u7518\u9858\u70ba\u4e4b\u4ed8\u51fa\u52aa\u529b\u3002\",\n      score: 75\n    },\n    \"3\": {\n      title: \"\u52c9\u5f37\u9069\u5408\",\n      text: \"\u9664\u975e\u9047\u5230\u975e\u5e38\u9069\u5408\u4f60\u7684\u4f34\u4fb6\uff0c\u5426\u5247\u4f60\u771f\u7684\u6c92\u8fa6\u6cd5\u63a5\u53d7\u9583\u5a5a\uff0c\u5728\u7d50\u5a5a\u9019\u7a2e\u4e8b\u60c5\u4e0a\uff0c\u4f60\u8868\u73fe\u5f97\u5f88\u7336\u8c6b\uff0c\u4f60\u4e0d\u77e5\u9053\u628a\u81ea\u5df1\u7684\u5e78\u798f\u4ea4\u7d66\u8ab0\u3002\u5982\u679c\u56e0\u70ba\u4e00\u6642\u885d\u52d5\u63a5\u53d7\u4e86\u9583\u5a5a\uff0c\u53ef\u80fd\u5728\u6c92\u6709\u505a\u597d\u6e96\u5099\u7684\u72c0\u614b\u4e0b\u6b65\u5165\u4e86\u5a5a\u59fb\uff0c\u5728\u5a5a\u59fb\u4e2d\u9047\u5230\u7684\u5404\u7a2e\u9ebb\u7169\u6703\u8b93\u4f60\u89ba\u5f97\u5f88\u7cfe\u7d50\uff0c\u751a\u81f3\u61f7\u7591\u81ea\u5df1\u9583\u5a5a\u7684\u6c7a\u5b9a\u4e26\u4e0d\u6b63\u78ba\u3002\",\n      score: 45\n    },\n    \"4\": {\n      title: \"\u6975\u4e0d\u9069\u5408\",\n      text: \"\u4f60\u975e\u5e38\u4e0d\u9069\u5408\u9583\u5a5a\uff0c\u4f60\u5f88\u5bb9\u6613\u8fc5\u901f\u505a\u6c7a\u5b9a\uff0c\u4f46\u885d\u52d5\u4e4b\u4e0b\u6240\u505a\u7684\u6c7a\u5b9a\u5927\u90e8\u5206\u90fd\u662f\u932f\u8aa4\u7684\uff0c\u4f60\u4e5f\u5e38\u5e38\u5728\u70ba\u81ea\u5df1\u505a\u7684\u932f\u8aa4\u6c7a\u5b9a\u611f\u5230\u61ca\u60f1\uff0c\u8207\u5176\u82b1\u6642\u9593\u4f86\u4fee\u6b63\u932f\u8aa4\uff0c\u5012\u4e0d\u5982\u5728\u6c7a\u5b9a\u4e4b\u524d\uff0c\u8b39\u614e\u4e00\u9ede\u3002\u5176\u5be6\u4f60\u5c0d\u5a5a\u59fb\u7684\u8981\u6c42\u5f88\u9ad8\uff0c\u61c9\u8a72\u8a8d\u771f\u7684\u77ad\u89e3\u4f60\u9078\u64c7\u7684\u7d50\u5a5a\u5c0d\u8c61\uff0c\u5728\u8003\u616e\u8981\u4e0d\u8981\u6572\u4e0b\u7d50\u5a5a\u6c7a\u5b9a\u6bd4\u8f03\u597d\u3002\",\n      score: 25\n    }\n  };\n  \n  \/\/ \u986f\u793a\u6307\u5b9a\u9801\u9762\n  function showPage(page) {\n    introPage.classList.remove('active');\n    quizPage.classList.remove('active');\n    resultPage.classList.remove('active');\n    page.classList.add('active');\n    \n    \/\/ \u6efe\u52d5\u5230\u9802\u90e8\n    window.scrollTo({\n      top: page.offsetTop - 20,\n      behavior: 'smooth'\n    });\n  }\n  \n  \/\/ \u6aa2\u67e5 Chart.js \u662f\u5426\u5df2\u52a0\u8f09\n  function isChartJsLoaded() {\n    return typeof Chart !== 'undefined';\n  }\n  \n  \/\/ \u5982\u679cChart.js\u672a\u52a0\u8f09\uff0c\u52a0\u8f09\u5b83\n  function loadChartJs(callback) {\n    if (isChartJsLoaded()) {\n      callback();\n      return;\n    }\n    \n    const script = document.createElement('script');\n    script.src = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js';\n    script.onload = callback;\n    document.head.appendChild(script);\n  }\n  \n  \/\/ \u5275\u5efa\u7d50\u679c\u7684\u7d14\u6587\u5b57\u986f\u793a\uff08\u5099\u7528\u65b9\u6848\uff09\n  function createTextResult(score) {\n    const resultScoreDiv = document.createElement('div');\n    resultScoreDiv.className = 'fmq-text-result';\n    resultScoreDiv.style.textAlign = 'center';\n    resultScoreDiv.style.marginBottom = '20px';\n    resultScoreDiv.style.fontSize = '24px';\n    resultScoreDiv.innerHTML = `<strong>\u9583\u5a5a\u9069\u5408\u5ea6: ${score}%<\/strong>`;\n    \n    const chartContainer = document.querySelector('.fmq-result-chart-container');\n    chartContainer.innerHTML = '';\n    chartContainer.appendChild(resultScoreDiv);\n  }\n  \n  \/\/ \u5275\u5efa\u5716\u8868\u4e26\u986f\u793a\u7d50\u679c\n  function showResult(optionId) {\n    const result = results[optionId];\n    \n    \/\/ \u8a2d\u7f6e\u7d50\u679c\u5167\u5bb9\n    resultContent.innerHTML = `\n      <div class=\"fmq-result-title\">${result.title}<\/div>\n      <p><strong>\u9583\u5a5a\u9069\u5408\u5ea6: ${result.score}%<\/strong><\/p>\n      <p>${result.text}<\/p>\n    `;\n    \n    \/\/ \u6aa2\u67e5\u4e26\u5275\u5efa\u5716\u8868\n    loadChartJs(function() {\n      try {\n        createChart(result.score);\n      } catch (e) {\n        console.error('Error creating chart:', e);\n        createTextResult(result.score);\n      }\n    });\n    \n    \/\/ \u986f\u793a\u7d50\u679c\u9801\n    showPage(resultPage);\n  }\n  \n  \/\/ \u5275\u5efa\u5716\u8868\n  function createChart(score) {\n    const chartContainer = document.querySelector('.fmq-result-chart-container');\n    chartContainer.innerHTML = '<canvas id=\"fmq-result-chart\"><\/canvas>';\n    \n    const ctx = document.getElementById('fmq-result-chart').getContext('2d');\n    \n    \/\/ \u78ba\u4fdd Chart.js \u5df2\u8f09\u5165\n    if (!isChartJsLoaded()) {\n      console.error('Chart.js is not loaded');\n      createTextResult(score);\n      return;\n    }\n    \n    try {\n      \/\/ \u5275\u5efa\u65b0\u5716\u8868\n      const chartConfig = {\n        type: 'doughnut',\n        data: {\n          labels: ['\u9583\u5a5a\u9069\u5408\u5ea6', '\u4e0d\u9069\u5408\u5ea6'],\n          datasets: [{\n            data: [score, 100 - score],\n            backgroundColor: [\n              '#FF4B91',\n              '#F5F5F5'\n            ],\n            borderWidth: 0,\n            hoverOffset: 5\n          }]\n        },\n        options: {\n          cutout: '70%',\n          responsive: true,\n          maintainAspectRatio: true,\n          plugins: {\n            legend: {\n              display: true,\n              position: 'bottom',\n              labels: {\n                font: {\n                  size: 16\n                },\n                padding: 20\n              }\n            },\n            tooltip: {\n              callbacks: {\n                label: function(context) {\n                  return `${context.label}: ${context.raw}%`;\n                }\n              }\n            }\n          }\n        }\n      };\n      \n      window.resultChart = new Chart(ctx, chartConfig);\n      \n      \/\/ \u5728\u5716\u8868\u4e2d\u5fc3\u6dfb\u52a0\u5206\u6578\u6587\u5b57\n      setTimeout(function() {\n        \/\/ \u6aa2\u67e5\u662f\u5426\u5df2\u7d93\u5b58\u5728\u5206\u6578\u986f\u793a\n        const existingScore = chartContainer.querySelector('.fmq-score-display');\n        if (existingScore) {\n          existingScore.textContent = `${score}%`;\n          return;\n        }\n        \n        const scoreDisplay = document.createElement('div');\n        scoreDisplay.className = 'fmq-score-display';\n        scoreDisplay.textContent = `${score}%`;\n        chartContainer.appendChild(scoreDisplay);\n      }, 100);\n    } catch (e) {\n      console.error('Error creating chart:', e);\n      createTextResult(score);\n    }\n  }\n  \n  \/\/ \u8655\u7406\u9078\u9805\u9ede\u64ca\n  function handleOptionClick(button, optionId) {\n    \/\/ \u6e05\u9664\u6240\u6709\u9078\u9805\u7684\u9078\u4e2d\u72c0\u614b\n    option1.classList.remove('fmq-option-clicked');\n    option2.classList.remove('fmq-option-clicked');\n    option3.classList.remove('fmq-option-clicked');\n    option4.classList.remove('fmq-option-clicked');\n    \n    \/\/ \u6dfb\u52a0\u9078\u4e2d\u6548\u679c\n    button.classList.add('fmq-option-clicked');\n    \n    \/\/ \u5ef6\u9072\u986f\u793a\u7d50\u679c\uff0c\u8b93\u4f7f\u7528\u8005\u770b\u5230\u9078\u4e2d\u6548\u679c\n    setTimeout(function() {\n      showResult(optionId);\n    }, 300);\n  }\n  \n  \/\/ \u6dfb\u52a0\u4e8b\u4ef6\u76e3\u807d\u5668\n  startButton.addEventListener('click', function() {\n    showPage(quizPage);\n  });\n  \n  restartButton.addEventListener('click', function() {\n    showPage(quizPage);\n  });\n  \n  \/\/ \u9078\u9805\u9ede\u64ca\u4e8b\u4ef6\n  option1.addEventListener('click', function() {\n    handleOptionClick(this, '1');\n  });\n  \n  option2.addEventListener('click', function() {\n    handleOptionClick(this, '2');\n  });\n  \n  option3.addEventListener('click', function() {\n    handleOptionClick(this, '3');\n  });\n  \n  option4.addEventListener('click', function() {\n    handleOptionClick(this, '4');\n  });\n  \n  console.log('Quiz initialization complete');\n});\n<\/script>\n<!-- \u9583\u5a5a\u9069\u5408\u5ea6\u6e2c\u9a57 \u7d50\u675f -->","protected":false},"excerpt":{"rendered":"<p>\u505a\u51b3\u5b9a\u7684\u901f\u5ea6\u5feb\u4e0d\u4ee3\u8868\u6ca1\u6709\u7ecf\u8fc7\u8003\u8651\uff0c\u5982\u679c\u4f60\u4e5f\u8003\u8651\u8fc7\u95ea\u5a5a\uff0c\u4e0b\u9762\u7684\u6d4b\u8bd5\u4f1a\u4e3a\u4f60\u6d4b\u51fa\u4f60\u662f\u5426\u9002\u5408\u95ea\u5a5a\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":"unboxed","ast-global-header-display":"disabled","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[179,178],"tags":[],"class_list":["post-2417","post","type-post","status-publish","format-standard","hentry","category-marriage","category-love"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2417","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=2417"}],"version-history":[{"count":3,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2417\/revisions"}],"predecessor-version":[{"id":10372,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2417\/revisions\/10372"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2417"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2417"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}