feat:答题进度

ZhangXianQiang

2024-06-19 706fc58eea8b31ecd2e5003615a4874bf0200d76

feat:答题进度

 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) {
      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;
@@ -172,17 +246,26 @@
    }
  };

  const setProgress = (progress) => {
    answerProgress.value = progress;
  }


  return {
    examInfo,
    examDetail,
    examType,
    activeQuestion,

    currentType,
    currentIndex,
    answerProgress,

    getActiveQuestion,
    getAnswerInfo,

    setExamInfo,
    setExamDetail,
    setQuestionAnswer
    setQuestionAnswer,
    setProgress
  };
});

 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>


 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();

 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';
@@ -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>