{"id":2576,"date":"2023-10-25T09:22:01","date_gmt":"2023-10-25T01:22:01","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2576"},"modified":"2026-05-17T01:50:18","modified_gmt":"2026-05-16T17:50:18","slug":"original-intention-of-love","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/original-intention-of-love","title":{"rendered":"\u5c0f\u6d4b\u9a8c\uff1a\u600e\u4e48\u505a\u4ed6\u4f1a\u5bf9\u4f60\u4fdd\u7559\u7740\u7231\u7684\u521d\u5fc3\uff1f"},"content":{"rendered":"\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap\/5.3.3\/css\/bootstrap.min.css\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-icons\/1.11.3\/font\/bootstrap-icons.min.css\">\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n\n<!-- HTML\uff1a\u7d50\u69cb -->\n<div id=\"quizapp9\" data-quiz-app=\"quiz9\" lang=\"zh-Hant-TW\">\n  <section id=\"quizintro9\" data-page=\"intro9\">\n    <article class=\"card border-0 shadow-sm overflow-hidden\" data-soft-card>\n      <div class=\"card-body text-center\" data-intro-content>\n        <div data-floating-icons aria-hidden=\"true\">\n          <span data-orb=\"heart\"><i class=\"bi bi-heart-fill\"><\/i><\/span>\n          <span data-orb=\"sparkle\"><i class=\"bi bi-stars\"><\/i><\/span>\n          <span data-orb=\"flower\"><i class=\"bi bi-flower1\"><\/i><\/span>\n        <\/div>\n\n        <p class=\"mb-2\" data-kicker>\u611f\u60c5\u521d\u5fc3\u5b88\u8b77\u6e2c\u9a57<\/p>\n        <h1 tabindex=\"-1\" data-page-title=\"intro9\">\u600e\u9ebc\u505a\uff0c\u4ed6\u6703\u5c0d\u4f60\u4fdd\u7559\u8457\u611b\u7684\u521d\u5fc3\uff1f<\/h1>\n        <p class=\"mx-auto mb-0\" data-lead>\n          \u611f\u60c5\u8d70\u4e45\u4e86\uff0c\u71b1\u70c8\u6703\u6162\u6162\u6c89\u6fb1\u6210\u65e5\u5e38\u3002\u9019\u4efd\u6e2c\u9a57\u6703\u900f\u904e\u4f60\u7684\u76f4\u89ba\u9078\u64c7\uff0c\n          \u627e\u51fa\u4f60\u5728\u95dc\u4fc2\u88e1\u6700\u9700\u8981\u5f37\u5316\u7684\u300c\u521d\u5fc3\u5b88\u8b77\u65b9\u5f0f\u300d\u3002\n        <\/p>\n\n        <div class=\"d-flex justify-content-center mt-4\">\n          <button type=\"button\" class=\"btn\" data-action=\"start\">\n            \u958b\u59cb\u6e2c\u9a57 <i class=\"bi bi-arrow-right-short\" aria-hidden=\"true\"><\/i>\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/article>\n  <\/section>\n\n  <section id=\"quizmain9\" data-page=\"quiz9\" hidden>\n    <article class=\"card border-0 shadow-sm overflow-hidden\" data-soft-card data-quiz-landing-card>\n      <div class=\"card-body\" data-quiz-content>\n        <header data-quiz-hero>\n          <div data-quiz-hero-text>\n            <p class=\"mb-2\" data-kicker>\u521d\u5fc3\u5b88\u8b77\u9032\u884c\u4e2d<\/p>\n            <h2 tabindex=\"-1\" data-page-title=\"quiz9\">\u8ddf\u8457\u76f4\u89ba\uff0c\u627e\u5230\u611b\u88e1\u6700\u9069\u5408\u4f60\u7684\u5b88\u8b77\u65b9\u5f0f<\/h2>\n            <p class=\"mb-0\" data-helper>\n              \u4e0d\u9700\u8981\u60f3\u592a\u4e45\uff0c\u9078\u51fa\u6b64\u523b\u6700\u8cbc\u8fd1\u4f60\u7684\u7b54\u6848\u3002\u6bcf\u4e00\u6b21\u9078\u64c7\uff0c\u90fd\u6703\u5e36\u4f60\u66f4\u9760\u8fd1\u81ea\u5df1\u7684\u95dc\u4fc2\u6a21\u5f0f\u3002\n            <\/p>\n          <\/div>\n\n          <div data-quiz-visual aria-hidden=\"true\">\n            <span data-quiz-orb=\"main\"><i class=\"bi bi-heart-pulse-fill\"><\/i><\/span>\n            <span data-quiz-orb=\"small-a\"><i class=\"bi bi-stars\"><\/i><\/span>\n            <span data-quiz-orb=\"small-b\"><i class=\"bi bi-chat-heart-fill\"><\/i><\/span>\n          <\/div>\n        <\/header>\n\n        <section data-progress-panel aria-label=\"\u6e2c\u9a57\u9032\u5ea6\">\n          <div data-progress-meta>\n            <p class=\"mb-0\" data-step-label aria-live=\"polite\">\u7b2c 1 \u984c\uff0f\u6700\u591a 10 \u984c<\/p>\n            <span data-progress-note>\u9ede\u9078\u5f8c\u81ea\u52d5\u524d\u5f80\u4e0b\u4e00\u984c<\/span>\n          <\/div>\n\n          <div class=\"progress\" data-progress-wrap aria-hidden=\"true\">\n            <div class=\"progress-bar\" data-progress-bar style=\"width: 10%;\"><\/div>\n          <\/div>\n        <\/section>\n\n        <section data-question-shell>\n          <div data-question-list>\n            <fieldset data-question=\"1\">\n              <legend tabindex=\"-1\" data-question-heading>1\u3001\u4f60\u5f88\u559c\u6b61\u5c0d\u4eba\u6492\u5b0c\uff1f<\/legend>\n              <div data-option-grid>\n                <button type=\"button\" class=\"card\" data-option data-choice=\"q1a\" data-next=\"4\" data-score=\"care:2,growth:0,empathy:1,trust:1\" aria-pressed=\"false\">\n                  <span data-choice-indicator aria-hidden=\"true\"><i class=\"bi bi-check-lg\"><\/i><\/span>\n                  <span data-option-text>\u662f<\/span>\n                <\/button>\n                <button type=\"button\" class=\"card\" data-option data-choice=\"q1b\" data-next=\"2\" data-score=\"care:0,growth:1,empathy:0,trust:2\" aria-pressed=\"false\">\n                  <span data-choice-indicator aria-hidden=\"true\"><i class=\"bi bi-check-lg\"><\/i><\/span>\n                  <span data-option-text>\u4e0d\u662f<\/span>\n                <\/button>\n                <button type=\"button\" class=\"card\" data-option data-choice=\"q1c\" data-next=\"3\" data-score=\"care:1,growth:1,empathy:1,trust:0\" aria-pressed=\"false\">\n                  <span data-choice-indicator aria-hidden=\"true\"><i class=\"bi bi-check-lg\"><\/i><\/span>\n                  <span data-option-text>\u4e0d\u78ba\u5b9a<\/span>\n                <\/button>\n              <\/div>\n            <\/fieldset>\n\n            <fieldset data-question=\"2\" hidden>\n              <legend tabindex=\"-1\" data-question-heading>2\u3001\u4f60\u89ba\u5f97\u81ea\u5df1\u61c9\u8a72\u6642\u4e0d\u6642\u5c0d\u4eba\u793a\u5f31\uff1f<\/legend>\n              <div data-option-grid>\n                <button type=\"button\" class=\"card\" data-option data-choice=\"q2a\" data-next=\"3\" data-score=\"care:2,growth:0,empathy:2,trust:0\" aria-pressed=\"false\">\n                  <span data-choice-indicator aria-hidden=\"true\"><i class=\"bi bi-check-lg\"><\/i><\/span>\n                  <span data-option-text>\u662f<\/span>\n                <\/button>\n                <button type=\"button\" class=\"card\" data-option data-choice=\"q2b\" data-next=\"5\" data-score=\"care:0,growth:1,empathy:0,trust:2\" aria-pressed=\"false\">\n                  <span data-choice-indicator aria-hidden=\"true\"><i class=\"bi bi-check-lg\"><\/i><\/span>\n                  <span data-option-text>\u4e0d\u662f<\/span>\n                <\/button>\n                <button type=\"button\" class=\"card\" data-option data-choice=\"q2c\" data-next=\"4\" data-score=\"care:1,growth:0,empathy:2,trust:1\" aria-pressed=\"false\">\n                  <span data-choice-indicator aria-hidden=\"true\"><i class=\"bi bi-check-lg\"><\/i><\/span>\n                  <span data-option-text>\u5076\u723e\u662f<\/span>\n                <\/button>\n              <\/div>\n            <\/fieldset>\n\n            <fieldset data-question=\"3\" hidden>\n              <legend tabindex=\"-1\" data-question-heading>3\u3001\u4f60\u8166\u888b\u88e1\u88dd\u8457\u5f88\u591a\u7684\u60f3\u6cd5\uff1f<\/legend>\n              <div data-option-grid>\n                <button type=\"button\" class=\"card\" data-option data-choice=\"q3a\" data-next=\"6\" data-score=\"care:0,growth:2,empathy:1,trust:1\" aria-pressed=\"false\">\n                  <span data-choice-indicator aria-hidden=\"true\"><i class=\"bi bi-check-lg\"><\/i><\/span>\n                  <span data-option-text>\u662f<\/span>\n                <\/button>\n                <button type=\"button\" class=\"card\" data-option data-choice=\"q3b\" data-next=\"5\" data-score=\"care:1,growth:0,empathy:0,trust:1\" aria-pressed=\"false\">\n                  <span data-choice-indicator aria-hidden=\"true\"><i class=\"bi bi-check-lg\"><\/i><\/span>\n                  <span data-option-text>\u4e0d\u662f<\/span>\n                <\/button>\n                <button type=\"button\" class=\"card\" data-option data-choice=\"q3c\" data-next=\"4\" data-score=\"care:1,growth:1,empathy:1,trust:0\" aria-pressed=\"false\">\n                  <span data-choice-indicator aria-hidden=\"true\"><i class=\"bi bi-check-lg\"><\/i><\/span>\n                  <span data-option-text>\u5076\u723e<\/span>\n                <\/button>\n              <\/div>\n            <\/fieldset>\n\n            <fieldset data-question=\"4\" hidden>\n              <legend tabindex=\"-1\" data-question-heading>4\u3001\u751f\u6d3b\u4e2d\uff0c\u4f60\u662f\u4e00\u500b\u5f88\u7d30\u5fc3\u7684\u4eba\uff1f<\/legend>\n              <div data-option-grid>\n                <button type=\"button\" class=\"card\" data-option data-choice=\"q4a\" data-next=\"5\" data-score=\"care:1,growth:0,empathy:2,trust:1\" aria-pressed=\"false\">\n                  <span data-choice-indicator aria-hidden=\"true\"><i class=\"bi bi-check-lg\"><\/i><\/span>\n                  <span data-option-text>\u662f<\/span>\n                <\/button>\n                <button type=\"button\" class=\"card\" data-option data-choice=\"q4b\" data-next=\"6\" data-score=\"care:0,growth:1,empathy:0,trust:0\" aria-pressed=\"false\">\n                  <span data-choice-indicator aria-hidden=\"true\"><i class=\"bi bi-check-lg\"><\/i><\/span>\n                  <span data-option-text>\u4e0d\u662f<\/span>\n                <\/button>\n                <button type=\"button\" class=\"card\" data-option data-choice=\"q4c\" data-next=\"7\" data-score=\"care:1,growth:0,empathy:1,trust:1\" aria-pressed=\"false\">\n                  <span data-choice-indicator aria-hidden=\"true\"><i class=\"bi bi-check-lg\"><\/i><\/span>\n                  <span data-option-text>\u6709\u6642\u5019\u662f<\/span>\n                <\/button>\n              <\/div>\n            <\/fieldset>\n\n            <fieldset data-question=\"5\" hidden>\n              <legend tabindex=\"-1\" data-question-heading>5\u3001\u4f60\u5f88\u559c\u6b61\u53bb\u7167\u9867\u5225\u4eba\uff1f<\/legend>\n              <div data-option-grid>\n                <button type=\"button\" class=\"card\" data-option data-choice=\"q5a\" data-next=\"6\" data-score=\"care:2,growth:0,empathy:2,trust:0\" aria-pressed=\"false\">\n                  <span data-choice-indicator aria-hidden=\"true\"><i class=\"bi bi-check-lg\"><\/i><\/span>\n                  <span data-option-text>\u662f<\/span>\n                <\/button>\n                <button type=\"button\" class=\"card\" data-option data-choice=\"q5b\" data-next=\"7\" data-score=\"care:0,growth:1,empathy:0,trust:1\" aria-pressed=\"false\">\n                  <span data-choice-indicator aria-hidden=\"true\"><i class=\"bi bi-check-lg\"><\/i><\/span>\n                  <span data-option-text>\u4e0d\u662f<\/span>\n                <\/button>\n                <button type=\"button\" class=\"card\" data-option data-choice=\"q5c\" data-next=\"8\" data-score=\"care:1,growth:0,empathy:2,trust:1\" aria-pressed=\"false\">\n                  <span data-choice-indicator aria-hidden=\"true\"><i class=\"bi bi-check-lg\"><\/i><\/span>\n                  <span data-option-text>\u6709\u6642\u5019\u6703<\/span>\n                <\/button>\n              <\/div>\n            <\/fieldset>\n\n            <fieldset data-question=\"6\" hidden>\n              <legend tabindex=\"-1\" data-question-heading>6\u3001\u4f60\u5f88\u611b\u8b80\u66f8\u548c\u505a\u904b\u52d5\uff1f<\/legend>\n              <div data-option-grid>\n                <button type=\"button\" class=\"card\" data-option data-choice=\"q6a\" data-next=\"7\" data-score=\"care:0,growth:3,empathy:0,trust:1\" aria-pressed=\"false\">\n                  <span data-choice-indicator aria-hidden=\"true\"><i class=\"bi bi-check-lg\"><\/i><\/span>\n                  <span data-option-text>\u662f<\/span>\n                <\/button>\n                <button type=\"button\" class=\"card\" data-option data-choice=\"q6b\" data-next=\"8\" data-score=\"care:1,growth:0,empathy:0,trust:0\" aria-pressed=\"false\">\n                  <span data-choice-indicator aria-hidden=\"true\"><i class=\"bi bi-check-lg\"><\/i><\/span>\n                  <span data-option-text>\u4e0d\u662f<\/span>\n                <\/button>\n                <button type=\"button\" class=\"card\" data-option data-choice=\"q6c\" data-result=\"C\" data-score=\"care:0,growth:1,empathy:1,trust:1\" aria-pressed=\"false\">\n                  <span data-choice-indicator aria-hidden=\"true\"><i class=\"bi bi-check-lg\"><\/i><\/span>\n                  <span data-option-text>\u5076\u723e\u6703<\/span>\n                <\/button>\n              <\/div>\n            <\/fieldset>\n\n            <fieldset data-question=\"7\" hidden>\n              <legend tabindex=\"-1\" data-question-heading>7\u3001\u4f60\u89ba\u5f97\u54ea\u985e\u4eba\u6700\u6709\u9b45\u529b\uff1f<\/legend>\n              <div data-option-grid>\n                <button type=\"button\" class=\"card\" data-option data-choice=\"q7a\" data-next=\"8\" data-score=\"care:1,growth:1,empathy:0,trust:0\" aria-pressed=\"false\">\n                  <span data-choice-indicator aria-hidden=\"true\"><i class=\"bi bi-check-lg\"><\/i><\/span>\n                  <span data-option-text>\u98a8\u5ea6\u7fe9\u7fe9\u7684<\/span>\n                <\/button>\n                <button type=\"button\" class=\"card\" data-option data-choice=\"q7b\" data-next=\"9\" data-score=\"care:0,growth:0,empathy:1,trust:3\" aria-pressed=\"false\">\n                  <span data-choice-indicator aria-hidden=\"true\"><i class=\"bi bi-check-lg\"><\/i><\/span>\n                  <span data-option-text>\u8cac\u4efb\u611f\u5f88\u5f37\u7684<\/span>\n                <\/button>\n                <button type=\"button\" class=\"card\" data-option data-choice=\"q7c\" data-result=\"D\" data-score=\"care:0,growth:2,empathy:0,trust:0\" aria-pressed=\"false\">\n                  <span data-choice-indicator aria-hidden=\"true\"><i class=\"bi bi-check-lg\"><\/i><\/span>\n                  <span data-option-text>\u9ad8\u984f\u503c\u7684<\/span>\n                <\/button>\n              <\/div>\n            <\/fieldset>\n\n            <fieldset data-question=\"8\" hidden>\n              <legend tabindex=\"-1\" data-question-heading>8\u3001\u5728\u7a7a\u9592\u7684\u6642\u5019\uff0c\u4f60\u611b\u4e0b\u5eda\u623f\uff1f<\/legend>\n              <div data-option-grid>\n                <button type=\"button\" class=\"card\" data-option data-choice=\"q8a\" data-result=\"B\" data-score=\"care:2,growth:1,empathy:2,trust:0\" aria-pressed=\"false\">\n                  <span data-choice-indicator aria-hidden=\"true\"><i class=\"bi bi-check-lg\"><\/i><\/span>\n                  <span data-option-text>\u662f\u7684<\/span>\n                <\/button>\n                <button type=\"button\" class=\"card\" data-option data-choice=\"q8b\" data-next=\"9\" data-score=\"care:0,growth:1,empathy:0,trust:1\" aria-pressed=\"false\">\n                  <span data-choice-indicator aria-hidden=\"true\"><i class=\"bi bi-check-lg\"><\/i><\/span>\n                  <span data-option-text>\u4e0d\u662f<\/span>\n                <\/button>\n                <button type=\"button\" class=\"card\" data-option data-choice=\"q8c\" data-next=\"10\" data-score=\"care:1,growth:0,empathy:1,trust:1\" aria-pressed=\"false\">\n                  <span data-choice-indicator aria-hidden=\"true\"><i class=\"bi bi-check-lg\"><\/i><\/span>\n                  <span data-option-text>\u53ef\u80fd\u662f<\/span>\n                <\/button>\n              <\/div>\n            <\/fieldset>\n\n            <fieldset data-question=\"9\" hidden>\n              <legend tabindex=\"-1\" data-question-heading>9\u3001\u4f60\u8655\u8655\u6703\u66ff\u5225\u4eba\u8457\u60f3\uff1f<\/legend>\n              <div data-option-grid>\n                <button type=\"button\" class=\"card\" data-option data-choice=\"q9a\" data-next=\"10\" data-score=\"care:1,growth:0,empathy:3,trust:1\" aria-pressed=\"false\">\n                  <span data-choice-indicator aria-hidden=\"true\"><i class=\"bi bi-check-lg\"><\/i><\/span>\n                  <span data-option-text>\u662f<\/span>\n                <\/button>\n                <button type=\"button\" class=\"card\" data-option data-choice=\"q9b\" data-result=\"A\" data-score=\"care:0,growth:1,empathy:0,trust:0\" aria-pressed=\"false\">\n                  <span data-choice-indicator aria-hidden=\"true\"><i class=\"bi bi-check-lg\"><\/i><\/span>\n                  <span data-option-text>\u4e0d\u662f<\/span>\n                <\/button>\n                <button type=\"button\" class=\"card\" data-option data-choice=\"q9c\" data-result=\"C\" data-score=\"care:1,growth:0,empathy:1,trust:0\" aria-pressed=\"false\">\n                  <span data-choice-indicator aria-hidden=\"true\"><i class=\"bi bi-check-lg\"><\/i><\/span>\n                  <span data-option-text>\u5076\u723e\u6703<\/span>\n                <\/button>\n              <\/div>\n            <\/fieldset>\n\n            <fieldset data-question=\"10\" hidden>\n              <legend tabindex=\"-1\" data-question-heading>10\u3001\u4f60\u89ba\u5f97\u6700\u5feb\u7684\u5145\u96fb\u65b9\u5f0f\u662f\u8b80\u66f8\u3001\u5065\u8eab\u3001\u9084\u662f\u65c5\u904a\uff1f<\/legend>\n              <div data-option-grid>\n                <button type=\"button\" class=\"card\" data-option data-choice=\"q10a\" data-result=\"D\" data-score=\"care:0,growth:3,empathy:0,trust:1\" aria-pressed=\"false\">\n                  <span data-choice-indicator aria-hidden=\"true\"><i class=\"bi bi-check-lg\"><\/i><\/span>\n                  <span data-option-text>\u8b80\u66f8<\/span>\n                <\/button>\n                <button type=\"button\" class=\"card\" data-option data-choice=\"q10b\" data-result=\"B\" data-score=\"care:0,growth:2,empathy:0,trust:1\" aria-pressed=\"false\">\n                  <span data-choice-indicator aria-hidden=\"true\"><i class=\"bi bi-check-lg\"><\/i><\/span>\n                  <span data-option-text>\u5065\u8eab<\/span>\n                <\/button>\n                <button type=\"button\" class=\"card\" data-option data-choice=\"q10c\" data-result=\"A\" data-score=\"care:1,growth:1,empathy:0,trust:0\" aria-pressed=\"false\">\n                  <span data-choice-indicator aria-hidden=\"true\"><i class=\"bi bi-check-lg\"><\/i><\/span>\n                  <span data-option-text>\u65c5\u904a<\/span>\n                <\/button>\n              <\/div>\n            <\/fieldset>\n          <\/div>\n        <\/section>\n\n        <div class=\"d-flex justify-content-center mt-4\">\n          <button type=\"button\" class=\"btn btn-outline-secondary\" data-action=\"prev\" hidden>\n            <i class=\"bi bi-arrow-left-short\" aria-hidden=\"true\"><\/i> \u4e0a\u4e00\u984c\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/article>\n  <\/section>\n\n  <section id=\"quizresult9\" data-page=\"result9\" hidden>\n    <article class=\"card border-0 shadow-sm overflow-hidden\" data-soft-card>\n      <div class=\"card-body\" data-result-content>\n        <header class=\"text-center mb-4\">\n          <p class=\"mb-2\" data-kicker>\u4f60\u7684\u6e2c\u9a57\u7d50\u679c<\/p>\n          <h2 tabindex=\"-1\" data-page-title=\"result9\">\u521d\u5fc3\u5b88\u8b77\u5206\u6790<\/h2>\n          <p class=\"mx-auto mb-0\" data-result-status aria-live=\"polite\">\u5df2\u5b8c\u6210\u6e2c\u9a57\uff0c\u6b63\u5728\u986f\u793a\u4f60\u7684\u7d50\u679c\u3002<\/p>\n        <\/header>\n\n        <section data-score-panel aria-label=\"\u521d\u5fc3\u5b88\u8b77\u6307\u6578\">\n          <span>\u521d\u5fc3\u5b88\u8b77\u6307\u6578<\/span>\n          <strong><span data-overall-score>&#8212;<\/span>%<\/strong>\n          <small data-score-level>\u5b8c\u6210\u5f8c\u986f\u793a\u5206\u6578\u5340\u9593<\/small>\n        <\/section>\n\n        <section class=\"card border-0\" data-chart-card>\n          <div data-chart-status aria-live=\"polite\" hidden>\u5716\u8868\u6e96\u5099\u4e2d\u2026<\/div>\n          <div data-chart-wrap>\n            <canvas data-score-chart aria-label=\"\u591a\u7dad\u5ea6\u5206\u6578\u5716\u8868\" role=\"img\"><\/canvas>\n          <\/div>\n        <\/section>\n\n        <section data-metric-grid aria-label=\"\u591a\u7dad\u5ea6\u5206\u6578\u6458\u8981\">\n          <article class=\"card\" data-metric-card=\"care\">\n            <h3>\u966a\u4f34\u50be\u807d<\/h3>\n            <strong><span data-metric-value=\"care\">&#8212;<\/span>%<\/strong>\n            <div data-meter><span data-metric-bar=\"care\"><\/span><\/div>\n          <\/article>\n          <article class=\"card\" data-metric-card=\"growth\">\n            <h3>\u81ea\u6211\u6ecb\u990a<\/h3>\n            <strong><span data-metric-value=\"growth\">&#8212;<\/span>%<\/strong>\n            <div data-meter><span data-metric-bar=\"growth\"><\/span><\/div>\n          <\/article>\n          <article class=\"card\" data-metric-card=\"empathy\">\n            <h3>\u63db\u4f4d\u9ad4\u8cbc<\/h3>\n            <strong><span data-metric-value=\"empathy\">&#8212;<\/span>%<\/strong>\n            <div data-meter><span data-metric-bar=\"empathy\"><\/span><\/div>\n          <\/article>\n          <article class=\"card\" data-metric-card=\"trust\">\n            <h3>\u4fe1\u4efb\u7a69\u5b9a<\/h3>\n            <strong><span data-metric-value=\"trust\">&#8212;<\/span>%<\/strong>\n            <div data-meter><span data-metric-bar=\"trust\"><\/span><\/div>\n          <\/article>\n        <\/section>\n\n        <section data-distribution-card aria-label=\"\u6574\u9ad4\u8a55\u5206\u5206\u5e03\">\n          <h3>\u6574\u9ad4\u4f4d\u7f6e<\/h3>\n          <div data-distribution-track>\n            <span data-range=\"soft\">\u6696\u8eab\u671f 0\u201339<\/span>\n            <span data-range=\"steady\">\u7a69\u5b9a\u671f 40\u201369<\/span>\n            <span data-range=\"bloom\">\u76db\u653e\u671f 70\u2013100<\/span>\n            <i data-score-marker aria-hidden=\"true\"><\/i>\n          <\/div>\n          <div data-distribution-legend>\n            <span><i data-dot=\"soft\"><\/i>\u6696\u8eab\u671f 0\u201339<\/span>\n            <span><i data-dot=\"steady\"><\/i>\u7a69\u5b9a\u671f 40\u201369<\/span>\n            <span><i data-dot=\"bloom\"><\/i>\u76db\u653e\u671f 70\u2013100<\/span>\n          <\/div>\n        <\/section>\n\n        <section class=\"card border-0\" data-result-block=\"A\" hidden>\n          <h3>\u7d50\u679c A\uff5c\u591a\u4e00\u4e9b\u966a\u4f34\u8207\u50be\u807d<\/h3>\n          <p>\n            \u4f60\u6703\u88ab\u300c\u6709\u4eba\u9858\u610f\u5728\u9700\u8981\u6642\u966a\u5728\u8eab\u908a\u300d\u6df1\u6df1\u6253\u52d5\u3002\u5c0d\u65b9\u5176\u5be6\u4e5f\u6e34\u671b\u9019\u6a23\u7684\u966a\u4f34\uff0c\n            \u4e0d\u4e00\u5b9a\u8981\u505a\u5f88\u591a\u4e8b\uff0c\u5b89\u975c\u807d\u4ed6\u8aaa\u8a71\uff0c\u5c31\u80fd\u8b93\u95dc\u4fc2\u91cd\u65b0\u8b8a\u67d4\u8edf\u3002\n          <\/p>\n          <p>\n            \u5efa\u8b70\u4f60\u591a\u5b89\u6392\u6c92\u6709\u58d3\u529b\u7684\u76f8\u8655\u6642\u9593\uff0c\u5c11\u6025\u8457\u7d66\u7b54\u6848\uff0c\u5148\u807d\u61c2\u4ed6\u7684\u60c5\u7dd2\u3002\n            \u7a69\u5b9a\u966a\u4f34\u6703\u8b93\u4ed6\u66f4\u9858\u610f\u628a\u521d\u5fc3\u7559\u5728\u4f60\u8eab\u4e0a\u3002\n          <\/p>\n        <\/section>\n\n        <section class=\"card border-0\" data-result-block=\"B\" hidden>\n          <h3>\u7d50\u679c B\uff5c\u5167\u5916\u517c\u4fee\uff0c\u8b93\u5438\u5f15\u529b\u6301\u7e8c\u767c\u5149<\/h3>\n          <p>\n            \u4f60\u5011\u7684\u95dc\u4fc2\u9700\u8981\u4e00\u9ede\u65b0\u9bae\u611f\u8207\u6210\u9577\u611f\u3002\u8207\u5176\u628a\u7126\u9ede\u653e\u5728\u64d4\u5fc3\u5c0d\u65b9\u8b8a\u5fc3\uff0c\n            \u4e0d\u5982\u628a\u80fd\u91cf\u653e\u56de\u81ea\u5df1\uff0c\u8b93\u5916\u5728\u72c0\u614b\u8207\u5167\u5728\u5e95\u6c23\u4e00\u8d77\u8b8a\u597d\u3002\n          <\/p>\n          <p>\n            \u5efa\u8b70\u4f60\u7dad\u6301\u5065\u5eb7\u4f5c\u606f\u3001\u57f9\u990a\u8208\u8da3\uff0c\u4e5f\u4fdd\u7559\u81ea\u5df1\u7684\u7bc0\u594f\u3002\u7576\u4f60\u8d8a\u4f86\u8d8a\u7a69\u5b9a\u800c\u6709\u9b45\u529b\uff0c\n            \u5c0d\u65b9\u81ea\u7136\u66f4\u6368\u4e0d\u5f97\u96e2\u958b\u9019\u4efd\u95dc\u4fc2\u3002\n          <\/p>\n        <\/section>\n\n        <section class=\"card border-0\" data-result-block=\"C\" hidden>\n          <h3>\u7d50\u679c C\uff5c\u7df4\u7fd2\u7ad9\u5728\u4ed6\u7684\u89d2\u5ea6\u60f3\u4e00\u60f3<\/h3>\n          <p>\n            \u4f60\u5728\u610f\u611f\u60c5\uff0c\u4e5f\u5bb9\u6613\u5728\u60c5\u7dd2\u4e0a\u4f86\u6642\u5148\u770b\u898b\u5c0d\u65b9\u7684\u4e0d\u8db3\u3002\u82e5\u80fd\u591a\u4e00\u6b65\u63db\u4f4d\u601d\u8003\uff0c\n            \u4f60\u5011\u4e4b\u9593\u7684\u8aa4\u6703\u6703\u5c11\u5f88\u591a\uff0c\u89aa\u5bc6\u611f\u4e5f\u6703\u66f4\u5bb9\u6613\u56de\u4f86\u3002\n          <\/p>\n          <p>\n            \u5efa\u8b70\u4f60\u5728\u722d\u57f7\u524d\u5148\u505c\u4e09\u79d2\uff0c\u554f\u81ea\u5df1\uff1a\u300c\u4ed6\u6b64\u523b\u771f\u6b63\u9700\u8981\u7684\u662f\u4ec0\u9ebc\uff1f\u300d\n            \u7576\u4f60\u9858\u610f\u7406\u89e3\uff0c\u4ed6\u4e5f\u6703\u66f4\u611f\u6fc0\u4f60\u7684\u7528\u5fc3\u3002\n          <\/p>\n        <\/section>\n\n        <section class=\"card border-0\" data-result-block=\"D\" hidden>\n          <h3>\u7d50\u679c D\uff5c\u7528\u7a69\u5b9a\u8207\u4fe1\u4efb\u5b88\u4f4f\u521d\u5fc3<\/h3>\n          <p>\n            \u4f60\u7684\u5fc3\u5f88\u654f\u92b3\uff0c\u4e5f\u5bb9\u6613\u88ab\u65b0\u7684\u611f\u53d7\u727d\u52d5\u3002\u5c0d\u65b9\u53ef\u80fd\u6703\u64d4\u5fc3\u4f60\u67d0\u5929\u5ffd\u7136\u96e2\u958b\uff0c\n            \u56e0\u6b64\u4e0d\u6562\u5b8c\u5168\u628a\u5fc3\u4ea4\u51fa\u4f86\u3002\n          <\/p>\n          <p>\n            \u5efa\u8b70\u4f60\u7528\u66f4\u660e\u78ba\u7684\u627f\u8afe\u8207\u7a69\u5b9a\u884c\u52d5\u5efa\u7acb\u5b89\u5168\u611f\u3002\u8b93\u4ed6\u77e5\u9053\u4f60\u4e0d\u662f\u4e00\u6642\u8208\u8d77\uff0c\n            \u4fe1\u4efb\u6703\u8b93\u611b\u7684\u521d\u5fc3\u66f4\u9577\u4e45\u3002\n          <\/p>\n        <\/section>\n\n        <div class=\"d-flex justify-content-center mt-4\">\n          <button type=\"button\" class=\"btn\" data-action=\"reset\">\n            \u91cd\u65b0\u6e2c\u9a57 <i class=\"bi bi-arrow-repeat\" aria-hidden=\"true\"><\/i>\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/article>\n  <\/section>\n<\/div>\n\n<!-- CSS\uff1a\u6a23\u5f0f -->\n<style>\n  #quizapp9,\n  [data-quiz-app=\"quiz9\"] {\n    --q9-text: #372f2a;\n    --q9-muted: #6a5f56;\n    --q9-line: #eadfd3;\n    --q9-card: #fffdf9;\n    --q9-cream: #f8f0e7;\n    --q9-sage: #8fa58f;\n    --q9-sage-dark: #596f5b;\n    --q9-sand: #d7b98e;\n    --q9-clay: #c89076;\n    --q9-tea: #a7b99a;\n    --q9-brown: #5b4032;\n    --q9-shadow: 0 18px 45px rgba(86, 67, 49, 0.12);\n    max-width: 750px;\n    margin: 0 auto;\n    padding: 16px;\n    color: var(--q9-text);\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans TC\", \"Microsoft JhengHei\", Arial, sans-serif;\n    font-size: 16px;\n    line-height: 1.7;\n    background: transparent;\n  }\n\n  #quizapp9 *,\n  #quizapp9 *::before,\n  #quizapp9 *::after {\n    box-sizing: border-box;\n  }\n\n  #quizapp9 [hidden] {\n    display: none !important;\n  }\n\n  #quizapp9 [data-soft-card] {\n    background:\n      radial-gradient(circle at 10% 0%, rgba(215, 185, 142, 0.22), transparent 34%),\n      radial-gradient(circle at 90% 10%, rgba(143, 165, 143, 0.20), transparent 32%),\n      var(--q9-card);\n    border-radius: 28px;\n    box-shadow: var(--q9-shadow);\n    contain: layout paint;\n  }\n\n  #quizapp9 [data-intro-content],\n  #quizapp9 [data-quiz-content],\n  #quizapp9 [data-result-content] {\n    position: relative;\n    padding: 32px 20px;\n  }\n\n  #quizapp9 [data-kicker],\n  #quizapp9 [data-step-label] {\n    color: var(--q9-sage-dark);\n    font-size: 0.95rem;\n    font-weight: 700;\n    letter-spacing: 0.08em;\n  }\n\n  #quizapp9 h1,\n  #quizapp9 h2,\n  #quizapp9 h3,\n  #quizapp9 legend {\n    color: var(--q9-text);\n    font-weight: 800;\n    line-height: 1.25;\n  }\n\n  #quizapp9 h1 {\n    margin: 0 auto 16px;\n    max-width: 620px;\n    font-size: clamp(2rem, 8vw, 2.5rem);\n  }\n\n  #quizapp9 h2 {\n    margin: 0 0 10px;\n    font-size: clamp(1.55rem, 6vw, 2rem);\n  }\n\n  #quizapp9 h3 {\n    margin: 0 0 10px;\n    font-size: 1.2rem;\n  }\n\n  #quizapp9 legend {\n    width: 100%;\n    margin: 0 0 16px;\n    float: none;\n    font-size: clamp(1.25rem, 5vw, 1.6rem);\n  }\n\n  #quizapp9 [data-lead],\n  #quizapp9 [data-helper],\n  #quizapp9 [data-result-status],\n  #quizapp9 p {\n    color: var(--q9-muted);\n    font-size: 1rem;\n  }\n\n  #quizapp9 [data-lead],\n  #quizapp9 [data-result-status] {\n    max-width: 600px;\n  }\n\n  #quizapp9 [data-floating-icons] {\n    position: relative;\n    min-height: 96px;\n    margin-bottom: 8px;\n  }\n\n  #quizapp9 [data-orb] {\n    position: absolute;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 72px;\n    height: 72px;\n    border-radius: 999px;\n    color: var(--q9-brown);\n    background: rgba(255, 255, 255, 0.72);\n    box-shadow: 0 14px 34px rgba(83, 66, 50, 0.12);\n  }\n\n  #quizapp9 [data-orb] i {\n    font-size: 1.55rem;\n  }\n\n  #quizapp9 [data-orb=\"heart\"] {\n    left: 50%;\n    top: 8px;\n    transform: translateX(-50%);\n    background: #f5dfd3;\n  }\n\n  #quizapp9 [data-orb=\"sparkle\"] {\n    left: calc(50% - 102px);\n    top: 24px;\n    width: 56px;\n    height: 56px;\n    background: #edf2e7;\n  }\n\n  #quizapp9 [data-orb=\"flower\"] {\n    right: calc(50% - 104px);\n    top: 28px;\n    width: 56px;\n    height: 56px;\n    background: #f6ecd9;\n  }\n\n  #quizapp9 [data-action=\"start\"],\n  #quizapp9 [data-action=\"reset\"] {\n    min-width: 168px;\n    min-height: 48px;\n    border: 0;\n    border-radius: 999px;\n    color: #fff;\n    font-weight: 800;\n    background: linear-gradient(135deg, #8fa58f, #c89076);\n    box-shadow: 0 14px 30px rgba(118, 91, 72, 0.22);\n    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;\n  }\n\n  #quizapp9 [data-action=\"start\"]:hover,\n  #quizapp9 [data-action=\"reset\"]:hover {\n    transform: translateY(-2px);\n    filter: saturate(1.04);\n    box-shadow: 0 18px 36px rgba(118, 91, 72, 0.26);\n  }\n\n  #quizapp9 [data-action=\"prev\"] {\n    min-width: 132px;\n    min-height: 44px;\n    border-radius: 999px;\n    border-color: var(--q9-line);\n    color: var(--q9-text);\n    background: rgba(255, 255, 255, 0.72);\n  }\n\n  #quizapp9 [data-quiz-landing-card] {\n    background:\n      radial-gradient(circle at 8% 0%, rgba(215, 185, 142, 0.26), transparent 34%),\n      radial-gradient(circle at 92% 10%, rgba(143, 165, 143, 0.25), transparent 34%),\n      linear-gradient(145deg, rgba(255, 253, 249, 0.96), rgba(248, 240, 231, 0.92));\n  }\n\n  #quizapp9 [data-quiz-hero] {\n    display: flex;\n    flex-direction: column-reverse;\n    align-items: center;\n    gap: 20px;\n    margin-bottom: 20px;\n    text-align: center;\n  }\n\n  #quizapp9 [data-quiz-hero-text] {\n    max-width: 620px;\n  }\n\n  #quizapp9 [data-quiz-hero] h2 {\n    margin-bottom: 12px;\n    font-size: clamp(1.75rem, 7vw, 2.35rem);\n  }\n\n  #quizapp9 [data-quiz-visual] {\n    position: relative;\n    width: 168px;\n    height: 116px;\n    margin-inline: auto;\n  }\n\n  #quizapp9 [data-quiz-orb] {\n    position: absolute;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 999px;\n    color: var(--q9-brown);\n    box-shadow: 0 16px 34px rgba(83, 66, 50, 0.13);\n  }\n\n  #quizapp9 [data-quiz-orb] i {\n    line-height: 1;\n  }\n\n  #quizapp9 [data-quiz-orb=\"main\"] {\n    left: 50%;\n    top: 8px;\n    width: 82px;\n    height: 82px;\n    transform: translateX(-50%);\n    background: #f3ded2;\n  }\n\n  #quizapp9 [data-quiz-orb=\"main\"] i {\n    font-size: 1.9rem;\n  }\n\n  #quizapp9 [data-quiz-orb=\"small-a\"] {\n    left: 6px;\n    top: 36px;\n    width: 52px;\n    height: 52px;\n    background: #edf2e7;\n  }\n\n  #quizapp9 [data-quiz-orb=\"small-b\"] {\n    right: 4px;\n    top: 42px;\n    width: 52px;\n    height: 52px;\n    background: #f6ecd9;\n  }\n\n  #quizapp9 [data-progress-panel] {\n    margin-bottom: 20px;\n    padding: 16px;\n    border: 1px solid rgba(234, 223, 211, 0.9);\n    border-radius: 24px;\n    background: rgba(255, 255, 255, 0.68);\n    box-shadow: 0 10px 26px rgba(83, 66, 50, 0.07);\n  }\n\n  #quizapp9 [data-progress-meta] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    margin-bottom: 10px;\n    text-align: center;\n  }\n\n  #quizapp9 [data-progress-note] {\n    color: var(--q9-muted);\n    font-size: 0.92rem;\n    font-weight: 600;\n  }\n\n  #quizapp9 [data-progress-wrap] {\n    height: 10px;\n    border-radius: 999px;\n    background: #f0e7dc;\n  }\n\n  #quizapp9 [data-progress-bar] {\n    border-radius: 999px;\n    background: linear-gradient(90deg, var(--q9-tea), var(--q9-sand));\n    transition: width 220ms ease;\n  }\n\n  #quizapp9 [data-question-shell] {\n    padding: 18px;\n    border: 1px solid rgba(234, 223, 211, 0.9);\n    border-radius: 28px;\n    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 253, 249, 0.74));\n    box-shadow: 0 16px 36px rgba(83, 66, 50, 0.09);\n  }\n\n  #quizapp9 fieldset {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n\n  #quizapp9 [data-question-heading] {\n    display: block;\n    margin-bottom: 18px;\n    text-align: center;\n    font-size: clamp(1.35rem, 5.5vw, 1.85rem);\n  }\n\n  #quizapp9 [data-option-grid] {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 12px;\n  }\n\n  #quizapp9 [data-option] {\n    width: 100%;\n    min-height: 60px;\n    padding: 16px;\n    display: flex !important;\n    flex-direction: row !important;\n    align-items: center !important;\n    justify-content: flex-start;\n    gap: 12px;\n    text-align: left;\n    line-height: 1.45;\n    border: 1px solid var(--q9-line);\n    border-radius: 20px;\n    color: var(--q9-text);\n    background: rgba(255, 255, 255, 0.82);\n    box-shadow: 0 8px 22px rgba(83, 66, 50, 0.08);\n    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;\n  }\n\n  #quizapp9 [data-option]:hover {\n    transform: translateY(-2px);\n    border-color: rgba(143, 165, 143, 0.78);\n    box-shadow: 0 14px 28px rgba(83, 66, 50, 0.12);\n  }\n\n  #quizapp9 [data-option][data-selected=\"true\"] {\n    border-color: var(--q9-sage-dark);\n    background: #f0f5ed;\n  }\n\n  #quizapp9 [data-choice-indicator] {\n    flex: 0 0 30px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    align-self: center;\n    width: 30px;\n    height: 30px;\n    margin-top: 0;\n    border: 2px solid #cdbfae;\n    border-radius: 999px;\n    color: transparent;\n    background: #fffdf9;\n    transition: border-color 160ms ease, background 160ms ease, color 160ms ease;\n  }\n\n  #quizapp9 [data-selected=\"true\"] [data-choice-indicator] {\n    border-color: var(--q9-sage-dark);\n    color: #fff;\n    background: var(--q9-sage-dark);\n  }\n\n  #quizapp9 [data-option-text] {\n    display: block;\n    flex: 1 1 auto;\n    min-width: 0;\n    padding-top: 1px;\n    font-size: 1rem;\n    font-weight: 700;\n    line-height: 1.45;\n  }\n\n  #quizapp9 [data-score-panel] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n    margin-bottom: 16px;\n    padding: 18px;\n    border: 1px solid var(--q9-line);\n    border-radius: 24px;\n    background: rgba(255, 255, 255, 0.72);\n    text-align: center;\n  }\n\n  #quizapp9 [data-score-panel] span {\n    color: var(--q9-muted);\n    font-weight: 700;\n  }\n\n  #quizapp9 [data-score-panel] strong {\n    color: var(--q9-brown);\n    font-size: clamp(2rem, 9vw, 2.7rem);\n    line-height: 1.1;\n  }\n\n  #quizapp9 [data-score-panel] small {\n    color: var(--q9-muted);\n    font-weight: 700;\n  }\n\n  #quizapp9 [data-chart-card] {\n    margin-bottom: 16px;\n    padding: 16px;\n    border-radius: 24px;\n    background: rgba(255, 255, 255, 0.72);\n    contain: layout paint;\n  }\n\n  #quizapp9 [data-chart-wrap] {\n    position: relative;\n    width: 100%;\n    height: 288px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  #quizapp9 [data-chart-status] {\n    margin-bottom: 8px;\n    color: var(--q9-muted);\n    text-align: center;\n    font-weight: 700;\n  }\n\n  #quizapp9 [data-metric-grid] {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 12px;\n    margin-bottom: 16px;\n  }\n\n  #quizapp9 [data-metric-card] {\n    padding: 16px;\n    border: 1px solid var(--q9-line);\n    border-radius: 20px;\n    background: rgba(255, 255, 255, 0.76);\n  }\n\n  #quizapp9 [data-metric-card] h3 {\n    margin-bottom: 4px;\n    font-size: 1rem;\n  }\n\n  #quizapp9 [data-metric-card] strong {\n    display: block;\n    margin-bottom: 10px;\n    color: var(--q9-brown);\n    font-size: 1.35rem;\n  }\n\n  #quizapp9 [data-meter] {\n    height: 10px;\n    overflow: hidden;\n    border-radius: 999px;\n    background: #efe5d9;\n  }\n\n  #quizapp9 [data-meter] span {\n    display: block;\n    width: 0%;\n    height: 100%;\n    border-radius: 999px;\n    background: linear-gradient(90deg, var(--q9-tea), var(--q9-sand));\n    transition: width 260ms ease;\n  }\n\n  #quizapp9 [data-distribution-card] {\n    margin-bottom: 16px;\n    padding: 16px;\n    border: 1px solid var(--q9-line);\n    border-radius: 24px;\n    background: rgba(255, 255, 255, 0.72);\n  }\n\n  #quizapp9 [data-distribution-track] {\n    position: relative;\n    display: grid;\n    grid-template-columns: 40fr 30fr 30fr;\n    min-height: 44px;\n    overflow: visible;\n    border-radius: 999px;\n  }\n\n  #quizapp9 [data-range] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 8px 6px;\n    color: #3f352e;\n    font-size: 0.75rem;\n    font-weight: 800;\n    text-align: center;\n  }\n\n  #quizapp9 [data-range=\"soft\"] {\n    border-radius: 999px 0 0 999px;\n    background: #eee1d0;\n  }\n\n  #quizapp9 [data-range=\"steady\"] {\n    background: #dfe8d8;\n  }\n\n  #quizapp9 [data-range=\"bloom\"] {\n    border-radius: 0 999px 999px 0;\n    background: #efd8cc;\n  }\n\n  #quizapp9 [data-score-marker] {\n    position: absolute;\n    top: 50%;\n    left: 0%;\n    width: 18px;\n    height: 18px;\n    border: 3px solid #fffdf9;\n    border-radius: 999px;\n    background: var(--q9-brown);\n    box-shadow: 0 6px 14px rgba(65, 45, 34, 0.28);\n    transform: translate(-50%, -50%);\n    transition: left 260ms ease;\n  }\n\n  #quizapp9 [data-distribution-legend] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px 14px;\n    margin-top: 12px;\n    color: var(--q9-muted);\n    font-size: 0.9rem;\n    font-weight: 700;\n  }\n\n  #quizapp9 [data-distribution-legend] span {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n  }\n\n  #quizapp9 [data-dot] {\n    display: inline-block;\n    width: 10px;\n    height: 10px;\n    border-radius: 999px;\n  }\n\n  #quizapp9 [data-dot=\"soft\"] {\n    background: #eee1d0;\n  }\n\n  #quizapp9 [data-dot=\"steady\"] {\n    background: #dfe8d8;\n  }\n\n  #quizapp9 [data-dot=\"bloom\"] {\n    background: #efd8cc;\n  }\n\n  #quizapp9 [data-result-block] {\n    padding: 18px;\n    border-radius: 24px;\n    background: rgba(255, 255, 255, 0.78);\n  }\n\n  #quizapp9 [data-result-block] p:last-child {\n    margin-bottom: 0;\n  }\n\n  #quizapp9 button:focus-visible,\n  #quizapp9 [tabindex=\"-1\"]:focus-visible {\n    outline: 3px solid rgba(89, 111, 91, 0.42);\n    outline-offset: 3px;\n  }\n\n  @media (min-width: 576px) {\n    #quizapp9 {\n      padding: 24px;\n      font-size: 17px;\n    }\n\n    #quizapp9 [data-intro-content],\n    #quizapp9 [data-quiz-content],\n    #quizapp9 [data-result-content] {\n      padding: 40px 32px;\n    }\n\n    #quizapp9 [data-quiz-hero] {\n      flex-direction: row;\n      justify-content: space-between;\n      text-align: left;\n    }\n\n    #quizapp9 [data-quiz-visual] {\n      flex: 0 0 172px;\n      margin-inline: 0;\n    }\n\n    #quizapp9 [data-progress-meta] {\n      flex-direction: row;\n      align-items: center;\n      justify-content: space-between;\n      text-align: left;\n    }\n\n    #quizapp9 [data-question-shell] {\n      padding: 24px;\n    }\n\n    #quizapp9 [data-question-heading] {\n      text-align: left;\n    }\n\n    #quizapp9 [data-option-grid] {\n      gap: 14px;\n    }\n\n    #quizapp9 [data-metric-grid] {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n\n    #quizapp9 [data-chart-wrap] {\n      height: 320px;\n    }\n\n    #quizapp9 [data-range] {\n      font-size: 0.88rem;\n    }\n  }\n<\/style>\n\n<!-- JavaScript\uff1a\u884c\u70ba -->\n<script>\n(() => {\n  const root = document.querySelector('[data-quiz-app=\"quiz9\"]');\n  if (!root) return;\n\n  const pages = {\n    intro9: root.querySelector('[data-page=\"intro9\"]'),\n    quiz9: root.querySelector('[data-page=\"quiz9\"]'),\n    result9: root.querySelector('[data-page=\"result9\"]')\n  };\n\n  const questionEls = Array.from(root.querySelectorAll('[data-question]'));\n  const optionEls = Array.from(root.querySelectorAll('[data-option]'));\n  const resultBlocks = Array.from(root.querySelectorAll('[data-result-block]'));\n\n  const stepLabel = root.querySelector('[data-step-label]');\n  const progressBar = root.querySelector('[data-progress-bar]');\n  const prevButton = root.querySelector('[data-action=\"prev\"]');\n  const resultStatus = root.querySelector('[data-result-status]');\n  const overallScoreEl = root.querySelector('[data-overall-score]');\n  const scoreLevelEl = root.querySelector('[data-score-level]');\n  const scoreMarker = root.querySelector('[data-score-marker]');\n  const chartCanvas = root.querySelector('[data-score-chart]');\n  const chartStatus = root.querySelector('[data-chart-status]');\n\n  const metricKeys = ['care', 'growth', 'empathy', 'trust'];\n  const metricLabels = {\n    care: '\u966a\u4f34\u50be\u807d',\n    growth: '\u81ea\u6211\u6ecb\u990a',\n    empathy: '\u63db\u4f4d\u9ad4\u8cbc',\n    trust: '\u4fe1\u4efb\u7a69\u5b9a'\n  };\n\n  const resultBoosts = {\n    A: { care: 3, growth: 1, empathy: 1, trust: 0 },\n    B: { care: 1, growth: 3, empathy: 1, trust: 1 },\n    C: { care: 1, growth: 0, empathy: 3, trust: 1 },\n    D: { care: 0, growth: 1, empathy: 1, trust: 3 }\n  };\n\n  const state = {\n    currentQuestion: '1',\n    history: [],\n    completedPath: [],\n    answers: new Map(),\n    resultKey: null,\n    locked: false,\n    chart: null\n  };\n\n  const parseScore = (raw = '') => {\n    return raw.split(',').reduce((scores, pair) => {\n      const [key, value] = pair.split(':');\n      if (key) scores[key.trim()] = Number(value) || 0;\n      return scores;\n    }, {});\n  };\n\n  const scrollAndFocus = (target) => {\n    if (!target) return;\n    window.requestAnimationFrame(() => {\n      target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      target.focus({ preventScroll: true });\n    });\n  };\n\n  const showPage = (pageName) => {\n    Object.entries(pages).forEach(([key, section]) => {\n      section.hidden = key !== pageName;\n    });\n  };\n\n  const clearSelectedStates = () => {\n    optionEls.forEach((button) => {\n      button.removeAttribute('data-selected');\n      button.setAttribute('aria-pressed', 'false');\n    });\n  };\n\n  const syncQuestionSelection = (questionId) => {\n    const question = root.querySelector(`[data-question=\"${questionId}\"]`);\n    const savedAnswer = state.answers.get(questionId);\n\n    if (!question) return;\n\n    question.querySelectorAll('[data-option]').forEach((button) => {\n      const isSelected = savedAnswer && savedAnswer.choice === button.dataset.choice;\n      button.toggleAttribute('data-selected', Boolean(isSelected));\n      button.setAttribute('aria-pressed', isSelected ? 'true' : 'false');\n    });\n  };\n\n  const showQuestion = (questionId) => {\n    state.currentQuestion = questionId;\n\n    questionEls.forEach((question) => {\n      question.hidden = question.dataset.question !== questionId;\n    });\n\n    syncQuestionSelection(questionId);\n\n    const step = state.history.length + 1;\n    stepLabel.textContent = `\u7b2c ${step} \u984c\uff0f\u6700\u591a 10 \u984c`;\n    progressBar.style.width = `${Math.min(100, Math.max(10, step * 10))}%`;\n    prevButton.hidden = state.history.length === 0;\n\n    showPage('quiz9');\n\n    const heading = root.querySelector(`[data-question=\"${questionId}\"] [data-question-heading]`);\n    scrollAndFocus(heading);\n  };\n\n  const resetChart = () => {\n    if (state.chart) {\n      state.chart.destroy();\n      state.chart = null;\n    }\n  };\n\n  const resetState = () => {\n    state.currentQuestion = '1';\n    state.history = [];\n    state.completedPath = [];\n    state.answers = new Map();\n    state.resultKey = null;\n    state.locked = false;\n\n    clearSelectedStates();\n    resetChart();\n\n    resultBlocks.forEach((block) => {\n      block.hidden = true;\n    });\n\n    metricKeys.forEach((key) => {\n      const valueEl = root.querySelector(`[data-metric-value=\"${key}\"]`);\n      const barEl = root.querySelector(`[data-metric-bar=\"${key}\"]`);\n      if (valueEl) valueEl.textContent = '--';\n      if (barEl) barEl.style.width = '0%';\n    });\n\n    overallScoreEl.textContent = '--';\n    scoreLevelEl.textContent = '\u5b8c\u6210\u5f8c\u986f\u793a\u5206\u6578\u5340\u9593';\n    scoreMarker.style.left = '0%';\n    chartStatus.hidden = true;\n  };\n\n  const getScoreLevel = (score) => {\n    if (score >= 70) return '\u76db\u653e\u671f\uff1a\u95dc\u4fc2\u80fd\u91cf\u5145\u8db3\uff0c\u9069\u5408\u7a69\u5b9a\u6df1\u5316\u3002';\n    if (score >= 40) return '\u7a69\u5b9a\u671f\uff1a\u5df2\u6709\u57fa\u790e\uff0c\u6301\u7e8c\u88dc\u4e0a\u95dc\u9375\u4e92\u52d5\u6703\u66f4\u597d\u3002';\n    return '\u6696\u8eab\u671f\uff1a\u5148\u5f9e\u5c0f\u800c\u7a69\u5b9a\u7684\u966a\u4f34\u8207\u7406\u89e3\u958b\u59cb\u3002';\n  };\n\n  const computeMetrics = (resultKey) => {\n    const totals = metricKeys.reduce((acc, key) => {\n      acc[key] = 0;\n      return acc;\n    }, {});\n\n    state.completedPath.forEach((questionId) => {\n      const answer = state.answers.get(questionId);\n      if (!answer) return;\n\n      metricKeys.forEach((key) => {\n        totals[key] += answer.score[key] || 0;\n      });\n    });\n\n    const boost = resultBoosts[resultKey] || {};\n    metricKeys.forEach((key) => {\n      totals[key] += boost[key] || 0;\n    });\n\n    const maxScore = Math.max(6, state.completedPath.length * 3 + 3);\n    const values = metricKeys.reduce((acc, key) => {\n      acc[key] = Math.min(100, Math.max(18, Math.round((totals[key] \/ maxScore) * 100)));\n      return acc;\n    }, {});\n\n    const overall = Math.round(metricKeys.reduce((sum, key) => sum + values[key], 0) \/ metricKeys.length);\n\n    return { values, overall };\n  };\n\n  const updateMetricCards = (values) => {\n    metricKeys.forEach((key) => {\n      const valueEl = root.querySelector(`[data-metric-value=\"${key}\"]`);\n      const barEl = root.querySelector(`[data-metric-bar=\"${key}\"]`);\n      if (valueEl) valueEl.textContent = values[key];\n      if (barEl) barEl.style.width = `${values[key]}%`;\n    });\n  };\n\n  const renderChart = (values) => {\n    resetChart();\n\n    if (!window.Chart || !chartCanvas) {\n      chartStatus.hidden = false;\n      chartStatus.textContent = '\u5716\u8868\u66ab\u6642\u7121\u6cd5\u8f09\u5165\uff0c\u8acb\u78ba\u8a8d Chart.js CDN \u53ef\u6b63\u5e38\u9023\u7dda\u3002';\n      return;\n    }\n\n    chartStatus.hidden = false;\n    chartStatus.textContent = '\u5716\u8868\u6e96\u5099\u4e2d\u2026';\n\n    const isSmallScreen = window.matchMedia('(max-width: 575px)').matches;\n    const ctx = chartCanvas.getContext('2d');\n\n    state.chart = new Chart(ctx, {\n      type: 'bar',\n      data: {\n        labels: metricKeys.map((key) => metricLabels[key]),\n        datasets: [{\n          label: '\u76ee\u524d\u5206\u6578',\n          data: metricKeys.map((key) => values[key]),\n          backgroundColor: ['#8fa58f', '#d7b98e', '#c89076', '#a7b99a'],\n          borderRadius: 12,\n          borderSkipped: false\n        }]\n      },\n      options: {\n        indexAxis: 'y',\n        responsive: true,\n        maintainAspectRatio: false,\n        animation: { duration: 260 },\n        scales: {\n          x: {\n            beginAtZero: true,\n            max: 100,\n            grid: { color: 'rgba(106, 95, 86, 0.12)' },\n            ticks: {\n              color: '#6a5f56',\n              font: { size: isSmallScreen ? 12 : 14 },\n              callback: (value) => `${value}%`\n            }\n          },\n          y: {\n            grid: { display: false },\n            ticks: {\n              color: '#372f2a',\n              font: {\n                size: isSmallScreen ? 13 : 17,\n                weight: 700\n              }\n            }\n          }\n        },\n        plugins: {\n          legend: { display: false },\n          tooltip: {\n            callbacks: {\n              label: (context) => ` ${context.parsed.x}%`\n            }\n          }\n        }\n      }\n    });\n\n    chartStatus.hidden = true;\n  };\n\n  const showResult = (resultKey) => {\n    state.resultKey = resultKey;\n\n    resultBlocks.forEach((block) => {\n      block.hidden = block.dataset.resultBlock !== resultKey;\n    });\n\n    const { values, overall } = computeMetrics(resultKey);\n\n    updateMetricCards(values);\n    renderChart(values);\n\n    overallScoreEl.textContent = overall;\n    scoreLevelEl.textContent = getScoreLevel(overall);\n    scoreMarker.style.left = `${Math.min(98, Math.max(2, overall))}%`;\n    resultStatus.textContent = `\u4f60\u7684\u7d50\u679c\u662f ${resultKey} \u578b\uff0c\u4ee5\u4e0b\u662f\u4f9d\u7167\u9078\u64c7\u6574\u7406\u51fa\u7684\u95dc\u4fc2\u5efa\u8b70\u3002`;\n\n    showPage('result9');\n    scrollAndFocus(root.querySelector('[data-page-title=\"result9\"]'));\n  };\n\n  const handleOption = (button) => {\n    if (state.locked) return;\n    state.locked = true;\n\n    const questionId = state.currentQuestion;\n    const question = root.querySelector(`[data-question=\"${questionId}\"]`);\n\n    if (!question || !question.contains(button)) {\n      state.locked = false;\n      return;\n    }\n\n    state.answers.set(questionId, {\n      choice: button.dataset.choice,\n      next: button.dataset.next || '',\n      result: button.dataset.result || '',\n      score: parseScore(button.dataset.score)\n    });\n\n    syncQuestionSelection(questionId);\n\n    window.setTimeout(() => {\n      state.history.push(questionId);\n\n      if (button.dataset.result) {\n        state.completedPath = [...state.history];\n        showResult(button.dataset.result);\n      } else if (button.dataset.next) {\n        showQuestion(button.dataset.next);\n      }\n\n      state.locked = false;\n    }, 180);\n  };\n\n  const handlePrevious = () => {\n    if (state.locked || state.history.length === 0) return;\n\n    const previousQuestion = state.history.pop();\n    showQuestion(previousQuestion);\n  };\n\n  root.addEventListener('click', (event) => {\n    const optionButton = event.target.closest('[data-option]');\n    const actionButton = event.target.closest('[data-action]');\n\n    if (optionButton && root.contains(optionButton)) {\n      handleOption(optionButton);\n      return;\n    }\n\n    if (!actionButton || !root.contains(actionButton)) return;\n\n    const action = actionButton.dataset.action;\n\n    if (action === 'start') {\n      resetState();\n      showQuestion('1');\n    }\n\n    if (action === 'prev') {\n      handlePrevious();\n    }\n\n    if (action === 'reset') {\n      resetState();\n      showPage('intro9');\n      scrollAndFocus(root.querySelector('[data-page-title=\"intro9\"]'));\n    }\n  });\n\n  resetState();\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u5728\u4e00\u8d77\u7684\u65f6\u95f4\u957f\u4e86\uff0c\u611f\u60c5\u4f1a\u9010\u6e10\u8d8b\u4e8e\u5e73\u6de1\uff0c\u54ea\u5929\uff0c\u5982\u679c\u5bf9\u65b9\u7684\u521d\u5fc3\u53d8\u4e86\uff0c\u54ea\u6015\u4e24\u4e2a\u4eba\u8fd8\u5728\u4e00\u8d77\uff0c\u4f60\u4e5f\u4f1a\u5fcd\u4e0d\u4f4f\u60f3\u8981\u653e\u5f03\u90a3\u4e00\u6bb5\u611f\u60c5\uff0c\u4e5f\u4e0d\u77e5\u9053\u81ea\u5df1\u575a\u6301\u7684\u610f\u4e49\u5728\u54ea\u3002<\/p>","protected":false},"author":19,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"narrow-width-container","site-content-style":"unboxed","site-sidebar-style":"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":[],"class_list":["post-2576","post","type-post","status-publish","format-standard","hentry","category-marriage","category-love"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2576","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=2576"}],"version-history":[{"count":1,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2576\/revisions"}],"predecessor-version":[{"id":10767,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2576\/revisions\/10767"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2576"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2576"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}