Webページ上に問題と解答を記載し、解答はボタンで表示する方法

投稿日：2017年5月19日更新日：2021年5月28日

ブログも含め Webページ上で、問題と解答を記載したいのだけれど、解答はすぐに見せたくない場合の方法です。用意したボタンをクリックすると、JavaScriptのプログラムが実行されて解答を表示させます。

このページで実例を実装しますが、JavaScriptが記述できるブログサービス（livedoor Blog など）でも同じことが可能です。

1. 実例
2. 解説
3. 補足：HTMLだけでも近いことはできます
- 実例
- 解説

1. 実例

問題

１から８までの数字を１回ずつ使って4けたの数字を２つつくります。その差が一番小さくなる二つの数字をさがしなさい。

解答

2. 解説

ボタンと解答の部分のHTMLと、JavaScriptコードの部分は以下のようになっています。

<!-- ボタン -->
<p><input value="解答を表示する" id="btn-20170519-1" type="button" style="margin-bottom:0;"></input></p>
<!-- 解答 -->
<p style="display:none;font-size:1.3em;color:red;" id="ans-20170519-1">247</p>

<!-- JavaScriptのコード -->
<script>
// 画面が読み込まれた後で処理を開始するために、windowオブジェクトの loadイベントに関数を登録します
window.addEventListener( 'load', ()=>{
  let button = document.querySelector("#btn-20170519-1");
  // ボタンの click イベントに関数を登録します
  // flagという変数を関数に閉じ込めたいので、その場で関数を生成して登録します
  button.addEventListener('click', (()=>{
    let flag = true; // 解答を表示している時と非表示の時とを区別するためのフラグ
    // ボタンの clickイベントに登録する関数を返します
    return ()=>{
      // 解答の部分を表示（または非表示）にします
      document.querySelector("#ans-20170519-1").style.display = flag ? "block" : "none";
      // ボタンのラベル文字列をセットします
      button.value = flag ? "解答を隠す" : "解答を表示する";
      // flag を反転させます
      flag = !flag;
    };
  })());
});
</script>

この中に解説も書いておきました。
大雑把に説明すると、ボタンのクリックイベントに関数を登録しているだけです。その関数の中で、(1) 解答の表示・非表示、(2) ボタンのラベル文字列の切り替え処理を行っています。

JavaScriptの alert()関数で解答を表示してもよいのですが、それだと味気ないですので、こちらの方法を試してみるのもよいのではないでしょうか。

3. 補足：HTMLだけでも近いことはできます

<details>タグを使うと、似たようなことができます。

実例

問題

１から８までの数字を１回ずつ使って4けたの数字を２つつくります。その差が一番小さくなる二つの数字をさがしなさい。

解答

解答を表示する

247

解説

「解答を表示する」の部分の HTML は以下になります。

<details>
  <summary>解答を表示する</summary>
  <p>247</p>
</details>

画面には最初 <summary> と </summary> で囲まれた部分しか表示しません。
その部分がクリックされると、それ以外の内容が表示されます。

ボタンが必要ないのであれば、こちらの方がラクですね。

執筆者：labo