{"id":2471,"date":"2023-10-17T09:45:04","date_gmt":"2023-10-17T01:45:04","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2471"},"modified":"2025-08-17T03:13:01","modified_gmt":"2025-08-16T19:13:01","slug":"win-in-love","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/win-in-love","title":{"rendered":"\u5c0f\u6d4b\u9a8c\uff1a\u9762\u5bf9\u7231\u60c5\u7ade\u4e89\u65f6\u4f60\u80fd\u83b7\u80dc\u5417\uff1f"},"content":{"rendered":"<!-- \u5f15\u5165Bootstrap\u548cBootstrap Icons -->\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<!-- \u611b\u60c5\u7af6\u722d\u529b\u6e2c\u9a57 HTML\u7d50\u69cb -->\n<div id=\"loveCompetitionQuiz\" class=\"container-fluid px-3 px-md-4\" style=\"max-width: 750px; margin: 0 auto;\">\n  \n  <!-- \u5f15\u5c0e\u9801 -->\n  <section id=\"quizintro9\" data-page=\"intro9\" class=\"quiz-page active\">\n    <div class=\"row justify-content-center\">\n      <div class=\"col-12\">\n        <div class=\"text-center mb-5\">\n          <h2 class=\"display-5 fw-bold mb-3\" style=\"color: #7C4DFF;\">\n            <i class=\"bi bi-heart-pulse-fill me-2\"><\/i>\n            \u9762\u5c0d\u611b\u60c5\u7af6\u722d\u6642\u4f60\u80fd\u7372\u52dd\u55ce\uff1f\n          <\/h2>\n          <p class=\"lead text-muted\">\u63a2\u7d22\u4f60\u5728\u611b\u60c5\u4e2d\u7684\u7af6\u722d\u512a\u52e2<\/p>\n        <\/div>\n        \n        <div class=\"row g-4 mb-5\">\n          <div class=\"col-6 col-md-3\">\n            <div class=\"text-center\">\n              <div class=\"rounded-circle d-inline-flex align-items-center justify-content-center shadow-sm\" \n                   style=\"width: 80px; height: 80px; background: linear-gradient(135deg, #E8D8FF 0%, #D4BAFF 100%);\">\n                <i class=\"bi bi-lightning-charge-fill fs-2\" style=\"color: #7C4DFF;\"><\/i>\n              <\/div>\n              <p class=\"mt-3 fw-semibold\">\u5feb\u901f\u51c6\u786e<\/p>\n            <\/div>\n          <\/div>\n          <div class=\"col-6 col-md-3\">\n            <div class=\"text-center\">\n              <div class=\"rounded-circle d-inline-flex align-items-center justify-content-center shadow-sm\" \n                   style=\"width: 80px; height: 80px; background: linear-gradient(135deg, #FFE4E1 0%, #FFD1DC 100%);\">\n                <i class=\"bi bi-bullseye fs-2\" style=\"color: #9C6B98;\"><\/i>\n              <\/div>\n              <p class=\"mt-3 fw-semibold\">\u6df1\u5ea6\u89e3\u6790<\/p>\n            <\/div>\n          <\/div>\n          <div class=\"col-6 col-md-3\">\n            <div class=\"text-center\">\n              <div class=\"rounded-circle d-inline-flex align-items-center justify-content-center shadow-sm\" \n                   style=\"width: 80px; height: 80px; background: linear-gradient(135deg, #E1F5FE 0%, #B3E5FC 100%);\">\n                <i class=\"bi bi-graph-up-arrow fs-2\" style=\"color: #5E92F3;\"><\/i>\n              <\/div>\n              <p class=\"mt-3 fw-semibold\">\u4e2a\u4eba\u6210\u957f<\/p>\n            <\/div>\n          <\/div>\n          <div class=\"col-6 col-md-3\">\n            <div class=\"text-center\">\n              <div class=\"rounded-circle d-inline-flex align-items-center justify-content-center shadow-sm\" \n                   style=\"width: 80px; height: 80px; background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);\">\n                <i class=\"bi bi-shield-check fs-2\" style=\"color: #66BB6A;\"><\/i>\n              <\/div>\n              <p class=\"mt-3 fw-semibold\">\u5c08\u696d\u53ef\u9760<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n        \n        <div class=\"card border-0 shadow-sm mb-5\">\n          <div class=\"card-body p-4\" style=\"background: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 100%); border-radius: 0.375rem;\">\n            <p class=\"mb-0 fs-5\">\n              <i class=\"bi bi-quote me-2\" style=\"color: #7C4DFF;\"><\/i>\n              \u6bcf\u500b\u4eba\u7684\u4e00\u751f\u90fd\u8655\u65bc\u5404\u7a2e\u5404\u6a23\u7684\u7af6\u722d\u4e2d\uff0c\u611b\u60c5\u7af6\u722d\u662f\u5176\u4e2d\u6700\u8003\u9a57\u667a\u6167\u8207\u60c5\u5546\u7684\u6311\u6230\u3002\u900f\u904e\u9019\u500b\u7c21\u55ae\u7684\u5fc3\u7406\u6e2c\u9a57\uff0c\u4e86\u89e3\u4f60\u5728\u611b\u60c5\u7af6\u722d\u4e2d\u7684\u512a\u52e2\u8207\u6f5b\u529b\uff0c\u627e\u5230\u5c6c\u65bc\u81ea\u5df1\u7684\u7372\u52dd\u4e4b\u9053\u3002\n            <\/p>\n          <\/div>\n        <\/div>\n        \n        <div class=\"text-center\">\n          <button class=\"btn btn-lg px-5 py-3 shadow\" data-action=\"start-quiz\"\n                  style=\"background: linear-gradient(135deg, #7C4DFF 0%, #9C6B98 100%);                          color: white; border: none; border-radius: 50px; font-size: 20px;\">\n            <i class=\"bi bi-play-circle-fill me-2\"><\/i>\n            \u5f00\u59cb\u6d4b\u9a8c\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n  \n  <!-- \u6e2c\u9a57\u9801 -->\n  <section id=\"quizmain9\" data-page=\"quiz9\" class=\"quiz-page\" style=\"display: none;\">\n    <div class=\"row justify-content-center\">\n      <div class=\"col-12\">\n        <h2 class=\"text-center mb-5 fw-bold\" style=\"color: #7C4DFF;\">\u611b\u60c5\u7af6\u722d\u529b\u6e2c\u9a57<\/h2>\n        \n        <div class=\"mb-5\">\n          <h3 class=\"mb-4 fw-bold\" style=\"font-size: 22px; color: #333;\">\n            \u8bf7\u4ece\u4e0b\u9762\u56db\u79cd\u7cd6\u679c\u4e2d\u9009\u4e00\u79cd\u6765\u9001\u7ed9\u540c\u4e8b\uff0c\u4f60\u4f1a\u9009\uff1a\n          <\/h3>\n          \n          <div class=\"d-grid gap-3\" data-question=\"1\">\n            <button class=\"quiz-option card border-0 shadow-sm text-start\" data-answer=\"A\" \n                    style=\"background: white; transition: all 0.3s ease;\">\n              <div class=\"card-body p-3\">\n                <div class=\"d-flex align-items-center\">\n                  <div class=\"option-indicator rounded-circle border border-2 me-3 flex-shrink-0 d-flex align-items-center justify-content-center\"\n                       style=\"width: 36px; height: 36px; border-color: #B39DDB;\">\n                    <i class=\"bi bi-check-lg fw-bold\" style=\"display: none; color: white; font-size: 18px;\"><\/i>\n                  <\/div>\n                  <span class=\"option-text\" style=\"font-size: 18px; color: #424242; line-height: 36px;\">\u9152\u5fc3\u5de7\u514b\u529b<\/span>\n                <\/div>\n              <\/div>\n            <\/button>\n            \n            <button class=\"quiz-option card border-0 shadow-sm text-start\" data-answer=\"B\"\n                    style=\"background: white; transition: all 0.3s ease;\">\n              <div class=\"card-body p-3\">\n                <div class=\"d-flex align-items-center\">\n                  <div class=\"option-indicator rounded-circle border border-2 me-3 flex-shrink-0 d-flex align-items-center justify-content-center\"\n                       style=\"width: 36px; height: 36px; border-color: #B39DDB;\">\n                    <i class=\"bi bi-check-lg fw-bold\" style=\"display: none; color: white; font-size: 18px;\"><\/i>\n                  <\/div>\n                  <span class=\"option-text\" style=\"font-size: 18px; color: #424242; line-height: 36px;\">\u6c34\u679c\u786c\u7cd6<\/span>\n                <\/div>\n              <\/div>\n            <\/button>\n            \n            <button class=\"quiz-option card border-0 shadow-sm text-start\" data-answer=\"C\"\n                    style=\"background: white; transition: all 0.3s ease;\">\n              <div class=\"card-body p-3\">\n                <div class=\"d-flex align-items-center\">\n                  <div class=\"option-indicator rounded-circle border border-2 me-3 flex-shrink-0 d-flex align-items-center justify-content-center\"\n                       style=\"width: 36px; height: 36px; border-color: #B39DDB;\">\n                    <i class=\"bi bi-check-lg fw-bold\" style=\"display: none; color: white; font-size: 18px;\"><\/i>\n                  <\/div>\n                  <span class=\"option-text\" style=\"font-size: 18px; color: #424242; line-height: 36px;\">\u9165\u5fc3\u7cd6<\/span>\n                <\/div>\n              <\/div>\n            <\/button>\n            \n            <button class=\"quiz-option card border-0 shadow-sm text-start\" data-answer=\"D\"\n                    style=\"background: white; transition: all 0.3s ease;\">\n              <div class=\"card-body p-3\">\n                <div class=\"d-flex align-items-center\">\n                  <div class=\"option-indicator rounded-circle border border-2 me-3 flex-shrink-0 d-flex align-items-center justify-content-center\"\n                       style=\"width: 36px; height: 36px; border-color: #B39DDB;\">\n                    <i class=\"bi bi-check-lg fw-bold\" style=\"display: none; color: white; font-size: 18px;\"><\/i>\n                  <\/div>\n                  <span class=\"option-text\" style=\"font-size: 18px; color: #424242; line-height: 36px;\">\u8591\u7cd6<\/span>\n                <\/div>\n              <\/div>\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=\"quiz-page\" style=\"display: none;\">\n    <div class=\"row justify-content-center\">\n      <div class=\"col-12\">\n        <h2 class=\"text-center mb-5 fw-bold\" style=\"color: #7C4DFF;\">\n          <i class=\"bi bi-award-fill me-2\"><\/i>\n          \u4f60\u7684\u611b\u60c5\u7af6\u722d\u529b\u5206\u6790\n        <\/h2>\n        \n        <div class=\"card border-0 shadow-sm mb-4\">\n          <div class=\"card-body p-4\" style=\"background: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 100%); border-radius: 0.375rem;\">\n            <h4 class=\"mb-3 fw-bold\" id=\"resultTitle\" style=\"color: #7C4DFF;\"><\/h4>\n            <p class=\"mb-0 fs-5\" id=\"resultDescription\" style=\"color: #424242;\"><\/p>\n          <\/div>\n        <\/div>\n        \n        <div class=\"row g-4 mb-5\">\n          <div class=\"col-12 col-md-6\">\n            <div class=\"card border-0 shadow-sm h-100\">\n              <div class=\"card-body p-4\">\n                <h5 class=\"mb-3 fw-bold\" style=\"color: #7C4DFF;\">\n                  <i class=\"bi bi-graph-up me-2\"><\/i>\n                  \u80fd\u529b\u96f7\u9054\u5716\n                <\/h5>\n                <div class=\"d-flex justify-content-center\">\n                  <canvas id=\"radarChart\" style=\"max-width: 300px; max-height: 300px;\"><\/canvas>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n          \n          <div class=\"col-12 col-md-6\">\n            <div class=\"card border-0 shadow-sm h-100\">\n              <div class=\"card-body p-4\">\n                <h5 class=\"mb-3 fw-bold\" style=\"color: #7C4DFF;\">\n                  <i class=\"bi bi-lightbulb me-2\"><\/i>\n                  \u6210\u9577\u5efa\u8b70\n                <\/h5>\n                <div id=\"growthAdvice\"><\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n        \n        <div class=\"text-center\">\n          <button class=\"btn btn-lg px-5 py-3 shadow\" data-action=\"restart-quiz\"\n                  style=\"background: linear-gradient(135deg, #7C4DFF 0%, #9C6B98 100%);                          color: white; border: none; border-radius: 50px; font-size: 18px;\">\n            <i class=\"bi bi-arrow-clockwise me-2\"><\/i>\n            \u91cd\u65b0\u6d4b\u8bd5\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n  \n<\/div>\n\n<!-- CSS\u6a23\u5f0f -->\n<style>\n  #loveCompetitionQuiz {\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n    min-height: 100vh;\n    padding: 2rem 0;\n  }\n  \n  #loveCompetitionQuiz * {\n    box-sizing: border-box;\n  }\n  \n  #loveCompetitionQuiz .quiz-page {\n    opacity: 0;\n    transition: opacity 0.3s ease-in-out;\n  }\n  \n  #loveCompetitionQuiz .quiz-page.active {\n    opacity: 1;\n  }\n  \n  #loveCompetitionQuiz .quiz-option {\n    cursor: pointer;\n    border: 2px solid transparent !important;\n  }\n  \n  #loveCompetitionQuiz .quiz-option:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 6px 20px rgba(124, 77, 255, 0.15) !important;\n    background: linear-gradient(135deg, #F3E5F5 0%, #EDE7F6 100%) !important;\n  }\n  \n  #loveCompetitionQuiz .quiz-option:hover .option-indicator {\n    border-color: #7C4DFF !important;\n  }\n  \n  #loveCompetitionQuiz .quiz-option.selected {\n    background: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 100%) !important;\n    border: 2px solid #7C4DFF !important;\n  }\n  \n  #loveCompetitionQuiz .quiz-option.selected .option-indicator {\n    background: linear-gradient(135deg, #7C4DFF 0%, #9C6B98 100%);\n    border-color: #7C4DFF !important;\n  }\n  \n  #loveCompetitionQuiz .quiz-option.selected .option-indicator i {\n    display: block !important;\n  }\n  \n  #loveCompetitionQuiz button[data-action]:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 8px 20px rgba(124, 77, 255, 0.25) !important;\n  }\n  \n  \/* \u78ba\u4fdd\u9078\u9805\u6587\u5b57\u4e0d\u6703\u63db\u884c *\/\n  #loveCompetitionQuiz .option-text {\n    white-space: nowrap;\n  }\n  \n  \/* \u79fb\u52d5\u7aef\u512a\u5316 *\/\n  @media (max-width: 768px) {\n    #loveCompetitionQuiz .display-5 {\n      font-size: 1.8rem;\n    }\n    \n    #loveCompetitionQuiz .lead {\n      font-size: 1.1rem;\n    }\n    \n    #loveCompetitionQuiz .option-text {\n      white-space: normal;\n    }\n  }\n  \n  \/* \u9632\u6b62\u8207WordPress\u4e3b\u984c\u885d\u7a81 *\/\n  #loveCompetitionQuiz .card {\n    background-color: white;\n  }\n  \n  #loveCompetitionQuiz button {\n    font-family: inherit;\n  }\n  \n  #loveCompetitionQuiz h2,\n  #loveCompetitionQuiz h3,\n  #loveCompetitionQuiz h4,\n  #loveCompetitionQuiz h5 {\n    margin-top: 0;\n  }\n<\/style>\n\n<!-- JavaScript\u884c\u70ba -->\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 LoveCompetitionQuiz {\n    constructor() {\n      this.currentAnswer = null;\n      this.chartInstance = null;\n      \n      \/\/ \u5feb\u53d6DOM\u5143\u7d20\n      this.container = document.getElementById('loveCompetitionQuiz');\n      this.introPage = document.getElementById('quizintro9');\n      this.quizPage = document.getElementById('quizmain9');\n      this.resultPage = document.getElementById('quizresult9');\n      \n      \/\/ \u7d50\u679c\u8cc7\u6599\n      this.results = {\n        A: {\n          title: '\u9738\u9053\u578b\u7af6\u722d\u8005',\n          description: '\u5728\u611b\u60c5\u4e2d\uff0c\u4f60\u6709\u4e9b\u9738\u9053\uff0c\u81ea\u5df1\u652f\u6301\u7687\u99ac\uff0c\u5c31\u4e0d\u5141\u8a31\u4f34\u4fb6\u652f\u6301\u5df4\u85a9\u3002\u4e00\u65e6\u5404\u81ea\u5728\u5c0d\u5f85\u67d0\u4ef6\u4e8b\u7269\u7684\u89c0\u9ede\u4e0d\u4e00\u81f4\u6642\uff0c\u5bb6\u5ead\u5927\u6230\u4e5f\u5c31\u96a8\u4e4b\u7206\u767c\u3002\u4f60\u8a72\u8b93\u5bb6\u5ead\u6c1b\u570d\u66f4\u6c11\u4e3b\u4e00\u4e9b\uff0c\u5141\u8a31\u4e0d\u540c\u7684\u8072\u97f3\u5b58\u5728\uff0c\u751f\u6d3b\u4e0d\u662f\u66f4\u7cbe\u5f69\u3001\u795e\u79d8\u4e00\u4e9b\u55ce\uff1f\u5f88\u591a\u554f\u984c\u4e26\u6c92\u6709\u90a3\u9ebc\u96e3\u4ee5\u8abf\u548c\uff0c\u770b\u4f3c\u5c0d\u7acb\u7684\u4e8b\u60c5\u5176\u5be6\u4e5f\u53ef\u4ee5\u4e92\u76f8\u4f9d\u5b58\u3001\u7af6\u722d\u3001\u9032\u6b65\u3002\u548c\u611b\u4eba\u7af6\u722d\uff0c\u4f60\u5012\u662f\u8d0f\u4e86\uff0c\u4f46\u9019\u7a2e\u52dd\u5229\u771f\u7684\u6709\u610f\u7fa9\u55ce\uff1f',\n          scores: [85, 60, 45, 40, 75],\n          advice: [\n            '\u5b78\u7fd2\u50be\u807d\u5c0d\u65b9\u7684\u60f3\u6cd5\uff0c\u7406\u89e3\u5dee\u7570\u4e5f\u662f\u4e00\u7a2e\u7f8e',\n            '\u5617\u8a66\u5f9e\u4f34\u4fb6\u7684\u89d2\u5ea6\u770b\u554f\u984c\uff0c\u57f9\u990a\u540c\u7406\u5fc3',\n            '\u5c07\u7af6\u722d\u8f49\u5316\u70ba\u5171\u540c\u6210\u9577\u7684\u52d5\u529b'\n          ]\n        },\n        B: {\n          title: '\u679c\u65b7\u578b\u7af6\u722d\u8005',\n          description: '\u4e00\u5411\u679c\u65b7\u660e\u5feb\u7684\u4f60\uff0c\u505a\u4e8b\u4e0d\u611b\u62d6\u62d6\u62c9\u62c9\u3002\u5982\u679c\u767c\u751f\u4e09\u89d2\u554f\u984c\uff0c\u4f60\u6703\u6e4a\u9f4a\u4e09\u500b\u4eba\uff0c\u7576\u9762\u8ac7\u6e05\u695a\u5f7c\u6b64\u7684\u611f\u89ba\u3002\u4e0d\u8ad6\u7d50\u679c\u5982\u4f55\uff0c\u5373\u4f7f\u662f\u5931\u6200\u60b2\u50b7\uff0c\u4f60\u4e5f\u80fd\u5f88\u5feb\u6062\u5fa9\uff0c\u671d\u4e0b\u500b\u76ee\u6a19\u524d\u9032\u3002\u4f60\u4e0d\u9700\u8981\u8d0f\u6216\u8f38\uff0c\u5982\u679c\u5c6c\u65bc\u4f60\u7684\u611f\u60c5\u88ab\u5225\u4eba\u6436\u8d70\uff0c\u4e0d\u89ba\u5f97\u81ea\u5df1\u5c31\u8f38\u4e86\uff0c\u4f60\u53ea\u60f3\u8b93\u81ea\u5df1\u7372\u5f97\u5e78\u798f\u3002\u5982\u679c\u67d0\u4eba\u4e0d\u80fd\u7d66\u4f60\u5e78\u798f\uff0c\u4f60\u6703\u81ea\u5df1\u53bb\u5c0b\u627e\u3002',\n          scores: [70, 95, 75, 80, 85],\n          advice: [\n            '\u4fdd\u6301\u4f60\u7684\u679c\u65b7\u7279\u8cea\uff0c\u9019\u662f\u4f60\u7684\u512a\u52e2',\n            '\u9069\u6642\u7d66\u611f\u60c5\u4e00\u4e9b\u7de9\u885d\u6642\u9593\uff0c\u4e0d\u8981\u592a\u5feb\u4e0b\u6c7a\u5b9a',\n            '\u73cd\u60dc\u7576\u4e0b\u7684\u611f\u60c5\uff0c\u7528\u5fc3\u7d93\u71df'\n          ]\n        },\n        C: {\n          title: '\u516c\u5e73\u578b\u7af6\u722d\u8005',\n          description: '\u4f60\u5f88\u5927\u65b9\uff0c\u4f46\u9084\u6c92\u5927\u65b9\u5230\u6c92\u539f\u5247\u3002\u8655\u4e8b\u5f85\u4eba\u4e00\u5411\u660e\u6717\u7684\u4f60\uff0c\u4e0d\u559c\u6b61\u6697\u5730\u88e1\u4f86\u53bb\uff0c\u4e7e\u8106\u516c\u5e73\u7af6\u722d\u3001\u541b\u5b50\u4e4b\u722d\u3002\u5373\u4f7f\u8f38\u4e86\u81f3\u5c11\u7559\u4f4f\u53cb\u8abc\uff0c\u5927\u5bb6\u5fc3\u670d\u53e3\u670d\u3002\u56e0\u70ba\u4f60\u8868\u73fe\u8d8a\u662f\u5766\u8569\uff0c\u8d8a\u662f\u5bb9\u6613\u5728\u7af6\u722d\u4e2d\u7372\u52dd\u3002\u671f\u5f85\u901a\u904e\u516c\u5e73\u7684\u7af6\u722d\u6cd5\u8d0f\u5f97\u81ea\u5df1\u6240\u611b\u7684\u4eba\uff0c\u8b49\u660e\u4f60\u5167\u5fc3\u662f\u6709\u4fe1\u5fc3\u548c\u5be6\u529b\u8d0f\u904e\u5c0d\u65b9\u3002',\n          scores: [80, 85, 95, 85, 90],\n          advice: [\n            '\u7e7c\u7e8c\u4fdd\u6301\u4f60\u7684\u5766\u8569\u4f5c\u98a8\uff0c\u9019\u8b93\u4f60\u66f4\u6709\u9b45\u529b',\n            '\u5728\u611f\u60c5\u4e2d\u4e5f\u8981\u61c2\u5f97\u9069\u5ea6\u722d\u53d6\uff0c\u4e0d\u8981\u592a\u904e\u88ab\u52d5',\n            '\u516c\u5e73\u7af6\u722d\u7684\u540c\u6642\uff0c\u4e5f\u8981\u52c7\u65bc\u8868\u9054\u81ea\u5df1\u7684\u611f\u53d7'\n          ]\n        },\n        D: {\n          title: '\u81ea\u6211\u578b\u7af6\u722d\u8005',\n          description: '\u5f88\u5bb9\u6613\u6d3b\u5728\u81ea\u5df1\u7684\u4e16\u754c\u88e1\uff0c\u5225\u4eba\u7684\u8a71\u4f60\u807d\u4e0d\u898b\uff0c\u4f60\u53ea\u807d\u898b\u4f60\u81ea\u5df1\u3002\u4f60\u8981\u600e\u9ebc\u505a\u5c31\u600e\u9ebc\u505a\uff0c\u5176\u5be6\u4f60\u61c9\u8a72\u5b78\u7fd2\u8207\u5225\u4eba\u76f8\u8655\u7684\u6280\u5de7\uff0c\u624d\u6703\u5f97\u5230\u5225\u4eba\u7684\u559c\u611b\u548c\u8a8d\u540c\u3002\u4f60\u6709\u6642\u5019\u8b1b\u8a71\u592a\u904e\u76f4\u63a5\uff0c\u5c31\u5f88\u5bb9\u6613\u50b7\u5230\u5225\u4eba\uff0c\u6bd4\u8f03\u4e0d\u5c0a\u91cd\u5230\u5225\u4eba\u3002\u5225\u4eba\u8ddf\u4f60\u76f8\u8655\u5728\u4e00\u8d77\u5c31\u6703\u89ba\u5f97\u6bd4\u8f03\u6c92\u6709\u90a3\u9ebc\u591a\u7684\u6a02\u8da3\uff0c\u53c8\u600e\u80fd\u8d0f\u5f97\u7af6\u722d\u7684\u52dd\u5229\u5462\uff1f',\n          scores: [55, 50, 60, 45, 60],\n          advice: [\n            '\u591a\u50be\u807d\u4ed6\u4eba\u7684\u60f3\u6cd5\uff0c\u57f9\u990a\u540c\u7406\u5fc3',\n            '\u5b78\u7fd2\u6e9d\u901a\u6280\u5de7\uff0c\u7528\u6eab\u548c\u7684\u65b9\u5f0f\u8868\u9054\u89c0\u9ede',\n            '\u5617\u8a66\u7ad9\u5728\u5c0d\u65b9\u89d2\u5ea6\u601d\u8003\uff0c\u589e\u9032\u76f8\u4e92\u7406\u89e3'\n          ]\n        }\n      };\n      \n      this.init();\n    }\n    \n    init() {\n      this.bindEvents();\n    }\n    \n    bindEvents() {\n      \/\/ \u4f7f\u7528\u4e8b\u4ef6\u59d4\u8a17\n      this.container.addEventListener('click', (e) => {\n        const target = e.target.closest('[data-action], .quiz-option');\n        if (!target) return;\n        \n        if (target.dataset.action === 'start-quiz') {\n          this.startQuiz();\n        } else if (target.dataset.action === 'restart-quiz') {\n          this.restartQuiz();\n        } else if (target.classList.contains('quiz-option')) {\n          this.selectOption(target);\n        }\n      });\n    }\n    \n    startQuiz() {\n      this.showPage('quiz');\n      this.scrollToTop();\n    }\n    \n    selectOption(option) {\n      \/\/ \u79fb\u9664\u6240\u6709\u9078\u4e2d\u72c0\u614b\n      const options = this.quizPage.querySelectorAll('.quiz-option');\n      options.forEach(opt => opt.classList.remove('selected'));\n      \n      \/\/ \u6dfb\u52a0\u9078\u4e2d\u72c0\u614b\n      option.classList.add('selected');\n      this.currentAnswer = option.dataset.answer;\n      \n      \/\/ \u5ef6\u9072\u986f\u793a\u7d50\u679c\n      setTimeout(() => {\n        this.showResult();\n      }, 500);\n    }\n    \n    showResult() {\n      const result = this.results[this.currentAnswer];\n      \n      \/\/ \u66f4\u65b0\u7d50\u679c\u5167\u5bb9\n      document.getElementById('resultTitle').textContent = result.title;\n      document.getElementById('resultDescription').textContent = result.description;\n      \n      \/\/ \u751f\u6210\u5efa\u8b70\u5217\u8868\n      const adviceHtml = result.advice.map(advice => \n        `<div class=\"d-flex align-items-start mb-2\">\n          <i class=\"bi bi-check-circle-fill me-2 mt-1\" style=\"color: #66BB6A;\"><\/i>\n          <span>${advice}<\/span>\n        <\/div>`\n      ).join('');\n      document.getElementById('growthAdvice').innerHTML = adviceHtml;\n      \n      \/\/ \u986f\u793a\u7d50\u679c\u9801\n      this.showPage('result');\n      this.scrollToTop();\n      \n      \/\/ \u5ef6\u9072\u7e6a\u88fd\u5716\u8868\uff0c\u78ba\u4fdd\u9801\u9762\u5df2\u986f\u793a\n      setTimeout(() => {\n        this.drawRadarChart(result.scores);\n      }, 300);\n    }\n    \n    drawRadarChart(scores) {\n      \/\/ \u92b7\u6bc0\u820a\u5716\u8868\n      if (this.chartInstance) {\n        this.chartInstance.destroy();\n      }\n      \n      const ctx = document.getElementById('radarChart').getContext('2d');\n      \n      this.chartInstance = new Chart(ctx, {\n        type: 'radar',\n        data: {\n          labels: ['\u81ea\u4fe1\u5ea6', '\u679c\u65b7\u529b', '\u516c\u5e73\u6027', '\u6e9d\u901a\u529b', '\u7af6\u722d\u529b'],\n          datasets: [{\n            label: '\u4f60\u7684\u80fd\u529b\u503c',\n            data: scores,\n            backgroundColor: 'rgba(124, 77, 255, 0.2)',\n            borderColor: 'rgba(124, 77, 255, 1)',\n            borderWidth: 2,\n            pointBackgroundColor: 'rgba(124, 77, 255, 1)',\n            pointBorderColor: '#fff',\n            pointHoverBackgroundColor: '#fff',\n            pointHoverBorderColor: 'rgba(124, 77, 255, 1)',\n            pointRadius: 5,\n            pointHoverRadius: 7\n          }]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: true,\n          plugins: {\n            legend: {\n              display: false\n            },\n            tooltip: {\n              callbacks: {\n                label: function(context) {\n                  return context.parsed.r + '%';\n                }\n              }\n            }\n          },\n          scales: {\n            r: {\n              beginAtZero: true,\n              max: 100,\n              ticks: {\n                stepSize: 20,\n                font: {\n                  size: 14\n                },\n                callback: function(value) {\n                  return value + '%';\n                }\n              },\n              pointLabels: {\n                font: {\n                  size: 18,\n                  weight: 'bold'\n                },\n                color: '#7C4DFF'\n              },\n              grid: {\n                color: 'rgba(124, 77, 255, 0.1)'\n              }\n            }\n          }\n        }\n      });\n    }\n    \n    restartQuiz() {\n      \/\/ \u91cd\u7f6e\u72c0\u614b\n      this.currentAnswer = null;\n      \n      \/\/ \u6e05\u9664\u9078\u4e2d\u72c0\u614b\n      const options = this.quizPage.querySelectorAll('.quiz-option');\n      options.forEach(opt => opt.classList.remove('selected'));\n      \n      \/\/ \u92b7\u6bc0\u5716\u8868\n      if (this.chartInstance) {\n        this.chartInstance.destroy();\n        this.chartInstance = null;\n      }\n      \n      \/\/ \u986f\u793a\u5f15\u5c0e\u9801\n      this.showPage('intro');\n      this.scrollToTop();\n    }\n    \n    showPage(page) {\n      \/\/ \u96b1\u85cf\u6240\u6709\u9801\u9762\n      const pages = this.container.querySelectorAll('.quiz-page');\n      pages.forEach(p => {\n        p.style.display = 'none';\n        p.classList.remove('active');\n      });\n      \n      \/\/ \u986f\u793a\u76ee\u6a19\u9801\u9762\n      let targetPage;\n      switch(page) {\n        case 'intro':\n          targetPage = this.introPage;\n          break;\n        case 'quiz':\n          targetPage = this.quizPage;\n          break;\n        case 'result':\n          targetPage = this.resultPage;\n          break;\n      }\n      \n      if (targetPage) {\n        targetPage.style.display = 'block';\n        \/\/ \u5f37\u5236\u91cd\u7e6a\n        targetPage.offsetHeight;\n        targetPage.classList.add('active');\n      }\n    }\n    \n    scrollToTop() {\n      const quizTop = this.container.getBoundingClientRect().top + window.pageYOffset - 100;\n      window.scrollTo({\n        top: quizTop,\n        behavior: 'smooth'\n      });\n    }\n  }\n  \n  \/\/ \u78ba\u4fddDOM\u8f09\u5165\u5b8c\u6210\u5f8c\u521d\u59cb\u5316\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', () => {\n      new LoveCompetitionQuiz();\n    });\n  } else {\n    new LoveCompetitionQuiz();\n  }\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u6700\u5bb9\u6613\u9047\u4e0a\u7684\u7ade\u4e89\u5c31\u662f\u7231\u60c5\u7ade\u4e89\u548c\u91d1\u94b1\u7ade\u4e89\uff0c\u7231\u60c5\u7ade\u4e89\u662f\u6b8b\u9177\u7684\uff0c\u6bd4\u5546\u573a\u7684\u91d1\u94b1\u7ade\u4e89\u597d\u4e0d\u4e86\u591a\u5c11\uff0c\u5f53\u4f60\u9700\u8981\u9762\u5bf9\u7231\u60c5\u7ade\u4e89\u7684\u65f6\u5019\uff0c\u4f60\u80fd\u5426\u83b7\u80dc\u5462\uff1f<\/p>","protected":false},"author":19,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"narrow-width-container","site-content-style":"unboxed","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","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],"tags":[],"class_list":["post-2471","post","type-post","status-publish","format-standard","hentry","category-love"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2471","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=2471"}],"version-history":[{"count":1,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2471\/revisions"}],"predecessor-version":[{"id":10537,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2471\/revisions\/10537"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2471"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2471"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}