{"id":2373,"date":"2023-10-07T09:14:07","date_gmt":"2023-10-07T01:14:07","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2373"},"modified":"2025-05-11T02:40:38","modified_gmt":"2025-05-10T18:40:38","slug":"your-luck-in-love","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/your-luck-in-love","title":{"rendered":"\u6843\u82b1\u8fd0\u7ebf\u4e0a\u514d\u8d39\u5c0f\u6d4b\u9a8c"},"content":{"rendered":"<!-- \u6843\u82b1\u904b\u7dda\u4e0a\u5c0f\u6e2c\u9a57 -->\n<div id=\"pbtest-container\" class=\"pbtest-module\">\n  <!-- \u5f15\u5c0e\u9801 -->\n  <section id=\"pbtest-intro\" class=\"pbtest-section pbtest-active\" aria-labelledby=\"intro-title\">\n    <header class=\"pbtest-header\">\n      <h2 id=\"intro-title\" class=\"pbtest-title\">\u6843\u82b1\u8fd0\u7ebf\u4e0a\u5c0f\u6d4b\u9a8c<\/h2>\n      <p class=\"pbtest-subtitle\">\u6d4b\u8bd5\u4f60\u7684\u6843\u82b1\u8fd0\u52bf\uff0c\u5bfb\u627e\u7231\u60c5\u7684\u53ef\u80fd<\/p>\n    <\/header>\n    \n    <div class=\"pbtest-features\">\n      <div class=\"pbtest-feature\">\n        <div class=\"pbtest-feature-icon\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" width=\"48\" height=\"48\">\n            <path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 3C4.79086 3 3 4.79086 3 7C3 9.20914 4.79086 11 7 11C9.20914 11 11 9.20914 11 7C11 4.79086 9.20914 3 7 3z M17 3C14.7909 3 13 4.79086 13 7C13 9.20914 14.7909 11 17 11C19.2091 11 21 9.20914 21 7C21 4.79086 19.2091 3 17 3z M12 21L12 13.5L12 13.5 M7 11C5.13295 11 3.37086 11.7954 2.12563 13.1005C0.880402 14.4056 0.151648 16.1717 0.0276557 18.0358C0.00922523 18.3357 0 18.6652 0 19L7 19L7 11z M17 11C18.8671 11 20.6291 11.7954 21.8744 13.1005C23.1196 14.4056 23.8484 16.1717 23.9723 18.0358C23.9908 18.3357 24 18.6652 24 19L17 19L17 11z\"><\/path>\n          <\/svg>\n        <\/div>\n        <h3>\u770b\u7a7f\u7231\u60c5\u547d\u8fd0<\/h3>\n        <p>\u63ed\u5f00\u4f60\u7684\u6843\u82b1\u8fd0\u52bf\uff0c\u9884\u6d4b\u672a\u6765\u7231\u60c5\u53ef\u80fd<\/p>\n      <\/div>\n      <div class=\"pbtest-feature\">\n        <div class=\"pbtest-feature-icon\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" width=\"48\" height=\"48\">\n            <path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z M12 3v6m-6 3h12\"><\/path>\n          <\/svg>\n        <\/div>\n        <h3>\u628a\u63e1\u826f\u7f18\u65f6\u673a<\/h3>\n        <p>\u4e86\u89e3\u81ea\u5df1\u7684\u6843\u82b1\u4f4d\uff0c\u6293\u4f4f\u5e78\u798f\u7684\u673a\u4f1a<\/p>\n      <\/div>\n      <div class=\"pbtest-feature\">\n        <div class=\"pbtest-feature-icon\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" width=\"48\" height=\"48\">\n            <path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572\"><\/path>\n          <\/svg>\n        <\/div>\n        <h3>\u63d0\u5347\u7231\u60c5\u9b45\u529b<\/h3>\n        <p>\u53d1\u73b0\u81ea\u5df1\u7684\u4f18\u52bf\uff0c\u589e\u5f3a\u5f02\u6027\u7f18\u5206<\/p>\n      <\/div>\n    <\/div>\n    \n    <div class=\"pbtest-intro-content\">\n      <p>\u770b\u5230\u522b\u7684\u60c5\u4fa3\u51fa\u53cc\u5165\u5bf9\uff0c\u5982\u5f71\u968f\u5f62\uff0c\u4f60\u7684\u5fc3\u91cc\u662f\u5426\u4f1a\u6709\u4e00\u79cd\u96be\u4ee5\u8a00\u55bb\u7684\u9178\u6da9\u611f\uff1f\u90fd\u8bf4\u751f\u6d3b\u6ca1\u6709\u7231\u60c5\u7684\u88c5\u70b9\u662f\u9ed1\u767d\u8272\u7684\uff0c\u4f60\u662f\u5426\u4e5f\u6b63\u5728\u671f\u5f85\u7231\u60c5\u964d\u4e34\uff0c\u60f3\u9047\u89c1\u7231\u60c5\uff0c\u5c31\u5fc5\u987b\u62e5\u6709\u826f\u597d\u7684\u6843\u82b1\u8fd0\uff0c\u90a3\u4e48\u4f60\u7684\u6843\u82b1\u6709\u591a\u65fa\u5462\uff1f\u770b\u770b\u4e0b\u9762\u7684\u6d4b\u8bd5\uff0c\u6216\u8bb8\u5c31\u53ef\u77e5\u6653\u7b54\u6848\u4e86\u3002<\/p>\n      <p>\u8fd9\u4e2a\u6d4b\u9a8c\u5c06\u901a\u8fc7\u79d1\u5b66\u7684\u5fc3\u7406\u5206\u6790\uff0c\u5e2e\u4f60\u8bc4\u4f30\u76ee\u524d\u7684\u6843\u82b1\u8fd0\u52bf\uff0c\u5e76\u63d0\u4f9b\u4e13\u4e1a\u5efa\u8bae\uff0c\u8ba9\u4f60\u627e\u5230\u7231\u60c5\u7684\u65b9\u5411\uff01<\/p>\n    <\/div>\n    \n    <button id=\"pbtest-start-btn\" class=\"pbtest-btn pbtest-primary-btn\" aria-label=\"\u5f00\u59cb\u6d4b\u9a8c\">\u5f00\u59cb\u6d4b\u9a8c<\/button>\n  <\/section>\n\n  <!-- \u6e2c\u9a57\u9801 -->\n  <section id=\"pbtest-quiz\" class=\"pbtest-section\" aria-labelledby=\"quiz-title\">\n    <header class=\"pbtest-header\">\n      <h2 id=\"quiz-title\" class=\"pbtest-title\">\u6843\u82b1\u8fd0\u7ebf\u4e0a\u5c0f\u6d4b\u9a8c<\/h2>\n    <\/header>\n    \n    <div class=\"pbtest-progress-container\">\n      <div class=\"pbtest-progress-bar\" aria-label=\"\u6d4b\u9a8c\u8fdb\u5ea6\">\n        <div class=\"pbtest-progress-fill\"><\/div>\n      <\/div>\n      <div class=\"pbtest-progress-text\">\u95ee\u9898 <span id=\"pbtest-current-question\">1<\/span>\/<span id=\"pbtest-total-questions\">5<\/span><\/div>\n    <\/div>\n    \n    <div id=\"pbtest-questions-container\">\n      <!-- \u554f\u984c\u5c07\u901a\u904eJavaScript\u52d5\u614b\u6dfb\u52a0 -->\n    <\/div>\n    \n    <div class=\"pbtest-navigation\">\n      <button id=\"pbtest-prev-btn\" class=\"pbtest-btn pbtest-secondary-btn\" aria-label=\"\u4e0a\u4e00\u9898\" disabled>\u4e0a\u4e00\u9898<\/button>\n    <\/div>\n  <\/section>\n\n  <!-- \u7d50\u679c\u9801 -->\n  <section id=\"pbtest-results\" class=\"pbtest-section\" aria-labelledby=\"results-title\">\n    <header class=\"pbtest-header\">\n      <h2 id=\"results-title\" class=\"pbtest-title\">\u6843\u82b1\u8fd0\u6d4b\u9a8c\u7ed3\u679c<\/h2>\n    <\/header>\n    \n    <div id=\"pbtest-result-container\" class=\"pbtest-result-box\">\n      <h3 id=\"pbtest-result-title\" class=\"pbtest-result-heading\">\u4f60\u7684\u6843\u82b1\u8fd0\u89e3\u6790<\/h3>\n      <div class=\"pbtest-result-text\"><\/div>\n    <\/div>\n    \n    <div class=\"pbtest-chart-container\">\n      <h3 class=\"pbtest-chart-heading\">\u6843\u82b1\u8fd0\u52bf\u5206\u6790<\/h3>\n      <div class=\"pbtest-chart-wrapper\">\n        <canvas id=\"pbtest-result-chart\"><\/canvas>\n      <\/div>\n      <div class=\"pbtest-legend-container\">\n        <div class=\"pbtest-legend-item\">\n          <span class=\"pbtest-legend-color\" style=\"background-color: rgba(255, 102, 179, 0.7);\"><\/span>\n          <span class=\"pbtest-legend-text\">\u4f60\u7684\u6307\u6570<\/span>\n        <\/div>\n        <div class=\"pbtest-legend-item\">\n          <span class=\"pbtest-legend-color\" style=\"background-color: rgba(204, 0, 102, 0.3);\"><\/span>\n          <span class=\"pbtest-legend-text\">\u5e73\u5747\u6c34\u5e73<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n    \n    <div class=\"pbtest-tips-container\">\n      <h3 class=\"pbtest-tips-heading\">\u63d0\u5347\u6843\u82b1\u8fd0\u5c0f\u8d34\u58eb<\/h3>\n      <div id=\"pbtest-tips-content\" class=\"pbtest-tips-content\"><\/div>\n    <\/div>\n    \n    <button id=\"pbtest-restart-btn\" class=\"pbtest-btn pbtest-primary-btn\" aria-label=\"\u91cd\u65b0\u6d4b\u9a8c\">\u518d\u6d4b\u4e00\u6b21\u6843\u82b1\u8fd0<\/button>\n  <\/section>\n<\/div>\n\n<style>\n  \/* \u8b8a\u6578\u5b9a\u7fa9 *\/\n  :root {\n    --pbtest-primary: #cc0066;\n    --pbtest-primary-light: #ff66b3;\n    --pbtest-primary-dark: #99004d;\n    --pbtest-secondary: #7a1f5c;\n    --pbtest-background: #fff5fa;\n    --pbtest-surface: #ffffff;\n    --pbtest-text: #333333;\n    --pbtest-text-light: #666666;\n    --pbtest-gradient: linear-gradient(135deg, #ffcce6 0%, #ff99cc 50%, #ff66b3 100%);\n    --pbtest-card-gradient: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(255,230,240,0.9));\n    --pbtest-card-hover-gradient: linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(255,210,230,0.95));\n    --pbtest-button-gradient: linear-gradient(45deg, #ff66b3, #cc0066);\n    --pbtest-button-hover-gradient: linear-gradient(45deg, #ff80c1, #dd1a7a);\n    --pbtest-spacing-unit: 8px;\n    --pbtest-border-radius: 16px;\n    --pbtest-box-shadow: 0 5px 20px rgba(204, 0, 102, 0.2);\n    --pbtest-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n    --pbtest-font-family: 'Microsoft JhengHei', 'PingFang TC', 'Apple LiGothic Medium', 'Heiti TC', 'Noto Sans TC', sans-serif;\n  }\n\n  \/* \u57fa\u672c\u6a23\u5f0f\u8207\u91cd\u7f6e *\/\n  .pbtest-module * {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n  }\n\n  .pbtest-module {\n    font-family: var(--pbtest-font-family);\n    max-width: 800px;\n    margin: 2rem auto;\n    background: var(--pbtest-surface);\n    border-radius: var(--pbtest-border-radius);\n    box-shadow: var(--pbtest-box-shadow);\n    overflow: hidden;\n    position: relative;\n    color: var(--pbtest-text);\n    line-height: 1.6;\n    font-size: 16px;\n  }\n\n  .pbtest-module::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: var(--pbtest-gradient);\n    opacity: 0.1;\n    z-index: 0;\n  }\n\n  .pbtest-section {\n    display: none;\n    padding: calc(var(--pbtest-spacing-unit) * 4);\n    position: relative;\n    z-index: 1;\n  }\n\n  .pbtest-active {\n    display: block;\n    animation: fadeIn 0.5s ease;\n  }\n\n  \/* \u6a19\u984c\u6a23\u5f0f *\/\n  .pbtest-header {\n    text-align: center;\n    margin-bottom: calc(var(--pbtest-spacing-unit) * 4);\n  }\n\n  .pbtest-title {\n    font-size: 32px;\n    font-weight: 700;\n    color: var(--pbtest-primary);\n    margin-bottom: calc(var(--pbtest-spacing-unit) * 1);\n    position: relative;\n    display: inline-block;\n  }\n\n  .pbtest-title::after {\n    content: '';\n    position: absolute;\n    width: 50%;\n    height: 3px;\n    background: var(--pbtest-primary-light);\n    bottom: -8px;\n    left: 25%;\n    border-radius: 2px;\n  }\n\n  .pbtest-subtitle {\n    font-size: 18px;\n    color: var(--pbtest-text-light);\n    margin-top: calc(var(--pbtest-spacing-unit) * 2);\n  }\n\n  \/* \u5f15\u5c0e\u9801\u6a23\u5f0f *\/\n  .pbtest-features {\n    display: flex;\n    justify-content: space-between;\n    gap: calc(var(--pbtest-spacing-unit) * 3);\n    margin: calc(var(--pbtest-spacing-unit) * 5) 0;\n  }\n\n  .pbtest-feature {\n    flex: 1;\n    text-align: center;\n    padding: calc(var(--pbtest-spacing-unit) * 3);\n    background-color: rgba(255, 255, 255, 0.85);\n    border-radius: var(--pbtest-border-radius);\n    box-shadow: 0 3px 15px rgba(204, 0, 102, 0.1);\n    transition: var(--pbtest-transition);\n    border: 1px solid rgba(255, 230, 240, 0.5);\n  }\n\n  .pbtest-feature:hover {\n    transform: translateY(-5px);\n    box-shadow: 0 8px 25px rgba(204, 0, 102, 0.2);\n  }\n\n  .pbtest-feature-icon {\n    width: 64px;\n    height: 64px;\n    border-radius: 50%;\n    margin: 0 auto calc(var(--pbtest-spacing-unit) * 2);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--pbtest-gradient);\n    color: white;\n    box-shadow: 0 4px 10px rgba(204, 0, 102, 0.3);\n  }\n\n  .pbtest-feature h3 {\n    font-size: 20px;\n    font-weight: 600;\n    margin-bottom: calc(var(--pbtest-spacing-unit) * 1);\n    color: var(--pbtest-primary);\n  }\n\n  .pbtest-feature p {\n    font-size: 16px;\n    color: var(--pbtest-text-light);\n  }\n\n  .pbtest-intro-content {\n    background: rgba(255, 255, 255, 0.9);\n    padding: calc(var(--pbtest-spacing-unit) * 3);\n    border-radius: var(--pbtest-border-radius);\n    margin-bottom: calc(var(--pbtest-spacing-unit) * 4);\n    box-shadow: 0 3px 15px rgba(204, 0, 102, 0.1);\n    border-left: 4px solid var(--pbtest-primary-light);\n  }\n\n  .pbtest-intro-content p {\n    margin-bottom: calc(var(--pbtest-spacing-unit) * 2);\n    text-align: left;\n    font-size: 17px;\n  }\n\n  .pbtest-intro-content p:last-child {\n    margin-bottom: 0;\n  }\n\n  \/* \u6e2c\u9a57\u9801\u6a23\u5f0f *\/\n  .pbtest-progress-container {\n    margin-bottom: calc(var(--pbtest-spacing-unit) * 4);\n  }\n\n  .pbtest-progress-bar {\n    height: 8px;\n    background-color: rgba(255, 102, 179, 0.2);\n    border-radius: 4px;\n    overflow: hidden;\n    margin-bottom: calc(var(--pbtest-spacing-unit) * 1);\n  }\n\n  .pbtest-progress-fill {\n    height: 100%;\n    background: var(--pbtest-button-gradient);\n    width: 20%;\n    transition: width 0.3s ease;\n  }\n\n  .pbtest-progress-text {\n    font-size: 16px;\n    color: var(--pbtest-text-light);\n    text-align: right;\n  }\n\n  .pbtest-question {\n    display: none;\n    animation: fadeIn 0.3s ease;\n  }\n\n  .pbtest-question.pbtest-active {\n    display: block;\n  }\n\n  .pbtest-question h3 {\n    font-size: 22px;\n    font-weight: 700;\n    margin-bottom: calc(var(--pbtest-spacing-unit) * 3);\n    color: var(--pbtest-primary);\n    text-align: center;\n    line-height: 1.4;\n  }\n\n  .pbtest-options {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: calc(var(--pbtest-spacing-unit) * 2);\n    margin-bottom: calc(var(--pbtest-spacing-unit) * 4);\n  }\n\n  .pbtest-option {\n    background: var(--pbtest-card-gradient);\n    color: var(--pbtest-primary-dark);\n    border: 2px solid rgba(255, 102, 179, 0.3);\n    padding: calc(var(--pbtest-spacing-unit) * 2) calc(var(--pbtest-spacing-unit) * 2);\n    border-radius: var(--pbtest-border-radius);\n    cursor: pointer;\n    transition: var(--pbtest-transition);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    box-shadow: 0 3px 10px rgba(204, 0, 102, 0.1);\n    min-height: 120px;\n    justify-content: center;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .pbtest-option:hover, .pbtest-option.pbtest-selected {\n    transform: translateY(-3px);\n    box-shadow: 0 5px 15px rgba(204, 0, 102, 0.2);\n    border-color: var(--pbtest-primary-light);\n  }\n\n  .pbtest-option.pbtest-selected {\n    background: var(--pbtest-button-gradient);\n    color: white;\n  }\n\n  .pbtest-option-icon {\n    font-size: 32px;\n    margin-bottom: calc(var(--pbtest-spacing-unit) * 1);\n  }\n\n  .pbtest-option-text {\n    font-size: 18px;\n    font-weight: 500;\n    text-align: center;\n  }\n\n  .pbtest-navigation {\n    display: flex;\n    justify-content: center;\n    margin-top: calc(var(--pbtest-spacing-unit) * 3);\n  }\n\n  \/* \u7d50\u679c\u9801\u6a23\u5f0f *\/\n  .pbtest-result-box {\n    background: var(--pbtest-card-gradient);\n    padding: calc(var(--pbtest-spacing-unit) * 4);\n    border-radius: var(--pbtest-border-radius);\n    margin-bottom: calc(var(--pbtest-spacing-unit) * 4);\n    box-shadow: 0 5px 15px rgba(204, 0, 102, 0.1);\n    border-left: 5px solid var(--pbtest-primary-light);\n  }\n\n  .pbtest-result-heading {\n    color: var(--pbtest-primary);\n    text-align: center;\n    margin-bottom: calc(var(--pbtest-spacing-unit) * 3);\n    font-size: 24px;\n    font-weight: 700;\n  }\n\n  .pbtest-result-text {\n    line-height: 1.8;\n    font-size: 17px;\n    text-align: left;\n  }\n\n  .pbtest-chart-container {\n    background: rgba(255, 255, 255, 0.8);\n    padding: calc(var(--pbtest-spacing-unit) * 3);\n    border-radius: var(--pbtest-border-radius);\n    margin: calc(var(--pbtest-spacing-unit) * 4) 0;\n    box-shadow: 0 3px 15px rgba(204, 0, 102, 0.1);\n  }\n\n  .pbtest-chart-heading {\n    color: var(--pbtest-primary);\n    text-align: center;\n    margin-bottom: calc(var(--pbtest-spacing-unit) * 3);\n    font-size: 22px;\n  }\n\n  .pbtest-chart-wrapper {\n    max-width: 500px;\n    height: 300px;\n    margin: 0 auto;\n  }\n\n  .pbtest-legend-container {\n    display: flex;\n    justify-content: center;\n    gap: calc(var(--pbtest-spacing-unit) * 3);\n    margin-top: calc(var(--pbtest-spacing-unit) * 2);\n  }\n\n  .pbtest-legend-item {\n    display: flex;\n    align-items: center;\n    gap: calc(var(--pbtest-spacing-unit) * 1);\n  }\n\n  .pbtest-legend-color {\n    width: 16px;\n    height: 16px;\n    border-radius: 4px;\n  }\n\n  .pbtest-legend-text {\n    font-size: 16px;\n    color: var(--pbtest-text-light);\n  }\n\n  .pbtest-tips-container {\n    background: rgba(255, 255, 255, 0.8);\n    padding: calc(var(--pbtest-spacing-unit) * 3);\n    border-radius: var(--pbtest-border-radius);\n    margin-bottom: calc(var(--pbtest-spacing-unit) * 4);\n    box-shadow: 0 3px 15px rgba(204, 0, 102, 0.1);\n    border-left: 5px solid var(--pbtest-primary-light);\n  }\n\n  .pbtest-tips-heading {\n    color: var(--pbtest-primary);\n    text-align: center;\n    margin-bottom: calc(var(--pbtest-spacing-unit) * 2);\n    font-size: 22px;\n  }\n\n  .pbtest-tips-content {\n    font-size: 16px;\n    line-height: 1.7;\n  }\n\n  .pbtest-tips-content ul {\n    list-style-position: inside;\n    padding-left: calc(var(--pbtest-spacing-unit) * 2);\n  }\n\n  .pbtest-tips-content li {\n    margin-bottom: calc(var(--pbtest-spacing-unit) * 1);\n  }\n\n  \/* \u6309\u9215\u6a23\u5f0f *\/\n  .pbtest-btn {\n    display: inline-block;\n    background: var(--pbtest-button-gradient);\n    color: white;\n    font-size: 18px;\n    font-weight: 600;\n    padding: calc(var(--pbtest-spacing-unit) * 2) calc(var(--pbtest-spacing-unit) * 4);\n    border: none;\n    border-radius: 50px;\n    cursor: pointer;\n    transition: var(--pbtest-transition);\n    box-shadow: 0 4px 10px rgba(204, 0, 102, 0.3);\n    min-height: 52px;\n    min-width: 180px;\n    text-align: center;\n  }\n\n  .pbtest-btn:hover {\n    transform: translateY(-3px);\n    box-shadow: 0 6px 15px rgba(204, 0, 102, 0.4);\n    background: var(--pbtest-button-hover-gradient);\n  }\n\n  .pbtest-btn:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    transform: none;\n    box-shadow: none;\n  }\n\n  .pbtest-primary-btn {\n    background: var(--pbtest-button-gradient);\n    display: block;\n    margin: 0 auto;\n    min-width: 200px;\n  }\n\n  .pbtest-secondary-btn {\n    background: rgba(204, 0, 102, 0.15);\n    color: var(--pbtest-primary);\n  }\n\n  .pbtest-secondary-btn:hover {\n    background: rgba(204, 0, 102, 0.25);\n  }\n\n  \/* \u52d5\u756b *\/\n  @keyframes fadeIn {\n    from { opacity: 0; transform: translateY(10px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n  \n  @keyframes pulse {\n    0% { transform: scale(1); }\n    50% { transform: scale(1.05); }\n    100% { transform: scale(1); }\n  }\n\n  \/* \u97ff\u61c9\u5f0f\u6a23\u5f0f *\/\n  @media (max-width: 768px) {\n    .pbtest-module {\n      margin: 1rem;\n      width: auto;\n    }\n\n    .pbtest-section {\n      padding: calc(var(--pbtest-spacing-unit) * 3);\n    }\n\n    .pbtest-features {\n      flex-direction: column;\n      gap: calc(var(--pbtest-spacing-unit) * 2);\n    }\n\n    .pbtest-title {\n      font-size: 26px;\n    }\n\n    .pbtest-subtitle {\n      font-size: 16px;\n    }\n    \n    .pbtest-chart-wrapper {\n      height: 250px;\n    }\n  }\n\n  @media (max-width: 576px) {\n    .pbtest-section {\n      padding: calc(var(--pbtest-spacing-unit) * 2);\n    }\n\n    .pbtest-options {\n      grid-template-columns: 1fr;\n    }\n\n    .pbtest-option {\n      padding: calc(var(--pbtest-spacing-unit) * 2);\n      min-height: 100px;\n    }\n\n    .pbtest-title {\n      font-size: 24px;\n    }\n    \n    .pbtest-question h3 {\n      font-size: 20px;\n    }\n    \n    .pbtest-result-heading {\n      font-size: 22px;\n    }\n    \n    .pbtest-chart-heading,\n    .pbtest-tips-heading {\n      font-size: 20px;\n    }\n    \n    .pbtest-legend-container {\n      flex-direction: column;\n      align-items: center;\n      gap: calc(var(--pbtest-spacing-unit) * 1);\n    }\n  }\n<\/style>\n\n<script>\n\/\/ \u4f7f\u7528IIFE\u907f\u514d\u5168\u5c40\u8b8a\u91cf\u6c61\u67d3\n(function() {\n  \/\/ \u6aa2\u67e5Chart.js\u662f\u5426\u5df2\u52a0\u8f09\uff0c\u5982\u679c\u6c92\u6709\u5247\u52a0\u8f09\n  function loadChartJS() {\n    return new Promise((resolve, reject) => {\n      if (window.Chart) {\n        resolve(window.Chart);\n        return;\n      }\n      \n      const script = document.createElement('script');\n      script.src = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js';\n      script.onload = () => resolve(window.Chart);\n      script.onerror = () => reject(new Error('\u7121\u6cd5\u52a0\u8f09Chart.js'));\n      document.head.appendChild(script);\n    });\n  }\n\n  \/\/ \u6e2c\u9a57\u6578\u64da\n  const quizData = {\n    questions: [\n      {\n        text: \"\u6253\u958b\u9580\uff0c\u4f60\u770b\u5230\u81ea\u5bb6\u9580\u53e3\u653e\u8457\u4e00\u96bb\u6de1\u7c89\u8272\u7684\u76d2\u5b50\uff0c\u4f60\u8a8d\u70ba\u6253\u958b\u76d2\u5b50\u5f8c\uff0c\u81ea\u5df1\u66f4\u6709\u53ef\u80fd\u770b\u5230\u4ee5\u4e0b\u54ea\u4ef6\u7269\u54c1\uff1f\",\n        options: [\n          { icon: \"\ud83d\udc90\", text: \"\u4e00\u5c0f\u675f\u82b1\", value: \"A\" },\n          { icon: \"\ud83c\udf6b\", text: \"\u4e00\u4e9b\u5de7\u514b\u529b\", value: \"B\" },\n          { icon: \"\ud83c\udf8e\", text: \"\u4e00\u500bSD\u5a03\u5a03\", value: \"C\" },\n          { icon: \"\ud83c\udfb5\", text: \"\u4e00\u500b\u516b\u97f3\u76d2\", value: \"D\" }\n        ]\n      },\n      {\n        text: \"\u7576\u4f60\u8d70\u5728\u8857\u4e0a\uff0c\u7a81\u7136\u6709\u4e00\u500b\u964c\u751f\u4eba\u5411\u4f60\u642d\u8a15\uff0c\u4f60\u7684\u7b2c\u4e00\u53cd\u61c9\u662f\uff1f\",\n        options: [\n          { icon: \"\ud83d\ude0a\", text: \"\u79ae\u8c8c\u56de\u61c9\uff0c\u4e26\u53ef\u80fd\u7e7c\u7e8c\u4ea4\u8ac7\", value: \"A\" },\n          { icon: \"\ud83d\ude42\", text: \"\u7c21\u77ed\u56de\u61c9\u5f8c\u7e7c\u7e8c\u81ea\u5df1\u7684\u8def\", value: \"B\" },\n          { icon: \"\ud83d\ude10\", text: \"\u8b66\u60d5\u5730\u4fdd\u6301\u8ddd\u96e2\uff0c\u7c21\u77ed\u56de\u61c9\", value: \"C\" },\n          { icon: \"\ud83d\udeb6\u200d\u2640\ufe0f\", text: \"\u76f4\u63a5\u7121\u8996\u4e26\u8d70\u958b\", value: \"D\" }\n        ]\n      },\n      {\n        text: \"\u670b\u53cb\u9080\u8acb\u4f60\u53c3\u52a0\u4e00\u500b\u6d3e\u5c0d\uff0c\u4f60\u767c\u73fe\u6d3e\u5c0d\u4e0a\u6709\u8a31\u591a\u964c\u751f\u4eba\uff0c\u4f60\u6703\uff1f\",\n        options: [\n          { icon: \"\ud83c\udf89\", text: \"\u7a4d\u6975\u4e3b\u52d5\u8207\u65b0\u670b\u53cb\u4ea4\u8ac7\", value: \"A\" },\n          { icon: \"\ud83d\udc6f\u200d\u2640\ufe0f\", text: \"\u8207\u670b\u53cb\u4e00\u8d77\uff0c\u5076\u723e\u8207\u65b0\u670b\u53cb\u804a\u5929\", value: \"B\" },\n          { icon: \"\ud83d\udc65\", text: \"\u4e3b\u8981\u8207\u8a8d\u8b58\u7684\u4eba\u4ea4\u6d41\uff0c\u907f\u514d\u964c\u751f\u4eba\", value: \"C\" },\n          { icon: \"\ud83c\udfe0\", text: \"\u611f\u5230\u4e0d\u81ea\u5728\uff0c\u5e0c\u671b\u76e1\u5feb\u96e2\u958b\", value: \"D\" }\n        ]\n      },\n      {\n        text: \"\u4f60\u66f4\u50be\u5411\u65bc\u54ea\u7a2e\u985e\u578b\u7684\u7d04\u6703\uff1f\",\n        options: [\n          { icon: \"\ud83c\udfa2\", text: \"\u523a\u6fc0\u7684\u5192\u96aa\u6d3b\u52d5\uff0c\u5982\u4e3b\u984c\u6a02\u5712\u6216\u6236\u5916\u904b\u52d5\", value: \"A\" },\n          { icon: \"\u2615\", text: \"\u5b89\u975c\u7684\u5496\u5561\u5ef3\u6216\u9910\u5ef3\u804a\u5929\", value: \"B\" },\n          { icon: \"\ud83c\udfa8\", text: \"\u4e00\u8d77\u53c3\u52a0\u6709\u5171\u540c\u8208\u8da3\u7684\u6d3b\u52d5\u6216\u5de5\u4f5c\u574a\", value: \"C\" },\n          { icon: \"\ud83c\udf7f\", text: \"\u5728\u5bb6\u770b\u96fb\u5f71\u6216\u505a\u98ef\", value: \"D\" }\n        ]\n      },\n      {\n        text: \"\u7576\u4f60\u559c\u6b61\u4e0a\u4e00\u500b\u4eba\u6642\uff0c\u4f60\u901a\u5e38\u6703\uff1f\",\n        options: [\n          { icon: \"\ud83d\udc98\", text: \"\u76f4\u63a5\u8868\u9054\u81ea\u5df1\u7684\u611f\u53d7\", value: \"A\" },\n          { icon: \"\ud83d\udd0d\", text: \"\u8a66\u63a2\u5c0d\u65b9\u7684\u53cd\u61c9\uff0c\u518d\u6c7a\u5b9a\u662f\u5426\u8868\u767d\", value: \"B\" },\n          { icon: \"\ud83d\udc40\", text: \"\u9ed8\u9ed8\u95dc\u6ce8\uff0c\u7b49\u5f85\u5408\u9069\u7684\u6a5f\u6703\", value: \"C\" },\n          { icon: \"\ud83d\ude48\", text: \"\u4fdd\u6301\u8ddd\u96e2\uff0c\u64d4\u5fc3\u88ab\u62d2\u7d55\", value: \"D\" }\n        ]\n      }\n    ],\n    results: {\n      \"A\": {\n        title: \"\u4f60\u7684\u6843\u82b1\u904b\u8d85\u65fa\",\n        text: \"\u4f60\u7684\u6843\u82b1\u904b\u8d85\u65fa\u3002\u4f60\u7684\u793e\u4ea4\u6d3b\u52d5\u975e\u5e38\u8c50\u5bcc\uff0c\u6703\u7d50\u8b58\u5404\u7a2e\u985e\u578b\u7684\u670b\u53cb\uff0c\u5176\u4e2d\u5305\u62ec\u689d\u4ef6\u4e0d\u932f\u7684\u7570\u6027\u670b\u53cb\uff0c\u800c\u4f60\u7684\u500b\u4eba\u9b45\u529b\u4e5f\u80fd\u5728\u5404\u7a2e\u805a\u6703\u4e2d\u6563\u767c\u51fa\u4f86\uff0c\u53ef\u4ee5\u5438\u5f15\u5230\u4e0d\u540c\u7684\u7570\u6027\uff0c\u8eab\u908a\u7684\u8ffd\u6c42\u8005\u633a\u591a\u7684\uff0c\u4ee5\u4ec0\u9ebc\u59ff\u614b\u53bb\u9762\u5c0d\u9019\u4e9b\u8ffd\u6c42\u8005\uff0c\u662f\u4f60\u9700\u8981\u8003\u616e\u7684\u554f\u984c\uff0c\u592a\u9a55\u50b2\u53ef\u80fd\u6703\u7d66\u9031\u906d\u7684\u4eba\u7559\u4e0b\u60e1\u52a3\u5370\u8c61\uff0c\u592a\u4f4e\u8abf\u6709\u53ef\u80fd\u6703\u932f\u904e\u5c6c\u65bc\u81ea\u5df1\u7684\u7de3\u5206\u3002\",\n        scores: {\n          \u793e\u4ea4\u529b: 90,\n          \u9b45\u529b\u503c: 85,\n          \u958b\u653e\u5ea6: 80,\n          \u4e3b\u52d5\u6027: 85,\n          \u7de3\u5206\u6307\u6578: 90\n        },\n        tips: [\n          \"\u4fdd\u6301\u4f60\u5916\u5411\u7684\u6027\u683c\uff0c\u4f46\u4e5f\u8981\u7559\u610f\u4e0d\u8981\u7d66\u4eba\u7559\u4e0b\u592a\u904e\u8f15\u6d6e\u7684\u5370\u8c61\",\n          \"\u53c3\u52a0\u66f4\u591a\u793e\u4ea4\u6d3b\u52d5\uff0c\u64f4\u5927\u793e\u4ea4\u5708\uff0c\u589e\u52a0\u9047\u5230\u826f\u7de3\u7684\u6a5f\u6703\",\n          \"\u9069\u7576\u5c55\u793a\u81ea\u5df1\u7684\u512a\u9ede\u548c\u624d\u83ef\uff0c\u4f46\u4e0d\u8981\u523b\u610f\u70ab\u8000\",\n          \"\u5b78\u6703\u7be9\u9078\u9069\u5408\u81ea\u5df1\u7684\u5c0d\u8c61\uff0c\u4e0d\u8981\u56e0\u70ba\u6843\u82b1\u591a\u800c\u8ff7\u5931\u65b9\u5411\",\n          \"\u7d66\u5c0d\u65b9\u7559\u4e0b\u6df1\u523b\u5370\u8c61\uff0c\u4fdd\u6301\u771f\u8aa0\u7684\u6e9d\u901a\u548c\u4e92\u52d5\"\n        ]\n      },\n      \"B\": {\n        title: \"\u4f60\u7684\u6843\u82b1\u904b\u9084\u4e0d\u932f\",\n        text: \"\u4f60\u7684\u6843\u82b1\u904b\u9084\u4e0d\u932f\u3002\u7a4d\u6975\u7684\u53c3\u8207\u5230\u793e\u4ea4\u6d3b\u52d5\u4e2d\uff0c\u6703\u8a8d\u8b58\u6709\u8da3\u7684\u7570\u6027\uff0c\u53ef\u80fd\u6703\u8ddf\u5176\u4e2d\u67d0\u500b\u4eba\u958b\u5c55\u66d6\u6627\u95dc\u4fc2\u3002\u96d6\u7136\u672a\u5fc5\u6703\u767c\u5c55\u6210\u6b63\u5f0f\u6200\u60c5\uff0c\u751c\u871c\u7684\u66d6\u6627\uff0c\u537b\u4e5f\u80fd\u7d66\u4f60\u5e36\u4f86\u4e00\u4efd\u597d\u5fc3\u60c5\uff0c\u4e0d\u904e\u5c0d\u4f60\u4f86\u8aaa\uff0c\u6700\u91cd\u8981\u7684\u4e8b\u60c5\u662f\u64fa\u812b\u55ae\u8eab\u8eab\u4efd\uff0c\u6240\u4ee5\u53ef\u4ee5\u8a66\u8457\u548c\u611f\u89ba\u6700\u597d\u7684\u7570\u6027\u76f8\u8655\uff0c\u8aaa\u4e0d\u5b9a\u5230\u4e86\u5e74\u5e95\uff0c\u5728\u60c5\u611f\u65b9\u9762\u6703\u53d6\u5f97\u5f88\u5927\u7684\u9032\u6b65\u3002\",\n        scores: {\n          \u793e\u4ea4\u529b: 75,\n          \u9b45\u529b\u503c: 70,\n          \u958b\u653e\u5ea6: 65,\n          \u4e3b\u52d5\u6027: 70,\n          \u7de3\u5206\u6307\u6578: 75\n        },\n        tips: [\n          \"\u591a\u4e3b\u52d5\u8868\u9054\u81ea\u5df1\u7684\u611f\u53d7\uff0c\u4e0d\u8981\u5bb3\u6015\u88ab\u62d2\u7d55\",\n          \"\u53c3\u52a0\u4e00\u4e9b\u8207\u81ea\u5df1\u8208\u8da3\u76f8\u7b26\u7684\u6d3b\u52d5\uff0c\u66f4\u5bb9\u6613\u9047\u5230\u5fd7\u540c\u9053\u5408\u7684\u4eba\",\n          \"\u9069\u7576\u63d0\u5347\u81ea\u5df1\u7684\u5916\u8868\u5f62\u8c61\uff0c\u589e\u52a0\u81ea\u4fe1\u5fc3\",\n          \"\u4fdd\u6301\u826f\u597d\u7684\u6e9d\u901a\u7fd2\u6163\uff0c\u5b78\u6703\u50be\u807d\u5c0d\u65b9\u7684\u9700\u6c42\u548c\u60f3\u6cd5\",\n          \"\u4e0d\u8981\u5c0d\u95dc\u4fc2\u62b1\u6709\u592a\u9ad8\u671f\u671b\uff0c\u9806\u5176\u81ea\u7136\u767c\u5c55\u66f4\u5bb9\u6613\u6536\u7a6b\u771f\u611b\"\n        ]\n      },\n      \"C\": {\n        title: \"\u4f60\u7684\u6843\u82b1\u904b\u4e0d\u592a\u597d\",\n        text: \"\u4f60\u7684\u6843\u82b1\u904b\u4e0d\u592a\u597d\u3002\u5de5\u4f5c\u4efb\u52d9\u6bd4\u8f03\u7e41\u91cd\uff0c\u751f\u6d3b\u4e0a\u7684\u7463\u4e8b\u4e5f\u6bd4\u8f03\u591a\uff0c\u4f60\u6c92\u6709\u4ec0\u9ebc\u5fc3\u60c5\u53bb\u9762\u5c0d\u611f\u60c5\u4e0a\u7684\u554f\u984c\u3002\u800c\u81ea\u5df1\u672c\u8eab\u80fd\u5f97\u5230\u7684\u793e\u4ea4\u6a5f\u6703\u4e5f\u4e0d\u662f\u5f88\u591a\uff0c\u8eab\u908a\u53ea\u6709\u8001\u670b\u53cb\uff0c\u4e0d\u592a\u6709\u53ef\u80fd\u7d50\u8b58\u65b0\u670b\u53cb\u3002\u60f3\u8981\u589e\u5f37\u6843\u82b1\u904b\uff0c\u53ef\u4ee5\u7d66\u81ea\u5df1\u88fd\u9020\u4e00\u4e9b\u5916\u51fa\u7684\u6a5f\u6703\uff0c\u63a5\u53d7\u51fa\u5dee\u4efb\u52d9\uff0c\u6216\u8005\u5b89\u6392\u65c5\u884c\uff0c\u6709\u53ef\u80fd\u6703\u9047\u5230\u6843\u82b1\u3002\",\n        scores: {\n          \u793e\u4ea4\u529b: 50,\n          \u9b45\u529b\u503c: 55,\n          \u958b\u653e\u5ea6: 45,\n          \u4e3b\u52d5\u6027: 40,\n          \u7de3\u5206\u6307\u6578: 55\n        },\n        tips: [\n          \"\u5617\u8a66\u8d70\u51fa\u8212\u9069\u5708\uff0c\u53c3\u52a0\u4e00\u4e9b\u65b0\u7684\u793e\u4ea4\u6d3b\u52d5\",\n          \"\u653e\u9b06\u5fc3\u614b\uff0c\u4e0d\u8981\u5c0d\u611f\u60c5\u62b1\u6709\u592a\u5927\u58d3\u529b\",\n          \"\u5229\u7528\u7db2\u7d61\u793e\u4ea4\u5e73\u53f0\u64f4\u5c55\u793e\u4ea4\u5708\uff0c\u4f46\u6ce8\u610f\u5b89\u5168\",\n          \"\u5c0b\u627e\u63d0\u5347\u81ea\u6211\u7684\u6a5f\u6703\uff0c\u589e\u52a0\u500b\u4eba\u9b45\u529b\",\n          \"\u6539\u8b8a\u65e5\u5e38\u751f\u6d3b\u8def\u7dda\u548c\u7fd2\u6163\uff0c\u589e\u52a0\u9047\u5230\u65b0\u670b\u53cb\u7684\u53ef\u80fd\u6027\"\n        ]\n      },\n      \"D\": {\n        title: \"\u4f60\u7684\u6843\u82b1\u904b\u5f88\u5dee\u52c1\",\n        text: \"\u4f60\u7684\u6843\u82b1\u904b\u5f88\u5dee\u52c1\u3002\u5373\u4f7f\u52aa\u529b\u53bb\u722d\u53d6\u6843\u82b1\uff0c\u6548\u679c\u4e5f\u4e0d\u662f\u5f88\u597d\uff0c\u53ef\u4ee5\u5927\u65b9\u63a5\u53d7\u89aa\u53cb\u7684\u76f8\u89aa\u5b89\u6392\uff0c\u4e0d\u904e\u5225\u6307\u671b\u901a\u904e\u76f8\u89aa\u9047\u5230\u9069\u5408\u81ea\u5df1\u7684\u4f34\u4fb6\uff0c\u4e0d\u6703\u5728\u76f8\u89aa\u4e2d\u9047\u5230\u9069\u5408\u81ea\u5df1\u76f8\u8655\u7684\u670b\u53cb\uff0c\u4f46\u611f\u60c5\u65b9\u9762\u7684\u76ee\u6a19\u5e7e\u4e4e\u4e0d\u53ef\u80fd\u901a\u904e\u76f8\u89aa\u5be6\u73fe\uff0c\u65e2\u7136\u6843\u82b1\u904b\u4e0d\u662f\u5f88\u597d\uff0c\u4e0d\u59a8\u628a\u7cbe\u529b\u548c\u6642\u9593\u82b1\u5230\u5b78\u696d\u6216\u4e8b\u696d\u4e0a\u5427\u3002\",\n        scores: {\n          \u793e\u4ea4\u529b: 30,\n          \u9b45\u529b\u503c: 35,\n          \u958b\u653e\u5ea6: 25,\n          \u4e3b\u52d5\u6027: 20,\n          \u7de3\u5206\u6307\u6578: 30\n        },\n        tips: [\n          \"\u5148\u5c08\u6ce8\u63d0\u5347\u81ea\u6211\u50f9\u503c\uff0c\u589e\u5f37\u81ea\u4fe1\u5fc3\",\n          \"\u8abf\u6574\u5fc3\u614b\uff0c\u4e0d\u8981\u6025\u65bc\u6c42\u6210\uff0c\u611f\u60c5\u9700\u8981\u81ea\u7136\u767c\u5c55\",\n          \"\u53ef\u4ee5\u8003\u616e\u5c0b\u6c42\u5c08\u696d\u5f62\u8c61\u9867\u554f\u7684\u5efa\u8b70\uff0c\u6539\u5584\u81ea\u5df1\u7684\u5916\u8868\u5f62\u8c61\",\n          \"\u5617\u8a66\u65b0\u7684\u793e\u4ea4\u65b9\u5f0f\uff0c\u5982\u53c3\u52a0\u8208\u8da3\u73ed\u6216\u5fd7\u9858\u6d3b\u52d5\",\n          \"\u66ab\u6642\u5c07\u91cd\u5fc3\u653e\u5728\u4e8b\u696d\u548c\u500b\u4eba\u6210\u9577\u4e0a\uff0c\u597d\u7684\u6843\u82b1\u904b\u6703\u5728\u9069\u7576\u7684\u6642\u6a5f\u5230\u4f86\"\n        ]\n      }\n    }\n  };\n\n  \/\/ \u9632\u6296\u51fd\u6578\n  function debounce(func, wait) {\n    let timeout;\n    return function(...args) {\n      const context = this;\n      clearTimeout(timeout);\n      timeout = setTimeout(() => func.apply(context, args), wait);\n    };\n  }\n\n  \/\/ \u4e3b\u61c9\u7528\u985e\n  class PeachBlossomTest {\n    constructor() {\n      this.currentQuestionIndex = 0;\n      this.userAnswers = [];\n      this.totalQuestions = quizData.questions.length;\n      this.chart = null;\n      \n      \/\/ \u7372\u53d6DOM\u5143\u7d20\n      this.introSection = document.getElementById('pbtest-intro');\n      this.quizSection = document.getElementById('pbtest-quiz');\n      this.resultsSection = document.getElementById('pbtest-results');\n      this.questionsContainer = document.getElementById('pbtest-questions-container');\n      this.progressFill = document.querySelector('.pbtest-progress-fill');\n      this.currentQuestionSpan = document.getElementById('pbtest-current-question');\n      this.totalQuestionsSpan = document.getElementById('pbtest-total-questions');\n      this.prevButton = document.getElementById('pbtest-prev-btn');\n      this.resultText = document.querySelector('.pbtest-result-text');\n      this.resultTitle = document.getElementById('pbtest-result-title');\n      this.tipsContent = document.getElementById('pbtest-tips-content');\n      this.chartContainer = document.getElementById('pbtest-result-chart');\n      \n      \/\/ \u8a2d\u7f6e\u7e3d\u554f\u984c\u6578\n      this.totalQuestionsSpan.textContent = this.totalQuestions.toString();\n      \n      \/\/ \u7d81\u5b9a\u4e8b\u4ef6\n      this.bindEvents();\n      \n      \/\/ \u521d\u59cb\u5316\u6e2c\u9a57\n      this.initQuiz();\n      \n      \/\/ \u7d81\u5b9a\u7a97\u53e3\u8abf\u6574\u5927\u5c0f\u4e8b\u4ef6\n      window.addEventListener('resize', debounce(() => {\n        if (this.chart) {\n          this.chart.resize();\n        }\n      }, 250));\n    }\n    \n    \/\/ \u7d81\u5b9a\u4e8b\u4ef6\n    bindEvents() {\n      document.getElementById('pbtest-start-btn').addEventListener('click', () => this.startQuiz());\n      this.prevButton.addEventListener('click', () => this.showPreviousQuestion());\n      document.getElementById('pbtest-restart-btn').addEventListener('click', () => this.restartQuiz());\n    }\n    \n    \/\/ \u521d\u59cb\u5316\u6e2c\u9a57\n    initQuiz() {\n      \/\/ \u5275\u5efa\u554f\u984c\n      this.createQuestions();\n    }\n    \n    \/\/ \u5275\u5efa\u554f\u984c\n    createQuestions() {\n      quizData.questions.forEach((question, index) => {\n        const questionDiv = document.createElement('div');\n        questionDiv.className = 'pbtest-question';\n        questionDiv.id = `pbtest-question-${index}`;\n        questionDiv.setAttribute('aria-labelledby', `pbtest-question-title-${index}`);\n        \n        const questionTitle = document.createElement('h3');\n        questionTitle.id = `pbtest-question-title-${index}`;\n        questionTitle.textContent = question.text;\n        questionDiv.appendChild(questionTitle);\n        \n        const optionsDiv = document.createElement('div');\n        optionsDiv.className = 'pbtest-options';\n        \n        question.options.forEach((option, optionIndex) => {\n          const optionButton = document.createElement('button');\n          optionButton.className = 'pbtest-option';\n          optionButton.dataset.value = option.value;\n          optionButton.setAttribute('aria-label', option.text);\n          optionButton.setAttribute('role', 'radio');\n          optionButton.setAttribute('aria-checked', 'false');\n          \n          if (option.icon) {\n            const optionIcon = document.createElement('div');\n            optionIcon.className = 'pbtest-option-icon';\n            optionIcon.textContent = option.icon;\n            optionButton.appendChild(optionIcon);\n          }\n          \n          const optionText = document.createElement('div');\n          optionText.className = 'pbtest-option-text';\n          optionText.textContent = option.text;\n          \n          optionButton.appendChild(optionText);\n          optionsDiv.appendChild(optionButton);\n          \n          optionButton.addEventListener('click', () => this.selectOption(index, option.value));\n        });\n        \n        questionDiv.appendChild(optionsDiv);\n        this.questionsContainer.appendChild(questionDiv);\n      });\n    }\n    \n    \/\/ \u958b\u59cb\u6e2c\u9a57\n    startQuiz() {\n      this.introSection.classList.remove('pbtest-active');\n      this.quizSection.classList.add('pbtest-active');\n      this.showQuestion(0);\n      \n      \/\/ \u6efe\u52d5\u5230\u9802\u90e8\n      this.scrollToElement(this.quizSection);\n    }\n    \n    \/\/ \u986f\u793a\u554f\u984c\n    showQuestion(index) {\n      \/\/ \u96b1\u85cf\u6240\u6709\u554f\u984c\n      document.querySelectorAll('.pbtest-question').forEach(q => q.classList.remove('pbtest-active'));\n      \n      \/\/ \u986f\u793a\u7576\u524d\u554f\u984c\n      document.getElementById(`pbtest-question-${index}`).classList.add('pbtest-active');\n      \n      \/\/ \u66f4\u65b0\u9032\u5ea6\n      this.currentQuestionIndex = index;\n      this.currentQuestionSpan.textContent = (index + 1).toString();\n      this.progressFill.style.width = `${((index + 1) \/ this.totalQuestions) * 100}%`;\n      \n      \/\/ \u66f4\u65b0\u4e0a\u4e00\u984c\u6309\u9215\u72c0\u614b\n      this.prevButton.disabled = index === 0;\n      \n      \/\/ \u5982\u679c\u4e4b\u524d\u5df2\u7d93\u9078\u64c7\u904e\u7b54\u6848\uff0c\u6a19\u8a18\u70ba\u9078\u4e2d\n      if (this.userAnswers[index]) {\n        const selectedOption = document.querySelector(`#pbtest-question-${index} .pbtest-option[data-value=\"${this.userAnswers[index]}\"]`);\n        if (selectedOption) {\n          document.querySelectorAll(`#pbtest-question-${index} .pbtest-option`).forEach(o => {\n            o.classList.remove('pbtest-selected');\n            o.setAttribute('aria-checked', 'false');\n          });\n          selectedOption.classList.add('pbtest-selected');\n          selectedOption.setAttribute('aria-checked', 'true');\n        }\n      }\n      \n      \/\/ \u6efe\u52d5\u5230\u9802\u90e8\n      this.scrollToElement(this.quizSection);\n    }\n    \n    \/\/ \u9078\u64c7\u9078\u9805\n    selectOption(questionIndex, value) {\n      \/\/ \u4fdd\u5b58\u7b54\u6848\n      this.userAnswers[questionIndex] = value;\n      \n      \/\/ \u6a19\u8a18\u9078\u64c7\u7684\u9078\u9805\n      document.querySelectorAll(`#pbtest-question-${questionIndex} .pbtest-option`).forEach(o => {\n        o.classList.remove('pbtest-selected');\n        o.setAttribute('aria-checked', 'false');\n      });\n      const selectedOption = document.querySelector(`#pbtest-question-${questionIndex} .pbtest-option[data-value=\"${value}\"]`);\n      selectedOption.classList.add('pbtest-selected');\n      selectedOption.setAttribute('aria-checked', 'true');\n      \n      \/\/ \u5982\u679c\u662f\u6700\u5f8c\u4e00\u500b\u554f\u984c\uff0c\u986f\u793a\u7d50\u679c\n      if (questionIndex === this.totalQuestions - 1) {\n        setTimeout(() => {\n          this.showResults();\n        }, 500);\n      } else {\n        \/\/ \u5426\u5247\u986f\u793a\u4e0b\u4e00\u500b\u554f\u984c\n        setTimeout(() => {\n          this.showQuestion(questionIndex + 1);\n        }, 300);\n      }\n    }\n    \n    \/\/ \u986f\u793a\u4e0a\u4e00\u500b\u554f\u984c\n    showPreviousQuestion() {\n      if (this.currentQuestionIndex > 0) {\n        this.showQuestion(this.currentQuestionIndex - 1);\n      }\n    }\n    \n    \/\/ \u986f\u793a\u7d50\u679c\n    async showResults() {\n      \/\/ \u8a08\u7b97\u7d50\u679c\n      const result = this.calculateResult();\n      \n      \/\/ \u66f4\u65b0\u7d50\u679c\u5167\u5bb9\n      this.resultTitle.textContent = result.title;\n      this.resultText.innerHTML = result.text;\n      \n      \/\/ \u66f4\u65b0\u5c0f\u8cbc\u58eb\n      this.updateTips(result.tips);\n      \n      \/\/ \u986f\u793a\u7d50\u679c\u9801\n      this.quizSection.classList.remove('pbtest-active');\n      this.resultsSection.classList.add('pbtest-active');\n      \n      \/\/ \u7e6a\u88fd\u5716\u8868\n      try {\n        const Chart = await loadChartJS();\n        this.drawResultChart(result.scores, Chart);\n      } catch (error) {\n        console.error('\u7121\u6cd5\u52a0\u8f09Chart.js:', error);\n        document.querySelector('.pbtest-chart-container').style.display = 'none';\n      }\n      \n      \/\/ \u6efe\u52d5\u5230\u9802\u90e8\n      this.scrollToElement(this.resultsSection);\n    }\n    \n    \/\/ \u66f4\u65b0\u5c0f\u8cbc\u58eb\n    updateTips(tips) {\n      if (!tips || !tips.length) {\n        document.querySelector('.pbtest-tips-container').style.display = 'none';\n        return;\n      }\n      \n      const tipsHtml = `\n        <ul>\n          ${tips.map(tip => `<li>${tip}<\/li>`).join('')}\n        <\/ul>\n      `;\n      \n      this.tipsContent.innerHTML = tipsHtml;\n    }\n    \n    \/\/ \u8a08\u7b97\u7d50\u679c\n    calculateResult() {\n      \/\/ \u7d71\u8a08\u5404\u9078\u9805\u7684\u6b21\u6578\n      const counts = {};\n      this.userAnswers.forEach(answer => {\n        counts[answer] = (counts[answer] || 0) + 1;\n      });\n      \n      \/\/ \u627e\u51fa\u6700\u591a\u9078\u64c7\u7684\u9078\u9805\n      let maxCount = 0;\n      let resultType = 'A'; \/\/ \u9ed8\u8a8d\u7d50\u679c\n      \n      for (const answer in counts) {\n        if (counts[answer] > maxCount) {\n          maxCount = counts[answer];\n          resultType = answer;\n        }\n      }\n      \n      return {\n        ...quizData.results[resultType],\n        type: resultType\n      };\n    }\n    \n    \/\/ \u7e6a\u88fd\u7d50\u679c\u5716\u8868\n    drawResultChart(scores, Chart) {\n      const ctx = this.chartContainer.getContext('2d');\n      \n      \/\/ \u5982\u679c\u5df2\u7d93\u6709\u5716\u8868\uff0c\u5148\u92b7\u6bc0\n      if (this.chart) {\n        this.chart.destroy();\n      }\n      \n      const labels = Object.keys(scores);\n      const data = Object.values(scores);\n      \n      \/\/ \u5e73\u5747\u503c\u6578\u64da\n      const averageData = [50, 50, 50, 50, 50];\n      \n      \/\/ \u5275\u5efa\u96f7\u9054\u5716\n      this.chart = new Chart(ctx, {\n        type: 'radar',\n        data: {\n          labels: labels,\n          datasets: [\n            {\n              label: '\u4f60\u7684\u6307\u6578',\n              data: data,\n              backgroundColor: 'rgba(255, 102, 179, 0.7)',\n              borderColor: 'rgba(204, 0, 102, 1)',\n              pointBackgroundColor: 'rgba(204, 0, 102, 1)',\n              pointBorderColor: '#fff',\n              pointHoverBackgroundColor: '#fff',\n              pointHoverBorderColor: 'rgba(204, 0, 102, 1)',\n              borderWidth: 2\n            },\n            {\n              label: '\u5e73\u5747\u6c34\u5e73',\n              data: averageData,\n              backgroundColor: 'rgba(204, 0, 102, 0.3)',\n              borderColor: 'rgba(204, 0, 102, 0.6)',\n              pointBackgroundColor: 'rgba(204, 0, 102, 0.6)',\n              pointBorderColor: '#fff',\n              pointHoverBackgroundColor: '#fff',\n              pointHoverBorderColor: 'rgba(204, 0, 102, 0.6)',\n              borderWidth: 1\n            }\n          ]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          scales: {\n            r: {\n              angleLines: {\n                display: true\n              },\n              suggestedMin: 0,\n              suggestedMax: 100,\n              ticks: {\n                stepSize: 20,\n                font: {\n                  size: 14\n                },\n                backdropColor: 'rgba(255, 255, 255, 0.8)'\n              },\n              pointLabels: {\n                font: {\n                  size: 18,\n                  weight: 'bold'\n                },\n                color: '#7a1f5c'\n              }\n            }\n          },\n          plugins: {\n            legend: {\n              display: false\n            },\n            tooltip: {\n              backgroundColor: 'rgba(255, 255, 255, 0.9)',\n              titleColor: '#cc0066',\n              bodyColor: '#333333',\n              borderColor: '#ff66b3',\n              borderWidth: 1,\n              displayColors: true,\n              padding: 10,\n              callbacks: {\n                label: function(context) {\n                  return context.dataset.label + ': ' + context.raw + '%';\n                }\n              }\n            }\n          }\n        }\n      });\n    }\n    \n    \/\/ \u91cd\u65b0\u6e2c\u9a57\n    restartQuiz() {\n      \/\/ \u91cd\u7f6e\u6578\u64da\n      this.currentQuestionIndex = 0;\n      this.userAnswers = [];\n      \n      \/\/ \u91cd\u7f6eUI\n      document.querySelectorAll('.pbtest-option').forEach(o => {\n        o.classList.remove('pbtest-selected');\n        o.setAttribute('aria-checked', 'false');\n      });\n      this.progressFill.style.width = `${(1 \/ this.totalQuestions) * 100}%`;\n      this.currentQuestionSpan.textContent = '1';\n      \n      \/\/ \u8fd4\u56de\u5f15\u5c0e\u9801\n      this.resultsSection.classList.remove('pbtest-active');\n      this.introSection.classList.add('pbtest-active');\n      \n      \/\/ \u6efe\u52d5\u5230\u9802\u90e8\n      this.scrollToElement(this.introSection);\n    }\n    \n    \/\/ \u6efe\u52d5\u5230\u5143\u7d20\n    scrollToElement(element) {\n      window.scrollTo({\n        top: element.offsetTop - 50,\n        behavior: 'smooth'\n      });\n    }\n  }\n  \n  \/\/ \u7b49\u5f85DOM\u52a0\u8f09\u5b8c\u6210\u5f8c\u521d\u59cb\u5316\u61c9\u7528\n  document.addEventListener('DOMContentLoaded', () => {\n    const app = new PeachBlossomTest();\n  });\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u60f3\u9047\u89c1\u7231\u60c5\uff0c\u5c31\u5fc5\u987b\u62e5\u6709\u826f\u597d\u7684\u6843\u82b1\u8fd0\uff0c\u90a3\u4e48\u4f60\u7684\u6843\u82b1\u6709\u591a\u65fa\u5462\uff1f\u770b\u770b\u4e0b\u9762\u7684\u6d4b\u8bd5\uff0c\u6216\u8bb8\u5c31\u53ef\u77e5\u6653\u7b54\u6848<\/p>","protected":false},"author":19,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"narrow-width-container","site-content-style":"unboxed","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[178],"tags":[],"class_list":["post-2373","post","type-post","status-publish","format-standard","hentry","category-love"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2373","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=2373"}],"version-history":[{"count":5,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2373\/revisions"}],"predecessor-version":[{"id":10361,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2373\/revisions\/10361"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}