{"id":2523,"date":"2023-10-08T09:29:14","date_gmt":"2023-10-08T01:29:14","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2523"},"modified":"2025-05-11T03:50:21","modified_gmt":"2025-05-10T19:50:21","slug":"true-love-deceive-you","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/true-love-deceive-you","title":{"rendered":"\u7ebf\u4e0a\u514d\u8d39\u5c0f\u6d4b\u9a8c\uff1a\u771f\u7231\u7684\u5e4c\u5b50\uff0c\u80fd\u4e0d\u80fd\u9a97\u5230\u4f60\u5462\uff1f"},"content":{"rendered":"<!-- \u771f\u611b\u7684\u5e4c\u5b50\u6e2c\u9a57 - \u6a21\u7d44\u5316\u4ee3\u78bc -->\n<!-- \u9075\u5faa\u95dc\u6ce8\u9ede\u5206\u96e2\u539f\u5247\uff08HTML\u7d50\u69cb\u3001CSS\u6a23\u5f0f\u3001JavaScript\u884c\u70ba\uff09 -->\n\n<!-- \u7d50\u69cb\uff1aHTML -->\n<section class=\"tlq-container\" id=\"trueloveQuiz\">\n  <!-- \u5f15\u5c0e\u9801 -->\n  <div class=\"tlq-page tlq-landing-page\" id=\"tlqLandingPage\">\n    <header class=\"tlq-header\">\n      <h2 class=\"tlq-title\">\u771f\u7231\u7684\u5e4c\u5b50\uff0c\u80fd\u4e0d\u80fd\u9a97\u5230\u4f60\u5462\uff1f<\/h2>\n      <p class=\"tlq-subtitle\">\u6d4b\u4e00\u6d4b\u4f60\u5728\u7231\u60c5\u4e2d\u7684\u8b66\u89c9\u5ea6<\/p>\n    <\/header>\n    <div class=\"tlq-landing-content\">\n      <div class=\"tlq-feature-icons\">\n        <div class=\"tlq-icon-item\">\n          <div class=\"tlq-icon\">\n            <svg viewbox=\"0 0 24 24\" width=\"48\" height=\"48\">\n              <path fill=\"currentColor\" d=\"M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z\"><\/path>\n            <\/svg>\n          <\/div>\n          <span>\u7231\u60c5\u6d4b\u9a8c<\/span>\n        <\/div>\n        <div class=\"tlq-icon-item\">\n          <div class=\"tlq-icon\">\n            <svg viewbox=\"0 0 24 24\" width=\"48\" height=\"48\">\n              <path fill=\"currentColor\" d=\"M12,3C17.5,3 22,6.58 22,11C22,15.42 17.5,19 12,19C10.76,19 9.57,18.82 8.47,18.5C5.55,21 2,21 2,21C4.33,18.67 4.7,17.1 4.75,16.5C3.05,15.07 2,13.13 2,11C2,6.58 6.5,3 12,3M17,12V10H15V12H17M13,12V10H11V12H13M9,12V10H7V12H9Z\"><\/path>\n            <\/svg>\n          <\/div>\n          <span>\u6df1\u5ea6\u89e3\u6790<\/span>\n        <\/div>\n        <div class=\"tlq-icon-item\">\n          <div class=\"tlq-icon\">\n            <svg viewbox=\"0 0 24 24\" width=\"48\" height=\"48\">\n              <path fill=\"currentColor\" d=\"M17.81,4.47C17.73,4.47 17.65,4.45 17.58,4.41C15.66,3.42 14,3 12,3C10.03,3 8.15,3.47 6.44,4.41C6.2,4.54 5.9,4.45 5.76,4.21C5.63,3.97 5.72,3.66 5.96,3.53C7.82,2.5 9.86,2 12,2C14.14,2 16,2.47 18.04,3.5C18.29,3.65 18.38,3.95 18.25,4.19C18.16,4.37 18,4.47 17.81,4.47M3.5,9.72C3.4,9.72 3.3,9.69 3.21,9.63C3,9.47 2.93,9.16 3.09,8.93C4.08,7.53 5.34,6.43 6.84,5.66C9.09,4.45 11.97,4.24 14.9,5.05C15.18,5.12 15.37,5.44 15.26,5.71C15.15,5.99 14.82,6.16 14.55,6.09C11.91,5.36 9.39,5.55 7.47,6.59C6.18,7.25 5.07,8.22 4.23,9.47C4.13,9.63 4,9.72 3.5,9.72M9.75,21.79C9.62,21.79 9.5,21.74 9.4,21.64C8.53,20.77 8.06,20.21 7.39,19C6.7,17.77 6.34,16.27 6.34,14.66C6.34,11.69 8.88,9.27 12,9.27C15.12,9.27 17.66,11.69 17.66,14.66A0.5,0.5 0 0,1 17.16,15.16A0.5,0.5 0 0,1 16.66,14.66C16.66,12.24 14.57,10.27 12,10.27C9.43,10.27 7.34,12.24 7.34,14.66C7.34,16.1 7.66,17.43 8.27,18.5C8.91,19.66 9.35,20.15 10.12,20.93C10.31,21.13 10.31,21.44 10.12,21.64C10,21.74 9.88,21.79 9.75,21.79Z\"><\/path>\n            <\/svg>\n          <\/div>\n          <span>\u60c5\u611f\u6d1e\u5bdf<\/span>\n        <\/div>\n      <\/div>\n      <div class=\"tlq-intro\">\n        <p>\u5728\u6bcf\u4e2a\u4eba\u7684\u5fc3\u91cc\uff0c\u5bf9\u300c\u771f\u7231\u300d\u90fd\u6709\u7740\u4e00\u4efd\u61a7\u61ac\uff0c\u6e34\u671b\u5b83\u7684\u5230\u6765\u3002\u7136\u800c\u5728\u73b0\u5b9e\u7684\u79cd\u79cd\u6253\u51fb\u4e0b\uff0c\u624d\u53d1\u73b0\u60f3\u8981\u627e\u5230\u771f\u7231\uff0c\u662f\u90a3\u4e48\u7684\u96be\u3002<\/p>\n        <p>\u5c24\u5176\u662f\u5728\u6d6e\u8e81\u7684\u793e\u4f1a\u5f53\u4e0b\uff0c\u5f88\u591a\u6240\u8c13\u7684\u300c\u771f\u7231\u300d\u90fd\u4e0d\u8fc7\u662f\u611f\u60c5\u9a97\u5b50\u7684\u5957\u8def\u800c\u5df2\uff0c\u8981\u662f\u5fc3\u52a8\u4f60\u5c31\u8f93\u4e86\u3002<\/p>\n        <p>\u90a3\u4e48\uff0c\u771f\u7231\u7684\u5e4c\u5b50\uff0c\u80fd\u4e0d\u80fd\u9a97\u5230\u4f60\uff1f\u8bf7\u505a\u4e2a\u6d4b\u8bd5\u770b\u770b\u5427\u3002<\/p>\n      <\/div>\n    <\/div>\n    <button class=\"tlq-start-btn\" id=\"tlqStartBtn\">\u5f00\u59cb\u6d4b\u9a8c<\/button>\n  <\/div>\n\n  <!-- \u6e2c\u9a57\u9801 -->\n  <div class=\"tlq-page tlq-quiz-page\" id=\"tlqQuizPage\">\n    <header class=\"tlq-header\">\n      <h2 class=\"tlq-title\">\u771f\u7231\u7684\u5e4c\u5b50\uff0c\u80fd\u4e0d\u80fd\u9a97\u5230\u4f60\u5462\uff1f<\/h2>\n      <div class=\"tlq-progress-container\" id=\"tlqProgressContainer\">\n        <div class=\"tlq-progress-text\" id=\"tlqProgressText\">\u9898\u76ee\u8fdb\u5ea6<\/div>\n        <div class=\"tlq-progress-bar\">\n          <div class=\"tlq-progress-fill\" id=\"tlqProgressFill\"><\/div>\n        <\/div>\n      <\/div>\n    <\/header>\n    <div class=\"tlq-quiz-content\" id=\"tlqQuizContent\">\n      <!-- \u9019\u88e1\u5c07\u7531 JavaScript \u52d5\u614b\u586b\u5145\u554f\u984c -->\n    <\/div>\n    <div class=\"tlq-quiz-nav\">\n      <button class=\"tlq-prev-btn\" id=\"tlqPrevBtn\">\n        <svg viewbox=\"0 0 24 24\" width=\"20\" height=\"20\" style=\"margin-right: 8px; vertical-align: middle;\">\n          <path fill=\"currentColor\" d=\"M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z\"><\/path>\n        <\/svg>\n        \u4e0a\u4e00\u9898\n      <\/button>\n    <\/div>\n  <\/div>\n\n  <!-- \u7d50\u679c\u9801 -->\n  <div class=\"tlq-page tlq-result-page\" id=\"tlqResultPage\">\n    <header class=\"tlq-header\">\n      <h2 class=\"tlq-title\">\u6d4b\u9a8c\u7ed3\u679c<\/h2>\n    <\/header>\n    <div class=\"tlq-result-content\">\n      <div class=\"tlq-result-title-container\">\n        <div class=\"tlq-result-icon\">\n          <svg viewbox=\"0 0 24 24\" width=\"40\" height=\"40\">\n            <path fill=\"currentColor\" d=\"M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z\"><\/path>\n          <\/svg>\n        <\/div>\n        <div class=\"tlq-result-type\" id=\"tlqResultType\"><\/div>\n      <\/div>\n      <div class=\"tlq-result-score-container\">\n        <div class=\"tlq-result-score\">\n          <div class=\"tlq-result-chart-container\">\n            <canvas id=\"tlqResultChart\"><\/canvas>\n          <\/div>\n        <\/div>\n      <\/div>\n      <div class=\"tlq-result-analysis\">\n        <h3 class=\"tlq-analysis-title\">\u6d4b\u9a8c\u89e3\u6790<\/h3>\n        <div class=\"tlq-result-description\" id=\"tlqResultDescription\"><\/div>\n      <\/div>\n      <div class=\"tlq-result-summary\" id=\"tlqResultSummary\">\n        <div class=\"tlq-summary-title\">\u60c5\u611f\u7279\u8d28<\/div>\n        <div class=\"tlq-summary-content\" id=\"tlqSummaryContent\"><\/div>\n      <\/div>\n    <\/div>\n    <button class=\"tlq-restart-btn\" id=\"tlqRestartBtn\">\u91cd\u65b0\u6d4b\u9a8c<\/button>\n  <\/div>\n<\/section>\n\n<!-- \u6a23\u5f0f\uff1aCSS -->\n<style>\n:root {\n  \/* \u984f\u8272\u8b8a\u6578 *\/\n  --tlq-primary: #ff6b8b;\n  --tlq-primary-light: #ff8fa6;\n  --tlq-primary-dark: #e04f6e;\n  --tlq-secondary: #4a6cfa;\n  --tlq-secondary-light: #6b87ff;\n  --tlq-secondary-dark: #3a56d4;\n  --tlq-neutral: #f8f9fa;\n  --tlq-neutral-dark: #e9ecef;\n  --tlq-text: #343a40;\n  --tlq-text-light: #6c757d;\n  --tlq-success: #6abf69;\n  --tlq-white: #ffffff;\n  --tlq-shadow: rgba(0, 0, 0, 0.1);\n  \n  \/* \u5b57\u9ad4\u5927\u5c0f *\/\n  --tlq-font-small: 16px;\n  --tlq-font-base: 18px;\n  --tlq-font-large: 20px;\n  --tlq-font-xlarge: 22px;\n  --tlq-font-xxlarge: 28px;\n  --tlq-font-title: 32px;\n  \n  \/* \u9593\u8ddd *\/\n  --tlq-spacing-xs: 8px;\n  --tlq-spacing-sm: 16px;\n  --tlq-spacing-md: 24px;\n  --tlq-spacing-lg: 32px;\n  --tlq-spacing-xl: 48px;\n  \n  \/* \u908a\u6846\u534a\u5f91 *\/\n  --tlq-radius-sm: 4px;\n  --tlq-radius-md: 8px;\n  --tlq-radius-lg: 12px;\n  --tlq-radius-full: 9999px;\n  \n  \/* \u52d5\u756b\u6642\u9593 *\/\n  --tlq-transition-fast: 0.2s;\n  --tlq-transition-normal: 0.3s;\n  --tlq-transition-slow: 0.5s;\n}\n\n\/* \u57fa\u790e\u91cd\u7f6e\u548c\u5bb9\u5668\u6a23\u5f0f *\/\n.tlq-container * {\n  box-sizing: border-box;\n  font-family: \"Microsoft JhengHei\", \"PingFang TC\", \"Apple LiGothic Medium\", \"\u5fae\u8edf\u6b63\u9ed1\u9ad4\", sans-serif;\n}\n\n.tlq-container {\n  max-width: 800px;\n  margin: 0 auto;\n  padding: var(--tlq-spacing-md);\n  color: var(--tlq-text);\n  background-color: var(--tlq-white);\n  border-radius: var(--tlq-radius-lg);\n  box-shadow: 0 5px 20px var(--tlq-shadow);\n  position: relative;\n  overflow: hidden;\n}\n\n\/* \u9801\u9762\u904e\u6e21 *\/\n.tlq-page {\n  display: none;\n  opacity: 0;\n  transition: opacity var(--tlq-transition-normal) ease;\n}\n\n.tlq-page.active {\n  display: block;\n  opacity: 1;\n}\n\n\/* \u6a19\u984c\u6a23\u5f0f *\/\n.tlq-header {\n  text-align: center;\n  margin-bottom: var(--tlq-spacing-lg);\n  padding-bottom: var(--tlq-spacing-md);\n  border-bottom: 1px solid var(--tlq-neutral-dark);\n}\n\n.tlq-title {\n  font-size: var(--tlq-font-title);\n  font-weight: bold;\n  color: var(--tlq-primary);\n  margin: 0 0 var(--tlq-spacing-sm);\n}\n\n.tlq-subtitle {\n  font-size: var(--tlq-font-large);\n  color: var(--tlq-text-light);\n  margin: 0;\n}\n\n\/* \u5f15\u5c0e\u9801\u6a23\u5f0f *\/\n.tlq-landing-content {\n  margin-bottom: var(--tlq-spacing-xl);\n}\n\n.tlq-feature-icons {\n  display: flex;\n  justify-content: center;\n  gap: var(--tlq-spacing-lg);\n  margin-bottom: var(--tlq-spacing-lg);\n  flex-wrap: wrap;\n}\n\n.tlq-icon-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  width: 120px;\n}\n\n.tlq-icon {\n  width: 70px;\n  height: 70px;\n  background-color: var(--tlq-primary-light);\n  color: var(--tlq-white);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: var(--tlq-spacing-xs);\n  box-shadow: 0 4px 8px var(--tlq-shadow);\n  transform: translateY(0);\n  transition: transform var(--tlq-transition-fast) ease, box-shadow var(--tlq-transition-fast) ease;\n}\n\n.tlq-icon:hover {\n  transform: translateY(-5px);\n  box-shadow: 0 6px 12px var(--tlq-shadow);\n}\n\n.tlq-icon-item span {\n  font-size: var(--tlq-font-base);\n  font-weight: bold;\n  color: var(--tlq-primary);\n}\n\n.tlq-intro {\n  max-width: 650px;\n  margin: 0 auto;\n  line-height: 1.6;\n  font-size: var(--tlq-font-base);\n}\n\n.tlq-intro p {\n  margin-bottom: var(--tlq-spacing-md);\n}\n\n\/* \u6309\u9215\u6a23\u5f0f *\/\n.tlq-start-btn, .tlq-restart-btn {\n  display: block;\n  width: 250px;\n  padding: var(--tlq-spacing-sm) var(--tlq-spacing-md);\n  margin: 0 auto;\n  font-size: var(--tlq-font-large);\n  font-weight: bold;\n  text-align: center;\n  color: var(--tlq-white);\n  background: linear-gradient(135deg, var(--tlq-primary), var(--tlq-primary-dark));\n  border: none;\n  border-radius: var(--tlq-radius-full);\n  cursor: pointer;\n  box-shadow: 0 4px 12px rgba(255, 107, 139, 0.4);\n  transition: transform var(--tlq-transition-fast) ease, box-shadow var(--tlq-transition-fast) ease;\n}\n\n.tlq-start-btn:hover, .tlq-restart-btn:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 15px rgba(255, 107, 139, 0.5);\n}\n\n.tlq-start-btn:active, .tlq-restart-btn:active {\n  transform: translateY(1px);\n  box-shadow: 0 2px 8px rgba(255, 107, 139, 0.3);\n}\n\n\/* \u9032\u5ea6\u689d\u6a23\u5f0f *\/\n.tlq-progress-container {\n  max-width: 500px;\n  margin: var(--tlq-spacing-md) auto 0;\n}\n\n.tlq-progress-text {\n  font-size: var(--tlq-font-base);\n  margin-bottom: var(--tlq-spacing-xs);\n  text-align: center;\n  color: var(--tlq-text-light);\n}\n\n.tlq-progress-bar {\n  height: 8px;\n  background-color: var(--tlq-neutral-dark);\n  border-radius: var(--tlq-radius-full);\n  overflow: hidden;\n}\n\n.tlq-progress-fill {\n  height: 100%;\n  background: linear-gradient(to right, var(--tlq-primary-light), var(--tlq-primary));\n  width: 0;\n  transition: width var(--tlq-transition-normal) ease;\n}\n\n\/* \u6e2c\u9a57\u9801\u6a23\u5f0f *\/\n.tlq-quiz-content {\n  margin-bottom: var(--tlq-spacing-lg);\n}\n\n.tlq-question {\n  margin-bottom: var(--tlq-spacing-lg);\n}\n\n.tlq-question-text {\n  font-size: var(--tlq-font-xlarge);\n  font-weight: bold;\n  margin-bottom: var(--tlq-spacing-md);\n  line-height: 1.4;\n}\n\n.tlq-options {\n  display: flex;\n  flex-direction: column;\n  gap: var(--tlq-spacing-sm);\n}\n\n.tlq-option {\n  padding: var(--tlq-spacing-md);\n  background-color: var(--tlq-neutral);\n  border: 2px solid var(--tlq-neutral-dark);\n  border-radius: var(--tlq-radius-md);\n  cursor: pointer;\n  transition: all var(--tlq-transition-fast) ease;\n  font-size: var(--tlq-font-base);\n  color: var(--tlq-text);\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.tlq-option:hover {\n  background-color: var(--tlq-neutral-dark);\n  border-color: var(--tlq-primary-light);\n}\n\n.tlq-option.selected {\n  background-color: rgba(255, 107, 139, 0.1);\n  border-color: var(--tlq-primary);\n  color: var(--tlq-primary-dark);\n  font-weight: bold;\n}\n\n.tlq-option-label {\n  margin-left: var(--tlq-spacing-sm);\n  flex: 1;\n}\n\n.tlq-option-marker {\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  border: 2px solid var(--tlq-text-light);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all var(--tlq-transition-fast) ease;\n}\n\n.tlq-option.selected .tlq-option-marker {\n  border-color: var(--tlq-primary);\n  background-color: var(--tlq-primary);\n}\n\n.tlq-option.selected .tlq-option-marker::after {\n  content: \"\";\n  width: 10px;\n  height: 10px;\n  background-color: var(--tlq-white);\n  border-radius: 50%;\n}\n\n\/* \u5c0e\u822a\u6309\u9215 *\/\n.tlq-quiz-nav {\n  display: flex;\n  justify-content: center;\n  gap: var(--tlq-spacing-md);\n  margin-top: var(--tlq-spacing-lg);\n}\n\n.tlq-prev-btn {\n  padding: var(--tlq-spacing-sm) var(--tlq-spacing-lg);\n  font-size: var(--tlq-font-base);\n  font-weight: bold;\n  color: var(--tlq-primary-dark);\n  background-color: var(--tlq-white);\n  border: 2px solid var(--tlq-primary);\n  border-radius: var(--tlq-radius-full);\n  cursor: pointer;\n  transition: all var(--tlq-transition-fast) ease;\n  min-width: 150px;\n  min-height: 50px;\n  box-shadow: 0 2px 6px rgba(255, 107, 139, 0.2);\n  text-align: center;\n}\n\n.tlq-prev-btn:hover {\n  background-color: var(--tlq-primary-light);\n  color: var(--tlq-white);\n  transform: translateY(-2px);\n  box-shadow: 0 4px 8px rgba(255, 107, 139, 0.3);\n}\n\n\/* \u7d50\u679c\u9801\u6a23\u5f0f *\/\n.tlq-result-content {\n  margin-bottom: var(--tlq-spacing-xl);\n}\n\n.tlq-result-title-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: var(--tlq-spacing-md);\n}\n\n.tlq-result-icon {\n  color: var(--tlq-primary);\n  margin-right: var(--tlq-spacing-sm);\n}\n\n.tlq-result-type {\n  font-size: var(--tlq-font-xxlarge);\n  font-weight: bold;\n  color: var(--tlq-primary);\n  margin-bottom: var(--tlq-spacing-xs);\n  padding: var(--tlq-spacing-xs) var(--tlq-spacing-md);\n  background: linear-gradient(135deg, var(--tlq-primary-light), var(--tlq-primary));\n  color: var(--tlq-white);\n  border-radius: var(--tlq-radius-full);\n  box-shadow: 0 3px 10px rgba(255, 107, 139, 0.3);\n}\n\n.tlq-result-score-container {\n  margin-bottom: var(--tlq-spacing-lg);\n}\n\n.tlq-result-score {\n  text-align: center;\n}\n\n.tlq-result-chart-container {\n  margin: 0 auto var(--tlq-spacing-lg);\n  max-width: 350px;\n  max-height: 350px;\n  padding: var(--tlq-spacing-sm);\n  background-color: var(--tlq-white);\n  border-radius: var(--tlq-radius-md);\n  box-shadow: 0 2px 8px var(--tlq-shadow);\n}\n\n.tlq-result-analysis {\n  margin-bottom: var(--tlq-spacing-lg);\n}\n\n.tlq-analysis-title {\n  font-size: var(--tlq-font-large);\n  color: var(--tlq-primary);\n  margin-bottom: var(--tlq-spacing-sm);\n  text-align: center;\n}\n\n.tlq-result-description {\n  max-width: 650px;\n  margin: 0 auto;\n  font-size: var(--tlq-font-base);\n  line-height: 1.7;\n  background-color: var(--tlq-neutral);\n  padding: var(--tlq-spacing-lg);\n  border-radius: var(--tlq-radius-md);\n  box-shadow: 0 2px 8px var(--tlq-shadow);\n}\n\n.tlq-result-summary {\n  max-width: 650px;\n  margin: 0 auto var(--tlq-spacing-lg);\n  background-color: var(--tlq-neutral);\n  border-radius: var(--tlq-radius-md);\n  padding: var(--tlq-spacing-md);\n  box-shadow: 0 2px 8px var(--tlq-shadow);\n}\n\n.tlq-summary-title {\n  font-size: var(--tlq-font-large);\n  font-weight: bold;\n  color: var(--tlq-primary);\n  margin-bottom: var(--tlq-spacing-sm);\n  text-align: center;\n}\n\n.tlq-summary-content {\n  font-size: var(--tlq-font-base);\n  line-height: 1.6;\n}\n\n\/* \u97ff\u61c9\u5f0f\u8a2d\u8a08 *\/\n@media (max-width: 768px) {\n  .tlq-container {\n    padding: var(--tlq-spacing-sm);\n  }\n  \n  .tlq-title {\n    font-size: 26px;\n  }\n  \n  .tlq-feature-icons {\n    gap: var(--tlq-spacing-md);\n  }\n  \n  .tlq-icon-item {\n    width: 100px;\n  }\n  \n  .tlq-icon {\n    width: 60px;\n    height: 60px;\n  }\n}\n\n@media (max-width: 480px) {\n  .tlq-title {\n    font-size: 24px;\n  }\n  \n  .tlq-feature-icons {\n    gap: var(--tlq-spacing-sm);\n  }\n  \n  .tlq-icon-item {\n    width: 90px;\n  }\n  \n  .tlq-icon {\n    width: 50px;\n    height: 50px;\n  }\n  \n  .tlq-intro {\n    font-size: var(--tlq-font-small);\n  }\n  \n  .tlq-option {\n    padding: var(--tlq-spacing-sm);\n  }\n  \n  .tlq-start-btn, .tlq-restart-btn {\n    width: 200px;\n    font-size: var(--tlq-font-base);\n  }\n}\n<\/style>\n\n<!-- \u884c\u70ba\uff1aJavaScript -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n<script>\n(function() {\n  'use strict';\n  \n  \/\/ \u9632\u6b62\u5168\u5c40\u8b8a\u91cf\u6c61\u67d3\n  const TrueLoveQuiz = {\n    \/\/ \u6e2c\u9a57\u6578\u64da\n    data: {\n      questions: [\n        {\n          id: 1,\n          text: \"\u4f60\u89ba\u5f97\u81ea\u5df1\u7684\u4eba\u751f\u5145\u6eff\u6ce2\u6298\u55ce\uff1f\",\n          options: [\n            { id: \"A\", text: \"\u662f\u7684\", next: 2 },\n            { id: \"B\", text: \"\u4e0d\u662f\", next: 3 },\n            { id: \"C\", text: \"\u9084\u597d\", next: 4 }\n          ]\n        },\n        {\n          id: 2,\n          text: \"\u7576\u4f60\u6200\u611b\u4e2d\u6642\uff0c\u95dc\u65bc\u539f\u5247\u548c\u5e95\u7dda\u7684\u554f\u984c\u4e0d\u6703\u8f15\u6613\u8b93\u6b65\u55ce\uff1f\",\n          options: [\n            { id: \"A\", text: \"\u662f\u7684\", next: 3 },\n            { id: \"B\", text: \"\u4e0d\u662f\", next: 4 },\n            { id: \"C\", text: \"\u4e0d\u77e5\u9053\", next: 5 }\n          ]\n        },\n        {\n          id: 3,\n          text: \"\u4f60\u73fe\u5728\u5c31\u5df2\u7d93\u5728\u8003\u616e\u9000\u4f11\u505a\u6e96\u5099\u7684\u4e8b\u60c5\u55ce\uff1f\",\n          options: [\n            { id: \"A\", text: \"\u662f\u7684\", next: 4 },\n            { id: \"B\", text: \"\u6c92\u6709\", next: 5 },\n            { id: \"C\", text: \"\u6709\u9ede\u5427\", next: 6 }\n          ]\n        },\n        {\n          id: 4,\n          text: \"\u4f60\u662f\u5426\u89ba\u5f97\u611b\u60c5\u91cc\uff0c\u5435\u67b6\u662f\u96e3\u4ee5\u907f\u514d\u7684\u5b58\u5728\uff1f\",\n          options: [\n            { id: \"A\", text: \"\u662f\u7684\", next: 5 },\n            { id: \"B\", text: \"\u4e0d\u662f\", next: 6 },\n            { id: \"C\", text: \"\u4e0d\u77e5\u9053\", next: 7 }\n          ]\n        },\n        {\n          id: 5,\n          text: \"\u4f60\u5e73\u65e5\u5927\u591a\u662f\u4f11\u9592\u8212\u9069\u7684\u88dd\u626e\u55ce\uff1f\",\n          options: [\n            { id: \"A\", text: \"\u662f\u7684\", next: 6 },\n            { id: \"B\", text: \"\u4e0d\u662f\", next: 7 },\n            { id: \"C\", text: \"\u9084\u597d\", next: 8 }\n          ]\n        },\n        {\n          id: 6,\n          text: \"\u4ee5\u4e0b\u7684\u624b\u6367\u82b1\uff0c\u4f60\u66f4\u559c\u6b61\u54ea\u7a2e\u984f\u8272\uff1f\",\n          options: [\n            { id: \"A\", text: \"\u7d05\u8272\", next: 7 },\n            { id: \"B\", text: \"\u767d\u8272\", next: 8 },\n            { id: \"C\", text: \"\u7c89\u8272\", result: \"D\" }\n          ]\n        },\n        {\n          id: 7,\n          text: \"\u5047\u5982\u4f60\u77e5\u9053\u5c0d\u65b9\u5c0d\u4f60\u7684\u611b\u53ea\u662f\u5634\u4e0a\u8aaa\u8aaa\u800c\u5df2\uff0c\u4f60\u6703\u5206\u624b\u55ce\uff1f\",\n          options: [\n            { id: \"A\", text: \"\u662f\u7684\", next: 8 },\n            { id: \"B\", text: \"\u4e0d\u6703\", next: 9 },\n            { id: \"C\", text: \"\u6703\u8003\u616e\", next: 10 }\n          ]\n        },\n        {\n          id: 8,\n          text: \"\u5982\u679c\u7d66\u4f60\u4e00\u500b\u4e03\u5929\u7684\u5047\u671f\uff0c\u4f60\u6700\u60f3\u53bb\u4ee5\u4e0b\u54ea\u500b\u5730\u65b9\uff1f\",\n          options: [\n            { id: \"A\", text: \"\u67d0\u57ce\u5e02\", next: 9 },\n            { id: \"B\", text: \"\u53e4\u93ae\", result: \"C\" },\n            { id: \"C\", text: \"\u6d77\u5cf6\", result: \"D\" }\n          ]\n        },\n        {\n          id: 9,\n          text: \"\u4f60\u6700\u4e0d\u60f3\u770b\u5230\u4ee5\u4e0b\u7684\u54ea\u500b\u4eba\u5728\u81ea\u5df1\u9762\u524d\u79c0\u6069\u611b\uff1f\",\n          options: [\n            { id: \"A\", text: \"\u524d\u5ea6\", result: \"A\" },\n            { id: \"B\", text: \"\u6697\u6200\u7684TA\", result: \"B\" },\n            { id: \"C\", text: \"\u72c2\u8ffd\u81ea\u5df1\u7684\u4eba\", result: \"D\" }\n          ]\n        },\n        {\n          id: 10,\n          text: \"\u5047\u5982\u4f60\u662f\u5973\u751f\uff0c\u4f60\u6703\u60f3\u8981\u4ee5\u4e0b\u54ea\u7a2e\u985e\u578b\u7684\u7537\u53cb\uff1f\",\n          options: [\n            { id: \"A\", text: \"\u9738\u6c23\u5f37\u52e2\u7684\", result: \"C\" },\n            { id: \"B\", text: \"\u6eab\u67d4\u9ad4\u8cbc\u7684\", result: \"A\" },\n            { id: \"C\", text: \"\u967d\u5149\u958b\u6717\u7684\", result: \"B\" }\n          ]\n        }\n      ],\n      results: {\n        \"A\": {\n          title: \"\u4e0d\u6613\u88ab\u9a19\",\n          description: \"\u904e\u53bb\u7684\u4f60\u4e5f\u66fe\u662f\u5bb9\u6613\u88ab\u771f\u611b\u5e4c\u5b50\u9a19\u5230\u7684\u4eba\u3002\u4ee5\u524d\u7684\u4f60\uff0c\u7e3d\u89ba\u5f97\u611b\u60c5\u5927\u904e\u5929\uff0c\u5c0d\u65b9\u8aaa\u4ec0\u9ebc\u90fd\u6df1\u4fe1\u4e0d\u7591\uff0c\u4e5f\u56e0\u6b64\u653e\u68c4\u6389\u4e00\u4e9b\u5bf6\u8cb4\u7684\u6a5f\u6703\u3002\u53ef\u662f\u73fe\u5728\u7684\u4f60\u4e0d\u4e00\u6a23\u4e86\uff0c\u4f60\u6210\u9577\u4e86\uff0c\u4e0d\u5728\u76f2\u76ee\u5730\u76f8\u4fe1\u611b\u60c5\u3002\u73fe\u5728\u7684\u4f60\u5728\u611b\u4e00\u500b\u4eba\u4e4b\u524d\uff0c\u6703\u5148\u5b78\u6703\u611b\u81ea\u5df1\uff0c\u51e1\u4e8b\u90fd\u5b78\u8457\u70ba\u81ea\u5df1\u53bb\u8003\u616e\uff0c\u800c\u4e0d\u662f\u4e00\u5fc3\u53ea\u60f3\u8457\u5c0d\u65b9\u3002\u9019\u6a23\u7684\u4f60\uff0c\u5df2\u7d93\u4e0d\u5728\u50bb\u6c23\u5230\u6703\u88ab\u771f\u611b\u5e4c\u5b50\u6b3a\u9a19\u4e86\u3002\",\n          traits: {\n            \"\u6210\u9577\u6027\": 85,\n            \"\u81ea\u611b\u80fd\u529b\": 90,\n            \"\u9632\u9a19\u610f\u8b58\": 75,\n            \"\u611f\u60c5\u654f\u611f\u5ea6\": 65\n          }\n        },\n        \"B\": {\n          title: \"\u66ab\u672a\u88ab\u9a19\",\n          description: \"\u4e0d\u7ba1\u672a\u4f86\u4f60\u662f\u5426\u6703\u88ab\u771f\u611b\u7684\u5e4c\u5b50\u6b3a\u9a19\uff0c\u4f46\u81f3\u5c11\u5230\u73fe\u5728\u70ba\u6b62\u90fd\u9084\u6c92\u6709\u8eba\u904e\u69cd\u3002\u6216\u8a31\u662f\u4f60\u8db3\u5920\u5e78\u904b\uff0c\u6c92\u6709\u9047\u5230\u5b58\u5fc3\u60f3\u9a19\u4f60\u7684\u4eba\uff0c\u57fa\u672c\u4e0a\u90fd\u662f\u771f\u5fc3\u5728\u8ac7\u6200\u611b\u7684\uff0c\u6240\u4ee5\u5230\u73fe\u5728\u4f60\u90fd\u9858\u610f\u76f8\u4fe1\u8457\u611b\u60c5\u3002\u4e5f\u53ef\u80fd\u662f\u81f3\u4eca\u90fd\u6c92\u6709\u8ac7\u904e\u6200\u611b\uff0c\u4e5f\u5c31\u4e0d\u5b58\u5728\u9a19\u4e0d\u9a19\u7684\u554f\u984c\u4e86\u3002\u81f3\u65bc\u4ee5\u5f8c\uff0c\u5728\u9047\u5230\u611b\u60c5\u7684\u6642\u5019\uff0c\u9084\u662f\u8981\u5b78\u8457\u5e36\u773c\u8b58\u4eba\uff0c\u4ee5\u514d\u88ab\u5ffd\u60a0\u3002\",\n          traits: {\n            \"\u4fe1\u4efb\u50be\u5411\": 80,\n            \"\u5e78\u904b\u6307\u6578\": 75,\n            \"\u8b58\u4eba\u80fd\u529b\": 60,\n            \"\u611b\u60c5\u61a7\u61ac\": 85\n          }\n        },\n        \"C\": {\n          title: \"\u5bb9\u6613\u88ab\u9a19\",\n          description: \"\u4f60\u5bb9\u6613\u88ab\u771f\u611b\u7684\u5e4c\u5b50\u5957\u8def\u5230\u3002\u5f88\u591a\u4eba\u90fd\u89ba\u5f97\u4f60\u50bb\uff0c\u5225\u4eba\u8aaa\u5169\u53e5\u751c\u8a00\u871c\u8a9e\u5c31\u5fc3\u82b1\u6012\u653e\uff0c\u98c4\u98c4\u7136\u5730\u6c89\u9189\u5176\u4e2d\u3002\u5225\u4eba\u7e3d\u89ba\u5f97\u4f60\u50bb\uff0c\u7d93\u5e38\u70ba\u4e86\u4e0d\u503c\u5f97\u7684\u4eba\u505a\u4e9b\u4e0d\u503c\u5f97\u7684\u4e8b\u3002\u53ef\u662f\u5728\u4f60\u770b\u4f86\uff0c\u5728\u611f\u60c5\u91cc\u904e\u65bc\u7406\u667a\u548c\u51b7\u975c\u7684\u4eba\uff0c\u4e00\u5b9a\u662f\u4e0d\u5920\u6295\u5165\uff0c\u4e00\u65e6\u771f\u7684\u6295\u5165\u5c31\u4e0d\u53ef\u80fd\u4e0d\u6c89\u9189\u4e86\u3002\u4e4b\u65bc\u4f60\uff0c\u9084\u662f\u76f8\u4fe1\u4e5f\u6709\u771f\u611b\u5b58\u5728\u7684\u3002\",\n          traits: {\n            \"\u611f\u6027\u7a0b\u5ea6\": 90,\n            \"\u6d6a\u6f2b\u50be\u5411\": 85,\n            \"\u6295\u5165\u7a0b\u5ea6\": 80,\n            \"\u8b66\u60d5\u610f\u8b58\": 40\n          }\n        },\n        \"D\": {\n          title: \"\u4e0d\u6703\u88ab\u9a19\",\n          description: \"\u4f60\u4e0d\u6703\u88ab\u771f\u611b\u7684\u5e4c\u5b50\u5957\u8def\u5230\u3002\u96d6\u7136\u73fe\u5728\u7684\u611f\u60c5\u9a19\u5b50\u90fd\u662f\u60c5\u5834\u7684\u9ad8\u624b\uff0c\u5404\u7a2e\u5957\u8def\u4fe1\u624b\u62c8\u4f86\uff0c\u53ef\u4f60\u4e5f\u4e0d\u662f\u5403\u7d20\u7684\uff0c\u4f60\u6709\u8db3\u5920\u7684\u8070\u660e\u624d\u667a\u5206\u8fa8\u5b83\u3002\u4f60\u5728\u9762\u5c0d\u611f\u60c5\u7684\u6642\u5019\uff0c\u80fd\u5920\u64e6\u4eae\u96d9\u773c\u89c0\u5bdf\u5c0d\u65b9\u7684\u70ba\u4eba\uff0c\u800c\u4e0d\u6703\u8f15\u6613\u88ab\u5c0d\u65b9\u53e3\u4e2d\u7684\u751c\u8a00\u871c\u8a9e\u6240\u77c7\u853d\u3002\u518d\u8aaa\u4e86\uff0c\u4f60\u662f\u500b\u6709\u539f\u5247\u6709\u5e95\u7dda\u7684\u4eba\uff0c\u5373\u4fbf\u662f\u5c0d\u559c\u6b61\u7684\u4eba\uff0c\u4f60\u4e5f\u4e0d\u6703\u7e31\u5bb9\uff0c\u66f4\u4e0d\u6703\u59d4\u5c48\u81ea\u5df1\u3002\",\n          traits: {\n            \"\u7406\u6027\u7a0b\u5ea6\": 90,\n            \"\u89c0\u5bdf\u80fd\u529b\": 85,\n            \"\u539f\u5247\u6027\": 80,\n            \"\u5e95\u7dda\u610f\u8b58\": 85\n          }\n        }\n      }\n    },\n\n    \/\/ \u72c0\u614b\u8b8a\u91cf\n    state: {\n      currentPage: 'landing', \/\/ \u7576\u524d\u9801\u9762\uff1alanding, quiz, result\n      currentQuestion: 0,     \/\/ \u7576\u524d\u554f\u984c\u7d22\u5f15\n      questionPath: [],       \/\/ \u554f\u984c\u8def\u5f91\u8a18\u9304\n      answers: {},            \/\/ \u7528\u6236\u7b54\u6848 {questionId: optionId}\n      result: null,           \/\/ \u7d50\u679c\u4ee3\u78bc\n      chart: null            \/\/ \u5716\u8868\u5be6\u4f8b\n    },\n\n    \/\/ DOM \u5143\u7d20\n    elements: {\n      \/\/ \u9801\u9762\n      landingPage: null,\n      quizPage: null,\n      resultPage: null,\n\n      \/\/ \u6309\u9215\n      startBtn: null,\n      prevBtn: null,\n      restartBtn: null,\n\n      \/\/ \u5176\u4ed6\u5143\u7d20\n      quizContent: null,\n      progressText: null,\n      progressFill: null,\n      progressContainer: null,\n      resultType: null,\n      resultDescription: null,\n      resultChart: null\n    },\n\n    \/\/ \u521d\u59cb\u5316\u51fd\u6578\n    init: function() {\n      this.cacheElements();\n      this.bindEvents();\n      this.showPage('landing');\n    },\n\n    \/\/ \u7de9\u5b58 DOM \u5143\u7d20\n    cacheElements: function() {\n      \/\/ \u9801\u9762\n      this.elements.landingPage = document.getElementById('tlqLandingPage');\n      this.elements.quizPage = document.getElementById('tlqQuizPage');\n      this.elements.resultPage = document.getElementById('tlqResultPage');\n\n      \/\/ \u6309\u9215\n      this.elements.startBtn = document.getElementById('tlqStartBtn');\n      this.elements.prevBtn = document.getElementById('tlqPrevBtn');\n      this.elements.restartBtn = document.getElementById('tlqRestartBtn');\n\n      \/\/ \u5176\u4ed6\u5143\u7d20\n      this.elements.quizContent = document.getElementById('tlqQuizContent');\n      this.elements.progressText = document.getElementById('tlqProgressText');\n      this.elements.progressFill = document.getElementById('tlqProgressFill');\n      this.elements.progressContainer = document.getElementById('tlqProgressContainer');\n      this.elements.resultType = document.getElementById('tlqResultType');\n      this.elements.resultDescription = document.getElementById('tlqResultDescription');\n      this.elements.resultChart = document.getElementById('tlqResultChart');\n    },\n\n    \/\/ \u7d81\u5b9a\u4e8b\u4ef6\n    bindEvents: function() {\n      const self = this;\n\n      \/\/ \u958b\u59cb\u6e2c\u9a57\n      this.elements.startBtn.addEventListener('click', function() {\n        self.startQuiz();\n      });\n\n      \/\/ \u91cd\u65b0\u6e2c\u9a57\n      this.elements.restartBtn.addEventListener('click', function() {\n        self.resetQuiz();\n      });\n\n      \/\/ \u4e0a\u4e00\u984c\n      this.elements.prevBtn.addEventListener('click', function() {\n        self.previousQuestion();\n      });\n\n      \/\/ \u4f7f\u7528\u4e8b\u4ef6\u59d4\u6258\u8655\u7406\u9078\u9805\u9ede\u64ca\n      document.addEventListener('click', function(e) {\n        \/\/ \u6aa2\u67e5\u662f\u5426\u9ede\u64ca\u4e86\u9078\u9805\n        if (e.target && (e.target.classList.contains('tlq-option') || e.target.closest('.tlq-option'))) {\n          const optionEl = e.target.classList.contains('tlq-option') ? e.target : e.target.closest('.tlq-option');\n          const optionId = optionEl.dataset.optionId;\n          const questionId = parseInt(optionEl.closest('.tlq-question').dataset.questionId, 10);\n          \n          self.selectOption(questionId, optionId);\n        }\n      });\n\n      \/\/ \u7bc0\u6d41\u7684\u6efe\u52d5\u4e8b\u4ef6\u8655\u7406\n      window.addEventListener('scroll', this.throttle(function() {\n        \/\/ \u5982\u679c\u5728\u6e2c\u9a57\u9801\u9762\uff0c\u6efe\u52d5\u5230\u7576\u524d\u554f\u984c\n        if (self.state.currentPage === 'quiz') {\n          self.scrollToActiveQuestion();\n        }\n      }, 200));\n\n      \/\/ \u8996\u7a97\u5927\u5c0f\u6539\u8b8a\u6642\u8abf\u6574\u5716\u8868\n      window.addEventListener('resize', this.debounce(function() {\n        if (self.state.currentPage === 'result' && self.state.chart) {\n          self.state.chart.resize();\n        }\n      }, 250));\n    },\n\n    \/\/ \u958b\u59cb\u6e2c\u9a57\n    startQuiz: function() {\n      this.state.currentQuestion = 0;\n      this.state.questionPath = [0]; \/\/ \u5f9e\u7b2c\u4e00\u984c\u958b\u59cb\n      this.state.answers = {};\n      this.renderQuestion();\n      this.showPage('quiz');\n      this.scrollToTop();\n    },\n\n    \/\/ \u91cd\u7f6e\u6e2c\u9a57\n    resetQuiz: function() {\n      this.state.currentQuestion = 0;\n      this.state.questionPath = [0]; \/\/ \u5f9e\u7b2c\u4e00\u984c\u958b\u59cb\n      this.state.answers = {};\n      this.renderQuestion();\n      this.showPage('quiz');\n      this.scrollToTop();\n    },\n\n    \/\/ \u986f\u793a\u6307\u5b9a\u9801\u9762\n    showPage: function(pageName) {\n      this.state.currentPage = pageName;\n      \n      \/\/ \u96b1\u85cf\u6240\u6709\u9801\u9762\n      this.elements.landingPage.classList.remove('active');\n      this.elements.quizPage.classList.remove('active');\n      this.elements.resultPage.classList.remove('active');\n      \n      \/\/ \u986f\u793a\u76ee\u6a19\u9801\u9762\n      switch(pageName) {\n        case 'landing':\n          this.elements.landingPage.classList.add('active');\n          break;\n        case 'quiz':\n          this.elements.quizPage.classList.add('active');\n          break;\n        case 'result':\n          this.elements.resultPage.classList.add('active');\n          break;\n      }\n    },\n\n    \/\/ \u6e32\u67d3\u7576\u524d\u554f\u984c\n    renderQuestion: function() {\n      const question = this.data.questions[this.state.currentQuestion];\n      const selectedOption = this.state.answers[question.id];\n      \n      let html = `\n        <div class=\"tlq-question\" data-question-id=\"${question.id}\">\n          <h3 class=\"tlq-question-text\">${question.text}<\/h3>\n          <div class=\"tlq-options\">\n      `;\n      \n      question.options.forEach(option => {\n        const isSelected = selectedOption === option.id;\n        html += `\n          <div class=\"tlq-option ${isSelected ? 'selected' : ''}\" data-option-id=\"${option.id}\">\n            <div class=\"tlq-option-marker\"><\/div>\n            <div class=\"tlq-option-label\">${option.text}<\/div>\n          <\/div>\n        `;\n      });\n      \n      html += `\n          <\/div>\n        <\/div>\n      `;\n      \n      this.elements.quizContent.innerHTML = html;\n      \n      \/\/ \u986f\u793a\/\u96b1\u85cf\u4e0a\u4e00\u984c\u6309\u9215\n      if (this.state.questionPath.length > 1) {\n        this.elements.prevBtn.style.display = 'block';\n      } else {\n        this.elements.prevBtn.style.display = 'none';\n      }\n\n      \/\/ \u66f4\u65b0\u9032\u5ea6\n      this.updateProgress();\n    },\n\n    \/\/ \u9078\u64c7\u9078\u9805\n    selectOption: function(questionId, optionId) {\n      const question = this.data.questions[this.state.currentQuestion];\n      const selectedOption = question.options.find(opt => opt.id === optionId);\n      \n      \/\/ \u5132\u5b58\u7b54\u6848\n      this.state.answers[questionId] = optionId;\n      \n      \/\/ \u8996\u89ba\u53cd\u994b\n      const options = document.querySelectorAll('.tlq-option');\n      options.forEach(opt => opt.classList.remove('selected'));\n      \n      const selectedOptionEl = document.querySelector(`.tlq-option[data-option-id=\"${optionId}\"]`);\n      if (selectedOptionEl) {\n        selectedOptionEl.classList.add('selected');\n      }\n      \n      \/\/ \u5ef6\u9072\u4e00\u4e0b\u518d\u9032\u5165\u4e0b\u4e00\u984c\uff0c\u8b93\u7528\u6236\u770b\u5230\u9078\u64c7\u6548\u679c\n      setTimeout(() => {\n        \/\/ \u6aa2\u67e5\u662f\u5426\u6709\u76f4\u63a5\u7d50\u679c\n        if (selectedOption.result) {\n          this.state.result = selectedOption.result;\n          this.showResult();\n        } else {\n          this.nextQuestion(selectedOption.next);\n        }\n      }, 300);\n    },\n\n    \/\/ \u4e0b\u4e00\u984c\n    nextQuestion: function(nextQuestionId) {\n      \/\/ \u627e\u5230\u4e0b\u4e00\u500b\u554f\u984c\u7684\u7d22\u5f15\n      const nextIndex = this.data.questions.findIndex(q => q.id === nextQuestionId);\n      \n      if (nextIndex !== -1) {\n        this.state.currentQuestion = nextIndex;\n        this.state.questionPath.push(nextIndex);\n        this.renderQuestion();\n        this.scrollToTop();\n      } else {\n        console.error('\u627e\u4e0d\u5230\u4e0b\u4e00\u500b\u554f\u984c:', nextQuestionId);\n      }\n    },\n\n    \/\/ \u4e0a\u4e00\u984c\n    previousQuestion: function() {\n      if (this.state.questionPath.length > 1) {\n        \/\/ \u79fb\u9664\u7576\u524d\u554f\u984c\n        this.state.questionPath.pop();\n        \/\/ \u7372\u53d6\u4e0a\u4e00\u500b\u554f\u984c\u7684\u7d22\u5f15\n        this.state.currentQuestion = this.state.questionPath[this.state.questionPath.length - 1];\n        this.renderQuestion();\n        this.scrollToTop();\n      }\n    },\n\n    \/\/ \u66f4\u65b0\u9032\u5ea6\n    updateProgress: function() {\n      const currentPath = this.state.questionPath.length;\n      \/\/ \u6700\u591a\u670910\u500b\u554f\u984c\u8def\u5f91\n      const maxPath = 10;\n      const percentage = (currentPath \/ maxPath) * 100;\n      \n      this.elements.progressText.textContent = `\u984c\u76ee ${currentPath}\/${maxPath}`;\n      this.elements.progressFill.style.width = `${percentage}%`;\n    },\n\n    \/\/ \u986f\u793a\u7d50\u679c\n    showResult: function() {\n      const result = this.data.results[this.state.result];\n      \n      \/\/ \u8a2d\u7f6e\u7d50\u679c\u985e\u578b\u548c\u63cf\u8ff0\n      this.elements.resultType.textContent = result.title;\n      this.elements.resultDescription.textContent = result.description;\n      \n      \/\/ \u751f\u6210\u7d50\u679c\u6458\u8981\n      this.generateResultSummary(result);\n      \n      \/\/ \u6e32\u67d3\u5716\u8868\n      this.renderResultChart(result);\n      \n      \/\/ \u986f\u793a\u7d50\u679c\u9801\n      this.showPage('result');\n      this.scrollToTop();\n    },\n    \n    \/\/ \u751f\u6210\u7d50\u679c\u6458\u8981\n    generateResultSummary: function(result) {\n      const summaryEl = document.getElementById('tlqSummaryContent');\n      const traits = result.traits;\n      \n      \/\/ \u751f\u6210\u6458\u8981HTML\n      let summaryHTML = `<div class=\"tlq-summary-traits\">`;\n      \n      for (const [trait, value] of Object.entries(traits)) {\n        const barWidth = value + '%';\n        summaryHTML += `\n          <div class=\"tlq-trait-item\">\n            <div class=\"tlq-trait-label\">${trait}<\/div>\n            <div class=\"tlq-trait-bar-container\">\n              <div class=\"tlq-trait-bar\" style=\"width: ${barWidth}; background: linear-gradient(to right, var(--tlq-primary-light), var(--tlq-primary));\"><\/div>\n              <div class=\"tlq-trait-value\">${value}%<\/div>\n            <\/div>\n          <\/div>\n        `;\n      }\n      \n      summaryHTML += `<\/div>`;\n      \n      \/\/ \u6dfb\u52a0\u7d50\u8ad6\u6bb5\u843d\n      summaryHTML += `\n        <div class=\"tlq-summary-conclusion\">\n          <p>\u6839\u64da\u60a8\u7684\u56de\u7b54\uff0c\u60a8\u5728\u611b\u60c5\u4e2d\u7684\u7279\u8cea\u5982\u4e0a\u5716\u6240\u793a\u3002\u4e86\u89e3\u81ea\u5df1\u7684\u7279\u8cea\u53ef\u4ee5\u5e6b\u52a9\u60a8\u5728\u672a\u4f86\u7684\u611f\u60c5\u4e2d\u505a\u51fa\u66f4\u660e\u667a\u7684\u6c7a\u5b9a\u3002<\/p>\n        <\/div>\n      `;\n      \n      summaryEl.innerHTML = summaryHTML;\n      \n      \/\/ \u6dfb\u52a0\u7279\u8cea\u689d\u7684\u6a23\u5f0f\n      const style = document.createElement('style');\n      style.textContent = `\n        .tlq-summary-traits {\n          margin-bottom: var(--tlq-spacing-md);\n        }\n        .tlq-trait-item {\n          margin-bottom: var(--tlq-spacing-sm);\n        }\n        .tlq-trait-label {\n          font-weight: bold;\n          margin-bottom: 4px;\n        }\n        .tlq-trait-bar-container {\n          height: 20px;\n          background-color: var(--tlq-neutral-dark);\n          border-radius: var(--tlq-radius-sm);\n          position: relative;\n          overflow: hidden;\n        }\n        .tlq-trait-bar {\n          height: 100%;\n          border-radius: var(--tlq-radius-sm);\n          transition: width 1s ease;\n        }\n        .tlq-trait-value {\n          position: absolute;\n          right: 8px;\n          top: 0;\n          line-height: 20px;\n          font-weight: bold;\n          color: var(--tlq-white);\n          text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);\n        }\n        .tlq-summary-conclusion {\n          margin-top: var(--tlq-spacing-md);\n          font-style: italic;\n          color: var(--tlq-text-light);\n        }\n      `;\n      document.head.appendChild(style);\n    },\n\n    \/\/ \u6e32\u67d3\u7d50\u679c\u5716\u8868\n    renderResultChart: function(result) {\n      const ctx = this.elements.resultChart.getContext('2d');\n      \n      \/\/ \u7372\u53d6\u7279\u8cea\u6578\u64da\n      const traits = result.traits;\n      const labels = Object.keys(traits);\n      const values = Object.values(traits);\n      \n      \/\/ \u8a2d\u7f6e\u5716\u8868\u6578\u64da\n      const data = {\n        labels: labels,\n        datasets: [{\n          label: '\u60c5\u611f\u7279\u8cea\u8a55\u5206',\n          data: values,\n          backgroundColor: 'rgba(255, 107, 139, 0.2)',\n          borderColor: 'rgba(255, 107, 139, 1)',\n          borderWidth: 2,\n          pointBackgroundColor: 'rgba(255, 107, 139, 1)',\n          pointBorderColor: '#fff',\n          pointHoverBackgroundColor: '#fff',\n          pointHoverBorderColor: 'rgba(255, 107, 139, 1)',\n          pointRadius: 4,\n          pointHoverRadius: 7\n        }]\n      };\n      \n      \/\/ \u5716\u8868\u9078\u9805\n      const options = {\n        scales: {\n          r: {\n            angleLines: {\n              display: true\n            },\n            suggestedMin: 0,\n            suggestedMax: 100,\n            ticks: {\n              stepSize: 20,\n              backdropColor: 'transparent',\n              font: {\n                size: 10\n              }\n            },\n            pointLabels: {\n              font: {\n                size: 16,\n                weight: 'bold'\n              },\n              color: 'rgb(52, 58, 64)'\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      };\n      \n      \/\/ \u5982\u679c\u5df2\u6709\u5716\u8868\u5be6\u4f8b\uff0c\u5148\u92b7\u6bc0\n      if (this.state.chart) {\n        this.state.chart.destroy();\n      }\n      \n      \/\/ \u5275\u5efa\u65b0\u5716\u8868\n      this.state.chart = new Chart(ctx, {\n        type: 'radar',\n        data: data,\n        options: options\n      });\n    },\n\n    \/\/ \u6efe\u52d5\u5230\u9802\u90e8\n    scrollToTop: function() {\n      const container = document.getElementById('trueloveQuiz');\n      if (container) {\n        window.scrollTo({\n          top: container.offsetTop - 50,\n          behavior: 'smooth'\n        });\n      }\n    },\n\n    \/\/ \u6efe\u52d5\u5230\u7576\u524d\u554f\u984c\n    scrollToActiveQuestion: function() {\n      const questionEl = document.querySelector('.tlq-question');\n      if (questionEl) {\n        questionEl.scrollIntoView({\n          behavior: 'smooth',\n          block: 'start'\n        });\n      }\n    },\n\n    \/\/ \u9632\u6296\u51fd\u6578\n    debounce: function(func, wait) {\n      let timeout;\n      return function() {\n        const context = this;\n        const args = arguments;\n        clearTimeout(timeout);\n        timeout = setTimeout(function() {\n          func.apply(context, args);\n        }, wait);\n      };\n    },\n\n    \/\/ \u7bc0\u6d41\u51fd\u6578\n    throttle: function(func, limit) {\n      let inThrottle;\n      return function() {\n        const context = this;\n        const args = arguments;\n        if (!inThrottle) {\n          func.apply(context, args);\n          inThrottle = true;\n          setTimeout(function() {\n            inThrottle = false;\n          }, limit);\n        }\n      };\n    }\n  };\n\n  \/\/ \u9801\u9762\u52a0\u8f09\u5b8c\u6210\u5f8c\u521d\u59cb\u5316\n  document.addEventListener('DOMContentLoaded', function() {\n    TrueLoveQuiz.init();\n  });\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u5728\u6d6e\u8e81\u7684\u793e\u4f1a\u5f53\u4e0b\uff0c\u5f88\u591a\u6240\u8c13\u7684\u300c\u771f\u7231\u300d\u90fd\u4e0d\u8fc7\u662f\u611f\u60c5\u9a97\u5b50\u7684\u5957\u8def\u800c\u5df2\uff0c\u8981\u662f\u5fc3\u52a8\u4f60\u5c31\u8f93\u4e86\u3002\u90a3\u4e48\uff0c\u771f\u7231\u7684\u5e4c\u5b50\uff0c\u80fd\u4e0d\u80fd\u9a97\u5230\u4f60\uff1f\u8bf7\u505a\u4e2a\u6d4b\u8bd5\u770b\u770b\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":[178,175],"tags":[],"class_list":["post-2523","post","type-post","status-publish","format-standard","hentry","category-love","category-relationships"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2523","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=2523"}],"version-history":[{"count":3,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2523\/revisions"}],"predecessor-version":[{"id":10380,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2523\/revisions\/10380"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}