{"id":2499,"date":"2023-10-08T09:29:22","date_gmt":"2023-10-08T01:29:22","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2499"},"modified":"2025-08-12T19:06:15","modified_gmt":"2025-08-12T11:06:15","slug":"happy-different-backgrounds","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/happy-different-backgrounds","title":{"rendered":"\u95e8\u4e0d\u5f53\u6237\u4e0d\u5bf9\u4f60\u4f1a\u5e78\u798f\u5417\uff1f \u2192\u7ebf\u4e0a\u514d\u8d39\u6d4b\u9a8c"},"content":{"rendered":"<!-- \u5a5a\u59fb\u5e78\u798f\u6e2c\u9a57\u7cfb\u7d71 - \u73fe\u4ee3\u5316\u7248\u672c -->\n<style>\n  \/* \u5b9a\u7fa9\u8b8a\u6578 - \u4f7f\u7528\u8212\u7de9\u7642\u6108\u7684\u8272\u5f69\u65b9\u6848 *\/\n  :root {\n    \/* \u7642\u6108\u8272\u5f69\u65b9\u6848 *\/\n    --primary-color: #7B9E89;      \/* \u9f20\u5c3e\u8349\u7da0 *\/\n    --primary-light: #A4C3B2;      \/* \u6dfa\u9f20\u5c3e\u8349\u7da0 *\/\n    --primary-dark: #5B7C65;       \/* \u6df1\u9f20\u5c3e\u8349\u7da0 *\/\n    --accent-color: #E8D5B7;       \/* \u6696\u7c73\u8272 *\/\n    --accent-light: #F4EAD5;       \/* \u6dfa\u6696\u7c73\u8272 *\/\n    --success-color: #A4C3B2;      \/* \u6210\u529f\u7da0 *\/\n    --text-color: #4A5A4E;         \/* \u6df1\u7da0\u7070 *\/\n    --text-light: #6B7F71;         \/* \u6dfa\u7da0\u7070 *\/\n    --card-bg: #FFFFFF;             \/* \u7d14\u767d\u5361\u7247 *\/\n    --border-color: #E5E9E6;       \/* \u6dfa\u7da0\u908a\u6846 *\/\n    \n    \/* \u9670\u5f71 - \u66f4\u67d4\u548c *\/\n    --shadow-sm: 0 2px 8px rgba(123, 158, 137, 0.08);\n    --shadow-md: 0 4px 16px rgba(123, 158, 137, 0.12);\n    --shadow-lg: 0 8px 24px rgba(123, 158, 137, 0.15);\n    --shadow-hover: 0 6px 20px rgba(123, 158, 137, 0.18);\n  }\n  \n  \/* \u5168\u5c40\u6a23\u5f0f - \u9069\u914d750px\u5bb9\u5668 *\/\n  .wm-quiz-system {\n    font-family: \"\u5fae\u8edf\u6b63\u9ed1\u9ad4\", \"Microsoft JhengHei\", \"Segoe UI\", -apple-system, BlinkMacSystemFont, sans-serif;\n    color: var(--text-color);\n    line-height: 1.6;\n    max-width: 750px;\n    width: 100%;\n    margin: 0 auto;\n    padding: 0;\n    box-sizing: border-box;\n  }\n  \n  .wm-quiz-system * {\n    box-sizing: border-box;\n  }\n  \n  \/* \u5bb9\u5668\u6a23\u5f0f - \u7121\u80cc\u666f\u8272 *\/\n  .wm-quiz-container {\n    width: 100%;\n    position: relative;\n  }\n  \n  \/* \u9801\u9762\u6a23\u5f0f - \u79fb\u9664\u52d5\u756b *\/\n  .wm-quiz-page {\n    display: none;\n    padding: 30px 20px;\n    min-height: 400px;\n  }\n  \n  .wm-quiz-page.active {\n    display: block;\n  }\n  \n  \/* \u6a19\u984c\u6a23\u5f0f *\/\n  .wm-quiz-system h2 {\n    font-size: 32px;\n    text-align: center;\n    color: var(--primary-color);\n    margin: 0 0 35px 0;\n    font-weight: 700;\n    line-height: 1.3;\n  }\n  \n  .wm-quiz-system h3 {\n    font-size: 22px;\n    color: var(--text-color);\n    margin: 0 0 25px 0;\n    font-weight: 700;\n    line-height: 1.4;\n  }\n  \n  \/* \u5f15\u5c0e\u9801\u6a23\u5f0f *\/\n  .wm-intro-page {\n    text-align: center;\n  }\n  \n  .wm-quiz-icon-container {\n    display: flex;\n    justify-content: center;\n    gap: 30px;\n    margin: 40px 0;\n  }\n  \n  .wm-quiz-icon {\n    width: 90px;\n    height: 90px;\n    border-radius: 50%;\n    background: linear-gradient(135deg, var(--primary-light), var(--primary-color));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: var(--shadow-md);\n  }\n  \n  .wm-quiz-icon svg {\n    width: 45px;\n    height: 45px;\n  }\n  \n  .wm-intro-content {\n    margin: 35px auto;\n    max-width: 650px;\n    text-align: left;\n  }\n  \n  .wm-intro-content p {\n    font-size: 16px;\n    color: var(--text-light);\n    margin-bottom: 18px;\n    line-height: 1.7;\n  }\n  \n  \/* \u6309\u9215\u6a23\u5f0f *\/\n  .wm-btn {\n    display: inline-block;\n    padding: 14px 36px;\n    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));\n    color: white;\n    font-size: 17px;\n    font-weight: 600;\n    border: none;\n    border-radius: 28px;\n    cursor: pointer;\n    text-align: center;\n    box-shadow: var(--shadow-md);\n    min-width: 160px;\n    transition: all 0.3s ease;\n  }\n  \n  .wm-btn:hover {\n    transform: translateY(-2px);\n    box-shadow: var(--shadow-hover);\n  }\n  \n  .wm-btn:active {\n    transform: translateY(0);\n  }\n  \n  .wm-btn-secondary {\n    background: linear-gradient(135deg, var(--accent-color), #D4C1A3);\n    color: var(--text-color);\n  }\n  \n  \/* \u9032\u5ea6\u689d\u6a23\u5f0f *\/\n  .wm-progress-container {\n    margin: 30px 0;\n  }\n  \n  .wm-progress-text {\n    text-align: center;\n    margin-bottom: 12px;\n    font-size: 16px;\n    color: var(--primary-color);\n    font-weight: 500;\n  }\n  \n  .wm-progress-bar {\n    height: 6px;\n    background-color: var(--border-color);\n    border-radius: 3px;\n    overflow: hidden;\n  }\n  \n  .wm-progress-fill {\n    height: 100%;\n    background: linear-gradient(90deg, var(--primary-light), var(--primary-color));\n    width: 0;\n    transition: width 0.4s ease;\n    border-radius: 3px;\n  }\n  \n  \/* \u554f\u984c\u5bb9\u5668 *\/\n  .wm-question-container {\n    margin: 35px 0;\n  }\n  \n  \/* \u73fe\u4ee3\u5316\u5361\u7247\u9078\u9805\u6a23\u5f0f *\/\n  .wm-option {\n    display: flex;\n    align-items: center;\n    background-color: var(--card-bg);\n    padding: 20px;\n    border-radius: 12px;\n    margin-bottom: 16px;\n    cursor: pointer;\n    border: 2px solid var(--border-color);\n    position: relative;\n    box-shadow: var(--shadow-sm);\n    width: 100%;\n    text-align: left;\n    font-size: 18px;\n    color: var(--text-color);\n    min-height: 70px;\n    transition: all 0.3s ease;\n  }\n  \n  .wm-option:hover {\n    transform: translateX(4px);\n    box-shadow: var(--shadow-hover);\n    border-color: var(--primary-light);\n  }\n  \n  .wm-option.selected {\n    background-color: var(--accent-light);\n    border-color: var(--primary-color);\n    box-shadow: var(--shadow-md);\n  }\n  \n  \/* \u5713\u5f62\u9078\u64c7\u6307\u793a\u5668 *\/\n  .wm-option-indicator {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    border: 2px solid var(--primary-light);\n    margin-right: 18px;\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all 0.3s ease;\n    background-color: white;\n  }\n  \n  .wm-option:hover .wm-option-indicator {\n    border-color: var(--primary-color);\n  }\n  \n  .wm-option.selected .wm-option-indicator {\n    background-color: var(--primary-color);\n    border-color: var(--primary-color);\n  }\n  \n  \/* \u52fe\u865f\u5716\u6a19 *\/\n  .wm-option-indicator::after {\n    content: '';\n    width: 12px;\n    height: 8px;\n    border-left: 2px solid white;\n    border-bottom: 2px solid white;\n    transform: rotate(-45deg);\n    opacity: 0;\n    transition: opacity 0.2s ease;\n    margin-bottom: 2px;\n  }\n  \n  .wm-option.selected .wm-option-indicator::after {\n    opacity: 1;\n  }\n  \n  \/* \u9078\u9805\u6587\u5b57 *\/\n  .wm-option-text {\n    flex: 1;\n    line-height: 1.5;\n  }\n  \n  \/* \u5c0e\u822a\u6309\u9215\u5bb9\u5668 *\/\n  .wm-nav-buttons {\n    display: flex;\n    justify-content: center;\n    gap: 20px;\n    margin-top: 40px;\n  }\n  \n  \/* \u7d50\u679c\u9801\u6a23\u5f0f *\/\n  .wm-result-page {\n    text-align: center;\n  }\n  \n  .wm-result-title {\n    font-size: 26px;\n    color: var(--primary-color);\n    margin-bottom: 25px;\n    text-align: center;\n    font-weight: 600;\n  }\n  \n  .wm-result-description {\n    font-size: 17px;\n    color: var(--text-light);\n    margin-bottom: 35px;\n    text-align: left;\n    line-height: 1.7;\n    padding: 25px;\n    background-color: var(--card-bg);\n    border-radius: 12px;\n    box-shadow: var(--shadow-sm);\n  }\n  \n  .wm-result-advice {\n    margin: 30px 0;\n    padding: 28px;\n    background: linear-gradient(135deg, #FAFBFA, #F5F7F5);\n    border-radius: 12px;\n    box-shadow: var(--shadow-sm);\n    text-align: left;\n    line-height: 1.8;\n    font-size: 16px;\n    color: var(--text-color);\n    border-left: 4px solid var(--primary-color);\n  }\n  \n  .wm-chart-container {\n    max-width: 500px;\n    margin: 40px auto;\n    padding: 20px;\n    background-color: var(--card-bg);\n    border-radius: 12px;\n    box-shadow: var(--shadow-sm);\n  }\n  \n  \/* \u97ff\u61c9\u5f0f\u8a2d\u8a08 *\/\n  @media (max-width: 600px) {\n    .wm-quiz-system h2 {\n      font-size: 26px;\n    }\n    \n    .wm-quiz-system h3 {\n      font-size: 20px;\n    }\n    \n    .wm-quiz-icon-container {\n      gap: 20px;\n    }\n    \n    .wm-quiz-icon {\n      width: 70px;\n      height: 70px;\n    }\n    \n    .wm-quiz-icon svg {\n      width: 35px;\n      height: 35px;\n    }\n    \n    .wm-option {\n      font-size: 16px;\n      padding: 16px;\n    }\n    \n    .wm-option-indicator {\n      width: 20px;\n      height: 20px;\n      margin-right: 14px;\n    }\n    \n    .wm-nav-buttons {\n      flex-direction: column;\n    }\n    \n    .wm-btn {\n      width: 100%;\n    }\n  }\n<\/style>\n\n<div id=\"wm-quiz-system\" class=\"wm-quiz-system\">\n  <div id=\"wm-quiz-container\" class=\"wm-quiz-container\">\n    <!-- \u5f15\u5c0e\u9801 -->\n    <section id=\"wm-intro-page\" class=\"wm-quiz-page wm-intro-page active\">\n      <h2>\u95e8\u4e0d\u5f53\u6237\u4e0d\u5bf9\u4f60\u4f1a\u5e78\u798f\u5417\uff1f<\/h2>\n      \n      <div class=\"wm-quiz-icon-container\">\n        <div class=\"wm-quiz-icon\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"#ffffff\">\n            <path d=\"M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"wm-quiz-icon\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"#ffffff\">\n            <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"wm-quiz-icon\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\" fill=\"#ffffff\">\n            <path d=\"M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23M15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5C17,10.3 16.3,11 15.5,11Z\"\/>\n          <\/svg>\n        <\/div>\n      <\/div>\n      \n      <div class=\"wm-intro-content\">\n        <p>\u957f\u8f88\u4eec\u5e38\u8bf4\u300c\u95e8\u6237\u4e0d\u5f53\u5bf9\uff0c\u5a5a\u59fb\u4e0d\u5e78\u798f\u300d\uff0c\u8fd9\u53e5\u8bdd\u4ee3\u8868\u7740\u4f20\u7edf\u89c2\u5ff5\u5bf9\u5a5a\u59fb\u7684\u770b\u6cd5\u3002\u4f46\u5728\u73b0\u4ee3\u793e\u4f1a\uff0c\u5e74\u8f7b\u4eba\u66f4\u91cd\u89c6\u611f\u60c5\u548c\u4e2a\u4eba\u9009\u62e9\uff0c\u5f88\u591a\u4eba\u613f\u610f\u4e3a\u4e86\u7231\u60c5\u5192\u9669\uff0c\u5c1d\u8bd5\u95e8\u6237\u4e0d\u5bf9\u7684\u5a5a\u59fb\u3002<\/p>\n        \n        <p>\u4f60\u662f\u5426\u4e5f\u66fe\u601d\u8003\u8fc7\u8fd9\u4e2a\u95ee\u9898\uff1f\u5728\u4e0d\u540c\u5bb6\u5ead\u80cc\u666f\u3001\u6587\u5316\u89c2\u5ff5\u3001\u7ecf\u6d4e\u6761\u4ef6\u4e0b\uff0c\u5a5a\u59fb\u80fd\u5426\u5e78\u798f\uff1f\u900f\u8fc7\u8fd9\u4e2a\u6d4b\u9a8c\uff0c\u63a2\u7d22\u4f60\u5bf9\u5a5a\u59fb\u7684\u6001\u5ea6\u548c\u4ef7\u503c\u89c2\uff0c\u4e86\u89e3\u5728\u9762\u5bf9\u300c\u95e8\u4e0d\u5f53\u6237\u4e0d\u5bf9\u300d\u7684\u60c5\u51b5\u4e0b\uff0c\u4f60\u7684\u5a5a\u59fb\u5e78\u798f\u6307\u6570\u3002<\/p>\n        \n        <p>\u5b8c\u6210\u8fd9\u4e2a\u7b80\u77ed\u7684\u6d4b\u9a8c\uff0c\u53d1\u73b0\u4f60\u5728\u5a5a\u59fb\u5173\u7cfb\u4e2d\u6700\u770b\u91cd\u7684\u662f\u4ec0\u4e48\uff0c\u4ee5\u53ca\u5982\u4f55\u9762\u5bf9\u53ef\u80fd\u7684\u6311\u6218\uff0c\u83b7\u5f97\u5c5e\u4e8e\u4f60\u7684\u5e78\u798f\u5a5a\u59fb\u6307\u5357\uff01<\/p>\n      <\/div>\n      \n      <div style=\"text-align: center;\">\n        <button id=\"wm-start-btn\" class=\"wm-btn\">\u5f00\u59cb\u6d4b\u9a8c<\/button>\n      <\/div>\n    <\/section>\n    \n    <!-- \u6e2c\u9a57\u9801 -->\n    <section id=\"wm-quiz-page\" class=\"wm-quiz-page\">\n      <h2>\u5a5a\u59fb\u5e78\u798f\u5ea6\u6d4b\u9a8c<\/h2>\n      \n      <div class=\"wm-progress-container\">\n        <div class=\"wm-progress-text\" id=\"wm-progress-text\">\u95ee\u98981\/10<\/div>\n        <div class=\"wm-progress-bar\">\n          <div class=\"wm-progress-fill\" id=\"wm-progress-fill\"><\/div>\n        <\/div>\n      <\/div>\n      \n      <div class=\"wm-question-container\" id=\"wm-question-container\">\n        <!-- \u554f\u984c\u5167\u5bb9\u5c07\u7531 JavaScript \u52d5\u614b\u751f\u6210 -->\n      <\/div>\n      \n      <div class=\"wm-nav-buttons\">\n        <button id=\"wm-prev-btn\" class=\"wm-btn wm-btn-secondary\">\u4e0a\u4e00\u9898<\/button>\n      <\/div>\n    <\/section>\n    \n    <!-- \u7d50\u679c\u9801 -->\n    <section id=\"wm-result-page\" class=\"wm-quiz-page\">\n      <h2>\u4f60\u7684\u5a5a\u59fb\u5e78\u798f\u6d4b\u9a8c\u7ed3\u679c<\/h2>\n      \n      <div class=\"wm-result-title\" id=\"wm-result-title\">\n        <!-- \u7d50\u679c\u6a19\u984c\u7531 JavaScript \u751f\u6210 -->\n      <\/div>\n      \n      <div class=\"wm-result-description\" id=\"wm-result-description\">\n        <!-- \u7d50\u679c\u63cf\u8ff0\u7531 JavaScript \u751f\u6210 -->\n      <\/div>\n      \n      <div class=\"wm-result-advice\" id=\"wm-result-advice\">\n        <!-- \u5efa\u8b70\u5167\u5bb9\u7531 JavaScript \u751f\u6210 -->\n      <\/div>\n      \n      <div class=\"wm-chart-container\">\n        <canvas id=\"wm-result-chart\"><\/canvas>\n      <\/div>\n      \n      <div style=\"text-align: center;\">\n        <button id=\"wm-restart-btn\" class=\"wm-btn\">\u91cd\u65b0\u6d4b\u9a8c<\/button>\n      <\/div>\n    <\/section>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n<script>\n(function() {\n  'use strict';\n  \n  const WeddingMatchQuiz = {\n    elements: {\n      quizSystem: document.getElementById('wm-quiz-system'),\n      quizContainer: document.getElementById('wm-quiz-container'),\n      introPage: document.getElementById('wm-intro-page'),\n      quizPage: document.getElementById('wm-quiz-page'),\n      resultPage: document.getElementById('wm-result-page'),\n      startBtn: document.getElementById('wm-start-btn'),\n      prevBtn: document.getElementById('wm-prev-btn'),\n      restartBtn: document.getElementById('wm-restart-btn'),\n      questionContainer: document.getElementById('wm-question-container'),\n      progressText: document.getElementById('wm-progress-text'),\n      progressFill: document.getElementById('wm-progress-fill'),\n      resultTitle: document.getElementById('wm-result-title'),\n      resultDescription: document.getElementById('wm-result-description'),\n      resultAdvice: document.getElementById('wm-result-advice')\n    },\n    \n    data: {\n      questions: [\n        {\n          id: 1,\n          text: '\u76f8\u89aa\u6642\uff0c\u5c0d\u65b9\u505a\u51fa\u4e0b\u9762\u54ea\u7a2e\u8868\u73fe\uff0c\u4f60\u6703\u6389\u982d\u5c31\u8d70\uff1f',\n          options: [\n            { id: 'A', text: '\u554f\u4ec0\u9ebc\u90fd\u4e0d\u7b54\u8a71' },\n            { id: 'B', text: '\u4e00\u500b\u52c1\u73a9\u624b\u6a5f\uff0c\u4e0d\u62ac\u982d\u770b\u4eba' },\n            { id: 'C', text: '\u63d0\u51fa\u5a5a\u5f8c\u8981AA\uff0c\u5a5a\u524d\u8981\u5148\u53bb\u516c\u8b49\u8655\u516c\u8b49\u8ca1\u7522' },\n            { id: 'D', text: '\u6311\u660e\u81ea\u5df1\u662f\u70ba\u4e86\u5b8c\u6210\u7236\u6bcd\u7684\u4efb\u52d9\u624d\u76f8\u89aa\u7684' }\n          ]\n        },\n        {\n          id: 2,\n          text: '\u4f60\u8a8d\u70ba\u5a5a\u59fb\u6700\u91cd\u8981\u7684\u57fa\u790e\u662f\u4ec0\u9ebc\uff1f',\n          options: [\n            { id: 'A', text: '\u76f8\u540c\u7684\u5bb6\u5ead\u80cc\u666f\u548c\u50f9\u503c\u89c0' },\n            { id: 'B', text: '\u4e92\u76f8\u7406\u89e3\u548c\u5305\u5bb9\u7684\u7cbe\u795e' },\n            { id: 'C', text: '\u7a69\u5b9a\u7684\u7d93\u6fdf\u689d\u4ef6\u548c\u751f\u6d3b\u4fdd\u969c' },\n            { id: 'D', text: '\u6df1\u539a\u7684\u611f\u60c5\u548c\u76f8\u4e92\u5438\u5f15' }\n          ]\n        },\n        {\n          id: 3,\n          text: '\u9762\u5c0d\u96d9\u65b9\u5bb6\u5ead\u6709\u6587\u5316\u5dee\u7570\u6642\uff0c\u4f60\u6703\u5982\u4f55\u8655\u7406\uff1f',\n          options: [\n            { id: 'A', text: '\u5118\u91cf\u907f\u514d\u885d\u7a81\uff0c\u4fdd\u6301\u8ddd\u96e2' },\n            { id: 'B', text: '\u5805\u6301\u81ea\u5df1\u7684\u7acb\u5834\uff0c\u4e0d\u8f15\u6613\u59a5\u5354' },\n            { id: 'C', text: '\u5c0b\u6c42\u96d9\u65b9\u7406\u89e3\uff0c\u627e\u5230\u5e73\u8861\u9ede' },\n            { id: 'D', text: '\u5b8c\u5168\u63a5\u7d0d\u5c0d\u65b9\u5bb6\u5ead\u7684\u6587\u5316\u548c\u7fd2\u6163' }\n          ]\n        },\n        {\n          id: 4,\n          text: '\u7576\u4f60\u548c\u4f34\u4fb6\u6709\u7d93\u6fdf\u4e0a\u7684\u5dee\u8ddd\u6642\uff0c\u4f60\u7684\u614b\u5ea6\u662f\uff1f',\n          options: [\n            { id: 'A', text: '\u611f\u5230\u4e0d\u5b89\u548c\u58d3\u529b' },\n            { id: 'B', text: '\u8a8d\u70ba\u9019\u4e0d\u662f\u554f\u984c\uff0c\u611b\u60c5\u66f4\u91cd\u8981' },\n            { id: 'C', text: '\u5e0c\u671b\u901a\u904e\u52aa\u529b\u7e2e\u5c0f\u5dee\u8ddd' },\n            { id: 'D', text: '\u8a8d\u70ba\u8ca1\u5bcc\u5171\u4eab\uff0c\u4e0d\u5728\u610f\u8ab0\u4ed8\u51fa\u66f4\u591a' }\n          ]\n        },\n        {\n          id: 5,\n          text: '\u5c0d\u65bc\u5a5a\u5f8c\u662f\u5426\u548c\u7236\u6bcd\u540c\u4f4f\uff0c\u4f60\u7684\u770b\u6cd5\u662f\uff1f',\n          options: [\n            { id: 'A', text: '\u5805\u6c7a\u4e0d\u540c\u4f4f\uff0c\u9700\u8981\u7368\u7acb\u7a7a\u9593' },\n            { id: 'B', text: '\u53ef\u4ee5\u540c\u4f4f\uff0c\u4f46\u6709\u689d\u4ef6\u9650\u5236' },\n            { id: 'C', text: '\u5c0a\u91cd\u4f34\u4fb6\u7684\u610f\u9858\uff0c\u5171\u540c\u6c7a\u5b9a' },\n            { id: 'D', text: '\u50be\u5411\u540c\u4f4f\uff0c\u7167\u9867\u9577\u8f29\u662f\u8cac\u4efb' }\n          ]\n        },\n        {\n          id: 6,\n          text: '\u7576\u4f34\u4fb6\u7684\u5bb6\u4eba\u5c0d\u4f60\u6709\u4e0d\u5408\u7406\u7684\u8981\u6c42\u6642\uff0c\u4f60\u6703\uff1f',\n          options: [\n            { id: 'A', text: '\u5fcd\u8010\u9000\u8b93\uff0c\u907f\u514d\u77db\u76fe\u64f4\u5927' },\n            { id: 'B', text: '\u5805\u6c7a\u62d2\u7d55\uff0c\u7dad\u8b77\u81ea\u5df1\u7684\u5e95\u7dda' },\n            { id: 'C', text: '\u548c\u4f34\u4fb6\u6e9d\u901a\uff0c\u5c0b\u6c42\u652f\u6301\u548c\u7406\u89e3' },\n            { id: 'D', text: '\u5617\u8a66\u7406\u89e3\u80cc\u5f8c\u539f\u56e0\uff0c\u5c0b\u627e\u89e3\u6c7a\u65b9\u6848' }\n          ]\n        },\n        {\n          id: 7,\n          text: '\u4f60\u8a8d\u70ba\u5a5a\u59fb\u4e2d\u6700\u96e3\u4ee5\u63a5\u53d7\u7684\u554f\u984c\u662f\uff1f',\n          options: [\n            { id: 'A', text: '\u50f9\u503c\u89c0\u548c\u751f\u6d3b\u7fd2\u6163\u7684\u5de8\u5927\u5dee\u7570' },\n            { id: 'B', text: '\u7d93\u6fdf\u4e0a\u7684\u4e0d\u5e73\u7b49\u548c\u58d3\u529b' },\n            { id: 'C', text: '\u5bb6\u5ead\u5e72\u6d89\u904e\u591a\uff0c\u7f3a\u4e4f\u7368\u7acb\u7a7a\u9593' },\n            { id: 'D', text: '\u7f3a\u4e4f\u771f\u8aa0\u6e9d\u901a\u548c\u60c5\u611f\u4ea4\u6d41' }\n          ]\n        },\n        {\n          id: 8,\n          text: '\u9762\u5c0d\u5a5a\u59fb\u4e2d\u7684\u56f0\u96e3\u548c\u6311\u6230\uff0c\u4f60\u7684\u61c9\u5c0d\u65b9\u5f0f\u662f\uff1f',\n          options: [\n            { id: 'A', text: '\u5c0b\u6c42\u5c08\u696d\u8aee\u8a62\u6216\u7b2c\u4e09\u65b9\u5e6b\u52a9' },\n            { id: 'B', text: '\u81ea\u6211\u8abf\u9069\uff0c\u7368\u7acb\u89e3\u6c7a\u554f\u984c' },\n            { id: 'C', text: '\u8207\u4f34\u4fb6\u5171\u540c\u9762\u5c0d\uff0c\u5c0b\u627e\u89e3\u6c7a\u65b9\u6848' },\n            { id: 'D', text: '\u66ab\u6642\u8ff4\u907f\uff0c\u7b49\u5f85\u60c5\u7dd2\u5e73\u975c\u5f8c\u518d\u8655\u7406' }\n          ]\n        },\n        {\n          id: 9,\n          text: '\u4f60\u5c0d\u300c\u9580\u7576\u6236\u5c0d\u300d\u9019\u4e00\u50b3\u7d71\u89c0\u5ff5\u7684\u770b\u6cd5\u662f\uff1f',\n          options: [\n            { id: 'A', text: '\u975e\u5e38\u8a8d\u540c\uff0c\u9019\u662f\u5a5a\u59fb\u7a69\u5b9a\u7684\u57fa\u790e' },\n            { id: 'B', text: '\u90e8\u5206\u8a8d\u540c\uff0c\u4f46\u4e0d\u662f\u7d55\u5c0d\u5fc5\u8981' },\n            { id: 'C', text: '\u4e0d\u592a\u8a8d\u540c\uff0c\u611b\u60c5\u548c\u76f8\u8655\u66f4\u91cd\u8981' },\n            { id: 'D', text: '\u5b8c\u5168\u4e0d\u8a8d\u540c\uff0c\u9019\u662f\u843d\u5f8c\u7684\u601d\u60f3' }\n          ]\n        },\n        {\n          id: 10,\n          text: '\u4f60\u8a8d\u70ba\u4e00\u6bb5\u6210\u529f\u7684\u5a5a\u59fb\u9700\u8981\u5177\u5099\u4ec0\u9ebc\u54c1\u8cea\uff1f',\n          options: [\n            { id: 'A', text: '\u5fe0\u8aa0\u8207\u4fe1\u4efb' },\n            { id: 'B', text: '\u6e9d\u901a\u8207\u5305\u5bb9' },\n            { id: 'C', text: '\u8cac\u4efb\u8207\u627f\u8afe' },\n            { id: 'D', text: '\u6fc0\u60c5\u8207\u6d6a\u6f2b' }\n          ]\n        }\n      ],\n      \n      results: {\n        A: {\n          title: '\u7a69\u5065\u578b\u5a5a\u59fb\u89c0',\n          description: '\u4f60\u5c0d\u5a5a\u59fb\u6301\u6709\u8f03\u70ba\u50b3\u7d71\u7a69\u5065\u7684\u614b\u5ea6\uff0c\u91cd\u8996\u5bb6\u5ead\u80cc\u666f\u548c\u50f9\u503c\u89c0\u7684\u76f8\u4f3c\u6027\u3002\u5728\u4f60\u770b\u4f86\uff0c\u300c\u9580\u7576\u6236\u5c0d\u300d\u78ba\u5be6\u6709\u5176\u5408\u7406\u6027\uff0c\u56e0\u70ba\u76f8\u4f3c\u7684\u6210\u9577\u74b0\u5883\u548c\u50f9\u503c\u89c0\u80fd\u6e1b\u5c11\u5a5a\u5f8c\u7684\u885d\u7a81\u3002\u7136\u800c\uff0c\u9019\u4e26\u4e0d\u610f\u5473\u8457\u300c\u9580\u4e0d\u7576\u6236\u4e0d\u5c0d\u300d\u7684\u5a5a\u59fb\u8a3b\u5b9a\u4e0d\u5e78\u798f\uff0c\u95dc\u9375\u5728\u65bc\u4f60\u80fd\u5426\u5efa\u7acb\u6709\u6548\u7684\u6e9d\u901a\u6a5f\u5236\uff0c\u4e26\u5728\u9762\u5c0d\u5dee\u7570\u6642\u4fdd\u6301\u958b\u653e\u7684\u5fc3\u614b\u3002',\n          advice: '\u2728 <strong>\u7d66\u4f60\u7684\u5a5a\u59fb\u5efa\u8b70<\/strong> \u2728<br><br>\u5728\u8ffd\u6c42\u7a69\u5065\u7684\u540c\u6642\uff0c\u5225\u5fd8\u4e86\u5a5a\u59fb\u4e5f\u9700\u8981\u9748\u6d3b\u8207\u5275\u65b0\u3002\u7576\u4f60\u9762\u5c0d\u300c\u9580\u4e0d\u7576\u6236\u4e0d\u5c0d\u300d\u7684\u60c5\u6cc1\uff0c\u8a66\u8457\u5c07\u5b83\u8996\u70ba\u4e00\u6bb5\u63a2\u7d22\u4e4b\u65c5\uff0c\u800c\u975e\u5371\u6a5f\u3002<br><br>\u91cd\u8996\u50b3\u7d71\u662f\u7a2e\u7f8e\u5fb7\uff0c\u4f46\u904e\u5ea6\u4f9d\u8cf4\u53ef\u80fd\u6703\u932f\u5931\u6210\u9577\u6a5f\u6703\u3002\u6bcf\u5929\u7559\u51fa\u6642\u9593\u8207\u4f34\u4fb6\u6df1\u5165\u4ea4\u6d41\uff0c\u4e0d\u50c5\u8ac7\u8ad6\u65e5\u5e38\u7463\u4e8b\uff0c\u66f4\u8981\u5206\u4eab\u5f7c\u6b64\u7684\u5922\u60f3\u8207\u6050\u61fc\u3002<br><br>\u7576\u6587\u5316\u5dee\u7570\u51fa\u73fe\u6642\uff0c\u4e0d\u59a8\u5c07\u5176\u8996\u70ba\u8c50\u5bcc\u751f\u6d3b\u7684\u8abf\u5473\u54c1\uff0c\u800c\u975e\u969c\u7919\u3002\u8a18\u4f4f\uff0c\u771f\u6b63\u7684\u667a\u6167\u4e0d\u5728\u65bc\u907f\u514d\u885d\u7a81\uff0c\u800c\u5728\u65bc\u512a\u96c5\u5730\u89e3\u6c7a\u885d\u7a81\u3002',\n          traits: {\n            '\u7a69\u5b9a\u6027': 85,\n            '\u5305\u5bb9\u6027': 60,\n            '\u6e9d\u901a\u80fd\u529b': 65,\n            '\u7368\u7acb\u6027': 70,\n            '\u9069\u61c9\u529b': 60\n          }\n        },\n        B: {\n          title: '\u81ea\u7acb\u578b\u5a5a\u59fb\u89c0',\n          description: '\u4f60\u5c0d\u5a5a\u59fb\u6301\u6709\u8f03\u70ba\u7368\u7acb\u81ea\u4e3b\u7684\u614b\u5ea6\uff0c\u8a8d\u70ba\u5169\u500b\u4eba\u7684\u611f\u60c5\u548c\u76f8\u8655\u6a21\u5f0f\u6bd4\u5bb6\u5ead\u80cc\u666f\u66f4\u91cd\u8981\u3002\u4f60\u76f8\u4fe1\u5373\u4f7f\u300c\u9580\u4e0d\u7576\u6236\u4e0d\u5c0d\u300d\uff0c\u53ea\u8981\u96d9\u65b9\u90fd\u9858\u610f\u70ba\u95dc\u4fc2\u4ed8\u51fa\u52aa\u529b\uff0c\u5a5a\u59fb\u4f9d\u7136\u53ef\u4ee5\u5e78\u798f\u3002\u4f60\u6709\u8f03\u5f37\u7684\u81ea\u4fe1\u5fc3\u548c\u9069\u61c9\u80fd\u529b\uff0c\u80fd\u5920\u9762\u5c0d\u4f86\u81ea\u4e0d\u540c\u5bb6\u5ead\u80cc\u666f\u5e36\u4f86\u7684\u6311\u6230\u3002\u4e0d\u904e\uff0c\u4f60\u53ef\u80fd\u9700\u8981\u66f4\u591a\u5730\u8003\u616e\u73fe\u5be6\u56e0\u7d20\u3002',\n          advice: '\u2728 <strong>\u7d66\u4f60\u7684\u5a5a\u59fb\u5efa\u8b70<\/strong> \u2728<br><br>\u4f60\u7684\u7368\u7acb\u7cbe\u795e\u662f\u4e00\u628a\u96d9\u5203\u528d\u2014\u2014\u5b83\u8b93\u4f60\u5145\u6eff\u52c7\u6c23\u9762\u5c0d\u6311\u6230\uff0c\u4f46\u4e5f\u53ef\u80fd\u5728\u4e0d\u7d93\u610f\u9593\u7bc9\u8d77\u9ad8\u7246\u3002\u5728\u300c\u9580\u4e0d\u7576\u6236\u4e0d\u5c0d\u300d\u7684\u60c5\u5883\u4e2d\uff0c\u9069\u5ea6\u7684\u59a5\u5354\u4e0d\u662f\u793a\u5f31\uff0c\u800c\u662f\u667a\u6167\u7684\u5c55\u73fe\u3002<br><br>\u5617\u8a66\u5c07\u81ea\u7acb\u8207\u9023\u7d50\u878d\u70ba\u4e00\u9ad4\u3002\u7576\u4f60\u5805\u6301\u539f\u5247\u6642\uff0c\u4e5f\u5225\u5fd8\u4e86\u50be\u807d\u4f34\u4fb6\u53ca\u5176\u5bb6\u4eba\u7684\u8072\u97f3\u3002\u6709\u6642\uff0c\u6700\u5f37\u5927\u7684\u8868\u73fe\u4e0d\u662f\u5805\u5b88\u7acb\u5834\uff0c\u800c\u662f\u6709\u52c7\u6c23\u6539\u8b8a\u3002<br><br>\u6bcf\u9031\u5b89\u6392\u4e00\u6b21\u300c\u6587\u5316\u4ea4\u6d41\u65e5\u300d\uff0c\u6df1\u5165\u4e86\u89e3\u5f7c\u6b64\u5bb6\u5ead\u7684\u50b3\u7d71\u8207\u50f9\u503c\u89c0\u3002\u9019\u4e0d\u50c5\u80fd\u589e\u9032\u7406\u89e3\uff0c\u9084\u80fd\u5275\u9020\u5c6c\u65bc\u4f60\u5011\u81ea\u5df1\u7684\u7368\u7279\u6587\u5316\u878d\u5408\u3002',\n          traits: {\n            '\u7a69\u5b9a\u6027': 65,\n            '\u5305\u5bb9\u6027': 75,\n            '\u6e9d\u901a\u80fd\u529b': 80,\n            '\u7368\u7acb\u6027': 90,\n            '\u9069\u61c9\u529b': 85\n          }\n        },\n        C: {\n          title: '\u5e73\u8861\u578b\u5a5a\u59fb\u89c0',\n          description: '\u4f60\u5c0d\u5a5a\u59fb\u6301\u6709\u8f03\u70ba\u5e73\u8861\u7684\u614b\u5ea6\uff0c\u65e2\u770b\u91cd\u611f\u60c5\u57fa\u790e\uff0c\u4e5f\u4e0d\u5ffd\u8996\u73fe\u5be6\u56e0\u7d20\u3002\u4f60\u8a8d\u70ba\u300c\u9580\u7576\u6236\u5c0d\u300d\u6709\u4e00\u5b9a\u9053\u7406\uff0c\u4f46\u4e26\u975e\u7d55\u5c0d\uff0c\u66f4\u91cd\u8981\u7684\u662f\u96d9\u65b9\u80fd\u5426\u5728\u5dee\u7570\u4e2d\u627e\u5230\u5e73\u8861\u9ede\u3002\u4f60\u5584\u65bc\u6e9d\u901a\u548c\u5354\u8abf\uff0c\u80fd\u5920\u5728\u4e0d\u540c\u5bb6\u5ead\u80cc\u666f\u9593\u5c0b\u627e\u5171\u8b58\u3002\u9019\u7a2e\u80fd\u529b\u4f7f\u4f60\u5728\u9762\u5c0d\u300c\u9580\u4e0d\u7576\u6236\u4e0d\u5c0d\u300d\u7684\u60c5\u6cc1\u6642\uff0c\u4ecd\u80fd\u7dad\u6301\u5a5a\u59fb\u7684\u5e78\u798f\u548c\u7a69\u5b9a\u3002',\n          advice: '\u2728 <strong>\u7d66\u4f60\u7684\u5a5a\u59fb\u5efa\u8b70<\/strong> \u2728<br><br>\u4f60\u7684\u5e73\u8861\u4e4b\u9053\u5982\u540c\u4e00\u4f4d\u719f\u7df4\u7684\u821e\u8005\uff0c\u5728\u5a5a\u59fb\u9019\u5834\u821e\u6703\u4e2d\u512a\u96c5\u5730\u5728\u4e0d\u540c\u65cb\u5f8b\u9593\u8f49\u63db\u3002\u7136\u800c\uff0c\u5c0b\u6c42\u5b8c\u7f8e\u5e73\u8861\u6709\u6642\u6703\u8b93\u4f60\u5ffd\u7565\u81ea\u5df1\u771f\u6b63\u7684\u9700\u6c42\u8207\u6e34\u671b\u3002<br><br>\u5728\u300c\u9580\u4e0d\u7576\u6236\u4e0d\u5c0d\u300d\u7684\u5a5a\u59fb\u4e2d\uff0c\u4f60\u7684\u5354\u8abf\u80fd\u529b\u662f\u7121\u50f9\u4e4b\u5bf6\u3002\u7e7c\u7e8c\u767c\u63ee\u9019\u4e00\u512a\u52e2\uff0c\u4f46\u4e5f\u8981\u8a18\u5f97\uff1a\u6709\u6642\u6700\u597d\u7684\u5e73\u8861\u662f\u6709\u610f\u8b58\u5730\u9078\u64c7\u4e0d\u5e73\u8861\uff0c\u70ba\u4e86\u66f4\u9577\u9060\u7684\u548c\u8ae7\u3002<br><br>\u6bcf\u6708\u8207\u4f34\u4fb6\u9032\u884c\u4e00\u6b21\u300c\u50f9\u503c\u89c0\u91cd\u5851\u300d\u7684\u5c0d\u8a71\uff0c\u6aa2\u8996\u54ea\u4e9b\u539f\u5247\u662f\u4e0d\u53ef\u52d5\u6416\u7684\uff0c\u54ea\u4e9b\u53ef\u4ee5\u8abf\u6574\u3002\u9019\u4e0d\u50c5\u80fd\u4fdd\u6301\u5f7c\u6b64\u7684\u6838\u5fc3\u50f9\u503c\uff0c\u4e5f\u80fd\u5275\u9020\u5171\u540c\u7684\u6210\u9577\u7a7a\u9593\u3002',\n          traits: {\n            '\u7a69\u5b9a\u6027': 80,\n            '\u5305\u5bb9\u6027': 85,\n            '\u6e9d\u901a\u80fd\u529b': 90,\n            '\u7368\u7acb\u6027': 75,\n            '\u9069\u61c9\u529b': 80\n          }\n        },\n        D: {\n          title: '\u7406\u60f3\u578b\u5a5a\u59fb\u89c0',\n          description: '\u4f60\u5c0d\u5a5a\u59fb\u6301\u6709\u8f03\u70ba\u7406\u60f3\u5316\u7684\u614b\u5ea6\uff0c\u6df1\u4fe1\u611b\u60c5\u7684\u529b\u91cf\u80fd\u5920\u8d85\u8d8a\u4e00\u5207\u5dee\u7570\u548c\u969c\u7919\u3002\u5728\u4f60\u770b\u4f86\uff0c\u300c\u9580\u7576\u6236\u5c0d\u300d\u662f\u904e\u6642\u7684\u89c0\u5ff5\uff0c\u771f\u6b63\u91cd\u8981\u7684\u662f\u5169\u4eba\u4e4b\u9593\u7684\u611f\u60c5\u548c\u7406\u89e3\u3002\u9019\u7a2e\u6a02\u89c0\u548c\u6d6a\u6f2b\u7684\u614b\u5ea6\u80fd\u5920\u70ba\u5a5a\u59fb\u6ce8\u5165\u6d3b\u529b\uff0c\u4f46\u540c\u6642\u4e5f\u53ef\u80fd\u4f4e\u4f30\u73fe\u5be6\u751f\u6d3b\u4e2d\u7684\u5404\u7a2e\u6311\u6230\u3002',\n          advice: '\u2728 <strong>\u7d66\u4f60\u7684\u5a5a\u59fb\u5efa\u8b70<\/strong> \u2728<br><br>\u4f60\u7684\u7406\u60f3\u4e3b\u7fa9\u5982\u540c\u5a5a\u59fb\u5929\u7a7a\u4e2d\u7684\u661f\u5149\uff0c\u7167\u4eae\u524d\u884c\u7684\u9053\u8def\uff0c\u4f46\u661f\u5149\u96d6\u7f8e\uff0c\u537b\u96e3\u4ee5\u9a45\u6563\u6240\u6709\u9ed1\u6697\u3002\u5728\u300c\u9580\u4e0d\u7576\u6236\u4e0d\u5c0d\u300d\u7684\u5a5a\u59fb\u4e2d\uff0c\u5c07\u6d6a\u6f2b\u8207\u73fe\u5be6\u7de8\u7e54\u5728\u4e00\u8d77\uff0c\u624d\u80fd\u7e54\u5c31\u7262\u56fa\u7684\u5e78\u798f\u4e4b\u7db2\u3002<br><br>\u4fdd\u6301\u4f60\u73cd\u8cb4\u7684\u7406\u60f3\u4fe1\u5ff5\uff0c\u540c\u6642\u4e5f\u8981\u57f9\u990a\u9762\u5c0d\u73fe\u5be6\u6311\u6230\u7684\u97cc\u6027\u3002\u5617\u8a66\u6bcf\u9031\u8207\u4f34\u4fb6\u4e00\u540c\u5236\u5b9a\u4e00\u4efd\u300c\u5922\u60f3\u8207\u884c\u52d5\u8a08\u5283\u300d\uff0c\u5c07\u7f8e\u597d\u9858\u666f\u8f49\u5316\u70ba\u5177\u9ad4\u6b65\u9a5f\u3002<br><br>\u7576\u6587\u5316\u6216\u80cc\u666f\u5dee\u7570\u6d6e\u73fe\u6642\uff0c\u4e0d\u8981\u6025\u65bc\u7528\u611b\u60c5\u63a9\u84cb\u5b83\u5011\uff0c\u800c\u662f\u8996\u70ba\u4e86\u89e3\u5f7c\u6b64\u66f4\u6df1\u5c64\u6b21\u7684\u6a5f\u6703\u3002\u771f\u6b63\u7684\u6d6a\u6f2b\u4e0d\u662f\u8ff4\u907f\u885d\u7a81\uff0c\u800c\u662f\u5171\u540c\u7d93\u6b77\u98a8\u96e8\u5f8c\u4f9d\u7136\u76f8\u611b\u3002',\n          traits: {\n            '\u7a69\u5b9a\u6027': 60,\n            '\u5305\u5bb9\u6027': 90,\n            '\u6e9d\u901a\u80fd\u529b': 75,\n            '\u7368\u7acb\u6027': 85,\n            '\u9069\u61c9\u529b': 70\n          }\n        }\n      },\n      \n      currentQuestionIndex: 0,\n      answers: [],\n      resultType: null,\n      chart: null\n    },\n    \n    init: function() {\n      this.bindEvents();\n      this.hideElement(this.elements.prevBtn);\n    },\n    \n    bindEvents: function() {\n      this.elements.startBtn.addEventListener('click', this.startQuiz.bind(this));\n      this.elements.prevBtn.addEventListener('click', this.prevQuestion.bind(this));\n      this.elements.restartBtn.addEventListener('click', this.restartQuiz.bind(this));\n    },\n    \n    startQuiz: function() {\n      this.changePage(this.elements.introPage, this.elements.quizPage);\n      this.renderQuestion();\n      this.updateProgress();\n    },\n    \n    renderQuestion: function() {\n      const question = this.data.questions[this.data.currentQuestionIndex];\n      const selectedAnswer = this.data.answers[this.data.currentQuestionIndex];\n      \n      let html = `<h3>${question.text}<\/h3><div class=\"wm-options-container\">`;\n      \n      question.options.forEach(option => {\n        const isSelected = selectedAnswer === option.id;\n        html += `\n          <button class=\"wm-option ${isSelected ? 'selected' : ''}\" data-option-id=\"${option.id}\">\n            <span class=\"wm-option-indicator\"><\/span>\n            <span class=\"wm-option-text\">${option.text}<\/span>\n          <\/button>`;\n      });\n      \n      html += `<\/div>`;\n      \n      this.elements.questionContainer.innerHTML = html;\n      \n      const optionButtons = this.elements.questionContainer.querySelectorAll('.wm-option');\n      optionButtons.forEach(button => {\n        button.addEventListener('click', this.handleOptionSelect.bind(this));\n      });\n      \n      if (this.data.currentQuestionIndex === 0) {\n        this.hideElement(this.elements.prevBtn);\n      } else {\n        this.showElement(this.elements.prevBtn);\n      }\n    },\n    \n    handleOptionSelect: function(e) {\n      const optionId = e.currentTarget.dataset.optionId;\n      \n      this.data.answers[this.data.currentQuestionIndex] = optionId;\n      \n      const options = this.elements.questionContainer.querySelectorAll('.wm-option');\n      options.forEach(option => {\n        option.classList.remove('selected');\n      });\n      e.currentTarget.classList.add('selected');\n      \n      setTimeout(() => {\n        this.nextQuestion();\n      }, 400);\n    },\n    \n    nextQuestion: function() {\n      if (this.data.currentQuestionIndex < this.data.questions.length - 1) {\n        this.data.currentQuestionIndex++;\n        this.renderQuestion();\n        this.updateProgress();\n      } else {\n        this.showResult();\n      }\n    },\n    \n    prevQuestion: function() {\n      if (this.data.currentQuestionIndex > 0) {\n        this.data.currentQuestionIndex--;\n        this.renderQuestion();\n        this.updateProgress();\n      }\n    },\n    \n    updateProgress: function() {\n      const progress = ((this.data.currentQuestionIndex + 1) \/ this.data.questions.length) * 100;\n      this.elements.progressFill.style.width = `${progress}%`;\n      this.elements.progressText.textContent = `\u554f\u984c ${this.data.currentQuestionIndex + 1}\/${this.data.questions.length}`;\n    },\n    \n    showResult: function() {\n      this.calculateResult();\n      \n      const result = this.data.results[this.data.resultType];\n      this.elements.resultTitle.textContent = result.title;\n      this.elements.resultDescription.textContent = result.description;\n      \n      if (this.elements.resultAdvice && result.advice) {\n        this.elements.resultAdvice.innerHTML = result.advice;\n      }\n      \n      this.createResultChart();\n      this.changePage(this.elements.quizPage, this.elements.resultPage);\n    },\n    \n    calculateResult: function() {\n      const answerCounts = { A: 0, B: 0, C: 0, D: 0 };\n      \n      this.data.answers.forEach(answer => {\n        if (answer) {\n          answerCounts[answer]++;\n        }\n      });\n      \n      let maxCount = 0;\n      let resultType = 'C';\n      \n      for (const type in answerCounts) {\n        if (answerCounts[type] > maxCount) {\n          maxCount = answerCounts[type];\n          resultType = type;\n        }\n      }\n      \n      this.data.resultType = resultType;\n    },\n    \n    createResultChart: function() {\n      const ctx = document.getElementById('wm-result-chart').getContext('2d');\n      const traits = this.data.results[this.data.resultType].traits;\n      \n      if (this.data.chart) {\n        this.data.chart.destroy();\n      }\n      \n      this.data.chart = new Chart(ctx, {\n        type: 'radar',\n        data: {\n          labels: Object.keys(traits),\n          datasets: [{\n            label: '\u4f60\u7684\u7279\u8cea\u8a55\u5206',\n            data: Object.values(traits),\n            backgroundColor: 'rgba(123, 158, 137, 0.2)',\n            borderColor: 'rgba(123, 158, 137, 1)',\n            pointBackgroundColor: 'rgba(123, 158, 137, 1)',\n            pointBorderColor: '#fff',\n            pointHoverBackgroundColor: '#fff',\n            pointHoverBorderColor: 'rgba(123, 158, 137, 1)',\n            borderWidth: 2\n          }]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: true,\n          scales: {\n            r: {\n              angleLines: {\n                display: true,\n                color: 'rgba(0, 0, 0, 0.1)'\n              },\n              suggestedMin: 0,\n              suggestedMax: 100,\n              ticks: {\n                stepSize: 20,\n                display: false\n              },\n              pointLabels: {\n                font: {\n                  size: 14,\n                  family: '\"\u5fae\u8edf\u6b63\u9ed1\u9ad4\", sans-serif'\n                },\n                color: '#4A5A4E'\n              },\n              grid: {\n                color: 'rgba(0, 0, 0, 0.1)'\n              }\n            }\n          },\n          plugins: {\n            legend: {\n              display: false\n            },\n            tooltip: {\n              callbacks: {\n                label: function(context) {\n                  return `${context.label}: ${context.raw}%`;\n                }\n              },\n              backgroundColor: 'rgba(123, 158, 137, 0.9)',\n              titleFont: {\n                family: '\"\u5fae\u8edf\u6b63\u9ed1\u9ad4\", sans-serif'\n              },\n              bodyFont: {\n                family: '\"\u5fae\u8edf\u6b63\u9ed1\u9ad4\", sans-serif'\n              }\n            }\n          }\n        }\n      });\n    },\n    \n    restartQuiz: function() {\n      this.data.currentQuestionIndex = 0;\n      this.data.answers = [];\n      this.data.resultType = null;\n      \n      this.changePage(this.elements.resultPage, this.elements.introPage);\n    },\n    \n    changePage: function(fromPage, toPage) {\n      fromPage.classList.remove('active');\n      toPage.classList.add('active');\n      \n      window.scrollTo({\n        top: 0,\n        behavior: 'smooth'\n      });\n    },\n    \n    showElement: function(element) {\n      if (element) {\n        element.style.display = 'inline-block';\n      }\n    },\n    \n    hideElement: function(element) {\n      if (element) {\n        element.style.display = 'none';\n      }\n    }\n  };\n  \n  document.addEventListener('DOMContentLoaded', function() {\n    WeddingMatchQuiz.init();\n  });\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u957f\u8f88\u4eec\u90fd\u8bf4\u95e8\u6237\u4e0d\u5f53\u5bf9\uff0c\u5a5a\u59fb\u4e0d\u5e78\u798f\uff0c\u53ef\u662f\u5e74\u8f7b\u4eba\u54ea\u80fd\u7406\u89e3\u8fd9\u4e2a\u9053\u7406\uff0c\u4e3a\u4e86\u7231\u60c5\u5f88\u591a\u4eba\u8fd8\u662f\u613f\u610f\u5192\u9669\uff0c\u5c1d\u8bd5\u95e8\u6237\u4e0d\u5bf9\u7684\u5a5a\u59fb\uff0c\u5982\u679c\u4f60\u4e5f\u6562\u4e8e\u5927\u80c6\u5730\u5c1d\u8bd5\u95e8\u6237\u4e0d\u5bf9\u7684\u5a5a\u59fb\uff0c\u4f60\u89c9\u5f97\u4f60\u4f1a\u5e78\u798f\u5417\uff1f<\/p>","protected":false},"author":19,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"narrow-width-container","site-content-style":"unboxed","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","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":[179,178],"tags":[216],"class_list":["post-2499","post","type-post","status-publish","format-standard","hentry","category-marriage","category-love","tag-happiness"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2499","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=2499"}],"version-history":[{"count":11,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2499\/revisions"}],"predecessor-version":[{"id":10403,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2499\/revisions\/10403"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2499"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2499"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2499"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}