{"id":2672,"date":"2023-10-26T08:59:22","date_gmt":"2023-10-26T00:59:22","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2672"},"modified":"2026-05-16T01:43:59","modified_gmt":"2026-05-15T17:43:59","slug":"emotional-or-rational","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/emotional-or-rational","title":{"rendered":"\u7ebf\u4e0a\u514d\u8d39\u6d4b\u9a8c\uff1a\u4f60\u662f\u611f\u6027\u7684\u8fd8\u662f\u7406\u6027\u7684\u4eba\uff1f \uff0810\u9898\uff09"},"content":{"rendered":"\n<!-- \u7406\u6027\u611f\u6027\u4eba\u683c\u6e2c\u9a57 - \u4f18\u5316\u7248\uff08\u89e3\u51b3CSS\u51b2\u7a81\uff09 -->\n<div data-quiz-container=\"personality-test\" class=\"psyquiz-container\">\n  <!-- \u5f15\u5c0e\u9801 -->\n  <section data-quiz-page=\"intro\" class=\"psyquiz-page psyquiz-intro-page\">\n    <header class=\"psyquiz-intro-header\">\n      <h2 class=\"psyquiz-main-title\">\u4f60\u662f\u611f\u6027\u7684\u9084\u662f\u7406\u6027\u7684\u4eba\uff1f<\/h2>\n      <p class=\"psyquiz-subtitle\">\u79d1\u5b78\u5fc3\u7406\u6e2c\u9a57\uff0c\u63a2\u7d22\u4f60\u7684\u5167\u5728\u6027\u683c\u7279\u8cea<\/p>\n    <\/header>\n    \n    <main class=\"psyquiz-intro-content\">\n      <div class=\"psyquiz-intro-features\">\n        <div class=\"psyquiz-feature-item\" data-feature=\"accurate\">\n          <div class=\"psyquiz-feature-icon\" aria-hidden=\"true\">\ud83e\udde0<\/div>\n          <h3>\u79d1\u5b78\u6e96\u78ba<\/h3>\n          <p>\u57fa\u65bc\u5fc3\u7406\u5b78\u7814\u7a76\uff0c\u900f\u904e\u5927\u8166\u524d\u8166\u5cf6\u548c\u524d\u984d\u76ae\u5c64\u7684\u6d3b\u52d5\u6a21\u5f0f\u5206\u6790<\/p>\n        <\/div>\n        <div class=\"psyquiz-feature-item\" data-feature=\"quick\">\n          <div class=\"psyquiz-feature-icon\" aria-hidden=\"true\">\u26a1<\/div>\n          <h3>\u5feb\u901f\u6aa2\u6e2c<\/h3>\n          <p>\u50c5\u97002\u5206\u9418\uff0c10\u9053\u7cbe\u9078\u984c\u76ee\uff0c\u5373\u53ef\u7372\u5f97\u8a73\u7d30\u7684\u500b\u6027\u5206\u6790\u5831\u544a<\/p>\n        <\/div>\n        <div class=\"psyquiz-feature-item\" data-feature=\"insights\">\n          <div class=\"psyquiz-feature-icon\" aria-hidden=\"true\">\ud83d\udcca<\/div>\n          <h3>\u6df1\u5ea6\u6d1e\u5bdf<\/h3>\n          <p>\u63d0\u4f9b\u53ef\u8996\u5316\u5206\u6790\u5716\u8868\u548c\u500b\u4eba\u5316\u5efa\u8b70\uff0c\u52a9\u4f60\u66f4\u597d\u4e86\u89e3\u81ea\u5df1<\/p>\n        <\/div>\n      <\/div>\n      \n      <div class=\"psyquiz-intro-description\">\n        <p>\u7406\u667a\u8207\u60c5\u611f\u662f\u4e00\u5c0d\u77db\u76fe\uff0c\u5e38\u5e38\u7d66\u6211\u5011\u5e36\u4f86\u7121\u7aae\u7684\u7169\u60f1\u3002\u7406\u667a\uff0c\u5c31\u662f\u6309\u5ba2\u89c0\u898f\u5f8b\u8655\u7406\u5404\u7a2e\u554f\u984c\u3002\u60c5\u611f\uff0c\u9019\u88e1\u662f\u6307\u4eba\u7684\u559c\u6012\u54c0\u6a02\u7b49\u5404\u985e\u611f\u60c5\uff0c\u662f\u4eba\u7684\u559c\u597d\u8207\u53ad\u60e1\uff0c\u662f\u4eba\u7684\u4e3b\u89c0\u50f9\u503c\u53d6\u5411\u3002<\/p>\n        <p>\u5fc3\u7406\u5b78\u5bb6\u5229\u7528\u6838\u78c1\u5171\u632f\u6210\u50cf\u7cfb\u7d71\u7814\u7a76\u5927\u8166\u7684\u6d3b\u52d5\u65b9\u5f0f\uff0c\u767c\u73fe\u5927\u8166\u7684\u524d\u8166\u5cf6\u4e3b\u8981\u8655\u7406\u53ad\u60e1\u548c\u5176\u4ed6\u6d88\u6975\u8ca0\u9762\u7684\u611f\u60c5\uff0c\u80cc\u5916\u5074\u524d\u984d\u76ae\u5c64\u5247\u8207\u8a18\u61b6\u548c\u6df1\u601d\u719f\u616e\u7b49\u529f\u80fd\u6709\u95dc\u3002<\/p>\n      <\/div>\n      \n      <div class=\"psyquiz-intro-cta\">\n        <button data-quiz-action=\"start\" class=\"psyquiz-start-btn\" type=\"button\">\n          <span>\u958b\u59cb\u6e2c\u9a57<\/span>\n          <span class=\"psyquiz-btn-icon\" aria-hidden=\"true\">\u2192<\/span>\n        <\/button>\n        <p class=\"psyquiz-test-info\">\u517110\u984c \u2022 \u7d042\u5206\u9418 \u2022 \u514d\u8cbb\u6e2c\u9a57<\/p>\n      <\/div>\n    <\/main>\n  <\/section>\n\n  <!-- \u6e2c\u9a57\u9801 -->\n  <section data-quiz-page=\"quiz\" class=\"psyquiz-page psyquiz-quiz-page\" style=\"display: none;\">\n    <header class=\"psyquiz-quiz-header\">\n      <h2 class=\"psyquiz-quiz-title\">\u7406\u6027\u611f\u6027\u6e2c\u9a57<\/h2>\n      <div class=\"psyquiz-progress-container\">\n        <div class=\"psyquiz-progress-info\">\n          <span data-quiz-progress=\"text\">\u7b2c 1 \u984c\uff0c\u5171 10 \u984c<\/span>\n        <\/div>\n        <div class=\"psyquiz-progress-bar\">\n          <div data-quiz-progress=\"bar\" class=\"psyquiz-progress-fill\"><\/div>\n        <\/div>\n      <\/div>\n    <\/header>\n    \n    <main class=\"psyquiz-quiz-content\">\n      <div data-quiz-question=\"container\" class=\"psyquiz-question-container\">\n        <h3 data-quiz-question=\"text\" class=\"psyquiz-question-text\"><\/h3>\n        <div data-quiz-options=\"container\" class=\"psyquiz-options-container\" role=\"radiogroup\"><\/div>\n      <\/div>\n      \n      <div class=\"psyquiz-quiz-navigation\">\n        <button data-quiz-action=\"prev\" class=\"psyquiz-nav-btn psyquiz-prev-btn\" type=\"button\" style=\"display: none;\">\n          \u2190 \u4e0a\u4e00\u984c\n        <\/button>\n      <\/div>\n    <\/main>\n  <\/section>\n\n  <!-- \u7d50\u679c\u9801 -->\n  <section data-quiz-page=\"result\" class=\"psyquiz-page psyquiz-result-page\" style=\"display: none;\">\n    <header class=\"psyquiz-result-header\">\n      <h2 class=\"psyquiz-result-title\">\u4f60\u7684\u6e2c\u9a57\u7d50\u679c<\/h2>\n      <div data-quiz-result=\"type\" class=\"psyquiz-result-type\"><\/div>\n      <div data-quiz-result=\"score\" class=\"psyquiz-result-score\"><\/div>\n    <\/header>\n    \n    <main class=\"psyquiz-result-content\">\n      <div class=\"psyquiz-result-chart-container\">\n        <canvas data-quiz-chart=\"canvas\" class=\"psyquiz-result-chart\"><\/canvas>\n      <\/div>\n      \n      <div data-quiz-result=\"analysis\" class=\"psyquiz-result-analysis\"><\/div>\n      \n      <div class=\"psyquiz-result-cta\">\n        <button data-quiz-action=\"restart\" class=\"psyquiz-restart-btn\" type=\"button\">\n          \u91cd\u65b0\u6e2c\u9a57\n        <\/button>\n      <\/div>\n    <\/main>\n  <\/section>\n<\/div>\n\n<style>\n\/* CSS \u8b8a\u6578\u5b9a\u7fa9 *\/\n:root {\n  --psyquiz-primary: #667eea;\n  --psyquiz-primary-dark: #5a6fd8;\n  --psyquiz-secondary: #764ba2;\n  --psyquiz-accent: #f093fb;\n  --psyquiz-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  --psyquiz-gradient-light: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);\n  --psyquiz-text-primary: #2d3748;\n  --psyquiz-text-secondary: #4a5568;\n  --psyquiz-text-light: #718096;\n  --psyquiz-bg-white: #ffffff;\n  --psyquiz-bg-gray: #f7fafc;\n  --psyquiz-bg-light: #edf2f7;\n  --psyquiz-border: #e2e8f0;\n  --psyquiz-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n  --psyquiz-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n  --psyquiz-radius: 12px;\n  --psyquiz-radius-lg: 16px;\n  --psyquiz-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  --psyquiz-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n}\n\n\/* \u5bb9\u5668\u57fa\u790e\u6a23\u5f0f - \u63d0\u9ad8\u512a\u5148\u7d1a\u4e26\u9694\u96e2\u6a23\u5f0f *\/\n.psyquiz-container {\n  font-family: var(--psyquiz-font-family) !important;\n  line-height: 1.6 !important;\n  color: var(--psyquiz-text-primary) !important;\n  max-width: 800px !important;\n  margin: 0 auto !important;\n  padding: 16px !important;\n  background: var(--psyquiz-bg-white) !important;\n  border-radius: var(--psyquiz-radius-lg) !important;\n  box-shadow: var(--psyquiz-shadow-lg) !important;\n  box-sizing: border-box !important;\n  position: relative !important;\n  isolation: isolate !important; \/* \u5275\u5efa\u65b0\u7684\u5806\u758a\u4e0a\u4e0b\u6587 *\/\n}\n\n\/* \u5f37\u5236\u76d2\u6a21\u578b\u7d71\u4e00 *\/\n.psyquiz-container *,\n.psyquiz-container *::before,\n.psyquiz-container *::after {\n  box-sizing: border-box !important;\n  font-family: inherit !important;\n}\n\n\/* \u91cd\u7f6e\u53ef\u80fd\u88ab\u4e3b\u984c\u5f71\u97ff\u7684\u5143\u7d20 *\/\n.psyquiz-container h1,\n.psyquiz-container h2,\n.psyquiz-container h3,\n.psyquiz-container h4,\n.psyquiz-container h5,\n.psyquiz-container h6,\n.psyquiz-container p,\n.psyquiz-container button {\n  font-family: var(--psyquiz-font-family) !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  border: none !important;\n  background: none !important;\n  color: inherit !important;\n  font-weight: inherit !important;\n}\n\n.psyquiz-page {\n  min-height: 400px !important;\n  animation: psyquiz-fadeIn 0.5s ease-out;\n}\n\n@keyframes psyquiz-fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n\/* \u5f15\u5c0e\u9801\u6a23\u5f0f *\/\n.psyquiz-intro-header {\n  text-align: center !important;\n  margin-bottom: 40px !important;\n}\n\n.psyquiz-main-title {\n  font-size: 32px !important;\n  font-weight: 800 !important;\n  background: var(--psyquiz-gradient) !important;\n  -webkit-background-clip: text !important;\n  -webkit-text-fill-color: transparent !important;\n  background-clip: text !important;\n  margin: 0 0 16px 0 !important;\n  line-height: 1.2 !important;\n}\n\n.psyquiz-subtitle {\n  font-size: 20px !important;\n  color: var(--psyquiz-text-secondary) !important;\n  margin: 0 !important;\n  font-weight: 500 !important;\n}\n\n.psyquiz-intro-features {\n  display: grid !important;\n  gap: 24px !important;\n  margin-bottom: 40px !important;\n}\n\n.psyquiz-feature-item {\n  text-align: center !important;\n  padding: 24px !important;\n  background: var(--psyquiz-bg-gray) !important;\n  border-radius: var(--psyquiz-radius) !important;\n  transition: var(--psyquiz-transition) !important;\n}\n\n.psyquiz-feature-item:hover {\n  transform: translateY(-4px) !important;\n  box-shadow: var(--psyquiz-shadow-lg) !important;\n}\n\n.psyquiz-feature-icon {\n  font-size: 40px !important;\n  margin-bottom: 16px !important;\n  height: 64px !important;\n  width: 64px !important;\n  background: var(--psyquiz-gradient) !important;\n  border-radius: 50% !important;\n  display: flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  margin: 0 auto 16px auto !important;\n  box-shadow: var(--psyquiz-shadow) !important;\n}\n\n.psyquiz-feature-item h3 {\n  font-size: 20px !important;\n  font-weight: 700 !important;\n  margin: 0 0 12px 0 !important;\n  color: var(--psyquiz-text-primary) !important;\n}\n\n.psyquiz-feature-item p {\n  font-size: 16px !important;\n  color: var(--psyquiz-text-secondary) !important;\n  margin: 0 !important;\n}\n\n.psyquiz-intro-description {\n  background: var(--psyquiz-bg-light) !important;\n  padding: 24px !important;\n  border-radius: var(--psyquiz-radius) !important;\n  margin-bottom: 40px !important;\n  border-left: 4px solid var(--psyquiz-primary) !important;\n}\n\n.psyquiz-intro-description p {\n  font-size: 16px !important;\n  margin: 0 0 16px 0 !important;\n  color: var(--psyquiz-text-secondary) !important;\n}\n\n.psyquiz-intro-description p:last-child {\n  margin-bottom: 0 !important;\n}\n\n.psyquiz-intro-cta {\n  text-align: center !important;\n}\n\n\/* \u6309\u9215\u6a23\u5f0f - \u91cd\u9ede\u52a0\u5f37\u512a\u5148\u7d1a *\/\n.psyquiz-container .psyquiz-start-btn {\n  background: var(--psyquiz-gradient) !important;\n  color: white !important;\n  border: none !important;\n  padding: 16px 40px !important;\n  font-size: 20px !important;\n  font-weight: 700 !important;\n  border-radius: var(--psyquiz-radius) !important;\n  cursor: pointer !important;\n  transition: var(--psyquiz-transition) !important;\n  box-shadow: var(--psyquiz-shadow) !important;\n  display: inline-flex !important;\n  align-items: center !important;\n  gap: 12px !important;\n  min-height: 56px !important;\n  font-family: inherit !important;\n  text-decoration: none !important;\n  outline: none !important;\n}\n\n.psyquiz-container .psyquiz-start-btn:hover {\n  transform: translateY(-2px) !important;\n  box-shadow: var(--psyquiz-shadow-lg) !important;\n}\n\n.psyquiz-container .psyquiz-start-btn:active {\n  transform: translateY(0) !important;\n}\n\n.psyquiz-btn-icon {\n  font-size: 18px !important;\n  transition: var(--psyquiz-transition) !important;\n}\n\n.psyquiz-container .psyquiz-start-btn:hover .psyquiz-btn-icon {\n  transform: translateX(4px) !important;\n}\n\n.psyquiz-test-info {\n  margin-top: 16px !important;\n  font-size: 14px !important;\n  color: var(--psyquiz-text-light) !important;\n}\n\n\/* \u6e2c\u9a57\u9801\u6a23\u5f0f *\/\n.psyquiz-quiz-header {\n  text-align: center !important;\n  margin-bottom: 32px !important;\n}\n\n.psyquiz-quiz-title {\n  font-size: 28px !important;\n  font-weight: 700 !important;\n  margin: 0 0 24px 0 !important;\n  color: var(--psyquiz-text-primary) !important;\n}\n\n.psyquiz-progress-container {\n  max-width: 400px !important;\n  margin: 0 auto !important;\n}\n\n.psyquiz-progress-info {\n  text-align: center !important;\n  margin-bottom: 12px !important;\n}\n\n.psyquiz-progress-info span {\n  font-size: 16px !important;\n  font-weight: 600 !important;\n  color: var(--psyquiz-text-secondary) !important;\n}\n\n.psyquiz-progress-bar {\n  height: 8px !important;\n  background: var(--psyquiz-bg-light) !important;\n  border-radius: 4px !important;\n  overflow: hidden !important;\n}\n\n.psyquiz-progress-fill {\n  height: 100% !important;\n  background: var(--psyquiz-gradient) !important;\n  border-radius: 4px !important;\n  transition: width 0.5s ease !important;\n  width: 10% !important;\n}\n\n.psyquiz-question-container {\n  margin-bottom: 32px !important;\n}\n\n.psyquiz-question-text {\n  font-size: 22px !important;\n  font-weight: 700 !important;\n  margin: 0 0 24px 0 !important;\n  color: var(--psyquiz-text-primary) !important;\n  line-height: 1.4 !important;\n}\n\n.psyquiz-options-container {\n  display: flex !important;\n  flex-direction: column !important;\n  gap: 12px !important;\n}\n\n.psyquiz-container .psyquiz-option {\n  background: var(--psyquiz-bg-white) !important;\n  border: 2px solid var(--psyquiz-border) !important;\n  border-radius: var(--psyquiz-radius) !important;\n  padding: 16px 20px !important;\n  cursor: pointer !important;\n  transition: var(--psyquiz-transition) !important;\n  font-size: 18px !important;\n  color: var(--psyquiz-text-primary) !important;\n  display: flex !important;\n  align-items: center !important;\n  min-height: 56px !important;\n  position: relative !important;\n  font-family: inherit !important;\n  text-align: left !important;\n  width: 100% !important;\n  box-shadow: none !important;\n  text-decoration: none !important;\n  outline: none !important;\n}\n\n.psyquiz-container .psyquiz-option:hover {\n  border-color: var(--psyquiz-primary) !important;\n  background: var(--psyquiz-bg-gray) !important;\n  color: var(--psyquiz-text-primary) !important;\n}\n\n.psyquiz-container .psyquiz-option.psyquiz-selected {\n  background: var(--psyquiz-gradient) !important;\n  border-color: var(--psyquiz-primary) !important;\n  color: white !important;\n  transform: scale(1.02) !important;\n}\n\n.psyquiz-container .psyquiz-option::before {\n  content: '' !important;\n  position: absolute !important;\n  left: 16px !important;\n  top: 50% !important;\n  transform: translateY(-50%) !important;\n  width: 20px !important;\n  height: 20px !important;\n  border: 2px solid var(--psyquiz-border) !important;\n  border-radius: 50% !important;\n  background: white !important;\n  transition: var(--psyquiz-transition) !important;\n}\n\n.psyquiz-container .psyquiz-option:hover::before {\n  border-color: var(--psyquiz-primary) !important;\n}\n\n.psyquiz-container .psyquiz-option.psyquiz-selected::before {\n  background: white !important;\n  border-color: white !important;\n}\n\n.psyquiz-container .psyquiz-option.psyquiz-selected::after {\n  content: '\u2713' !important;\n  position: absolute !important;\n  left: 20px !important;\n  top: 50% !important;\n  transform: translateY(-50%) !important;\n  color: var(--psyquiz-primary) !important;\n  font-weight: 700 !important;\n  font-size: 14px !important;\n}\n\n.psyquiz-option-text {\n  margin-left: 36px !important;\n  flex: 1 !important;\n}\n\n.psyquiz-quiz-navigation {\n  text-align: center !important;\n  margin-top: 32px !important;\n}\n\n.psyquiz-container .psyquiz-nav-btn {\n  background: var(--psyquiz-bg-light) !important;\n  color: var(--psyquiz-text-secondary) !important;\n  border: 2px solid var(--psyquiz-border) !important;\n  padding: 12px 24px !important;\n  font-size: 16px !important;\n  font-weight: 600 !important;\n  border-radius: var(--psyquiz-radius) !important;\n  cursor: pointer !important;\n  transition: var(--psyquiz-transition) !important;\n  min-height: 48px !important;\n  font-family: inherit !important;\n  outline: none !important;\n  text-decoration: none !important;\n}\n\n.psyquiz-container .psyquiz-nav-btn:hover {\n  background: var(--psyquiz-primary) !important;\n  color: white !important;\n  border-color: var(--psyquiz-primary) !important;\n}\n\n\/* \u7d50\u679c\u9801\u6a23\u5f0f *\/\n.psyquiz-result-header {\n  text-align: center !important;\n  margin-bottom: 32px !important;\n}\n\n.psyquiz-result-title {\n  font-size: 28px !important;\n  font-weight: 700 !important;\n  margin: 0 0 24px 0 !important;\n  color: var(--psyquiz-text-primary) !important;\n}\n\n.psyquiz-result-type {\n  font-size: 24px !important;\n  font-weight: 700 !important;\n  background: var(--psyquiz-gradient) !important;\n  -webkit-background-clip: text !important;\n  -webkit-text-fill-color: transparent !important;\n  background-clip: text !important;\n  margin-bottom: 12px !important;\n}\n\n.psyquiz-result-score {\n  font-size: 48px !important;\n  font-weight: 800 !important;\n  color: var(--psyquiz-primary) !important;\n  margin-bottom: 16px !important;\n}\n\n.psyquiz-result-chart-container {\n  max-width: 700px !important;\n  margin: 0 auto 32px auto !important;\n  padding: 60px !important;\n  background: #f8f9fa !important;\n  border-radius: var(--psyquiz-radius) !important;\n  box-shadow: var(--psyquiz-shadow) !important;\n  border: 3px solid #e9ecef !important;\n}\n\n.psyquiz-result-chart {\n  width: 100% !important;\n  height: 600px !important;\n  min-height: 600px !important;\n  background: #ffffff !important;\n  border-radius: 8px !important;\n}\n\n.psyquiz-result-analysis {\n  background: var(--psyquiz-bg-light) !important;\n  padding: 24px !important;\n  border-radius: var(--psyquiz-radius) !important;\n  margin-bottom: 32px !important;\n  border-left: 4px solid var(--psyquiz-primary) !important;\n}\n\n.psyquiz-result-analysis h4 {\n  font-size: 20px !important;\n  font-weight: 700 !important;\n  margin: 0 0 16px 0 !important;\n  color: var(--psyquiz-text-primary) !important;\n}\n\n.psyquiz-result-analysis p {\n  font-size: 16px !important;\n  margin: 0 0 16px 0 !important;\n  color: var(--psyquiz-text-secondary) !important;\n  line-height: 1.6 !important;\n}\n\n.psyquiz-result-analysis p:last-child {\n  margin-bottom: 0 !important;\n}\n\n.psyquiz-result-cta {\n  text-align: center !important;\n}\n\n.psyquiz-container .psyquiz-restart-btn {\n  background: var(--psyquiz-gradient) !important;\n  color: white !important;\n  border: none !important;\n  padding: 16px 32px !important;\n  font-size: 18px !important;\n  font-weight: 600 !important;\n  border-radius: var(--psyquiz-radius) !important;\n  cursor: pointer !important;\n  transition: var(--psyquiz-transition) !important;\n  box-shadow: var(--psyquiz-shadow) !important;\n  min-height: 56px !important;\n  font-family: inherit !important;\n  outline: none !important;\n  text-decoration: none !important;\n}\n\n.psyquiz-container .psyquiz-restart-btn:hover {\n  transform: translateY(-2px) !important;\n  box-shadow: var(--psyquiz-shadow-lg) !important;\n}\n\n.psyquiz-container .psyquiz-restart-btn:active {\n  transform: translateY(0) !important;\n}\n\n\/* \u97ff\u61c9\u5f0f\u8a2d\u8a08 *\/\n@media (min-width: 768px) {\n  .psyquiz-container {\n    padding: 32px !important;\n  }\n  \n  .psyquiz-main-title {\n    font-size: 40px !important;\n  }\n  \n  .psyquiz-subtitle {\n    font-size: 24px !important;\n  }\n  \n  .psyquiz-intro-features {\n    grid-template-columns: repeat(3, 1fr) !important;\n  }\n  \n  .psyquiz-feature-item {\n    padding: 32px 24px !important;\n  }\n  \n  .psyquiz-question-text {\n    font-size: 24px !important;\n  }\n  \n  .psyquiz-container .psyquiz-option {\n    font-size: 18px !important;\n    padding: 20px 24px !important;\n  }\n}\n\n@media (max-width: 480px) {\n  .psyquiz-container {\n    padding: 12px !important;\n  }\n  \n  .psyquiz-main-title {\n    font-size: 28px !important;\n  }\n  \n  .psyquiz-subtitle {\n    font-size: 18px !important;\n  }\n  \n  .psyquiz-container .psyquiz-start-btn {\n    padding: 14px 28px !important;\n    font-size: 18px !important;\n  }\n  \n  .psyquiz-question-text {\n    font-size: 20px !important;\n  }\n  \n  .psyquiz-container .psyquiz-option {\n    font-size: 16px !important;\n    padding: 14px 18px !important;\n  }\n  \n  .psyquiz-result-chart-container {\n    max-width: 100% !important;\n    padding: 30px !important;\n  }\n  \n  .psyquiz-result-chart {\n    height: 400px !important;\n    min-height: 400px !important;\n  }\n}\n\n\/* \u53ef\u8a2a\u554f\u6027\u589e\u5f37 *\/\n@media (prefers-reduced-motion: reduce) {\n  .psyquiz-container *,\n  .psyquiz-container *::before,\n  .psyquiz-container *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --psyquiz-text-primary: #e2e8f0;\n    --psyquiz-text-secondary: #cbd5e0;\n    --psyquiz-text-light: #a0aec0;\n    --psyquiz-bg-white: #1a202c;\n    --psyquiz-bg-gray: #2d3748;\n    --psyquiz-bg-light: #4a5568;\n    --psyquiz-border: #4a5568;\n  }\n}\n\n\/* \u5099\u7528\u5716\u8868\u6a23\u5f0f\uff08\u7576Chart.js\u7121\u6cd5\u52a0\u8f09\u6642\uff09 *\/\n.psyquiz-fallback-chart {\n  width: 100% !important;\n  padding: 20px !important;\n}\n\n.psyquiz-chart-title {\n  font-size: 18px !important;\n  font-weight: 700 !important;\n  text-align: center !important;\n  margin-bottom: 24px !important;\n  color: var(--psyquiz-text-primary) !important;\n}\n\n.psyquiz-chart-item {\n  margin-bottom: 20px !important;\n}\n\n.psyquiz-chart-label {\n  font-size: 16px !important;\n  font-weight: 600 !important;\n  margin-bottom: 8px !important;\n  color: var(--psyquiz-text-primary) !important;\n}\n\n.psyquiz-chart-bar-container {\n  width: 100% !important;\n  height: 32px !important;\n  background: var(--psyquiz-bg-light) !important;\n  border-radius: 16px !important;\n  overflow: hidden !important;\n  position: relative !important;\n}\n\n.psyquiz-chart-bar {\n  height: 100% !important;\n  border-radius: 16px !important;\n  transition: width 1s ease-out !important;\n  position: relative !important;\n  min-width: 60px !important;\n  display: flex !important;\n  align-items: center !important;\n  justify-content: flex-end !important;\n  padding-right: 12px !important;\n}\n\n.psyquiz-chart-value {\n  color: white !important;\n  font-size: 14px !important;\n  font-weight: 700 !important;\n  text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;\n}\n\n\/* \u78ba\u4fdd\u8207WordPress\u4e3b\u984c\u517c\u5bb9 *\/\n.psyquiz-container button:focus-visible {\n  outline: 2px solid var(--psyquiz-primary) !important;\n  outline-offset: 2px !important;\n}\n<\/style>\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n<script>\n(function() {\n  'use strict';\n  \n  \/\/ \u6e2c\u9a57\u6578\u64da\n  const quizData = {\n    questions: [\n      {\n        id: 1,\n        text: \"\u4f60\u559c\u6b61\u505a\u4e00\u500b\uff1a\",\n        options: [\n          { id: 'A', text: \"\u8a2d\u8a08\u5404\u7a2e\u98a8\u683c\u9ad8\u6a13\u5927\u5ec8\u7684\u5efa\u7bc9\u5e2b\u3002\", score: 0 },\n          { id: 'B', text: \"\u4e0d\u78ba\u5b9a\u3002\", score: 1 },\n          { id: 'C', text: \"\u4e2d\u5916\u77e5\u540d\u7684\u793e\u6703\u79d1\u5b78\u6559\u6388\", score: 2 }\n        ]\n      },\n      {\n        id: 2,\n        text: \"\u95b1\u8b80\u6642\uff0c\u4f60\u559c\u6b61\u9078\u8b80\uff1a\",\n        options: [\n          { id: 'A', text: \"\u5404\u7a2e\u81ea\u7136\u79d1\u5b78\u66f8\u7c4d\u3002\", score: 0 },\n          { id: 'B', text: \"\u4e0d\u78ba\u5b9a\u3002\", score: 1 },\n          { id: 'C', text: \"\u54f2\u5b78\u8207\u653f\u6cbb\u7406\u8ad6\u66f8\u7c4d\u3002\", score: 2 }\n        ]\n      },\n      {\n        id: 3,\n        text: \"\u5728\u5404\u7a2e\u884c\u696d\u4e2d\uff0c\u4f60\u50be\u5fc3\u65bc\uff1a\",\n        options: [\n          { id: 'A', text: \"\u624b\u5de5\u52de\u52d5\u3002\", score: 0 },\n          { id: 'B', text: \"\u4e0d\u4e00\u5b9a\u3002\", score: 1 },\n          { id: 'C', text: \"\u97f3\u6a02\u3002\", score: 2 }\n        ]\n      },\n      {\n        id: 4,\n        text: \"\u4f60\u9858\u610f\uff1a\",\n        options: [\n          { id: 'A', text: \"\u6307\u63ee\u5e7e\u500b\u4eba\u5de5\u4f5c\u3002\", score: 0 },\n          { id: 'B', text: \"\u4e0d\u78ba\u5b9a\u3002\", score: 1 },\n          { id: 'C', text: \"\u548c\u540c\u4e8b\u4e00\u8d77\u5de5\u4f5c\u3002\", score: 2 }\n        ]\n      },\n      {\n        id: 5,\n        text: \"\u4f60\u4e00\u5411\u71b1\u8877\u65bc\u95b1\u8b80\uff1a\",\n        options: [\n          { id: 'A', text: \"\u8ecd\u4e8b\u8207\u653f\u6cbb\u7684\u5be6\u4e8b\u8a18\u8f09\u3002\", score: 0 },\n          { id: 'B', text: \"\u4e0d\u4e00\u5b9a\u3002\", score: 1 },\n          { id: 'C', text: \"\u5bcc\u6709\u60c5\u611f\u548c\u5e7b\u60f3\u7684\u4f5c\u54c1\u3002\", score: 2 }\n        ]\n      },\n      {\n        id: 6,\n        text: \"\u4f60\u9858\u610f\u505a\u4e00\u500b\u6232\u5287\u5de5\u4f5c\u8005\u800c\u4e0d\u9858\u610f\u505a\u4e00\u500b\u6a5f\u68b0\u5de5\u7a0b\u5e2b\u3002\",\n        options: [\n          { id: 'A', text: \"\u662f\u7684\u3002\", score: 2 },\n          { id: 'B', text: \"\u4e0d\u662f\u7684\u3002\", score: 0 },\n          { id: 'C', text: \"\u4e0d\u78ba\u5b9a\u3002\", score: 1 }\n        ]\n      },\n      {\n        id: 7,\n        text: \"\u4f60\u6240\u6c89\u8ff7\u7684\u97f3\u6a02\u662f\uff1a\",\n        options: [\n          { id: 'A', text: \"\u5bcc\u6709\u611f\u60c5\u7684\u3002\", score: 2 },\n          { id: 'B', text: \"\u8f15\u9b06\u6d3b\u6f51\u7684\u3002\", score: 0 },\n          { id: 'C', text: \"\u4ecb\u65bc\u6d3b\u6f51\u548c\u611f\u60c5\u4e4b\u9593\u7684\u3002\", score: 1 }\n        ]\n      },\n      {\n        id: 8,\n        text: \"\u4f60\u611b\u60f3\u5165\u975e\u975e\u3002\",\n        options: [\n          { id: 'A', text: \"\u4e0d\u662f\u7684\u3002\", score: 0 },\n          { id: 'B', text: \"\u4e0d\u4e00\u5b9a\u3002\", score: 1 },\n          { id: 'C', text: \"\u662f\u7684\u3002\", score: 2 }\n        ]\n      },\n      {\n        id: 9,\n        text: \"\u4f60\u8a8d\u70ba\u5c0d\u90a3\u4e9b\u72af\u4e86\u932f\u8aa4\u4f46\u6709\u6587\u5316\u6559\u990a\u7684\u4eba\uff08\u5982\u91ab\u751f\u3001\u6559\u5e2b\u7b49\uff09\u9032\u884c\u4fae\u8fb1\u662f\u4e0d\u61c9\u8a72\u7684\u3002\",\n        options: [\n          { id: 'A', text: \"\u662f\u7684\u3002\", score: 2 },\n          { id: 'B', text: \"\u4e0d\u78ba\u5b9a\u3002\", score: 1 },\n          { id: 'C', text: \"\u4e0d\u662f\u7684\u3002\", score: 0 }\n        ]\n      },\n      {\n        id: 10,\n        text: \"\u5728\u5404\u9580\u8ab2\u7a0b\u4e2d\uff0c\u4f60\u559c\u6b61\uff1a\",\n        options: [\n          { id: 'A', text: \"\u6578\u5b78\u3002\", score: 0 },\n          { id: 'B', text: \"\u4e0d\u78ba\u5b9a\u3002\", score: 1 },\n          { id: 'C', text: \"\u8a9e\u6587\u3002\", score: 2 }\n        ]\n      }\n    ]\n  };\n\n  \/\/ \u6e2c\u9a57\u72c0\u614b\u7ba1\u7406\n  class QuizManager {\n    constructor() {\n      this.currentQuestionIndex = 0;\n      this.answers = [];\n      this.totalScore = 0;\n      \n      this.initializeElements();\n      this.bindEvents();\n    }\n\n    initializeElements() {\n      this.container = document.querySelector('[data-quiz-container=\"personality-test\"]');\n      this.pages = {\n        intro: this.container.querySelector('[data-quiz-page=\"intro\"]'),\n        quiz: this.container.querySelector('[data-quiz-page=\"quiz\"]'),\n        result: this.container.querySelector('[data-quiz-page=\"result\"]')\n      };\n      \n      this.elements = {\n        startBtn: this.container.querySelector('[data-quiz-action=\"start\"]'),\n        prevBtn: this.container.querySelector('[data-quiz-action=\"prev\"]'),\n        restartBtn: this.container.querySelector('[data-quiz-action=\"restart\"]'),\n        progressText: this.container.querySelector('[data-quiz-progress=\"text\"]'),\n        progressBar: this.container.querySelector('[data-quiz-progress=\"bar\"]'),\n        questionText: this.container.querySelector('[data-quiz-question=\"text\"]'),\n        optionsContainer: this.container.querySelector('[data-quiz-options=\"container\"]'),\n        resultType: this.container.querySelector('[data-quiz-result=\"type\"]'),\n        resultScore: this.container.querySelector('[data-quiz-result=\"score\"]'),\n        resultAnalysis: this.container.querySelector('[data-quiz-result=\"analysis\"]'),\n        chartCanvas: this.container.querySelector('[data-quiz-chart=\"canvas\"]')\n      };\n    }\n\n    bindEvents() {\n      this.elements.startBtn?.addEventListener('click', () => this.startQuiz());\n      this.elements.prevBtn?.addEventListener('click', () => this.previousQuestion());\n      this.elements.restartBtn?.addEventListener('click', () => this.restartQuiz());\n      \n      \/\/ \u4f7f\u7528\u4e8b\u4ef6\u59d4\u8a17\u8655\u7406\u9078\u9805\u9ede\u64ca\n      this.elements.optionsContainer?.addEventListener('click', (e) => {\n        const option = e.target.closest('[data-quiz-option]');\n        if (option) {\n          this.selectOption(option);\n        }\n      });\n    }\n\n    startQuiz() {\n      this.showPage('quiz');\n      this.renderQuestion();\n      this.scrollToTop();\n    }\n\n    showPage(pageName) {\n      Object.values(this.pages).forEach(page => {\n        page.style.display = 'none';\n      });\n      this.pages[pageName].style.display = 'block';\n    }\n\n    renderQuestion() {\n      const question = quizData.questions[this.currentQuestionIndex];\n      if (!question) return;\n\n      \/\/ \u66f4\u65b0\u9032\u5ea6\n      this.updateProgress();\n      \n      \/\/ \u66f4\u65b0\u984c\u76ee\n      this.elements.questionText.textContent = question.text;\n      \n      \/\/ \u6e32\u67d3\u9078\u9805\n      this.renderOptions(question.options);\n      \n      \/\/ \u66f4\u65b0\u5c0e\u822a\u6309\u9215\n      this.updateNavigation();\n    }\n\n    updateProgress() {\n      const current = this.currentQuestionIndex + 1;\n      const total = quizData.questions.length;\n      const percentage = (current \/ total) * 100;\n      \n      this.elements.progressText.textContent = `\u7b2c ${current} \u984c\uff0c\u5171 ${total} \u984c`;\n      this.elements.progressBar.style.width = `${percentage}%`;\n    }\n\n    renderOptions(options) {\n      this.elements.optionsContainer.innerHTML = '';\n      \n      options.forEach((option, index) => {\n        const optionElement = document.createElement('button');\n        optionElement.className = 'psyquiz-option';\n        optionElement.setAttribute('data-quiz-option', index);\n        optionElement.setAttribute('data-option-score', option.score);\n        optionElement.setAttribute('role', 'radio');\n        optionElement.setAttribute('aria-checked', 'false');\n        \n        const textSpan = document.createElement('span');\n        textSpan.className = 'psyquiz-option-text';\n        textSpan.textContent = option.text;\n        \n        optionElement.appendChild(textSpan);\n        this.elements.optionsContainer.appendChild(optionElement);\n      });\n    }\n\n    selectOption(optionElement) {\n      \/\/ \u79fb\u9664\u5176\u4ed6\u9078\u9805\u7684\u9078\u4e2d\u72c0\u614b\n      this.elements.optionsContainer.querySelectorAll('.psyquiz-option').forEach(opt => {\n        opt.classList.remove('psyquiz-selected');\n        opt.setAttribute('aria-checked', 'false');\n      });\n      \n      \/\/ \u8a2d\u7f6e\u7576\u524d\u9078\u9805\u70ba\u9078\u4e2d\u72c0\u614b\n      optionElement.classList.add('psyquiz-selected');\n      optionElement.setAttribute('aria-checked', 'true');\n      \n      \/\/ \u8a18\u9304\u7b54\u6848\n      const score = parseInt(optionElement.getAttribute('data-option-score'));\n      this.answers[this.currentQuestionIndex] = score;\n      \n      \/\/ \u5ef6\u9072\u8df3\u8f49\u5230\u4e0b\u4e00\u984c\u6216\u7d50\u675f\u6e2c\u9a57\n      setTimeout(() => {\n        if (this.currentQuestionIndex < quizData.questions.length - 1) {\n          this.nextQuestion();\n        } else {\n          this.finishQuiz();\n        }\n      }, 500);\n    }\n\n    nextQuestion() {\n      this.currentQuestionIndex++;\n      this.renderQuestion();\n      this.scrollToTitle();\n    }\n\n    previousQuestion() {\n      if (this.currentQuestionIndex > 0) {\n        this.currentQuestionIndex--;\n        this.renderQuestion();\n        this.scrollToTitle();\n      }\n    }\n\n    updateNavigation() {\n      \/\/ \u986f\u793a\/\u96b1\u85cf\u4e0a\u4e00\u984c\u6309\u9215\n      if (this.currentQuestionIndex > 0) {\n        this.elements.prevBtn.style.display = 'inline-block';\n      } else {\n        this.elements.prevBtn.style.display = 'none';\n      }\n    }\n\n    finishQuiz() {\n      this.calculateScore();\n      this.showResult();\n      this.showPage('result');\n      this.scrollToTop();\n    }\n\n    calculateScore() {\n      this.totalScore = this.answers.reduce((sum, score) => sum + score, 0);\n    }\n\n    showResult() {\n      const result = this.getResultAnalysis();\n      \n      this.elements.resultType.textContent = result.type;\n      this.elements.resultScore.textContent = `${this.totalScore} \u5206`;\n      \n      \/\/ \u6e32\u67d3\u5206\u6790\u5167\u5bb9\n      this.elements.resultAnalysis.innerHTML = `\n        <h4>${result.title}<\/h4>\n        <p>${result.description}<\/p>\n      `;\n      \n      \/\/ \u5275\u5efa\u5716\u8868\n      this.createChart(result);\n    }\n\n    getResultAnalysis() {\n      if (this.totalScore >= 13) {\n        return {\n          type: \"\u611f\u6027\u578b\u4eba\u683c\",\n          title: \"\u4f60\u662f\u4e00\u500b\u611f\u6027\u7684\u4eba\",\n          description: \"\u4f60\u654f\u611f\u3001\u597d\u611f\u60c5\u7528\u4e8b\uff0c\u901a\u5e38\u5fc3\u8178\u8edf\uff0c\u6613\u53d7\u611f\u52d5\uff0c\u5bcc\u4e8e\u5e7b\u60f3\uff0c\u6709\u6642\u8003\u616e\u554f\u984c\u4e0d\u5207\u5be6\u969b\uff0c\u7f3a\u4e4f\u8010\u6027\u8207\u6046\u5fc3\u3002\u7e3d\u9ad4\u770b\u4f86\u904e\u5206\u5730\u611f\u60c5\u7528\u4e8b\u5bb9\u6613\u76f2\u76ee\u5192\u5931\u3001\u89f8\u72af\u539f\u5247\u3002\u5728\u5718\u9ad4\u6d3b\u52d5\u4e2d\uff0c\u4f60\u6709\u6642\u7531\u65bc\u4e0d\u5207\u5be6\u969b\u7684\u770b\u6cd5\u548c\u884c\u52d5\u800c\u5f71\u97ff\u5718\u9ad4\u7684\u5de5\u4f5c\u6548\u80fd\uff0c\u4e0d\u559c\u6b61\u63a5\u89f8\u7c97\u7377\u7684\u4eba\u53ca\u505a\u7b28\u91cd\u7684\u5de5\u4f5c\uff0c\u4e0d\u9069\u5408\u5f9e\u4e8b\u8981\u6c42\u56b4\u8b39\u614e\u91cd\u3001\u8b1b\u6c42\u5be6\u969b\u7684\u5de5\u4f5c\u3002\u4f60\u53ef\u4ee5\u9078\u64c7\u5408\u4f5c\u6027\u8cea\u7684\u5de5\u4f5c\uff0c\u8207\u5927\u5bb6\u4e00\u8d77\u5e79\uff0c\u9019\u6a23\u53ef\u4ee5\u76e1\u91cf\u907f\u514d\u5931\u8aa4\u3002\",\n          emotionalLevel: 85,\n          rationalLevel: 35,\n          creativityLevel: 80,\n          practicalityLevel: 30\n        };\n      } else if (this.totalScore >= 10) {\n        return {\n          type: \"\u7406\u611f\u5e73\u8861\u578b\",\n          title: \"\u4f60\u6bd4\u8f03\u7406\u667a\u4e5f\u5f88\u73fe\u5be6\",\n          description: \"\u751f\u6d3b\u4e2d\u4e00\u822c\u6027\u7684\u554f\u984c\uff0c\u4f60\u90fd\u80fd\u7406\u667a\u3001\u5ba2\u89c0\u5730\u8655\u7406\uff0c\u4f46\u4ecd\u4e0d\u514d\u6709\u885d\u52d5\u3001\u611f\u60c5\u7528\u4e8b\u7684\u6642\u5019\u3002\u8981\u5b78\u6703\u99d5\u99ad\u81ea\u5df1\u7684\u611f\u60c5\uff0c\u4e0d\u8981\u53d7\u611f\u60c5\u7684\u56f0\u64fe\uff0c\u5728\u60c5\u7dd2\u4e0d\u7a69\u5b9a\u6642\uff0c\u5b78\u6703\u8abf\u6574\u81ea\u5df1\uff0c\u9019\u5c0d\u65bc\u7dca\u5f35\u7684\u5de5\u4f5c\u662f\u5f88\u6709\u5e6b\u52a9\u7684\u3002\",\n          emotionalLevel: 60,\n          rationalLevel: 65,\n          creativityLevel: 55,\n          practicalityLevel: 70\n        };\n      } else {\n        return {\n          type: \"\u7406\u6027\u578b\u4eba\u683c\",\n          title: \"\u4f60\u662f\u4e00\u500b\u7406\u667a\u51b7\u975c\u7684\u4eba\",\n          description: \"\u4f60\u7406\u667a\u3001\u51b7\u975c\uff0c\u6ce8\u91cd\u73fe\u5be6\uff0c\u591a\u4ee5\u5ba2\u89c0\u3001\u7368\u7acb\u7684\u614b\u5ea6\u8655\u7406\u7576\u524d\u7684\u554f\u984c\uff0c\u4e0d\u611b\u5e7b\u60f3\uff0c\u559c\u6b61\u6309\u898f\u77e9\u8fa6\u4e8b\uff0c\u6709\u6642\u53ef\u80fd\u6703\u8868\u73fe\u5f97\u523b\u677f\u3001\u82db\u523b\u548c\u7121\u60c5\uff0c\u751a\u81f3\u6e05\u9ad8\u5b64\u50b2\uff0c\u7f3a\u4e4f\u61c9\u6709\u7684\u9748\u6d3b\u6027\uff0c\u4f46\u9019\u4e26\u4e0d\u59a8\u7919\u4f60\u8207\u4ed6\u4eba\u7684\u4ea4\u5f80\u3002\u5982\u679c\u4f60\u662f\u4e00\u540d\u9818\u5c0e\u4eba\uff0c\u4f60\u6703\u7d66\u4e0b\u5c6c\u4e00\u7a2e\u5a01\u56b4\u7684\u611f\u89ba\uff0c\u4e5f\u6703\u7d66\u5225\u4eba\u4e00\u7a2e\u53ef\u9760\u7684\u611f\u89ba\u3002\",\n          emotionalLevel: 25,\n          rationalLevel: 90,\n          creativityLevel: 35,\n          practicalityLevel: 85\n        };\n      }\n    }\n\n    createChart(result) {\n      const ctx = this.elements.chartCanvas.getContext('2d');\n      \n      \/\/ \u78ba\u4fddChart.js\u5df2\u8f09\u5165\n      if (typeof Chart === 'undefined') {\n        \/\/ \u5982\u679cChart.js\u672a\u52a0\u8f09\uff0c\u5275\u5efa\u5099\u7528\u7684CSS\u53ef\u8996\u5316\n        this.createFallbackChart(result);\n        return;\n      }\n      \n      new Chart(ctx, {\n        type: 'radar',\n        data: {\n          labels: ['\u611f\u6027\u7a0b\u5ea6', '\u7406\u6027\u7a0b\u5ea6', '\u5275\u9020\u529b', '\u5be6\u7528\u6027'],\n          datasets: [{\n            label: '\u4f60\u7684\u4eba\u683c\u7279\u8cea',\n            data: [\n              result.emotionalLevel,\n              result.rationalLevel,\n              result.creativityLevel,\n              result.practicalityLevel\n            ],\n            backgroundColor: 'rgba(102, 126, 234, 0.3)',\n            borderColor: '#667eea',\n            borderWidth: 4,\n            pointBackgroundColor: '#667eea',\n            pointBorderColor: '#ffffff',\n            pointBorderWidth: 3,\n            pointRadius: 8\n          }]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          plugins: {\n            legend: {\n              display: false\n            }\n          },\n          scales: {\n            r: {\n              beginAtZero: true,\n              max: 100,\n              min: 0,\n              ticks: {\n                stepSize: 25,\n                font: {\n                  size: 16,\n                  weight: 'bold'\n                },\n                color: '#000000',\n                backdropColor: 'rgba(255, 255, 255, 0.95)',\n                backdropPadding: 8,\n                showLabelBackdrop: true\n              },\n              pointLabels: {\n                font: {\n                  size: 20,\n                  weight: 'bold',\n                  family: '\"PingFang SC\", \"Microsoft YaHei\", \"SimHei\", sans-serif'\n                },\n                color: '#000000',\n                padding: 35\n              },\n              grid: {\n                color: '#cccccc',\n                lineWidth: 2\n              },\n              angleLines: {\n                color: '#999999',\n                lineWidth: 2\n              }\n            }\n          },\n          elements: {\n            line: {\n              borderWidth: 4\n            },\n            point: {\n              radius: 8,\n              hoverRadius: 10\n            }\n          },\n          layout: {\n            padding: 60\n          }\n        }\n      });\n    }\n\n    createFallbackChart(result) {\n      \/\/ \u5275\u5efa\u5099\u7528\u7684\u689d\u5f62\u5716\u53ef\u8996\u5316\n      const canvas = this.elements.chartCanvas;\n      const container = canvas.parentElement;\n      \n      \/\/ \u96b1\u85cfcanvas\uff0c\u5275\u5efaHTML\u7248\u672c\u7684\u5716\u8868\n      canvas.style.display = 'none';\n      \n      const chartData = [\n        { label: '\u611f\u6027\u7a0b\u5ea6', value: result.emotionalLevel, color: '#667eea' },\n        { label: '\u7406\u6027\u7a0b\u5ea6', value: result.rationalLevel, color: '#764ba2' },\n        { label: '\u5275\u9020\u529b', value: result.creativityLevel, color: '#f093fb' },\n        { label: '\u5be6\u7528\u6027', value: result.practicalityLevel, color: '#a8edea' }\n      ];\n      \n      const fallbackChart = document.createElement('div');\n      fallbackChart.className = 'psyquiz-fallback-chart';\n      fallbackChart.innerHTML = `\n        <div class=\"psyquiz-chart-title\">\u4f60\u7684\u4eba\u683c\u7279\u8cea\u5206\u6790<\/div>\n        ${chartData.map(item => `\n          <div class=\"psyquiz-chart-item\">\n            <div class=\"psyquiz-chart-label\">${item.label}<\/div>\n            <div class=\"psyquiz-chart-bar-container\">\n              <div class=\"psyquiz-chart-bar\" style=\"width: ${item.value}%; background-color: ${item.color};\">\n                <span class=\"psyquiz-chart-value\">${item.value}%<\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n        `).join('')}\n      `;\n      \n      container.appendChild(fallbackChart);\n    }\n\n    restartQuiz() {\n      this.currentQuestionIndex = 0;\n      this.answers = [];\n      this.totalScore = 0;\n      this.showPage('intro');\n      this.scrollToTop();\n    }\n\n    scrollToTop() {\n      this.container.scrollIntoView({ \n        behavior: 'smooth', \n        block: 'start' \n      });\n    }\n\n    scrollToTitle() {\n      const title = this.container.querySelector('.psyquiz-quiz-title');\n      if (title) {\n        title.scrollIntoView({ \n          behavior: 'smooth', \n          block: 'start' \n        });\n      }\n    }\n  }\n\n  \/\/ \u9632\u6296\u51fd\u6578\n  const debounce = (func, wait) => {\n    let timeout;\n    return function executedFunction(...args) {\n      const later = () => {\n        clearTimeout(timeout);\n        func(...args);\n      };\n      clearTimeout(timeout);\n      timeout = setTimeout(later, wait);\n    };\n  };\n\n  \/\/ DOM \u8f09\u5165\u5b8c\u6210\u5f8c\u521d\u59cb\u5316\n  const initQuiz = () => {\n    const container = document.querySelector('[data-quiz-container=\"personality-test\"]');\n    if (container) {\n      new QuizManager();\n    }\n  };\n\n  \/\/ \u7b49\u5f85 DOM \u548c\u6240\u6709\u4f9d\u8cf4\u8f09\u5165\u5b8c\u6210\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', initQuiz);\n  } else {\n    initQuiz();\n  }\n\n  \/\/ \u9632\u6b62\u8207\u5176\u4ed6\u8173\u672c\u885d\u7a81\n  window.PersonalityQuiz = { initQuiz };\n\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u4e3a\u4eba\u5904\u4e16\u662f\u70ed\u60c5\u6fc0\u52a8\u8fd8\u662f\u7406\u667a\u51b7\u9759\uff0c\u4e24\u8005\u5e94\u8be5\u8bf4\u5404\u6709\u957f\u5904\u4e0e\u4e0d\u8db3\uff0c\u91cd\u8981\u7684\u662f\u80fd\u5426\u626c\u957f\u907f\u77ed\u3002\u672c\u95ee\u5377\u670910\u9053\u6d4b\u8bd5\u9898\uff0c\u6bcf\u9898\u6709\u4e09\u4e2a\u9009\u9879\uff0c\u8bf7\u4f60\u770b\u6e05\u695a\u6bcf\u4e00\u9053\u9898\u7684\u610f\u601d\uff0c\u4ee5\u6700\u5feb\u7684\u901f\u5ea6\u8bda\u5b9e\u4f5c\u7b54\uff0c\u6bcf\u9898\u53ea\u9009\u4e00\u9879\u7b54\u6848\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,160],"tags":[232,233],"class_list":["post-2672","post","type-post","status-publish","format-standard","hentry","category-personality","category-attitude-scales","tag-sensibility","tag-rationality"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2672","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=2672"}],"version-history":[{"count":8,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2672\/revisions"}],"predecessor-version":[{"id":10025,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2672\/revisions\/10025"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2672"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2672"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}