完成答题逻辑

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>

src/data/data.js

@@ -1,31 +0,0 @@
-export default {
-
-    //manifest 加载到纹理缓存使用的资源 
-    manifest: [
-        {
-            name: "test0",
-            url: new URL(`@/assets/images/m_0.png`, import.meta.url).href,
-            position: { x: 110, y: 210, w: 80, h: 80 },
-            zIndex: 4,
-        },
-        {
-            name: "test1",
-            url: new URL(`@/assets/images/m_1.png`, import.meta.url).href,
-            position: { x: 110, y: 200, w: 100, h: 100 },
-            zIndex: 3,
-        },
-        {
-            name: "test2",
-            url: new URL(`@/assets/images/m_2.png`, import.meta.url).href,
-            position: { x: 110, y: 300, w: 100, h: 100 },
-            zIndex: 2,
-        },
-        {
-            name: "test3",
-            url: new URL(`@/assets/images/share.jpg`, import.meta.url).href,
-            position: { x: 110, y: 400, w: 300, h: 300 },
-            zIndex: 1,
-        }
-    ]
-
-}

src/data/index.js

@@ -0,0 +1,207 @@
+export default [
+    {
+        id: 1,
+        type: 'mbti',
+        question: '当朋友约你外出，你会？',
+        answer: [
+            {
+                aid: 'A',
+                text: '询问计划具体时间段做什么',
+                secore: 'J',
+            },
+            {
+                aid: 'B',
+                text: '说走就走',
+                secore: 'P',
+            },
+        ],
+    },
+    {
+        id: 2,
+        type: 'mbti',
+        question: '你更喜欢什么样的社交生活？',
+        answer: [
+            {
+                aid: 'A',
+                text: '独处回血爽歪歪',
+                secore: 'I',
+            },
+            {
+                aid: 'B',
+                text: '呼朋唤友快乐多',
+                secore: 'E',
+            },
+        ],
+    },
+    {
+        id: 3,
+        type: 'mbti',
+        question: '当你想要做一个计划时，你会？',
+        answer: [
+            {
+                aid: 'A',
+                text: '收集尽量多的信息',
+                secore: 'S',
+            },
+            {
+                aid: 'B',
+                text: '偏向依靠经验',
+                secore: 'N',
+            },
+        ],
+    },
+    {
+        id: 4,
+        type: 'mbti',
+        question: '得知朋友因心情不好买了很多饼干，你第一想到的是？',
+        answer: [
+            {
+                aid: 'A',
+                text: '买了多少？一个人能吃完吗',
+                secore: 'T',
+            },
+            {
+                aid: 'B',
+                text: '为什么心情不好呢',
+                secore: 'F',
+            },
+        ],
+    },
+    {
+        id: 5,
+        type: 'lc',
+        question: '当你考虑投资一个新的金融产品时，你更倾向于？',
+        answer: [
+            {
+                aid: 'A',
+                text: '与朋友、同事或专业顾问讨论，通过外部交流获得信息和建议',
+                secore: 'E',
+            },
+            {
+                aid: 'B',
+                text: '独立研究，通过阅读、在线课程和个人分析来形成决策',
+                secore: 'I',
+            },
+        ],
+    },
+    {
+        id: 6,
+        type: 'lc',
+        type: 'lc',
+        question: '当评估一项投资机会时，你更倾向于？',
+        answer: [
+            {
+                aid: 'A',
+                text: '依赖详细的市场报告、历史数据和具体分析',
+                secore: 'S',
+            },
+            {
+                aid: 'B',
+                text: '依赖整体市场趋势、未来预测和直觉感受 ',
+                secore: 'N',
+            },
+        ],
+    },
+    {
+        id: 7,
+        type: 'lc',
+        question: '在选择一个投资合伙人时，你更看重？',
+        answer: [
+            {
+                aid: 'A',
+                text: '他们的专业能力、以往的业绩和逻辑决策过程',
+                secore: 'T',
+            },
+            {
+                aid: 'B',
+                text: '他们的个人价值观、信任度和与你的情感共鸣',
+                secore: 'F',
+            },
+        ],
+    },
+    {
+        id: 8,
+        type: 'lc',
+        question: '当面对投资市场的不确定性和变化时，你更倾向于？',
+        answer: [
+            {
+                aid: 'A',
+                text: '坚持你的投资计划和策略，不轻易改变已经制定的计划',
+                secore: 'J',
+            },
+            {
+                aid: 'B',
+                text: 'B.保持灵活性，根据市场的最新变化调整你的投资策略',
+                secore: 'P',
+            },
+        ],
+    },
+    {
+        id: 9,
+        type: 'lc',
+        question: '在做某项决定时，你认为比较重要的是？',
+        answer: [
+            {
+                aid: 'A',
+                text: '根据实际情况衡量考虑',
+                secore: 'J',
+            },
+            {
+                aid: 'B',
+                text: '考虑他人的感受和意见',
+                secore: 'P',
+            },
+        ],
+    },
+    {
+        id: 10,
+        type: 'mbti',
+        question: '你认为别人一般会？',
+        answer: [
+            {
+                aid: 'A',
+                text: '花很长时间才认识你',
+                secore: 'I',
+            },
+            {
+                aid: 'B',
+                text: '很短的时间便了解你',
+                secore: 'E',
+            },
+        ],
+    },
+    {
+        id: 11,
+        type: 'mbti',
+        question: '哪些人会更吸引你？',
+        answer: [
+            {
+                aid: 'A',
+                text: '一个思想敏捷及非常聪颖的人',
+                secore: 'N',
+            },
+            {
+                aid: 'B',
+                text: '实事求是，具有丰富常识的人',
+                secore: 'S',
+            },
+        ],
+    },
+    {
+        id: 12,
+        type: 'mbti',
+        question: '你是否经常让',
+        answer: [
+            {
+                aid: 'A',
+                text: '你的情感支配你的理智',
+                secore: 'F',
+            },
+            {
+                aid: 'B',
+                text: '你的理智主宰你的情感',
+                secore: 'T',
+            },
+        ],
+    },
+]

src/page/Home/App.vue

@@ -1,15 +1,17 @@
 <template>
   <div class="home">
-    <Loading v-if="showLoad" @LoadPage="loadFn"></Loading>
     <Index v-if="showIndex" @IndexPage="indexFn"></Index>
+    <Question v-if="showQuestion" @QuestionPage="questionFn"></Question>
+    <Loading v-if="showLoad" @LoadPage="loadFn"></Loading>
   </div>
 </template>
 
 <script setup>
-import Loading from "@/components/Loading.vue";
+import Loading from "@/components/Loading";
-import Index from "@/components/Index.vue";
+import Index from "@/components/Index";
+import Question from "@/components/Question";
 
-const showLoad = ref(true);
+const showLoad = ref(false);
 const loadFn = (item) => {
   if (item.action == "hide") {
     showLoad.value = false;
@@ -24,6 +26,14 @@ const indexFn = (item) => {
   }
 };
 
+const showQuestion = ref(true);
+const questionFn = (item) => {
+  if (item.action == "hide") {
+    showQuestion.value = false;
+  }
+};
+
+
 onMounted(() => { });
 </script>
 

src/plugins/index.js

@@ -327,16 +327,48 @@ export function getAstro(month, day) {
     return s.substr(month * 2 - (day < arr[month - 1] ? 2 : 0), 2);
 }
 
-// 引入BGM
+// 洗牌算法
-export function createBGM() {
+export function FYShuffle(arr) {
-    var bgmElement = document.createElement('div');
+    let len = arr.length;
 
-    // document.querySelector('app').appendChild(bgmElement)
+    while (len > 1) {
+        let rand = Math.floor(Math.random() * len);
+        len--;
+        [arr[len], arr[rand]] = [arr[rand], arr[len]] // 采用的数组的结构赋值
+    }
 
-    // <div class="music_icon" @click="musicPlay">
+    return arr;
-    //         <audio style="display: none; height: 0" id="bg-music" autoplay="autoplay" preload="auto" :src="audioUrl"
+}
-    //           loop="loop"></audio>
+
-    //       </div>
+
+// 选出数组中出现次数最多的值
+export function mostValue(arr) {
+    // 创建一个空对象用于存储值及其出现的次数  
+    let counter = {};
+
+    // 遍历数组中的每个元素  
+    for (let i = 0; i < arr.length; i++) {
+        // 如果值已经在counter对象中，增加其计数  
+        // 如果值不在counter对象中，设置计数为1  
+        if (counter[arr[i]]) {
+            counter[arr[i]]++;
+        } else {
+            counter[arr[i]] = 1;
+        }
+    }
+
+    // 找出出现次数最多的值及其出现的次数  
+    let mostFrequentValue = null;
+    let maxCount = 0;
+    for (let key in counter) {
+        if (counter[key] > maxCount) {
+            mostFrequentValue = key;
+            maxCount = counter[key];
+        }
+    }
+
+    // 返回出现次数最多的值和其出现的次数  
+    return { value: mostFrequentValue, count: maxCount };
 }