プログラミング

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

投稿日:2017年5月19日 更新日:

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

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

1. 実例

問題

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

解答

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>タグを使うと、似たようなことができます。

実例

問題

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

解答

解答を表示する

247

解説

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

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

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

📂-プログラミング
-,

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

React Redux

React + Redux の最小限の雛形コード

この記事に載せている JavaScriptのコードは、React + Redux を使っています。 但し、まだ何も意味のある処理を書いていないので、このままだと 属性 id=”root” を持った要素 …

Web Programming

サーバーからブラウザを通じてデスクトップ通知する方法(Push API を利用)

Push API を使ってサーバーからブラウザにメッセージを送る方法について説明しています。

Web Programming

ソフトウェアにおける日付・時刻フォーマット

目次ソフトウェアにおける日付・時刻フォーマット参考情報ISO 8601RFC 5322RFC 7231Common Log Format ソフトウェアにおける日付・時刻フォーマット ソフトウェア(特に …

web development

Resource Timing API を使って、リソースの読み込みに掛かった時間を計測する

目次1. Resource Timing API について2. サンプルコード3. PerformanceResourceTiming インターフェイス4. デモページ5. 参考仕様MDNブラウザの対 …

時間とともに風景画像の色を変化させるサンプルページを作りました

時間とともに風景画像の色を変化させるサンプルページを作りました。 夕方や夜に変化する効果を狙っています。 目次1. スクリーンショット2. デモ3. ソースコード4. メモ 1. スクリーンショット …