{"id":3184,"date":"2025-03-03T11:20:17","date_gmt":"2025-03-03T03:20:17","guid":{"rendered":"https:\/\/bookmark.tw\/?p=3184"},"modified":"2025-05-09T01:07:13","modified_gmt":"2025-05-08T17:07:13","slug":"ses","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/ses","title":{"rendered":"\u81ea\u5c0a\u91cf\u8868\uff08SES\uff09\u7ebf\u4e0a\u514d\u8d39\u6d4b\u9a8c\uff0810\u9898\uff09"},"content":{"rendered":"<!-- \u7f85\u68ee\u4f2f\u683c\u81ea\u5c0a\u91cf\u8868\u6e2c\u9a57 -->\n<div id=\"ses-test-container\" class=\"ses-container\">\n  <!-- \u5c0e\u5f15\u9801 -->\n  <div id=\"ses-intro-page\" class=\"ses-page ses-active\">\n    <h2 class=\"ses-title\">\u7f57\u68ee\u4f2f\u683c\u81ea\u5c0a\u91cf\u8868\u6d4b\u9a8c<\/h2>\n    <div class=\"ses-intro-content\">\n      <div class=\"ses-intro-icon\">\n        <div class=\"ses-icon-inner\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" width=\"100\" height=\"100\">\n            <path fill=\"none\" d=\"M0 0h24v24H0z\"\/>\n            <path d=\"M12 11.55C9.64 9.35 6.48 8 3 8v11c3.48 0 6.64 1.35 9 3.55 2.36-2.19 5.52-3.55 9-3.55V8c-3.48 0-6.64 1.35-9 3.55zM12 8c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3z\" fill=\"currentColor\"\/>\n          <\/svg>\n        <\/div>\n      <\/div>\n      <p class=\"ses-intro-text\">\u81ea\u5c0a\u91cf\u8868(Self-Esteem Scale\uff0cSES)\u662f\u7531Rosenberg \u4e8e1965\u5e74\u7f16\u5236\uff0c\u7528\u4e8e\u8bc4\u5b9a\u4e2a\u4eba\u5173\u4e8e\u81ea\u6211\u4ef7\u503c\u548c\u81ea\u6211\u63a5\u7eb3\u7684\u603b\u4f53\u611f\u53d7\u3002\u4f5c\u4e3a\u5fc3\u7406\u5b66\u754c\u4f7f\u7528\u6700\u5e7f\u6cdb\u7684\u81ea\u5c0a\u6d4b\u91cf\u5de5\u5177\uff0c\u5b83\u5177\u6709\u8f83\u9ad8\u7684\u4fe1\u5ea6\u548c\u6548\u5ea6\u3002<\/p>\n      <p class=\"ses-intro-text\">\u8fd9\u4e2a\u6d4b\u9a8c\u7b80\u660e\u6613\u7528\uff0c\u4ec5\u9700\u51e0\u5206\u949f\u5373\u53ef\u5b8c\u6210\uff0c\u80fd\u76f4\u63a5\u8bc4\u4f30\u60a8\u5bf9\u81ea\u5df1\u7684\u79ef\u6781\u6216\u6d88\u6781\u611f\u53d7\u3002\u5b8c\u6210\u540e\uff0c\u60a8\u5c06\u83b7\u5f97\u4e13\u4e1a\u7684\u81ea\u5c0a\u7a0b\u5ea6\u5206\u6790\u53ca\u76f8\u5173\u5efa\u8bae\u3002<\/p>\n      <div class=\"ses-features\">\n        <div class=\"ses-feature\">\n          <div class=\"ses-feature-icon\">\u23f1\ufe0f<\/div>\n          <div class=\"ses-feature-text\">\u4ec5\u97002 \u5206\u949f<\/div>\n        <\/div>\n        <div class=\"ses-feature\">\n          <div class=\"ses-feature-icon\">\ud83d\udcca<\/div>\n          <div class=\"ses-feature-text\">\u4e13\u4e1a\u5206\u6790<\/div>\n        <\/div>\n        <div class=\"ses-feature\">\n          <div class=\"ses-feature-icon\">\ud83d\udd12<\/div>\n          <div class=\"ses-feature-text\">\u5b8c\u5168\u4fdd\u5bc6<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n    <button id=\"ses-start-btn\" class=\"ses-btn ses-primary-btn\">\u5f00\u59cb\u6d4b\u9a8c<\/button>\n  <\/div>\n\n  <!-- \u6e2c\u9a57\u9801 -->\n  <div id=\"ses-test-page\" class=\"ses-page\">\n    <h2 class=\"ses-title\">\u81ea\u5c0a\u91cf\u8868\u6d4b\u9a8c<\/h2>\n    <div class=\"ses-progress-container\">\n      <div class=\"ses-progress-text\">\u95ee\u9898 <span id=\"ses-current-q\">1<\/span>\/10<\/div>\n      <div class=\"ses-progress-bar\">\n        <div id=\"ses-progress-fill\" class=\"ses-progress-fill\"><\/div>\n      <\/div>\n    <\/div>\n\n    <div id=\"ses-question-container\">\n      <!-- Questions will be inserted here dynamically -->\n    <\/div>\n\n    <div class=\"ses-navigation\">\n      <button id=\"ses-prev-btn\" class=\"ses-btn ses-secondary-btn\">\u4e0a\u4e00\u9898<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- \u7d50\u679c\u9801 -->\n  <div id=\"ses-result-page\" class=\"ses-page\">\n    <h2 class=\"ses-title\">\u6d4b\u9a8c\u7ed3\u679c<\/h2>\n    <div class=\"ses-result-summary\">\n      <div class=\"ses-result-score\">\n        <div id=\"ses-score-display\" class=\"ses-score-circle\">30<\/div>\n        <div class=\"ses-score-label\">\u603b\u5206<\/div>\n      <\/div>\n      <div class=\"ses-result-text\">\n        <h3 id=\"ses-result-title\">\u60a8\u7684\u81ea\u5c0a\u6c34\u5e73<\/h3>\n        <p id=\"ses-result-description\"><\/p>\n        <p id=\"ses-result-suggestion\"><\/p>\n      <\/div>\n    <\/div>\n\n    <div class=\"ses-chart-section\">\n      <div class=\"ses-chart-container\">\n        <canvas id=\"ses-chart\"><\/canvas>\n      <\/div>\n    <\/div>\n\n    <div class=\"ses-dimensions\">\n      <div class=\"ses-dimension\">\n        <h4>\u81ea\u6211\u4ef7\u503c\u611f<\/h4>\n        <div class=\"ses-dimension-bar-container\">\n          <div id=\"ses-dimension-value\" class=\"ses-dimension-bar\"><\/div>\n          <div id=\"ses-dimension-value-text\" class=\"ses-dimension-text\">0%<\/div>\n        <\/div>\n      <\/div>\n      <div class=\"ses-dimension\">\n        <h4>\u81ea\u6211\u63a5\u7eb3<\/h4>\n        <div class=\"ses-dimension-bar-container\">\n          <div id=\"ses-dimension-acceptance\" class=\"ses-dimension-bar\"><\/div>\n          <div id=\"ses-dimension-acceptance-text\" class=\"ses-dimension-text\">0%<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"ses-restart-container\">\n      <button id=\"ses-restart-btn\" class=\"ses-btn ses-primary-btn\">\u91cd\u65b0\u6d4b\u9a8c<\/button>\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n\/* \u9632\u6b62\u6a23\u5f0f\u885d\u7a81\u7684\u524d\u7db4 *\/\n.ses-container {\n  --ses-primary: #6366f1;\n  --ses-primary-dark: #4f46e5;\n  --ses-secondary: #f97316;\n  --ses-text: #1e293b;\n  --ses-background: #f8fafc;\n  --ses-border: #e2e8f0;\n  --ses-shadow: rgba(0, 0, 0, 0.1);\n  \n  font-family: \"PingFang TC\", \"Noto Sans TC\", \"Microsoft JhengHei\", sans-serif;\n  max-width: 800px;\n  margin: 0 auto;\n  background-color: var(--ses-background);\n  border-radius: 16px;\n  box-shadow: 0 10px 25px var(--ses-shadow);\n  padding: 2rem;\n  color: var(--ses-text);\n  line-height: 1.6;\n  overflow: hidden;\n  text-align: left;\n  position: relative;\n}\n\n.ses-title {\n  color: var(--ses-primary);\n  text-align: center;\n  font-size: 2rem;\n  margin-bottom: 1.5rem;\n  font-weight: 700;\n}\n\n.ses-page {\n  display: none;\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.ses-active {\n  display: block;\n  opacity: 1;\n}\n\n\/* \u5c0e\u5f15\u9801\u6a23\u5f0f *\/\n.ses-intro-content {\n  margin-bottom: 2rem;\n}\n\n.ses-intro-icon {\n  text-align: center;\n  margin-bottom: 1.5rem;\n}\n\n.ses-icon-inner {\n  background: linear-gradient(135deg, var(--ses-primary), var(--ses-secondary));\n  width: 120px;\n  height: 120px;\n  border-radius: 50%;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  box-shadow: 0 8px 16px rgba(99, 102, 241, 0.3);\n}\n\n.ses-intro-text {\n  font-size: 1.1rem;\n  margin-bottom: 1.2rem;\n  line-height: 1.7;\n}\n\n.ses-features {\n  display: flex;\n  justify-content: space-around;\n  flex-wrap: wrap;\n  margin: 2rem 0;\n}\n\n.ses-feature {\n  text-align: center;\n  padding: 1rem;\n  margin: 0.5rem;\n  background-color: white;\n  border-radius: 12px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\n  flex: 0 0 calc(33.333% - 2rem);\n  min-width: 120px;\n  transition: transform 0.2s ease;\n}\n\n.ses-feature:hover {\n  transform: translateY(-5px);\n}\n\n.ses-feature-icon {\n  font-size: 2rem;\n  margin-bottom: 0.5rem;\n}\n\n.ses-feature-text {\n  font-weight: 600;\n}\n\n\/* \u6309\u9215\u6a23\u5f0f *\/\n.ses-btn {\n  cursor: pointer;\n  padding: 0.75rem 1.5rem;\n  font-size: 1.1rem;\n  border-radius: 8px;\n  border: none;\n  font-weight: 600;\n  transition: all 0.2s ease;\n  min-height: 44px;\n  min-width: 120px;\n  display: block;\n  margin: 1.5rem auto;\n}\n\n.ses-primary-btn {\n  background: linear-gradient(135deg, var(--ses-primary), var(--ses-primary-dark));\n  color: white;\n  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);\n}\n\n.ses-primary-btn:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);\n}\n\n.ses-secondary-btn {\n  background-color: white;\n  color: var(--ses-primary);\n  border: 2px solid var(--ses-primary);\n}\n\n.ses-secondary-btn:hover {\n  background-color: var(--ses-primary);\n  color: white;\n}\n\n\/* \u6e2c\u9a57\u9801\u6a23\u5f0f *\/\n.ses-progress-container {\n  margin-bottom: 2rem;\n}\n\n.ses-progress-text {\n  text-align: center;\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n  font-size: 1.1rem;\n}\n\n.ses-progress-bar {\n  background-color: var(--ses-border);\n  height: 8px;\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.ses-progress-fill {\n  background: linear-gradient(to right, var(--ses-primary), var(--ses-secondary));\n  height: 100%;\n  width: 10%;\n  transition: width 0.3s ease;\n}\n\n.ses-question {\n  margin-bottom: 2rem;\n}\n\n.ses-question h3 {\n  font-size: 22px;\n  font-weight: 700;\n  margin-bottom: 1.2rem;\n}\n\n.ses-options {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.ses-option {\n  background-color: white;\n  border: 2px solid var(--ses-border);\n  border-radius: 8px;\n  padding: 1rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  font-size: 18px;\n  display: flex;\n  align-items: center;\n  min-height: 44px;\n}\n\n.ses-option:hover {\n  border-color: var(--ses-primary);\n  background-color: rgba(99, 102, 241, 0.05);\n}\n\n.ses-option.selected {\n  background-color: rgba(99, 102, 241, 0.1);\n  border-color: var(--ses-primary);\n  font-weight: 600;\n}\n\n.ses-option-letter {\n  display: inline-block;\n  width: 32px;\n  height: 32px;\n  line-height: 32px;\n  text-align: center;\n  border-radius: 50%;\n  background-color: var(--ses-border);\n  margin-right: 1rem;\n  font-weight: 600;\n  flex-shrink: 0;\n  transition: all 0.2s ease;\n}\n\n.ses-option:hover .ses-option-letter {\n  background-color: var(--ses-primary);\n  color: white;\n}\n\n.ses-option.selected .ses-option-letter {\n  background-color: var(--ses-primary);\n  color: white;\n}\n\n.ses-navigation {\n  display: flex;\n  justify-content: center;\n  margin-top: 2rem;\n}\n\n\/* \u7d50\u679c\u9801\u6a23\u5f0f *\/\n.ses-result-summary {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin-bottom: 2rem;\n}\n\n@media (min-width: 640px) {\n  .ses-result-summary {\n    flex-direction: row;\n    align-items: flex-start;\n  }\n}\n\n.ses-result-score {\n  text-align: center;\n  margin-bottom: 1.5rem;\n  margin-right: 2rem;\n}\n\n.ses-score-circle {\n  width: 120px;\n  height: 120px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, var(--ses-primary), var(--ses-secondary));\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 2.5rem;\n  font-weight: 700;\n  box-shadow: 0 8px 16px rgba(99, 102, 241, 0.3);\n  margin: 0 auto 0.5rem;\n}\n\n.ses-score-label {\n  font-weight: 600;\n  font-size: 1.1rem;\n}\n\n.ses-result-text {\n  flex: 1;\n}\n\n.ses-result-text h3 {\n  font-size: 1.5rem;\n  color: var(--ses-primary);\n  margin-bottom: 1rem;\n  font-weight: 700;\n}\n\n.ses-result-text p {\n  margin-bottom: 1rem;\n  font-size: 1.1rem;\n}\n\n.ses-chart-section {\n  width: 100%;\n  clear: both;\n  margin: 2rem 0;\n}\n\n.ses-chart-container {\n  width: 100%;\n  max-width: 600px;\n  margin: 0 auto;\n  height: 400px;\n  position: relative;\n}\n\n.ses-dimensions {\n  margin: 2rem 0;\n  clear: both;\n}\n\n.ses-dimension {\n  margin-bottom: 1.5rem;\n}\n\n.ses-dimension h4 {\n  font-size: 1.1rem;\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n}\n\n.ses-dimension-bar-container {\n  background-color: var(--ses-border);\n  height: 24px;\n  border-radius: 12px;\n  overflow: hidden;\n  position: relative;\n}\n\n.ses-dimension-bar {\n  background: linear-gradient(to right, var(--ses-primary), var(--ses-secondary));\n  height: 100%;\n  width: 0;\n  transition: width 1s ease;\n}\n\n.ses-dimension-text {\n  position: absolute;\n  right: 1rem;\n  top: 0;\n  line-height: 24px;\n  font-weight: 600;\n  color: white;\n  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n}\n\n.ses-restart-container {\n  clear: both;\n  text-align: center;\n  padding: 1rem 0;\n}\n\n\/* \u97ff\u61c9\u5f0f\u8a2d\u8a08 *\/\n@media (max-width: 640px) {\n  .ses-container {\n    padding: 1.5rem;\n    border-radius: 12px;\n  }\n  \n  .ses-title {\n    font-size: 1.8rem;\n  }\n  \n  .ses-feature {\n    flex: 0 0 calc(50% - 2rem);\n  }\n\n  .ses-chart-container {\n    height: 350px;\n  }\n}\n<\/style>\n\n<script>\n\/\/ \u4f7f\u7528\u7acb\u5373\u57f7\u884c\u51fd\u6578\u8868\u9054\u5f0f(IIFE)\u4fdd\u8b77\u8b8a\u91cf\u4f5c\u7528\u57df\uff0c\u907f\u514d\u8207WordPress\u885d\u7a81\n(function() {\n  \/\/ \u6e2c\u9a57\u6578\u64da\n  const questions = [\n    {\n      id: 1,\n      text: \"\u6211\u611f\u5230\u6211\u662f\u4e00\u500b\u6709\u50f9\u503c\u7684\u4eba\uff0c\u81f3\u5c11\u8207\u5176\u4ed6\u4eba\u5728\u540c\u4e00\u6c34\u5e73\u4e0a\u3002\",\n      reversed: false\n    },\n    {\n      id: 2,\n      text: \"\u6211\u611f\u5230\u6211\u6709\u8a31\u591a\u597d\u7684\u54c1\u8cea\u3002\",\n      reversed: false\n    },\n    {\n      id: 3,\n      text: \"\u6b78\u6839\u7d50\u5e95\uff0c\u6211\u50be\u5411\u65bc\u89ba\u5f97\u81ea\u5df1\u662f\u4e00\u500b\u5931\u6557\u8005\u3002\",\n      reversed: true\n    },\n    {\n      id: 4,\n      text: \"\u6211\u80fd\u50cf\u5927\u591a\u6578\u4eba\u4e00\u6a23\u628a\u4e8b\u60c5\u505a\u597d\u3002\",\n      reversed: false\n    },\n    {\n      id: 5,\n      text: \"\u6211\u611f\u5230\u81ea\u5df1\u503c\u5f97\u81ea\u8c6a\u7684\u5730\u65b9\u4e0d\u591a\u3002\",\n      reversed: true\n    },\n    {\n      id: 6,\n      text: \"\u6211\u5c0d\u81ea\u5df1\u6301\u80af\u5b9a\u614b\u5ea6\u3002\",\n      reversed: false\n    },\n    {\n      id: 7,\n      text: \"\u7e3d\u7684\u4f86\u8aaa\uff0c\u6211\u5c0d\u81ea\u5df1\u662f\u6eff\u610f\u7684\u3002\",\n      reversed: false\n    },\n    {\n      id: 8,\n      text: \"\u6211\u5e0c\u671b\u6211\u80fd\u70ba\u81ea\u5df1\u7372\u5f97\u66f4\u591a\u5c0a\u91cd\u3002\",\n      reversed: true\n    },\n    {\n      id: 9,\n      text: \"\u6211\u78ba\u5be6\u6642\u5e38\u611f\u5230\u6beb\u7121\u7528\u8655\u3002\",\n      reversed: true\n    },\n    {\n      id: 10,\n      text: \"\u6211\u6642\u5e38\u8a8d\u70ba\u81ea\u5df1\u4e00\u7121\u662f\u8655\u3002\",\n      reversed: true\n    }\n  ];\n\n  const options = [\n    { text: \"\u975e\u5e38\u7b26\u5408\", value: \"A\" },\n    { text: \"\u57fa\u672c\u7b26\u5408\", value: \"B\" },\n    { text: \"\u4e0d\u7b26\u5408\", value: \"C\" },\n    { text: \"\u5f88\u4e0d\u7b26\u5408\", value: \"D\" }\n  ];\n\n  const results = [\n    {\n      range: [10, 14],\n      title: \"\u81ea\u5c0a\u6c34\u5e73\u5f88\u4f4e\",\n      description: \"\u60a8\u505a\u4efb\u4f55\u4e8b\u60c5\u90fd\u5c0d\u81ea\u5df1\u6c92\u4fe1\u5fc3\uff0c\u5c0d\u81ea\u5df1\u7684\u8868\u73fe\u5931\u671b\uff0c\u9700\u8981\u5f15\u8d77\u9ad8\u5ea6\u91cd\u8996\uff0c\u61c9\u9069\u7576\u63a1\u53d6\u4e00\u5b9a\u63aa\u65bd\u63d0\u9ad8\u81ea\u5df1\u81ea\u5c0a\u5fc3\u3002\",\n      suggestion: \"\u60a8\u5728\u5fc3\u7406\u65b9\u9762\u904e\u4f4e\u7684\u81ea\u6211\u8a55\u50f9\u53ef\u80fd\u5b58\u5728\u6df1\u5c64\u6b21\u7684\u56e0\u7d20\uff0c\u60a8\u53ef\u4ee5\u5617\u8a66\u9032\u884c\u5fc3\u7406\u8aee\u8a62\uff0c\u8207\u8aee\u8a62\u5e2b\u4e00\u540c\u9032\u884c\u63a2\u7d22\uff0c\u4e26\u5617\u8a66\u53bb\u6539\u8b8a\u9019\u7a2e\u72c0\u6cc1\u3002\"\n    },\n    {\n      range: [15, 19],\n      title: \"\u81ea\u5c0a\u6c34\u5e73\u6bd4\u8f03\u4f4e\",\n      description: \"\u60a8\u96e3\u4ee5\u64fa\u6b63\u5c0d\u5f85\u81ea\u5df1\u7684\u614b\u5ea6\uff0c\u4e0d\u80fd\u5920\u6b63\u78ba\u8a8d\u8b58\u771f\u5be6\u7684\u81ea\u5df1\uff0c\u8a8d\u70ba\u81ea\u5df1\u4e0d\u5982\u5225\u4eba\uff0c\u56de\u907f\u6311\u6230\uff0c\u81ea\u5c0a\u5fc3\u4e0d\u8db3\u3002\",\n      suggestion: \"\u60a8\u53ef\u4ee5\u5617\u8a66\u6bcf\u5929\u8a18\u9304\u7576\u5929\u751f\u6d3b\u4e2d\u60a8\u89ba\u5f97\u60a8\u505a\u7684\u6bd4\u8f03\u597d\u7684\u4e8b\u60c5\uff0c\u53ef\u80fd\u7684\u8a71\u518d\u8a18\u9304\u5728\u505a\u9019\u4e9b\u4e8b\u60c5\u4e4b\u524d\u81ea\u5df1\u7684\u5fc3\u614b\uff0c\u5b9a\u6642\u62ff\u51fa\u4f86\u8a55\u4f30\u4e00\u4e0b\u81ea\u5df1\u7684\u771f\u5be6\u72c0\u6cc1\uff0c\u9019\u5c0d\u60a8\u771f\u6b63\u8a8d\u8b58\u81ea\u5df1\u6703\u5f88\u6709\u5e6b\u52a9\u7684\u3002\"\n    },\n    {\n      range: [20, 29],\n      title: \"\u81ea\u5c0a\u5fc3\u8655\u65bc\u4e2d\u7b49\u6c34\u5e73\",\n      description: \"\u60a8\u73fe\u5728\u7684\u81ea\u5c0a\u5fc3\u8655\u65bc\u4e2d\u7b49\u6c34\u5e73\uff0c\u80fd\u5920\u6b63\u78ba\u7684\u5c0d\u5f85\u81ea\u5df1\u548c\u63a5\u7d0d\u81ea\u5df1\uff0c\u4e0d\u62b1\u6028\uff0c\u6709\u81ea\u5df1\u7684\u898b\u89e3\u548c\u60f3\u6cd5\uff0c\u4ea4\u5f80\u826f\u597d\u3002\",\n      suggestion: \"\u60a8\u5c0d\u81ea\u5df1\u7684\u8a55\u50f9\u8f03\u70ba\u5ba2\u89c0\uff0c\u5982\u679c\u60a8\u80fd\u5920\u6642\u523b\u544a\u8a34\u81ea\u5df1\u300c\u4f60\u53ef\u4ee5\u505a\u7684\u66f4\u597d\u300d\uff0c\u90a3\u9ebc\u60a8\u4e00\u5b9a\u53ef\u4ee5\u505a\u7684\u66f4\u597d\uff0c\u4e0d\u903c\u4e00\u4e0b\u81ea\u5df1\u4f60\u600e\u9ebc\u624d\u80fd\u77e5\u9053\u81ea\u5df1\u6709\u591a\u53b2\u5bb3\u5462\uff1f\"\n    },\n    {\n      range: [30, 34],\n      title: \"\u81ea\u5c0a\u6c34\u5e73\u8f03\u597d\",\n      description: \"\u60a8\u7684\u81ea\u5c0a\u6c34\u5e73\u8f03\u597d\uff0c\u505a\u4e8b\u60c5\u5f88\u6709\u4fe1\u5fc3\u3001\u4e0d\u53d7\u5225\u4eba\u7684\u5f71\u97ff\uff0c\u80fd\u5920\u5f88\u597d\u7684\u63a5\u7d0d\u81ea\u5df1\uff0c\u8a8d\u70ba\u81ea\u5df1\u662f\u6709\u50f9\u503c\u7684\uff0c\u6709\u611b\u5fc3\uff0c\u4eba\u969b\u95dc\u4fc2\u826f\u597d\u3002\",\n      suggestion: \"\u60a8\u7684\u5fc3\u7406\u72c0\u6cc1\u826f\u597d\uff0c\u8acb\u7e7c\u7e8c\u4fdd\u6301\u3002\"\n    },\n    {\n      range: [35, 40],\n      title: \"\u81ea\u5c0a\u6c34\u5e73\u5f88\u597d\",\n      description: \"\u60a8\u7684\u81ea\u5c0a\u6c34\u5e73\u5f88\u597d\u3002\u60a8\u80fd\u5920\u5b8c\u5168\u63a5\u7d0d\u81ea\u5df1\uff0c\u751f\u6d3b\u6709\u5feb\u6a02\u611f\uff0c\u6709\u611b\u5fc3\uff0c\u6a02\u65bc\u5e6b\u52a9\u5225\u4eba\uff0c\u4eba\u969b\u4ea4\u5f80\u5f88\u597d\u3002\",\n      suggestion: \"\u60a8\u7684\u5fc3\u7406\u72c0\u6cc1\u826f\u597d\uff0c\u8acb\u7e7c\u7e8c\u4fdd\u6301\u3002\"\n    }\n  ];\n\n  \/\/ DOM\u5143\u7d20\n  let currentQuestion = 0;\n  let answers = Array(questions.length).fill(null);\n  let sesChart = null;  \/\/ \u5168\u5c40\u53d8\u91cf\u7528\u4e8e\u5b58\u50a8\u56fe\u8868\u5b9e\u4f8b\n  \n  \/\/ \u521d\u59cb\u5316\u51fd\u6578\n  function init() {\n    \/\/ DOM\u5143\u7d20\n    const startBtn = document.getElementById('ses-start-btn');\n    const prevBtn = document.getElementById('ses-prev-btn');\n    const restartBtn = document.getElementById('ses-restart-btn');\n    \n    \/\/ \u4e8b\u4ef6\u76e3\u807d\u5668\n    if (startBtn) startBtn.addEventListener('click', startTest);\n    if (prevBtn) prevBtn.addEventListener('click', showPreviousQuestion);\n    if (restartBtn) restartBtn.addEventListener('click', resetTest);\n    \n    \/\/ \u521d\u59cb\u72c0\u614b\n    if (prevBtn) prevBtn.style.display = 'none';\n  }\n  \n  \/\/ \u958b\u59cb\u6e2c\u9a57\n  function startTest() {\n    const introPage = document.getElementById('ses-intro-page');\n    const testPage = document.getElementById('ses-test-page');\n    \n    if (introPage) introPage.classList.remove('ses-active');\n    if (testPage) testPage.classList.add('ses-active');\n    \n    showQuestion(0);\n    scrollToTop();\n  }\n  \n  \/\/ \u986f\u793a\u554f\u984c\n  function showQuestion(index) {\n    currentQuestion = index;\n    const questionContainer = document.getElementById('ses-question-container');\n    const currentQ = document.getElementById('ses-current-q');\n    const progressFill = document.getElementById('ses-progress-fill');\n    const prevBtn = document.getElementById('ses-prev-btn');\n    \n    if (!questionContainer || !currentQ || !progressFill || !prevBtn) return;\n    \n    \/\/ \u66f4\u65b0\u9032\u5ea6\n    currentQ.textContent = index + 1;\n    progressFill.style.width = `${((index + 1) \/ questions.length) * 100}%`;\n    \n    \/\/ \u986f\u793a\/\u96b1\u85cf\u4e0a\u4e00\u984c\u6309\u9215\n    prevBtn.style.display = index === 0 ? 'none' : 'block';\n    \n    \/\/ \u69cb\u5efa\u554f\u984cHTML\n    const question = questions[index];\n    let html = `\n      <div class=\"ses-question\">\n        <h3>${question.id}. ${question.text}<\/h3>\n        <div class=\"ses-options\">\n    `;\n    \n    options.forEach((option, i) => {\n      const isSelected = answers[index] === i;\n      html += `\n        <div class=\"ses-option ${isSelected ? 'selected' : ''}\" data-index=\"${i}\">\n          <div class=\"ses-option-letter\">${option.value}<\/div>\n          <div class=\"ses-option-text\">${option.text}<\/div>\n        <\/div>\n      `;\n    });\n    \n    html += `<\/div><\/div>`;\n    questionContainer.innerHTML = html;\n    \n    \/\/ \u70ba\u9078\u9805\u6dfb\u52a0\u4e8b\u4ef6\u76e3\u807d\u5668\n    const optionElements = questionContainer.querySelectorAll('.ses-option');\n    optionElements.forEach(option => {\n      option.addEventListener('click', function() {\n        const optionIndex = parseInt(this.getAttribute('data-index'));\n        selectOption(optionIndex);\n      });\n    });\n  }\n  \n  \/\/ \u9078\u64c7\u9078\u9805\n  function selectOption(optionIndex) {\n    answers[currentQuestion] = optionIndex;\n    \n    \/\/ \u986f\u793a\u9078\u4e2d\u72c0\u614b\n    const optionElements = document.querySelectorAll('.ses-option');\n    optionElements.forEach((option, i) => {\n      const index = parseInt(option.getAttribute('data-index'));\n      if (index === optionIndex) {\n        option.classList.add('selected');\n      } else {\n        option.classList.remove('selected');\n      }\n    });\n    \n    \/\/ \u5ef6\u9072\u5f8c\u9032\u5165\u4e0b\u4e00\u984c\u6216\u986f\u793a\u7d50\u679c\n    setTimeout(() => {\n      if (currentQuestion < questions.length - 1) {\n        showQuestion(currentQuestion + 1);\n      } else {\n        showResult();\n      }\n      scrollToTop();\n    }, 300);\n  }\n  \n  \/\/ \u986f\u793a\u4e0a\u4e00\u984c\n  function showPreviousQuestion() {\n    if (currentQuestion > 0) {\n      showQuestion(currentQuestion - 1);\n      scrollToTop();\n    }\n  }\n  \n  \/\/ \u8a08\u7b97\u5f97\u5206\n  function calculateScore() {\n    let totalScore = 0;\n    let valueScore = 0; \/\/ \u81ea\u6211\u50f9\u503c\u611f\u7dad\u5ea6 (1, 2, 4, 6, 7)\n    let acceptanceScore = 0; \/\/ \u81ea\u6211\u63a5\u7d0d\u7dad\u5ea6 (3, 5, 8, 9, 10)\n    \n    answers.forEach((answer, index) => {\n      const question = questions[index];\n      let score;\n      \n      if (question.reversed) {\n        \/\/ \u53cd\u5411\u8a18\u5206\uff1aA=1, B=2, C=3, D=4\n        score = 4 - answer;\n      } else {\n        \/\/ \u6b63\u5411\u8a18\u5206\uff1aA=4, B=3, C=2, D=1\n        score = answer + 1;\n      }\n      \n      totalScore += score;\n      \n      \/\/ \u52a0\u5165\u7dad\u5ea6\u5206\u6578\n      if ([0, 1, 3, 5, 6].includes(index)) { \/\/ \u554f\u984c1, 2, 4, 6, 7\n        valueScore += score;\n      } else { \/\/ \u554f\u984c3, 5, 8, 9, 10\n        acceptanceScore += score;\n      }\n    });\n    \n    return {\n      total: totalScore,\n      valueScore: valueScore,\n      acceptanceScore: acceptanceScore,\n      valuePercentage: (valueScore \/ 20) * 100,\n      acceptancePercentage: (acceptanceScore \/ 20) * 100\n    };\n  }\n  \n  \/\/ \u7372\u53d6\u7d50\u679c\u5206\u6790\n  function getResultAnalysis(score) {\n    for (const result of results) {\n      if (score >= result.range[0] && score <= result.range[1]) {\n        return result;\n      }\n    }\n    return results[2]; \/\/ \u9ed8\u8a8d\u8fd4\u56de\u4e2d\u7b49\u6c34\u5e73\n  }\n\n  \/\/ \u986f\u793a\u7d50\u679c\n  function showResult() {\n    const testPage = document.getElementById('ses-test-page');\n    const resultPage = document.getElementById('ses-result-page');\n    const scoreDisplay = document.getElementById('ses-score-display');\n    const resultTitle = document.getElementById('ses-result-title');\n    const resultDescription = document.getElementById('ses-result-description');\n    const resultSuggestion = document.getElementById('ses-result-suggestion');\n    const valueBar = document.getElementById('ses-dimension-value');\n    const acceptanceBar = document.getElementById('ses-dimension-acceptance');\n    const valueText = document.getElementById('ses-dimension-value-text');\n    const acceptanceText = document.getElementById('ses-dimension-acceptance-text');\n    \n    if (!testPage || !resultPage || !scoreDisplay || !resultTitle || \n        !resultDescription || !resultSuggestion || !valueBar || \n        !acceptanceBar || !valueText || !acceptanceText) return;\n    \n    const scoreData = calculateScore();\n    const analysis = getResultAnalysis(scoreData.total);\n    \n    \/\/ \u66f4\u65b0DOM\n    testPage.classList.remove('ses-active');\n    resultPage.classList.add('ses-active');\n    \n    scoreDisplay.textContent = scoreData.total;\n    resultTitle.textContent = analysis.title;\n    resultDescription.textContent = analysis.description;\n    resultSuggestion.textContent = analysis.suggestion;\n    \n    \/\/ \u66f4\u65b0\u7dad\u5ea6\u689d\n    setTimeout(() => {\n      valueBar.style.width = `${scoreData.valuePercentage}%`;\n      acceptanceBar.style.width = `${scoreData.acceptancePercentage}%`;\n      valueText.textContent = `${Math.round(scoreData.valuePercentage)}%`;\n      acceptanceText.textContent = `${Math.round(scoreData.acceptancePercentage)}%`;\n    }, 100);\n    \n    \/\/ \u5275\u5efa\u5716\u8868\n    createChart(scoreData);\n    \n    scrollToTop();\n  }\n  \n  \/\/ \u5275\u5efa\u5716\u8868\n  function createChart(scoreData) {\n    const canvas = document.getElementById('ses-chart');\n    if (!canvas) return;\n    \n    const ctx = canvas.getContext('2d');\n    \n    \/\/ \u52d5\u614b\u52a0\u8f09Chart.js\n    if (typeof Chart === 'undefined') {\n      const script = document.createElement('script');\n      script.src = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/3.9.1\/chart.min.js';\n      script.onload = function() {\n        renderChart(ctx, scoreData);\n      };\n      document.head.appendChild(script);\n    } else {\n      renderChart(ctx, scoreData);\n    }\n  }\n  \n  \/\/ \u6e32\u67d3\u5716\u8868\n  function renderChart(ctx, scoreData) {\n    \/\/ \u92b7\u6bc0\u820a\u5716\u8868\n    if (sesChart) {\n      sesChart.destroy();\n    }\n    \n    \/\/ \u6e96\u5099\u6578\u64da\n    const chartData = {\n      labels: ['\u81ea\u6211\u80af\u5b9a', '\u81ea\u6211\u50f9\u503c', '\u6210\u5c31\u611f', '\u81ea\u6211\u6eff\u610f\u5ea6', '\u7a4d\u6975\u614b\u5ea6'],\n      datasets: [{\n        label: '\u60a8\u7684\u81ea\u5c0a\u6c34\u5e73',\n        data: [\n          \/\/ \u554f\u984c1: \u81ea\u6211\u80af\u5b9a\n          getQuestionScore(0),\n          \/\/ \u554f\u984c2+4: \u81ea\u6211\u50f9\u503c\n          (getQuestionScore(1) + getQuestionScore(3)) \/ 2,\n          \/\/ \u554f\u984c3+5: \u6210\u5c31\u611f\n          (getQuestionScore(2) + getQuestionScore(4)) \/ 2,\n          \/\/ \u554f\u984c7+8: \u81ea\u6211\u6eff\u610f\u5ea6\n          (getQuestionScore(6) + getQuestionScore(7)) \/ 2,\n          \/\/ \u554f\u984c6+9+10: \u7a4d\u6975\u614b\u5ea6\n          (getQuestionScore(5) + getQuestionScore(8) + getQuestionScore(9)) \/ 3\n        ],\n        backgroundColor: 'rgba(99, 102, 241, 0.2)',\n        borderColor: '#6366f1',\n        pointBackgroundColor: '#6366f1',\n        pointBorderColor: '#fff',\n        pointHoverBackgroundColor: '#fff',\n        pointHoverBorderColor: '#6366f1'\n      }]\n    };\n    \n    \/\/ \u5716\u8868\u914d\u7f6e\n    const chartConfig = {\n      type: 'radar',\n      data: chartData,\n      options: {\n        responsive: true,\n        maintainAspectRatio: false,\n        scales: {\n          r: {\n            angleLines: {\n              color: 'rgba(0, 0, 0, 0.1)'\n            },\n            suggestedMin: 0,\n            suggestedMax: 4,\n            pointLabels: {\n              font: {\n                size: 16,\n                weight: 'bold'\n              }\n            },\n            ticks: {\n              stepSize: 1,\n              backdropColor: 'transparent',\n              font: {\n                size: 14\n              }\n            }\n          }\n        },\n        elements: {\n          line: {\n            tension: 0.2, \/\/ \u4f7f\u7dda\u689d\u66f4\u5e73\u6ed1\n            borderWidth: 3\n          },\n          point: {\n            radius: 5,\n            hoverRadius: 8\n          }\n        },\n        plugins: {\n          legend: {\n            position: 'top',\n            labels: {\n              font: {\n                size: 16\n              },\n              padding: 20\n            }\n          }\n        }\n      }\n    };\n    \n    \/\/ \u5275\u5efa\u5716\u8868\n    sesChart = new Chart(ctx, chartConfig);\n  }\n  \n  \/\/ \u7372\u53d6\u554f\u984c\u5f97\u5206\n  function getQuestionScore(index) {\n    const question = questions[index];\n    const answer = answers[index];\n    \n    if (question.reversed) {\n      \/\/ \u53cd\u5411\u8a18\u5206\uff1aA=1, B=2, C=3, D=4\n      return 4 - answer;\n    } else {\n      \/\/ \u6b63\u5411\u8a18\u5206\uff1aA=4, B=3, C=2, D=1\n      return answer + 1;\n    }\n  }\n  \n  \/\/ \u91cd\u7f6e\u6e2c\u9a57\n  function resetTest() {\n    const resultPage = document.getElementById('ses-result-page');\n    const introPage = document.getElementById('ses-intro-page');\n    \n    if (!resultPage || !introPage) return;\n    \n    currentQuestion = 0;\n    answers = Array(questions.length).fill(null);\n    \n    resultPage.classList.remove('ses-active');\n    introPage.classList.add('ses-active');\n    \n    \/\/ \u92b7\u6bc0\u5716\u8868\n    if (sesChart) {\n      sesChart.destroy();\n      sesChart = null;\n    }\n    \n    scrollToTop();\n  }\n  \n  \/\/ \u6efe\u52d5\u5230\u9802\u90e8\n  function scrollToTop() {\n    const container = document.getElementById('ses-test-container');\n    if (container) {\n      container.scrollIntoView({ behavior: 'smooth' });\n    }\n  }\n  \n  \/\/ \u7576DOM\u52a0\u8f09\u5b8c\u6210\u5f8c\u521d\u59cb\u5316\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', init);\n  } else {\n    init();\n  }\n})();\n<\/script>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>\u81ea\u5c0a\u91cf\u8868(self-esteem scale\uff0cSES)\u662f\u7531Rosenberg\u4e8e1965\u5e74\u7f16\u5236\u7684\u6700\u521d\u7528\u4ee5\u8bc4\u5b9a\u9752\u5c11\u5e74\u5173\u4e8e\u81ea\u6211\u4ef7\u503c\u548c\u81ea\u6211\u63a5\u7eb3\u7684\u603b\u4f53\u611f\u53d7\u7684\u91cf\u8868\uff0c\u662f\u5fc3\u7406\u5b66\u754c\u4f7f\u7528\u6700\u591a\u7684\u81ea\u5c0a\u6d4b\u91cf\u5de5\u5177, \u5177\u6709\u8f83\u9ad8\u7684\u4fe1\u5ea6\u548c\u6548\u5ea6\u3002\u672c\u91cf\u8868\u5df2\u88ab\u5e7f\u6cdb\u5e94\u7528\uff0c\u5b83\u7b80\u660e\u3001\u6613\u4e8e\u8bc4\u5206\uff0c\u662f\u5bf9\u81ea\u5df1\u7684\u79ef\u6781\u6216\u6d88\u6781\u611f\u53d7\u7684\u76f4\u63a5\u8bc4\u4f30\u3002<\/p>","protected":false},"author":19,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"narrow-width-container","site-content-style":"unboxed","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[167],"tags":[],"class_list":["post-3184","post","type-post","status-publish","format-standard","hentry","category-personality"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/3184","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=3184"}],"version-history":[{"count":9,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/3184\/revisions"}],"predecessor-version":[{"id":10246,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/3184\/revisions\/10246"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=3184"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=3184"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=3184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}