答题页
This commit is contained in:
parent
153fff0242
commit
39ec48fc27
@ -1,6 +1,7 @@
|
||||
export default defineAppConfig({
|
||||
pages: [
|
||||
'pages/index/index'
|
||||
'pages/index/index',
|
||||
'pages/doQuestion/index',
|
||||
],
|
||||
window: {
|
||||
backgroundTextStyle: 'light',
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@import "~taro-ui/dist/style/index.scss";
|
||||
|
||||
.at-button--primary {
|
||||
background: #88619a !important;
|
||||
border-color: #88619a !important;
|
||||
|
||||
152
mbti-test-mini/src/data/questions.json
Normal file
152
mbti-test-mini/src/data/questions.json
Normal file
@ -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": "你如何看待时间"
|
||||
}
|
||||
]
|
||||
3
mbti-test-mini/src/pages/doQuestion/index.config.ts
Normal file
3
mbti-test-mini/src/pages/doQuestion/index.config.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
// navigationBarTitleText: ''
|
||||
})
|
||||
39
mbti-test-mini/src/pages/doQuestion/index.scss
Normal file
39
mbti-test-mini/src/pages/doQuestion/index.scss
Normal file
@ -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;
|
||||
}
|
||||
100
mbti-test-mini/src/pages/doQuestion/index.tsx
Normal file
100
mbti-test-mini/src/pages/doQuestion/index.tsx
Normal file
@ -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>
|
||||
);
|
||||
};
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user