{"id":2519,"date":"2023-10-08T09:29:16","date_gmt":"2023-10-08T01:29:16","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2519"},"modified":"2025-05-07T13:09:11","modified_gmt":"2025-05-07T05:09:11","slug":"how-forever-in-love","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/how-forever-in-love","title":{"rendered":"\u5c0f\u6d4b\u9a8c\uff1a\u5ef6\u957f\u7231\u60c5\u4fdd\u8d28\u671f\uff0c\u4f60\u5e94\u8be5\u505a\u70b9\u4ec0\u4e48\uff1f"},"content":{"rendered":"<!-- \u5ef6\u9577\u611b\u60c5\u4fdd\u8cea\u671f\u6e2c\u9a57 -->\n<div id=\"love-quiz-container\" class=\"love-quiz-custom-container\">\n  <!-- \u5f15\u5c0e\u9801 -->\n  <div id=\"love-quiz-intro\" class=\"love-quiz-page love-quiz-active\">\n    <h2 class=\"love-quiz-title\">\u5ef6\u957f\u7231\u60c5\u4fdd\u8d28\u671f\uff0c\u4f60\u5e94\u8be5\u505a\u70b9\u4ec0\u4e48\uff1f<\/h2>\n    \n    <div class=\"love-quiz-intro-content\">\n      <div class=\"love-quiz-intro-icons\">\n        <div class=\"love-quiz-icon\">\n          <div class=\"love-quiz-icon-circle\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" width=\"32\" height=\"32\">\n              <path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4l3 3m6-3a9 9 0 1 1-18 0a9 9 0 0 1 18 0z\"\/>\n            <\/svg>\n          <\/div>\n          <p>\u4ec5\u97001\u5206\u949f<\/p>\n        <\/div>\n        <div class=\"love-quiz-icon\">\n          <div class=\"love-quiz-icon-circle\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" width=\"32\" height=\"32\">\n              <path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2l4-4m5.618-4.016A11.955 11.955 0 0 1 12 2.944a11.955 11.955 0 0 1-9.618 5.04a11.955 11.955 0 0 0-.382 3.016a12 12 0 0 0 3.9 8.9a12.002 12.002 0 0 0 17.6-12a12.002 12.002 0 0 0-.5-3.016\"\/>\n            <\/svg>\n          <\/div>\n          <p>\u4e13\u4e1a\u5206\u6790<\/p>\n        <\/div>\n        <div class=\"love-quiz-icon\">\n          <div class=\"love-quiz-icon-circle\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" width=\"32\" height=\"32\">\n              <path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4.354a4 4 0 0 1 0 5.292M15 21v-3.5a3 3 0 0 0-3-3h-1.3M8.5 14.5V21m0 0H7m1.5 0H9M3 21h.01M21 21h.01M12 11h.01M8 11h.01M16 11h.01M12 16h.01M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0\"\/>\n            <\/svg>\n          <\/div>\n          <p>\u7cbe\u51c6\u5339\u914d<\/p>\n        <\/div>\n      <\/div>\n      \n      <p class=\"love-quiz-description\">\u7231\u60c5\u4e5f\u662f\u6709\u4fdd\u8d28\u671f\u7684\uff0c\u8fc7\u671f\u7684\u7231\u60c5\uff0c\u5c31\u50cf\u662f\u8fc7\u671f\u7684\u98df\u54c1\uff0c\u8ba9\u4eba\u98df\u4e4b\u65e0\u5473\u3002\u60c5\u4fa3\u4e4b\u95f4\u7684\u7231\u60c5\u4fdd\u8d28\u671f\u53ef\u80fd\u662f\u51e0\u4e2a\u6708\uff0c\u4e00\u5e74\uff0c\u51e0\u5e74\uff0c\u4ea6\u6216\u662f\u4e00\u8f88\u5b50\u3002\u5f7c\u6b64\u76f8\u7231\u7684\u4e24\u4e2a\u4eba\uff0c\u4e00\u822c\u4e5f\u4f1a\u60f3\u65b9\u8bbe\u6cd5\u53bb\u5ef6\u957f\u7231\u60c5\u4fdd\u8d28\u671f\u3002\u5982\u679c\u5728\u4e00\u6bb5\u604b\u7231\u5173\u7cfb\u4e2d\uff0c\u4f60\u611f\u5230\u8eab\u5fc3\u4ff1\u75b2\u7684\u8bdd\uff0c\u4f60\u53ef\u80fd\u4f1a\u5fcd\u4e0d\u4f4f\u62b1\u6028\uff0c\u4e3a\u4f55\u7231\u60c5\u4fdd\u8d28\u671f\u4f1a\u90a3\u4e48\u77ed\u3002<\/p>\n      \n      <p class=\"love-quiz-cta\">\u5b8c\u6210\u8fd9\u4e2a\u7b80\u77ed\u6d4b\u9a8c\uff0c\u4e86\u89e3\u5982\u4f55\u5ef6\u957f\u4f60\u4eec\u7684\u7231\u60c5\u4fdd\u8d28\u671f\uff01<\/p>\n    <\/div>\n    \n    <button id=\"love-quiz-start-btn\" class=\"love-quiz-btn love-quiz-gradient-btn\">\u5f00\u59cb\u6d4b\u9a8c<\/button>\n  <\/div>\n  \n  <!-- \u6e2c\u9a57\u9801 -->\n  <div id=\"love-quiz-questions\" class=\"love-quiz-page\">\n    <div class=\"love-quiz-progress-container\">\n      <div class=\"love-quiz-progress-text\">\u95ee\u9898 <span id=\"love-quiz-current-question\">1<\/span>\/<span id=\"love-quiz-total-questions\">10<\/span><\/div>\n      <div class=\"love-quiz-progress-bar\">\n        <div id=\"love-quiz-progress-fill\"><\/div>\n      <\/div>\n    <\/div>\n    \n    <div id=\"love-quiz-question-container\"><\/div>\n    \n    <div class=\"love-quiz-navigation\">\n      <button id=\"love-quiz-prev-btn\" class=\"love-quiz-btn love-quiz-secondary-btn\">\u4e0a\u4e00\u9898<\/button>\n    <\/div>\n  <\/div>\n  \n  <!-- \u7d50\u679c\u9801 -->\n  <div id=\"love-quiz-results\" class=\"love-quiz-page\">\n    <h2 class=\"love-quiz-title\">\u6d4b\u9a8c\u7ed3\u679c\u5206\u6790<\/h2>\n    \n    <div class=\"love-quiz-results-content\">\n      <div class=\"love-quiz-chart-container\">\n        <canvas id=\"love-quiz-chart\"><\/canvas>\n      <\/div>\n      \n      <div id=\"love-quiz-result-text\" class=\"love-quiz-result-text\"><\/div>\n    <\/div>\n    \n    <button id=\"love-quiz-restart-btn\" class=\"love-quiz-btn love-quiz-gradient-btn\">\u91cd\u65b0\u6d4b\u8bd5<\/button>\n  <\/div>\n<\/div>\n\n<style>\n\/* \u9632\u6b62\u6a23\u5f0f\u885d\u7a81\u7684\u547d\u540d\u7a7a\u9593\u524d\u7db4 *\/\n.love-quiz-custom-container {\n  --love-quiz-primary: #ff6b6b;\n  --love-quiz-secondary: #6b5bff;\n  --love-quiz-text: #333333;\n  --love-quiz-light-bg: #ffffff;\n  --love-quiz-grey: #f8f9fa;\n  --love-quiz-border: #e9ecef;\n  --love-quiz-shadow: rgba(0, 0, 0, 0.1);\n  --love-quiz-gradient-start: #ff6b6b;\n  --love-quiz-gradient-end: #ff8e8e;\n  --love-quiz-option-hover: #fff0f0;\n  --love-quiz-option-selected: #ffe6e6;\n  \n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 20px;\n  color: var(--love-quiz-text);\n  background-color: var(--love-quiz-light-bg);\n  border-radius: 16px;\n  box-shadow: 0 8px 30px var(--love-quiz-shadow);\n}\n\n.love-quiz-page {\n  display: none;\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.love-quiz-active {\n  display: block;\n  opacity: 1;\n}\n\n.love-quiz-title {\n  font-size: 28px;\n  font-weight: 700;\n  text-align: center;\n  margin-bottom: 30px;\n  color: var(--love-quiz-primary);\n}\n\n\/* \u5f15\u5c0e\u9801\u6a23\u5f0f *\/\n.love-quiz-intro-content {\n  margin-bottom: 30px;\n}\n\n.love-quiz-intro-icons {\n  display: flex;\n  justify-content: space-around;\n  margin: 40px 0;\n}\n\n.love-quiz-icon {\n  text-align: center;\n  width: 30%;\n}\n\n.love-quiz-icon-circle {\n  width: 80px;\n  height: 80px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, var(--love-quiz-gradient-start), var(--love-quiz-gradient-end));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0 auto 15px;\n  color: white;\n  box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);\n}\n\n.love-quiz-icon p {\n  font-weight: 600;\n  font-size: 16px;\n  margin: 0;\n}\n\n.love-quiz-description {\n  font-size: 18px;\n  line-height: 1.6;\n  margin-bottom: 25px;\n  text-align: left;\n}\n\n.love-quiz-cta {\n  font-size: 20px;\n  font-weight: 600;\n  text-align: center;\n  color: var(--love-quiz-secondary);\n  margin: 30px 0;\n}\n\n\/* \u6309\u9215\u6a23\u5f0f *\/\n.love-quiz-btn {\n  min-height: 50px;\n  min-width: 150px;\n  padding: 12px 24px;\n  font-size: 18px;\n  font-weight: 600;\n  border: none;\n  border-radius: 30px;\n  cursor: pointer;\n  transition: all 0.3s ease;\n  display: block;\n  margin: 0 auto;\n}\n\n.love-quiz-gradient-btn {\n  background: linear-gradient(135deg, var(--love-quiz-gradient-start), var(--love-quiz-gradient-end));\n  color: white;\n  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);\n}\n\n.love-quiz-gradient-btn:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(255, 107, 107, 0.5);\n}\n\n.love-quiz-secondary-btn {\n  background-color: white;\n  color: var(--love-quiz-primary);\n  border: 2px solid var(--love-quiz-primary);\n}\n\n.love-quiz-secondary-btn:hover {\n  background-color: var(--love-quiz-option-hover);\n}\n\n\/* \u6e2c\u9a57\u9801\u6a23\u5f0f *\/\n.love-quiz-progress-container {\n  margin-bottom: 25px;\n}\n\n.love-quiz-progress-text {\n  font-size: 16px;\n  font-weight: 600;\n  margin-bottom: 8px;\n  text-align: center;\n}\n\n.love-quiz-progress-bar {\n  height: 8px;\n  background-color: var(--love-quiz-grey);\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.love-quiz-progress-fill {\n  height: 100%;\n  background: linear-gradient(135deg, var(--love-quiz-gradient-start), var(--love-quiz-gradient-end));\n  border-radius: 4px;\n  transition: width 0.3s ease;\n}\n\n.love-quiz-question {\n  margin-bottom: 30px;\n}\n\n.love-quiz-question h3 {\n  font-size: 22px;\n  font-weight: 700;\n  margin-bottom: 20px;\n  color: var(--love-quiz-text);\n}\n\n.love-quiz-options {\n  display: grid;\n  gap: 15px;\n}\n\n.love-quiz-option {\n  background-color: var(--love-quiz-light-bg);\n  border: 2px solid var(--love-quiz-border);\n  border-radius: 12px;\n  padding: 15px 20px;\n  font-size: 18px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  min-height: 44px;\n}\n\n.love-quiz-option:hover {\n  background-color: var(--love-quiz-option-hover);\n  border-color: var(--love-quiz-primary);\n  transform: translateY(-2px);\n}\n\n.love-quiz-option.selected {\n  background-color: var(--love-quiz-option-selected);\n  border-color: var(--love-quiz-primary);\n  font-weight: 600;\n}\n\n.love-quiz-navigation {\n  margin-top: 30px;\n  text-align: center;\n}\n\n\/* \u7d50\u679c\u9801\u6a23\u5f0f *\/\n.love-quiz-results-content {\n  margin-bottom: 30px;\n}\n\n.love-quiz-chart-container {\n  max-width: 500px;\n  margin: 0 auto 40px;\n}\n\n.love-quiz-result-text {\n  font-size: 18px;\n  line-height: 1.6;\n  padding: 25px;\n  background-color: var(--love-quiz-grey);\n  border-radius: 12px;\n  margin-bottom: 30px;\n  text-align: left;\n}\n\n\/* \u97ff\u61c9\u5f0f\u6a23\u5f0f *\/\n@media (max-width: 768px) {\n  .love-quiz-custom-container {\n    padding: 15px;\n  }\n  \n  .love-quiz-title {\n    font-size: 24px;\n  }\n  \n  .love-quiz-intro-icons {\n    flex-direction: column;\n    align-items: center;\n    gap: 30px;\n  }\n  \n  .love-quiz-icon {\n    width: 100%;\n    margin-bottom: 20px;\n  }\n  \n  .love-quiz-description,\n  .love-quiz-result-text {\n    font-size: 16px;\n  }\n  \n  .love-quiz-question h3 {\n    font-size: 20px;\n  }\n  \n  .love-quiz-option {\n    font-size: 16px;\n  }\n}\n<\/style>\n\n<script>\n(function() {\n  \/\/ \u9632\u6b62\u5168\u5c40\u547d\u540d\u7a7a\u9593\u885d\u7a81\n  const LoveQuiz = {\n    currentQuestion: 0,\n    answers: [],\n    resultCategory: '',\n    questions: [\n      {\n        text: \"1\u3001Ta\u662f\u4e0d\u662f\u5f88\u611b\u9762\u5b50\uff1f\",\n        options: [\"\u662f\", \"\u4e0d\u662f\"],\n        nextQuestion: [1, 2]\n      },\n      {\n        text: \"2\u3001Ta\u6709\u6c92\u6709\u5411\u4f60\u8aaa\u8d77\u904e\u574e\u5777\u7d93\u6b77\uff1f\",\n        options: [\"\u6709\", \"\u6c92\u6709\"],\n        nextQuestion: [3, 2]\n      },\n      {\n        text: \"3\u3001Ta\u662f\u4e0d\u662f\u4e00\u500b\u559c\u5f62\u65bc\u8272\u7684\u4eba\uff1f\",\n        options: [\"\u4e0d\u662f\", \"\u662f\"],\n        nextQuestion: [4, 3]\n      },\n      {\n        text: \"4\u3001\u5728\u7576\u4f60\u5011\u7d04\u6703\u6642\uff0c\u4e00\u822c\u662f\u8ab0\u5b9a\u6642\u9593\u5730\u9ede\uff1f\",\n        options: [\"\u4f60\", \"Ta\"],\n        nextQuestion: [4, 5]\n      },\n      {\n        text: \"5\u3001\u7576\u4f60\u6c42\u52a9\u65bcTa\u6642\uff0cTa\u6703\u4e0d\u6703\u6577\u884d\u5c0d\u5f85\uff1f\",\n        options: [\"\u4e0d\u6703\", \"\u5076\u723e\u6703\"],\n        nextQuestion: [5, 6]\n      },\n      {\n        text: \"6\u3001Ta\u8a18\u5f97\u6240\u6709\u91cd\u8981\u7684\u65e5\u5b50\uff1f\",\n        options: [\"\u662f\", \"\u4e0d\u662f\"],\n        nextQuestion: [7, 6]\n      },\n      {\n        text: \"7\u3001\u4f60\u61f7\u7591\u904eTa\u6709\u51fa\u8ecc\u7684\u884c\u70ba\uff1f\",\n        options: [\"\u6709\", \"\u6c92\u6709\"],\n        nextQuestion: [9, 8]\n      },\n      {\n        text: \"8\u3001\u95dc\u65bcTa\u8aaa\u7684\u8a71\uff0c\u4f60\u662f\u4e0d\u662f\u90fd\u5f88\u8a8d\u540c\uff1f\",\n        options: [\"\u662f\", \"\u4e0d\u662f\"],\n        nextQuestion: [9, 8]\n      },\n      {\n        text: \"9\u3001\u5728\u4f60\u60c5\u7dd2\u4e0d\u5c0d\u6642\uff0cTa\u5f88\u5feb\u5c31\u80fd\u5bdf\u89ba\u904e\u4f86\uff1f\",\n        options: [\"\u662f\", \"\u4e0d\u662f\"],\n        nextQuestion: [\"C\", \"B\"]\n      },\n      {\n        text: \"10\u3001\u4e00\u65e6Ta\u505a\u51fa\u4e86\u6c7a\u5b9a\uff0c\u4e0d\u6703\u56e0\u4f60\u800c\u767c\u751f\u6539\u8b8a\uff1f\",\n        options: [\"\u4e0d\u662f\", \"\u662f\"],\n        nextQuestion: [\"A\", \"D\"]\n      }\n    ],\n    results: {\n      A: \"\u5728\u611f\u60c5\u7684\u4e16\u754c\u88e1\uff0c\u5176\u5be6\u4e0d\u55ae\u6b62\u6709\u65e5\u4e45\u751f\u60c5\u4e00\u8a5e\uff0c\u4e5f\u6709\u60c5\u4e45\u751f\u53ad\u4e00\u8a5e\uff0c\u5169\u500b\u4eba\u5728\u4e00\u8d77\u7684\u6642\u9593\u4e45\u4e86\uff0c\u96e3\u514d\u6703\u5931\u53bb\u4e86\u6700\u521d\u7684\u71b1\u60c5\uff0c\u518d\u52a0\u4e0a\u4e00\u4e9b\u77db\u76fe\u548c\u722d\u5435\uff0c\u5f88\u96e3\u7e7c\u7e8c\u7dad\u6301\u71b1\u6200\u6642\u671f\u90a3\u822c\u751c\u871c\u7684\u72c0\u614b\uff0c\u5728\u9019\u7a2e\u60c5\u6cc1\u4e0b\uff0c\u4f60\u53ef\u4ee5\u5617\u8a66\u8457\u88fd\u9020\u4e00\u4e9b\u65b0\u9bae\u611f\uff0c\u90a3\u6a23\u53ef\u4ee5\u5ef6\u9577\u4f60\u5011\u7684\u6200\u611b\u4fdd\u8cea\u671f\u3002\",\n      B: \"\u60f3\u8981\u5ef6\u9577\u4f60\u7684\u611b\u60c5\u4fdd\u8cea\u671f\uff0c\u4f60\u61c9\u8a72\u5728\u6200\u4eba\u8eab\u4e0a\u591a\u82b1\u9ede\u6642\u9593\u548c\u5fc3\u601d\uff0c\u4e0d\u8981\u8b93\u5c0d\u65b9\u7522\u751f\u758f\u9060\u611f\u548c\u7126\u616e\u611f\uff0c\u5982\u679c\u4f60\u5be6\u5728\u7121\u5f9e\u4e0b\u624b\uff0c\u90a3\u5c31\u5f9e\u65e5\u5e38\u7684\u95dc\u5fc3\u958b\u59cb\u5427\uff0c\u53bb\u50be\u807d\u5c0d\u65b9\u7684\u60f3\u6cd5\uff0c\u4f60\u6709\u4ec0\u9ebc\u5fc3\u4e8b\uff0c\u4e5f\u53ef\u4ee5\u5617\u8a66\u8457\u8aaa\u8207\u5c0d\u65b9\u807d\uff0c\u65e2\u7136\u4f60\u7684\u5fc3\u88e1\u6709\u5c0d\u65b9\uff0c\u5c31\u4e0d\u8981\u505a\u51fa\u758f\u9060\u5c0d\u65b9\u7684\u884c\u70ba\u4e86\u3002\",\n      C: \"\u5728\u611f\u60c5\u88e1\uff0c\u5982\u679c\u7e3d\u662f\u62ff\u8457\u5c0d\u65b9\u7684\u7f3a\u9ede\u8aaa\u4e8b\uff0c\u4e0d\u4f46\u6703\u6253\u64ca\u5230\u5c0d\u65b9\u7684\u81ea\u4fe1\u5fc3\uff0c\u4e5f\u6703\u975e\u5e38\u4e0d\u5229\u65bc\u5169\u4eba\u4e4b\u9593\u7684\u611f\u60c5\uff0c\u60f3\u8981\u5ef6\u9577\u4f60\u5011\u7684\u611b\u60c5\u4fdd\u8cea\u671f\uff0c\u5728\u65e5\u5e38\u7684\u76f8\u8655\u4e2d\uff0c\u4f60\u7684\u95dc\u6ce8\u9ede\u61c9\u8a72\u591a\u653e\u5728\u5c0d\u65b9\u7684\u512a\u9ede\u4e0a\uff0c\u800c\u4e0d\u662f\u4e00\u5473\u5730\u76ef\u8457\u5c0d\u65b9\u7684\u7f3a\u9ede\uff0c\u5f97\u5230\u4e86\u4f60\u7684\u80af\u5b9a\u5f8c\uff0c\u6200\u4eba\u4e5f\u6703\u66f4\u81ea\u4fe1\u3002\",\n      D: \"\u8207\u6200\u4eba\u76f8\u8655\u7684\u904e\u7a0b\u4e2d\uff0c\u5982\u679c\u4f60\u7fd2\u6163\u65bc\u807d\u5c0d\u65b9\u7684\uff0c\u5176\u5be6\u4f60\u53ef\u4ee5\u505a\u51fa\u4e00\u4e9b\u5c0f\u6539\u8b8a\uff0c\u901a\u904e\u73a9\u4e00\u4e9b\u5c0f\u904a\u6232\u7684\u65b9\u5f0f\uff0c\u6bd4\u5982\uff0c\u4e3b\u52d5\u5411\u6200\u4eba\u767c\u8d77\u5c0f\u6311\u6230\uff0c\u5012\u4e5f\u4e0d\u5fc5\u904e\u5206\u7cfe\u7d50\u65bc\u52dd\u8ca0\uff0c\u4f60\u7684\u76ee\u7684\u61c9\u8a72\u662f\u8b93\u5c0d\u65b9\u89ba\u5f97\uff0c\u4f60\u4e26\u4e0d\u662f\u4e00\u500b\u552f\u547d\u662f\u5f9e\u7684\u4eba\uff0c\u9019\u6a23\u5c0d\u65b9\u6703\u5c0d\u4f60\u66f4\u611f\u8208\u8da3\uff0c\u4f60\u5011\u7684\u6200\u611b\u4fdd\u8cea\u671f\u4e5f\u6703\u66f4\u9577\u3002\"\n    },\n    \n    init: function() {\n      \/\/ \u8a2d\u7f6e\u4e8b\u4ef6\u76e3\u807d\u5668\n      document.getElementById('love-quiz-start-btn').addEventListener('click', this.startQuiz.bind(this));\n      document.getElementById('love-quiz-prev-btn').addEventListener('click', this.prevQuestion.bind(this));\n      document.getElementById('love-quiz-restart-btn').addEventListener('click', this.restartQuiz.bind(this));\n      \n      \/\/ \u8a2d\u7f6e\u7e3d\u984c\u76ee\u6578\n      document.getElementById('love-quiz-total-questions').textContent = this.questions.length;\n    },\n    \n    startQuiz: function() {\n      this.showPage('love-quiz-questions');\n      this.renderQuestion(0);\n    },\n    \n    renderQuestion: function(index) {\n      const question = this.questions[index];\n      const container = document.getElementById('love-quiz-question-container');\n      \n      \/\/ \u66f4\u65b0\u9032\u5ea6\n      document.getElementById('love-quiz-current-question').textContent = index + 1;\n      document.getElementById('love-quiz-progress-fill').style.width = `${((index + 1) \/ this.questions.length) * 100}%`;\n      \n      \/\/ \u6e32\u67d3\u554f\u984c\n      container.innerHTML = `\n        <div class=\"love-quiz-question\">\n          <h3>${question.text}<\/h3>\n          <div class=\"love-quiz-options\">\n            ${question.options.map((option, i) => `\n              <div class=\"love-quiz-option\" data-index=\"${i}\">\n                ${option}\n              <\/div>\n            `).join('')}\n          <\/div>\n        <\/div>\n      `;\n      \n      \/\/ \u5982\u679c\u5df2\u7d93\u56de\u7b54\u904e\uff0c\u6a19\u8a18\u9078\u4e2d\u9078\u9805\n      if (this.answers[index] !== undefined) {\n        const selectedOption = container.querySelector(`.love-quiz-option[data-index=\"${this.answers[index]}\"]`);\n        if (selectedOption) {\n          selectedOption.classList.add('selected');\n        }\n      }\n      \n      \/\/ \u6dfb\u52a0\u9078\u9805\u4e8b\u4ef6\u76e3\u807d\u5668\n      const options = container.querySelectorAll('.love-quiz-option');\n      options.forEach(option => {\n        option.addEventListener('click', this.selectOption.bind(this));\n      });\n      \n      \/\/ \u63a7\u5236\u4e0a\u4e00\u984c\u6309\u9215\u986f\u793a\n      document.getElementById('love-quiz-prev-btn').style.display = index === 0 ? 'none' : 'block';\n      \n      \/\/ \u6efe\u52d5\u5230\u9802\u90e8\n      this.scrollToTop();\n      \n      this.currentQuestion = index;\n    },\n    \n    selectOption: function(event) {\n      const optionIndex = parseInt(event.currentTarget.getAttribute('data-index'));\n      \n      \/\/ \u6a19\u8a18\u9078\u4e2d\u72c0\u614b\n      const options = document.querySelectorAll('.love-quiz-option');\n      options.forEach(opt => opt.classList.remove('selected'));\n      event.currentTarget.classList.add('selected');\n      \n      \/\/ \u4fdd\u5b58\u56de\u7b54\n      this.answers[this.currentQuestion] = optionIndex;\n      \n      \/\/ \u5ef6\u9072\u4e00\u4e0b\uff0c\u8b93\u7528\u6236\u770b\u5230\u9078\u4e2d\u6548\u679c\n      setTimeout(() => {\n        const nextStep = this.questions[this.currentQuestion].nextQuestion[optionIndex];\n        \n        \/\/ \u5982\u679c\u662f\u4e0b\u4e00\u984c\u6578\u5b57\u7d22\u5f15\n        if (typeof nextStep === 'number') {\n          this.renderQuestion(nextStep);\n        } else {\n          \/\/ \u5982\u679c\u662f\u7d50\u679c\u985e\u5225\n          this.resultCategory = nextStep;\n          this.showResults();\n        }\n      }, 300);\n    },\n    \n    prevQuestion: function() {\n      \/\/ \u627e\u5230\u524d\u4e00\u500b\u554f\u984c\n      for (let i = 0; i < this.questions.length; i++) {\n        for (let j = 0; j < this.questions[i].nextQuestion.length; j++) {\n          if (this.questions[i].nextQuestion[j] === this.currentQuestion) {\n            this.renderQuestion(i);\n            return;\n          }\n        }\n      }\n      \n      \/\/ \u5982\u679c\u627e\u4e0d\u5230\uff0c\u9ed8\u8a8d\u56de\u5230\u7b2c\u4e00\u984c\n      this.renderQuestion(0);\n    },\n    \n    showResults: function() {\n      this.showPage('love-quiz-results');\n      \n      \/\/ \u986f\u793a\u7d50\u679c\u6587\u672c\n      document.getElementById('love-quiz-result-text').textContent = this.results[this.resultCategory];\n      \n      \/\/ \u5275\u5efa\u5716\u8868\n      this.createResultChart();\n      \n      \/\/ \u6efe\u52d5\u5230\u9802\u90e8\n      this.scrollToTop();\n    },\n    \n    createResultChart: function() {\n      \/\/ \u7372\u53d6Canvas\u5143\u7d20\n      const ctx = document.getElementById('love-quiz-chart').getContext('2d');\n      \n      \/\/ \u6839\u64da\u7d50\u679c\u985e\u5225\u751f\u6210\u4e0d\u540c\u7684\u6578\u64da\n      let data = [];\n      let aspectLabels = ['\u6e9d\u901a\u80fd\u529b', '\u60c5\u611f\u95dc\u61f7', '\u76f8\u8655\u6280\u5de7', '\u81ea\u6211\u8a8d\u77e5', '\u611f\u60c5\u7dad\u8b77'];\n      \n      switch(this.resultCategory) {\n        case 'A':\n          data = [70, 65, 80, 60, 75];\n          break;\n        case 'B':\n          data = [60, 85, 65, 70, 80];\n          break;\n        case 'C':\n          data = [85, 75, 70, 80, 65];\n          break;\n        case 'D':\n          data = [75, 60, 85, 75, 70];\n          break;\n        default:\n          data = [70, 70, 70, 70, 70];\n      }\n      \n      \/\/ \u5275\u5efa\u5716\u8868\n      if (window.loveQuizChart) {\n        window.loveQuizChart.destroy();\n      }\n      \n      window.loveQuizChart = new Chart(ctx, {\n        type: 'radar',\n        data: {\n          labels: aspectLabels,\n          datasets: [{\n            label: '\u611b\u60c5\u8981\u7d20\u5206\u6790',\n            data: data,\n            backgroundColor: 'rgba(255, 107, 107, 0.2)',\n            borderColor: 'rgba(255, 107, 107, 1)',\n            pointBackgroundColor: 'rgba(255, 107, 107, 1)',\n            pointBorderColor: '#fff',\n            pointHoverBackgroundColor: '#fff',\n            pointHoverBorderColor: 'rgba(255, 107, 107, 1)'\n          }]\n        },\n        options: {\n          elements: {\n            line: {\n              borderWidth: 3\n            }\n          },\n          scales: {\n            r: {\n              angleLines: {\n                display: true,\n                color: 'rgba(0, 0, 0, 0.1)'\n              },\n              suggestedMin: 0,\n              suggestedMax: 100,\n              ticks: {\n                stepSize: 20,\n                backdropColor: 'transparent'\n              }\n            }\n          },\n          plugins: {\n            legend: {\n              display: false\n            }\n          }\n        }\n      });\n    },\n    \n    restartQuiz: function() {\n      this.currentQuestion = 0;\n      this.answers = [];\n      this.resultCategory = '';\n      this.showPage('love-quiz-intro');\n    },\n    \n    showPage: function(pageId) {\n      \/\/ \u96b1\u85cf\u6240\u6709\u9801\u9762\n      const pages = document.querySelectorAll('.love-quiz-page');\n      pages.forEach(page => {\n        page.classList.remove('love-quiz-active');\n      });\n      \n      \/\/ \u986f\u793a\u6307\u5b9a\u9801\u9762\n      document.getElementById(pageId).classList.add('love-quiz-active');\n    },\n    \n    scrollToTop: function() {\n      \/\/ \u6efe\u52d5\u5230\u5bb9\u5668\u9802\u90e8\n      const container = document.getElementById('love-quiz-container');\n      if (container) {\n        container.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      }\n    }\n  };\n\n  \/\/ \u8f09\u5165Chart.js\n  function loadChartJs() {\n    if (window.Chart) {\n      \/\/ Chart.js\u5df2\u7d93\u8f09\u5165\n      LoveQuiz.init();\n    } else {\n      \/\/ \u8f09\u5165Chart.js\n      const script = document.createElement('script');\n      script.src = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/3.9.1\/chart.min.js';\n      script.integrity = 'sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==';\n      script.crossOrigin = 'anonymous';\n      script.referrerPolicy = 'no-referrer';\n      script.onload = function() {\n        LoveQuiz.init();\n      };\n      document.head.appendChild(script);\n    }\n  }\n\n  \/\/ \u7576DOM\u52a0\u8f09\u5b8c\u6210\u5f8c\u521d\u59cb\u5316\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', loadChartJs);\n  } else {\n    loadChartJs();\n  }\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u4e00\u822c\u4e5f\u4f1a\u60f3\u65b9\u8bbe\u6cd5\u53bb\u5ef6\u957f\u7231\u60c5\u4fdd\u8d28\u671f\uff0c\u5982\u679c\u5728\u4e00\u6bb5\u604b\u7231\u5173\u7cfb\u4e2d\uff0c\u4f60\u611f\u5230\u8eab\u5fc3\u4ff1\u75b2\u7684\u8bdd\uff0c\u4f60\u53ef\u80fd\u4f1a\u5fcd\u4e0d\u4f4f\u62b1\u6028\uff0c\u4e3a\u4f55\u7231\u60c5\u4fdd\u8d28\u671f\u4f1a\u90a3\u4e48\u77ed\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,178],"tags":[],"class_list":["post-2519","post","type-post","status-publish","format-standard","hentry","category-marriage","category-love"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2519","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=2519"}],"version-history":[{"count":2,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2519\/revisions"}],"predecessor-version":[{"id":10383,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2519\/revisions\/10383"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2519"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2519"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}