半加算器説明図

X,Yに0,1を入れてC,Sがどうなるかを考えます

□ をクリックすると、空白⇨0⇨1⇨空白 と変化します。自動ではありません。

X X-select AND/OR ANDoutput-select NOT line AND2nd C-select C
blank blank blank NOToutput-select blank blank
Y Y-select ORoutput-select line S-select S

1+1は答えが2桁になってしまいます。実際の回路では次の桁の計算にこれを加えます。これを桁上げ (Carry) といいます。いまは1桁分の足し算の回路をつくるので、その桁の答え S と、Carryの C とに分けて考えます。

X,Yに0,1を入れる組み合わせは次の表に示すように4つです。この回路でS,Cが正しく計算されることを確認してください。

X + Y = C S
0 + 0 = 0 0
0 + 1 = 0 1
1 + 0 = 0 1
1 + 1 = 1 0

制作意図

X,Y に 0, 1 をそれぞれ入れて、C,S に正しい値が出るようになっているか確認する道具です。半加算器を紹介してそこで終わりという扱いに疑問を感じながら、授業で説明するための道具として作りました。AND, OR, NOT などの動作を使っての応用の位置づけだったのかもしれませんが、全加算器まで説明しないとキャリーの意味が飲み込めないような印象を持っています。

練習問題にして採点システムを取り付けてもいいのですが、問題が4パターンしかないのでこの形にしました。

解説

図をタイル状に切り分けてtableに並べています。□の部分は30×65で、空白、0、1、と3枚の図を入れ替えています。さらに□の位置が上、中、下と3セットあります。正方形の図を使ってvertical-alignで配置すると拡大縮小したときにずれが大きいのでこのような方法にしました。

最近のブラウザは表示を画像と文字を一緒に拡大できますので、プロジェクターで使用するとプレゼンテーションソフトよりも便利です。

プログラム

引数kokoにはthisが入ってきます。これでクリックした場所がわかります。

空白⇨0⇨1⇨空白 の変更はtop,middle,bottomの3セットあります。9個のうちどれかひとつだけが該当し、変更されます。

thisで場所がわかるので、idも不要です(cssのために一つ入っています)。現在の状態はファイル名で判断するので、これだけです。

<script>
function changeimg(koko){
   var img = koko.getAttribute("src");
   if (  img=="images/halftop9.png" ) {
      koko.src = "images/halftop0.png";
   }else if ( img=="images/halftop0.png" ) {
      koko.src = "images/halftop1.png";
   }else if ( img=="images/halftop1.png" ) {
      koko.src = "images/halftop9.png";
   }
   else if ( img=="images/halfbtm9.png" ) {
      koko.src = "images/halfbtm0.png";
   }else if ( img=="images/halfbtm0.png" ) {
      koko.src = "images/halfbtm1.png";
   }else if ( img=="images/halfbtm1.png" ) {
      koko.src = "images/halfbtm9.png";
   }
   else if ( img=="images/halfmid9.png" ) {
      koko.src = "images/halfmid0.png";
   }else if ( img=="images/halfmid0.png" ) {
      koko.src = "images/halfmid1.png";
   }else if ( img=="images/halfmid1.png" ) {
      koko.src = "images/halfmid9.png";
   }
}
</script>

説明図

タイルの状況です。セルの枠線を表示している分、高さが出て、配線にずれが出ています。

X X-select AND/OR ANDoutput-select NOT line AND2nd C-select C
blank blank blank NOToutput-select blank blank
Y Y-select ORoutput-select line S-select S

html

イベントハンドラに書いたthisがポイントです。

<table id="hadder">
<tr>
<td><img src="images/halftopcX.png"></td>
<td><img src="images/halftop9.png" onclick="changeimg(this)"></td>
<td rowspan="3"><img src="images/halfadder1.png"></td>
<td><img src="images/halfmid9.png" onclick="changeimg(this)"></td>
<td rowspan="3"><img src="images/halfadder2.png"></td>
<td class="m"><img src="img/halfa2ln.png"></td>
<td rowspan="3"><img src="images/halfadder3.png"></td>
<td><img src="images/halfmid9.png" onclick="changeimg(this)"></td>
<td><img src="images/halfmidcC.png"></td>
</tr>
<tr>
<td><img src="images/halfspc.png"></td>
<td><img src="images/halfspc.png"></td>
<td><img src="images/halfspc.png"></td>
<td><img src="images/halfmid9.png" onclick="changeimg(this)"></td>
<td><img src="images/halfspc.png"></td>
<td><img src="images/halfspc.png"></td>
</tr>
<tr>
<td><img src="images/halfbtmcY.png"></td>
<td><img src="images/halfbtm9.png" onclick="changeimg(this)"></td>
<td><img src="images/halfmid9.png" onclick="changeimg(this)"></td>
<td class="t"><img src="img/halfa2ln.png"></td>
<td><img src="images/halftop9.png" onclick="changeimg(this)"></td>
<td><img src="images/halftopcS.png"></td>
</tr>
</table>

css

imgのvertical-align:bottom;は必須です。デフォルトがbaselineなので、画像の下部にypなどのbaselineから下に出る部分を確保するために隙間を空けてしまいます。

tdのvertical-alignはtdの内側にぴったりな画像なので意味がありませんが、モバイルのために縮小された場合、微妙な差が生じるのを試行錯誤的に調整したものです。

img{
  max-width: 100%;
}
#hadder{
  border-collapse:collapse;
  border-spacing: 0px;  border:none;
  padding:0;
  margin:1% 2% 2% 2%;
}
#hadder td{
  border:none;
  padding:0;
}
#hadder td img{
  padding:0 0 0 0;
  margin:0;
  vertical-align:bottom;
}
#hadder td:first-child{
  width:auto;
  padding-right:4px;
}
#hadder td:last-child{
  width:auto;
  padding-left:4px;
}
td.t{
  vertical-align:top;
}
td.m{
  vertical-align:middle;
}
td.b{
  vertical-align:bottom;
}