Jquery Math Addition / Game Script

Simple Math Game Script for your website/blog. Embed this addition script in your webpage for user interaction.

Features

Jquery script that creates a math addition game out of unordered numbers.
This is a simple playable version for adding the numbers fastly.
Can be used to check the concentration power of human.
This Jquery game works in all modern browsers.

Preview

Pick Game Dimension :

Downloads

<html>
<head><title>Jquery Math Addition / Game</title><script type="text/javascript" src="jquery.js"></script><script type='text/javascript'>function randomFromTo(from, to){return Math.floor(Math.random() * (to - from + 1) + from);}Array.prototype.clean = function(deleteValue){for (var i = 0; i < this.length; i++){if (this[i] == deleteValue) {
this.splice(i, 1);i--;}}return this;};var sum = 0;var tempindex = 0;var numbers = new Array();function generaterandomnum(){var looprand = randomFromTo(1, 3);var total
= 0;var arrayIndex
= new Array();if (looprand > numbers.length){looprand = numbers.length;}for (j=0; j<looprand; j++) {var randindex = randomFromTo(0, numbers.length - 1);randindex = getUnique(randindex, arrayIndex);total = total + numbers[randindex];arrayIndex[j] = randindex;}sum = total;$("#nextsum").html(total);}function getUnique(index, arrayIn){if ((jQuery.inArray(index, arrayIn) == -1)) {return index;} else {rindex = randomFromTo(0, numbers.length - 1);return getUnique(rindex, arrayIn);}}
var sumtemp = 0;var numtemp = new Array();var arrIndex = new Array();function boxClick(obj) {if (!$(obj).hasClass("disable")) {var clickedindex = parseInt($(obj).attr("id").replace("num", ""));var temp = parseInt($(obj).find("p").html());if (!$(obj).hasClass("red")) {$(obj).addClass("red clicked");arrIndex[tempindex] = clickedindex;sumtemp = sumtemp + temp;tempindex++;if (sumtemp == sum) {$(".clicked").unbind("click");$(".clicked").removeAttr("id");$(".clicked").addClass("disable");$(".clicked").animate({backgroundColor: "#e3e3e3",color: "#e3e3e3",borderColor: "#e3e3e3"}, 500, function() {$(".disable").removeClass("clicked");});var y = 0;$("#dimcontainer div.boxnum").each(function(index) {if (!$(this).hasClass("disable")) {$(this).attr("id", "num"+y);y++;}});for ( z = 0; z < arrIndex.length; z++) {delete numbers[arrIndex[z]];}for ( e = 0; e <= arrIndex.length; e++) {delete arrIndex[e];}arrIndex.clean(undefined);numbers.clean(undefined);sum = 0;sumtemp = 0;tempindex = 0;generaterandomnum();if (numbers.length == 0) {$("#result_mess").show();$("#result_mess").html("<font color='green'>Thanks For Playing!</font>");} }if (sumtemp > sum) {sumtemp = 0;for ( var f = 0; f <= arrIndex.length; f++) {$("#num" +arrIndex[f]).removeClass("red");$("#num" +arrIndex[f]).removeClass("clicked");}$("#sum").html(sumtemp);$("#result_mess").html("<font color='red'>Wrong value Selected</font>");$("#result_mess").show();setTimeout(function() {$("#result_mess").html("");$("#result_mess").hide();}, 1500);numtemp = new Array();tempindex = 0;}} else {$(obj).removeClass("red");$(obj).removeClass("clicked");for (x = 0; x < arrIndex.length; x++) {if (arrIndex[x] == clickedindex) {arrIndex.splice(x, 1);}}tempindex--;sumtemp = sumtemp - temp;}}}function startgame(){var sds = document.getElementById("dum");if(sds == null){alert("You are using a free package.\n You are not allowed to remove the copyright.\n");}var sdss = document.getElementById("dumdiv");if(sdss == null){alert("You are using a free package.\n You are not allowed to remove the copyright.\n");}if(sdss != null){$("#pnext").show();$("#btnstart").hide();$("#btnreset").show();$("#result_mess").hide();sum
= 0;sumtemp
= 0;tempindex
= 0;var val
= parseInt($("#cbdim").val());var boxloop
= val * val;var boxleft
= ($(window).width() - (val * 78)) / 2;$("#dimcontainer").html('<div id="boxclear"></div>');$("#dimcontainer").css({width: (val * 78) + "px",left: boxleft + "px"});for ( i = 0; i < boxloop; i++){numbers[i] = randomFromTo(1, 15);$('#boxclear').before('<div class="boxnum" id="num'+i+'" '+' onclick="boxClick(this);"><p>'+numbers[i]+'</p></div>');}generaterandomnum();}}function changebut(){$("#btnstart").show();$("#btnreset").hide();}</script><style type='text/css'>#container {margin: 0 auto;text-align: center;}#dimcontainer{padding: 2px;margin: 0 auto;left: 500px;}.boxnum{text-align: center;cursor: pointer;border: 2px solid #e3e3e3;background: #fff;width: 70px;height: 70px;margin: 2px;float: left;color: #000;-webkit-border-radius: .3em;-moz-border-radius: .3em;border-radius: .3em;}.boxnum:hover{background: #e3e3e3;}.boxnum p{margin-top: 20px;font-size: 28px;font-weight: bold;text-shadow: -1px 1px 1px #fff;}.red{background: #4e4e4e;border-color: #4e4e4e;color: #fff;}.red:hover{background: #4e4e4e !important;}#boxclear{clear: both;}#pnext{font-size: 14px;margin-top: 10px;}#nextsum{font-weight: bold;font-size: 16px;position: relative;}#thanksalert{font-size: 13px;position: relative;top: -5px;
color: green;}#falsealert{font-size: 13px;position: relative;top: -7px;
color: red;}#pick {font-size: 18px;}
#btnstart{cursor: pointer;
}
#btnreset
{cursor: pointer;
}
.stbutton {display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.stbutton {
color: #606060;
border: solid 1px #b7b7b7;
background: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top,
#fff,
#ededed);
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
.stbutton:hover {
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
background: -moz-linear-gradient(top,
#fff,
#dcdcdc);
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}
.stbutton:active {
color: #999;
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
background: -moz-linear-gradient(top,
#ededed,
#fff);
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
}
#cbdim {padding:3px;margin: 0;-webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;background: #f8f8f8;color:#888;border:1px solid #ccc;outline:none;display: inline-block;appearance:none;cursor:pointer;
}
.alrtcls {
background:red;
border:2px solid #fff;
}</style>
</head>
<body><div align='center' style='color: #4e4e4e;margin-top: 50px;'><h1>Jquery Math Addition / Game</h1></div><div id="container"><div id="pick">Pick Game Dimension : <select id="cbdim" style="font-size:18px;" onchange='changebut()'><option value="3">3 x 3</option><option value="4">4 x 4</option><option value="5">5 x 5</option></select><input type="button" class="stbutton" id="btnstart" onclick="startgame();" value='Start Game'/><input type="button" class="stbutton" id="btnreset" onclick="startgame();" value='Reset Game' style='display: none;'/></div><br><p id="pnext" style='display: none;'>Find Total:
<span id="nextsum">0</span></p><span id='result_mess'></span><br><br><div id="dimcontainer"><div id="boxclear" style="clear:both"></div></div><br><div align='center' style=" padding-left: 10px;font-size: 10px;color: #dadada;" id="dumdiv">
<a href="http://www.hscripts.com" id="dum" style="padding-right:0px; text-decoration:none;color: green;">©h</a></div></div>
</body>
</html>

Release Date - 04-08-2014
Get free version without ©copyright link for just $10/-
For customization of this script or any script development, mail to support@hscripts.com

Usage

Copy paste the Math Addition Game Script in your webpage.
Download jquery.js file and place the file in your folder.
Now run the file in your browser to view the functionality of the script.

License

This Jquery code is given under GPL License
i.e. Free use for those who use the codes as it is.
Free, if your modification does not remove our copyright information and links.
Detailed License information can be found here.
You can purchase the script if your requirements does not meet our GPL License terms.