albertodelax · March 9, 2016 01:15
diff --git a/index.html b/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>