完成答题逻辑

2024-01-04 17:31:22 +08:00
parent 7905cb5fb7
commit 313af3437b
7 changed files with 452 additions and 44 deletions
--- a/src/components/Question.vue
+++ b/src/components/Question.vue
@@ -0,0 +1,127 @@
+<template>
+    <div class="QuestionPage">
+        <div class="question-bg"></div>
+        <div class="question-container">
+            <div class="question-content">
+                <div class="question">{{ currentId + 1 }}.{{ questionList[currentId].question }}</div>
+                <div class="answer-box">
+                    <div class="answer" :class="activeId == item.aid ? 'active' : ''"
+                        v-for="item in   questionList[currentId].answer  " @click="answerFn(item, $event)">{{ item.aid }}.{{
+                            item.text }}
+                    </div>
+                </div>
+                <!-- 查看结果 -->
+                <Button v-if="showResultBtn" @click="showResult">查看结果</Button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup name="Question">
+import { Button, Toast } from 'vant'
+import gsap from 'gsap'
+import data from '@/data'
+import { debounceTap, FYShuffle, mostValue } from '@/plugins'
+
+// 页面配置初始化
+const emit = defineEmits(["QuestionPage"]);
+
+// 当前题目
+const currentId = ref(0)            //当前id 0~11
+const questionList = ref(FYShuffle(data))  //随机打乱题库
+const answerList = ref([])  // 答案库统计
+const activeId = ref('')   // 当前题目所选答案选项
+const showResultBtn = ref(false)
+// 答题事件
+const answerFn = (item, event) => {
+    let e = event.target
+    activeId.value = item.aid
+    debounceTap(e, () => {
+        let cid = questionList.value[currentId.value].id
+        answerList.value.push({
+            qid: cid,
+            answer: item.secore,
+            text: item.text
+        })
+        if (currentId.value >= 11) {
+            Toast('答题结束')
+            console.log('答题结束');
+            showResultBtn.value = true
+            gsap.set('.answer-box', { pointerEvents: 'none' })
+            return
+        } else {
+            activeId.value = ''
+            currentId.value++
+        }
+
+        // console.log('答案库', answerList.value);
+
+    })
+}
+
+
+const mbtiArr = ref([[], [], [], []])  //四组数组分别存放 E&I，S&T，T&F，J&P四组结果
+const showResult = (event) => {
+    let e = event.target
+    debounceTap(e, () => {
+        console.log('答题结果：', answerList.value);
+
+        answerList.value.forEach(element => {
+            if (element.answer == "E" || element.answer == "I") mbtiArr.value[0].push(element.answer)
+            if (element.answer == "S" || element.answer == "N") mbtiArr.value[1].push(element.answer)
+            if (element.answer == "T" || element.answer == "F") mbtiArr.value[2].push(element.answer)
+            if (element.answer == "J" || element.answer == "P") mbtiArr.value[3].push(element.answer)
+        });
+
+        console.log('mbtiArr', mbtiArr.value);
+        let mbti = mostValue(mbtiArr.value[0]).value + mostValue(mbtiArr.value[1]).value + mostValue(mbtiArr.value[2]).value + mostValue(mbtiArr.value[3]).value
+        console.log('MBTI:', mbti);
+        Toast('你的MBTI测试结果:' + mbti)
+    })
+}
+
+</script>
+
+<style lang='scss' scope>
+.QuestionPage {
+    @include pos(100%, 100%, 0px, 0px);
+    background-color: rgb(68, 208, 112);
+    overflow: hidden;
+
+    .question-bg {
+        @include pos(750px, 100%, 0px, 50%);
+        transform: translateY(-50%);
+    }
+
+    .question-container {
+        @include pos(750px, 100%, 0px, 50%);
+        transform: translateY(-50%);
+        @include flexCen();
+
+        .question-content {
+            width: 80%;
+        }
+
+        .answer-box {
+            display: flex;
+            flex-direction: column;
+            margin-top: 30px;
+            // width: 80%;
+
+            .answer {
+                padding: 10px;
+                border-radius: 50px;
+                background-color: #fff;
+                color: rgb(68, 208, 112);
+                margin-bottom: 20px;
+                width: 100%;
+            }
+
+            .active {
+                background-color: #ff2020;
+                color: rgb(255, 255, 255);
+            }
+        }
+    }
+}
+</style>