编写MBTI小程序第二版(编写大体页面代码、统计答题结果)

源代码在这里嗷 ✈

1. 存放测试数据(创建data文件夹存放数据)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
  questions.json 问题及选项
[
  {
    "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": "你如何看待时间"
  }
]

2. 编写答题页面的问题及答案选项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
const questions = question[0];   获取到题目
 const [current, setcurrent] = useState<number>(1);  标记题号，题号从 1开始计数

 // 根据上一题 下一题修改题目以及选项
 const [currentQuestion, setCurrentQuestion] = useState(question[0]);
 const questionOption = currentQuestion.options.map((option) => {
   return { label: `${option.key}.${option.value}`, value: option.key }; // return { label: option.key + "、" + option.value, value: option.key };
 });

 // 存储当前问题的用户答案
 const [currentAnswer, setCurrentAnswer] = useState<String>();

 // 存储用户所有答案
 const [answerList] = useState<String[]>([]);


 // 钩子函数，通过监视 current 参数是否发生变化， 发生变化后调用 setCurrentQuestion 函数，更新当前题目
 useEffect(() => {
   //更新题目以及选项
   setCurrentQuestion(question[current - 1]);
   // 更新用户答案存入list中
   setCurrentAnswer(answerList[current - 1]);
 }, [current]);

return (
   <View className="quPage">    定义答题页面的name 用来编写style
     {/*{JSON.stringify(answerList)}*/} 测试最终选择的数据能否存入list中
     <View className="qu-oneTitle">
       {current}、{questions.title}    题号.问题
     </View>
     <view className="options-wrapper">
       <AtRadio
         options={questionOption}    对应题号的选项展示
         onClick={(value) => {
           setCurrentAnswer(value);   点击选项后 将答案赋值给本题定义的参数
           answerList[current - 1] = value;  同时将答案存入list中，用来进行结果分析
         }}
         value={currentAnswer} 
       />
     </view>
     {current < question.length && (
       <AtButton
         className="qu-primary"
         type="primary"
         disabled={!currentAnswer}   本体不选择答案的话无法进入下一题，否则会对最终结果分析产生问题
         circle
         onClick={() => setcurrent(current + 1)}  点击按钮进入下一题
       >
         下一题
       </AtButton>
     )}
     {current == question.length && (
       <AtButton className="qu-primary" type="primary" circle>  查看结果第三版做
         查看结果
       </AtButton>
     )}
     {current > 1 && (
       <AtButton
         className="qu-primary"
         circle
         onClick={() => setcurrent(current - 1)}  点击按钮进入上一题
       >
         上一题
       </AtButton>
     )}
     <GlobalFooter />
   </View>
 );

3. 展示结果

点击查看视频