クイズアプリを作ってjQueryの基礎を学ぶ 第２回(全２回)

jQueryクイズアプリ

今回は第１回で作成したクイズアプリをjQueryに書き換えて作っていきます。
　・クイズアプリを作ってフロントエンドの基礎を学ぶ　第１回(全２回)

jQueryはJavaScriptのライブラリーです。
ライブラリーは、JavaScriptの複雑な処理をより簡単に使⽤できるようにします。
jQueryを使うには、オフィシャルサイトからライブラリーをダウンロード、またはWebにあるURLを使用します。
今回はURLを使用して書いていきます。

・HTML内で、 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> を追記します。

jsファイル内でjQuery使うには、以下のようにライブラリーを先に読み込ませる必要があります。
HTMLの全てのタグが、上から下へタグ毎に実⾏されます。例えばライブラリーのタグを⼀番下に置けば、jsの実⾏時はライブラリーが存在しないままになってしまい、エラーが出ます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/data.js"></script>
<script src="js/jquery-app.js"></script>
<!-- <script src="js/app.js"></script> -->

jQuery構⽂

jQueryは、HTMLの要素を選択し、要素に対して何らかのアクションを実⾏することができます。
"$"はjQueryを定義するための記号です。
$("a").hide() : すべての <a> 要素を⾮表⽰にします。

最も使⽤されているjQueryセレクター
$("a") : 要素セレクター
$("#idName") : HTMLタグのid属性を使⽤して要素を⾒つけます
$(".className") : HTMLタグのclass属性を使⽤して要素を⾒つけます
IDの場合は"#"とID名、classの場合は"."とクラス名

⼀般的に使⽤されるjQueryイベント
click() : この関数は、ユーザーがHTML要素をクリックすると実⾏されます

$("a").click(function(){
  alert("click")
  $(this).hide();
});

dblclick() : この関数は、ユーザーがHTML要素をダブルクリックすると実⾏されます

$("a").dblclick(function(){
  alert("double-clicks")
  $(this).hide();
});

mouseleave() : マウスがHTML要素から離れると、関数が実⾏されます

$("a").mouseleave(function(){
  alert("mouseleave");
});

hover() : 最初の関数は、マウスがHTML要素に⼊ったときに実⾏され、2番⽬の関数はマウスがHTML要素から離れたときに実⾏されます

$("a").hover(function(){
   alert("In");
},
function(){
   alert("Out");
});

on() : 選択した要素に1つ以上のイベントを付けることができます

$("a").on({
 click: function(){
 alert("click");
 },
 dblclick: function(){
 alert("dblclick");
 }
});

クイズアプリをjQueryに書き換える

1.jQueryライブラリーをjsフォルダーに配置し、HTMLにjQueryのタグを追加します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2.jquery-app.jsファイルを作成してapp.jsで実装した要素のセレクター、イベントなどをJavaScript構⽂からjQuery構⽂に書き換えてください。

3.HTMLにjquery-app.jsファイルのタグを追加します。
<script src="js/jquery-app.js"></script>

// htmlからDOMの取得
var content = $("#mainContent");
var question = $("#question");
var choice = $("#choice");
var submit = $("#submit");

//　初期値
var turn = 0;
var score = 0;
var askingQuestion = true;
var setTimer = 6;

// 残り時間の表示
var timer = setInterval(function () {
  $("#time").html("残り: " + setTimer + "秒");
  setTimer--;
  if (setTimer === 0) {
    clearInterval(timer);
    $("#time").text("終了");
    alert("タイムアップ！");
    showResults();
  }
}, 1000);

//　クイズデータの表示と選択肢の表示
function createQst() {
  var choices = quizData[turn].choices;
  var choicesHtml = "";
  for (var i = 0; i < choices.length; i++) {
    choicesHtml += "<input type='radio' name='quiz" + turn + "' id='choice" + (i + 1) + "' value='" + choices[i] + "'>" + " <label for='choice" + (i + 1) + "'>" +
      choices[i] + "</label><br>";
  }
  question.text("No." + (turn + 1) + " " + quizData[turn].question);
  choice.html(choicesHtml);
  if (turn === 0) {
    submit.text("Submit");
  }
}

//　正誤判定
function checking() {
  if (askingQuestion) {
    submit.text("Next");
    askingQuestion = false;
    var selectedAnsw;
    var correctIndex;
    var radios = $("[name='quiz" + turn + "']");
    for (var i = 0; i < radios.length; i++) {
      if (radios[i].checked) {
        selectedAnsw = radios[i].value;
      }
      if (radios[i].value == quizData[turn].correct) {
        correctIndex = i;
      }
    }
    var label = $("label")[correctIndex];
    $(label).css("font-weight", "bold");
    if (selectedAnsw == quizData[turn].correct) {
      score++;
      $(label).css('color', 'green');
    } else {
      $(label).css('color', 'red');
    }
  } else {
    askingQuestion = true;
    submit.text("Submit");
    if (turn < quizData.length - 1) {
      turn++;
      createQst();
    } else {
      clearInterval(timer);
      showResults();
    }
  }
}

//　結果表示
function showResults() {
  if (score != 0) {
    content.html("<h2>お疲れ様でした！</h2>" +
      "<h2>以下結果になります、</h2>" +
      "<h2>" + quizData.length + "問中、" + score + "問正解、" +
      Math.round(score / quizData.length * 100) + "%<h2>");
  }
  else {
    content.html("<h2>お疲れ様でした！</h2>" +
      "<h2>以下結果になります、</h2>" +
      "<h2 style='color:red'>全問不正解！<h2>");
  }
}

$(document).ready(function () {
  createQst();
});

submit.click(function () {
  checking();
});

jQueryの書き換えは終了です。下記課題を自分で調べて機能を追加してみましょう！

###課題

• 結果の画⾯でやり直しのボタンを追加
• 答え終わった時にタイマーを⽌める
• 問題をランダムに出す