From 706fc58eea8b31ecd2e5003615a4874bf0200d76 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期三, 19 六月 2024 10:58:50 +0800
Subject: [PATCH] feat:答题进度
---
src/store/modules/exam.js | 107 +++++++++++++++++++++++++++++++----
src/views/exam/components/answer-sheet/index.vue | 2
src/views/exam/index.vue | 22 +++++-
src/views/exam/components/answer-progress/index.vue | 22 +++++-
4 files changed, 130 insertions(+), 23 deletions(-)
diff --git a/src/store/modules/exam.js b/src/store/modules/exam.js
index 712d267..edafdef 100644
--- a/src/store/modules/exam.js
+++ b/src/store/modules/exam.js
@@ -8,6 +8,7 @@
examStatus: '鑰冭瘯鐘舵��',
examStartTime: '2021-01-01',
examEndTime: '2021-01-01',
+ examTime: 60,
});
const examType = ref({
@@ -17,6 +18,8 @@
const currentType = ref(1);
const currentIndex = ref(0);
+
+ const answerProgress = ref(0);
const examDetail = ref([
{
@@ -48,7 +51,7 @@
],
"analyze": "闂皬鏈嬪弸",
"correct": "",
- "score": "",
+ "score": "3",
"difficult": 5
},
{
@@ -77,7 +80,7 @@
],
"analyze": "闂皬鏈嬪弸",
"correct": "",
- "score": "",
+ "score": "3",
"difficult": 5
}
]
@@ -111,7 +114,7 @@
],
"analyze": "闂皬鏈嬪弸",
"correct": "",
- "score": "",
+ "score": "5",
"difficult": 5
},
{
@@ -140,22 +143,93 @@
],
"analyze": "闂皬鏈嬪弸",
"correct": "",
- "score": "",
+ "score": "5",
+ "difficult": 5
+ },
+ {
+ "id": null,
+ "questionType": 1,
+ "gradeLevel": null,
+ "subjectId": 2,
+ "title": "1+1=锛�",
+ "items": [
+ {
+ "prefix": "A",
+ "content": "1"
+ },
+ {
+ "prefix": "B",
+ "content": "2"
+ },
+ {
+ "prefix": "C",
+ "content": "3"
+ },
+ {
+ "prefix": "D",
+ "content": "4"
+ }
+ ],
+ "analyze": "闂皬鏈嬪弸",
+ "correct": "",
+ "score": "5",
+ "difficult": 5
+ },
+ {
+ "id": null,
+ "questionType": 1,
+ "gradeLevel": null,
+ "subjectId": 2,
+ "title": "1+1=锛�",
+ "items": [
+ {
+ "prefix": "A",
+ "content": "1"
+ },
+ {
+ "prefix": "B",
+ "content": "2"
+ },
+ {
+ "prefix": "C",
+ "content": "3"
+ },
+ {
+ "prefix": "D",
+ "content": "4"
+ }
+ ],
+ "analyze": "闂皬鏈嬪弸",
+ "correct": "",
+ "score": "5",
"difficult": 5
}
]
}
]);
- const activeQuestion = ref(null);
-
-
const getActiveQuestion = computed(() => {
const temp = examDetail.value.find(item => item.questionType === currentType.value);
- if(temp) {
+ if (temp) {
return temp.questionList[currentIndex.value];
}
- })
+ });
+
+ const getAnswerInfo = computed(() => {
+ let total = 0;
+ let grade = 0;
+ examDetail.value.forEach(item => {
+ total += item.questionList.length;
+ item.questionList.forEach(question => {
+ grade += Number(question.score);
+ });
+ });
+ return {
+ total,
+ grade,
+ };
+ });
+
const setExamInfo = (info) => {
examInfo.value = info;
@@ -167,22 +241,31 @@
const setQuestionAnswer = (type, index, answer) => {
const temp = examDetail.value.find(item => item.questionType === type);
- if(temp) {
+ if (temp) {
temp.questionList[index].correct = answer;
}
};
+
+ const setProgress = (progress) => {
+ answerProgress.value = progress;
+ }
return {
examInfo,
examDetail,
examType,
- activeQuestion,
+
currentType,
currentIndex,
+ answerProgress,
+
getActiveQuestion,
+ getAnswerInfo,
+
setExamInfo,
setExamDetail,
- setQuestionAnswer
+ setQuestionAnswer,
+ setProgress
};
});
diff --git a/src/views/exam/components/answer-progress/index.vue b/src/views/exam/components/answer-progress/index.vue
index 73b94b7..41ca1cb 100644
--- a/src/views/exam/components/answer-progress/index.vue
+++ b/src/views/exam/components/answer-progress/index.vue
@@ -2,23 +2,35 @@
<div class="progress-container w-full px-3 py-4 bg-slate-50">
<div class="title-container flex justify-between items-center mb-3">
<div class="title text-gray-600 text-base">绛旈杩涘害</div>
- <div class="title-num text-sm text-gray-500">10/30</div>
+ <div class="title-num text-sm text-gray-500">{{ answerProgress }} / {{ total }}</div>
</div>
<div class="progress-content mb-3">
- <el-progress :percentage="progress" :stroke-width="10" :show-text="false" />
+ <el-progress :percentage="percent" :stroke-width="10" :show-text="false" />
</div>
<div class="exam-info text-sm text-gray-600">
- 鍏�30棰橈紝婊″垎100鍒�
+ 鍏眥{ total }}棰橈紝婊″垎{{grade}}鍒�
</div>
</div>
</template>
<script setup>
-import {ref} from 'vue';
-const progress = ref(10);
+import { ref, computed } from 'vue';
+import {storeToRefs} from 'pinia';
+import { useExamStore } from '@/store/index.js';
+const examStore = useExamStore();
+
+const {answerProgress} = storeToRefs(examStore);
+
+
+const total = ref(examStore.getAnswerInfo.total);
+const grade = ref(examStore.getAnswerInfo.grade);
+
+const percent = computed(() => {
+ return Number((answerProgress.value / total.value * 100).toFixed(0));
+});
</script>
diff --git a/src/views/exam/components/answer-sheet/index.vue b/src/views/exam/components/answer-sheet/index.vue
index ad89f1e..fef8708 100644
--- a/src/views/exam/components/answer-sheet/index.vue
+++ b/src/views/exam/components/answer-sheet/index.vue
@@ -17,7 +17,7 @@
</template>
<script setup>
-import { ref,watchEffect } from 'vue';
+import { ref } from 'vue';
import {storeToRefs} from 'pinia';
import {useExamStore} from '@/store/index.js';
const examStore = useExamStore();
diff --git a/src/views/exam/index.vue b/src/views/exam/index.vue
index 62b56d5..d921218 100644
--- a/src/views/exam/index.vue
+++ b/src/views/exam/index.vue
@@ -78,7 +78,7 @@
</div>
- <!-- 鎻愮ず寮圭獥 -->
+ <!-- 閫�鍑鸿�冭瘯鎻愮ず寮圭獥 -->
<el-dialog v-model="dialogVisible" title="娉ㄦ剰" width="500">
<div class="dialog-container">
<p>璇风‘璁ゆ槸鍚﹂��鍑哄綋鍓嶈�冭瘯</p>
@@ -97,7 +97,7 @@
</template>
<script setup>
-import { ref } from 'vue';
+import { ref, watchEffect } from 'vue';
import { storeToRefs } from 'pinia';
import { Close } from '@element-plus/icons-vue';
import AnswerTag from './components/answer-tag/index.vue';
@@ -144,17 +144,17 @@
if (typeQuestion) {
if (currentIndex.value >= typeQuestion.questionList.length) {
tempIndex++;
- if(examDetail.value[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]) {
+ if (examDetail.value[tempIndex]) {
currentType.value = examDetail.value[tempIndex].questionType;
currentIndex.value = examDetail.value[tempIndex].questionList.length - 1;
} else {
@@ -185,6 +185,18 @@
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>
--
Gitblit v1.8.0