{"id":3213,"date":"2023-10-16T09:00:57","date_gmt":"2023-10-16T01:00:57","guid":{"rendered":"https:\/\/bookmark.tw\/?p=3213"},"modified":"2025-08-14T22:27:12","modified_gmt":"2025-08-14T14:27:12","slug":"too-narcissistic-to-be-annoying","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/too-narcissistic-to-be-annoying","title":{"rendered":"\u81ea\u6200\u50be\u5411\u6e2c\u9a57\uff1a\u4f60\u662f\u5426\u81ea\u6200\u5f97\u8a0e\u4eba\u53ad"},"content":{"rendered":"<!-- Bootstrap 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    <style>\n        \/* \u6700\u5c0f\u5316\u81ea\u5b9a\u7fa9CSS - \u50c5\u4fdd\u7559\u5fc5\u8981\u7684\u52d5\u756b\u548c\u7279\u6548 *\/\n        :root {\n            --quiz-primary: #667eea;\n            --quiz-secondary: #764ba2;\n            --quiz-success: #5d9c59;\n            --quiz-light: #a8e6cf;\n        }\n        \n        \/* \u6f38\u8b8a\u80cc\u666f\u6548\u679c *\/\n        .bg-gradient-primary {\n            background: linear-gradient(135deg, var(--quiz-primary) 0%, var(--quiz-secondary) 100%) !important;\n        }\n        \n        .bg-gradient-success {\n            background: linear-gradient(135deg, var(--quiz-success) 0%, var(--quiz-light) 100%) !important;\n        }\n        \n        \/* \u52d5\u756b\u6548\u679c *\/\n        .fade-in {\n            animation: fadeIn 0.4s ease-in;\n        }\n        \n        @keyframes fadeIn {\n            from { opacity: 0; transform: translateY(10px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n        \n        \/* \u9078\u9805hover\u6548\u679c *\/\n        .option-card {\n            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n            cursor: pointer;\n        }\n        \n        .option-card:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15) !important;\n        }\n        \n        .option-card.active {\n            border-color: var(--quiz-success) !important;\n            background-color: rgba(168, 230, 207, 0.1);\n        }\n        \n        \/* \u52fe\u9078\u52d5\u756b *\/\n        .check-icon {\n            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n        }\n        \n        .option-card.active .check-icon {\n            transform: scale(1.2) rotate(360deg);\n        }\n        \n        \/* \u9801\u9762\u5207\u63db *\/\n        .quiz-page {\n            display: none;\n        }\n        \n        .quiz-page.active {\n            display: block;\n            animation: fadeIn 0.5s ease;\n        }\n        \n        \/* \u5716\u8868\u5bb9\u5668 *\/\n        .chart-container {\n            position: relative;\n            height: 300px;\n            max-width: 400px;\n            margin: 0 auto;\n        }\n    <\/style>\n<div class=\"container py-4\">\n    \n    <!-- \u5f15\u5c0e\u9801 -->\n    <div id=\"introPage\" class=\"quiz-page active\">\n        <div class=\"row justify-content-center\">\n            <div class=\"col-lg-10\">\n                <!-- \u6a19\u984c\u5361\u7247 -->\n                <div class=\"card border-0 shadow-lg mb-5 fade-in\">\n                    <div class=\"card-body text-center py-5 bg-gradient-primary text-white rounded\">\n                        <h1 class=\"display-4 fw-bold mb-3\">\n                            <i class=\"bi bi-heart-pulse me-3\"><\/i>\u81ea\u6200\u50be\u5411\u6e2c\u9a57\n                        <\/h1>\n                        <p class=\"lead mb-0 fs-5 opacity-90\">\n                            \u63a2\u7d22\u4f60\u7684\u81ea\u6211\u8a8d\u77e5\u7a0b\u5ea6\uff0c\u4e86\u89e3\u4f60\u662f\u5426\u904e\u5ea6\u81ea\u6200\u6216\u9700\u8981\u63d0\u5347\u81ea\u4fe1\n                        <\/p>\n                    <\/div>\n                <\/div>\n                \n                <!-- \u7279\u8272\u5361\u7247\u7d44 -->\n                <div class=\"row g-4 mb-5\">\n                    <div class=\"col-md-4 fade-in\">\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-warning bg-opacity-10 d-inline-flex align-items-center justify-content-center mb-3\" \n                                     style=\"width: 80px; height: 80px;\">\n                                    <i class=\"bi bi-lightbulb fs-1 text-warning\"><\/i>\n                                <\/div>\n                                <h5 class=\"card-title\">\u6df1\u5165\u81ea\u6211\u63a2\u7d22<\/h5>\n                                <p class=\"card-text text-muted\">\n                                    \u900f\u904e10\u9053\u7cbe\u5fc3\u8a2d\u8a08\u7684\u554f\u984c\uff0c\u6df1\u5165\u4e86\u89e3\u4f60\u7684\u81ea\u6200\u50be\u5411\u7a0b\u5ea6\n                                <\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"col-md-4 fade-in\" style=\"animation-delay: 0.1s;\">\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 d-inline-flex align-items-center justify-content-center mb-3\" \n                                     style=\"width: 80px; height: 80px;\">\n                                    <i class=\"bi bi-graph-up fs-1 text-info\"><\/i>\n                                <\/div>\n                                <h5 class=\"card-title\">\u5c08\u696d\u5206\u6790\u5831\u544a<\/h5>\n                                <p class=\"card-text text-muted\">\n                                    \u7372\u5f97\u8a73\u7d30\u7684\u6e2c\u9a57\u7d50\u679c\u5206\u6790\uff0c\u5305\u542b\u8996\u89ba\u5316\u5716\u8868\u5c55\u793a\n                                <\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"col-md-4 fade-in\" style=\"animation-delay: 0.2s;\">\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-danger bg-opacity-10 d-inline-flex align-items-center justify-content-center mb-3\" \n                                     style=\"width: 80px; height: 80px;\">\n                                    <i class=\"bi bi-heart fs-1 text-danger\"><\/i>\n                                <\/div>\n                                <h5 class=\"card-title\">\u500b\u4eba\u6210\u9577\u5efa\u8b70<\/h5>\n                                <p class=\"card-text text-muted\">\n                                    \u6839\u64da\u6e2c\u9a57\u7d50\u679c\u63d0\u4f9b\u91dd\u5c0d\u6027\u7684\u81ea\u6211\u63d0\u5347\u5efa\u8b70\n                                <\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <!-- \u8aaa\u660e\u63d0\u793a -->\n                <div class=\"alert alert-success border-0 shadow-sm mb-5 fade-in\" style=\"animation-delay: 0.3s;\">\n                    <div class=\"d-flex\">\n                        <div class=\"flex-shrink-0\">\n                            <i class=\"bi bi-info-circle-fill fs-3 text-success\"><\/i>\n                        <\/div>\n                        <div class=\"flex-grow-1 ms-3\">\n                            <h5 class=\"alert-heading\">\u95dc\u65bc\u9019\u500b\u6e2c\u9a57<\/h5>\n                            <p class=\"mb-0\">\n                                \u4eba\u4eba\u90fd\u61c9\u8a72\u611b\u81ea\u5df1\uff0c\u4f46\u611b\u5f97\u904e\u706b\u5c31\u5371\u96aa\u4e86\u3002\u9069\u5ea6\u7684\u81ea\u6200\u53ef\u4ee5\u589e\u52a0\u500b\u4eba\u9b45\u529b\uff0c\n                                \u4f46\u904e\u5ea6\u5247\u53ef\u80fd\u5f71\u97ff\u4eba\u969b\u95dc\u4fc2\u3002\u9019\u500b\u6e2c\u9a57\u5c07\u5e6b\u52a9\u4f60\u4e86\u89e3\u81ea\u5df1\u7684\u81ea\u6200\u7a0b\u5ea6\uff0c\n                                \u627e\u5230\u5065\u5eb7\u7684\u81ea\u6211\u8a8d\u77e5\u5e73\u8861\u9ede\u3002\n                            <\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <!-- \u958b\u59cb\u6309\u9215 -->\n                <div class=\"text-center\">\n                    <button class=\"btn btn-lg px-5 py-3 text-white bg-gradient-primary shadow-lg\" \n                            onclick=\"startQuiz()\">\n                        <i class=\"bi bi-play-circle me-2\"><\/i>\n                        <span class=\"fw-bold\">\u5f00\u59cb\u6d4b\u9a8c<\/span>\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n    \n    <!-- \u6e2c\u9a57\u9801 -->\n    <div id=\"quizPage\" class=\"quiz-page\">\n        <div class=\"row justify-content-center\">\n            <div class=\"col-lg-8\">\n                <!-- \u6a19\u984c -->\n                <div class=\"text-center mb-4\">\n                    <h2 class=\"display-6 fw-bold text-primary\">\n                        <i class=\"bi bi-clipboard-check me-2\"><\/i>\u81ea\u6200\u50be\u5411\u6e2c\u9a57\n                    <\/h2>\n                <\/div>\n                \n                <!-- \u9032\u5ea6\u689d -->\n                <div class=\"card border-0 shadow-sm mb-4\">\n                    <div class=\"card-body\">\n                        <div class=\"d-flex justify-content-between align-items-center mb-2\">\n                            <span class=\"text-muted\">\u6d4b\u9a8c\u8fdb\u5ea6<\/span>\n                            <span class=\"badge bg-primary rounded-pill px-3\" id=\"questionCounter\">\n                                \u554f\u984c 1 \/ 10\n                            <\/span>\n                        <\/div>\n                        <div class=\"progress\" style=\"height: 25px;\">\n                            <div id=\"progressBar\" class=\"progress-bar bg-gradient-success progress-bar-striped progress-bar-animated\" \n                                 role=\"progressbar\" style=\"width: 10%\">\n                                10%\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <!-- \u554f\u984c\u5361\u7247 -->\n                <div class=\"card border-0 shadow\">\n                    <div class=\"card-body p-4\">\n                        <h4 class=\"card-title mb-4\" id=\"questionText\">\n                            1. \u898b\u5230\u4e09\u6b3e\u53c8\u5e73\u53c8\u4eae\u7684\u93e1\u5b50\uff0c\u4f60\u6703\u8cb7\u4ee5\u4e0b\u54ea\u4e00\u6b3e\uff1f\n                        <\/h4>\n                        \n                        <!-- \u9078\u9805\u5bb9\u5668 -->\n                        <div id=\"optionsContainer\">\n                            <!-- \u9078\u9805\u5c07\u7531JavaScript\u52d5\u614b\u751f\u6210 -->\n                        <\/div>\n                        \n                        <!-- \u5c0e\u822a\u6309\u9215 -->\n                        <div class=\"d-flex justify-content-between mt-4\">\n                            <button id=\"prevBtn\" class=\"btn btn-outline-secondary px-4\" \n                                    onclick=\"previousQuestion()\" style=\"display: none;\">\n                                <i class=\"bi bi-arrow-left me-2\"><\/i>\u4e0a\u4e00\u9898\n                            <\/button>\n                            <div><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n    \n    <!-- \u7d50\u679c\u9801 -->\n    <div id=\"resultPage\" class=\"quiz-page\">\n        <div class=\"row justify-content-center\">\n            <div class=\"col-lg-10\">\n                <!-- \u7d50\u679c\u6a19\u984c -->\n                <div class=\"text-center mb-4\">\n                    <h2 class=\"display-6 fw-bold text-primary\">\n                        <i class=\"bi bi-trophy me-2\"><\/i>\u6d4b\u9a8c\u7ed3\u679c\n                    <\/h2>\n                <\/div>\n                \n                <!-- \u5206\u6578\u5361\u7247 -->\n                <div class=\"card border-0 shadow-lg mb-4 overflow-hidden\">\n                    <div class=\"card-body text-center py-5 bg-gradient-primary text-white\">\n                        <h3 id=\"resultLevel\" class=\"mb-3\">\u81ea\u6200\u5ea6\u8a55\u4f30<\/h3>\n                        <div class=\"display-1 fw-bold mb-3\" id=\"resultScore\">0\u5206<\/div>\n                        <div class=\"fs-4\" id=\"resultPercentage\">\u81ea\u6200\u5ea6\uff1a0%<\/div>\n                    <\/div>\n                <\/div>\n                \n                <!-- \u7d50\u679c\u8a73\u60c5 -->\n                <div class=\"row g-4\">\n                    <!-- \u5716\u8868\u5361\u7247 -->\n                    <div class=\"col-lg-6\">\n                        <div class=\"card h-100 border-0 shadow\">\n                            <div class=\"card-body\">\n                                <h5 class=\"card-title mb-4\">\n                                    <i class=\"bi bi-bar-chart-line me-2 text-info\"><\/i>\n                                    \u81ea\u6200\u6307\u6578\u5206\u6790\n                                <\/h5>\n                                <div class=\"chart-container\">\n                                    <canvas id=\"resultChart\"><\/canvas>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    \n                    <!-- \u5206\u6790\u5361\u7247 -->\n                    <div class=\"col-lg-6\">\n                        <div class=\"card h-100 border-0 shadow\">\n                            <div class=\"card-body\">\n                                <h5 class=\"card-title mb-4\">\n                                    <i class=\"bi bi-clipboard-data me-2 text-success\"><\/i>\n                                    \u8be6\u7ec6\u89e3\u6790\n                                <\/h5>\n                                <div id=\"resultAnalysis\">\n                                    <!-- \u5206\u6790\u5167\u5bb9\u5c07\u7531JavaScript\u751f\u6210 -->\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <!-- \u5fc3\u7406\u8a55\u6790 -->\n                <div class=\"card border-0 shadow mt-4\">\n                    <div class=\"card-body\">\n                        <h5 class=\"card-title mb-3\">\n                            <i class=\"bi bi-lightbulb me-2 text-warning\"><\/i>\n                            \u5fc3\u7406\u8bc4\u6790\n                        <\/h5>\n                        <p class=\"text-muted mb-2\">\n                            \u81ea\u6200\u6027\u75c5\u614b\u4eba\u683c\u662f\u4eba\u683c\u969c\u7919\u4e4b\u4e00\uff0c\u5176\u4e3b\u8981\u7279\u5fb5\u5305\u62ec\u5f37\u70c8\u7684\u81ea\u6211\u8868\u73fe\u6b32\u3001\n                            \u4e0d\u73fe\u5be6\u5730\u8a87\u5927\u81ea\u5df1\u7684\u6210\u7e3e\u3001\u7f3a\u4e4f\u8cac\u4efb\u5fc3\u7b49\u3002\u9069\u5ea6\u7684\u81ea\u6200\u6709\u52a9\u65bc\u5efa\u7acb\u81ea\u4fe1\uff0c\n                            \u4f46\u904e\u5ea6\u5247\u6703\u5f71\u97ff\u4eba\u969b\u95dc\u4fc2\u548c\u500b\u4eba\u767c\u5c55\u3002\n                        <\/p>\n                        <p class=\"text-muted mb-0\">\n                            \u6bcf\u500b\u4eba\u90fd\u61c9\u8a72\u611b\u81ea\u5df1\uff0c\u95dc\u9375\u5728\u65bc\u627e\u5230\u5e73\u8861\u9ede\u3002\u5065\u5eb7\u7684\u81ea\u6211\u8a8d\u77e5\u65e2\u5305\u542b\n                            \u5c0d\u81ea\u5df1\u7684\u6b23\u8cde\uff0c\u4e5f\u5305\u542b\u5c0d\u4ed6\u4eba\u7684\u5c0a\u91cd\u548c\u540c\u7406\u5fc3\u3002\n                        <\/p>\n                    <\/div>\n                <\/div>\n                \n                <!-- \u91cd\u65b0\u6e2c\u8a66\u6309\u9215 -->\n                <div class=\"text-center mt-5\">\n                    <button class=\"btn btn-lg px-5 py-3 text-white bg-gradient-primary shadow\" \n                            onclick=\"restartQuiz()\">\n                        <i class=\"bi bi-arrow-clockwise me-2\"><\/i>\n                        <span class=\"fw-bold\">\u91cd\u65b0\u6d4b\u8bd5<\/span>\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\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<script>\n\/\/ \u6e2c\u9a57\u6578\u64da\nconst quizData = {\n    questions: [\n        {\n            id: 1,\n            text: '\u898b\u5230\u4e09\u6b3e\u53c8\u5e73\u53c8\u4eae\u7684\u93e1\u5b50\uff0c\u4f60\u6703\u8cb7\u4ee5\u4e0b\u54ea\u4e00\u6b3e\uff1f',\n            options: [\n                { text: '\u5713\u5f62\u6c92\u5716\u6848\u7684', value: 'A', score: 3 },\n                { text: '\u56db\u65b9\u5f62\u6de8\u8272\u7684', value: 'B', score: 1 },\n                { text: '\u6709\u82b1\u7e5e\u908a\u7684', value: 'C', score: 5 }\n            ]\n        },\n        {\n            id: 2,\n            text: '\u516c\u53f8\u6bcf\u5e74\u590f\u5929\u90fd\u6703\u8209\u8fa6\u4e0d\u540c\u7684\u6d3b\u52d5\uff0c\u4f60\u6703\u9078\u64c7\u4ee5\u4e0b\u54ea\u4e00\u9805\uff1f',\n            options: [\n                { text: '\u6ed1\u6c34\u6bd4\u8cfd', value: 'A', score: 5 },\n                { text: '\u6f5b\u6c34\u6bd4\u8cfd', value: 'B', score: 1 },\n                { text: '\u6ed1\u6d6a\u98a8\u5e06\u6bd4\u8cfd', value: 'C', score: 3 }\n            ]\n        },\n        {\n            id: 3,\n            text: '\u4f60\u7167\u93e1\u5b50\u6642\u559c\u6b61\u5f9e\u54ea\u500b\u89d2\u5ea6\u671b\u81ea\u5df1\uff1f',\n            options: [\n                { text: '\u6b63\u9762\u534a\u8eab', value: 'A', score: 3 },\n                { text: '\u6b63\u9762\u5168\u8eab', value: 'B', score: 5 },\n                { text: '\u5074\u9762\u5168\u8eab', value: 'C', score: 1 }\n            ]\n        },\n        {\n            id: 4,\n            text: '\u901b\u8857\u6642\uff0c\u4f60\u670b\u53cb\u8aaa\u53bb\u8cb7\u5f69\u7968\uff0c\u7b49\u4ed6\u4e4b\u969b\uff0c\u4f60\u6703\u505a\u4ec0\u9ebc\uff1f',\n            options: [\n                { text: '\u62ff\u672c\u5c0f\u8aaa\u51fa\u4f86\u770b', value: 'A', score: 3 },\n                { text: '\u5f9e\u8def\u908a\u7684\u73bb\u7483\u4e2d\u671b\u4e00\u4e0b\u81ea\u5df1', value: 'B', score: 5 },\n                { text: '\u56db\u5468\u5f35\u671b\u8def\u4eba\u7684\u4e00\u8209\u4e00\u52d5', value: 'C', score: 1 }\n            ]\n        },\n        {\n            id: 5,\n            text: '\u5982\u679c\u8981\u4f60\u8eab\u4e0a\u6709\u4e00\u90e8\u5206\u5fc5\u9808\u662f\u7d05\u8272\uff0c\u4f60\u6703\u9078\u64c7\u4ee5\u4e0b\u54ea\u4e00\u9805\uff1f',\n            options: [\n                { text: '\u978b', value: 'A', score: 3 },\n                { text: '\u80cc\u5fc3', value: 'B', score: 5 },\n                { text: '\u76ae\u5e36', value: 'C', score: 1 }\n            ]\n        },\n        {\n            id: 6,\n            text: '\u4f60\u8aaa\u8a71\u6642\u6703\u7fd2\u6163\u6027\u5730\u89f8\u6478\u81ea\u5df1\u8eab\u9ad4\u7684\u54ea\u4e00\u90e8\u4f4d\uff1f',\n            options: [\n                { text: '\u982d\u9aee', value: 'A', score: 1 },\n                { text: '\u81c9', value: 'B', score: 3 },\n                { text: '\u624b\u6307', value: 'C', score: 5 }\n            ]\n        },\n        {\n            id: 7,\n            text: '\u5982\u679c\u53bb\u65e5\u672c\u65c5\u884c\uff0c\u4f60\u6703\u9078\u64c7\u4ee5\u4e0b\u54ea\u4e00\u9805\u6d3b\u52d5\uff1f',\n            options: [\n                { text: '\u722c\u5c71', value: 'A', score: 3 },\n                { text: '\u8cfc\u7269', value: 'B', score: 1 },\n                { text: '\u6ce1\u6eab\u6cc9', value: 'C', score: 5 }\n            ]\n        },\n        {\n            id: 8,\n            text: '\u4f60\u6709\u6c92\u6709\u504f\u98df\u7684\u7fd2\u6163\uff1f',\n            options: [\n                { text: '\u6c92\u6709\uff0c\u51fa\u540d\u7684\u98df\u7269\u300c\u711a\u5316\u7210\u300d', value: 'A', score: 1 },\n                { text: '\u5c11\u8a31\u504f\u98df', value: 'B', score: 3 },\n                { text: '\u56b4\u91cd\u6311\u98df', value: 'C', score: 5 }\n            ]\n        },\n        {\n            id: 9,\n            text: '\u4f60\u559c\u611b\u990a\u4ee5\u4e0b\u54ea\u4e00\u7a2e\u5bf5\u7269\uff1f',\n            options: [\n                { text: '\u8c93', value: 'A', score: 5 },\n                { text: '\u72d7', value: 'B', score: 3 },\n                { text: '\u5154', value: 'C', score: 1 }\n            ]\n        },\n        {\n            id: 10,\n            text: '\u9032\u4e86\u6377\u904b\uff0c\u624d\u77e5\u9053\u624b\u6a5f\u5fd8\u5728\u5bb6\u88e1\u4e86\uff0c\u4f60\u6703\uff1a',\n            options: [\n                { text: '\u4e0b\u4e00\u7ad9\u4e0b\u8eca\u56de\u5bb6\u88e1\u62ff', value: 'A', score: 5 },\n                { text: '\u554f\u540c\u4e8b\u501f\u4f86\u7528', value: 'B', score: 3 },\n                { text: '\u6c92\u5e36\u5c31\u7b97\u4e86', value: 'C', score: 1 }\n            ]\n        }\n    ],\n    currentQuestion: 0,\n    answers: [],\n    chartInstance: null\n};\n\n\/\/ \u5207\u63db\u9801\u9762\nfunction showPage(pageId) {\n    document.querySelectorAll('.quiz-page').forEach(page => {\n        page.classList.remove('active');\n    });\n    setTimeout(() => {\n        document.getElementById(pageId).classList.add('active');\n        window.scrollTo({ top: 0, behavior: 'smooth' });\n    }, 100);\n}\n\n\/\/ \u958b\u59cb\u6e2c\u9a57\nfunction startQuiz() {\n    quizData.currentQuestion = 0;\n    quizData.answers = [];\n    showPage('quizPage');\n    displayQuestion();\n}\n\n\/\/ \u986f\u793a\u554f\u984c\nfunction displayQuestion() {\n    const question = quizData.questions[quizData.currentQuestion];\n    \n    \/\/ \u66f4\u65b0\u9032\u5ea6\n    const progress = ((quizData.currentQuestion + 1) \/ quizData.questions.length) * 100;\n    document.getElementById('progressBar').style.width = `${progress}%`;\n    document.getElementById('progressBar').textContent = `${Math.round(progress)}%`;\n    document.getElementById('questionCounter').textContent = \n        `\u554f\u984c ${quizData.currentQuestion + 1} \/ ${quizData.questions.length}`;\n    \n    \/\/ \u66f4\u65b0\u554f\u984c\u6587\u5b57\n    document.getElementById('questionText').textContent = \n        `${question.id}. ${question.text}`;\n    \n    \/\/ \u751f\u6210\u9078\u9805 - \u4f7f\u7528Bootstrap\u539f\u751f\u7d44\u4ef6\n    const optionsHTML = question.options.map((option, index) => `\n        <div class=\"card option-card border-2 mb-3 ${quizData.answers[quizData.currentQuestion]?.value === option.value ? 'active border-success' : ''}\" \n             onclick=\"selectOption('${option.value}', ${option.score})\">\n            <div class=\"card-body\">\n                <!-- \u4f7f\u7528Bootstrap Flex utilities\u78ba\u4fdd\u6c34\u5e73\u5c0d\u9f4a -->\n                <div class=\"d-flex align-items-center\">\n                    <!-- \u5713\u5f62\u6307\u793a\u5668 -->\n                    <div class=\"flex-shrink-0 me-3\">\n                        <div class=\"rounded-circle border border-2 ${quizData.answers[quizData.currentQuestion]?.value === option.value ? 'bg-success border-success' : 'border-secondary'} \n                             d-flex align-items-center justify-content-center check-icon\"\n                             style=\"width: 32px; height: 32px;\">\n                            ${quizData.answers[quizData.currentQuestion]?.value === option.value ? \n                              '<i class=\"bi bi-check text-white fs-5\"><\/i>' : ''}\n                        <\/div>\n                    <\/div>\n                    <!-- \u9078\u9805\u5167\u5bb9 -->\n                    <div class=\"flex-grow-1\">\n                        <div class=\"d-flex align-items-center\">\n                            <span class=\"badge bg-secondary me-2\">${option.value}<\/span>\n                            <span class=\"fs-5\">${option.text}<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    `).join('');\n    \n    document.getElementById('optionsContainer').innerHTML = optionsHTML;\n    \n    \/\/ \u986f\u793a\/\u96b1\u85cf\u4e0a\u4e00\u984c\u6309\u9215\n    document.getElementById('prevBtn').style.display = \n        quizData.currentQuestion > 0 ? 'block' : 'none';\n}\n\n\/\/ \u9078\u64c7\u9078\u9805\nfunction selectOption(value, score) {\n    \/\/ \u4fdd\u5b58\u7b54\u6848\n    quizData.answers[quizData.currentQuestion] = { value, score };\n    \n    \/\/ \u66f4\u65b0UI - \u4f7f\u7528Bootstrap classes\n    document.querySelectorAll('.option-card').forEach(card => {\n        card.classList.remove('active', 'border-success');\n        const checkIcon = card.querySelector('.check-icon');\n        checkIcon.classList.remove('bg-success', 'border-success');\n        checkIcon.classList.add('border-secondary');\n        checkIcon.innerHTML = '';\n    });\n    \n    event.currentTarget.classList.add('active', 'border-success');\n    const checkIcon = event.currentTarget.querySelector('.check-icon');\n    checkIcon.classList.remove('border-secondary');\n    checkIcon.classList.add('bg-success', 'border-success');\n    checkIcon.innerHTML = '<i class=\"bi bi-check text-white fs-5\"><\/i>';\n    \n    \/\/ \u5ef6\u9072\u9032\u5165\u4e0b\u4e00\u984c\n    setTimeout(() => {\n        if (quizData.currentQuestion < quizData.questions.length - 1) {\n            quizData.currentQuestion++;\n            displayQuestion();\n        } else {\n            showResult();\n        }\n    }, 500);\n}\n\n\/\/ \u4e0a\u4e00\u984c\nfunction previousQuestion() {\n    if (quizData.currentQuestion > 0) {\n        quizData.currentQuestion--;\n        displayQuestion();\n    }\n}\n\n\/\/ \u986f\u793a\u7d50\u679c\nfunction showResult() {\n    const totalScore = quizData.answers.reduce((sum, answer) => sum + answer.score, 0);\n    \n    let level, percentage, analysis;\n    if (totalScore >= 10 && totalScore <= 20) {\n        level = '\u81ea\u6200\u4e0d\u8db3\uff0c\u81ea\u5351\u6709\u9918';\n        percentage = 0;\n        analysis = `\n            <div class=\"alert alert-info border-0\">\n                <p>\u4f60\u5c0d\u81ea\u5df1\u6c92\u6709\u4fe1\u5fc3\uff0c\u4e0d\u4f46\u8aaa\u4e0d\u4e0a\u81ea\u6200\uff0c\u800c\u4e14\u4f60\u5f88\u81ea\u5351\u3002\u8868\u9762\u4e0a\u770b\u4f86\uff0c\u4f60\u662f\u4e00\u500b\u666e\u901a\u7684\u4eba\uff0c\n                \u4f46\u5176\u5be6\u4f60\u7d93\u5e38\u5e0c\u671b\u5728\u5225\u4eba\u9762\u524d\u6709\u8868\u73fe\u81ea\u5df1\u7684\u6a5f\u6703\uff0c\u53ef\u60dc\u81ea\u5df1\u537b\u4e0d\u722d\u6c23\uff0c\u56e0\u800c\u7522\u751f\u9867\u5f71\u81ea\u6190\u7684\u611f\u89ba\u3002<\/p>\n                <hr>\n                <p class=\"mb-0\"><strong><i class=\"bi bi-lightbulb me-1\"><\/i>\u5efa\u8b70\uff1a<\/strong>\n                \u5b78\u7fd2\u5982\u4f55\u958b\u89e3\u81ea\u5df1\u3001\u9762\u5c0d\u73fe\u5be6\uff0c\u5efa\u7acb\u5065\u5eb7\u7684\u81ea\u4fe1\u5fc3\u3002\u9019\u7a2e\u5fc3\u7406\u969c\u7919\u5f88\u5feb\u5c31\u6703\u6d88\u5931\uff0c\u6700\u91cd\u8981\u7684\u662f\u8981\u76f8\u4fe1\u81ea\u5df1\u7684\u50f9\u503c\u3002<\/p>\n            <\/div>\n        `;\n    } else if (totalScore >= 21 && totalScore <= 30) {\n        level = '\u611b\u4eba\u53c8\u611b\u5df1';\n        percentage = 50;\n        analysis = `\n            <div class=\"alert alert-success border-0\">\n                <p>\u606d\u559c\u4f60\uff01\u4f60\u5c6c\u65bc\u6700\u6b63\u5e38\u4e0d\u904e\u7684\u985e\u578b\u3002\u4f60\u4e5f\u8a31\u6709\u6642\u6703\u81ea\u6200\u4e00\u756a\uff0c\u4f46\u9019\u7a2e\u5fc3\u7406\u53cd\u61c9\u662f\u6bcf\u500b\u4eba\u7e3d\u6703\u6709\u7684\uff0c\n                \u81ea\u6200\u7684\u7a0b\u5ea6\u4e5f\u70ba\u4eba\u6240\u63a5\u53d7\u3002<\/p>\n                <hr>\n                <p class=\"mb-0\"><strong><i class=\"bi bi-lightbulb me-1\"><\/i>\u5efa\u8b70\uff1a<\/strong>\n                \u7e7c\u7e8c\u4fdd\u6301\u9019\u7a2e\u5065\u5eb7\u7684\u81ea\u6211\u8a8d\u77e5\u3002\u4f60\u61c2\u5f97\u9069\u5ea6\u8868\u73fe\u81ea\u5df1\u7f8e\u7684\u4e00\u9762\uff0c\u81ea\u7136\u800c\u4e0d\u505a\u4f5c\uff0c\u9019\u8b93\u4f60\u5728\u4eba\u969b\u95dc\u4fc2\u4e2d\u6e38\u5203\u6709\u9918\u3002<\/p>\n            <\/div>\n        `;\n    } else {\n        level = '\u4e00\u751f\u6700\u611b\u662f\u81ea\u5df1';\n        percentage = 100;\n        analysis = `\n            <div class=\"alert alert-warning border-0\">\n                <p>\u8ffd\u6c42\u5b8c\u7f8e\u7121\u7455\u7684\u751f\u6d3b\u662f\u4f60\u4e00\u76f4\u6e34\u671b\u7684\u3002\u4f60\u5c0d\u4eba\u5c0d\u5df1\u7684\u8981\u6c42\u90fd\u5341\u5206\u9ad8\uff0c\u5c0d\u81ea\u5df1\u7684\u5916\u8c8c\u3001\u8eab\u6750\u3001\n                \u624d\u5b78\u5404\u65b9\u9762\u90fd\u5341\u5206\u6709\u81ea\u4fe1\uff0c\u8a8d\u70ba\u6c92\u4eba\u80fd\u6bd4\u5f97\u4e0a\u4f60\u3002<\/p>\n                <hr>\n                <p class=\"mb-0\"><strong><i class=\"bi bi-lightbulb me-1\"><\/i>\u5efa\u8b70\uff1a<\/strong>\n                \u8a66\u8457\u591a\u95dc\u6ce8\u4ed6\u4eba\u7684\u9700\u6c42\u548c\u611f\u53d7\uff0c\u5b78\u7fd2\u8b19\u905c\u548c\u540c\u7406\u5fc3\u3002\u5728\u611b\u60c5\u7684\u9053\u8def\u4e0a\uff0c\u8a18\u5f97\u611b\u4eba\u5982\u5df1\uff0c\u624d\u80fd\u7372\u5f97\u771f\u6b63\u7684\u5e78\u798f\u3002<\/p>\n            <\/div>\n        `;\n    }\n    \n    \/\/ \u66f4\u65b0\u7d50\u679c\n    document.getElementById('resultScore').textContent = `${totalScore}\u5206`;\n    document.getElementById('resultLevel').textContent = level;\n    document.getElementById('resultPercentage').textContent = `\u81ea\u6200\u5ea6\uff1a${percentage}%`;\n    document.getElementById('resultAnalysis').innerHTML = analysis;\n    \n    showPage('resultPage');\n    \n    \/\/ \u7e6a\u88fd\u5716\u8868\n    setTimeout(() => drawChart(percentage), 500);\n}\n\n\/\/ \u7e6a\u88fd\u5716\u8868\nfunction drawChart(percentage) {\n    if (quizData.chartInstance) {\n        quizData.chartInstance.destroy();\n    }\n    \n    const ctx = document.getElementById('resultChart');\n    quizData.chartInstance = new Chart(ctx, {\n        type: 'doughnut',\n        data: {\n            labels: ['\u81ea\u6200\u6307\u6578', '\u5269\u9918\u7a7a\u9593'],\n            datasets: [{\n                data: [percentage, 100 - percentage],\n                backgroundColor: [\n                    'rgba(102, 126, 234, 0.8)',\n                    'rgba(224, 224, 224, 0.2)'\n                ],\n                borderColor: [\n                    'rgba(102, 126, 234, 1)',\n                    'rgba(224, 224, 224, 0.3)'\n                ],\n                borderWidth: 2\n            }]\n        },\n        options: {\n            responsive: true,\n            maintainAspectRatio: false,\n            plugins: {\n                legend: {\n                    position: 'bottom',\n                    labels: {\n                        padding: 20,\n                        font: {\n                            size: 14\n                        }\n                    }\n                },\n                tooltip: {\n                    callbacks: {\n                        label: function(context) {\n                            return context.label + ': ' + context.parsed + '%';\n                        }\n                    }\n                }\n            },\n            cutout: '70%'\n        },\n        plugins: [{\n            id: 'centerText',\n            beforeDraw: function(chart) {\n                const { width, height, ctx } = chart;\n                ctx.restore();\n                \n                const fontSize = Math.min(width, height) \/ 8;\n                ctx.font = `bold ${fontSize}px sans-serif`;\n                ctx.textBaseline = 'middle';\n                ctx.textAlign = 'center';\n                \n                const text = `${percentage}%`;\n                const textX = width \/ 2;\n                const textY = height \/ 2 - 10;\n                \n                ctx.fillStyle = '#667eea';\n                ctx.fillText(text, textX, textY);\n                \n                ctx.font = `${fontSize * 0.4}px sans-serif`;\n                ctx.fillText('\u81ea\u6200\u5ea6', textX, textY + 25);\n                ctx.save();\n            }\n        }]\n    });\n}\n\n\/\/ \u91cd\u65b0\u6e2c\u8a66\nfunction restartQuiz() {\n    startQuiz();\n}\n<\/script>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>\u81ea\u604b\u5c31\u50cf\u7092\u83dc\u7528\u7684\u76d0\uff0c\u5c11\u4e86\u5219\u6de1\u800c\u65e0\u5473\uff0c\u591a\u4e86\u4fbf\u96be\u4ee5\u5165\u53e3\u3002\u5343\u4e07\u522b\u628a\u81ea\u604b\u53d1\u6325\u5230\u6781\u81f4\uff0c\u90a3\u4f1a\u6210\u4e3a\u4e00\u79cd\u75c5\u3002\u60f3\u77e5\u9053\u81ea\u5df1\u6709\u6ca1\u6709\u6f5c\u4f0f\u7684\u81ea\u604b\u503e\u5411\uff0c\u8bf7\u56de\u7b54\u4ee5\u4e0b\u95ee\u9898\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":[195],"class_list":["post-3213","post","type-post","status-publish","format-standard","hentry","category-personality","category-relationships","tag-narcissism"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/3213","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=3213"}],"version-history":[{"count":2,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/3213\/revisions"}],"predecessor-version":[{"id":10471,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/3213\/revisions\/10471"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=3213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=3213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=3213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}