<template>
|
<div class="exam-container w-screen h-screen bg-slate-50 relative overflow-hidden">
|
<div class="top-bg bg-blue-500"></div>
|
<div class="exam-content">
|
<div class="exam-wrapper container mx-auto h-full flex flex-col">
|
<div class="exam-header flex items-center mt-12 mb-10">
|
<div class="title-container text-3xl font-semibold text-white mr-8">
|
测试测试测试
|
</div>
|
<AnswerTime></AnswerTime>
|
|
<div class="return-container grow flex justify-end">
|
<el-button type="danger" size="large" circle @click="closeClick">
|
<template #icon>
|
<el-icon :size="20">
|
<Close />
|
</el-icon>
|
</template>
|
</el-button>
|
</div>
|
</div>
|
|
<div class="exam-main grow flex justify-between">
|
<!-- 答题卡区 -->
|
<div class="answer-wrapper answer-left mr-8 shadow-xl p-4 box-border">
|
<div class="wrapper h-full flex flex-col items-center">
|
<div class="title-wrapper w-full flex justify-between items-center mb-5">
|
<div class="title text-xl font-semibold ">答题卡</div>
|
<AnswerTag></AnswerTag>
|
</div>
|
|
<div class="progress-wrapper w-full">
|
<AnswerProgress></AnswerProgress>
|
</div>
|
|
<div class="sheet-wrapper w-full grow relative my-5">
|
<div class="sheet-content absolute top-0 bottom-0 w-full">
|
<AnswerSheet></AnswerSheet>
|
</div>
|
</div>
|
|
<div class="submit-wrapper">
|
<el-button type="primary" class="submit-button">提交试卷</el-button>
|
</div>
|
|
</div>
|
</div>
|
|
<!-- 答题内容区 -->
|
<div class="answer-wrapper answer-right grow shadow-xl p-4">
|
<div class="wrapper h-full flex flex-col">
|
<div class="title-wrapper w-full flex mb-5">
|
<div class="title text-xl font-semibold ">单选题 (3分)</div>
|
</div>
|
|
<div class="main-wrapper w-full grow relative my-5">
|
<div class="main-content absolute top-0 bottom-0 w-full">
|
<Transition appear name="fade-transform" mode="out-in">
|
<component :is="typeComponent[currentType]" :key="currentIndex"></component>
|
</Transition>
|
</div>
|
</div>
|
|
<div class="tool-wrapper flex justify-end">
|
<div class="button-container flex items-center">
|
<div class="button-item">
|
<el-button class="tool-button" @click="prevQuestion">上一题</el-button>
|
</div>
|
<div class="button-item">
|
<el-button class="tool-button" type="primary" @click="nextQuestion">下一题</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
|
<!-- 退出考试提示弹窗 -->
|
<el-dialog v-model="dialogVisible" title="注意" width="500">
|
<div class="dialog-container">
|
<p>请确认是否退出当前考试</p>
|
<p>当前考试试卷会自动提交,后续将无法继续作答</p>
|
</div>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="confirmCancel">
|
确定
|
</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, watchEffect } from 'vue';
|
import { storeToRefs } from 'pinia';
|
import { Close } from '@element-plus/icons-vue';
|
import AnswerTag from './components/answer-tag/index.vue';
|
import AnswerProgress from './components/answer-progress/index.vue';
|
import AnswerSheet from './components/answer-sheet/index.vue';
|
import AnswerSingle from './components/answer-main/answer-single/index.vue';
|
import AnswerMultiple from './components/answer-main/answer-multiple/index.vue';
|
import AnswerTime from './components/answer-time/index.vue';
|
import { useExamStore } from '@/store/index.js';
|
import { useRouter } from 'vue-router';
|
|
const router = useRouter();
|
|
const examStore = useExamStore();
|
const { currentType, currentIndex, examDetail } = storeToRefs(examStore);
|
|
const typeComponent = {
|
1: AnswerSingle,
|
2: AnswerMultiple,
|
};
|
|
const dialogVisible = ref(false);
|
|
const prevQuestion = () => {
|
currentIndex.value--;
|
checkList();
|
};
|
|
const nextQuestion = () => {
|
currentIndex.value++;
|
checkList();
|
};
|
|
const checkList = () => {
|
let tempIndex = 0;
|
const typeQuestion = examDetail.value.find((typeItem, index) => {
|
if (typeItem.questionType === currentType.value) {
|
tempIndex = index;
|
return typeItem;
|
} else {
|
return false;
|
}
|
});
|
if (typeQuestion) {
|
if (currentIndex.value >= typeQuestion.questionList.length) {
|
tempIndex++;
|
if (examDetail.value[tempIndex]) {
|
currentType.value = examDetail.value[tempIndex].questionType;
|
currentIndex.value = 0;
|
} else {
|
currentType.value = typeQuestion.questionType;
|
currentIndex.value = typeQuestion.questionList.length - 1;
|
}
|
|
} else if (currentIndex.value < 0) {
|
tempIndex--;
|
if (examDetail.value[tempIndex]) {
|
currentType.value = examDetail.value[tempIndex].questionType;
|
currentIndex.value = examDetail.value[tempIndex].questionList.length - 1;
|
} else {
|
currentType.value = typeQuestion.questionType;
|
currentIndex.value = 0;
|
}
|
}
|
// findQuestion(currentType.value, currentIndex.value);
|
}
|
|
};
|
|
const findQuestion = (type, index) => {
|
const typeQuestion = examDetail.value.find(typeItem => typeItem.questionType === type);
|
if (typeQuestion) {
|
const question = typeQuestion.questionList[index];
|
if (question) {
|
examStore.setActiveQuestion(question);
|
}
|
}
|
};
|
|
const closeClick = () => {
|
dialogVisible.value = true;
|
};
|
|
const confirmCancel = () => {
|
dialogVisible.value = false;
|
router.back();
|
};
|
|
watchEffect(() => {
|
let progress = 0;
|
examDetail.value.forEach(item => {
|
item.questionList.forEach(question => {
|
if(question.correct) {
|
progress += 1;
|
}
|
});
|
});
|
examStore.setProgress(progress);
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
@media (min-width: 1836px) {
|
.container {
|
max-width: 1724px;
|
}
|
}
|
|
.top-bg {
|
width: 130%;
|
height: 200px;
|
position: absolute;
|
border-bottom-left-radius: 50%;
|
border-bottom-right-radius: 50%;
|
left: 50%;
|
transform: translateX(-50%);
|
}
|
|
.exam-content {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
top: 0;
|
left: 0;
|
z-index: 2;
|
}
|
|
.exam-header {
|
width: 100%;
|
}
|
|
.answer-wrapper {
|
background-color: #fff;
|
border-top-left-radius: 10px;
|
border-top-right-radius: 10px;
|
}
|
|
.answer-left {
|
width: 340px;
|
}
|
|
.submit-button,
|
.tool-button {
|
width: 160px;
|
height: 40px;
|
}
|
|
.tool-button {
|
margin: 0 20px;
|
}
|
</style>
|
