完成答题逻辑

src/components/Loading.vue

@@ -32,7 +32,6 @@ const show = (event) => {
   @include pos(100%, 100%, 0px, 0px);
   background-color: rgb(223, 15, 60);
   overflow: hidden;
-  max-width: 100%;
 
   .load-bg {
     @include pos(750px, 100%, 0px, 50%);

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>

src/components/test.vue

@@ -0,0 +1,64 @@
+<template>
+    <div>
+        <h2>随机题目与答案统计</h2>
+        <div v-for="question in shuffledQuestions" :key="question.id">
+            <h3>{{ question.question }}</h3>
+            <ul>
+                <li v-for="answer in question.answers" :key="answer">
+                    {{ answer }} <button @click="recordAnswer(question.id, answer)">提交</button>
+                </li>
+            </ul>
+        </div>
+        <h3>统计结果</h3>
+        <div v-for="stat in stats" :key="stat.id">
+            <h4>{{ stat.question }} 答案统计</h4>
+            <ul>
+                <li v-for="(count, answer) in stat.answers" :key="answer">
+                    {{ answer }}: {{ count }} 次
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>  
+    
+<script>
+import { ref, computed } from 'vue';
+// import data from '../data'; // 引入题目和答案数据  
+let data = [
+
+
+]
+export default {
+    setup() {
+        const questions = ref([
+            { id: 1, question: "问题1", answers: ["答案A", "答案B", "答案C"] },
+            { id: 2, question: "问题2", answers: ["答案A", "答案B", "答案C"] },
+            { id: 3, question: "问题3", answers: ["答案A", "答案B", "答案C"] },
+            { id: 4, question: "问题4", answers: ["答案A", "答案B", "答案C"] },
+            { id: 5, question: "问题5", answers: ["答案A", "答案B", "答案C"] },
+            { id: 6, question: "问题6", answers: ["答案A", "答案B", "答案C"] },
+            { id: 7, question: "问题7", answers: ["答案A", "答案B", "答案C"] },
+            { id: 8, question: "问题8", answers: ["答案A", "答案B", "答案C"] },
+            { id: 9, question: "问题9", answers: ["答案A", "答案B", "答案C"] },
+            { id: 10, question: "问题10", answers: ["答案A", "答案B", "答案C"] },
+            { id: 11, question: "问题11", answers: ["答案A", "答案B", "答案C"] },
+            { id: 12, question: "问题12", answers: ["答案A", "答案B", "答案C"] },
+        ]); // 引用题目和答案数据  
+        const stats = ref([]); // 初始化统计结果数组为空数组  
+        const currentQuestion = ref(0); // 当前显示的题目索引，初始化为0  
+        const shuffledQuestions = computed(() => { // 计算属性，用于获取随机打乱的题目顺序  
+            const allQuestions = [...questions]; // 复制题目数组，防止修改原始数据  
+            allQuestions.sort(() => Math.random() - 0.5); // 随机打乱顺序  
+            return allQuestions;
+        });
+        const recordAnswer = (id, answer) => { // 方法，用于记录用户选择的答案并更新统计结果  
+            const question = shuffledQuestions.value.find(q => q.id === id); // 找到当前题目对象  
+            if (!stats.value[id]) { // 如果当前题目的统计结果为空，则初始化统计结果对象  
+                stats.value[id] = { question, answers: {} };
+            }
+            stats.value[id].answers[answer] = (stats.value[id].answers[answer] || 0) + 1; // 更新答案统计次数  
+        };
+        return { shuffledQuestions, stats, currentQuestion, recordAnswer }; // 将计算属性和方法暴露给模板使用  
+    }
+};
+</script>