答题页

mbti-test-mini/src/app.config.ts

@@ -1,6 +1,7 @@
 export default defineAppConfig({
   pages: [
-    'pages/index/index'
+    'pages/index/index',
+    'pages/doQuestion/index',
   ],
   window: {
     backgroundTextStyle: 'light',

mbti-test-mini/src/app.scss

@@ -1,3 +1,5 @@
+@import "~taro-ui/dist/style/index.scss";
+
 .at-button--primary {
   background: #88619a !important;
   border-color: #88619a !important;

mbti-test-mini/src/data/questions.json

@@ -0,0 +1,152 @@
+[
+  {
+    "options": [
+      {
+        "result": "I",
+        "value": "独自工作",
+        "key": "A"
+      },
+      {
+        "result": "E",
+        "value": "与他人合作",
+        "key": "B"
+      }
+    ],
+    "title": "你通常更喜欢"
+  },
+  {
+    "options": [
+      {
+        "result": "J",
+        "value": "喜欢有明确的计划",
+        "key": "A"
+      },
+      {
+        "result": "P",
+        "value": "更愿意随机应变",
+        "key": "B"
+      }
+    ],
+    "title": "当安排活动时"
+  },
+  {
+    "options": [
+      {
+        "result": "T",
+        "value": "认为应该严格遵守",
+        "key": "A"
+      },
+      {
+        "result": "F",
+        "value": "认为应灵活运用",
+        "key": "B"
+      }
+    ],
+    "title": "你如何看待规则"
+  },
+  {
+    "options": [
+      {
+        "result": "E",
+        "value": "经常是说话的人",
+        "key": "A"
+      },
+      {
+        "result": "I",
+        "value": "更倾向于倾听",
+        "key": "B"
+      }
+    ],
+    "title": "在社交场合中"
+  },
+  {
+    "options": [
+      {
+        "result": "J",
+        "value": "先研究再行动",
+        "key": "A"
+      },
+      {
+        "result": "P",
+        "value": "边做边学习",
+        "key": "B"
+      }
+    ],
+    "title": "面对新的挑战"
+  },
+  {
+    "options": [
+      {
+        "result": "S",
+        "value": "注重细节和事实",
+        "key": "A"
+      },
+      {
+        "result": "N",
+        "value": "注重概念和想象",
+        "key": "B"
+      }
+    ],
+    "title": "在日常生活中"
+  },
+  {
+    "options": [
+      {
+        "result": "T",
+        "value": "更多基于逻辑分析",
+        "key": "A"
+      },
+      {
+        "result": "F",
+        "value": "更多基于个人情感",
+        "key": "B"
+      }
+    ],
+    "title": "做决定时"
+  },
+  {
+    "options": [
+      {
+        "result": "S",
+        "value": "喜欢有结构和常规",
+        "key": "A"
+      },
+      {
+        "result": "N",
+        "value": "喜欢自由和灵活性",
+        "key": "B"
+      }
+    ],
+    "title": "对于日常安排"
+  },
+  {
+    "options": [
+      {
+        "result": "P",
+        "value": "首先考虑可能性",
+        "key": "A"
+      },
+      {
+        "result": "J",
+        "value": "首先考虑后果",
+        "key": "B"
+      }
+    ],
+    "title": "当遇到问题时"
+  },
+  {
+    "options": [
+      {
+        "result": "T",
+        "value": "时间是一种宝贵的资源",
+        "key": "A"
+      },
+      {
+        "result": "F",
+        "value": "时间是相对灵活的概念",
+        "key": "B"
+      }
+    ],
+    "title": "你如何看待时间"
+  }
+]

mbti-test-mini/src/pages/doQuestion/index.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  // navigationBarTitleText: ''
+})

mbti-test-mini/src/pages/doQuestion/index.scss

@@ -0,0 +1,39 @@
+.doQuestionPage {
+  background-image: url('../../assets/headerBg.jpg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  min-height: 100vh; // 保证全屏
+  padding: 20px;
+
+  .title {
+    margin-bottom: 48px;
+  }
+
+  .options-wrapper {
+    margin-bottom: 48px;
+  }
+
+  .option {
+    margin-bottom: 16px;
+  }
+
+  .controlBtn {
+    margin: 24px 48px;
+    min-width: 180px;
+    display: block;
+    margin: 20px auto;
+    text-align: center;
+    color: #fff;
+    border-radius: 999px;
+    background: #88619a;
+    border: none;
+  }
+}
+
+.doQuestionPage .at-radio__option,
+.doQuestionPage .at-radio__option .at-radio__option-container,
+.doQuestionPage .at-radio__option::after {
+  background: transparent !important;
+  box-shadow: none !important;
+}

mbti-test-mini/src/pages/doQuestion/index.tsx

@@ -0,0 +1,100 @@
+import {View} from "@tarojs/components";
+import Taro from "@tarojs/taro";
+import {AtButton, AtRadio} from "taro-ui";
+import {useEffect, useState, useMemo} from "react";
+import GlobalFooter from "../../components/GlobalFooter";
+import questions from "../../data/questions.json";
+import "./index.scss";
+
+/**
+ * 答题页面
+ */
+export default () => {
+  // 当前题目序号（从 1 开始）
+  const [current, setCurrent] = useState<number>(1);
+  // 当前题目
+  const [currentQuestion, setCurrentQuestion] = useState(questions[0]);
+  // 当前回答
+  const [currentAnswer, setCurrentAnswer] = useState<string>();
+  // 回答列表
+  const [answerList] = useState<string[]>([]);
+
+  // radio 选项，去除勾选标识
+  const radioOptions = useMemo(() => {
+    return currentQuestion.options.map((option) => {
+      return {
+        label: `${option.key}. ${option.value}`,
+        value: option.key,
+      };
+    });
+  }, [currentQuestion]);
+
+  // 序号变化时，切换当前题目和当前回答
+  useEffect(() => {
+    setCurrentQuestion(questions[current - 1]);
+    setCurrentAnswer(answerList[current - 1]);
+  }, [current]);
+
+  return (
+    <View className="doQuestionPage">
+      <View className="at-article__h2 title">
+        {current}、{currentQuestion.title}
+      </View>
+      <View className="options-wrapper">
+        <AtRadio
+          options={radioOptions}
+          value={currentAnswer}
+          onClick={(value) => {
+            setCurrentAnswer(value);
+            // 记录回答
+            answerList[current - 1] = value;
+          }}
+        />
+      </View>
+      {current < questions.length && (
+        <AtButton
+          type="primary"
+          size="normal"
+          className="controlBtn"
+          circle
+          disabled={!currentAnswer}
+          onClick={() => {
+            setCurrent(current + 1);
+          }}
+        >
+          下一题
+        </AtButton>
+      )}
+      {current >= questions.length && (
+        <AtButton
+          type="primary"
+          size="normal"
+          className="controlBtn"
+          circle
+          disabled={!currentAnswer}
+          onClick={() => {
+            Taro.navigateTo({
+              url: "/pages/result/index",
+            });
+          }}
+        >
+          查看结果
+        </AtButton>
+      )}
+      {current > 1 && (
+        <AtButton
+          type="primary"
+          size="normal"
+          className="controlBtn"
+          circle
+          onClick={() => {
+            setCurrent(current - 1);
+          }}
+        >
+          上一题
+        </AtButton>
+      )}
+      <GlobalFooter />
+    </View>
+  );
+};

mbti-test-mini/src/pages/index/index.scss

@@ -4,7 +4,6 @@
   background-position: center;
   background-repeat: no-repeat;
   min-height: 100vh; // 保证全屏
-  padding: 20px;
 
   .title {
     // color: #fff;
@@ -26,6 +25,5 @@
     text-align: center;
     color: #fff;
     border-radius: 999px;
-    padding: 20px 0;
   }
 }