{"id":2473,"date":"2023-10-17T09:45:05","date_gmt":"2023-10-17T01:45:05","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2473"},"modified":"2025-08-18T01:41:53","modified_gmt":"2025-08-17T17:41:53","slug":"what-level-man-you-deserve","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/what-level-man-you-deserve","title":{"rendered":"\u5c0f\u6d4b\u9a8c\uff1a\u4f60\u914d\u5f97\u4e0a\u90a3\u4e2a\u5c42\u6b21\u7684\u7537\u4eba\uff1f"},"content":{"rendered":"<!-- \u611b\u60c5\u6e2c\u9a57\uff1a\u4f60\u914d\u5f97\u4e0a\u90a3\u500b\u5c64\u6b21\u7684\u7537\u4eba\uff1f -->\n<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap\/5.3.3\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-icons\/1.11.3\/font\/bootstrap-icons.min.css\" rel=\"stylesheet\">\n\n<main id=\"loveQuizContainer\" class=\"container-fluid px-3 px-md-4 py-4\">\n  <!-- \u5f15\u5c0e\u9801 -->\n  <section id=\"quizintro9\" data-page=\"intro9\" class=\"row justify-content-center\">\n    <div class=\"col-12 col-lg-10 col-xl-8\">\n      <div class=\"card border-0 shadow-sm\">\n        <div class=\"card-body p-4 p-md-5\">\n          <header class=\"text-center mb-5\">\n            <h2 class=\"display-5 fw-bold text-primary mb-3\">\u4f60\u914d\u5f97\u4e0a\u90a3\u4e2a\u5c42\u6b21\u7684\u7537\u4eba\uff1f<\/h2>\n            <p class=\"lead text-muted\">\u63a2\u7d22\u4f60\u7684\u5167\u5728\u9b45\u529b\uff0c\u627e\u5230\u6700\u9069\u5408\u4f60\u7684\u611b\u60c5<\/p>\n          <\/header>\n\n          <div class=\"row g-4 mb-5\">\n            <div class=\"col-12 text-center mb-4\">\n              <div class=\"rounded-circle bg-gradient d-inline-flex align-items-center justify-content-center shadow\" \n                   style=\"width: 120px; height: 120px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\">\n                <i class=\"bi bi-heart-fill text-success\" style=\"font-size: 3rem;\"><\/i>\n              <\/div>\n            <\/div>\n\n            <div class=\"col-md-4\">\n              <div class=\"text-center p-3 rounded-3 h-100 position-relative overflow-hidden hover-lift\">\n                <div class=\"position-absolute top-0 start-0 w-100 h-100 bg-primary opacity-10 rounded-3\"><\/div>\n                <div class=\"position-relative\">\n                  <div class=\"mb-3\">\n                    <i class=\"bi bi-stars text-primary\" style=\"font-size: 2.5rem;\"><\/i>\n                  <\/div>\n                  <h5 class=\"fw-bold\">\u63ed\u793a\u4f60\u7684\u6f5c\u5728\u9b45\u529b<\/h5>\n                  <p class=\"text-muted mb-0\">\u6df1\u5165\u4e86\u89e3\u4f60\u7368\u7279\u7684\u500b\u4eba\u7279\u8cea<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <div class=\"col-md-4\">\n              <div class=\"text-center p-3 rounded-3 h-100 position-relative overflow-hidden hover-lift\">\n                <div class=\"position-absolute top-0 start-0 w-100 h-100 bg-success opacity-10 rounded-3\"><\/div>\n                <div class=\"position-relative\">\n                  <div class=\"mb-3\">\n                    <i class=\"bi bi-graph-up-arrow text-success\" style=\"font-size: 2.5rem;\"><\/i>\n                  <\/div>\n                  <h5 class=\"fw-bold\">\u6df1\u5ea6\u5206\u6790\u4f60\u7684\u9002\u914d\u5ea6<\/h5>\n                  <p class=\"text-muted mb-0\">\u79d1\u5b78\u8a55\u4f30\u4f60\u7684\u611b\u60c5\u5339\u914d\u6307\u6578<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <div class=\"col-md-4\">\n              <div class=\"text-center p-3 rounded-3 h-100 position-relative overflow-hidden hover-lift\">\n                <div class=\"position-absolute top-0 start-0 w-100 h-100 bg-danger opacity-10 rounded-3\"><\/div>\n                <div class=\"position-relative\">\n                  <div class=\"mb-3\">\n                    <i class=\"bi bi-compass text-danger\" style=\"font-size: 2.5rem;\"><\/i>\n                  <\/div>\n                  <h5 class=\"fw-bold\">\u6307\u5f15\u4f60\u7684\u7231\u60c5\u65b9\u5411<\/h5>\n                  <p class=\"text-muted mb-0\">\u627e\u5230\u6700\u9069\u5408\u4f60\u7684\u611f\u60c5\u9053\u8def<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <article class=\"mb-5\">\n            <p class=\"fs-5 mb-3\">\n              \u4fd7\u8a71\u8aaa\u300c\u4e0d\u662f\u4e00\u5bb6\u4eba\u4e0d\u9032\u4e00\u5bb6\u9580\u300d\uff0c\u4f60\u662f\u4ec0\u9ebc\u6a23\u7684\u4eba\u5c31\u6703\u627e\u4ec0\u9ebc\u6a23\u7684\u7537\u4eba\u3002\u5982\u679c\u4f60\u662f\u500b\u8070\u7a4e\u8ce2\u60e0\u7684\u5973\u4eba\uff0c\u4f60\u5c31\u6703\u627e\u5230\u512a\u79c0\u611b\u4f60\u7684\u7537\u4eba\u3002\u5982\u679c\u4f60\u662f\u500b\u4e0d\u4fee\u908a\u5e45\u7684\u5973\u4eba\uff0c\u4f60\u4e5f\u6703\u627e\u5230\u8c6a\u60c5\u842c\u4e08\u7684\u7537\u4eba\u3002\n            <\/p>\n            <div class=\"alert alert-success border-0 shadow-sm\" role=\"alert\">\n              <div class=\"d-flex align-items-center\">\n                <i class=\"bi bi-check-circle-fill me-2 fs-4\"><\/i>\n                <div>\n                  <strong>\u8d85\u904e85%\u7684\u5973\u6027\u8868\u793a<\/strong>\uff0c\u901a\u904e\u9019\u500b\u6e2c\u9a57\u5f8c\u66f4\u4e86\u89e3\u81ea\u5df1\u5728\u6200\u611b\u4e2d\u7684\u7279\u8cea\uff01\n                <\/div>\n              <\/div>\n            <\/div>\n            <p class=\"fs-5\">\n              \u60f3\u77e5\u9053\u4f60\u80fd\u914d\u5f97\u4e0a\u4ec0\u4e48\u5c42\u6b21\u7684\u7537\u4eba\u5417\uff1f\u53ea\u97003\u5206\u949f\uff0c\u89e3\u9501\u4f60\u7684\u7231\u60c5\u5bc6\u7801\uff01\n            <\/p>\n          <\/article>\n\n          <footer class=\"text-center\">\n            <button type=\"button\" class=\"btn btn-lg btn-primary px-5 py-3 rounded-pill shadow hover-scale\" \n                    data-action=\"start-quiz\">\n              <i class=\"bi bi-play-circle me-2\"><\/i>\u7acb\u5373\u5f00\u59cb\u6d4b\u9a8c\n            <\/button>\n            <p class=\"text-muted mt-3 mb-0\">\n              <i class=\"bi bi-people-fill me-1\"><\/i>\n              \u5df2\u6709 <strong>12,498<\/strong> \u4eba\u5b8c\u6210\u6e2c\u9a57\n            <\/p>\n          <\/footer>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u6e2c\u9a57\u9801 -->\n  <section id=\"quizmain9\" data-page=\"quiz9\" class=\"row justify-content-center d-none\">\n    <div class=\"col-12 col-lg-10 col-xl-8\">\n      <div class=\"card border-0 shadow-sm\">\n        <div class=\"card-body p-4 p-md-5\">\n          <header class=\"text-center mb-4\">\n            <h2 class=\"fw-bold\">\u6d4b\u9a8c\u8fdb\u884c\u4e2d<\/h2>\n          <\/header>\n\n          <article>\n            <h3 class=\"fw-bold fs-4 mb-4\" data-quiz-question>\u8ddf\u65e7\u540c\u5b66\u51fa\u53bb\u5403\u996d\uff0c\u4f60\u4e0d\u4f1a\u505a\u4e0b\u9762\u54ea\u4ef6\u4e8b\uff1f<\/h3>\n            \n            <div class=\"row g-3\" data-quiz-options>\n              <div class=\"col-12\">\n                <button type=\"button\" class=\"btn btn-outline-secondary w-100 text-start p-3 position-relative hover-lift\" \n                        data-option-value=\"A\">\n                  <span class=\"d-flex align-items-center\">\n                    <span class=\"rounded-circle border-2 border-secondary d-inline-flex align-items-center justify-content-center me-3\" \n                          style=\"min-width: 32px; height: 32px;\">\n                      <i class=\"bi bi-check text-white d-none\"><\/i>\n                    <\/span>\n                    <span class=\"fs-5\">\u8ddf\u5bf9\u65b9\u804a\u4ee5\u524d\u7684\u60c5\u53f2<\/span>\n                  <\/span>\n                <\/button>\n              <\/div>\n              <div class=\"col-12\">\n                <button type=\"button\" class=\"btn btn-outline-secondary w-100 text-start p-3 position-relative hover-lift\" \n                        data-option-value=\"B\">\n                  <span class=\"d-flex align-items-center\">\n                    <span class=\"rounded-circle border-2 border-secondary d-inline-flex align-items-center justify-content-center me-3\" \n                          style=\"min-width: 32px; height: 32px;\">\n                      <i class=\"bi bi-check text-white d-none\"><\/i>\n                    <\/span>\n                    <span class=\"fs-5\">\u8ddf\u5bf9\u65b9\u804a\u81ea\u5df1\u76ee\u524d\u7684\u7ecf\u6d4e\u72b6\u51b5<\/span>\n                  <\/span>\n                <\/button>\n              <\/div>\n              <div class=\"col-12\">\n                <button type=\"button\" class=\"btn btn-outline-secondary w-100 text-start p-3 position-relative hover-lift\" \n                        data-option-value=\"C\">\n                  <span class=\"d-flex align-items-center\">\n                    <span class=\"rounded-circle border-2 border-secondary d-inline-flex align-items-center justify-content-center me-3\" \n                          style=\"min-width: 32px; height: 32px;\">\n                      <i class=\"bi bi-check text-white d-none\"><\/i>\n                    <\/span>\n                    <span class=\"fs-5\">\u8ddf\u5bf9\u65b9\u8bf4\u81ea\u5df1\u5de5\u4f5c\u4e0a\u7684\u4e8b\u60c5<\/span>\n                  <\/span>\n                <\/button>\n              <\/div>\n              <div class=\"col-12\">\n                <button type=\"button\" class=\"btn btn-outline-secondary w-100 text-start p-3 position-relative hover-lift\" \n                        data-option-value=\"D\">\n                  <span class=\"d-flex align-items-center\">\n                    <span class=\"rounded-circle border-2 border-secondary d-inline-flex align-items-center justify-content-center me-3\" \n                          style=\"min-width: 32px; height: 32px;\">\n                      <i class=\"bi bi-check text-white d-none\"><\/i>\n                    <\/span>\n                    <span class=\"fs-5\">\u8ddf\u5bf9\u65b9\u8bb2\u81ea\u5df1\u7684\u611f\u60c5\u73b0\u72b6<\/span>\n                  <\/span>\n                <\/button>\n              <\/div>\n            <\/div>\n          <\/article>\n\n          <footer class=\"text-center mt-4\">\n            <button type=\"button\" class=\"btn btn-secondary rounded-pill px-4 d-none\" data-action=\"prev-question\">\n              <i class=\"bi bi-arrow-left me-2\"><\/i>\u4e0a\u4e00\u9898\n            <\/button>\n          <\/footer>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u7d50\u679c\u9801 -->\n  <section id=\"quizresult9\" data-page=\"result9\" class=\"row justify-content-center d-none\">\n    <div class=\"col-12 col-lg-10 col-xl-8\">\n      <div class=\"card border-0 shadow-sm\">\n        <div class=\"card-body p-4 p-md-5\">\n          <header class=\"text-center mb-5\">\n            <h2 class=\"display-6 fw-bold text-primary\">\u6d4b\u9a8c\u7ed3\u679c\u5206\u6790<\/h2>\n            <p class=\"lead text-muted\">\u4f60\u7684\u611b\u60c5\u5bc6\u78bc\u5df2\u89e3\u9396<\/p>\n          <\/header>\n\n          <div class=\"row g-4\">\n            <div class=\"col-12\">\n              <div class=\"d-flex justify-content-center mb-4\">\n                <div style=\"max-width: 400px; width: 100%;\">\n                  <canvas id=\"resultChart\"><\/canvas>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <div class=\"col-12\">\n              <article class=\"border-start border-4 border-primary ps-4 py-3 bg-light rounded-end\">\n                <p class=\"fs-5 mb-0\" data-result-text><\/p>\n              <\/article>\n            <\/div>\n\n            <div class=\"col-12\">\n              <div class=\"row g-3\" data-score-details>\n                <!-- \u5206\u6578\u8a73\u60c5\u5c07\u5728\u9019\u88e1\u52d5\u614b\u751f\u6210 -->\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <footer class=\"text-center mt-5\">\n            <button type=\"button\" class=\"btn btn-lg btn-warning px-5 py-3 rounded-pill shadow hover-scale\" \n                    data-action=\"restart-quiz\">\n              <i class=\"bi bi-arrow-clockwise me-2\"><\/i>\u91cd\u65b0\u6d4b\u8bd5\n            <\/button>\n          <\/footer>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n<\/main>\n\n<style>\n\/* \u81ea\u5b9a\u7fa9\u6a23\u5f0f - \u907f\u514d\u8207WordPress\u4e3b\u984c\u885d\u7a81 *\/\n#loveQuizContainer {\n  --lq-primary: #667eea;\n  --lq-secondary: #764ba2;\n  --lq-success: #48bb78;\n  --lq-warning: #f6ad55;\n  --lq-danger: #fc8181;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Microsoft JhengHei\", \"\u5fae\u8edf\u6b63\u9ed1\u9ad4\", \"PingFang TC\", sans-serif;\n}\n\n#loveQuizContainer .hover-lift {\n  transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n#loveQuizContainer .hover-lift:hover {\n  transform: translateY(-5px);\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n}\n\n#loveQuizContainer .hover-scale {\n  transition: transform 0.3s ease;\n}\n\n#loveQuizContainer .hover-scale:hover {\n  transform: scale(1.05);\n}\n\n#loveQuizContainer .btn-outline-secondary {\n  border-color: #e2e8f0;\n  color: #2d3748;\n}\n\n#loveQuizContainer .btn-outline-secondary:hover {\n  background-color: #f7fafc;\n  border-color: var(--lq-primary);\n  color: #2d3748;\n}\n\n#loveQuizContainer .btn-outline-secondary.selected {\n  background: linear-gradient(135deg, var(--lq-primary) 0%, var(--lq-secondary) 100%);\n  border-color: var(--lq-primary);\n  color: white;\n}\n\n#loveQuizContainer .btn-outline-secondary.selected .rounded-circle {\n  background: white;\n  border-color: white !important;\n}\n\n#loveQuizContainer .btn-outline-secondary.selected .bi-check {\n  display: inline-block !important;\n  color: var(--lq-primary) !important;\n}\n\n#loveQuizContainer .btn-primary {\n  background: linear-gradient(135deg, var(--lq-primary) 0%, var(--lq-secondary) 100%);\n  border: none;\n}\n\n#loveQuizContainer .btn-warning {\n  background: linear-gradient(135deg, #f6ad55 0%, #ed8936 100%);\n  border: none;\n  color: white;\n}\n\n#loveQuizContainer .text-primary {\n  color: var(--lq-primary) !important;\n}\n\n#loveQuizContainer .bg-primary {\n  background-color: var(--lq-primary) !important;\n}\n\n#loveQuizContainer .border-primary {\n  border-color: var(--lq-primary) !important;\n}\n\n\/* \u97ff\u61c9\u5f0f\u8abf\u6574 *\/\n@media (max-width: 768px) {\n  #loveQuizContainer .display-5 {\n    font-size: 2rem;\n  }\n  \n  #loveQuizContainer .display-6 {\n    font-size: 1.75rem;\n  }\n  \n  #loveQuizContainer .fs-5 {\n    font-size: 1.125rem !important;\n  }\n}\n\n\/* \u52d5\u756b\u6548\u679c *\/\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n#loveQuizContainer section {\n  animation: fadeIn 0.5s ease;\n}\n\n\/* \u5206\u6578\u5361\u7247\u6a23\u5f0f *\/\n#loveQuizContainer .score-card {\n  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);\n  border-left: 4px solid var(--lq-primary);\n  transition: transform 0.3s ease;\n}\n\n#loveQuizContainer .score-card:hover {\n  transform: translateX(5px);\n}\n<\/style>\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n<script>\n\/\/ IIFE \u5c01\u88dd\uff0c\u907f\u514d\u5168\u5c40\u8b8a\u91cf\u6c61\u67d3\n(function() {\n  'use strict';\n\n  \/\/ \u6e2c\u9a57\u6578\u64da\n  const quizData = {\n    questions: [\n      {\n        id: 1,\n        text: \"\u8ddf\u820a\u540c\u5b78\u51fa\u53bb\u5403\u98ef\uff0c\u4f60\u4e0d\u6703\u505a\u4e0b\u9762\u54ea\u4ef6\u4e8b\uff1f\",\n        options: [\n          { value: \"A\", text: \"\u8ddf\u5c0d\u65b9\u804a\u4ee5\u524d\u7684\u60c5\u53f2\" },\n          { value: \"B\", text: \"\u8ddf\u5c0d\u65b9\u804a\u81ea\u5df1\u76ee\u524d\u7684\u7d93\u6fdf\u72c0\u6cc1\" },\n          { value: \"C\", text: \"\u8ddf\u5c0d\u65b9\u8aaa\u81ea\u5df1\u5de5\u4f5c\u4e0a\u7684\u4e8b\u60c5\" },\n          { value: \"D\", text: \"\u8ddf\u5c0d\u65b9\u8b1b\u81ea\u5df1\u7684\u611f\u60c5\u73fe\u72c0\" }\n        ]\n      }\n    ],\n    results: {\n      \"A\": {\n        text: \"\u5927\u5973\u4eba\u8070\u6167\u679c\u6562\uff0c\u7cbe\u660e\u5f37\u5e79\uff0c\u5c0f\u5973\u4eba\u751c\u7f8e\u53ef\u611b\uff0c\u5c0f\u9ce5\u4f9d\u4eba\u3002\u4f60\u6709\u5927\u5973\u4eba\u7684\u6f5b\u8cea\u537b\u85cf\u800c\u4e0d\u9732\uff0c\u4e0d\u662f\u4f60\u7121\u80fd\uff0c\u800c\u662f\u4f60\u80fd\u642d\u914d\u7684\u7537\u4eba\u592a\u512a\u79c0\u8b93\u512a\u79c0\u7684\u4f60\u6298\u670d\uff0c\u7518\u9858\u505a\u80cc\u5f8c\u7684\u8ce2\u5167\u52a9\u3002\u53ef\u662f\u4e00\u65e6\u7537\u4eba\u9802\u4e0d\u4f4f\u7684\u6642\u5019\uff0c\u9700\u8981\u4f60\u51fa\u9762\u6642\uff0c\u5076\u723e\u4e00\u9732\u5d22\u5db8\uff0c\u5c31\u6703\u51fa\u624b\u4e0d\u51e1\uff0c\u5f85\u7537\u4eba\u6062\u5fa9\uff0c\u4f60\u53c8\u6703\u8eb2\u5728\u5e55\u5f8c\u628a\u821e\u81fa\u8b93\u7d66\u7537\u4eba\u3002\",\n        scores: {\n          \"\u667a\u6167\": 85,\n          \"\u9b45\u529b\": 75,\n          \"\u8cbc\u5fc3\": 80,\n          \"\u7368\u7acb\u6027\": 90,\n          \"\u9069\u914d\u5ea6\": 88\n        }\n      },\n      \"B\": {\n        text: \"\u4f60\u770b\u4e0d\u4e0a\u4e0d\u4fee\u908a\u5e45\u7684\u5973\u4eba\uff0c\u592a\u7c97\u7cd9\uff0c\u4f60\u77e5\u9053\u4e0d\u6703\u7f8e\u7684\u5973\u4eba\u90fd\u96e3\u4ee5\u4ee4\u4eba\u6190\u9999\u60dc\u7389\u3002\u7f8e\u9e97\u7684\u5973\u4eba\u662f\u4e16\u754c\u7684\u4e00\u9053\u98a8\u666f\uff0c\u8b93\u81ea\u5df1\u8cde\u5fc3\u6085\u76ee\u662f\u4e00\u7a2e\u751f\u6d3b\u614b\u5ea6\u548c\u4e00\u7a2e\u80fd\u529b\u3002\u6240\u4ee5\u4f60\u5f88\u61c2\u5f97\u6253\u7406\u81ea\u5df1\uff0c\u4f60\u7684\u67d4\u60c5\u662f\u7537\u4eba\u967d\u525b\u4e4b\u6c23\u6700\u597d\u7684\u6ecb\u88dc\u54c1\uff0c\u4f60\u662f\u8c6a\u60c5\u842c\u4e08\u7537\u4eba\u7684\u7d55\u914d\u3002\u4f46\u4e00\u5473\u7684\u6eab\u67d4\u672a\u514d\u592a\u8edf\u4e86\uff0c\u5728\u56f0\u96e3\u9762\u524d\uff0c\u5728\u5c0d\u624b\u9762\u524d\u8981\u8b8a\u6210\u4e00\u584a\u92fc\u9435\uff0c\u624d\u80fd\u5920\u6210\u70ba\u8d0f\u5bb6\u3002\",\n        scores: {\n          \"\u667a\u6167\": 70,\n          \"\u9b45\u529b\": 95,\n          \"\u8cbc\u5fc3\": 85,\n          \"\u7368\u7acb\u6027\": 65,\n          \"\u9069\u914d\u5ea6\": 82\n        }\n      },\n      \"C\": {\n        text: \"\u4f60\u6703\u7684\u4e0d\u591a\uff0c\u4f60\u77e5\u9053\u7434\u68cb\u66f8\u756b\u4e0d\u7528\u6a23\u6a23\u7cbe\u901a\uff0c\u8d77\u78bc\u80fd\u5920\u6b23\u8cde\u3002\u6709\u8a69\u60c5\u756b\u610f\u5728\u5fc3\u4e2d\u7684\u4f60\u6c7a\u4e0d\u6703\u662f\u53e3\u51fa\u7c97\u8a71\u7684\u6f51\u5a66\uff0c\u4e5f\u4e0d\u6703\u662f\u84ec\u982d\u57a2\u9762\u7684\u9ec3\u81c9\u5a46\u3002\u61c2\u5f97\u85dd\u8853\u5730\u751f\u6d3b\uff0c\u4e5f\u5c31\u61c2\u5f97\u751f\u6d3b\u7684\u85dd\u8853\u3002\u5a36\u500b\u9019\u6a23\u7684\u4f60\u60f3\u4e0d\u5e78\u798f\u90fd\u96e3\u3002\u4f60\u7d55\u5c0d\u914d\u5f97\u4e0a\u80fd\u7d66\u4f60\u5e78\u798f\u7684\u7537\u4eba\uff0c\u4e0d\u4e00\u5b9a\u662f\u4e0a\u7b49\u7537\u4eba\uff0c\u4f46\u4e00\u5b9a\u662f\u61c2\u73cd\u60dc\u4f60\u7684\u7537\u4eba\u3002\",\n        scores: {\n          \"\u667a\u6167\": 75,\n          \"\u9b45\u529b\": 80,\n          \"\u8cbc\u5fc3\": 90,\n          \"\u7368\u7acb\u6027\": 60,\n          \"\u9069\u914d\u5ea6\": 78\n        }\n      },\n      \"D\": {\n        text: \"\u4f60\u61c2\u5f97\u5bb9\u5fcd\u7537\u4eba\u7684\u5c0f\u6bdb\u75c5\uff0c\u80fd\u7d66\u7537\u4eba\u4e00\u500b\u653e\u9b06\u7684\u5bb6\uff0c\u6c38\u9060\u4e0d\u70ba\u7092\u83dc\u9e79\u4e86\u6de1\u4e86\u767c\u813e\u6c23\uff0c\u4e0d\u70ba\u7d04\u6703\u9072\u5230\u5e7e\u5206\u9418\u751f\u6c23\uff0c\u4e0d\u6703\u70ba\u7537\u4eba\u4e0d\u6d17\u6fa1\u4e0d\u6d17\u8173\u4e0a\u5e8a\u771f\u751f\u6c23\u3002\u4f60\u4e5f\u80fd\u654f\u92b3\u5bdf\u89ba\u5230\u7537\u4eba\u5f71\u97ff\u4e8b\u696d\u548c\u5bb6\u5ead\u5e78\u798f\u7684\u884c\u70ba\uff0c\u4e26\u6084\u7121\u8072\u606f\u5730\u5c07\u4e4b\u6d88\u6ec5\u5728\u840c\u82bd\u72c0\u614b\u3002\u8cb7\u83dc\u6642\u4e0d\u6703\u70ba\u4e86\u4e00\u5206\u4e00\u91d0\u7684\u8b1b\u50f9\u82b1\u8cbb\u534a\u5c0f\u6642\u4e00\u5c0f\u6642\uff0c\u4f46\u662f\u5728\u8cb7\u623f\u8cb7\u8eca\u9019\u6a23\u7684\u5927\u624b\u7b46\u4e0a\u6c7a\u7b56\u7e3d\u662f\u6b63\u78ba\u3002\u9019\u6a23\u7684\u4f60\u4e00\u5b9a\u80fd\u914d\u512a\u8cea\u7684\u7537\u4eba\u3002\",\n        scores: {\n          \"\u667a\u6167\": 80,\n          \"\u9b45\u529b\": 70,\n          \"\u8cbc\u5fc3\": 95,\n          \"\u7368\u7acb\u6027\": 75,\n          \"\u9069\u914d\u5ea6\": 85\n        }\n      }\n    }\n  };\n\n  \/\/ \u6e2c\u9a57\u63a7\u5236\u5668\u985e\n  class QuizController {\n    constructor() {\n      this.currentQuestion = 0;\n      this.answers = [];\n      this.chartInstance = null;\n      \n      \/\/ \u7de9\u5b58DOM\u5143\u7d20\n      this.container = document.getElementById('loveQuizContainer');\n      this.introPage = document.getElementById('quizintro9');\n      this.quizPage = document.getElementById('quizmain9');\n      this.resultPage = document.getElementById('quizresult9');\n      \n      this.init();\n    }\n\n    init() {\n      this.bindEvents();\n    }\n\n    bindEvents() {\n      \/\/ \u4f7f\u7528\u4e8b\u4ef6\u59d4\u8a17\n      this.container.addEventListener('click', (e) => {\n        const target = e.target.closest('[data-action], [data-option-value]');\n        if (!target) return;\n\n        if (target.hasAttribute('data-action')) {\n          const action = target.dataset.action;\n          this.handleAction(action);\n        } else if (target.hasAttribute('data-option-value')) {\n          const value = target.dataset.optionValue;\n          this.selectOption(value);\n        }\n      });\n    }\n\n    handleAction(action) {\n      switch(action) {\n        case 'start-quiz':\n          this.startQuiz();\n          break;\n        case 'prev-question':\n          this.previousQuestion();\n          break;\n        case 'restart-quiz':\n          this.restartQuiz();\n          break;\n      }\n    }\n\n    startQuiz() {\n      this.showPage('quiz');\n      this.renderQuestion();\n    }\n\n    showPage(page) {\n      \/\/ \u96b1\u85cf\u6240\u6709\u9801\u9762\n      [this.introPage, this.quizPage, this.resultPage].forEach(p => {\n        p.classList.add('d-none');\n      });\n\n      \/\/ \u986f\u793a\u6307\u5b9a\u9801\u9762\n      let targetPage;\n      switch(page) {\n        case 'intro':\n          targetPage = this.introPage;\n          break;\n        case 'quiz':\n          targetPage = this.quizPage;\n          break;\n        case 'result':\n          targetPage = this.resultPage;\n          break;\n      }\n\n      if (targetPage) {\n        targetPage.classList.remove('d-none');\n        \/\/ \u5e73\u6ed1\u6efe\u52d5\u5230\u9801\u9762\u9802\u90e8\n        targetPage.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      }\n    }\n\n    renderQuestion() {\n      const question = quizData.questions[this.currentQuestion];\n      \n      \/\/ \u66f4\u65b0\u554f\u984c\u6587\u5b57\n      const questionEl = this.quizPage.querySelector('[data-quiz-question]');\n      questionEl.textContent = question.text;\n\n      \/\/ \u66f4\u65b0\u9078\u9805\n      const optionsContainer = this.quizPage.querySelector('[data-quiz-options]');\n      optionsContainer.innerHTML = '';\n\n      question.options.forEach(option => {\n        const optionHtml = `\n          <div class=\"col-12\">\n            <button type=\"button\" class=\"btn btn-outline-secondary w-100 text-start p-3 position-relative hover-lift\" \n                    data-option-value=\"${option.value}\">\n              <span class=\"d-flex align-items-center\">\n                <span class=\"rounded-circle border-2 border-secondary d-inline-flex align-items-center justify-content-center me-3\" \n                      style=\"min-width: 32px; height: 32px;\">\n                  <i class=\"bi bi-check text-white d-none\"><\/i>\n                <\/span>\n                <span class=\"fs-5\">${option.text}<\/span>\n              <\/span>\n            <\/button>\n          <\/div>\n        `;\n        optionsContainer.insertAdjacentHTML('beforeend', optionHtml);\n      });\n\n      \/\/ \u6062\u5fa9\u4e4b\u524d\u7684\u9078\u64c7\n      if (this.answers[this.currentQuestion]) {\n        const selectedBtn = optionsContainer.querySelector(`[data-option-value=\"${this.answers[this.currentQuestion]}\"]`);\n        if (selectedBtn) {\n          selectedBtn.classList.add('selected');\n          selectedBtn.querySelector('.bi-check').classList.remove('d-none');\n        }\n      }\n\n      \/\/ \u66f4\u65b0\u4e0a\u4e00\u984c\u6309\u9215\n      const prevBtn = this.quizPage.querySelector('[data-action=\"prev-question\"]');\n      if (this.currentQuestion > 0) {\n        prevBtn.classList.remove('d-none');\n      } else {\n        prevBtn.classList.add('d-none');\n      }\n    }\n\n    selectOption(value) {\n      \/\/ \u4fdd\u5b58\u7b54\u6848\n      this.answers[this.currentQuestion] = value;\n\n      \/\/ \u66f4\u65b0UI\n      const optionsContainer = this.quizPage.querySelector('[data-quiz-options]');\n      const buttons = optionsContainer.querySelectorAll('[data-option-value]');\n      \n      buttons.forEach(btn => {\n        btn.classList.remove('selected');\n        btn.querySelector('.bi-check').classList.add('d-none');\n        \n        if (btn.dataset.optionValue === value) {\n          btn.classList.add('selected');\n          btn.querySelector('.bi-check').classList.remove('d-none');\n        }\n      });\n\n      \/\/ \u5ef6\u9072\u5f8c\u9032\u5165\u4e0b\u4e00\u984c\u6216\u986f\u793a\u7d50\u679c\n      setTimeout(() => {\n        if (this.currentQuestion < quizData.questions.length - 1) {\n          this.currentQuestion++;\n          this.renderQuestion();\n        } else {\n          this.showResults();\n        }\n      }, 300);\n    }\n\n    previousQuestion() {\n      if (this.currentQuestion > 0) {\n        this.currentQuestion--;\n        this.renderQuestion();\n      }\n    }\n\n    showResults() {\n      const result = quizData.results[this.answers[0]];\n      \n      \/\/ \u66f4\u65b0\u7d50\u679c\u6587\u5b57\n      const resultTextEl = this.resultPage.querySelector('[data-result-text]');\n      resultTextEl.textContent = result.text;\n\n      \/\/ \u5275\u5efa\u5206\u6578\u8a73\u60c5\n      const scoreDetailsEl = this.resultPage.querySelector('[data-score-details]');\n      scoreDetailsEl.innerHTML = '';\n\n      Object.entries(result.scores).forEach(([label, score]) => {\n        const scoreHtml = `\n          <div class=\"col-md-6\">\n            <div class=\"score-card p-3 rounded\">\n              <div class=\"d-flex justify-content-between align-items-center\">\n                <span class=\"fw-bold\">${label}<\/span>\n                <span class=\"badge bg-primary rounded-pill fs-6\">${score}%<\/span>\n              <\/div>\n              <div class=\"progress mt-2\" style=\"height: 8px;\">\n                <div class=\"progress-bar\" role=\"progressbar\" \n                     style=\"width: ${score}%; background: linear-gradient(90deg, var(--lq-primary) 0%, var(--lq-secondary) 100%);\"\n                     aria-valuenow=\"${score}\" aria-valuemin=\"0\" aria-valuemax=\"100\"><\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        `;\n        scoreDetailsEl.insertAdjacentHTML('beforeend', scoreHtml);\n      });\n\n      \/\/ \u5275\u5efa\u96f7\u9054\u5716\n      this.createChart(result.scores);\n\n      \/\/ \u986f\u793a\u7d50\u679c\u9801\n      this.showPage('result');\n    }\n\n    createChart(scores) {\n      \/\/ \u92b7\u6bc0\u820a\u5716\u8868\n      if (this.chartInstance) {\n        this.chartInstance.destroy();\n      }\n\n      const ctx = document.getElementById('resultChart').getContext('2d');\n      const labels = Object.keys(scores);\n      const data = Object.values(scores);\n\n      this.chartInstance = new Chart(ctx, {\n        type: 'radar',\n        data: {\n          labels: labels,\n          datasets: [{\n            label: '\u4f60\u7684\u6e2c\u9a57\u7d50\u679c',\n            data: data,\n            backgroundColor: 'rgba(102, 126, 234, 0.2)',\n            borderColor: 'rgba(102, 126, 234, 1)',\n            pointBackgroundColor: 'rgba(102, 126, 234, 1)',\n            pointBorderColor: '#fff',\n            pointHoverBackgroundColor: '#fff',\n            pointHoverBorderColor: 'rgba(102, 126, 234, 1)',\n            borderWidth: 2,\n            pointRadius: 5,\n            pointHoverRadius: 7\n          }]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: true,\n          plugins: {\n            legend: {\n              display: false\n            },\n            tooltip: {\n              backgroundColor: 'rgba(0, 0, 0, 0.8)',\n              padding: 12,\n              titleFont: {\n                size: 14\n              },\n              bodyFont: {\n                size: 14\n              },\n              callbacks: {\n                label: function(context) {\n                  return context.raw + '%';\n                }\n              }\n            }\n          },\n          scales: {\n            r: {\n              angleLines: {\n                display: true,\n                color: 'rgba(0, 0, 0, 0.1)'\n              },\n              grid: {\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: 18,\n                  family: '\"Microsoft JhengHei\", \"\u5fae\u8edf\u6b63\u9ed1\u9ad4\", \"PingFang TC\", sans-serif'\n                },\n                color: '#2d3748'\n              }\n            }\n          }\n        }\n      });\n    }\n\n    restartQuiz() {\n      this.currentQuestion = 0;\n      this.answers = [];\n      \n      if (this.chartInstance) {\n        this.chartInstance.destroy();\n        this.chartInstance = null;\n      }\n\n      this.showPage('intro');\n    }\n  }\n\n  \/\/ \u78ba\u4fddDOM\u52a0\u8f09\u5b8c\u6210\u5f8c\u521d\u59cb\u5316\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', () => {\n      new QuizController();\n    });\n  } else {\n    new QuizController();\n  }\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u60f3\u77e5\u9053\u4f60\u80fd\u914d\u5f97\u4e0a\u4ec0\u4e48\u5c42\u6b21\u7684\u7537\u4eba\u5417\uff1f\u6d4b\u8bd5\u4e00\u4e0b\u5c31\u77e5\u9053\u7b54\u6848\u4e86\uff0c\u4e0b\u9762\u6211\u4eec\u5c31\u4e00\u8d77\u6765\u505a\u4e2a\u7231\u60c5\u6d4b\u8bd5\u5427\uff01<\/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":"normal-width-container","site-content-style":"unboxed","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[179,178],"tags":[],"class_list":["post-2473","post","type-post","status-publish","format-standard","hentry","category-marriage","category-love"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2473","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=2473"}],"version-history":[{"count":7,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2473\/revisions"}],"predecessor-version":[{"id":10542,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2473\/revisions\/10542"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}