{"id":2827,"date":"2025-05-06T23:43:41","date_gmt":"2025-05-06T15:43:41","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2827"},"modified":"2025-05-08T20:05:22","modified_gmt":"2025-05-08T12:05:22","slug":"vanity-quiz","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/vanity-quiz","title":{"rendered":"\u865a\u8363\u5fc3\u7ebf\u4e0a\u514d\u8d39\u5c0f\u6d4b\u9a8c"},"content":{"rendered":"<!-- \u865b\u69ae\u5fc3\u6e2c\u9a57 -->\n<div id=\"vt-container\" class=\"vt-test-container\">\n  <!-- \u5167\u5bb9\u5c07\u7531JavaScript\u52d5\u614b\u751f\u6210 -->\n<\/div>\n\n<script>\n(function() {\n  \/\/ \u81ea\u6211\u9694\u96e2\u7684\u547d\u540d\u7a7a\u9593\uff0c\u907f\u514d\u885d\u7a81\n  const VanityTest = {\n    \/\/ \u6e2c\u9a57\u6578\u64da\n    data: {\n      intro: {\n        title: \"\u865b\u69ae\u5fc3\u6e2c\u9a57\",\n        description: \"\u865b\u69ae\u5fc3\uff0c\u5fc3\u7406\u5b78\u8a8d\u70ba\u5b83\u662f\u70ba\u4e86\u53d6\u5f97\u69ae\u8b7d\u548c\u5f15\u8d77\u666e\u904d\u6ce8\u610f\u800c\u8868\u73fe\u51fa\u4f86\u7684\u4e00\u7a2e\u4e0d\u6b63\u5e38\u7684\u793e\u6703\u60c5\u611f\u3002\u865b\u69ae\u548c\u81ea\u5c0a\u5fc3\u6709\u95dc\uff0c\u662f\u4e00\u7a2e\u88ab\u626d\u66f2\u4e86\u7684\u81ea\u5c0a\u5fc3\uff0c\u662f\u81ea\u5c0a\u5fc3\u7684\u904e\u5206\u8868\u73fe\u3002\u4eba\u4eba\u90fd\u6709\u81ea\u5c0a\u5fc3\uff0c\u7576\u81ea\u5c0a\u5fc3\u53d7\u5230\u640d\u5bb3\u6216\u5a01\u8105\u6642\uff0c\u6216\u904e\u5206\u81ea\u5c0a\u6642\uff0c\u5c31\u53ef\u80fd\u7522\u751f\u865b\u69ae\u5fc3\u3002<br><br>\u865b\u69ae\u5fc3\u5f88\u5f37\u7684\u4eba\uff0c\u5176\u6df1\u5c64\u5fc3\u7406\u5176\u5be6\u662f\u7a7a\u865b\u3002\u865b\u69ae\u7684\u4eba\u904e\u65bc\u81ea\u5c0a\u537b\u7f3a\u4e4f\u81ea\u4fe1\uff0c\u5f80\u5f80\u4e0d\u80fd\u5bb9\u5fcd\u5225\u4eba\u8d85\u904e\u81ea\u5df1\uff0c\u8868\u9762\u7684\u865b\u69ae\u8207\u5167\u5fc3\u7684\u7a7a\u865b\u7e3d\u662f\u76f8\u6597\u722d\u7684\u3002\u865b\u69ae\u5fc3\u9084\u8207\u6232\u5287\u5316\u4eba\u683c\u50be\u5411\u6709\u95dc\uff0c\u611b\u6155\u865b\u69ae\u7684\u4eba\uff0c\u591a\u70ba\u5916\u5411\u578b\u3001\u885d\u52d5\u578b\u7684\u6027\u683c\uff0c\u5177\u6709\u5f37\u70c8\u7684\u60c5\u611f\u53cd\u61c9\uff0c\u88dd\u8154\u4f5c\u52e2\uff0c\u7f3a\u4e4f\u771f\u5be6\u7684\u60c5\u611f\uff0c\u5f85\u4eba\u8655\u4e16\u7a81\u51fa\u81ea\u6211\u3001\u6025\u529f\u8fd1\u5229\u3002<br><br>\u865b\u69ae\u5fc3\u4f5c\u70ba\u4e00\u7a2e\u75c5\u614b\u5fc3\u7406\uff0c\u5df2\u6210\u70ba\u4eba\u6027\u4e2d\u6839\u6df1\u8482\u56fa\u3001\u96e3\u4ee5\u6839\u9664\u7684\u5fc3\u7406\u5f31\u9ede\u3002\u6c92\u6709\u8ab0\u6703\u559c\u6b61\u548c\u865b\u69ae\u5fc3\u5f37\u7684\u4eba\u6253\u4ea4\u9053\uff0c\u4f46\u6b63\u5e38\u4eba\u90fd\u6703\u5728\u4e0d\u7d93\u610f\u7684\u6642\u5019\u6d41\u9732\u51fa\u6216\u591a\u6216\u5c11\u7684\u865b\u69ae\u4f86\u3002\u8981\u60f3\u5728\u4e16\u754c\u4e0a\u5c0b\u627e\u4e00\u500b\u6beb\u7121\u865b\u69ae\u5fc3\u7684\u4eba\uff0c\u5c31\u5982\u540c\u8981\u5c0b\u627e\u4e00\u500b\u6beb\u4e0d\u63a9\u98fe\u81ea\u5df1\u5f31\u9ede\u7684\u4eba\u4e00\u6a23\u56f0\u96e3\u3002\u9019\u500b\u6e2c\u8a66\u80fd\u544a\u8a34\u4f60\uff0c\u4f60\u7684\u865b\u69ae\u5fc3\u7a76\u7adf\u9054\u5230\u4e86\u600e\u6a23\u7684\u7a0b\u5ea6\u3002\"\n      },\n      questions: [\n        {\n          id: 1,\n          question: \"\u9762\u524d\u7684\u5e7e\u7897\u85e5\u4e2d\uff0c\u53ea\u6709\u4e00\u7a2e\u662f\u80fd\u6cbb\u767e\u75c5\u7684\u4ed9\u85e5\uff0c\u5176\u4ed6\u7684\u5403\u4e86\u53ea\u6703\u8b93\u4f60\u591a\u8dd1\u5e7e\u6b21\u885b\u751f\u9593\u3002\u73fe\u5728\u4f60\u5c31\u4f86\u6311\u9078\u4e00\u4e0b\uff0c\u54ea\u500b\u624d\u662f\u8ca8\u771f\u50f9\u5be6\u7684\u4ed9\u85e5\u5462\uff1f\",\n          options: [\n            { id: \"A\", text: \"\u770b\u8d77\u4f86\u6709\u9ede\u66d6\u6627\u7684\u85cd\u8272\u85e5\u7247\u3002\" },\n            { id: \"B\", text: \"\u805e\u8d77\u4f86\u6709\u9ede\u50cf\u82b1\u9732\u6c34\u7684\u6de1\u7da0\u8272\u85e5\u818f\u3002\" },\n            { id: \"C\", text: \"\u6210\u5206\u4e0d\u660e\u7684\u9ed1\u8272\u4e38\u85e5\u3002\" },\n            { id: \"D\", text: \"\u725b\u5976\u4e00\u6a23\u7684\u767d\u8272\u6db2\u9ad4\u3002\" }\n          ]\n        }\n      ],\n      results: {\n        \"A\": {\n          title: \"\u865b\u69ae\u5fc3\u6307\u6578\uff1a85%\",\n          description: \"\u9078\u64c7\u6f02\u4eae\u85cd\u8272\u7684\u4eba\u6709\u5f88\u5f37\u7684\u70ab\u8000\u611f\u5728\u5fc3\u88e1\u9762\uff0c\u4f60\u7684\u865b\u69ae\u5fc3\u53ef\u4e0d\u5c0f\u3002\u8aaa\u8d77\u4f86\u4f60\u7684\u54c1\u4f4d\u5f88\u9ad8\uff0c\u4f46\u662f\u5bb9\u6613\u559c\u65b0\u53ad\u820a\uff0c\u4e00\u65e6\u770b\u5230\u66f4\u597d\u7684\u6771\u897f\u5c31\u6703\u628a\u904e\u53bb\u7684\u5fc3\u611b\u4e4b\u7269\u4e1f\u5230\u8166\u5f8c\u3002\u4f60\u4e5f\u662f\u500b\u4e0d\u61fc\u66b4\u9732\u81ea\u5df1\u9019\u65b9\u9762\u5f31\u9ede\u7684\u76f4\u7387\u4e4b\u4eba\uff0c\u5118\u7ba1\u5982\u6b64\uff0c\u6210\u70ba\u4f60\u7684\u6240\u6709\u7269\u9084\u662f\u4e00\u4ef6\u5371\u96aa\u7684\u4e8b\u60c5\u3002\",\n          scores: {\n            \"\u70ab\u8000\u50be\u5411\": 90,\n            \"\u865b\u69ae\u7a0b\u5ea6\": 85,\n            \"\u54c1\u5473\u6c34\u5e73\": 75,\n            \"\u81ea\u6211\u8a8d\u77e5\": 60,\n            \"\u793e\u4ea4\u5f71\u97ff\": 70\n          }\n        },\n        \"B\": {\n          title: \"\u865b\u69ae\u5fc3\u6307\u6578\uff1a45%\",\n          description: \"\u559c\u6b61\u6eab\u548c\u7684\u7da0\u8272\uff0c\u8b49\u660e\u4f60\u5167\u5fc3\u6df1\u8655\u662f\u500b\u5bb9\u6613\u61f7\u820a\u7684\u4eba\u3002\u5c0f\u6642\u5019\u7684\u73a9\u5177\u5f80\u5f80\u90fd\u4e0d\u9858\u610f\u4e1f\u6389\uff0c\u865b\u69ae\u5fc3\u4e0d\u5f37\u7684\u4f60\uff0c\u9817\u6709\u9ede\u820a\u7269\u96e3\u68c4\u820a\u60c5\u96e3\u820d\u7684\u52c1\u982d\u3002\u9019\u6a23\u5728\u9078\u64c7\u7684\u6642\u5019\u96e3\u514d\u6703\u7336\u8c6b\u4e0d\u6c7a\uff0c\u8edf\u5f31\u5728\u4f60\u8eab\u4e0a\u662f\u6700\u660e\u986f\u7684\u6a19\u8a8c\u3002\",\n          scores: {\n            \"\u70ab\u8000\u50be\u5411\": 40,\n            \"\u865b\u69ae\u7a0b\u5ea6\": 45,\n            \"\u54c1\u5473\u6c34\u5e73\": 65,\n            \"\u81ea\u6211\u8a8d\u77e5\": 75,\n            \"\u793e\u4ea4\u5f71\u97ff\": 50\n          }\n        },\n        \"C\": {\n          title: \"\u865b\u69ae\u5fc3\u6307\u6578\uff1a30%\",\n          description: \"\u90a3\u6a23\u7684\u6771\u897f\u4f60\u6562\u4e0b\u53e3\u55ce\uff1f\u9019\u500b\u9078\u64c7\u672c\u8eab\u5c31\u8aaa\u660e\u4e86\u4f60\u5728\u54c1\u4f4d\u65b9\u9762\u662f\u500b\u8207\u773e\u4e0d\u540c\u7684\u4eba\u3002\u4f60\u7684\u5fc3\u601d\u4e0d\u662f\u96a8\u4fbf\u4ec0\u9ebc\u4eba\u90fd\u80fd\u5920\u731c\u900f\u7684\uff0c\u4e00\u822c\u5c31\u7b97\u559c\u6b61\u4e0a\u4e86\u54ea\u500b\u4eba\uff0c\u81c9\u4e0a\u4e5f\u6703\u8af1\u83ab\u5982\u6df1\u3002\u4f60\u7684\u865b\u69ae\u5fc3\u4e0d\u9ad8\uff0c\u4f46\u662f\u4e00\u65e6\u559c\u6b61\u5c31\u8981\u5f04\u5230\u624b\u7684\u5e79\u52c1\u6bd4\u8ab0\u90fd\u8981\u5f37\uff01\",\n          scores: {\n            \"\u70ab\u8000\u50be\u5411\": 35,\n            \"\u865b\u69ae\u7a0b\u5ea6\": 30,\n            \"\u54c1\u5473\u6c34\u5e73\": 80,\n            \"\u81ea\u6211\u8a8d\u77e5\": 85,\n            \"\u793e\u4ea4\u5f71\u97ff\": 60\n          }\n        },\n        \"D\": {\n          title: \"\u865b\u69ae\u5fc3\u6307\u6578\uff1a20%\",\n          description: \"\u5f9e\u9078\u64c7\u4e0a\u770b\uff0c\u4f60\u7684\u865b\u69ae\u5fc3\u771f\u7684\u662f\u5c11\u7684\u4e0d\u80fd\u518d\u5c11\u4e86\u3002\u4f60\u662f\u500b\u505a\u4efb\u4f55\u4e8b\u60c5\u90fd\u6703\u5c08\u5fc3\u81f4\u5fd7\u7684\u597d\u4eba\uff0c\u65e2\u4e0d\u60f3\u70ab\u8000\uff0c\u53c8\u4e0d\u60f3\u51fa\u98a8\u982d\uff0c\u4e0d\u559c\u6b61\u83ef\u9e97\u7684\u88dd\u98fe\uff0c\u504f\u611b\u7c21\u6a38\u7684\u8863\u8457\u3002\u5176\u5be6\uff0c\u4f60\u5167\u5fc3\u6df1\u8655\u5f88\u60f3\u6210\u70ba\u5927\u5bb6\u7684\u7126\u9ede\uff0c\u8b93\u6bcf\u500b\u4eba\uff0c\u5c24\u5176\u662f\u512a\u79c0\u7684\u7570\u6027\u4f86\u6b23\u8cde\u3001\u8b9a\u63da\uff0c\u662f\u5178\u578b\u7684\u60b6\u9a37\u6d3e\u3002\",\n          scores: {\n            \"\u70ab\u8000\u50be\u5411\": 20,\n            \"\u865b\u69ae\u7a0b\u5ea6\": 20,\n            \"\u54c1\u5473\u6c34\u5e73\": 65,\n            \"\u81ea\u6211\u8a8d\u77e5\": 90,\n            \"\u793e\u4ea4\u5f71\u97ff\": 40\n          }\n        }\n      }\n    },\n\n    \/\/ \u72c0\u614b\u7ba1\u7406\n    state: {\n      currentPage: 'intro', \/\/ 'intro', 'quiz', 'results'\n      currentQuestion: 0,\n      answers: [],\n      result: null\n    },\n\n    \/\/ \u521d\u59cb\u5316\u6e2c\u9a57\n    init: function() {\n      this.injectStyles();\n      this.renderCurrentPage();\n      this.attachEventListeners();\n    },\n\n    \/\/ \u6ce8\u5165\u81ea\u5b9a\u7fa9CSS\u6a23\u5f0f\n    injectStyles: function() {\n      const styleId = 'vt-custom-styles';\n      if (document.getElementById(styleId)) return;\n\n      const style = document.createElement('style');\n      style.id = styleId;\n      style.textContent = `\n        .vt-test-container {\n          --vt-primary: #FF6B6B;\n          --vt-primary-light: #FFD0D0;\n          --vt-primary-dark: #C83E3E;\n          --vt-secondary: #4ECDC4;\n          --vt-secondary-light: #A7E8E3;\n          --vt-secondary-dark: #36A59E;\n          --vt-accent: #FFE66D;\n          --vt-text-primary: #333333;\n          --vt-text-secondary: #666666;\n          --vt-text-light: #ffffff;\n          --vt-bg-light: #ffffff;\n          --vt-bg-off: #f9f9f9;\n          --vt-border: #eeeeee;\n          --vt-shadow: rgba(0, 0, 0, 0.1);\n          \n          font-family: \"Microsoft JhengHei\", \"\u5fae\u8edf\u6b63\u9ed1\u9ad4\", \"Segoe UI\", sans-serif;\n          max-width: 800px;\n          margin: 0 auto;\n          color: var(--vt-text-primary);\n          background-color: var(--vt-bg-light);\n          border-radius: 12px;\n          box-shadow: 0 5px 25px var(--vt-shadow);\n          overflow: hidden;\n        }\n        \n        \/* \u982d\u90e8\u6f38\u8b8a\u80cc\u666f *\/\n        .vt-header {\n          background: linear-gradient(135deg, var(--vt-primary), var(--vt-secondary));\n          color: var(--vt-text-light);\n          padding: 40px 30px 70px;\n          position: relative;\n          text-align: center;\n          overflow: hidden;\n        }\n        \n        .vt-header::before {\n          content: '';\n          position: absolute;\n          top: 0;\n          left: 0;\n          right: 0;\n          bottom: 0;\n          background: url(\"data:image\/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'\/%3E%3C\/svg%3E\");\n        }\n        \n        \/* \u5713\u5f62\u5716\u6a19 *\/\n        .vt-icon {\n          width: 100px;\n          height: 100px;\n          background-color: var(--vt-bg-light);\n          border-radius: 50%;\n          box-shadow: 0 5px 15px var(--vt-shadow);\n          margin: -50px auto 20px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          font-size: 40px;\n          position: relative;\n          z-index: 10;\n        }\n        \n        \/* \u5167\u5bb9\u5340\u57df *\/\n        .vt-content {\n          padding: 20px 30px 40px;\n        }\n        \n        \/* \u901a\u7528\u6a19\u984c\u6a23\u5f0f *\/\n        .vt-test-container h2 {\n          font-size: 32px;\n          font-weight: 700;\n          text-align: center;\n          margin: 0 0 15px;\n          color: inherit;\n        }\n        \n        .vt-test-container h3 {\n          font-size: 22px;\n          font-weight: 700;\n          margin: 0 0 20px;\n          line-height: 1.5;\n          color: var(--vt-text-primary);\n        }\n        \n        \/* \u6bb5\u843d\u6587\u5b57 *\/\n        .vt-text {\n          font-size: 18px;\n          line-height: 1.7;\n          margin: 0 0 20px;\n          color: var(--vt-text-secondary);\n          text-align: left;\n        }\n        \n        \/* \u7279\u9ede\u5217\u8868 *\/\n        .vt-features {\n          display: flex;\n          justify-content: space-between;\n          margin: 30px 0;\n          flex-wrap: wrap;\n        }\n        \n        .vt-feature-item {\n          flex: 1;\n          min-width: 30%;\n          padding: 15px;\n          text-align: center;\n        }\n        \n        .vt-feature-icon {\n          font-size: 32px;\n          margin-bottom: 10px;\n        }\n        \n        .vt-feature-text {\n          font-size: 16px;\n          font-weight: 600;\n          color: var(--vt-text-secondary);\n        }\n        \n        \/* \u9ad8\u4eae\u9762\u677f *\/\n        .vt-panel {\n          background-color: var(--vt-bg-off);\n          border-radius: 10px;\n          padding: 25px;\n          margin-bottom: 30px;\n          border-left: 5px solid var(--vt-primary);\n        }\n        \n        \/* \u6309\u9215\u6a23\u5f0f *\/\n        .vt-button {\n          background: linear-gradient(to right, var(--vt-primary), var(--vt-secondary));\n          color: var(--vt-text-light);\n          border: none;\n          border-radius: 50px;\n          padding: 16px 40px;\n          font-size: 18px;\n          font-weight: 700;\n          cursor: pointer;\n          transition: all 0.3s ease;\n          box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);\n          display: inline-block;\n          min-height: 54px;\n          min-width: 180px;\n          text-align: center;\n        }\n        \n        .vt-button:hover {\n          transform: translateY(-3px);\n          box-shadow: 0 8px 20px rgba(255, 107, 107, 0.5);\n        }\n        \n        .vt-button:active {\n          transform: translateY(-1px);\n          box-shadow: 0 4px 10px rgba(255, 107, 107, 0.4);\n        }\n        \n        .vt-button-center {\n          text-align: center;\n        }\n        \n        \/* \u6e2c\u9a57\u554f\u984c\u6a23\u5f0f *\/\n        .vt-question-wrapper {\n          margin-bottom: 30px;\n        }\n        \n        .vt-question {\n          background-color: var(--vt-bg-off);\n          padding: 25px;\n          border-radius: 10px;\n          margin-bottom: 25px;\n        }\n        \n        .vt-options {\n          display: flex;\n          flex-direction: column;\n          gap: 15px;\n        }\n        \n        .vt-option {\n          background-color: var(--vt-bg-light);\n          border: 2px solid var(--vt-border);\n          border-radius: 10px;\n          padding: 18px 20px;\n          font-size: 18px;\n          cursor: pointer;\n          transition: all 0.2s ease;\n          display: flex;\n          align-items: center;\n          min-height: 60px;\n          box-shadow: 0 2px 5px var(--vt-shadow);\n        }\n        \n        .vt-option:hover {\n          background-color: var(--vt-primary-light);\n          border-color: var(--vt-primary);\n          transform: translateY(-2px);\n          box-shadow: 0 5px 10px var(--vt-shadow);\n        }\n        \n        .vt-option.selected {\n          background-color: var(--vt-primary);\n          border-color: var(--vt-primary-dark);\n          color: var(--vt-text-light);\n          font-weight: 600;\n        }\n        \n        .vt-option-letter {\n          font-weight: 700;\n          margin-right: 15px;\n          background: rgba(0, 0, 0, 0.05);\n          width: 30px;\n          height: 30px;\n          border-radius: 50%;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          flex-shrink: 0;\n        }\n        \n        .vt-option.selected .vt-option-letter {\n          background: rgba(255, 255, 255, 0.2);\n        }\n        \n        .vt-progress-nav {\n          margin-top: 30px;\n          text-align: center;\n        }\n        \n        \/* \u7d50\u679c\u9801\u6a23\u5f0f *\/\n        .vt-result-title {\n          color: var(--vt-primary-dark);\n          font-size: 26px;\n          font-weight: 700;\n          text-align: center;\n          margin: 20px 0 30px;\n          padding-bottom: 15px;\n          border-bottom: 2px solid var(--vt-primary-light);\n        }\n        \n        .vt-result-description {\n          margin-bottom: 35px;\n        }\n        \n        .vt-chart-container {\n          width: 100%;\n          max-width: 500px;\n          height: 400px;\n          margin: 0 auto 40px;\n        }\n        \n        .vt-result-analysis {\n          margin: 40px 0;\n          background-color: var(--vt-bg-off);\n          border-radius: 10px;\n          padding: 25px;\n        }\n        \n        .vt-analysis-title {\n          font-size: 20px;\n          font-weight: 700;\n          margin: 0 0 20px;\n          color: var(--vt-text-primary);\n        }\n        \n        .vt-dimension-item {\n          margin-bottom: 20px;\n          background-color: var(--vt-bg-light);\n          border-radius: 8px;\n          padding: 15px;\n          border-left: 3px solid var(--vt-primary);\n        }\n        \n        .vt-dimension-name {\n          font-size: 18px;\n          font-weight: 600;\n          margin: 0 0 10px;\n          color: var(--vt-text-primary);\n          display: flex;\n          justify-content: space-between;\n        }\n        \n        .vt-dimension-desc {\n          font-size: 16px;\n          color: var(--vt-text-secondary);\n          margin: 0;\n        }\n        \n        \/* \u52d5\u756b\u6548\u679c *\/\n        @keyframes fadeIn {\n          from { opacity: 0; transform: translateY(10px); }\n          to { opacity: 1; transform: translateY(0); }\n        }\n        \n        .vt-fade-in {\n          animation: fadeIn 0.5s ease forwards;\n        }\n        \n        \/* \u97ff\u61c9\u5f0f\u8a2d\u8a08 *\/\n        @media (max-width: 768px) {\n          .vt-header {\n            padding: 30px 20px 60px;\n          }\n          \n          .vt-content {\n            padding: 15px 20px 30px;\n          }\n          \n          .vt-test-container h2 {\n            font-size: 28px;\n          }\n          \n          .vt-test-container h3 {\n            font-size: 20px;\n          }\n          \n          .vt-text, .vt-option {\n            font-size: 16px;\n          }\n          \n          .vt-button {\n            padding: 14px 30px;\n            font-size: 16px;\n          }\n          \n          .vt-feature-item {\n            min-width: 45%;\n          }\n        }\n        \n        @media (max-width: 480px) {\n          .vt-feature-item {\n            min-width: 100%;\n          }\n        }\n      `;\n      document.head.appendChild(style);\n    },\n\n    \/\/ \u6e32\u67d3\u7576\u524d\u9801\u9762\n    renderCurrentPage: function() {\n      const container = document.getElementById('vt-container');\n      if (!container) return;\n\n      switch (this.state.currentPage) {\n        case 'intro':\n          container.innerHTML = this.renderIntroPage();\n          break;\n        case 'quiz':\n          container.innerHTML = this.renderQuizPage();\n          break;\n        case 'results':\n          container.innerHTML = this.renderResultsPage();\n          this.loadChartJS().then(() => {\n            this.renderResultChart();\n          });\n          break;\n      }\n    },\n\n    \/\/ \u6e32\u67d3\u5f15\u5c0e\u9801\n    renderIntroPage: function() {\n      return `\n        <div class=\"vt-intro-page vt-fade-in\">\n          <div class=\"vt-header\">\n            <h2>${this.data.intro.title}<\/h2>\n            <p>\u63a2\u7d22\u4f60\u7684\u5167\u5fc3\uff0c\u4e86\u89e3\u81ea\u5df1\u7684\u771f\u5be6\u6027\u683c<\/p>\n          <\/div>\n          \n          <div class=\"vt-icon\">\ud83d\udd2e<\/div>\n          \n          <div class=\"vt-content\">\n            <h3>\u8a8d\u8b58\u81ea\u5df1\u7684\u865b\u69ae\u7a0b\u5ea6<\/h3>\n            \n            <div class=\"vt-panel\">\n              <div class=\"vt-text\">${this.data.intro.description}<\/div>\n            <\/div>\n            \n            <div class=\"vt-features\">\n              <div class=\"vt-feature-item\">\n                <div class=\"vt-feature-icon\">\u23f1\ufe0f<\/div>\n                <div class=\"vt-feature-text\">\u50c5\u97001\u5206\u9418<\/div>\n              <\/div>\n              <div class=\"vt-feature-item\">\n                <div class=\"vt-feature-icon\">\ud83e\udde0<\/div>\n                <div class=\"vt-feature-text\">\u5c08\u696d\u5206\u6790<\/div>\n              <\/div>\n              <div class=\"vt-feature-item\">\n                <div class=\"vt-feature-icon\">\u2728<\/div>\n                <div class=\"vt-feature-text\">\u6df1\u5ea6\u6d1e\u5bdf<\/div>\n              <\/div>\n            <\/div>\n            \n            <div class=\"vt-button-center\">\n              <button id=\"vt-start-btn\" class=\"vt-button\">\u958b\u59cb\u6e2c\u9a57<\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n      `;\n    },\n\n    \/\/ \u6e32\u67d3\u6e2c\u9a57\u9801\n    renderQuizPage: function() {\n      const currentQuestion = this.data.questions[this.state.currentQuestion];\n      const totalQuestions = this.data.questions.length;\n      const showProgress = totalQuestions > 1;\n      const progressPercent = ((this.state.currentQuestion + 1) \/ totalQuestions) * 100;\n      \n      let quizHTML = `\n        <div class=\"vt-quiz-page vt-fade-in\">\n          <div class=\"vt-header\">\n            <h2>\u865b\u69ae\u5fc3\u6e2c\u9a57<\/h2>\n            ${showProgress ? `<p>\u554f\u984c ${this.state.currentQuestion + 1}\/${totalQuestions}<\/p>` : ''}\n          <\/div>\n          \n          <div class=\"vt-content\">\n            <div class=\"vt-question-wrapper\">\n              ${showProgress ? `\n                <div class=\"vt-progress-bar\" style=\"height: 8px; background-color: #f0f0f0; border-radius: 4px; margin-bottom: 25px; overflow: hidden;\">\n                  <div style=\"height: 100%; width: ${progressPercent}%; background: linear-gradient(to right, var(--vt-primary), var(--vt-secondary)); transition: width 0.3s ease;\"><\/div>\n                <\/div>\n              ` : ''}\n              \n              <div class=\"vt-question\">\n                <h3>${currentQuestion.question}<\/h3>\n              <\/div>\n              \n              <div class=\"vt-options\">\n              `;\n              \n      currentQuestion.options.forEach(option => {\n        const isSelected = this.state.answers[this.state.currentQuestion] === option.id;\n        const selectedClass = isSelected ? 'selected' : '';\n        \n        quizHTML += `\n          <div class=\"vt-option ${selectedClass}\" data-option-id=\"${option.id}\">\n            <span class=\"vt-option-letter\">${option.id}<\/span>\n            <span class=\"vt-option-text\">${option.text}<\/span>\n          <\/div>\n        `;\n      });\n      \n      quizHTML += `\n              <\/div>\n            <\/div>\n            \n            ${this.state.currentQuestion > 0 ? `\n              <div class=\"vt-progress-nav\">\n                <button id=\"vt-prev-btn\" class=\"vt-button\">\u4e0a\u4e00\u984c<\/button>\n              <\/div>\n            ` : ''}\n          <\/div>\n        <\/div>\n      `;\n      \n      return quizHTML;\n    },\n\n    \/\/ \u6e32\u67d3\u7d50\u679c\u9801\n    renderResultsPage: function() {\n      if (!this.state.result) {\n        this.calculateResult();\n      }\n      \n      const result = this.state.result;\n      \n      return `\n        <div class=\"vt-results-page vt-fade-in\">\n          <div class=\"vt-header\">\n            <h2>\u6e2c\u9a57\u7d50\u679c<\/h2>\n            <p>\u4f60\u7684\u865b\u69ae\u5fc3\u5206\u6790<\/p>\n          <\/div>\n          \n          <div class=\"vt-icon\">\ud83d\udcca<\/div>\n          \n          <div class=\"vt-content\">\n            <div class=\"vt-result-title\">${result.title}<\/div>\n            \n            <div class=\"vt-panel vt-result-description\">\n              <div class=\"vt-text\">${result.description}<\/div>\n            <\/div>\n            \n            <div class=\"vt-chart-container\">\n              <canvas id=\"vt-result-chart\"><\/canvas>\n            <\/div>\n            \n            <div class=\"vt-result-analysis\">\n              <h4 class=\"vt-analysis-title\">\u6027\u683c\u7dad\u5ea6\u5206\u6790<\/h4>\n              \n              <div class=\"vt-dimensions\">\n                <div class=\"vt-dimension-item\">\n                  <div class=\"vt-dimension-name\">\n                    \u70ab\u8000\u50be\u5411\n                    <span>${result.scores[\"\u70ab\u8000\u50be\u5411\"]}%<\/span>\n                  <\/div>\n                  <p class=\"vt-dimension-desc\">\u8868\u73fe\u81ea\u5df1\u7279\u8cea\u3001\u6210\u5c31\u6216\u64c1\u6709\u7269\u7684\u617e\u671b\u7a0b\u5ea6\u3002<\/p>\n                <\/div>\n                \n                <div class=\"vt-dimension-item\">\n                  <div class=\"vt-dimension-name\">\n                    \u865b\u69ae\u7a0b\u5ea6\n                    <span>${result.scores[\"\u865b\u69ae\u7a0b\u5ea6\"]}%<\/span>\n                  <\/div>\n                  <p class=\"vt-dimension-desc\">\u904e\u5ea6\u95dc\u6ce8\u81ea\u8eab\u5f62\u8c61\u548c\u4ed6\u4eba\u773c\u5149\u7684\u7a0b\u5ea6\u3002<\/p>\n                <\/div>\n                \n                <div class=\"vt-dimension-item\">\n                  <div class=\"vt-dimension-name\">\n                    \u54c1\u5473\u6c34\u5e73\n                    <span>${result.scores[\"\u54c1\u5473\u6c34\u5e73\"]}%<\/span>\n                  <\/div>\n                  <p class=\"vt-dimension-desc\">\u9451\u8cde\u7f8e\u611f\u3001\u9078\u64c7\u9069\u5408\u81ea\u5df1\u4e8b\u7269\u7684\u80fd\u529b\u3002<\/p>\n                <\/div>\n                \n                <div class=\"vt-dimension-item\">\n                  <div class=\"vt-dimension-name\">\n                    \u81ea\u6211\u8a8d\u77e5\n                    <span>${result.scores[\"\u81ea\u6211\u8a8d\u77e5\"]}%<\/span>\n                  <\/div>\n                  <p class=\"vt-dimension-desc\">\u4e86\u89e3\u81ea\u5df1\u771f\u5be6\u6027\u683c\u548c\u5167\u5728\u9700\u6c42\u7684\u7a0b\u5ea6\u3002<\/p>\n                <\/div>\n                \n                <div class=\"vt-dimension-item\">\n                  <div class=\"vt-dimension-name\">\n                    \u793e\u4ea4\u5f71\u97ff\n                    <span>${result.scores[\"\u793e\u4ea4\u5f71\u97ff\"]}%<\/span>\n                  <\/div>\n                  <p class=\"vt-dimension-desc\">\u865b\u69ae\u5fc3\u5c0d\u4eba\u969b\u95dc\u4fc2\u548c\u793e\u4ea4\u4e92\u52d5\u7684\u5f71\u97ff\u7a0b\u5ea6\u3002<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n            \n            <div class=\"vt-button-center\">\n              <button id=\"vt-retry-btn\" class=\"vt-button\">\u91cd\u65b0\u6e2c\u9a57<\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n      `;\n    },\n\n    \/\/ \u52a0\u8f09Chart.js\n    loadChartJS: function() {\n      return new Promise((resolve, reject) => {\n        if (window.Chart) {\n          resolve();\n          return;\n        }\n        \n        const script = document.createElement('script');\n        script.src = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js';\n        script.onload = resolve;\n        script.onerror = reject;\n        document.head.appendChild(script);\n      });\n    },\n\n    \/\/ \u6e32\u67d3\u7d50\u679c\u5716\u8868\n    renderResultChart: function() {\n      if (!window.Chart) {\n        console.error('Chart.js\u5c1a\u672a\u52a0\u8f09');\n        return;\n      }\n      \n      const result = this.state.result;\n      const ctx = document.getElementById('vt-result-chart').getContext('2d');\n      \n      new Chart(ctx, {\n        type: 'radar',\n        data: {\n          labels: ['\u70ab\u8000\u50be\u5411', '\u865b\u69ae\u7a0b\u5ea6', '\u54c1\u5473\u6c34\u5e73', '\u81ea\u6211\u8a8d\u77e5', '\u793e\u4ea4\u5f71\u97ff'],\n          datasets: [{\n            label: '\u6027\u683c\u5206\u6790',\n            data: [\n              result.scores['\u70ab\u8000\u50be\u5411'],\n              result.scores['\u865b\u69ae\u7a0b\u5ea6'],\n              result.scores['\u54c1\u5473\u6c34\u5e73'],\n              result.scores['\u81ea\u6211\u8a8d\u77e5'],\n              result.scores['\u793e\u4ea4\u5f71\u97ff']\n            ],\n            backgroundColor: 'rgba(255, 107, 107, 0.2)',\n            borderColor: 'rgba(255, 107, 107, 0.8)',\n            pointBackgroundColor: 'rgba(255, 107, 107, 1)',\n            pointBorderColor: '#fff',\n            pointHoverBackgroundColor: '#fff',\n            pointHoverBorderColor: 'rgba(255, 107, 107, 1)',\n            borderWidth: 2\n          }]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\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                  family: \"'Microsoft JhengHei', sans-serif\"\n                }\n              },\n              ticks: {\n                backdropColor: 'transparent',\n                font: {\n                  size: 10\n                },\n                stepSize: 20\n              },\n              min: 0,\n              max: 100\n            }\n          },\n          plugins: {\n            legend: {\n              display: false\n            },\n            tooltip: {\n              backgroundColor: 'rgba(255, 107, 107, 0.8)',\n              titleFont: {\n                family: \"'Microsoft JhengHei', sans-serif\",\n                size: 14\n              },\n              bodyFont: {\n                family: \"'Microsoft JhengHei', sans-serif\",\n                size: 14\n              },\n              callbacks: {\n                label: function(context) {\n                  return context.raw + '%';\n                }\n              }\n            }\n          }\n        }\n      });\n    },\n\n    \/\/ \u4e8b\u4ef6\u76e3\u807d\u5668\n    attachEventListeners: function() {\n      document.addEventListener('click', (e) => {\n        \/\/ \u958b\u59cb\u6e2c\u9a57\u6309\u9215\n        if (e.target.id === 'vt-start-btn') {\n          this.startQuiz();\n        }\n        \n        \/\/ \u9078\u9805\u6309\u9215\n        if (e.target.closest('.vt-option')) {\n          const optionElement = e.target.closest('.vt-option');\n          const optionId = optionElement.dataset.optionId;\n          this.selectOption(optionId);\n        }\n        \n        \/\/ \u4e0a\u4e00\u984c\u6309\u9215\n        if (e.target.id === 'vt-prev-btn') {\n          this.previousQuestion();\n        }\n        \n        \/\/ \u91cd\u8a66\u6309\u9215\n        if (e.target.id === 'vt-retry-btn') {\n          this.resetQuiz();\n        }\n      });\n    },\n\n    \/\/ \u958b\u59cb\u6e2c\u9a57\n    startQuiz: function() {\n      this.state.currentPage = 'quiz';\n      this.state.currentQuestion = 0;\n      this.state.answers = [];\n      this.state.result = null;\n      this.renderCurrentPage();\n      \n      \/\/ \u6efe\u52d5\u5230\u9802\u90e8\n      window.scrollTo({\n        top: document.getElementById('vt-container').offsetTop - 20,\n        behavior: 'smooth'\n      });\n    },\n\n    \/\/ \u9078\u64c7\u9078\u9805\n    selectOption: function(optionId) {\n      this.state.answers[this.state.currentQuestion] = optionId;\n      \n      \/\/ \u6dfb\u52a0\u8996\u89ba\u6548\u679c\n      const options = document.querySelectorAll('.vt-option');\n      options.forEach(option => {\n        if (option.dataset.optionId === optionId) {\n          option.classList.add('selected');\n        } else {\n          option.classList.remove('selected');\n        }\n      });\n      \n      \/\/ \u77ed\u66ab\u5ef6\u9072\u5f8c\u9032\u5165\u4e0b\u4e00\u6b65\n      setTimeout(() => {\n        if (this.state.currentQuestion < this.data.questions.length - 1) {\n          this.state.currentQuestion++;\n          this.renderCurrentPage();\n        } else {\n          this.showResults();\n        }\n      }, 500);\n    },\n\n    \/\/ \u4e0a\u4e00\u984c\n    previousQuestion: function() {\n      if (this.state.currentQuestion > 0) {\n        this.state.currentQuestion--;\n        this.renderCurrentPage();\n      }\n    },\n\n    \/\/ \u986f\u793a\u7d50\u679c\n    showResults: function() {\n      this.state.currentPage = 'results';\n      this.renderCurrentPage();\n      \n      \/\/ \u6efe\u52d5\u5230\u9802\u90e8\n      window.scrollTo({\n        top: document.getElementById('vt-container').offsetTop - 20,\n        behavior: 'smooth'\n      });\n    },\n\n    \/\/ \u8a08\u7b97\u7d50\u679c\n    calculateResult: function() {\n      \/\/ \u5728\u9019\u500b\u7c21\u55ae\u7684\u4f8b\u5b50\u4e2d\uff0c\u76f4\u63a5\u57fa\u65bc\u7b2c\u4e00\u500b\u554f\u984c\u7684\u7b54\u6848\u78ba\u5b9a\u7d50\u679c\n      const answer = this.state.answers[0];\n      this.state.result = this.data.results[answer];\n    },\n\n    \/\/ \u91cd\u7f6e\u6e2c\u9a57\n    resetQuiz: function() {\n      this.state.currentPage = 'intro';\n      this.state.currentQuestion = 0;\n      this.state.answers = [];\n      this.state.result = null;\n      this.renderCurrentPage();\n      \n      \/\/ \u6efe\u52d5\u5230\u9802\u90e8\n      window.scrollTo({\n        top: document.getElementById('vt-container').offsetTop - 20,\n        behavior: 'smooth'\n      });\n    }\n  };\n\n  \/\/ \u521d\u59cb\u5316\u6e2c\u9a57\n  document.addEventListener('DOMContentLoaded', function() {\n    VanityTest.init();\n  });\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u8981\u60f3\u5728\u4e16\u754c\u4e0a\u5bfb\u627e\u4e00\u4e2a\u6beb\u65e0\u865a\u8363\u5fc3\u7684\u4eba\uff0c\u5c31\u5982\u540c\u8981\u5bfb\u627e\u4e00\u4e2a\u6beb\u4e0d\u63a9\u9970\u81ea\u5df1\u5f31\u70b9\u7684\u4eba\u4e00\u6837\u56f0\u96be\u3002\u8fd9\u4e2a\u6d4b\u8bd5\u80fd\u544a\u8bc9\u4f60\uff0c\u4f60\u7684\u865a\u8363\u5fc3\u7a76\u7adf\u8fbe\u5230\u4e86\u600e\u6837\u7684\u7a0b\u5ea6\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,246],"tags":[219],"class_list":["post-2827","post","type-post","status-publish","format-standard","hentry","category-personality","category-fun-test","tag-vanity"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2827","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=2827"}],"version-history":[{"count":3,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2827\/revisions"}],"predecessor-version":[{"id":9740,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2827\/revisions\/9740"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2827"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2827"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2827"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}