vue实现答题功能

Vue实现答题功能

数据准备

创建一个包含题目、选项和正确答案的数据结构，通常是一个数组对象。每个题目对象包含问题文本、选项数组和正确答案索引。

const questions = [
  {
    question: "Vue的核心特性是什么？",
    options: ["组件化", "双向数据绑定", "虚拟DOM", "全部都是"],
    answer: 3
  },
  {
    question: "Vue实例创建时调用的生命周期钩子是？",
    options: ["created", "mounted", "beforeCreate", "updated"],
    answer: 2
  }
]

组件结构

创建答题组件，包含题目展示区、选项选择和提交按钮。使用v-for渲染题目和选项，v-model绑定用户选择。

<template>
  <div class="quiz-container">
    <div v-for="(q, index) in questions" :key="index">
      <h3>{{ q.question }}</h3>
      <div v-for="(option, i) in q.options" :key="i">
        <input 
          type="radio" 
          :id="'q'+index+'-'+i" 
          :name="'question'+index" 
          :value="i" 
          v-model="userAnswers[index]"
        >
        <label :for="'q'+index+'-'+i">{{ option }}</label>
      </div>
    </div>
    <button @click="submitAnswers">提交答案</button>
    <div v-if="score !== null">得分: {{ score }}/{{ questions.length }}</div>
  </div>
</template>

逻辑实现

在组件脚本部分定义数据和方法，处理用户交互和评分逻辑。

<script>
export default {
  data() {
    return {
      questions: [...], // 题目数据
      userAnswers: [],  // 用户答案
      score: null       // 得分
    }
  },
  methods: {
    submitAnswers() {
      let correct = 0
      this.questions.forEach((q, index) => {
        if (this.userAnswers[index] === q.answer) {
          correct++
        }
      })
      this.score = correct
    }
  }
}
</script>

样式优化

添加CSS样式提升用户体验，突出显示选中状态和答题结果。

<style scoped>
.quiz-container {
  max-width: 600px;
  margin: 0 auto;
}

input[type="radio"] {
  margin-right: 10px;
}

button {
  margin-top: 20px;
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

进阶功能

添加计时器、题目切换和进度显示等增强功能。

data() {
  return {
    currentQuestion: 0,
    timeLeft: 60,
    timer: null
  }
},
mounted() {
  this.startTimer()
},
methods: {
  startTimer() {
    this.timer = setInterval(() => {
      if (this.timeLeft > 0) {
        this.timeLeft--
      } else {
        this.submitAnswers()
        clearInterval(this.timer)
      }
    }, 1000)
  },
  nextQuestion() {
    if (this.currentQuestion < this.questions.length - 1) {
      this.currentQuestion++
    }
  },
  prevQuestion() {
    if (this.currentQuestion > 0) {
      this.currentQuestion--
    }
  }
}

状态管理

对于复杂应用，可以使用Vuex管理答题状态和结果。

// store.js
export default new Vuex.Store({
  state: {
    quiz: {
      questions: [...],
      answers: [],
      completed: false
    }
  },
  mutations: {
    setAnswer(state, payload) {
      state.quiz.answers[payload.index] = payload.answer
    },
    completeQuiz(state) {
      state.quiz.completed = true
    }
  }
})