{"id":2360,"date":"2023-10-07T09:14:06","date_gmt":"2023-10-07T01:14:06","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2360"},"modified":"2025-08-10T02:08:59","modified_gmt":"2025-08-09T18:08:59","slug":"fate-be-sought","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/fate-be-sought","title":{"rendered":"\u4f60\u7684\u7f18\u5206\u80fd\u6c42\u6765\u5417\uff1f\u7ebf\u4e0a\u514d\u8d39\u5c0f\u6d4b\u9a8c"},"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<!-- \u6e2c\u9a57\u5bb9\u5668 - \u9069\u914dWordPress 750px\u5bec\u5ea6 -->\n<div id=\"fate-quiz-container\" class=\"container-fluid px-0\" style=\"max-width: 750px;\">\n  \n  <!-- \u5f15\u5c0e\u9801 -->\n  <section id=\"quizintro9\" data-page=\"intro9\" class=\"min-vh-100 d-flex align-items-center py-4\">\n    <div class=\"container\">\n      <div class=\"row justify-content-center\">\n        <div class=\"col-12\">\n          \n          <!-- \u4e3b\u6a19\u984c\u5340\u57df -->\n          <header class=\"text-center mb-4 position-relative\">\n            <div class=\"floating-hearts\">\n              <i class=\"bi bi-heart-fill heart-1\"><\/i>\n              <i class=\"bi bi-heart heart-2\"><\/i>\n              <i class=\"bi bi-heart-fill heart-3\"><\/i>\n            <\/div>\n            <div class=\"mb-3\">\n              <div class=\"cosmic-badge mx-auto\">\n                <i class=\"bi bi-stars\"><\/i>\n              <\/div>\n            <\/div>\n            <h1 class=\"display-5 fw-bold mb-3 title-gradient\">\u4f60\u7684\u7f18\u5206\u80fd\u6c42\u6765\u5417\uff1f<\/h1>\n            <p class=\"lead text-muted mb-0\" style=\"font-size: 1rem;\">\u63a2\u7d22\u611b\u60c5\u7684\u5967\u79d8 \u00b7 \u63ed\u958b\u7de3\u5206\u7684\u5bc6\u78bc<\/p>\n            <div class=\"decorative-line mx-auto mt-3\"><\/div>\n          <\/header>\n          \n          <!-- \u7279\u8272\u5361\u7247\u5340 -->\n          <div class=\"features-grid mb-4\">\n            <div class=\"feature-card\">\n              <div class=\"feature-icon-wrapper\">\n                <div class=\"feature-icon bg-purple\">\n                  <i class=\"bi bi-moon-stars-fill\"><\/i>\n                <\/div>\n                <div class=\"feature-pulse\"><\/div>\n              <\/div>\n              <h3 class=\"feature-title\">\u63a2\u7d22\u7f18\u5206\u5bc6\u7801<\/h3>\n              <p class=\"feature-desc\">\u6df1\u5165\u4e86\u89e3\u4f60\u7684\u611f\u60c5\u6a21\u5f0f<br>\u627e\u5230\u5c6c\u65bc\u4f60\u7684\u5e78\u798f\u5bc6\u78bc<\/p>\n            <\/div>\n            \n            <div class=\"feature-card\">\n              <div class=\"feature-icon-wrapper\">\n                <div class=\"feature-icon bg-pink\">\n                  <i class=\"bi bi-heart-pulse-fill\"><\/i>\n                <\/div>\n                <div class=\"feature-pulse\"><\/div>\n              <\/div>\n              <h3 class=\"feature-title\">\u7406\u89e3\u7231\u60c5\u89c2<\/h3>\n              <p class=\"feature-desc\">\u8a8d\u8b58\u771f\u5be6\u7684\u81ea\u5df1<br>\u660e\u767d\u5167\u5fc3\u7684\u6e34\u671b\u8207\u671f\u5f85<\/p>\n            <\/div>\n            \n            <div class=\"feature-card\">\n              <div class=\"feature-icon-wrapper\">\n                <div class=\"feature-icon bg-blue\">\n                  <i class=\"bi bi-compass-fill\"><\/i>\n                <\/div>\n                <div class=\"feature-pulse\"><\/div>\n              <\/div>\n              <h3 class=\"feature-title\">\u638c\u63e1\u7f18\u5206\u65b9\u5411<\/h3>\n              <p class=\"feature-desc\">\u627e\u5230\u6b63\u78ba\u7684\u611b\u60c5\u9053\u8def<br>\u628a\u63e1\u6bcf\u4e00\u500b\u5e78\u798f\u6a5f\u6703<\/p>\n            <\/div>\n          <\/div>\n          \n          <!-- \u4ecb\u7d39\u5361\u7247 -->\n          <div class=\"intro-card mb-4\">\n            <div class=\"intro-card-bg\"><\/div>\n            <div class=\"intro-card-content\">\n              <div class=\"quote-icon\">\n                <i class=\"bi bi-quote\"><\/i>\n              <\/div>\n              <p class=\"intro-text\">\n                \u7de3\u5206\u662f\u53ef\u9047\u4e0d\u53ef\u6c42\u7684\u795e\u79d8\u529b\u91cf\uff0c\u6709\u4eba\u8aaa\u5b83\u662f\u547d\u4e2d\u8a3b\u5b9a\uff0c\u6709\u4eba\u8aaa\u5b83\u9700\u8981\u52aa\u529b\u722d\u53d6\u3002\n                <span class=\"text-highlight\">\u4f60\u662f\u54ea\u4e00\u7a2e\u4eba\uff1f<\/span>\n              <\/p>\n              <p class=\"intro-text mb-0\">\n                \u900f\u904e\u9019\u500b\u6e2c\u9a57\uff0c\u63a2\u7d22\u4f60\u5c0d\u7de3\u5206\u7684\u771f\u5be6\u614b\u5ea6\uff0c\u767c\u73fe\u81ea\u5df1\u5728\u611b\u60c5\u4e2d\u7684\u5b9a\u4f4d\uff0c\n                \u627e\u5230\u6700\u9069\u5408\u4f60\u7684\u5e78\u798f\u4e4b\u8def\u3002\u6e96\u5099\u597d\u958b\u59cb\u9019\u8d9f\u5fc3\u9748\u4e4b\u65c5\u4e86\u55ce\uff1f\n              <\/p>\n            <\/div>\n          <\/div>\n          \n          <!-- \u7d71\u8a08\u6578\u64da\u5c55\u793a -->\n          <div class=\"stats-container mb-4\">\n            <div class=\"stat-item\">\n              <div class=\"stat-number\" data-count=\"10\">10<\/div>\n              <div class=\"stat-label\">\u7cbe\u9078\u554f\u984c<\/div>\n            <\/div>\n            <div class=\"stat-item\">\n              <div class=\"stat-number\" data-count=\"4\">4<\/div>\n              <div class=\"stat-label\">\u7d50\u679c\u985e\u578b<\/div>\n            <\/div>\n            <div class=\"stat-item\">\n              <div class=\"stat-number\" data-count=\"5\">5<\/div>\n              <div class=\"stat-label\">\u5206\u9418\u6e2c\u8a66<\/div>\n            <\/div>\n          <\/div>\n          \n          <!-- \u958b\u59cb\u6309\u9215 -->\n          <div class=\"text-center\">\n            <button type=\"button\" class=\"start-button\" data-action=\"start-quiz\">\n              <span class=\"button-bg\"><\/span>\n              <span class=\"button-content\">\n                <span class=\"button-text\">\u5f00\u59cb\u6d4b\u9a8c<\/span>\n                <i class=\"bi bi-arrow-right-circle-fill button-icon\"><\/i>\n              <\/span>\n            <\/button>\n          <\/div>\n          \n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u6e2c\u9a57\u9801 -->\n  <section id=\"quizmain9\" data-page=\"quiz9\" class=\"d-none py-4\">\n    <div class=\"container\">\n      <div class=\"row justify-content-center\">\n        <div class=\"col-12\">\n          <header class=\"text-center mb-4\">\n            <h2 class=\"h4 fw-bold\" style=\"color: #8b7fc6;\">\u4f60\u7684\u7f18\u5206\u80fd\u6c42\u6765\u5417\uff1f<\/h2>\n          <\/header>\n          \n          <div class=\"mb-4\">\n            <div class=\"d-flex justify-content-between align-items-center mb-2\">\n              <span class=\"text-muted small\">\u6d4b\u9a8c\u8fdb\u5ea6<\/span>\n              <span class=\"text-muted small\">\u95ee\u9898 <span data-current-question>1<\/span>\/10<\/span>\n            <\/div>\n            <div class=\"progress\" style=\"height: 6px; background-color: #f3f4f6;\">\n              <div class=\"progress-bar\" role=\"progressbar\" style=\"background: linear-gradient(90deg, #a78bfa 0%, #8b7fc6 100%); width: 10%;\" aria-valuenow=\"10\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div>\n            <\/div>\n          <\/div>\n          \n          <div id=\"questions-container\">\n            <!-- \u554f\u984c\u5c07\u901a\u904eJavaScript\u52d5\u614b\u751f\u6210 -->\n          <\/div>\n          \n          <div class=\"text-center mt-4\">\n            <button type=\"button\" class=\"btn btn-outline-secondary px-4 py-2\" data-action=\"prev-question\" disabled>\n              <i class=\"bi bi-arrow-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 py-4\">\n    <div class=\"container\">\n      <div class=\"row justify-content-center\">\n        <div class=\"col-12\">\n          <header class=\"text-center mb-4\">\n            <h2 class=\"h4 fw-bold\" style=\"color: #8b7fc6;\">\u6d4b\u9a8c\u7ed3\u679c<\/h2>\n          <\/header>\n          \n          <div class=\"card border-0 shadow-sm mb-4\">\n            <div class=\"card-body p-4\">\n              <h3 class=\"h5 fw-bold text-center mb-3\" style=\"color: #8b7fc6;\" data-result-title><\/h3>\n              <p class=\"lead\" style=\"font-size: 1rem; line-height: 1.6;\" data-result-text><\/p>\n            <\/div>\n          <\/div>\n          \n          <div class=\"card border-0 shadow-sm mb-4\">\n            <div class=\"card-body p-4\">\n              <h3 class=\"h6 fw-bold text-center mb-3\" style=\"color: #8b7fc6;\">\u7f18\u5206\u7279\u8d28\u5206\u6790<\/h3>\n              <div class=\"chart-container mx-auto\" style=\"max-width: 400px; height: 300px;\">\n                <canvas id=\"fate-chart\"><\/canvas>\n              <\/div>\n            <\/div>\n          <\/div>\n          \n          <div class=\"card border-0 shadow-sm mb-4\">\n            <div class=\"card-body p-4\">\n              <h3 class=\"h6 fw-bold text-center mb-3\" style=\"color: #8b7fc6;\">\u5e78\u798f\u5efa\u8bae<\/h3>\n              <ul class=\"list-unstyled mb-0\" data-advice-list><\/ul>\n            <\/div>\n          <\/div>\n          \n          <div class=\"text-center\">\n            <button type=\"button\" class=\"btn btn-lg px-4 py-2 shadow-sm\" data-action=\"restart-quiz\" style=\"background: linear-gradient(135deg, #a78bfa 0%, #8b7fc6 100%); color: white; border: none; border-radius: 50px;\">\n              <span class=\"fw-semibold\">\u91cd\u65b0\u6d4b\u8bd5<\/span>\n              <i class=\"bi bi-arrow-clockwise ms-2\"><\/i>\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 - \u9069\u914dWordPress 750px *\/\n  #fate-quiz-container {\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft JhengHei', 'PingFang TC', 'Apple LiGothic Medium', 'Heiti TC', 'Noto Sans TC', sans-serif;\n    color: #374151;\n    margin: 0 auto;\n  }\n  \n  \/* \u6f02\u6d6e\u611b\u5fc3\u52d5\u756b *\/\n  .floating-hearts {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    pointer-events: none;\n    overflow: hidden;\n  }\n  \n  .floating-hearts i {\n    position: absolute;\n    color: rgba(167, 139, 250, 0.2);\n    animation: float 6s infinite;\n  }\n  \n  .heart-1 {\n    font-size: 18px;\n    top: 20%;\n    left: 10%;\n    animation-delay: 0s;\n  }\n  \n  .heart-2 {\n    font-size: 14px;\n    top: 60%;\n    right: 15%;\n    animation-delay: 2s;\n  }\n  \n  .heart-3 {\n    font-size: 20px;\n    top: 40%;\n    left: 85%;\n    animation-delay: 4s;\n  }\n  \n  @keyframes float {\n    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.2; }\n    25% { transform: translateY(-10px) rotate(5deg); opacity: 0.3; }\n    50% { transform: translateY(0) rotate(-5deg); opacity: 0.2; }\n    75% { transform: translateY(10px) rotate(3deg); opacity: 0.3; }\n  }\n  \n  \/* \u5b87\u5b99\u5fbd\u7ae0 *\/\n  .cosmic-badge {\n    width: 80px;\n    height: 80px;\n    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.3);\n  }\n  \n  .cosmic-badge i {\n    font-size: 36px;\n    color: white;\n    animation: twinkle 2s infinite;\n  }\n  \n  @keyframes twinkle {\n    0%, 100% { opacity: 1; transform: scale(1); }\n    50% { opacity: 0.8; transform: scale(0.95); }\n  }\n  \n  \/* \u6f38\u8b8a\u6a19\u984c *\/\n  .title-gradient {\n    background: linear-gradient(135deg, #8b7fc6 0%, #a78bfa 50%, #c4b5fd 100%);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-clip: text;\n    font-size: 2rem !important;\n  }\n  \n  \/* \u88dd\u98fe\u7dda *\/\n  .decorative-line {\n    width: 60px;\n    height: 3px;\n    background: linear-gradient(90deg, transparent, #a78bfa, transparent);\n    border-radius: 3px;\n  }\n  \n  \/* \u7279\u8272\u7db2\u683c *\/\n  .features-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 20px;\n  }\n  \n  \/* \u7279\u8272\u5361\u7247 *\/\n  .feature-card {\n    text-align: center;\n    padding: 25px 15px;\n    background: white;\n    border-radius: 16px;\n    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);\n    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);\n    position: relative;\n    overflow: hidden;\n  }\n  \n  .feature-card::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background: linear-gradient(90deg, #a78bfa, #8b7fc6);\n    transform: scaleX(0);\n    transition: transform 0.4s ease;\n  }\n  \n  .feature-card:hover {\n    transform: translateY(-5px);\n    box-shadow: 0 15px 40px rgba(139, 127, 198, 0.15);\n  }\n  \n  .feature-card:hover::before {\n    transform: scaleX(1);\n  }\n  \n  \/* \u7279\u8272\u5716\u6a19\u5305\u88dd *\/\n  .feature-icon-wrapper {\n    position: relative;\n    display: inline-block;\n    margin-bottom: 15px;\n  }\n  \n  .feature-icon {\n    width: 60px;\n    height: 60px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    z-index: 2;\n  }\n  \n  .feature-icon i {\n    font-size: 28px;\n    color: white;\n  }\n  \n  .feature-icon.bg-purple {\n    background: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 100%);\n  }\n  \n  .feature-icon.bg-pink {\n    background: linear-gradient(135deg, #fda4af 0%, #fb7185 100%);\n  }\n  \n  .feature-icon.bg-blue {\n    background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);\n  }\n  \n  \/* \u8108\u885d\u52d5\u756b *\/\n  .feature-pulse {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 60px;\n    height: 60px;\n    border-radius: 50%;\n    background: inherit;\n    opacity: 0.3;\n    animation: pulse 2s infinite;\n  }\n  \n  @keyframes pulse {\n    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }\n    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }\n    100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }\n  }\n  \n  .feature-title {\n    font-size: 18px;\n    font-weight: bold;\n    color: #1f2937;\n    margin-bottom: 8px;\n  }\n  \n  .feature-desc {\n    color: #6b7280;\n    font-size: 13px;\n    line-height: 1.5;\n    margin: 0;\n  }\n  \n  \/* \u4ecb\u7d39\u5361\u7247 *\/\n  .intro-card {\n    position: relative;\n    background: white;\n    border-radius: 16px;\n    overflow: hidden;\n    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);\n  }\n  \n  .intro-card-bg {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 100%;\n    background: linear-gradient(135deg, rgba(196, 181, 253, 0.1) 0%, rgba(167, 139, 250, 0.05) 100%);\n    opacity: 0.5;\n  }\n  \n  .intro-card-content {\n    position: relative;\n    padding: 30px;\n  }\n  \n  .quote-icon {\n    display: inline-block;\n    width: 45px;\n    height: 45px;\n    background: linear-gradient(135deg, #a78bfa 0%, #8b7fc6 100%);\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 15px;\n  }\n  \n  .quote-icon i {\n    font-size: 20px;\n    color: white;\n  }\n  \n  .intro-text {\n    font-size: 15px;\n    line-height: 1.7;\n    color: #4b5563;\n    margin-bottom: 15px;\n  }\n  \n  .text-highlight {\n    color: #8b7fc6;\n    font-weight: 600;\n    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(139, 127, 198, 0.1) 100%);\n    padding: 2px 6px;\n    border-radius: 4px;\n  }\n  \n  \/* \u7d71\u8a08\u5bb9\u5668 *\/\n  .stats-container {\n    display: flex;\n    justify-content: center;\n    gap: 40px;\n    padding: 25px;\n    background: linear-gradient(135deg, rgba(196, 181, 253, 0.05) 0%, rgba(167, 139, 250, 0.02) 100%);\n    border-radius: 16px;\n  }\n  \n  .stat-item {\n    text-align: center;\n  }\n  \n  .stat-number {\n    font-size: 36px;\n    font-weight: bold;\n    background: linear-gradient(135deg, #8b7fc6 0%, #a78bfa 100%);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-clip: text;\n    margin-bottom: 5px;\n  }\n  \n  .stat-label {\n    font-size: 13px;\n    color: #6b7280;\n    font-weight: 500;\n  }\n  \n  \/* \u958b\u59cb\u6309\u9215 *\/\n  .start-button {\n    position: relative;\n    padding: 0;\n    border: none;\n    background: transparent;\n    cursor: pointer;\n    overflow: hidden;\n    border-radius: 50px;\n    transition: all 0.3s ease;\n  }\n  \n  .button-bg {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: linear-gradient(135deg, #a78bfa 0%, #8b7fc6 100%);\n    transition: all 0.3s ease;\n  }\n  \n  .button-content {\n    position: relative;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 14px 30px;\n    color: white;\n    font-size: 16px;\n    font-weight: 600;\n  }\n  \n  .button-icon {\n    font-size: 20px;\n    transition: transform 0.3s ease;\n  }\n  \n  .start-button:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 10px 30px rgba(139, 127, 198, 0.3);\n  }\n  \n  .start-button:hover .button-icon {\n    transform: translateX(3px);\n  }\n  \n  .start-button:active {\n    transform: translateY(0);\n  }\n  \n  \/* \u554f\u984c\u5361\u7247\u6a23\u5f0f - \u4f7f\u7528h3\u6a19\u7c64 *\/\n  .question-card {\n    border-left: 4px solid #c4b5fd;\n    background: linear-gradient(to right, rgba(196, 181, 253, 0.05), transparent);\n  }\n  \n  .question-card h3 {\n    font-size: 22px !important;\n    font-weight: bold !important;\n    color: #1f2937 !important;\n    margin-bottom: 20px !important;\n  }\n  \n  \/* \u9078\u9805\u5361\u7247\u6a23\u5f0f - \u589e\u5927\u6587\u5b57 *\/\n  .option-card {\n    position: relative;\n    border: 2px solid #e5e7eb;\n    background: white;\n    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n    cursor: pointer;\n    overflow: hidden;\n  }\n  \n  .option-card:hover {\n    border-color: #c4b5fd;\n    background: linear-gradient(to right, rgba(196, 181, 253, 0.08), white);\n    transform: translateX(3px);\n    box-shadow: 0 4px 12px rgba(139, 127, 198, 0.15);\n  }\n  \n  .option-card.selected {\n    border-color: #8b7fc6;\n    background: linear-gradient(to right, rgba(167, 139, 250, 0.15), rgba(139, 127, 198, 0.05));\n    box-shadow: 0 4px 12px rgba(139, 127, 198, 0.2);\n  }\n  \n  \/* \u5713\u5f62\u9078\u64c7\u6307\u793a\u5668 *\/\n  .option-indicator {\n    width: 22px;\n    height: 22px;\n    border: 2px solid #d1d5db;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all 0.3s ease;\n    flex-shrink: 0;\n    background: white;\n  }\n  \n  .option-card:hover .option-indicator {\n    border-color: #a78bfa;\n    background: rgba(167, 139, 250, 0.1);\n  }\n  \n  .option-card.selected .option-indicator {\n    border-color: #8b7fc6;\n    background: #8b7fc6;\n  }\n  \n  .option-indicator i {\n    opacity: 0;\n    transform: scale(0);\n    transition: all 0.3s ease;\n    color: white;\n    font-size: 12px;\n  }\n  \n  .option-card.selected .option-indicator i {\n    opacity: 1;\n    transform: scale(1);\n  }\n  \n  \/* \u9078\u9805\u6587\u5b57\u6a23\u5f0f - \u589e\u5927\u81f318px *\/\n  .option-text {\n    font-size: 18px !important;\n    color: #374151;\n    margin: 0;\n    padding-left: 14px;\n    flex: 1;\n  }\n  \n  \/* \u52d5\u756b\u6548\u679c *\/\n  .fade-in {\n    animation: fadeInUp 0.5s ease;\n  }\n  \n  @keyframes fadeInUp {\n    from { \n      opacity: 0; \n      transform: translateY(20px); \n    }\n    to { \n      opacity: 1; \n      transform: translateY(0); \n    }\n  }\n  \n  \/* \u97ff\u61c9\u5f0f\u8a2d\u8a08 - \u91dd\u5c0dWordPress\u74b0\u5883\u512a\u5316 *\/\n  @media (max-width: 768px) {\n    .display-5 {\n      font-size: 1.6rem !important;\n    }\n    \n    .features-grid {\n      gap: 15px;\n    }\n    \n    .feature-card {\n      padding: 20px 12px;\n    }\n    \n    .feature-icon {\n      width: 50px;\n      height: 50px;\n    }\n    \n    .feature-icon i {\n      font-size: 24px;\n    }\n    \n    .intro-card-content {\n      padding: 25px 20px;\n    }\n    \n    .stats-container {\n      gap: 25px;\n      padding: 20px;\n    }\n    \n    .stat-number {\n      font-size: 30px;\n    }\n    \n    .button-content {\n      padding: 12px 24px;\n      font-size: 15px;\n    }\n    \n    .question-card h3 {\n      font-size: 20px !important;\n    }\n    \n    .option-text {\n      font-size: 16px !important;\n    }\n  }\n  \n  @media (max-width: 576px) {\n    .display-5 {\n      font-size: 1.4rem !important;\n    }\n    \n    .cosmic-badge {\n      width: 70px;\n      height: 70px;\n    }\n    \n    .cosmic-badge i {\n      font-size: 30px;\n    }\n    \n    .features-grid {\n      grid-template-columns: 1fr;\n    }\n    \n    .stats-container {\n      flex-direction: column;\n      gap: 15px;\n    }\n    \n    .intro-card-content {\n      padding: 20px 15px;\n    }\n    \n    .intro-text {\n      font-size: 14px;\n    }\n    \n    .question-card h3 {\n      font-size: 18px !important;\n    }\n    \n    .option-text {\n      font-size: 15px !important;\n      padding-left: 10px;\n    }\n  }\n  \n  \/* WordPress\u7279\u5b9a\u8abf\u6574 *\/\n  #fate-quiz-container .container {\n    padding-left: 15px;\n    padding-right: 15px;\n  }\n  \n  #fate-quiz-container .card {\n    margin-left: 0;\n    margin-right: 0;\n  }\n<\/style>\n\n<!-- JavaScript -->\n<script>\n(function() {\n  'use strict';\n  \n  \/\/ \u6e2c\u9a57\u6578\u64da\n  const quizData = {\n    questions: [\n      {\n        text: \"\u6709\u4eba\u66fe\u8aaa\u4f60\u662f\u4e00\u500b\u91cd\u60c5\u91cd\u7fa9\u7684\u4eba\uff1f\",\n        options: [\n          { text: \"\u662f\u7684\", next: 1 },\n          { text: \"\u4e0d\u662f\", next: 2 },\n          { text: \"\u4e0d\u77e5\u9053\", next: 3 }\n        ]\n      },\n      {\n        text: \"\u4f60\u8a8d\u70ba\u81ea\u5df1\u7684\u611f\u60c5\uff0c\u4e00\u5411\u90fd\u5145\u6eff\u4e86\u574e\u5777\u55ce\uff1f\",\n        options: [\n          { text: \"\u662f\u7684\", next: 2 },\n          { text: \"\u4e0d\u662f\", next: 3 },\n          { text: \"\u9084\u597d\", next: 4 }\n        ]\n      },\n      {\n        text: \"\u6709\u7684\u6642\u5019\uff0c\u4f60\u6703\u89ba\u5f97\u81ea\u5df1\u662f\u4e00\u500b\u7121\u6b32\u7121\u6c42\u7684\u4eba\u55ce\uff1f\",\n        options: [\n          { text: \"\u662f\u7684\", next: 3 },\n          { text: \"\u4e0d\u662f\", next: 4 },\n          { text: \"\u4e00\u822c\", next: 5 }\n        ]\n      },\n      {\n        text: \"\u5982\u679c\u8981\u7576\u7236\u6bcd\uff0c\u4f60\u66f4\u559c\u6b61\u7537\u5b69\u9084\u662f\u5973\u5b69\uff1f\",\n        options: [\n          { text: \"\u7537\u5b69\", next: 4 },\n          { text: \"\u5973\u5b69\", next: 5 },\n          { text: \"\u90fd\u5dee\u4e0d\u591a\", next: 6 }\n        ]\n      },\n      {\n        text: \"\u4f60\u5f88\u5bb9\u6613\u88ab\u611f\u60c5\u7684\u4e8b\u60c5\u5f71\u97ff\u5de5\u4f5c\u55ce\uff1f\",\n        options: [\n          { text: \"\u662f\u7684\", next: 5 },\n          { text: \"\u4e0d\u662f\", next: 6 },\n          { text: \"\u770b\u60c5\u6cc1\", next: 7 }\n        ]\n      },\n      {\n        text: \"\u6200\u4eba\u8a87\u4f60\u7684\u54ea\u500b\u8a5e\uff0c\u4f60\u6700\u63a5\u53d7\u4e0d\u4e86\uff1f\",\n        options: [\n          { text: \"\u53ef\u611b\", next: 6 },\n          { text: \"\u8abf\u76ae\", next: 7 },\n          { text: \"\u8ff7\u7cca\", result: \"A\" }\n        ]\n      },\n      {\n        text: \"\u4f60\u662f\u4e00\u500b\u5f88\u5728\u4e4e\u7d04\u6703\u74b0\u5883\u7684\u4eba\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        text: \"\u9762\u524d\u6709\u4e00\u676f\u5496\u5561\u3001\u4e00\u74f6\u679c\u6c41\u548c\u4e00\u7f50\u53ef\u6a02\uff0c\u4f60\u6703\u559d\uff1f\",\n        options: [\n          { text: \"\u5496\u5561\", next: 8 },\n          { text: \"\u53ef\u6a02\", result: \"A\" },\n          { text: \"\u679c\u6c41\", result: \"B\" }\n        ]\n      },\n      {\n        text: \"\u809a\u5b50\u9913\u4e86\uff0c\u53ea\u6709\u4e00\u7c60\u9903\u5b50\u3001\u4e00\u7897\u6ce1\u9eb5\u548c\u4e00\u500b\u6f22\u5821\uff0c\u4f60\u4e0d\u6703\u9078\u54ea\u6a23\u5462\uff1f\",\n        options: [\n          { text: \"\u9903\u5b50\", result: \"C\" },\n          { text: \"\u6f22\u5821\", result: \"D\" },\n          { text: \"\u6ce1\u9eb5\", result: \"A\" }\n        ]\n      },\n      {\n        text: \"\u6253\u7b97\u9001\u500b\u73a9\u5076\u7d66\u6200\u4eba\uff0c\u4f60\u6703\u9078\u64c7\uff1f\",\n        options: [\n          { text: \"\u5c0f\u718a\", result: \"B\" },\n          { text: \"\u5c0f\u72d7\", result: \"C\" },\n          { text: \"\u5c0f\u9e7f\", result: \"D\" }\n        ]\n      }\n    ],\n    results: {\n      \"A\": {\n        title: \"\u6c42\u4e0d\u4f86\",\n        text: \"\u4f60\u7684\u5fc3\u667a\u6bd4\u540c\u9f61\u4eba\u6210\u719f\uff0c\u5728\u5f88\u65e9\u7684\u6642\u5019\uff0c\u4f60\u5c31\u5df2\u7d93\u770b\u900f\u611f\u60c5\u9019\u56de\u4e8b\u4e86\uff0c\u4e5f\u660e\u767d\uff0c\u5176\u5be6\u771f\u7684\u6709\u7de3\u5206\u5929\u5b9a\u9019\u4e00\u8aaa\uff0c\u53ef\u9047\u4e0d\u53ef\u6c42\u3002\u5373\u4f7f\u66ab\u6642\u6c42\u4f86\u4e86\uff0c\u4e0d\u5c6c\u65bc\u4f60\u7684\uff0c\u6700\u7d42\u9084\u662f\u6703\u96e2\u4f60\u800c\u53bb\u3002\u73fe\u5728\u4f60\u7684\u5c0d\u5f85\u7de3\u5206\u611f\u60c5\uff0c\u5df2\u7d93\u771f\u7684\u5f88\u4f5b\u7cfb\u4e86\uff0c\u611b\u4f86\u5c31\u611b\uff0c\u4e0d\u4f86\u5c31\u4e0d\u52c9\u5f37\uff0c\u53cd\u6b63\u5f37\u6c42\u800c\u4f86\u7684\uff0c\u4e5f\u6703\u8d70\u6389\u3002\",\n        scores: { \u96a8\u7de3\u5ea6: 90, \u667a\u6167\u5ea6: 85, \u6210\u719f\u5ea6: 80, \u901a\u900f\u5ea6: 85, \u5e73\u975c\u5ea6: 75 },\n        advice: [\n          \"\u63a5\u53d7\u751f\u6d3b\u7684\u81ea\u7136\u7bc0\u594f\uff0c\u76f8\u4fe1\u8a72\u4f86\u7684\u7de3\u5206\u4e0d\u6703\u7f3a\u5e2d\",\n          \"\u628a\u66f4\u591a\u7cbe\u529b\u653e\u5728\u81ea\u6211\u6210\u9577\u4e0a\uff0c\u8b93\u81ea\u5df1\u6210\u70ba\u66f4\u597d\u7684\u4eba\",\n          \"\u4fdd\u6301\u958b\u653e\u7684\u5fc3\u614b\uff0c\u4f46\u4e0d\u8981\u5c0d\u6bcf\u4e00\u6bb5\u95dc\u4fc2\u90fd\u62b1\u6709\u904e\u9ad8\u671f\u671b\",\n          \"\u5b78\u6703\u5728\u5e73\u975c\u4e2d\u7b49\u5f85\uff0c\u73cd\u60dc\u7576\u4e0b\u7684\u7f8e\u597d\"\n        ]\n      },\n      \"B\": {\n        title: \"\u6c42\u5f97\u4f86\",\n        text: \"\u4f60\u89ba\u5f97\uff0c\u7de3\u5206\u9084\u662f\u53ef\u4ee5\u6c42\u4f86\u7684\u3002\u53ea\u8981\u81ea\u5df1\u8aa0\u5fc3\u8aa0\u610f\uff0c\u5c31\u4e00\u5b9a\u6703\u5be6\u73fe\u3002\u7562\u7adf\u5ff5\u5ff5\u4e0d\u5fd8\uff0c\u5fc5\u6709\u8ff4\u97ff\uff0c\u5438\u5f15\u529b\u6cd5\u5247\u662f\u5b58\u5728\u7684\uff0c\u53ea\u662f\u4f60\u4e0d\u80fd\u53ea\u662f\u9760\u8001\u5929\u5b89\u6392\uff0c\u81ea\u5df1\u4e0d\u52aa\u529b\u3002\u7562\u7adf\u53bb\u6c42\u4e00\u6bb5\u7de3\u5206\uff0c\u9700\u8981\u4f60\u5fc3\u4e2d\u767c\u51fa\u9019\u6a23\u7684\u7948\u6c42\uff0c\u7136\u5f8c\u5fd8\u6389\u5b83\uff0c\u52aa\u529b\u5730\u6539\u8b8a\u81ea\u5df1\u7684\u5916\u5f62\u3001\u80fd\u529b\u7b49\uff0c\u81ea\u5df1\u8b8a\u512a\u79c0\u4e86\uff0c\u597d\u7de3\u5206\u81ea\u7136\u5c31\u4f86\u4e86\u3002\",\n        scores: { \u7a4d\u6975\u5ea6: 85, \u884c\u52d5\u529b: 90, \u6bc5\u529b\u503c: 80, \u81ea\u4fe1\u5fc3: 75, \u6a02\u89c0\u5ea6: 85 },\n        advice: [\n          \"\u5805\u6301\u81ea\u5df1\u7684\u76ee\u6a19\uff0c\u4f46\u8981\u907f\u514d\u904e\u5ea6\u57f7\u8457\u9020\u6210\u5fc3\u7406\u8ca0\u64d4\",\n          \"\u63d0\u5347\u81ea\u5df1\u7684\u5404\u65b9\u9762\u80fd\u529b\uff0c\u8b93\u81ea\u5df1\u66f4\u6709\u9b45\u529b\",\n          \"\u53c3\u52a0\u793e\u4ea4\u6d3b\u52d5\uff0c\u64f4\u5927\u4ea4\u53cb\u5708\uff0c\u589e\u52a0\u9047\u5230\u826f\u7de3\u7684\u6a5f\u6703\",\n          \"\u4fdd\u6301\u6a02\u89c0\u614b\u5ea6\uff0c\u76f8\u4fe1\u4ed8\u51fa\u7d42\u6703\u6709\u56de\u5831\"\n        ]\n      },\n      \"C\": {\n        title: \"\u4e0d\u60f3\u6c42\",\n        text: \"\u5176\u5be6\u5982\u679c\u4f60\u53bb\u6c42\u7de3\u5206\uff0c\u4e0d\u7ba1\u662f\u4e3b\u52d5\u8ffd\u6c42\uff0c\u9084\u662f\u7948\u6c42\u4e0a\u84bc\uff0c\u90fd\u662f\u80fd\u6c42\u4f86\u7684\u3002\u53ea\u662f\u4f60\u4e0d\u60f3\u6c42\uff0c\u4f60\u89ba\u5f97\u9084\u662f\u9806\u5176\u81ea\u7136\u7684\u597d\uff0c\u5982\u679c\u53bb\u6c42\u4e86\uff0c\u662f\u52c9\u5f37\u5f97\u4f86\u7684\uff0c\u4f60\u89ba\u5f97\u81ea\u5df1\u4e0d\u6703\u958b\u5fc3\u7684\uff0c\u5982\u679c\u5fc3\u4e2d\u4e00\u76f4\u60f3\u6c42\u7de3\u5206\uff0c\u537b\u6d6a\u8cbb\u4e86\u592a\u591a\u6642\u9593\u8207\u7cbe\u529b\uff0c\u53cd\u800c\u8cfa\u4e0d\u5230\u9322\uff0c\u4f60\u89ba\u5f97\u66f4\u662f\u8667\u5927\u4e86\u3002\u662f\u7684\uff0c\u4f60\u73fe\u5728\u66f4\u5e0c\u671b\u81ea\u5df1\u6709\u9322\uff0c\u800c\u4e0d\u662f\u6709\u7de3\u3002\",\n        scores: { \u5be6\u969b\u5ea6: 85, \u7368\u7acb\u6027: 90, \u5c08\u6ce8\u529b: 80, \u7406\u6027\u5ea6: 85, \u52d9\u5be6\u5ea6: 75 },\n        advice: [\n          \"\u7e7c\u7e8c\u5c08\u6ce8\u65bc\u81ea\u5df1\u7684\u4e8b\u696d\u548c\u76ee\u6a19\uff0c\u5efa\u7acb\u7a69\u56fa\u7684\u500b\u4eba\u57fa\u790e\",\n          \"\u5b78\u6703\u5728\u9069\u7576\u7684\u6642\u6a5f\u653e\u9b06\u81ea\u5df1\uff0c\u4e0d\u8981\u5b8c\u5168\u5ffd\u8996\u611f\u60c5\u9700\u6c42\",\n          \"\u5617\u8a66\u5728\u751f\u6d3b\u4e2d\u7559\u51fa\u4e00\u4e9b\u7a7a\u9593\u7d66\u7de3\u5206\uff0c\u4e0d\u5fc5\u523b\u610f\u8ff4\u907f\",\n          \"\u5728\u500b\u4eba\u6210\u9577\u8207\u611f\u60c5\u4e4b\u9593\u627e\u5230\u9069\u5408\u81ea\u5df1\u7684\u5e73\u8861\u9ede\"\n        ]\n      },\n      \"D\": {\n        title: \"\u4e0d\u6c42\u81ea\u4f86\",\n        text: \"\u4f60\u89ba\u5f97\u7de3\u5206\u9019\u7a2e\u6771\u897f\u4e0d\u5fc5\u53bb\u6c42\uff0c\u53cd\u6b63\u4f60\u5f88\u76f8\u4fe1\u81ea\u5df1\u7684\u7de3\u5206\u6703\u4e0d\u8acb\u81ea\u4f86\u3001\u4e0d\u6c42\u81ea\u4f86\u3002\u6c92\u8fa6\u6cd5\uff0c\u7562\u7adf\u4f60\u771f\u7684\u633a\u4e0d\u932f\u7684\uff0c\u9577\u5f97\u597d\u770b\uff0c\u80fd\u529b\u4e5f\u6709\uff0c\u53c8\u6703\u505a\u4eba\uff0c\u8a3b\u5b9a\u6709\u4e0d\u5c11\u7684\u6843\u82b1\u904b\uff0c\u559c\u6b61\u4f60\u7684\u4eba\u5f88\u591a\uff0c\u800c\u4f60\u4e5f\u4e0d\u6703\u72af\u50bb\uff0c\u6703\u653e\u8457\u597d\u7684\u4e0d\u8981\uff0c\u8ffd\u6c42\u4e0d\u597d\u7684\u4eba\u3002\u6700\u5f8c\u4f60\u6703\u9078\u64c7\u4e00\u500b\u6700\u9069\u5408\u81ea\u5df1\u7684\u4eba\uff0c\u7d50\u7de3\u4e00\u751f\uff0c\u5e78\u798f\u4e00\u751f\u3002\",\n        scores: { \u9b45\u529b\u503c: 90, \u81ea\u4fe1\u5fc3: 85, \u5e78\u904b\u5ea6: 80, \u5438\u5f15\u529b: 85, \u9078\u64c7\u529b: 75 },\n        advice: [\n          \"\u4fdd\u6301\u4f60\u7684\u81ea\u4fe1\u8207\u6a02\u89c0\u614b\u5ea6\uff0c\u4f46\u907f\u514d\u904e\u5ea6\u81ea\u4fe1\",\n          \"\u7e7c\u7e8c\u63d0\u5347\u81ea\u5df1\u7684\u500b\u4eba\u9b45\u529b\u548c\u80fd\u529b\uff0c\u8b93\u597d\u7de3\u5206\u66f4\u5bb9\u6613\u627e\u5230\u4f60\",\n          \"\u5b78\u6703\u8fa8\u5225\u771f\u6b63\u9069\u5408\u4f60\u7684\u4eba\uff0c\u4e0d\u8981\u88ab\u8868\u9762\u5438\u5f15\u6240\u8ff7\u60d1\",\n          \"\u73cd\u60dc\u8eab\u908a\u4eba\u7684\u95dc\u5fc3\u548c\u611b\u8b77\uff0c\u4e0d\u8981\u8996\u70ba\u7406\u6240\u7576\u7136\"\n        ]\n      }\n    }\n  };\n  \n  \/\/ \u6e2c\u9a57\u61c9\u7528\u985e\n  class FateQuiz {\n    constructor() {\n      this.currentPath = [];\n      this.currentQuestionIndex = 0;\n      this.chart = null;\n      \n      \/\/ \u7de9\u5b58DOM\u5143\u7d20\n      this.elements = {\n        container: document.getElementById('fate-quiz-container'),\n        introSection: document.getElementById('quizintro9'),\n        quizSection: document.getElementById('quizmain9'),\n        resultSection: document.getElementById('quizresult9'),\n        questionsContainer: document.getElementById('questions-container'),\n        progressBar: document.querySelector('.progress-bar'),\n        currentQuestionSpan: document.querySelector('[data-current-question]'),\n        prevButton: document.querySelector('[data-action=\"prev-question\"]'),\n        resultTitle: document.querySelector('[data-result-title]'),\n        resultText: document.querySelector('[data-result-text]'),\n        adviceList: document.querySelector('[data-advice-list]'),\n        chartCanvas: document.getElementById('fate-chart')\n      };\n      \n      this.bindEvents();\n      this.initQuiz();\n      this.animateStats();\n    }\n    \n    bindEvents() {\n      \/\/ \u4f7f\u7528\u4e8b\u4ef6\u59d4\u8a17\n      this.elements.container.addEventListener('click', (e) => {\n        const action = e.target.closest('[data-action]')?.dataset.action;\n        if (!action) return;\n        \n        switch(action) {\n          case 'start-quiz':\n            this.startQuiz();\n            break;\n          case 'prev-question':\n            this.showPreviousQuestion();\n            break;\n          case 'restart-quiz':\n            this.restartQuiz();\n            break;\n        }\n      });\n    }\n    \n    animateStats() {\n      const observer = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            const statNumbers = entry.target.querySelectorAll('.stat-number');\n            statNumbers.forEach(stat => {\n              const target = parseInt(stat.dataset.count);\n              let current = 0;\n              const increment = target \/ 30;\n              const timer = setInterval(() => {\n                current += increment;\n                if (current >= target) {\n                  current = target;\n                  clearInterval(timer);\n                }\n                stat.textContent = Math.floor(current);\n              }, 50);\n            });\n            observer.unobserve(entry.target);\n          }\n        });\n      }, { threshold: 0.5 });\n      \n      const statsContainer = document.querySelector('.stats-container');\n      if (statsContainer) {\n        observer.observe(statsContainer);\n      }\n    }\n    \n    initQuiz() {\n      \/\/ \u9810\u5148\u5275\u5efa\u6240\u6709\u554f\u984cHTML - \u4f7f\u7528h3\u6a19\u7c64\n      const questionsHTML = quizData.questions.map((question, index) => `\n        <div class=\"card border-0 shadow-sm question-card d-none mb-4\" data-question-index=\"${index}\">\n          <div class=\"card-body p-4\">\n            <h3>${question.text}<\/h3>\n            <div class=\"d-grid gap-3\">\n              ${question.options.map((option, optionIndex) => `\n                <div class=\"card option-card border-2 shadow-sm\" \n                     data-option-index=\"${optionIndex}\"\n                     data-next=\"${option.next || ''}\"\n                     data-result=\"${option.result || ''}\"\n                     role=\"button\"\n                     tabindex=\"0\">\n                  <div class=\"card-body p-3 d-flex align-items-center\">\n                    <div class=\"option-indicator\">\n                      <i class=\"bi bi-check-lg\"><\/i>\n                    <\/div>\n                    <p class=\"option-text mb-0\">${option.text}<\/p>\n                  <\/div>\n                <\/div>\n              `).join('')}\n            <\/div>\n          <\/div>\n        <\/div>\n      `).join('');\n      \n      this.elements.questionsContainer.innerHTML = questionsHTML;\n      \n      \/\/ \u7d81\u5b9a\u9078\u9805\u9ede\u64ca\u4e8b\u4ef6\n      this.elements.questionsContainer.addEventListener('click', (e) => {\n        const optionCard = e.target.closest('.option-card');\n        if (optionCard) {\n          this.selectOption(optionCard);\n        }\n      });\n      \n      \/\/ \u6dfb\u52a0\u9375\u76e4\u652f\u6301\n      this.elements.questionsContainer.addEventListener('keypress', (e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          const optionCard = e.target.closest('.option-card');\n          if (optionCard) {\n            e.preventDefault();\n            this.selectOption(optionCard);\n          }\n        }\n      });\n    }\n    \n    startQuiz() {\n      this.elements.introSection.classList.add('d-none');\n      this.elements.quizSection.classList.remove('d-none');\n      this.elements.quizSection.classList.add('fade-in');\n      this.showQuestion(0);\n      this.scrollToTop();\n    }\n    \n    showQuestion(index) {\n      \/\/ \u96b1\u85cf\u6240\u6709\u554f\u984c\n      document.querySelectorAll('.question-card').forEach(card => {\n        card.classList.add('d-none');\n      });\n      \n      \/\/ \u986f\u793a\u7576\u524d\u554f\u984c\n      const currentCard = document.querySelector(`[data-question-index=\"${index}\"]`);\n      currentCard.classList.remove('d-none');\n      currentCard.classList.add('fade-in');\n      \n      \/\/ \u66f4\u65b0\u9032\u5ea6\n      const questionNumber = this.currentPath.length + 1;\n      this.elements.currentQuestionSpan.textContent = questionNumber;\n      const progress = (questionNumber \/ 10) * 100;\n      this.elements.progressBar.style.width = `${progress}%`;\n      this.elements.progressBar.setAttribute('aria-valuenow', progress);\n      \n      \/\/ \u66f4\u65b0\u4e0a\u4e00\u984c\u6309\u9215\u72c0\u614b\n      this.elements.prevButton.disabled = this.currentPath.length === 0;\n      \n      \/\/ \u6062\u5fa9\u4e4b\u524d\u7684\u9078\u64c7\u72c0\u614b\n      if (this.currentPath.length > 0) {\n        const lastPath = this.currentPath[this.currentPath.length - 1];\n        if (lastPath.questionIndex === index) {\n          const options = currentCard.querySelectorAll('.option-card');\n          options.forEach((option, i) => {\n            if (i === lastPath.optionIndex) {\n              option.classList.add('selected');\n            }\n          });\n        }\n      }\n      \n      this.scrollToTop();\n    }\n    \n    selectOption(optionElement) {\n      const questionCard = optionElement.closest('.question-card');\n      const questionIndex = parseInt(questionCard.dataset.questionIndex);\n      const optionIndex = parseInt(optionElement.dataset.optionIndex);\n      \n      \/\/ \u66f4\u65b0\u9078\u4e2d\u72c0\u614b\n      questionCard.querySelectorAll('.option-card').forEach(card => {\n        card.classList.remove('selected');\n      });\n      optionElement.classList.add('selected');\n      \n      \/\/ \u5982\u679c\u662f\u4fee\u6539\u4e4b\u524d\u7684\u9078\u64c7\uff0c\u622a\u65b7\u8def\u5f91\n      if (questionIndex < this.currentPath.length) {\n        this.currentPath = this.currentPath.slice(0, questionIndex);\n      }\n      \n      \/\/ \u6dfb\u52a0\u5230\u8def\u5f91\n      this.currentPath.push({ questionIndex, optionIndex });\n      \n      \/\/ \u7372\u53d6\u4e0b\u4e00\u6b65\n      const nextIndex = optionElement.dataset.next;\n      const result = optionElement.dataset.result;\n      \n      setTimeout(() => {\n        if (result) {\n          this.showResults(result);\n        } else if (nextIndex) {\n          this.showQuestion(parseInt(nextIndex));\n        }\n      }, 300);\n    }\n    \n    showPreviousQuestion() {\n      if (this.currentPath.length > 0) {\n        this.currentPath.pop();\n        const prevIndex = this.currentPath.length > 0 \n          ? this.currentPath[this.currentPath.length - 1].questionIndex \n          : 0;\n        this.showQuestion(prevIndex);\n      }\n    }\n    \n    async showResults(resultKey) {\n      const result = quizData.results[resultKey];\n      \n      \/\/ \u66f4\u65b0\u7d50\u679c\u5167\u5bb9\n      this.elements.resultTitle.textContent = result.title;\n      this.elements.resultText.textContent = result.text;\n      \n      \/\/ \u66f4\u65b0\u5efa\u8b70\n      this.elements.adviceList.innerHTML = result.advice.map(advice => `\n        <li class=\"d-flex align-items-start mb-3\">\n          <i class=\"bi bi-check-circle-fill me-2 mt-1\" style=\"color: #4ade80; font-size: 16px; flex-shrink: 0;\"><\/i>\n          <span style=\"font-size: 14px; line-height: 1.5;\">${advice}<\/span>\n        <\/li>\n      `).join('');\n      \n      \/\/ \u986f\u793a\u7d50\u679c\u9801\n      this.elements.quizSection.classList.add('d-none');\n      this.elements.resultSection.classList.remove('d-none');\n      this.elements.resultSection.classList.add('fade-in');\n      \n      \/\/ \u7e6a\u88fd\u5716\u8868\n      await this.loadChartJS();\n      this.drawChart(result.scores);\n      \n      this.scrollToTop();\n    }\n    \n    async loadChartJS() {\n      if (window.Chart) return;\n      \n      return new Promise((resolve, reject) => {\n        const script = document.createElement('script');\n        script.src = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js';\n        script.onload = resolve;\n        script.onerror = reject;\n        document.head.appendChild(script);\n      });\n    }\n    \n    drawChart(scores) {\n      if (this.chart) {\n        this.chart.destroy();\n      }\n      \n      const ctx = this.elements.chartCanvas.getContext('2d');\n      \n      this.chart = new Chart(ctx, {\n        type: 'radar',\n        data: {\n          labels: Object.keys(scores),\n          datasets: [{\n            label: '\u4f60\u7684\u7279\u8cea',\n            data: Object.values(scores),\n            backgroundColor: 'rgba(167, 139, 250, 0.25)',\n            borderColor: '#8b7fc6',\n            pointBackgroundColor: '#8b7fc6',\n            pointBorderColor: '#fff',\n            pointHoverBackgroundColor: '#fff',\n            pointHoverBorderColor: '#8b7fc6',\n            borderWidth: 2,\n            pointRadius: 4,\n            pointHoverRadius: 6\n          }]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          scales: {\n            r: {\n              suggestedMin: 0,\n              suggestedMax: 100,\n              ticks: {\n                stepSize: 20,\n                font: { \n                  size: 11,\n                  family: \"'Microsoft JhengHei', sans-serif\"\n                },\n                color: '#6b7280'\n              },\n              pointLabels: {\n                font: { \n                  size: 14,\n                  weight: 'bold',\n                  family: \"'Microsoft JhengHei', sans-serif\"\n                },\n                color: '#374151'\n              },\n              grid: {\n                color: 'rgba(156, 163, 175, 0.2)'\n              }\n            }\n          },\n          plugins: {\n            legend: { \n              display: false \n            },\n            tooltip: {\n              backgroundColor: 'rgba(255, 255, 255, 0.95)',\n              titleColor: '#1f2937',\n              bodyColor: '#4b5563',\n              borderColor: '#e5e7eb',\n              borderWidth: 1,\n              padding: 10,\n              bodyFont: {\n                size: 13,\n                family: \"'Microsoft JhengHei', sans-serif\"\n              },\n              callbacks: {\n                label: (context) => `${context.dataset.label}: ${context.raw}%`\n              }\n            }\n          }\n        }\n      });\n    }\n    \n    restartQuiz() {\n      \/\/ \u91cd\u7f6e\u72c0\u614b\n      this.currentPath = [];\n      this.currentQuestionIndex = 0;\n      \n      \/\/ \u91cd\u7f6eUI\n      document.querySelectorAll('.option-card').forEach(card => {\n        card.classList.remove('selected');\n      });\n      \n      this.elements.progressBar.style.width = '10%';\n      this.elements.currentQuestionSpan.textContent = '1';\n      \n      \/\/ \u8fd4\u56de\u5f15\u5c0e\u9801\n      this.elements.resultSection.classList.add('d-none');\n      this.elements.introSection.classList.remove('d-none');\n      this.elements.introSection.classList.add('fade-in');\n      \n      this.scrollToTop();\n    }\n    \n    scrollToTop() {\n      const container = this.elements.container;\n      const rect = container.getBoundingClientRect();\n      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n      const targetY = rect.top + scrollTop - 20;\n      \n      window.scrollTo({\n        top: targetY,\n        behavior: 'smooth'\n      });\n    }\n  }\n  \n  \/\/ DOM\u52a0\u8f09\u5b8c\u6210\u5f8c\u521d\u59cb\u5316\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', () => new FateQuiz());\n  } else {\n    new FateQuiz();\n  }\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u7f18\u5206\u662f\u53ef\u9047\u4e0d\u53ef\u6c42\u7684\uff0c\u9047\u5230\u4e86\u5c31\u662f\u9047\u5230\u4e86\uff0c\u9047\u4e0d\u5230\u6c42\u4e5f\u6c42\u4e0d\u6765\u3002\u4e0d\u8fc7\u4e5f\u6709\u7684\u4eba\u89c9\u5f97\uff0c\u5176\u5b9e\u7f18\u5206\u4e5f\u8bb2\u6c42\u5fc3\u8bda\u5219\u7075\uff0c\u5982\u679c\u8bda\u5fc3\u8bda\u610f\uff0c\u8ffd\u6c42\u4e00\u6bb5\u7f18\u5206\uff0c\u6216\u8005\u5411\u4e0a\u5929\u6c42\u6765\u7f18\u5206\uff0c\u4e5f\u6709\u53ef\u80fd\u5b9e\u73b0\u3002\u4e0d\u5982\u6765\u6d4b\u6d4b\u4f60\u7684\u7f18\u5206\uff0c\u80fd\u4e0d\u80fd\u6c42\u5230\u5427\u3002<\/p>","protected":false},"author":19,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"narrow-width-container","site-content-style":"unboxed","site-sidebar-style":"unboxed","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,179],"tags":[],"class_list":["post-2360","post","type-post","status-publish","format-standard","hentry","category-love","category-marriage"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2360","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=2360"}],"version-history":[{"count":5,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2360\/revisions"}],"predecessor-version":[{"id":10329,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2360\/revisions\/10329"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2360"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2360"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}