{"id":2702,"date":"2023-10-22T12:12:42","date_gmt":"2023-10-22T04:12:42","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2702"},"modified":"2025-08-28T22:27:49","modified_gmt":"2025-08-28T14:27:49","slug":"capacity-for-understanding","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/capacity-for-understanding","title":{"rendered":"\u5305\u5bb9\u80fd\u529b\u7dda\u4e0a\u514d\u8cbb\u6e2c\u9a57\uff0824\u984c\uff09"},"content":{"rendered":"<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<!-- \u5f15\u5bfc\u9875 -->\n<section id=\"quizintro9\" data-page=\"intro9\" class=\"container-fluid py-4\">\n    <div class=\"container\" style=\"max-width: 750px;\">\n        <header class=\"text-center mb-4\">\n            <h2 class=\"fw-bold mb-3\" style=\"color: #5a8a89; font-size: 2.2rem;\">\u5305\u5bb9\u80fd\u529b\u6d4b\u9a8c<\/h2>\n            <p class=\"text-muted fs-5\">\u63a2\u7d22\u60a8\u7684\u5fc3\u7075\u5bbd\u5ea6\uff0c\u53d1\u73b0\u5185\u5728\u7684\u5305\u5bb9\u529b\u91cf<\/p>\n        <\/header>\n        \n        <main>\n            <div class=\"row g-3 mb-4\">\n                <div class=\"col-md-4\">\n                    <div class=\"card h-100 border-0 shadow-soft hover-lift\">\n                        <div class=\"card-body text-center p-4\">\n                            <div class=\"rounded-circle d-inline-flex align-items-center justify-content-center mb-3\" \n                                 style=\"width: 70px; height: 70px; background: linear-gradient(135deg, #e8f5f3 0%, #d4e9e5 100%);\">\n                                <i class=\"bi bi-bullseye fs-2\" style=\"color: #5a8a89;\"><\/i>\n                            <\/div>\n                            <h3 style=\"font-size: 1.1rem; font-weight: bold;\">\u7cbe\u51c6\u6d4b\u8bc4<\/h3>\n                            <p class=\"text-muted small mb-0\">24\u9053\u4e13\u4e1a\u9898\u76ee\uff0c\u5168\u9762\u8bc4\u4f30\u60a8\u7684\u5305\u5bb9\u80fd\u529b<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"col-md-4\">\n                    <div class=\"card h-100 border-0 shadow-soft hover-lift\">\n                        <div class=\"card-body text-center p-4\">\n                            <div class=\"rounded-circle d-inline-flex align-items-center justify-content-center mb-3\" \n                                 style=\"width: 70px; height: 70px; background: linear-gradient(135deg, #fef3e8 0%, #fde4cc 100%);\">\n                                <i class=\"bi bi-graph-up fs-2\" style=\"color: #d4a574;\"><\/i>\n                            <\/div>\n                            <h3 style=\"font-size: 1.1rem; font-weight: bold;\">\u8be6\u7ec6\u5206\u6790<\/h3>\n                            <p class=\"text-muted small mb-0\">\u83b7\u5f97\u4e2a\u4eba\u5316\u7684\u5fc3\u7406\u5206\u6790\u62a5\u544a<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"col-md-4\">\n                    <div class=\"card h-100 border-0 shadow-soft hover-lift\">\n                        <div class=\"card-body text-center p-4\">\n                            <div class=\"rounded-circle d-inline-flex align-items-center justify-content-center mb-3\" \n                                 style=\"width: 70px; height: 70px; background: linear-gradient(135deg, #f0e8fe 0%, #e4d4fd 100%);\">\n                                <i class=\"bi bi-heart-pulse fs-2\" style=\"color: #9b7fb8;\"><\/i>\n                            <\/div>\n                            <h3 style=\"font-size: 1.1rem; font-weight: bold;\">\u6210\u957f\u6307\u5f15<\/h3>\n                            <p class=\"text-muted small mb-0\">\u4e86\u89e3\u81ea\u5df1\uff0c\u63d0\u5347\u4eba\u9645\u5173\u7cfb\u54c1\u8d28<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"card border-0 shadow-soft mb-4\">\n                <div class=\"card-body p-4\">\n                    <div class=\"border-start border-4 ps-4\" style=\"border-color: #7ab8b3 !important;\">\n                        <p class=\"fs-5 fw-semibold mb-3\" style=\"color: #5a8a89;\">\u300c\u552f\u5bbd\u53ef\u4ee5\u5bb9\u4eba\u300d<\/p>\n                        <p class=\"text-muted mb-3\">\u80fd\u505a\u6210\u5927\u4e8b\u7684\u4eba\uff0c\u5fc5\u987b\u4fe1\u5b88\u300c\u552f\u5bbd\u53ef\u4ee5\u5bb9\u4eba\u300d\u7684\u539f\u5219\u3002\u8fd9\u597d\u6bd4\u6d77\u662f\u5bbd\u5e7f\u7684\uff0c\u505a\u4eba\u5e94\u8be5\u6709\u6d77\u4e00\u6837\u7684\u80f8\u6000\uff0c\u53ef\u4ee5\u7eb3\u767e\u5ddd\u4e4b\u6c34\u3002<\/p>\n                        <p class=\"text-muted mb-0\">\u5305\u5bb9\u529b\u662f\u73b0\u4ee3\u4eba\u4e0d\u53ef\u7f3a\u5c11\u7684\u91cd\u8981\u7d20\u8d28\uff0c\u5b83\u53cd\u6620\u4e86\u6211\u4eec\u63a5\u7eb3\u4e0d\u540c\u610f\u89c1\u3001\u7406\u89e3\u4ed6\u4eba\u60f3\u6cd5\u7684\u80fd\u529b\u3002\u900f\u8fc7\u8fd9\u4e2a\u6d4b\u9a8c\uff0c\u60a8\u5c06\u6df1\u5165\u4e86\u89e3\u81ea\u5df1\u7684\u5305\u5bb9\u7a0b\u5ea6\u3002<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"text-center\">\n                <div class=\"mb-4\">\n                    <label for=\"quiz9-age\" class=\"form-label fw-semibold fs-5\">\u8bf7\u8f93\u5165\u60a8\u7684\u5e74\u9f84\uff1a<\/label>\n                    <input type=\"number\" id=\"quiz9-age\" class=\"form-control form-control-lg mx-auto\" \n                           style=\"max-width: 200px; border-color: #7ab8b3;\" \n                           min=\"14\" max=\"100\" placeholder=\"\u4f8b\u5982\uff1a25\" required>\n                <\/div>\n                \n                <button type=\"button\" class=\"btn btn-lg px-5 py-3 shadow-soft btn-primary-custom\" data-action=\"start-quiz9\">\n                    \u5f00\u59cb\u6d4b\u9a8c\n                    <i class=\"bi bi-arrow-right ms-2\"><\/i>\n                <\/button>\n            <\/div>\n        <\/main>\n    <\/div>\n<\/section>\n\n<!-- \u6d4b\u9a8c\u9875 -->\n<section id=\"quizmain9\" data-page=\"quiz9\" class=\"container-fluid py-4\" style=\"display: none;\">\n    <div class=\"container\" style=\"max-width: 750px;\">\n        <header class=\"text-center mb-4\">\n            <h2 class=\"fw-bold mb-3\" style=\"color: #5a8a89; font-size: 2rem;\">\u5305\u5bb9\u80fd\u529b\u6d4b\u9a8c<\/h2>\n            <div class=\"progress mb-3\" style=\"height: 10px; max-width: 500px; margin: 0 auto; background-color: #e9f5f3;\">\n                <div class=\"progress-bar\" role=\"progressbar\" data-progress-bar style=\"width: 0%; background: linear-gradient(90deg, #7ab8b3 0%, #5a8a89 100%);\"><\/div>\n            <\/div>\n            <p class=\"text-muted\" data-progress-text>\u7b2c 1 \u9898\uff0c\u5171 24 \u9898<\/p>\n        <\/header>\n        \n        <main>\n            <div class=\"card border-0 shadow-soft mx-auto\" style=\"max-width: 750px;\">\n                <div class=\"card-body p-4 p-md-5\">\n                    <h3 class=\"mb-4\" style=\"font-size: 22px; font-weight: bold; color: #3a5a59;\" data-question-text><\/h3>\n                    <div data-options-container><\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"text-center mt-4\">\n                <button type=\"button\" class=\"btn btn-lg btn-outline-custom\" data-action=\"prev-question\" style=\"display: none;\">\n                    <i class=\"bi bi-arrow-left me-2\"><\/i>\n                    \u4e0a\u4e00\u9898\n                <\/button>\n            <\/div>\n        <\/main>\n    <\/div>\n<\/section>\n\n<!-- \u7ed3\u679c\u9875 -->\n<section id=\"quizresult9\" data-page=\"result9\" class=\"container-fluid py-4\" style=\"display: none;\">\n    <div class=\"container\" style=\"max-width: 750px;\">\n        <header class=\"text-center mb-4\">\n            <h2 class=\"fw-bold mb-3\" style=\"color: #5a8a89; font-size: 2rem;\">\u60a8\u7684\u5305\u5bb9\u80fd\u529b\u6d4b\u9a8c\u7ed3\u679c<\/h2>\n        <\/header>\n        \n        <main>\n            <!-- \u5f97\u5206\u5361\u7247 -->\n            <div class=\"row justify-content-center mb-4\">\n                <div class=\"col-md-6 col-lg-5\">\n                    <div class=\"card border-0 shadow-soft text-center\">\n                        <div class=\"card-body p-4\">\n                            <div class=\"position-relative d-inline-block mb-3\">\n                                <div class=\"rounded-circle d-flex align-items-center justify-content-center text-white\" \n                                     style=\"width: 120px; height: 120px; background: linear-gradient(135deg, #7ab8b3 0%, #5a8a89 100%);\">\n                                    <div>\n                                        <div class=\"display-4 fw-bold\" data-score-display>0<\/div>\n                                        <div class=\"small\">\u603b\u5206<\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                            <div class=\"badge fs-5 px-4 py-2\" data-level-badge><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- \u6a2a\u5411\u5806\u53e0\u6761\u5f62\u56fe -->\n            <div class=\"row justify-content-center mb-4\">\n                <div class=\"col-12\">\n                    <div class=\"card border-0 shadow-soft\" style=\"max-width: 750px; margin: 0 auto;\">\n                        <div class=\"card-body p-4\">\n                            <h3 style=\"font-size: 20px; font-weight: bold; color: #3a5a59; margin-bottom: 20px;\">\u60a8\u7684\u5f97\u5206\u4f4d\u7f6e<\/h3>\n                            <div id=\"score-distribution\" style=\"position: relative; margin-bottom: 30px;\">\n                                <div class=\"distribution-bar\" style=\"display: flex; height: 60px; border-radius: 30px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\"><\/div>\n                                <div class=\"user-marker\" style=\"position: absolute; top: -15px;\">\n                                    <div style=\"width: 2px; height: 90px; background: #e74c3c; margin: 0 auto;\"><\/div>\n                                    <div style=\"width: 12px; height: 12px; background: #e74c3c; border-radius: 50%; margin: -50px auto 0; border: 2px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.2);\"><\/div>\n                                    <div class=\"score-label\" style=\"text-align: center; margin-top: 35px; font-weight: bold; color: #e74c3c;\"><\/div>\n                                <\/div>\n                            <\/div>\n                            <div class=\"distribution-legend\" style=\"display: flex; flex-wrap: wrap; justify-content: center; gap: 15px;\"><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <!-- \u96f7\u8fbe\u56fe -->\n            <div class=\"row justify-content-center mb-4\">\n                <div class=\"col-12\">\n                    <div class=\"card border-0 shadow-soft\" style=\"max-width: 750px; margin: 0 auto;\">\n                        <div class=\"card-body p-4\">\n                            <h3 style=\"font-size: 20px; font-weight: bold; color: #3a5a59; margin-bottom: 20px;\">\u591a\u7ef4\u5ea6\u5206\u6790<\/h3>\n                            <div class=\"d-flex justify-content-center\">\n                                <canvas id=\"tolerance-chart\" style=\"max-width: 350px; max-height: 350px;\"><\/canvas>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <!-- \u5206\u6790\u5185\u5bb9 -->\n            <div class=\"row justify-content-center mb-4\">\n                <div class=\"col-12\">\n                    <div class=\"card border-0 shadow-soft\" style=\"max-width: 750px; margin: 0 auto;\">\n                        <div class=\"card-body p-4 p-md-5\">\n                            <div data-analysis-content><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"text-center\">\n                <button type=\"button\" class=\"btn btn-lg px-5 py-3 shadow-soft btn-primary-custom\" data-action=\"restart-quiz9\">\n                    <i class=\"bi bi-arrow-clockwise me-2\"><\/i>\n                    \u91cd\u65b0\u6d4b\u8bd5\n                <\/button>\n            <\/div>\n        <\/main>\n    <\/div>\n<\/section>\n\n<!-- CSS\u6837\u5f0f -->\n<style>\n\/* \u57fa\u7840\u6837\u5f0f *\/\nbody {\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n}\n\n\/* WordPress\u6837\u5f0f\u8986\u76d6 *\/\n.quiz9-option,\n.quiz9-option:focus,\n.quiz9-option:active,\n.quiz9-option:visited {\n    color: #333333 !important;\n    background-color: white !important;\n    text-decoration: none !important;\n}\n\n.quiz9-option:hover {\n    color: #333333 !important;\n    background-color: #f8fcfb !important;\n}\n\n.quiz9-option.selected {\n    color: #333333 !important;\n    background-color: #f0f9f8 !important;\n}\n\n\/* \u79fb\u9664\u80cc\u666f\u8272 *\/\n#quizintro9, #quizmain9, #quizresult9 {\n    background: transparent;\n}\n\n\/* \u67d4\u548c\u9634\u5f71 *\/\n.shadow-soft {\n    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);\n}\n\n\/* \u60ac\u6d6e\u6548\u679c *\/\n.hover-lift {\n    transition: all 0.3s ease;\n}\n\n.hover-lift:hover {\n    transform: translateY(-3px);\n    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);\n}\n\n\/* \u81ea\u5b9a\u4e49\u6309\u94ae *\/\n.btn-primary-custom {\n    background: linear-gradient(135deg, #7ab8b3 0%, #5a8a89 100%);\n    border: none;\n    color: white;\n    transition: all 0.3s ease;\n}\n\n.btn-primary-custom:hover {\n    background: linear-gradient(135deg, #5a8a89 0%, #4a7a79 100%);\n    transform: translateY(-2px);\n    box-shadow: 0 6px 20px rgba(90, 138, 137, 0.3);\n}\n\n.btn-outline-custom {\n    border: 2px solid #7ab8b3;\n    color: #5a8a89;\n    background: white;\n}\n\n.btn-outline-custom:hover {\n    background: #f0f9f8;\n    border-color: #5a8a89;\n    color: #4a7a79;\n}\n\n\/* \u9009\u9879\u6837\u5f0f *\/\n.quiz9-option {\n    display: block;\n    width: 100%;\n    text-align: left;\n    padding: 1rem 1.5rem;\n    margin-bottom: 0.75rem;\n    border: 2px solid #e9f5f3;\n    border-radius: 12px;\n    background: white !important;\n    color: #333333 !important;\n    font-size: 18px;\n    transition: all 0.3s ease;\n    position: relative;\n    padding-left: 3.5rem;\n    cursor: pointer;\n}\n\n.quiz9-option:hover {\n    border-color: #7ab8b3;\n    background: #f8fcfb !important;\n    color: #333333 !important;\n    transform: translateX(3px);\n}\n\n.quiz9-option::before {\n    content: '';\n    position: absolute;\n    left: 1.25rem;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 22px;\n    height: 22px;\n    border: 2px solid #d4e9e5;\n    border-radius: 50%;\n    background: white;\n    transition: all 0.3s ease;\n}\n\n.quiz9-option.selected {\n    border-color: #5a8a89;\n    background: #f0f9f8 !important;\n    color: #333333 !important;\n}\n\n.quiz9-option.selected::before {\n    border-color: #5a8a89;\n    background: #5a8a89;\n}\n\n.quiz9-option.selected::after {\n    content: '\u2713';\n    position: absolute;\n    left: 1.25rem;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 22px;\n    height: 22px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    font-weight: bold;\n    font-size: 14px;\n}\n\n\/* \u7b49\u7ea7\u5fbd\u7ae0 *\/\n.badge.level-very-strong {\n    background: linear-gradient(135deg, #7ab8b3 0%, #5a8a89 100%);\n    color: white;\n}\n\n.badge.level-strong {\n    background: linear-gradient(135deg, #8fc4a1 0%, #6fa881 100%);\n    color: white;\n}\n\n.badge.level-moderate {\n    background: linear-gradient(135deg, #f4c983 0%, #d4a574 100%);\n    color: white;\n}\n\n.badge.level-low {\n    background: linear-gradient(135deg, #e6a77d 0%, #c78a6c 100%);\n    color: white;\n}\n\n.badge.level-weak {\n    background: linear-gradient(135deg, #d98880 0%, #b76e79 100%);\n    color: white;\n}\n\n\/* \u54cd\u5e94\u5f0f\u8c03\u6574 *\/\n@media (max-width: 768px) {\n    h2 {\n        font-size: 1.8rem !important;\n    }\n    \n    h3 {\n        font-size: 20px !important;\n    }\n    \n    .quiz9-option {\n        font-size: 16px;\n        padding: 0.875rem 1.25rem;\n        padding-left: 3rem;\n    }\n    \n    .quiz9-option::before,\n    .quiz9-option.selected::after {\n        width: 20px;\n        height: 20px;\n        left: 1rem;\n    }\n    \n    .card-body {\n        padding: 1.5rem !important;\n    }\n}\n\n\/* \u8f93\u5165\u6846\u805a\u7126\u6548\u679c *\/\n.form-control:focus {\n    border-color: #7ab8b3;\n    box-shadow: 0 0 0 0.2rem rgba(122, 184, 179, 0.25);\n}\n<\/style>\n\n<!-- JavaScript\u884c\u4e3a -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n<script>\n(function() {\n    'use strict';\n\n    class ToleranceQuiz {\n        constructor() {\n            this.config = {\n                questions: [\n                    \"\u534a\u591c\u88ab\u90bb\u5bb6\u5a74\u513f\u7684\u54ed\u58f0\u5435\u9192\uff0c\u611f\u5230\u6124\u6012\u5f02\u5e38\u3002\",\n                    \"\u89c9\u5f97\u503e\u542c\u548c\u81ea\u5df1\u610f\u89c1\u76f8\u5de6\u7684\u89c1\u89e3\u5f88\u56f0\u96be\u3002\",\n                    \"\u5ba2\u673a\u673a\u957f\u5e94\u8be5\u9650\u4e8e\u7537\u6027\u3002\",\n                    \"\u516c\u53f8\u7684\u4eba\u4e8b\u79d1\u957f\u4e0d\u5e94\u96c7\u7528\u6709\u72af\u7f6a\u524d\u79d1\u8005\u3002\",\n                    \"\u5267\u573a\u7ecf\u7406\u4e0d\u5e94\u8ba9\u7a7f\u725b\u4ed4\u88e4\u7684\u89c2\u4f17\u8fdb\u4f1a\u573a\u53c2\u52a0\u9996\u6620\u5178\u793c\u3002\",\n                    \"\u4e3a\u4e86\u8ba9\u4e0d\u542c\u8bdd\u7684\u5c0f\u5b69\u5b66\u4e60\u670d\u4ece\uff0c\u4e00\u5b9a\u8981\u7ecf\u5e38\u5904\u7f5a\u4ed6\u3002\",\n                    \"\u5e94\u8be5\u5f3a\u5236\u5b09\u76ae\u58eb\u548c\u6ed1\u7a3d\u6f14\u5458\u670d\u4e24\u5e74\u5175\u5f79\u3002\",\n                    \"\u57fa\u4e8e\u6270\u4e71\u548c\u5e73\u7684\u7406\u7531\uff0c\u5e94\u8be5\u7981\u6b62\u6fc0\u8fdb\u653f\u6cbb\u5bb6\u7684\u6d3b\u52a8\u3002\",\n                    \"\u53ea\u6709\u52e4\u594b\u7684\u52b3\u52a8\u5de5\u4f5c\u8005\u624d\u6709\u9ad8\u6536\u5165\u3002\",\n                    \"\u6280\u672f\u9769\u65b0\u4f1a\u65e0\u6cd5\u65e0\u5929\uff0c\u4e0d\u503c\u5f97\u9ad8\u5174\u3002\",\n                    \"\u53ef\u80fd\u7684\u8bdd\uff0c\u5c3d\u91cf\u907f\u514d\u548c\u81ea\u5df1\u610f\u89c1\u4e0d\u540c\u7684\u4eba\u8c08\u8bdd\u3002\",\n                    \"\u4e0d\u627f\u8ba4\u5973\u5b50\u8db3\u7403\u961f\u3002\",\n                    \"\u5916\u56fd\u52b3\u52a8\u8005\u4e0d\u5e94\u8be5\u548c\u4e00\u822c\u516c\u6c11\u4eab\u6709\u540c\u7b49\u6743\u5229\u3002\",\n                    \"\u8001\u4eba\u4e0d\u5e94\u8be5\u7a7f\u7740\u65b0\u6f6e\u670d\u9970\u3002\",\n                    \"\u65e9\u5a5a\u4f1a\u6709\u95ee\u9898\u3002\",\n                    \"\u4f4f\u516c\u5bd3\u7684\u4eba\u4e0d\u5e94\u517b\u732b\u72d7\u7b49\u5ba0\u7269\u3002\",\n                    \"\u516c\u53f8\u7684\u8463\u4e8b\u957f\u5e94\u8be5\u5bf9\u5458\u5de5\u63d0\u5347\u4e1a\u7ee9\u548c\u5458\u5de5\u5bf9\u516c\u53f8\u7684\u8d21\u732e\u62b1\u5f88\u5927\u7684\u5e0c\u671b\u3002\",\n                    \"\u300c\u6492\u8fc7\u4e00\u6b21\u8c0e\uff0c\u522b\u4eba\u5c31\u4e0d\u518d\u76f8\u4fe1\u4f60\u3002\u300d\u8fd9\u53e5\u8bdd\u8bf4\u5f97\u6ca1\u9519\u3002\",\n                    \"\u9876\u5c16\u8fd0\u52a8\u9009\u624b\u5e94\u8be5\u4fdd\u6301\u6700\u4f73\u72b6\u6001\u53c2\u52a0\u5927\u8d5b\u3002\",\n                    \"\u5bf9\u6700\u65b0\u6d41\u884c\u670d\u9970\u4e0d\u5f97\u4e0d\u7a0d\u4f5c\u8003\u8651\u3002\",\n                    \"\u5236\u8ba2\u4f11\u5047\u8ba1\u5212\u65f6\uff0c\u4e0d\u5fc5\u8003\u8651\u5230\u5c0f\u5b69\u5b50\u7684\u5e0c\u671b\u3002\",\n                    \"\u5973\u6027\u548c\u7537\u6027\u559d\u7b49\u91cf\u7684\u9152\u4e0d\u592a\u597d\u3002\",\n                    \"\u5438\u6bd2\u8005\u88ab\u9001\u8fdb\u6212\u6bd2\u6240\u662f\u7406\u6240\u5f53\u7136\u7684\u3002\",\n                    \"\u6709\u548c\u81ea\u5df1\u610f\u89c1\u4e0d\u4e00\u81f4\u7684\u4eba\u5728\u573a\u5fc3\u60c5\u5c31\u4e0d\u597d\u3002\"\n                ],\n                options: [\n                    { text: \"\u7edd\u5bf9\u53cd\u5bf9\", score: 0 },\n                    { text: \"\u53cd\u5bf9\", score: 1 },\n                    { text: \"\u57fa\u672c\u53cd\u5bf9\", score: 2 },\n                    { text: \"\u8bf4\u4e0d\u6e05\", score: 3 },\n                    { text: \"\u57fa\u672c\u8d5e\u6210\", score: 4 },\n                    { text: \"\u8d5e\u6210\", score: 5 },\n                    { text: \"\u7edd\u5bf9\u8d5e\u6210\", score: 6 }\n                ],\n                ageRanges: [\n                    { min: 14, max: 16, ranges: [[0, 10], [11, 12], [13, 29], [30, 62], [63, 144]] },\n                    { min: 17, max: 21, ranges: [[0, 13], [14, 16], [17, 30], [31, 49], [50, 144]] },\n                    { min: 22, max: 30, ranges: [[0, 9], [10, 15], [16, 32], [33, 48], [49, 144]] },\n                    { min: 31, max: 100, ranges: [[0, 15], [16, 31], [32, 50], [51, 60], [61, 144]] }\n                ],\n                levels: [\"\u975e\u5e38\u5f3a\", \"\u5f3a\", \"\u5c1a\u53ef\", \"\u7a0d\u4f4e\", \"\u5f88\u5f31\"],\n                levelClasses: [\"very-strong\", \"strong\", \"moderate\", \"low\", \"weak\"],\n                levelColors: [\"#7ab8b3\", \"#8fc4a1\", \"#f4c983\", \"#e6a77d\", \"#d98880\"]\n            };\n\n            this.state = {\n                currentQuestion: 0,\n                answers: [],\n                userAge: null,\n                totalScore: 0,\n                level: '',\n                levelIndex: 0,\n                chartInstance: null\n            };\n\n            this.cacheElements();\n            this.bindEvents();\n        }\n\n        cacheElements() {\n            this.elements = {\n                intro: document.getElementById('quizintro9'),\n                quiz: document.getElementById('quizmain9'),\n                result: document.getElementById('quizresult9'),\n                ageInput: document.getElementById('quiz9-age'),\n                progressBar: document.querySelector('[data-progress-bar]'),\n                progressText: document.querySelector('[data-progress-text]'),\n                questionText: document.querySelector('[data-question-text]'),\n                optionsContainer: document.querySelector('[data-options-container]'),\n                prevBtn: document.querySelector('[data-action=\"prev-question\"]'),\n                scoreDisplay: document.querySelector('[data-score-display]'),\n                levelBadge: document.querySelector('[data-level-badge]'),\n                analysisContent: document.querySelector('[data-analysis-content]'),\n                chart: document.getElementById('tolerance-chart')\n            };\n        }\n\n        bindEvents() {\n            document.querySelector('[data-action=\"start-quiz9\"]').addEventListener('click', () => this.startQuiz());\n            this.elements.prevBtn.addEventListener('click', () => this.prevQuestion());\n            document.querySelector('[data-action=\"restart-quiz9\"]').addEventListener('click', () => this.restartQuiz());\n            \n            this.elements.optionsContainer.addEventListener('click', (e) => {\n                if (e.target.closest('.quiz9-option')) {\n                    const option = e.target.closest('.quiz9-option');\n                    const score = parseInt(option.dataset.score);\n                    this.selectOption(score, option);\n                }\n            });\n\n            this.elements.ageInput.addEventListener('keypress', (e) => {\n                if (e.key === 'Enter') {\n                    this.startQuiz();\n                }\n            });\n        }\n\n        startQuiz() {\n            const age = parseInt(this.elements.ageInput.value);\n            if (!age || age < 14 || age > 100) {\n                alert('\u8bf7\u8f93\u5165\u6709\u6548\u7684\u5e74\u9f84\uff0814-100\u5c81\uff09');\n                return;\n            }\n            this.state.userAge = age;\n            this.state.currentQuestion = 0;\n            this.state.answers = [];\n            this.showPage('quiz');\n            this.renderQuestion();\n            this.scrollToTop();\n        }\n\n        showPage(page) {\n            this.elements.intro.style.display = 'none';\n            this.elements.quiz.style.display = 'none';\n            this.elements.result.style.display = 'none';\n\n            switch(page) {\n                case 'intro':\n                    this.elements.intro.style.display = 'block';\n                    break;\n                case 'quiz':\n                    this.elements.quiz.style.display = 'block';\n                    break;\n                case 'result':\n                    this.elements.result.style.display = 'block';\n                    break;\n            }\n        }\n\n        renderQuestion() {\n            const question = this.config.questions[this.state.currentQuestion];\n            this.elements.questionText.textContent = question;\n            \n            this.elements.optionsContainer.innerHTML = '';\n            this.config.options.forEach(option => {\n                const button = document.createElement('button');\n                button.type = 'button';\n                button.className = 'quiz9-option';\n                button.dataset.score = option.score;\n                button.textContent = option.text;\n                \n                \/\/ \u6062\u590d\u4e4b\u524d\u7684\u9009\u62e9\n                if (this.state.answers[this.state.currentQuestion] === option.score) {\n                    button.classList.add('selected');\n                }\n                \n                this.elements.optionsContainer.appendChild(button);\n            });\n\n            this.elements.prevBtn.style.display = this.state.currentQuestion > 0 ? 'inline-flex' : 'none';\n            this.updateProgress();\n        }\n\n        updateProgress() {\n            const progress = ((this.state.currentQuestion + 1) \/ this.config.questions.length) * 100;\n            this.elements.progressBar.style.width = `${progress}%`;\n            this.elements.progressText.textContent = `\u7b2c ${this.state.currentQuestion + 1} \u9898\uff0c\u5171 ${this.config.questions.length} \u9898`;\n        }\n\n        selectOption(score, element) {\n            this.state.answers[this.state.currentQuestion] = score;\n            \n            document.querySelectorAll('.quiz9-option').forEach(btn => {\n                btn.classList.remove('selected');\n            });\n            element.classList.add('selected');\n            \n            setTimeout(() => {\n                if (this.state.currentQuestion < this.config.questions.length - 1) {\n                    this.state.currentQuestion++;\n                    this.renderQuestion();\n                } else {\n                    this.calculateResult();\n                    this.showPage('result');\n                    this.renderResult();\n                }\n                this.scrollToTop();\n            }, 300);\n        }\n\n        prevQuestion() {\n            if (this.state.currentQuestion > 0) {\n                this.state.currentQuestion--;\n                this.renderQuestion();\n                this.scrollToTop();\n            }\n        }\n\n        calculateResult() {\n            this.state.totalScore = this.state.answers.reduce((sum, score) => sum + score, 0);\n            \n            const ageRange = this.config.ageRanges.find(range => \n                this.state.userAge >= range.min && this.state.userAge <= range.max\n            );\n            \n            let levelIndex = 4;\n            for (let i = 0; i < ageRange.ranges.length; i++) {\n                const [min, max] = ageRange.ranges[i];\n                if (this.state.totalScore >= min && this.state.totalScore <= max) {\n                    levelIndex = i;\n                    break;\n                }\n            }\n            \n            this.state.levelIndex = levelIndex;\n            this.state.level = this.config.levels[levelIndex];\n            this.state.ageRange = ageRange;\n        }\n\n        renderResult() {\n            this.elements.scoreDisplay.textContent = this.state.totalScore;\n            this.elements.levelBadge.textContent = `\u5305\u5bb9\u529b\uff1a${this.state.level}`;\n            this.elements.levelBadge.className = `badge fs-5 px-4 py-2 level-${this.config.levelClasses[this.state.levelIndex]}`;\n            \n            this.renderScoreDistribution();\n            this.renderAnalysis();\n            this.renderChart();\n        }\n\n        renderScoreDistribution() {\n            const distributionBar = document.querySelector('.distribution-bar');\n            const legend = document.querySelector('.distribution-legend');\n            const marker = document.querySelector('.user-marker');\n            const scoreLabel = document.querySelector('.score-label');\n            \n            \/\/ \u6e05\u7a7a\u73b0\u6709\u5185\u5bb9\n            distributionBar.innerHTML = '';\n            legend.innerHTML = '';\n            \n            \/\/ \u83b7\u53d6\u5f53\u524d\u5e74\u9f84\u6bb5\u7684\u5206\u6570\u533a\u95f4\n            const ranges = this.state.ageRange.ranges;\n            const maxScore = 144;\n            \n            \/\/ \u521b\u5efa\u6761\u5f62\u6bb5\n            ranges.forEach((range, index) => {\n                const [min, max] = range;\n                const width = ((max - min + 1) \/ maxScore) * 100;\n                \n                const segment = document.createElement('div');\n                segment.style.width = `${width}%`;\n                segment.style.background = this.config.levelColors[index];\n                segment.style.display = 'flex';\n                segment.style.alignItems = 'center';\n                segment.style.justifyContent = 'center';\n                segment.style.color = 'white';\n                segment.style.fontSize = '14px';\n                segment.style.fontWeight = 'bold';\n                \n                \/\/ \u53ea\u5728\u5bbd\u5ea6\u8db3\u591f\u65f6\u663e\u793a\u6587\u5b57\n                if (width > 10) {\n                    segment.textContent = this.config.levels[index];\n                }\n                \n                distributionBar.appendChild(segment);\n                \n                \/\/ \u6dfb\u52a0\u56fe\u4f8b\n                const legendItem = document.createElement('div');\n                legendItem.style.display = 'flex';\n                legendItem.style.alignItems = 'center';\n                legendItem.style.gap = '8px';\n                legendItem.innerHTML = `\n                    <div style=\"width: 20px; height: 20px; background: ${this.config.levelColors[index]}; border-radius: 4px;\"><\/div>\n                    <span style=\"font-size: 14px; color: #666;\">${this.config.levels[index]} (${min}-${max}\u5206)<\/span>\n                `;\n                legend.appendChild(legendItem);\n            });\n            \n            \/\/ \u5b9a\u4f4d\u7528\u6237\u6807\u8bb0\n            const position = (this.state.totalScore \/ maxScore) * 100;\n            marker.style.left = `${position}%`;\n            marker.style.transform = 'translateX(-50%)';\n            scoreLabel.textContent = `\u60a8\u7684\u5f97\u5206: ${this.state.totalScore}`;\n        }\n\n        renderAnalysis() {\n            \/\/ \u8ba1\u7b97\u5404\u7ef4\u5ea6\u5f97\u5206\n            const dimensions = {\n                '\u610f\u89c1\u63a5\u7eb3': this.calculateDimensionScore([1, 2, 10, 11, 23]),\n                '\u793e\u4f1a\u5305\u5bb9': this.calculateDimensionScore([2, 3, 6, 7, 11, 12]),\n                '\u751f\u6d3b\u6001\u5ea6': this.calculateDimensionScore([4, 5, 13, 15, 19, 20, 21]),\n                '\u4ef7\u503c\u89c2\u5ff5': this.calculateDimensionScore([8, 14, 16, 17, 18, 22])\n            };\n\n            \/\/ \u627e\u51fa\u6700\u9ad8\u548c\u6700\u4f4e\u7684\u7ef4\u5ea6\n            const sortedDimensions = Object.entries(dimensions).sort((a, b) => b[1] - a[1]);\n            const strongest = sortedDimensions[0];\n            const weakest = sortedDimensions[sortedDimensions.length - 1];\n\n            const analyses = {\n                0: {\n                    title: \"\u5305\u5bb9\u529b\u975e\u5e38\u5f3a\",\n                    content: \"\u60a8\u62e5\u6709\u6781\u4f73\u7684\u5305\u5bb9\u80fd\u529b\uff0c\u4e0d\u5728\u4e4e\u522b\u4eba\u7684\u610f\u89c1\u548c\u81ea\u5df1\u4e0d\u540c\uff0c\u80fd\u591f\u5bb9\u5fcd\u504f\u6fc0\u548c\u5584\u53d8\u7684\u610f\u89c1\u3002\u8fd9\u79cd\u5f00\u653e\u7684\u5fc3\u6001\u8ba9\u60a8\u5728\u4eba\u9645\u5173\u7cfb\u4e2d\u5982\u9c7c\u5f97\u6c34\uff0c\u4e5f\u80fd\u4ece\u4e0d\u540c\u7684\u89c2\u70b9\u4e2d\u83b7\u5f97\u6210\u957f\u3002\",\n                    suggestion: \"\u7ee7\u7eed\u4fdd\u6301\u60a8\u7684\u5f00\u653e\u5fc3\u6001\uff0c\u540c\u65f6\u4e5f\u8981\u6ce8\u610f\u575a\u6301\u81ea\u5df1\u7684\u6838\u5fc3\u4ef7\u503c\u89c2\u3002\u60a8\u53ef\u4ee5\u6210\u4e3a\u56e2\u961f\u4e2d\u7684\u8c03\u89e3\u8005\u548c\u6865\u6881\uff0c\u5e2e\u52a9\u4e0d\u540c\u610f\u89c1\u7684\u4eba\u8fbe\u6210\u5171\u8bc6\u3002\"\n                },\n                1: {\n                    title: \"\u5305\u5bb9\u529b\u5f3a\",\n                    content: \"\u60a8\u80fd\u7406\u89e3\u548c\u81ea\u5df1\u60f3\u6cd5\u4e0d\u540c\u7684\u610f\u89c1\uff0c\u5fc3\u4e2d\u6ca1\u6709\u504f\u89c1\uff0c\u613f\u610f\u655e\u5f00\u5fc3\u80f8\u63a5\u53d7\u65b0\u6f6e\u3001\u65b0\u601d\u60f3\u3002\u5728\u540c\u5e74\u9f84\u5c42\u4e2d\uff0c\u60a8\u7684\u5305\u5bb9\u529b\u8d85\u8d8a\u4e86\u5927\u591a\u6570\u4eba\uff0c\u8fd9\u662f\u60a8\u7684\u4e00\u5927\u4f18\u52bf\u3002\",\n                    suggestion: \"\u60a8\u5df2\u7ecf\u5177\u5907\u826f\u597d\u7684\u5305\u5bb9\u57fa\u7840\uff0c\u5efa\u8bae\u591a\u53c2\u4e0e\u8de8\u6587\u5316\u4ea4\u6d41\u6d3b\u52a8\uff0c\u8fdb\u4e00\u6b65\u62d3\u5c55\u89c6\u91ce\u3002\u5728\u4fdd\u6301\u5f00\u653e\u7684\u540c\u65f6\uff0c\u4e5f\u8981\u5b66\u4f1a\u5224\u65ad\u548c\u7b5b\u9009\u6709\u4ef7\u503c\u7684\u89c2\u70b9\u3002\"\n                },\n                2: {\n                    title: \"\u5305\u5bb9\u529b\u5c1a\u53ef\",\n                    content: \"\u60a8\u7684\u5305\u5bb9\u529b\u5904\u4e8e\u5e73\u5747\u6c34\u51c6\uff0c\u5728\u5927\u591a\u6570\u60c5\u51b5\u4e0b\u80fd\u591f\u63a5\u7eb3\u4e0d\u540c\u7684\u610f\u89c1\uff0c\u4f46\u5076\u5c14\u8fd8\u662f\u4f1a\u53d7\u5230\u56fa\u6709\u89c2\u5ff5\u7684\u5f71\u54cd\u3002\u900f\u8fc7\u66f4\u591a\u7684\u81ea\u6211\u5bdf\u89c9\u548c\u7ec3\u4e60\uff0c\u60a8\u7684\u5305\u5bb9\u529b\u8fd8\u6709\u63d0\u5347\u7684\u7a7a\u95f4\u3002\",\n                    suggestion: \"\u5c1d\u8bd5\u4e3b\u52a8\u4e86\u89e3\u4e0d\u540c\u80cc\u666f\u4eba\u7fa4\u7684\u60f3\u6cd5\uff0c\u9605\u8bfb\u591a\u5143\u5316\u7684\u4e66\u7c4d\u548c\u6587\u7ae0\u3002\u5f53\u9047\u5230\u4e0e\u81ea\u5df1\u89c2\u70b9\u4e0d\u540c\u7684\u610f\u89c1\u65f6\uff0c\u5148\u5c1d\u8bd5\u7406\u89e3\u5bf9\u65b9\u7684\u7acb\u573a\uff0c\u518d\u505a\u5224\u65ad\u3002\"\n                },\n                3: {\n                    title: \"\u5305\u5bb9\u529b\u7a0d\u4f4e\",\n                    content: \"\u60a8\u5076\u5c14\u65e0\u6cd5\u63a5\u7eb3\u4e0d\u540c\u58f0\u97f3\uff0c\u5bf9\u65b0\u8d8b\u52bf\u548c\u65b0\u601d\u60f3\u6301\u6000\u7591\u7684\u6001\u5ea6\u3002\u5efa\u8bae\u60a8\u591a\u5c1d\u8bd5\u4ece\u4ed6\u4eba\u7684\u89d2\u5ea6\u601d\u8003\u95ee\u9898\uff0c\u8fd9\u5c06\u6709\u52a9\u4e8e\u63d0\u5347\u60a8\u7684\u5305\u5bb9\u80fd\u529b\u548c\u4eba\u9645\u5173\u7cfb\u54c1\u8d28\u3002\",\n                    suggestion: \"\u6bcf\u5929\u5c1d\u8bd5\u6311\u6218\u4e00\u4e2a\u81ea\u5df1\u7684\u56fa\u6709\u89c2\u5ff5\uff0c\u4e0e\u4e0d\u540c\u80cc\u666f\u7684\u4eba\u4ea4\u6d41\u3002\u8bb0\u5f55\u4e0b\u8ba9\u60a8\u611f\u5230\u4e0d\u8212\u670d\u7684\u89c2\u70b9\uff0c\u5206\u6790\u80cc\u540e\u7684\u539f\u56e0\uff0c\u9010\u6b65\u63d0\u5347\u63a5\u7eb3\u5ea6\u3002\"\n                },\n                4: {\n                    title: \"\u5305\u5bb9\u529b\u5f88\u5f31\",\n                    content: \"\u60a8\u76ee\u524d\u7684\u5305\u5bb9\u529b\u8f83\u4e3a\u6709\u9650\uff0c\u4f1a\u6392\u65a5\u548c\u81ea\u5df1\u4e0d\u540c\u7684\u610f\u89c1\uff0c\u5e0c\u671b\u6240\u6709\u7684\u4eba\u548c\u81ea\u5df1\u7684\u60f3\u6cd5\u4e00\u81f4\u3002\u8fd9\u53ef\u80fd\u6e90\u4e8e\u7f3a\u4e4f\u81ea\u4fe1\u5fc3\uff0c\u5efa\u8bae\u4ece\u63d0\u5347\u81ea\u4fe1\u5f00\u59cb\uff0c\u9010\u6b65\u57f9\u517b\u5bf9\u4e0d\u540c\u89c2\u70b9\u7684\u63a5\u7eb3\u80fd\u529b\u3002\",\n                    suggestion: \"\u4ece\u5c0f\u4e8b\u505a\u8d77\uff0c\u5148\u5c1d\u8bd5\u63a5\u7eb3\u751f\u6d3b\u4e2d\u7684\u5c0f\u53d8\u5316\u3002\u53c2\u52a0\u81ea\u4fe1\u5fc3\u8bad\u7ec3\u8bfe\u7a0b\uff0c\u5efa\u7acb\u5185\u5728\u5b89\u5168\u611f\u3002\u8bb0\u4f4f\uff0c\u4e0d\u540c\u7684\u89c2\u70b9\u5e76\u4e0d\u662f\u5bf9\u60a8\u7684\u5a01\u80c1\uff0c\u800c\u662f\u4e30\u5bcc\u751f\u6d3b\u7684\u673a\u4f1a\u3002\"\n                }\n            };\n\n            const analysis = analyses[this.state.levelIndex];\n            \n            \/\/ \u4e2a\u6027\u5316\u5206\u6790\u5185\u5bb9\n            let personalizedAnalysis = `\n                <div style=\"padding: 10px 15px; background: linear-gradient(135deg, #f0f9f8 0%, #e8f5f3 100%); border-radius: 10px; margin-bottom: 20px;\">\n                    <p style=\"margin: 0; color: #5a8a89; font-weight: 500;\">\n                        <i class=\"bi bi-person-circle me-2\"><\/i>\n                        ${this.state.userAge}\u5c81 | \u603b\u5206 ${this.state.totalScore} \u5206 | \u5305\u5bb9\u529b${this.state.level}\n                    <\/p>\n                <\/div>\n            `;\n\n            \/\/ \u7ef4\u5ea6\u5206\u6790\n            let dimensionAnalysis = `\n                <h4 style=\"font-size: 18px; font-weight: bold; color: #3a5a59; margin-top: 25px; margin-bottom: 15px;\">\n                    <i class=\"bi bi-bar-chart-line me-2\"><\/i>\u7ef4\u5ea6\u5206\u6790\n                <\/h4>\n                <p style=\"color: #666; margin-bottom: 15px;\">\n                    \u60a8\u5728\u300c<strong>${strongest[0]}<\/strong>\u300d\u7ef4\u5ea6\u8868\u73b0\u6700\u597d\uff08${strongest[1]}%\uff09\uff0c\n                    \u8bf4\u660e\u60a8\u5728\u8fd9\u65b9\u9762\u7684\u5305\u5bb9\u5ea6\u8f83\u9ad8\u3002\n                    \u800c\u300c<strong>${weakest[0]}<\/strong>\u300d\u7ef4\u5ea6\uff08${weakest[1]}%\uff09\u8fd8\u6709\u63d0\u5347\u7a7a\u95f4\u3002\n                <\/p>\n            `;\n\n            \/\/ \u4e2a\u6027\u5316\u5efa\u8bae\n            let personalizedSuggestions = `\n                <h4 style=\"font-size: 18px; font-weight: bold; color: #3a5a59; margin-top: 25px; margin-bottom: 15px;\">\n                    <i class=\"bi bi-lightbulb me-2\"><\/i>\u4e2a\u6027\u5316\u5efa\u8bae\n                <\/h4>\n                <div style=\"background: #fef9f3; padding: 15px; border-radius: 10px; border-left: 4px solid #d4a574;\">\n                    <p style=\"margin-bottom: 10px; color: #666;\">${analysis.suggestion}<\/p>\n            `;\n\n            \/\/ \u6839\u636e\u6700\u5f31\u7ef4\u5ea6\u7ed9\u51fa\u9488\u5bf9\u6027\u5efa\u8bae\n            if (weakest[0] === '\u610f\u89c1\u63a5\u7eb3' && weakest[1] < 50) {\n                personalizedSuggestions += `\n                    <p style=\"margin-bottom: 5px; color: #666;\">\n                        <i class=\"bi bi-check-circle me-2\" style=\"color: #d4a574;\"><\/i>\n                        \u7ec3\u4e60\u79ef\u6781\u503e\u542c\uff0c\u5728\u5bf9\u8bdd\u4e2d\u5148\u7406\u89e3\u518d\u8bc4\u5224\n                    <\/p>\n                `;\n            }\n            if (weakest[0] === '\u793e\u4f1a\u5305\u5bb9' && weakest[1] < 50) {\n                personalizedSuggestions += `\n                    <p style=\"margin-bottom: 5px; color: #666;\">\n                        <i class=\"bi bi-check-circle me-2\" style=\"color: #d4a574;\"><\/i>\n                        \u591a\u4e86\u89e3\u4e0d\u540c\u6587\u5316\u80cc\u666f\uff0c\u53c2\u4e0e\u793e\u533a\u591a\u5143\u5316\u6d3b\u52a8\n                    <\/p>\n                `;\n            }\n            if (weakest[0] === '\u751f\u6d3b\u6001\u5ea6' && weakest[1] < 50) {\n                personalizedSuggestions += `\n                    <p style=\"margin-bottom: 5px; color: #666;\">\n                        <i class=\"bi bi-check-circle me-2\" style=\"color: #d4a574;\"><\/i>\n                        \u4fdd\u6301\u5f00\u653e\u5fc3\u6001\uff0c\u63a5\u7eb3\u751f\u6d3b\u65b9\u5f0f\u7684\u591a\u6837\u6027\n                    <\/p>\n                `;\n            }\n            if (weakest[0] === '\u4ef7\u503c\u89c2\u5ff5' && weakest[1] < 50) {\n                personalizedSuggestions += `\n                    <p style=\"margin-bottom: 5px; color: #666;\">\n                        <i class=\"bi bi-check-circle me-2\" style=\"color: #d4a574;\"><\/i>\n                        \u8ba4\u8bc6\u5230\u4ef7\u503c\u89c2\u7684\u591a\u5143\u6027\uff0c\u5c0a\u91cd\u4e0d\u540c\u7684\u4eba\u751f\u9009\u62e9\n                    <\/p>\n                `;\n            }\n\n            personalizedSuggestions += `<\/div>`;\n\n            this.elements.analysisContent.innerHTML = `\n                <h3 style=\"font-size: 22px; font-weight: bold; margin-bottom: 20px; color: #5a8a89;\">\n                    ${analysis.title}\n                <\/h3>\n                ${personalizedAnalysis}\n                <p style=\"color: #666; line-height: 1.8; margin-bottom: 15px;\">${analysis.content}<\/p>\n                ${dimensionAnalysis}\n                ${personalizedSuggestions}\n                \n                <div style=\"margin-top: 30px; padding-top: 20px; border-top: 1px solid #e0e0e0;\">\n                    <h4 style=\"font-size: 18px; font-weight: bold; color: #3a5a59; margin-bottom: 15px;\">\n                        <i class=\"bi bi-book me-2\"><\/i>\u5173\u4e8e\u5305\u5bb9\u529b\n                    <\/h4>\n                    <p style=\"color: #888; line-height: 1.6; margin-bottom: 10px;\">\n                        \u5305\u5bb9\u529b\u548c\u81ea\u4fe1\u5fc3\u6709\u5bc6\u4e0d\u53ef\u5206\u7684\u5173\u7cfb\u3002\u81ea\u4fe1\u7684\u4eba\u66f4\u5bb9\u6613\u63a5\u7eb3\u4e0d\u540c\u89c2\u70b9\uff0c\u56e0\u4e3a\u4ed6\u4eec\u4e0d\u4f1a\u5c06\u5dee\u5f02\u89c6\u4e3a\u5a01\u80c1\u3002\n                    <\/p>\n                    <p style=\"color: #888; line-height: 1.6;\">\n                        \u5305\u5bb9\u529b\u7684\u57f9\u517b\u662f\u4e00\u4e2a\u6e10\u8fdb\u7684\u8fc7\u7a0b\uff0c\u9700\u8981\u901a\u8fc7\u4e0d\u65ad\u7684\u5b66\u4e60\u548c\u5b9e\u8df5\u6765\u63d0\u5347\u3002\u6bcf\u4e00\u6b21\u4e0e\u4e0d\u540c\u89c2\u70b9\u7684\u78b0\u649e\uff0c\u90fd\u662f\u6210\u957f\u7684\u673a\u4f1a\u3002\n                    <\/p>\n                <\/div>\n            `;\n        }\n\n        renderChart() {\n            if (this.state.chartInstance) {\n                this.state.chartInstance.destroy();\n            }\n\n            const ctx = this.elements.chart.getContext('2d');\n            \n            const dimensions = {\n                '\u610f\u89c1\u63a5\u7eb3': this.calculateDimensionScore([1, 2, 10, 11, 23]),\n                '\u793e\u4f1a\u5305\u5bb9': this.calculateDimensionScore([2, 3, 6, 7, 11, 12]),\n                '\u751f\u6d3b\u6001\u5ea6': this.calculateDimensionScore([4, 5, 13, 15, 19, 20, 21]),\n                '\u4ef7\u503c\u89c2\u5ff5': this.calculateDimensionScore([8, 14, 16, 17, 18, 22])\n            };\n\n            this.state.chartInstance = new Chart(ctx, {\n                type: 'radar',\n                data: {\n                    labels: Object.keys(dimensions),\n                    datasets: [{\n                        label: '\u5305\u5bb9\u529b\u5206\u6790',\n                        data: Object.values(dimensions),\n                        fill: true,\n                        backgroundColor: 'rgba(122, 184, 179, 0.2)',\n                        borderColor: '#5a8a89',\n                        borderWidth: 3,\n                        pointBackgroundColor: '#5a8a89',\n                        pointBorderColor: '#fff',\n                        pointBorderWidth: 2,\n                        pointRadius: 6,\n                        pointHoverRadius: 8\n                    }]\n                },\n                options: {\n                    responsive: true,\n                    maintainAspectRatio: true,\n                    plugins: {\n                        legend: {\n                            display: false\n                        },\n                        tooltip: {\n                            callbacks: {\n                                label: function(context) {\n                                    return context.label + ': ' + context.parsed.r + '%';\n                                }\n                            }\n                        }\n                    },\n                    scales: {\n                        r: {\n                            angleLines: {\n                                color: 'rgba(0, 0, 0, 0.1)'\n                            },\n                            grid: {\n                                color: 'rgba(0, 0, 0, 0.1)'\n                            },\n                            pointLabels: {\n                                font: {\n                                    size: 14,\n                                    weight: 500\n                                },\n                                color: '#5a8a89'\n                            },\n                            suggestedMin: 0,\n                            suggestedMax: 100,\n                            ticks: {\n                                stepSize: 20,\n                                font: {\n                                    size: 12\n                                },\n                                color: '#999'\n                            }\n                        }\n                    }\n                }\n            });\n        }\n\n        calculateDimensionScore(indices) {\n            const scores = indices.map(i => this.state.answers[i - 1] || 0);\n            const total = scores.reduce((sum, score) => sum + score, 0);\n            const maxPossible = indices.length * 6;\n            return Math.round((total \/ maxPossible) * 100);\n        }\n\n        restartQuiz() {\n            this.state.currentQuestion = 0;\n            this.state.answers = [];\n            this.state.totalScore = 0;\n            this.elements.ageInput.value = '';\n            this.showPage('intro');\n            this.scrollToTop();\n        }\n\n        scrollToTop() {\n            window.scrollTo({ top: 0, behavior: 'smooth' });\n        }\n    }\n\n    \/\/ \u521d\u59cb\u5316\u6d4b\u9a8c\n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', () => new ToleranceQuiz());\n    } else {\n        new ToleranceQuiz();\n    }\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u53e4\u4eba\u8bf4\uff1a\u300c\u6c5f\u6d77\u6240\u4ee5\u80fd\u4e3a\u767e\u8c37\u738b\u8005\uff0c\u4ee5\u5176\u5584\u4e0b\u4e4b\u3002\u300d\u4ece\u793e\u4f1a\u751f\u6d3b\u5b9e\u8df5\u6765\u770b\uff0c\u5bbd\u5bb9\u5927\u5ea6\u786e\u5b9e\u662f\u4eba\u5728\u5b9e\u9645\u751f\u6d3b\u4e2d\u4e0d\u53ef\u7f3a\u5c11\u7684\u7d20\u8d28\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,175],"tags":[238],"class_list":["post-2702","post","type-post","status-publish","format-standard","hentry","category-personality","category-relationships","tag-tolerance"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2702","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=2702"}],"version-history":[{"count":7,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2702\/revisions"}],"predecessor-version":[{"id":10689,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2702\/revisions\/10689"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2702"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2702"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}