HTMLとCSSだけでできる穴埋め問題の作り方2(改良版:タップ方式)

HTML/CSS

以前に書いた下記記事の改良版になります。

 

以前の記事では、穴埋め箇所をマウスでホバーすると、隠れていた答えが表示される仕様だったのですが、

 

スマホだとそもそも「ホバー」って概念が無い。。

 

という事に気づき、タップ(PCならクリック)したら答えが表示されるように修正しました。

 

また、おまけとして、全ての答えを一括で表示・非表示する簡単な機能も加えました(ここだけJava Scriptを使っています)。

 

本記事も非常に初歩的な話なので、自分のようなプログラミング初心者で、

HTMLやCSSを使って、ブラウザで見れる穴埋め問題集を作りたい!

という方のご参考になればと思います。

  

コードをご覧になりたい方は、目次の2番目をご覧ください。

 


40代からプログラミング(Flutter)を始めて、GooglePlayAppStoreに初アプリを公開したhalzo appdevです。

 

作成したアプリはこちら↓

シンプルメモ帳「BasicMemo」 – 文字数カウント、ワンタッチ入力、タグ管理等の便利機能を搭載

Google Play で手に入れよう
Download on the App Store

 

スポンサーリンク

大枠の考え方

前回は、答えの場所でカーソルをホバーしたら(マウスカーソルを乗せたら)opacityを変更する、という方法で表示・非表示を切り替えていました。

 

一方、今回のやり方は、

  • 答えの場所にチェックボックスを配置しておく
  • タップ(クリック)でチェックが変更されたら答えの文字のopacityも変更する
  • チェックボックス自体は隠して見えないようにしておく

という方法を採用しました。

 

ビジュアルで示すとこんな感じです。

 

 

この方法に気づいたキッカケは、こちらの記事になります。

「チェックボックスを隠す」という発想は目からウロコでした。ありがとうございます!

 

 

完成形のコード(HTML、CSS+若干Java Script)

コードを以下に掲載します。

 

自分のような初心者の方々向けに、できるだけコメントを入れています。

※前回記事と重複するところは割愛しています。

 

基本的にはHTMLとCSSだけです。

 

ただ、答え全体を一括で表示・非表示する処理だけ、Java Scriptを使っています。

 

本当はCSSだけでやりたかったのですが、調べた限りでは、チェックボックスを一括で処理するにはJava Scriptを使わざるを得ませんでした。。

 

HTMLのページを再読み込みするボタンを付ける方法(再読み込みして、表示・非表示の状態を初期化する方法)もあったのですが、挙動がイマイチだったので採用しませんでした。

 

HTML(index.html)
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>Fill in the blank</title>
  <!-- このHTMLファイルがある場所に「css」フォルダを作り、
       その中にCSSのコードを書く「style.css」を置く -->
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <h2>HTMLとCSSで穴埋め問題</h2>

  <!-- JavaScriptで全てのチェックボックスの表示・非表示を切り替えるときに、
       チェックボックス全体に名前をつけておく必要があるので、「myTEST」という名前(任意)を設定 -->
  <form name="myTEST">
  <li>
    日本で一番高い山は
    <!-- inputタグでtype属性をcheckboxにすることでチェックボックスを設定。
         labelタグでチェックボックスに紐づく文字列を設定。
         inputタグにid属性をつけ、labelタグのfor属性にも設定することで紐付けされる。
         全チェックボックスの表示・非表示の処理時に識別できるようidには連番をつける -->
    <span id="test"><input type="checkbox" id="blank1"><label for="blank1">富士山</label></span>
    です。
  </li>
  <li>
    日本で一番面積の大きい湖は
    <span id="test"><input type="checkbox" id="blank2"><label for="blank2">琵琶湖</label></span>
    、二番目に面積の大きい湖は
    <span id="test"><input type="checkbox" id="blank3"><label for="blank3">霞ヶ浦</label></span>
    です。
  </li>
  <li>
    寒流と暖流がぶつかるところを
    <span id="test"><input type="checkbox" id="blank4"><label for="blank4">潮目</label></span>
    といいます。潮目では、
    <span id="test"><input type="checkbox" id="blank5"><label for="blank5">プランクトン</label></span>
    が多く、魚が集まるので良い漁場になります。
  </li>

  <br>
  <!-- 全チェックボックスの表示・非表示をするボタンを設置。
       onClick属性に、チェックする・しないを実行するJavaScriptの関数を設定。
       「checkCLEAR()」と「checkALL()」の名前は任意 -->
  <input type="button" value="全て隠す" onClick="checkCLEAR()">
  <input type="button" value="全て表示" onClick="checkALL()">
  </form>

  <!-- このHTMLファイルがある場所に「js」フォルダを作り、
       その中にJava Scriptのコードを書く「script.js」を置く -->
  <script type="text/javascript" src="js/script.js"></script>

</body>
</html>

 

CSS(styles.css)
/* ブランクの所でマウスカーソル表示を変更 */
#test label{
  cursor: pointer;
}

/* チェックボックスは「display: none」にすることで常に非表示 */
#test input{
  display: none;
  margin: 0px;
}

/* ブランクの背景を赤に設定 */
#test {
  background-color: red;
}

/* チェックされていない時は、「opacity」を0にすることで答え(テキスト)を非表示。
   input+labelとすることで、チェックボックスに紐づく(隣接する)
   label(文字列)を対象にできる */
#test input+label{
  opacity: 0;
}

/* チェックされたら、「opacity」を1にすることで答え(テキスト)を表示 */
#test input:checked+label{
  opacity: 1;
}

 

Java Script(script.js)
// チェックボックスのチェックを外す関数。HTMLファイルで設定した関数名と一致させる
function checkCLEAR()
{
   // labelがblank1〜blank6までのチェックボックスを、for文で回して全てチェックを外す。
   // 「6」は、blankの数に合わせて適宜設定
   for (i=1; i<6; i++) document.myTEST.elements["blank"+i].checked = false;
}

// チェックボックスのチェックをする関数。HTMLファイルで設定した関数名と一致させる
function checkALL()
{
   // labelがblank1〜blank6までのチェックボックスを、for文で回して全てチェックする。
   // 「6」は、blankの数に合わせて適宜設定
   for (i=1; i<6; i++) document.myTEST.elements["blank"+i].checked = true;
}

 

全てのチェックボックスを一括で処理する部分は、以下の記事を参考にさせていただきました。ありがとうございます!

 

 

実際の挙動(CodePenより)

実際の挙動を見ていただくために、CodePenにも上げていますのでご参考になればと思います。

※下記の「Result」のボタンで挙動をご確認ください。

 

See the Pen Fill in the blank_click by Hal Zo (@halzoblog) on CodePen.

ホバーではなく、タップ(クリック)することで、答えの表示・非表示が切り替わる様子がわかると思います。

 

以上、ご参考になれば幸いです。

 

最後までお読みいただき、ありがとうございました。

 

コメント

タイトルとURLをコピーしました