10 進カウンタの別説明
10 進カウンタは 2 進カウンタと 5 進カウンタの組み合わせによる構成になっており， 16
進カウンタや 5 進カウンタに比べると理解が難しい．
そのため，通常説明による学習で理解しきれなかった人のために別説明の機能拡張を行った .
通常説明との違い
通常説明では FF0 の出力を 2 進カウンタの出力、 FF １， FF2 FF3 の出力とし 2 × 5 進カウ
ンタの出力を 10 進カウンタの出力としている．別説明では FF0 FF1 FF2 FF3 の出力を 1
つの回路の出力として説明している．また， FF2 と FF3 の間に接続されている リセットのた
めの AND 回路と OR 回路の入出力 については 5 進カウンタで説明しているので， 10 進カウン
タの通常説明では 結果のみを 示 している ．これに対し 別説明 では入出力の過程も説明し
ている．
別説明ウィンドウの作成
別説明ウィンドウを作成するには図 a に示すように「ソリューションエクスプロー
ラー」の Form （本学習システムでは counter となっている）を右クリックし，「追加」を選
択する．そして，「新しい項目」を選択すると図 b のようなウィンドウが出てくるので
「 Windows フォーム」を選択し，名前を入力後に追 加を選択する．正しく作成された場合の
ソリューションエクスプローラーの状態を図 c に示す．この時に入力する名前は別説
明ボタンでのイベント処理で記述している名前と一致させなければならない．その場合の
コードを図 dに示す．
別説明の学習方法
10 進カウンタの通常説明終了後，別説明ボタンが表示されるようになっており，クリッ
クすることでそれまで学習してきたウィンドウとは別に別説明ウィンドウで学習を行う．
また，クリックは任意で行うため，選択しなければそのまま確認テストへ進むこともでき
る．別説明ボタンの配置は下記の図 のようになっている．
別説明ボタンの表示
別説明ボタンは通常説明が終了するまでは誤って押されることのないよ うに非表示とな
っている．その方法を記したコードを図 に示す．図中の button18 は別説明ボタンを
示す．
学習の流れ
別説明ウィンドウの初期状態では表示 ボタン以外は押すことができないようになってい
る．表示ボタンを押すことで，入力のない状態の 10 進カウンタの回路，タイムチャート，
状態遷移表が表示される．初期状態を図 a に，表示ボタンクリック後の状態を図b
に，そのときの処理コードを図 c に示す．また，別説明ウィンドウでのボタン配置は
それまで学習してきたウィンドウと同じようになっている． Clock ボタンを押すことでクロ
ックの立ち下がりによる状態の変化を 8 個目の Clock の立下りから順に説明文を用いて学
習していく． Clock ボタンを押したときの 処理コードを図 d に示す．
別説明終了後
別説明がすべて終了するとテキストボックスに「別説明ウィンドウを閉じて「確認テスト」のタブを押してください。」表示される．別説明ウィンドウは閉じた後でも再度別説明ボタンを押すことで最初から見ることができる．
12進数カウンタ回路の応用問題
10 進カウンタの応用として， 12 進カウンタの回路図を作成する問題を作成した． 10 進カ
ウンタの学習と確認テストが終了すると，応用問題のボタンが表示される．応用問題ボタ
ンが表示された状態を図 に示す．
応用問題の表示は，クラスを宣言 [ する．次にボタンのイベントで応用問題のクラスの
インスタンスを生成 [ し，表示する [ という手順で行う．また， 10 進カウンタの学習と
確認テストの終了時までボタンは表示されないようになっている [ 表示するためのコ
ードを図 に示す．
図 1に表示されている「問題開始」ボタンを押すことで，問題を開始させる．「問題
開始」ボタンを押した状態を図2 に示す．「問題開始」ボタンのコードを 図3 に示
す．
5進数カウンタ回路のアニメーション
5 進カウンタの説明にアニメーションの機能を追加した．図1 に非同期式 5 進カウン
タの回路図を示し，図2 に非同期式 5 進カウンタのタイミングチャートを示す．
図1 の回路図の配線の色を出力に応じて使い分ける．出力 0 のときの線の色を黒と
し，出力 1 のときの線の色を赤とする．図 1 のタイミングチャートを作成し赤色の縦
線を動かすことで出力を把握できる．また，図 1 と図 2 を連動させ初学者に理解
させる．
図 1 のアニメーションは，出力が（ Q3,Q2,Q1,Q0 0,0,0,0 Q3,Q2,Q1,Q0
0,0,0,1 Q3,Q2,Q1,Q0 0,0,1,0 Q3,Q2,Q1,Q0 0,0,1,1 Q3,Q2,Q1,Q0
1,0,0,0 ）の 5 つの場合のときの図を作成し，その回路図を順番に切り替わる動画を作成
した． 各状態を表し たものを図 3 に示す．
図 2 のタイミングチャート では 赤色の縦線の画像を読み込ませ，赤色の縦線を 右に
動かす プログラムを作成した． そのプログラムを図4 に示し，図中の [ 1]～～[5］ の処理
について説明する．
[1]
5 進カウンタ回路図，タイムチャートの画像を読み込ませる．
[2]
棒の画像を読み込ませる．
[3]
x 軸を 145 か ら 450 まで動かす．
[4]
5 進カウンタ回路図，タイムチャートの画像を（ 100,224 ）の位置で表示させる
[5]
棒の画像を（ x,224 ）の位置で表示させる
