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 = ‘ ’ +e1 ;
if (theirs != rightans1){
alert(“Sorry,the correct answer is ” + 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){
alert(“Sorry,the correct answer is ” + rightans2) ;
}

}
}
</script>