{"id":2567,"date":"2023-10-20T08:38:59","date_gmt":"2023-10-20T00:38:59","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2567"},"modified":"2025-08-28T00:29:21","modified_gmt":"2025-08-27T16:29:21","slug":"with-first-love","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/with-first-love","title":{"rendered":"\u5c0f\u6d4b\u9a8c\uff1a\u4f60\u4f1a\u4e0d\u4f1a\u6700\u7ec8\u7275\u624b\u521d\u604b\uff1f"},"content":{"rendered":"<!-- 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<!-- \u4e3b\u5bb9\u5668 -->\n<div id=\"quiz-container-9\" class=\"quiz-wrapper-9\">\n  \n  <!-- \u5f15\u5c0e\u9801 -->\n  <section id=\"quizintro9\" data-page=\"intro9\" class=\"quiz-page active\">\n    <div class=\"content-wrapper\">\n      <header class=\"text-center mb-5\">\n        <h2 class=\"intro-title fw-bold mb-3\">\u515c\u515c\u8f49\u8f49\uff0c\u4f60\u6703\u727d\u624b\u521d\u6200\u55ce\uff1f<\/h2>\n        <p class=\"intro-subtitle\">\u63a2\u7d22\u4f60\u8207\u521d\u6200\u7684\u7de3\u5206\u8ecc\u8de1<\/p>\n      <\/header>\n      \n      <div class=\"intro-content\">\n        <div class=\"features-grid mb-5\">\n          <!-- \u7279\u9ede\u5716\u6a19 -->\n          <div class=\"feature-item\">\n            <div class=\"feature-icon-wrapper\">\n              <i class=\"bi bi-heart-pulse\"><\/i>\n            <\/div>\n            <p class=\"feature-text\">\u6df1\u5ea6\u5256\u6790<\/p>\n          <\/div>\n          <div class=\"feature-item\">\n            <div class=\"feature-icon-wrapper\">\n              <i class=\"bi bi-stars\"><\/i>\n            <\/div>\n            <p class=\"feature-text\">\u7cbe\u6e96\u6e2c\u8a55<\/p>\n          <\/div>\n          <div class=\"feature-item\">\n            <div class=\"feature-icon-wrapper\">\n              <i class=\"bi bi-clock-history\"><\/i>\n            <\/div>\n            <p class=\"feature-text\">\u5feb\u901f\u6e2c\u9a57<\/p>\n          <\/div>\n          <div class=\"feature-item\">\n            <div class=\"feature-icon-wrapper\">\n              <i class=\"bi bi-graph-up\"><\/i>\n            <\/div>\n            <p class=\"feature-text\">\u8996\u89ba\u5206\u6790<\/p>\n          <\/div>\n        <\/div>\n        \n        <div class=\"intro-card mb-5\">\n          <p class=\"mb-3\">\u6200\u611b\uff0c\u6709\u611b\u5c31\u884c\u4e86\uff1b\u7d50\u5a5a\uff0c\u5169\u4eba\u4e4b\u9593\u9664\u4e86\u8981\u6709\u611b\u60c5\uff0c\u9084\u8981\u6709\u4e00\u9846\u5edd\u5b88\u4e00\u751f\u7684\u6c7a\u5fc3\u3002<\/p>\n          <p class=\"mb-3\">\u5728\u9047\u898b\u521d\u6200\u5f8c\uff0c\u53ea\u6709\u4e00\u5c0f\u90e8\u5206\u4eba\u80fd\u5920\u548c\u521d\u6200\u4e00\u76f4\u8d70\u4e0b\u53bb\u3002\u548c\u521d\u6200\u5206\u624b\u5f8c\uff0c\u4f60\u53ef\u80fd\u66fe\u9047\u5230\u904e\u66f4\u597d\u7684\u4eba\uff0c\u537b\u4e0d\u662f\u8db3\u5920\u9069\u5408\u7684\u4eba\uff0c\u515c\u515c\u8f49\u8f49\u5f8c\u767c\u73fe\u9084\u662f\u5fd8\u4e0d\u6389\u521d\u6200\u3002<\/p>\n          <p class=\"mb-0 fw-semibold highlight-text\">\u60f3\u77e5\u9053\u6700\u5f8c\u4f60\u6703\u4e0d\u6703\u727d\u624b\u521d\u6200\u55ce\uff1f\u900f\u904e\u9019\u500b\u7c21\u55ae\u7684\u6e2c\u9a57\uff0c\u63a2\u7d22\u4f60\u5167\u5fc3\u6df1\u8655\u7684\u7b54\u6848\u3002<\/p>\n        <\/div>\n        \n        <div class=\"text-center\">\n          <button class=\"btn-start\" data-action=\"start-quiz\">\n            <span>\u5f00\u59cb\u6d4b\u9a8c<\/span>\n            <i class=\"bi bi-arrow-right-circle ms-2\"><\/i>\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n  \n  <!-- \u6e2c\u9a57\u9801 -->\n  <section id=\"quizmain9\" data-page=\"quiz9\" class=\"quiz-page d-none\">\n    <div class=\"content-wrapper\">\n      <header class=\"text-center mb-4\">\n        <h2 class=\"page-title fw-bold\">\u521d\u6200\u7de3\u5206\u6e2c\u9a57<\/h2>\n      <\/header>\n      \n      <div class=\"quiz-content\">\n        <div class=\"question-container mb-4\">\n          <h3 class=\"question-title\">\u5728\u4ee5\u4e0b\u5e7e\u985e\u540d\u7a31\u7684\u98f2\u6599\u88e1\uff0c\u4f60\u7684\u7b2c\u4e00\u9078\u64c7\u662f\u4ec0\u9ebc\uff1f<\/h3>\n        <\/div>\n        \n        <div class=\"options-container\" role=\"group\" aria-label=\"\u6e2c\u9a57\u9078\u9805\">\n          <div class=\"option-wrapper\" data-option=\"A\">\n            <button class=\"option-btn\" type=\"button\">\n              <div class=\"option-content\">\n                <div class=\"option-indicator\">\n                  <div class=\"indicator-circle\"><\/div>\n                <\/div>\n                <div class=\"option-text-wrapper\">\n                  <span class=\"option-text\">\u5931\u61b6<\/span>\n                <\/div>\n              <\/div>\n            <\/button>\n          <\/div>\n          \n          <div class=\"option-wrapper\" data-option=\"B\">\n            <button class=\"option-btn\" type=\"button\">\n              <div class=\"option-content\">\n                <div class=\"option-indicator\">\n                  <div class=\"indicator-circle\"><\/div>\n                <\/div>\n                <div class=\"option-text-wrapper\">\n                  <span class=\"option-text\">\u56de\u61b6<\/span>\n                <\/div>\n              <\/div>\n            <\/button>\n          <\/div>\n          \n          <div class=\"option-wrapper\" data-option=\"C\">\n            <button class=\"option-btn\" type=\"button\">\n              <div class=\"option-content\">\n                <div class=\"option-indicator\">\n                  <div class=\"indicator-circle\"><\/div>\n                <\/div>\n                <div class=\"option-text-wrapper\">\n                  <span class=\"option-text\">\u82e6\u6200<\/span>\n                <\/div>\n              <\/div>\n            <\/button>\n          <\/div>\n          \n          <div class=\"option-wrapper\" data-option=\"D\">\n            <button class=\"option-btn\" type=\"button\">\n              <div class=\"option-content\">\n                <div class=\"option-indicator\">\n                  <div class=\"indicator-circle\"><\/div>\n                <\/div>\n                <div class=\"option-text-wrapper\">\n                  <span class=\"option-text\">\u6697\u6200<\/span>\n                <\/div>\n              <\/div>\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-page d-none\">\n    <div class=\"content-wrapper\">\n      <header class=\"text-center mb-4\">\n        <h2 class=\"page-title fw-bold\">\u4f60\u7684\u521d\u6200\u7de3\u5206\u5206\u6790<\/h2>\n      <\/header>\n      \n      <div class=\"result-content\">\n        <!-- \u4e3b\u8981\u7d50\u679c -->\n        <div class=\"result-card mb-4\">\n          <h3 class=\"result-title text-center\" id=\"result-title\"><\/h3>\n          <p class=\"result-desc\" id=\"result-description\"><\/p>\n        <\/div>\n        \n        <!-- \u5716\u8868\u5bb9\u5668 -->\n        <div class=\"chart-section mb-4\">\n          <div class=\"chart-wrapper\">\n            <canvas id=\"resultChart\"><\/canvas>\n          <\/div>\n        <\/div>\n        \n        <!-- \u8a73\u7d30\u5206\u6790 -->\n        <div class=\"analysis-card mb-4\">\n          <h4 class=\"section-subtitle\">\u6df1\u5ea6\u89e3\u6790<\/h4>\n          <div id=\"detailed-text\"><\/div>\n        <\/div>\n        \n        <!-- \u500b\u6027\u5316\u5efa\u8b70 -->\n        <div class=\"advice-card mb-4\">\n          <h4 class=\"section-subtitle\">\n            <i class=\"bi bi-lightbulb me-2\"><\/i>\u500b\u6027\u5316\u5efa\u8b70\n          <\/h4>\n          <div id=\"personal-advice\"><\/div>\n        <\/div>\n        \n        <!-- \u91cd\u65b0\u6e2c\u8a66\u6309\u9215 -->\n        <div class=\"text-center\">\n          <button class=\"btn-restart\" data-action=\"restart-quiz\">\n            <i class=\"bi bi-arrow-clockwise me-2\"><\/i>\n            <span>\u91cd\u65b0\u6d4b\u9a8c<\/span>\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n<\/div>\n\n<!-- CSS \u6a23\u5f0f -->\n<style>\n\/* \u57fa\u790e\u5bb9\u5668\u8a2d\u7f6e *\/\n#quiz-container-9 {\n  max-width: 750px;\n  margin: 0 auto;\n  padding: 2rem 1rem;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Microsoft JhengHei\", \"\u5fae\u8edf\u6b63\u9ed1\u9ad4\", sans-serif;\n  font-size: 16px;\n  line-height: 1.6;\n  color: #4a5568;\n}\n\n#quiz-container-9 * {\n  box-sizing: border-box;\n}\n\n#quiz-container-9 .content-wrapper {\n  width: 100%;\n}\n\n\/* \u5f15\u5c0e\u9801\u6a19\u984c *\/\n#quiz-container-9 .intro-title {\n  font-size: 2rem;\n  background: linear-gradient(135deg, #86b3a1 0%, #7da594 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  margin-bottom: 0.5rem;\n}\n\n#quiz-container-9 .intro-subtitle {\n  font-size: 1.1rem;\n  color: #718096;\n}\n\n\/* \u7279\u9ede\u7db2\u683c *\/\n#quiz-container-9 .features-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n  gap: 1.5rem;\n  margin-bottom: 2rem;\n}\n\n#quiz-container-9 .feature-item {\n  text-align: center;\n}\n\n#quiz-container-9 .feature-icon-wrapper {\n  width: 70px;\n  height: 70px;\n  margin: 0 auto 0.75rem;\n  background: linear-gradient(135deg, #f0fdf4 0%, #e6f7f1 100%);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 4px 15px rgba(134, 179, 161, 0.15);\n  transition: transform 0.3s ease;\n}\n\n#quiz-container-9 .feature-icon-wrapper:hover {\n  transform: translateY(-3px);\n}\n\n#quiz-container-9 .feature-icon-wrapper i {\n  font-size: 1.75rem;\n  color: #86b3a1;\n}\n\n#quiz-container-9 .feature-text {\n  font-size: 0.9rem;\n  font-weight: 600;\n  color: #4a5568;\n  margin: 0;\n}\n\n\/* \u4ecb\u7d39\u5361\u7247 *\/\n#quiz-container-9 .intro-card {\n  background: white;\n  padding: 2rem;\n  border-radius: 1rem;\n  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);\n}\n\n#quiz-container-9 .highlight-text {\n  color: #7da594;\n}\n\n\/* \u958b\u59cb\u6309\u9215 *\/\n#quiz-container-9 .btn-start {\n  background: linear-gradient(135deg, #86b3a1 0%, #7da594 100%);\n  color: white;\n  border: none;\n  padding: 0.875rem 2.5rem;\n  border-radius: 2rem;\n  font-size: 1.1rem;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s ease;\n  box-shadow: 0 4px 15px rgba(134, 179, 161, 0.3);\n}\n\n#quiz-container-9 .btn-start:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 25px rgba(134, 179, 161, 0.4);\n}\n\n\/* \u9801\u9762\u6a19\u984c *\/\n#quiz-container-9 .page-title {\n  font-size: 1.75rem;\n  color: #2d3748;\n  margin-bottom: 1.5rem;\n}\n\n\/* \u554f\u984c\u6a19\u984c - \u4f7f\u7528h3\u6a19\u7c64 *\/\n#quiz-container-9 .question-title {\n  font-size: 22px;\n  font-weight: bold;\n  color: #2d3748;\n  margin-bottom: 1.5rem;\n  line-height: 1.5;\n}\n\n\/* \u9078\u9805\u5bb9\u5668 *\/\n#quiz-container-9 .options-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.875rem;\n}\n\n#quiz-container-9 .option-wrapper {\n  width: 100%;\n}\n\n#quiz-container-9 .option-btn {\n  width: 100%;\n  background: white;\n  border: none;\n  padding: 1.25rem;\n  border-radius: 0.75rem;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);\n  cursor: pointer;\n  transition: all 0.3s ease;\n  text-align: left;\n}\n\n#quiz-container-9 .option-btn:hover {\n  transform: translateX(5px);\n  box-shadow: 0 4px 20px rgba(134, 179, 161, 0.15);\n}\n\n#quiz-container-9 .option-btn.selected {\n  background: linear-gradient(135deg, #f0fdf4 0%, #e6f7f1 100%);\n  box-shadow: 0 4px 20px rgba(134, 179, 161, 0.2);\n}\n\n#quiz-container-9 .option-content {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n\/* \u5713\u5f62\u6307\u793a\u5668 *\/\n#quiz-container-9 .indicator-circle {\n  width: 24px;\n  height: 24px;\n  border: 2px solid #cbd5e0;\n  border-radius: 50%;\n  position: relative;\n  transition: all 0.3s ease;\n  flex-shrink: 0;\n}\n\n#quiz-container-9 .option-btn:hover .indicator-circle {\n  border-color: #86b3a1;\n}\n\n#quiz-container-9 .option-btn.selected .indicator-circle {\n  background: #86b3a1;\n  border-color: #86b3a1;\n}\n\n#quiz-container-9 .option-btn.selected .indicator-circle:after {\n  content: '\u2713';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: white;\n  font-size: 14px;\n  font-weight: bold;\n}\n\n\/* \u9078\u9805\u6587\u5b57 - 18px *\/\n#quiz-container-9 .option-text {\n  font-size: 18px;\n  color: #4a5568;\n  font-weight: 500;\n}\n\n#quiz-container-9 .option-btn:hover .option-text {\n  color: #7da594;\n}\n\n#quiz-container-9 .option-btn.selected .option-text {\n  color: #68957f;\n  font-weight: 600;\n}\n\n\/* \u7d50\u679c\u5361\u7247 *\/\n#quiz-container-9 .result-card,\n#quiz-container-9 .analysis-card,\n#quiz-container-9 .advice-card {\n  background: white;\n  padding: 1.75rem;\n  border-radius: 0.75rem;\n  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);\n}\n\n#quiz-container-9 .result-title {\n  font-size: 1.5rem;\n  color: #7da594;\n  font-weight: bold;\n  margin-bottom: 1rem;\n}\n\n#quiz-container-9 .result-desc {\n  font-size: 1.1rem;\n  color: #4a5568;\n  line-height: 1.7;\n  margin: 0;\n}\n\n\/* \u5efa\u8b70\u5361\u7247\u7279\u6b8a\u6a23\u5f0f *\/\n#quiz-container-9 .advice-card {\n  background: linear-gradient(135deg, #fafffe 0%, #f0fdf4 100%);\n  border: 1px solid #e6f7f1;\n}\n\n#quiz-container-9 .section-subtitle {\n  font-size: 1.25rem;\n  color: #2d3748;\n  font-weight: bold;\n  margin-bottom: 1rem;\n  display: flex;\n  align-items: center;\n}\n\n#quiz-container-9 .section-subtitle i {\n  color: #f6c866;\n}\n\n\/* \u5716\u8868\u5bb9\u5668 *\/\n#quiz-container-9 .chart-section {\n  background: white;\n  padding: 1.5rem;\n  border-radius: 0.75rem;\n  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);\n}\n\n#quiz-container-9 .chart-wrapper {\n  max-width: 400px;\n  height: 300px;\n  margin: 0 auto;\n}\n\n\/* \u91cd\u65b0\u6e2c\u8a66\u6309\u9215 *\/\n#quiz-container-9 .btn-restart {\n  background: linear-gradient(135deg, #86b3a1 0%, #7da594 100%);\n  color: white;\n  border: none;\n  padding: 0.875rem 2rem;\n  border-radius: 2rem;\n  font-size: 1rem;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s ease;\n  box-shadow: 0 4px 15px rgba(134, 179, 161, 0.3);\n}\n\n#quiz-container-9 .btn-restart:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 25px rgba(134, 179, 161, 0.4);\n}\n\n\/* \u5efa\u8b70\u5217\u8868\u6a23\u5f0f *\/\n#quiz-container-9 .advice-list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n#quiz-container-9 .advice-item {\n  position: relative;\n  padding-left: 2rem;\n  margin-bottom: 1rem;\n  color: #4a5568;\n  line-height: 1.7;\n}\n\n#quiz-container-9 .advice-item:before {\n  content: '\u2726';\n  position: absolute;\n  left: 0;\n  color: #86b3a1;\n  font-size: 1.2rem;\n}\n\n\/* \u97ff\u61c9\u5f0f\u8a2d\u8a08 *\/\n@media (max-width: 576px) {\n  #quiz-container-9 {\n    padding: 1rem;\n  }\n  \n  #quiz-container-9 .intro-title {\n    font-size: 1.5rem;\n  }\n  \n  #quiz-container-9 .features-grid {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 1rem;\n  }\n  \n  #quiz-container-9 .feature-icon-wrapper {\n    width: 60px;\n    height: 60px;\n  }\n  \n  #quiz-container-9 .feature-icon-wrapper i {\n    font-size: 1.5rem;\n  }\n  \n  #quiz-container-9 .btn-start {\n    padding: 0.75rem 2rem;\n    font-size: 1rem;\n  }\n  \n  #quiz-container-9 .question-title {\n    font-size: 20px;\n  }\n  \n  #quiz-container-9 .option-text {\n    font-size: 16px;\n  }\n  \n  #quiz-container-9 .intro-card,\n  #quiz-container-9 .result-card,\n  #quiz-container-9 .analysis-card,\n  #quiz-container-9 .advice-card {\n    padding: 1.25rem;\n  }\n}\n\n\/* \u9801\u9762\u5207\u63db\u52d5\u756b *\/\n#quiz-container-9 .quiz-page {\n  animation: fadeIn 0.3s ease;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n<\/style>\n\n<!-- Chart.js -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n\n<!-- JavaScript -->\n<script>\n(function() {\n  'use strict';\n  \n  \/\/ \u6e2c\u9a57\u7d50\u679c\u8cc7\u6599\n  const quizResults = {\n    A: {\n      title: '\u7406\u6027\u653e\u624b\u578b',\n      description: '\u5728\u4f60\u770b\u4f86\uff0c\u521d\u6200\u53ea\u662f\u4e00\u6bb5\u7f8e\u597d\u800c\u50b7\u611f\u7684\u56de\u61b6\u3002\u54ea\u6015\u5b83\u662f\u5f88\u7f8e\u597d\u7684\uff0c\u4f60\u4e5f\u4e0d\u60f3\u7d93\u6b77\u4e00\u6b21\uff0c\u4e0d\u5e0c\u671b\u7d66\u81ea\u5df1\u9020\u6210\u4e8c\u6b21\u50b7\u5bb3\u3002',\n      detail: '\u5206\u624b\u5f8c\uff0c\u70ba\u4e86\u4e0d\u7d66\u81ea\u5df1\u589e\u6dfb\u4e0d\u5fc5\u8981\u7684\u50b7\u5bb3\uff0c\u4f60\u6703\u52c7\u6562\u653e\u624b\u70ba\u611b\u756b\u4e0a\u53e5\u865f\u3002\u62b1\u8457\u9019\u7a2e\u60f3\u6cd5\u7684\u4f60\uff0c\u6700\u7d42\u80fd\u5920\u548c\u521d\u6200\u8d70\u5230\u4e00\u8d77\u7684\u5e0c\u671b\u4e0d\u5927\u3002\u4f60\u66f4\u50be\u5411\u65bc\u5411\u524d\u770b\uff0c\u5c0b\u627e\u65b0\u7684\u53ef\u80fd\u6027\uff0c\u800c\u4e0d\u662f\u6c89\u6eba\u65bc\u904e\u53bb\u3002',\n      advice: [\n        '\u63a5\u7d0d\u904e\u53bb\uff1a\u5c07\u521d\u6200\u8996\u70ba\u4eba\u751f\u6210\u9577\u7684\u91cd\u8981\u7d93\u6b77\uff0c\u800c\u975e\u9700\u8981\u907a\u5fd8\u7684\u50b7\u75db',\n        '\u4fdd\u6301\u958b\u653e\uff1a\u5728\u65b0\u7684\u611f\u60c5\u4e2d\u4fdd\u6301\u771f\u8aa0\u8207\u958b\u653e\uff0c\u4e0d\u8981\u56e0\u904e\u53bb\u800c\u7bc9\u8d77\u5fc3\u7246',\n        '\u81ea\u6211\u6210\u9577\uff1a\u628a\u91cd\u5fc3\u653e\u5728\u500b\u4eba\u6210\u9577\u4e0a\uff0c\u8b93\u81ea\u5df1\u6210\u70ba\u66f4\u597d\u7684\u4eba',\n        '\u9069\u6642\u653e\u624b\uff1a\u5b78\u6703\u5728\u9069\u7576\u7684\u6642\u5019\u653e\u624b\uff0c\u9019\u662f\u6210\u719f\u7684\u8868\u73fe',\n        '\u73cd\u60dc\u7576\u4e0b\uff1a\u5c08\u6ce8\u65bc\u73fe\u5728\u548c\u672a\u4f86\uff0c\u5275\u9020\u65b0\u7684\u7f8e\u597d\u56de\u61b6'\n      ],\n      scores: {\n        '\u5fa9\u5408\u53ef\u80fd\u6027': 20,\n        '\u7406\u6027\u7a0b\u5ea6': 95,\n        '\u60c5\u611f\u4f9d\u6200': 25,\n        '\u653e\u624b\u80fd\u529b': 90\n      }\n    },\n    B: {\n      title: '\u5ff5\u820a\u61f7\u60c5\u578b',\n      description: '\u5c0d\u65bc\u4f60\u800c\u8a00\uff0c\u521d\u6200\u662f\u4e00\u6bb5\u7f8e\u597d\u7684\u56de\u61b6\u3002\u8ddf\u521d\u6200\u5206\u624b\u5f8c\uff0c\u54ea\u6015\u4f60\u9082\u9005\u4e86\u5e7e\u6bb5\u6200\u60c5\uff0c\u4f46\u5fc3\u88e1\u9084\u662f\u7559\u6709\u521d\u6200\u7684\u4f4d\u7f6e\u3002',\n      detail: '\u4f60\u6839\u672c\u5fd8\u4e0d\u6389\u5c0d\u65b9\u3002\u5982\u679c\u5f7c\u6b64\u90fd\u60f3\u7d66\u5c0d\u65b9\u4e00\u500b\u6a5f\u6703\uff0c\u4f60\u548c\u521d\u6200\u9084\u662f\u80fd\u5920\u8d70\u5230\u4e00\u8d77\u7684\u3002\u4f60\u8ddf\u6700\u521d\u611b\u4e0a\u7684\u90a3\u500b\u4eba\uff0c\u5728\u5206\u5206\u5408\u5408\u515c\u515c\u8f49\u8f49\u5f8c\u9084\u662f\u6703\u5730\u8001\u5929\u8352\u3002\u521d\u6200\u5728\u4f60\u5fc3\u4e2d\u6709\u8457\u7121\u53ef\u66ff\u4ee3\u7684\u5730\u4f4d\u3002',\n      advice: [\n        '\u7406\u6027\u8a55\u4f30\uff1a\u51b7\u975c\u601d\u8003\u4f60\u5c0d\u521d\u6200\u7684\u611f\u60c5\u662f\u771f\u611b\u9084\u662f\u7f8e\u5316\u7684\u56de\u61b6',\n        '\u6d3b\u5728\u7576\u4e0b\uff1a\u4e0d\u8981\u8b93\u904e\u53bb\u7684\u611f\u60c5\u5f71\u97ff\u73fe\u5728\u7684\u751f\u6d3b\u54c1\u8cea',\n        '\u5766\u8aa0\u6e9d\u901a\uff1a\u5982\u679c\u6709\u6a5f\u6703\u8907\u5408\uff0c\u8981\u958b\u8aa0\u5e03\u516c\u5730\u8a0e\u8ad6\u904e\u53bb\u7684\u554f\u984c',\n        '\u500b\u4eba\u6210\u9577\uff1a\u5229\u7528\u9019\u6bb5\u6642\u9593\u63d0\u5347\u81ea\u5df1\uff0c\u6210\u70ba\u66f4\u597d\u7684\u4f34\u4fb6',\n        '\u8a2d\u5b9a\u754c\u9650\uff1a\u7d66\u81ea\u5df1\u8a2d\u5b9a\u7b49\u5f85\u7684\u671f\u9650\uff0c\u4e0d\u8981\u7121\u6b62\u5883\u5730\u7b49\u5f85'\n      ],\n      scores: {\n        '\u5fa9\u5408\u53ef\u80fd\u6027': 85,\n        '\u7406\u6027\u7a0b\u5ea6': 40,\n        '\u60c5\u611f\u4f9d\u6200': 95,\n        '\u653e\u624b\u80fd\u529b': 20\n      }\n    },\n    C: {\n      title: '\u6562\u611b\u6562\u6068\u578b',\n      description: '\u9047\u898b\u521d\u6200\u5f8c\uff0c\u4f60\u66fe\u596e\u4e0d\u9867\u8eab\u5730\u6295\u5165\u5230\u611b\u60c5\u88e1\uff0c\u66fe\u653e\u624b\u53bb\u611b\uff0c\u628a\u521d\u6200\u7576\u4f5c\u662f\u6b64\u751f\u646f\u611b\u3002',\n      detail: '\u4f46\u5728\u5206\u624b\u5f8c\uff0c\u6562\u611b\u6562\u6068\u7684\u4f60\u53ef\u4ee5\u505a\u5230\u4e0d\u6b7b\u7e8f\u721b\u6253\u3001\u4e0d\u6253\u64fe\u3002\u5c0d\u65b9\u5df2\u7d93\u4e0d\u518d\u662f\u90a3\u500b\u300c\u5c0d\u7684\u4eba\u300d\u3002\u54ea\u6015\u521d\u6200\u4e3b\u52d5\u6c42\u8907\u5408\uff0c\u4f60\u4e5f\u4e0d\u6703\u548c\u5c0d\u65b9\u5728\u4e00\u8d77\u3002\u4f60\u76f8\u4fe1\u904e\u53bb\u7684\u5c31\u8b93\u5b83\u904e\u53bb\uff0c\u672a\u4f86\u9084\u6709\u66f4\u9069\u5408\u7684\u4eba\u5728\u7b49\u5f85\u3002',\n      advice: [\n        '\u4fdd\u6301\u521d\u5fc3\uff1a\u7e7c\u7e8c\u4fdd\u6301\u4f60\u6562\u611b\u6562\u6068\u7684\u6027\u683c\uff0c\u9019\u662f\u4f60\u7684\u9b45\u529b\u6240\u5728',\n        '\u7e3d\u7d50\u7d93\u9a57\uff1a\u5f9e\u904e\u53bb\u7684\u611f\u60c5\u4e2d\u5b78\u7fd2\uff0c\u4e86\u89e3\u81ea\u5df1\u771f\u6b63\u9700\u8981\u4ec0\u9ebc',\n        '\u52c7\u65bc\u5617\u8a66\uff1a\u4e0d\u8981\u56e0\u70ba\u4e00\u6b21\u5931\u6557\u5c31\u5bb3\u6015\u518d\u6b21\u6295\u5165\u611f\u60c5',\n        '\u8a2d\u7acb\u6a19\u6e96\uff1a\u660e\u78ba\u81ea\u5df1\u7684\u64c7\u5076\u6a19\u6e96\uff0c\u4e0d\u8f15\u6613\u59a5\u5354',\n        '\u4eab\u53d7\u55ae\u8eab\uff1a\u5728\u9047\u5230\u5c0d\u7684\u4eba\u4e4b\u524d\uff0c\u597d\u597d\u4eab\u53d7\u55ae\u8eab\u751f\u6d3b\u7684\u81ea\u7531'\n      ],\n      scores: {\n        '\u5fa9\u5408\u53ef\u80fd\u6027': 15,\n        '\u7406\u6027\u7a0b\u5ea6': 80,\n        '\u60c5\u611f\u4f9d\u6200': 35,\n        '\u653e\u624b\u80fd\u529b': 95\n      }\n    },\n    D: {\n      title: '\u6df1\u60c5\u5b88\u5019\u578b',\n      description: '\u5982\u679c\u4f60\u548c\u521d\u6200\u5728\u4e00\u6642\u885d\u52d5\u4e0b\u5206\u4e86\u624b\uff0c\u5206\u624b\u5f8c\u54ea\u6015\u904e\u53bb\u5f88\u4e45\uff0c\u4f60\u9084\u662f\u653e\u4e0d\u4e0b\u521d\u6200\u3002',\n      detail: '\u4e5f\u8a31\u4f60\u7d93\u6b77\u4e86\u5f88\u591a\u6bb5\u611f\u60c5\uff0c\u4f46\u5c0d\u65b9\u9084\u662f\u4e00\u76f4\u4f4f\u5728\u4f60\u5fc3\u88e1\u3002\u7576\u4f60\u548c\u521d\u6200\u518d\u6b21\u9047\u898b\u6642\uff0c\u5982\u679c\u5f7c\u6b64\u90fd\u9084\u6c92\u6709\u9047\u5230\u5c0d\u7684\u4eba\uff0c\u800c\u4e14\u90fd\u6709\u8907\u5408\u7684\u60f3\u6cd5\uff0c\u4e0d\u8ad6\u8ab0\u4e3b\u52d5\uff0c\u4f60\u5011\u90fd\u6703\u91cd\u65b0\u5728\u4e00\u8d77\u3002\u515c\u515c\u8f49\u8f49\uff0c\u6700\u5f8c\u4f60\u9084\u662f\u6703\u727d\u624b\u521d\u6200\u3002',\n      advice: [\n        '\u4e3b\u52d5\u51fa\u64ca\uff1a\u5982\u679c\u771f\u7684\u653e\u4e0d\u4e0b\uff0c\u4e0d\u59a8\u4e3b\u52d5\u806f\u7e6b\uff0c\u7d66\u5f7c\u6b64\u4e00\u500b\u6a5f\u6703',\n        '\u89e3\u6c7a\u554f\u984c\uff1a\u8a8d\u771f\u601d\u8003\u7576\u521d\u5206\u624b\u7684\u539f\u56e0\uff0c\u78ba\u4fdd\u554f\u984c\u5df2\u7d93\u89e3\u6c7a',\n        '\u4fdd\u6301\u6210\u9577\uff1a\u5728\u7b49\u5f85\u7684\u540c\u6642\u4e0d\u8981\u505c\u6b62\u500b\u4eba\u6210\u9577',\n        '\u8a2d\u5b9a\u5e95\u7dda\uff1a\u7d66\u81ea\u5df1\u7684\u7b49\u5f85\u8a2d\u5b9a\u5408\u7406\u7684\u6642\u9593\u548c\u5e95\u7dda',\n        '\u6e96\u5099\u653e\u624b\uff1a\u505a\u597d\u5169\u624b\u6e96\u5099\uff0c\u65e2\u671f\u5f85\u5fa9\u5408\u4e5f\u80fd\u63a5\u53d7\u5404\u81ea\u5b89\u597d'\n      ],\n      scores: {\n        '\u5fa9\u5408\u53ef\u80fd\u6027': 90,\n        '\u7406\u6027\u7a0b\u5ea6': 30,\n        '\u60c5\u611f\u4f9d\u6200': 90,\n        '\u653e\u624b\u80fd\u529b': 15\n      }\n    }\n  };\n  \n  class FirstLoveQuiz {\n    constructor() {\n      this.currentPage = 'intro';\n      this.selectedOption = null;\n      this.chartInstance = null;\n      this.init();\n    }\n    \n    init() {\n      this.bindEvents();\n      this.cacheElements();\n    }\n    \n    cacheElements() {\n      this.container = document.querySelector('#quiz-container-9');\n      this.introPage = document.querySelector('#quizintro9');\n      this.quizPage = document.querySelector('#quizmain9');\n      this.resultPage = document.querySelector('#quizresult9');\n    }\n    \n    bindEvents() {\n      \/\/ \u4f7f\u7528\u4e8b\u4ef6\u59d4\u8a17\n      document.addEventListener('click', (e) => {\n        \/\/ \u958b\u59cb\u6e2c\u9a57\u6309\u9215\n        if (e.target.closest('[data-action=\"start-quiz\"]')) {\n          this.startQuiz();\n        }\n        \n        \/\/ \u9078\u9805\u6309\u9215\n        if (e.target.closest('.option-btn')) {\n          const optionWrapper = e.target.closest('.option-wrapper');\n          if (optionWrapper) {\n            this.selectOption(optionWrapper.dataset.option);\n          }\n        }\n        \n        \/\/ \u91cd\u65b0\u6e2c\u9a57\u6309\u9215\n        if (e.target.closest('[data-action=\"restart-quiz\"]')) {\n          this.restartQuiz();\n        }\n      });\n    }\n    \n    startQuiz() {\n      this.showPage('quiz');\n      this.scrollToTop();\n    }\n    \n    selectOption(option) {\n      \/\/ \u79fb\u9664\u6240\u6709\u9078\u4e2d\u72c0\u614b\n      document.querySelectorAll('.option-btn').forEach(btn => {\n        btn.classList.remove('selected');\n      });\n      \n      \/\/ \u6dfb\u52a0\u9078\u4e2d\u72c0\u614b\n      const selectedWrapper = document.querySelector(`[data-option=\"${option}\"]`);\n      if (selectedWrapper) {\n        selectedWrapper.querySelector('.option-btn').classList.add('selected');\n      }\n      \n      this.selectedOption = option;\n      \n      \/\/ \u5ef6\u9072\u986f\u793a\u7d50\u679c\n      setTimeout(() => {\n        this.showResult();\n      }, 500);\n    }\n    \n    showResult() {\n      const result = quizResults[this.selectedOption];\n      if (!result) return;\n      \n      \/\/ \u66f4\u65b0\u7d50\u679c\u5167\u5bb9\n      document.getElementById('result-title').textContent = result.title;\n      document.getElementById('result-description').textContent = result.description;\n      document.getElementById('detailed-text').innerHTML = `<p>${result.detail}<\/p>`;\n      \n      \/\/ \u751f\u6210\u500b\u6027\u5316\u5efa\u8b70\n      const adviceHtml = `\n        <ul class=\"advice-list\">\n          ${result.advice.map(item => `<li class=\"advice-item\">${item}<\/li>`).join('')}\n        <\/ul>\n      `;\n      document.getElementById('personal-advice').innerHTML = adviceHtml;\n      \n      \/\/ \u986f\u793a\u7d50\u679c\u9801\n      this.showPage('result');\n      this.scrollToTop();\n      \n      \/\/ \u5ef6\u9072\u5275\u5efa\u5716\u8868\n      setTimeout(() => {\n        this.createChart(result.scores);\n      }, 300);\n    }\n    \n    createChart(scores) {\n      \/\/ \u92b7\u6bc0\u820a\u5716\u8868\n      if (this.chartInstance) {\n        this.chartInstance.destroy();\n      }\n      \n      const ctx = document.getElementById('resultChart');\n      if (!ctx) return;\n      \n      const labels = Object.keys(scores);\n      const data = Object.values(scores);\n      \n      \/\/ \u7642\u7652\u8272\u7cfb - \u7da0\u8272\u7cfb\u70ba\u4e3b\n      this.chartInstance = new Chart(ctx, {\n        type: 'radar',\n        data: {\n          labels: labels,\n          datasets: [{\n            label: '\u4f60\u7684\u5206\u6790\u7d50\u679c',\n            data: data,\n            backgroundColor: 'rgba(134, 179, 161, 0.2)',\n            borderColor: 'rgba(134, 179, 161, 1)',\n            borderWidth: 2,\n            pointBackgroundColor: 'rgba(134, 179, 161, 1)',\n            pointBorderColor: '#fff',\n            pointHoverBackgroundColor: '#fff',\n            pointHoverBorderColor: 'rgba(134, 179, 161, 1)',\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(0, 0, 0, 0.8)',\n              titleFont: {\n                size: 16\n              },\n              bodyFont: {\n                size: 14\n              },\n              callbacks: {\n                label: function(context) {\n                  return context.label + ': ' + context.parsed.r + '%';\n                }\n              }\n            }\n          },\n          scales: {\n            r: {\n              min: 0,\n              max: 100,\n              beginAtZero: true,\n              ticks: {\n                stepSize: 20,\n                font: {\n                  size: 12\n                },\n                color: '#718096'\n              },\n              pointLabels: {\n                font: {\n                  size: 16,\n                  weight: 'bold'\n                },\n                color: '#4a5568'\n              },\n              grid: {\n                color: 'rgba(0, 0, 0, 0.08)'\n              },\n              angleLines: {\n                color: 'rgba(0, 0, 0, 0.08)'\n              }\n            }\n          }\n        }\n      });\n    }\n    \n    restartQuiz() {\n      \/\/ \u91cd\u7f6e\u9078\u64c7\n      this.selectedOption = null;\n      document.querySelectorAll('.option-btn').forEach(btn => {\n        btn.classList.remove('selected');\n      });\n      \n      \/\/ \u92b7\u6bc0\u5716\u8868\n      if (this.chartInstance) {\n        this.chartInstance.destroy();\n        this.chartInstance = null;\n      }\n      \n      \/\/ \u8fd4\u56de\u5f15\u5c0e\u9801\n      this.showPage('intro');\n      this.scrollToTop();\n    }\n    \n    showPage(page) {\n      \/\/ \u96b1\u85cf\u6240\u6709\u9801\u9762\n      document.querySelectorAll('.quiz-page').forEach(p => {\n        p.classList.add('d-none');\n      });\n      \n      \/\/ \u986f\u793a\u76ee\u6a19\u9801\u9762\n      switch(page) {\n        case 'intro':\n          this.introPage.classList.remove('d-none');\n          break;\n        case 'quiz':\n          this.quizPage.classList.remove('d-none');\n          break;\n        case 'result':\n          this.resultPage.classList.remove('d-none');\n          break;\n      }\n      \n      this.currentPage = page;\n    }\n    \n    scrollToTop() {\n      const container = document.querySelector('#quiz-container-9');\n      if (container) {\n        container.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      }\n    }\n  }\n  \n  \/\/ \u521d\u59cb\u5316\u6e2c\u9a57\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', () => {\n      new FirstLoveQuiz();\n    });\n  } else {\n    new FirstLoveQuiz();\n  }\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u5728\u9047\u89c1\u521d\u604b\u540e\uff0c\u53ea\u6709\u4e00\u5c0f\u90e8\u5206\u4eba\u80fd\u591f\u548c\u521d\u604b\u4e00\u76f4\u8d70\u4e0b\u53bb\uff0c\u548c\u521d\u604b\u5206\u624b\u540e\uff0c\u4f60\u53ef\u80fd\u66fe\u9047\u5230\u8fc7\u66f4\u597d\u7684\u4eba\uff0c\u5374\u4e0d\u662f\u8db3\u591f\u9002\u5408\u7684\u4eba\uff0c\u515c\u515c\u8f6c\u8f6c\u540e\u53d1\u73b0\u8fd8\u662f\u5fd8\u4e0d\u6389\u521d\u604b\u3002\u60f3\u77e5\u9053\u6700\u540e\u4f60\u4f1a\u4e0d\u4f1a\u7275\u624b\u521d\u604b\u5417\uff1f<\/p>","protected":false},"author":19,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"normal-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[178],"tags":[],"class_list":["post-2567","post","type-post","status-publish","format-standard","hentry","category-love"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2567","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=2567"}],"version-history":[{"count":2,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2567\/revisions"}],"predecessor-version":[{"id":10664,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2567\/revisions\/10664"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2567"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2567"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}