{"id":2503,"date":"2023-10-08T09:29:21","date_gmt":"2023-10-08T01:29:21","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2503"},"modified":"2025-05-10T20:11:33","modified_gmt":"2025-05-10T12:11:33","slug":"love-make-you-suffer","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/love-make-you-suffer","title":{"rendered":"\u7ebf\u4e0a\u514d\u8d39\u5c0f\u6d4b\u9a8c\uff1a\u54ea\u79cd\u7231\u4f1a\u8ba9\u4f60\u5403\u5c3d\u82e6\uff1f"},"content":{"rendered":"<!-- HTML \u7d50\u69cb -->\n<div class=\"hz-quiz-container\" id=\"quiz-container\">\n  <!-- \u5f15\u5c0e\u9801 -->\n  <div class=\"hz-quiz-landing\" id=\"quiz-landing\">\n    <header class=\"hz-quiz-header\">\n      <h2 class=\"hz-quiz-title\">\u54ea\u79cd\u7231\u4f1a\u8ba9\u4f60\u5403\u5c3d\u82e6\u5934\uff1f<\/h2>\n      <p class=\"hz-quiz-subtitle\">\u900f\u8fc7\u8fd9\u4e2a\u6d4b\u9a8c\uff0c\u4e86\u89e3\u4f60\u7684\u7231\u60c5\u5730\u96f7<\/p>\n    <\/header>\n    \n    <main class=\"hz-quiz-intro\">\n      <div class=\"hz-quiz-features\">\n        <div class=\"hz-quiz-feature\">\n          <div class=\"hz-icon\">\ud83d\udc94<\/div>\n          <h3>\u6df1\u5165\u5256\u6790<\/h3>\n          <p>\u63a2\u7d22\u60a8\u5728\u7231\u60c5\u4e2d\u6700\u8106\u5f31\u7684\u4e00\u9762<\/p>\n        <\/div>\n        <div class=\"hz-quiz-feature\">\n          <div class=\"hz-icon\">\ud83d\udc9d<\/div>\n          <h3>\u4e13\u4e1a\u89e3\u6790<\/h3>\n          <p>\u57fa\u4e8e\u5fc3\u7406\u5b66\u7406\u8bba\uff0c\u63d0\u4f9b\u4e2a\u6027\u5316\u5206\u6790<\/p>\n        <\/div>\n        <div class=\"hz-quiz-feature\">\n          <div class=\"hz-icon\">\ud83c\udfaf<\/div>\n          <h3>\u7cbe\u51c6\u7ed3\u679c<\/h3>\n          <p>10\u9053\u7cbe\u9009\u9898\u76ee\uff0c\u5feb\u901f\u5f97\u51fa\u5206\u6790\u7ed3\u679c<\/p>\n        <\/div>\n      <\/div>\n      \n      <div class=\"hz-quiz-intro-text\">\n        <p>\u7231\u662f\u7f8e\u597d\u7684\uff0c\u604b\u7231\u662f\u80fd\u591f\u8ba9\u4eba\u5e78\u798f\u7684\uff0c\u4f46\u6709\u4e9b\u7cdf\u7cd5\u7684\u7231\u60c5\uff0c\u4e0d\u4f46\u4e0d\u80fd\u5e26\u7ed9\u4e00\u4e2a\u4eba\u5e78\u798f\u611f\uff0c\u751a\u81f3\u4f1a\u4ee4\u4eba\u5403\u5c3d\u82e6\u5934\u3002<\/p>\n        <p>\u5176\u5b9e\u7231\u4e0d\u5206\u5bf9\u9519\uff0c\u53ea\u662f\u6709\u65f6\u5019\u6ca1\u6709\u9009\u5bf9\u81ea\u5df1\u8be5\u7231\u7684\u4eba\u3002\u5bf9\u4f60\u800c\u8a00\uff0c\u54ea\u79cd\u7231\u4f1a\u4ee4\u4f60\u5403\u5c3d\u82e6\u5934\uff1f<\/p>\n        <p>\u7acb\u5373\u5f00\u59cb\u6d4b\u9a8c\uff0c\u627e\u51fa\u60a8\u7684\u7231\u60c5\u5730\u96f7\u7ebf\uff01<\/p>\n      <\/div>\n    <\/main>\n    \n    <footer class=\"hz-quiz-cta\">\n      <button class=\"hz-btn-primary\" data-action=\"start-quiz\" style=\"margin: 0 auto; display: block;\">\u7acb\u5373\u5f00\u59cb\u6d4b\u9a8c<\/button>\n    <\/footer>\n  <\/div>\n  \n  <!-- \u6e2c\u9a57\u9801 -->\n  <div class=\"hz-quiz-test\" id=\"quiz-test\" style=\"display: none;\">\n    <header class=\"hz-quiz-header\">\n      <h2>\u7231\u60c5\u75db\u82e6\u6d4b\u9a8c<\/h2>\n      <div class=\"hz-progress\">\n        <div class=\"hz-progress-bar\" id=\"progress-bar\">\n          <div class=\"hz-progress-fill\" id=\"progress-fill\"><\/div>\n        <\/div>\n        <div class=\"hz-progress-text\" id=\"progress-text\">\u7b2c1 \u9898\/ \u517110 \u9898<\/div>\n      <\/div>\n    <\/header>\n    \n    <main class=\"hz-quiz-content\">\n      <h3 class=\"hz-quiz-question\" id=\"question-text\"><\/h3>\n      <div class=\"hz-quiz-options\" id=\"options-container\"><\/div>\n      <div class=\"hz-quiz-image\" id=\"question-image\"><\/div>\n    <\/main>\n    \n    <footer class=\"hz-quiz-navigation\">\n      <button class=\"hz-btn-secondary\" id=\"btn-previous\" style=\"display: none;\">\u4e0a\u4e00\u9898<\/button>\n    <\/footer>\n  <\/div>\n  \n  <!-- \u7d50\u679c\u9801 -->\n  <div class=\"hz-quiz-result\" id=\"quiz-result\" style=\"display: none;\">\n    <header class=\"hz-quiz-header\">\n      <h2>\u60a8\u7684\u6d4b\u9a8c\u7ed3\u679c<\/h2>\n    <\/header>\n    \n    <main class=\"hz-quiz-result-content\">\n      <div class=\"hz-result-type\" id=\"result-type\"><\/div>\n      <div class=\"hz-result-description\" id=\"result-description\"><\/div>\n      <div class=\"hz-result-chart-container\">\n        <canvas id=\"result-chart\"><\/canvas>\n      <\/div>\n      <div class=\"hz-result-details\" id=\"result-details\"><\/div>\n    <\/main>\n    \n    <footer class=\"hz-quiz-cta\">\n      <button class=\"hz-btn-primary\" data-action=\"restart-quiz\" style=\"margin: 0 auto; display: block;\">\u91cd\u65b0\u6d4b\u8bd5<\/button>\n    <\/footer>\n  <\/div>\n<\/div>\n\n<!-- CSS \u6a23\u5f0f -->\n<style>\n:root {\n  --hz-primary-color: #ff6b6b;\n  --hz-secondary-color: #4ecdc4;\n  --hz-accent-color: #ffe66d;\n  --hz-text-color: #2d3436;\n  --hz-light-bg: #ffeaa7;\n  --hz-white: #ffffff;\n  --hz-gray-100: #f8f9fa;\n  --hz-gray-200: #e9ecef;\n  --hz-gray-300: #dee2e6;\n  --hz-gray-400: #ced4da;\n  --hz-gray-500: #adb5bd;\n  --hz-success: #00b894;\n  --hz-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  --hz-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);\n  --hz-transition: all 0.3s ease;\n}\n\n* {\n  box-sizing: border-box;\n}\n\n.hz-quiz-container {\n  max-width: 600px;\n  margin: 0 auto;\n  padding: 16px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang TC', 'Microsoft JhengHei', sans-serif;\n  color: var(--hz-text-color);\n  line-height: 1.6;\n}\n\n\/* \u5f15\u5c0e\u9801\u6a23\u5f0f *\/\n.hz-quiz-landing {\n  text-align: center;\n  background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);\n  padding: 24px;\n  border-radius: 16px;\n  box-shadow: var(--hz-shadow-lg);\n}\n\n.hz-quiz-title {\n  font-size: clamp(28px, 6vw, 40px);\n  margin: 0 0 8px 0;\n  color: var(--hz-primary-color);\n  font-weight: 700;\n}\n\n.hz-quiz-subtitle {\n  font-size: clamp(16px, 4vw, 20px);\n  color: var(--hz-gray-500);\n  margin-bottom: 32px;\n}\n\n.hz-quiz-features {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: stretch;\n  gap: 16px;\n  margin: 32px 0;\n  padding: 16px 0;\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n\n.hz-quiz-feature {\n  flex: 1 1 auto;\n  min-width: 160px;\n  max-width: none;\n  padding: 16px;\n  background: var(--hz-white);\n  border-radius: 12px;\n  box-shadow: var(--hz-shadow);\n  transition: var(--hz-transition);\n}\n\n.hz-quiz-feature:hover {\n  transform: translateY(-4px);\n  box-shadow: var(--hz-shadow-lg);\n}\n\n.hz-icon {\n  font-size: 32px;\n  margin-bottom: 8px;\n  display: block;\n  width: 48px;\n  height: 48px;\n  background: linear-gradient(135deg, #ffeaa7 0%, #ffe66d 100%);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.hz-quiz-feature h3 {\n  font-size: 16px;\n  margin: 0 0 4px 0;\n  color: var(--hz-primary-color);\n  text-align: center;\n}\n\n.hz-quiz-feature p {\n  font-size: 14px;\n  color: var(--hz-gray-500);\n  margin: 0;\n  text-align: center;\n  line-height: 1.4;\n}\n\n.hz-quiz-intro-text {\n  background: var(--hz-white);\n  padding: 24px;\n  border-radius: 12px;\n  margin: 24px 0;\n  font-size: 18px;\n  line-height: 1.8;\n  text-align: left;\n}\n\n.hz-quiz-intro-text p {\n  margin-bottom: 16px;\n}\n\n.hz-quiz-intro-text p:last-child {\n  margin-bottom: 0;\n  text-align: center;\n  font-weight: 600;\n  color: var(--hz-primary-color);\n}\n\n\/* \u6309\u9215\u6a23\u5f0f *\/\n.hz-btn-primary, .hz-btn-secondary {\n  padding: 14px 48px;\n  border: none;\n  border-radius: 50px;\n  font-size: 18px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: var(--hz-transition);\n  min-width: 180px;\n  min-height: 48px;\n  touch-action: manipulation;\n}\n\n.hz-btn-primary {\n  background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);\n  color: var(--hz-white);\n  box-shadow: 0 6px 12px rgba(255, 107, 107, 0.3);\n}\n\n.hz-btn-primary:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 16px rgba(255, 107, 107, 0.4);\n}\n\n.hz-btn-secondary {\n  background: var(--hz-gray-200);\n  color: var(--hz-text-color);\n}\n\n.hz-btn-secondary:hover {\n  background: var(--hz-gray-300);\n}\n\n\/* \u6e2c\u9a57\u9801\u6a23\u5f0f *\/\n.hz-quiz-header {\n  text-align: center;\n  margin-bottom: 32px;\n}\n\n.hz-quiz-header h2 {\n  font-size: clamp(24px, 5vw, 32px);\n  margin: 0 0 24px 0;\n  color: var(--hz-primary-color);\n}\n\n.hz-progress {\n  margin-bottom: 24px;\n}\n\n.hz-progress-bar {\n  width: 100%;\n  height: 8px;\n  background: var(--hz-gray-200);\n  border-radius: 4px;\n  overflow: hidden;\n  margin-bottom: 8px;\n}\n\n.hz-progress-fill {\n  height: 100%;\n  background: linear-gradient(90deg, var(--hz-primary-color) 0%, var(--hz-secondary-color) 100%);\n  transition: width 0.3s ease;\n  width: 10%;\n}\n\n.hz-progress-text {\n  text-align: center;\n  color: var(--hz-gray-500);\n  font-size: 16px;\n}\n\n.hz-quiz-question {\n  font-size: 22px;\n  font-weight: 700;\n  margin-bottom: 32px;\n  text-align: left;\n  color: var(--hz-text-color);\n  line-height: 1.6;\n}\n\n.hz-quiz-image {\n  margin-bottom: 32px;\n  text-align: center;\n}\n\n.hz-quiz-image img {\n  max-width: 100%;\n  border-radius: 12px;\n  box-shadow: var(--hz-shadow);\n}\n\n.hz-quiz-options {\n  display: grid;\n  gap: 16px;\n  margin-bottom: 32px;\n}\n\n.hz-quiz-option {\n  padding: 20px 24px;\n  background: var(--hz-white);\n  border: 2px solid var(--hz-gray-200);\n  border-radius: 12px;\n  cursor: pointer;\n  transition: var(--hz-transition);\n  font-size: 18px;\n  color: var(--hz-text-color);\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  text-align: left;\n}\n\n.hz-quiz-option:hover {\n  border-color: var(--hz-primary-color);\n  background: #fff5f5;\n  transform: translateY(-2px);\n  color: #000;\n}\n\n.hz-quiz-option.selected {\n  background: linear-gradient(135deg, #ffeaa7 0%, #ffe66d 100%);\n  border-color: var(--hz-primary-color);\n  color: var(--hz-text-color);\n}\n\n.hz-quiz-navigation {\n  text-align: center;\n  margin-top: 32px;\n  width: 100%;\n}\n\n#btn-previous {\n  margin: 0 auto;\n  display: inline-block;\n}\n\n\/* \u7d50\u679c\u9801\u6a23\u5f0f *\/\n.hz-quiz-result-content {\n  max-width: 800px;\n  margin: 0 auto;\n}\n\n.hz-result-type {\n  background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);\n  color: var(--hz-white);\n  padding: 24px;\n  border-radius: 16px;\n  text-align: center;\n  margin-bottom: 32px;\n  box-shadow: var(--hz-shadow-lg);\n}\n\n.hz-result-type h3 {\n  font-size: clamp(24px, 5vw, 32px);\n  margin: 0;\n  font-weight: 700;\n}\n\n.hz-result-description {\n  background: var(--hz-white);\n  padding: 24px;\n  border-radius: 12px;\n  margin-bottom: 32px;\n  font-size: 18px;\n  line-height: 1.8;\n  text-align: left;\n  box-shadow: var(--hz-shadow);\n}\n\n.hz-result-chart-container {\n  background: var(--hz-white);\n  padding: 24px;\n  border-radius: 12px;\n  margin-bottom: 32px;\n  box-shadow: var(--hz-shadow);\n  max-width: 600px;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n#result-chart {\n  max-height: 400px;\n  max-width: 100%;\n}\n\n.hz-result-details {\n  background: var(--hz-gray-100);\n  padding: 24px;\n  border-radius: 12px;\n  margin-bottom: 32px;\n  text-align: left;\n}\n\n.hz-result-details h4 {\n  color: var(--hz-primary-color);\n  font-size: 20px;\n  margin-bottom: 16px;\n}\n\n.hz-result-details p {\n  font-size: 18px;\n  margin-bottom: 12px;\n  line-height: 1.7;\n}\n\n\/* \u7b2c\u4e00\u984c\u7279\u6b8a\u6a23\u5f0f *\/\n#question-1 .hz-quiz-options {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: 12px;\n  margin-bottom: 32px;\n}\n\n#question-1 .hz-quiz-option {\n  flex: 0 1 auto;\n  min-width: 80px;\n  padding: 12px 16px;\n  text-align: center;\n}\n\n\/* \u97ff\u61c9\u5f0f\u8a2d\u8a08 *\/\n@media (max-width: 768px) {\n  .hz-quiz-container {\n    padding: 12px;\n  }\n  \n  .hz-quiz-landing {\n    padding: 16px;\n  }\n  \n  .hz-quiz-features {\n    flex-direction: column;\n    align-items: center;\n  }\n  \n  .hz-quiz-feature {\n    flex: 1 1 100%;\n    max-width: 100%;\n    min-width: auto;\n  }\n  \n  .hz-icon {\n    font-size: 40px;\n    width: 60px;\n    height: 60px;\n  }\n  \n  .hz-quiz-feature h3 {\n    font-size: 18px;\n  }\n  \n  .hz-quiz-feature p {\n    font-size: 16px;\n  }\n  \n  .hz-btn-primary, .hz-btn-secondary {\n    width: auto !important;\n    min-width: auto !important;\n  }\n  \n  .hz-quiz-option {\n    padding: 16px 20px;\n  }\n  \n  #question-1 .hz-quiz-option {\n    margin: 4px;\n  }\n}\n\n\/* \u7121\u969c\u7919\u6a23\u5f0f *\/\n@media (prefers-reduced-motion: reduce) {\n  * {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\n\/* Focus \u72c0\u614b *\/\n.hz-btn-primary:focus-visible,\n.hz-btn-secondary:focus-visible,\n.hz-quiz-option:focus-visible {\n  outline: 3px solid var(--hz-secondary-color);\n  outline-offset: 2px;\n}\n<\/style>\n\n<!-- JavaScript \u884c\u70ba -->\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  \/\/ \u6e2c\u9a57\u6578\u64da\n  const QUIZ_DATA = {\n    questions: [\n      {\n        id: 1,\n        text: \"\u4e0b\u5217\u6709\u4e94\u96bb\u74f6\u5b50\uff0c\u6bcf\u96bb\u74f6\u5b50\u88cf\u90fd\u6709\u4e00\u652f\u8a66\u7ba1\uff0c\u54ea\u652f\u8a66\u7ba1\u88cf\u88dd\u7684\u662f\u4ee4\u4eba\u8b8a\u7f8e\u7684\u9748\u85e5\uff1f\u8acb\u6191\u76f4\u89ba\u505a\u51fa\u9078\u64c7\u3002\",\n        type: \"image\",\n        image: \"https:\/\/xinliceyan.org\/wp-content\/uploads\/2023\/10\/pingzishiguan.jpg\",\n        options: [\n          { value: \"1\", text: \"\u90781\", weight: {\u8d8a\u7d1a\u4e4b\u6200: 1 } },\n          { value: \"2\", text: \"\u90782\", weight: { \u5fd8\u5e74\u4e4b\u6200: 1 } },\n          { value: \"3\", text: \"\u90783\", weight: { \u66d6\u6627\u4e4b\u6200: 1 } },\n          { value: \"4\", text: \"\u90784\", weight: { \u751f\u6b7b\u4e4b\u6200: 1 } },\n          { value: \"5\", text: \"\u90785\", weight: { \u91d1\u9322\u4e4b\u6200: 1 } }\n        ]\n      },\n      {\n        id: 2,\n        text: \"\u5728\u521d\u6b21\u7d04\u6703\u6642\uff0c\u5c0d\u65b9\u7a7f\u8457\u660e\u986f\u6bd4\u4f60\u9ad8\u7d1a\u7684\u670d\u88dd\uff0c\u4f60\u7684\u7b2c\u4e00\u53cd\u61c9\u662f\uff1f\",\n        options: [\n          { value: \"A\", text: \"\u611f\u5230\u58d3\u529b\uff0c\u64d4\u5fc3\u81ea\u5df1\u914d\u4e0d\u4e0a\u5c0d\u65b9\", weight: { \u8d8a\u7d1a\u4e4b\u6200: 1 } },\n          { value: \"B\", text: \"\u89c0\u5bdf\u5c0d\u65b9\u7684\u54c1\u5473\u548c\u8ac7\u5410\u662f\u5426\u76f8\u7b26\", weight: { \u66d6\u6627\u4e4b\u6200: 1 } },\n          { value: \"C\", text: \"\u4e0d\u5728\u610f\u5916\u8868\uff0c\u91cd\u8996\u5167\u5728\u4ea4\u6d41\", weight: { \u5fd8\u5e74\u4e4b\u6200: 1 } },\n          { value: \"D\", text: \"\u6697\u4e2d\u8a08\u7b97\u7d04\u6703\u8cbb\u7528\u8ab0\u4f86\u4ed8\", weight: { \u91d1\u9322\u4e4b\u6200: 1 } },\n          { value: \"E\", text: \"\u5e0c\u671b\u80fd\u7d66\u5c0d\u65b9\u7559\u4e0b\u6df1\u523b\u5370\u8c61\", weight: { \u751f\u6b7b\u4e4b\u6200: 1 } }\n        ]\n      },\n      {\n        id: 3,\n        text: \"\u4ea4\u5f80\u4e2d\uff0c\u5c0d\u65b9\u7d93\u5e38\u6a21\u7cca\u627f\u8afe\uff0c\u4e0d\u9858\u8a0e\u8ad6\u672a\u4f86\u898f\u5283\uff0c\u4f60\u6703\uff1f\",\n        options: [\n          { value: \"A\", text: \"\u4e3b\u52d5\u8ffd\u554f\uff0c\u8981\u6c42\u78ba\u5b9a\u95dc\u4fc2\", weight: { \u66d6\u6627\u4e4b\u6200: 1 } },\n          { value: \"B\", text: \"\u7d66\u5c0d\u65b9\u6642\u9593\uff0c\u4e0d\u6025\u65bc\u5b9a\u7fa9\u95dc\u4fc2\", weight: { \u5fd8\u5e74\u4e4b\u6200: 1 } },\n          { value: \"C\", text: \"\u958b\u59cb\u61f7\u7591\u5c0d\u65b9\u7684\u8aa0\u610f\uff0c\u8003\u616e\u5206\u624b\", weight: { \u751f\u6b7b\u4e4b\u6200: 1 } },\n          { value: \"D\", text: \"\u7528\u7269\u8cea\u8868\u73fe\u4f86\u8a66\u63a2\u5c0d\u65b9\u7684\u5fc3\u610f\", weight: { \u91d1\u9322\u4e4b\u6200: 1 } },\n          { value: \"E\", text: \"\u964d\u4f4e\u671f\u671b\uff0c\u914d\u5408\u5c0d\u65b9\u7684\u7bc0\u594f\", weight: { \u8d8a\u7d1a\u4e4b\u6200: 1 } }\n        ]\n      },\n      {\n        id: 4,\n        text: \"\u5c0d\u65b9\u7684\u5bb6\u5ead\u80cc\u666f\u8207\u4f60\u76f8\u5dee\u751a\u9060\uff0c\u7b2c\u4e00\u6b21\u898b\u5bb6\u9577\u6642\uff0c\u4f60\u6700\u64d4\u5fc3\u4ec0\u9ebc\uff1f\",\n        options: [\n          { value: \"A\", text: \"\u7121\u6cd5\u878d\u5165\u5c0d\u65b9\u7684\u793e\u4ea4\u5708\", weight: { \u8d8a\u7d1a\u4e4b\u6200: 1 } },\n          { value: \"B\", text: \"\u5e74\u9f61\u5dee\u8ddd\u5f15\u8d77\u9577\u8f29\u95dc\u6ce8\", weight: { \u5fd8\u5e74\u4e4b\u6200: 1 } },\n          { value: \"C\", text: \"\u7121\u6cd5\u7d66\u5c0d\u65b9\u60f3\u8981\u7684\u751f\u6d3b\u54c1\u8cea\", weight: { \u91d1\u9322\u4e4b\u6200: 1 } },\n          { value: \"D\", text: \"\u5c0d\u65b9\u5bb6\u4eba\u4e0d\u8a8d\u53ef\u9019\u6bb5\u95dc\u4fc2\", weight: { \u66d6\u6627\u4e4b\u6200: 1 } },\n          { value: \"E\", text: \"\u7121\u6cd5\u627f\u64d4\u5c0d\u65b9\u7684\u671f\u671b\", weight: { \u751f\u6b7b\u4e4b\u6200: 1 } }\n        ]\n      },\n      {\n        id: 5,\n        text: \"\u5728\u611b\u60c5\u4e2d\uff0c\u4f60\u6700\u7121\u6cd5\u5fcd\u53d7\u7684\u662f\u4ec0\u9ebc\uff1f\",\n        options: [\n          { value: \"A\", text: \"\u95dc\u4fc2\u5730\u4f4d\u4e0d\u5e73\u7b49\", weight: { \u8d8a\u7d1a\u4e4b\u6200: 1 } },\n          { value: \"B\", text: \"\u5e74\u9f61\u5dee\u8ddd\u5e36\u4f86\u7684\u4ee3\u6e9d\", weight: { \u5fd8\u5e74\u4e4b\u6200: 1 } },\n          { value: \"C\", text: \"\u611b\u60c5\u4e2d\u647b\u96dc\u91d1\u9322\u8003\u91cf\", weight: { \u91d1\u9322\u4e4b\u6200: 1 } },\n          { value: \"D\", text: \"\u95dc\u4fc2\u4e2d\u5145\u6eff\u4e0d\u78ba\u5b9a\u6027\", weight: { \u66d6\u6627\u4e4b\u6200: 1 } },\n          { value: \"E\", text: \"\u627f\u53d7\u904e\u91cd\u7684\u60c5\u611f\u8ca0\u64d4\", weight: { \u751f\u6b7b\u4e4b\u6200: 1 } }\n        ]\n      },\n      {\n        id: 6,\n        text: \"\u7576\u670b\u53cb\u8cea\u7591\u4f60\u7684\u6200\u611b\u5c0d\u8c61\u6642\uff0c\u4f60\u901a\u5e38\u6703\uff1f\",\n        options: [\n          { value: \"A\", text: \"\u7acb\u5373\u70ba\u5c0d\u65b9\u8faf\u8b77\uff0c\u4e0d\u5bb9\u4ed6\u4eba\u7f6e\u5599\", weight: { \u751f\u6b7b\u4e4b\u6200: 1 } },\n          { value: \"B\", text: \"\u9ed8\u9ed8\u8003\u91cf\u670b\u53cb\u7684\u610f\u898b\uff0c\u958b\u59cb\u52d5\u6416\", weight: { \u5fd8\u5e74\u4e4b\u6200: 1 } },\n          { value: \"C\", text: \"\u907f\u514d\u5728\u670b\u53cb\u9762\u524d\u63d0\u53ca\u9019\u6bb5\u95dc\u4fc2\", weight: { \u8d8a\u7d1a\u4e4b\u6200: 1 } },\n          { value: \"D\", text: \"\u7528\u5be6\u969b\u884c\u52d5\u8b49\u660e\u95dc\u4fc2\u7684\u7a69\u5b9a\u6027\", weight: { \u66d6\u6627\u4e4b\u6200: 1 } },\n          { value: \"E\", text: \"\u5206\u6790\u670b\u53cb\u662f\u5426\u7fa8\u6155\u6216\u5ac9\u5992\", weight: { \u91d1\u9322\u4e4b\u6200: 1 } }\n        ]\n      },\n      {\n        id: 7,\n        text: \"\u7406\u60f3\u4e2d\u7684\u611b\u60c5\u61c9\u8a72\u662f\u600e\u6a23\u7684\uff1f\",\n        options: [\n          { value: \"A\", text: \"\u96d9\u65b9\u5730\u4f4d\u5e73\u7b49\uff0c\u4e92\u76f8\u5c0a\u91cd\", weight: { \u8d8a\u7d1a\u4e4b\u6200: 1 } },\n          { value: \"B\", text: \"\u5e74\u9f61\u76f8\u8fd1\uff0c\u8208\u8da3\u76f8\u6295\", weight: { \u5fd8\u5e74\u4e4b\u6200: 1 } },\n          { value: \"C\", text: \"\u7d93\u6fdf\u7368\u7acb\uff0c\u4e0d\u8ac7\u91d1\u9322\", weight: { \u91d1\u9322\u4e4b\u6200: 1 } },\n          { value: \"D\", text: \"\u95dc\u4fc2\u660e\u78ba\uff0c\u6709\u5171\u540c\u7684\u672a\u4f86\", weight: { \u66d6\u6627\u4e4b\u6200: 1 } },\n          { value: \"E\", text: \"\u8f15\u9b06\u81ea\u5728\uff0c\u6c92\u6709\u8ca0\u64d4\", weight: { \u751f\u6b7b\u4e4b\u6200: 1 } }\n        ]\n      },\n      {\n        id: 8,\n        text: \"\u5206\u624b\u6642\uff0c\u4f60\u6700\u96e3\u91cb\u61f7\u7684\u6703\u662f\u4ec0\u9ebc\uff1f\",\n        options: [\n          { value: \"A\", text: \"\u4ed8\u51fa\u7684\u611f\u60c5\u7121\u6cd5\u5f97\u5230\u56de\u5831\", weight: { \u751f\u6b7b\u4e4b\u6200: 1 } },\n          { value: \"B\", text: \"\u932f\u5931\u9069\u5408\u7684\u5e74\u9f61\u6bb5\u6200\u611b\", weight: { \u5fd8\u5e74\u4e4b\u6200: 1 } },\n          { value: \"C\", text: \"\u7d93\u6fdf\u4e0a\u7684\u6295\u5165\u4ed8\u4e4b\u6771\u6d41\", weight: { \u91d1\u9322\u4e4b\u6200: 1 } },\n          { value: \"D\", text: \"\u6d6a\u8cbb\u6642\u9593\u5728\u4e0d\u78ba\u5b9a\u7684\u95dc\u4fc2\u4e0a\", weight: { \u66d6\u6627\u4e4b\u6200: 1 } },\n          { value: \"E\", text: \"\u7121\u6cd5\u7dad\u6301\u61c9\u6709\u7684\u95dc\u4fc2\u9ad4\u9762\", weight: { \u8d8a\u7d1a\u4e4b\u6200: 1 } }\n        ]\n      },\n      {\n        id: 9,\n        text: \"\u5c0d\u65b9\u63d0\u51fa\u7d93\u6fdf\u4e0a\u7684\u652f\u63f4\u6216\u8981\u6c42\uff0c\u4f60\u7684\u53cd\u61c9\u662f\uff1f\",\n        options: [\n          { value: \"A\", text: \"\u9019\u662f\u6b63\u5e38\u7684\uff0c\u611b\u60c5\u4e2d\u61c9\u8a72\u4e92\u76f8\u5e6b\u52a9\", weight: { \u751f\u6b7b\u4e4b\u6200: 1 } },\n          { value: \"B\", text: \"\u8003\u616e\u96d9\u65b9\u7684\u5e74\u9f61\u548c\u7d93\u6fdf\u80fd\u529b\", weight: { \u5fd8\u5e74\u4e4b\u6200: 1 } },\n          { value: \"C\", text: \"\u7acb\u5373\u8b66\u89ba\uff0c\u61f7\u7591\u5c0d\u65b9\u7684\u52d5\u6a5f\", weight: { \u91d1\u9322\u4e4b\u6200: 1 } },\n          { value: \"D\", text: \"\u9700\u8981\u5148\u78ba\u5b9a\u95dc\u4fc2\u7684\u7a69\u5b9a\u6027\", weight: { \u66d6\u6627\u4e4b\u6200: 1 } },\n          { value: \"E\", text: \"\u64d4\u5fc3\u9019\u6703\u5f71\u97ff\u96d9\u65b9\u7684\u5e73\u7b49\u95dc\u4fc2\", weight: { \u8d8a\u7d1a\u4e4b\u6200: 1 } }\n        ]\n      },\n      {\n        id: 10,\n        text: \"\u770b\u5230\u6200\u611b\u4e2d\u7684\u81ea\u5df1\uff0c\u4f60\u6700\u64d4\u5fc3\u8b8a\u6210\u4ec0\u9ebc\u6a23\u5b50\uff1f\",\n        options: [\n          { value: \"A\", text: \"\u5931\u53bb\u81ea\u6211\uff0c\u904e\u5206\u9077\u5c31\u4ed6\u4eba\", weight: { \u8d8a\u7d1a\u4e4b\u6200: 1 } },\n          { value: \"B\", text: \"\u88ab\u5e74\u9f61\u504f\u898b\u56f0\u64fe\uff0c\u7121\u6cd5\u81ea\u5728\u76f8\u8655\", weight: { \u5fd8\u5e74\u4e4b\u6200: 1 } },\n          { value: \"C\", text: \"\u5c0d\u91d1\u9322\u904e\u5206\u8a08\u8f03\uff0c\u5931\u53bb\u7d14\u771f\", weight: { \u91d1\u9322\u4e4b\u6200: 1 } },\n          { value: \"D\", text: \"\u5728\u4e0d\u78ba\u5b9a\u4e2d\u7126\u616e\uff0c\u5931\u53bb\u4fe1\u5fc3\", weight: { \u66d6\u6627\u4e4b\u6200: 1 } },\n          { value: \"E\", text: \"\u80cc\u8ca0\u904e\u91cd\u8cac\u4efb\uff0c\u5598\u4e0d\u904e\u6c23\", weight: { \u751f\u6b7b\u4e4b\u6200: 1 } }\n        ]\n      }\n    ],\n    \n    results: {\n      \u8d8a\u7d1a\u4e4b\u6200: {\n        title: \"\u8d8a\u7d1a\u4e4b\u6200\",\n        description: \"\u8de8\u8d8a\u4e86\u7b49\u7d1a\u7684\u6200\u611b\u6703\u7d66\u4f60\u5e36\u4f86\u5f88\u591a\u75db\u82e6\uff0c\u5118\u7ba1\u6211\u5011\u751f\u6d3b\u5728\u4e00\u500b\u8d8a\u4f86\u8d8a\u516c\u5e73\u7684\u793e\u6703\u4e2d\uff0c\u7b49\u7d1a\u89c0\u5ff5\u4e5f\u9010\u6f38\u88ab\u6d88\u9664\u4e86\u3002\u4f46\u5982\u679c\u548c\u81ea\u5df1\u968e\u5c64\u4e0d\u540c\u7684\u4eba\u6200\u611b\uff0c\u4f60\u9084\u662f\u5f88\u96e3\u8de8\u8d8a\u5167\u5fc3\u7684\u90a3\u9053\u969c\u7919\uff0c\u5f88\u591a\u6642\u5019\uff0c\u4f60\u5e0c\u671b\u81ea\u5df1\u7684\u6200\u60c5\u5f97\u5230\u9031\u906d\u4eba\u7684\u795d\u798f\uff0c\u800c\u7b49\u7d1a\u7684\u5dee\u7570\u4f7f\u4f60\u7121\u6cd5\u5927\u65b9\u7684\u628a\u53e6\u4e00\u534a\u4ecb\u7d39\u7d66\u5468\u570d\u4eba\u8a8d\u8b58\uff0c\u5c0d\u6b64\uff0c\u4f60\u7684\u5167\u5fc3\u4e5f\u662f\u5099\u53d7\u714e\u71ac\u7684\u3002\",\n        color: \"#ff6b6b\",\n        traits: {\n          \u793e\u4ea4\u8a8d\u540c\u9700\u6c42: 85,\n          \u81ea\u6211\u50f9\u503c\u611f: 65,\n          \u5305\u5bb9\u5ea6: 45,\n          \u9069\u61c9\u529b: 55,\n          \u81ea\u6211\u8a8d\u77e5: 75\n        },\n        tips: [\n          \"\u5b78\u7fd2\u5efa\u7acb\u66f4\u5f37\u7684\u81ea\u4fe1\u5fc3\uff0c\u4e0d\u8981\u904e\u5206\u4f9d\u8cf4\u4ed6\u4eba\u7684\u8a8d\u53ef\",\n          \"\u5617\u8a66\u5c08\u6ce8\u65bc\u95dc\u4fc2\u672c\u8eab\uff0c\u800c\u975e\u5916\u5728\u689d\u4ef6\u7684\u5dee\u7570\",\n          \"\u8207\u4f34\u4fb6\u5766\u8aa0\u6e9d\u901a\uff0c\u5171\u540c\u9762\u5c0d\u793e\u6703\u58d3\u529b\",\n          \"\u57f9\u990a\u5065\u5eb7\u7684\u81ea\u6211\u50f9\u503c\u89c0\uff0c\u4e0d\u4ee5\u968e\u5c64\u5b9a\u7fa9\u81ea\u6211\"\n        ]\n      },\n      \u5fd8\u5e74\u4e4b\u6200: {\n        title: \"\u5fd8\u5e74\u4e4b\u6200\",\n        description: \"\u96d9\u65b9\u4e4b\u9593\u6709\u4e00\u5b9a\u7684\u5e74\u9f61\u5dee\u8ddd\uff0c\u4e26\u4e0d\u6703\u7d66\u4f60\u9020\u6210\u56f0\u64fe\uff0c\u4f46\u5982\u679c\u9677\u5165\u5fd8\u5e74\u4e4b\u6200\u4e2d\uff0c\u4f60\u5c31\u96e3\u4ee5\u6291\u5236\u5167\u5fc3\u7684\u75db\u82e6\u611f\u3002\u4e00\u65b9\u9762\u8981\u61c9\u4ed8\u89aa\u53cb\u7684\u8cea\u7591\uff0c\u53e6\u4e00\u65b9\u9762\u53c8\u8981\u8de8\u8d8a\u5169\u4eba\u4e4b\u9593\u5be6\u8cea\u5b58\u5728\u7684\u4ee3\u6e9d\uff0c\u505a\u5230\u9019\u4e9b\u4f3c\u4e4e\u771f\u7684\u6c92\u90a3\u9ebc\u5bb9\u6613\uff0c\u4f60\u5230\u4e0d\u5728\u4e4e\u4ed6\u4eba\u7684\u773c\u5149\uff0c\u53ea\u662f\u5c0d\u65bc\u95dc\u4fc2\u89aa\u5bc6\u7684\u89aa\u53cb\uff0c\u4f60\u9084\u662f\u5e0c\u671b\u5f97\u5230\u4ed6\u5011\u7684\u7406\u89e3\uff0c\u5728\u5c0b\u6c42\u7406\u89e3\u7684\u904e\u7a0b\u4e2d\u5c31\u6703\u5403\u76e1\u82e6\u982d\u3002\",\n        color: \"#4ecdc4\",\n        traits: {\n          \u793e\u4ea4\u9069\u61c9\u529b: 70,\n          \u6e9d\u901a\u80fd\u529b: 80,\n          \u50f9\u503c\u89c0\u5f48\u6027: 60,\n          \u60c5\u611f\u6210\u719f\u5ea6: 75,\n          \u672a\u4f86\u898f\u5283\u80fd\u529b: 65\n        },\n        tips: [\n          \"\u73cd\u8996\u5f7c\u6b64\u7684\u7368\u7279\u7d93\u6b77\uff0c\u5c07\u5e74\u9f61\u5dee\u7570\u8f49\u5316\u70ba\u512a\u52e2\",\n          \"\u5efa\u7acb\u5171\u540c\u8208\u8da3\uff0c\u7e2e\u5c0f\u4ee3\u6e9d\",\n          \"\u7528\u884c\u52d5\u5c55\u73fe\u95dc\u4fc2\u7684\u6210\u719f\u8207\u7a69\u5b9a\",\n          \"\u5c0b\u6c42\u7406\u89e3\u548c\u652f\u6301\uff0c\u4f46\u4e0d\u904e\u5206\u4f9d\u8cf4\u4ed6\u4eba\u8a8d\u53ef\"\n        ]\n      },\n      \u66d6\u6627\u4e4b\u6200: {\n        title: \"\u66d6\u6627\u4e4b\u6200\",\n        description: \"\u611b\u60c5\u4e2d\u7684\u4e0d\u78ba\u5b9a\u56e0\u7d20\u6703\u4ee4\u4f60\u5403\u76e1\u82e6\u982d\uff0c\u6240\u4ee5\u9762\u5c0d\u90a3\u7a2e\u5728\u4e00\u8d77\u4e0d\u8ac7\u672a\u4f86\uff0c\u4e0d\u8ac7\u5a5a\u59fb\uff0c\u50cf\u670b\u53cb\u53c8\u50cf\u60c5\u4fb6\u7684\u611b\u60c5\uff0c\u4f60\u66f4\u80fd\u611f\u53d7\u5230\u7684\u662f\u7121\u671b\u800c\u4e0d\u662f\u6b61\u559c\u3002\u96d6\u7136\u660e\u77e5\u9053\u611f\u60c5\u662f\u7121\u6cd5\u9810\u6599\u7684\uff0c\u4f46\u5373\u4fbf\u5f97\u5230\u5c0d\u65b9\u7684\u4e00\u500b\u53e3\u982d\u627f\u8afe\uff0c\u4f60\u4e5f\u6703\u89ba\u5f97\u6eff\u8db3\uff0c\u5c31\u662f\u5728\u7d22\u6c42\u53e3\u982d\u627f\u8afe\u7684\u904e\u7a0b\u4e2d\uff0c\u4f60\u53ef\u80fd\u6703\u9055\u80cc\u81ea\u5df1\u7684\u539f\u5247\uff0c\u4f5c\u51fa\u904e\u591a\u7684\u5949\u737b\uff0c\u9019\u5c31\u662f\u5c0e\u81f4\u75db\u82e6\u7684\u539f\u56e0\u3002\",\n        color: \"#f39c12\",\n        traits: {\n          \u5b89\u5168\u611f\u9700\u6c42: 90,\n          \u6c7a\u65b7\u529b: 55,\n          \u5fcd\u8010\u529b: 70,\n          \u6e9d\u901a\u4e3b\u52d5\u6027: 60,\n          \u60c5\u7dd2\u7a69\u5b9a\u6027: 50\n        },\n        tips: [\n          \"\u5b78\u7fd2\u63a5\u53d7\u95dc\u4fc2\u7684\u81ea\u7136\u767c\u5c55\uff0c\u6e1b\u5c11\u5f37\u6c42\",\n          \"\u57f9\u990a\u66f4\u591a\u500b\u4eba\u8208\u8da3\uff0c\u5efa\u7acb\u7368\u7acb\u6027\",\n          \"\u5766\u8aa0\u8868\u9054\u81ea\u5df1\u7684\u9700\u6c42\uff0c\u8a2d\u5b9a\u5065\u5eb7\u7684\u754c\u9650\",\n          \"\u7d66\u4e88\u5f7c\u6b64\u6642\u9593\u548c\u7a7a\u9593\uff0c\u8b93\u95dc\u4fc2\u81ea\u7136\u660e\u6717\"\n        ]\n      },\n      \u751f\u6b7b\u4e4b\u6200: {\n        title: \"\u751f\u6b7b\u4e4b\u6200\",\n        description: \"\u5728\u611f\u60c5\u4e2d\u4f60\u662f\u4e00\u500b\u975e\u5e38\u6709\u8cac\u4efb\u611f\u7684\u4eba\uff0c\u6709\u6642\u5019\u6703\u56e0\u70ba\u8cac\u4efb\u611f\u800c\u5099\u53d7\u675f\u7e1b\uff0c\u4e00\u6bb5\u751f\u6b7b\u4e4b\u6200\u5728\u5225\u4eba\u770b\u4f86\u662f\u503c\u5f97\u7fa8\u6155\u7684\uff0c\u4f46\u5c0d\u4f60\u4f86\u8aaa\u5176\u4e2d\u5305\u542b\u4e86\u592a\u591a\u675f\u7e1b\u7684\u56e0\u7d20\uff0c\u6216\u8a31\u4f60\u771f\u6b63\u5728\u610f\u7684\u662f\u5982\u4f55\u7528\u611b\u4f86\u56de\u5831\u5c0d\u65b9\uff0c\u800c\u4e0d\u662f\u5728\u611f\u60c5\u4e2d\u6536\u7a6b\u751c\u871c\uff0c\u4ee5\u56de\u5831\u70ba\u4e3b\u8981\u76ee\u7684\u7684\u611f\u60c5\uff0c\u6c92\u90a3\u9ebc\u5bb9\u6613\u8b93\u4f60\u611f\u5230\u6eff\u8db3\uff0c\u4f60\u751a\u81f3\u6703\u70ba\u6b64\u5403\u76e1\u82e6\u982d\u3002\",\n        color: \"#9b59b6\",\n        traits: {\n          \u8cac\u4efb\u611f: 95,\n          \u60c5\u611f\u627f\u53d7\u529b: 85,\n          \u81ea\u6211\u72a7\u7272\u50be\u5411: 80,\n          \u60c5\u7dd2\u8ca0\u8377: 90,\n          \u95dc\u4fc2\u5e73\u8861\u611f: 45\n        },\n        tips: [\n          \"\u5e73\u8861\u8cac\u4efb\u8207\u500b\u4eba\u9700\u6c42\uff0c\u907f\u514d\u904e\u5ea6\u72a7\u7272\",\n          \"\u5b78\u7fd2\u5065\u5eb7\u7684\u4ed8\u51fa\u65b9\u5f0f\uff0c\u4e0d\u4ee5\u56de\u5831\u70ba\u76ee\u7684\",\n          \"\u5efa\u7acb\u66f4\u8f15\u9b06\u7684\u76f8\u8655\u6a21\u5f0f\uff0c\u6e1b\u5c11\u58d3\u529b\",\n          \"\u5c0b\u6c42\u5c08\u696d\u5354\u52a9\uff0c\u5b78\u7fd2\u5065\u5eb7\u7684\u95dc\u4fc2\u7d93\u71df\"\n        ]\n      },\n      \u91d1\u9322\u4e4b\u6200: {\n        title: \"\u91d1\u9322\u4e4b\u6200\",\n        description: \"\u4f46\u51e1\u611f\u60c5\u548c\u9322\u626f\u4e0a\u95dc\u4fc2\uff0c\u4f60\u5c31\u5f88\u96e3\u5728\u5176\u4e2d\u627e\u5230\u5e78\u798f\u611f\uff0c\u7121\u8ad6\u662f\u5f97\u5230\u7684\u591a\u9084\u662f\u4ed8\u51fa\u7684\u591a\uff0c\u4f60\u90fd\u6703\u89ba\u5f97\u9019\u6bb5\u611f\u60c5\u5df2\u7d93\u4e0d\u518d\u7d14\u6f54\uff0c\u9019\u4e0d\u662f\u4f60\u60f3\u8981\u7684\uff0c\u537b\u4e26\u4e0d\u6368\u5f97\u653e\u624b\u3002\u5c31\u662f\u5728\u9019\u7a2e\u7336\u8c6b\u7684\u904e\u7a0b\u4e2d\uff0c\u5167\u5fc3\u5099\u53d7\u714e\u71ac\uff0c\u800c\u70ba\u4e86\u9019\u6bb5\u611f\u60c5\u7684\u771f\u5be6\u6027\uff0c\u4f60\u6703\u4ed8\u51fa\u5f88\u591a\u52aa\u529b\uff0c\u5373\u4fbf\u662f\u70ba\u6b64\u5403\u76e1\u82e6\u982d\uff0c\u4e5f\u5fc3\u7518\u60c5\u9858\u3002\",\n        color: \"#27ae60\",\n        traits: {\n          \u7269\u8cea\u50f9\u503c\u89c0: 75,\n          \u7406\u60f3\u4e3b\u7fa9: 85,\n          \u73fe\u5be6\u4e3b\u7fa9: 60,\n          \u7d14\u6f54\u5ea6\u8981\u6c42: 90,\n          \u95dc\u4fc2\u7d14\u7cb9\u6027: 80\n        },\n        tips: [\n          \"\u5efa\u7acb\u5065\u5eb7\u7684\u91d1\u9322\u89c0\u5ff5\uff0c\u7406\u6027\u770b\u5f85\u73fe\u5be6\u9700\u6c42\",\n          \"\u6e9d\u901a\u5404\u81ea\u7684\u50f9\u503c\u89c0\uff0c\u5c0b\u6c42\u5e73\u8861\u9ede\",\n          \"\u95dc\u6ce8\u95dc\u4fc2\u7684\u60c5\u611f\u57fa\u790e\uff0c\u800c\u975e\u7269\u8cea\u5c64\u9762\",\n          \"\u5b78\u7fd2\u5340\u5206\u5408\u7406\u7684\u7d93\u6fdf\u652f\u63f4\u8207\u4e0d\u7576\u7684\u5229\u7528\"\n        ]\n      }\n    }\n  };\n  \n  \/\/ DOM \u5143\u7d20\n  const elements = {\n    container: document.getElementById('quiz-container'),\n    landing: document.getElementById('quiz-landing'),\n    test: document.getElementById('quiz-test'),\n    result: document.getElementById('quiz-result'),\n    questionText: document.getElementById('question-text'),\n    questionImage: document.getElementById('question-image'),\n    optionsContainer: document.getElementById('options-container'),\n    progressBar: document.getElementById('progress-bar'),\n    progressFill: document.getElementById('progress-fill'),\n    progressText: document.getElementById('progress-text'),\n    btnPrevious: document.getElementById('btn-previous'),\n    resultType: document.getElementById('result-type'),\n    resultDescription: document.getElementById('result-description'),\n    resultChart: document.getElementById('result-chart'),\n    resultDetails: document.getElementById('result-details')\n  };\n  \n  \/\/ \u72c0\u614b\u7ba1\u7406\n  let state = {\n    currentQuestion: 0,\n    answers: {},\n    scores: {},\n    isQuizStarted: false\n  };\n  \n  \/\/ \u521d\u59cb\u5316\u5206\u6578\n  function initializeScores() {\n    state.scores = {\n      \u8d8a\u7d1a\u4e4b\u6200: 0,\n      \u5fd8\u5e74\u4e4b\u6200: 0,\n      \u66d6\u6627\u4e4b\u6200: 0,\n      \u751f\u6b7b\u4e4b\u6200: 0,\n      \u91d1\u9322\u4e4b\u6200: 0\n    };\n  }\n  \n  \/\/ \u958b\u59cb\u6e2c\u9a57\n  function startQuiz() {\n    state.isQuizStarted = true;\n    state.currentQuestion = 0;\n    state.answers = {};\n    initializeScores();\n    showSection('test');\n    displayQuestion();\n    updateProgress();\n  }\n  \n  \/\/ \u986f\u793a\u6307\u5b9a\u5340\u57df\n  function showSection(section) {\n    ['landing', 'test', 'result'].forEach(s => {\n      elements[s].style.display = s === section ? 'block' : 'none';\n    });\n    \n    if (section === 'test' || section === 'result') {\n      window.scrollTo({ top: 0, behavior: 'smooth' });\n    }\n  }\n  \n  \/\/ \u986f\u793a\u7576\u524d\u554f\u984c\n  function displayQuestion() {\n    const question = QUIZ_DATA.questions[state.currentQuestion];\n    elements.questionText.textContent = question.text;\n    \n    \/\/ \u6dfb\u52a0\u554f\u984cID\u5230\u5bb9\u5668\uff0c\u7528\u65bcCSS\u9078\u64c7\u5668\n    elements.test.setAttribute('id', `question-${question.id}`);\n    \n    \/\/ \u6e05\u7a7a\u9078\u9805\n    elements.optionsContainer.innerHTML = '';\n    \n    \/\/ \u986f\u793a\u9078\u9805\n    question.options.forEach(option => {\n      const button = document.createElement('button');\n      button.className = 'hz-quiz-option';\n      button.textContent = option.text;\n      button.setAttribute('data-value', option.value);\n      button.addEventListener('click', () => selectOption(option, button));\n      elements.optionsContainer.appendChild(button);\n    });\n    \n    \/\/ \u986f\u793a\u5716\u7247\uff08\u5982\u679c\u6709\uff09\n    if (question.type === 'image' && question.image) {\n      elements.questionImage.innerHTML = `<img decoding=\"async\" src=\"${question.image}\" alt=\"\u6e2c\u8a66\u5716\u7247\" style=\"max-width: 100%; height: auto;\">`;\n      elements.questionImage.style.display = 'block';\n    } else {\n      elements.questionImage.innerHTML = '';\n      elements.questionImage.style.display = 'none';\n    }\n    \n    \/\/ \u8a2d\u7f6e\u4e0a\u4e00\u984c\u6309\u9215\n    elements.btnPrevious.style.display = state.currentQuestion > 0 ? 'block' : 'none';\n  }\n  \n  \/\/ \u9078\u64c7\u7b54\u6848\n  function selectOption(option, button) {\n    \/\/ \u79fb\u9664\u5176\u4ed6\u9078\u9805\u7684\u9078\u4e2d\u72c0\u614b\n    const options = elements.optionsContainer.querySelectorAll('.hz-quiz-option');\n    options.forEach(opt => opt.classList.remove('selected'));\n    \n    \/\/ \u8a2d\u7f6e\u7576\u524d\u9078\u9805\u70ba\u9078\u4e2d\n    button.classList.add('selected');\n    \n    \/\/ \u4fdd\u5b58\u7b54\u6848\n    state.answers[state.currentQuestion] = option;\n    \n    \/\/ \u66f4\u65b0\u5206\u6578\n    if (option.weight) {\n      Object.keys(option.weight).forEach(key => {\n        state.scores[key] += option.weight[key];\n      });\n    }\n    \n    \/\/ \u5ef6\u9072\u9032\u5165\u4e0b\u4e00\u984c\n    setTimeout(() => {\n      nextQuestion();\n    }, 500);\n  }\n  \n  \/\/ \u4e0b\u4e00\u984c\n  function nextQuestion() {\n    if (state.currentQuestion < QUIZ_DATA.questions.length - 1) {\n      state.currentQuestion++;\n      displayQuestion();\n      updateProgress();\n    } else {\n      \/\/ \u6e2c\u9a57\u5b8c\u6210\n      showResults();\n    }\n  }\n  \n  \/\/ \u4e0a\u4e00\u984c\n  function previousQuestion() {\n    if (state.currentQuestion > 0) {\n      state.currentQuestion--;\n      displayQuestion();\n      updateProgress();\n    }\n  }\n  \n  \/\/ \u66f4\u65b0\u9032\u5ea6\u689d\n  function updateProgress() {\n    const progress = ((state.currentQuestion + 1) \/ QUIZ_DATA.questions.length) * 100;\n    elements.progressFill.style.width = `${progress}%`;\n    elements.progressText.textContent = `\u7b2c ${state.currentQuestion + 1} \u984c \/ \u5171 ${QUIZ_DATA.questions.length} \u984c`;\n  }\n  \n  \/\/ \u986f\u793a\u7d50\u679c\n  function showResults() {\n    \/\/ \u8a08\u7b97\u5f97\u5206\u6700\u9ad8\u7684\u7d50\u679c\u985e\u578b\n    const maxScore = Math.max(...Object.values(state.scores));\n    const resultType = Object.keys(state.scores).find(key => state.scores[key] === maxScore);\n    const result = QUIZ_DATA.results[resultType];\n    \n    \/\/ \u986f\u793a\u7d50\u679c\u985e\u578b\n    elements.resultType.innerHTML = `<h3>${result.title}<\/h3>`;\n    \n    \/\/ \u986f\u793a\u7d50\u679c\u63cf\u8ff0\n    elements.resultDescription.innerHTML = `<p>${result.description}<\/p>`;\n    \n    \/\/ \u986f\u793a\u8a73\u7d30\u5206\u6790\n    elements.resultDetails.innerHTML = `\n      <h4>\u500b\u6027\u7279\u8cea\u5206\u6790<\/h4>\n      ${Object.keys(result.traits).map(trait => \n        `<p><strong>${trait}:<\/strong> ${result.traits[trait]}%<\/p>`\n      ).join('')}\n      <h4 style=\"margin-top: 24px;\">\u7d66\u4f60\u7684\u5efa\u8b70<\/h4>\n      ${result.tips.map(tip => `<p>\u2022 ${tip}<\/p>`).join('')}\n    `;\n    \n    \/\/ \u7e6a\u88fd\u5716\u8868\n    drawResultChart(result);\n    \n    \/\/ \u986f\u793a\u7d50\u679c\u9801\n    showSection('result');\n  }\n  \n  \/\/ \u7e6a\u88fd\u7d50\u679c\u5716\u8868\n  function drawResultChart(result) {\n    const ctx = elements.resultChart.getContext('2d');\n    \n    \/\/ \u92b7\u6bc0\u73fe\u6709\u5716\u8868\n    if (window.resultChartInstance) {\n      window.resultChartInstance.destroy();\n    }\n    \n    \/\/ \u5275\u5efa\u65b0\u5716\u8868\n    window.resultChartInstance = new Chart(ctx, {\n      type: 'radar',\n      data: {\n        labels: Object.keys(result.traits),\n        datasets: [{\n          label: '\u4f60\u7684\u7279\u8cea\u5206\u6790',\n          data: Object.values(result.traits),\n          fill: true,\n          backgroundColor: `${result.color}20`,\n          borderColor: result.color,\n          borderWidth: 2,\n          pointBackgroundColor: result.color,\n          pointBorderColor: '#fff',\n          pointBorderWidth: 2,\n          pointRadius: 4,\n          pointHoverRadius: 6\n        }]\n      },\n      options: {\n        responsive: true,\n        maintainAspectRatio: false,\n        scales: {\n          r: {\n            angleLines: {\n              display: true,\n              color: '#e9ecef'\n            },\n            grid: {\n              color: '#e9ecef'\n            },\n            pointLabels: {\n              font: {\n                size: 18\n              },\n              color: '#2d3436'\n            },\n            suggestedMin: 0,\n            suggestedMax: 100,\n            ticks: {\n              display: false\n            }\n          }\n        },\n        plugins: {\n          legend: {\n            display: false\n          },\n          tooltip: {\n            callbacks: {\n              label: function(context) {\n                return `${context.label}: ${context.parsed.r}%`;\n              }\n            }\n          }\n        }\n      }\n    });\n  }\n  \n  \/\/ \u91cd\u65b0\u958b\u59cb\u6e2c\u9a57\n  function restartQuiz() {\n    initializeScores();\n    state.currentQuestion = 0;\n    state.answers = {};\n    state.isQuizStarted = false;\n    showSection('landing');\n  }\n  \n  \/\/ \u4e8b\u4ef6\u7d81\u5b9a\n  function bindEvents() {\n    \/\/ \u4f7f\u7528\u4e8b\u4ef6\u59d4\u6258\u8655\u7406\u6309\u9215\u9ede\u64ca\n    elements.container.addEventListener('click', (e) => {\n      const target = e.target;\n      \n      if (target.matches('[data-action=\"start-quiz\"]')) {\n        startQuiz();\n      } else if (target.matches('[data-action=\"restart-quiz\"]')) {\n        restartQuiz();\n      } else if (target.id === 'btn-previous') {\n        previousQuestion();\n      }\n    });\n    \n    \/\/ \u7981\u7528\u96d9\u64ca\u7e2e\u653e\n    document.addEventListener('touchend', (e) => {\n      if (e.timeStamp - lastTouchEnd <= 300) {\n        e.preventDefault();\n      }\n      lastTouchEnd = e.timeStamp;\n    }, false);\n  }\n  \n  \/\/ \u521d\u59cb\u5316\n  function init() {\n    bindEvents();\n    showSection('landing');\n  }\n  \n  \/\/ \u9632\u6b62\u96d9\u64ca\u7e2e\u653e\n  let lastTouchEnd = 0;\n  \n  \/\/ \u958b\u59cb\u61c9\u7528\n  init();\n  \n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u6709\u4e9b\u7cdf\u7cd5\u7684\u7231\u60c5\uff0c\u4e0d\u4f46\u4e0d\u80fd\u5e26\u7ed9\u4e00\u4e2a\u4eba\u5e78\u798f\u611f\uff0c\u751a\u81f3\u4f1a\u4ee4\u4eba\u5403\u5c3d\u82e6\u5934\u3002\u5176\u5b9e\u7231\u4e0d\u5206\u5bf9\u9519\uff0c\u53ea\u662f\u6709\u65f6\u5019\u6ca1\u6709\u9009\u5bf9\u81ea\u5df1\u8be5\u7231\u7684\u4eba\u3002\u5bf9\u4f60\u800c\u8a00\uff0c\u54ea\u79cd\u7231\u4f1a\u4ee4\u4f60\u5403\u5c3d\u82e6\u5934\uff1f<\/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-2503","post","type-post","status-publish","format-standard","hentry","category-marriage","category-love"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2503","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=2503"}],"version-history":[{"count":5,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2503\/revisions"}],"predecessor-version":[{"id":10401,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2503\/revisions\/10401"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2503"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2503"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2503"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}