
<html>
<head>
<title>101 Computing - Binary Subtractions</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style media="print" type="text/css">
.noprint {display:none;}
</style>
<style>
body
 {
 font-family: arial;
 } 


.labelbox {
padding:4px; 
cursor:pointer; 
text-align: center;
width: 30px;
height: 30px;
font-size: 14pt;
color: #B0209C;
}


TD {
text-align: center;
vertical-align: middle;
padding: 12px;
font-size: 20pt;
min-width: 30px;
height: 60px;
}
</style>
<script>
function clickDigitCarry(cell) {
if (cell.innerHTML=="") {
	cell.innerHTML="-1";
} else if (cell.innerHTML=="-1") {
	cell.innerHTML="2";
} else {
	cell.innerHTML="";
}
}

function clickDigit(cell) {
if (cell.innerHTML=="") {
	cell.innerHTML="1";
} else if (cell.innerHTML=="1") {
	cell.innerHTML="0";
} else {
	cell.innerHTML="";
}
}

function createSubtraction() {
var number1, number2;
number1 =  Math.floor((Math.random()* 256))
number2 =  Math.floor((Math.random()* 256))
if (number1<number2) {
 var number3;
 number3=number1;
 number1=number2;
 number2=number3;
}

if (number1>=128) {document.getElementById("cell1").innerHTML = "1"; number1-=128;} else {document.getElementById("cell1").innerHTML = "0";}
if (number1>=64) {document.getElementById("cell2").innerHTML = "1"; number1-=64;} else {document.getElementById("cell2").innerHTML = "0";}
if (number1>=32) {document.getElementById("cell3").innerHTML = "1"; number1-=32;} else {document.getElementById("cell3").innerHTML = "0";}
if (number1>=16) {document.getElementById("cell4").innerHTML = "1"; number1-=16;} else {document.getElementById("cell4").innerHTML = "0";}
if (number1>=8) {document.getElementById("cell5").innerHTML = "1"; number1-=8;} else {document.getElementById("cell5").innerHTML = "0";}
if (number1>=4) {document.getElementById("cell6").innerHTML = "1"; number1-=4;} else {document.getElementById("cell6").innerHTML = "0";}
if (number1>=2) {document.getElementById("cell7").innerHTML = "1"; number1-=2;} else {document.getElementById("cell7").innerHTML = "0";}
if (number1>=1) {document.getElementById("cell8").innerHTML = "1"; number1-=1;} else {document.getElementById("cell8").innerHTML = "0";}

if (number2>=128) {document.getElementById("cell11").innerHTML = "1"; number2-=128;} else {document.getElementById("cell11").innerHTML = "0";}
if (number2>=64) {document.getElementById("cell12").innerHTML = "1"; number2-=64;} else {document.getElementById("cell12").innerHTML = "0";}
if (number2>=32) {document.getElementById("cell13").innerHTML = "1"; number2-=32;} else {document.getElementById("cell13").innerHTML = "0";}
if (number2>=16) {document.getElementById("cell14").innerHTML = "1"; number2-=16;} else {document.getElementById("cell14").innerHTML = "0";}
if (number2>=8) {document.getElementById("cell15").innerHTML = "1"; number2-=8;} else {document.getElementById("cell15").innerHTML = "0";}
if (number2>=4) {document.getElementById("cell16").innerHTML = "1"; number2-=4;} else {document.getElementById("cell16").innerHTML = "0";}
if (number2>=2) {document.getElementById("cell17").innerHTML = "1"; number2-=2;} else {document.getElementById("cell17").innerHTML = "0";}
if (number2>=1) {document.getElementById("cell18").innerHTML = "1"; number2-=1;} else {document.getElementById("cell18").innerHTML = "0";}

document.getElementById("cell21").innerHTML = "";
document.getElementById("cell22").innerHTML = "";
document.getElementById("cell23").innerHTML = "";
document.getElementById("cell24").innerHTML = "";
document.getElementById("cell25").innerHTML = "";
document.getElementById("cell26").innerHTML = "";
document.getElementById("cell27").innerHTML = "";
document.getElementById("cell28").innerHTML = "";
document.getElementById("cell41").innerHTML = "";
document.getElementById("cell42").innerHTML = "";
document.getElementById("cell43").innerHTML = "";
document.getElementById("cell44").innerHTML = "";
document.getElementById("cell45").innerHTML = "";
document.getElementById("cell46").innerHTML = "";
document.getElementById("cell47").innerHTML = "";
document.getElementById("cell48").innerHTML = "";
document.getElementById("cell31").innerHTML = "";
document.getElementById("cell32").innerHTML = "";
document.getElementById("cell33").innerHTML = "";
document.getElementById("cell34").innerHTML = "";
document.getElementById("cell35").innerHTML = "";
document.getElementById("cell36").innerHTML = "";
document.getElementById("cell37").innerHTML = "";
document.getElementById("cell38").innerHTML = "";
}

var score = 0;
function checkAnswer() {
var number1=0;
var number2=0;
number1 += document.getElementById("cell1").innerHTML * 128;
number1 += document.getElementById("cell2").innerHTML * 64;
number1 += document.getElementById("cell3").innerHTML * 32;
number1 += document.getElementById("cell4").innerHTML * 16;
number1 += document.getElementById("cell5").innerHTML * 8;
number1 += document.getElementById("cell6").innerHTML * 4;
number1 += document.getElementById("cell7").innerHTML * 2;
number1 += document.getElementById("cell8").innerHTML * 1;
number1 -= document.getElementById("cell11").innerHTML * 128;
number1 -= document.getElementById("cell12").innerHTML * 64;
number1 -= document.getElementById("cell13").innerHTML * 32;
number1 -= document.getElementById("cell14").innerHTML * 16;
number1 -= document.getElementById("cell15").innerHTML * 8;
number1 -= document.getElementById("cell16").innerHTML * 4;
number1 -= document.getElementById("cell17").innerHTML * 2;
number1 -= document.getElementById("cell18").innerHTML * 1;
number2 += document.getElementById("cell31").innerHTML * 128;
number2 += document.getElementById("cell32").innerHTML * 64;
number2 += document.getElementById("cell33").innerHTML * 32;
number2 += document.getElementById("cell34").innerHTML * 16;
number2 += document.getElementById("cell35").innerHTML * 8;
number2 += document.getElementById("cell36").innerHTML * 4;
number2 += document.getElementById("cell37").innerHTML * 2;
number2 += document.getElementById("cell38").innerHTML * 1;

	if (number1==number2) {
		score++;
		alert("Correct!");
		document.getElementById("score").innerHTML=score;
		createSubtraction();
	} else {
		alert("Incorrect Answer! Try again!");
	}
		
}
</script>
</head>
<BODY style="padding: 30px;" onload="JavaScript: createSubtraction();">
<H2>Binary Subtractions</H2>
<p>Complete the binary subtraction below. Click on the 1/0 bits to change them.</p>
<center>
<br>
<center><big><b>Your Score: </b><span id="score">0</span><br><br>
<TABLE>
<TR>
<TD style="font-size: 10pt;">Carried Values</TD>
<TD id="cell41" style="border-right: solid 2px black;border-bottom: solid 2px black;cursor: pointer; cursor: hand; " onclick="JavaScript: clickDigitCarry(this);"></TD>
<TD id="cell42" style="border-right: solid 2px black;border-bottom: solid 2px black;cursor: pointer; cursor: hand; " onclick="JavaScript: clickDigitCarry(this);"></TD>
<TD id="cell43" style="border-right: solid 2px black;border-bottom: solid 2px black;cursor: pointer; cursor: hand; " onclick="JavaScript: clickDigitCarry(this);"></TD>
<TD id="cell44" style="border-right: solid 2px black;border-bottom: solid 2px black;cursor: pointer; cursor: hand; " onclick="JavaScript: clickDigitCarry(this);"></TD>
<TD id="cell45" style="border-right: solid 2px black;border-bottom: solid 2px black;cursor: pointer; cursor: hand; " onclick="JavaScript: clickDigitCarry(this);"></TD>
<TD id="cell46" style="border-right: solid 2px black;border-bottom: solid 2px black;cursor: pointer; cursor: hand; " onclick="JavaScript: clickDigitCarry(this);"></TD>
<TD id="cell47" style="border-right: solid 2px black;border-bottom: solid 2px black;cursor: pointer; cursor: hand; " onclick="JavaScript: clickDigitCarry(this);"></TD>
<TD id="cell48" style="border-bottom: solid 2px black;cursor: pointer; cursor: hand; " onclick="JavaScript: clickDigitCarry(this);"></TD>
</TR>
<TR>
<TD style="font-size: 10pt;">Carried Values</TD>
<TD id="cell21" style="border-right: solid 2px black;border-bottom: solid 2px black;cursor: pointer; cursor: hand; " onclick="JavaScript: clickDigitCarry(this);"></TD>
<TD id="cell22" style="border-right: solid 2px black;border-bottom: solid 2px black;cursor: pointer; cursor: hand; " onclick="JavaScript: clickDigitCarry(this);"></TD>
<TD id="cell23" style="border-right: solid 2px black;border-bottom: solid 2px black;cursor: pointer; cursor: hand; " onclick="JavaScript: clickDigitCarry(this);"></TD>
<TD id="cell24" style="border-right: solid 2px black;border-bottom: solid 2px black;cursor: pointer; cursor: hand; " onclick="JavaScript: clickDigitCarry(this);"></TD>
<TD id="cell25" style="border-right: solid 2px black;border-bottom: solid 2px black;cursor: pointer; cursor: hand; " onclick="JavaScript: clickDigitCarry(this);"></TD>
<TD id="cell26" style="border-right: solid 2px black;border-bottom: solid 2px black;cursor: pointer; cursor: hand; " onclick="JavaScript: clickDigitCarry(this);"></TD>
<TD id="cell27" style="border-right: solid 2px black;border-bottom: solid 2px black;cursor: pointer; cursor: hand; " onclick="JavaScript: clickDigitCarry(this);"></TD>
<TD id="cell28" style="border-bottom: solid 2px black;cursor: pointer; cursor: hand; " onclick="JavaScript: clickDigitCarry(this);"></TD>
</TR>
<TR>
<TD>&nbsp;</TD>
<TD id="cell1" style="border-right: solid 2px black;border-bottom: solid 2px black;">0</TD>
<TD id="cell2" style="border-right: solid 2px black;border-bottom: solid 2px black;">0</TD>
<TD id="cell3" style="border-right: solid 2px black;border-bottom: solid 2px black;">0</TD>
<TD id="cell4" style="border-right: solid 2px black;border-bottom: solid 2px black;">0</TD>
<TD id="cell5" style="border-right: solid 2px black;border-bottom: solid 2px black;">1</TD>
<TD id="cell6" style="border-right: solid 2px black;border-bottom: solid 2px black;">0</TD>
<TD id="cell7" style="border-right: solid 2px black;border-bottom: solid 2px black;">1</TD>
<TD id="cell8" style="border-bottom: solid 2px black;">1</TD>
</TR>
<TR>
<TR>
<TD>-</TD>
<TD id="cell11" style="border-right: solid 2px black;border-bottom: solid 2px black;">1</TD>
<TD id="cell12" style="border-right: solid 2px black;border-bottom: solid 2px black;">0</TD>
<TD id="cell13" style="border-right: solid 2px black;border-bottom: solid 2px black;">0</TD>
<TD id="cell14" style="border-right: solid 2px black;border-bottom: solid 2px black;">1</TD>
<TD id="cell15" style="border-right: solid 2px black;border-bottom: solid 2px black;">1</TD>
<TD id="cell16" style="border-right: solid 2px black;border-bottom: solid 2px black;">0</TD>
<TD id="cell17" style="border-right: solid 2px black;border-bottom: solid 2px black;">1</TD>
<TD id="cell18" style="border-bottom: solid 2px black;">1</TD>
</TR>
<TR>
<TD>=</TD>
<TD id="cell31" style="background: #FFAAFF; color: 880088; border-right: solid 2px black;border-bottom: solid 2px black;cursor: pointer; cursor: hand; " onclick="JavaScript: clickDigit(this);"></TD>
<TD id="cell32" style="background: #FFAAFF; color: 880088; border-right: solid 2px black;border-bottom: solid 2px black;cursor: pointer; cursor: hand; " onclick="JavaScript: clickDigit(this);"></TD>
<TD id="cell33" style="background: #FFAAFF; color: 880088; border-right: solid 2px black;border-bottom: solid 2px black;cursor: pointer; cursor: hand; " onclick="JavaScript: clickDigit(this);"></TD>
<TD id="cell34" style="background: #FFAAFF; color: 880088; border-right: solid 2px black;border-bottom: solid 2px black;cursor: pointer; cursor: hand; " onclick="JavaScript: clickDigit(this);"></TD>
<TD id="cell35" style="background: #FFAAFF; color: 880088; border-right: solid 2px black;border-bottom: solid 2px black;cursor: pointer; cursor: hand; " onclick="JavaScript: clickDigit(this);"></TD>
<TD id="cell36" style="background: #FFAAFF; color: 880088; border-right: solid 2px black;border-bottom: solid 2px black;cursor: pointer; cursor: hand; " onclick="JavaScript: clickDigit(this);"></TD>
<TD id="cell37" style="background: #FFAAFF; color: 880088; border-right: solid 2px black;border-bottom: solid 2px black;cursor: pointer; cursor: hand; " onclick="JavaScript: clickDigit(this);"></TD>
<TD id="cell38" style="background: #FFAAFF; color: 880088; border-bottom: solid 2px black;cursor: pointer; cursor: hand; " onclick="JavaScript: clickDigit(this);"></TD>
</TR>
</TABLE>
<br><br>
<a href="#" class="btn" onclick="JavaScript:checkAnswer();return true;">Check Answer</a>

<br><br><br>
<A href="http://www.101computing.net" target="_blank"><img src="101-computing-dot-net-s.png" border=0 width="160" height="63"></a></center>
</center>

</body>
</html>