完成答题逻辑
This commit is contained in:
Andy Leong
parent
7905cb5fb7
commit
313af3437b
@ -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%);
|
||||
|
||||
127
src/components/Question.vue
Normal file
127
src/components/Question.vue
Normal file
@ -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>
|
||||
64
src/components/test.vue
Normal file
64
src/components/test.vue
Normal file
@ -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>
|
||||
@ -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,
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
207
src/data/index.js
Normal file
207
src/data/index.js
Normal file
@ -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',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
@ -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 Index from "@/components/Index.vue";
|
||||
import Loading from "@/components/Loading";
|
||||
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>
|
||||
|
||||
|
||||
@ -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() {
|
||||
var bgmElement = document.createElement('div');
|
||||
// 洗牌算法
|
||||
export function FYShuffle(arr) {
|
||||
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">
|
||||
// <audio style="display: none; height: 0" id="bg-music" autoplay="autoplay" preload="auto" :src="audioUrl"
|
||||
// loop="loop"></audio>
|
||||
// </div>
|
||||
return arr;
|
||||
}
|
||||
|
||||
|
||||
// 选出数组中出现次数最多的值
|
||||
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 };
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user