穴埋め問題作成（穴の位置調整ツール）

管理者 2017-03-152018-10-06 0 Comments JavaScript、ツール、プログラム

Contents

1
2
3 穴埋め問題
4 穴の位置を調整するツール（LBT-tool）
5 プログラム（LBT-tool）
- 5.1 共有:

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

穴埋め問題

LBT（Learning by Typing）

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

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

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

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

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

作成手順

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

まず、正解となる文章を用意する
次に、文章のどこを空白（穴）にするかを決める
回答欄を用意する

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

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

作成の手間

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

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

穴の位置を調整するツール（LBT-tool）

各部品

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

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 毎にメッシュが付いています。

使い方

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

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

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

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

プログラム（LBT-tool）

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

プログラム1

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<style>
    canvas{border:solid 1px;}
    div { position:absolute; }
     .canvas { z-index:1; }
     .textarea {  z-index:0; }
</style>
<script>
    var timer_ID;
    var time;
    var interval = 1000;
    const BLANK_HIGHT = 10;
    var x = 0, y=0, w=600, h=250;           // canvas
    var context;

    function drawBlank() {
        context.clearRect(x,y,w,h);
        context.beginPath();
        var str = document.getElementById("blank").value;
        var strSplit = str.split(",");
        var numOfBlank = strSplit.length/3;
        for (var i=0; i<numOfBlank; i++) {
            context.rect(strSplit[3*i],strSplit[3*i+1],strSplit[3*i+2],BLANK_HIGHT);
        }
        drawMesh();
        context.stroke();
    }

    function drawMesh(){
        for (var i=0; i<=6; i++) {
        for (var j=0; j<=2; j++) {
            context.rect(100*i, 100*j, 100*(i+1), 100*(j+1));
        }}
    }

    window.onload = function() {
        var canvas = document.getElementById('canvas');
        context = canvas.getContext('2d');
        timer_ID = setInterval("drawBlank()", interval);
    }
</script>
</head>
<body>
<div class="canvas">
    <canvas id="canvas" width=600 height=250>
</div>
<div class="textarea">
    <textarea cols="110" rows="23" id="example"></textarea>
    <br><br>
    <textarea cols="110" rows="2"  id="blank">25, 15, 60, 75, 130, 65</textarea>
</div>
</body>
</html>

プログラム1 の説明

概要

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

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

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

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

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

onload 関数

    window.onload = function() {
        var canvas = document.getElementById('canvas');
        context = canvas.getContext('2d');
        timer_ID = setInterval("drawBlank()", interval);
    }

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

drawBlank()

    function drawBlank() {
        context.clearRect(x,y,w,h);
        context.beginPath();
        var str = document.getElementById("blank").value;
        var strSplit = str.split(",");
        var numOfBlank = strSplit.length/3;
        for (var i=0; i<numOfBlank; i++) {
            context.rect(strSplit[3*i],strSplit[3*i+1],strSplit[3*i+2],BLANK_HIGHT);
        }
        drawMesh();
        context.stroke();
    }

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