{"id":2776,"date":"2023-10-29T12:10:08","date_gmt":"2023-10-29T04:10:08","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2776"},"modified":"2025-06-14T18:52:46","modified_gmt":"2025-06-14T10:52:46","slug":"sophisticated-person","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/sophisticated-person","title":{"rendered":"\u7ebf\u4e0a\u514d\u8d39\u6d4b\u9a8c\uff1a\u4f60\u662f\u7cbe\u660e\u4e16\u6545\u7684\u4eba\u5417\uff0810\u9898\uff09"},"content":{"rendered":"\n<!-- Bootstrap CSS -->\n<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap\/5.3.3\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n<!-- Bootstrap Icons -->\n<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-icons\/1.11.3\/font\/bootstrap-icons.min.css\" rel=\"stylesheet\">\n\n<!-- =========================== HTML \u7d50\u69cb =========================== -->\n\n<main class=\"container-fluid px-0\" style=\"font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 750px; margin: 0 auto;\">\n  \n  <!-- \u5f15\u5c0e\u9801 -->\n  <section id=\"quizintro9\" data-page=\"intro9\" class=\"min-vh-100 d-flex align-items-center\">\n    <div class=\"container-fluid\">\n      <div class=\"row justify-content-center\">\n        <div class=\"col-12\">\n          \n          <!-- \u4e3b\u6a19\u984c\u5340\u57df -->\n          <div class=\"mb-5 text-center\">\n            <div class=\"position-relative d-inline-block mb-4\">\n              <i class=\"bi bi-lightbulb text-warning\" style=\"font-size: 4rem; opacity: 0.1; position: absolute; top: -20px; left: -30px;\"><\/i>\n              <h1 class=\"display-4 fw-bold text-primary mb-3 position-relative\">\u7cbe\u660e\u4e16\u6545\u7a0b\u5ea6\u6e2c\u9a57<\/h1>\n            <\/div>\n            <p class=\"lead text-muted fs-4\">\u6d1e\u5bdf\u4eba\u6027\uff0c\u638c\u63e1\u8655\u4e16\u667a\u6167<\/p>\n          <\/div>\n\n          <!-- \u7279\u9ede\u5361\u7247 -->\n          <div class=\"row g-3 mb-5\">\n            <div class=\"col-md-4\">\n              <div class=\"card border-0 shadow-sm h-100\">\n                <div class=\"card-body text-center p-4\">\n                  <div class=\"rounded-circle bg-primary bg-opacity-10 d-inline-flex align-items-center justify-content-center mb-3\" style=\"width: 70px; height: 70px;\">\n                    <i class=\"bi bi-eye text-primary\" style=\"font-size: 1.8rem;\"><\/i>\n                  <\/div>\n                  <h5 class=\"card-title text-primary\">\u6d1e\u5bdf\u4eba\u6027<\/h5>\n                  <p class=\"card-text text-muted\">\u8a55\u4f30\u60a8\u5c0d\u4eba\u6027\u8907\u96dc\u9762\u7684\u7406\u89e3\u7a0b\u5ea6<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n            <div class=\"col-md-4\">\n              <div class=\"card border-0 shadow-sm h-100\">\n                <div class=\"card-body text-center p-4\">\n                  <div class=\"rounded-circle bg-success bg-opacity-10 d-inline-flex align-items-center justify-content-center mb-3\" style=\"width: 70px; height: 70px;\">\n                    <i class=\"bi bi-compass text-success\" style=\"font-size: 1.8rem;\"><\/i>\n                  <\/div>\n                  <h5 class=\"card-title text-success\">\u8655\u4e16\u667a\u6167<\/h5>\n                  <p class=\"card-text text-muted\">\u6e2c\u91cf\u60a8\u5728\u8907\u96dc\u74b0\u5883\u4e2d\u7684\u61c9\u5c0d\u80fd\u529b<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n            <div class=\"col-md-4\">\n              <div class=\"card border-0 shadow-sm h-100\">\n                <div class=\"card-body text-center p-4\">\n                  <div class=\"rounded-circle bg-info bg-opacity-10 d-inline-flex align-items-center justify-content-center mb-3\" style=\"width: 70px; height: 70px;\">\n                    <i class=\"bi bi-shield-check text-info\" style=\"font-size: 1.8rem;\"><\/i>\n                  <\/div>\n                  <h5 class=\"card-title text-info\">\u81ea\u6211\u4fdd\u8b77<\/h5>\n                  <p class=\"card-text text-muted\">\u4e86\u89e3\u60a8\u7684\u98a8\u96aa\u610f\u8b58\u548c\u9632\u7bc4\u80fd\u529b<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- \u8aaa\u660e\u6587\u5b57 -->\n          <div class=\"bg-light rounded-4 p-4 mb-5\">\n            <p class=\"fs-5 text-dark mb-3\">\n              <i class=\"bi bi-info-circle text-primary me-2\"><\/i>\n              \u9019\u500b\u6e2c\u9a57\u5c07\u5e6b\u52a9\u60a8\u4e86\u89e3\u81ea\u5df1\u7684\u8655\u4e16\u98a8\u683c\n            <\/p>\n            <p class=\"text-muted mb-0\">\n              \u900f\u904e15\u9053\u7cbe\u5fc3\u8a2d\u8a08\u7684\u60c5\u5883\u984c\uff0c\u8a55\u4f30\u60a8\u5c0d\u4eba\u60c5\u4e16\u6545\u7684\u7406\u89e3\u7a0b\u5ea6\u3002\n              \u6e2c\u9a57\u6642\u9593\u7d043-5\u5206\u9418\uff0c\u8acb\u8aa0\u5be6\u56de\u7b54\u4ee5\u7372\u5f97\u6700\u6e96\u78ba\u7684\u7d50\u679c\u3002\n            <\/p>\n          <\/div>\n\n          <!-- \u958b\u59cb\u6309\u9215 -->\n          <div class=\"text-center\">\n            <button class=\"btn btn-primary btn-lg px-5 py-3 rounded-pill shadow-lg\" \n                    style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; font-size: 1.2rem;\"\n                    data-action=\"start-quiz\"\n                    onmouseover=\"this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 25px rgba(0,0,0,0.2)'\"\n                    onmouseout=\"this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 15px rgba(0,0,0,0.1)'\">\n              <i class=\"bi bi-play-circle me-2\"><\/i>\n              \u958b\u59cb\u6e2c\u9a57\n            <\/button>\n          <\/div>\n\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u6e2c\u9a57\u9801 -->\n  <section id=\"quizmain9\" data-page=\"quiz9\" class=\"d-none py-5\">\n    <div class=\"container-fluid\">\n      <div class=\"row justify-content-center\">\n        <div class=\"col-12\">\n          \n          <!-- \u9032\u5ea6\u689d -->\n          <div class=\"mb-4\">\n            <div class=\"d-flex justify-content-between align-items-center mb-2\">\n              <span class=\"text-muted\">\u9032\u5ea6<\/span>\n              <span class=\"text-primary fw-bold\" data-progress-text>\u554f\u984c 1 \/ 15<\/span>\n            <\/div>\n            <div class=\"progress\" style=\"height: 8px;\">\n              <div class=\"progress-bar bg-primary\" data-progress-bar style=\"width: 6.67%\"><\/div>\n            <\/div>\n          <\/div>\n\n          <!-- \u984c\u76ee\u5361\u7247 -->\n          <div class=\"card border-0 shadow-lg mb-4\">\n            <div class=\"card-body p-4\">\n              <h3 class=\"fw-bold mb-4\" style=\"font-size: 22px; line-height: 1.4;\" data-question-text><\/h3>\n              \n              <div class=\"d-grid gap-3\" data-options-container>\n                <!-- \u9078\u9805\u5c07\u7531 JavaScript \u52d5\u614b\u751f\u6210 -->\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- \u4e0a\u4e00\u984c\u6309\u9215 -->\n          <div class=\"text-center\">\n            <button class=\"btn btn-outline-secondary d-none\" data-action=\"prev-question\">\n              <i class=\"bi bi-arrow-left me-2\"><\/i>\n              \u4e0a\u4e00\u984c\n            <\/button>\n          <\/div>\n\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u7d50\u679c\u9801 -->\n  <section id=\"quizresult9\" data-page=\"result9\" class=\"d-none min-vh-100 py-5\">\n    <div class=\"container-fluid\">\n      <div class=\"row justify-content-center\">\n        <div class=\"col-12\">\n          \n          <div class=\"text-center mb-5\">\n            <h2 class=\"display-5 fw-bold text-primary mb-3\">\u6e2c\u9a57\u7d50\u679c<\/h2>\n            <p class=\"lead text-muted\">\u60a8\u7684\u7cbe\u660e\u4e16\u6545\u7a0b\u5ea6\u5206\u6790<\/p>\n          <\/div>\n\n          <!-- \u7e3d\u5206\u5c55\u793a -->\n          <div class=\"row mb-4\">\n            <div class=\"col-12\">\n              <div class=\"card border-0 shadow-lg text-center\">\n                <div class=\"card-body p-4\">\n                  <div class=\"display-1 fw-bold text-primary mb-3\" data-total-score>0<\/div>\n                  <h4 class=\"text-primary mb-3\" data-result-title>\u8f09\u5165\u4e2d&#8230;<\/h4>\n                  <p class=\"lead text-muted\" data-result-description>\u6b63\u5728\u5206\u6790\u60a8\u7684\u7d50\u679c&#8230;<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- \u5f97\u5206\u5206\u4f48\u53ef\u8996\u5316 -->\n          <div class=\"row mb-4\">\n            <div class=\"col-12\">\n              <div class=\"card border-0 shadow-lg\">\n                <div class=\"card-body p-4\" style=\"padding-top: 3rem !important;\">\n                  <h5 class=\"card-title text-center mb-4\">\u60a8\u5728\u4eba\u7fa4\u4e2d\u7684\u4f4d\u7f6e<\/h5>\n                  <div id=\"scoreDistribution\" class=\"mb-3\"><\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- \u500b\u6027\u5316\u5efa\u8b70 -->\n          <div class=\"row mb-4\">\n            <div class=\"col-12\">\n              <div class=\"card border-0 shadow-lg\">\n                <div class=\"card-body p-4\">\n                  <h5 class=\"card-title mb-4\">\n                    <i class=\"bi bi-lightbulb text-warning me-2\"><\/i>\n                    \u5c08\u5c6c\u5efa\u8b70\n                  <\/h5>\n                  <div data-personalized-advice>\n                    <!-- \u500b\u6027\u5316\u5efa\u8b70\u5167\u5bb9\u5c07\u7531 JavaScript \u751f\u6210 -->\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- \u8a73\u7d30\u5206\u6790 -->\n          <div class=\"row mb-4\">\n            <div class=\"col-12\">\n              <div class=\"card border-0 shadow-lg\">\n                <div class=\"card-body p-4\">\n                  <h5 class=\"card-title mb-4\">\n                    <i class=\"bi bi-clipboard-data text-primary me-2\"><\/i>\n                    \u8a73\u7d30\u5206\u6790\u5831\u544a\n                  <\/h5>\n                  <div data-detailed-analysis>\n                    <!-- \u8a73\u7d30\u5206\u6790\u5167\u5bb9\u5c07\u7531 JavaScript \u751f\u6210 -->\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- \u91cd\u65b0\u6e2c\u8a66\u6309\u9215 -->\n          <div class=\"text-center\">\n            <button class=\"btn btn-primary btn-lg px-5 py-3 rounded-pill shadow-lg\" \n                    style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none;\"\n                    data-action=\"restart-quiz\">\n              <i class=\"bi bi-arrow-clockwise me-2\"><\/i>\n              \u91cd\u65b0\u6e2c\u8a66\n            <\/button>\n          <\/div>\n\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n<\/main>\n\n<!-- =========================== CSS \u6a23\u5f0f =========================== -->\n\n<style>\n\/* \u57fa\u790e\u6a23\u5f0f\u91cd\u7f6e *\/\n[data-quiz-container] * {\n  box-sizing: border-box;\n}\n\n\/* \u9801\u9762\u904e\u6e21\u52d5\u756b *\/\nsection[data-page] {\n  transition: opacity 0.3s ease-in-out;\n}\n\nsection[data-page].d-none {\n  opacity: 0;\n}\n\n\/* \u6309\u9215\u61f8\u505c\u6548\u679c *\/\n.btn {\n  transition: all 0.2s ease-in-out;\n}\n\n\/* \u9078\u9805\u5361\u7247\u6a23\u5f0f *\/\n.option-card {\n  background: #ffffff;\n  border: 2px solid #e9ecef;\n  transition: all 0.2s ease-in-out;\n  cursor: pointer;\n  min-height: 44px;\n}\n\n.option-card:hover {\n  border-color: #667eea;\n  background: #f8f9ff;\n  transform: translateY(-2px);\n  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);\n}\n\n.option-card.selected {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  border-color: #667eea;\n  color: #ffffff !important;\n  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);\n}\n\n.option-card.selected .option-text {\n  color: #ffffff !important;\n}\n\n.option-card.selected .option-indicator {\n  background: #ffffff !important;\n  color: #667eea !important;\n}\n\n\/* \u9078\u9805\u6307\u793a\u5668 *\/\n.option-indicator {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: #f8f9fa;\n  border: 2px solid #dee2e6;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  font-weight: bold;\n  transition: all 0.2s ease-in-out;\n  flex-shrink: 0;\n}\n\n.option-card:hover .option-indicator {\n  border-color: #667eea;\n  background: #667eea;\n  color: #ffffff;\n}\n\n.option-text {\n  color: #333333 !important;\n  font-size: 18px;\n  font-weight: 500;\n  line-height: 1.4;\n}\n\n\/* \u9032\u5ea6\u689d\u7f8e\u5316 *\/\n.progress {\n  border-radius: 10px;\n  background: #f8f9fa;\n}\n\n.progress-bar {\n  border-radius: 10px;\n  transition: width 0.3s ease-in-out;\n}\n\n\/* \u5361\u7247\u9670\u5f71\u6548\u679c *\/\n.card {\n  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\n}\n\n.card:hover {\n  transform: translateY(-2px);\n}\n\n\/* \u5f97\u5206\u5206\u4f48\u5716\u6a23\u5f0f *\/\n.score-bar {\n  height: 60px;\n  border-radius: 8px;\n  position: relative;\n  margin-bottom: 25px;\n  overflow: visible;\n  display: flex;\n  width: 100%;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.score-section {\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  font-weight: bold;\n  font-size: 13px;\n  position: relative;\n  flex-shrink: 0;\n  text-shadow: 0 1px 2px rgba(0,0,0,0.3);\n}\n\n.score-section:first-child {\n  border-top-left-radius: 8px;\n  border-bottom-left-radius: 8px;\n}\n\n.score-section:last-child {\n  border-top-right-radius: 8px;\n  border-bottom-right-radius: 8px;\n}\n\n.user-marker {\n  position: absolute;\n  top: -12px;\n  width: 20px;\n  height: 20px;\n  background: #dc3545;\n  border: 4px solid #ffffff;\n  border-radius: 50%;\n  transform: translateX(-50%);\n  z-index: 20;\n  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);\n  cursor: pointer;\n}\n\n.user-marker::after {\n  content: '';\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 2px;\n  height: 15px;\n  background: #dc3545;\n  opacity: 0.6;\n}\n\n.score-legend {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 15px;\n  justify-content: center;\n  margin-top: 15px;\n}\n\n.legend-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n}\n\n.legend-color {\n  width: 16px;\n  height: 16px;\n  border-radius: 4px;\n}\n\n\/* \u97ff\u61c9\u5f0f\u5b57\u9ad4\u8abf\u6574 *\/\n@media (max-width: 768px) {\n  .display-4 {\n    font-size: 2.5rem;\n  }\n  \n  .display-5 {\n    font-size: 2rem;\n  }\n  \n  .card-body {\n    padding: 1.5rem !important;\n  }\n  \n  .option-text {\n    font-size: 16px;\n  }\n  \n  .option-indicator {\n    width: 28px;\n    height: 28px;\n    font-size: 14px;\n  }\n\n  .score-legend {\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .score-section {\n    font-size: 11px;\n    text-align: center;\n  }\n\n  .score-bar {\n    height: 50px;\n    margin-bottom: 30px;\n  }\n\n  .user-marker {\n    width: 18px;\n    height: 18px;\n    top: -10px;\n  }\n\n  .legend-item {\n    margin-bottom: 8px;\n  }\n}\n\n\/* \u53ef\u8a2a\u554f\u6027\u589e\u5f37 *\/\n.option-card:focus {\n  outline: 3px solid #667eea;\n  outline-offset: 2px;\n}\n\n\/* \u8f09\u5165\u52d5\u756b *\/\n@keyframes pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.5; }\n}\n\n.loading {\n  animation: pulse 1.5s ease-in-out infinite;\n}\n\n\/* \u9632\u6b62\u8207WordPress\u4e3b\u984c\u885d\u7a81 *\/\n[data-quiz-container] .btn {\n  font-family: inherit;\n  letter-spacing: normal;\n}\n\n[data-quiz-container] .card {\n  background: #ffffff;\n}\n\n[data-quiz-container] .text-primary {\n  color: #667eea !important;\n}\n\n[data-quiz-container] .bg-primary {\n  background-color: #667eea !important;\n}\n<\/style>\n\n<!-- =========================== JavaScript \u884c\u70ba =========================== -->\n\n<script>\n(function() {\n  'use strict';\n\n  \/\/ \u6e2c\u9a57\u6578\u64da\n  const quizData = {\n    questions: [\n      {\n        id: 1,\n        category: 'human-nature',\n        text: '\u7576\u6709\u4eba\u5c0d\u4f60\u7279\u5225\u597d\u6642\uff0c\u4f60\u7684\u7b2c\u4e00\u53cd\u61c9\u662f\uff1a',\n        options: [\n          { text: '\u611f\u5230\u6eab\u6696\uff0c\u76f8\u4fe1\u5c0d\u65b9\u7684\u5584\u610f', score: 1 },\n          { text: '\u9ad8\u8208\u4f46\u6703\u89c0\u5bdf\u5c0d\u65b9\u662f\u5426\u6709\u6240\u6c42', score: 2 },\n          { text: '\u8b66\u89ba\u5c0d\u65b9\u53ef\u80fd\u6709\u5176\u4ed6\u76ee\u7684', score: 3 }\n        ]\n      },\n      {\n        id: 2,\n        category: 'human-nature',\n        text: '\u4f60\u8a8d\u70ba\u5927\u591a\u6578\u4eba\u5728\u5229\u76ca\u9762\u524d\u6703\uff1a',\n        options: [\n          { text: '\u5805\u6301\u539f\u5247\u548c\u9053\u5fb7', score: 1 },\n          { text: '\u5728\u539f\u5247\u548c\u5229\u76ca\u9593\u6399\u624e', score: 2 },\n          { text: '\u512a\u5148\u8003\u616e\u81ea\u8eab\u5229\u76ca', score: 3 }\n        ]\n      },\n      {\n        id: 3,\n        category: 'human-nature',\n        text: '\u5c0d\u65bc\u300c\u4eba\u6027\u672c\u5584\u300d\u9019\u500b\u8aaa\u6cd5\uff1a',\n        options: [\n          { text: '\u57fa\u672c\u540c\u610f\uff0c\u76f8\u4fe1\u4eba\u6027\u5584\u826f', score: 1 },\n          { text: '\u8a8d\u70ba\u4eba\u6027\u8907\u96dc\uff0c\u5584\u60e1\u4e26\u5b58', score: 2 },\n          { text: '\u6301\u61f7\u7591\u614b\u5ea6\uff0c\u4eba\u6027\u591a\u81ea\u79c1', score: 3 }\n        ]\n      },\n      {\n        id: 4,\n        category: 'human-nature',\n        text: '\u7576\u807d\u5230\u5225\u4eba\u7684\u627f\u8afe\u6642\uff1a',\n        options: [\n          { text: '\u901a\u5e38\u6703\u76f8\u4fe1\u4e26\u4f9d\u64da\u6b64\u505a\u8a08\u5283', score: 1 },\n          { text: '\u534a\u4fe1\u534a\u7591\uff0c\u6703\u7559\u4e9b\u5f8c\u8def', score: 2 },\n          { text: '\u57fa\u672c\u4e0d\u4fe1\uff0c\u4e3b\u8981\u9760\u81ea\u5df1', score: 3 }\n        ]\n      },\n      {\n        id: 5,\n        category: 'reality',\n        text: '\u4f60\u8a8d\u70ba\u5728\u8077\u5834\u4e0a\u6700\u91cd\u8981\u7684\u662f\uff1a',\n        options: [\n          { text: '\u5de5\u4f5c\u80fd\u529b\u548c\u5c08\u696d\u8868\u73fe', score: 1 },\n          { text: '\u80fd\u529b\u8207\u4eba\u969b\u95dc\u4fc2\u4e26\u91cd', score: 2 },\n          { text: '\u4eba\u969b\u95dc\u4fc2\u548c\u7ad9\u968a\u6bd4\u80fd\u529b\u91cd\u8981', score: 3 }\n        ]\n      },\n      {\n        id: 6,\n        category: 'reality',\n        text: '\u5c0d\u65bc\u300c\u52aa\u529b\u5c31\u6703\u6709\u56de\u5831\u300d\u9019\u53e5\u8a71\uff1a',\n        options: [\n          { text: '\u57fa\u672c\u8a8d\u540c\uff0c\u52aa\u529b\u901a\u5e38\u6709\u597d\u7d50\u679c', score: 1 },\n          { text: '\u6709\u4e00\u5b9a\u9053\u7406\uff0c\u4f46\u4e5f\u8981\u770b\u6642\u6a5f\u904b\u6c23', score: 2 },\n          { text: '\u592a\u7406\u60f3\u5316\uff0c\u73fe\u5be6\u66f4\u8907\u96dc', score: 3 }\n        ]\n      },\n      {\n        id: 7,\n        category: 'reality',\n        text: '\u4f60\u5982\u4f55\u770b\u5f85\u300c\u6f5b\u898f\u5247\u300d\uff1a',\n        options: [\n          { text: '\u4e0d\u61c9\u8a72\u5b58\u5728\uff0c\u8981\u9760\u5236\u5ea6\u6539\u8b8a', score: 1 },\n          { text: '\u5ba2\u89c0\u5b58\u5728\uff0c\u9700\u8981\u9069\u7576\u4e86\u89e3', score: 2 },\n          { text: '\u662f\u73fe\u5be6\u4e00\u90e8\u5206\uff0c\u5fc5\u9808\u5b78\u6703\u61c9\u5c0d', score: 3 }\n        ]\n      },\n      {\n        id: 8,\n        category: 'reality',\n        text: '\u9762\u5c0d\u4e0d\u516c\u5e73\u5f85\u9047\u6642\uff1a',\n        options: [\n          { text: '\u6703\u64da\u7406\u529b\u722d\uff0c\u5805\u6301\u516c\u6b63', score: 1 },\n          { text: '\u5148\u8a55\u4f30\u60c5\u6cc1\u518d\u6c7a\u5b9a\u662f\u5426\u722d\u53d6', score: 2 },\n          { text: '\u591a\u6578\u6642\u5019\u6703\u5fcd\u8010\uff0c\u53e6\u5c0b\u6a5f\u6703', score: 3 }\n        ]\n      },\n      {\n        id: 9,\n        category: 'strategy',\n        text: '\u5728\u8868\u9054\u4e0d\u540c\u610f\u898b\u6642\uff1a',\n        options: [\n          { text: '\u76f4\u63a5\u660e\u78ba\u5730\u8868\u9054\u81ea\u5df1\u7684\u770b\u6cd5', score: 1 },\n          { text: '\u59d4\u5a49\u8868\u9054\uff0c\u7d66\u5c0d\u65b9\u7559\u9762\u5b50', score: 2 },\n          { text: '\u901a\u5e38\u907f\u514d\u6b63\u9762\u885d\u7a81\uff0c\u79c1\u4e0b\u6e9d\u901a', score: 3 }\n        ]\n      },\n      {\n        id: 10,\n        category: 'strategy',\n        text: '\u5c0d\u65bc\u8fa6\u516c\u5ba4\u516b\u5366\uff1a',\n        options: [\n          { text: '\u4e0d\u53c3\u8207\uff0c\u8a8d\u70ba\u6d6a\u8cbb\u6642\u9593', score: 1 },\n          { text: '\u6703\u807d\u4f46\u4e0d\u50b3\u64ad', score: 2 },\n          { text: '\u8a8d\u70ba\u662f\u4e86\u89e3\u60c5\u6cc1\u7684\u91cd\u8981\u6e20\u9053', score: 3 }\n        ]\n      },\n      {\n        id: 11,\n        category: 'strategy',\n        text: '\u7576\u88ab\u8981\u6c42\u505a\u8d85\u51fa\u8077\u8cac\u7684\u4e8b\u6642\uff1a',\n        options: [\n          { text: '\u5982\u679c\u5408\u7406\u5c31\u6703\u5e6b\u5fd9', score: 1 },\n          { text: '\u770b\u60c5\u6cc1\u548c\u5c0d\u8c61\u6c7a\u5b9a', score: 2 },\n          { text: '\u901a\u5e38\u6703\u63a8\u8fad\uff0c\u4fdd\u8b77\u81ea\u5df1\u754c\u9650', score: 3 }\n        ]\n      },\n      {\n        id: 12,\n        category: 'strategy',\n        text: '\u4f60\u5c0d\u300c\u5403\u8667\u662f\u798f\u300d\u7684\u770b\u6cd5\uff1a',\n        options: [\n          { text: '\u5f88\u6709\u9053\u7406\uff0c\u5403\u8667\u80fd\u63db\u4f86\u9577\u9060\u5229\u76ca', score: 1 },\n          { text: '\u6709\u6642\u5c0d\u6709\u6642\u932f\uff0c\u8981\u770b\u5177\u9ad4\u60c5\u6cc1', score: 2 },\n          { text: '\u592a\u7406\u60f3\u5316\uff0c\u73fe\u5be6\u4e2d\u8981\u4fdd\u8b77\u81ea\u5df1', score: 3 }\n        ]\n      },\n      {\n        id: 13,\n        category: 'protection',\n        text: '\u5728\u7c3d\u7f72\u91cd\u8981\u5408\u7d04\u524d\uff1a',\n        options: [\n          { text: '\u4fe1\u4efb\u5c0d\u65b9\uff0c\u91cd\u9ede\u770b\u5927\u65b9\u5411', score: 1 },\n          { text: '\u6703\u4ed4\u7d30\u95b1\u8b80\u4e3b\u8981\u689d\u6b3e', score: 2 },\n          { text: '\u9010\u5b57\u4ed4\u7d30\u6aa2\u67e5\uff0c\u5fc5\u8981\u6642\u8acb\u5f8b\u5e2b', score: 3 }\n        ]\n      },\n      {\n        id: 14,\n        category: 'protection',\n        text: '\u5c0d\u65bc\u5225\u4eba\u7684\u79d8\u5bc6\uff1a',\n        options: [\n          { text: '\u6703\u5b8c\u5168\u4fdd\u5bc6\uff0c\u7d55\u4e0d\u5916\u6d29', score: 1 },\n          { text: '\u539f\u5247\u4e0a\u4fdd\u5bc6\uff0c\u4f46\u8996\u60c5\u6cc1\u800c\u5b9a', score: 2 },\n          { text: '\u6703\u4fdd\u5bc6\uff0c\u4f46\u5fc5\u8981\u6642\u53ef\u80fd\u5229\u7528', score: 3 }\n        ]\n      },\n      {\n        id: 15,\n        category: 'protection',\n        text: '\u7576\u6709\u4eba\u8acb\u4f60\u5e6b\u5fd9\u505a\u53ef\u80fd\u6709\u98a8\u96aa\u7684\u4e8b\uff1a',\n        options: [\n          { text: '\u5982\u679c\u662f\u670b\u53cb\u5c31\u6703\u5e6b\u5fd9', score: 1 },\n          { text: '\u6703\u8a55\u4f30\u98a8\u96aa\u548c\u95dc\u4fc2\u518d\u6c7a\u5b9a', score: 2 },\n          { text: '\u901a\u5e38\u6703\u62d2\u7d55\uff0c\u4e0d\u9858\u627f\u64d4\u98a8\u96aa', score: 3 }\n        ]\n      }\n    ]\n  };\n\n  \/\/ \u4e3b\u63a7\u5236\u5668\u985e\n  class WisdomQuiz {\n    constructor() {\n      this.currentQuestion = 0;\n      this.answers = [];\n      \n      this.cacheDOM();\n      this.bindEvents();\n    }\n\n    cacheDOM() {\n      this.introSection = document.getElementById('quizintro9');\n      this.quizSection = document.getElementById('quizmain9');\n      this.resultSection = document.getElementById('quizresult9');\n      \n      \/\/ \u6e2c\u9a57\u9801\u9762\u5143\u7d20\n      this.progressText = document.querySelector('[data-progress-text]');\n      this.progressBar = document.querySelector('[data-progress-bar]');\n      this.questionText = document.querySelector('[data-question-text]');\n      this.optionsContainer = document.querySelector('[data-options-container]');\n      this.prevBtn = document.querySelector('[data-action=\"prev-question\"]');\n      \n      \/\/ \u7d50\u679c\u9801\u9762\u5143\u7d20\n      this.totalScore = document.querySelector('[data-total-score]');\n      this.resultTitle = document.querySelector('[data-result-title]');\n      this.resultDescription = document.querySelector('[data-result-description]');\n      this.detailedAnalysis = document.querySelector('[data-detailed-analysis]');\n      this.personalizedAdvice = document.querySelector('[data-personalized-advice]');\n    }\n\n    bindEvents() {\n      \/\/ \u4f7f\u7528\u4e8b\u4ef6\u59d4\u6258\u8655\u7406\u6309\u9215\u9ede\u64ca\n      document.addEventListener('click', this.handleClick.bind(this));\n    }\n\n    handleClick(e) {\n      const action = e.target.closest('[data-action]')?.dataset.action;\n      \n      if (!action) return;\n\n      switch (action) {\n        case 'start-quiz':\n          this.startQuiz();\n          break;\n        case 'prev-question':\n          this.goToPrevQuestion();\n          break;\n        case 'restart-quiz':\n          this.restartQuiz();\n          break;\n      }\n    }\n\n    startQuiz() {\n      this.showSection('quiz9');\n      this.renderQuestion();\n      this.scrollToTop();\n    }\n\n    renderQuestion() {\n      const question = quizData.questions[this.currentQuestion];\n      \n      \/\/ \u66f4\u65b0\u9032\u5ea6\n      this.updateProgress();\n      \n      \/\/ \u66f4\u65b0\u984c\u76ee\n      this.questionText.textContent = question.text;\n      \n      \/\/ \u6e32\u67d3\u9078\u9805\u5361\u7247\n      this.optionsContainer.innerHTML = '';\n      question.options.forEach((option, index) => {\n        const optionCard = document.createElement('div');\n        optionCard.className = 'card option-card';\n        optionCard.dataset.optionIndex = index;\n        optionCard.innerHTML = `\n          <div class=\"card-body p-3 d-flex align-items-center\">\n            <div class=\"option-indicator me-3\">\n              <i class=\"bi bi-check d-none\"><\/i>\n              <span class=\"option-number\">${String.fromCharCode(65 + index)}<\/span>\n            <\/div>\n            <div class=\"option-text flex-grow-1\">\n              ${option.text}\n            <\/div>\n          <\/div>\n        `;\n        \n        optionCard.addEventListener('click', () => this.selectOption(index));\n        this.optionsContainer.appendChild(optionCard);\n      });\n\n      \/\/ \u66f4\u65b0\u4e0a\u4e00\u984c\u6309\u9215\n      if (this.currentQuestion > 0) {\n        this.prevBtn.classList.remove('d-none');\n      } else {\n        this.prevBtn.classList.add('d-none');\n      }\n\n      \/\/ \u5982\u679c\u6709\u7b54\u6848\uff0c\u9810\u9078\n      if (this.answers[this.currentQuestion] !== undefined) {\n        this.highlightOption(this.answers[this.currentQuestion]);\n      }\n    }\n\n    selectOption(optionIndex) {\n      this.answers[this.currentQuestion] = optionIndex;\n      this.highlightOption(optionIndex);\n      \n      \/\/ \u5ef6\u9072\u9032\u5165\u4e0b\u4e00\u984c\n      setTimeout(() => {\n        this.nextQuestion();\n      }, 300);\n    }\n\n    highlightOption(selectedIndex) {\n      const options = this.optionsContainer.querySelectorAll('.option-card');\n      options.forEach((card, index) => {\n        const indicator = card.querySelector('.option-indicator');\n        const checkIcon = indicator.querySelector('.bi-check');\n        const numberSpan = indicator.querySelector('.option-number');\n        \n        if (index === selectedIndex) {\n          card.classList.add('selected');\n          checkIcon.classList.remove('d-none');\n          numberSpan.classList.add('d-none');\n        } else {\n          card.classList.remove('selected');\n          checkIcon.classList.add('d-none');\n          numberSpan.classList.remove('d-none');\n        }\n      });\n    }\n\n    nextQuestion() {\n      if (this.currentQuestion < quizData.questions.length - 1) {\n        this.currentQuestion++;\n        this.renderQuestion();\n      } else {\n        this.showResults();\n      }\n    }\n\n    goToPrevQuestion() {\n      if (this.currentQuestion > 0) {\n        this.currentQuestion--;\n        this.renderQuestion();\n      }\n    }\n\n    updateProgress() {\n      const progress = ((this.currentQuestion + 1) \/ quizData.questions.length) * 100;\n      this.progressBar.style.width = `${progress}%`;\n      this.progressText.textContent = `\u554f\u984c ${this.currentQuestion + 1} \/ ${quizData.questions.length}`;\n    }\n\n    calculateResults() {\n      let totalScore = 0;\n      const categoryScores = {\n        'human-nature': 0,\n        'reality': 0,\n        'strategy': 0,\n        'protection': 0\n      };\n      const categoryCounts = {\n        'human-nature': 0,\n        'reality': 0,\n        'strategy': 0,\n        'protection': 0\n      };\n\n      this.answers.forEach((answerIndex, questionIndex) => {\n        const question = quizData.questions[questionIndex];\n        const score = question.options[answerIndex].score;\n        \n        totalScore += score;\n        categoryScores[question.category] += score;\n        categoryCounts[question.category]++;\n      });\n\n      \/\/ \u8a08\u7b97\u5404\u7dad\u5ea6\u5e73\u5747\u5206\n      Object.keys(categoryScores).forEach(category => {\n        categoryScores[category] = categoryScores[category] \/ categoryCounts[category];\n      });\n\n      return { totalScore, categoryScores };\n    }\n\n    getResultLevel(score) {\n      if (score >= 37) {\n        return {\n          title: '\u9ad8\u5ea6\u7cbe\u660e\u4e16\u6545',\n          description: '\u60a8\u5c0d\u4eba\u6027\u548c\u73fe\u5be6\u6709\u6df1\u523b\u8a8d\u77e5\uff0c\u8655\u4e16\u8001\u7df4\uff0c\u81ea\u6211\u4fdd\u8b77\u610f\u8b58\u5f37\u3002\u80fd\u5920\u5728\u8907\u96dc\u74b0\u5883\u4e2d\u904a\u5203\u6709\u9918\uff0c\u4f46\u8981\u6ce8\u610f\u4e0d\u8981\u904e\u65bccynical\uff0c\u4fdd\u6301\u4e00\u4e9b\u4eba\u60c5\u5473\u548c\u4fe1\u4efb\u3002',\n          color: '#dc3545'\n        };\n      } else if (score >= 28) {\n        return {\n          title: '\u4e2d\u7b49\u7cbe\u660e\u4e16\u6545',\n          description: '\u60a8\u5177\u5099\u4e00\u5b9a\u7684\u4e16\u6545\u667a\u6167\uff0c\u65e2\u4e0d\u6703\u592a\u5929\u771f\u4e5f\u4e0d\u6703\u904e\u5ea6\u9632\u5099\u3002\u80fd\u5920\u5728\u7406\u60f3\u8207\u73fe\u5be6\u9593\u627e\u5230\u5e73\u8861\uff0c\u9019\u662f\u5f88\u597d\u7684\u72c0\u614b\u3002\u53ef\u4ee5\u6839\u64da\u7d93\u9a57\u7e7c\u7e8c\u8abf\u6574\u3002',\n          color: '#fd7e14'\n        };\n      } else if (score >= 19) {\n        return {\n          title: '\u8f15\u5ea6\u7cbe\u660e\u4e16\u6545',\n          description: '\u60a8\u5c0d\u4e16\u4e8b\u6709\u57fa\u672c\u8a8d\u77e5\uff0c\u4f46\u4ecd\u4fdd\u6301\u8f03\u591a\u5584\u610f\u548c\u4fe1\u4efb\u3002\u5728\u67d0\u4e9b\u8907\u96dc\u60c5\u6cc1\u4e0b\u53ef\u80fd\u9700\u8981\u66f4\u52a0\u8b39\u614e\uff0c\u5b78\u6703\u9069\u5ea6\u4fdd\u8b77\u81ea\u5df1\u3002',\n          color: '#198754'\n        };\n      } else {\n        return {\n          title: '\u55ae\u7d14\u76f4\u7387',\n          description: '\u60a8\u76f8\u5c0d\u55ae\u7d14\uff0c\u5c0d\u4eba\u6027\u6301\u6a02\u89c0\u614b\u5ea6\uff0c\u8655\u4e8b\u8f03\u70ba\u76f4\u63a5\u3002\u9019\u7a2e\u7279\u8cea\u5f88\u73cd\u8cb4\uff0c\u4f46\u5728\u8907\u96dc\u74b0\u5883\u4e2d\u8981\u5b78\u6703\u9069\u7576\u7684\u81ea\u6211\u4fdd\u8b77\uff0c\u589e\u52a0\u5c0d\u73fe\u5be6\u7684\u4e86\u89e3\u3002',\n          color: '#0d6efd'\n        };\n      }\n    }\n\n    showResults() {\n      const results = this.calculateResults();\n      const resultLevel = this.getResultLevel(results.totalScore);\n      \n      this.showSection('result9');\n      \n      \/\/ \u986f\u793a\u7e3d\u5206\u548c\u63cf\u8ff0\n      this.totalScore.textContent = results.totalScore;\n      this.resultTitle.textContent = resultLevel.title;\n      this.resultDescription.textContent = resultLevel.description;\n      \n      \/\/ \u5275\u5efa\u5f97\u5206\u5206\u4f48\u5716\n      this.createScoreDistribution(results.totalScore);\n      \n      \/\/ \u751f\u6210\u500b\u6027\u5316\u5efa\u8b70\n      this.generatePersonalizedAdvice(results);\n      \n      \/\/ \u751f\u6210\u8a73\u7d30\u5206\u6790\n      this.generateDetailedAnalysis(results);\n      \n      this.scrollToTop();\n    }\n\n    createScoreDistribution(userScore) {\n      const container = document.getElementById('scoreDistribution');\n      \n      const ranges = [\n        { name: '\u55ae\u7d14\u76f4\u7387', min: 15, max: 18, color: '#0d6efd' },\n        { name: '\u8f15\u5ea6\u7cbe\u660e\u4e16\u6545', min: 19, max: 27, color: '#198754' },\n        { name: '\u4e2d\u7b49\u7cbe\u660e\u4e16\u6545', min: 28, max: 36, color: '#fd7e14' },\n        { name: '\u9ad8\u5ea6\u7cbe\u660e\u4e16\u6545', min: 37, max: 45, color: '#dc3545' }\n      ];\n\n      const totalRange = 30; \/\/ 45 - 15 = 30\n      \n      \/\/ \u6e05\u7a7a\u5bb9\u5668\n      container.innerHTML = '';\n      \n      \/\/ \u5275\u5efa\u67f1\u72c0\u5716\u5bb9\u5668\n      const scoreBarContainer = document.createElement('div');\n      scoreBarContainer.style.position = 'relative';\n      scoreBarContainer.style.marginBottom = '25px';\n      \n      const scoreBar = document.createElement('div');\n      scoreBar.className = 'score-bar';\n      \n      \/\/ \u5275\u5efa\u5404\u500b\u5340\u9593\n      ranges.forEach(range => {\n        const width = ((range.max - range.min + 1) \/ totalRange) * 100;\n        const section = document.createElement('div');\n        section.className = 'score-section';\n        section.style.backgroundColor = range.color;\n        section.style.width = `${width}%`;\n        section.textContent = range.name;\n        section.title = `${range.name}: ${range.min}-${range.max}\u5206`;\n        scoreBar.appendChild(section);\n      });\n      \n      scoreBarContainer.appendChild(scoreBar);\n\n      \/\/ \u6dfb\u52a0\u7528\u6236\u4f4d\u7f6e\u6a19\u8a18\n      const userPosition = Math.max(0, Math.min(100, ((userScore - 15) \/ totalRange) * 100));\n      const marker = document.createElement('div');\n      marker.className = 'user-marker';\n      marker.style.left = `${userPosition}%`;\n      marker.title = `\u60a8\u7684\u5f97\u5206: ${userScore}\u5206`;\n      \n      \/\/ \u6dfb\u52a0\u6a19\u8a18\u6587\u5b57\n      const markerLabel = document.createElement('div');\n      markerLabel.style.position = 'absolute';\n      markerLabel.style.top = '-35px';\n      markerLabel.style.left = '50%';\n      markerLabel.style.transform = 'translateX(-50%)';\n      markerLabel.style.fontSize = '12px';\n      markerLabel.style.fontWeight = 'bold';\n      markerLabel.style.color = '#dc3545';\n      markerLabel.style.whiteSpace = 'nowrap';\n      markerLabel.textContent = `${userScore}\u5206`;\n      marker.appendChild(markerLabel);\n      \n      scoreBarContainer.appendChild(marker);\n      container.appendChild(scoreBarContainer);\n\n      \/\/ \u6dfb\u52a0\u5716\u4f8b\n      const legend = document.createElement('div');\n      legend.className = 'score-legend';\n      legend.innerHTML = ranges.map(range => `\n        <div class=\"legend-item\">\n          <div class=\"legend-color\" style=\"background: ${range.color};\"><\/div>\n          <span>${range.name} (${range.min}-${range.max}\u5206)<\/span>\n        <\/div>\n      `).join('');\n      \n      container.appendChild(legend);\n    }\n\n    generatePersonalizedAdvice(results) {\n      const { totalScore, categoryScores } = results;\n      \n      \/\/ \u627e\u51fa\u6700\u9ad8\u548c\u6700\u4f4e\u7684\u7dad\u5ea6\n      const sortedCategories = Object.entries(categoryScores)\n        .sort(([,a], [,b]) => b - a);\n      \n      const strongest = sortedCategories[0];\n      const weakest = sortedCategories[sortedCategories.length - 1];\n      \n      const categoryNames = {\n        'human-nature': '\u4eba\u6027\u8a8d\u77e5',\n        'reality': '\u73fe\u5be6\u7406\u89e3',\n        'strategy': '\u8655\u4e16\u7b56\u7565',\n        'protection': '\u81ea\u6211\u4fdd\u8b77'\n      };\n\n      let advice = '';\n      \n      \/\/ \u6839\u64da\u7e3d\u5206\u7d66\u51fa\u4e3b\u8981\u5efa\u8b70\n      if (totalScore >= 37) {\n        advice = `\n          <div class=\"alert alert-info\">\n            <h6 class=\"alert-heading\"><i class=\"bi bi-info-circle me-2\"><\/i>\u4fdd\u6301\u5e73\u8861\u7684\u5efa\u8b70<\/h6>\n            <p class=\"mb-0\">\u60a8\u7684\u4e16\u6545\u7a0b\u5ea6\u5f88\u9ad8\uff0c\u9019\u5728\u8907\u96dc\u74b0\u5883\u4e2d\u662f\u512a\u52e2\u3002\u5efa\u8b70\u9069\u7576\u4fdd\u6301\u4e00\u4e9b\u7d14\u771f\u548c\u4fe1\u4efb\uff0c\u907f\u514d\u904e\u5ea6\u61f7\u7591\u5f71\u97ff\u4eba\u969b\u95dc\u4fc2\u7684\u6eab\u6696\u3002<\/p>\n          <\/div>\n        `;\n      } else if (totalScore >= 28) {\n        advice = `\n          <div class=\"alert alert-success\">\n            <h6 class=\"alert-heading\"><i class=\"bi bi-check-circle me-2\"><\/i>\u7406\u60f3\u7684\u5e73\u8861\u72c0\u614b<\/h6>\n            <p class=\"mb-0\">\u60a8\u8655\u65bc\u5f88\u597d\u7684\u5e73\u8861\u72c0\u614b\uff01\u65e2\u6709\u8db3\u5920\u7684\u4e16\u6545\u667a\u6167\u4fdd\u8b77\u81ea\u5df1\uff0c\u53c8\u4fdd\u6301\u4e86\u9069\u5ea6\u7684\u4fe1\u4efb\u548c\u5584\u610f\u3002\u7e7c\u7e8c\u4fdd\u6301\u9019\u7a2e\u5e73\u8861\u3002<\/p>\n          <\/div>\n        `;\n      } else if (totalScore >= 19) {\n        advice = `\n          <div class=\"alert alert-warning\">\n            <h6 class=\"alert-heading\"><i class=\"bi bi-exclamation-triangle me-2\"><\/i>\u589e\u5f37\u4fdd\u8b77\u610f\u8b58<\/h6>\n            <p class=\"mb-0\">\u60a8\u7684\u5584\u610f\u5f88\u73cd\u8cb4\uff0c\u4f46\u5728\u8907\u96dc\u74b0\u5883\u4e2d\u9700\u8981\u63d0\u9ad8\u8b66\u89ba\u3002\u5efa\u8b70\u591a\u89c0\u5bdf\u3001\u591a\u601d\u8003\uff0c\u5b78\u6703\u5728\u4fdd\u6301\u5584\u826f\u7684\u540c\u6642\u4fdd\u8b77\u81ea\u5df1\u3002<\/p>\n          <\/div>\n        `;\n      } else {\n        advice = `\n          <div class=\"alert alert-primary\">\n            <h6 class=\"alert-heading\"><i class=\"bi bi-heart me-2\"><\/i>\u4fdd\u6301\u7d14\u771f\uff0c\u589e\u52a0\u667a\u6167<\/h6>\n            <p class=\"mb-0\">\u60a8\u7684\u7d14\u771f\u662f\u5bf6\u8cb4\u54c1\u8cea\uff01\u5efa\u8b70\u5728\u4fdd\u6301\u9019\u7a2e\u7f8e\u597d\u7684\u540c\u6642\uff0c\u591a\u7559\u610f\u5468\u570d\u74b0\u5883\uff0c\u589e\u52a0\u4e00\u4e9b\u81ea\u6211\u4fdd\u8b77\u7684\u610f\u8b58\u3002<\/p>\n          <\/div>\n        `;\n      }\n\n      \/\/ \u6dfb\u52a0\u91dd\u5c0d\u6027\u5efa\u8b70\n      advice += `\n        <div class=\"row mt-3\">\n          <div class=\"col-md-6\">\n            <div class=\"card bg-light border-0\">\n              <div class=\"card-body p-3\">\n                <h6 class=\"text-success\"><i class=\"bi bi-arrow-up-circle me-2\"><\/i>\u60a8\u7684\u512a\u52e2<\/h6>\n                <p class=\"small mb-0\">${categoryNames[strongest[0]]}\u8868\u73fe\u7a81\u51fa\uff0c\u9019\u662f\u60a8\u8655\u4e16\u7684\u5f37\u9805\uff0c\u53ef\u4ee5\u7e7c\u7e8c\u767c\u63ee\u3002<\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n          <div class=\"col-md-6\">\n            <div class=\"card bg-light border-0\">\n              <div class=\"card-body p-3\">\n                <h6 class=\"text-info\"><i class=\"bi bi-arrow-up-circle me-2\"><\/i>\u6210\u9577\u7a7a\u9593<\/h6>\n                <p class=\"small mb-0\">\u53ef\u4ee5\u52a0\u5f37${categoryNames[weakest[0]]}\u65b9\u9762\u7684\u8a8d\u77e5\uff0c\u8b93\u81ea\u5df1\u66f4\u5168\u9762\u3002<\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      `;\n\n      this.personalizedAdvice.innerHTML = advice;\n    }\n\n    generateDetailedAnalysis(results) {\n      const categoryLabels = {\n        'human-nature': '\u4eba\u6027\u8a8d\u77e5',\n        'reality': '\u73fe\u5be6\u7406\u89e3',\n        'strategy': '\u8655\u4e16\u7b56\u7565',\n        'protection': '\u81ea\u6211\u4fdd\u8b77'\n      };\n\n      const categoryDescriptions = {\n        'human-nature': '\u60a8\u5c0d\u4eba\u6027\u8907\u96dc\u9762\u7684\u7406\u89e3\u7a0b\u5ea6',\n        'reality': '\u60a8\u5c0d\u793e\u6703\u73fe\u5be6\u904b\u4f5c\u7684\u8a8d\u77e5\u6c34\u5e73',\n        'strategy': '\u60a8\u5728\u4eba\u969b\u4ea4\u5f80\u4e2d\u7684\u7b56\u7565\u904b\u7528',\n        'protection': '\u60a8\u7684\u98a8\u96aa\u610f\u8b58\u548c\u81ea\u6211\u4fdd\u8b77\u80fd\u529b'\n      };\n\n      let analysisHTML = '<div class=\"row g-3\">';\n      \n      Object.entries(results.categoryScores).forEach(([category, score]) => {\n        const percentage = Math.round((score \/ 3) * 100);\n        const level = score >= 2.5 ? '\u9ad8' : score >= 2 ? '\u4e2d' : score >= 1.5 ? '\u4e2d\u4f4e' : '\u4f4e';\n        \n        analysisHTML += `\n          <div class=\"col-md-6\">\n            <div class=\"card h-100 border-0 bg-light\">\n              <div class=\"card-body p-3\">\n                <h6 class=\"card-title text-primary\">${categoryLabels[category]}<\/h6>\n                <p class=\"card-text small text-muted mb-2\">${categoryDescriptions[category]}<\/p>\n                <div class=\"d-flex align-items-center\">\n                  <div class=\"progress flex-grow-1 me-3\" style=\"height: 8px;\">\n                    <div class=\"progress-bar\" style=\"width: ${percentage}%\"><\/div>\n                  <\/div>\n                  <span class=\"fw-bold text-primary\">${percentage}%<\/span>\n                <\/div>\n                <small class=\"text-muted\">\u7a0b\u5ea6\uff1a${level}<\/small>\n              <\/div>\n            <\/div>\n          <\/div>\n        `;\n      });\n      \n      analysisHTML += '<\/div>';\n      this.detailedAnalysis.innerHTML = analysisHTML;\n    }\n\n    showSection(sectionName) {\n      \/\/ \u96b1\u85cf\u6240\u6709\u9801\u9762\n      document.querySelectorAll('[data-page]').forEach(section => {\n        section.classList.add('d-none');\n      });\n      \n      \/\/ \u986f\u793a\u6307\u5b9a\u9801\u9762\n      document.querySelector(`[data-page=\"${sectionName}\"]`).classList.remove('d-none');\n    }\n\n    restartQuiz() {\n      this.currentQuestion = 0;\n      this.answers = [];\n      \n      this.showSection('intro9');\n      this.scrollToTop();\n    }\n\n    scrollToTop() {\n      \/\/ \u5e73\u6ed1\u6efe\u52d5\u5230\u9802\u90e8\n      const targetElement = document.querySelector('[data-page]:not(.d-none) h1, [data-page]:not(.d-none) h2');\n      if (targetElement) {\n        targetElement.scrollIntoView({ \n          behavior: 'smooth', \n          block: 'start',\n          inline: 'nearest'\n        });\n      }\n    }\n  }\n\n  \/\/ \u521d\u59cb\u5316\u6e2c\u9a57\n  const quiz = new WisdomQuiz();\n\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u4e16\u6545\uff0c\u610f\u5473\u7740\u5904\u4e16\u8001\u7ec3\u3001\u5706\u6ed1\u3002\u5b9e\u9645\u4e0a\uff0c\u4ece\u67d0\u79cd\u89d2\u5ea6\u770b\u6765\uff0c\u4e16\u6545\u4e5f\u662f\u4e00\u4e2a\u4eba\u7cbe\u660e\u80fd\u5e72\u7684\u6807\u5fd7\u3002\u4f60\u662f\u4e00\u4e2a\u4e16\u6545\u7684\u4eba\u5417\uff1f\u4e0b\u9762\u7684\u6d4b\u8bd5\u53ef\u4ee5\u5e2e\u4f60\u5224\u5b9a\u81ea\u5df1\u7684\u4e2a\u6027\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":"disabled","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,175],"tags":[],"class_list":["post-2776","post","type-post","status-publish","format-standard","hentry","category-personality","category-relationships"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2776","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=2776"}],"version-history":[{"count":3,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2776\/revisions"}],"predecessor-version":[{"id":10214,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2776\/revisions\/10214"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2776"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2776"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2776"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}