Newer
Older
pj / SakataQuiz.js
(function ($) {
  'use strict';

  let $questionTotalNum = 5;

  const prefecturalCapital = [
    {
      id: "01",
      question: "奨学⾦返還⽀援制度が⼿厚い市町村は次のうちどれ",
      answer01: "酒⽥市",
      answer02: "⼭形市",
      answer03: "新宿区",
      answer04: "那覇市",
    },
    {
      id: "02",
      question: "⼦育て⽀援が充実しているのは次のうちどれ?",
      answer01: "酒⽥市",
      answer02: "鶴岡市",
      answer03: "仙台市",
      answer04: "新宿区",
    },
    {
      id: "03",
      question: "移住する場合、条件を満たしていた場合、住宅⽀援補助⾦制度を⾏なっている市区町村は次のうちどれ",
      answer01: "酒⽥市",
      answer02: "鶴岡市",
      answer03: "⼭形市",
      answer04: "⻘森市",
    },
    {
      id: "04",
      question: "社会⼈になってから貯⾦をしやすいのは次の市区町村のうちどれ",
      answer01: "酒⽥市",
      answer02: "新宿区",
      answer03: "仙台市",
      answer04: "川崎市",
    },
    {
      id: "05",
      question: "酒⽥市の事業所数は次のうちどれ",
      answer01: "5721",
      answer02: "4721",
      answer03: "3721",
      answer04: "6721",
    },
  ];

  function shuffleQuiz(array) {
    for (let i = (array.length - 1); 0 < i; i--) {
      let random = Math.floor(Math.random() * (i + 1));
      let selected = array[i];
      array[i] = array[random];
      array[random] = selected;
    }
    return array;
  }
  let quizId = ["01", "02", "03", "04", "05"];
  shuffleQuiz(quizId);

  let $currentNum = 0;
  let $pointPerCorrect = 10;

  let questionObject = (function () {
    let Obj = function ($target) {
      this.$questionNumber = $target.find('.quiz-question-number');
      this.$questionName = $target.find('.quiz-question');
      this.$questionButton = $target.find('.quiz-button');
      this.$button01 = $target.find('.button01');
      this.$button02 = $target.find('.button02');
      this.$button03 = $target.find('.button03');
      this.$button04 = $target.find('.button04');
      this.$answer01 = $target.find('.quiz-text01');
      this.$answer02 = $target.find('.quiz-text02');
      this.$answer03 = $target.find('.quiz-text03');
      this.$answer04 = $target.find('.quiz-text04');
      this.$score = $target.find('.score-wrap .score');
      this.init();
    };
    Obj.prototype = {
      init: function () {
        this.event();
      },
      event: function () {
        let _this = this;
        let score = 0;

        $(window).on('load', function () {
          let value = quizId[$currentNum];
          let nextQuestion = _this.searchQuestion(value);
          _this.changeQuestion(nextQuestion);
          _this.shuffleAnswer($('.quiz-answer'));
        });

        this.$questionButton.on("click", function () {
          if ($(this).hasClass('button01')) {
            $(this).parents('.quiz-answer').addClass('is-correct');
            score = score + $pointPerCorrect;
          } else {
            $(this).parents('.quiz-answer').addClass('is-incorrect');
          }

          $(this).addClass('is-checked');

          if ($currentNum + 1 == $questionTotalNum) {
            setTimeout(function () {
              $('.finish').addClass('is-show');
              $('.score-wrap .score').text(score);
            }, 1000);
          } else {
            setTimeout(function () {
              $currentNum = $currentNum + 1;
              let value = quizId[$currentNum];
              let nextQuestion = _this.searchQuestion(value);
              _this.changeQuestion(nextQuestion);
              _this.$questionButton.removeClass('is-checked');
              $('.quiz-answer').removeClass('is-correct').removeClass('is-incorrect');
              _this.shuffleAnswer($('.quiz-answer'));
            }, 1000);
          }
          return false;
        });
      },
      searchQuestion: function (questionId) {
        let nextQuestion = null;
        prefecturalCapital.forEach(function (item) {
          if (item.id == questionId) {
            nextQuestion = item;
          }
        });
        return nextQuestion;
      },
      changeQuestion: function (nextQuestion) {
        let _this = this;
        _this.$questionName.text(nextQuestion.question + '?');
        let numPlusOne = $currentNum + 1;
        _this.$questionNumber.text('問題 ' + numPlusOne);
        _this.$answer01.text(nextQuestion.answer01);
        _this.$answer02.text(nextQuestion.answer02);
        _this.$answer03.text(nextQuestion.answer03);
        _this.$answer04.text(nextQuestion.answer04);
      },
      shuffleAnswer: function (container) {
        let content = container.find("> *");
        let total = content.length;
        content.each(function () {
          content.eq(Math.floor(Math.random() * total)).prependTo(container);
        });
      },
    };
    return Obj;
  })();

  let quiz = $('.quiz');
  if (quiz[0]) {
    let queInstance = new questionObject(quiz);
  }
})(jQuery);