(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);