概要
bootstrapの勉強がてら漢字の読み仮名当てクイズを作ってみた。
- 読み仮名が表示される
- トグルかから読み方を表示する
- 次の問題ボタンで次の問題が表示される。
実際作ったサイトは以下。 https://mahimahironron.hateblo.jp/Kanji_quiz
やったことの解説
実際に作ったサイトは以下。bootstrapの練習として始めたのにほとんどハマったのはjquery周りだったので、今後の努力が必要そうな気がする。
bootstrap
正直公式のWebページを見た方が早い。利用したのは以下。
badge: 第n問の表示部分に使用。タグなどの表示用に使いやすい。 https://getbootstrap.jp/docs/4.2/components/badge/#pill-badges
alert: 見て欲しい部分の色分けように使用。 https://getbootstrap.jp/docs/4.2/components/alerts/
トグル: ボタンが押された時に答えが表示されるようにするため使用https://getbootstrap.jp/docs/4.2/components/navbar/#toggler
カード: 将来的に問題の部分に画像を入れたいので使用 https://getbootstrap.jp/docs/4.2/components/card/#horizontal
jquery
クラスのAND条件で要素を指定する
<div class="question_item current"> <span class="question"> 薔薇 </span> <span class="answer"> ばら </span> <p class="description"> 実は実は「薔」だけで「ばら」と読む。そのほかにも「みずたで」と読む。 </p> </div>
var correct_ans = $('.question_item.current').find(".answer").text();
上のように「.クラス１.クラス2」とすることでAND条件指定することができます。
inputの入力値をとってくる。
inputタイプの入力欄に入力された値をとってくるにはtest()メソッドではなくval()メソッドを使用する
<input type="text" id="user_ans" placeholder="回答記入欄">
var user_ans = $('#user_ans').val();
上のように「要素.val()」で入力された値をとってくることができます。
セレクタのAND指定、OR指定
- OR指定 カンマを使います。
$(要素, 要素)
要素数を取得する
length()メソッドを使用すればとってくることができる。
var next_num = Math.floor( Math.random() * questions.length );
jqueryで配列っぽく扱う方法
eachメソッドがあるので、findなどでとってきたら[n]で配列っぽく扱えると思ってたができなかったので注意。 jqueryでfindなどでとった複数要素を扱うためには以下のようにする
var questions = $(".questions").find(".question_item"); $(".question_item.current").removeClass("current");
上のように書くとquestionsクラスは以下のquestion_itemクラスを全てfindで取得して、n番目の要素に対して処理を行うことができます。今回はクラスを除去する処理を行なっています。
