快捷導(dǎo)航

基于vue2實(shí)現(xiàn)簡(jiǎn)單的答題組件

更新時(shí)間：2024年12月17日 15:02:09 作者：小馬超會(huì)養(yǎng)兔子

這篇文章主要為大家詳細(xì)介紹了如何基于vue2實(shí)現(xiàn)簡(jiǎn)單的答題組件,點(diǎn)擊正確的選項(xiàng),該選項(xiàng)背景變綠色；點(diǎn)擊錯(cuò)誤的選項(xiàng),該選項(xiàng)背景變紅色,有需要的可以參考下

需求

實(shí)現(xiàn)一個(gè)答題組件，點(diǎn)擊正確的選項(xiàng)，該選項(xiàng)背景變綠色；點(diǎn)擊錯(cuò)誤的選項(xiàng)，該選項(xiàng)背景變紅色。不管點(diǎn)擊了什么選項(xiàng)，延遲一秒后切換下一題。

每次出題，從題庫中選隨機(jī)選擇一道用戶此次進(jìn)入這個(gè)頁面后還沒有做過的題目，如果此次進(jìn)入這個(gè)頁面把所有題都做了，則重置，重新開始隨機(jī)選題。

頁面結(jié)構(gòu)

<div class="question">
  {{questions[selectedQuestionIndex].question}}
</div>
<div class="choices">
  <div
    class="choice"
    v-for="(item, index) in questions[selectedQuestionIndex].choices"
    :key="item.content"
    // 當(dāng)點(diǎn)擊了當(dāng)前的選項(xiàng)，則開始處理背景顏色
    :style="{ background: selectedChoiceIndex === index ? feedbackColor : '' }" // 用來顯示點(diǎn)擊之后的背景顏色
    @click="handleChoice(index)"
    >
    <span>{{item.index}}</span>
    <span>{{item.content}}</span>
  </div>
</div>

數(shù)據(jù)結(jié)構(gòu)

data() {
  return {
    selectedQuestionIndex: 0, // 當(dāng)前顯示的問題的索引
    selectedChoiceIndex: null, // 記錄用戶當(dāng)前選擇的選項(xiàng)索引
    feedbackColor: '', // 記錄選項(xiàng)的反饋顏色
    answeredQuestions: new Set(), // 已回答題目索引
    questions: [ // 題庫
      // 1
      {
        question: '下列哪一項(xiàng)不是森林生態(tài)系統(tǒng)服務(wù)的一部分？',
        choices: [
          { index: 'A: ', content: '氧氣生產(chǎn)' },
          { index: 'B: ', content: '水土保持' },
          { index: 'C: ', content: '提供化石燃料' },
          { index: 'D: ', content: '生物多樣性維持' },
        ],
        correctChoiceIndex: 2
      },
      // 2
      {
        question: '碳匯是指什么？',
        choices: [
          { index: 'A: ', content: '大量排放二氧化碳的地方' },
          { index: 'B: ', content: '能夠吸收并儲(chǔ)存二氧化碳的自然系統(tǒng)' },
          { index: 'C: ', content: '一種工業(yè)過程，用于減少溫室氣體' },
          { index: 'D: ', content: '用于監(jiān)測(cè)大氣中二氧化碳水平的技術(shù)' },
        ],
        correctChoiceIndex: 1
      },
    ]
  };
},

方法解析

有三個(gè)方法：

handleChoice：根據(jù)用戶的選擇決定顯示什么背景顏色；切換下一題
nextQuestion：決定下一題選哪一道；重置選擇狀態(tài)和選項(xiàng)背景顏色
resetQuiz：重新開始測(cè)試

handleChoice(choiceIndex) {
  // 判斷是否答對(duì)
  const currentQuestion = this.questions[this.selectedQuestionIndex]; // 獲取當(dāng)前問題
  // 判斷用戶點(diǎn)擊的是否是正確選項(xiàng)，計(jì)算對(duì)應(yīng)的背景顏色
  if (choiceIndex === currentQuestion.correctChoiceIndex) {
    this.feedbackColor = '#adce74'; // 綠色表示答對(duì)
  } else {
    this.feedbackColor = '#ea6458'; // 紅色表示答錯(cuò)
  }

  // 設(shè)置選中選項(xiàng)索引
  // 一旦selectedChoiceIndex有值了，那么頁面上就會(huì)渲染背景顏色
  this.selectedChoiceIndex = choiceIndex;

  // 延遲一段時(shí)間切換到下一題
  setTimeout(() => {
    this.nextQuestion();
  }, 1000); // 延遲1秒
},

nextQuestion() {
  // 將當(dāng)前題目加入已回答集合
  this.answeredQuestions.add(this.selectedQuestionIndex);

  // 篩選未回答的題目索引
  const unansweredIndexes = this.questions
    .map((_, index) => index) // 得到一個(gè)全是問題編號(hào)的數(shù)組
    .filter(index => !this.answeredQuestions.has(index)); // 過濾出不在answeredQuestions里面的問題的序號(hào)

  if (unansweredIndexes.length > 0) {
    // 隨機(jī)選取一道未回答的題目
    const randomIndex = Math.floor(Math.random() * unansweredIndexes.length);
    this.selectedQuestionIndex = unansweredIndexes[randomIndex];
  } else {
    // 如果沒有未回答的題目，重置已回答集合并重新開始
    this.answeredQuestions.clear();
    this.resetQuiz();
  }

  // 重置選中狀態(tài)
  this.selectedChoiceIndex = null;
  this.feedbackColor = '';
},

resetQuiz() {
  // 重新隨機(jī)選擇一個(gè)題目
  this.selectedQuestionIndex = Math.floor(Math.random() * this.questions.length);
}

組件代碼

<template>
  <div class="question-container">
    <div class="question">
      {{questions[selectedQuestionIndex].question}}
    </div>
    <div class="choices">
      <div
        class="choice"
        v-for="(item, index) in questions[selectedQuestionIndex].choices"
        :key="item.content"
        :style="{ background: selectedChoiceIndex === index ? feedbackColor : '' }"
        @click="handleChoice(index)"
        >
        <span>{{item.index}}</span>
        <span>{{item.content}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapMutations} from "vuex";

  export default {
    name: "questionDetail",
    data() {
      return {
        selectedQuestionIndex: 0,
        selectedChoiceIndex: null, // 記錄用戶當(dāng)前選擇的選項(xiàng)索引
        feedbackColor: '', // 記錄選項(xiàng)的反饋顏色
        answeredQuestions: new Set(), // 已回答題目索引
        questions: [
          // 1
          {
            question: '下列哪一項(xiàng)不是森林生態(tài)系統(tǒng)服務(wù)的一部分？',
            choices: [
              { index: 'A: ', content: '氧氣生產(chǎn)' },
              { index: 'B: ', content: '水土保持' },
              { index: 'C: ', content: '提供化石燃料' },
              { index: 'D: ', content: '生物多樣性維持' },
            ],
            correctChoiceIndex: 2
          },
          // 2
          {
            question: '碳匯是指什么？',
            choices: [
              { index: 'A: ', content: '大量排放二氧化碳的地方' },
              { index: 'B: ', content: '能夠吸收并儲(chǔ)存二氧化碳的自然系統(tǒng)' },
              { index: 'C: ', content: '一種工業(yè)過程，用于減少溫室氣體' },
              { index: 'D: ', content: '用于監(jiān)測(cè)大氣中二氧化碳水平的技術(shù)' },
            ],
            correctChoiceIndex: 1
          },
        ]
      };
    },
    methods: {
      ...mapMutations(['addQuestion']),
      handleChoice(choiceIndex) {
        // 判斷是否答對(duì)
        const currentQuestion = this.questions[this.selectedQuestionIndex];
        if (choiceIndex === currentQuestion.correctChoiceIndex) {
          this.feedbackColor = '#adce74'; // 綠色表示答對(duì)
          this.addQuestion();
        } else {
          this.feedbackColor = '#ea6458'; // 紅色表示答錯(cuò)
        }

        // 設(shè)置選中選項(xiàng)索引
        this.selectedChoiceIndex = choiceIndex;

        // 延遲一段時(shí)間切換到下一題
        setTimeout(() => {
          this.nextQuestion();
        }, 1000); // 延遲1秒
      },
      nextQuestion() {
        // 將當(dāng)前題目加入已回答集合
        this.answeredQuestions.add(this.selectedQuestionIndex);

        // 篩選未回答的題目索引
        const unansweredIndexes = this.questions
          .map((_, index) => index)
          .filter(index => !this.answeredQuestions.has(index));

        if (unansweredIndexes.length > 0) {
          // 隨機(jī)選取一道未回答的題目
          const randomIndex = Math.floor(Math.random() * unansweredIndexes.length);
          this.selectedQuestionIndex = unansweredIndexes[randomIndex];
        } else {
          // 如果沒有未回答的題目，重置已回答集合并重新開始
          this.answeredQuestions.clear();
          this.resetQuiz();
        }

        // 重置選中狀態(tài)
        this.selectedChoiceIndex = null;
        this.feedbackColor = '';
      },
      resetQuiz() {
        // 重新隨機(jī)選擇一個(gè)題目
        this.selectedQuestionIndex = Math.floor(Math.random() * this.questions.length);
      }
    }
  };
</script>

<style scoped lang="scss">
.question-container {
  width: 98%;
  height: calc(100vh - 210px);
  margin-top: 15px;
  padding: 0 15px 0 15px;
  //border: 1px red solid;
  overflow: auto;
  .question {
    font-family: 'SanJinSong-Cu', serif;
    color: #7c9a92;
    font-size: 35px;
  }
  .choices {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    .choice {
      box-sizing: border-box;
      padding: 10px 20px;
      color: white;
      font-family: 'SanJinSong-Xi', serif;
      font-size: 25px;
      width: 100%;
      min-height: 80px;
      display: flex;
      align-items: center;
      border-radius: 8px;
      background: linear-gradient(to right, #1F6D5E, #43D6B9);
      cursor: pointer;
      transition: background 0.3s ease;
    }
  }
}
</style>