<!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&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;}