{"id":2371,"date":"2023-10-07T09:14:05","date_gmt":"2023-10-07T01:14:05","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2371"},"modified":"2025-08-10T01:06:19","modified_gmt":"2025-08-09T17:06:19","slug":"taste-in-choosing-boyfriend","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/taste-in-choosing-boyfriend","title":{"rendered":"\u4f60\u627e\u7537\u670b\u53cb\u773c\u5149\u5982\u4f55\uff1f\u7ebf\u4e0a\u514d\u8d39\u5c0f\u6d4b\u9a8c"},"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<!-- \u6e2c\u9a57\u4e3b\u5bb9\u5668 -->\n<div class=\"container-fluid p-0\" id=\"quiz9-container\">\n  \n  <!-- \u5f15\u5c0e\u9801 -->\n  <section id=\"quizintro9\" data-page=\"intro9\" class=\"min-vh-100 d-flex align-items-center py-5\">\n    <div class=\"container\">\n      <div class=\"row justify-content-center\">\n        <div class=\"col-lg-10 col-xl-8\">\n          <header class=\"text-center mb-5\">\n            <h2 class=\"display-4 fw-bold mb-3\" style=\"color: #6a8a88;\">\u62e9\u5076\u773c\u5149\u6d4b\u9a8c<\/h2>\n            <p class=\"lead text-muted\">\u63a2\u7d22\u4f60\u7684\u6200\u611b\u89c0\uff0c\u767c\u73fe\u5167\u5fc3\u771f\u5be6\u7684\u64c7\u5076\u6a19\u6e96<\/p>\n          <\/header>\n          \n          <div class=\"card border-0 shadow-sm rounded-4 p-4 p-md-5 mb-5\">\n            <div class=\"card-body\">\n              <p class=\"fs-5 text-secondary mb-5 lh-lg\">\n                \u5f88\u591a\u5973\u751f\u90fd\u89ba\u5f97\u81ea\u5df1\u627e\u7537\u53cb\u7684\u773c\u5149\u5be6\u5728\u4e0d\u884c\uff0c\u627e\u7684\u90fd\u662f\u4e9b\u4ec0\u9ebc\u8ca8\u8272\u554a\uff0c\u6709\u6642\u5019\u9047\u4eba\u4e0d\u6dd1\uff0c\u9664\u4e86\u5c0d\u65b9\u7684\u78ba\u662f\u6e23\u7684\u554f\u984c\uff0c\u9084\u6709\u81ea\u5df1\u773c\u5149\u7684\u554f\u984c\u3002\u4e5f\u6709\u7684\u5973\u751f\uff0c\u5f88\u6703\u6311\u4eba\u554a\uff0c\u627e\u7684\u7537\u53cb\u4e00\u500b\u500b\u90fd\u662f\u5f88\u512a\u79c0\u7684\u3002\u4e0d\u77e5\u9053\u4f60\u7684\u773c\u5149\u5982\u4f55\uff1f\u8b93\u6211\u5011\u4e00\u8d77\u4f86\u63a2\u7d22\u5427\uff01\n              <\/p>\n              \n              <div class=\"row g-4 mb-5\">\n                <div class=\"col-md-4\">\n                  <div class=\"text-center feature-card h-100 p-4 rounded-3 bg-light\">\n                    <div class=\"rounded-circle bg-white shadow-sm mx-auto mb-3 d-flex align-items-center justify-content-center\" style=\"width: 80px; height: 80px;\">\n                      <i class=\"bi bi-clock-history fs-2\" style=\"color: #9ab3b1;\"><\/i>\n                    <\/div>\n                    <h5 class=\"fw-semibold mb-2\" style=\"color: #6a8a88;\">\u53ea\u97002\u5206\u949f<\/h5>\n                    <p class=\"text-muted small mb-0\">\u5feb\u901f\u5b8c\u6210\u6e2c\u9a57\uff0c\u7acb\u5373\u7372\u5f97\u7d50\u679c<\/p>\n                  <\/div>\n                <\/div>\n                <div class=\"col-md-4\">\n                  <div class=\"text-center feature-card h-100 p-4 rounded-3 bg-light\">\n                    <div class=\"rounded-circle bg-white shadow-sm mx-auto mb-3 d-flex align-items-center justify-content-center\" style=\"width: 80px; height: 80px;\">\n                      <i class=\"bi bi-graph-up fs-2\" style=\"color: #9ab3b1;\"><\/i>\n                    <\/div>\n                    <h5 class=\"fw-semibold mb-2\" style=\"color: #6a8a88;\">\u4e13\u4e1a\u5206\u6790<\/h5>\n                    <p class=\"text-muted small mb-0\">\u591a\u7dad\u5ea6\u8a55\u4f30\u4f60\u7684\u64c7\u5076\u773c\u5149<\/p>\n                  <\/div>\n                <\/div>\n                <div class=\"col-md-4\">\n                  <div class=\"text-center feature-card h-100 p-4 rounded-3 bg-light\">\n                    <div class=\"rounded-circle bg-white shadow-sm mx-auto mb-3 d-flex align-items-center justify-content-center\" style=\"width: 80px; height: 80px;\">\n                      <i class=\"bi bi-stars fs-2\" style=\"color: #9ab3b1;\"><\/i>\n                    <\/div>\n                    <h5 class=\"fw-semibold mb-2\" style=\"color: #6a8a88;\">\u76f4\u767d\u89e3\u6790<\/h5>\n                    <p class=\"text-muted small mb-0\">\u7d66\u4f60\u6700\u771f\u5be6\u7684\u5efa\u8b70\u8207\u6307\u5f15<\/p>\n                  <\/div>\n                <\/div>\n              <\/div>\n              \n              <div class=\"text-center\">\n                <button type=\"button\" class=\"btn btn-lg px-5 py-3 rounded-pill shadow-sm start-btn\" \n                        data-action=\"start-quiz\"\n                        style=\"background: linear-gradient(135deg, #9ab3b1, #b5c9c7); color: white; border: none; min-width: 200px;\">\n                  <span class=\"me-2\">\u5f00\u59cb\u6d4b\u9a8c<\/span>\n                  <i class=\"bi bi-arrow-right-circle\"><\/i>\n                <\/button>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u6e2c\u9a57\u9801 -->\n  <section id=\"quizmain9\" data-page=\"quiz9\" class=\"d-none min-vh-100 py-5\">\n    <div class=\"container\">\n      <div class=\"row justify-content-center\">\n        <div class=\"col-lg-8 col-xl-6\">\n          <header class=\"text-center mb-4\">\n            <h2 class=\"fw-bold mb-3\" style=\"color: #6a8a88;\">\u62e9\u5076\u773c\u5149\u6d4b\u9a8c<\/h2>\n          <\/header>\n          \n          <!-- \u9032\u5ea6\u689d -->\n          <div class=\"progress mb-4\" style=\"height: 8px;\" role=\"progressbar\" aria-label=\"\u6d4b\u9a8c\u8fdb\u5ea6\">\n            <div class=\"progress-bar\" data-progress=\"bar\" style=\"background: linear-gradient(90deg, #9ab3b1, #b5c9c7); transition: width 0.4s ease;\"><\/div>\n          <\/div>\n          <p class=\"text-center text-muted mb-4\" data-progress=\"text\">\u95ee\u98981\/10<\/p>\n          \n          <!-- \u554f\u984c\u5361\u7247 -->\n          <div class=\"card border-0 shadow-sm rounded-4 p-4 mb-4\">\n            <div class=\"card-body\">\n              <h3 class=\"fs-4 fw-bold text-center mb-4\" style=\"color: #6a8a88; font-size: 22px;\" data-question=\"title\"><\/h3>\n              <div data-question=\"options\" class=\"d-grid gap-3\">\n                <!-- \u9078\u9805\u5c07\u52d5\u614b\u63d2\u5165 -->\n              <\/div>\n            <\/div>\n          <\/div>\n          \n          <!-- \u5c0e\u822a\u6309\u9215 -->\n          <div class=\"text-center\">\n            <button type=\"button\" class=\"btn btn-outline-secondary rounded-pill px-4 py-2 d-none\" data-action=\"prev-quiz\">\n              <i class=\"bi bi-chevron-left me-2\"><\/i>\u4e0a\u4e00\u9898\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u7d50\u679c\u9801 -->\n  <section id=\"quizresult9\" data-page=\"result9\" class=\"d-none min-vh-100 py-5\">\n    <div class=\"container\">\n      <div class=\"row justify-content-center\">\n        <div class=\"col-lg-10 col-xl-8\">\n          <header class=\"text-center mb-5\">\n            <h2 class=\"fw-bold\" style=\"color: #6a8a88;\">\u6d4b\u9a8c\u7ed3\u679c<\/h2>\n          <\/header>\n          \n          <!-- \u7d50\u679c\u5361\u7247 -->\n          <div class=\"card border-0 shadow-sm rounded-4 p-4 mb-4\">\n            <div class=\"card-body\">\n              <h3 class=\"text-center fw-bold mb-4\" style=\"color: #6a8a88;\" data-result=\"title\"><\/h3>\n              <p class=\"fs-5 lh-lg text-secondary\" data-result=\"description\"><\/p>\n            <\/div>\n          <\/div>\n          \n          <!-- \u5716\u8868\u5361\u7247 -->\n          <div class=\"card border-0 shadow-sm rounded-4 p-4 mb-5\">\n            <div class=\"card-body\">\n              <div class=\"mx-auto\" style=\"max-width: 500px; height: 350px;\">\n                <canvas id=\"result-chart\"><\/canvas>\n              <\/div>\n            <\/div>\n          <\/div>\n          \n          <!-- \u91cd\u65b0\u6e2c\u9a57\u6309\u9215 -->\n          <div class=\"text-center\">\n            <button type=\"button\" class=\"btn btn-lg px-5 py-3 rounded-pill shadow-sm\"\n                    data-action=\"restart-quiz\"\n                    style=\"background: linear-gradient(135deg, #9ab3b1, #b5c9c7); color: white; border: none;\">\n              <i class=\"bi bi-arrow-clockwise me-2\"><\/i>\n              <span>\u91cd\u65b0\u6d4b\u9a8c<\/span>\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n<\/div>\n\n<!-- \u6a23\u5f0f -->\n<style>\n\/* \u57fa\u790e\u6a23\u5f0f\u91cd\u7f6e *\/\n#quiz9-container {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft JhengHei', '\u5fae\u8edf\u6b63\u9ed1\u9ad4', sans-serif;\n}\n\n#quiz9-container * {\n  box-sizing: border-box;\n}\n\n\/* \u7279\u6027\u5361\u7247\u52d5\u756b *\/\n#quiz9-container .feature-card {\n  transition: transform 0.3s ease, box-shadow 0.3s ease;\n  border: 1px solid rgba(154, 179, 177, 0.1);\n}\n\n#quiz9-container .feature-card:hover {\n  transform: translateY(-5px);\n  box-shadow: 0 10px 30px rgba(154, 179, 177, 0.15);\n}\n\n\/* \u6309\u9215\u61f8\u505c\u6548\u679c *\/\n#quiz9-container .start-btn {\n  transition: all 0.3s ease;\n  font-size: 18px;\n  font-weight: 500;\n}\n\n#quiz9-container .start-btn:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 25px rgba(154, 179, 177, 0.3) !important;\n  background: linear-gradient(135deg, #8aa4a2, #a5b9b7) !important;\n}\n\n\/* \u9078\u9805\u6309\u9215\u6a23\u5f0f *\/\n#quiz9-container .option-btn {\n  background: white;\n  border: 2px solid #e8f0ef;\n  color: #4a5f5d;\n  padding: 1rem 1.5rem;\n  text-align: left;\n  transition: all 0.3s ease;\n  font-size: 18px;\n  min-height: 60px;\n  position: relative;\n  padding-left: 3.5rem;\n  cursor: pointer;\n}\n\n#quiz9-container .option-btn:hover {\n  background: #f8faf9;\n  border-color: #9ab3b1;\n  transform: translateX(5px);\n  box-shadow: 0 4px 15px rgba(154, 179, 177, 0.15);\n  color: #4a5f5d;\n}\n\n#quiz9-container .option-btn.active {\n  background: linear-gradient(to right, rgba(154, 179, 177, 0.1), rgba(181, 201, 199, 0.05));\n  border-color: #9ab3b1;\n  color: #4a5f5d;\n  font-weight: 500;\n}\n\n\/* \u9078\u9805\u6307\u793a\u5668 *\/\n#quiz9-container .option-btn::before {\n  content: '';\n  position: absolute;\n  left: 1.2rem;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  border: 2px solid #d4e8e6;\n  background: white;\n  transition: all 0.3s ease;\n}\n\n#quiz9-container .option-btn:hover::before {\n  border-color: #9ab3b1;\n}\n\n#quiz9-container .option-btn.active::before {\n  background: #9ab3b1;\n  border-color: #9ab3b1;\n}\n\n\/* \u52fe\u865f *\/\n#quiz9-container .option-btn.active::after {\n  content: '';\n  position: absolute;\n  left: 1.45rem;\n  top: 50%;\n  transform: translateY(-50%) rotate(-45deg);\n  width: 6px;\n  height: 11px;\n  border-right: 2px solid white;\n  border-bottom: 2px solid white;\n  animation: checkMark 0.3s ease;\n}\n\n@keyframes checkMark {\n  0% {\n    transform: translateY(-50%) rotate(-45deg) scale(0);\n  }\n  50% {\n    transform: translateY(-50%) rotate(-45deg) scale(1.2);\n  }\n  100% {\n    transform: translateY(-50%) rotate(-45deg) scale(1);\n  }\n}\n\n\/* \u9801\u9762\u904e\u6e21\u52d5\u756b *\/\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n#quiz9-container section.fade-in {\n  animation: fadeIn 0.5s ease;\n}\n\n\/* \u97ff\u61c9\u5f0f\u8a2d\u8a08 *\/\n@media (max-width: 768px) {\n  #quiz9-container .display-4 {\n    font-size: 2rem;\n  }\n  \n  #quiz9-container .option-btn {\n    font-size: 16px;\n    padding: 0.875rem 1.25rem;\n    padding-left: 3rem;\n  }\n  \n  #quiz9-container .feature-card {\n    padding: 1rem !important;\n  }\n  \n  #quiz9-container .card {\n    padding: 1.5rem !important;\n  }\n}\n<\/style>\n\n<!-- JavaScript -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n<script>\n(function() {\n  'use strict';\n  \n  class QuizManager {\n    constructor() {\n      \/\/ \u5feb\u53d6DOM\u5143\u7d20\n      this.container = document.getElementById('quiz9-container');\n      this.introPage = document.getElementById('quizintro9');\n      this.quizPage = document.getElementById('quizmain9');\n      this.resultPage = document.getElementById('quizresult9');\n      \n      this.progressBar = this.container.querySelector('[data-progress=\"bar\"]');\n      this.progressText = this.container.querySelector('[data-progress=\"text\"]');\n      this.questionTitle = this.container.querySelector('[data-question=\"title\"]');\n      this.optionsContainer = this.container.querySelector('[data-question=\"options\"]');\n      this.prevBtn = this.container.querySelector('[data-action=\"prev-quiz\"]');\n      \n      this.resultTitle = this.container.querySelector('[data-result=\"title\"]');\n      this.resultDescription = this.container.querySelector('[data-result=\"description\"]');\n      \n      \/\/ \u6e2c\u9a57\u8cc7\u6599\n      this.currentQuestion = 0;\n      this.answers = [];\n      this.chart = null;\n      this.questionPath = [0]; \/\/ \u8a18\u9304\u554f\u984c\u8def\u5f91\n      \n      this.questions = [\n        {\n          id: 0,\n          text: \"\u5176\u5be6\u4f60\u4e00\u5411\u8a8d\u70ba\u81ea\u5df1\u5c31\u662f\u4e00\u500b\u5927\u4fd7\u4eba\uff1f\",\n          options: [\n            { text: \"\u662f\u7684\", next: 1 },\n            { text: \"\u4e0d\u662f\", next: 2 },\n            { text: \"\u9084\u597d\", next: 3 }\n          ]\n        },\n        {\n          id: 1,\n          text: \"\u4f60\u73fe\u5728\u6709\u990a\u5bf5\u7269\u55ce\uff1f\",\n          options: [\n            { text: \"\u6709\u7684\", next: 2 },\n            { text: \"\u6c92\u6709\", next: 3 },\n            { text: \"\u6253\u7b97\u990a\", next: 4 }\n          ]\n        },\n        {\n          id: 2,\n          text: \"\u4f60\u5c0d\u81ea\u5df1\u7684\u5e74\u9f61\u7e3d\u662f\u6c92\u6709\u4e00\u500b\u6e96\u78ba\u7684\u610f\u8b58\u55ce\uff1f\",\n          options: [\n            { text: \"\u662f\u7684\", next: 3 },\n            { text: \"\u4e0d\u662f\", next: 4 },\n            { text: \"\u9084\u597d\", next: 5 }\n          ]\n        },\n        {\n          id: 3,\n          text: \"\u4f60\u4e00\u76f4\u76f8\u4fe1\u81ea\u5df1\u7e3d\u6709\u4e00\u5929\u6703\u9047\u5230\u771f\u611b\u55ce\uff1f\",\n          options: [\n            { text: \"\u76f8\u4fe1\", next: 4 },\n            { text: \"\u4e0d\u76f8\u4fe1\", next: 5 },\n            { text: \"\u66fe\u7d93\u4fe1\", next: 6 }\n          ]\n        },\n        {\n          id: 4,\n          text: \"\u4f60\u6642\u4e0d\u6642\u5c31\u6703\u751f\u7537\u53cb\u7684\u6c23\u55ce\uff1f\",\n          options: [\n            { text: \"\u662f\u7684\", next: 5 },\n            { text: \"\u4e0d\u662f\", next: 5 },\n            { text: \"\u6c92\u7537\u53cb\", next: 6 }\n          ]\n        },\n        {\n          id: 5,\n          text: \"\u5982\u679c\u9001\u7537\u53cb\u9322\u5305\uff0c\u4f60\u6703\u6311\u500b\u4ec0\u9ebc\u984f\u8272\u7684\uff1f\",\n          options: [\n            { text: \"\u9ed1\u8272\", next: 6 },\n            { text: \"\u9ec3\u8272\", next: 7 },\n            { text: \"\u68d5\u8272\", result: \"A\" }\n          ]\n        },\n        {\n          id: 6,\n          text: \"\u4f60\u5c0d\u5bb6\u4e2d\u5e03\u7f6e\u9084\u662f\u633a\u6709\u7d93\u9a57\u7684\u55ce\uff1f\",\n          options: [\n            { text: \"\u662f\u7684\", next: 7 },\n            { text: \"\u4e0d\u662f\", next: 8 },\n            { text: \"\u4e00\u822c\", next: 9 }\n          ]\n        },\n        {\n          id: 7,\n          text: \"\u5982\u679c\u505a\u5922\uff0c\u4f60\u5e0c\u671b\u5922\u898b\u4e0b\u9762\u54ea\u7a2e\u5834\u666f\uff1f\",\n          options: [\n            { text: \"\u73ab\u7470\u82b1\u7530\", next: 8 },\n            { text: \"\u6d77\u908a\u6930\u98a8\", result: \"A\" },\n            { text: \"\u5c0f\u6a4b\u6d41\u6c34\", result: \"B\" }\n          ]\n        },\n        {\n          id: 8,\n          text: \"\u4f60\u89ba\u5f97\u81ea\u5df1\u7684\u689d\u4ef6\u662f\u8655\u5728\u54ea\u4e00\u500b\u7d1a\u5225\uff1f\",\n          options: [\n            { text: \"\u4e0a\u7b49\", result: \"C\" },\n            { text: \"\u4e2d\u7b49\", result: \"D\" },\n            { text: \"\u4e0b\u7b49\", result: \"A\" }\n          ]\n        },\n        {\n          id: 9,\n          text: \"\u4e0b\u9762\u5e7e\u7a2e\u6771\u897f\uff0c\u4f60\u6703\u64fa\u4ec0\u9ebc\u5728\u978b\u6ac3\u4e0a\u5462\uff1f\",\n          options: [\n            { text: \"\u7da0\u8272\u76c6\u683d\", result: \"B\" },\n            { text: \"\u9999\u6c34\u4e7e\u82b1\", result: \"C\" },\n            { text: \"\u4e00\u74f6\u9bae\u82b1\", result: \"D\" }\n          ]\n        }\n      ];\n      \n      this.results = {\n        A: {\n          title: \"\u773c\u5149\u4e00\u822c\",\n          description: \"\u8aaa\u4f86\u8aaa\u53bb\uff0c\u4f60\u5c31\u662f\u4e00\u500b\u4e00\u822c\u7684\u666e\u901a\u4eba\uff0c\u6c92\u6709\u4ec0\u9ebc\u7279\u5225\u512a\u79c0\u7684\u5730\u65b9\uff0c\u4e5f\u4e0d\u6703\u592a\u5dee\uff0c\u53cd\u6b63\u4eba\u751f\u4e5f\u662f\u666e\u901a\u7684\u3002\u627e\u7537\u53cb\u7684\u773c\u5149\uff0c\u4e5f\u662f\u4e00\u822c\u5566\u3002\u4f46\u662f\uff0c\u9019\u4e0d\u662f\u8aaa\u4f60\u767c\u73fe\u4e0d\u4e86\u512a\u79c0\u7684\u4eba\uff0c\u53ea\u662f\u512a\u79c0\u7684\u7537\u751f\u770b\u4e0d\u4e0a\u4f60\uff0c\u4f60\u4e5f\u914d\u4e0d\u4e0a\u4eba\u5bb6\uff0c\u6240\u4ee5\u6700\u5f8c\u627e\u500b\u4e00\u822c\u7684\u4eba\u5427\uff0c\u4f60\u559c\u6b61\u3001\u5c0d\u4f60\u597d\u5c31\u884c\u4e86\uff0c\u53cd\u6b63\u4eba\u751f\u4e5f\u5c31\u9019\u6a23\u4e86\u3002\",\n          scores: {\n            \"\u6d1e\u5bdf\u529b\": 45,\n            \"\u6a19\u6e96\": 50,\n            \"\u5224\u65b7\u529b\": 40,\n            \"\u73fe\u5be6\u611f\": 75,\n            \"\u81ea\u4fe1\u5fc3\": 45\n          }\n        },\n        B: {\n          title: \"\u773c\u5149\u597d\",\n          description: \"\u8070\u660e\u53c8\u7f8e\u9e97\u7684\u4f60\uff0c\u5728\u627e\u5c0d\u8c61\u4e0a\u9762\uff0c\u773c\u5149\u9084\u662f\u5f88\u4e0d\u932f\u7684\u3002\u773c\u5149\u597d\u4e0d\u4ee3\u8868\u773c\u5149\u9ad8\uff0c\u4f60\u53ea\u4e0d\u904e\u662f\u7528\u767c\u73fe\u5c0d\u65b9\u9583\u5149\u9ede\u7684\u8996\u89d2\u4f86\u770b\uff0c\u7562\u7adf\u4f60\u89ba\u5f97\u4eba\u4e0d\u53ef\u80fd\u5341\u5168\u5341\u7f8e\uff0c\u4eba\u591a\u5c11\u90fd\u6703\u6709\u4e0d\u8db3\u8207\u7f3a\u9ede\uff0c\u4f46\u662f\u53ea\u8981\u5c0d\u65b9\u6709\u9583\u5149\u9ede\uff0c\u4f60\u89ba\u5f97\u90fd\u662f\u53ef\u53d6\u7684\u3002\u627e\u5c0d\u8c61\uff0c\u4f60\u66f4\u770b\u91cd\u80fd\u529b\u8207\u6027\u683c\uff0c\u56e0\u6b64\u7e3d\u662f\u4e00\u627e\u4e00\u500b\u6e96\u5152\u3002\",\n          scores: {\n            \"\u6d1e\u5bdf\u529b\": 85,\n            \"\u6a19\u6e96\": 70,\n            \"\u5224\u65b7\u529b\": 80,\n            \"\u73fe\u5be6\u611f\": 75,\n            \"\u81ea\u4fe1\u5fc3\": 75\n          }\n        },\n        C: {\n          title: \"\u773c\u5149\u9ad8\",\n          description: \"\u4f60\u627e\u7537\u53cb\u7684\u773c\u5149\u9084\u662f\u883b\u9ad8\u7684\uff0c\u56e0\u70ba\u4f60\u6311\u4ec0\u9ebc\u7684\u773c\u5149\u90fd\u5f88\u9ad8\uff0c\u627e\u7537\u53cb\u66f4\u52a0\uff0c\u4e0d\u904e\u4f60\u4e26\u4e0d\u6703\u56e0\u70ba\u6311\u5254\u5c31\u4e0d\u8ac7\u6200\u611b\uff0c\u4f60\u662f\u89ba\u5f97\u9019\u500b\u4e16\u754c\u4e0a\uff0c\u54ea\u6015\u8981\u6c42\u518d\u9ad8\u90fd\u80fd\u627e\u5230\u7406\u60f3\u4e2d\u7684\uff0c\u6240\u4ee5\u54ea\u6015\u773c\u5149\u5f88\u9ad8\uff0c\u4f46\u662f\u4f60\u4ecd\u7136\u6703\u627e\u5230\u53ef\u4ee5\u8ac7\u7684\u4eba\u3002\u4f60\u4e0d\u662f\u90a3\u7a2e\u5c07\u5c31\u7684\u985e\u578b\uff0c\u4e0d\u6703\u70ba\u4e86\u4ed6\u4eba\u7684\u773c\u5149\u8207\u8ad6\u8abf\uff0c\u5c31\u964d\u4f4e\u81ea\u5df1\u7684\u6c34\u6e96\uff0c\u4f60\u5be7\u7f3a\u6bcb\u6feb\u3002\",\n          scores: {\n            \"\u6d1e\u5bdf\u529b\": 70,\n            \"\u6a19\u6e96\": 90,\n            \"\u5224\u65b7\u529b\": 75,\n            \"\u73fe\u5be6\u611f\": 60,\n            \"\u81ea\u4fe1\u5fc3\": 85\n          }\n        },\n        D: {\n          title: \"\u773c\u5149\u4e0d\u548b\u7684\",\n          description: \"\u4e0d\u77e5\u9053\u70ba\u4ec0\u9ebc\uff0c\u4f60\u5728\u5176\u4ed6\u65b9\u9762\u7684\u773c\u5149\u9084\u662f\u4e0d\u932f\u7684\uff0c\u7368\u7368\u5728\u627e\u7537\u53cb\u7684\u773c\u5149\u4e0a\u9762\uff0c\u4f60\u9084\u771f\u662f\u4e0d\u600e\u9ebc\u6a23\u3002\u4e5f\u6709\u53ef\u80fd\u9019\u5c31\u662f\u547d\u904b\u7684\u5b89\u6392\u5427\uff0c\u4eba\u4e0d\u53ef\u80fd\u5341\u5168\u5341\u7f8e\uff0c\u4eba\u751f\u4e5f\u4e0d\u53ef\u80fd\u5b8c\u7f8e\uff0c\u4e8b\u4e8b\u5982\u9858\u4ee5\u511f\u3002\u4f60\u5728\u5176\u4ed6\u65b9\u9762\u7684\u6536\u7a6b\u4e0d\u5c11\uff0c\u53ea\u597d\u9047\u4eba\u4e0d\u6dd1\u4e86\u3002\u4e0d\u904e\u4f60\u4e5f\u4e0d\u662f\u90a3\u7a2e\u4e00\u50bb\u5230\u5e95\u7684\u4eba\uff0c\u767c\u73fe\u4e0d\u5c0d\u4e86\u8d95\u7dca\u63db\u4eba\u3002\",\n          scores: {\n            \"\u6d1e\u5bdf\u529b\": 30,\n            \"\u6a19\u6e96\": 40,\n            \"\u5224\u65b7\u529b\": 35,\n            \"\u73fe\u5be6\u611f\": 80,\n            \"\u81ea\u4fe1\u5fc3\": 50\n          }\n        }\n      };\n      \n      this.init();\n    }\n    \n    init() {\n      \/\/ \u4e8b\u4ef6\u59d4\u8a17\n      this.container.addEventListener('click', this.handleClick.bind(this));\n    }\n    \n    handleClick(e) {\n      const action = e.target.closest('[data-action]');\n      if (action) {\n        e.preventDefault();\n        const actionName = action.dataset.action;\n        \n        switch(actionName) {\n          case 'start-quiz':\n            this.startQuiz();\n            break;\n          case 'prev-quiz':\n            this.previousQuestion();\n            break;\n          case 'restart-quiz':\n            this.restartQuiz();\n            break;\n        }\n      }\n      \n      \/\/ \u8655\u7406\u9078\u9805\u9ede\u64ca\n      const option = e.target.closest('.option-btn');\n      if (option) {\n        e.preventDefault();\n        this.selectOption(option);\n      }\n    }\n    \n    startQuiz() {\n      this.switchPage(this.introPage, this.quizPage);\n      this.renderQuestion(0);\n    }\n    \n    renderQuestion(questionId) {\n      const question = this.questions.find(q => q.id === questionId);\n      if (!question) return;\n      \n      \/\/ \u66f4\u65b0\u9032\u5ea6\n      const progress = ((this.questionPath.length) \/ 10) * 100;\n      this.progressBar.style.width = `${progress}%`;\n      this.progressText.textContent = `\u554f\u984c ${this.questionPath.length}\/10`;\n      \n      \/\/ \u66f4\u65b0\u554f\u984c\n      this.questionTitle.textContent = question.text;\n      \n      \/\/ \u6e32\u67d3\u9078\u9805\n      this.optionsContainer.innerHTML = question.options.map((option, index) => `\n        <button type=\"button\" \n                class=\"btn btn-outline-secondary w-100 option-btn\"\n                data-index=\"${index}\"\n                data-next=\"${option.next || ''}\"\n                data-result=\"${option.result || ''}\">\n          ${option.text}\n        <\/button>\n      `).join('');\n      \n      \/\/ \u986f\u793a\/\u96b1\u85cf\u4e0a\u4e00\u984c\u6309\u9215\n      this.prevBtn.classList.toggle('d-none', this.questionPath.length <= 1);\n      \n      \/\/ \u6efe\u52d5\u5230\u9801\u9762\u9802\u90e8\n      this.scrollToTop();\n    }\n    \n    selectOption(button) {\n      \/\/ \u66f4\u65b0\u9078\u4e2d\u72c0\u614b\n      const allOptions = this.optionsContainer.querySelectorAll('.option-btn');\n      allOptions.forEach(btn => btn.classList.remove('active'));\n      button.classList.add('active');\n      \n      \/\/ \u5ef6\u9072\u9032\u5165\u4e0b\u4e00\u984c\n      setTimeout(() => {\n        const next = button.dataset.next;\n        const result = button.dataset.result;\n        \n        if (result) {\n          this.showResult(result);\n        } else if (next) {\n          const nextId = parseInt(next);\n          this.questionPath.push(nextId);\n          this.renderQuestion(nextId);\n        }\n      }, 300);\n    }\n    \n    previousQuestion() {\n      if (this.questionPath.length > 1) {\n        this.questionPath.pop();\n        const prevId = this.questionPath[this.questionPath.length - 1];\n        this.renderQuestion(prevId);\n      }\n    }\n    \n    showResult(resultKey) {\n      const result = this.results[resultKey];\n      \n      \/\/ \u586b\u5145\u7d50\u679c\n      this.resultTitle.textContent = `\u4f60\u7684\u64c7\u5076\u773c\u5149\uff1a${result.title}`;\n      this.resultDescription.textContent = result.description;\n      \n      \/\/ \u5207\u63db\u9801\u9762\n      this.switchPage(this.quizPage, this.resultPage);\n      \n      \/\/ \u7e6a\u88fd\u5716\u8868\n      setTimeout(() => {\n        this.drawChart(result.scores);\n      }, 100);\n      \n      \/\/ \u6efe\u52d5\u5230\u9802\u90e8\n      this.scrollToTop();\n    }\n    \n    drawChart(scores) {\n      const canvas = document.getElementById('result-chart');\n      if (!canvas) return;\n      \n      \/\/ \u92b7\u6bc0\u820a\u5716\u8868\n      if (this.chart) {\n        this.chart.destroy();\n      }\n      \n      const ctx = canvas.getContext('2d');\n      const labels = Object.keys(scores);\n      const data = Object.values(scores);\n      \n      this.chart = new Chart(ctx, {\n        type: 'radar',\n        data: {\n          labels: labels,\n          datasets: [{\n            label: '\u4f60\u7684\u7279\u8cea\u8a55\u5206',\n            data: data,\n            backgroundColor: 'rgba(154, 179, 177, 0.2)',\n            borderColor: 'rgba(154, 179, 177, 0.8)',\n            borderWidth: 2,\n            pointBackgroundColor: 'rgba(106, 138, 136, 1)',\n            pointBorderColor: '#fff',\n            pointHoverBackgroundColor: '#fff',\n            pointHoverBorderColor: 'rgba(106, 138, 136, 1)',\n            pointRadius: 5,\n            pointHoverRadius: 7\n          }]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          scales: {\n            r: {\n              angleLines: {\n                display: true,\n                color: 'rgba(0, 0, 0, 0.05)'\n              },\n              suggestedMin: 0,\n              suggestedMax: 100,\n              ticks: {\n                stepSize: 20,\n                backdropColor: 'transparent',\n                color: '#6b8a88',\n                font: {\n                  size: 12\n                }\n              },\n              pointLabels: {\n                font: {\n                  size: 18,\n                  weight: '500'\n                },\n                color: '#6a8a88'\n              },\n              grid: {\n                color: 'rgba(0, 0, 0, 0.03)'\n              }\n            }\n          },\n          plugins: {\n            legend: {\n              display: false\n            },\n            tooltip: {\n              backgroundColor: 'rgba(106, 138, 136, 0.9)',\n              titleFont: {\n                size: 14\n              },\n              bodyFont: {\n                size: 14\n              },\n              padding: 12,\n              cornerRadius: 8,\n              callbacks: {\n                label: (context) => `${context.label}: ${context.raw}%`\n              }\n            }\n          }\n        }\n      });\n    }\n    \n    restartQuiz() {\n      \/\/ \u91cd\u7f6e\u72c0\u614b\n      this.questionPath = [0];\n      this.answers = [];\n      \n      \/\/ \u92b7\u6bc0\u5716\u8868\n      if (this.chart) {\n        this.chart.destroy();\n        this.chart = null;\n      }\n      \n      \/\/ \u8fd4\u56de\u5f15\u5c0e\u9801\n      this.switchPage(this.resultPage, this.introPage);\n    }\n    \n    switchPage(from, to) {\n      from.classList.add('d-none');\n      to.classList.remove('d-none');\n      to.classList.add('fade-in');\n      \n      \/\/ \u79fb\u9664\u52d5\u756b\u985e\n      setTimeout(() => {\n        to.classList.remove('fade-in');\n      }, 500);\n    }\n    \n    scrollToTop() {\n      const header = this.container.querySelector('h2');\n      if (header) {\n        header.scrollIntoView({ behavior: 'smooth', block: 'center' });\n      }\n    }\n  }\n  \n  \/\/ \u521d\u59cb\u5316\u6e2c\u9a57\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', () => {\n      new QuizManager();\n    });\n  } else {\n    new QuizManager();\n  }\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u6709\u7684\u59b9\u5b50\uff0c\u5f88\u4f1a\u6311\u4eba\u554a\uff0c\u627e\u7684\u7537\u53cb\u4e00\u4e2a\u4e2a\u90fd\u662f\u5f88\u4f18\u79c0\u7684\u3002\u4e0d\u77e5\u9053\u4f60\u7684\u773c\u5149\u5982\u4f55\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":"normal-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":[178,167],"tags":[],"class_list":["post-2371","post","type-post","status-publish","format-standard","hentry","category-love","category-personality"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2371","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=2371"}],"version-history":[{"count":8,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2371\/revisions"}],"predecessor-version":[{"id":10324,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2371\/revisions\/10324"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2371"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2371"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}