albertodelax/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
	<title>Arithmatic</title>
	<style type="text/css">
	body {
		font-family: 'Helvetica Neue', Helvetica, sans-serif;
		margin: 0;
		color: white;
	}

	h1{
		font-size: 36px;
		font-weight: 100;
		margin: 0;
	}
	h2{
		font-size: 12px;
		font-weight: 400;
		margin: 0;
	}
	h3{
		margin: auto;
		position: relative;
		top: 50%;
		transform: translateY(-50%);
		font-size: 36px;
		font-weight: 100;
	}

	#mainbg {
		background-color: #F44336;
		width: 100%;
		height: 100%;
		height: 627px;
		width: 375px;
		transition: background-color .5s;
		margin: auto;
	}

	#correct{
		font-size: 100px;
		margin: auto;
		position: absolute;
		left: 47%;
		top: 30%;
		opacity: 0;
		transition: all 0.3s;
	}

	#incorrect{
		font-size: 100px;
		margin: auto;
		position: absolute;
		left: 47%;
		top: 30%;
		opacity: 0;
		transition: all 0.3s;
	}

	#currentscore{
		top: 30px;
		left: 10px;
		position: relative;
		display: inline-block;
	}

	#bestscore{
		display: inline-block;
		float: right;
		top: 30px;
		right: 10px;
		position: relative;
	}

	#bestheader{
		float: right;
	}

	#swipecircle {
		color: #F44336;
		cursor: pointer;
		height: 115px;
		width: 115px;
		border-radius: 100%;
		background-color: white;
		margin: auto;
		position: relative;
		top: 40%;
		text-align: center;
		transform: translateY(-50%);
		animation-name: shrink;
		animation-duration: .3s;
		animation-timing-function: linear;
		text-align: center;
		z-index: 100;
	}

	#swipecircle.off{
		animation-name: none;
	}

	@keyframes shrink {
		0% {width: 115px;}
		50% {width: 0;}
		100% {width: 115px;}
	}

	#mathsymbol {
		font-size: 36px;
		font-weight: 200;
		margin: auto;
		position: relative;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		text-align: center;
	}

	#heartdiv{
		display: block;
		margin: auto;
		width: 170px;
		height: 100px;
		margin: auto;
		position: relative;
		top: 11%;
		transform: translateY(-50%);
		animation-name: slide;
		animation-duration: .5s;
	}

	#heartdiv.off{
		animation-name: none;
	}

	@keyframes slide{
		0%{left: 0;}
		100%{left: 20px;}
	}

	.hearts{
		display: inline-block;
		font-size: 50px;
	}

	#dropheart{
		display: inline-block;
		font-size: 50px;
		animation-name: drop;
		animation-duration: .7s;
		position: absolute;
		right: 3px;
		top: 0;
	}

	#dropheart.off{
		animation-name: none;
	}

	@keyframes drop{
		0% {top:0;}
		100% {top: 70px; transform: rotate(70deg);}
	}

	#timerbar {
		height: 15px;
		width: 100%;
		background-color: white;
		top: 621px;
		position: absolute;
		transition: all 5s;
		animation-name: timer;
		animation-duration: 5s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
	}

	#timerbar.off{
		animation-name: none;
	}

	.answer{
		width: 76px;
		height: 76px;
		border-radius: 100%;
		border: 1px solid white;
		margin: auto;
		position: relative;
		top: -37px;
		text-align: center;
		cursor: pointer;
	}

	.wronganswer{
		width: 76px;
		height: 76px;
		border-radius: 100%;
		border: 1px solid white;
		margin: auto;
		position: relative;
		top: 157px;
		text-align: center;
		cursor: pointer;
	}

	#answerleft{
		left: -135px;
		top: -55px;
	}

	#answerright{
		left: 135px;
		top: -135px;
	}

	@keyframes timer {
		0% {width: 375px;}
		100% {width: 0}
	}
	</style>
</head>
<body>
<div id="mainbg">
<div id="topsection">
	<div id="currentscore">
		<h2 id="header">SCORE</h2>
		<h1 id="numscore">0</h1>
	</div>

	<div id="bestscore">
		<h2 id="bestheader">BEST</h2>
		<h1>789,452</h1>
	</div>
</div>
	<div id="swipecircle" class="off">
		<p id="mathsymbol" class="off">34</br>+ 56</p>
	</div>
	<div class="answer" onclick="clickCorrect()">
		<h3 id="answer1">90</h3>
	</div>
	<div class="wronganswer" onclick="clickIncorrect()">
		<h3 id="answer2">93</h3>
	</div>

	<div class="wronganswer" id="answerleft" onclick="clickIncorrect()">
		<h3 id="answer3">85</h3>
	</div>

	<div class="wronganswer" id="answerright" onclick="clickIncorrect()">
		<h3 id="answer4">90</h3>
	</div>

	<p id="correct">&#x2713;</p>
	<p id="incorrect">&#x2716;</p>

	<div id="heartdiv" class="off">
		<div class="hearts"><p>&hearts;</p></div>
		<div class="hearts"><p>&hearts;</p></div>
		<div class="hearts"><p>&hearts;</p></div>
		<div class="hearts"><p>&hearts;</p></div>
		<div id='dropheart' class="off"><p>&hearts;</p></div>
	</div>

	<div id="timerbar"></div>
</div>

<script type="text/javascript">

	var bgColors = ["#2196F3", "#4CAF50", "#9C27B0", "#F44336"];
	var symbols = ["53</br>- 6", "12</br>&#215; 6", "88<br/>&#247; 4", "34</br>+ 56"];
	var answer1 = [47, 72, 22, 90];
	var answer2 = [59, 62, 18, 88];
	var answer3 = [45, 70, 27, 93];
	var answer4 = [49, 78, 19, 85];
	var i = 0;

	var answerChange = function(){
		document.getElementById('answer1').innerHTML=answer1[i];
		document.getElementById('answer2').innerHTML=answer2[i];
		document.getElementById('answer3').innerHTML=answer3[i];
		document.getElementById('answer4').innerHTML=answer4[i];
	};

	var timerBar = document.getElementById('timerbar');

	$(function(){
		$("#swipecircle").draggable({revert:true});
	});
	var numScore = document.getElementById('numscore');

	var scoreAdder = function(){
		numScore.innerHTML=parseInt(numScore.innerHTML,10)+1;
	};

	var heartSlide = function(){
		$("#heartdiv").removeClass('off');
		setTimeout(function(){
			$("#heartdiv").addClass('off');
		}, 700);
	};

	var changeBG = function(){
		document.getElementById("mainbg").style.backgroundColor = "#212121";
		document.getElementById("swipecircle").style.color="transparent";
		$("#dropheart").removeClass('off');
		heartSlide();
		answerChange();
		setTimeout(function(){
			document.getElementById("mainbg").style.backgroundColor = bgColors[i];
			document.getElementById('swipecircle').style.color = bgColors[i];
			document.getElementById('mathsymbol').innerHTML = symbols[i];
			i++;
			if (i === bgColors.length){
				i=0;
			}
		}, 300);
		setTimeout(function(){
			$("#dropheart").addClass('off');
		}, 700);
	};

	var timerLoop = setInterval(changeBG, 5000);

	var restartTimer = function(){
		clearInterval(timerLoop);
		document.getElementById("mainbg").style.backgroundColor = bgColors[i];
		document.getElementById('swipecircle').style.color = "transparent";
		document.getElementById('mathsymbol').innerHTML = symbols[i];
		setTimeout(function(){
			document.getElementById('swipecircle').style.color = bgColors[i];
			i++;

			if (i === bgColors.length){
				i=0;
			}
		}, 300);
		timerLoop = setInterval(changeBG, 5000);
	};

	var restartAnimation = function(){
		$("#timerbar").addClass("off");
		setTimeout(function(){
			$("#timerbar").removeClass("off");
		}, 100);
	};

	var resizeShapes = function(){
		$("#swipecircle").removeClass("off");
		setTimeout(function(){
			$("#swipecircle").addClass("off");
		}, 300);
	};

	var correctFade = function(){
		document.getElementById('correct').style.opacity=1;
		setTimeout(function(){
			document.getElementById('correct').style.opacity=0;
		}, 300);
	};

	var incorrectFade = function(){
		document.getElementById('incorrect').style.opacity=1;
		$("#dropheart").removeClass('off');
		heartSlide();
		setTimeout(function(){
			document.getElementById('incorrect').style.opacity=0;
		}, 300);
		setTimeout(function(){
			$("#dropheart").addClass('off');
		}, 700);
	};

	var blackenScreen = function(){
		clearInterval(timerLoop);
		document.getElementById("mainbg").style.backgroundColor = "#212121";
		document.getElementById("swipecircle").style.color="transparent";
		setTimeout(function(){
			document.getElementById("mainbg").style.backgroundColor = bgColors[i];
			document.getElementById('swipecircle').style.color = bgColors[i];
			document.getElementById('mathsymbol').innerHTML = symbols[i];
			i++;
			if (i === bgColors.length){
				i=0;
			}
	}, 300);
		timerLoop = setInterval(changeBG, 5000);
	};

	var hiscore = document.getElementById('numscore').innerHTML;

	$(".answer").droppable({
		drop: function(){
			restartTimer();
			restartAnimation();
			answerChange();
			resizeShapes();
			correctFade();
			var addInterval = setInterval(scoreAdder, 1);
			setTimeout(function(){
				clearInterval(addInterval);
			}, 300);
		}
	});

	var clickCorrect = function(){
		restartTimer();
		restartAnimation();
		answerChange();
		resizeShapes();
		correctFade();
		var addInterval = setInterval(scoreAdder, 1);
		setTimeout(function(){
			clearInterval(addInterval);
		}, 300);
	}

	$(".wronganswer").droppable({
		drop: function(){
			blackenScreen();
			answerChange();
			restartAnimation();
			resizeShapes();
			incorrectFade();
		}
	});

	var clickIncorrect = function(){
		blackenScreen();
		answerChange();
		restartAnimation();
		resizeShapes();
		incorrectFade();
	}

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
	<title>Arithmatic</title>
	<style type="text/css">
	body {
	font-family: 'Helvetica Neue', Helvetica, sans-serif;
	margin: 0;
	color: white;
	}

	h1{
	font-size: 36px;
	font-weight: 100;
	margin: 0;
	}
	h2{
	font-size: 12px;
	font-weight: 400;
	margin: 0;
	}
	h3{
	margin: auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	font-size: 36px;
	font-weight: 100;
	}

	#mainbg {
	background-color: #F44336;
	width: 100%;
	height: 100%;
	height: 627px;
	width: 375px;
	transition: background-color .5s;
	margin: auto;
	}

	#correct{
	font-size: 100px;
	margin: auto;
	position: absolute;
	left: 47%;
	top: 30%;
	opacity: 0;
	transition: all 0.3s;
	}

	#incorrect{
	font-size: 100px;
	margin: auto;
	position: absolute;
	left: 47%;
	top: 30%;
	opacity: 0;
	transition: all 0.3s;
	}

	#currentscore{
	top: 30px;
	left: 10px;
	position: relative;
	display: inline-block;
	}

	#bestscore{
	display: inline-block;
	float: right;
	top: 30px;
	right: 10px;
	position: relative;
	}

	#bestheader{
	float: right;
	}

	#swipecircle {
	color: #F44336;
	cursor: pointer;
	height: 115px;
	width: 115px;
	border-radius: 100%;
	background-color: white;
	margin: auto;
	position: relative;
	top: 40%;
	text-align: center;
	transform: translateY(-50%);
	animation-name: shrink;
	animation-duration: .3s;
	animation-timing-function: linear;
	text-align: center;
	z-index: 100;
	}

	#swipecircle.off{
	animation-name: none;
	}

	@keyframes shrink {
	0% {width: 115px;}
	50% {width: 0;}
	100% {width: 115px;}
	}

	#mathsymbol {
	font-size: 36px;
	font-weight: 200;
	margin: auto;
	position: relative;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	text-align: center;
	}

	#heartdiv{
	display: block;
	margin: auto;
	width: 170px;
	height: 100px;
	margin: auto;
	position: relative;
	top: 11%;
	transform: translateY(-50%);
	animation-name: slide;
	animation-duration: .5s;
	}

	#heartdiv.off{
	animation-name: none;
	}

	@keyframes slide{
	0%{left: 0;}
	100%{left: 20px;}
	}

	.hearts{
	display: inline-block;
	font-size: 50px;
	}

	#dropheart{
	display: inline-block;
	font-size: 50px;
	animation-name: drop;
	animation-duration: .7s;
	position: absolute;
	right: 3px;
	top: 0;
	}

	#dropheart.off{
	animation-name: none;
	}

	@keyframes drop{
	0% {top:0;}
	100% {top: 70px; transform: rotate(70deg);}
	}

	#timerbar {
	height: 15px;
	width: 100%;
	background-color: white;
	top: 621px;
	position: absolute;
	transition: all 5s;
	animation-name: timer;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	}

	#timerbar.off{
	animation-name: none;
	}

	.answer{
	width: 76px;
	height: 76px;
	border-radius: 100%;
	border: 1px solid white;
	margin: auto;
	position: relative;
	top: -37px;
	text-align: center;
	cursor: pointer;
	}

	.wronganswer{
	width: 76px;
	height: 76px;
	border-radius: 100%;
	border: 1px solid white;
	margin: auto;
	position: relative;
	top: 157px;
	text-align: center;
	cursor: pointer;
	}

	#answerleft{
	left: -135px;
	top: -55px;
	}

	#answerright{
	left: 135px;
	top: -135px;
	}

	@keyframes timer {
	0% {width: 375px;}
	100% {width: 0}
	}
	</style>
	</head>
	<body>
	<div id="mainbg">
	<div id="topsection">
	<div id="currentscore">
	<h2 id="header">SCORE</h2>
	<h1 id="numscore">0</h1>
	</div>

	<div id="bestscore">
	<h2 id="bestheader">BEST</h2>
	<h1>789,452</h1>
	</div>
	</div>
	<div id="swipecircle" class="off">
	<p id="mathsymbol" class="off">34</br>+ 56</p>
	</div>
	<div class="answer" onclick="clickCorrect()">
	<h3 id="answer1">90</h3>
	</div>
	<div class="wronganswer" onclick="clickIncorrect()">
	<h3 id="answer2">93</h3>
	</div>

	<div class="wronganswer" id="answerleft" onclick="clickIncorrect()">
	<h3 id="answer3">85</h3>
	</div>

	<div class="wronganswer" id="answerright" onclick="clickIncorrect()">
	<h3 id="answer4">90</h3>
	</div>

	<p id="correct">✓</p>
	<p id="incorrect">✖</p>

	<div id="heartdiv" class="off">
	<div class="hearts"><p>&hearts;</p></div>
	<div class="hearts"><p>&hearts;</p></div>
	<div class="hearts"><p>&hearts;</p></div>
	<div class="hearts"><p>&hearts;</p></div>
	<div id='dropheart' class="off"><p>&hearts;</p></div>
	</div>

	<div id="timerbar"></div>
	</div>

	<script type="text/javascript">

	var bgColors = ["#2196F3", "#4CAF50", "#9C27B0", "#F44336"];
	var symbols = ["53</br>- 6", "12</br>× 6", "88<br/>÷ 4", "34</br>+ 56"];
	var answer1 = [47, 72, 22, 90];
	var answer2 = [59, 62, 18, 88];
	var answer3 = [45, 70, 27, 93];
	var answer4 = [49, 78, 19, 85];
	var i = 0;

	var answerChange = function(){
	document.getElementById('answer1').innerHTML=answer1[i];
	document.getElementById('answer2').innerHTML=answer2[i];
	document.getElementById('answer3').innerHTML=answer3[i];
	document.getElementById('answer4').innerHTML=answer4[i];
	};

	var timerBar = document.getElementById('timerbar');

	$(function(){
	$("#swipecircle").draggable({revert:true});
	});
	var numScore = document.getElementById('numscore');

	var scoreAdder = function(){
	numScore.innerHTML=parseInt(numScore.innerHTML,10)+1;
	};

	var heartSlide = function(){
	$("#heartdiv").removeClass('off');
	setTimeout(function(){
	$("#heartdiv").addClass('off');
	}, 700);
	};

	var changeBG = function(){
	document.getElementById("mainbg").style.backgroundColor = "#212121";
	document.getElementById("swipecircle").style.color="transparent";
	$("#dropheart").removeClass('off');
	heartSlide();
	answerChange();
	setTimeout(function(){
	document.getElementById("mainbg").style.backgroundColor = bgColors[i];
	document.getElementById('swipecircle').style.color = bgColors[i];
	document.getElementById('mathsymbol').innerHTML = symbols[i];
	i++;
	if (i === bgColors.length){
	i=0;
	}
	}, 300);
	setTimeout(function(){
	$("#dropheart").addClass('off');
	}, 700);
	};

	var timerLoop = setInterval(changeBG, 5000);

	var restartTimer = function(){
	clearInterval(timerLoop);
	document.getElementById("mainbg").style.backgroundColor = bgColors[i];
	document.getElementById('swipecircle').style.color = "transparent";
	document.getElementById('mathsymbol').innerHTML = symbols[i];
	setTimeout(function(){
	document.getElementById('swipecircle').style.color = bgColors[i];
	i++;

	if (i === bgColors.length){
	i=0;
	}
	}, 300);
	timerLoop = setInterval(changeBG, 5000);
	};

	var restartAnimation = function(){
	$("#timerbar").addClass("off");
	setTimeout(function(){
	$("#timerbar").removeClass("off");
	}, 100);
	};

	var resizeShapes = function(){
	$("#swipecircle").removeClass("off");
	setTimeout(function(){
	$("#swipecircle").addClass("off");
	}, 300);
	};

	var correctFade = function(){
	document.getElementById('correct').style.opacity=1;
	setTimeout(function(){
	document.getElementById('correct').style.opacity=0;
	}, 300);
	};

	var incorrectFade = function(){
	document.getElementById('incorrect').style.opacity=1;
	$("#dropheart").removeClass('off');
	heartSlide();
	setTimeout(function(){
	document.getElementById('incorrect').style.opacity=0;
	}, 300);
	setTimeout(function(){
	$("#dropheart").addClass('off');
	}, 700);
	};

	var blackenScreen = function(){
	clearInterval(timerLoop);
	document.getElementById("mainbg").style.backgroundColor = "#212121";
	document.getElementById("swipecircle").style.color="transparent";
	setTimeout(function(){
	document.getElementById("mainbg").style.backgroundColor = bgColors[i];
	document.getElementById('swipecircle').style.color = bgColors[i];
	document.getElementById('mathsymbol').innerHTML = symbols[i];
	i++;
	if (i === bgColors.length){
	i=0;
	}
	}, 300);
	timerLoop = setInterval(changeBG, 5000);
	};

	var hiscore = document.getElementById('numscore').innerHTML;

	$(".answer").droppable({
	drop: function(){
	restartTimer();
	restartAnimation();
	answerChange();
	resizeShapes();
	correctFade();
	var addInterval = setInterval(scoreAdder, 1);
	setTimeout(function(){
	clearInterval(addInterval);
	}, 300);
	}
	});

	var clickCorrect = function(){
	restartTimer();
	restartAnimation();
	answerChange();
	resizeShapes();
	correctFade();
	var addInterval = setInterval(scoreAdder, 1);
	setTimeout(function(){
	clearInterval(addInterval);
	}, 300);
	}

	$(".wronganswer").droppable({
	drop: function(){
	blackenScreen();
	answerChange();
	restartAnimation();
	resizeShapes();
	incorrectFade();
	}
	});

	var clickIncorrect = function(){
	blackenScreen();
	answerChange();
	restartAnimation();
	resizeShapes();
	incorrectFade();
	}

	</script>
	</body>
	</html>