{"id":3146,"date":"2023-10-11T18:12:18","date_gmt":"2023-10-11T10:12:18","guid":{"rendered":"https:\/\/bookmark.tw\/?p=3146"},"modified":"2025-08-14T02:07:55","modified_gmt":"2025-08-13T18:07:55","slug":"biggest-enemy-is-oneself","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/biggest-enemy-is-oneself","title":{"rendered":"\u81ea\u6211\u5229\u76ca\u610f\u8b58\u6e2c\u8a66\uff1a\u4f60\u662f\u4f60\u81ea\u5df1\u6700\u5927\u7684\u6575\u4eba\u55ce"},"content":{"rendered":"<!-- \u5f15\u5165 Chart.js -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n\n<!-- \u6e2c\u9a57\u5bb9\u5668 -->\n<div id=\"self-test-container\" class=\"self-test-container\">\n  <!-- \u5f15\u5c0e\u9801 -->\n  <div id=\"self-test-intro\" class=\"self-test-page active\" role=\"main\">\n    <header class=\"self-test-header\">\n      <h2 class=\"self-test-title\">\u4f60\u662f\u4f60\u81ea\u5df1\u6700\u5927\u7684\u654c\u4eba\u5417\uff1f<\/h2>\n      <p class=\"self-test-subtitle\">\u53d1\u73b0\u4f60\u7684\u81ea\u6211\u5229\u76ca\u610f\u8bc6<\/p>\n    <\/header>\n    \n    <main class=\"self-test-intro-content\">\n      <section class=\"self-test-intro-section\">\n        <div class=\"self-test-feature-grid\">\n          <div class=\"self-test-feature\">\n            <div class=\"self-test-feature-icon\">\ud83e\udd14<\/div>\n            <h3>\u81ea\u6211\u8ba4\u8bc6<\/h3>\n            <p>\u4e86\u89e3\u81ea\u5df1\u7684\u884c\u4e3a\u6a21\u5f0f<\/p>\n          <\/div>\n          <div class=\"self-test-feature\">\n            <div class=\"self-test-feature-icon\">\u2696\ufe0f<\/div>\n            <h3>\u5229\u76ca\u5e73\u8861<\/h3>\n            <p>\u627e\u5230\u4e2a\u4eba\u4e0e\u4ed6\u4eba\u7684\u5e73\u8861\u70b9<\/p>\n          <\/div>\n          <div class=\"self-test-feature\">\n            <div class=\"self-test-feature-icon\">\ud83d\udcaa<\/div>\n            <h3>\u81ea\u6211\u6210\u957f<\/h3>\n            <p>\u5b66\u4f1a\u4f18\u5148\u8003\u8651\u81ea\u5df1<\/p>\n          <\/div>\n        <\/div>\n        \n        <p class=\"self-test-guide-text\">\n          \u8fd9\u4e2a\u6d4b\u8bd5\u5c06\u544a\u8bc9\u4f60\uff0c\u4f60\u662f\u5426\u5728\u751f\u6d3b\u4e2d\u628a\u5f88\u591a\u6ca1\u6709\u5fc5\u8981\u7684\u4e8b\u60c5\u53d8\u6210\u56f0\u96be\uff0c\u56e0\u4e3a\u4f60\u5728\u4e0d\u81ea\u89c9\u5730\u548c\u81ea\u5df1\u7684\u5229\u76ca\u5bf9\u7740\u5e72\u3002\u8bf7\u4f60\u9009\u62e9\u7b26\u5408\u4f60\u60c5\u51b5\u7684\u9009\u9879\u3002\n        <\/p>\n        \n        <button id=\"self-start-quiz-btn\" class=\"self-test-start-btn\" data-action=\"start\">\u5f00\u59cb\u6d4b\u9a8c<\/button>\n      <\/section>\n    <\/main>\n  <\/div>\n\n  <!-- \u6e2c\u9a57\u9801 -->\n  <div id=\"self-test-quiz\" class=\"self-test-page\" role=\"main\">\n    <header class=\"self-test-quiz-header\">\n      <h2 class=\"self-test-page-title\">\u81ea\u6211\u5229\u76ca\u6d4b\u9a8c<\/h2>\n      <div class=\"self-test-progress-container\">\n        <div id=\"self-test-progress-bar\" class=\"self-test-progress-bar\">\n          <div id=\"self-test-progress-fill\" class=\"self-test-progress-fill\"><\/div>\n        <\/div>\n        <span id=\"self-test-progress-text\" class=\"self-test-progress-text\">\u95ee\u98981\/13<\/span>\n      <\/div>\n    <\/header>\n    \n    <main class=\"self-test-quiz-content\">\n      <h3 id=\"self-test-question\" class=\"self-test-question\"><\/h3>\n      \n      <div id=\"self-test-options\" class=\"self-test-options\">\n        <!-- \u9078\u9805\u5c07\u7531JavaScript\u52d5\u614b\u751f\u6210 -->\n      <\/div>\n      \n      <button id=\"self-prev-question-btn\" class=\"self-test-prev-btn\" data-action=\"prev\" style=\"display: none;\">\u4e0a\u4e00\u9898<\/button>\n    <\/main>\n  <\/div>\n\n  <!-- \u7d50\u679c\u9801 -->\n  <div id=\"self-test-result\" class=\"self-test-page\" role=\"main\">\n    <header class=\"self-test-result-header\">\n      <h2 class=\"self-test-page-title\">\u6d4b\u9a8c\u7ed3\u679c<\/h2>\n    <\/header>\n    \n    <main class=\"self-test-result-content\">\n      <div id=\"self-test-score-visualization\" class=\"self-test-score-visualization\">\n        <canvas id=\"self-test-score-chart\"><\/canvas>\n      <\/div>\n      \n      <div id=\"self-test-result-text\" class=\"self-test-result-text\">\n        <!-- \u7d50\u679c\u6587\u672c\u5c07\u7531JavaScript\u751f\u6210 -->\n      <\/div>\n      \n      <section class=\"self-test-analysis-section\">\n        <h3 class=\"self-test-analysis-title\">\u5fc3\u7406\u8bc4\u6790<\/h3>\n        <div class=\"self-test-analysis-content\">\n          <p>\u5b66\u4f1a\u7231\u81ea\u5df1\uff0c\u8fd9\u4e0d\u662f\u4e00\u79cd\u7f9e\u803b\uff0c\u800c\u662f\u4e00\u79cd\u5149\u8363\u3002\u5b83\u6e90\u4e8e\u5bf9\u751f\u547d\u672c\u8eab\u7684\u5d07\u656c\u548c\u73cd\u91cd\uff0c\u5b83\u53ef\u4ee5\u8ba9\u6211\u4eec\u7684\u751f\u547d\u66f4\u4e3a\u4e30\u6ee1\u548c\u5065\u5eb7\uff0c\u8ba9\u6211\u4eec\u7684\u7075\u9b42\u66f4\u4e3a\u81ea\u7531\u548c\u5f3a\u58ee\u3002<\/p>\n          <p>\u7231\u81ea\u5df1\uff0c\u8003\u8651\u81ea\u5df1\u7684\u5229\u76ca\u5e76\u4e0d\u662f\u7f6e\u4ed6\u4eba\u5229\u76ca\u4e8e\u4e0d\u987e\uff0c\u5b8c\u5168\u4ee5\u81ea\u6211\u4e3a\u4e2d\u5fc3\uff0c\u800c\u662f\u5c0a\u91cd\u81ea\u5df1\u7684\u9700\u6c42\u3002\u53ea\u6709\u7231\u81ea\u5df1\u624d\u80fd\u7231\u522b\u4eba\uff0c\u4e0d\u61c2\u5f97\u81ea\u7231\u7684\u4eba\uff0c\u5f80\u5f80\u547d\u592a\u8584\u3002<\/p>\n          <p>\u591a\u7ed9\u81ea\u5df1\u4e00\u4e9b\u65f6\u95f4\uff0c\u8ba9\u81ea\u5df1\u66f4\u52a0\u8f7b\u677e\uff1b\u591a\u7ed9\u81ea\u5df1\u4e00\u4e9b\u7167\u987e\uff0c\u8ba9\u81ea\u5df1\u66f4\u52a0\u5065\u5eb7\uff1b\u591a\u7ed9\u81ea\u5df1\u4e00\u4e9b\u5173\u7231\uff0c\u8ba9\u81ea\u5df1\u66f4\u52a0\u5feb\u4e50\uff01<\/p>\n        <\/div>\n      <\/section>\n      \n      <button id=\"self-restart-quiz-btn\" class=\"self-test-restart-btn\" data-action=\"restart\">\u91cd\u65b0\u6d4b\u9a8c<\/button>\n    <\/main>\n  <\/div>\n<\/div>\n\n<style>\n\/* CSS Variables *\/\n:root {\n  --self-primary-color: #7c3aed;\n  --self-secondary-color: #a855f7;\n  --self-accent-color: #ec4899;\n  --self-text-color: #111827;\n  --self-text-light: #6b7280;\n  --self-background: #ffffff;\n  --self-surface: #f9fafb;\n  --self-border: #e5e7eb;\n  --self-hover: #faf5ff;\n  --self-success: #10b981;\n  --self-warning: #f59e0b;\n  --self-danger: #ef4444;\n  --self-font-base: 16px;\n  --self-font-lg: 20px;\n  --self-font-xl: 24px;\n  --self-font-2xl: 32px;\n  --self-spacing-xs: 4px;\n  --self-spacing-sm: 8px;\n  --self-spacing-md: 16px;\n  --self-spacing-lg: 24px;\n  --self-spacing-xl: 32px;\n  --self-radius-sm: 8px;\n  --self-radius-md: 12px;\n  --self-radius-lg: 16px;\n  --self-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n  --self-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n  --self-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n}\n\n\/* Base Styles *\/\n.self-test-container {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans TC', sans-serif;\n  font-size: var(--self-font-base);\n  line-height: 1.6;\n  color: var(--self-text-color);\n  background-color: var(--self-background);\n  max-width: 100%;\n  margin: 0 auto;\n  padding: var(--self-spacing-md);\n  position: relative;\n}\n\n\/* Page Styles *\/\n.self-test-page {\n  display: none;\n  width: 100%;\n}\n\n.self-test-page.active {\n  display: block;\n}\n\n\/* Header Styles *\/\n.self-test-header {\n  text-align: center;\n  margin-bottom: var(--self-spacing-xl);\n}\n\n.self-test-title {\n  font-size: var(--self-font-2xl);\n  font-weight: 700;\n  color: var(--self-primary-color);\n  margin: 0 0 var(--self-spacing-sm) 0;\n}\n\n.self-test-subtitle {\n  font-size: var(--self-font-lg);\n  color: var(--self-text-light);\n  margin: 0;\n}\n\n\/* Intro Page Styles *\/\n.self-test-intro-content {\n  max-width: 768px;\n  margin: 0 auto;\n}\n\n.self-test-feature-grid {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  gap: var(--self-spacing-md);\n  margin: var(--self-spacing-xl) 0;\n  flex-wrap: nowrap;\n}\n\n.self-test-feature {\n  text-align: center;\n  padding: var(--self-spacing-md);\n  background: var(--self-surface);\n  border-radius: var(--self-radius-md);\n  transition: transform 0.3s ease, box-shadow 0.3s ease;\n  flex: 1;\n  min-width: 0;\n}\n\n.self-test-feature:hover {\n  transform: translateY(-4px);\n  box-shadow: var(--self-shadow-lg);\n}\n\n.self-test-feature-icon {\n  font-size: 42px;\n  margin-bottom: var(--self-spacing-sm);\n  height: 72px;\n  width: 72px;\n  background: linear-gradient(135deg, var(--self-primary-color), var(--self-secondary-color));\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0 auto var(--self-spacing-sm);\n  filter: drop-shadow(var(--self-shadow-md));\n}\n\n.self-test-feature h3 {\n  font-size: var(--self-font-lg);\n  font-weight: 600;\n  margin: 0 0 var(--self-spacing-xs) 0;\n}\n\n.self-test-feature p {\n  color: var(--self-text-light);\n  margin: 0;\n  font-size: 15px;\n}\n\n.self-test-guide-text {\n  text-align: left;\n  font-size: 18px;\n  line-height: 1.7;\n  color: var(--self-text-color);\n  margin: var(--self-spacing-lg) 0;\n  padding: var(--self-spacing-md);\n  background: #fef3c7;\n  border-radius: var(--self-radius-md);\n  border: 1px solid #fcd34d;\n}\n\n.self-test-start-btn {\n  font-size: var(--self-font-lg);\n  font-weight: 600;\n  color: white;\n  background: linear-gradient(135deg, var(--self-primary-color), var(--self-secondary-color));\n  border: none;\n  padding: var(--self-spacing-md) var(--self-spacing-xl);\n  border-radius: var(--self-radius-md);\n  cursor: pointer;\n  transition: all 0.3s ease;\n  box-shadow: var(--self-shadow-md);\n  width: 100%;\n  min-height: 48px;\n  margin-top: var(--self-spacing-lg);\n}\n\n.self-test-start-btn:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--self-shadow-lg);\n}\n\n\/* Quiz Page Styles *\/\n.self-test-quiz-header {\n  text-align: center;\n  margin-bottom: var(--self-spacing-lg);\n}\n\n.self-test-page-title {\n  font-size: var(--self-font-xl);\n  font-weight: 700;\n  color: var(--self-primary-color);\n  margin: 0 0 var(--self-spacing-lg) 0;\n}\n\n.self-test-progress-container {\n  margin: 0 auto;\n  max-width: 400px;\n}\n\n.self-test-progress-bar {\n  width: 100%;\n  height: 8px;\n  background-color: var(--self-border);\n  border-radius: 4px;\n  overflow: hidden;\n  margin-bottom: var(--self-spacing-sm);\n}\n\n.self-test-progress-fill {\n  height: 100%;\n  background: linear-gradient(90deg, var(--self-primary-color), var(--self-accent-color));\n  transition: width 0.5s ease;\n  width: 0%;\n}\n\n.self-test-progress-text {\n  display: block;\n  text-align: center;\n  color: var(--self-text-light);\n  font-size: 16px;\n}\n\n.self-test-question {\n  font-size: 22px;\n  font-weight: 700;\n  text-align: left;\n  margin: 0 0 var(--self-spacing-lg) 0;\n  max-width: 768px;\n  margin-left: auto;\n  margin-right: auto;\n  padding: 0 var(--self-spacing-md);\n  line-height: 1.6;\n}\n\n.self-test-options {\n  max-width: 768px;\n  margin: 0 auto;\n}\n\n.self-test-option {\n  display: block;\n  width: 100%;\n  text-align: left;\n  font-size: 18px;\n  font-weight: 500;\n  padding: var(--self-spacing-md);\n  margin: var(--self-spacing-md) 0;\n  background: var(--self-surface);\n  border: 2px solid var(--self-border);\n  border-radius: var(--self-radius-md);\n  cursor: pointer;\n  transition: all 0.3s ease;\n  color: var(--self-text-color);\n  min-height: 48px;\n  line-height: 1.5;\n}\n\n.self-test-option:hover {\n  border-color: var(--self-primary-color);\n  background: var(--self-hover);\n  transform: translateX(4px);\n  color: var(--self-text-color);\n}\n\n.self-test-option.selected {\n  background: var(--self-primary-color);\n  border-color: var(--self-primary-color);\n  color: white;\n}\n\n.self-test-prev-btn {\n  font-size: var(--self-font-base);\n  font-weight: 500;\n  color: var(--self-primary-color);\n  background: transparent;\n  border: 2px solid var(--self-primary-color);\n  padding: var(--self-spacing-sm) var(--self-spacing-md);\n  border-radius: var(--self-radius-sm);\n  cursor: pointer;\n  transition: all 0.3s ease;\n  margin: var(--self-spacing-lg) auto 0;\n  display: block;\n  min-height: 44px;\n}\n\n.self-test-prev-btn:hover {\n  background: var(--self-primary-color);\n  color: white;\n}\n\n\/* Result Page Styles *\/\n.self-test-result-header {\n  text-align: center;\n  margin-bottom: var(--self-spacing-xl);\n}\n\n.self-test-result-content {\n  max-width: 768px;\n  margin: 0 auto;\n}\n\n.self-test-score-visualization {\n  margin: var(--self-spacing-xl) auto;\n  position: relative;\n  width: 90%;\n  max-width: 600px;\n}\n\n#self-test-score-chart {\n  width: 100% !important;\n  height: 400px !important;\n}\n\n.self-test-result-text {\n  font-size: 18px;\n  line-height: 1.8;\n  text-align: left;\n  margin: var(--self-spacing-xl) 0;\n  padding: var(--self-spacing-lg);\n  background: var(--self-surface);\n  border-radius: var(--self-radius-md);\n  border: 1px solid var(--self-border);\n}\n\n\/* Analysis Section Styles *\/\n.self-test-analysis-section {\n  margin: var(--self-spacing-xl) 0;\n  padding: var(--self-spacing-lg);\n  background: var(--self-surface);\n  border-radius: var(--self-radius-md);\n  border: 1px solid var(--self-border);\n}\n\n.self-test-analysis-title {\n  font-size: var(--self-font-lg);\n  font-weight: 700;\n  color: var(--self-primary-color);\n  margin: 0 0 var(--self-spacing-md) 0;\n  text-align: center;\n}\n\n.self-test-analysis-content {\n  text-align: left;\n}\n\n.self-test-analysis-content p {\n  font-size: 17px;\n  line-height: 1.8;\n  margin: 0 0 var(--self-spacing-md) 0;\n  color: var(--self-text-color);\n}\n\n.self-test-analysis-content p:last-child {\n  margin-bottom: 0;\n}\n\n.self-test-restart-btn {\n  font-size: var(--self-font-lg);\n  font-weight: 600;\n  color: white;\n  background: linear-gradient(135deg, var(--self-primary-color), var(--self-secondary-color));\n  border: none;\n  padding: var(--self-spacing-md) var(--self-spacing-xl);\n  border-radius: var(--self-radius-md);\n  cursor: pointer;\n  transition: all 0.3s ease;\n  box-shadow: var(--self-shadow-md);\n  display: block;\n  margin: var(--self-spacing-xl) auto 0;\n  min-height: 48px;\n}\n\n.self-test-restart-btn:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--self-shadow-lg);\n}\n\n\/* Responsive Design *\/\n@media (max-width: 768px) {\n  .self-test-container {\n    padding: var(--self-spacing-sm);\n  }\n  \n  .self-test-title {\n    font-size: var(--self-font-xl);\n  }\n  \n  .self-test-subtitle {\n    font-size: var(--self-font-base);\n  }\n  \n  .self-test-feature-grid {\n    flex-direction: column;\n    gap: var(--self-spacing-md);\n  }\n  \n  .self-test-feature {\n    margin-bottom: var(--self-spacing-sm);\n  }\n  \n  .self-test-question {\n    font-size: 20px;\n  }\n  \n  .self-test-option {\n    font-size: 17px;\n  }\n  \n  .self-test-guide-text {\n    font-size: 17px;\n  }\n  \n  .self-test-result-text {\n    font-size: 17px;\n  }\n  \n  .self-test-analysis-content p {\n    font-size: 16px;\n  }\n}\n\n\/* Accessibility *\/\n@media (prefers-reduced-motion: reduce) {\n  .self-test-feature,\n  .self-test-option,\n  .self-test-start-btn,\n  .self-test-restart-btn,\n  .self-test-prev-btn {\n    transition: none;\n  }\n  \n  .self-test-progress-fill {\n    transition: none;\n  }\n}\n\n\/* Print Styles *\/\n@media print {\n  .self-test-start-btn,\n  .self-test-restart-btn,\n  .self-test-prev-btn {\n    display: none;\n  }\n}\n<\/style>\n\n<script>\n(function() {\n  'use strict';\n  \n  \/\/ Quiz Questions Data\n  const quizQuestions = [\n    {\n      id: 1,\n      question: \"\u7576\u6211\u9700\u8981\u5e6b\u52a9\u800c\u4e14\u80fd\u5920\u5f97\u5230\u5e6b\u52a9\u7684\u6642\u5019\uff1a\",\n      options: [\n        \"\u6211\u5f88\u9858\u610f\u5176\u4ed6\u4eba\u5e6b\u52a9\u6211\",\n        \"\u6211\u60f3\u81ea\u5df1\u61c9\u8a72\u8ca0\u8d77\u8cac\",\n        \"\u6211\u5e7e\u4e4e\u7e3d\u662f\u62d2\u7d55\u5e6b\u52a9\"\n      ]\n    },\n    {\n      id: 2,\n      question: \"\u7576\u6211\u53d6\u5f97\u6210\u529f\u7684\u6642\u5019\uff1a\",\n      options: [\n        \"\u6bcf\u6b21\u90fd\u662f\u767c\u81ea\u5167\u5fc3\u7684\u9ad8\u8208\",\n        \"\u6709\u4e00\u9ede\u9ad8\u8208\",\n        \"\u5176\u5be6\u4e0d\u662f\u5f88\u9ad8\u8208\"\n      ]\n    },\n    {\n      id: 3,\n      question: \"\u5728\u805a\u6703\u4e0a\uff1a\",\n      options: [\n        \"\u6211\u7e3d\u662f\u5f88\u5065\u8ac7\",\n        \"\u6211\u4e0d\u6bd4\u5225\u4eba\u8aaa\u8a71\u591a\",\n        \"\u6211\u7e3d\u662f\u5c6c\u65bc\u6c89\u9ed8\u5be1\u8a00\u7684\u4eba\"\n      ]\n    },\n    {\n      id: 4,\n      question: \"\u6211\u548c\u4ed6\u4eba\u722d\u5435\uff1a\",\n      options: [\n        \"\u5e7e\u4e4e\u6c92\u6709\",\n        \"\u7d93\u5e38\",\n        \"\u592a\u591a\"\n      ]\n    },\n    {\n      id: 5,\n      question: \"\u4f60\u5728\u4e00\u6b21\u805a\u6703\u4e0a\u9072\u5230\u4e86\uff0c\u4e26\u4e14\u5f88\u7dca\u5f35\uff0c\u800c\u805a\u6703\u4e0a\u7684\u5176\u4ed6\u4eba\u90fd\u5f88\u958b\u5fc3\uff0c\u4f60\u8981\u591a\u4e45\u624d\u80fd\u9032\u5165\u805a\u6703\u7684\u72c0\u614b\uff1f\",\n      options: [\n        \"\u99ac\u4e0a\",\n        \"\u5f88\u6162\",\n        \"\u4e00\u822c\u60c5\u6cc1\u4e0b\u4e0d\u80fd\u9032\u5165\u805a\u6703\u7684\u72c0\u614b\"\n      ]\n    },\n    {\n      id: 6,\n      question: \"\u4e00\u4f4d\u5973\u58eb\u6b63\u5728\u5c0b\u627e\u4f34\u4fb6\u3002\u5979\u7684\u4e00\u500b\u8ffd\u6c42\u8005\u958b\u8457\u4e00\u8f1b\u50f9\u503c20\u842c\u5143\u7684\u6c7d\u8eca\uff0c\u4f60\u8a8d\u70ba\u9019\u5c0d\u9019\u4f4d\u5973\u58eb\u4f86\u8aaa\u610f\u5473\u8457\u4ec0\u9ebc\u5462\uff1f\",\n      options: [\n        \"\u9019\u662f\u4e00\u500b\u63d0\u9192\uff0c\u61c9\u8a72\u5c0f\u5fc3\u5730\u548c\u9019\u500b\u4eba\u4ea4\u5f80\",\n        \"\u9019\u540c\u4ed6\u9a0e\u8173\u8e0f\u8eca\u6c92\u6709\u4ec0\u9ebc\u5340\u5225\",\n        \"\u9019\u662f\u4e00\u500b\u5f88\u597d\u7684\u6a5f\u6703\"\n      ]\n    },\n    {\n      id: 7,\n      question: \"\u4f60\u525b\u7e94\u6162\u8dd1\u4e8620\u5206\u9418\u3002\u4f60\u7684\u611f\u89ba\u5982\u4f55\uff1f\",\n      options: [\n        \"\u5f88\u597d\",\n        \"\u5f88\u7d2f\",\n        \"\u5f88\u8212\u670d\"\n      ]\n    },\n    {\n      id: 8,\n      question: \"\u4e00\u500b\u5b69\u5b50\u60f3\u8981\u5b8c\u6210\u4e00\u500b\u5f88\u96e3\u7684\u4efb\u52d9\uff08\u6bd4\u5982\u8a66\u5716\u642c\u52d5\u4e00\u4ef6\u5f88\u91cd\u7684\u6771\u897f\uff09\uff0c\u7576\u9019\u500b\u5b69\u5b50\u5c0d\u81ea\u5df1\u7684\u4efb\u52d9\u611f\u5230\u7d55\u671b\u6642\uff0c\u4f60\u6703\u9996\u5148\uff1a\",\n      options: [\n        \"\u9f13\u52f5\u4ed6\",\n        \"\u5b89\u6170\u4ed6\",\n        \"\u544a\u8a34\u4ed6\u61c9\u8a72\u6b63\u78ba\u5730\u4f30\u8a08\u81ea\u5df1\u7684\u529b\u6c23\"\n      ]\n    },\n    {\n      id: 9,\n      question: \"\u7576\u6211\u5f88\u4e0d\u8010\u7169\u7684\u6642\u5019\uff1a\",\n      options: [\n        \"\u6211\u4e0d\u6703\u56e0\u6b64\u800c\u50b7\u5bb3\u5230\u5176\u4ed6\u4eba\",\n        \"\u6211\u6703\u56e0\u6b64\u50b7\u5bb3\u5230\u5176\u4ed6\u4eba\",\n        \"\u4ed6\u4eba\u6703\u5c0d\u6211\u5982\u6b64\u5177\u6709\u653b\u64ca\u6027\u800c\u611f\u5230\u9a5a\u8a1d\"\n      ]\n    },\n    {\n      id: 10,\n      question: \"\u6211\u5e6b\u52a9\u5176\u4ed6\u4eba\uff1a\",\n      options: [\n        \"\u53ea\u6709\u7576\u9019\u6a23\u505a\u6709\u610f\u7fa9\u7684\u6642\u5019\",\n        \"\u53ea\u6709\u7576\u5176\u4ed6\u4eba\u8acb\u6c42\u6211\u7684\u6642\u5019\",\n        \"\u5373\u4f7f\u4ed6\u5011\u6839\u672c\u5c31\u6c92\u6709\u8acb\u6c42\u6211\u7684\u5e6b\u52a9\"\n      ]\n    },\n    {\n      id: 11,\n      question: \"\u6211\u5c0d\u4ed6\u4eba\uff1a\",\n      options: [\n        \"\u7e3d\u662f\u81ea\u767c\u5730\u53cb\u597d\",\n        \"\u958b\u59cb\u6642\u7e3d\u662f\u4fdd\u6301\u4e00\u5b9a\u7684\u8ddd\u96e2\",\n        \"\u7e3d\u662f\u592a\u56b4\u53b2\uff0c\u4f7f\u4ed6\u4eba\u56e0\u6b64\u800c\u611f\u89ba\u53d7\u5230\u4e86\u50b7\u5bb3\"\n      ]\n    },\n    {\n      id: 12,\n      question: \"\u6211\u7684\u670b\u53cb\u5011\uff1a\",\n      options: [\n        \"\u5f88\u5c11\u8b93\u6211\u5931\u671b\",\n        \"\u6642\u5e38\u8b93\u6211\u5931\u671b\",\n        \"\u7e3d\u662f\u8b93\u6211\u5931\u671b\"\n      ]\n    },\n    {\n      id: 13,\n      question: \"\u6211\u89ba\u5f97\u90a3\u4e9b\u7e3d\u662f\u5c0d\u6211\u5f88\u53cb\u597d\u7684\u4eba\uff1a\",\n      options: [\n        \"\u975e\u5e38\u597d\",\n        \"\u6709\u4e9b\u53ef\u7591\",\n        \"\u8b93\u6211\u611f\u5230\u7121\u804a\"\n      ]\n    }\n  ];\n\n  \/\/ Result Analysis Data\n  const resultAnalysis = {\n    selfCare: {\n      title: \"\u91cd\u8996\u81ea\u6211\u5229\u76ca\",\n      emoji: \"\ud83d\ude0a\",\n      color: \"#10b981\",\n      text: \"\u4f60\u8003\u616e\u81ea\u5df1\u7684\u5229\u76ca\u3002\u4f60\u505a\u90a3\u4e9b\u5c0d\u4f60\u6709\u5229\u7684\u4e8b\uff0c\u4f46\u662f\u4e0d\u6703\u56e0\u6b64\u640d\u5bb3\u4ed6\u4eba\u3002\u5225\u4eba\u6703\u56e0\u70ba\u4f60\u7684\u8655\u4e8b\u65b9\u6cd5\u800c\u611f\u5230\u5feb\u6a02\u548c\u6eff\u610f\u3002\"\n    },\n    tooGiving: {\n      title: \"\u904e\u5206\u4ed8\u51fa\",\n      emoji: \"\ud83d\ude07\",\n      color: \"#f59e0b\",\n      text: \"\u4f60\u5c0d\u81ea\u5df1\u7684\u91cd\u8996\u4e0d\u5920\u3002\u4f60\u592a\u597d\u5fc3\uff0c\u4f60\u901a\u5e38\u6703\u60f3\uff1a\u300c\u8207\u5176\u6c42\u5225\u4eba\u5e6b\u5fd9\uff0c\u4e0d\u5982\u6211\u81ea\u5df1\u505a\u3002\u300d\u9019\u7a2e\u884c\u70ba\u6703\u4f7f\u4eba\u89ba\u5f97\u4f60\u300c\u5f88\u597d\u6253\u767c\u300d\u3002\u4f60\u5c0d\u8eab\u908a\u7684\u4eba\u4f86\u8aaa\u5f88\u5be6\u969b\uff0c\u56e0\u70ba\u4f60\u4e0d\u6703\u5e36\u4f86\u9ebb\u7169\u4f46\u662f\u4f60\u81ea\u5df1\u6703\u56e0\u6b64\u5f88\u5403\u8667\u3002\"\n    },\n    selfSacrifice: {\n      title: \"\u904e\u5ea6\u72a7\u7272\u81ea\u6211\",\n      emoji: \"\ud83d\ude1e\",\n      color: \"#ef4444\",\n      text: \"\u4f60\u7e3d\u662f\u548c\u81ea\u5df1\u7684\u5229\u76ca\u904e\u4e0d\u53bb\u3002\u4f60\u7e3d\u662f\u570d\u8457\u4ed6\u4eba\u8f49\uff0c\u4ee5\u4ed6\u4eba\u70ba\u4e2d\u5fc3\u505a\u4e00\u4e9b\u8a0e\u4ed6\u4eba\u559c\u6b61\u7684\u4e8b\uff0c\u5e0c\u671b\u80fd\u4f7f\u4ed6\u4eba\u6eff\u610f\u4f46\u662f\u4f60\u70ba\u6b64\u6240\u5f97\u5230\u7684\u56de\u5831\u537b\u5f88\u5c11\u3002\u8acb\u4f60\u8a66\u8457\u591a\u95dc\u8a3b\u4e00\u4e9b\u4f60\u81ea\u5df1\u7684\u5229\u76ca\uff0c\u70ba\u81ea\u5df1\u7684\u5229\u76ca\u63a1\u53d6\u4e00\u4e9b\u63aa\u65bd\u548c\u624b\u6bb5\u3002\"\n    }\n  };\n\n  \/\/ Quiz State\n  const state = {\n    currentQuestion: 0,\n    answers: {},\n    totalScore: 0,\n    chart: null,\n    characteristics: {\n      selfCare: 0,      \/\/ \u81ea\u6211\u95dc\u61f7\n      helpOthers: 0,    \/\/ \u52a9\u4eba\u50be\u5411\n      assertiveness: 0, \/\/ \u4e3b\u5f35\u6027\n      socialAdaptation: 0 \/\/ \u793e\u4ea4\u9069\u61c9\n    }\n  };\n\n  \/\/ DOM Elements\n  const elements = {\n    introPage: document.getElementById('self-test-intro'),\n    testPage: document.getElementById('self-test-quiz'),\n    resultPage: document.getElementById('self-test-result'),\n    startBtn: document.getElementById('self-start-quiz-btn'),\n    prevBtn: document.getElementById('self-prev-question-btn'),\n    restartBtn: document.getElementById('self-restart-quiz-btn'),\n    question: document.getElementById('self-test-question'),\n    options: document.getElementById('self-test-options'),\n    progressBar: document.getElementById('self-test-progress-fill'),\n    progressText: document.getElementById('self-test-progress-text'),\n    scoreChart: document.getElementById('self-test-score-chart'),\n    resultText: document.getElementById('self-test-result-text')\n  };\n\n  \/\/ Event Listeners using Event Delegation\n  document.getElementById('self-test-container').addEventListener('click', handleContainerClick);\n\n  function handleContainerClick(e) {\n    const action = e.target.dataset.action;\n    \n    if (action === 'start') {\n      startQuiz();\n    } else if (action === 'prev') {\n      previousQuestion();\n    } else if (action === 'restart') {\n      restartQuiz();\n    } else if (e.target.classList.contains('self-test-option')) {\n      selectOption(e.target);\n    }\n  }\n\n  \/\/ Quiz Functions\n  function startQuiz() {\n    showPage('test');\n    scrollToTop();\n    renderQuestion();\n  }\n\n  function showPage(page) {\n    elements.introPage.classList.remove('active');\n    elements.testPage.classList.remove('active');\n    elements.resultPage.classList.remove('active');\n    \n    switch(page) {\n      case 'intro':\n        elements.introPage.classList.add('active');\n        break;\n      case 'test':\n        elements.testPage.classList.add('active');\n        break;\n      case 'result':\n        elements.resultPage.classList.add('active');\n        break;\n    }\n  }\n\n  function renderQuestion() {\n    const currentQ = quizQuestions[state.currentQuestion];\n    elements.question.textContent = currentQ.question;\n    \n    \/\/ Clear previous options\n    elements.options.innerHTML = '';\n    \n    \/\/ Render options with ABC values\n    currentQ.options.forEach((option, index) => {\n      const button = document.createElement('button');\n      button.className = 'self-test-option';\n      button.textContent = `${String.fromCharCode(65 + index)}. ${option}`;\n      button.dataset.value = String.fromCharCode(65 + index);\n      elements.options.appendChild(button);\n    });\n    \n    \/\/ Update progress\n    updateProgress();\n    \n    \/\/ Show\/hide previous button\n    elements.prevBtn.style.display = state.currentQuestion > 0 ? 'block' : 'none';\n    \n    \/\/ Restore previous selection\n    const previousAnswer = state.answers[currentQ.id];\n    if (previousAnswer) {\n      const selectedOption = elements.options.querySelector(`[data-value=\"${previousAnswer}\"]`);\n      if (selectedOption) {\n        selectedOption.classList.add('selected');\n      }\n    }\n  }\n\n  function updateProgress() {\n    const progress = ((state.currentQuestion + 1) \/ quizQuestions.length) * 100;\n    elements.progressBar.style.width = `${progress}%`;\n    elements.progressText.textContent = `\u554f\u984c ${state.currentQuestion + 1}\/${quizQuestions.length}`;\n  }\n\n  function selectOption(option) {\n    \/\/ Clear previous selection\n    const allOptions = elements.options.querySelectorAll('.self-test-option');\n    allOptions.forEach(opt => opt.classList.remove('selected'));\n    \n    \/\/ Select current option\n    option.classList.add('selected');\n    \n    \/\/ Store answer\n    const currentQ = quizQuestions[state.currentQuestion];\n    state.answers[currentQ.id] = option.dataset.value;\n    \n    \/\/ Move to next question after short delay\n    setTimeout(() => {\n      if (state.currentQuestion < quizQuestions.length - 1) {\n        nextQuestion();\n      } else {\n        finishQuiz();\n      }\n    }, 300);\n  }\n\n  function nextQuestion() {\n    state.currentQuestion++;\n    renderQuestion();\n    scrollToTitle();\n  }\n\n  function previousQuestion() {\n    if (state.currentQuestion > 0) {\n      state.currentQuestion--;\n      renderQuestion();\n      scrollToTitle();\n    }\n  }\n\n  function finishQuiz() {\n    calculateResults();\n    showResults();\n  }\n\n  function calculateResults() {\n    \/\/ Calculate total score (A=1, B=2, C=3)\n    let score = 0;\n    Object.values(state.answers).forEach(answer => {\n      switch(answer) {\n        case 'A': score += 1; break;\n        case 'B': score += 2; break;\n        case 'C': score += 3; break;\n      }\n    });\n    \n    state.totalScore = score;\n    \n    \/\/ Calculate characteristics\n    \/\/ \u81ea\u6211\u95dc\u61f7 (Self-care): 1, 2, 9, 11\n    const selfCareQuestions = [1, 2, 9, 11];\n    selfCareQuestions.forEach(id => {\n      if (state.answers[id] === 'A') state.characteristics.selfCare++;\n    });\n    \n    \/\/ \u52a9\u4eba\u50be\u5411 (Help others): 8, 10\n    const helpQuestions = [8, 10];\n    helpQuestions.forEach(id => {\n      if (state.answers[id] === 'C') state.characteristics.helpOthers++;\n    });\n    \n    \/\/ \u4e3b\u5f35\u6027 (Assertiveness): 4, 6, 7\n    const assertQuestions = [4, 6, 7];\n    assertQuestions.forEach(id => {\n      if (state.answers[id] === 'A') state.characteristics.assertiveness++;\n    });\n    \n    \/\/ \u793e\u4ea4\u9069\u61c9 (Social adaptation): 3, 5, 12, 13\n    const socialQuestions = [3, 5, 12, 13];\n    socialQuestions.forEach(id => {\n      if (state.answers[id] === 'A') state.characteristics.socialAdaptation++;\n    });\n  }\n\n  function showResults() {\n    showPage('result');\n    scrollToTop();\n    \n    \/\/ Get result category\n    let resultCategory;\n    if (state.totalScore < 20) {\n      resultCategory = resultAnalysis.selfCare;\n    } else if (state.totalScore <= 30) {\n      resultCategory = resultAnalysis.tooGiving;\n    } else {\n      resultCategory = resultAnalysis.selfSacrifice;\n    }\n    \n    \/\/ Display result text\n    elements.resultText.innerHTML = `\n      <div style=\"text-align: center; margin-bottom: 24px;\">\n        <div style=\"font-size: 48px; margin-bottom: 16px;\">${resultCategory.emoji}<\/div>\n        <h3 style=\"font-size: 24px; font-weight: 700; color: ${resultCategory.color}; margin: 0 0 16px 0;\">\n          ${resultCategory.title} (\u7e3d\u5206: ${state.totalScore}\/39)\n        <\/h3>\n      <\/div>\n      <p style=\"line-height: 1.8; text-align: left;\">${resultCategory.text}<\/p>\n    `;\n    \n    \/\/ Create chart\n    createScoreChart(resultCategory.color);\n  }\n\n  function createScoreChart(resultColor) {\n    const ctx = elements.scoreChart.getContext('2d');\n    \n    \/\/ Destroy existing chart if it exists\n    if (state.chart) {\n      state.chart.destroy();\n    }\n    \n    const data = {\n      labels: ['\u81ea\u6211\u95dc\u61f7', '\u52a9\u4eba\u50be\u5411', '\u4e3b\u5f35\u6027', '\u793e\u4ea4\u9069\u61c9'],\n      datasets: [{\n        label: '\u7279\u8cea\u5f37\u5ea6',\n        data: [\n          Math.round((state.characteristics.selfCare \/ 4) * 100),\n          Math.round((state.characteristics.helpOthers \/ 2) * 100),\n          Math.round((state.characteristics.assertiveness \/ 3) * 100),\n          Math.round((state.characteristics.socialAdaptation \/ 4) * 100)\n        ],\n        backgroundColor: [\n          'rgba(124, 58, 237, 0.8)',\n          'rgba(168, 85, 247, 0.8)',\n          'rgba(236, 72, 153, 0.8)',\n          'rgba(99, 102, 241, 0.8)'\n        ],\n        borderColor: [\n          'rgb(124, 58, 237)',\n          'rgb(168, 85, 247)',\n          'rgb(236, 72, 153)',\n          'rgb(99, 102, 241)'\n        ],\n        borderWidth: 2\n      }]\n    };\n    \n    const config = {\n      type: 'radar',\n      data: data,\n      options: {\n        responsive: true,\n        maintainAspectRatio: false,\n        scales: {\n          r: {\n            angleLines: {\n              display: true,\n              color: '#e5e7eb'\n            },\n            suggestedMin: 0,\n            suggestedMax: 100,\n            ticks: {\n              display: true,\n              stepSize: 25,\n              color: '#6b7280',\n              font: {\n                size: 14\n              },\n              callback: function(value) {\n                return value + '%';\n              }\n            },\n            grid: {\n              color: '#e5e7eb'\n            },\n            pointLabels: {\n              color: '#111827',\n              font: {\n                size: 18\n              }\n            }\n          }\n        },\n        plugins: {\n          legend: {\n            display: false\n          },\n          tooltip: {\n            callbacks: {\n              label: function(context) {\n                return `${context.label}: ${context.parsed.r}%`;\n              }\n            },\n            titleFont: {\n              size: 18\n            },\n            bodyFont: {\n              size: 18\n            },\n            padding: 12\n          }\n        }\n      }\n    };\n    \n    state.chart = new Chart(ctx, config);\n  }\n\n  function restartQuiz() {\n    state.currentQuestion = 0;\n    state.answers = {};\n    state.totalScore = 0;\n    state.characteristics = {\n      selfCare: 0,\n      helpOthers: 0,\n      assertiveness: 0,\n      socialAdaptation: 0\n    };\n    \n    if (state.chart) {\n      state.chart.destroy();\n      state.chart = null;\n    }\n    \n    showPage('intro');\n    scrollToTop();\n  }\n\n  function scrollToTop() {\n    window.scrollTo({\n      top: 0,\n      behavior: 'smooth'\n    });\n  }\n\n  function scrollToTitle() {\n    const title = elements.testPage.querySelector('.self-test-page-title');\n    if (title) {\n      title.scrollIntoView({\n        behavior: 'smooth',\n        block: 'start'\n      });\n    }\n  }\n\n  \/\/ Initialize\n  function init() {\n    console.log('\u81ea\u6211\u5229\u76ca\u6e2c\u9a57\u521d\u59cb\u5316\u6210\u529f');\n  }\n\n  \/\/ Start the quiz application\n  init();\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u8fd9\u4e2a\u6d4b\u8bd5\u5c06\u544a\u8bc9\u4f60\uff0c\u4f60\u662f\u5426\u5728\u751f\u6d3b\u4e2d\u628a\u5f88\u591a\u6ca1\u6709\u5fc5\u8981\u7684\u4e8b\u60c5\u53d8\u6210\u56f0\u96be\uff0c\u56e0\u4e3a\u4f60\u5728\u4e0d\u81ea\u89c9\u5730\u548c\u81ea\u5df1\u7684\u5229\u76ca\u5bf9\u7740\u5e72\u3002\u8bf7\u4f60\u9009\u62e9\u7b26\u5408\u4f60\u60c5\u51b5\u7684\u9009\u9879\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,176,169],"tags":[],"class_list":["post-3146","post","type-post","status-publish","format-standard","hentry","category-personality","category-career","category-psychological-symptom-scales"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/3146","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=3146"}],"version-history":[{"count":2,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/3146\/revisions"}],"predecessor-version":[{"id":10438,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/3146\/revisions\/10438"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=3146"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=3146"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=3146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}