HalitArithmetica


<!DOCTYPE>

<html>
   <head>
      <title>HalitArithmetica</title>
	  <link rel="stylesheet" type="text/css" href="style.css">
  
<meta name="viewport" content="width=device-width" />
<link rel='stylesheet' id='open sans-css'  href='http://fonts.googleapis.com/css?family=Open+Sans%3A400%2C300%2C600%2C700%2C800%2C800italic%2C700italic%2C600italic%2C400italic%2C300italic&#038;ver=3.6' type='text/css' media='all' />
  <script type="text/javascript">
  
  var n1;
  var n2;
  var res;
  var op;
  var interval;
  var time = 60;
  var curr_time = 60;
  var score = 0;
  var level = 1;
  
  function randomIntFromInterval(min,max)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}

  function beginGame(){
  
    
	getN1();
	getOP();
	getN2();
	if(op==4){
		if((n1%n2 != 0)){
		beginGame();
		}
	}


	getRES();
  }
  
  function getN1(){
	n1 = randomIntFromInterval(1,10*level);
	document.getElementById("n1").innerHTML = n1;
  }
  
    function getN2(){
	n2 = randomIntFromInterval(1,10*level);
	document.getElementById("n2").innerHTML = n2;
  }
	function getOP() {
	op = randomIntFromInterval(1,4);
	}
  
	function getRES() {
	if(op==1){
	res = n1 + n2;
	}else if(op==2){
	res = n1 - n2;
	}else if(op==3){
	res = n1 * n2;
	}else if(op==4){
	res = n1 / n2;
	}
	
		document.getElementById("res").innerHTML = res;
	}
  
  function getANS(ans){
	  if(ans==op){
	  score = score + 1;
	  document.getElementById("score").innerHTML = score;
	  beginGame();
	  }else{
	  score = score - 1;
	  if(score < 0) { score = 0;}
	  document.getElementById("score").innerHTML = score;
	  beginGame();
	  }
  }
  
  function getMain(){
  
  if(level==6){
	location.reload();
	} else {
	document.getElementById("mainS").style.display = "none";
  interval = setInterval(function(){ timer(); }, 1000);
  }
  }
  
   
   function gameOver(){
	document.getElementById("mainS").style.display = "block";
	document.getElementById("mainS").innerHTML = "<h2>Game Over!</h2> <br><br> <p>Your Score is: <br><big><b>" + score + "</b></big></p> <br><br> <div onclick='getMain()'	style='cursor:pointer;padding:15px; background:#13AEAA; color:#f2f2f2;'> Play Again</div>";

   }
   
  function timer(){
  time = time - 1;
  if(time == 0){
  clearInterval(interval);
  getScoreBoard();
  }
  document.getElementById("time").innerHTML = time;
  }
  
  function getScoreBoard(){
	document.getElementById("mainS").style.display = "block";
level++;
	document.getElementById("mainS").innerHTML = "<h2>Level Completed!</h2> <br><b> <p>Your score is: <br><big><b>" + score + "</b></big></p><br><br><div onclick='getMain()' style='cursor:pointer;padding:15px; background:#13AEAA; color:#f2f2f2;'> Play Level "+ level +"</div>";
	
	if(level==6){
	gameOver();
	}
	time = curr_time / level;
	
  }

 
 
  </script>
  
  
  
  </head>
  
  
  <body onload="beginGame()">
  <div id="game">
  
 <div id="mainS">
 <h2>Welcome to Halit's Game!</h2><br><br>
 <p>This game is focused on children's arithmetic skills, calculation and speed.</p>
 
 <br>
 <p><strong>How To Play?</strong></p>
 <p>Choose the correct math symbol.</p><br><br>
 <div onclick="getMain()" style="cursor:pointer;padding:15px; background:#13AEAA; color:#f2f2f2;"> Play Game</div>
 </div>
  <h1>Halitarithmetica </h1>
  
  <div class="dash">
  <div class="score"> Score
   <div id="score">0</div>
   </div>
   <div class="timer">
   Time
   <div id="time">60</div>
   </div> <div style="clear:both;"></div>
   </div>
   
  <div class="bar1"></div><div class="bar2"></div>
 
  
  <div id="aritmatik">
	<div id="n1">5</div>
	<div id="op"><div class="div1"></div></div>
	<div id="n2">10</div>
	<div id="eq">=</div>
	<div id="res">15</div>
	</div>
  
  <div style="clear:both;"></div>
  <div id="buttons">
  <div id="add" onclick="getANS(1)">+</div>
  <div id="sub" onclick="getANS(2)">-</div>
  <div id="multi" onclick="getANS(3)">x</div>
  <div id="div" onclick="getANS(4)">/</div>
  </div>
  
  
   </div>
  </body>
  
  
  
 </html>
* {border:0px; margin:0px; padding:0px;}
body {background:#fcfcfc; color:#666; font-family:"Open Sans", sans-serif;}
#game { position:relative; width:500px; background:#EAE8EA; height:620px; margin:auto; margin-top:30px; border-radius:5px; margin-bottom:20px;}
h1 { font-weight:normal; text-align:center; padding-top:20px;  padding:10px; background:#3A3339; color:#fafafa;}
.bar1 {background:#13AEAA; height:20px; width:250px; float:left;}
.bar2 {background:#FF60A8; height:20px; width:250px; float:right;}

#aritmatik { width:360px; font-size:60px; margin:auto; padding-top:25px;}
#aritmatik div {width:68px; overflow:hidden; float:left; text-align:center;}
#aritmatik #res {width:110px;}
#aritmatik #eq {width:45px;}
 #op .div1 {position:relative; left: 4px; border:4px solid #777; border-radius:10px;  height:40px; width:40px;margin-top:20px; margin-left:5px; overflow:hidden; }
#buttons { font-size:120px; width:360px; margin:auto; padding-top:20px;}
#add { border-radius:5px; margin:10px; float:left; text-align:center; line-height:160px; width:160px; height:160px; background:#FFFEFF; color:#5DB1B0;transition:all 500ms;}
#sub { border-radius:5px; margin:10px; float:left; text-align:center; line-height:160px;  width:160px; height:160px; background:#FFFEFF; color:#5DB1B0;transition:all 500ms;}
#multi { border-radius:5px; margin:10px; float:left; text-align:center; line-height:160px;  width:160px; height:160px; background:#FFFEFF; color:#5DB1B0;transition:all 500ms;}
#div { border-radius:5px; margin:10px;float:left; text-align:center; line-height:160px; width:160px; height:160px; background:#FFFEFF; color:#5DB1B0;transition:all 500ms;}
#buttons div:hover {background:#5DB1B0; color:#FFFEFF; transition:all 500ms;}

#mainS  {z-index:10; padding:30px; text-align:center;  position:absolute; left:50px; top:150px; width:340px; height:380px; background:#fff; border-radius:5px;}
#mainS p {padding-bottom:7px;}

.dash {background:#3A3339; padding-bottom:10px; }
.timer { font-size:18px; width:250px;float:right; text-align:center; color:#f2f2f2;}
.score { font-size:18px;  width:250px;float:left; text-align:center; color:#f2f2f2;}

big  {font-size:30px;}