4択クイズをつくる【50:50】
Web
2024年11月15日
みなさんこんにちは。
ケミストのWeb担当みやのです。
「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。
今回は、前回の4択クイズに「フィフティ・フィフティ」ボタンを追加してみました。ｵｵﾀﾆｻｰﾝ
問題は前回と同じですが、一般名にしてあります。
参考：BRISK｜JavaScriptでランダム出題の4択クイズを作ろう【配列から質問と回答を取得】
さっそく挑戦してみてください。全部で5問です。
0 点 ／100点
最初からやり直す みなさんは何問正解できましたか？
いい問題があったらぜひ教えてください。
スクリプトを書き換える
.hide-answers-buttonを押すと「answer03とanswer04を非表示にする」という風にしてみます。
(function ($) {
'use strict';
let $questionTotalNum = 5;
const prefecturalCapital = [{
id: "01",
question: '服用後、次の服用まで<span class="highlight">4時間</span>あける必要があるのは',
answer01: "ナラトリプタン",
answer02: "ゾルミトリプタン",
answer03: "エレトリプタン",
answer04: "リザトリプタン",
},{
id: "02",
question: '服用後、<span class="highlight">60分間</span>横になってはならないのは',
answer01: "イバンドロン酸",
answer02: "ミノドロン酸",
answer03: "リセドロン酸",
answer04: "アレンドロン酸",
},{
id: "03",
question: '<span class="highlight">空腹時</span>に投与する必要があるのは',
answer01: "ビラスチン",
answer02: "デスロラタジン",
answer03: "フェキソフェナジン",
answer04: "ルパタジン",
},{
id: "04",
question: '<span class="highlight">1日1回夕食後</span>と定められているのは',
answer01: "エスシタロプラム",
answer02: "セルトラリン",
answer03: "ベンラファキシン",
answer04: "デュロキセチン",
},{
id: "05",
question: '朝食前or朝食後<span class="highlight">でなくてもよい</span>のは',
answer01: "ダパグリフロジン",
answer02: "イプラグリフロジン",
answer03: "カナグリフロジン",
answer04: "エンパグリフロジン",
},];
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 = 20;
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 () {
_this.loadQuestion();
});
this.$questionButton.on("click", function () {
if ($(this).hasClass('button01')) {
$(this).parents('.quiz-answer').addClass('is-correct');
score += $pointPerCorrect;
confetti();
} 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);
if (score === 100) {
fireworks();
}
} else {
setTimeout(function () {
_this.resetChoices();
setTimeout(function () {
_this.nextQuestion();
}, 200);
}, 1000);
}
return false;
});
$('.hide-answers-button').on('click', function () {
_this.hideSpecificChoices();
});
$('.goback-button').on('click', function () {
score = 0;
$currentNum = 0;
shuffleQuiz(quizId);
_this.resetChoices();
setTimeout(function () {
_this.loadQuestion();
}, 200);
$('.finish').removeClass('is-show');
});
},
loadQuestion: function () {
let value = quizId[$currentNum];
let nextQuestion = this.searchQuestion(value);
this.changeQuestion(nextQuestion);
this.shuffleAnswer($('.quiz-answer'));
},
nextQuestion: function () {
$currentNum++;
this.loadQuestion();
},
resetChoices: function () {
this.$questionButton.removeClass('is-checked');
$('.quiz-answer').removeClass('is-correct is-incorrect');
$('.quiz-answer li').show();
},
searchQuestion: function (questionId) {
return prefecturalCapital.find(item => item.id === questionId);
},
changeQuestion: function (nextQuestion) {
let _this = this;
_this.$questionName.html(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);
});
},
hideSpecificChoices: function () {
$('.quiz-answer li').each(function () {
let $li = $(this);
if ($li.find('.quiz-button').hasClass('button03') || $li.find('.quiz-button').hasClass('button04')) {
$li.css('opacity', 0);
$li.css('pointer-events', 'none');
}
});
},
resetChoices: function () {
this.$questionButton.removeClass('is-checked');
$('.quiz-answer').removeClass('is-correct is-incorrect');
$('.quiz-answer li').css('opacity', 1);
$('.quiz-answer li').css('pointer-events', 'auto');
}
};
return Obj;
})();
let quiz = $('.quiz');
if (quiz[0]) {
let queInstance = new questionObject(quiz);
}
})(jQuery);今後の課題
消す2つの選択肢をランダム（answer02、03、04のうちから2つ）にしたいですね。
次は「テレフォン」と「オーディエンス」だな
この記事を書いた人
みやの
Web・DTP担当
