質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

○×クイズで答えの正誤の設定しているのはどこですか?

believe
believe

総合スコア63

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

3回答

-10評価

0クリップ

416閲覧

投稿2022/04/03 08:25

前提・実現したいこと
例えばこの部分で[岐阜]が正解だと設定している場所はどこでしょうか?
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>

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

meg_

2022/04/03 08:40

質問のコードはどこからの引用ですか?引用元を明記しましょう。
1T2R3M4

2022/04/03 08:56

teratailはサポートセンターではなく、思考するエンジニアの為のQ&Aコミュニティです

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。