Hello!

I am having an annoying issue in this online educational math application for kids.

To see it in action and understand what is going on please go to: http://mathquiz.biz/addchallenge.php.

Basically it is a 'calculator' with an addition challenge shown in the top grey display. The goal is that thekid provide an answer to the challenge.
You can use either the screen keyboard (by clicking with the mouse) or your computer actual keyboard to type in the answer.

Many kids will play it on tablets and smart phones with small screens so they will want to scroll the page down to fit the application in their screen. I have noticed that if you enter this page, scroll it down and use the ACTUAL keyboard (not the screen one) to type the numbers, the screen will scroll up back to the top after the key stroke. However, if you click (or tap) anywhere in the screen BEFORE to start using the actual keyboard the scroll problem doesn't happen.

To reproduce the problem just follow the steps:

1) Go to http://mathquiz.biz/addchallenge.php
2) DON'T click anywhere in the screen
3) Reduce your browser window until you get the vertical scrollbar
4) Scroll down your window until you see the whole calculator
5) Now use your actual keyboard to type in a number - the number will show up in the blue display AND the browser screen will scroll back to the top

Now, if you reload the page and repeat the very same steps above but now in the step 2 you CLICK anywhere within the page (even the blank area) the scroll up won't happen.

I need to find a way to fix it to not obligate the kids to have to click or tap the screen before to use the actual keyboard...

The obvious assumption is that it could be easily healed by just focusing a page element as soon it is fully loaded, however it is not working unless you actually click something with your mouse.

PS: To see the whole code just right click the page and view source. All the code is there.

Any help will be appreciated!