写一个uniapp考试模板界面，其中包括单选题，多选题，判断题，当选中选项时高亮显示，并可以切换选项状态，点击下一题按钮切换到下一题,而且题目从后端请求

下面是一个简单的uniapp考试模板界面示例，包含单选题、多选题和判断题。题目从后端请求，选项状态可切换，点击下一题按钮可切换到下一题。

<template>
  <view class="container">
    <view class="question">
      <view class="title">{{ currentQuestion.title }}</view>
      <view
        class="option"
        v-for="(option, index) in currentQuestion.options"
        :key="index"
        :class="{ selected: selectedOptions.includes(index) }"
        @click="toggleOption(index)"
      >
        {{ option }}
      </view>
    </view>
    <view class="button-container">
      <button class="button" @click="prevQuestion">上一题</button>
      <button class="button" @click="nextQuestion">下一题</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      questions: [], // 从后端请求得到的题目
      currentQuestionIndex: 0, // 当前题目的索引
      selectedOptions: [], // 当前题目中选中的选项的索引
    };
  },
  computed: {
    currentQuestion() {
      return this.questions[this.currentQuestionIndex];
    },
  },
  methods: {
    // 切换选项状态
    toggleOption(index) {
      const pos = this.selectedOptions.indexOf(index);
      if (pos === -1) {
        this.selectedOptions.push(index);
      } else {
        this.selectedOptions.splice(pos, 1);
      }
    },
    // 切换到下一题
    nextQuestion() {
      if (this.currentQuestionIndex < this.questions.length - 1) {
        this.currentQuestionIndex++;
        this.selectedOptions = [];
      }
    },
    // 切换到上一题
    prevQuestion() {
      if (this.currentQuestionIndex > 0) {
        this.currentQuestionIndex--;
        this.selectedOptions = [];
      }
    },
    // 从后端请求题目
    async fetchQuestions() {
      // 发起请求，得到题目
      this.questions = await this.$http.get('/api/questions');
    },
  },
  created() {
    this.fetchQuestions();
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.question {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #eee;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #eee;
  cursor: pointer;
}

.option.selected {
  background-color: #eee;
}

.button-container {
  display: flex;
  justify-content: center;
}

.button {
  margin: 10px;
  padding: 10px;
  border: 1px solid #eee;
  cursor: pointer;
}
</style>