Javascript can’t be in two places at the same time & a rant on math games

Spirit Lake: The Game is mostly an adventure game that teaches math. However, it has lots of Easter eggs, side quests and spin-offs added because hey, these are kids and sometimes they like to do something different and some of them have the attention span of an ant.

Our idea is to make the game fun, even when you get the answers wrong, you get sent to do something else that’s fun. I saw a Flash game that used refrigerator magnets for division problems which seemed pretty fun, but we are avoiding Flash since we want our game to be easily portable to iPads from the current version that runs on Mac OS and Windows. So … I spent today writing a refrigerator magnet division application. You can see it here. It still could use a bit of tweaking – I  need to add the refrigerator background and I think I’ll change the pictures of magnets I have to some that are more cute and fun.

Being our child, The Spoiled One did not even ask why The Invisible Developer was in the kitchen taking pictures of the refrigerator.

Here is the problem I ran into …. it was working fine EXCEPT if I had a problem like 36 ÷ 6 in which case the second value was blank and all I got was

36 ÷

It was as if the image (remember, each number is a picture of a refrigerator magnet), could only be used once. Well, of course, that WAS the problem.

From the enormously helpful Mozilla Developer Network

If child is a reference to an existing node in the document, appendChild moves it from its current position to the new position (i.e. there is no requirement to remove the node from its parent node before appending it to some other node).

This also means that a node can’t be in two points of the document simultaneously. So if the node already has a parent, it is first removed, then appended at the new position.

I was doing exactly  that, the offending statement is shown with *** below

function getProb()
{

var choose2=randnum(1,9);
var temp=randnum(1,9);
var choose1 = choose2 *temp ;
rightanswer=choose1 / choose2;
w = choose1 + "" ; x = w.substring(0,1) ;
** document.getElementById("pic").appendChild(imgArray[(choose2)]);
document.getElementById("tot").appendChild(imgArray[(x)]);
if (w.substring(1,2) )

{
y = w.substring(1,2) ;
document.getElementById("tot2").appendChild(imgArray[(y)]);
}
}

What this snippet does is generate a random number between 1 and 9, then generate a second random number.  The two random numbers are multiplied to give me a product of two numbers between 1 and 9 because the game progresses gradually in difficulty from early levels that assume children have not yet mastered division with remainders, and this little applet goes into an early level. So, the number which we use as our divisor should be divisible without a remainder.

The divisor (which, of course goes first in a division problem) divided by the second number shown on the page (choose2, our dividend) gives us the right answer.

Earlier in the program (not shown) I had created an array which was like this

var imgArray = new Array() ;
imgArray[0] = new Image() ;
imgArray[0].src = "zero.png" ;
imgArray[1] = new Image() ;
imgArray[1].src = "one.png" ;

The answer is going to be between 1 and 9, so I can take whatever it is, find the same number in the array and put that image into the cell for the dividend.

I need to break the number to be divided down into digits because, remember, these are refrigerator magnets and numbers between 1 and 9, so each digit is a separate image. I did it by making a string variable by adding “” to choose1. I then took the first digit and put that image into a table cell. If there was a second digit, I took the  image in the array corresponding to that and put that into another table cell.

BUT …. what happened was when a number was used twice, like in the example of 36 divided by 6, when I appended the 6 to the divisor, it was removed from the dividend cell.

How to solve this? Well, one way is to create another array of images, which I did, both because it was a super simple solution and I immediately thought of several other reasons off the top of my head why that might be useful. I can certainly envision using this code again in the game, for example, to emphasize which is the divisor and which is the dividend. There are lots of points where students confuse the two, or fail to understand that you cannot switch them around and still get the same answer, like you do with multiplication. In fact, I’m already thinking about having the numbers for the dividend being red or flashing (probably not) or from a different set of magnets.

So, there you have a nifty little reminder about how appendChild works and a super-simple way to fix a possible problem.

There is also another point in here I’d like to make. Last night, I attended a meet-up on gaming where some people were positive that they did not need to know anything about math education to write a math game because, “Hey, everybody knows K-12 math and the teachers know how to teach it.”

Yes, most teachers do know exactly what their students should be learning, but do YOU? Because if you have a game that is assuming students can divide numbers that have remainders and the students are not at that point yet, they will be frustrated. It really isn’t the teacher’s responsibility to insure that your game that you say is at fourth grade level really is. Even if it is, at what point in fourth grade? What exactly does it teach? When should he or she be introducing it to the students? At the end of the school year? At the beginning? Do you know what a divisor or dividend is and that students often mix them up? What area of mathematics do most students have problems with in fourth and fifth grade? What should your game emphasize?

I think the fact that many math educational game designers don’t give much attention at all to math is why most math educational games suck at being educational, no matter how cool they may be as games.