const tab_a = []; 
const tab_b = []; 
var przyklad=0, przyklady;
var liczba_a, liczba_b, wynik, blad=0, dobrze=0;
var countdown;
var element;
var cdTimer;

var Liczba = new String();

window.onload = load;


function load ()
{
	przyklad=0, blad=0, dobrze=0;
	var option1, option2;
	for (a=1; a<=10; a++) {if (a==3) {select = ' selected="selected"';} else {select = ''; } option1 += '<option value="'+a*10+'"'+select+'>'+a*10+'</option>';}
	for (a=2; a<=30; a=a+2) {if (a==10) {select = ' selected="selected"';} else {select = ''; } option2 += '<option value="'+a+'"'+select+'>'+a+'</option>';}
	option2 += '<option value="99">99</option>'

	var tresc_diva = '<div>An application to improve your multiplication art is ahead of you. With it, learning the multiplication table will be easier. You choose the number of examples and the time to solve one, then the application draws two numbers from 1 to 10 and your task is to enter the correct multiplication of these two numbers.<br /><br />Choose the number of examples to solve <select id="przyklady">'+option1+'</select><br />Choose the time (in seconds) to solve the example <select id="czass">'+option2+'</select><br /><div id="start" onclick="start()">START</div></div><div><a href="https://play.google.com/store/apps/details?id=com.brylka.tabliczka" border="0"><img src="https://matematyka.wiki/obrazki/store-google-play-2.webp" width="30%"></a></div><div style="clear:both;"></div><div>Language: <a href="https://matematyka.wiki/app/tabliczka-mnozenia/"><img src="https://matematyka.wiki/app/tabliczka-mnozenia/lang_pl_pl.jpg" alt="Polski"></a> <a href="https://matematyka.wiki/app/tabliczka-mnozenia/en/"><img src="https://matematyka.wiki/app/tabliczka-mnozenia/lang_en_us.jpg" alt="English"></a></div>';
	document.getElementById("tabmn").innerHTML = tresc_diva;
	

}


function start()
{
	przyklady = document.getElementById("przyklady").value
	czas = document.getElementById("czass").value
	rysuj();
	losuj();

}
	
function stop () 
{
	if(blad==1) strblad="only 1 error!";
	else if ((blad>1 && blad<5)||(blad>21 && blad<25)||(blad>31 && blad<35)||(blad>41 && blad<45)||(blad>51 && blad<55)||(blad>61 && blad<65)||(blad>71 && blad<75)||(blad>81 && blad<85)||(blad>91 && blad<95)) strblad=blad + "  mistakes!";
	else strblad=blad + " mistakes!";
	info="On " + przyklady + " examples you made " + strblad;
	if(blad==0) info = "You have solved " + przyklady + " examples and you have not made any mistake. BRAVO!";
	else if(blad==przyklady) info += "<br />One thing is certain, without a calculator you will not survive in this brutal world ;-)";
//	info += '<br /><a onclick="load()">Restart</a>';
	document.getElementById("czas").innerHTML = '';
	document.getElementById("czas").style.backgroundColor = "";
//	document.getElementById("zadanie").innerHTML = '';
	document.getElementById("zadanie").style.display = 'none';
	document.getElementById("przyciski").style.display = 'none';
	document.getElementById("restart").style.display = 'block';
	document.getElementById("koniec").innerHTML = info;
	document.getElementById("koniec").style.display = 'block';
}






function losuj ()
{

	if (przyklad>=przyklady) 
	{
		setTimeout("stop()", 500);
		
	} else {
	
	przyklad++;	
	poz_liczba = Math.floor(Math.random() * (tab_a.length));
	
	liczba = tab_a[poz_liczba];
	tab_a.splice(poz_liczba, 1);
	
	liczba_a = Math.floor(liczba/10);
	liczba_b = liczba - liczba_a*10;
	if (liczba_b == 0) liczba_b = 10;
	
	element = "a" + liczba_a + "b" + liczba_b;
	wynik = liczba_a*liczba_b;

//	document.getElementById(element).style.borderColor = "purple";
	document.getElementById(element).style.backgroundColor = "purple";
	document.getElementById("zadanie").innerHTML = liczba_a+'*'+liczba_b+'=?';

	for (a=0; a<liczba_a; a++)
	{
		element2 = "a" + a + "b" + liczba_b;
		document.getElementById(element2).style.borderColor = "purple";
	}
	for (b=0; b<liczba_b; b++)
	{
		element2 = "a" + liczba_a + "b" + b;
		document.getElementById(element2).style.borderColor = "purple";
	}
	element2 = "a" + 0 + "b" + liczba_b;
	document.getElementById(element2).style.backgroundColor = "purple";
	element2 = "a" + liczba_a + "b" + 0;
	document.getElementById(element2).style.backgroundColor = "purple";

	document.onkeydown=ReadKey;
	
	countdown = czas;
	
	odliczanie();
	
	}
}



function odliczanie() {
	if(countdown<=0) {
		document.getElementById("czas").innerHTML = "0";
		wyniczek();
		setTimeout("losuj()", 1000);
	} else {
		if(countdown<4) document.getElementById("czas").style.backgroundColor="red";
		else document.getElementById("czas").style.backgroundColor="green";
		document.getElementById("czas").innerHTML = countdown;
		cdTimer=setTimeout("odliczanie()",1000);
		countdown--;
	}
}

function ReadKey(e) {
	var key, n;
	if (!e) var e = window.event;
	if (e.keyCode) key = e.keyCode;
	else if (e.which) key = e.which;
	if (((key > 47) && (key < 58)) || ((key > 95) && (key < 106))) {
		
		if (key > 95) { key-=48; }
		key-=48; 
		
		zawartosc = document.getElementById(element).innerHTML
		if (zawartosc.length < 3) document.getElementById(element).innerHTML = zawartosc+key;

	} else if(key==13) { 
		clearTimeout(cdTimer);
		wyniczek();
		losuj(); 
	} else if(key==8) {
		
		zawartosc = document.getElementById(element).innerHTML
		n = zawartosc.length;
		
		if(n > 1) zawartosc = zawartosc.substr(0,n-1);
		else if(n==1) zawartosc="";
		document.getElementById(element).innerHTML = zawartosc;

	}
	return true;
} 

function klik(key)
{
	if (key >= 0 && key <= 9)
	{
		zawartosc = document.getElementById(element).innerHTML
		if (zawartosc.length < 3) document.getElementById(element).innerHTML = zawartosc+key;
	} else if(key==-1) 
	{
		clearTimeout(cdTimer);
		wyniczek();
		losuj(); 
	} else if(key==-2) {
		
		zawartosc = document.getElementById(element).innerHTML
		n = zawartosc.length;
		
		if(n > 1) zawartosc = zawartosc.substr(0,n-1);
		else if(n==1) zawartosc="";
		document.getElementById(element).innerHTML = zawartosc;

	}
	return true;
}

function wyniczek () 
{
	document.onkeydown=nullevent;
	document.onclick=nullevent;
	zawartosc = document.getElementById(element).innerHTML
	if (wynik != zawartosc) 
	{ 
		blad++;
		document.getElementById(element).style.backgroundColor = "red";
	} else {
		dobrze++;
		document.getElementById(element).style.backgroundColor = "green";
	}
	document.getElementById(element).innerHTML = wynik;
	document.getElementById(element).style.borderColor = "gray";
		
	for (a=0; a<liczba_a; a++)
	{
		element2 = "a" + a + "b" + liczba_b;
		document.getElementById(element2).style.borderColor = "gray";
	}
	for (b=0; b<liczba_b; b++)
	{
		element2 = "a" + liczba_a + "b" + b;
		document.getElementById(element2).style.borderColor = "gray";
	}
	element2 = "a" + 0 + "b" + liczba_b;
	document.getElementById(element2).style.backgroundColor = "blue";
	element2 = "a" + liczba_a + "b" + 0;
	document.getElementById(element2).style.backgroundColor = "blue";
	if (przyklad < przyklady) {document.getElementById("przykladow").innerHTML = przyklad+1+' in '+przyklady;}
	document.getElementById("odpowiedzi").innerHTML = 'good: '+dobrze+' wrong: '+blad;
}

function nullevent() {
	return true;
}

function rysuj()
{
	var tresc_diva ="";
	
	for (a=0; a<=10; a++)
	{
		for (b=0; b<=10; b++)
		{
			var element = "a" + a + "b" + b;

			if (a==0 && b==0)
			{
				tresc_diva = tresc_diva + '<div class="liczby_a" id="'+element+'">*</div>';
			} else if (a==0) 
			{ 
				tresc_diva = tresc_diva + '<div class="liczby_a" id="'+element+'">'+b+'</div>';
			} else if (b==0) {
				tresc_diva = tresc_diva + '<div class="liczby_a" id="'+element+'">'+a+'</div>';
			} else {
				tresc_diva = tresc_diva + '<div class="liczby" id="'+element+'">'+'</div>';
			}
		}
	tresc_diva = tresc_diva + '<div style="clear:both;"></div>';
	
	}
	
	tresc_diva = tresc_diva + '<div id="czas"></div><div id="przykladow">1 in '+przyklady+'</div><div id="odpowiedzi">good: 0 wrong: 0</div><div id="zadanie">'+liczba_a+'*'+liczba_b+'=?</div><div id="restart" onclick="load()">Restart</div><div style="clear:both;"></div><div id="przyciski">';
	for (a=1; a<=12; a++)
		{
			if (a<6)
			{
				tresc_diva = tresc_diva + '<div class="przyciski" onclick="klik('+a+')">'+a+'</div>';
			} else if (a>6 && a<11) 
			{ 
				tresc_diva = tresc_diva + '<div class="przyciski" onclick="klik('+(a-1)+')">'+(a-1)+'</div>';
			} else if (a==11) 
			{
				tresc_diva = tresc_diva + '<div class="przyciski" onclick="klik(0)">0</div>';
			} else if (a==6) 
			{
				tresc_diva = tresc_diva + '<div class="przyciski" onclick="klik(-2)">&lt;-</div>';
			} else if (a==12) 
			{
				tresc_diva = tresc_diva + '<div class="przyciski" onclick="klik(-1)">OK</div>';
			}
		}
	tresc_diva = tresc_diva + '</div><div style="clear:both;"></div><div id="koniec"></div>';
	
	for (a=0; a<=99; a++)
	{
		tab_a[a] = a+10;
	}

	document.getElementById("tabmn").innerHTML = tresc_diva;
		
}