プログラミング

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 style="font-size:1.3em;color:red;">247</p>
</details>
  • 画面には最初 <summary></summary> で囲まれた部分しか表示しません。
  • その部分がクリックされると、それ以外の内容が表示されます。

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

📂-プログラミング
-,

執筆者:labo


comment

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

関連記事

WordPress

WordPressのソースコード。HTMLにPHPを埋め込むスタイル。

WordPress本体のPHPソースコードや、テーマに含まれているPHPのソースコードを見ると、やたらと PHPの開始タグ(<?php)と終了タグ(?>)が埋め込まれています。 例えば、こ …

web development

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

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

no image

プログラミングができると便利である実例

バスにジャストで乗りこむ技術|こんぴゅ|note

Web Components

Web Components: 組み込み要素を拡張する方法

目次1. はじめに2. 組み込みHTML要素を拡張する方法3. おわりに4. 参考 1. はじめに Web Components では、HTMLElement を継承してカスタムクラスを定義することも …

web development

Web Development for Beginners を読む:レッスン1

目次1. はじめに2. Web Development for Beginners の進め方3. レッスン1「Introduction to Programming Languages and Too …