{"id":3162,"date":"2023-10-24T09:24:11","date_gmt":"2023-10-24T01:24:11","guid":{"rendered":"https:\/\/bookmark.tw\/?p=3162"},"modified":"2025-05-06T20:31:35","modified_gmt":"2025-05-06T12:31:35","slug":"personality-from-leisure-time","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/personality-from-leisure-time","title":{"rendered":"\u4ece\u5982\u4f55\u6253\u53d1\u65f6\u95f4\u6d4b\u9a8c\u4f60\u7684\u6027\u683c"},"content":{"rendered":"<!-- \u6027\u683c\u6e2c\u9a57\u6a21\u584a - \u5f9e\u5982\u4f55\u6253\u767c\u6642\u9593\u770b\u4eba\u7684\u6027\u683c -->\n<div id=\"personality-quiz-container\" class=\"pq-container\">\n  <!-- \u5f15\u5c0e\u9801 -->\n  <div id=\"pq-intro-page\" class=\"pq-page pq-active\">\n    <h2 class=\"pq-title\">\u4ece\u5982\u4f55\u6253\u53d1\u65f6\u95f4\u770b\u4eba\u7684\u6027\u683c<\/h2>\n    <div class=\"pq-intro-content\">\n      <p>\u4eba\u7684\u6027\u683c\u53cd\u6620\u5728\u65b9\u65b9\u9762\u9762\uff0c\u5373\u4f7f\u5728\u95f2\u6687\u65f6\u95f4\u7684\u6d88\u9063\u6d3b\u52a8\u91cc\u4e5f\u4e0d\u4f8b\u5916\u3002\u4e0d\u4fe1\uff0c\u770b\u770b\u4e0b\u9762\u7684\u6d4b\u8bd5\u51c6\u4e0d\u51c6\uff1f<\/p>\n      <div class=\"pq-intro-image\">\n        <svg viewbox=\"0 0 200 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"pq-intro-svg\">\n          <path fill=\"#FF5733\" d=\"M48.8,-59.2C63.5,-48.1,76.3,-33.1,81.5,-15.3C86.8,2.5,84.6,23.2,74.1,37.8C63.5,52.3,44.7,60.7,25.9,67.4C7.1,74.1,-11.8,79.2,-30.2,74.7C-48.7,70.2,-66.7,56.1,-73.7,38.4C-80.7,20.7,-76.7,-0.7,-69.1,-19.1C-61.5,-37.5,-50.4,-52.9,-36.6,-64C-22.9,-75.1,-6.5,-81.8,8.6,-91.6C23.7,-101.3,46.7,-114.1,51.3,-106C55.9,-97.9,42.2,-68.8,48.8,-59.2Z\" transform=\"translate(100 100)\" \/>\n        <\/svg>\n      <\/div>\n      <button id=\"pq-start-btn\" class=\"pq-btn pq-start-btn\">\u6d4b\u8bd5\u5f00\u59cb<\/button>\n    <\/div>\n  <\/div>\n  <!-- \u6e2c\u9a57\u9801 -->\n  <div id=\"pq-quiz-page\" class=\"pq-page\">\n    <h2 class=\"pq-title\">\u6d4b\u8bd5\u8fdb\u884c\u4e2d<\/h2>\n    <div class=\"pq-progress-container\">\n      <div class=\"pq-progress-bar\">\n        <div class=\"pq-progress-fill\"><\/div>\n      <\/div>\n      <div class=\"pq-progress-text\">\u95ee\u98981\/1<\/div>\n    <\/div>\n    <div class=\"pq-question-container\">\n      <h3 class=\"pq-question\">\u4eba\u6700\u96be\u8010\u7684\u5c31\u662f\u5b64\u5355\u4e0e\u5bc2\u5bde\u3002\u5f53\u4f60\u65e0\u804a\u70e6\u8e81\u65f6\uff0c\u4f60\u4f1a\u505a\u4ec0\u4e48\u4e8b\u60c5\u6765\u6253\u53d1\u65f6\u95f4\u5462\uff1f<\/h3>\n      <div class=\"pq-options\">\n        <button class=\"pq-option-btn\" data-option=\"A\">A. \u6253\u7535\u8bdd\uff0c\u778e\u804a\u4e00\u756a<\/button>\n        <button class=\"pq-option-btn\" data-option=\"B\">B. \u4e0a\u5e8a\u7761\u89c9<\/button>\n        <button class=\"pq-option-btn\" data-option=\"C\">C. \u68b3\u6d17\u540e\u53bb\u73a9<\/button>\n        <button class=\"pq-option-btn\" data-option=\"D\">D. \u901b\u8857\u8d2d\u7269<\/button>\n        <button class=\"pq-option-btn\" data-option=\"E\">E. \u627e\u4e9b\u7f8e\u98df\uff0c\u5927\u5403\u5927\u559d\u4e00\u756a<\/button>\n        <button class=\"pq-option-btn\" data-option=\"F\">F. \u627e\u4eba\u53d1\u813e\u6c14<\/button>\n        <button class=\"pq-option-btn\" data-option=\"G\">G. \u6454\u4e1c\u897f<\/button>\n        <button class=\"pq-option-btn\" data-option=\"H\">H. \u62bd\u9999\u70df\u6c89\u601d<\/button>\n        <button class=\"pq-option-btn\" data-option=\"I\">I. \u627e\u670b\u53cb\u6253\u724c\uff0c\u6216\u4e00\u4f19\u4eba\u4e00\u8d77\u95f9<\/button>\n        <button class=\"pq-option-btn\" data-option=\"J\">J. \u6e05\u7406\u5bb6\u52a1\uff0c\u6253\u626b\u623f\u95f4<\/button>\n      <\/div>\n      <div class=\"pq-nav-buttons\">\n        <button id=\"pq-prev-btn\" class=\"pq-btn pq-nav-btn\" disabled>\u4e0a\u4e00\u9898<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n  <!-- \u7d50\u679c\u9801 -->\n  <div id=\"pq-result-page\" class=\"pq-page\">\n    <h2 class=\"pq-title\">\u7ed3\u679c\u5206\u6790<\/h2>\n    <div class=\"pq-result-container\">\n      <div class=\"pq-result-chart-container\">\n        <canvas id=\"pq-result-chart\"><\/canvas>\n      <\/div>\n      <div class=\"pq-result-text\" id=\"pq-result-text\">\n        <!-- \u7d50\u679c\u5167\u5bb9\u5c07\u5728\u9019\u88e1\u52d5\u614b\u751f\u6210 -->\n      <\/div>\n      <button id=\"pq-restart-btn\" class=\"pq-btn pq-restart-btn\">\u91cd\u65b0\u6d4b\u8bd5<\/button>\n    <\/div>\n  <\/div>\n<\/div>\n<script>\n(function() {\n  \/\/ \u907f\u514d\u5168\u5c40\u547d\u540d\u7a7a\u9593\u6c61\u67d3\n  const PersonalityQuiz = {\n    currentPage: 'intro',\n    selectedOption: null,\n    \n    \/\/ \u521d\u59cb\u5316\u6e2c\u9a57\n    init: function() {\n      this.initElements();\n      this.bindEvents();\n      this.loadChartJs();\n    },\n    \n    \/\/ \u521d\u59cb\u5316\u5143\u7d20\u5f15\u7528\n    initElements: function() {\n      this.container = document.getElementById('personality-quiz-container');\n      this.introPage = document.getElementById('pq-intro-page');\n      this.quizPage = document.getElementById('pq-quiz-page');\n      this.resultPage = document.getElementById('pq-result-page');\n      this.startBtn = document.getElementById('pq-start-btn');\n      this.prevBtn = document.getElementById('pq-prev-btn');\n      this.restartBtn = document.getElementById('pq-restart-btn');\n      this.optionBtns = document.querySelectorAll('.pq-option-btn');\n      this.resultText = document.getElementById('pq-result-text');\n      this.progressFill = document.querySelector('.pq-progress-fill');\n    },\n    \n    \/\/ \u7d81\u5b9a\u4e8b\u4ef6\n    bindEvents: function() {\n      this.startBtn.addEventListener('click', this.startQuiz.bind(this));\n      this.prevBtn.addEventListener('click', this.goToPrevious.bind(this));\n      this.restartBtn.addEventListener('click', this.restartQuiz.bind(this));\n      \n      this.optionBtns.forEach(btn => {\n        btn.addEventListener('click', (e) => {\n          this.selectOption(e.target.getAttribute('data-option'));\n        });\n      });\n    },\n    \n    \/\/ \u958b\u59cb\u6e2c\u9a57\n    startQuiz: function() {\n      this.showPage('quiz');\n      this.updateProgress();\n    },\n    \n    \/\/ \u9078\u64c7\u9078\u9805\n    selectOption: function(option) {\n      this.selectedOption = option;\n      this.showResults();\n    },\n    \n    \/\/ \u8fd4\u56de\u4e0a\u4e00\u984c\uff08\u5728\u9019\u500b\u6e2c\u9a57\u4e2d\u53ea\u6709\u4e00\u984c\uff09\n    goToPrevious: function() {\n      \/\/ \u7531\u65bc\u53ea\u6709\u4e00\u984c\uff0c\u4e0d\u9700\u8981\u5be6\u73fe\u5177\u9ad4\u908f\u8f2f\n    },\n    \n    \/\/ \u91cd\u65b0\u958b\u59cb\u6e2c\u9a57\n    restartQuiz: function() {\n      this.selectedOption = null;\n      this.showPage('intro');\n    },\n    \n    \/\/ \u986f\u793a\u7d50\u679c\n    showResults: function() {\n      \/\/ \u7372\u53d6\u7d50\u679c\u5167\u5bb9\n      const resultContent = this.getResultContent(this.selectedOption);\n      this.resultText.innerHTML = resultContent;\n      \n      \/\/ \u66f4\u65b0\u5716\u8868\n      this.updateResultChart(this.selectedOption);\n      \n      \/\/ \u986f\u793a\u7d50\u679c\u9801\n      this.showPage('result');\n    },\n    \n    \/\/ \u7372\u53d6\u7d50\u679c\u5167\u5bb9\n    getResultContent: function(option) {\n      const results = {\n        A: \"\u4f60\u5f88\u5584\u65bc\u4ea4\u670b\u53cb\u4e5f\u5f88\u91cd\u611f\u60c5\uff0c\u56e0\u70ba\u4f60\u5f88\u9700\u8981\u89aa\u60c5\u548c\u53cb\u60c5\u7684\u5b89\u6170\u3002\",\n        B: \"\u4f60\u662f\u6613\u53d7\u632b\u6298\u7684\u4eba\u3002\u4f60\u9047\u898b\u554f\u984c\u7e3d\u662f\u76e1\u91cf\u8eb2\u907f\uff0c\u8eb2\u907f\u4e0d\u6389\u624d\u6703\u8acb\u4eba\u5e6b\u5fd9\u89e3\u6c7a\u3002\u4f60\u4e0d\u559c\u6b61\u8cbb\u8166\u7b4b\u601d\u8003\u554f\u984c\uff0c\u76f8\u4fe1\u4e0d\u7406\u776c\u5b83\uff0c\u5b83\u5c31\u6703\u81ea\u52d5\u6d88\u5931\u3002\",\n        C: \"\u4f60\u662f\u5275\u696d\u578b\u7684\u4eba\u3002\u9069\u5408\u53ca\u65e9\u767c\u73fe\u81ea\u5df1\u7684\u5929\u5206\uff0c\u627e\u5230\u559c\u6b61\u7684\u8077\u696d\uff0c\u56e0\u70ba\u4f60\u5728\u52aa\u529b\u5de5\u4f5c\u548c\u5275\u696d\u6642\uff0c\u6703\u611f\u5230\u7121\u6bd4\u5feb\u6a02\u548c\u8208\u596e\u3002\u4f60\u5f88\u559c\u6b61\u5065\u8eab\u904b\u52d5\u6216\u6162\u8dd1\uff0c\u9019\u8b93\u4f60\u7684\u8eab\u9ad4\u548c\u7cbe\u795e\u6c38\u8446\u6700\u4f73\u72c0\u614b\u3002\",\n        D: \"\u4f60\u662f\u4f9d\u8cf4\u5149\u9bae\u5916\u8868\u751f\u6d3b\u7684\u4eba\u3002\u5916\u5728\u7684\u689d\u4ef6\u53ef\u4ee5\u589e\u52a0\u4f60\u7684\u81ea\u4fe1\u5fc3\uff0c\u8c50\u5bcc\u7684\u7269\u8cea\u751f\u6d3b\u80fd\u4f7f\u4f60\u611f\u5230\u5f88\u5b8c\u7f8e\u3002\u5225\u4eba\u5c0d\u4f60\u7684\u8b9a\u7f8e\u548c\u80af\u5b9a\uff0c\u624d\u662f\u4f60\u771f\u6b63\u9700\u8981\u7684\u3002\",\n        E: \"\u4f60\u662f\u53ca\u6642\u884c\u6a02\u578b\u7684\u4eba\u3002\u4f60\u4e0d\u6703\u56e0\u70ba\u5225\u4eba\u800c\u5f71\u97ff\u5fc3\u60c5\uff0c\u53ef\u4ee5\u96a8\u6642\u81ea\u5f97\u5176\u6a02\u3002\u4f60\u7684\u4eba\u751f\u89c0\u662f\u53ea\u8981\u81ea\u5df1\u89ba\u5f97\u5feb\u6a02\u5c31\u597d\uff0c\u4e0d\u5fc5\u5728\u4e4e\u660e\u5929\u7684\u7169\u60f1\uff0c\u4f60\u9700\u8981\u7d93\u7531\u611f\u5b98\u7684\u523a\u6fc0\u624d\u80fd\u5f97\u5230\u5feb\u6a02\u3002\",\n        F: \"\u4f60\u662f\u53d7\u904e\u5ea6\u5bf5\u611b\u548c\u7167\u9867\u7684\u4eba\u3002\u4f46\u4f60\u7684\u8faf\u624d\u5f88\u597d\uff0c\u990a\u6210\u4e86\u5c0d\u4eba\u76f4\u63a5\u767c\u813e\u6c23\u7684\u7fd2\u6163\u3002\u4f60\u7e3d\u8981\u50cf\u4e3b\u89d2\u822c\u53d7\u4eba\u91cd\u8996\uff0c\u611f\u60c5\u3001\u4e8b\u696d\u3001\u5a5a\u59fb\u53ca\u6027\uff0c\u90fd\u8981\u9806\u4f60\u7684\u5fc3\u610f\u624d\u80fd\u6301\u7e8c\u3002\",\n        G: \"\u4f60\u662f\u6f51\u5a66\u578b\u7684\u4eba\uff0c\u5bb9\u6613\u885d\u52d5\u548c\u53d7\u632b\u6298\u3002\u4f60\u5e38\u8a8d\u70ba\u5225\u4eba\u4e0d\u77ad\u89e3\u4f60\uff0c\u4e8b\u5be6\u4e0a\uff0c\u4f60\u4e5f\u4e0d\u77ad\u89e3\u81ea\u5df1\u662f\u54ea\u7a2e\u985e\u578b\u7684\u4eba\uff0c\u4f60\u8a8d\u70ba\u81ea\u5df1\u662f\u7c97\u4e2d\u5e36\u7d30\u7684\u4eba\uff0c\u5176\u5be6\u4f60\u5bb9\u6613\u559c\u6012\u7121\u5e38\uff0c\u60c5\u7dd2\u4e0d\u7a69\u5b9a\u3002\",\n        H: \"\u4f60\u7684\u813e\u6c23\u5f88\u597d\uff0c\u61c2\u5f97\u5fcd\u8010\u7f8e\u5fb7\uff0c\u4f46\u4e0d\u8f15\u6613\u50be\u5410\u5fc3\u4e8b\u3002\u56e0\u70ba\u4f60\u4e0d\u8f15\u6613\u9732\u51fa\u611f\u60c5\uff0c\u4e00\u822c\u4eba\u4e0d\u77e5\u9053\u4f60\u662f\u5f88\u91cd\u611f\u60c5\u7684\u4eba\u3002\u4f60\u4e5f\u662f\u8cac\u4efb\u611f\u5f88\u91cd\u7684\u4eba\u3002\",\n        I: \"\u4f60\u662f\u5f9e\u4f86\u4e0d\u70ba\u7169\u60f1\u6240\u56f0\u7684\u4eba\u3002\u5f88\u4e16\u6545\uff0c\u61c2\u5f97\u904b\u7528\u670b\u53cb\u95dc\u4fc2\u89e3\u6c7a\u554f\u984c\u6216\u6d88\u9664\u7169\u60f1\u3002\u4f60\u9019\u4e00\u751f\u96e2\u4e0d\u958b\u670b\u53cb\uff0c\u670b\u53cb\u5011\u4e5f\u96e2\u4e0d\u958b\u4f60\uff0c\u4f60\u5f9e\u4e0d\u4ecb\u610f\u771f\u5047\u9019\u4e00\u56de\u4e8b\uff0c\u53ea\u8981\u5927\u5925\u5152\u5728\u4e00\u8d77\u958b\u5fc3\u5c31\u597d\u3002\",\n        J: \"\u4f60\u662f\u63a1\u53d6\u884c\u52d5\u8005\u3002\u7576\u7169\u60f1\u4e0d\u80fd\u89e3\u6c7a\u6642\uff0c\u4f60\u6703\u4e00\u76f4\u60f3\u8457\u5982\u4f55\u8655\u7406\u9019\u4e9b\u7463\u788e\u4e8b\u52d9\u3002\u4f60\u7684\u8010\u5fc3\u548c\u8010\u529b\u90fd\u5f88\u5f37\uff0c\u9047\u5230\u56f0\u96e3\u4e0d\u6703\u8f15\u6613\u653e\u68c4\uff0c\u7e3d\u6703\u5728\u60f3\u5230\u597d\u8fa6\u6cd5\u6216\u627e\u5230\u597d\u6642\u6a5f\u5f8c\uff0c\u518d\u7e7c\u7e8c\u8655\u7406\u3002\"\n      };\n      \n      \/\/ \u751f\u6210\u7d50\u679cHTML\n      const personalityTraits = this.getPersonalityTraits(option);\n      return `\n        <h3>\u60a8\u9078\u64c7\u4e86\u9078\u9805 ${option}<\/h3>\n        <p>${results[option]}<\/p>\n        <div class=\"pq-traits\">\n          <h4>\u60a8\u7684\u6027\u683c\u7279\u8cea<\/h4>\n          <ul>\n            ${personalityTraits.map(trait => `<li>${trait}<\/li>`).join('')}\n          <\/ul>\n        <\/div>\n      `;\n    },\n    \n    \/\/ \u7372\u53d6\u6027\u683c\u7279\u8cea\uff08\u6839\u64da\u9078\u9805\uff09\n    getPersonalityTraits: function(option) {\n      const traits = {\n        A: [\"\u5584\u65bc\u4ea4\u969b\", \"\u91cd\u611f\u60c5\", \"\u9700\u8981\u60c5\u611f\u652f\u6301\", \"\u958b\u653e\", \"\u5916\u5411\"],\n        B: [\"\u559c\u6b61\u9003\u907f\", \"\u4e0d\u9858\u89e3\u6c7a\u554f\u984c\", \"\u6613\u53d7\u632b\u6298\", \"\u88ab\u52d5\", \"\u96a8\u6027\"],\n        C: [\"\u5275\u696d\u578b\", \"\u7a4d\u6975\", \"\u6d3b\u529b\u5145\u6c9b\", \"\u559c\u6b61\u904b\u52d5\", \"\u5c0b\u6c42\u767c\u5c55\"],\n        D: [\"\u91cd\u8996\u5916\u8868\", \"\u8ffd\u6c42\u7269\u8cea\", \"\u9700\u8981\u8a8d\u53ef\", \"\u6ce8\u91cd\u5f62\u8c61\", \"\u793e\u4ea4\u53d6\u5411\"],\n        E: [\"\u53ca\u6642\u884c\u6a02\", \"\u81ea\u5f97\u5176\u6a02\", \"\u4eab\u53d7\u7576\u4e0b\", \"\u611f\u5b98\u4eab\u53d7\", \"\u6a02\u89c0\"],\n        F: [\"\u8a00\u8fad\u7280\u5229\", \"\u60c5\u7dd2\u5316\", \"\u81ea\u6211\u4e2d\u5fc3\", \"\u559c\u6b61\u63a7\u5236\", \"\u8981\u6c42\u9ad8\"],\n        G: [\"\u885d\u52d5\", \"\u60c5\u7dd2\u4e0d\u7a69\", \"\u81ea\u6211\u8a8d\u77e5\u4e0d\u6e05\", \"\u6613\u6012\", \"\u654f\u611f\"],\n        H: [\"\u5fcd\u8010\", \"\u6c89\u7a69\", \"\u8cac\u4efb\u611f\u5f37\", \"\u6df1\u6c89\", \"\u5167\u6582\"],\n        I: [\"\u793e\u4ea4\u80fd\u529b\u5f37\", \"\u5713\u6ed1\", \"\u91cd\u8996\u53cb\u60c5\", \"\u6a02\u65bc\u5206\u4eab\", \"\u7fa4\u9ad4\u5c0e\u5411\"],\n        J: [\"\u884c\u52d5\u6d3e\", \"\u6709\u8010\u5fc3\", \"\u6709\u6bc5\u529b\", \"\u7d30\u5fc3\", \"\u6709\u8a08\u5283\u6027\"]\n      };\n      \n      return traits[option] || [];\n    },\n    \n    \/\/ \u66f4\u65b0\u7d50\u679c\u5716\u8868\n    updateResultChart: function(option) {\n      const ctx = document.getElementById('pq-result-chart').getContext('2d');\n      \n      \/\/ \u7372\u53d6\u9078\u9805\u5c0d\u61c9\u7684\u7279\u8cea\u8a55\u5206\n      const scores = this.getPersonalityScores(option);\n      \n      \/\/ \u521b\u5efa\u5716\u8868\n      if (window.resultChart) {\n        window.resultChart.destroy();\n      }\n      \n      window.resultChart = new Chart(ctx, {\n        type: 'radar',\n        data: {\n          labels: ['\u793e\u4ea4\u80fd\u529b', '\u60c5\u7dd2\u7a69\u5b9a\u6027', '\u884c\u52d5\u529b', '\u81ea\u6211\u8a8d\u77e5', '\u8010\u5fc3'],\n          datasets: [{\n            label: '\u60a8\u7684\u6027\u683c\u7279\u8cea',\n            data: scores,\n            backgroundColor: 'rgba(255, 87, 51, 0.2)',\n            borderColor: 'rgba(255, 87, 51, 1)',\n            borderWidth: 2,\n            pointBackgroundColor: 'rgba(255, 87, 51, 1)',\n            pointBorderColor: '#fff',\n            pointHoverBackgroundColor: '#fff',\n            pointHoverBorderColor: 'rgba(255, 87, 51, 1)'\n          }]\n        },\n        options: {\n          scales: {\n            r: {\n              angleLines: {\n                display: true\n              },\n              suggestedMin: 0,\n              suggestedMax: 100\n            }\n          },\n          plugins: {\n            legend: {\n              display: true,\n              position: 'top'\n            },\n            tooltip: {\n              callbacks: {\n                label: function(context) {\n                  return context.raw + '%';\n                }\n              }\n            }\n          },\n          responsive: true,\n          maintainAspectRatio: true\n        }\n      });\n    },\n    \n    \/\/ \u7372\u53d6\u6027\u683c\u8a55\u5206\uff08\u6839\u64da\u9078\u9805\uff09\n    getPersonalityScores: function(option) {\n      const scores = {\n        A: [90, 70, 60, 75, 50],\n        B: [40, 50, 30, 45, 55],\n        C: [65, 80, 90, 85, 75],\n        D: [75, 60, 50, 70, 45],\n        E: [60, 75, 65, 60, 55],\n        F: [70, 30, 60, 50, 40],\n        G: [45, 20, 70, 30, 25],\n        H: [50, 85, 60, 80, 90],\n        I: [95, 70, 75, 65, 50],\n        J: [60, 75, 85, 70, 95]\n      };\n      \n      return scores[option] || [50, 50, 50, 50, 50];\n    },\n    \n    \/\/ \u986f\u793a\u7279\u5b9a\u9801\u9762\n    showPage: function(page) {\n      this.currentPage = page;\n      \n      \/\/ \u96b1\u85cf\u6240\u6709\u9801\u9762\n      this.introPage.classList.remove('pq-active');\n      this.quizPage.classList.remove('pq-active');\n      this.resultPage.classList.remove('pq-active');\n      \n      \/\/ \u986f\u793a\u6307\u5b9a\u9801\u9762\n      if (page === 'intro') {\n        this.introPage.classList.add('pq-active');\n      } else if (page === 'quiz') {\n        this.quizPage.classList.add('pq-active');\n      } else if (page === 'result') {\n        this.resultPage.classList.add('pq-active');\n      }\n    },\n    \n    \/\/ \u66f4\u65b0\u9032\u5ea6\u689d\n    updateProgress: function() {\n      \/\/ \u7531\u65bc\u9019\u500b\u6e2c\u9a57\u53ea\u6709\u4e00\u984c\uff0c\u9032\u5ea6\u90fd\u662f100%\n      this.progressFill.style.width = '100%';\n    },\n    \n    \/\/ \u52a0\u8f09Chart.js\n    loadChartJs: function() {\n      if (typeof Chart === 'undefined') {\n        const script = document.createElement('script');\n        script.src = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/3.9.1\/chart.min.js';\n        script.integrity = 'sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==';\n        script.crossOrigin = 'anonymous';\n        script.referrerPolicy = 'no-referrer';\n        script.onload = () => {\n          console.log('Chart.js \u52a0\u8f09\u6210\u529f');\n        };\n        document.head.appendChild(script);\n      }\n    }\n  };\n  \n  \/\/ \u7576DOM\u52a0\u8f09\u5b8c\u6210\u5f8c\u521d\u59cb\u5316\u6e2c\u9a57\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', () => PersonalityQuiz.init());\n  } else {\n    PersonalityQuiz.init();\n  }\n})();\n<\/script>\n<style>\n\/* \u6027\u683c\u6e2c\u9a57\u6a23\u5f0f *\/\n.pq-container {\n  --primary-color: #FF5733;\n  --secondary-color: #C70039;\n  --background-color: #ffffff;\n  --text-color: #333333;\n  --border-color: #dddddd;\n  --success-color: #33cc66;\n  --hover-color: #ff7e5f;\n  --active-color: #e6492d;\n  --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  --border-radius: 8px;\n  --transition-speed: 0.3s;\n  \n  font-family: \"Microsoft JhengHei\", \"PingFang TC\", \"Heiti TC\", \"Apple LiGothic\", Arial, sans-serif;\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 20px;\n  background-color: var(--background-color);\n  border-radius: var(--border-radius);\n  box-shadow: var(--box-shadow);\n}\n\n.pq-page {\n  display: none;\n  opacity: 0;\n  transform: translateY(20px);\n  transition: opacity 0.4s, transform 0.4s;\n}\n\n.pq-page.pq-active {\n  display: block;\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.pq-title {\n  text-align: center;\n  color: var(--secondary-color);\n  margin-bottom: 25px;\n  font-size: 26px;\n  font-weight: bold;\n}\n\n\/* \u5f15\u5c0e\u9801\u6a23\u5f0f *\/\n.pq-intro-content {\n  text-align: left;\n  font-size: 18px;\n  line-height: 1.6;\n}\n\n.pq-intro-image {\n  margin: 30px auto;\n  max-width: 200px;\n}\n\n.pq-intro-svg {\n  width: 100%;\n  height: auto;\n  animation: float 6s ease-in-out infinite;\n}\n\n@keyframes float {\n  0% { transform: translateY(0px); }\n  50% { transform: translateY(-10px); }\n  100% { transform: translateY(0px); }\n}\n\n.pq-btn {\n  background-color: var(--primary-color);\n  color: white;\n  border: none;\n  border-radius: var(--border-radius);\n  padding: 15px 30px;\n  font-size: 18px;\n  font-weight: bold;\n  cursor: pointer;\n  transition: background-color var(--transition-speed), color var(--transition-speed);\n  min-height: 48px;\n  min-width: 48px;\n  display: inline-block;\n  text-align: center;\n}\n\n.pq-btn:hover {\n  background-color: var(--hover-color);\n  color: white; \/* \u78ba\u4fdd\u6587\u5b57\u4fdd\u6301\u767d\u8272 *\/\n}\n\n.pq-btn:active {\n  background-color: var(--active-color);\n  color: white; \/* \u78ba\u4fdd\u6587\u5b57\u4fdd\u6301\u767d\u8272 *\/\n}\n.pq-start-btn {\n  margin: 20px auto;\n  display: block;\n  padding: 15px 40px;\n  font-size: 20px;\n}\n\n\/* \u6e2c\u9a57\u9801\u6a23\u5f0f *\/\n.pq-progress-container {\n  margin-bottom: 20px;\n}\n\n.pq-progress-bar {\n  width: 100%;\n  height: 10px;\n  background-color: var(--border-color);\n  border-radius: 5px;\n  overflow: hidden;\n}\n\n.pq-progress-fill {\n  height: 100%;\n  background-color: var(--primary-color);\n  width: 0;\n  transition: width 0.5s ease;\n}\n\n.pq-progress-text {\n  text-align: center;\n  margin-top: 10px;\n  font-size: 16px;\n  color: var(--text-color);\n}\n\n.pq-question {\n  font-size: 22px;\n  font-weight: bold;\n  margin-bottom: 20px;\n  line-height: 1.4;\n}\n\n.pq-options {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  margin-bottom: 25px;\n}\n\n.pq-option-btn {\n  background-color: #f8f8f8;\n  color: var(--text-color);\n  border: 1px solid var(--border-color);\n  border-radius: var(--border-radius);\n  padding: 15px 20px;\n  font-size: 18px;\n  text-align: left;\n  cursor: pointer;\n  transition: all var(--transition-speed);\n  min-height: 48px;\n}\n\n.pq-option-btn:hover {\n  background-color: #f0f0f0;\n  border-color: var(--primary-color);\n  color: var(--text-color); \/* \u78ba\u4fdd\u6587\u5b57\u984f\u8272\u4fdd\u6301\u6df1\u8272 *\/\n}\n\n.pq-option-btn.pq-selected {\n  background-color: rgba(255, 87, 51, 0.1);\n  border-color: var(--primary-color);\n  color: var(--text-color); \/* \u78ba\u4fdd\u9078\u4e2d\u72c0\u614b\u7684\u6587\u5b57\u984f\u8272\u4e5f\u4fdd\u6301\u53ef\u898b *\/\n}\n\n.pq-nav-buttons {\n  display: flex;\n  justify-content: center;\n  margin-top: 20px;\n}\n\n.pq-nav-btn {\n  margin: 0 10px;\n}\n\n.pq-nav-btn:disabled {\n  background-color: #cccccc;\n  cursor: not-allowed;\n}\n\n\/* \u7d50\u679c\u9801\u6a23\u5f0f *\/\n.pq-result-container {\n  padding: 20px;\n}\n\n.pq-result-chart-container {\n  max-width: 500px;\n  margin: 0 auto 30px auto;\n  position: relative;\n}\n\n.pq-result-text {\n  margin-bottom: 30px;\n  line-height: 1.6;\n}\n\n.pq-result-text h3 {\n  color: var(--secondary-color);\n  margin-bottom: 15px;\n  font-size: 22px;\n}\n\n.pq-result-text p {\n  font-size: 18px;\n  margin-bottom: 20px;\n}\n\n.pq-traits {\n  background-color: #f9f9f9;\n  padding: 15px;\n  border-radius: var(--border-radius);\n  border-left: 4px solid var(--primary-color);\n  margin-top: 20px;\n}\n\n.pq-traits h4 {\n  margin-bottom: 10px;\n  color: var(--text-color);\n  font-size: 18px;\n}\n\n.pq-traits ul {\n  padding-left: 20px;\n  margin: 0;\n}\n\n.pq-traits li {\n  margin-bottom: 8px;\n  font-size: 16px;\n}\n\n.pq-restart-btn {\n  margin: 20px auto;\n  display: block;\n}\n\n\/* \u97ff\u61c9\u5f0f\u9069\u914d *\/\n@media (max-width: 768px) {\n  .pq-container {\n    padding: 15px;\n  }\n  \n  .pq-title {\n    font-size: 24px;\n  }\n  \n  .pq-question {\n    font-size: 20px;\n  }\n  \n  .pq-option-btn {\n    padding: 12px 15px;\n    font-size: 16px;\n  }\n  \n  .pq-result-text p {\n    font-size: 16px;\n  }\n}\n\n@media (max-width: 480px) {\n  .pq-container {\n    padding: 10px;\n  }\n  \n  .pq-title {\n    font-size: 22px;\n    margin-bottom: 15px;\n  }\n  \n  .pq-btn {\n    padding: 12px 20px;\n    font-size: 16px;\n  }\n  \n  .pq-intro-content {\n    font-size: 16px;\n  }\n}\n<\/style>","protected":false},"excerpt":{"rendered":"<p>\u4eba\u7684\u6027\u683c\u53cd\u6620\u5728\u65b9\u65b9\u9762\u9762\uff0c\u5373\u4f7f\u5728\u95f2\u6687\u65f6\u95f4\u7684\u6d88\u9063\u6d3b\u52a8\u91cc\u4e5f\u4e0d\u4f8b\u5916\u3002\u4e0d\u4fe1\uff0c\u770b\u770b\u4e0b\u9762\u7684\u6d4b\u8bd5\u51c6\u4e0d\u51c6\uff1f<\/p>","protected":false},"author":19,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"narrow-width-container","site-content-style":"unboxed","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[167],"tags":[],"class_list":["post-3162","post","type-post","status-publish","format-standard","hentry","category-personality"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/3162","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=3162"}],"version-history":[{"count":4,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/3162\/revisions"}],"predecessor-version":[{"id":9664,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/3162\/revisions\/9664"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=3162"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=3162"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=3162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}