jQuery UIを利用してダイアログ表示

```jQuery UI```を使って、クイズを作る。テキストボックスに答えを入力して、送信ボタンを押すと正解か不正解かのダイアログを表示する。
```jQuery```を使うのは初めてであり、```Javascript```もこれまであまり触ってこなかったので、足跡をここに記す。

まず、`html`ファイルを作り、デザインを整える。

```html:quiz.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ワイのホームページ</title>
    <link rel='stylesheet' href='../static/style.css'>
  </head>

  <body>
    <li><a href='javascript:quiz()'>クイズ</a></li><br>
    <h2 style='text-align: center;'>ITクイズ～基礎編～</h2>
    <div style='display: inline-flex;'>
      <p class="q_sentences">１．OSI参照モデルにおいて、下層に信頼性の高いデータ転送サービスを提供し担保することで、クライアント-サーバー間のデータ通信をエラー無く行うようにする層のことを何というか。</p>
      <form>
        <input type="text" class="entrybox" id='entrybox'>
        <input type="button" class="ans_btn" id="btn_action" value="送信する">
      </form>
    </div>

  </body>

</html>
```
こんな感じで。
![Screenshot_2019-12-13 ワイのホームページ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280072/74cf54b6-5aec-c840-63fb-ea5a74a76213.png)
ちなみにこの正解は「トランスポート層」。ここから、入力フォームに正解を入力して送信ボタンをクリックしたとき、正解ダイアログを表示。不正解の解答を入力すると、1回目はヒントを表示。２回目に正答を入力すると、正解ダイアログを表示し、２回目も誤答すると答えを表示する、という機能を付ける。
デフォルトのダイアログだとつまらないので、jQuery UIを使用する。まずはヘッダー部分にjsライブラリと、jsファイルを作りインポート。

```html:quiz.html
<head>
<title>ワイのホームページ</title>
    <link rel='stylesheet' href='../static/style.css'>
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- jQuery UI -->
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <!-- jsファイル -->
    <script type="text/javascript" src='quiz.js'></script>
  </head>
```
ここでjsファイルを先に読み込んでしまうと、`jQuery`が認識されないので、注意する。自分はそこに気付かないで1時間くらいハマってしまった。
次に、ダイアログのメッセージ部分になる文章をhtmlファイルの方に追記し、非表示にしておく。

```html:quiz.html
<div id="truedialog" style="display: none">正解です！！</div>
<div id="hintdialog" style='display: none'>不正解。ヒント：第4層</div>
<div id="falsedialog" style="display: none">不正解。 正解は、「トランスポート層」です。</div>
```
次にjsファイルを編集し、

```javascript:quiz.js
$(function(){
  var num = 0; // クリック回数初期化
  $('#btn_action').click(function(){ // ボタンをクリックした時
    $(this).data('click', ++num); // ボタンのクリック回数を数える
    var click =$(this).data('click'); // クリック回数のデータをを入れる
    inputtext = $('#entrybox').val(); // 入力した文字を受け取る
    if (click==1){ // クリックが1回目の時
      if (inputtext=="トランスポート層"){ // 正解の時
        $("#truedialog").dialog({
          modal: true, //モーダル表示, 表示中はほかの操作不可
          title: "答え",
          buttons: { "確認": function() {$(this).dialog("close");}} //閉じます
        });
      } else { // 不正解の時
        $("#hintdialog").dialog({
          modal: true, //モーダル表示, 表示中はほかの操作不可
          title: "ヒント",
          buttons: { "確認": function() {$(this).dialog("close");}} //閉じます
        });
      }
    }
    else if (click>=2){ // クリックが2回目以降の時
      if (inputtext=="トランスポート層"){
        $("#truedialog").dialog({
          modal: true,
          title: "答え",
          buttons: { "確認": function() {$(this).dialog("close");}}
        });
      } else {
        $("#falsedialog").dialog({
          modal: true,
          title: "答え",
          buttons: { "確認": function() {$(this).dialog("close");}}
        });
      }
    }
  });
})
```
`data()`は、HTML要素内に付与されたdata属性に対して、取得・設定・変更などを行う。
`dialog()`は、`jQuery`でダイアログを表示させるメソッドで、引数の`option`については[こちらの記事](http://stacktrace.jp/jquery/ui/widgets/dialog.html)に公式リファレンスの日本語版で詳細に解説されている。
ダイアログ表示中は、ページ上のクリックなどの操作ができないようにモーダル表示機能を付けた。ダイアログのメッセージを確認したら、確認ボタンを押して消すようにした。
無事に動作すれば、1回目で誤答すると、
![Screenshot_2019-12-13 ワイのホームページ(1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280072/a1cb0c9b-3d7e-6878-bc29-53e457522aed.png)
2回目も誤答の時、
![Screenshot_2019-12-13 ワイのホームページ(2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280072/5e302960-9c40-4469-e4ab-4d5de8282a1c.png)
正答を入力すると、
![Screenshot_2019-12-13 ワイのホームページ(3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280072/7d7f0b9a-45bf-a4dd-2339-685a2c23b692.png)

参考文献
https://webllica.com/jquery-ui-file-load/
https://webllica.com/jquery-ui-dialog/
https://itsakura.com/jquery-dialog
https://qiita.com/ma_me/items/81d3b6e9aed1d68496e6
http://stacktrace.jp/jquery/ui/widgets/dialog.html
https://iwb.jp/jquery-click-distinction/