vue实现 一个单页面的做题程序

<template>
  <div>
    <h1 class="h1">欢迎来到做题页面 回答正确加3分 错误不加分</h1>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <h2>
            题目 {{ currentQuestionIndex + 1 }} ：{{ currentQuestion.text }}
          </h2>
          <el-button @click="btnQuiz">结束测试</el-button>
        </div>
        <!-- 进度条 -->
        <el-progress
          :percentage="percentage"
          :stroke-width="20"
          :text-inside="true"
        ></el-progress>
      </template>
      <div v-for="(option, index) in currentQuestion.options" :key="index">
        <input
          type="radio"
          :id="'option' + index"
          :value="option"
          v-model="userAnswer"
          class="input1"
        />
        <label :for="'option' + index">{{ option }}</label>
      </div>
      <div class="submit">
        <el-button @click="submitAnswer">提交答案</el-button>
        <el-button @click="goToPreQuestion">上一题</el-button>
        <el-button @click="goToNextQuestion">下一题</el-button>
      </div>
    </el-card>
    <div v-if="isAnswerSubmitted" class="result">
      <p v-if="isAnswerCorrect">回答正确!</p>
      <p v-else>回答错误，正确答案是： {{ currentQuestion.answer }}</p>
    </div>
    <el-descriptions title="" v-if="quizComplete">
      <el-descriptions-item v-for="(question, index) in questions" :key="index">
        <!-- 显示所有的题目包括回答错误的题目 -->
        <p>{{ question.text }}</p>
        <p v-if="question.answer === userAnswer">{{ question.answer }}</p>
        <p v-else>正确答案是： {{ question.answer }}</p>
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="">
      <h2>恭喜你完成测试</h2>
      <el-descriptions-item v-if="quizComplete">
        <p>你回答了：{{ totalQuestions }}题</p>
        <p>答对了：{{ correctAnswers }}题</p>
        <p>你的分数为：{{ resultscore }}分</p>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
// 题目接口
import { QuestionApi } from "../request/api";
export default {
  data() {
    return {
      currentQuestionIndex: 0,
      userAnswer: null,
      isAnswerSubmitted: false,
      isAnswerCorrect: false,
      correctAnswers: 0,
      totalQuestions: 0,
      resultscore: "",
      resultnum: "",

      quizComplete: false,
      questions: [
        {
          text: "中国的首都在哪?",
          options: ["北京", "上海", "武汉"],
          answer: "北京",
        },
        {
          text: "90°是什么角度?",
          options: ["锐角", "直角", "钝角"],
          answer: "直角",
        },
        {
          text: "地球上最大的动物是什么",
          options: ["蓝鲸", "大象", "长颈鹿"],
          answer: "北京",
        },
        {
          text: "int占用多少个字节",
          options: ["4", "8", "16"],
          answer: "4",
        },

       
      ],
    };
  },
  // 监听题目的变化改变进度条的值，当题目变化时，进度条的值也会变化,当提交最后一题时，进度条的值会变成100%
  watch: {
    currentQuestionIndex() {
      this.percentage = Math.round(
        (this.currentQuestionIndex / this.questions.length) * 100
      );
    },
  },
  // created() {
  //   // 获取题目接口
  //   QuestionApi().then((res) => {
  //     console.log(res);
  //     this.questions = res;
  //   });
  // },

  computed: {
    currentQuestion() {
      // 计算回答正确的总数乘以三并返回到 resultscore
      this.resultscore = this.correctAnswers * 3;
      return this.questions[this.currentQuestionIndex];
    },
  },
  methods: {
    format(percentage) {
      return percentage === 100 ? "满" : `${percentage}%`;
    },
    submitAnswer() {
      if (this.userAnswer === null) {
        alert("请选择答案！");
      } else {
        this.isAnswerSubmitted = true;
        if (this.userAnswer === this.currentQuestion.answer) {
          this.isAnswerCorrect = true;
          this.correctAnswers++;
        }
        this.totalQuestions++;
      }
      // 点击提交自动跳转到下一题
      this.goToNextQuestion();
    },
    goToNextQuestion() {
      // 判断是否是最后一题，如果不是则跳转到下一题，如果是进度条变为100% 并则提示测试完成，提示查看结果
      if (this.currentQuestionIndex < this.questions.length - 1) {
        this.currentQuestionIndex++;
        this.isAnswerSubmitted = false;
        this.isAnswerCorrect = false;
        this.userAnswer = null;
      } else {
        this.percentage = 100;
        alert("测试完成，点击查看结果");
      }
    },
    goToPreQuestion() {
      if (this.currentQuestionIndex > 0) {
        this.currentQuestionIndex--;
        this.isAnswerSubmitted = false;
        this.isAnswerCorrect = false;
        this.userAnswer = null;
      }
    },
    btnQuiz() {
      this.quizComplete = true;
    },
  },
};
</script>

<style>
.h1 {
  margin: 10px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 1200px;
}
.result {
  margin: 20px;
}
.submit {
  padding-top: 20px;
}
.input1 {
  margin: 10px;
}
</style>