{"id":3157,"date":"2023-10-16T21:21:51","date_gmt":"2023-10-16T13:21:51","guid":{"rendered":"https:\/\/bookmark.tw\/?p=3157"},"modified":"2025-08-15T05:06:19","modified_gmt":"2025-08-14T21:06:19","slug":"obsessed-with-the-past","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/obsessed-with-the-past","title":{"rendered":"\u7ebf\u4e0a\u514d\u8d39\u6d4b\u9a8c\uff1a\u4f60\u662f\u4e00\u4e2a\u8ff7\u604b\u8fc7\u53bb\u7684\u4eba\u5417\uff0825\u9898\uff09"},"content":{"rendered":"<!-- \u5f15\u5165Bootstrap CSS -->\n<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap\/5.3.3\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-icons\/1.11.3\/font\/bootstrap-icons.min.css\" rel=\"stylesheet\">\n\n<!-- \u5f15\u5165Chart.js -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n\n<!-- HTML\u7d50\u69cb -->\n<div id=\"timeQuizContainer9\" class=\"container-fluid px-2 px-md-3 py-4\" style=\"max-width: 750px; margin: 0 auto;\">\n  \n  <!-- \u5f15\u5c0e\u9801 -->\n  <section id=\"quizintro9\" data-page=\"intro9\" class=\"quiz-section\">\n    <header class=\"text-center mb-5\">\n      <h2 class=\"display-5 fw-bold mb-3\" style=\"color: #6B46C1;\">\u4f60\u7684\u65f6\u95f4\u89c2\u5ff5\u6d4b\u9a8c<\/h2>\n      <p class=\"fs-5\" style=\"color: #64748B;\">\u53d1\u73b0\u4f60\u662f\u770b\u5411\u672a\u6765\u8fd8\u662f\u7559\u604b\u8fc7\u53bb\u7684\u4eba<\/p>\n    <\/header>\n    \n    <main>\n      <div class=\"row g-3 mb-5\">\n        <div class=\"col-12 col-md-4\">\n          <div class=\"card h-100 border-0 shadow-sm quiz-feature-card\">\n            <div class=\"card-body text-center p-4\">\n              <div class=\"feature-icon mb-3\">\n                <i class=\"bi bi-clock-history\"><\/i>\n              <\/div>\n              <h3 class=\"h5 fw-bold mb-2\">\u65f6\u95f4\u89c2\u5bdf<\/h3>\n              <p class=\"text-muted small mb-0\">\u6df1\u5ea6\u63a2\u6790\u4f60\u7684\u65f6\u95f4\u89c2\u5ff5<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n        \n        <div class=\"col-12 col-md-4\">\n          <div class=\"card h-100 border-0 shadow-sm quiz-feature-card\">\n            <div class=\"card-body text-center p-4\">\n              <div class=\"feature-icon mb-3\" style=\"background: linear-gradient(135deg, #10B981, #6EE7B7);\">\n                <i class=\"bi bi-stars\"><\/i>\n              <\/div>\n              <h3 class=\"h5 fw-bold mb-2\">\u672a\u6765\u610f\u8bc6<\/h3>\n              <p class=\"text-muted small mb-0\">\u77ad\u89e3\u4f60\u5c0d\u5c07\u4f86\u7684\u671f\u5f85\u7a0b\u5ea6<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n        \n        <div class=\"col-12 col-md-4\">\n          <div class=\"card h-100 border-0 shadow-sm quiz-feature-card\">\n            <div class=\"card-body text-center p-4\">\n              <div class=\"feature-icon mb-3\" style=\"background: linear-gradient(135deg, #F59E0B, #FCD34D);\">\n                <i class=\"bi bi-journal-bookmark-fill\"><\/i>\n              <\/div>\n              <h3 class=\"h5 fw-bold mb-2\">\u8fc7\u53bb\u60c5\u6000<\/h3>\n              <p class=\"text-muted small mb-0\">\u8bc4\u4f30\u4f60\u7684\u6000\u65e7\u503e\u5411<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n      \n      <div class=\"card border-0 mb-5\" style=\"background: linear-gradient(135deg, #F3F4F6, #E5E7EB);\">\n        <div class=\"card-body p-4\">\n          <p class=\"fs-5 mb-0\" style=\"color: #374151; line-height: 1.7;\">\n            \u900f\u904e25\u500b\u7cbe\u5fc3\u8a2d\u8a08\u7684\u554f\u984c\uff0c\u6211\u5011\u5c07\u5e6b\u52a9\u4f60\u77ad\u89e3\u81ea\u5df1\u5c0d\u904e\u53bb\u3001\u73fe\u5728\u548c\u672a\u4f86\u7684\u614b\u5ea6\u3002\n            \u9019\u500b\u6e2c\u9a57\u5c07\u63ed\u793a\u4f60\u662f\u5426\u66f4\u50be\u5411\u65bc\u61f7\u5ff5\u904e\u53bb\uff0c\u9084\u662f\u6eff\u61f7\u671f\u5f85\u5730\u64c1\u62b1\u672a\u4f86\u3002\n          <\/p>\n        <\/div>\n      <\/div>\n      \n      <div class=\"text-center\">\n        <button type=\"button\" data-action=\"start\" class=\"btn btn-lg px-5 py-3 rounded-pill shadow quiz-start-btn\">\n          <i class=\"bi bi-play-circle-fill me-2\"><\/i>\u5f00\u59cb\u6d4b\u9a8c\n        <\/button>\n      <\/div>\n    <\/main>\n  <\/section>\n  \n  <!-- \u6e2c\u9a57\u9801 -->\n  <section id=\"quizmain9\" data-page=\"quiz9\" class=\"quiz-section d-none\">\n    <header class=\"text-center mb-4\">\n      <h2 class=\"h3 fw-bold mb-4\" style=\"color: #6B46C1;\">\u6d4b\u9a8c\u8fdb\u884c\u4e2d<\/h2>\n      <div class=\"progress mb-3\" style=\"height: 10px; border-radius: 10px;\">\n        <div data-element=\"progress-bar\" class=\"progress-bar\" role=\"progressbar\" style=\"width: 0%; transition: width 0.5s ease;\"><\/div>\n      <\/div>\n      <p data-element=\"progress-text\" class=\"text-muted fs-6\">\u95ee\u98981\/25<\/p>\n    <\/header>\n    \n    <main>\n      <div class=\"card border-0 shadow-sm mb-4\">\n        <div class=\"card-body p-4 p-md-5\">\n          <h3 data-element=\"question\" class=\"mb-4\" style=\"font-size: 22px; font-weight: 700; color: #1F2937;\"><\/h3>\n          <div data-element=\"options\" class=\"quiz-options\">\n            <!-- \u9078\u9805\u5c07\u7531JavaScript\u52d5\u614b\u751f\u6210 -->\n          <\/div>\n        <\/div>\n      <\/div>\n      \n      <div class=\"text-center\">\n        <button type=\"button\" data-action=\"prev\" class=\"btn btn-outline-secondary btn-lg px-4 d-none\">\n          <i class=\"bi bi-arrow-left-circle me-2\"><\/i>\u4e0a\u4e00\u9898\n        <\/button>\n      <\/div>\n    <\/main>\n  <\/section>\n  \n  <!-- \u7d50\u679c\u9801 -->\n  <section id=\"quizresult9\" data-page=\"result9\" class=\"quiz-section d-none\">\n    <header class=\"text-center mb-5\">\n      <h2 class=\"display-6 fw-bold\" style=\"color: #6B46C1;\">\u4f60\u7684\u6d4b\u9a8c\u7ed3\u679c<\/h2>\n    <\/header>\n    \n    <main>\n      <!-- \u4e3b\u8981\u7d50\u679c\u5361\u7247 -->\n      <div class=\"card border-0 shadow-sm mb-4\">\n        <div class=\"card-body p-4\">\n          <div class=\"text-center mb-4\">\n            <div data-element=\"result-emoji\" class=\"display-1 mb-3\"><\/div>\n            <h3 data-element=\"result-title\" class=\"h4 fw-bold mb-2\"><\/h3>\n            <p data-element=\"result-score\" class=\"text-muted fs-5\"><\/p>\n          <\/div>\n          \n          <div class=\"row justify-content-center mb-4\">\n            <div class=\"col-12 col-md-10\">\n              <canvas data-element=\"chart\" style=\"max-height: 350px;\"><\/canvas>\n            <\/div>\n          <\/div>\n          \n          <div data-element=\"result-text\" class=\"fs-5 text-dark\" style=\"line-height: 1.8;\"><\/div>\n        <\/div>\n      <\/div>\n      \n      <!-- \u591a\u7dad\u5206\u6790\u5361\u7247 -->\n      <div class=\"card border-0 shadow-sm mb-4\">\n        <div class=\"card-body p-4\">\n          <h3 class=\"h5 fw-bold text-center mb-4\" style=\"color: #6B46C1;\">\u591a\u7ef4\u5ea6\u5206\u6790<\/h3>\n          <div data-element=\"dimension-analysis\" class=\"row g-3\">\n            <!-- \u5c07\u7531JavaScript\u52d5\u614b\u751f\u6210 -->\n          <\/div>\n        <\/div>\n      <\/div>\n      \n      <!-- \u500b\u6027\u5316\u5efa\u8b70\u5361\u7247 -->\n      <div class=\"card border-0 shadow-sm mb-4\">\n        <div class=\"card-body p-4\">\n          <h3 class=\"h5 fw-bold text-center mb-4\" style=\"color: #6B46C1;\">\u500b\u6027\u5316\u5efa\u8b70<\/h3>\n          <div data-element=\"personalized-advice\">\n            <!-- \u5c07\u7531JavaScript\u52d5\u614b\u751f\u6210 -->\n          <\/div>\n        <\/div>\n      <\/div>\n      \n      <!-- \u5fc3\u7406\u8a55\u6790\u5361\u7247 -->\n      <div class=\"card border-0 mb-4\" style=\"background: linear-gradient(135deg, #F3F4F6, #E5E7EB);\">\n        <div class=\"card-body p-4\">\n          <h3 class=\"h5 fw-bold text-center mb-3\" style=\"color: #6B46C1;\">\u5fc3\u7406\u8bc4\u6790<\/h3>\n          <p class=\"mb-3\">\u5965\u65af\u5361\u00b7\u738b\u5c14\u5fb7\u66fe\u7ecf\u8bf4\u8fc7\uff1a\u300c\u4eba\u751f\u53ea\u6709\u4e24\u4ef6\u4e8b\u60c5\u662f\u786e\u5b9a\u7684\uff0c\u90a3\u5c31\u662f\u6b7b\u4ea1\u548c\u7eb3\u7a0e\u3002\u300d\u5982\u679c\u4ed6\u80fd\u6d3b\u5230\u73b0\u5728\uff0c\u6211\u60f3\u4ed6\u53ef\u80fd\u8fd8\u4f1a\u52a0\u4e0a\u4e00\u6761\uff0c\u90a3\u5c31\u662f\u53d8\u5316\u3002<\/p>\n          <p class=\"mb-3\">\u53d8\u5316\u603b\u662f\u4e0d\u53ef\u963b\u62e6\u7684\u3002\u4f46\u662f\uff0c\u4e0e\u8fc7\u53bb\u76f8\u6bd4\uff0c\u4eca\u5929\u7684\u4eba\u4eec\u5728\u751f\u6d3b\u65b9\u5f0f\u3001\u4eba\u751f\u89c2\u3001\u4ef7\u503c\u89c2\u4ee5\u53ca\u6280\u672f\u65b9\u9762\u7684\u53d8\u5316\u90fd\u6bd4\u4ee5\u524d\u4efb\u4f55\u65f6\u4ee3\u8981\u5feb\u5f97\u591a\u3002<\/p>\n          <p class=\"mb-0\">\u6211\u4eec\u65e2\u53ef\u4ee5\u62b5\u5236\u53d8\u5316\uff0c\u4f7f\u81ea\u5df1\u6210\u4e3a\u604b\u65e7\u7684\u4eba\uff0c\u4e5f\u53ef\u4ee5\u6b22\u8fce\u53d8\u5316\uff0c\u5e76\u4e14\u8ddf\u968f\u53d8\u5316\u4e0d\u65ad\u5411\u524d\u53d1\u5c55\u3002\u6211\u4eec\u8981\u9009\u62e9\u505a\u540e\u8005\uff0c\u4ee5\u66f4\u4e50\u89c2\u7684\u6001\u5ea6\u5c55\u671b\u672a\u6765\u3002<\/p>\n        <\/div>\n      <\/div>\n      \n      <div class=\"text-center\">\n        <button type=\"button\" data-action=\"restart\" class=\"btn btn-lg px-5 py-3 rounded-pill shadow quiz-restart-btn\">\n          <i class=\"bi bi-arrow-clockwise me-2\"><\/i>\u91cd\u65b0\u6d4b\u9a8c\n        <\/button>\n      <\/div>\n    <\/main>\n  <\/section>\n<\/div>\n\n<!-- CSS\u6a23\u5f0f -->\n<style>\n\/* \u5bb9\u5668\u57fa\u790e\u6a23\u5f0f *\/\n#timeQuizContainer9 {\n  font-family: -apple-system, BlinkMacSystemFont, \"Microsoft JhengHei\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  min-height: 400px;\n}\n\n\/* \u7279\u8272\u5716\u6a19\u6a23\u5f0f *\/\n#timeQuizContainer9 .feature-icon {\n  width: 70px;\n  height: 70px;\n  background: linear-gradient(135deg, #6B46C1, #9333EA);\n  border-radius: 50%;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  font-size: 28px;\n  box-shadow: 0 4px 6px rgba(107, 70, 193, 0.2);\n}\n\n\/* \u7279\u8272\u5361\u7247\u61f8\u505c\u6548\u679c *\/\n#timeQuizContainer9 .quiz-feature-card {\n  transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n#timeQuizContainer9 .quiz-feature-card:hover {\n  transform: translateY(-5px);\n  box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;\n}\n\n\/* \u958b\u59cb\u6309\u9215\u6a23\u5f0f *\/\n#timeQuizContainer9 .quiz-start-btn {\n  background: linear-gradient(135deg, #6B46C1, #9333EA);\n  border: none;\n  color: white;\n  font-weight: 600;\n  transition: all 0.3s ease;\n}\n\n#timeQuizContainer9 .quiz-start-btn:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 12px rgba(107, 70, 193, 0.3);\n  background: linear-gradient(135deg, #7C3AED, #A855F7);\n  color: white;\n}\n\n\/* \u9032\u5ea6\u689d\u6a23\u5f0f *\/\n#timeQuizContainer9 .progress {\n  background-color: #E5E7EB;\n}\n\n#timeQuizContainer9 .progress-bar {\n  background: linear-gradient(90deg, #6B46C1, #10B981);\n}\n\n\/* \u9078\u9805\u5361\u7247\u6a23\u5f0f *\/\n#timeQuizContainer9 .quiz-option-card {\n  border: 2px solid #E5E7EB;\n  border-radius: 12px;\n  padding: 1rem;\n  margin-bottom: 1rem;\n  cursor: pointer;\n  transition: all 0.3s ease;\n  background: white;\n  position: relative;\n}\n\n#timeQuizContainer9 .quiz-option-card:hover {\n  border-color: #9333EA;\n  transform: translateX(5px);\n  box-shadow: 0 4px 8px rgba(147, 51, 234, 0.1);\n}\n\n#timeQuizContainer9 .quiz-option-card.selected {\n  border-color: #6B46C1;\n  background: linear-gradient(135deg, #F3F4F6, #EDE9FE);\n}\n\n\/* \u9078\u9805\u5713\u5f62\u6307\u793a\u5668 *\/\n#timeQuizContainer9 .option-indicator {\n  width: 24px;\n  height: 24px;\n  border: 2px solid #D1D5DB;\n  border-radius: 50%;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.3s ease;\n  flex-shrink: 0;\n}\n\n#timeQuizContainer9 .quiz-option-card:hover .option-indicator {\n  border-color: #9333EA;\n}\n\n#timeQuizContainer9 .quiz-option-card.selected .option-indicator {\n  background: #6B46C1;\n  border-color: #6B46C1;\n}\n\n#timeQuizContainer9 .quiz-option-card.selected .option-indicator i {\n  color: white;\n  font-size: 14px;\n}\n\n\/* \u9078\u9805\u6587\u5b57\u6a23\u5f0f *\/\n#timeQuizContainer9 .option-text {\n  font-size: 18px;\n  color: #374151;\n  line-height: 1.5;\n  flex: 1;\n  margin-left: 1rem;\n}\n\n#timeQuizContainer9 .quiz-option-card:hover .option-text {\n  color: #1F2937;\n}\n\n#timeQuizContainer9 .quiz-option-card.selected .option-text {\n  color: #1F2937;\n  font-weight: 500;\n}\n\n\/* \u91cd\u65b0\u6e2c\u9a57\u6309\u9215\u6a23\u5f0f *\/\n#timeQuizContainer9 .quiz-restart-btn {\n  background: linear-gradient(135deg, #10B981, #6EE7B7);\n  border: none;\n  color: white;\n  font-weight: 600;\n  transition: all 0.3s ease;\n}\n\n#timeQuizContainer9 .quiz-restart-btn:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 12px rgba(16, 185, 129, 0.3);\n  background: linear-gradient(135deg, #059669, #34D399);\n  color: white;\n}\n\n\/* \u7dad\u5ea6\u5361\u7247\u6a23\u5f0f *\/\n#timeQuizContainer9 .dimension-card {\n  background: linear-gradient(135deg, #F9FAFB, #F3F4F6);\n  border-radius: 10px;\n  padding: 1rem;\n  text-align: center;\n}\n\n#timeQuizContainer9 .dimension-icon {\n  width: 50px;\n  height: 50px;\n  border-radius: 50%;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 0.5rem;\n  font-size: 24px;\n  color: white;\n}\n\n\/* \u5efa\u8b70\u9805\u76ee\u6a23\u5f0f *\/\n#timeQuizContainer9 .advice-item {\n  padding: 1rem;\n  border-left: 3px solid #6B46C1;\n  background: linear-gradient(90deg, #F9FAFB, transparent);\n  margin-bottom: 1rem;\n  border-radius: 0 8px 8px 0;\n}\n\n\/* \u97ff\u61c9\u5f0f\u8abf\u6574 *\/\n@media (max-width: 576px) {\n  #timeQuizContainer9 .display-5 {\n    font-size: 1.8rem;\n  }\n  \n  #timeQuizContainer9 .display-6 {\n    font-size: 1.5rem;\n  }\n  \n  #timeQuizContainer9 h3 {\n    font-size: 20px !important;\n  }\n  \n  #timeQuizContainer9 .option-text {\n    font-size: 17px;\n  }\n  \n  #timeQuizContainer9 .feature-icon {\n    width: 60px;\n    height: 60px;\n    font-size: 24px;\n  }\n}\n\n\/* \u52d5\u756b\u6548\u679c *\/\n@keyframes fadeInUp {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n#timeQuizContainer9 .quiz-section:not(.d-none) {\n  animation: fadeInUp 0.5s ease;\n}\n\n\/* \u7981\u7528\u904e\u5ea6\u52d5\u756b *\/\n@media (prefers-reduced-motion: reduce) {\n  #timeQuizContainer9 * {\n    animation: none !important;\n    transition: none !important;\n  }\n}\n<\/style>\n\n<!-- JavaScript\u884c\u70ba -->\n<script>\n(function() {\n  'use strict';\n  \n  \/\/ \u6e2c\u9a57\u554f\u984c\u8cc7\u6599\n  const quizData = {\n    questions: [\n      {\n        question: \"\u4e0b\u9762\u54ea\u7a2e\u8aaa\u6cd5\u6700\u63a5\u8fd1\u4f60\u5c0d1\u67081\u65e5\u7684\u60f3\u6cd5\uff1f\",\n        options: [\n          \"\u5e74\u5fa9\u4e00\u5e74\uff0c\u65e5\u5fa9\u4e00\u65e5\",\n          \"\u6642\u9593\u904e\u5f97\u592a\u5feb\u4e86\uff0c\u81ea\u5f9e\u53bb\u5e741\u67081\u65e5\u5230\u73fe\u5728\uff0c\u6839\u672c\u5c31\u4e0d\u50cf\u904e\u4e8612\u500b\u6708\",\n          \"\u6211\u61c9\u8a72\u70ba\u4eca\u5e74\u5236\u8a02\u65b0\u8a08\u756b\u4e86\"\n        ],\n        dimension: \"time_perspective\"\n      },\n      {\n        question: \"\u5982\u679c\u5728\u4e00\u500b\u5730\u65b9\u5e78\u798f\u5730\u5c45\u4f4f\u4e86\u5f88\u591a\u5e74\uff0c\u9019\u7a2e\u6109\u5feb\u7684\u56de\u61b6\u662f\u5426\u6703\u59a8\u7919\u4f60\u642c\u9077\u5230\u65b0\u7684\u5730\u65b9\u53bb\u4f4f\uff1f\",\n        options: [\n          \"\u662f\u7684\",\n          \"\u4e0d\u6703\",\n          \"\u5f88\u5927\u7a0b\u5ea6\u4e0a\u8981\u770b\u642c\u5230\u4ec0\u9ebc\u5730\u65b9\u53bb\"\n        ],\n        dimension: \"attachment\"\n      },\n      {\n        question: \"\u5982\u679c\u6709\u4eba\u56b4\u91cd\u5730\u50b7\u5bb3\u4e86\u4f60\uff0c\u4f60\u6703\u539f\u8ad2\u4ed6\u55ce\uff1f\",\n        options: [\n          \"\u4e0d\u6703\",\n          \"\u4e0d\u6703\uff0c\u9664\u975e\u6211\u80fd\u64ab\u5e73\u5275\u50b7\",\n          \"\u5fd8\u8a18\u4ed6\u5011\uff0c\u800c\u4e0d\u662f\u539f\u8ad2\"\n        ],\n        dimension: \"emotional_processing\"\n      },\n      {\n        question: \"\u4f60\u662f\u5426\u6642\u523b\u95dc\u6ce8\u5404\u7a2e\u6700\u65b0\u7684\u6280\u8853\uff1f\",\n        options: [\n          \"\u4e0d\u662f\",\n          \"\u67d0\u7a2e\u7a0b\u5ea6\u4e0a\u662f\u9019\u6a23\",\n          \"\u662f\u7684\"\n        ],\n        dimension: \"innovation\"\n      },\n      {\n        question: \"\u90a3\u4e9b\u770b\u4f3c\u8907\u96dc\u7684\u65b0\u6280\u8853\u662f\u5426\u6703\u8b93\u4f60\u611f\u5230\u6050\u61fc\uff1f\",\n        options: [\n          \"\u662f\u7684\",\n          \"\u8b93\u6211\u611f\u5230\u7121\u6240\u9069\u5f9e\uff0c\u800c\u4e0d\u662f\u5687\u5012\u6211\",\n          \"\u4e0d\u6703\u5687\u5012\u6211\uff0c\u4f46\u662f\u6709\u6642\u6211\u5fc5\u9808\u99ac\u4e0d\u505c\u8e44\u5730\u53bb\u638c\u63e1\u9019\u4e9b\u65b0\u6280\u8853\"\n        ],\n        dimension: \"adaptability\"\n      },\n      {\n        question: \"\u4ee5\u4e0b\u54ea\u7a2e\u8aaa\u6cd5\u6700\u80fd\u4ee3\u8868\u4f60\u5c0d\u8b8a\u5316\u7684\u614b\u5ea6\uff1f\",\n        options: [\n          \"\u6211\u618e\u6068\u8b8a\u5316\",\n          \"\u6211\u4e0d\u662f\u7279\u5225\u559c\u6b61\u8b8a\u5316\uff0c\u4f46\u63a5\u53d7\u8b8a\u5316\u7684\u78ba\u662f\u4e0d\u53ef\u907f\u514d\u7684\",\n          \"\u6211\u7d72\u6beb\u4e0d\u70ba\u8b8a\u5316\u800c\u64d4\u6182\"\n        ],\n        dimension: \"change_attitude\"\n      },\n      {\n        question: \"\u4f60\u662f\u5426\u559c\u6b61\u6545\u5730\u91cd\u904a\uff0c\u4e26\u4e14\u60f3\u8d77\u6109\u5feb\u7684\u904e\u53bb\u548c\u8001\u670b\u53cb\uff1f\",\n        options: [\n          \"\u7d93\u5e38\",\n          \"\u5076\u723e\",\n          \"\u6c92\u6709\u6216\u8005\u5f88\u5c11\"\n        ],\n        dimension: \"nostalgia\"\n      },\n      {\n        question: \"\u4f60\u662f\u5426\u7d93\u5e38\u57f9\u990a\u65b0\u7684\u8208\u8da3\u611b\u597d\uff1f\",\n        options: [\n          \"\u4e0d\u662f\u9019\u6a23\uff0c\u6211\u73fe\u5728\u7684\u8208\u8da3\u611b\u597d\u90fd\u662f\u591a\u5e74\u524d\u7559\u4e0b\u7684\",\n          \"\u4e0d\u5b8c\u5168\u9019\u6a23\uff0c\u5118\u7ba1\u6709\u6642\u6211\u6703\u5c0d\u65b0\u4e8b\u7269\u611f\u8208\u8da3\",\n          \"\u662f\u7684\uff0c\u6211\u8a8d\u70ba\u6211\u7d93\u5e38\u6703\u8f49\u5411\u65b0\u4e8b\u7269\"\n        ],\n        dimension: \"openness\"\n      },\n      {\n        question: \"\u7576\u665a\u4e0a\u4f60\u548c\u6700\u89aa\u8fd1\u4e26\u4e14\u6700\u89aa\u5bc6\u7684\u4eba\u5728\u4e00\u8d77\u804a\u5929\u6642\uff0c\u4f60\u5011\u662f\u559c\u6b61\u56de\u61b6\u904e\u53bb\uff0c\u9084\u662f\u5c55\u671b\u672a\u4f86\uff1f\",\n        options: [\n          \"\u56de\u61b6\u904e\u53bb\",\n          \"\u5169\u8005\u5dee\u4e0d\u591a\",\n          \"\u5c55\u671b\u672a\u4f86\"\n        ],\n        dimension: \"time_perspective\"\n      },\n      {\n        question: \"\u591a\u5e74\u4ee5\u4f86\uff0c\u4f60\u7684\u5076\u50cf\u90fd\u662f\u540c\u4e00\u500b\u4eba\u55ce\uff1f\",\n        options: [\n          \"\u662f\u7684\",\n          \"\u662f\u7684\uff0c\u5118\u7ba1\u6211\u9084\u6709\u4e00\u4e9b\u73fe\u4ee3\u5076\u50cf\",\n          \"\u4e0d\u662f\"\n        ],\n        dimension: \"values_stability\"\n      },\n      {\n        question: \"\u4f60\u662f\u5426\u8a8d\u70ba\u5b78\u751f\u6642\u4ee3\u662f\u4f60\u4eba\u751f\u4e2d\u6700\u5feb\u6a02\u7684\u4e00\u6bb5\u6642\u5149\uff1f\",\n        options: [\n          \"\u662f\u7684\",\n          \"\u4e0d\u4e00\u5b9a\uff0c\u5118\u7ba1\u5b78\u751f\u6642\u4ee3\u6709\u5f88\u591a\u6109\u5feb\u7684\u56de\u61b6\",\n          \"\u4e0d\u662f\"\n        ],\n        dimension: \"nostalgia\"\n      },\n      {\n        question: \"\u4f60\u8a8d\u70ba\u4e0b\u9762\u54ea\u4e00\u9805\u662f\u4f60\u6700\u5927\u7684\u512a\u9ede\uff1f\",\n        options: [\n          \"\u6709\u7d44\u7e54\",\n          \"\u8ca0\u8cac\",\n          \"\u7cbe\u529b\u5145\u6c9b\"\n        ],\n        dimension: \"personality\"\n      },\n      {\n        question: \"\u4f60\u66f4\u559c\u6b61\u770b\u7684\u96fb\u8996\u7bc0\u76ee\u662f\u8001\u7247\u91cd\u64ad\uff0c\u800c\u4e0d\u662f\u65b0\u7247\uff0c\u5c0d\u55ce\uff1f\",\n        options: [\n          \"\u662f\u7684\",\n          \"\u6709\u6642\",\n          \"\u4e0d\"\n        ],\n        dimension: \"preferences\"\n      },\n      {\n        question: \"\u4f60\u559c\u6b61\u73fe\u5728\u7684\u6d41\u884c\u97f3\u6a02\u55ce\uff1f\",\n        options: [\n          \"\u7406\u6240\u7576\u7136\",\n          \"\u8207\u4eca\u5929\u7684\u97f3\u6a02\u76f8\u6bd4\uff0c\u4e5f\u8a31\u6211\u66f4\u559c\u6b61\u67d0\u500b\u7279\u5b9a\u5e74\u4ee3\u7684\u97f3\u6a02\",\n          \"\u4e0d\"\n        ],\n        dimension: \"preferences\"\n      },\n      {\n        question: \"\u4e0b\u9762\u54ea\u4e9b\u5c0d\u4f60\u6700\u91cd\u8981\uff1f\",\n        options: [\n          \"\u904e\u53bb\",\n          \"\u73fe\u5728\",\n          \"\u5c07\u4f86\"\n        ],\n        dimension: \"time_perspective\"\n      },\n      {\n        question: \"\u4e0b\u9762\u4ec0\u9ebc\u5c0d\u4f60\u6700\u91cd\u8981\uff1f\",\n        options: [\n          \"\u5145\u5be6\u800c\u7a69\u5b9a\u7684\u5bb6\u5ead\u751f\u6d3b\",\n          \"\u6700\u5927\u9650\u5ea6\u5730\u5be6\u73fe\u4eba\u751f\u50f9\u503c\",\n          \"\u4e0d\u65b7\u5730\u5145\u5be6\u81ea\u5df1\u7684\u601d\u60f3\uff0c\u4ee5\u91cb\u653e\u6700\u5927\u7684\u6f5b\u80fd\"\n        ],\n        dimension: \"life_goals\"\n      },\n      {\n        question: \"\u4f60\u662f\u5426\u64c1\u6709\u793e\u4ea4\u5a92\u9ad4\u5e33\u865f\uff1f\",\n        options: [\n          \"\u6c92\u6709\u4e14\u4e0d\u6253\u7b97\u5275\u5efa\",\n          \"\u50c5\u6709\u57fa\u790e\u793e\u4ea4\u5e33\u865f\",\n          \"\u7a4d\u6975\u7d93\u71df\u591a\u500b\u5e73\u53f0\u5e33\u865f\"\n        ],\n        dimension: \"technology\"\n      },\n      {\n        question: \"\u4f60\u5c0d\u670d\u88dd\u7684\u65b0\u6b3e\u5f0f\u6709\u4ec0\u9ebc\u60f3\u6cd5\uff1f\",\n        options: [\n          \"\u6c92\u4ec0\u9ebc\u60f3\u6cd5\",\n          \"\u6211\u60f3\u6709\u4e9b\u6b3e\u5f0f\u6703\u5f88\u597d\",\n          \"\u5927\u591a\u6578\u90fd\u4e0d\u9069\u5408\u6211\uff0c\u4f46\u6211\u559c\u6b61\u770b\u898b\u5225\u4eba\u7a7f\u4e0a\u6f02\u4eae\u7684\u6d41\u884c\u6b3e\u5f0f\"\n        ],\n        dimension: \"fashion\"\n      },\n      {\n        question: \"\u4f60\u50be\u5411\u65bc\u6536\u85cf\u6771\u897f\u55ce\uff1f\",\n        options: [\n          \"\u662f\u7684\",\n          \"\u4e5f\u8a31\",\n          \"\u4e0d\u662f\"\n        ],\n        dimension: \"attachment\"\n      },\n      {\n        question: \"\u4f60\u6bcf\u5e74\u90fd\u53bb\u65b0\u7684\u5730\u65b9\u5ea6\u5047\u55ce\uff1f\",\n        options: [\n          \"\u4e0d\uff0c\u6211\u5e7e\u4e4e\u6bcf\u5e74\u90fd\u53bb\u540c\u4e00\u500b\u5730\u65b9\",\n          \"\u4e0d\u662f\u6bcf\u5e74\uff0c\u6211\u6709\u597d\u5e7e\u500b\u4e0d\u540c\u7684\u5730\u65b9\u53ef\u4f9b\u9078\u64c7\uff0c\u6211\u8f2a\u63db\u8457\u53bb\u9019\u4e9b\u5730\u65b9\",\n          \"\u901a\u5e38\u662f\u9019\u6a23\"\n        ],\n        dimension: \"exploration\"\n      },\n      {\n        question: \"\u4f60\u662f\u5426\u8cfc\u8cb7\u904e\u5982Google\u96f2\u7aef\u670d\u52d9\u6703\u54e1\uff1f\",\n        options: [\n          \"\u6c92\u6709\uff0c\u800c\u4e14\u4e5f\u4e0d\u6253\u7b97\u8cb7\",\n          \"\u6c92\u6709\uff0c\u4f46\u5c07\u4f86\u53ef\u80fd\u8cfc\u8cb7\",\n          \"\u662f\u7684\"\n        ],\n        dimension: \"technology\"\n      },\n      {\n        question: \"\u4f60\u662f\u5426\u8a8d\u70ba\u6703\u6709\u90a3\u9ebc\u4e00\u5929\uff0c\u4f60\u4ec0\u9ebc\u90fd\u4e0d\u7528\u5e79\uff0c\u5c31\u7b49\u8457\u990a\u8001\uff1f\",\n        options: [\n          \"\u662f\u7684\",\n          \"\u53ef\u80fd\",\n          \"\u4e0d\"\n        ],\n        dimension: \"future_planning\"\n      },\n      {\n        question: \"\u4f60\u5f88\u5bb9\u6613\u5f9e\u500b\u4eba\u7684\u4e0d\u5e78\u4e2d\u89e3\u812b\u51fa\u4f86\u55ce\uff1f\",\n        options: [\n          \"\u6839\u672c\u5c31\u4e0d\u5bb9\u6613\uff0c\u4e8b\u5be6\u4e0a\u90a3\u662f\u4e00\u500b\u6f2b\u9577\u800c\u56f0\u96e3\u7684\u904e\u7a0b\",\n          \"\u6211\u5118\u53ef\u80fd\u5feb\u5730\u89e3\u812b\u81ea\u5df1\uff0c\u5118\u7ba1\u6c92\u6709\u4eba\u80fd\u5920\u5f9e\u4e2d\u5b8c\u5168\u89e3\u812b\",\n          \"\u9019\u4e0d\u5bb9\u6613\u3002\u4f46\u662f\u6211\u6703\u76e1\u91cf\u5c07\u5b83\u62cb\u5230\u8166\u5f8c\uff0c\u4e26\u4e14\u7e7c\u7e8c\u8d70\u597d\u81ea\u5df1\u7684\u8def\"\n        ],\n        dimension: \"resilience\"\n      },\n      {\n        question: \"\u4f60\u5c0d\u65bc\u81ea\u5df1\u6240\u5728\u7684\u516c\u53f8\u4e0d\u65b7\u5f15\u9032\u65b0\u6280\u8853\u6709\u4ec0\u9ebc\u611f\u60f3\uff1f\",\n        options: [\n          \"\u591a\u5c11\u6709\u4e9b\u64d4\u5fc3\uff0c\u56e0\u70ba\u6211\u5c0d\u81ea\u5df1\u5df2\u77e5\u7684\u6771\u897f\u66f4\u6709\u4fe1\u5fc3\",\n          \"\u6211\u77e5\u9053\u5728\u7576\u4eca\u793e\u6703\uff0c\u9019\u662f\u4fdd\u6301\u7af6\u722d\u529b\u6240\u5fc5\u9700\u7684\uff0c\u4f46\u6709\u6642\u6703\u64d4\u5fc3\u81ea\u5df1\u4e0d\u80fd\u9069\u61c9\u9019\u4e9b\u65b0\u6280\u8853\",\n          \"\u5766\u7387\u5730\u8aaa\uff0c\u6211\u5f88\u559c\u6b61\u63a5\u53d7\u9019\u7a2e\u4ee4\u4eba\u8208\u596e\u7684\u65b0\u6311\u6230\"\n        ],\n        dimension: \"innovation\"\n      },\n      {\n        question: \"\u4f60\u662f\u5426\u7cbe\u901a\u67d0\u4e00\u9805\u6280\u8853\uff0c\u751a\u81f3\u53ef\u4ee5\u5f88\u6e05\u695a\u5730\u5411\u5225\u4eba\u6f14\u793a\u5982\u4f55\u4f7f\u7528\u5b83\uff1f\",\n        options: [\n          \"\u6c92\u6709\",\n          \"\u5076\u723e\",\n          \"\u7d93\u5e38\"\n        ],\n        dimension: \"expertise\"\n      }\n    ],\n    \n    results: {\n      low: {\n        emoji: \"\ud83c\udfdb\ufe0f\",\n        title: \"\u61f7\u820a\u5b88\u8b77\u8005\",\n        text: \"\u4f60\u662f\u4e00\u4f4d\u73cd\u8996\u50b3\u7d71\u8207\u6b77\u53f2\u7684\u5b88\u8b77\u8005\u3002\u904e\u53bb\u7684\u7d93\u6b77\u548c\u8a18\u61b6\u5c0d\u4f60\u4f86\u8aaa\u4e0d\u50c5\u662f\u56de\u61b6\uff0c\u66f4\u662f\u667a\u6167\u7684\u5bf6\u5eab\u3002\u4f60\u5f9e\u6b77\u53f2\u4e2d\u6c72\u53d6\u529b\u91cf\uff0c\u7528\u7d93\u9a57\u6307\u5c0e\u73fe\u5728\u7684\u6c7a\u7b56\u3002\u9019\u7a2e\u7279\u8cea\u8b93\u4f60\u6210\u70ba\u5718\u968a\u4e2d\u7684\u7a69\u5b9a\u529b\u91cf\uff0c\u80fd\u5920\u5728\u8b8a\u5316\u4e2d\u4fdd\u6301\u6e05\u9192\u7684\u5224\u65b7\u3002\",\n        color: \"#6B46C1\",\n        dimensions: {\n          stability: 85,\n          tradition: 90,\n          experience: 88,\n          innovation: 35,\n          flexibility: 40\n        },\n        advice: [\n          \"\u5617\u8a66\u6bcf\u6708\u5b78\u7fd2\u4e00\u9805\u65b0\u6280\u80fd\uff0c\u4fdd\u6301\u8207\u6642\u4ee3\u7684\u9023\u7d50\",\n          \"\u8a18\u9304\u4f60\u7684\u5bf6\u8cb4\u7d93\u9a57\uff0c\u5c07\u667a\u6167\u50b3\u627f\u7d66\u4ed6\u4eba\",\n          \"\u9069\u5ea6\u63a5\u89f8\u65b0\u4e8b\u7269\uff0c\u5728\u50b3\u7d71\u8207\u5275\u65b0\u9593\u627e\u5230\u5e73\u8861\",\n          \"\u904b\u7528\u4f60\u7684\u6b77\u53f2\u6d1e\u5bdf\u529b\uff0c\u5e6b\u52a9\u5718\u968a\u907f\u514d\u91cd\u8907\u904e\u53bb\u7684\u932f\u8aa4\"\n        ]\n      },\n      medium: {\n        emoji: \"\u2696\ufe0f\",\n        title: \"\u6642\u5149\u5e73\u8861\u5e2b\",\n        text: \"\u4f60\u64c1\u6709\u7f55\u898b\u7684\u6642\u9593\u5e73\u8861\u611f\uff0c\u80fd\u5920\u81ea\u5982\u5730\u904a\u8d70\u65bc\u904e\u53bb\u3001\u73fe\u5728\u548c\u672a\u4f86\u4e4b\u9593\u3002\u4f60\u65e2\u73cd\u60dc\u904e\u53bb\u7684\u7f8e\u597d\uff0c\u53c8\u80fd\u6d3b\u5728\u7576\u4e0b\uff0c\u540c\u6642\u5c0d\u672a\u4f86\u4fdd\u6301\u958b\u653e\u3002\u9019\u7a2e\u5e73\u8861\u8b93\u4f60\u5728\u751f\u6d3b\u4e2d\u5c55\u73fe\u51fa\u975e\u51e1\u7684\u9069\u61c9\u529b\u548c\u667a\u6167\u3002\",\n        color: \"#10B981\",\n        dimensions: {\n          stability: 70,\n          tradition: 65,\n          experience: 75,\n          innovation: 68,\n          flexibility: 72\n        },\n        advice: [\n          \"\u7e7c\u7e8c\u4fdd\u6301\u4f60\u7684\u5e73\u8861\u611f\uff0c\u9019\u662f\u4f60\u6700\u5927\u7684\u512a\u52e2\",\n          \"\u5e6b\u52a9\u4ed6\u4eba\u5728\u61f7\u820a\u8207\u5275\u65b0\u4e4b\u9593\u627e\u5230\u5e73\u8861\u9ede\",\n          \"\u5229\u7528\u4f60\u7684\u9069\u61c9\u529b\uff0c\u6210\u70ba\u8b8a\u9769\u4e2d\u7684\u6a4b\u6a11\",\n          \"\u57f9\u990a\u4f60\u7684\u8abf\u89e3\u80fd\u529b\uff0c\u4f60\u5929\u751f\u9069\u5408\u9023\u7d50\u4e0d\u540c\u89c0\u9ede\"\n        ]\n      },\n      high: {\n        emoji: \"\ud83d\ude80\",\n        title: \"\u672a\u4f86\u5148\u92d2\",\n        text: \"\u4f60\u662f\u4e00\u4f4d\u771f\u6b63\u7684\u672a\u4f86\u4e3b\u7fa9\u8005\uff0c\u7e3d\u662f\u8d70\u5728\u6642\u4ee3\u7684\u524d\u6cbf\u3002\u8b8a\u5316\u5c0d\u4f60\u4f86\u8aaa\u4e0d\u662f\u6311\u6230\uff0c\u800c\u662f\u6a5f\u9047\u3002\u4f60\u7684\u5275\u65b0\u7cbe\u795e\u548c\u524d\u77bb\u6027\u601d\u7dad\u8b93\u4f60\u80fd\u5920\u9810\u898b\u8da8\u52e2\uff0c\u628a\u63e1\u6a5f\u6703\u3002\u4f60\u662f\u63a8\u52d5\u9032\u6b65\u7684\u529b\u91cf\uff0c\u7e3d\u662f\u70ba\u660e\u5929\u505a\u597d\u6e96\u5099\u3002\",\n        color: \"#F59E0B\",\n        dimensions: {\n          stability: 45,\n          tradition: 35,\n          experience: 50,\n          innovation: 92,\n          flexibility: 88\n        },\n        advice: [\n          \"\u5728\u8ffd\u6c42\u5275\u65b0\u7684\u540c\u6642\uff0c\u4e0d\u8981\u5ffd\u8996\u6b77\u53f2\u7684\u6559\u8a13\",\n          \"\u5efa\u7acb\u4e00\u4e9b\u7a69\u5b9a\u7684\u751f\u6d3b\u5100\u5f0f\uff0c\u70ba\u5feb\u7bc0\u594f\u7684\u751f\u6d3b\u63d0\u4f9b\u9328\u9ede\",\n          \"\u8207\u61f7\u820a\u578b\u7684\u4eba\u5408\u4f5c\uff0c\u4ed6\u5011\u7684\u7d93\u9a57\u53ef\u4ee5\u8c50\u5bcc\u4f60\u7684\u8996\u89d2\",\n          \"\u8a18\u9304\u4f60\u7684\u5275\u65b0\u6b77\u7a0b\uff0c\u70ba\u5f8c\u4f86\u8005\u7559\u4e0b\u5bf6\u8cb4\u7684\u7d93\u9a57\"\n        ]\n      }\n    }\n  };\n  \n  \/\/ \u6e2c\u9a57\u63a7\u5236\u5668\u985e\u5225\n  class QuizController {\n    constructor() {\n      this.container = document.getElementById('timeQuizContainer9');\n      this.currentQuestion = 0;\n      this.answers = [];\n      this.dimensionScores = {};\n      this.chart = null;\n      \n      \/\/ \u5feb\u53d6DOM\u5143\u7d20\n      this.elements = {\n        intro: this.container.querySelector('[data-page=\"intro9\"]'),\n        quiz: this.container.querySelector('[data-page=\"quiz9\"]'),\n        result: this.container.querySelector('[data-page=\"result9\"]'),\n        progressBar: this.container.querySelector('[data-element=\"progress-bar\"]'),\n        progressText: this.container.querySelector('[data-element=\"progress-text\"]'),\n        questionText: this.container.querySelector('[data-element=\"question\"]'),\n        optionsContainer: this.container.querySelector('[data-element=\"options\"]'),\n        prevButton: this.container.querySelector('[data-action=\"prev\"]'),\n        resultEmoji: this.container.querySelector('[data-element=\"result-emoji\"]'),\n        resultTitle: this.container.querySelector('[data-element=\"result-title\"]'),\n        resultScore: this.container.querySelector('[data-element=\"result-score\"]'),\n        resultText: this.container.querySelector('[data-element=\"result-text\"]'),\n        chartCanvas: this.container.querySelector('[data-element=\"chart\"]'),\n        dimensionAnalysis: this.container.querySelector('[data-element=\"dimension-analysis\"]'),\n        personalizedAdvice: this.container.querySelector('[data-element=\"personalized-advice\"]')\n      };\n      \n      this.init();\n    }\n    \n    init() {\n      \/\/ \u4f7f\u7528\u4e8b\u4ef6\u59d4\u8a17\n      this.container.addEventListener('click', this.handleClick.bind(this));\n    }\n    \n    handleClick(e) {\n      const action = e.target.closest('[data-action]')?.dataset.action;\n      const optionCard = e.target.closest('.quiz-option-card');\n      \n      if (action === 'start') {\n        this.startQuiz();\n      } else if (action === 'prev') {\n        this.previousQuestion();\n      } else if (action === 'restart') {\n        this.restartQuiz();\n      } else if (optionCard && !optionCard.disabled) {\n        this.selectOption(optionCard);\n      }\n    }\n    \n    startQuiz() {\n      this.showPage('quiz');\n      this.renderQuestion();\n      this.scrollToElement(this.elements.quiz.querySelector('h2'));\n    }\n    \n    showPage(page) {\n      \/\/ \u96b1\u85cf\u6240\u6709\u9801\u9762\n      this.elements.intro.classList.add('d-none');\n      this.elements.quiz.classList.add('d-none');\n      this.elements.result.classList.add('d-none');\n      \n      \/\/ \u986f\u793a\u6307\u5b9a\u9801\u9762\n      switch(page) {\n        case 'intro':\n          this.elements.intro.classList.remove('d-none');\n          break;\n        case 'quiz':\n          this.elements.quiz.classList.remove('d-none');\n          break;\n        case 'result':\n          this.elements.result.classList.remove('d-none');\n          break;\n      }\n    }\n    \n    renderQuestion() {\n      const question = quizData.questions[this.currentQuestion];\n      \n      \/\/ \u66f4\u65b0\u554f\u984c\u6587\u5b57\n      this.elements.questionText.textContent = question.question;\n      \n      \/\/ \u6e05\u7a7a\u9078\u9805\u5bb9\u5668\n      this.elements.optionsContainer.innerHTML = '';\n      \n      \/\/ \u6e32\u67d3\u9078\u9805\u5361\u7247\n      question.options.forEach((option, index) => {\n        const optionCard = document.createElement('div');\n        optionCard.className = 'quiz-option-card d-flex align-items-center';\n        optionCard.dataset.value = index;\n        \n        \/\/ \u5982\u679c\u4e4b\u524d\u9078\u904e\u9019\u500b\u9078\u9805\uff0c\u6dfb\u52a0\u9078\u4e2d\u72c0\u614b\n        if (this.answers[this.currentQuestion] === index) {\n          optionCard.classList.add('selected');\n        }\n        \n        optionCard.innerHTML = `\n          <span class=\"option-indicator\">\n            ${this.answers[this.currentQuestion] === index ? '<i class=\"bi bi-check\"><\/i>' : ''}\n          <\/span>\n          <span class=\"option-text\">${option}<\/span>\n        `;\n        \n        this.elements.optionsContainer.appendChild(optionCard);\n      });\n      \n      \/\/ \u66f4\u65b0\u9032\u5ea6\n      this.updateProgress();\n      \n      \/\/ \u986f\u793a\/\u96b1\u85cf\u4e0a\u4e00\u984c\u6309\u9215\n      if (this.currentQuestion > 0) {\n        this.elements.prevButton.classList.remove('d-none');\n      } else {\n        this.elements.prevButton.classList.add('d-none');\n      }\n    }\n    \n    updateProgress() {\n      const progress = ((this.currentQuestion + 1) \/ quizData.questions.length) * 100;\n      this.elements.progressBar.style.width = `${progress}%`;\n      this.elements.progressText.textContent = `\u554f\u984c ${this.currentQuestion + 1}\/${quizData.questions.length}`;\n    }\n    \n    selectOption(optionCard) {\n      \/\/ \u79fb\u9664\u6240\u6709\u9078\u4e2d\u72c0\u614b\n      this.elements.optionsContainer.querySelectorAll('.quiz-option-card').forEach(card => {\n        card.classList.remove('selected');\n        card.querySelector('.option-indicator').innerHTML = '';\n      });\n      \n      \/\/ \u6dfb\u52a0\u9078\u4e2d\u72c0\u614b\n      optionCard.classList.add('selected');\n      optionCard.querySelector('.option-indicator').innerHTML = '<i class=\"bi bi-check\"><\/i>';\n      \n      \/\/ \u5132\u5b58\u7b54\u6848\n      const value = parseInt(optionCard.dataset.value);\n      this.answers[this.currentQuestion] = value;\n      \n      \/\/ \u8a18\u9304\u7dad\u5ea6\u5206\u6578\n      const dimension = quizData.questions[this.currentQuestion].dimension;\n      if (!this.dimensionScores[dimension]) {\n        this.dimensionScores[dimension] = [];\n      }\n      this.dimensionScores[dimension].push(value);\n      \n      \/\/ \u5ef6\u9072\u5f8c\u9032\u5165\u4e0b\u4e00\u984c\n      setTimeout(() => {\n        this.nextQuestion();\n      }, 300);\n    }\n    \n    nextQuestion() {\n      if (this.currentQuestion < quizData.questions.length - 1) {\n        this.currentQuestion++;\n        this.renderQuestion();\n        this.scrollToElement(this.elements.quiz.querySelector('h2'));\n      } else {\n        this.showResults();\n      }\n    }\n    \n    previousQuestion() {\n      if (this.currentQuestion > 0) {\n        \/\/ \u79fb\u9664\u7576\u524d\u554f\u984c\u7684\u7dad\u5ea6\u5206\u6578\n        const dimension = quizData.questions[this.currentQuestion].dimension;\n        if (this.dimensionScores[dimension]) {\n          this.dimensionScores[dimension].pop();\n        }\n        \n        this.currentQuestion--;\n        this.renderQuestion();\n        this.scrollToElement(this.elements.quiz.querySelector('h2'));\n      }\n    }\n    \n    calculateScore() {\n      \/\/ \u8a08\u7b97\u7e3d\u5206\uff1aA=0, B=1, C=2\n      return this.answers.reduce((sum, answer) => sum + answer, 0);\n    }\n    \n    analyzeAnswers() {\n      \/\/ \u5206\u6790\u5404\u7dad\u5ea6\u7684\u5e73\u5747\u5206\u6578\n      const dimensionAverages = {};\n      for (const [dimension, scores] of Object.entries(this.dimensionScores)) {\n        const avg = scores.reduce((a, b) => a + b, 0) \/ scores.length;\n        dimensionAverages[dimension] = Math.round(avg * 50); \/\/ \u8f49\u63db\u70ba0-100\u5206\u6578\n      }\n      return dimensionAverages;\n    }\n    \n    showResults() {\n      const score = this.calculateScore();\n      const dimensionAnalysis = this.analyzeAnswers();\n      let resultCategory;\n      \n      \/\/ \u6c7a\u5b9a\u7d50\u679c\u985e\u5225\n      if (score < 25) {\n        resultCategory = quizData.results.low;\n      } else if (score <= 39) {\n        resultCategory = quizData.results.medium;\n      } else {\n        resultCategory = quizData.results.high;\n      }\n      \n      \/\/ \u986f\u793a\u7d50\u679c\u9801\u9762\n      this.showPage('result');\n      \n      \/\/ \u66f4\u65b0\u7d50\u679c\u5167\u5bb9\n      this.elements.resultEmoji.textContent = resultCategory.emoji;\n      this.elements.resultTitle.textContent = resultCategory.title;\n      this.elements.resultTitle.style.color = resultCategory.color;\n      this.elements.resultScore.textContent = `\u7e3d\u5206\uff1a${score}\/50`;\n      this.elements.resultText.textContent = resultCategory.text;\n      \n      \/\/ \u5efa\u7acb\u5716\u8868\n      this.createChart(resultCategory);\n      \n      \/\/ \u986f\u793a\u591a\u7dad\u5206\u6790\n      this.showDimensionAnalysis(dimensionAnalysis, resultCategory);\n      \n      \/\/ \u986f\u793a\u500b\u6027\u5316\u5efa\u8b70\n      this.showPersonalizedAdvice(resultCategory);\n      \n      \/\/ \u6372\u52d5\u5230\u9802\u90e8\n      this.scrollToElement(this.elements.result.querySelector('h2'));\n    }\n    \n    createChart(resultCategory) {\n      \/\/ \u92b7\u6bc0\u820a\u5716\u8868\n      if (this.chart) {\n        this.chart.destroy();\n      }\n      \n      const ctx = this.elements.chartCanvas.getContext('2d');\n      \n      this.chart = new Chart(ctx, {\n        type: 'radar',\n        data: {\n          labels: ['\u7a69\u5b9a\u6027', '\u50b3\u7d71\u6027', '\u7d93\u9a57\u503c', '\u5275\u65b0\u529b', '\u9748\u6d3b\u5ea6'],\n          datasets: [{\n            label: '\u4f60\u7684\u7279\u8cea\u5206\u4f48',\n            data: [\n              resultCategory.dimensions.stability,\n              resultCategory.dimensions.tradition,\n              resultCategory.dimensions.experience,\n              resultCategory.dimensions.innovation,\n              resultCategory.dimensions.flexibility\n            ],\n            backgroundColor: resultCategory.color + '33',\n            borderColor: resultCategory.color,\n            borderWidth: 3,\n            pointBackgroundColor: resultCategory.color,\n            pointBorderColor: '#fff',\n            pointBorderWidth: 2,\n            pointRadius: 6,\n            pointHoverRadius: 8\n          }]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          plugins: {\n            legend: {\n              display: false\n            },\n            tooltip: {\n              callbacks: {\n                label: function(context) {\n                  return `${context.label}: ${context.parsed.r}%`;\n                }\n              },\n              titleFont: {\n                size: 16\n              },\n              bodyFont: {\n                size: 16\n              },\n              padding: 12\n            }\n          },\n          scales: {\n            r: {\n              beginAtZero: true,\n              max: 100,\n              ticks: {\n                stepSize: 20,\n                font: {\n                  size: 12\n                }\n              },\n              pointLabels: {\n                font: {\n                  size: 14,\n                  weight: '600'\n                },\n                padding: 15\n              },\n              grid: {\n                color: 'rgba(0, 0, 0, 0.08)'\n              }\n            }\n          }\n        }\n      });\n    }\n    \n    showDimensionAnalysis(dimensionAnalysis, resultCategory) {\n      \/\/ \u9078\u64c7\u986f\u793a\u7684\u91cd\u9ede\u7dad\u5ea6\n      const highlights = [\n        { name: '\u8b8a\u9769\u9069\u61c9', value: dimensionAnalysis.change_attitude || 50, icon: 'bi-arrow-repeat', color: '#10B981' },\n        { name: '\u79d1\u6280\u63a5\u53d7', value: dimensionAnalysis.technology || 50, icon: 'bi-cpu', color: '#6B46C1' },\n        { name: '\u61f7\u820a\u50be\u5411', value: dimensionAnalysis.nostalgia || 50, icon: 'bi-clock-history', color: '#F59E0B' }\n      ];\n      \n      let html = '';\n      highlights.forEach(item => {\n        html += `\n          <div class=\"col-12 col-md-4\">\n            <div class=\"dimension-card\">\n              <div class=\"dimension-icon\" style=\"background: ${item.color};\">\n                <i class=\"bi ${item.icon}\"><\/i>\n              <\/div>\n              <h4 class=\"h6 fw-bold mb-1\">${item.name}<\/h4>\n              <div class=\"progress mb-2\" style=\"height: 6px;\">\n                <div class=\"progress-bar\" style=\"width: ${item.value}%; background: ${item.color};\"><\/div>\n              <\/div>\n              <small class=\"text-muted\">${item.value}%<\/small>\n            <\/div>\n          <\/div>\n        `;\n      });\n      \n      this.elements.dimensionAnalysis.innerHTML = html;\n    }\n    \n    showPersonalizedAdvice(resultCategory) {\n      let html = '';\n      resultCategory.advice.forEach((advice, index) => {\n        html += `\n          <div class=\"advice-item\">\n            <div class=\"d-flex align-items-start\">\n              <span class=\"badge rounded-pill me-3\" style=\"background: ${resultCategory.color}; padding: 0.5rem 0.75rem;\">\n                ${index + 1}\n              <\/span>\n              <p class=\"mb-0 flex-1\">${advice}<\/p>\n            <\/div>\n          <\/div>\n        `;\n      });\n      \n      this.elements.personalizedAdvice.innerHTML = html;\n    }\n    \n    restartQuiz() {\n      \/\/ \u91cd\u7f6e\u72c0\u614b\n      this.currentQuestion = 0;\n      this.answers = [];\n      this.dimensionScores = {};\n      \n      \/\/ \u92b7\u6bc0\u5716\u8868\n      if (this.chart) {\n        this.chart.destroy();\n        this.chart = null;\n      }\n      \n      \/\/ \u8fd4\u56de\u5f15\u5c0e\u9801\n      this.showPage('intro');\n      this.scrollToElement(this.elements.intro.querySelector('h2'));\n    }\n    \n    scrollToElement(element) {\n      if (element) {\n        element.scrollIntoView({\n          behavior: 'smooth',\n          block: 'start'\n        });\n      }\n    }\n  }\n  \n  \/\/ \u521d\u59cb\u5316\u6e2c\u9a57\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', () => {\n      new QuizController();\n    });\n  } else {\n    new QuizController();\n  }\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u4f60\u662f\u4e00\u4e2a\u5fd8\u8bb0\u8fc7\u53bb\u3001\u5bf9\u672a\u6765\u5145\u6ee1\u61a7\u61ac\u7684\u4eba\uff0c\u8fd8\u662f\u4e00\u4e2a\u8ff7\u604b\u4e8e\u8fc7\u53bb\u3001\u6574\u5929\u7737\u987e\u8fc7\u53bb\u81ea\u8ba4\u4e3a\u7f8e\u597d\u65f6\u5149\u7684\u4eba\u5462\uff1f\u505a\u5b8c\u4e0b\u9762\u7684\u6d4b\u8bd5\uff0c\u4f60\u5c31\u80fd\u8ba4\u6e05\u81ea\u5df1\u5728\u8fd9\u65b9\u9762\u7684\u5904\u4e16\u54f2\u5b66\u4e86\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":[167],"tags":[],"class_list":["post-3157","post","type-post","status-publish","format-standard","hentry","category-personality"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/3157","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=3157"}],"version-history":[{"count":5,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/3157\/revisions"}],"predecessor-version":[{"id":10480,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/3157\/revisions\/10480"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=3157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=3157"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=3157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}