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

15148 ワード
HTML JavaScript jquery.ui HTML テキストリンク

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

まず、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>

こんな感じで。

ちなみにこの正解は「トランスポート層」。ここから、入力フォームに正解を入力して送信ボタンをクリックしたとき、正解ダイアログを表示。不正解の解答を入力すると、1回目はヒントを表示。２回目に正答を入力すると、正解ダイアログを表示し、２回目も誤答すると答えを表示する、という機能を付ける。
デフォルトのダイアログだとつまらないので、jQuery UIを使用する。まずはヘッダー部分にjsライブラリと、jsファイルを作りインポート。

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ファイルの方に追記し、非表示にしておく。

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ファイルを編集し、

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についてはこちらの記事に公式リファレンスの日本語版で詳細に解説されている。
ダイアログ表示中は、ページ上のクリックなどの操作ができないようにモーダル表示機能を付けた。ダイアログのメッセージを確認したら、確認ボタンを押して消すようにした。
無事に動作すれば、1回目で誤答すると、

2回目も誤答の時、

正答を入力すると、

参考文献
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/