穴埋め問題作成(穴の位置調整ツール)

穴埋め問題を作るとき、穴の位置を調整するのに手間がかかります。
今回、その手間を軽減するツールを作りました。

穴埋め問題


LBT(Learning by Typing)

LBT(Learning by Typing)は、お手本となるプログラムをタイピングで書き写すことで、プログラミングを学習するシステムです。

Fig.1 Learning by Typing の学習画面

Fig.1 は、LBT の学習画面です。画面上半分にお手本となるプログラムがあります。

画面下半分は、穴が開いた「穴埋め問題」になっています。

 

穴埋め問題といっても、いろいろな種類や形態がありますが、今回は、LBT のような穴埋め問題を対象とします。

LBTについては、記事「タイピングでプログラミング学習するシステム」をご参照ください。

 

作成手順

穴埋め問題は、制作手順は一般的に次のようになります。

  1. まず、正解となる文章を用意する
  2. 次に、文章のどこを空白(穴)にするかを決める
  3. 回答欄を用意する

 

LBT では、次のようにして穴埋め問題を作成しています。

  1. 画面上半分: 正解となるプログラムを表示
  2. プログラムのどの部分を空白にするかを決定
  3. 画面下半分:
    1. 正解となるプログラムを表示
    2. 空白とする部分と同じ大きさの回答欄を用意
    3. 空白とする部分に回答欄を重ねる

 

作成の手間

LBT のような穴埋め問題を作成するとき、穴の大きさや位置を調整します。

問題文を更新したときや、正解箇所を変更したときなど、その都度、穴の位置を指定し直す必要があり、手間のかかる作業となります。

 

 

 

穴の位置を調整するツール(LBT-tool)


各部品

LBT-tool.htmlを動かすと、初期画面になります(Fig.2 参照)。

Fig.2 穴埋め問題 LBT-tool の初期画面

 

LBT-tool には、主に、3 個の部品があります(Fig.2 参照)。

  • Text領域(大)
  • Text領域(小)
  • Canvas 領域

 

Text 領域(大)

  • 機能:手本となるプログラムの表示

Text 領域(大)とCanvas 領域は重なっています。

Text 領域(大)の上に、Canvas 領域があります。

  • Text 領域(大)の左上と、Canvas 領域の左上は一致しています。

 

Text 領域(小)

  • 機能:穴の位置と長さを入力

初期値、25, 15, 60, 75, 130, 65 が入力済みです。

これらの数値は、穴の位置と長さを表しています。

例えば、25, 15, 60 は、次の穴を表します。

  • 穴の位置:Canvas左上から、右方向に25px、下方向に15px
  • 穴の長さ:60px

初期値は、2 個分の穴の数値です。

数字3 個で1 個の穴が記述できます。

そのため、穴を3 個にしたい場合は、適正な数値を9 個書きます。

 

Canvas 領域

  • 機能:穴を表示

Text 領域(小)の数値に対応した穴を表示します。

Canvas 領域には、穴の位置指定がやり易いよう、100px 毎にメッシュが付いています。

 

 

使い方

以下の手順で穴の位置・長さを調整します。

  1. Text 領域(大)に、手本となるプログラムをコピー&ペースト
  2. 空白にしたい文字を決定
    • 「function」と「context.rect」
  3. 穴の位置を調整
    • Text 領域(小)の各数値を修正

 

Fig.3 穴埋め問題 LBT-tool 穴位置の調整

最終的に、空白にしたい文字と、穴が完全に重なります(Fig.3 参照)

Text 領域(小)の数値が、穴埋め問題の穴の位置になります。

 

 

プログラム(LBT-tool)


以下、LBT-tool.html のプログラムです。

 

プログラム1

 

プログラム1 の説明

概要

プログラム1 は、「タイマー」と「長方形描画」を組み合わせて作りました。

プログラム1 の処理概要は、次のようになります。

  • 1 秒毎、以下の処理を実行
    • Text領域(小)の数値を読む
    • 長方形を描画

タイマーについては、記事「1 分タイマーの作り方」をご覧ください。

長方形描画については、記事「Canvas に長方形を描く」をご覧ください。

 

onload 関数

  • Canvas の使用準備
    • 2 次元(2D)描画のコンテキストを得ます
  • タイマーの準備
    • 1,000 m(1 秒)毎に、drawBlank() 関数を実行します

 

drawBlank()

処理の手順は、以下となります。

  1. Canvas 上の描画物を消去
  2. text 領域(小)から数値を読む
  3. “,” で区切り、配列に代入
  4. 穴の数を計算
  5. 穴の数だけ、長方形を描画
  6. メッシュを描画

 

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。