計算答對答錯題數

我們來想一想要如何記錄使用者答對幾題、答錯幾題。

首先，我們在檢查答案時，要如何算出答對幾題、答錯幾題? 如果我們會在檢查答案後看到答對幾題、答錯幾題，那就要利用reactive()儲存內容。

const state = reactive({
  choice: 1,
  answer: [''],
  message: [''],
  exams: [{ question: '', answer: '' }],
  **correctCount :0,
  incorrectCount :0,**
})

在checkAnswers()裡，答對時，correctCount就加1。答錯時，incorrectCount就加1。

function checkAnswers() {
  state.message = [] // clear previous messages
  state.correctCount = 0
  state.incorrectCount = 0
  for (let i in state.exams) {
    if (state.answer[i] !== state.exams[i].answer) {
      state.message[i] = '不正確'
      **state.incorrectCount++**
    } else {
      state.message[i] = '正確'
      **state.correctCount++**
    }
  }
}

將計算內容放到頁面上。

<template>
  <v-container>
    {{ account.name }}
    <v-select label="請選擇" v-model="state.choice" :items="units"> </v-select>
    <v-card v-for="(exam, index) in state.exams" :key="index">
      <v-text-field
        v-model="state.answer[index]"
        :label="exam.question"
        :messages="state.message[index]"
      ></v-text-field>
    </v-card>
    **<v-alert color="info" icon="$info" title="檢查結果">
      共答對{{ state.correctCount }}題 / 答錯{{ state.incorrectCount  }}題
    </v-alert>**
    <v-btn color="primary" @click="checkAnswers">檢查答案</v-btn>
  </v-container>
</template>

大家試試看改一下自己負責的科目，是不是能正常計算答對、答錯的題數。

Collection in a Document

怎麼將本單元的得分寫進firestore? 當我們會有多個單元要記錄時，要怎麼處理? 可以利用文件中的集合。其實，設計方法有多種: 如果我們對同一科目的回答狀況比較重視的話，可以將答題記錄跟科目放在一起。如果我們對個人的回答狀況比較重視的話，就把答題記錄跟個人資料放在一起。當然，也可以答題記錄獨立成一個collection。

• Cloud Firestore Data model

在firestore裡，要去抓文件中的集合中的文件，很簡單。例如，以下的語法可以取得「user」集合下下，文件id為auth.currentUser.uid，「record」集合下，儲存每一次的答題結果

在checkAnswers()裡，加上:

  await addDoc(collection(db,"user/"+account.id+"/record"),
    {
      subject: "英文"
      unit: state.choice,
      correctCount: state.correctCount,
      incorrectCount: state.incorrectCount,
      date: new Date()
    }
  );

import { **addDoc**, collection, getDocs, getFirestore, query, where } from 'firebase/firestore'

const account = inject('account', { name: '未登入', email: '', **id: ''** })

**async** function checkAnswers() {
  state.message = [] // clear previous messages
  state.correctCount = 0
  state.incorrectCount = 0
  for (let i in state.exams) {
    if (state.answer[i] !== state.exams[i].answer) {
      state.message[i] = '不正確'
      state.incorrectCount++
    } else {
      state.message[i] = '正確'
      state.correctCount++
    }
  }
  **await addDoc(collection(db,"user/"+account.id+"/record"),
    { 
      subject: "英文"
      unit: state.choice,
      correctCount: state.correctCount,
      incorrectCount: state.incorrectCount,
      date: new Date()
    }
  );**
}