Vue.jsで国別クイズを作成してみた。

はじめに

最近DevChallenges とういうサービスを知りました。
DevChallengesは、いろんなWeb開発課題が用意されており、スキルアップを図るサイトです。
おもしろそうなものがたくさんあり、迷ったのですが、今回はCountryQuizというものを試してみました！

完成品

Country-Quiz

要件

1番初めに挑戦するクイズの種類を選べます（国名から6州を当てるクイズ・国旗から国を当てるクイズ）
クイズは毎回答後に正誤が表示される
正解数はカウントされ、最後に結果発表画面を見られる
クイズは再挑戦できる

使用したもの

APIは REST COUNTRIES を使用しました
フレームワークはNuxt.jsを使用しました。
明らかにオーバースペックなのですが、これから認証機能や、クイズ結果を記録していき、マイページで表示などを実装したいなと思ったのでNuxtにしました！

実装したソースコード

<template>
  <div id="index">
    <div class="auth-box">
      <div v-if="loginUser">
        <a class="logout" @click="logout">ログアウト</a>
      </div>
      <a v-else class="login" @click.prevent="login">ログイン</a>
    </div>
    <div class="index-inner">
      <h1 class="title is-1">COUNTRY QUIZ</h1>
      <img
        v-if="status <= endNum"
        class="decoration"
        src="/images/def.svg"
        alt=""
      />
      <div class="quiz-box">
        <div class="quiz-box-inner">
          <transition mode="out-in">
            <!-- 初期表示 -->
            <div v-if="status === 0" key="init" class="init">
              <h2 class="question title is-2">
                {{ displayQuiz.question }}
              </h2>
              <div class="answers">
                <button
                  v-for="option in displayQuiz.options"
                  :key="option.name"
                  class="button is-medium is-fullwidth"
                  @click="startQuiz(option.name)"
                >
                  {{ option.jaName }}
                </button>
              </div>
            </div>
            <!-- クイズ終了表示 -->
            <div v-else-if="status > endNum" key="finish" class="finished">
              <img src="/images/finish.svg" alt="" />
              <h2 class="question title">FINISH</h2>
              <p class="result">
                あなたは5問中
                <span class="correct-answers">{{ correctAnswers }}</span>
                問正解しました
              </p>
              <button
                class="button is-medium is-fullwidth try-again"
                @click="backMenu"
              >
                メニューに戻る
              </button>
            </div>
            <!-- 質問表示 -->
            <div v-else key="quiz" class="in-progress">
              <div class="progress-wrapper">
                <div ref="meter" class="progress-bar"></div>
              </div>
              <!-- 国旗クイズの場合のみ表示される -->
              <img
                v-if="displayQuiz.flagImageUrl"
                :src="displayQuiz.flagImageUrl"
                class="flag-img"
                alt=""
              />
              <h2 class="question title is-2">
                {{ displayQuiz.question }}
              </h2>
              <div ref="answers" class="answers">
                <button
                  v-for="(option, index) in displayQuiz.options"
                  :key="index"
                  class="button is-medium is-fullwidth"
                  :class="{
                    correct: isExamining && displayQuiz.answer == option.name,
                  }"
                  @click="answer(option.name, $event)"
                >
                  {{ option.jaName }}
                </button>
                <button
                  v-if="isExamining"
                  class="next-btn button"
                  @click="continueQuiz"
                >
                  {{ nextBtnText }}
                </button>
                <!-- 回答後はNEXT以外触れなくします -->
                <div v-if="isExamining" class="touch-prevention"></div>
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>
    <pre>{{ loginUser }}</pre>
  </div>
</template>

<script>
import axios from 'axios'
import { mapGetters, mapActions } from 'vuex'

const DATA_MAX = 200 // APIのデータ上限
const regionOptions = [
  {
    name: 'Asia',
    jaName: 'アジア州',
  },
  {
    name: 'Africa',
    jaName: 'アフリカ州',
  },
  {
    name: 'Americas',
    jaName: 'アメリカ州',
  },
  {
    name: 'Oceania',
    jaName: 'オセアニア州',
  },
  {
    name: 'Europe',
    jaName: 'ヨーロッパ州',
  },
]

function genRandomArray(array, max) {
  while (true) {
    const randomNum = Math.floor(Math.random() * max)
    if (!array.includes(randomNum)) {
      array.push(randomNum)
      break
    }
  }
}

export default {
  data() {
    return {
      quizzes: [],
      endNum: 5,
      status: 0,
      correctAnswers: 0,
      isExamining: false,
    }
  },
  computed: {
    ...mapGetters(['loginUser']),
    displayQuiz() {
      return this.quizzes[this.status]
    },
    nextBtnText() {
      if (this.status === this.endNum) return '結果を見る'
      else return '次へ'
    },
  },
  created() {
    // 初期表示の設問と選択肢
    this.initQuizzes()
  },
  methods: {
    ...mapActions(['login', 'logout']),
    // クイズを進行していくためのメソッド
    continueQuiz() {
      // 選択した回答のハイライト用classをはずす
      const all = this.$refs.answers.querySelectorAll('button')
      console.log(all)
      all.forEach((el) => {
        el.classList.remove('user-answered')
      })

      // クイズを進める
      this.status++
      this.isExamining = false
    },
    // 回答後に正誤表示を行うメソッド
    examiningAnswer() {
      this.isExamining = true
    },

    // クイズをリセットしてメニューに戻るメソッド
    backMenu() {
      this.status = 0
      this.correctAnswers = 0
      this.initQuizzes()
    },
    // 通信を飛ばして、クイズ作成へ続けるメソッド
    startQuiz(type) {
      axios
        .get('https://restcountries.eu/rest/v2/all')
        .then((res) => {
          res.data = res.data.filter((el) => {
            return el.translations.ja !== null
          })
          if (type === 'region') this.makeRegionQuiz(res.data)
          else if (type === 'flag') this.makeFlagQuiz(res.data)
          this.status = 1
          this.correctAnswers = 0
        })
        .catch((error) => {
          throw new Error(error)
        })
    },

    // 6州クイズを生成するメソッド
    makeRegionQuiz(responseData) {
      const randomNumArray = []
      for (let n = 0; n < 5; n++) {
        genRandomArray(randomNumArray, DATA_MAX)
      }
      console.log(randomNumArray)
      for (let i = 0; i < this.endNum; i++) {
        const country = responseData[randomNumArray[i]]
        const quiz = {
          question: `${country.translations.ja}が属する州はどこですか？`,
          options: regionOptions,
          answer: country.region,
        }
        this.quizzes.push(quiz)
      }
    },
    // 国旗クイズを生成するメソッド
    makeFlagQuiz(responseData) {
      const randomNumArray = []
      for (let n = 0; n < 5; n++) {
        genRandomArray(randomNumArray, DATA_MAX)
      }
      for (let i = 0; i < this.endNum; i++) {
        // 正解を作成
        const country = responseData[randomNumArray[i]]
        const flagOptions = []
        const flagOption = {
          name: country.name,
          jaName: country.translations.ja,
        }
        // 正解セット
        flagOptions.push(flagOption)

        // 不正解問題作成
        const randomNumArray2 = []
        for (let j = 0; j < 4; j++) {
          while (true) {
            const randomNum = Math.floor(Math.random() * DATA_MAX)
            if (
              !randomNumArray2.includes(randomNum) &&
              randomNum !== randomNumArray[i] // 正解をかぶってしまうといけないので&&以下の記述が必要
            ) {
              randomNumArray2.push(randomNum)
              break
            }
          }
          // 不正解問題をセット
          flagOptions.push({
            name: responseData[randomNumArray2[j]].name,
            jaName: responseData[randomNumArray2[j]].translations.ja,
          })
        }
        // 正解が先頭でセットされてしまっているのでsortをかけて分からなくする
        flagOptions.sort((a, b) => {
          if (a.name > b.name) return -1
          else if (a.name < b.name) return 1
          else return 0
        })
        const quiz = {
          flagImageUrl: country.flag,
          question: `この国旗はどこの国のものですか？`,
          options: flagOptions,
          answer: country.name,
        }
        this.quizzes.push(quiz)
      }
    },
    // ユーザーがクイズに回答したときのメソッド
    answer(userAnswer, e) {
      // 選択した答えをハイライトさせる処理
      e.target.classList.add('user-answered')
      // 正解したらカウントして正誤表示を行う
      if (userAnswer === this.displayQuiz.answer) this.correctAnswers++
      this.examiningAnswer()
      this.advanceMeter()
    },
    // クイズの進捗メーターを進めるメソッド
    advanceMeter() {
      const meter = this.$refs.meter
      let percent = 0
      percent += (this.status / this.endNum) * 100
      meter.style.width = percent + '%'
    },
    // quizzesの初期化
    initQuizzes() {
      this.quizzes = []
      const initialQuestions = {
        question: 'どの知識についてクイズをしたいですか？',
        options: [
          {
            name: 'region',
            jaName: '地域区分クイズ',
          },
          {
            name: 'flag',
            jaName: '国旗クイズ',
          },
        ],
      }
      this.quizzes.push(initialQuestions)
    },
  },
}
</script>

おわりに

書いてみた感想は、まだ少し共通化できそうな部分があるなぁという感じです。(クイズ生成あたり)
これから、Firebaseの認証機能とCloudFireStoreを使い、ログインしているユーザーのクイズ結果は記録していけるようにしていこうと思います。
DevChallengesは他にもまだまだ開発課題があるので、当分退屈しなさそうで嬉しいですねー！