Jquery Math Addition / Game Script

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


  • 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.


Pick Game Dimension :


<!-- Script by hscripts.com -->
<!-- Copyright by Hscripts -->
<!-- More scripts @www.hscripts.com -->
<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;
{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,
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,
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,
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 {
border:2px solid #fff;
<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;">&copy;h</a></div></div>

  • 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


  • 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.


  • 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.

Related Scripts

Jquery Download

Ask Questions

Ask Question