僕は気軽に楽しめるコンテンツの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(); //選択した回答に色を付ける $(this).addClass('selected'); 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_ans_area ul li').removeClass('selected'); 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(); var 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; } .quiz_area .quiz_ans_area ul li.selected{ background-color: #bcbcbc; }
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(); //選択した回答に色を付ける $(this).addClass('selected'); 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_ans_area ul li').removeClass('selected'); 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(); var 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(); } //配列をシャッフルする関数 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問クイズを作ってみました。
このプログラムでは解説していない、
- ツイート機能
- 難易度表示(1~5)
- 正解率表示(サーバーサイド連携)
などをカスタマイズで追加しています。
サーバーサイドへの連携は、Ajaxという通信方法を使用して実装しています。
jQueryのAjaxについて解説した記事もありますので是非ご確認ください。

なるべくシンプルにjQueryでクイズの処理について解説してみたつもりです。
画像や素材なしで作ることが出来るため、クイズコンテンツを設けたいサイト様は是非こちらに挑戦してみてくださいね。
コメント
キノコログ様
初めまして、渡辺裕治と申します。
>jQueryでクイズプログラムを作成【サンプル有】
>https://kinocolog.com/jquery_quiz/
こちらのブログ内容につきまして、大変有意義なご提供誠にありがとうございます。
JavaScriptの配列で質問がございます。
question : ‘次のうち、海に面していない県はどれ?’,
answer : [‘岐阜’, ‘愛知’, ‘三重’, ‘静岡’]
上記のプログラムでございますが、2行目の
answer : [‘岐阜’, ‘愛知’, ‘三重’, ‘静岡’] は
answer : [‘岐阜tmp’, ‘愛知’, ‘三重’, ‘静岡’]
のようにhtmlでの記載が可能でございますが、
1行目の
question : ‘次のうち、海に面していない県はどれ?’, は
question : ‘次のうち、海に面していない県はどれ?tmp’,
のようにhtmlでの記載が出来ません。。
初心者の質問で申し訳ございませんが、どのように修正すれば
問題文もhtmlでの記載が可能になるのでしょうか。
お忙しいところ恐縮ですが、ご教示いただけますと大変助かります。
何卒宜しくお願い致します。
渡辺裕治
初めまして、渡辺様。
ご覧いただきましてありがとうございます。
問題文にhtmlタグを含めたい場合は、表示処理の.text()を.html()に変えて頂ければ動くと思われます。
quizArea.find(‘.quiz_question’).text(aryQuiz[quiz_cnt][‘question’]);
↓
quizArea.find(‘.quiz_question’).html(aryQuiz[quiz_cnt][‘question’]);
一度お試しください。
キノコログ様
はじめてお問い合わせいたします、佐藤と申します。
とても良いソースの共有ありがとうございます。
初心者で大変恐縮ではありますが、
試行錯誤やっております。
下記「もう一度挑戦する」の箇所を
別ページにリンクさせたいと考えております。
その術が分からずお問い合わせさせていただきました。
お手数をお掛けいたしますが、
ご教授いただけますでしょうか。
何卒よろしくお願いいたします。
$text += ”;
quizArea.find(‘.quiz_result’).html($text);
quizArea.find(‘.quiz_result’).show();
コメントありがとうございます。
別ページの場合は、ボタンの所をaタグに置き換えてhrefに指定のURLを貼ればそのように動くと思いますが、こちらの解釈で合ってますか?
キノコログ
nocho様
ご確認いただきまして
ありがとうございます。
下記の様に設定をすれば問題なく解決できました
ありがとうございます。
$text += ‘‘;
quizArea.find(‘.quiz_result’).html($text);
quizArea.find(‘.quiz_result’).show();
quizArea.findはそのままに残しておりますが、
支障はない動作ですが、
そのまま残していても問題ないでしょうか?
詳しくは該当のページを見ないと分かりませんが、セレクタのquizArea.findは必要だと思います。
nocho 様
ご確認いただきまして
ありがとうございます。
このまま進めてまいります。
また他のページも色々参考にさせていただきます。
いつも助かっております。
ありがとうございます。
本サイトのJqueryとサーバサイドはPHPにして、Ajaxで繋いでみました。
まだまだ勉強中でなかなか難しいですが、このサイトのおかげでどうにかアプリを完成させるところまでにできました。大変助かりました。ありがとうございました!
https://simple-was-best.com/rikutoku_app
ありがとうございます!
コメント頂けたことはとても励みになります。
1問毎にしっかり答えと問題を照らし合わせられるようにカスタマイズされたのですね。
お世話になります。
サイトづくりでとても参考にさせていただいております。
初心者で行き詰っておりまして質問のご対応をいただけると嬉しいです。
「answer配列の一番手前に設定した選択肢を正解とする」仕様を変更して、
問題ごとに正解の選択肢を設定したいのですがどのようにするのが最適でしょうか。
具体的には、全問題の選択肢をA・B・C・D・・・(アルファベット順)で並び順を保ちつつ、
正解を問題ごとに設定したいと考えております。
お忙しい中恐れ入りますが、ご教授いただけますと助かります。
何卒よろしくお願い致します。
コメントありがとうございます。
選択肢の順番を指定したい場合は、別のプロパティで正解か判定できる仕様にするのが良いかと思います。
aryQuiz変数の設定時に、
question : ‘次のうち、海に面していない県はどれ?’,
bingo : ‘岐阜’,
answer : [‘愛知’, ‘岐阜’, ‘三重’, ‘静岡’]
という正解用の「bingo」を新規で設定し、
var success = aryQuiz[quiz_cnt][‘answer’][0];
の箇所を
var success = aryQuiz[quiz_cnt][‘bingo’];
と変更し、加えて配列のシャッフル部分もなくします。
var aryHoge = aryQuiz[quiz_cnt][‘answer’];
いくつか方法は他にもありますが、考え方の1つとして参考にしてみてください。
ご回答いただきまして、ありがとうございます。
ご返信が遅くなってしまい申し訳御座いません。
いただいたアドバイスで望んだサイトを作ることができました!
ありがとうございました!
お世話になります。
初心者で初歩的な質問になってしまいますが、すみません。
1つのフォルダに .cssファイル、.htmlファイル、.jsファイルをコピペして作ったのですが、ページを表示しても、第0問 としか反映されません。
本当に初歩的で申し訳ないですが、ご回答よろしくお願いいたします。
多分jsファイルが上手く読み込めていないと思うので、scriptのsrcが正しい場所を指しているか確認してみてください。
お返事ありがとうございます。コメント遅れてすみません。
jsファイル内の最新版の
を貼り付けても「第0問」の表示のままで上手くいきませんでした。
htmlファイル内に下記を貼り付けてテストしてみましたが、h1タグ内を表示できました。
jQueryチェック
jQueryライブラリー読み込みテスト
alert($(“h1”).text());
3つのファイルをそのままコピペして作りましたが、何か付け足すことはありますか?
初歩的な質問で申し訳ございませんが、よろしくお願いいたします。
ちょっと頂いた情報ではよく分からないので、動作を確認できるURLなどを教えて頂ければ答えられるかもしれません。
お世話になります。
本プログラムにつきまして、サイトづくりに参考にさせていただいております。
カスタムする中で以下実装について質問です。
①:選択肢クリック後の○✗表示時、setTimeoutではなく【次の問題】ボタンクリックで次問題へ以降、という処理の場合の変更箇所。
②:上記○✗表示時に、選んだ選択肢の表示
③:点数に応じてたメッセージ(html)の表示
上記3点についてご教授いただけるでしょうか。
ご確認のほどよろしくお願いいたします。
1.回答後にボタンを表示させる要素と処理を追加して、そこでsetTimeout内のクリックイベントを発火させれば可能です。
動的に追加した要素はonでしか動作しないので注意
2.イベント内で$(this).text()などで取得できます。
3.quizResult関数でquiz_success_cntの数値に応じてif文で対応できます。
キノコログ様
ご返答ありがとうございます!
いただきました内容で調整することができました
誠にありがとうございます!
コメントありがとうございます。
まだまだ勉強不足ですみません。
URLを提示したいのですが、どのファイルのどれを提示すればいいのかも分かってません。
もう少し勉強してから質問しようと思います。
キノコログ様
はじめまして。江中と申します。
クイズの作り方とても参考にさせていただいております。
ただひとつ行き詰まったところがありまして、
不正解の時に、正解の欄に色をつけたいのですがなかなか上手くいきません。
初歩的な質問かもしれませんが、ご教授頂ければ幸いです。
quizArea.find(‘[data-true]’).css(‘background-color’, ‘yellow’);
を不正解時に追加すれば多分似たような処理になると思います。
素早いご対応ありがとうございます。
上手く表示することができました!
自分で色々やっては見たんですけどどれも上手くいかなかったので、大変勉強になりました。
本当にありがとうございます!
キノコログ様
はじめまして。石井と申します。
クイズの作り方とても参考にさせていただいております。
一点、初歩的な質問になっていまうかもしれないですが、
問題部分のみをjsonして別ファイルで扱えるようにすることは可能でしょうか?
ご教授のほど、よろしくおねがい致します。
jsonファイルとして書き込んだものを取得すれば出来ますよ。
ajaxなどを使用すればデータベースからの取得も出来ます。
aryQuizの中身を手書きではなく、取得処理に置き換えてください。
nochoさま
ご返信いただきありがとうございます
json化につきまして、上記aryQuizの書き換えで対応できました
大変勉強になりました
ありがとうございます!
キノコログ様
いつも大変参考にさせていただいております。
少し自分でも変更を加えたいと考えていて、
その過程で行き詰ってしまったので、コメントさせていただきました。
選択肢の部分に解答欄とボタンを設置し、解答欄に入力された文字列と”answer”に用意された文字列を比較して、
一致しているか否かで正誤を判断するようにしたいと考えています。
現在、解答欄とボタンは設置したのですが、解答欄に正しく入力された文字列に対して “True” を与える方法が分かりません。
初歩的な質問かもしれませんが、ご教示して頂きたいです。
お手数おかけしますが、何卒よろしくお願いいたします。
遅れてすいません。
input type=”text”で回答をするタイプということでしょうか。
$(入力フォームのタグ).val() == answerで比較をすれば、むしろそっちのほうが簡単そうですが、もしどこかで公開していたら教えてください。
具体的に伝えられそうなので。
のちょう様、
回答ありがとうございます。
私も比較する方が簡単だと気付き、その方法で実装することができました。
ありがとうございました。
はじめまして。林と申します。
初心者ですが、クイズを作ろうと奮闘しています。
思うように作成できず困っていたところ、キノコログ様のサイトに出会うことができました。
大変わかりやすく、初心者の私でもクイズを作成することができ,
感動しています。
ありがとうございます。
次は、画像を見て答えるクイズを作ろうと思い、
試行錯誤しているのですが、思うように表示されません。
問題が文ではなく、画像の場合はどのように書き込めばよいのでしょうか。
初心者の私でもできるでしょうか。
お手数をおかけしますが、ご教授いただけたら幸いです。
よろしくお願いいたします。
嬉しいお言葉ありがとうございます。
画像を入れたい場合は、問題文に画像のURL等のデータを追加しなくてはいけません。
pushしている問題文すべてに下記のように追加してください。
question : ‘次のうち、海に面していない県はどれ?’,
answer : [‘岐阜’, ‘愛知’, ‘三重’, ‘静岡’],
image : ‘画像のURL’
後は、問題文にimgタグを置き、画像のsrc部分を問題文の「image」に書き換えれば出来るかと思います。
こちらの記事もご確認ください。
https://kinocolog.com/jquery_attr_prop/
ありがとうございます。詳しく教えていただきうれしく思います。
早速、pushに画像追加し、imgタグを置きsrc部分を「image」に置き換えてみました。
しかし、置き換え方がうまくできていないようで、問題が変わるごとに画像が変化しません。
教えていただいた「attrの使いかた」を再度読み、挑戦してみます。
初めまして。
クイズを自作してみたいと検索しており、このサイトを拝見いたしました。
詳しく作り方を説明していただいていたので
設置はできたのですがカスタマイズについて教えていただければと思う事があり
ご連絡させていただきました。
初期設定では全問正解時だけ「全問正解おめでとう」と表示される設定となっており
これを画像に変えることはできたのですが
例えば1問正解時はこの画像、2問正解時はこの画像・・・と
正解数に応じて画像を設定する方法がわかりませんでした。
if(quiz_fin_cnt === quiz_success_cnt)あたりをいじり
追加していくのかと色々試してみましたが
どうしてもできませんでした。
ど素人の質問で大変恐縮ですが
ご教示いただけますと幸いです。
何卒よろしくお願い申し上げます。
コメントありがとうございます。
あまり視認性は良くないですが、普通に↓の書き方でいけると思います。
分岐を増やしたい場合はelse ifを追加してください。
if(quiz_success_cnt === 1){
//1問正解時
}else if(quiz_success_cnt === 2){
//2問正解時
}
ご返信遅くなり申し訳ありません。
こんなに早く返信いただけるとおもっていませんでした。
教えていただいた記述でばっちりできました!
ご親切に本当にありがとうございます。
はじめまして。K.Aと申します。
初心者ですが、私もクイズを作ろうと奮闘しています。
キノコログ様のサイトを拝見して本コードが理想の動きに近いものだった為、
勉強を兼ねてコードを拝見しております。
問題文+画像を表示するクイズを作ろうと思い、
試行錯誤しているのですが、思うように表示されません。
途中、林様も同じように悩まれているようでしたが、
アドバイスの内容を拝見しても私のレベルでは理解が出来ず。。。
※参考サイトも拝見いたしましたが分からずでした…。
試してみたこと
「aryQuiz.push(」…image:’画像URL’の追加
//問題を表示する関数
「function quizShow(){」
→ここに画像を読み込む式を書けばいいのかと、奮闘するも分からず…
お手数をおかけしますが、ご教授いただけたら幸いです。
よろしくお願いいたします。
aryQuiz.pushで、画像のプロパティも追加されているとのことなので、すべての問題に画像が付く前提ですが、.quiz_area内に
![]()
というものを追加して、(src内に適当な画像入れておいてください)
quizShow()で、
quizArea.find(‘.quiz_image’).attr(‘src’, aryQuiz[quiz_cnt][‘image’]);
という処理を書けば多分出来ると思います。
お世話になります。
JavaScriptの練習のためにクイズを作成をしてみました。こちらを利用させて頂き、非常に助かっております。
以前別の方が質問されてますが、不正解時に×とともに解答表示、もしくは正解の選択肢に色付けをしたく思い、色々調べてやりますが、なかなかうまくいきません。
上記にあるような、
quizArea.find(‘[data-true]’).css(‘background-color’, ‘yellow’);
はどこどのように入れたら良いのでしょうか?
不正解の処理の部分に入れたり、他のな部分に試しに入れますが、入れる度に機能しなくなります。
よろしくお願いいたします。
//不正解の処理
と書かれたelse文にその記述を入れれば動くかと思います。
nocho様
とてもためになるソースの共有、誠にありがとうございます。
カテゴリごとのクイズの表示について、試行錯誤をしており、質問がございます。
具体的には、HTML側で以下を用意し、
var category1 = ‘カレンダー’;
JavaScript(jQuery)側で、以下のようにcategory2を用意し、
var aryQuiz = [];
aryQuiz.push(
{
category2 : ‘都道府県’,
question : ‘次のうち、海に面していない県はどれ?’,
answer : [‘岐阜’, ‘愛知’, ‘三重’, ‘静岡’]
}
,{
category2 : ‘カレンダー’,
answer : [‘8月11日’, ‘8月24日’, ‘8月17日’, ‘8月5日’]
}
,{
category2 : ‘球場’,
question : ‘東京ヤクルトスワローズのホーム球場はどれ?’,
answer : [‘明治神宮野球場’, ‘東京ドーム’, ‘メットライフドーム’, ‘ZOZOマリンスタジアム’]
}
,{
category2 : ‘カレンダー,元号’,
question : ‘元号「平成」が終わったのはいつ?’,
answer : [‘2019年4月30日’, ‘2019年3月31日’, ‘2019年5月31日’, ‘2019年2月28日’]
}
,{
category2 : ‘芸能’,
question : ‘SMAPが出したシングル曲で最も売れたのはどれ?’,
answer : [‘世界に一つだけの花’, ‘オレンジ’, ‘青いイナズマ’, ‘SHAKE’]
}
);
上記HTMLで準備したクイズが始まると
’東京ヤクルトスワローズのホーム球場はどれ?’
’元号「平成」が終わったのはいつ?’
のみの問題を表示させることは可能でしょうか。
(category2にcategory1の内容が含まれていれば表示を考えております)
もし可能であれば、ご教示のほどよろしくお願いいたします。
可能ですが、クイズ配列の生成箇所を変えないといけないので、修正点がかなり多くここで伝えきるには厳しいです…。
キノコログ様
はじめまして。
とても有益な情報ありがとうございます。
クイズコンテンツ制作の参考にさせて頂いており、とても助かっています。
一点お伺いしたいのですが、こちらのスクリプトに制限時間(最初の問題が始まってから最後の問題を解き終えるまで)を設けることは可能でしょうか?
自身でいろいろ試してみましたがなかなかうまくいかず、ご教授頂ければ幸いです。
機能としては十分可能ですが、やることがかなり多いので、ちょっとここで説明するのは難しいです。
クイズスタートと同時にsetInterval()関数を使用してタイマーをスタートし、タイマーを過ぎたらquizResult()関数を強制実行のような
イメージで進めていけば大丈夫かと思います。
のちょう様
ご返信頂きありがとうございます。
早速試してみたいと思います。
ありがとうございます!
はじめまして。N_T と申します。
高齢初心者ですが、私もクイズを作ろうと日々奮闘しています。
いろいろなサイトを参考にさせていただき、ようやくキノコログ様のサイトにたどり着き、
日々勉強をさせていただいております。ありがとうございます。
本日はどうしても、先に進めないことがあり、コメントをさせていただきました。
現在、問題文・画像(例:国旗png)を表示し解答を4択でおこなうクイズを作ろうと思い、奮闘しておりますが、どうしても画像だけが表示されません。
以前に林様、K.A様も同じようにコメントをされており、その内容や参考サイトを拝見しながら努力をしておりましたがダメでした。
恥ずかしながら同じ質問になり申し訳ございませんが、ご教授いただけないでしょうか。
(先に進めない内容)
各問題に応じた写真をフォルダー内(images/A_001.png等)から参照して表示させたいのですが写真だけが表示されません。キノコログ様のHTML、CSS、jsに、どのようなコードを入れればよいでしょうか。初心者で申し訳ございません。よろしくお願いいたします。
ソースコードをそのまま提示頂くか、どこかのサーバーで上げたものを確認出来ればわかるかもしれません。
ご返事を頂きましてありがとうございます。
2021/1/11のk.Aさんのコメントで、
「aryQuiz.pushで、画像のプロパティも追加されているとのことなので、すべての問題に画像が付く前提ですが、.quiz_area内に
というものを追加して、(src内に適当な画像入れておいてください)」
とありますが、.quiz_area内にどのようなものを追加すれば良いのでしょうか?
よろしくお願いします。
現在のコードを下記に示します。国旗の画像が未だに出ません…。
よろしくお願いします。
var aryQuiz = [];
aryQuiz.push(
{
question : ‘次の国旗の国名は?’,
Image:‘.images/q001.png’,
answer : [‘日本’, ‘アメリカ’, ‘イギリス’, ‘フランス’]
}
,{
question : ‘次の国旗の国名は?’,
Image:‘.images/q002.png’,
answer : [‘日本’, ‘アメリカ’, ‘イギリス’, ‘フランス’]
}
);
■quizShow()で、
//何問目かを表示
quizArea.find(‘.quiz_no’).text((quiz_cnt + 1));
//問題文を表示quizArea.find(‘.quiz_question’).text(aryQuiz[quiz_cnt][‘question’]);
//国旗imageの表示
quizArea.find(‘.quiz_image’).attr(‘src’, aryQuiz[quiz_cnt][‘image’]);
問題表示部分に画像タグは追加していますか?
<div class="quiz_area">の中です。
無ければ↓を<div class="quiz_question"></div>の下に追記してください。
<img class="quiz_image" src="">
それでも表示されない場合、画像のURLが間違っている場合があるので、絶対タグでも一度試してみてください。(http~から始まる形で)
はじめまして。
非常に参考になるソースコードの公開、ありがとうございます。
私は非営利の団体に所属しているものなのですが、
その団体のコンテンツの1つとして、
こちらのソースコードを使用し作成したクイズ(子ども向け)
を公開させていただくことは可能でしょうか。
わざわざご連絡ありがとうございます。ご自由にお使いください。
ありがとうございます。使用させていただきます。
はじめまして。
商用利用で使用させていただくことは可能でしょうか。
お客様にクイズに答えて頂いて、正解者へクーポン券を
配布したいと考えております。
恐縮ではございますが、ご回答の程よろしくお願いいたします。
ご自由にお使いください。
このURLが書かれていると嬉しいですが、なくても良いです。