僕は気軽に楽しめるコンテンツの1つの「クイズ」が大好きで、WEBで様々な形式のクイズプログラムを作成し公開していきました。
今回はJavaScriptのプラグイン、jQueryを使用して、最も簡単かつ最も遊ばれやすい、〇択クイズを出題できるプログラムの作成方法をお伝えします。
以前にサーバーサイドのPHPでクイズを作るプログラムも解説しておりますので、用途に合わせてこちらもご確認ください。
まずは完成クイズプログラムをプレイしてみてください
まずは、ここで紹介したクイズの完成系を触ってみてください↓。
こういうものを作りたい！と思われた方は下の解説をチェックです！
jQueryのライブラリを読み込む
JavaScriptのjQueryを使用して開発を進めて行きますので、事前にjQueryのライブラリを読み込んでおいてくださいね。
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js?ver=1.12.4'></script>
<script>
$(function(){
//ここに処理を記述する
});
</script>
今回のサンプルでは、上記のバージョンを使用します。
問題と選択肢を配列で作ろう
問題はJavaScriptの配列で管理していきます。
そして今回は、1回解いたら終わりではなく、5問解いたら終了のクイズにしてみます。
5問それぞれに、
- 問題文5問
- 選択肢4つ
を設定していきます。
<script>
$(function(){
var aryQuiz = [];
aryQuiz.push(
{
question : '次のうち、海に面していない県はどれ？',
answer : ['岐阜', '愛知', '三重', '静岡']
}
,{
question : '祝日「山の日」は何日？',
answer : ['8月11日', '8月24日', '8月17日', '8月5日']
}
,{
question : '東京ヤクルトスワローズのホーム球場はどれ？',
answer : ['明治神宮野球場', '東京ドーム', 'メットライフドーム', 'ZOZOマリンスタジアム']
}
,{
question : '元号「平成」が終わったのはいつ？',
answer : ['2019年4月30日', '2019年3月31日', '2019年5月31日', '2019年2月28日']
}
,{
question : 'SMAPが出したシングル曲で最も売れたのはどれ？',
answer : ['世界に一つだけの花', 'オレンジ', '青いイナズマ', 'SHAKE']
}
);
});
</script>
選択肢はすべて4問と統一していますが、実際は5問でも3問でも、何問でも設定してもOKな仕様です。（問題毎に選択肢の数が違ってもOK）
ただしこの時、ルールとして、「answer配列の一番手前に設定した選択肢を正解とする」仕様にしておいてください。
出題時には選択肢をシャッフルするので問題ありません。
今回はサンプルなので全5問としますが、実際は配列の数だけ出題することも可能です。
全20問のうち、5問をランダムで出題、なんてことも出来ます。
クイズを表示するデザインを作ろう
次に、これらを表示するデザインを考えてみます。
昨今のサイト閲覧ユーザーは、ほとんどがスマートフォンからのアクセスとなっているため、スマートフォンライクなデザインにすることは必要不可欠です。
そのため、画面の縦幅を存分に使用し、上部に問題文、その下に4行使って選択肢を表示してきましょう。
こんなデザインはどうでしょうか。
/* クイズのすべてを管理する親要素 */
.quiz_area{
position: relative;
}
/* 現在の問題数を表示 */
.quiz_area .quiz_no{
font-weight: bold;
}
/* 問題文 */
.quiz_area .quiz_question{
box-sizing: border-box;
padding: 15px;
border: 4px solid #CCC;
font-weight: bold;
}
/* 以下クイズの選択肢のデザイン */
.quiz_area .quiz_ans_area ul{
margin: 10px 0 0 0;
padding: 0;
display: block;
}
.quiz_area .quiz_ans_area ul::after{
content: "";
display: block;
clear: both;
}
.quiz_area .quiz_ans_area ul li{
box-sizing: border-box;
list-style: none;
float: left;
width: 100%;
padding: 10px 15px;
border: 2px solid #CCC;
margin: 0 0 -2px 0;
cursor: pointer;
}
<div class="quiz_area">
第<span class="quiz_no">1</span>問
<div class="quiz_question">ここに問題文が入りますここに問題文が入りますここに問題文が入りますここに問題文が入りますここに問題文が入ります</div>
<div class="quiz_ans_area">
<ul>
<li>選択肢1</li>
<li>選択肢2</li>
<li>選択肢3</li>
<li>選択肢4</li>
</ul>
</div>
</div>
設定したcssとHTMLです。
これだけ見ても何が何やらだと思いますので、次にHTMLと上記のcssを組み合わせたデザインをご確認ください。
- 選択肢1
- 選択肢2
- 選択肢3
- 選択肢4
飾り気のないシンプルな形ですが、どのデバイスでも問題なく表示される仕様としました。
細かなデザインなどはサイトの相性に合わせてお好みでcssに付け足してください。
クイズを表示する処理を作ろう
問題文の設定とクイズのデザインが出来上がりましたので、後は下記の流れでプログラムを組みます。
- STEP1問題文表示作成したデザインに問題文を当てはめる。
- STEP2回答を表示クリック（スマホではタップ）した時に、正解か不正解かを画面に表示する。
これを設定した問題数分繰り返す。 - STEP3最終結果を表示すべての出題が終わったら結果を表示する。
再度クイズに挑戦できるようリスタートボタンも付ける。
では次に、先ほど配列で作成した問題文を、ここのデザインに当てはめていきましょう。
問題文を
<script>
$(function(){
var quizArea = $('.quiz_area'); //クイズを管理するDOMを指定
var quiz_cnt = 0; //現在の問題数を管理
//クイズの配列を設定
//answerの選択肢の数はいくつでもOK ただし先頭を正解とすること(出題時に選択肢はシャッフルされる)
var aryQuiz = [];
aryQuiz.push(
{
question : '次のうち、海に面していない県はどれ？',
answer : ['岐阜', '愛知', '三重', '静岡']
}
,{
question : '祝日「山の日」は何日？',
answer : ['8月11日', '8月24日', '8月17日', '8月5日']
}
,{
question : '東京ヤクルトスワローズのホーム球場はどれ？',
answer : ['明治神宮野球場', '東京ドーム', 'メットライフドーム', 'ZOZOマリンスタジアム']
}
,{
question : '元号「平成」が終わったのはいつ？',
answer : ['2019年4月30日', '2019年3月31日', '2019年5月31日', '2019年2月28日']
}
,{
question : 'SMAPが出したシングル曲で最も売れたのはどれ？',
answer : ['世界に一つだけの花', 'オレンジ', '青いイナズマ', 'SHAKE']
}
);
quizReset();
//リセットを行う関数
function quizReset(){
quiz_cnt = 0;
//aryQuiz = arrShuffle(aryQuiz); //ここのコメントを外すと出題順がランダムになります
quizShow();
}
//問題を表示する関数
function quizShow(){
//何問目かを表示
quizArea.find('.quiz_no').text((quiz_cnt + 1));
//問題文を表示
quizArea.find('.quiz_question').text(aryQuiz[quiz_cnt]['question']);
//正解の回答を取得する
var success = aryQuiz[quiz_cnt]['answer'][0];
//現在の選択肢表示を削除する
quizArea.find('.quiz_ans_area ul').empty();
//問題文の選択肢をシャッフルさせる(自作関数) .concat()は参照渡し対策
var aryHoge = arrShuffle(aryQuiz[quiz_cnt]['answer'].concat());
//問題文の配列を繰り返し表示する
$.each(aryHoge, function(key, value){
var fuga = '<li>' + value + '</li>';
//正解の場合はdata属性を付与する
if(success === value){
fuga = '<li data-true="1">' + value + '</li>';
}
quizArea.find('.quiz_ans_area ul').append(fuga);
});
}
//配列をシャッフルする関数
function arrShuffle(arr){
for(i = arr.length - 1; i > 0; i--){
var j = Math.floor(Math.random() * (i + 1));
var tmp = arr[i];
arr[i] = arr[j];
arr[j] = tmp;
}
return arr;
}
});
</script>
事前に一連のクイズの処理を行うエリアであること宣言するために、quizAreaというDOM変数を最初に読み込みます。
quizArea以下の要素しか変化を加えないようにするための宣言です。
さらに、quizReset関数、quizShow関数を追加し、quizShow関数に問題文表示させる処理を作成しました。
また、問題の進行をカウントするために、quiz_cntというグローバル変数も追加しています。
quizResetは初回読み込み時、そしてリスタート時にquiz_cntを0にする処理を走らせることで、問題をリセットさせることが出来ます。
その他、細かいことは各処理にコメントで解説を添えてあるのでご確認ください。
上記のプログラムを実行すると、下記のようにしっかり問題が当てはまります。
- 愛知
- 静岡
- 三重
- 岐阜
選択肢をクリック（タップ）して回答する
選択肢の表示が終わったら、それを選択して回答をする処理を追加します。
正解、不正解時のデザインを作る
回答時に、正解か不正解か分かりやすく挑戦者に伝えられるよう、クイズ画面に大きく〇（正解）か×（不正解）かを表示させてみましょう。
そのために、HTMLとCSSにいくつか追記します。
/* 回答後に上に被せてタップできなくするための要素（デフォルト非表示、回答後に一時的に表示） */
.quiz_area .quiz_area_bg{
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
z-index: 999;
background: rgba(0, 0, 0, 0.3);
display: none;
color: #FFF;
text-align: center;
}
/* 画面に〇、×を表示するための要素（デフォルト非表示、回答後に一時的に表示） */
.quiz_area .quiz_area_icon{
position: absolute;
box-sizing: border-box;
top: 50%;
left: 50%;
z-index: 9999;
transform: translate(-50%, -50%);
color: red;
display: none;
font-size: 10em;
font-weight: bold;
-webkit-text-stroke: 4px #FFF;
text-stroke: 4px #FFF;
}
/* .trueまたは.falseのクラスが付与されたら表示するものとみなす */
.quiz_area .quiz_area_icon.true, .quiz_area .quiz_area_icon.false{
display: block;
}
/* .trueは正解（〇を表示） */
.quiz_area .quiz_area_icon.true:before{
content: '〇';
color: red;
}
/* .falseは不正解（×を表示） */
.quiz_area .quiz_area_icon.false:before{
content: '×';
color: blue;
}
<div class="quiz_area">
第<span class="quiz_no"></span>問
<div class="quiz_question"></div>
<div class="quiz_ans_area">
<ul></ul>
</div>
<div class="quiz_area_bg"></div><!-- 追加 画面に被せる黒背景 -->
<div class="quiz_area_icon"></div><!-- 追加 マルorバツを中央に表示させるエリア -->
</div>
これは、回答後に一時的に〇か×かを画面に表示させるための追加です。
回答後の一定時間しか画面に表示させないため、デフォルトは非表示で、一時的に表示させてもすぐ非表示に切り替えます。
回答後、正解だったパターンはこのようなデザインに切り替わります。
- 愛知
- 静岡
- 三重
- 岐阜
classの「.quiz_area_icon」に「.true」クラスが追加されると、疑似クラスのbeforeが働き、’〇’がテキストとして追加されます。
逆に不正解だった場合は「.false」となり、画面には’×’が表示されるようになります。
- 愛知
- 静岡
- 三重
- 岐阜
また、どちらの場合でも、同時に画面全体を覆いかぶせる「.quiz_area_bg」を表示状態にします。
これは、回答中に選択肢がタップできる状態になると処理がややこしくなりバグの原因となるのを防ぐためです。
選択肢を選んだ時のイベントを作成する
正解時、不正解時に出す画面のデザインは出来上がりましたので、次はjQueryで処理を作成します。
クリック時（タップ時）に正解か不正解かの判定を行い、その結果を画面に反映させます。
先ほど解説したとおり、.quiz_area_bgを表示状態にし、.quiz_area_iconに「.true」または「.false」を追加すると、先ほどの画面となります。
問題文を表示する処理の時に、正解の選択肢は「data-true=”1″」という属性が付くように設定しましたので、選択した要素に「data-true」属性があるかが正解・不正解の判定となります。
//回答を選択した後の処理
quizArea.on('click', '.quiz_ans_area ul li', function(){
//画面を暗くするボックスを表示（上から重ねて、結果表示中は選択肢のクリックやタップを封じる
quizArea.find('.quiz_area_bg').show();
if($(this).data('success')){
//正解の処理 〇を表示
quizArea.find('.quiz_area_icon').addClass('true');
}else{
//不正解の処理
quizArea.find('.quiz_area_icon').addClass('false');
}
setTimeout(function(){
//表示を元に戻す
quizArea.find('.quiz_area_icon').removeClass('true false');
quizArea.find('.quiz_area_bg').hide();
//問題のカウントを進める
quiz_cnt++;
//次の問題を設定する
quizShow();
}, 1500);
});
選択肢の要素は動的(JavaScript側)で生成したものになるので、$(要素).click()のような、通常のクリックイベントの書き方ではイベントが発火しませんので要注意です。
setTimeout関数を使用し、1.5秒間だけ〇か×かの結果を表示し、1.5秒が経過したら次の問題となるようquizShow関数を呼び出します。
クイズの最終結果を表示させる
最後に、〇問終えたらクイズを終了し、最終結果を表示させるプログラムを書いてみましょう。
クイズを何問で終了させるかを管理させるquiz_fin_cnt、クイズの正解数を管理するquiz_success_cntをグローバル変数として定義します。
そして回答時に、quiz_fin_cntで設定した値と同じになったら、クイズを強制的に終了させてquiz_resultを表示します。
<div class="quiz_area sample">
<div class="quiz_set"><!-- 追加 回答中の表示 -->
第<span class="quiz_no">0</span>問
<div class="quiz_question"></div>
<div class="quiz_ans_area">
<ul></ul>
</div>
<div class="quiz_area_bg"></div>
<div class="quiz_area_icon"></div>
</div>
<div class="quiz_result"></div><!-- 追加 クイズ終了後の表示 -->
</div>
var quiz_fin_cnt = 5; //何問で終了か設定（クイズ数以下であること）
var quiz_success_cnt = 0; //問題の正解数
//回答を選択した後の処理
quizArea.on('click', '.quiz_ans_area ul li', function(){
//画面を暗くするボックスを表示（上から重ねて、結果表示中は選択肢のクリックやタップを封じる
quizArea.find('.quiz_area_bg').show();
if($(this).data('true')){
//正解の処理 〇を表示
quizArea.find('.quiz_area_icon').addClass('true');
//正解数をカウント
quiz_success_cnt++; //追加
}else{
//不正解の処理
quizArea.find('.quiz_area_icon').addClass('false');
}
setTimeout(function(){
//表示を元に戻す
quizArea.find('.quiz_area_icon').removeClass('true false');
quizArea.find('.quiz_area_bg').hide();
//問題のカウントを進める
quiz_cnt++;
if(quiz_fin_cnt > quiz_cnt){ //追加
//次の問題を設定する
quizShow();
}else{
//結果表示画面を表示
quizResult(); //追加
}
}, 1500);
});
//結果を表示する関数
function quizResult(){
quizArea.find('.quiz_set').hide();
$text = quiz_fin_cnt + '問中' + quiz_success_cnt + '問正解！';
if(quiz_fin_cnt === quiz_success_cnt){
$text += '<br>全問正解おめでとう！';
}
$text += '<br><input type="button" value="もう一度挑戦する" class="quiz_restart p-10">';
quizArea.find('.quiz_result').html($text);
quizArea.find('.quiz_result').show();
}
回答後は、問題文と選択肢を表示していたエリア.quiz_setを閉じ、.quiz_resultを表示させます。
そして、.quiz_resultに成績とリスタートボタンを表示させています。
今回は〇問中〇問正解、とだけの表示ですが、点数を付けたり、成績に応じて表示されるコメントが変わったりすると面白いですね。
一応今回は全問正解時に「全問正解おめでとう！」の一行が入る処理を付けています。
完成ソースコードサンプル
では、すべての処理を合わせたソースコードをまとめましたので、再度ご確認お願いします。
CSS
/* クイズのすべてを管理する親要素 */
.quiz_area{
position: relative;
}
/* 回答後に上に被せてタップできなくするための要素（デフォルト非表示、回答後に一時的に表示） */
.quiz_area .quiz_area_bg{
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
z-index: 999;
background: rgba(0, 0, 0, 0.3);
display: none;
color: #FFF;
text-align: center;
}
/* 画面に〇、×を表示するための要素（デフォルト非表示、回答後に一時的に表示） */
.quiz_area .quiz_area_icon{
position: absolute;
box-sizing: border-box;
top: 50%;
left: 50%;
z-index: 9999;
transform: translate(-50%, -50%);
color: red;
display: none;
font-size: 10em;
font-weight: bold;
-webkit-text-stroke: 4px #FFF;
text-stroke: 4px #FFF;
}
/* .trueまたは.falseのクラスが付与されたら表示するものとみなす */
.quiz_area .quiz_area_icon.true, .quiz_area .quiz_area_icon.false{
display: block;
}
/* .trueは正解（〇を表示） */
.quiz_area .quiz_area_icon.true:before{
content: '〇';
color: red;
}
/* .falseは不正解（×を表示） */
.quiz_area .quiz_area_icon.false:before{
content: '×';
color: blue;
}
/* 現在の問題数を表示 */
.quiz_area .quiz_no{
font-weight: bold;
}
/* 問題文と回答後の結果（デザインは使いまわし） */
.quiz_area .quiz_question, .quiz_result{
box-sizing: border-box;
padding: 15px;
border: 4px solid #CCC;
font-weight: bold;
}
/* 回答後の結果は初期非表示 */
.quiz_area .quiz_result{
display: none;
text-align: center;
}
/* 以下クイズの選択肢のデザイン */
.quiz_area .quiz_ans_area ul{
margin: 10px 0 0 0;
padding: 0;
display: block;
}
.quiz_area .quiz_ans_area ul::after{
content: "";
display: block;
clear: both;
}
.quiz_area .quiz_ans_area ul li{
box-sizing: border-box;
list-style: none;
float: left;
width: 100%;
padding: 10px 15px;
border: 2px solid #CCC;
margin: 0 0 -2px 0;
cursor: pointer;
}
HTML
<div class="quiz_area">
<div class="quiz_set">
第<span class="quiz_no">0</span>問
<div class="quiz_question"></div>
<div class="quiz_ans_area">
<ul></ul>
</div>
<div class="quiz_area_bg"></div>
<div class="quiz_area_icon"></div>
</div>
<div class="quiz_result"></div>
</div>
JavaScript(jQuery)
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js?ver=1.12.4'></script>
<script>
$(function(){
var quizArea = $('.quiz_area'); //クイズを管理するDOMを指定
var quiz_html = quizArea.html(); //もう一度 を押した時に元に戻すため初期HTMLを変数で保管
var quiz_cnt = 0; //現在の問題数を管理
var quiz_fin_cnt = 5; //何問で終了か設定（クイズ数以下であること）
var quiz_success_cnt = 0; //問題の正解数
//クイズの配列を設定
//answerの選択肢の数はいくつでもOK ただし先頭を正解とすること(出題時に選択肢はシャッフルされる)
var aryQuiz = [];
aryQuiz.push(
{
question : '次のうち、海に面していない県はどれ？',
answer : ['岐阜', '愛知', '三重', '静岡']
}
,{
question : '祝日「山の日」は何日？',
answer : ['8月11日', '8月24日', '8月17日', '8月5日']
}
,{
question : '東京ヤクルトスワローズのホーム球場はどれ？',
answer : ['明治神宮野球場', '東京ドーム', 'メットライフドーム', 'ZOZOマリンスタジアム']
}
,{
question : '元号「平成」が終わったのはいつ？',
answer : ['2019年4月30日', '2019年3月31日', '2019年5月31日', '2019年2月28日']
}
,{
question : 'SMAPが出したシングル曲で最も売れたのはどれ？',
answer : ['世界に一つだけの花', 'オレンジ', '青いイナズマ', 'SHAKE']
}
);
quizReset();
//回答を選択した後の処理
quizArea.on('click', '.quiz_ans_area ul li', function(){
//画面を暗くするボックスを表示（上から重ねて、結果表示中は選択肢のクリックやタップを封じる
quizArea.find('.quiz_area_bg').show();
if($(this).data('true')){
//正解の処理 〇を表示
quizArea.find('.quiz_area_icon').addClass('true');
//正解数をカウント
quiz_success_cnt++;
}else{
//不正解の処理
quizArea.find('.quiz_area_icon').addClass('false');
}
setTimeout(function(){
//表示を元に戻す
quizArea.find('.quiz_area_icon').removeClass('true false');
quizArea.find('.quiz_area_bg').hide();
//問題のカウントを進める
quiz_cnt++;
if(quiz_fin_cnt > quiz_cnt){
//次の問題を設定する
quizShow();
}else{
//結果表示画面を表示
quizResult();
}
}, 1500);
});
//もう一度挑戦するを押した時の処理
quizArea.on('click', '.quiz_restart', function(){
quizReset();
});
//リセットを行う関数
function quizReset(){
quizArea.html(quiz_html); //表示を元に戻す
quiz_cnt = 0;
quiz_success_cnt = 0;
//aryQuiz = arrShuffle(aryQuiz); //毎回出題の順番をシャッフルしたい場合はここのコメントを消してね
quizShow();
}
//問題を表示する関数
function quizShow(){
//何問目かを表示
quizArea.find('.quiz_no').text((quiz_cnt + 1));
//問題文を表示
quizArea.find('.quiz_question').text(aryQuiz[quiz_cnt]['question']);
//正解の回答を取得する
var success = aryQuiz[quiz_cnt]['answer'][0];
//現在の選択肢表示を削除する
quizArea.find('.quiz_ans_area ul').empty();
//問題文の選択肢をシャッフルさせる(自作関数) .concat()は参照渡し対策
var aryHoge = arrShuffle(aryQuiz[quiz_cnt]['answer'].concat());
//問題文の配列を繰り返し表示する
$.each(aryHoge, function(key, value){
var fuga = '<li>' + value + '</li>';
//正解の場合はdata属性を付与する
if(success === value){
fuga = '<li data-true="1">' + value + '</li>';
}
quizArea.find('.quiz_ans_area ul').append(fuga);
});
}
//結果を表示する関数
function quizResult(){
quizArea.find('.quiz_set').hide();
$text = quiz_fin_cnt + '問中' + quiz_success_cnt + '問正解！';
if(quiz_fin_cnt === quiz_success_cnt){
$text += '<br>全問正解おめでとう！';
}
$text += '<br><input type="button" value="もう一度挑戦する" class="quiz_restart">';
quizArea.find('.quiz_result').html($text);
quizArea.find('.quiz_result').show();
}
//配列をシャッフルする関数
function arrShuffle(arr){
for(i = arr.length - 1; i > 0; i--){
var j = Math.floor(Math.random() * (i + 1));
var tmp = arr[i];
arr[i] = arr[j];
arr[j] = tmp;
}
return arr;
}
});
</script>
その場合はお好みで調整をしてください。
さらにカスタマイズをかけたい場合は、ツイートボタンを付けてみるのがオススメ
クイズというコンテンツは、得てして拡散されやすいコンテンツです。
良い点数を取った時は自慢のため、悪い点数の場合は自虐のための自己顕示欲が満たされやすいからだと思います。
私が最初に作ったクイズは、結果画面でツイートボタンを付けただけで、1日に1000ツイートもされる盛り上がりを見せてくれました。
繰り返しますが、クイズを拡散させたい場合は、ツイートボタンは必須で付けたほうが良いです。
上記のクイズにツイートリンクを付けるだけのため、簡単だと思いますので、是非挑戦してみてください。
このプログラムを使用したある漫画のクイズを作ったよ
わたモテという漫画好きが昂じて、このプログラムを使って100問クイズを作ってみました。
このプログラムでは解説していない、
- ツイート機能
- 難易度表示（１～５）
- 正解率表示（サーバーサイド連携）
などをカスタマイズで追加しています。
なるべくシンプルにjQueryでクイズの処理について解説してみたつもりです。
画像や素材なしで作ることが出来るため、クイズコンテンツを設けたいサイト様は是非こちらに挑戦してみてくださいね。
コメント