前提・実現したいこと
例えばこの部分で[岐阜]が正解だと設定している場所はどこでしょうか?
question : '次のうち、海に面していない県はどれ?',
answer : ['岐阜', '愛知', '三重', '静岡']
該当のソースコード
javascript
<head> <style> /* クイズのすべてを管理する親要素 */ .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; } </style> </head> <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> <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>
まだ回答がついていません
会員登録して回答してみよう