{"id":8999,"date":"2025-02-28T10:04:55","date_gmt":"2025-02-28T02:04:55","guid":{"rendered":"https:\/\/xinliceyan.org\/?p=8999"},"modified":"2025-05-06T00:15:10","modified_gmt":"2025-05-05T16:15:10","slug":"survival-test-love-problems","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/survival-test-love-problems","title":{"rendered":"1\u9053\u9898\u6d4b\u8bd5\uff0c\u7aa5\u63a2\u51fa\u4f60\u6700\u5927\u7684\u604b\u7231\u95ee\u9898\u662f\u4ec0\u4e48\uff01"},"content":{"rendered":"<!-- \u6200\u611b\u554f\u984c\u6e2c\u9a57 - \u73fe\u4ee3\u6642\u5c1a\u8a2d\u8a08 -->\n<div id=\"quiz-container\" class=\"love-test-container\">\n  <!-- \u5f15\u5c0e\u9801 -->\n  <div id=\"intro-page\" class=\"test-page active\">\n    <div class=\"intro-content\">\n      <h2 class=\"test-title\">\u7aa5\u63a2\u51fa\u4f60\u6700\u5927\u7684\u604b\u7231\u95ee\u9898\u662f\u4ec0\u4e48\uff01<\/h2>\n<h3>\u4f60\u6b63\u5728\u6237\u5916\u6e38\u4e50\uff0c\u84dd\u5929\u767d\u4e91\uff0c\u4f60\u7684\u5fc3\u60c5\u5927\u597d\uff0c\u6ca1\u60f3\u5230\u7a81\u7136\u9047\u5230\u4e00\u53ea\u731b\u517d\uff0c\u4f60\u4f1a\u91c7\u53d6\u600e\u6837\u7684\u5e94\u5bf9\u65b9\u5f0f\uff1f<\/h3>\n      <p class=\"test-description\">\u6d4b\u8bd5\u4e00\u4e0b\uff0c\u770b\u770b\u4f60\u5185\u5fc3\u6df1\u5904\u6700\u5927\u7684\u604b\u7231\u969c\u788d\u662f\u4ec0\u4e48\uff1f\u4e00\u9053\u9898\uff0c\u63ed\u9732\u4f60\u7684\u5185\u5fc3\uff01<\/p>\n      <button id=\"start-test\" class=\"action-button\">\u5f00\u59cb\u6d4b\u9a8c<\/button>\n    <\/div>\n    <div class=\"intro-decoration\">\n      <div class=\"decoration-circle circle-1\"><\/div>\n      <div class=\"decoration-circle circle-2\"><\/div>\n      <div class=\"decoration-circle circle-3\"><\/div>\n    <\/div>\n  <\/div>\n\n  <!-- \u6e2c\u9a57\u9801 -->\n  <div id=\"quiz-page\" class=\"test-page\">\n    <div id=\"question-container\">\n      <!-- \u554f\u984c\u5c07\u901a\u904eJavaScript\u52d5\u614b\u52a0\u8f09 -->\n    <\/div>\n    <div id=\"progress-container\" class=\"progress-container\">\n      <div id=\"progress-bar\" class=\"progress-bar\"><\/div>\n    <\/div>\n  <\/div>\n\n  <!-- \u7d50\u679c\u9801 -->\n  <div id=\"results-page\" class=\"test-page\">\n    <h2 class=\"result-title\">\u4f60\u7684\u6d4b\u9a8c\u7ed3\u679c<\/h2>\n    <div class=\"result-content\">\n      <div id=\"result-text\" class=\"result-text\"><\/div>\n      <div class=\"chart-container\">\n        <canvas id=\"result-chart\"><\/canvas>\n      <\/div>\n    <\/div>\n    <button id=\"restart-test\" class=\"action-button\">\u91cd\u65b0\u6d4b\u8bd5<\/button>\n    <div class=\"result-decoration\">\n      <div class=\"decoration-circle circle-4\"><\/div>\n      <div class=\"decoration-circle circle-5\"><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n\/* \u9632\u6b62\u6a23\u5f0f\u885d\u7a81\uff0c\u4f7f\u7528\u547d\u540d\u7a7a\u9593 *\/\n.love-test-container {\n  font-family: \"Microsoft JhengHei\", \"\u5fae\u8edf\u6b63\u9ed1\u9ad4\", \"Heiti TC\", \"\u9ed1\u9ad4-\u7e41\", sans-serif;\n  max-width: 800px;\n  margin: 0 auto;\n  padding: 30px;\n  box-sizing: border-box;\n  color: #333;\n  background-color: #fff;\n  border-radius: 20px;\n  box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);\n  overflow: hidden;\n  transition: all 0.5s ease;\n  position: relative;\n}\n\n.love-test-container * {\n  box-sizing: border-box;\n}\n\n.love-test-container .test-page {\n  display: none;\n  opacity: 0;\n  transform: translateY(20px);\n  transition: opacity 0.5s ease, transform 0.5s ease;\n  min-height: 400px;\n  position: relative;\n}\n\n.love-test-container .test-page.active {\n  display: block;\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.love-test-container .test-title {\n  font-size: 32px;\n  text-align: center;\n  margin-bottom: 24px;\n  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  font-weight: 800;\n}\n\n.love-test-container .test-description {\n  font-size: 18px;\n  text-align: center;\n  margin-bottom: 40px;\n  line-height: 1.7;\n  color: #4b5563;\n}\n\n.love-test-container .action-button {\n  display: block;\n  width: 220px;\n  height: 56px;\n  margin: 40px auto;\n  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);\n  color: white;\n  border: none;\n  border-radius: 28px;\n  font-size: 18px;\n  font-weight: bold;\n  cursor: pointer;\n  transition: all 0.3s ease;\n  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);\n  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n  position: relative;\n  overflow: hidden;\n}\n\n.love-test-container .action-button:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 7px 20px rgba(99, 102, 241, 0.6);\n}\n\n.love-test-container .action-button:active {\n  transform: translateY(1px);\n}\n\n.love-test-container h3 {\n  font-size: 24px;\n  font-weight: bold;\n  margin-bottom: 30px;\n  color: #4338ca;\n  line-height: 1.4;\n  text-align: center;\n}\n\n.love-test-container .options-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  margin-top: 30px;\n}\n\n.love-test-container .option-button {\n  min-height: 70px;\n  padding: 16px 24px;\n  background-color: #f9fafb;\n  border: 2px solid #e5e7eb;\n  border-radius: 16px;\n  font-size: 18px;\n  text-align: left;\n  cursor: pointer;\n  transition: all 0.3s ease;\n  display: flex;\n  align-items: center;\n  color: #4b5563;\n  position: relative;\n  overflow: hidden;\n}\n\n.love-test-container .option-button:hover {\n  background-color: #f3f4f6;\n  border-color: #d1d5db;\n  transform: translateY(-3px);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\n}\n\n.love-test-container .option-button.selected {\n  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);\n  border-color: #6366f1;\n  color: #4338ca;\n  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);\n}\n\n.love-test-container .option-button.selected::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 6px;\n  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);\n  border-radius: 3px 0 0 3px;\n}\n\n.love-test-container .option-letter {\n  font-weight: bold;\n  margin-right: 16px;\n  color: #6366f1;\n  font-size: 22px;\n  background-color: rgba(99, 102, 241, 0.1);\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 2px 5px rgba(99, 102, 241, 0.2);\n  flex-shrink: 0;\n}\n\n.love-test-container .option-text {\n  flex-grow: 1;\n  font-size: 18px;\n  line-height: 1.5;\n}\n\n.love-test-container .progress-container {\n  height: 10px;\n  background-color: #f3f4f6;\n  border-radius: 5px;\n  margin-top: 40px;\n  overflow: hidden;\n  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.love-test-container .progress-bar {\n  height: 100%;\n  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);\n  width: 0;\n  transition: width 0.5s ease;\n  border-radius: 5px;\n  box-shadow: 0 1px 3px rgba(99, 102, 241, 0.3);\n}\n\n.love-test-container .result-title {\n  font-size: 36px;\n  text-align: center;\n  margin-bottom: 30px;\n  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  font-weight: 800;\n}\n\n.love-test-container .result-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 40px;\n}\n\n.love-test-container .result-text {\n  font-size: 18px;\n  line-height: 1.8;\n  padding: 30px;\n  background-color: #f9fafb;\n  border-radius: 20px;\n  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n  border-left: 5px solid #6366f1;\n}\n\n.love-test-container .result-text h3 {\n  font-size: 26px;\n  color: #4338ca;\n  margin-bottom: 20px;\n  text-align: left;\n}\n\n.love-test-container .chart-container {\n  width: 100%;\n  max-width: 500px;\n  margin: 20px auto;\n  height: 300px;\n  position: relative;\n}\n\n\/* \u88dd\u98fe\u5143\u7d20 *\/\n.love-test-container .decoration-circle {\n  position: absolute;\n  border-radius: 50%;\n  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(168, 85, 247, 0.2) 100%);\n  z-index: -1;\n}\n\n.love-test-container .circle-1 {\n  width: 200px;\n  height: 200px;\n  top: -80px;\n  right: -80px;\n}\n\n.love-test-container .circle-2 {\n  width: 150px;\n  height: 150px;\n  bottom: -50px;\n  left: -50px;\n}\n\n.love-test-container .circle-3 {\n  width: 100px;\n  height: 100px;\n  bottom: 50px;\n  right: 50px;\n  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);\n}\n\n.love-test-container .circle-4 {\n  width: 250px;\n  height: 250px;\n  top: -100px;\n  left: -100px;\n}\n\n.love-test-container .circle-5 {\n  width: 180px;\n  height: 180px;\n  bottom: -70px;\n  right: -70px;\n  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);\n}\n\n\/* \u79fb\u52d5\u7aef\u9069\u914d *\/\n@media (max-width: 768px) {\n  .love-test-container {\n    padding: 20px;\n    border-radius: 15px;\n  }\n\n  .love-test-container .test-title,\n  .love-test-container .result-title {\n    font-size: 26px;\n  }\n\n  .love-test-container h3 {\n    font-size: 22px;\n  }\n\n  .love-test-container .option-button {\n    padding: 14px 20px;\n    font-size: 16px;\n    min-height: 65px;\n  }\n\n  .love-test-container .option-letter {\n    width: 35px;\n    height: 35px;\n    font-size: 18px;\n  }\n\n  .love-test-container .option-text {\n    font-size: 16px;\n  }\n\n  .love-test-container .result-content {\n    flex-direction: column;\n  }\n\n  .love-test-container .chart-container {\n    width: 100%;\n    order: -1;\n  }\n}\n\n\/* \u7d50\u679c\u52d5\u756b\u6548\u679c *\/\n@keyframes fadeInUp {\n  from {\n    opacity: 0;\n    transform: translate3d(0, 40px, 0);\n  }\n  to {\n    opacity: 1;\n    transform: translate3d(0, 0, 0);\n  }\n}\n\n@keyframes pulse {\n  0% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  50% {\n    transform: scale(1.05);\n    opacity: 0.8;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n.love-test-container .animate-result {\n  animation: fadeInUp 0.8s ease forwards;\n}\n\n.love-test-container .action-button:hover::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 120%;\n  height: 120%;\n  background: rgba(255, 255, 255, 0.2);\n  border-radius: 50%;\n  transform: translate(-50%, -50%) scale(0);\n  animation: pulse 1s infinite;\n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  \/\/ \u6e2c\u9a57\u6578\u64da\n  const quizData = [\n    {\n      question: \"\u4f60\u6b63\u5728\u6236\u5916\u904a\u6a02\uff0c\u85cd\u5929\u767d\u96f2\uff0c\u4f60\u7684\u5fc3\u60c5\u5927\u597d\uff0c\u6c92\u60f3\u5230\u7a81\u7136\u9047\u5230\u4e00\u96bb\u731b\u7378\uff0c\u4f60\u6703\u63a1\u53d6\u600e\u6a23\u7684\u61c9\u5c0d\u65b9\u5f0f\uff1f\",\n      options: [\n        { text: \"\u8eba\u4e0b\u4f86\u88dd\u6b7b\", value: \"A\" },\n        { text: \"\u5446\u7acb\u4e0d\u52d5\", value: \"B\" },\n        { text: \"\u722c\u4e0a\u6700\u8fd1\u7684\u5927\u6a39\", value: \"C\" },\n        { text: \"\u62fc\u4e86\u547d\u5730\u8dd1\", value: \"D\" }\n      ]\n    }\n  ];\n\n  \/\/ \u7d50\u679c\u6578\u64da\n  const results = {\n    \"A\": {\n      title: \"\u50b3\u7d71\u89c0\u5ff5\",\n      description: \"\u50b3\u7d71\u6240\u4e3b\u5f35\u7684\u9580\u7576\u6236\u5c0d\u89c0\u5ff5\u7d66\u4f60\u9020\u6210\u4e86\u4e00\u5b9a\u7684\u5f71\u97ff\uff0c\u4f60\u8a8d\u70ba\u5982\u679c\u5169\u4eba\u7684\u751f\u9577\u74b0\u5883\u4e0d\u76f8\u540c\uff0c \u601d\u8003\u6a21\u5f0f\u548c\u751f\u6d3b\u7fd2\u6163\u4e5f\u5c31\u4e0d\u540c\uff0c\u5169\u4eba\u5c31\u6703\u96e3\u4ee5\u6e9d\u901a\u3002 \u7576\u4f60\u5011\u5b58\u5728\u751f\u6d3b\u74b0\u5883\u5dee\u7570\u6642\uff0c\u4f60\u7684\u6f5b\u610f\u8b58\u5c31\u8da8\u5411\u60b2\u89c0 \uff0c\u8001\u89ba\u5f97\u5169\u4eba\u4e0d\u76f8\u914d\uff0c \u5728\u4e00\u8d77\u6839\u672c\u6c92\u6709\u672a\u4f86\u53ef\u8a00\u3002\",\n      scores: {\n        \"\u50b3\u7d71\u89c0\u5ff5\": 82,\n        \"\u7f3a\u4e4f\u6bc5\u529b\": 45,\n        \"\u56ae\u5f80\u81ea\u7531\": 30,\n        \"\u81ea\u4fe1\u4e0d\u8db3\": 25\n      }\n    },\n    \"B\": {\n      title: \"\u7f3a\u4e4f\u6bc5\u529b\",\n      description: \"\u611f\u60c5\u4e00\u65e6\u5f9e\u71b1\u6200\u671f\u53bb\u5411\u7a69\u5b9a\u671f\uff0c\u4f60\u7684\u5167\u5fc3\u5c31\u6703\u6f38\u6f38\u5c0d\u611f\u60c5\u7522\u751f\u53ad\u5026\uff0c\u4e0d\u60f3\u518d\u8cbb\u529b\u53bb\u63a2\u7d22\u5c0d\u65b9\uff0c\u5c0d\u4e4b\u524d\u559c\u6b61\u505a\u7684\u4e8b\u60c5\uff0c\u4e5f\u5f9e\u71b1\u60c5\u5982\u706b\u8b8a\u6210\u4e86\u4f8b\u884c\u516c\u4e8b\uff0c\u60f3\u8981\u627e\u56de\u65b0\u9bae\u611f\uff0c \u537b\u53c8\u4e0d\u77e5\u8a72\u5982\u4f55\u6539\u8b8a\uff0c\u9019\u7a2e\u7121\u529b\u611f\uff0c\u5c07\u6210\u70ba\u4f60\u6700\u5927\u7684\u6200\u611b\u554f\u984c\u3002\",\n      scores: {\n        \"\u50b3\u7d71\u89c0\u5ff5\": 35,\n        \"\u7f3a\u4e4f\u6bc5\u529b\": 88,\n        \"\u56ae\u5f80\u81ea\u7531\": 40,\n        \"\u81ea\u4fe1\u4e0d\u8db3\": 30\n      }\n    },\n    \"C\": {\n      title: \"\u56ae\u5f80\u81ea\u7531\",\n      description: \"\u4f60\u64d4\u5fc3\u6200\u611b\u5f8c\uff0c\u6703\u6210\u70ba\u88ab\u63a7\u5236\u7684\u5f31\u52e2\u65b9\u3002\u8981\u662f\u5c0d\u65b9\u6d41\u9732\u51fa\u9738\u9053\u7684\u884c\u52d5\uff0c\u786c\u8981\u628a\u60f3\u6cd5\u5f37\u52a0\u5728\u4f60\u8eab\u4e0a\uff0c\u4f60\u5c31\u6703\u611f\u89ba\u4e0d\u8212\u670d\uff0c\u4f01\u5716\u8ff4\u907f\u5c0d\u65b9\uff0c\u9032\u800c\u5c31\u6703\u60f3\u7528\u5206\u624b\u4f86\u63db\u53d6\u4e0d\u88ab\u4ed6\u4eba\u5e72\u6d89\u7684\u81ea\u7531\u3002\",\n      scores: {\n        \"\u50b3\u7d71\u89c0\u5ff5\": 25,\n        \"\u7f3a\u4e4f\u6bc5\u529b\": 35,\n        \"\u56ae\u5f80\u81ea\u7531\": 90,\n        \"\u81ea\u4fe1\u4e0d\u8db3\": 40\n      }\n    },\n    \"D\": {\n      title: \"\u81ea\u4fe1\u4e0d\u8db3\",\n      description: \"\u4f60\u4fe1\u5fc3\u6b20\u7f3a\uff0c\u5728\u6200\u611b\u65b9\u9762\u5c24\u751a\uff0c\u5bb3\u6015\u6200\u4eba\u62cb\u68c4\u81ea\u5df1\uff0c\u6216\u88ab\u5acc\u68c4\u5b78\u6b77\u3001\u8eab\u4efd\u7b49\u689d\u4ef6\u914d\u4e0d\u4e0aTa\u7b49\u7b49\u3002\u9019\u4e9b\u4e0d\u5b89\u7684\u56e0\u7d20\uff0c\u53ef\u80fd\u6703\u8868\u73fe\u70ba\u63a7\u5236\u617e\uff0c\u70ba\u7684\u662f\u96b1\u85cf\u5167\u5fc3\u7684\u6050\u61fc\u3002\u751a\u81f3\u4f60\u6703\u70ba\u4e86\u907f\u514d\u88ab\u5206\u624b\uff0c\u800c\u9078\u64c7\u5148\u7529\u6389\u6200\u4eba\u3002\",\n      scores: {\n        \"\u50b3\u7d71\u89c0\u5ff5\": 30,\n        \"\u7f3a\u4e4f\u6bc5\u529b\": 35,\n        \"\u56ae\u5f80\u81ea\u7531\": 45,\n        \"\u81ea\u4fe1\u4e0d\u8db3\": 85\n      }\n    }\n  };\n\n  \/\/ DOM \u5143\u7d20\n  const introPage = document.getElementById('intro-page');\n  const quizPage = document.getElementById('quiz-page');\n  const resultsPage = document.getElementById('results-page');\n  const startButton = document.getElementById('start-test');\n  const questionContainer = document.getElementById('question-container');\n  const progressContainer = document.getElementById('progress-container');\n  const progressBar = document.getElementById('progress-bar');\n  const resultText = document.getElementById('result-text');\n  const restartButton = document.getElementById('restart-test');\n\n  \/\/ \u521d\u59cb\u5316\u8b8a\u91cf\n  let currentQuestion = 0;\n  let userAnswers = [];\n  let resultChart = null;\n\n  \/\/ \u4e8b\u4ef6\u76e3\u807d\u5668\n  startButton.addEventListener('click', startQuiz);\n  restartButton.addEventListener('click', restartQuiz);\n\n  \/\/ \u5982\u679c\u53ea\u6709\u4e00\u500b\u554f\u984c\uff0c\u96b1\u85cf\u9032\u5ea6\u689d\n  if (quizData.length === 1) {\n    progressContainer.style.display = 'none';\n  }\n\n  \/\/ \u958b\u59cb\u6e2c\u9a57\n  function startQuiz() {\n    introPage.classList.remove('active');\n    setTimeout(() => {\n      quizPage.classList.add('active');\n      loadQuestion(0);\n    }, 500);\n  }\n\n  \/\/ \u52a0\u8f09\u554f\u984c\n  function loadQuestion(index) {\n    questionContainer.innerHTML = '';\n    const question = quizData[index];\n\n    \/\/ \u5275\u5efa\u554f\u984c\u6a19\u984c\n    const questionTitle = document.createElement('h3');\n    questionTitle.textContent = question.question;\n    questionContainer.appendChild(questionTitle);\n\n    \/\/ \u5275\u5efa\u9078\u9805\u5bb9\u5668\n    const optionsContainer = document.createElement('div');\n    optionsContainer.className = 'options-container';\n\n    \/\/ \u6dfb\u52a0\u9078\u9805\n    question.options.forEach(option => {\n      const optionButton = document.createElement('button');\n      optionButton.className = 'option-button';\n      if (userAnswers[index] === option.value) {\n        optionButton.classList.add('selected');\n      }\n\n      \/\/ \u5275\u5efa\u9078\u9805\u5b57\u6bcd\u6a19\u8a18\n      const optionLetter = document.createElement('span');\n      optionLetter.className = 'option-letter';\n      optionLetter.textContent = option.value;\n      optionButton.appendChild(optionLetter);\n\n      \/\/ \u5275\u5efa\u9078\u9805\u6587\u672c\n      const optionText = document.createElement('span');\n      optionText.className = 'option-text';\n      optionText.textContent = option.text;\n      optionButton.appendChild(optionText);\n\n      \/\/ \u9078\u9805\u9ede\u64ca\u4e8b\u4ef6\n      optionButton.addEventListener('click', () => {\n        selectOption(index, option.value);\n      });\n\n      optionsContainer.appendChild(optionButton);\n    });\n\n    questionContainer.appendChild(optionsContainer);\n    updateProgressBar();\n  }\n\n  \/\/ \u9078\u64c7\u9078\u9805\n  function selectOption(questionIndex, optionValue) {\n    userAnswers[questionIndex] = optionValue;\n    \n    \/\/ \u66f4\u65b0\u9078\u9805\u6a23\u5f0f\n    const options = document.querySelectorAll('.option-button');\n    options.forEach(option => {\n      option.classList.remove('selected');\n      if (option.querySelector('.option-letter').textContent === optionValue) {\n        option.classList.add('selected');\n      }\n    });\n\n    \/\/ \u662f\u6700\u5f8c\u4e00\u500b\u554f\u984c\uff0c\u81ea\u52d5\u63d0\u4ea4\n    if (questionIndex === quizData.length - 1) {\n      setTimeout(() => {\n        showResults();\n      }, 800);\n    } else {\n      \/\/ \u5426\u5247\u986f\u793a\u4e0b\u4e00\u500b\u554f\u984c\n      setTimeout(() => {\n        currentQuestion++;\n        loadQuestion(currentQuestion);\n      }, 300);\n    }\n  }\n\n  \/\/ \u66f4\u65b0\u9032\u5ea6\u689d\n  function updateProgressBar() {\n    const progress = ((currentQuestion + 1) \/ quizData.length) * 100;\n    progressBar.style.width = `${progress}%`;\n  }\n\n  \/\/ \u986f\u793a\u7d50\u679c\n  function showResults() {\n    \/\/ \u7372\u53d6\u7d50\u679c\n    const userResult = userAnswers[0] || 'A'; \/\/ \u9ed8\u8a8d\u70baA\uff0c\u4ee5\u9632\u842c\u4e00\n    const result = results[userResult];\n\n    \/\/ \u96b1\u85cf\u6e2c\u9a57\u9801\u9762\uff0c\u986f\u793a\u7d50\u679c\u9801\u9762\n    quizPage.classList.remove('active');\n    setTimeout(() => {\n      resultsPage.classList.add('active');\n      \n      \/\/ \u8a2d\u7f6e\u7d50\u679c\u6587\u672c\n      resultText.innerHTML = `<h3>${result.title}<\/h3><p>${result.description}<\/p>`;\n      resultText.classList.add('animate-result');\n      \n      \/\/ \u5275\u5efa\u5716\u8868\n      setTimeout(() => {\n        createResultChart(result.scores);\n      }, 500);\n    }, 500);\n  }\n\n  \/\/ \u5275\u5efa\u7d50\u679c\u5716\u8868\n  function createResultChart(scores) {\n    const ctx = document.getElementById('result-chart').getContext('2d');\n    \n    \/\/ \u5982\u679c\u5df2\u6709\u5716\u8868\uff0c\u5148\u92b7\u6bc0\n    if (resultChart) {\n      resultChart.destroy();\n    }\n    \n    \/\/ \u6e96\u5099\u6578\u64da\n    const labels = Object.keys(scores);\n    const data = Object.values(scores);\n    const backgroundColor = 'rgba(99, 102, 241, 0.3)';\n    const borderColor = 'rgba(99, 102, 241, 1)';\n    \n    \/\/ \u5275\u5efa\u96f7\u9054\u5716\n    resultChart = new Chart(ctx, {\n      type: 'radar',\n      data: {\n        labels: labels,\n        datasets: [{\n          label: '\u500b\u6027\u5206\u6578',\n          data: data,\n          backgroundColor: backgroundColor,\n          borderColor: borderColor,\n          pointBackgroundColor: 'rgba(168, 85, 247, 1)',\n          pointBorderColor: '#fff',\n          pointHoverBackgroundColor: '#fff',\n          pointHoverBorderColor: 'rgba(168, 85, 247, 1)'\n        }]\n      },\n      options: {\n        responsive: true,\n        maintainAspectRatio: false,\n        plugins: {\n          legend: {\n            display: false\n          },\n          tooltip: {\n            backgroundColor: 'rgba(255, 255, 255, 0.9)',\n            titleColor: '#4338ca',\n            bodyColor: '#4b5563',\n            borderColor: '#e5e7eb',\n            borderWidth: 1,\n            padding: 10,\n            cornerRadius: 8,\n            titleFont: {\n              family: '\"Microsoft JhengHei\", \"\u5fae\u8edf\u6b63\u9ed1\u9ad4\", sans-serif',\n              weight: 'bold',\n              size: 14\n            },\n            bodyFont: {\n              family: '\"Microsoft JhengHei\", \"\u5fae\u8edf\u6b63\u9ed1\u9ad4\", sans-serif',\n              size: 14\n            },\n            callbacks: {\n              label: function(context) {\n                return context.raw + '%';\n              }\n            }\n          }\n        },\n        scales: {\n          r: {\n            angleLines: {\n              color: 'rgba(0, 0, 0, 0.1)'\n            },\n            grid: {\n              color: 'rgba(0, 0, 0, 0.05)'\n            },\n            suggestedMin: 0,\n            suggestedMax: 100,\n            ticks: {\n              stepSize: 20,\n              color: '#6b7280',\n              backdropColor: 'transparent',\n              font: {\n                size: 10\n              }\n            },\n            pointLabels: {\n              font: {\n                size: 14,\n                family: '\"Microsoft JhengHei\", \"\u5fae\u8edf\u6b63\u9ed1\u9ad4\", sans-serif',\n                weight: 'bold'\n              },\n              color: '#4b5563'\n            }\n          }\n        },\n        animation: {\n          duration: 1500,\n          easing: 'easeOutQuart'\n        }\n      }\n    });\n\n    \/\/ \u5275\u5efa\u8a73\u7d30\u7684\u689d\u5f62\u5716\u986f\u793a\u5404\u9805\u5206\u6578\n    setTimeout(() => {\n      const barChartContainer = document.createElement('div');\n      barChartContainer.className = 'chart-container animate-result';\n      barChartContainer.style.marginTop = '30px';\n      \n      const barCanvas = document.createElement('canvas');\n      barCanvas.id = 'bar-chart';\n      barChartContainer.appendChild(barCanvas);\n      \n      document.querySelector('.result-content').appendChild(barChartContainer);\n      \n      const barCtx = barCanvas.getContext('2d');\n      new Chart(barCtx, {\n        type: 'bar',\n        data: {\n          labels: labels,\n          datasets: [{\n            label: '\u767e\u5206\u6bd4',\n            data: data,\n            backgroundColor: [\n              'rgba(99, 102, 241, 0.7)',\n              'rgba(168, 85, 247, 0.7)',\n              'rgba(236, 72, 153, 0.7)',\n              'rgba(239, 68, 68, 0.7)'\n            ],\n            borderColor: [\n              'rgba(99, 102, 241, 1)',\n              'rgba(168, 85, 247, 1)',\n              'rgba(236, 72, 153, 1)',\n              'rgba(239, 68, 68, 1)'\n            ],\n            borderWidth: 1,\n            borderRadius: 6\n          }]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          indexAxis: 'y',\n          plugins: {\n            legend: {\n              display: false\n            },\n            tooltip: {\n              backgroundColor: 'rgba(255, 255, 255, 0.9)',\n              titleColor: '#4338ca',\n              bodyColor: '#4b5563',\n              borderColor: '#e5e7eb',\n              borderWidth: 1,\n              padding: 10,\n              cornerRadius: 8,\n              titleFont: {\n                family: '\"Microsoft JhengHei\", \"\u5fae\u8edf\u6b63\u9ed1\u9ad4\", sans-serif',\n                weight: 'bold',\n                size: 14\n              },\n              bodyFont: {\n                family: '\"Microsoft JhengHei\", \"\u5fae\u8edf\u6b63\u9ed1\u9ad4\", sans-serif',\n                size: 14\n              },\n              callbacks: {\n                label: function(context) {\n                  return context.raw + '%';\n                }\n              }\n            }\n          },\n          scales: {\n            x: {\n              beginAtZero: true,\n              max: 100,\n              grid: {\n                display: true,\n                color: 'rgba(0, 0, 0, 0.05)'\n              },\n              ticks: {\n                color: '#6b7280',\n                font: {\n                  family: '\"Microsoft JhengHei\", \"\u5fae\u8edf\u6b63\u9ed1\u9ad4\", sans-serif',\n                  size: 12\n                },\n                callback: function(value) {\n                  return value + '%';\n                }\n              }\n            },\n            y: {\n              grid: {\n                display: false\n              },\n              ticks: {\n                color: '#4b5563',\n                font: {\n                  family: '\"Microsoft JhengHei\", \"\u5fae\u8edf\u6b63\u9ed1\u9ad4\", sans-serif',\n                  size: 14,\n                  weight: 'bold'\n                }\n              }\n            }\n          },\n          animation: {\n            duration: 1500,\n            easing: 'easeOutQuart'\n          }\n        }\n      });\n    }, 800);\n  }\n\n  \/\/ \u91cd\u65b0\u958b\u59cb\u6e2c\u9a57\n  function restartQuiz() {\n    currentQuestion = 0;\n    userAnswers = [];\n    resultsPage.classList.remove('active');\n    \n    setTimeout(() => {\n      \/\/ \u91cd\u7f6e\u7d50\u679c\u5716\u8868\n      if (resultChart) {\n        resultChart.destroy();\n        resultChart = null;\n      }\n      \n      \/\/ \u79fb\u9664\u689d\u5f62\u5716\n      const barChartContainer = document.querySelector('.result-content .chart-container:not(:first-child)');\n      if (barChartContainer) {\n        barChartContainer.remove();\n      }\n      \n      introPage.classList.add('active');\n    }, 500);\n  }\n\n  \/\/ \u52a0\u8f09Chart.js\n  function loadChartJs(callback) {\n    if (window.Chart) {\n      callback();\n      return;\n    }\n\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.onload = callback;\n    document.head.appendChild(script);\n  }\n\n  \/\/ \u521d\u59cb\u5316\n  loadChartJs(function() {\n    console.log('Chart.js loaded successfully');\n  });\n});\n<\/script>","protected":false},"excerpt":{"rendered":"<p>1\u9053\u9898\u6d4b\u8bd5\uff0c\u7aa5\u63a2\u51fa\u4f60\u6700\u5927\u7684\u604b\u7231\u95ee\u9898\u662f\u4ec0\u4e48\uff01\u4f60\u6b63\u5728\u6237\u5916\u6e38\u4e50\uff0c\u84dd\u5929\u767d\u4e91\uff0c\u4f60\u7684\u5fc3\u60c5\u5927\u597d\uff0c\u6ca1\u60f3\u5230\u7a81\u7136\u9047\u5230\u4e00\u53ea\u731b\u517d\uff0c\u4f60\u4f1a\u91c7\u53d6\u600e\u6837\u7684\u5e94\u5bf9\u65b9\u5f0f\uff1f<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","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":"default","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":[246,178],"tags":[248,247],"class_list":["post-8999","post","type-post","status-publish","format-standard","hentry","category-fun-test","category-love","tag-love","tag-romance"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/8999","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/comments?post=8999"}],"version-history":[{"count":5,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/8999\/revisions"}],"predecessor-version":[{"id":9638,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/8999\/revisions\/9638"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=8999"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=8999"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=8999"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}