{"id":2510,"date":"2023-10-08T09:29:13","date_gmt":"2023-10-08T01:29:13","guid":{"rendered":"https:\/\/bookmark.tw\/?p=2510"},"modified":"2025-05-11T03:41:46","modified_gmt":"2025-05-10T19:41:46","slug":"seme-uke","status":"publish","type":"post","link":"https:\/\/xinliceyan.org\/zh\/seme-uke","title":{"rendered":"\u7ebf\u4e0a\u514d\u8d39\u6d4b\u9a8c\uff1a\u6d4b\u6d4b\u4f60\u7684\u653b\u53d7\u5c5e\u6027\uff0810\u9898\uff09"},"content":{"rendered":"<!-- \u653b\u53d7\u5c6c\u6027\u6e2c\u8a66 - \u6a21\u7d44\u5316\u4ee3\u78bc -->\n<!-- \u63a1\u7528\u95dc\u6ce8\u9ede\u5206\u96e2\u539f\u5247\uff0c\u78ba\u4fdd\u4ee3\u78bc\u7d50\u69cb\u6e05\u6670 -->\n\n<!-- \u7d50\u69cb\uff1aHTML -->\n<section class=\"wpx-quiz-container\" id=\"wpxQuizContainer\">\n  <!-- \u5f15\u5c0e\u9801 -->\n  <div class=\"wpx-page wpx-landing-page\" id=\"wpxLandingPage\">\n    <header class=\"wpx-quiz-header\">\n      <h2 class=\"wpx-quiz-title\">\u6d4b\u6d4b\u4f60\u7684\u653b\u53d7\u5c5e\u6027<\/h2>\n    <\/header>\n    <div class=\"wpx-landing-content\">\n      <div class=\"wpx-feature-icons\">\n        <div class=\"wpx-icon-item\">\n          <div class=\"wpx-icon\">\n            <svg viewbox=\"0 0 24 24\" width=\"48\" height=\"48\">\n              <path fill=\"currentColor\" d=\"M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M12,10.5A1.5,1.5 0 0,1 13.5,12A1.5,1.5 0 0,1 12,13.5A1.5,1.5 0 0,1 10.5,12A1.5,1.5 0 0,1 12,10.5M7.5,10.5A1.5,1.5 0 0,1 9,12A1.5,1.5 0 0,1 7.5,13.5A1.5,1.5 0 0,1 6,12A1.5,1.5 0 0,1 7.5,10.5M16.5,10.5A1.5,1.5 0 0,1 18,12A1.5,1.5 0 0,1 16.5,13.5A1.5,1.5 0 0,1 15,12A1.5,1.5 0 0,1 16.5,10.5Z\"><\/path>\n            <\/svg>\n          <\/div>\n          <span>\u5feb\u901f\u6d4b\u8bd5<\/span>\n        <\/div>\n        <div class=\"wpx-icon-item\">\n          <div class=\"wpx-icon\">\n            <svg viewbox=\"0 0 24 24\" width=\"48\" height=\"48\">\n              <path fill=\"currentColor\" d=\"M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z\"><\/path>\n            <\/svg>\n          <\/div>\n          <span>\u51c6\u786e\u7ed3\u679c<\/span>\n        <\/div>\n        <div class=\"wpx-icon-item\">\n          <div class=\"wpx-icon\">\n            <svg viewbox=\"0 0 24 24\" width=\"48\" height=\"48\">\n              <path fill=\"currentColor\" d=\"M17.81,4.47C17.73,4.47 17.65,4.45 17.58,4.41C15.66,3.42 14,3 12,3C10.03,3 8.15,3.47 6.44,4.41C6.2,4.54 5.9,4.45 5.76,4.21C5.63,3.97 5.72,3.66 5.96,3.53C7.82,2.5 9.86,2 12,2C14.14,2 16,2.47 18.04,3.5C18.29,3.65 18.38,3.95 18.25,4.19C18.16,4.37 18,4.47 17.81,4.47M3.5,9.72C3.4,9.72 3.3,9.69 3.21,9.63C3,9.47 2.93,9.16 3.09,8.93C4.08,7.53 5.34,6.43 6.84,5.66C9.09,4.45 11.97,4.24 14.9,5.05C15.18,5.12 15.37,5.44 15.26,5.71C15.15,5.99 14.82,6.16 14.55,6.09C11.91,5.36 9.39,5.55 7.47,6.59C6.18,7.25 5.07,8.22 4.23,9.47C4.13,9.63 4,9.72 3.5,9.72M9.75,21.79C9.62,21.79 9.5,21.74 9.4,21.64C8.53,20.77 8.06,20.21 7.39,19C6.7,17.77 6.34,16.27 6.34,14.66C6.34,11.69 8.88,9.27 12,9.27C15.12,9.27 17.66,11.69 17.66,14.66A0.5,0.5 0 0,1 17.16,15.16A0.5,0.5 0 0,1 16.66,14.66C16.66,12.24 14.57,10.27 12,10.27C9.43,10.27 7.34,12.24 7.34,14.66C7.34,16.1 7.66,17.43 8.27,18.5C8.91,19.66 9.35,20.15 10.12,20.93C10.31,21.13 10.31,21.44 10.12,21.64C10,21.74 9.88,21.79 9.75,21.79M16.92,19.94C15.73,19.94 14.68,19.64 13.82,19.05C12.33,18.04 11.44,16.4 11.44,14.66A0.5,0.5 0 0,1 11.94,14.16A0.5,0.5 0 0,1 12.44,14.66C12.44,16.07 13.16,17.4 14.38,18.22C15.09,18.7 15.92,18.93 16.92,18.93C17.16,18.93 17.56,18.9 17.96,18.83C18.23,18.78 18.5,18.96 18.54,19.24C18.59,19.5 18.41,19.77 18.13,19.82C17.56,19.93 17.06,19.94 16.92,19.94M14.91,22C14.87,22 14.82,22 14.78,22C13.19,21.54 12.15,20.95 11.06,19.88C9.66,18.5 8.89,16.64 8.89,14.66C8.89,13.04 10.27,11.72 11.97,11.72C13.67,11.72 15.05,13.04 15.05,14.66C15.05,15.73 16,16.6 17.13,16.6C18.28,16.6 19.21,15.73 19.21,14.66C19.21,10.89 15.96,7.83 11.96,7.83C9.12,7.83 6.5,9.41 5.35,11.86C4.96,12.67 4.76,13.62 4.76,14.66C4.76,15.44 4.83,16.67 5.43,18.27C5.53,18.53 5.4,18.82 5.14,18.91C4.88,19 4.59,18.87 4.5,18.62C4,17.31 3.77,16 3.77,14.66C3.77,13.46 4,12.37 4.45,11.42C5.78,8.63 8.73,6.82 11.96,6.82C16.5,6.82 20.21,10.33 20.21,14.65C20.21,16.27 18.83,17.59 17.13,17.59C15.43,17.59 14.05,16.27 14.05,14.65C14.05,13.58 13.12,12.71 11.97,12.71C10.82,12.71 9.89,13.58 9.89,14.65C9.89,16.36 10.55,17.96 11.76,19.16C12.71,20.1 13.62,20.62 15.03,21C15.3,21.08 15.45,21.36 15.38,21.62C15.33,21.85 15.12,22 14.91,22Z\"><\/path>\n            <\/svg>\n          <\/div>\n          <span>\u6df1\u5ea6\u89e3\u6790<\/span>\n        <\/div>\n      <\/div>\n      <div class=\"wpx-intro\">\n        <p>\u867d\u7136\u6211\u4eec\u4e0d\u4e00\u5b9a\u662fLES\u6216\u8005GAY\uff0c\u4f46\u8fd8\u662f\u5f88\u597d\u5947\uff0c\u5982\u679c\u8eab\u5904\u540c\u5fd7\u5708\uff0c\u81ea\u5df1\u4f1a\u662f\u300c\u5c0f\u53d7\u300d\u8fd8\u662f\u300c\u5c0f\u653b\u300d\uff1f<\/p>\n        <p>\u653b\u53d7\u5df2\u7ecf\u6210\u4e3a\u5f53\u4e0b\u5e74\u8f7b\u4eba\u7684\u4e00\u79cd\u5bf9\u81ea\u6211\u5c5e\u6027\u7684\u81ea\u79f0\uff0c\u5f53\u7136\u8fd9\u79cd\u653b\u53d7\u4e0d\u4e00\u5b9a\u5c31\u662f\u5c5e\u4e8e\u540c\u6027\u604b\u8005\u7684\u3002\u5728\u6b63\u5e38\u53d6\u5411\u4e4b\u95f4\uff0c\u4eba\u4eec\u4e5f\u559c\u6b22\u7528\u653b\u53d7\u6765\u89e3\u91ca\u81ea\u8eab\u7684\u6027\u683c\u3002<\/p>\n        <p>\u4f60\u5bf9\u4e8e\u81ea\u8eab\u7684\u5c5e\u6027\u4e86\u89e3\u5417\uff1f\u5b8c\u6210\u8fd9\u4e2a\u6d4b\u8bd5\uff0c\u63a2\u7d22\u4f60\u7684\u5185\u5728\u672c\u8d28\uff01<\/p>\n      <\/div>\n    <\/div>\n    <button class=\"wpx-start-btn\" id=\"wpxStartBtn\">\u5f00\u59cb\u6d4b\u8bd5<\/button>\n  <\/div>\n\n  <!-- \u6e2c\u9a57\u9801 -->\n  <div class=\"wpx-page wpx-quiz-page\" id=\"wpxQuizPage\">\n    <header class=\"wpx-quiz-header\">\n      <h2 class=\"wpx-quiz-title\">\u6d4b\u6d4b\u4f60\u7684\u653b\u53d7\u5c5e\u6027<\/h2>\n      <div class=\"wpx-progress-container\" id=\"wpxProgressContainer\">\n        <div class=\"wpx-progress-text\" id=\"wpxProgressText\">\u95ee\u98981\/10<\/div>\n        <div class=\"wpx-progress-bar\">\n          <div class=\"wpx-progress-fill\" id=\"wpxProgressFill\"><\/div>\n        <\/div>\n      <\/div>\n    <\/header>\n    <div class=\"wpx-quiz-content\" id=\"wpxQuizContent\">\n      <!-- \u9019\u88e1\u5c07\u7531 JavaScript \u52d5\u614b\u586b\u5145\u554f\u984c -->\n    <\/div>\n    <div class=\"wpx-quiz-nav\">\n      <button class=\"wpx-prev-btn\" id=\"wpxPrevBtn\">\u4e0a\u4e00\u9898<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- \u7d50\u679c\u9801 -->\n  <div class=\"wpx-page wpx-result-page\" id=\"wpxResultPage\">\n    <header class=\"wpx-quiz-header\">\n      <h2 class=\"wpx-quiz-title\">\u6d4b\u8bd5\u7ed3\u679c<\/h2>\n    <\/header>\n    <div class=\"wpx-result-content\">\n      <div class=\"wpx-result-title-container\">\n        <div class=\"wpx-result-icon\">\n          <svg viewbox=\"0 0 24 24\" width=\"40\" height=\"40\">\n            <path fill=\"currentColor\" d=\"M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z\"><\/path>\n          <\/svg>\n        <\/div>\n        <div class=\"wpx-result-type\" id=\"wpxResultType\"><\/div>\n      <\/div>\n      <div class=\"wpx-result-score-container\">\n        <div class=\"wpx-result-score\">\n          <div class=\"wpx-result-chart-container\">\n            <canvas id=\"wpxResultChart\"><\/canvas>\n          <\/div>\n        <\/div>\n      <\/div>\n      <div class=\"wpx-result-analysis\">\n        <h3 class=\"wpx-analysis-title\">\u4e2a\u6027\u5206\u6790<\/h3>\n        <div class=\"wpx-result-description\" id=\"wpxResultDescription\"><\/div>\n      <\/div>\n      <div class=\"wpx-result-summary\" id=\"wpxResultSummary\">\n        <div class=\"wpx-summary-title\">\u6d4b\u8bd5\u7edf\u8ba1<\/div>\n        <div class=\"wpx-summary-content\" id=\"wpxSummaryContent\"><\/div>\n      <\/div>\n    <\/div>\n    <button class=\"wpx-restart-btn\" id=\"wpxRestartBtn\">\u91cd\u65b0\u6d4b\u8bd5<\/button>\n  <\/div>\n<\/section>\n\n<!-- \u6a23\u5f0f\uff1aCSS -->\n<style>\n:root {\n  \/* \u984f\u8272\u8b8a\u6578 *\/\n  --wpx-primary: #6a5acd;\n  --wpx-primary-light: #8a7aed;\n  --wpx-primary-dark: #5a4abb;\n  --wpx-secondary: #ff6b6b;\n  --wpx-secondary-light: #ff8a8a;\n  --wpx-secondary-dark: #e55a5a;\n  --wpx-neutral: #f8f9fa;\n  --wpx-neutral-dark: #e9ecef;\n  --wpx-text: #343a40;\n  --wpx-text-light: #6c757d;\n  --wpx-success: #6abf69;\n  --wpx-white: #ffffff;\n  --wpx-shadow: rgba(0, 0, 0, 0.1);\n  \n  \/* \u5b57\u9ad4\u5927\u5c0f *\/\n  --wpx-font-small: 16px;\n  --wpx-font-base: 18px;\n  --wpx-font-large: 20px;\n  --wpx-font-xlarge: 22px;\n  --wpx-font-xxlarge: 28px;\n  --wpx-font-title: 32px;\n  \n  \/* \u9593\u8ddd *\/\n  --wpx-spacing-xs: 8px;\n  --wpx-spacing-sm: 16px;\n  --wpx-spacing-md: 24px;\n  --wpx-spacing-lg: 32px;\n  --wpx-spacing-xl: 48px;\n  \n  \/* \u908a\u6846\u534a\u5f91 *\/\n  --wpx-radius-sm: 4px;\n  --wpx-radius-md: 8px;\n  --wpx-radius-lg: 12px;\n  --wpx-radius-full: 9999px;\n  \n  \/* \u52d5\u756b\u6642\u9593 *\/\n  --wpx-transition-fast: 0.2s;\n  --wpx-transition-normal: 0.3s;\n  --wpx-transition-slow: 0.5s;\n}\n\n\/* \u57fa\u790e\u91cd\u7f6e\u548c\u5bb9\u5668\u6a23\u5f0f *\/\n.wpx-quiz-container * {\n  box-sizing: border-box;\n  font-family: \"Microsoft JhengHei\", \"PingFang TC\", \"Apple LiGothic Medium\", \"\u5fae\u8edf\u6b63\u9ed1\u9ad4\", sans-serif;\n}\n\n.wpx-quiz-container {\n  max-width: 800px;\n  margin: 0 auto;\n  padding: var(--wpx-spacing-md);\n  color: var(--wpx-text);\n  background-color: var(--wpx-white);\n  border-radius: var(--wpx-radius-lg);\n  box-shadow: 0 5px 20px var(--wpx-shadow);\n  position: relative;\n  overflow: hidden;\n}\n\n\/* \u9801\u9762\u904e\u6e21 *\/\n.wpx-page {\n  display: none;\n  opacity: 0;\n  transition: opacity var(--wpx-transition-normal) ease;\n}\n\n.wpx-page.active {\n  display: block;\n  opacity: 1;\n}\n\n\/* \u6a19\u984c\u6a23\u5f0f *\/\n.wpx-quiz-header {\n  text-align: center;\n  margin-bottom: var(--wpx-spacing-lg);\n  padding-bottom: var(--wpx-spacing-md);\n  border-bottom: 1px solid var(--wpx-neutral-dark);\n}\n\n.wpx-quiz-title {\n  font-size: var(--wpx-font-title);\n  font-weight: bold;\n  color: var(--wpx-primary);\n  margin: 0 0 var(--wpx-spacing-sm);\n}\n\n\/* \u5f15\u5c0e\u9801\u6a23\u5f0f *\/\n.wpx-landing-content {\n  margin-bottom: var(--wpx-spacing-xl);\n}\n\n.wpx-feature-icons {\n  display: flex;\n  justify-content: center;\n  gap: var(--wpx-spacing-lg);\n  margin-bottom: var(--wpx-spacing-lg);\n  flex-wrap: wrap;\n}\n\n.wpx-icon-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  width: 120px;\n}\n\n.wpx-icon {\n  width: 70px;\n  height: 70px;\n  background-color: var(--wpx-primary-light);\n  color: var(--wpx-white);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: var(--wpx-spacing-xs);\n  box-shadow: 0 4px 8px var(--wpx-shadow);\n  transform: translateY(0);\n  transition: transform var(--wpx-transition-fast) ease, box-shadow var(--wpx-transition-fast) ease;\n}\n\n.wpx-icon:hover {\n  transform: translateY(-5px);\n  box-shadow: 0 6px 12px var(--wpx-shadow);\n}\n\n.wpx-icon-item span {\n  font-size: var(--wpx-font-base);\n  font-weight: bold;\n  color: var(--wpx-primary);\n}\n\n.wpx-intro {\n  max-width: 650px;\n  margin: 0 auto;\n  line-height: 1.6;\n  font-size: var(--wpx-font-base);\n}\n\n.wpx-intro p {\n  margin-bottom: var(--wpx-spacing-md);\n}\n\n\/* \u6309\u9215\u6a23\u5f0f *\/\n.wpx-start-btn, .wpx-restart-btn {\n  display: block;\n  width: 250px;\n  padding: var(--wpx-spacing-sm) var(--wpx-spacing-md);\n  margin: 0 auto;\n  font-size: var(--wpx-font-large);\n  font-weight: bold;\n  text-align: center;\n  color: var(--wpx-white);\n  background: linear-gradient(135deg, var(--wpx-primary), var(--wpx-primary-dark));\n  border: none;\n  border-radius: var(--wpx-radius-full);\n  cursor: pointer;\n  box-shadow: 0 4px 12px rgba(106, 90, 205, 0.4);\n  transition: transform var(--wpx-transition-fast) ease, box-shadow var(--wpx-transition-fast) ease;\n}\n\n.wpx-start-btn:hover, .wpx-restart-btn:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 15px rgba(106, 90, 205, 0.5);\n}\n\n.wpx-start-btn:active, .wpx-restart-btn:active {\n  transform: translateY(1px);\n  box-shadow: 0 2px 8px rgba(106, 90, 205, 0.3);\n}\n\n\/* \u9032\u5ea6\u689d\u6a23\u5f0f *\/\n.wpx-progress-container {\n  max-width: 500px;\n  margin: var(--wpx-spacing-md) auto 0;\n}\n\n.wpx-progress-text {\n  font-size: var(--wpx-font-base);\n  margin-bottom: var(--wpx-spacing-xs);\n  text-align: center;\n  color: var(--wpx-text-light);\n}\n\n.wpx-progress-bar {\n  height: 8px;\n  background-color: var(--wpx-neutral-dark);\n  border-radius: var(--wpx-radius-full);\n  overflow: hidden;\n}\n\n.wpx-progress-fill {\n  height: 100%;\n  background: linear-gradient(to right, var(--wpx-primary-light), var(--wpx-primary));\n  width: 0;\n  transition: width var(--wpx-transition-normal) ease;\n}\n\n\/* \u6e2c\u9a57\u9801\u6a23\u5f0f *\/\n.wpx-quiz-content {\n  margin-bottom: var(--wpx-spacing-lg);\n}\n\n.wpx-question {\n  margin-bottom: var(--wpx-spacing-lg);\n}\n\n.wpx-question-text {\n  font-size: var(--wpx-font-xlarge);\n  font-weight: bold;\n  margin-bottom: var(--wpx-spacing-md);\n  line-height: 1.4;\n}\n\n.wpx-options {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wpx-spacing-sm);\n}\n\n.wpx-option {\n  padding: var(--wpx-spacing-md);\n  background-color: var(--wpx-neutral);\n  border: 2px solid var(--wpx-neutral-dark);\n  border-radius: var(--wpx-radius-md);\n  cursor: pointer;\n  transition: all var(--wpx-transition-fast) ease;\n  font-size: var(--wpx-font-base);\n  color: var(--wpx-text);\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.wpx-option:hover {\n  background-color: var(--wpx-neutral-dark);\n  border-color: var(--wpx-primary-light);\n}\n\n.wpx-option.selected {\n  background-color: rgba(106, 90, 205, 0.1);\n  border-color: var(--wpx-primary);\n  color: var(--wpx-primary-dark);\n  font-weight: bold;\n}\n\n.wpx-option-label {\n  margin-left: var(--wpx-spacing-sm);\n  flex: 1;\n}\n\n.wpx-option-marker {\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  border: 2px solid var(--wpx-text-light);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all var(--wpx-transition-fast) ease;\n}\n\n.wpx-option.selected .wpx-option-marker {\n  border-color: var(--wpx-primary);\n  background-color: var(--wpx-primary);\n}\n\n.wpx-option.selected .wpx-option-marker::after {\n  content: \"\";\n  width: 10px;\n  height: 10px;\n  background-color: var(--wpx-white);\n  border-radius: 50%;\n}\n\n\/* \u5c0e\u822a\u6309\u9215 *\/\n.wpx-quiz-nav {\n  display: flex;\n  justify-content: center;\n  gap: var(--wpx-spacing-md);\n  margin-top: var(--wpx-spacing-lg);\n}\n\n.wpx-prev-btn {\n  padding: var(--wpx-spacing-sm) var(--wpx-spacing-lg);\n  font-size: var(--wpx-font-base);\n  font-weight: bold;\n  color: var(--wpx-primary-dark);\n  background-color: var(--wpx-white);\n  border: 2px solid var(--wpx-primary);\n  border-radius: var(--wpx-radius-full);\n  cursor: pointer;\n  transition: all var(--wpx-transition-fast) ease;\n  min-width: 150px;\n  min-height: 50px;\n  box-shadow: 0 2px 6px rgba(106, 90, 205, 0.2);\n  text-align: center;\n}\n\n.wpx-prev-btn:hover {\n  background-color: var(--wpx-primary-light);\n  color: var(--wpx-white);\n  transform: translateY(-2px);\n  box-shadow: 0 4px 8px rgba(106, 90, 205, 0.3);\n}\n\n\/* \u7d50\u679c\u9801\u6a23\u5f0f *\/\n.wpx-result-content {\n  margin-bottom: var(--wpx-spacing-xl);\n}\n\n.wpx-result-score-container {\n  margin-bottom: var(--wpx-spacing-lg);\n}\n\n.wpx-result-score {\n  text-align: center;\n}\n\n.wpx-result-chart-container {\n  margin: 0 auto var(--wpx-spacing-lg);\n  max-width: 350px;\n  max-height: 350px;\n  padding: var(--wpx-spacing-sm);\n  background-color: var(--wpx-white);\n  border-radius: var(--wpx-radius-md);\n  box-shadow: 0 2px 8px var(--wpx-shadow);\n}\n\n.wpx-result-title-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: var(--wpx-spacing-md);\n}\n\n.wpx-result-icon {\n  color: var(--wpx-secondary);\n  margin-right: var(--wpx-spacing-sm);\n}\n\n.wpx-result-type {\n  font-size: var(--wpx-font-xxlarge);\n  font-weight: bold;\n  color: var(--wpx-primary);\n  margin-bottom: var(--wpx-spacing-xs);\n  padding: var(--wpx-spacing-xs) var(--wpx-spacing-md);\n  background: linear-gradient(135deg, var(--wpx-primary-light), var(--wpx-primary));\n  color: var(--wpx-white);\n  border-radius: var(--wpx-radius-full);\n  box-shadow: 0 3px 10px rgba(106, 90, 205, 0.3);\n}\n\n.wpx-result-analysis {\n  margin-bottom: var(--wpx-spacing-lg);\n}\n\n.wpx-analysis-title {\n  font-size: var(--wpx-font-large);\n  color: var(--wpx-primary);\n  margin-bottom: var(--wpx-spacing-sm);\n  text-align: center;\n}\n\n.wpx-result-description {\n  max-width: 650px;\n  margin: 0 auto;\n  font-size: var(--wpx-font-base);\n  line-height: 1.7;\n  background-color: var(--wpx-neutral);\n  padding: var(--wpx-spacing-lg);\n  border-radius: var(--wpx-radius-md);\n  box-shadow: 0 2px 8px var(--wpx-shadow);\n}\n\n.wpx-result-summary {\n  max-width: 650px;\n  margin: 0 auto var(--wpx-spacing-lg);\n  background-color: var(--wpx-neutral);\n  border-radius: var(--wpx-radius-md);\n  padding: var(--wpx-spacing-md);\n  box-shadow: 0 2px 8px var(--wpx-shadow);\n}\n\n.wpx-summary-title {\n  font-size: var(--wpx-font-large);\n  font-weight: bold;\n  color: var(--wpx-primary);\n  margin-bottom: var(--wpx-spacing-sm);\n  text-align: center;\n}\n\n.wpx-summary-content {\n  font-size: var(--wpx-font-base);\n  line-height: 1.6;\n}\n\n\/* \u97ff\u61c9\u5f0f\u8a2d\u8a08 *\/\n@media (max-width: 768px) {\n  .wpx-quiz-container {\n    padding: var(--wpx-spacing-sm);\n  }\n  \n  .wpx-quiz-title {\n    font-size: 26px;\n  }\n  \n  .wpx-feature-icons {\n    gap: var(--wpx-spacing-md);\n  }\n  \n  .wpx-icon-item {\n    width: 100px;\n  }\n  \n  .wpx-icon {\n    width: 60px;\n    height: 60px;\n  }\n}\n\n@media (max-width: 480px) {\n  .wpx-quiz-title {\n    font-size: 24px;\n  }\n  \n  .wpx-feature-icons {\n    gap: var(--wpx-spacing-sm);\n  }\n  \n  .wpx-icon-item {\n    width: 90px;\n  }\n  \n  .wpx-icon {\n    width: 50px;\n    height: 50px;\n  }\n  \n  .wpx-intro {\n    font-size: var(--wpx-font-small);\n  }\n  \n  .wpx-option {\n    padding: var(--wpx-spacing-sm);\n  }\n  \n  .wpx-start-btn, .wpx-restart-btn {\n    width: 200px;\n    font-size: var(--wpx-font-base);\n  }\n}\n<\/style>\n\n<!-- \u884c\u70ba\uff1aJavaScript -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n<script>\n(function() {\n  'use strict';\n  \n  \/\/ \u9632\u6b62\u5168\u5c40\u8b8a\u91cf\u6c61\u67d3\n  const WPXQuiz = {\n    \/\/ \u6e2c\u9a57\u6578\u64da\n    data: {\n      questions: [\n        {\n          id: 1,\n          text: \"\u4e00\u500b\u804a\u5f97\u6bd4\u8f03\u591a\u7684\u540c\u6027\u7db2\u53cb\u4f86\u4f60\u6240\u5728\u7684\u57ce\u5e02\u51fa\u5dee\uff0c\u60f3\u548c\u4f60\u898b\u9762\uff0c\u4f60\u7684\u9078\u64c7\u662f\uff1f\",\n          options: [\n            { id: \"A\", text: \"\u898b\" },\n            { id: \"B\", text: \"\u4e0d\u898b\" }\n          ]\n        },\n        {\n          id: 2,\n          text: \"\u4f60\u7b54\u61c9\u548c\u4ed6\u898b\u9762\uff0c\u898b\u9762\u7684\u5730\u9ede\u4f60\u89ba\u5f97\u8a72\u4f60\u5b9a\u9084\u662f\u5c0d\u65b9\u5b9a\uff1f\",\n          options: [\n            { id: \"A\", text: \"\u7576\u7136\u6211\u5b9a\uff0c\u9019\u88e1\u6211\u6bd4\u8f03\u719f\" },\n            { id: \"B\", text: \"\u5c0d\u65b9\u5b9a\u5427\uff0c\u6211\u96a8\u610f\" }\n          ]\n        },\n        {\n          id: 3,\n          text: \"\u5169\u4eba\u4e00\u8d77\u5403\u904e\u98ef\uff0c\u4f60\u89ba\u5f97\u8a72\u8ab0\u4ed8\u5e33\uff1f\",\n          options: [\n            { id: \"A\", text: \"\u6211\u4ed8\uff0c\u4eba\u5bb6\u662f\u5ba2\" },\n            { id: \"B\", text: \"\u5c0d\u65b9\u4ed8\uff0c\u6211\u662f\u53d7\u9080\u65b9\" }\n          ]\n        },\n        {\n          id: 4,\n          text: \"\u5403\u904e\u98ef\uff0c\u5c0d\u65b9\u63d0\u51fa\u53bb\u4ed6\u4e0b\u584c\u7684\u8cd3\u9928\u5750\u5750\uff0c\u4f60\u6703\uff1a\",\n          options: [\n            { id: \"A\", text: \"\u53bb\" },\n            { id: \"B\", text: \"\u4e0d\u53bb\" }\n          ]\n        },\n        {\n          id: 5,\n          text: \"\u623f\u9593\u88e1\u6709\u7d05\u9152\u548c\u5496\u5561\uff0c\u4f60\u60f3\u559d\u54ea\u4e00\u500b\uff1f\",\n          options: [\n            { id: \"A\", text: \"\u7d05\u9152\" },\n            { id: \"B\", text: \"\u5496\u5561\" }\n          ]\n        },\n        {\n          id: 6,\n          text: \"\u4ed6\u9032\u6d17\u624b\u9593\u5341\u5206\u9418\u9084\u6c92\u6709\u51fa\u4f86\uff0c\u4f60\u4e5f\u6c92\u807d\u5230\u4ec0\u9ebc\u8072\u97f3\uff0c\u4f60\u6703\uff1a\",\n          options: [\n            { id: \"A\", text: \"\u4e0a\u5ec1\u6240\u4e0a\u5f97\u6bd4\u8f03\u4e45\u5427\" },\n            { id: \"B\", text: \"\u53bb\u6572\u6572\u9580\uff0c\u770b\u770b\u6709\u4ec0\u9ebc\u554f\u984c\" }\n          ]\n        },\n        {\n          id: 7,\n          text: \"\u4f60\u5011\u908a\u559d\u6771\u897f\u908a\u804a\u5929\uff0c\u4f60\u89ba\u5f97\u4f60\u5011\u662f\u5750\u5728\u54ea\uff1f\",\n          options: [\n            { id: \"A\", text: \"\u5750\u5728\u5e8a\u4e0a\" },\n            { id: \"B\", text: \"\u5750\u5728\u6905\u5b50\u4e0a\" }\n          ]\n        },\n        {\n          id: 8,\n          text: \"\u804a\u5230\u9ad8\u8208\u8655\uff0c\u5c0d\u65b9\u8d81\u8457\u9152\u52c1\u89aa\u4e86\u4f60\u81c9\u9830\u4e00\u4e0b\uff0c\u4f60\u6703\uff1a\",\n          options: [\n            { id: \"A\", text: \"\u56de\u89aa\u4e00\u4e0b\" },\n            { id: \"B\", text: \"\u9583\u958b\" }\n          ]\n        },\n        {\n          id: 9,\n          text: \"\u5c0d\u65b9\u544a\u8a34\u4f60\u4ed6\u662f\u540c\u6027\u6200\uff0c\u4f60\u89ba\u5f97\uff1a\",\n          options: [\n            { id: \"A\", text: \"\u5728\u958b\u73a9\u7b11\" },\n            { id: \"B\", text: \"\u61c9\u8a72\u662f\u771f\u7684\" }\n          ]\n        },\n        {\n          id: 10,\n          text: \"\u4f60\u62d2\u7d55\u505a\u4ed6\u7684\u540c\u6027\u6200\u4eba\u5f8c\uff0c\u4ed6\u63d0\u51fa\u5e73\u6524\u525b\u7e94\u7684\u98ef\u9322\uff08\u9322\u662f\u4f60\u51fa\u7684\uff09\uff0c\u4f60\u6703\uff1a\",\n          options: [\n            { id: \"A\", text: \"\u4e0d\u7528\uff0c\u7b97\u6211\u8acb\u7684\" },\n            { id: \"B\", text: \"\u9084\u662f\u4f9d\u4e86TA\uff0c\u5225\u6709\u4efb\u4f55\u7684\u727d\u626f\u4e0d\u6e05\" }\n          ]\n        }\n      ],\n      results: [\n        {\n          range: [0, 3],\n          type: \"\u5f31\u53d7\",\n          description: \"\u4f60\u662f\u300c\u53d7\u300d\uff0c\u9084\u662f\u500b\u300c\u5f31\u53d7\u300d\u3002\u4f60\u7684\u6c23\u5834\u5c31\u662f\u300c\u53d7\u300d\uff0c\u4e0d\u7ba1\u5916\u578b\u5982\u4f55\uff0c\u500b\u6027\u7d42\u6b78\u662f\u6587\u975c\u3001\u5167\u6582\u7684\u3002\u4f60\u6709\u71b1\u60c5\u4e5f\u53ea\u85cf\u5728\u5fc3\u88e1\uff0c\u5916\u8868\u7e3d\u662f\u526f\u6de1\u5b9a\u6a21\u6a23\uff0c\u8b93\u4eba\u7121\u6cd5\u731c\u900f\u4f60\u7684\u771f\u5be6\u60f3\u6cd5\u3002\u4f60\u65e2\u4e0d\u4e3b\u52d5\u4e5f\u4e0d\u8868\u9054\uff0c\u770b\u8457\u4f60\u9084\u771f\u662f\u6349\u6025\uff0c\u771f\u5e0c\u671b\u54ea\u5929\u706b\u773c\u91d1\u775b\u7684\u6709\u7de3\u4eba\u65e9\u9ede\u9047\u898b\u4f60\u3002\"\n        },\n        {\n          range: [4, 5],\n          type: \"\u5f37\u53d7\",\n          description: \"\u4f60\u662f\u300c\u5f37\u53d7\u300d\u3002\u5916\u8868\u770b\u4e0a\u53bb\u4f60\u9084\u633a\u5916\u56ae\u7684\uff0c\u611b\u8aaa\u611b\u73a9\u7684\uff0c\u4e00\u4e0d\u5c0f\u5fc3\u5c31\u8b93\u4eba\u89ba\u5f97\u4f60\u662f\u500b\u300c\u653b\u300d\u3002\u4f46\u5176\u5be6\u4f60\u6c92\u6709\u591a\u5c11\u884c\u52d5\u529b\uff0c\u4e26\u4e14\u6027\u683c\u4e2d\u6709\u4e9b\u602f\u61e6\u7684\u6210\u5206\uff0c\u9047\u4e8b\u5b88\u591a\u904e\u653b\u3002\u770b\u4f60\u591a\u5c11\u6709\u4e9b\u88ab\u52d5\uff0c\u662f\u500b\u300c\u5f37\u53d7\u300d\u7121\u7591\u4e86\u3002\"\n        },\n        {\n          range: [6, 7],\n          type: \"\u5f31\u653b\",\n          description: \"\u4f60\u662f\u300c\u5f31\u653b\u300d\u3002\u4f60\u5728\u60c5\u611f\u4e0a\u6bd4\u8f03\u7406\u667a\uff0c\u4e0d\u6703\u88ab\u611b\u6c96\u660f\u4e86\u982d\u8166\uff0c\u4f46\u662f\u5c31\u7b97\u4f60\u518d\u80fd\u63a7\u5236\uff0c\u4e5f\u63a7\u5236\u4e0d\u4e86\u672c\u80fd\u8207\u5929\u6027\u3002\u611b\u4e86\u5c31\u611b\u4e86\uff0c\u4e00\u8f29\u5b50\u8aaa\u9577\u4e0d\u9577\u8aaa\u77ed\u4e0d\u77ed\uff0c\u7e3d\u8981\u653e\u8086\u4e00\u56de\uff0c\u505a\u500b\u300c\u5f31\u653b\u300d\u4e5f\u4e0d\u932f\u3002\"\n        },\n        {\n          range: [8, 10],\n          type: \"\u5f37\u653b\",\n          description: \"\u4f60\u7d55\u5c0d\u662f\u300c\u653b\u300d\uff0c\u9084\u662f\u500b\u300c\u5f37\u653b\u300d\u3002\u4f60\u64c5\u9577\u4e3b\u52d5\uff0c\u4e00\u4ef6\u4e8b\u60c5\u5c31\u7b97\u662f\u5225\u4eba\u6311\u8d77\u7684\uff0c\u4f60\u4e5f\u6703\u4e3b\u52d5\u5f04\u500b\u6e05\u6e05\u695a\u695a\u624d\u7f77\u4f11\uff0c\u6700\u53d7\u4e0d\u4e86\u4e0d\u660e\u4e0d\u767d\u7684\u66d6\u6627\u3002\u770b\u904e\u653b\u64ca\u6027\u5f37\uff0c\u6c92\u770b\u904e\u9019\u9ebc\u6703\u653b\u64ca\u7684\uff0c\u4f60\u662f\u300c\u5f37\u653b\u300d\u7121\u7591\u4e86\u3002\"\n        }\n      ]\n    },\n\n    \/\/ \u72c0\u614b\u8b8a\u91cf\n    state: {\n      currentPage: 'landing', \/\/ \u7576\u524d\u9801\u9762\uff1alanding, quiz, result\n      currentQuestion: 0,     \/\/ \u7576\u524d\u554f\u984c\u7d22\u5f15\n      answers: [],            \/\/ \u7528\u6236\u7b54\u6848\n      resultType: '',         \/\/ \u7d50\u679c\u985e\u578b\n      resultDescription: '',  \/\/ \u7d50\u679c\u63cf\u8ff0\n      chart: null            \/\/ \u5716\u8868\u5be6\u4f8b\n    },\n\n    \/\/ DOM \u5143\u7d20\n    elements: {\n      \/\/ \u9801\u9762\n      landingPage: null,\n      quizPage: null,\n      resultPage: null,\n\n      \/\/ \u6309\u9215\n      startBtn: null,\n      prevBtn: null,\n      restartBtn: null,\n\n      \/\/ \u5176\u4ed6\u5143\u7d20\n      quizContent: null,\n      progressText: null,\n      progressFill: null,\n      progressContainer: null,\n      resultType: null,\n      resultDescription: null,\n      resultChart: null\n    },\n\n    \/\/ \u521d\u59cb\u5316\u51fd\u6578\n    init: function() {\n      this.cacheElements();\n      this.bindEvents();\n      this.showPage('landing');\n    },\n\n    \/\/ \u7de9\u5b58 DOM \u5143\u7d20\n    cacheElements: function() {\n      \/\/ \u9801\u9762\n      this.elements.landingPage = document.getElementById('wpxLandingPage');\n      this.elements.quizPage = document.getElementById('wpxQuizPage');\n      this.elements.resultPage = document.getElementById('wpxResultPage');\n\n      \/\/ \u6309\u9215\n      this.elements.startBtn = document.getElementById('wpxStartBtn');\n      this.elements.prevBtn = document.getElementById('wpxPrevBtn');\n      this.elements.restartBtn = document.getElementById('wpxRestartBtn');\n\n      \/\/ \u5176\u4ed6\u5143\u7d20\n      this.elements.quizContent = document.getElementById('wpxQuizContent');\n      this.elements.progressText = document.getElementById('wpxProgressText');\n      this.elements.progressFill = document.getElementById('wpxProgressFill');\n      this.elements.progressContainer = document.getElementById('wpxProgressContainer');\n      this.elements.resultType = document.getElementById('wpxResultType');\n      this.elements.resultDescription = document.getElementById('wpxResultDescription');\n      this.elements.resultChart = document.getElementById('wpxResultChart');\n    },\n\n    \/\/ \u7d81\u5b9a\u4e8b\u4ef6\n    bindEvents: function() {\n      const self = this;\n\n      \/\/ \u958b\u59cb\u6e2c\u9a57\n      this.elements.startBtn.addEventListener('click', function() {\n        self.startQuiz();\n      });\n\n      \/\/ \u91cd\u65b0\u6e2c\u9a57\n      this.elements.restartBtn.addEventListener('click', function() {\n        self.resetQuiz();\n      });\n\n      \/\/ \u4e0a\u4e00\u984c\n      this.elements.prevBtn.addEventListener('click', function() {\n        self.previousQuestion();\n      });\n\n      \/\/ \u4f7f\u7528\u4e8b\u4ef6\u59d4\u6258\u8655\u7406\u9078\u9805\u9ede\u64ca\n      document.addEventListener('click', function(e) {\n        \/\/ \u6aa2\u67e5\u662f\u5426\u9ede\u64ca\u4e86\u9078\u9805\n        if (e.target && (e.target.classList.contains('wpx-option') || e.target.closest('.wpx-option'))) {\n          const optionEl = e.target.classList.contains('wpx-option') ? e.target : e.target.closest('.wpx-option');\n          const optionId = optionEl.dataset.optionId;\n          const questionId = parseInt(optionEl.closest('.wpx-question').dataset.questionId, 10);\n          \n          self.selectOption(questionId, optionId);\n        }\n      });\n\n      \/\/ \u7bc0\u6d41\u7684\u6efe\u52d5\u4e8b\u4ef6\u8655\u7406\n      window.addEventListener('scroll', this.throttle(function() {\n        \/\/ \u5982\u679c\u5728\u6e2c\u9a57\u9801\u9762\uff0c\u6efe\u52d5\u5230\u7576\u524d\u554f\u984c\n        if (self.state.currentPage === 'quiz') {\n          self.scrollToActiveQuestion();\n        }\n      }, 200));\n\n      \/\/ \u8996\u7a97\u5927\u5c0f\u6539\u8b8a\u6642\u8abf\u6574\u5716\u8868\n      window.addEventListener('resize', this.debounce(function() {\n        if (self.state.currentPage === 'result' && self.state.chart) {\n          self.state.chart.resize();\n        }\n      }, 250));\n    },\n\n    \/\/ \u958b\u59cb\u6e2c\u9a57\n    startQuiz: function() {\n      this.state.currentQuestion = 0;\n      this.state.answers = [];\n      this.renderQuestion();\n      this.updateProgress();\n      this.showPage('quiz');\n      this.scrollToTop();\n    },\n\n    \/\/ \u91cd\u7f6e\u6e2c\u9a57\n    resetQuiz: function() {\n      this.state.currentQuestion = 0;\n      this.state.answers = [];\n      this.renderQuestion();\n      this.updateProgress();\n      this.showPage('quiz');\n      this.scrollToTop();\n    },\n\n    \/\/ \u986f\u793a\u6307\u5b9a\u9801\u9762\n    showPage: function(pageName) {\n      this.state.currentPage = pageName;\n      \n      \/\/ \u96b1\u85cf\u6240\u6709\u9801\u9762\n      this.elements.landingPage.classList.remove('active');\n      this.elements.quizPage.classList.remove('active');\n      this.elements.resultPage.classList.remove('active');\n      \n      \/\/ \u986f\u793a\u76ee\u6a19\u9801\u9762\n      switch(pageName) {\n        case 'landing':\n          this.elements.landingPage.classList.add('active');\n          break;\n        case 'quiz':\n          this.elements.quizPage.classList.add('active');\n          break;\n        case 'result':\n          this.elements.resultPage.classList.add('active');\n          break;\n      }\n    },\n\n    \/\/ \u6e32\u67d3\u7576\u524d\u554f\u984c\n    renderQuestion: function() {\n      const question = this.data.questions[this.state.currentQuestion];\n      const selectedOption = this.state.answers[this.state.currentQuestion];\n      \n      let html = `\n        <div class=\"wpx-question\" data-question-id=\"${question.id}\">\n          <h3 class=\"wpx-question-text\">${question.text}<\/h3>\n          <div class=\"wpx-options\">\n      `;\n      \n      question.options.forEach(option => {\n        const isSelected = selectedOption === option.id;\n        html += `\n          <div class=\"wpx-option ${isSelected ? 'selected' : ''}\" data-option-id=\"${option.id}\">\n            <div class=\"wpx-option-marker\"><\/div>\n            <div class=\"wpx-option-label\">${option.text}<\/div>\n          <\/div>\n        `;\n      });\n      \n      html += `\n          <\/div>\n        <\/div>\n      `;\n      \n      this.elements.quizContent.innerHTML = html;\n      \n      \/\/ \u986f\u793a\/\u96b1\u85cf\u4e0a\u4e00\u984c\u6309\u9215\n      if (this.state.currentQuestion > 0) {\n        this.elements.prevBtn.style.display = 'block';\n      } else {\n        this.elements.prevBtn.style.display = 'none';\n      }\n    },\n\n    \/\/ \u9078\u64c7\u9078\u9805\n    selectOption: function(questionId, optionId) {\n      \/\/ \u5132\u5b58\u7b54\u6848\n      this.state.answers[this.state.currentQuestion] = optionId;\n      \n      \/\/ \u8996\u89ba\u53cd\u994b\n      const options = document.querySelectorAll('.wpx-option');\n      options.forEach(opt => opt.classList.remove('selected'));\n      \n      const selectedOption = document.querySelector(`.wpx-option[data-option-id=\"${optionId}\"]`);\n      if (selectedOption) {\n        selectedOption.classList.add('selected');\n      }\n      \n      \/\/ \u5ef6\u9072\u4e00\u4e0b\u518d\u9032\u5165\u4e0b\u4e00\u984c\uff0c\u8b93\u7528\u6236\u770b\u5230\u9078\u64c7\u6548\u679c\n      setTimeout(() => {\n        this.nextQuestion();\n      }, 300);\n    },\n\n    \/\/ \u4e0b\u4e00\u984c\n    nextQuestion: function() {\n      if (this.state.currentQuestion < this.data.questions.length - 1) {\n        this.state.currentQuestion++;\n        this.renderQuestion();\n        this.updateProgress();\n        this.scrollToTop();\n      } else {\n        this.calculateResult();\n        this.showResult();\n      }\n    },\n\n    \/\/ \u4e0a\u4e00\u984c\n    previousQuestion: function() {\n      if (this.state.currentQuestion > 0) {\n        this.state.currentQuestion--;\n        this.renderQuestion();\n        this.updateProgress();\n        this.scrollToTop();\n      }\n    },\n\n    \/\/ \u66f4\u65b0\u9032\u5ea6\n    updateProgress: function() {\n      const total = this.data.questions.length;\n      const current = this.state.currentQuestion + 1;\n      const percentage = (current \/ total) * 100;\n      \n      this.elements.progressText.textContent = `\u554f\u984c ${current}\/${total}`;\n      this.elements.progressFill.style.width = `${percentage}%`;\n    },\n\n    \/\/ \u8a08\u7b97\u7d50\u679c\n    calculateResult: function() {\n      let score = 0;\n      \n      \/\/ \u8a08\u7b97\u5206\u6578\uff1aA\u9078\u9805\u5f971\u5206\uff0cB\u9078\u9805\u5f970\u5206\n      this.state.answers.forEach(answer => {\n        if (answer === 'A') {\n          score += 1;\n        }\n      });\n      \n      \/\/ \u6839\u64da\u5206\u6578\u7bc4\u570d\u78ba\u5b9a\u7d50\u679c\n      let result = null;\n      for (const r of this.data.results) {\n        if (score >= r.range[0] && score <= r.range[1]) {\n          result = r;\n          break;\n        }\n      }\n      \n      this.state.resultScore = score;\n      this.state.resultType = result.type;\n      this.state.resultDescription = result.description;\n    },\n\n    \/\/ \u986f\u793a\u7d50\u679c\n    showResult: function() {\n      \/\/ \u8a2d\u7f6e\u7d50\u679c\u985e\u578b\u548c\u63cf\u8ff0\n      this.elements.resultType.textContent = this.state.resultType;\n      this.elements.resultDescription.textContent = this.state.resultDescription;\n      \n      \/\/ \u751f\u6210\u6e2c\u8a66\u7d71\u8a08\u6458\u8981\n      this.generateResultSummary();\n      \n      \/\/ \u6e32\u67d3\u5716\u8868\n      this.renderResultChart();\n      \n      \/\/ \u986f\u793a\u7d50\u679c\u9801\n      this.showPage('result');\n      this.scrollToTop();\n    },\n    \n    \/\/ \u751f\u6210\u6e2c\u8a66\u7d71\u8a08\u6458\u8981\n    generateResultSummary: function() {\n      const summaryEl = document.getElementById('wpxSummaryContent');\n      const score = this.state.resultScore;\n      const total = this.data.questions.length;\n      const percentage = Math.round((score \/ total) * 100);\n      \n      \/\/ \u8a08\u7b97\u9078\u64c7A\u548cB\u7684\u984c\u76ee\u6578\u91cf\n      const optionACounts = this.state.answers.filter(answer => answer === 'A').length;\n      const optionBCounts = this.state.answers.filter(answer => answer === 'B').length;\n      \n      \/\/ \u751f\u6210\u6458\u8981HTML\n      let summaryHTML = `\n        <div class=\"wpx-summary-stats\">\n          <p>\u60a8\u5728\u672c\u6b21\u6e2c\u8a66\u4e2d\u9078\u64c7\u4e86 <strong>${optionACounts}<\/strong> \u500bA\u9078\u9805\u548c <strong>${optionBCounts}<\/strong> \u500bB\u9078\u9805\u3002<\/p>\n          <p>\u60a8\u7684\u6700\u7d42\u653b\u53d7\u5c6c\u6027\u5f97\u5206\u70ba <strong>${score}<\/strong> \u5206\uff08\u6eff\u520610\u5206\uff09\uff0c\u5c6c\u65bc <strong>${this.state.resultType}<\/strong> \u985e\u578b\u3002<\/p>\n          <p>\u8207\u6240\u6709\u6e2c\u8a66\u8005\u76f8\u6bd4\uff0c\u60a8\u7684\u653b\u5c6c\u6027\u5f37\u5ea6\u70ba <strong>${percentage}%<\/strong>\u3002<\/p>\n        <\/div>\n      `;\n      \n      summaryEl.innerHTML = summaryHTML;\n    },\n\n    \/\/ \u6e32\u67d3\u7d50\u679c\u5716\u8868\n    renderResultChart: function() {\n      const ctx = this.elements.resultChart.getContext('2d');\n      \n      \/\/ \u8a08\u7b97\u653b\u53d7\u5c6c\u6027\u7684\u767e\u5206\u6bd4\u503c\n      const score = this.state.resultScore;\n      const total = this.data.questions.length;\n      const attackPercentage = Math.round((score \/ total) * 100);\n      const receivePercentage = 100 - attackPercentage;\n      \n      \/\/ \u8a2d\u7f6e\u5716\u8868\u6578\u64da\n      const data = {\n        labels: [`\u653b ${attackPercentage}%`, `\u53d7 ${receivePercentage}%`],\n        datasets: [{\n          label: '\u5c6c\u6027\u767e\u5206\u6bd4',\n          data: [attackPercentage, receivePercentage],\n          backgroundColor: [\n            'rgba(106, 90, 205, 0.8)',\n            'rgba(255, 107, 107, 0.8)'\n          ],\n          borderColor: [\n            'rgba(106, 90, 205, 1)',\n            'rgba(255, 107, 107, 1)'\n          ],\n          borderWidth: 2,\n          hoverOffset: 8\n        }]\n      };\n      \n      \/\/ \u5716\u8868\u9078\u9805\n      const options = {\n        responsive: true,\n        maintainAspectRatio: true,\n        cutout: '0%',\n        radius: '90%',\n        plugins: {\n          legend: {\n            position: 'bottom',\n            labels: {\n              font: {\n                size: 20,\n                weight: 'bold'\n              },\n              color: 'rgb(52, 58, 64)',\n              padding: 25,\n              boxWidth: 18,\n              boxHeight: 18\n            }\n          },\n          tooltip: {\n            titleFont: {\n              size: 16\n            },\n            bodyFont: {\n              size: 14\n            },\n            callbacks: {\n              label: function(context) {\n                return context.label.split(' ')[0] + '\u5c6c\u6027: ' + context.parsed + '%';\n              }\n            }\n          },\n          datalabels: {\n            color: 'white',\n            font: {\n              weight: 'bold',\n              size: 16\n            },\n            formatter: (value) => {\n              if (value < 15) return '';\n              return value + '%';\n            }\n          }\n        },\n        animation: {\n          animateScale: true,\n          animateRotate: true,\n          duration: 1000\n        }\n      };\n      \n      \/\/ \u5982\u679c\u5df2\u6709\u5716\u8868\u5be6\u4f8b\uff0c\u5148\u92b7\u6bc0\n      if (this.state.chart) {\n        this.state.chart.destroy();\n      }\n      \n      \/\/ \u5275\u5efa\u65b0\u5716\u8868\n      this.state.chart = new Chart(ctx, {\n        type: 'doughnut',\n        data: data,\n        options: options\n      });\n    },\n\n    \/\/ \u6efe\u52d5\u5230\u9802\u90e8\n    scrollToTop: function() {\n      const container = document.getElementById('wpxQuizContainer');\n      if (container) {\n        window.scrollTo({\n          top: container.offsetTop - 50,\n          behavior: 'smooth'\n        });\n      }\n    },\n\n    \/\/ \u6efe\u52d5\u5230\u7576\u524d\u554f\u984c\n    scrollToActiveQuestion: function() {\n      const questionEl = document.querySelector('.wpx-question');\n      if (questionEl) {\n        questionEl.scrollIntoView({\n          behavior: 'smooth',\n          block: 'start'\n        });\n      }\n    },\n\n    \/\/ \u9632\u6296\u51fd\u6578\n    debounce: function(func, wait) {\n      let timeout;\n      return function() {\n        const context = this;\n        const args = arguments;\n        clearTimeout(timeout);\n        timeout = setTimeout(function() {\n          func.apply(context, args);\n        }, wait);\n      };\n    },\n\n    \/\/ \u7bc0\u6d41\u51fd\u6578\n    throttle: function(func, limit) {\n      let inThrottle;\n      return function() {\n        const context = this;\n        const args = arguments;\n        if (!inThrottle) {\n          func.apply(context, args);\n          inThrottle = true;\n          setTimeout(function() {\n            inThrottle = false;\n          }, limit);\n        }\n      };\n    }\n  };\n\n  \/\/ \u9801\u9762\u52a0\u8f09\u5b8c\u6210\u5f8c\u521d\u59cb\u5316\n  document.addEventListener('DOMContentLoaded', function() {\n    WPXQuiz.init();\n  });\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>\u653b\u53d7\u5df2\u7ecf\u6210\u4e3a\u5f53\u4e0b\u5e74\u8f7b\u4eba\u7684\u4e00\u79cd\u5bf9\u81ea\u6211\u5c5e\u6027\u7684\u81ea\u79f0\uff0c\u5f53\u7136\u8fd9\u79cd\u653b\u53d7\u4e0d\u4e00\u5b9a\u5c31\u662f\u5c5e\u4e8e\u540c\u6027\u604b\u8005\u7684\u3002\u5728\u6b63\u5e38\u53d6\u5411\u4e4b\u95f4\uff0c\u4eba\u4eec\u4e5f\u559c\u6b22\u7528\u653b\u53d7\u6765\u89e3\u91ca\u81ea\u8eab\u7684\u6027\u683c\u3002\u4f60\u5bf9\u4e8e\u81ea\u8eab\u7684\u5c5e\u6027\u4e86\u89e3\u5417\uff1f<\/p>","protected":false},"author":19,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"narrow-width-container","site-content-style":"unboxed","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[167],"tags":[],"class_list":["post-2510","post","type-post","status-publish","format-standard","hentry","category-personality"],"_links":{"self":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2510","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=2510"}],"version-history":[{"count":4,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2510\/revisions"}],"predecessor-version":[{"id":10379,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/posts\/2510\/revisions\/10379"}],"wp:attachment":[{"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/media?parent=2510"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/categories?post=2510"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinliceyan.org\/zh\/wp-json\/wp\/v2\/tags?post=2510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}