Multiplication exercise

I remember one of my first programs I wrote in Chipmunk Basic back in 1996. It was a program that read a file with my English vocabulary exercise, it managed to bring my result from about 8 out of 20 to 18, just by training with this program once a day before the test. The task is easy, just put all the words in an array and the once I complete correctly get a second round and if I successfully translate it the second time it is removed from the list. Then the hard words keep coming back until all words has been completed two times. Last week my son got a daily multiplications exercise for 10 minutes as homework, no particular way was specified, a few games were given as options. But as a good father who like to code, I wrote him a similar program for that purpose. And he is now spending 20 minutes a day doing homework because he wants to get rid of all the numbers and complete the entire list. I also added a score that he can use to verify that he actually improves every day and when all calculations has been completed without any fails, he will get the score 100/100.

The script is fairly small, and you can try it our and check out all of the code at the multiplication exercise page. Below you can see the javascript with comments. I have to excuse myself for writing the variables in Swedish, but I intend to use this code to teach my son and perhaps other Swedish kids how to code javascript.

var tal = document.getElementById('tal');
var svar = document.getElementById('svar');
var svara = document.getElementById('svara');
var facit = document.getElementById('facit');
var antalFel = 0;
var talLista = [];

// Since we do not want too many numbers and it is annoying to train on numbers you already know we have removed easy once like 1, 2, 5 and 10
var a = [3, 4, 6, 7, 8, 9, 12];
var b = [3, 4, 6, 7, 8, 9, 12];
var i = 0;

// Below here we generate the array that we should work with and call it talLista
var cnt = 0;
while (i < a.length) {
  var j = 0;
  while (j < b.length) {
    talLista[cnt] = [a[i], b[j]]; // This is just combining all the numbers in a and b in all possible combinations
    cnt++;
    j++;
  }
  i++;
}

// This is the function that does everything for us. But the main task is to validate the answer
var valideraSvar = function() {
  var tal = document.getElementById('tal');
	
  // If we have a result it will get validated, and if the answer is correct the calculation will be removed from the any
  if (tal.getAttribute('data-facit') !== null) {
    if (parseInt(svar.value, 10) === parseInt(tal.getAttribute('data-facit'), 10)) {
      facit.innerHTML = 'RÄTT SVAR: ' + tal.innerHTML + ' = ' + tal.getAttribute('data-facit') + '';
      talLista.splice(tal.getAttribute('data-tal_id'), 1);
    } else {
      facit.innerHTML = 'FEL SVAR: ' + tal.innerHTML + ' = ' + tal.getAttribute('data-facit') + ', du svarade ' + svar.value + '';
      antalFel++;
    }
    facit.innerHTML = facit.innerHTML + '
Du har ' 
                    + talLista.length + ' tal kvar att klara av.'
                    + '
';
    if (antalFel > 0) {
      //facit.innerHTML = facit.innerHTML + '
Antal felaktiga svar: ' + antalFel + '';
    }
  }
	
  // Checking if there are calculations left in the array then pick one at random to display
  if (talLista.length > 0) {
    var talId = Math.floor(Math.random() * talLista.length);
    var uppgift = talLista[talId];
    svar.value = '';

    tal.innerHTML = uppgift[0] + ' * ' + uppgift[1];
    tal.setAttribute('data-facit', (uppgift[0] * uppgift[1]));
    tal.setAttribute('data-tal_id', talId);

    svar.focus();
  } else {
    // If there are no more numbers in the array we display the success screen
    svar.remove();
    svara.remove();
    facit.innerHTML = facit.innerHTML + 'GRATTIS! Du klarade alla talen =)';
    if (antalFel > 0) {
      //facit.innerHTML = facit.innerHTML + '
Antal felaktiga svar: ' + antalFel + '';
    } else {
      facit.innerHTML = facit.innerHTML + '
Utan ett enda fel!!!';
    }
    if (antalFel > 54) {
      antalFel = 54;
    }
    facit.innerHTML = facit.innerHTML + '
Din skill level idag är ' +  Math.ceil(100*(1-Math.log(1+antalFel)/4)) + ' av 100';
  }
}

// We want to start by calling validate to initiate, if there is no answer the function will only present the first question
valideraSvar();

// This part of the code adds a listener for the answer button and calls our function every time it has been clicked
svara.addEventListener('click', valideraSvar);

// This part of the code adds a listener for keystrokes and calls our function every time you press the Enter key (13)
document.addEventListener('keydown', function(e) {
	if (e.keyCode === 13) {
		valideraSvar();
	}
});

We continuously call the function valideraSvar because it will validate the last answer if there was one and then render a new calculation to complete on the screen. When all the calculations in talLista has been successfully completed, it displays the winner screen with the score. Easy as pie…
My son does get a bit intimidated if the application tells him how many times he got it wrong. So, instead I did a small calculation that will render a score of 100 points if he get all right and less depending on how many error he makes, so that he can see that he is improving from day to day. I'm considering also adding a timer, as a part of the score calculation to make sure he continues to train until he gets fast at answering an don’t just sit and count on his fingers. But I believe that doing this everyday for a week or two will make him learn all the answers by heart anyway.

Now it is your turn. Do you remember your multiplication table? Give it a try and see if you can get to 100. Perhaps you also have kids that need to train on multiplication. You can always download the html-file and change the numbers in the variables a and b to reflect the numbers your kid need to train on.

With that I say happy math =)

2020-09-24 23:07:57 - multiplication, javascript, homework, software