[Vue.js] ３択クイズゲーム！

今回は、ドットインストールのJavaScript講座にある３択クイズゲームをVue.jsで作って見ました！

ドットインストールのJavaScript編はこちら。

やっぱり自分で手を動かして、考えてプログラミングを書くって大事だなと改めて思いました。約2日くらいかかってしまいましたが、かなり勉強になったと思います。

皆さんもぜひ参考にして見てください！また、もし以下のコードについてご意見がある方はコメントいただけると嬉しです！

（Vue.jsで実装するとフラグだらけになるのは私だけでしょうか。。。

）

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>Quiz</title>
  <style>
    body {
      background: #efdec1;
      font-size: 14px;
      font-family: Verdana, sans-serif;
    }

    .container {
      width: 400px;
      margin: 8px auto;
      background: #fff;
      border-radius: 4px;
      padding: 16px;
      position: relative;
    }

    .question {
      margin-bottom: 16px;
      font-weight: bold;
    }

    .choices {
      list-style: none;
      padding: 0;
      margin-bottom: 16px;
    }

    .choices>li {
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 10px;
      margin-bottom: 10px;
      cursor: pointer;
    }

    .choices>li:hover {
      background: #f8f8f8;
    }

    .choices>li.correct {
      background: #d4edda;
      border-color: #c3e6cb;
      color: #155724;
      font-weight: bold;
    }

    .choices>li.correct::after {
      content: ' ... correct!';
    }

    .choices>li.wrong {
      background: #f8d8da;
      border-color: #f5c6cb;
      color: #721c24;
      font-weight: bold;
    }

    .choices>li.wrong::after {
      content: ' ... wrong!';
    }

    .btn,
    #result>a {
      background: #3498db;
      padding: 8px;
      border-radius: 4px;
      cursor: pointer;
      text-align: center;
      color: #fff;
      box-shadow: 0 4px 0 #2880b9;
    }

    .btn.disabled {
      background: #ccc;
      box-shadow: 0 4px 0 #bbb;
      opacity: 0.7;
    }

    .result {
      position: absolute;
      width: 300px;
      background: #fff;
      padding: 30px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      top: 50px;
      left: 0;
      right: 0;
      margin: 0 auto;
      border-radius: 4px;
      text-align: center;
      transition: 0.4s;
    }

    .result.hidden {
      transform: translateY(-500px);
    }

    .result>p {
      font-size: 24px;
    }

    .result>a {
      display: block;
      text-decoration: none;
    }
  </style>
</head>

<body>


  <section id='app' class="container">
    <p class="question">{{ quizSet[currentNum].q }}</p>
    <ul class="choices" v-on:click="checkAnswer($event)" v-bind:class="shuffle()">
      <li v-for="(answer,index) in quizSet_shuffle[currentNum].a"
        v-bind:class="{correct:rightClickIndex === index, wrong:wrongClickIndex === index}">
        {{ answer }}
      </li>
      </li>
    </ul>
    <div class="btn" v-on:click="setQuiz($event)" v-bind:class="{disabled:isBtnDisable}">{{ msg }}</div>
    <section class="result" v-bind:class="{hidden:isHiddenResult}">
      <p>{{ result }}</p>
      <p>{{ percent }}</p>
      <a href="">Replay?</a>
    </section>
  </section>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
    (function () {
      'use strict';

      var vm = new Vue({
        el: '#app',
        data() {
          return {

            quizSet: [
              { q: '世界で一番大きな湖は？', a: ['カスピ海', 'カリブ海', '琵琶湖'] },
              { q: '2の8乗は？', a: ['256', '64', '1024'] },
              { q: '次のうち、最初にリリースされた言語は？', a: ['Python', 'JavaScript', 'HTML'] },
            ],
            quizSet_shuffle: [
              { q: '世界で一番大きな湖は？', a: ['カスピ海', 'カリブ海', '琵琶湖'] },
              { q: '2の8乗は？', a: ['256', '64', '1024'] },
              { q: '次のうち、最初にリリースされた言語は？', a: ['Python', 'JavaScript', 'HTML'] },
            ],
            currentNum: 0,
            isAnswered: false,
            isShuffle: true,
            score: 0,
            rightClickIndex: false,
            wrongClickIndex: false,
            isBtnDisable: true,
            isHiddenResult: true,
            result: '',
            percent: '',
            msg:'Next',
          }
        },

        methods: {

          shuffle() {
            if (!this.isShuffle) {
              return;
            }
            for (let i = this.quizSet[this.currentNum].a.length - 1; i > 0; i--) {
              const j = Math.floor(Math.random() * (i + 1));
              [this.quizSet_shuffle[this.currentNum].a[j], this.quizSet_shuffle[this.currentNum].a[i]] = [this.quizSet_shuffle[this.currentNum].a[i], this.quizSet_shuffle
              [this.currentNum].a[j]];
            }
          },

          checkAnswer: function (e) {
            this.isShuffle = false;
            this.isBtnDisable = false;

            if (this.isAnswered) {
              return;
            }
            this.isAnswered = true;

            const clickedIndexNum = [...e.currentTarget.children].indexOf(e.target);
            if (this.quizSet_shuffle[this.currentNum].a[clickedIndexNum] === this.quizSet[this.currentNum].a[0]) {
              this.rightClickIndex = clickedIndexNum;
              this.score++;
            } else {
              this.wrongClickIndex = clickedIndexNum;
            }
          },

          setQuiz: function (e) {
            this.isBtnDisable = true;
            this.isShuffle = true;
            this.rightClickIndex = false;
            this.wrongClickIndex = false;

            if (!this.isAnswered) {
              return;
            }

            this.isAnswered = false;

            if (this.quizSet.length - 1 > this.currentNum) {
              this.currentNum++;
              if(this.quizSet.length -1 ===  this.currentNum){
                this.msg="Show Score";
              }
            } else {
              this.isHiddenResult = false;
              console.log(`${this.score / this.quizSet.length}`);;
              this.result = "Score: " + this.score + "/" + this.quizSet.length;
              this.percent = "正答率は" + (this.score / this.quizSet.length) * 100 + "%です。";
            }
          }
        },
      });
    })();

  </script>
</body>

</html>