# Javascript long-division applet, part 2

Yesterday I posted the code to get the problem, now here is where we check it. As I said yesterday, may way of programming is to knock out something that works and then go back and make it work better, like a first draft for a journal article. So, this is my first draft.

Keep in mind the point here is NOT a quiz but for them to review and see how long division works. So, if they get the wrong answer, they get an alert message that this is the wrong answer, but then the correct answer is shown. This happens for both the first and second digit of the quotient.  There are two digits in the quotient in these problems. We are trying to show students that when you do long division, you find the first digit, multiply that by the divisor, write the product below the dividend and subtract. Then, you do the same thing again for the next digit.

Also, I showed using alert here, but we actually use a function we wrote in our game because there are problems with using multiple alert boxes in the same page with Unity. The alert is included here for generalizability. This post is the second half of the javascript. You also need a bit of css and html that I’ll put up next.

You can see the final product here.

This is one of hundreds of applets we have written that are just auxiliary to the main game. You get sent here to study if you miss one of the math challenges in Spirit Lake: The Game.

Here is what this code does in order …

When they type in an answer, it is one digit at a time. The function checkProb, if it is the 1st digit,  hides the input box and answer button for the first digit and shows the correct answer. It also shows the input box and button to answer the second digit. The correct first digit is shown.

The product of the divisor and that first digit is computed, set to a value for a new variable d1, and that is shown.

The result is subtract from the dividend, and that result, e1 is shown but with a space included so the digits are lined up correctly.

If their answer is wrong, a message is shown telling them it is wrong and what the correct answer is. Actually, that message comes up first so once they click OK they can see the correct answer, product, etc.

Then, they enter the second digit and all of the steps execute again. After they have done a complete problem, the instructions on how to complete the problem are hidden and two new options are shown, to either get a new problem or go back to the game.

function checkProb(num){
this.num = num ;
if (this.num == 1)
{
var theirs = document.formx.ans1.value ;

\$(“#ans1”).hide() ;
\$(“#hd1”).hide() ;
\$(“#button1”).hide() ;
\$(“#hd2”).show() ;
\$(“#ans2”).show() ;
\$(“#button2”).show() ;
document.getElementById(“yans1”).innerHTML = rightans1 ;
\$(“#yans1”).show() ;
var d1 = rightans1*divisor *10 ;
var e1 = dividend – d1 ;
document.getElementById(“d”).innerHTML = d1 ;
\$(“#d”).show() ;
document.getElementById(“e”).innerHTML = ‘&nbsp;’ +e1 ;
if (theirs != rightans1){
}

}
else if (this.num ==2)
{
var theirs = document.formx.ans2.value ;
var d2 = rightans2*divisor ;
document.getElementById(“yans2”).innerHTML = rightans2 ;
document.getElementById(“f”).innerHTML = d2 ;
\$(“#f”).show() ;
\$(“#ans2”).hide() ;
\$(“#yans2”).show() ;
\$(“#fin2”).hide() ;
\$(“#fin”).show() ;
\$(“h3”).hide() ;
\$(“#button3”).show() ;
\$(“#button2”).hide() ;
if (theirs != rightans2){
}

}
}
</script>

# 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.

<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 ;

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.

« go back