{"id":9274,"date":"2025-04-28T10:01:33","date_gmt":"2025-04-28T02:01:33","guid":{"rendered":"https:\/\/xinliceyan.org\/?p=9274"},"modified":"2025-08-04T04:22:03","modified_gmt":"2025-08-03T20:22:03","slug":"affect-scales","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/affect-scales","title":{"rendered":"\u60c5\u611f\u5e73\u8861\u91cf\u8868\u7ebf\u4e0a\u514d\u8d39\u6d4b\u9a8c\uff0810\u9898\uff09"},"content":{"rendered":"<!-- \u5916\u90e8\u4f9d\u8cf4 -->\n<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap\/5.3.3\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-icons\/1.11.3\/font\/bootstrap-icons.min.css\" rel=\"stylesheet\">\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n\n<!-- HTML\u7d50\u69cb -->\n<main class=\"emotion-quiz-wrapper\" id=\"emotionQuizWrapper\">\n  <!-- \u5f15\u5c0e\u9801 -->\n  <section id=\"quizintro9\" data-page=\"intro9\" class=\"quiz-section\">\n    <div class=\"container\">\n      <div class=\"row justify-content-center\">\n        <div class=\"col-12\">\n          <div class=\"card border-0 shadow-lg\">\n            <div class=\"card-body p-4 p-md-5\">\n              <header class=\"text-center mb-4\">\n                <div class=\"intro-icon-wrapper mb-4\">\n                  <div class=\"intro-icon\">\n                    <i class=\"bi bi-heart-pulse fs-1 text-white\"><\/i>\n                  <\/div>\n                <\/div>\n                <h2 class=\"display-6 fw-bold text-primary mb-3\">\u60c5\u611f\u5e73\u8861\u91cf\u8868\u6d4b\u9a8c<\/h2>\n                <p class=\"lead text-muted\">\u4e86\u89e3\u60a8\u7684\u60c5\u611f\u5e73\u8861\u72b6\u6001<\/p>\n              <\/header>\n              \n              <div class=\"intro-description mb-4\">\n                <p class=\"fs-6\">\u60c5\u611f\u5e73\u8861\u91cf\u8868\uff08Affect Balance Scale\uff0cABS\uff09\u7528\u65bc\u6e2c\u67e5\u4e00\u822c\u4eba\u7fa4\u7684\u5fc3\u7406\u6eff\u610f\u7a0b\u5ea6\uff0c\u7531Bradburn\uff081969\uff09\u7de8\u5236\uff0c\u5171\u5305\u542b10\u9053\u63cf\u8ff0\u300c\u904e\u53bb\u5e7e\u5468\u300d\u611f\u53d7\u7684\u662f\u975e\u984c\uff0c\u5176\u4e2d5\u9053\u6d89\u53ca\u7a4d\u6975\u60c5\u611f\uff0c\u53e65\u9053\u6d89\u53ca\u6d88\u6975\u60c5\u611f\u3002<\/p>\n                <p class=\"fs-6\">Bradburn \u7684ABS\u5728\u793e\u4f1a\u5fc3\u7406\u5b66\u7814\u7a76\u4e2d\u5e38\u4f5c\u4e3a\u4e3b\u89c2\u5e78\u798f\u611f\uff08Subjective Well-being\uff09\u7684\u6307\u6807\uff0c\u5c5e\u4e8e\u5fc3\u7406\u5065\u5eb7\u9886\u57df\u7684\u6d4b\u91cf\u5de5\u5177\u3002<\/p>\n              <\/div>\n              \n              <div class=\"row g-4 mb-4\">\n                <div class=\"col-md-4\">\n                  <div class=\"feature-card text-center\">\n                    <div class=\"feature-icon\">\n                      <i class=\"bi bi-clipboard-check fs-2 text-primary\"><\/i>\n                    <\/div>\n                    <h5 class=\"mt-3\">\u4e13\u4e1a\u6d4b\u8bc4<\/h5>\n                    <p class=\"text-muted small\">\u79d1\u5b78\u53ef\u9760\u7684\u5fc3\u7406\u6e2c\u91cf\u5de5\u5177<\/p>\n                  <\/div>\n                <\/div>\n                <div class=\"col-md-4\">\n                  <div class=\"feature-card text-center\">\n                    <div class=\"feature-icon\">\n                      <i class=\"bi bi-speedometer2 fs-2 text-success\"><\/i>\n                    <\/div>\n                    <h5 class=\"mt-3\">\u5373\u65f6\u7ed3\u679c<\/h5>\n                    <p class=\"text-muted small\">\u5b8c\u6210\u6e2c\u9a57\u7acb\u5373\u7372\u5f97\u5206\u6790\u5831\u544a<\/p>\n                  <\/div>\n                <\/div>\n                <div class=\"col-md-4\">\n                  <div class=\"feature-card text-center\">\n                    <div class=\"feature-icon\">\n                      <i class=\"bi bi-bar-chart fs-2 text-info\"><\/i>\n                    <\/div>\n                    <h5 class=\"mt-3\">\u6570\u636e\u89c6\u89c9\u5316<\/h5>\n                    <p class=\"text-muted small\">\u76f4\u89c0\u7684\u5716\u8868\u5c55\u793a\u60a8\u7684\u60c5\u611f\u72c0\u614b<\/p>\n                  <\/div>\n                <\/div>\n              <\/div>\n              \n              <div class=\"text-center\">\n                <button type=\"button\" class=\"btn btn-primary btn-lg px-5 py-3 start-quiz-btn\" data-action=\"start-quiz\">\n                  <i class=\"bi bi-play-circle me-2\"><\/i>\u5f00\u59cb\u6d4b\u9a8c\n                <\/button>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u6e2c\u9a57\u9801 -->\n  <section id=\"quizmain9\" data-page=\"quiz9\" class=\"quiz-section d-none\">\n    <div class=\"container\">\n      <div class=\"row justify-content-center\">\n        <div class=\"col-12\">\n          <div class=\"card border-0 shadow-lg\">\n            <div class=\"card-body p-4 p-md-5\">\n              <header class=\"text-center mb-4\">\n                <h2 class=\"h3 fw-bold text-primary mb-4\">\u60c5\u611f\u5e73\u8861\u91cf\u8868\u6d4b\u9a8c<\/h2>\n                \n                <!-- \u9032\u5ea6\u689d -->\n                <div class=\"progress-wrapper mb-4\">\n                  <div class=\"d-flex justify-content-between align-items-center mb-2\">\n                    <span class=\"fs-6 fw-medium\">\u95ee\u9898\u8fdb\u5ea6<\/span>\n                    <span class=\"badge bg-primary fs-6\" id=\"progressText\">1\/10<\/span>\n                  <\/div>\n                  <div class=\"progress\" style=\"height: 8px;\">\n                    <div class=\"progress-bar bg-gradient\" id=\"progressBar\" \n                         role=\"progressbar\" style=\"width: 10%\" \n                         aria-valuenow=\"10\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n                    <\/div>\n                  <\/div>\n                <\/div>\n              <\/header>\n              \n              <!-- \u554f\u984c\u5bb9\u5668 -->\n              <div id=\"questionContainer\" class=\"question-container mb-4\">\n                <!-- \u554f\u984c\u5167\u5bb9\u5c07\u7531JavaScript\u52d5\u614b\u63d2\u5165 -->\n              <\/div>\n              \n              <!-- \u5c0e\u822a\u6309\u9215 -->\n              <div class=\"text-center\">\n                <button type=\"button\" class=\"btn btn-outline-secondary px-4\" \n                        id=\"prevBtn\" data-action=\"prev-question\" disabled>\n                  <i class=\"bi bi-arrow-left me-2\"><\/i>\u4e0a\u4e00\u9898\n                <\/button>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u7d50\u679c\u9801 -->\n  <section id=\"quizresult9\" data-page=\"result9\" class=\"quiz-section d-none\">\n    <div class=\"container\">\n      <div class=\"row justify-content-center\">\n        <div class=\"col-12\">\n          <div class=\"card border-0 shadow-lg\">\n            <div class=\"card-body p-4 p-md-5\">\n              <header class=\"text-center mb-4\">\n                <h2 class=\"display-6 fw-bold text-primary mb-3\">\u6d4b\u9a8c\u7ed3\u679c<\/h2>\n              <\/header>\n              \n              <!-- \u7d50\u679c\u6458\u8981 -->\n              <div class=\"results-summary mb-5\" id=\"resultsSummary\">\n                <!-- \u7d50\u679c\u6458\u8981\u5c07\u7531JavaScript\u52d5\u614b\u63d2\u5165 -->\n              <\/div>\n              \n              <!-- \u5716\u8868\u5bb9\u5668 -->\n              <div class=\"chart-wrapper mb-5\">\n                <div class=\"row justify-content-center\">\n                  <div class=\"col-lg-10\">\n                    <div class=\"chart-container bg-light rounded p-4\">\n                      <canvas id=\"resultsChart\" width=\"400\" height=\"300\" \n                              aria-label=\"\u60c5\u611f\u5e73\u8861\u56fe\u8868\" role=\"img\">\n                      <\/canvas>\n                    <\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n              \n              <!-- \u8a73\u7d30\u7d50\u679c -->\n              <div class=\"results-details mb-4\" id=\"resultsDetails\">\n                <!-- \u8a73\u7d30\u7d50\u679c\u5c07\u7531JavaScript\u52d5\u614b\u63d2\u5165 -->\n              <\/div>\n              \n              <div class=\"text-center\">\n                <button type=\"button\" class=\"btn btn-primary btn-lg px-5 py-3\" \n                        data-action=\"restart-quiz\">\n                  <i class=\"bi bi-arrow-clockwise me-2\"><\/i>\u91cd\u65b0\u6d4b\u9a8c\n                <\/button>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n<\/main>\n\n<!-- CSS\u6a23\u5f0f -->\n<style>\n\/* \u57fa\u790e\u6a23\u5f0f *\/\n.emotion-quiz-wrapper {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Noto Sans TC\", sans-serif;\n  line-height: 1.6;\n  padding: 2rem 0;\n  max-width: 750px;\n  margin: 0 auto;\n}\n\n.quiz-section {\n  padding: 2rem 0;\n}\n\n\/* \u5f15\u5c0e\u9801\u6a23\u5f0f *\/\n.intro-icon-wrapper {\n  display: flex;\n  justify-content: center;\n}\n\n.intro-icon {\n  width: 100px;\n  height: 100px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, #667eea, #764ba2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);\n  animation: float 3s ease-in-out infinite;\n}\n\n@keyframes float {\n  0%, 100% { transform: translateY(0px); }\n  50% { transform: translateY(-10px); }\n}\n\n.feature-card {\n  padding: 1.5rem 1rem;\n  border-radius: 12px;\n  background: rgba(102, 126, 234, 0.05);\n  transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.feature-card:hover {\n  transform: translateY(-5px);\n  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);\n}\n\n.start-quiz-btn {\n  background: linear-gradient(135deg, #667eea, #764ba2);\n  border: none;\n  border-radius: 50px;\n  font-weight: 600;\n  letter-spacing: 0.5px;\n  transition: all 0.3s ease;\n  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);\n}\n\n.start-quiz-btn:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);\n  background: linear-gradient(135deg, #5a67d8, #6b46c1);\n}\n\n\/* \u6e2c\u9a57\u9801\u6a23\u5f0f *\/\n.progress-wrapper {\n  max-width: 400px;\n  margin: 0 auto;\n}\n\n.question-container {\n  min-height: 300px;\n}\n\n.question-text {\n  font-size: 22px !important;\n  font-weight: 700 !important;\n  color: #2d3748;\n  margin-bottom: 2rem;\n  line-height: 1.4;\n}\n\n\/* \u9078\u9805\u5361\u7247\u6a23\u5f0f *\/\n.option-card {\n  cursor: pointer;\n  transition: all 0.3s ease;\n  border: 2px solid #e2e8f0 !important;\n  margin-bottom: 0.75rem;\n  position: relative;\n  background: #ffffff !important;\n}\n\n.option-card:hover {\n  border-color: #667eea !important;\n  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);\n  transform: translateY(-2px);\n}\n\n.option-card.selected {\n  border-color: #667eea !important;\n  background: rgba(102, 126, 234, 0.05) !important;\n  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.2);\n}\n\n.option-card .card-body {\n  padding: 1.25rem 1.5rem;\n  display: flex;\n  align-items: center;\n}\n\n.option-indicator {\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  border: 2px solid #cbd5e0;\n  margin-right: 1rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.3s ease;\n  flex-shrink: 0;\n  background: #ffffff;\n}\n\n.option-card:hover .option-indicator {\n  border-color: #667eea;\n}\n\n.option-card.selected .option-indicator {\n  border-color: #667eea;\n  background: #667eea;\n  color: #ffffff;\n}\n\n.option-text {\n  font-size: 18px !important;\n  font-weight: 500;\n  color: #2d3748;\n  margin: 0;\n  flex: 1;\n}\n\n.option-card:hover .option-text {\n  color: #2d3748;\n}\n\n.option-card.selected .option-text {\n  color: #2d3748;\n  font-weight: 600;\n}\n\n\/* \u7d50\u679c\u9801\u6a23\u5f0f *\/\n.results-summary {\n  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));\n  border-radius: 16px;\n  padding: 2.5rem 2rem;\n  text-align: center;\n  border: 2px solid rgba(102, 126, 234, 0.2);\n}\n\n.results-summary h3 {\n  font-size: 2rem;\n  font-weight: 700;\n  color: #667eea;\n  margin-bottom: 1rem;\n}\n\n.results-summary p {\n  font-size: 1.1rem;\n  color: #4a5568;\n  margin: 0;\n}\n\n.chart-container {\n  border-radius: 16px;\n  border: 2px solid rgba(102, 126, 234, 0.1);\n}\n\n.results-details {\n  background: #f8fafc;\n  border-radius: 16px;\n  padding: 2rem;\n  border: 2px solid rgba(102, 126, 234, 0.1);\n}\n\n.score-item {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0.75rem 0;\n  border-bottom: 1px solid rgba(102, 126, 234, 0.1);\n}\n\n.score-item:last-child {\n  border-bottom: none;\n}\n\n.score-label {\n  font-weight: 600;\n  font-size: 1.1rem;\n  color: #2d3748;\n}\n\n.score-value {\n  font-weight: 700;\n  font-size: 1.2rem;\n}\n\n.score-positive { color: #38a169; }\n.score-negative { color: #e53e3e; }\n.score-neutral { color: #718096; }\n\n\/* \u97ff\u61c9\u5f0f\u8a2d\u8a08 *\/\n@media (max-width: 768px) {\n  .emotion-quiz-wrapper {\n    padding: 1rem 0;\n  }\n  \n  .quiz-section {\n    padding: 1rem 0;\n  }\n  \n  .question-text {\n    font-size: 20px !important;\n  }\n  \n  .option-text {\n    font-size: 16px !important;\n  }\n  \n  .option-card .card-body {\n    padding: 1rem 1.25rem;\n  }\n  \n  .results-summary {\n    padding: 2rem 1.5rem;\n  }\n  \n  .results-summary h3 {\n    font-size: 1.75rem;\n  }\n}\n\n\/* \u7121\u969c\u7919\u6027\u6539\u9032 *\/\n@media (prefers-reduced-motion: reduce) {\n  * {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n\/* \u78ba\u4fdd\u5728WordPress\u74b0\u5883\u4e2d\u7684\u517c\u5bb9\u6027 *\/\n.emotion-quiz-wrapper * {\n  box-sizing: border-box;\n}\n\n.emotion-quiz-wrapper .card {\n  background: #ffffff !important;\n}\n<\/style>\n\n<!-- JavaScript\u908f\u8f2f -->\n<script>\n(function() {\n  'use strict';\n  \n  \/\/ \u6e2c\u9a57\u6578\u64da\n  const QUIZ_DATA = {\n    questions: [\n      {\n        id: 1,\n        text: \"\u5728\u904e\u53bb\u5e7e\u5468\u88e1\u60a8\u662f\u5426\u611f\u5230\u5c0d\u67d0\u4e8b\u7279\u5225\u71b1\u8877\u6216\u7279\u5225\u611f\u8208\u8da3\uff1f\",\n        options: [\n          { text: \"\u662f\", value: 1 },\n          { text: \"\u5426\", value: 0 }\n        ],\n        type: \"positive\"\n      },\n      {\n        id: 2,\n        text: \"\u5728\u904e\u53bb\u5e7e\u5468\u88e1\u60a8\u662f\u5426\u611f\u5230\u5750\u7acb\u4e0d\u5b89\uff1f\",\n        options: [\n          { text: \"\u662f\", value: -1 },\n          { text: \"\u5426\", value: 0 }\n        ],\n        type: \"negative\"\n      },\n      {\n        id: 3,\n        text: \"\u5728\u904e\u53bb\u5e7e\u5468\u88e1\u60a8\u662f\u5426\u56e0\u70ba\u5225\u4eba\u5c0d\u60a8\u5de5\u4f5c\u7684\u8b9a\u63da\u800c\u611f\u5230\u9a55\u50b2\uff1f\",\n        options: [\n          { text: \"\u662f\", value: 1 },\n          { text: \"\u5426\", value: 0 }\n        ],\n        type: \"positive\"\n      },\n      {\n        id: 4,\n        text: \"\u5728\u904e\u53bb\u5e7e\u5468\u88e1\u60a8\u662f\u5426\u611f\u5230\u5341\u5206\u5b64\u7368\u6216\u9060\u96e2\u4ed6\u4eba\uff1f\",\n        options: [\n          { text: \"\u662f\", value: -1 },\n          { text: \"\u5426\", value: 0 }\n        ],\n        type: \"negative\"\n      },\n      {\n        id: 5,\n        text: \"\u5728\u904e\u53bb\u5e7e\u5468\u88e1\u60a8\u662f\u5426\u7531\u65bc\u5b8c\u6210\u4e86\u67d0\u9805\u5de5\u4f5c\u800c\u611f\u5230\u6109\u5feb\uff1f\",\n        options: [\n          { text: \"\u662f\", value: 1 },\n          { text: \"\u5426\", value: 0 }\n        ],\n        type: \"positive\"\n      },\n      {\n        id: 6,\n        text: \"\u5728\u904e\u53bb\u5e7e\u5468\u88e1\u60a8\u662f\u5426\u611f\u5230\u5fc3\u7169\uff1f\",\n        options: [\n          { text: \"\u662f\", value: -1 },\n          { text: \"\u5426\", value: 0 }\n        ],\n        type: \"negative\"\n      },\n      {\n        id: 7,\n        text: \"\u5728\u904e\u53bb\u5e7e\u5468\u88e1\u60a8\u662f\u5426\u611f\u5230\u5f77\u5f7f\u8655\u5728\u4e16\u754c\u7684\u9802\u5cf0\uff08\u6709\u98c4\u98c4\u7136\u7684\u611f\u89ba\uff09\uff1f\",\n        options: [\n          { text: \"\u662f\", value: 1 },\n          { text: \"\u5426\", value: 0 }\n        ],\n        type: \"positive\"\n      },\n      {\n        id: 8,\n        text: \"\u5728\u904e\u53bb\u5e7e\u5468\u88e1\u60a8\u662f\u5426\u611f\u5230\u6182\u9b31\u6216\u975e\u5e38\u4e0d\u5e78\u798f\uff1f\",\n        options: [\n          { text: \"\u662f\", value: -1 },\n          { text: \"\u5426\", value: 0 }\n        ],\n        type: \"negative\"\n      },\n      {\n        id: 9,\n        text: \"\u5728\u904e\u53bb\u5e7e\u5468\u88e1\u60a8\u662f\u5426\u611f\u5230\u4e8b\u60c5\u5728\u6309\u60a8\u7684\u610f\u9858\u767c\u5c55\uff1f\",\n        options: [\n          { text: \"\u662f\", value: 1 },\n          { text: \"\u5426\", value: 0 }\n        ],\n        type: \"positive\"\n      },\n      {\n        id: 10,\n        text: \"\u5728\u904e\u53bb\u5e7e\u5468\u88e1\u60a8\u662f\u5426\u7531\u65bc\u67d0\u4eba\u7684\u6279\u8a55\u800c\u611f\u5230\u4e0d\u5b89\uff1f\",\n        options: [\n          { text: \"\u662f\", value: -1 },\n          { text: \"\u5426\", value: 0 }\n        ],\n        type: \"negative\"\n      }\n    ]\n  };\n\n  \/\/ \u61c9\u7528\u72c0\u614b\u7ba1\u7406\u985e\n  class EmotionQuizApp {\n    constructor() {\n      this.state = {\n        currentQuestion: 0,\n        answers: new Array(QUIZ_DATA.questions.length).fill(null),\n        results: { positive: 0, negative: 0, balance: 0 },\n        chart: null\n      };\n      \n      this.elements = this.cacheDOM();\n      this.bindEvents();\n    }\n\n    \/\/ \u5feb\u53d6DOM\u5143\u7d20\n    cacheDOM() {\n      return {\n        wrapper: document.getElementById('emotionQuizWrapper'),\n        introSection: document.getElementById('quizintro9'),\n        quizSection: document.getElementById('quizmain9'),\n        resultSection: document.getElementById('quizresult9'),\n        progressText: document.getElementById('progressText'),\n        progressBar: document.getElementById('progressBar'),\n        questionContainer: document.getElementById('questionContainer'),\n        prevBtn: document.getElementById('prevBtn'),\n        resultsSummary: document.getElementById('resultsSummary'),\n        resultsChart: document.getElementById('resultsChart'),\n        resultsDetails: document.getElementById('resultsDetails')\n      };\n    }\n\n    \/\/ \u7d81\u5b9a\u4e8b\u4ef6\n    bindEvents() {\n      \/\/ \u4f7f\u7528\u4e8b\u4ef6\u59d4\u6258\u8655\u7406\u6240\u6709\u6309\u9215\u9ede\u64ca\n      this.elements.wrapper.addEventListener('click', this.handleClick.bind(this));\n      \n      \/\/ \u7a97\u53e3\u8abf\u6574\u5927\u5c0f\u6642\u91cd\u7e6a\u5716\u8868\n      window.addEventListener('resize', this.debounce(() => {\n        if (this.state.chart) {\n          this.state.chart.resize();\n        }\n      }, 250));\n    }\n\n    \/\/ \u9632\u6296\u51fd\u6578\n    debounce(func, delay) {\n      let timeout;\n      return (...args) => {\n        clearTimeout(timeout);\n        timeout = setTimeout(() => func.apply(this, args), delay);\n      };\n    }\n\n    \/\/ \u7d71\u4e00\u4e8b\u4ef6\u8655\u7406\n    handleClick(event) {\n      const target = event.target.closest('[data-action]');\n      if (!target) return;\n\n      const action = target.dataset.action;\n      \n      switch (action) {\n        case 'start-quiz':\n          this.startQuiz();\n          break;\n        case 'prev-question':\n          this.goToPreviousQuestion();\n          break;\n        case 'select-option':\n          this.selectOption(parseInt(target.dataset.optionIndex));\n          break;\n        case 'restart-quiz':\n          this.restartQuiz();\n          break;\n      }\n    }\n\n    \/\/ \u958b\u59cb\u6e2c\u9a57\n    startQuiz() {\n      this.showSection('quiz');\n      this.renderCurrentQuestion();\n      this.scrollToTop();\n    }\n\n    \/\/ \u986f\u793a\u6307\u5b9a\u90e8\u5206\n    showSection(sectionType) {\n      \/\/ \u96b1\u85cf\u6240\u6709\u90e8\u5206\n      [this.elements.introSection, this.elements.quizSection, this.elements.resultSection]\n        .forEach(section => section.classList.add('d-none'));\n      \n      \/\/ \u986f\u793a\u76ee\u6a19\u90e8\u5206\n      switch (sectionType) {\n        case 'intro':\n          this.elements.introSection.classList.remove('d-none');\n          break;\n        case 'quiz':\n          this.elements.quizSection.classList.remove('d-none');\n          break;\n        case 'result':\n          this.elements.resultSection.classList.remove('d-none');\n          break;\n      }\n    }\n\n    \/\/ \u6e32\u67d3\u7576\u524d\u554f\u984c\n    renderCurrentQuestion() {\n      const question = QUIZ_DATA.questions[this.state.currentQuestion];\n      const questionNumber = this.state.currentQuestion + 1;\n      const totalQuestions = QUIZ_DATA.questions.length;\n      \n      \/\/ \u66f4\u65b0\u9032\u5ea6\n      this.elements.progressText.textContent = `${questionNumber}\/${totalQuestions}`;\n      this.elements.progressBar.style.width = `${(questionNumber \/ totalQuestions) * 100}%`;\n      this.elements.progressBar.setAttribute('aria-valuenow', (questionNumber \/ totalQuestions) * 100);\n      \n      \/\/ \u6e32\u67d3\u554f\u984c\n      this.elements.questionContainer.innerHTML = `\n        <div class=\"question-content\">\n          <h3 class=\"question-text\">${question.text}<\/h3>\n          <div class=\"options-container\" role=\"radiogroup\" aria-labelledby=\"question-${question.id}\">\n            ${question.options.map((option, index) => `\n              <div class=\"card option-card ${this.state.answers[this.state.currentQuestion] === index ? 'selected' : ''}\"\n                   data-action=\"select-option\" \n                   data-option-index=\"${index}\"\n                   role=\"radio\"\n                   aria-checked=\"${this.state.answers[this.state.currentQuestion] === index}\"\n                   tabindex=\"0\">\n                <div class=\"card-body\">\n                  <div class=\"option-indicator\">\n                    ${this.state.answers[this.state.currentQuestion] === index ? '<i class=\"bi bi-check-lg\"><\/i>' : ''}\n                  <\/div>\n                  <p class=\"option-text\">${option.text}<\/p>\n                <\/div>\n              <\/div>\n            `).join('')}\n          <\/div>\n        <\/div>\n      `;\n      \n      \/\/ \u66f4\u65b0\u4e0a\u4e00\u984c\u6309\u9215\u72c0\u614b\n      this.elements.prevBtn.disabled = this.state.currentQuestion === 0;\n    }\n\n    \/\/ \u9078\u64c7\u9078\u9805\n    selectOption(optionIndex) {\n      this.state.answers[this.state.currentQuestion] = optionIndex;\n      \n      \/\/ \u66f4\u65b0UI\u986f\u793a\u9078\u4e2d\u72c0\u614b\n      this.elements.questionContainer.querySelectorAll('.option-card').forEach((card, index) => {\n        const indicator = card.querySelector('.option-indicator');\n        if (index === optionIndex) {\n          card.classList.add('selected');\n          card.setAttribute('aria-checked', 'true');\n          indicator.innerHTML = '<i class=\"bi bi-check-lg\"><\/i>';\n        } else {\n          card.classList.remove('selected');\n          card.setAttribute('aria-checked', 'false');\n          indicator.innerHTML = '';\n        }\n      });\n      \n      \/\/ \u5ef6\u9072\u9032\u5165\u4e0b\u4e00\u984c\u4ee5\u63d0\u4f9b\u8996\u89ba\u53cd\u994b\n      setTimeout(() => {\n        if (this.state.currentQuestion === QUIZ_DATA.questions.length - 1) {\n          this.calculateResults();\n          this.showResults();\n        } else {\n          this.state.currentQuestion++;\n          this.renderCurrentQuestion();\n        }\n      }, 300);\n    }\n\n    \/\/ \u8fd4\u56de\u4e0a\u4e00\u984c\n    goToPreviousQuestion() {\n      if (this.state.currentQuestion > 0) {\n        this.state.currentQuestion--;\n        this.renderCurrentQuestion();\n      }\n    }\n\n    \/\/ \u8a08\u7b97\u7d50\u679c\n    calculateResults() {\n      let positive = 0;\n      let negative = 0;\n      \n      QUIZ_DATA.questions.forEach((question, index) => {\n        const answerIndex = this.state.answers[index];\n        if (answerIndex !== null) {\n          const value = question.options[answerIndex].value;\n          if (question.type === 'positive' && value > 0) {\n            positive += value;\n          } else if (question.type === 'negative' && value < 0) {\n            negative += Math.abs(value);\n          }\n        }\n      });\n      \n      this.state.results = {\n        positive,\n        negative,\n        balance: positive - negative\n      };\n    }\n\n    \/\/ \u986f\u793a\u7d50\u679c\n    showResults() {\n      this.showSection('result');\n      this.renderResultsSummary();\n      this.renderResultsChart();\n      this.renderResultsDetails();\n      this.scrollToTop();\n    }\n\n    \/\/ \u6e32\u67d3\u7d50\u679c\u6458\u8981\n    renderResultsSummary() {\n      let title, description, iconClass;\n      \n      if (this.state.results.balance > 1) {\n        title = '\u6b63\u6027\u60c5\u611f\u5360\u4e3b\u5c0e\u5730\u4f4d';\n        description = '\u60a8\u76ee\u524d\u6b63\u6027\u60c5\u611f\u5360\u4e3b\u5c0e\u5730\u4f4d\uff0c\u8868\u793a\u60a8\u8fd1\u671f\u7d93\u6b77\u4e86\u8f03\u591a\u7a4d\u6975\u7684\u60c5\u611f\u9ad4\u9a57\u3002\u60a8\u53ef\u80fd\u611f\u5230\u6eff\u8db3\u3001\u6109\u6085\uff0c\u4e26\u5c0d\u751f\u6d3b\u6709\u8457\u7a4d\u6975\u7684\u770b\u6cd5\u3002';\n        iconClass = 'bi-emoji-smile text-success';\n      } else if (this.state.results.balance >= 0 && this.state.results.balance <= 1) {\n        title = '\u6b63\u6027\u8207\u8ca0\u6027\u60c5\u611f\u5747\u8861';\n        description = '\u60a8\u76ee\u524d\u6b63\u6027\u8207\u8ca0\u6027\u60c5\u611f\u8f03\u70ba\u5747\u8861\uff0c\u9019\u662f\u4e00\u7a2e\u5065\u5eb7\u7684\u60c5\u611f\u72c0\u614b\u3002\u60a8\u53ef\u80fd\u65e2\u6709\u6109\u6085\u7684\u6642\u523b\uff0c\u4e5f\u6709\u4e9b\u8a31\u7169\u60f1\uff0c\u4f46\u7e3d\u9ad4\u4e0a\u4fdd\u6301\u8457\u60c5\u611f\u4e0a\u7684\u5e73\u8861\u3002';\n        iconClass = 'bi-emoji-neutral text-warning';\n      } else {\n        title = '\u8ca0\u6027\u60c5\u611f\u5360\u4e3b\u5c0e\u5730\u4f4d';\n        description = '\u60a8\u76ee\u524d\u8ca0\u6027\u60c5\u611f\u5360\u4e3b\u5c0e\u5730\u4f4d\uff0c\u9019\u8868\u793a\u60a8\u8fd1\u671f\u53ef\u80fd\u7d93\u6b77\u4e86\u8f03\u591a\u7684\u56f0\u96e3\u6216\u58d3\u529b\u3002\u9069\u7576\u5c0b\u6c42\u652f\u6301\u548c\u95dc\u6ce8\u81ea\u6211\u7167\u9867\u53ef\u80fd\u6703\u6709\u6240\u5e6b\u52a9\u3002';\n        iconClass = 'bi-emoji-frown text-danger';\n      }\n      \n      this.elements.resultsSummary.innerHTML = `\n        <div class=\"result-icon mb-3\">\n          <i class=\"${iconClass}\" style=\"font-size: 3rem;\"><\/i>\n        <\/div>\n        <h3>${title}<\/h3>\n        <p>${description}<\/p>\n      `;\n    }\n\n    \/\/ \u6e32\u67d3\u7d50\u679c\u5716\u8868\n    renderResultsChart() {\n      const ctx = this.elements.resultsChart.getContext('2d');\n      \n      \/\/ \u92b7\u6bc0\u73fe\u6709\u5716\u8868\n      if (this.state.chart) {\n        this.state.chart.destroy();\n      }\n      \n      \/\/ \u5275\u5efa\u65b0\u5716\u8868\n      this.state.chart = new Chart(ctx, {\n        type: 'bar',\n        data: {\n          labels: ['\u6b63\u6027\u60c5\u611f', '\u8ca0\u6027\u60c5\u611f', '\u60c5\u611f\u5e73\u8861'],\n          datasets: [{\n            label: '\u5206\u6578',\n            data: [\n              this.state.results.positive,\n              this.state.results.negative,\n              this.state.results.balance\n            ],\n            backgroundColor: [\n              'rgba(56, 161, 105, 0.8)',  \/\/ \u7da0\u8272\n              'rgba(229, 62, 62, 0.8)',   \/\/ \u7d05\u8272\n              'rgba(102, 126, 234, 0.8)'  \/\/ \u85cd\u8272\n            ],\n            borderColor: [\n              'rgba(56, 161, 105, 1)',\n              'rgba(229, 62, 62, 1)',\n              'rgba(102, 126, 234, 1)'\n            ],\n            borderWidth: 2,\n            borderRadius: 8\n          }]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          plugins: {\n            legend: {\n              display: false\n            },\n            tooltip: {\n              backgroundColor: 'rgba(0, 0, 0, 0.8)',\n              titleFont: { size: 16 },\n              bodyFont: { size: 14 },\n              cornerRadius: 8,\n              callbacks: {\n                label: (context) => {\n                  return `\u5206\u6578: ${context.raw}`;\n                }\n              }\n            }\n          },\n          scales: {\n            y: {\n              beginAtZero: true,\n              max: 5,\n              ticks: {\n                stepSize: 1,\n                font: { size: 14 }\n              },\n              grid: {\n                color: 'rgba(0, 0, 0, 0.1)'\n              }\n            },\n            x: {\n              ticks: {\n                font: { size: 18 }\n              },\n              grid: {\n                display: false\n              }\n            }\n          }\n        }\n      });\n    }\n\n    \/\/ \u6e32\u67d3\u7d50\u679c\u8a73\u60c5\n    renderResultsDetails() {\n      const positivePercentage = Math.round((this.state.results.positive \/ 5) * 100);\n      const negativePercentage = Math.round((this.state.results.negative \/ 5) * 100);\n      \n      this.elements.resultsDetails.innerHTML = `\n        <h3 class=\"h4 fw-bold text-primary mb-4\">\n          <i class=\"bi bi-graph-up me-2\"><\/i>\u8a73\u7d30\u5206\u6790\n        <\/h3>\n        \n        <div class=\"row g-3 mb-4\">\n          <div class=\"col-md-4\">\n            <div class=\"score-item bg-white rounded p-3 border\">\n              <div class=\"score-label\">\u6b63\u6027\u60c5\u611f<\/div>\n              <div class=\"score-value score-positive\">${this.state.results.positive}\/5<\/div>\n              <div class=\"text-muted small\">${positivePercentage}%<\/div>\n            <\/div>\n          <\/div>\n          <div class=\"col-md-4\">\n            <div class=\"score-item bg-white rounded p-3 border\">\n              <div class=\"score-label\">\u8ca0\u6027\u60c5\u611f<\/div>\n              <div class=\"score-value score-negative\">${this.state.results.negative}\/5<\/div>\n              <div class=\"text-muted small\">${negativePercentage}%<\/div>\n            <\/div>\n          <\/div>\n          <div class=\"col-md-4\">\n            <div class=\"score-item bg-white rounded p-3 border\">\n              <div class=\"score-label\">\u60c5\u611f\u5e73\u8861<\/div>\n              <div class=\"score-value ${this.state.results.balance > 0 ? 'score-positive' : this.state.results.balance < 0 ? 'score-negative' : 'score-neutral'}\">${this.state.results.balance}<\/div>\n              <div class=\"text-muted small\">\u6b63\u8ca0\u5dee\u503c<\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n        \n        <div class=\"analysis-text\">\n          <p class=\"mb-3\">\n            <strong>\u7d50\u679c\u89e3\u8b80\uff1a<\/strong>\u60c5\u611f\u5e73\u8861\u91cf\u8868\u7684\u5206\u6578\u53cd\u6620\u4e86\u60a8\u7576\u524d\u7684\u4e3b\u89c0\u5e78\u798f\u611f\u6c34\u5e73\u3002\u7a4d\u6975\u60c5\u611f\u548c\u6d88\u6975\u60c5\u611f\u662f\u5169\u500b\u76f8\u5c0d\u7368\u7acb\u7684\u7dad\u5ea6\uff0c\u5169\u8005\u7684\u5dee\u503c\uff08\u60c5\u611f\u5e73\u8861\uff09\u53ef\u4ee5\u4f5c\u70ba\u6574\u9ad4\u5fc3\u7406\u5065\u5eb7\u72c0\u614b\u7684\u6307\u6a19\u3002\n          <\/p>\n          <p class=\"mb-0\">\n            <strong>\u5efa\u8b70\uff1a<\/strong>\u7814\u7a76\u8868\u660e\uff0c\u826f\u597d\u7684\u60c5\u611f\u5e73\u8861\u8207\u751f\u6d3b\u6eff\u610f\u5ea6\u3001\u5de5\u4f5c\u7e3e\u6548\u548c\u4eba\u969b\u95dc\u4fc2\u8cea\u91cf\u5448\u6b63\u76f8\u95dc\u3002\u5982\u679c\u60a8\u7684\u8ca0\u6027\u60c5\u611f\u8f03\u9ad8\uff0c\u53ef\u4ee5\u8003\u616e\u589e\u52a0\u6109\u6085\u6d3b\u52d5\u3001\u7df4\u7fd2\u6b63\u5ff5\u51a5\u60f3\u6216\u5c0b\u6c42\u793e\u6703\u652f\u6301\u4f86\u63d0\u5347\u60a8\u7684\u60c5\u611f\u5e73\u8861\u3002\n          <\/p>\n        <\/div>\n      `;\n    }\n\n    \/\/ \u91cd\u65b0\u958b\u59cb\u6e2c\u9a57\n    restartQuiz() {\n      \/\/ \u91cd\u7f6e\u72c0\u614b\n      this.state.currentQuestion = 0;\n      this.state.answers = new Array(QUIZ_DATA.questions.length).fill(null);\n      this.state.results = { positive: 0, negative: 0, balance: 0 };\n      \n      \/\/ \u92b7\u6bc0\u5716\u8868\n      if (this.state.chart) {\n        this.state.chart.destroy();\n        this.state.chart = null;\n      }\n      \n      \/\/ \u8fd4\u56de\u5f15\u5c0e\u9801\n      this.showSection('intro');\n      this.scrollToTop();\n    }\n\n    \/\/ \u6efe\u52d5\u5230\u9802\u90e8\n    scrollToTop() {\n      setTimeout(() => {\n        this.elements.wrapper.scrollIntoView({ \n          behavior: 'smooth', \n          block: 'start' \n        });\n      }, 100);\n    }\n  }\n\n  \/\/ \u521d\u59cb\u5316\u61c9\u7528\n  const initApp = () => {\n    if (document.getElementById('emotionQuizWrapper')) {\n      new EmotionQuizApp();\n    }\n  };\n\n  \/\/ DOM\u52a0\u8f09\u5b8c\u6210\u5f8c\u521d\u59cb\u5316\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', initApp);\n  } else {\n    initApp();\n  }\n\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u60c5\u611f\u5e73\u8861\u91cf\u8868\uff08Affect Balance Scale\uff0cABS\uff09\u7528\u4e8e\u6d4b\u67e5\u4e00\u822c\u4eba\u7fa4\u7684\u5fc3\u7406\u6ee1\u610f\u7a0b\u5ea6\uff0c\u7531Bradburn\uff081969\uff09\u7f16\u5236\uff0c\u5171\u5305\u542b10\u9053\u63cf\u8ff0\u201c\u8fc7\u53bb\u51e0\u5468\u201d\u611f\u53d7\u7684\u662f\u975e\u9898\uff0c\u5176\u4e2d5\u9053\u6d89\u53ca\u79ef\u6781\u60c5\u611f\uff0c\u53e65\u9053\u6d89\u53ca\u6d88\u6781\u60c5\u611f\u3002<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","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":"default","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":[169,160],"tags":[],"class_list":["post-9274","post","type-post","status-publish","format-standard","hentry","category-psychological-symptom-scales","category-attitude-scales"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/9274","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/comments?post=9274"}],"version-history":[{"count":7,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/9274\/revisions"}],"predecessor-version":[{"id":10245,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/9274\/revisions\/10245"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=9274"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=9274"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=9274"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}