<html>
<head>
<title>terper.dk - oplad din paratviden!</title>
<style>
body {font-family:sans-serif;}
form {z-index:2;}
input.result {font-size:120pt;width:400px;height:190px;text-align:center;font-weight:normal;font-family:sans-serif;bold;border-width:5px;border-style:solid;border-color:#000000;z-index:2;background-color:#ffffff;padding:0px;margin:0px;}
td.question {font-size:30pt;}
td.check {font-size:40pt;}
td.count {font-size:30pt;color:#808080;}
td.rating {font-size:50pt;}
td.number {font-size:40pt;font-weight:bold;text-align:center;border-width:1px;border-style:solid;border-color:#000000;width:100px;}
td.action {font-size:40pt;font-weight:bold;text-align:center;border-width:1px;border-style:solid;border-color:#000000;}
tr.numberrow {height:100px;}
</style>
<script>
var nBarWidth=0;
var timerStart;
var timerEnd;
var timerPause;
var timerWait;
var timer1;
var timer2;
var timerNew;
var timerMax=12;
var timerResult;
var nTableMin;
var nTableMax;
var nFactor1=0;
var nFactor2=0;
var nFactor1W;
var nFactor2W;
var nF1;
var nF2;
var bTimerOn = false;
var bStarted = false;
var bPause=false;
var nQuestionCount;
var nQuestionTotal = 30;
var nQuestionRight;
var nQuestionWrong;
var nRepeatCount=0;
var bResultVisible=true;
var nQuestionTablePos = 0;
// Create key event
var evt = document.createEvent('KeyboardEvent');


function Init() {
	document.getElementById('idTableFrom').value=1;
	document.getElementById('idTableTo').value=10;
	document.getElementById('idTableFrom').focus();
	document.getElementById('idResult').value="";
}

function StartTimer() {

	document.getElementById('idTimer').style.visibility="visible";
	timerStart = new Date();
	timerEnd = timerStart + 1000*timerMax;
	self.clearInterval(timer1);
        timer1 = self.setInterval(TimerTick,100);
}
function TimerTick() {
	nBarWidth=(new Date()-timerStart)/(timerMax*1000)*388;
	if(nBarWidth>388) {
		nBarWidth=0;
		document.getElementById('idTimer').width=388;
		self.clearInterval(timer1);
	Answer();
		
	}
	document.getElementById('idTimer').width=nBarWidth;

}
function TimerResultTick() {
		 if(bTimerOn){return}
         if(bResultVisible) {
           document.getElementById('idCheck').innerHTML="&nbsp;<img src='wrong.png'>&nbsp;" + (nFactor1*nFactor2);
         }else{
           document.getElementById('idCheck').innerHTML="&nbsp;<img src='wrong.png'>&nbsp;" ;
         }
         bResultVisible = !bResultVisible;
}

function TableFromChanged() {
	if(parseInt(document.getElementById('idTableTo').value)<parseInt(document.getElementById('idTableFrom').value)){
		document.getElementById('idTableTo').value = document.getElementById('idTableFrom').value
	}
}
function TableToChanged() {
	if(parseInt(document.getElementById('idTableTo').value)<parseInt(document.getElementById('idTableFrom').value)){
		document.getElementById('idTableFrom').value = document.getElementById('idTableTo').value
	}
}
function StartTerper() {
	bTimerOn=true;
	bStarted=true;
	nQuestionRight=0;
	nQuestionWrong=0;
	nQuestionCount=0;
	        document.getElementById('idMessageEnd');
	document.getElementById('idMessageEnd').innerHTML="";
	document.getElementById('idQuestionRemain').innerHTML=nQuestionTotal-nQuestionCount;
	document.getElementById('idWrong').innerHTML="0";
	document.getElementById('idRight').innerHTML="0";
	document.getElementById('idForm').idResult.value="";
	document.getElementById('idSetup').style.visibility="hidden";
	document.getElementById('idStop').style.visibility="visible";
	nTableMin = parseInt(document.getElementById('idTableFrom').value);
	nTableMax = parseInt(document.getElementById('idTableTo').value);

    QuestionTable();

	NewQuestion();

}
function QuestionTable() {
	//populate question table
	nF1 = new Array();
	nF2 = new Array();
	var i=0;
	for(n1= nTableMin;n1<= nTableMax;n1++){
		for(n2=1;n2<=10;n2++){
			nF1[i]=n1;
			nF2[i]=n2;
			i++;
		}
	}

	var nTemp1;
	var nTemp2;
	var nPos1;
	var nPos2;
	//mix question table
	for(n1=1;n1<=(i*5);n1++){
	   nPos1=Math.floor(Math.random()*i);
	   nPos2=Math.floor(Math.random()*i);
	   nTemp1=nF1[nPos1];
	   nTemp2=nF2[nPos1];
	   nF1[nPos1]=nF1[nPos2];
	   nF2[nPos1]=nF2[nPos2];
	   nF1[nPos2]=nTemp1;
	   nF2[nPos2]=nTemp2;
	}
	//if first is same as previous
	if((nF1[0]==nFactor1)&&(nF2[0]==nFactor2)){
		nF1[0]=nF1[5];
		nF2[0]=nF2[5];
		nF1[5]=nFactor1;
		nF2[5]=nFactor2;
	}
	nQuestionTablePos=0;
}

function StopTerper() {
	self.clearTimeout(timerNew);
	self.clearInterval(timer1);
	self.clearInterval(timerResult);
	self.clearInterval(timerWait);
	bTimerOn=false;
	bStarted=false;
	document.getElementById('idSetup').style.visibility="visible";
	document.getElementById('idStop').style.visibility="hidden";
	document.getElementById('idTimer').style.visibility="hidden";
	document.getElementById('idQuestion').innerHTML="";
	document.getElementById('idCheck').innerHTML="";
	document.getElementById('idResult').style.color = "#000000";
	document.getElementById('idResult').value="";
	document.getElementById('idTimer').width=0;

}
function PauseTerper() {
	if(bPause){
	 	document.getElementById('idPauseButton').innerHTML="Pause";
	 	bPause=false;

	} else {
		document.getElementById('idPauseButton').innerHTML="Fortsæt";
		bPause=true;
	}
	document.getElementById('idResult').focus();
}


function NewQuestion() {
	if(bPause) {
		timerWait = self.setInterval(TimerWaitTick,100);
		return;
	}
	bTimerOn=true;
	self.clearInterval(timerResult);
	document.getElementById('idResult').style.color = "#000000";
	document.getElementById('idResult').value="";
	document.getElementById('idResult').focus();
	document.getElementById('idCheck').innerHTML="&nbsp;<img src='box.png'>";
	if(nRepeatCount==1) {
		nFactor1=nFactor1W;
		nFactor2=nFactor2W;
	}else{
		//nFactor1 = Math.floor(Math.random() * (nTableMax - nTableMin + 1)) + nTableMin;
		//nFactor2 = Math.floor(Math.random() * 10) + 1;
		nFactor1 = nF1[nQuestionTablePos];
		nFactor2 = nF2[nQuestionTablePos];
        nQuestionTablePos++;
 	}
 	if(nRepeatCount>0) {
		nRepeatCount-=1
	}
	document.getElementById('idQuestion').innerHTML=nFactor1 + 'x' + nFactor2 + ' =&nbsp;' ;
	StartTimer();
	if(nQuestionTablePos >= nF1.length) {
		QuestionTable();
	}
}

function TimerWaitTick() {
	if(!bPause){
		self.clearInterval(timerWait);
		NewQuestion()
	}
}

function Answer() {
	if (!bStarted) {
		alert('Du skal trykke Start for at begynde at terpe'); 
		return;
	}
	self.clearTimeout(timerNew);
	self.clearInterval(timer1);
	var bRight=false;
	bTimerOn=false;
	document.getElementById('idResult').blur();
        document.getElementById('idStopButton').blur();
        document.getElementById('idStartButton').blur();

	document.getElementById('idTimer').style.visibility="hidden";
        document.getElementById('idTimer').width=1;
	if(parseInt(document.getElementById('idResult').value) == nFactor1*nFactor2) {
		document.getElementById('idCheck').innerHTML="&nbsp;<img src='right.png'>";
		document.getElementById('idResult').style.color = "#008000";
		nQuestionRight += 1;
		document.getElementById('idRight').innerHTML=nQuestionRight;
		bRight=true;
	} else {
		document.getElementById('idCheck').innerHTML="&nbsp;<img src='wrong.png'>&nbsp;" + (nFactor1*nFactor2);
		document.getElementById('idResult').style.color = "#ff0000";
		nQuestionWrong += 1;
		document.getElementById('idWrong').innerHTML=nQuestionWrong;
		nFactor1W=nFactor1;
		nFactor2W=nFactor2;
		nRepeatCount=2;
		bResultVisible=false;
		timerResult=self.setInterval(TimerResultTick,500);

	}
	nQuestionCount+=1;
	document.getElementById('idQuestionRemain').innerHTML=nQuestionTotal-nQuestionCount;
	if(nQuestionCount==nQuestionTotal) {
		StopTerper();
		document.getElementById('idResult').style.color = "#808080";
		document.getElementById('idResult').value="Slut";
		var sRating="";
		if(nQuestionRight==30) {
			sRating="12"
		}else if(nQuestionRight>27) {
			sRating = "10"
		}else if(nQuestionRight>23) {
			sRating = "7"
		}else if(nQuestionRight>19) {
			sRating = "4"
		}else if(nQuestionRight>15) {
			sRating = "02"
		}else if(nQuestionRight>5) {
			sRating = "00"
		}else {
			sRating = "-3"
		}
		document.getElementById('idMessageEnd').innerHTML = "Karakter: " + sRating;
	} else {
 		self.clearTimeout(timerNew);
		if(bRight){
			timerNew = self.setTimeout(NewQuestion,1000)
		}else{
			timerNew = self.setTimeout(NewQuestion,3500)
		}
	}
}

function Enter(sNo){
	document.getElementById('idResult').value += sNo;
}

function Delete() {
	document.getElementById('idResult').value = '';
}

function TriggerKey(nKeyCode) {
	evt.initKeyEvent(
             "keypress",        //  the kind of event
              true,             //  boolean "can it bubble?"
              true,             //  boolean "can it be cancelled?"
              null,             //  specifies the view context (usually window or null)
              false,            //  boolean "Ctrl key?"
              false,            //  boolean "Alt key?"
              false,            //  Boolean "Shift key?"
              false,            //  Boolean "Meta key?"
               9,               //  the keyCode
               0);              //  the charCode

	// Dispatch event
	document.getElementById('idResult').dispatchEvent( evt );
}
</script>
</head>
<body onload="javascript:Init();">
<br>
<div style="width:850px;">
<table border=0 cellpadding=0 cellspacing=0  align=center>
<tr height="40px"><td width="225px">&nbsp;</td><td align=left width="400px">
<FORM id=idTable>
<span id=idSetup>Terp
<SELECT style="position:relative;top=2;left=2;" id=idTableFrom onChange="javascript:TableFromChanged();">
<OPTION select VALUE="1">1
<OPTION VALUE="2">2
<OPTION VALUE="3">3
<OPTION VALUE="4">4
<OPTION VALUE="5">5
<OPTION VALUE="6">6
<OPTION VALUE="7">7
<OPTION VALUE="8">8
<OPTION VALUE="9">9
<OPTION VALUE="10">10
</SELECT>
-
<SELECT style="position:relative;top=2;left=2;"  id=idTableTo onChange="javascript:TableToChanged();">
<OPTION select VALUE="1">1
<OPTION VALUE="2">2
<OPTION VALUE="3">3
<OPTION VALUE="4">4
<OPTION VALUE="5">5
<OPTION VALUE="6">6
<OPTION VALUE="7">7
<OPTION VALUE="8">8
<OPTION VALUE="9">9
<OPTION VALUE="10">10
</SELECT>
-tabellen
&nbsp;&nbsp;&nbsp;&nbsp;<button id=idStartButton type=button onClick="javascript:if(!bStarted){this.blur();StartTerper()}";>Start</button>
<span id=idStop style="visibility:hidden;">
<button type=button id=idStopButton onClick="javascript:this.blur();StopTerper()";>Stop</button>&nbsp;&nbsp;
<button type=button id=idPauseButton onClick="javascript:this.blur();PauseTerper()";>Pause</button>
</span>
</FORM>
</td><td width="225px">&nbsp;</td></tr>
<tr valign=middle><td align=right valign=middle class=question id=idQuestion>&nbsp;</td><td align=center>
<div style="height:192px;overflow:hidden;">
<form id=idForm onsubmit="javascript:Answer();return false;"><input class="result" id=idResult type=text ></form>
<img id=idTimer src="pixel_blue.bmp" width=1 height=18 style="position:relative;top:-44px;z-index:1;visibility:hidden;">
</div>
</td><td align=left valign=middle class=check id=idCheck >&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>
<table width=100%><tr><td width=20%></td><td class=count align=center width=20%><font color=green><img src='right.png'></font></td><td width=20% align=center class=count><img src='box.png'></td><td class=count align=center width=20%><font color=red><img src='wrong.png'></font></td><td width=20%></td></tr>
<tr><td width=20%></td><td id=idRight class=count align=center width=20%>0</td><td id=idQuestionRemain align=center class=count width=20%>30</td><td id=idWrong class=count align=center width=20%>0</td><td width=20%></td></tr></table>
<td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td class=rating align=center id=idMessageEnd></td><td>&nbsp;</td></tr>

</table>
<table align=center>
<tr class=numberrow>
<td onclick='javascript:Enter(this.innerHTML);' class=number>1</td>
<td onclick='javascript:Enter(this.innerHTML);' class=number>2</td>
<td onclick='javascript:Enter(this.innerHTML);' class=number>3</td>
<td onclick='javascript:Enter(this.innerHTML);' class=number>4</td>
<td onclick='javascript:Enter(this.innerHTML);' class=number>5</td>
</tr>
<tr class=numberrow>
<td onclick='javascript:Enter(this.innerHTML);' class=number>6</td>
<td onclick='javascript:Enter(this.innerHTML);' class=number>7</td>
<td onclick='javascript:Enter(this.innerHTML);' class=number>8</td>
<td onclick='javascript:Enter(this.innerHTML);' class=number>9</td>
<td onclick='javascript:Enter(this.innerHTML);' class=number>0</td>
</tr>
<tr class=numberrow>
<td colspan=2 class=action onclick='jacascript:Delete();'>Slet</td>
<td colspan=3 class=action onclick='jacascript:Answer();'>Svar</td>
</div>
<center>
<!--<iframe src ="http://terper.dk/wordpress/?p=1" width="780px" height="800px" frameborder=0>
  <p>Your browser does not support iframes.</p>
</iframe>
-->
</center>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-10550457-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>