Javascript Long Division Applet

You’d think it would be easy to find source code for a simple applet to demonstrate long division with a one-digit divisor and two-digit quotient. I wanted it to show the steps in long division, with the product for the first digit in the quotient shown, then that subtracted from the dividend, and the next digit in the quotient shown.

I had one in Flash I wanted to replace and I found all kinds of applets but none with the source code, so, here, as a public service, is what I did this evening while drinking beer.

You can see the end product here 

In case you are dying to know, here is how I write a program, regardless of the language:

1. Get something to work
2. Clean it up to make it better

To me, trying to get your code perfect on the first try is like expecting your first draft of an article to be perfect. I find it much easier to dash something off and then go back and rewrite. I know not everyone does it that way but it works for me.

I’m going to use jquery so let’s start with that

<script type=”text/javascript” src=”../javascript/jquery-1.11.0.min.js”></script>
<script type=”text/javascript” src=”../javascript/jquery-ui.min.js”></script>

<script type=”text/javascript”>

<! — First you need a random number function –>

function randnum(min,max)   {
var num=Math.round(Math.random()*(max-min))+min;
return num;
}

// Set up to get a new problem when the window loads. Create variables ;

window.onload = getProb ;
var rightans1 ;
var rightans2 ;
var dividend ;
var quotient ;
var divisor ;

 

function getProb()
{

quotient=randnum(10,100);
divisor=randnum(1,9) ;
document.getElementById(“ans1”).value = “” ;
document.getElementById(“ans2”).value = “” ;
document.getElementById(“yans1”).innerHTML = “” ;
document.getElementById(“yans2”).innerHTML = “” ;
dividend = quotient *divisor ;
divisor=dividend / quotient;
var w = quotient + “” ;
rightans1 = w.substring(0,1) ;
rightans2 = w.substr(1,1) ;
document.getElementById(“c”).innerHTML = divisor ;
document.getElementById(“divide”).innerHTML = dividend ;

}

Function above creates a problem with a quotient between 10 and 100 ;

The divisor will be between 1 and 9  ;

The quotient will be between 10 and 100 ;

I set the values in the form all to empty so that when a student reloads the page and gets a new problem the answer from the previous problem is not still there.

I made the dividend equal the quotient times the divisor to make sure that the divisor went into the dividend evenly with no remainder. I made a  local string variable, w, and then created two variables that were the first and second characters of that variable.

The final two lines in this statement write the problem to the page.

 

— Checking the problem is step 2.  Since I don’t like horrendously long blog posts, I’ll put that up tomorrow.