{"id":2619,"date":"2023-10-18T09:47:58","date_gmt":"2023-10-18T01:47:58","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2619"},"modified":"2025-08-21T02:14:57","modified_gmt":"2025-08-20T18:14:57","slug":"self-control","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/self-control","title":{"rendered":"\u81ea\u5236\u529b\u7ebf\u4e0a\u514d\u8d39\u6d4b\u9a8c\uff0826\u9898\uff09"},"content":{"rendered":"<!-- \u5f15\u5165Bootstrap CSS -->\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\n<!-- \u4e3b\u5bb9\u5668 -->\n<main id=\"quiz-self-control-container\" class=\"container-fluid p-0\">\n  <!-- \u5f15\u5c0e\u9801 -->\n  <section id=\"quiz-intro-page\" class=\"min-vh-100 d-flex align-items-center py-5\" data-page=\"intro\">\n    <div class=\"container\">\n      <header class=\"text-center mb-5\">\n        <div class=\"mb-3\">\n          <span class=\"badge bg-primary bg-opacity-10 text-primary px-4 py-2 rounded-pill mb-3 d-inline-block\">\n            <i class=\"bi bi-award me-1\"><\/i>\n            \u5c08\u696d\u5fc3\u7406\u6e2c\u8a55\n          <\/span>\n        <\/div>\n        <h2 class=\"display-4 fw-bold mb-3\">\u81ea\u5236\u529b\u6e2c\u9a57<\/h2>\n        <p class=\"lead text-muted\">\u63a2\u7d22\u60a8\u7684\u81ea\u6211\u63a7\u5236\u80fd\u529b\uff0c\u9081\u5411\u66f4\u597d\u7684\u81ea\u5df1<\/p>\n      <\/header>\n      \n      <div class=\"row g-4 mb-5\">\n        <div class=\"col-md-4\">\n          <div class=\"card h-100 border-0 shadow-sm\">\n            <div class=\"card-body text-center p-4\">\n              <div class=\"rounded-circle bg-primary bg-opacity-10 mx-auto mb-3 d-flex align-items-center justify-content-center position-relative overflow-hidden\" style=\"width: 80px; height: 80px;\">\n                <i class=\"bi bi-shield-check text-primary fs-1 position-relative z-1\"><\/i>\n              <\/div>\n              <h3 class=\"h5 fw-bold\">\u79d1\u5b66\u8bc4\u4f30<\/h3>\n              <p class=\"text-muted mb-0\">\u57fa\u65bc\u5fc3\u7406\u5b78\u7814\u7a76\u8a2d\u8a08\u768426\u9053\u5c08\u696d\u984c\u76ee<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n        <div class=\"col-md-4\">\n          <div class=\"card h-100 border-0 shadow-sm\">\n            <div class=\"card-body text-center p-4\">\n              <div class=\"rounded-circle bg-success bg-opacity-10 mx-auto mb-3 d-flex align-items-center justify-content-center position-relative overflow-hidden\" style=\"width: 80px; height: 80px;\">\n                <i class=\"bi bi-graph-up text-success fs-1 position-relative z-1\"><\/i>\n              <\/div>\n              <h3 class=\"h5 fw-bold\">\u5373\u6642\u5206\u6790<\/h3>\n              <p class=\"text-muted mb-0\">\u5b8c\u6210\u5f8c\u7acb\u5373\u7372\u5f97\u8a73\u7d30\u7684\u5206\u6790\u5831\u544a<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n        <div class=\"col-md-4\">\n          <div class=\"card h-100 border-0 shadow-sm\">\n            <div class=\"card-body text-center p-4\">\n              <div class=\"rounded-circle bg-info bg-opacity-10 mx-auto mb-3 d-flex align-items-center justify-content-center position-relative overflow-hidden\" style=\"width: 80px; height: 80px;\">\n                <i class=\"bi bi-clock-history text-info fs-1 position-relative z-1\"><\/i>\n              <\/div>\n              <h3 class=\"h5 fw-bold\">\u5feb\u901f\u5b8c\u6210<\/h3>\n              <p class=\"text-muted mb-0\">\u53ea\u97005-10\u5206\u9418\u5373\u53ef\u5b8c\u6210\u5168\u90e8\u6e2c\u9a57<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n      \n      <div class=\"text-center mb-5\">\n        <p class=\"fs-5 mb-4\">\u81ea\u5236\u578b\u6027\u683c\u7684\u4eba\u5728\u4efb\u4f55\u60c5\u51b5\u4e0b\u90fd\u80fd\u81ea\u5236\uff0c\u575a\u97e7\u800c\u6781\u6709\u540c\u60c5\u5fc3\u3002\u5bf9\u522b\u4eba\u7684\u5192\u72af\u4e5f\u80fd\u5bb9\u5fcd\uff0c\u56e0\u6b64\uff0c\u81ea\u5236\u578b\u6027\u683c\u7684\u4eba\u5f80\u5f80\u4f1a\u51fa\u4eba\u5934\u5730\u3002<\/p>\n        <p class=\"text-muted mb-4\">\u6e2c\u8a55\u8aaa\u660e\uff1a\u6bcf\u984c\u67095\u500b\u5099\u9078\u7b54\u6848\uff0c\u6839\u64da\u60a8\u7684\u5be6\u969b\u60c5\u6cc1\u9078\u64c7\u6700\u9069\u5408\u7684\u7b54\u6848\u3002<\/p>\n        <button class=\"btn btn-primary btn-lg px-5 py-3 rounded-pill shadow position-relative overflow-hidden\" data-action=\"start-quiz\" style=\"min-width: 200px; min-height: 50px;\">\n          <span class=\"position-relative z-1 d-flex align-items-center\">\n            \u5f00\u59cb\u6d4b\u9a8c \n            <span class=\"badge bg-white text-primary ms-3 px-3 py-1\">\n              5-10\u5206\u9418\n            <\/span>\n            <i class=\"bi bi-arrow-right-circle ms-2\"><\/i>\n          <\/span>\n        <\/button>\n      <\/div>\n    <\/div>\n  <\/section>\n  \n  <!-- \u6e2c\u9a57\u9801 -->\n  <section id=\"quiz-test-page\" class=\"min-vh-100 py-5 d-none opacity-0\" data-page=\"test\">\n    <div class=\"container\">\n      <header class=\"text-center mb-4\">\n        <h2 class=\"h3 fw-bold mb-2\">\u81ea\u5236\u529b\u6e2c\u9a57<\/h2>\n        <div class=\"d-flex justify-content-center align-items-center text-muted small\">\n          <i class=\"bi bi-clock me-1\"><\/i>\n          <span>\u9810\u8a08\u6642\u9593\uff1a5-10\u5206\u9418<\/span>\n          <span class=\"mx-2\">\u2022<\/span>\n          <i class=\"bi bi-list-check me-1\"><\/i>\n          <span>\u517126\u984c<\/span>\n        <\/div>\n      <\/header>\n      \n      <div class=\"mb-4\">\n        <div class=\"d-flex justify-content-between align-items-center mb-2\">\n          <span class=\"text-muted small text-uppercase fw-semibold\">\u6d4b\u9a8c\u8fdb\u5ea6<\/span>\n          <span class=\"badge bg-primary rounded-pill px-3 py-2\" data-element=\"progress-text\">\u554f\u984c 1\/26<\/span>\n        <\/div>\n        <div class=\"progress shadow-sm\" style=\"height: 10px;\">\n          <div class=\"progress-bar bg-gradient\" role=\"progressbar\" data-element=\"progress-bar\" style=\"width: 0%\"><\/div>\n        <\/div>\n      <\/div>\n      \n      <div class=\"card border-0 shadow mb-4\">\n        <div class=\"card-header bg-primary bg-opacity-10 border-0 py-3\">\n          <div class=\"d-flex align-items-center\">\n            <i class=\"bi bi-question-circle-fill text-primary me-2\"><\/i>\n            <span class=\"text-muted small\">\u7576\u524d\u554f\u984c<\/span>\n          <\/div>\n        <\/div>\n        <div class=\"card-body p-4\">\n          <h3 class=\"fs-5 fw-bold mb-4 lh-base text-dark\" data-element=\"question-text\" style=\"font-size: 22px !important;\"><\/h3>\n          <div data-element=\"options-container\">\n            <!-- \u9078\u9805\u5c07\u901a\u904eJavaScript\u52d5\u614b\u751f\u6210 -->\n          <\/div>\n        <\/div>\n      <\/div>\n      \n      <div class=\"text-center mt-5\">\n        <button class=\"btn btn-outline-secondary btn-lg px-4 py-2 rounded-pill d-none\" data-action=\"prev-question\" style=\"min-width: 150px; min-height: 48px;\">\n          <i class=\"bi bi-chevron-left me-2\"><\/i>\n          \u4e0a\u4e00\u9898\n        <\/button>\n      <\/div>\n    <\/div>\n  <\/section>\n  \n  <!-- \u7d50\u679c\u9801 -->\n  <section id=\"quiz-result-page\" class=\"min-vh-100 py-5 d-none opacity-0\" data-page=\"result\">\n    <div class=\"container\">\n      <header class=\"text-center mb-5\">\n        <div class=\"mb-3\">\n          <i class=\"bi bi-trophy-fill text-warning display-4\"><\/i>\n        <\/div>\n        <h2 class=\"display-5 fw-bold mb-2\">\u6e2c\u9a57\u5b8c\u6210\uff01<\/h2>\n        <p class=\"lead text-muted mb-3\">\u60a8\u7684\u81ea\u5236\u529b\u5206\u6790\u5831\u544a\u5df2\u751f\u6210<\/p>\n        <span class=\"badge bg-success rounded-pill px-4 py-2\">\n          <i class=\"bi bi-check-circle me-1\"><\/i>\n          \u5df2\u5b8c\u6210\u5168\u90e826\u984c\n        <\/span>\n      <\/header>\n      \n      <div class=\"mb-5\">\n        <div class=\"card border-0 shadow-sm mb-4\">\n          <div class=\"card-body p-4\">\n            <h3 class=\"h4 fw-bold mb-3 text-center\" data-element=\"score-level\"><\/h3>\n            <p class=\"text-muted text-center mb-4\" data-element=\"score-description\"><\/p>\n            \n            <!-- \u5206\u6578\u5340\u9593\u986f\u793a -->\n            <div class=\"mb-4\">\n              <div class=\"d-flex justify-content-between align-items-center mb-2\">\n                <span class=\"text-muted small\">\u60a8\u7684\u81ea\u5236\u529b\u6c34\u5e73<\/span>\n                <span class=\"badge bg-primary rounded-pill px-3\" data-element=\"score-range\"><\/span>\n              <\/div>\n              <div class=\"progress shadow-sm\" style=\"height: 30px; background-color: #f8f9fa;\">\n                <div class=\"progress-bar bg-gradient progress-bar-striped progress-bar-animated\" role=\"progressbar\" data-element=\"score-bar\" style=\"width: 0%\">\n                  <span class=\"fw-bold\" data-element=\"score-percentage\"><\/span>\n                <\/div>\n              <\/div>\n              <div class=\"d-flex justify-content-between mt-2\">\n                <small class=\"text-muted\">\u5f88\u8584\u5f31<\/small>\n                <small class=\"text-muted\">\u8584\u5f31<\/small>\n                <small class=\"text-muted\">\u4e00\u822c<\/small>\n                <small class=\"text-muted\">\u8f83\u5f3a<\/small>\n                <small class=\"text-muted\">\u5f88\u5f3a<\/small>\n              <\/div>\n            <\/div>\n            \n            <!-- \u7b49\u7d1a\u6307\u793a\u5668 -->\n            <div class=\"row g-2 text-center mt-4\">\n              <div class=\"col\">\n                <div class=\"p-2 rounded-3 border\" data-level-indicator=\"1\">\n                  <small class=\"text-muted d-block\" style=\"font-size: 0.75rem;\">\u5f88\u8584\u5f31<\/small>\n                <\/div>\n              <\/div>\n              <div class=\"col\">\n                <div class=\"p-2 rounded-3 border\" data-level-indicator=\"2\">\n                  <small class=\"text-muted d-block\" style=\"font-size: 0.75rem;\">\u6bd4\u8f03\u8584\u5f31<\/small>\n                <\/div>\n              <\/div>\n              <div class=\"col\">\n                <div class=\"p-2 rounded-3 border\" data-level-indicator=\"3\">\n                  <small class=\"text-muted d-block\" style=\"font-size: 0.75rem;\">\u4e00\u822c<\/small>\n                <\/div>\n              <\/div>\n              <div class=\"col\">\n                <div class=\"p-2 rounded-3 border\" data-level-indicator=\"4\">\n                  <small class=\"text-muted d-block\" style=\"font-size: 0.75rem;\">\u6bd4\u8f03\u5f37<\/small>\n                <\/div>\n              <\/div>\n              <div class=\"col\">\n                <div class=\"p-2 rounded-3 border\" data-level-indicator=\"5\">\n                  <small class=\"text-muted d-block\" style=\"font-size: 0.75rem;\">\u5f88\u5f3a<\/small>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n      \n      <div class=\"row mb-5\">\n        <div class=\"col-lg-10 mx-auto\">\n          <div class=\"card border-0 shadow\">\n            <div class=\"card-header bg-white border-0 pt-4 pb-0\">\n              <h5 class=\"h6 fw-bold mb-0 text-center text-muted\">\n                <i class=\"bi bi-radar me-2\"><\/i>\n                \u80fd\u529b\u7dad\u5ea6\u5206\u6790\n              <\/h5>\n            <\/div>\n            <div class=\"card-body p-4\">\n              <div style=\"height: 400px;\">\n                <canvas id=\"result-chart\"><\/canvas>\n              <\/div>\n              \n              <!-- \u7dad\u5ea6\u8a73\u7d30\u5206\u6578 -->\n              <div class=\"mt-4\" id=\"dimension-bars\">\n                <h6 class=\"text-muted small text-center mb-3\">\u5404\u7dad\u5ea6\u8868\u73fe<\/h6>\n                <div class=\"row g-3\">\n                  <!-- \u5c07\u7531JavaScript\u52d5\u614b\u751f\u6210 -->\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n      \n      <div class=\"card bg-gradient bg-light border-0 mb-5 shadow-sm\">\n        <div class=\"card-body p-4 p-lg-5\">\n          <h4 class=\"h5 fw-bold mb-4 text-center\">\n            <i class=\"bi bi-clipboard-data text-primary me-2\"><\/i>\n            \u8be6\u7ec6\u5206\u6790\u62a5\u544a\n          <\/h4>\n          <div data-element=\"detailed-analysis\"><\/div>\n        <\/div>\n      <\/div>\n      \n      <div class=\"text-center\">\n        <button class=\"btn btn-primary btn-lg px-5 py-3 rounded-pill shadow position-relative overflow-hidden\" data-action=\"restart-quiz\" style=\"min-width: 200px; min-height: 50px;\">\n          <span class=\"position-relative z-1 d-flex align-items-center\">\n            <i class=\"bi bi-arrow-clockwise me-2\"><\/i>\n            \u91cd\u65b0\u6d4b\u8bd5\n            <span class=\"badge bg-white text-primary ms-3 px-3 py-1\">\n              \u518d\u8a66\u4e00\u6b21\n            <\/span>\n          <\/span>\n        <\/button>\n      <\/div>\n    <\/div>\n  <\/section>\n<\/main>\n\n<!-- \u6975\u7c21\u5316\u7684\u5fc5\u8981\u6a23\u5f0f -->\n<style>\n#quiz-self-control-container .list-group-item-action.active {\n  color: #212529 !important;\n}\n#quiz-self-control-container .list-group-item-action.active .flex-grow-1 {\n  color: #212529 !important;\n}\n\/* \u50c5\u4fdd\u7559Bootstrap\u7121\u6cd5\u5be6\u73fe\u7684\u6838\u5fc3\u6a23\u5f0f *\/\n#quiz-self-control-container {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n}\n\n\/* \u5e73\u6ed1\u904e\u6e21 *\/\n#quiz-self-control-container section {\n  transition: opacity 0.3s ease;\n}\n\n#quiz-self-control-container section:not(.d-none) {\n  opacity: 1 !important;\n}\n\n\/* \u9078\u9805\u4ea4\u4e92\u6548\u679c\u589e\u5f37 *\/\n#quiz-self-control-container .list-group-item-action {\n  transition: all 0.2s ease;\n  border-width: 2px !important;\n}\n\n#quiz-self-control-container .list-group-item-action:hover {\n  transform: translateX(5px);\n  border-color: var(--bs-primary) !important;\n  background-color: var(--bs-light);\n}\n\n#quiz-self-control-container .list-group-item-action.active {\n  background-color: rgba(13, 110, 253, 0.1) !important;\n  border-color: var(--bs-primary) !important;\n}\n\n\/* \u6309\u9215\u589e\u5f37\u6548\u679c *\/\n#quiz-self-control-container .btn-primary {\n  transition: all 0.3s ease;\n}\n\n#quiz-self-control-container .btn-primary:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;\n}\n\n\/* \u5361\u7247\u61f8\u505c\u6548\u679c *\/\n#quiz-self-control-container .card {\n  transition: all 0.3s ease;\n}\n\n#quiz-self-control-container .card:hover {\n  transform: translateY(-5px);\n  box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;\n}\n\n\/* \u5716\u6a19\u5bb9\u5668\u61f8\u505c\u7e2e\u653e *\/\n#quiz-self-control-container .card:hover .rounded-circle {\n  transform: scale(1.1);\n}\n\n#quiz-self-control-container .rounded-circle {\n  transition: transform 0.3s ease;\n}\n\n\/* Badge\u52d5\u756b *\/\n#quiz-self-control-container .badge {\n  transition: all 0.2s ease;\n}\n<\/style>\n\n<!-- Chart.js -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n\n<!-- JavaScript -->\n<script>\n(function() {\n  'use strict';\n  \n  \/\/ \u6e2c\u9a57\u6578\u64da\n  const quizData = {\n    questions: [\n      \"\u6211\u5f88\u559c\u611b\u9577\u8dd1\u3001\u9060\u6d89\u3001\u722c\u5c71\u7b49\u9ad4\u80b2\u904b\u52d5\uff0c\u4f46\u4e26\u4e0d\u662f\u56e0\u70ba\u6211\u7684\u8eab\u9ad4\u689d\u4ef6\u9069\u61c9\u9019\u4e9b\u9805\u76ee\uff0c\u800c\u662f\u56e0\u70ba\u9019\u4e9b\u904b\u52d5\u80fd\u5920\u935b\u934a\u6211\u7684\u9ad4\u8cea\u548c\u6bc5\u529b\u3002\",\n      \"\u6211\u7d66\u81ea\u5df1\u8a02\u7684\u8a08\u756b\uff0c\u5e38\u5e38\u56e0\u70ba\u4e3b\u89c0\u539f\u56e0\u4e0d\u80fd\u5982\u671f\u5b8c\u6210\u3002\",\n      \"\u4e00\u822c\u4f86\u8aaa\uff0c\u6211\u6bcf\u5929\u90fd\u6309\u6642\u8d77\u5e8a\uff0c\u4e0d\u7761\u61f6\u89ba\u3002\",\n      \"\u6211\u7684\u4f5c\u606f\u6c92\u6709\u4ec0\u9ebc\u898f\u5f8b\u6027\uff0c\u7d93\u5e38\u96a8\u81ea\u5df1\u7684\u60c5\u7dd2\u548c\u8208\u81f4\u800c\u8b8a\u5316\u3002\",\n      \"\u6211\u4fe1\u5949\u300c\u51e1\u4e8b\u4e0d\u5e79\u5247\u5df2\uff0c\u5e79\u5247\u5fc5\u6210\u300d\u7684\u4fe1\u689d\uff0c\u4e26\u8eab\u9ad4\u529b\u884c\u3002\",\n      \"\u6211\u8a8d\u70ba\u505a\u4e8b\u60c5\u4e0d\u5fc5\u592a\u8a8d\u771f\uff0c\u505a\u5f97\u6210\u5c31\u505a\uff0c\u505a\u4e0d\u6210\u4fbf\u7f77\u3002\",\n      \"\u6211\u505a\u4e00\u4ef6\u4e8b\u60c5\u7684\u7a4d\u6975\u6027\uff0c\u4e3b\u8981\u53d6\u6c7a\u65bc\u9019\u4ef6\u4e8b\u60c5\u7684\u91cd\u8981\u6027\uff0c\u5373\u8a72\u4e0d\u8a72\u505a\uff1b\u800c\u4e0d\u5728\u65bc\u5c0d\u9019\u4ef6\u4e8b\u60c5\u7684\u8208\u8da3\uff0c\u5373\u4e0d\u5728\u65bc\u60f3\u4e0d\u60f3\u505a\u3002\",\n      \"\u6709\u6642\u6211\u8eba\u5728\u5e8a\u4e0a\uff0c\u4e0b\u6c7a\u5fc3\u7b2c\u4e8c\u5929\u8981\u5e79\u4e00\u4ef6\u91cd\u8981\u4e8b\u60c5\uff0c\u4f46\u5230\u7b2c\u4e8c\u5929\u9019\u7a2e\u52c1\u982d\u53c8\u6d88\u5931\u4e86\u3002\",\n      \"\u5728\u5de5\u4f5c\u548c\u5a1b\u6a02\u767c\u751f\u885d\u7a81\u7684\u6642\u5019\uff0c\u5373\u4f7f\u9019\u7a2e\u5a1b\u6a02\u5f88\u6709\u5438\u5f15\u529b\uff0c\u6211\u4e5f\u6703\u99ac\u4e0a\u6c7a\u5b9a\u53bb\u5de5\u4f5c\u3002\",\n      \"\u6211\u5e38\u56e0\u8b80\u4e00\u672c\u5f15\u4eba\u5165\u52dd\u7684\u5c0f\u8aaa\u6216\u770b\u4e00\u51fa\u7cbe\u5f69\u7684\u96fb\u8996\u7bc0\u76ee\u800c\u5fd8\u8a18\u6642\u9593\u3002\",\n      \"\u6211\u4e0b\u6c7a\u5fc3\u8fa6\u6210\u7684\u4e8b\u60c5\uff08\u5982\u7df4\u9577\u8dd1\uff09\uff0c\u7121\u8ad6\u9047\u5230\u4ec0\u9ebc\u56f0\u96e3\uff08\u5982\u8170\u9178\u817f\u75bc\uff09\uff0c\u90fd\u6703\u5805\u6301\u4e0b\u53bb\u3002\",\n      \"\u6211\u5728\u5b78\u7fd2\u548c\u5de5\u4f5c\u4e2d\u9047\u5230\u4e86\u56f0\u96e3\uff0c\u9996\u5148\u60f3\u5230\u7684\u5c31\u662f\u554f\u554f\u5225\u4eba\u6709\u4ec0\u9ebc\u8fa6\u6cd5\u3002\",\n      \"\u6211\u80fd\u9577\u6642\u9593\u505a\u4e00\u4ef6\u4e8b\u60c5\uff0c\u5373\u4f7f\u7260\u67af\u71e5\u7121\u5473\u3002\",\n      \"\u6211\u7684\u8208\u8da3\u591a\u8b8a\uff0c\u505a\u4e8b\u6642\u5e38\u5e38\u662f\u9019\u5c71\u671b\u898b\u90a3\u5c71\u9ad8\u3002\",\n      \"\u6211\u6c7a\u5b9a\u505a\u4e00\u4ef6\u4e8b\u6642\uff0c\u5e38\u5e38\u8aaa\u5e79\u5c31\u5e79\uff0c\u7d55\u4e0d\u62d6\u5ef6\u6216\u8b93\u5b83\u843d\u7a7a\u3002\",\n      \"\u6211\u8fa6\u4e8b\u559c\u6b61\u6311\u5bb9\u6613\u7684\u5148\u505a\uff0c\u96e3\u505a\u7684\u80fd\u62d6\u5c31\u62d6\uff0c\u5be6\u5728\u4e0d\u80fd\u62d6\u6642\uff0c\u5c31\u8d95\u6642\u9593\u505a\u5b8c\uff0c\u6240\u4ee5\u5225\u4eba\u4e0d\u5927\u653e\u5fc3\u8b93\u6211\u5e79\u96e3\u5ea6\u5927\u7684\u5de5\u4f5c\u3002\",\n      \"\u5c0d\u65bc\u5225\u4eba\u7684\u610f\u898b\uff0c\u6211\u5f9e\u4e0d\u76f2\u5f9e\uff0c\u7e3d\u559c\u6b61\u5206\u6790\u3001\u9451\u5225\u4e00\u4e0b\u3002\",\n      \"\u51e1\u662f\u6bd4\u6211\u80fd\u5e79\u7684\u4eba\uff0c\u6211\u4e0d\u5927\u61f7\u7591\u4ed6\u5011\u7684\u770b\u6cd5\u3002\",\n      \"\u6211\u559c\u6b61\u9047\u4e8b\u81ea\u5df1\u62ff\u4e3b\u610f\uff0c\u7576\u7136\u4e5f\u4e0d\u6392\u65a5\u807d\u53d6\u5225\u4eba\u7684\u5efa\u8b70\u3002\",\n      \"\u751f\u6d3b\u4e2d\u9047\u5230\u8907\u96dc\u60c5\u6cc1\u6642\uff0c\u6211\u5e38\u5e38\u8209\u68cb\u4e0d\u5b9a\uff0c\u62ff\u4e0d\u5b9a\u4e3b\u610f\u3002\",\n      \"\u6211\u4e0d\u6015\u505a\u6211\u5f9e\u4f86\u6c92\u6709\u505a\u904e\u7684\u4e8b\u60c5\uff0c\u4e5f\u4e0d\u6015\u4e00\u500b\u4eba\u7368\u7acb\u8ca0\u8cac\u91cd\u8981\u7684\u5de5\u4f5c\uff0c\u6211\u8a8d\u70ba\u9019\u662f\u5c0d\u81ea\u5df1\u5f88\u597d\u7684\u935b\u934a\u3002\",\n      \"\u6211\u751f\u4f86\u81bd\u602f\uff0c\u6c92\u6709\u5341\u4e8c\u5206\u628a\u63e1\u7684\u4e8b\u60c5\uff0c\u6211\u5f9e\u4f86\u4e0d\u6562\u53bb\u505a\u3002\",\n      \"\u6211\u548c\u540c\u4e8b\u3001\u670b\u53cb\u3001\u5bb6\u4eba\u76f8\u8655\u6642\uff0c\u5f88\u6709\u514b\u5236\u80fd\u529b\uff0c\u5f9e\u4e0d\u7121\u7de3\u7121\u6545\u767c\u813e\u6c23\u3002\",\n      \"\u5728\u548c\u5225\u4eba\u722d\u5435\u6642\uff0c\u6211\u660e\u77e5\u81ea\u5df1\u4e0d\u5c0d\uff0c\u537b\u5fcd\u4e0d\u4f4f\u8981\u8aaa\u4e00\u4e9b\u904e\u982d\u8a71\uff0c\u751a\u81f3\u7f75\u5c0d\u65b9\u51e0\u53e5\u3002\",\n      \"\u6211\u5e0c\u671b\u505a\u4e00\u500b\u5805\u5f37\u7684\u3001\u6709\u6bc5\u529b\u7684\u4eba\uff0c\u56e0\u70ba\u6211\u6df1\u4fe1\uff0c\u6709\u5fd7\u8005\u4e8b\u7adf\u6210\u3002\",\n      \"\u6211\u76f8\u4fe1\u6a5f\u9047\uff0c\u5f88\u591a\u4e8b\u5be6\u8b49\u660e\uff0c\u6a5f\u9047\u7684\u4f5c\u7528\u6709\u6642\u5927\u5927\u8d85\u904e\u500b\u4eba\u7684\u52aa\u529b\u3002\"\n    ],\n    options: [\n      { text: \"\u5f88\u7b26\u5408\u81ea\u5df1\u7684\u60c5\u6cc1\", value: \"A\" },\n      { text: \"\u6bd4\u8f03\u7b26\u5408\u81ea\u5df1\u7684\u60c5\u6cc1\", value: \"B\" },\n      { text: \"\u4ecb\u65bc\u7b26\u5408\u8207\u4e0d\u7b26\u5408\u4e4b\u9593\", value: \"C\" },\n      { text: \"\u4e0d\u5927\u7b26\u5408\u81ea\u5df1\u7684\u60c5\u6cc1\", value: \"D\" },\n      { text: \"\u5f88\u4e0d\u7b26\u5408\u81ea\u5df1\u7684\u60c5\u6cc1\", value: \"E\" }\n    ],\n    reverseScoring: [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26],\n    scoring: {\n      regular: { A: 5, B: 4, C: 3, D: 2, E: 1 },\n      reverse: { A: 1, B: 2, C: 3, D: 4, E: 5 }\n    }\n  };\n  \n  \/\/ \u61c9\u7528\u72c0\u614b\n  const appState = {\n    currentQuestion: 0,\n    answers: [],\n    totalScore: 0\n  };\n  \n  \/\/ DOM \u5143\u7d20\n  const container = document.getElementById('quiz-self-control-container');\n  const pages = {\n    intro: document.getElementById('quiz-intro-page'),\n    test: document.getElementById('quiz-test-page'),\n    result: document.getElementById('quiz-result-page')\n  };\n  \n  \/\/ \u7372\u53d6\u5143\u7d20\n  function getElement(selector) {\n    return container.querySelector(selector);\n  }\n  \n  \/\/ \u9801\u9762\u5207\u63db\n  function showPage(pageName) {\n    \/\/ \u96b1\u85cf\u6240\u6709\u9801\u9762\n    Object.values(pages).forEach(page => {\n      page.classList.add('d-none');\n    });\n    \n    \/\/ \u986f\u793a\u76ee\u6a19\u9801\u9762\n    setTimeout(() => {\n      pages[pageName].classList.remove('d-none');\n      pages[pageName].scrollIntoView({ behavior: 'smooth', block: 'start' });\n    }, 100);\n  }\n  \n  \/\/ \u958b\u59cb\u6e2c\u9a57\n  function startQuiz() {\n    appState.currentQuestion = 0;\n    appState.answers = [];\n    appState.totalScore = 0;\n    showPage('test');\n    displayQuestion();\n  }\n  \n  \/\/ \u986f\u793a\u554f\u984c\n  function displayQuestion() {\n    const questionIndex = appState.currentQuestion;\n    const question = quizData.questions[questionIndex];\n    \n    \/\/ \u66f4\u65b0\u9032\u5ea6\n    const progressText = getElement('[data-element=\"progress-text\"]');\n    const progressBar = getElement('[data-element=\"progress-bar\"]');\n    progressText.textContent = `\u554f\u984c ${questionIndex + 1}\/${quizData.questions.length}`;\n    progressBar.style.width = `${((questionIndex + 1) \/ quizData.questions.length) * 100}%`;\n    \n    \/\/ \u66f4\u65b0\u554f\u984c\u6587\u672c\n    const questionText = getElement('[data-element=\"question-text\"]');\n    questionText.textContent = `${questionIndex + 1}. ${question}`;\n    \n    \/\/ \u751f\u6210\u9078\u9805 - \u4f7f\u7528Bootstrap list-group\u7d44\u4ef6\n    const optionsContainer = getElement('[data-element=\"options-container\"]');\n    optionsContainer.innerHTML = '';\n    optionsContainer.className = 'list-group';\n    \n    quizData.options.forEach((option, index) => {\n      const optionButton = document.createElement('button');\n      \/\/ \u4f7f\u7528Bootstrap list-group-item-action \u5be6\u73fe\u66f4\u597d\u7684\u6a23\u5f0f\n      optionButton.className = 'list-group-item list-group-item-action d-flex align-items-center py-3 px-4 mb-2 border rounded-3';\n      optionButton.setAttribute('data-quiz-option', '');\n      optionButton.setAttribute('data-value', option.value);\n      optionButton.style.fontSize = '18px';\n      optionButton.style.minHeight = '65px';\n      optionButton.type = 'button';\n      \n      optionButton.innerHTML = `\n        <span class=\"badge bg-secondary bg-opacity-25 text-dark rounded-circle me-3 d-flex align-items-center justify-content-center\" style=\"width: 36px; height: 36px; font-size: 18px;\">\n          ${option.value}\n        <\/span>\n        <span class=\"flex-grow-1 text-start\">${option.text}<\/span>\n        <i class=\"bi bi-check-circle-fill text-primary ms-2 fs-5\" style=\"display: none;\"><\/i>\n      `;\n      \n      \/\/ \u5982\u679c\u5df2\u7d93\u6709\u7b54\u6848\uff0c\u986f\u793a\u9078\u4e2d\u72c0\u614b\n      if (appState.answers[questionIndex] === option.value) {\n        optionButton.setAttribute('data-selected', 'true');\n        optionButton.classList.add('active', 'border-primary', 'bg-primary', 'bg-opacity-10');\n        optionButton.querySelector('.bi-check-circle-fill').style.display = 'block';\n        optionButton.querySelector('.badge').classList.remove('bg-secondary', 'bg-opacity-25', 'text-dark');\n        optionButton.querySelector('.badge').classList.add('bg-primary', 'text-white');\n      }\n      \n      optionButton.addEventListener('click', () => selectOption(option.value));\n      optionsContainer.appendChild(optionButton);\n    });\n    \n    \/\/ \u66f4\u65b0\u5c0e\u822a\u6309\u9215\n    const prevButton = getElement('[data-action=\"prev-question\"]');\n    if (questionIndex > 0) {\n      prevButton.classList.remove('d-none');\n    } else {\n      prevButton.classList.add('d-none');\n    }\n  }\n  \n  \/\/ \u9078\u64c7\u9078\u9805\n  function selectOption(value) {\n    appState.answers[appState.currentQuestion] = value;\n    \n    \/\/ \u66f4\u65b0\u9078\u4e2d\u72c0\u614b\n    const options = getElement('[data-element=\"options-container\"]').querySelectorAll('[data-quiz-option]');\n    options.forEach(option => {\n      option.setAttribute('data-selected', 'false');\n      option.classList.remove('active', 'border-primary', 'bg-primary', 'bg-opacity-10');\n      option.querySelector('.bi-check-circle-fill').style.display = 'none';\n      const badge = option.querySelector('.badge');\n      badge.classList.remove('bg-primary', 'text-white');\n      badge.classList.add('bg-secondary', 'bg-opacity-25', 'text-dark');\n      \n      if (option.getAttribute('data-value') === value) {\n        option.setAttribute('data-selected', 'true');\n        option.classList.add('active', 'border-primary', 'bg-primary', 'bg-opacity-10');\n        option.querySelector('.bi-check-circle-fill').style.display = 'block';\n        badge.classList.remove('bg-secondary', 'bg-opacity-25', 'text-dark');\n        badge.classList.add('bg-primary', 'text-white');\n      }\n    });\n    \n    \/\/ \u5ef6\u9072\u9032\u5165\u4e0b\u4e00\u984c\n    setTimeout(() => {\n      if (appState.currentQuestion < quizData.questions.length - 1) {\n        appState.currentQuestion++;\n        displayQuestion();\n      } else {\n        calculateResults();\n      }\n    }, 300);\n  }\n  \n  \/\/ \u4e0a\u4e00\u984c\n  function previousQuestion() {\n    if (appState.currentQuestion > 0) {\n      appState.currentQuestion--;\n      displayQuestion();\n    }\n  }\n  \n  \/\/ \u8a08\u7b97\u7d50\u679c\n  function calculateResults() {\n    appState.totalScore = 0;\n    \n    appState.answers.forEach((answer, index) => {\n      const questionNumber = index + 1;\n      const isReverse = quizData.reverseScoring.includes(questionNumber);\n      const scoring = isReverse ? quizData.scoring.reverse : quizData.scoring.regular;\n      appState.totalScore += scoring[answer] || 0;\n    });\n    \n    showResults();\n  }\n  \n  \/\/ \u986f\u793a\u7d50\u679c\n  function showResults() {\n    showPage('result');\n    \n    \/\/ \u78ba\u5b9a\u7b49\u7d1a\u548c\u5340\u9593\n    let level, description, scoreRange, levelIndex;\n    if (appState.totalScore >= 111) {\n      level = \"\u81ea\u5236\u529b\u5f88\u5f37\";\n      description = \"\u60a8\u5177\u6709\u5353\u8d8a\u7684\u81ea\u6211\u63a7\u5236\u80fd\u529b\uff0c\u80fd\u5920\u5728\u5404\u7a2e\u60c5\u6cc1\u4e0b\u4fdd\u6301\u51b7\u975c\u548c\u7406\u6027\u3002\u9019\u662f\u6210\u529f\u4eba\u58eb\u7684\u91cd\u8981\u7279\u8cea\u3002\";\n      scoreRange = \"111-130\u5206\";\n      levelIndex = 5;\n    } else if (appState.totalScore >= 91) {\n      level = \"\u81ea\u5236\u529b\u6bd4\u8f03\u5f37\";\n      description = \"\u60a8\u7684\u81ea\u5236\u529b\u9ad8\u65bc\u5e73\u5747\u6c34\u5e73\uff0c\u80fd\u5920\u5f88\u597d\u5730\u7ba1\u7406\u81ea\u5df1\u7684\u60c5\u7dd2\u548c\u884c\u70ba\u3002\u7e7c\u7e8c\u4fdd\u6301\u9019\u7a2e\u826f\u597d\u72c0\u614b\u3002\";\n      scoreRange = \"91-110\u5206\";\n      levelIndex = 4;\n    } else if (appState.totalScore >= 71) {\n      level = \"\u81ea\u5236\u529b\u4e00\u822c\";\n      description = \"\u60a8\u7684\u81ea\u5236\u529b\u8655\u65bc\u6b63\u5e38\u6c34\u5e73\uff0c\u4f46\u4ecd\u6709\u63d0\u5347\u7a7a\u9593\u3002\u5efa\u8b70\u591a\u7df4\u7fd2\u5ef6\u9072\u6eff\u8db3\u548c\u60c5\u7dd2\u7ba1\u7406\u3002\";\n      scoreRange = \"71-90\u5206\";\n      levelIndex = 3;\n    } else if (appState.totalScore >= 51) {\n      level = \"\u81ea\u5236\u529b\u6bd4\u8f03\u8584\u5f31\";\n      description = \"\u60a8\u7684\u81ea\u5236\u529b\u9700\u8981\u52a0\u5f37\u3002\u5efa\u8b70\u5236\u5b9a\u660e\u78ba\u7684\u76ee\u6a19\u548c\u8a08\u5283\uff0c\u4e26\u5805\u6301\u57f7\u884c\u3002\";\n      scoreRange = \"51-70\u5206\";\n      levelIndex = 2;\n    } else {\n      level = \"\u81ea\u5236\u529b\u5f88\u8584\u5f31\";\n      description = \"\u60a8\u7684\u81ea\u5236\u529b\u660e\u986f\u4e0d\u8db3\uff0c\u9019\u53ef\u80fd\u5f71\u97ff\u5230\u751f\u6d3b\u548c\u5de5\u4f5c\u3002\u5f37\u70c8\u5efa\u8b70\u60a8\u91cd\u8996\u9019\u500b\u554f\u984c\uff0c\u5c0b\u6c42\u6539\u5584\u65b9\u6cd5\u3002\";\n      scoreRange = \"26-50\u5206\";\n      levelIndex = 1;\n    }\n    \n    \/\/ \u66f4\u65b0\u986f\u793a\n    getElement('[data-element=\"score-level\"]').textContent = level;\n    getElement('[data-element=\"score-description\"]').textContent = description;\n    getElement('[data-element=\"score-range\"]').textContent = scoreRange;\n    \n    \/\/ \u8a08\u7b97\u4e26\u986f\u793a\u9032\u5ea6\u689d\n    const scorePercentage = Math.round(((appState.totalScore - 26) \/ (130 - 26)) * 100);\n    const progressBar = getElement('[data-element=\"score-bar\"]');\n    progressBar.style.width = `${scorePercentage}%`;\n    \n    \/\/ \u6839\u64da\u7b49\u7d1a\u8a2d\u7f6e\u9032\u5ea6\u689d\u984f\u8272\n    progressBar.classList.remove('bg-danger', 'bg-warning', 'bg-info', 'bg-success');\n    if (levelIndex <= 2) {\n      progressBar.classList.add('bg-danger');\n    } else if (levelIndex === 3) {\n      progressBar.classList.add('bg-warning');\n    } else {\n      progressBar.classList.add('bg-success');\n    }\n    \n    \/\/ \u9ad8\u4eae\u5c0d\u61c9\u7684\u7b49\u7d1a\u6307\u793a\u5668\n    document.querySelectorAll('[data-level-indicator]').forEach((indicator) => {\n      const indicatorLevel = parseInt(indicator.getAttribute('data-level-indicator'));\n      indicator.classList.remove('border-primary', 'bg-primary', 'bg-opacity-10');\n      indicator.querySelector('small').classList.remove('text-primary', 'fw-bold');\n      indicator.querySelector('small').classList.add('text-muted');\n      \n      if (indicatorLevel === levelIndex) {\n        indicator.classList.add('border-primary', 'bg-primary', 'bg-opacity-10');\n        indicator.querySelector('small').classList.remove('text-muted');\n        indicator.querySelector('small').classList.add('text-primary', 'fw-bold');\n      }\n    });\n    \n    \/\/ \u8a73\u7d30\u5206\u6790\n    const analysisContent = getElement('[data-element=\"detailed-analysis\"]');\n    analysisContent.innerHTML = `\n      <div class=\"mb-4\">\n        <h5 class=\"h6 fw-bold mb-3 d-flex align-items-center\">\n          <i class=\"bi bi-graph-up-arrow text-primary me-2\"><\/i>\n          \u60a8\u7684\u6e2c\u9a57\u7d50\u679c\u5206\u6790\n        <\/h5>\n        <div class=\"alert alert-light border-start border-5 border-primary mb-0\">\n          <p class=\"mb-0\">${getDetailedAnalysis()}<\/p>\n        <\/div>\n      <\/div>\n      <div>\n        <h5 class=\"h6 fw-bold mb-3 d-flex align-items-center\">\n          <i class=\"bi bi-lightbulb text-warning me-2\"><\/i>\n          \u6539\u5584\u5efa\u8b70\n        <\/h5>\n        <div class=\"row g-2\">\n          ${getImprovementSuggestions().map((s, i) => `\n            <div class=\"col-12\">\n              <div class=\"d-flex align-items-start p-3 bg-white rounded-3 border\">\n                <span class=\"badge bg-primary bg-opacity-10 text-primary me-3 mt-1\">${i + 1}<\/span>\n                <p class=\"mb-0 flex-grow-1\">${s}<\/p>\n              <\/div>\n            <\/div>\n          `).join('')}\n        <\/div>\n      <\/div>\n    `;\n    \n    \/\/ \u7e6a\u88fd\u5716\u8868\n    drawChart();\n  }\n  \n  \/\/ \u7372\u53d6\u8a73\u7d30\u5206\u6790\n  function getDetailedAnalysis() {\n    const scorePercentage = Math.round((appState.totalScore \/ 130) * 100);\n    let analysis = `\u60a8\u7684\u81ea\u5236\u529b\u5f97\u5206\u70ba ${appState.totalScore} \u5206\uff0c\u8d85\u904e\u4e86\u7d04 ${scorePercentage}% \u7684\u6e2c\u8a66\u8005\u3002`;\n    \n    const dimensions = analyzeDimensions();\n    analysis += `\u5728\u5404\u500b\u7dad\u5ea6\u4e2d\uff0c\u60a8\u5728${dimensions.strongest}\u65b9\u9762\u8868\u73fe\u6700\u597d\uff0c`;\n    analysis += `\u800c${dimensions.weakest}\u65b9\u9762\u9084\u6709\u63d0\u5347\u7a7a\u9593\u3002`;\n    \n    return analysis;\n  }\n  \n  \/\/ \u5206\u6790\u5404\u500b\u7dad\u5ea6\n  function analyzeDimensions() {\n    const dimensions = {\n      persistence: 0,\n      planning: 0,\n      emotionControl: 0,\n      independence: 0\n    };\n    \n    appState.answers.forEach((answer, index) => {\n      const questionNumber = index + 1;\n      const isReverse = quizData.reverseScoring.includes(questionNumber);\n      const score = isReverse ? quizData.scoring.reverse[answer] : quizData.scoring.regular[answer];\n      \n      if ([1, 3, 5, 11, 13, 15].includes(questionNumber)) {\n        dimensions.persistence += score;\n      } else if ([2, 4, 7, 9].includes(questionNumber)) {\n        dimensions.planning += score;\n      } else if ([23, 24].includes(questionNumber)) {\n        dimensions.emotionControl += score;\n      } else if ([17, 19, 21].includes(questionNumber)) {\n        dimensions.independence += score;\n      }\n    });\n    \n    const dimensionNames = {\n      persistence: '\u5805\u6301\u6027',\n      planning: '\u8a08\u5283\u6027',\n      emotionControl: '\u60c5\u7dd2\u63a7\u5236',\n      independence: '\u7368\u7acb\u6027'\n    };\n    \n    let strongest = '', weakest = '';\n    let maxScore = 0, minScore = 999;\n    \n    for (const [key, value] of Object.entries(dimensions)) {\n      if (value > maxScore) {\n        maxScore = value;\n        strongest = dimensionNames[key];\n      }\n      if (value < minScore) {\n        minScore = value;\n        weakest = dimensionNames[key];\n      }\n    }\n    \n    return { \n      scores: dimensions,\n      strongest, \n      weakest,\n      names: dimensionNames\n    };\n  }\n  \n  \/\/ \u7372\u53d6\u6539\u5584\u5efa\u8b70\n  function getImprovementSuggestions() {\n    const suggestions = [];\n    \n    if (appState.totalScore < 90) {\n      suggestions.push(\"\u5236\u5b9a\u660e\u78ba\u7684\u65e5\u5e38\u8a08\u5283\uff0c\u4e26\u5805\u6301\u57f7\u884c\");\n      suggestions.push(\"\u7df4\u7fd2\u51a5\u60f3\u6216\u6b63\u5ff5\uff0c\u63d0\u5347\u5c08\u6ce8\u529b\");\n      suggestions.push(\"\u8a2d\u5b9a\u5c0f\u76ee\u6a19\uff0c\u9010\u6b65\u57f9\u990a\u6210\u5c31\u611f\");\n    }\n    \n    if (appState.totalScore < 70) {\n      suggestions.push(\"\u5efa\u7acb\u734e\u52f5\u6a5f\u5236\uff0c\u6fc0\u52f5\u81ea\u5df1\u5b8c\u6210\u4efb\u52d9\");\n      suggestions.push(\"\u627e\u4e00\u500b\u81ea\u5236\u529b\u5f37\u7684\u5925\u4f34\u76f8\u4e92\u76e3\u7763\");\n      suggestions.push(\"\u5f9e\u5c0f\u4e8b\u505a\u8d77\uff0c\u9010\u6f38\u63d0\u9ad8\u81ea\u6211\u8981\u6c42\");\n    }\n    \n    suggestions.push(\"\u4fdd\u6301\u898f\u5f8b\u4f5c\u606f\uff0c\u5145\u8db3\u7761\u7720\u6709\u52a9\u65bc\u81ea\u5236\u529b\");\n    suggestions.push(\"\u5b9a\u671f\u904b\u52d5\uff0c\u63d0\u5347\u8eab\u5fc3\u5065\u5eb7\u548c\u610f\u5fd7\u529b\");\n    \n    return suggestions;\n  }\n  \n  \/\/ \u7e6a\u88fd\u5716\u8868\n  function drawChart() {\n    const canvas = document.getElementById('result-chart');\n    const ctx = canvas.getContext('2d');\n    \n    if (window.quizChart) {\n      window.quizChart.destroy();\n    }\n    \n    const dimensions = analyzeDimensions();\n    \n    \/\/ \u4f7f\u7528Bootstrap\u7684\u984f\u8272\u8b8a\u91cf\n    const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--bs-primary') || '#0d6efd';\n    \n    window.quizChart = new Chart(ctx, {\n      type: 'radar',\n      data: {\n        labels: Object.values(dimensions.names),\n        datasets: [{\n          label: '\u60a8\u7684\u80fd\u529b\u5206\u5e03',\n          data: Object.values(dimensions.scores),\n          backgroundColor: primaryColor + '33', \/\/ \u6dfb\u52a0\u900f\u660e\u5ea6\n          borderColor: primaryColor,\n          borderWidth: 3,\n          pointBackgroundColor: primaryColor,\n          pointBorderColor: '#fff',\n          pointHoverBackgroundColor: '#fff',\n          pointHoverBorderColor: primaryColor,\n          pointRadius: 6,\n          pointHoverRadius: 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: {\n              size: 18\n            },\n            bodyFont: {\n              size: 16\n            },\n            padding: 15,\n            cornerRadius: 8\n          }\n        },\n        scales: {\n          r: {\n            beginAtZero: true,\n            max: 30,\n            ticks: {\n              stepSize: 5,\n              font: {\n                size: 16\n              }\n            },\n            pointLabels: {\n              font: {\n                size: 20,\n                weight: 'bold'\n              },\n              padding: 25\n            },\n            grid: {\n              color: 'rgba(0, 0, 0, 0.1)',\n              lineWidth: 1\n            }\n          }\n        }\n      }\n    });\n    \n    \/\/ \u751f\u6210\u7dad\u5ea6\u689d\u5f62\u5716\n    const dimensionBarsContainer = document.getElementById('dimension-bars').querySelector('.row');\n    dimensionBarsContainer.innerHTML = '';\n    \n    const maxScore = Math.max(...Object.values(dimensions.scores));\n    const colors = ['bg-primary', 'bg-success', 'bg-warning', 'bg-info'];\n    \n    Object.entries(dimensions.names).forEach(([key, name], index) => {\n      const score = dimensions.scores[key];\n      const percentage = Math.round((score \/ 30) * 100);\n      const colorClass = colors[index % colors.length];\n      \n      const barHtml = `\n        <div class=\"col-md-6\">\n          <div class=\"mb-2\">\n            <div class=\"d-flex justify-content-between align-items-center mb-1\">\n              <span class=\"fw-semibold\">${name}<\/span>\n              <small class=\"text-muted\">${percentage}%<\/small>\n            <\/div>\n            <div class=\"progress\" style=\"height: 20px;\">\n              <div class=\"progress-bar ${colorClass} bg-gradient\" role=\"progressbar\" \n                   style=\"width: ${percentage}%\">\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      `;\n      \n      dimensionBarsContainer.innerHTML += barHtml;\n    });\n  }\n  \n  \/\/ \u91cd\u65b0\u958b\u59cb\u6e2c\u9a57\n  function restartQuiz() {\n    appState.currentQuestion = 0;\n    appState.answers = [];\n    appState.totalScore = 0;\n    showPage('intro');\n  }\n  \n  \/\/ \u4e8b\u4ef6\u76e3\u807d\u5668\n  function initEventListeners() {\n    getElement('[data-action=\"start-quiz\"]').addEventListener('click', startQuiz);\n    getElement('[data-action=\"prev-question\"]').addEventListener('click', previousQuestion);\n    getElement('[data-action=\"restart-quiz\"]').addEventListener('click', restartQuiz);\n  }\n  \n  \/\/ \u521d\u59cb\u5316\n  function init() {\n    initEventListeners();\n    showPage('intro');\n  }\n  \n  \/\/ \u7b49\u5f85DOM\u52a0\u8f09\u5b8c\u6210\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', init);\n  } else {\n    init();\n  }\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u81ea\u5236\u578b\u6027\u683c\u7684\u4eba\u5728\u4efb\u4f55\u60c5\u51b5\u4e0b\u90fd\u80fd\u81ea\u5236\uff0c\u575a\u97e7\u800c\u6781\u6709\u540c\u60c5\u5fc3\u3002\u5bf9\u522b\u4eba\u7684\u5192\u72af\u4e5f\u80fd\u5bb9\u5fcd\uff0c\u56e0\u6b64\uff0c\u81ea\u5236\u578b\u6027\u683c\u7684\u4eba\u5f80\u5f80\u4f1a\u51fa\u4eba\u5934\u5730\u3002\u6d4b\u8bc4\u8bf4\u660e\uff1a\u4e0b\u5217\u5404\u9898\u4e2d\uff0c\u6bcf\u9898\u67095\u4e2a\u5907\u9009\u7b54\u6848\uff0c\u6839\u636e\u4f60\u7684\u5b9e\u9645\u60c5\u51b5\uff0c\u9009\u62e9\u4e00\u4e2a\u6700\u9002\u5408\u4f60\u7684\u7b54\u6848<\/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,159],"tags":[],"class_list":["post-2619","post","type-post","status-publish","format-standard","hentry","category-personality","category-aptitude"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2619","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=2619"}],"version-history":[{"count":4,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2619\/revisions"}],"predecessor-version":[{"id":10603,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2619\/revisions\/10603"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}