diff --git a/Truck Game/README.md b/Truck Game/README.md
new file mode 100644
index 00000000..f9f59b9e
--- /dev/null
+++ b/Truck Game/README.md
@@ -0,0 +1,12 @@
+Truck Game
+==========
+
+http://dev.yilmazhuseyin.com/truck/ (Firefox only)
+
+This is a simple tool that can be use to teach children about colors as well as how to use mouse properly.
+
+It is written in ecmascript5. Because of some mozilla spesific api is used, It will only work in firefox for now. After the development process, I will add chrome support. Game is drawn using SVG.
+
+Tool is very easy to use. Where will be number of balls on the screen. When child chooses the right ball. ball will be fall into a truck and truck will be move out of screen. If child chooses a ball with wrong color. Truck will stay where it is and child will be able to try it again. There will also be a configuration link, from config menu you will be able to choose a spesific color to teach and number of balls that child will choose from.
+
+This tool is still in development. When I have a woking version I will put a link for it to use.
\ No newline at end of file
diff --git a/Truck Game/css/main.css b/Truck Game/css/main.css
new file mode 100644
index 00000000..bf598f03
--- /dev/null
+++ b/Truck Game/css/main.css
@@ -0,0 +1,10 @@
+div.main
+{
+ border-style:solid;
+ border-width:2px;
+ text-align:center;
+};
+.right_align
+{
+ text-align:right;
+}
\ No newline at end of file
diff --git a/Truck Game/index.html b/Truck Game/index.html
new file mode 100644
index 00000000..77f8ef52
--- /dev/null
+++ b/Truck Game/index.html
@@ -0,0 +1,133 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Start game
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+setup
+
+
+
diff --git a/Truck Game/js/ball.js b/Truck Game/js/ball.js
new file mode 100644
index 00000000..e516ef91
--- /dev/null
+++ b/Truck Game/js/ball.js
@@ -0,0 +1,176 @@
+"strict mode";
+game.createBall = (function(){
+ //creates a circle and animations elements
+ var createCircle = function(x,y,color){
+ logger.startLog('createCircle');
+ logger.log('cx',x);
+ logger.log('cy',y);
+ logger.log('color',color);
+
+ logger.endLog();
+ return {
+ 'circle':circle,
+ 'xanimation':xanimation,
+ 'yanimation':yanimation
+ };
+ };
+
+
+
+ var ballProto={
+ move:function(x,y,duration){
+ logger.startLog('ballProto.move');
+ var xanimation = this.animations.xanimation,
+ yanimation = this.animations.yanimation;
+ if(typeof duration === 'undefined'){
+ xanimation.removeAttributeNS(null,'to');
+ xanimation.removeAttributeNS(null,'dur');
+ yanimation.removeAttributeNS(null,'to');
+ yanimation.removeAttributeNS(null,'dur');
+ this.DOM.setAttributeNS(null,'cx',x);
+ this.DOM.setAttributeNS(null,'cy',y);
+ logger.log('ball moved to ' + x +','+y);
+ }else{
+ xanimation.setAttributeNS(null,'to',x);
+ xanimation.setAttributeNS(null,'dur',duration);
+ yanimation.setAttributeNS(null,'to',y);
+ yanimation.setAttributeNS(null,'dur',duration);
+ xanimation.beginElement();
+ yanimation.beginElement();
+ logger.log('start animation with ' + x +','+y+' in ' + duration);
+ };
+ this.x = x;
+ this.y = y;
+ logger.endLog();
+ },
+ setVisible:function(isVisible){
+ logger.startLog('ballProto.setVisible');
+ logger.log('isVisible',isVisible);
+ this.isVisible = isVisible;
+ this.DOM.setAttributeNS(null,'opacity',isVisible?'1':'0');
+ logger.endLog();
+ },
+ addClickHandler:function(){
+ this.DOM.addEventListener('click',this.clickHandler,false);
+ },
+ removeClickHandler:function(){
+ this.DOM.removeEventListener('click',this.clickHandler,false);
+ },
+ defaultBallLocation:{x:440,y:485}
+ };
+
+ return function(x,y,color){
+ var circle = document.createElementNS(this.svgns,'circle');
+ circle.setAttributeNS(null,'cx',x);
+ circle.setAttributeNS(null,'cy',y);
+ circle.setAttributeNS(null,'r',50);
+ circle.setAttributeNS(null,'fill',color);
+ circle.setAttributeNS(null,'stroke','black');
+ circle.setAttributeNS(null,'stroke-with','1px');
+ circle.setAttributeNS(null,'stroke-linecap','butt');
+ circle.setAttributeNS(null,'stroke-linejoint','miter');
+ circle.setAttributeNS(null,'stroke-opacity','1');
+ circle.setAttributeNS(null,'opacity','1');
+
+ //animation for x
+ var xanimation = document.createElementNS(this.svgns,'animate');
+ xanimation.setAttributeNS(null,'attributeType','XML');
+ xanimation.setAttributeNS(null,'attributeName','cx');
+ xanimation.setAttributeNS(null,'to',x);
+ xanimation.setAttributeNS(null, 'begin', 'indefinite');
+ xanimation.setAttributeNS(null,'dur','1s');
+ xanimation.setAttributeNS(null,'fill','freeze');
+
+ // animation for y
+ var yanimation = document.createElementNS(this.svgns,'animate');
+ yanimation.setAttributeNS(null,'attributeType','XML');
+ yanimation.setAttributeNS(null,'attributeName','cy');
+ yanimation.setAttributeNS(null,'to',y);
+ yanimation.setAttributeNS(null, 'begin', 'indefinite');
+ yanimation.setAttributeNS(null,'dur','1s');
+ yanimation.setAttributeNS(null,'fill','freeze');
+ circle.appendChild(xanimation);
+ circle.appendChild(yanimation);
+
+ var ball = Object.create(
+ ballProto,
+ {
+ DOM:{value:circle},
+ animations:{value:{xanimation:xanimation,yanimation:yanimation}},
+ x:{value:x},
+ y:{value:y},
+ isVisible:{value:true},
+ color:{value:color}
+ }
+ );
+ var game = this;
+ //add endEvent to Y animation
+ yanimation.addEventListener('endEvent',function(){game.ballClicked(this);}.bind(ball),false);
+
+ return ball;
+ };
+
+}());
+
+game.initBalls = function(colors){
+ logger.startLog('game.initBalls');
+ var balls = [];
+ colors.forEach(function(item){
+ //create a new Ball
+ var ball = this.createBall(-100,-100,item),
+ game = this;
+ balls.push(ball);
+ this.svg.insertBefore(ball.DOM,this.truck.DOM);
+
+ ball.clickHandler = function(){
+ this.removeClickHandler();
+ this.move(440,485,'1s');
+ game.removeAllEvents();
+ }.bind(ball);
+ }.bind(this));
+
+ logger.endLog();
+ return balls;
+};
+
+game.startBalls = function(){
+ logger.startLog('startBalls');
+ var balls = this.instance.currentBalls,
+ length = balls.length;
+
+ if(length.isEven()){
+ var startPoint = this.ballMiddle-(this.balldifference/2)-((length/2)-1)*this.balldifference;
+ }else{
+ var startPoint = this.ballMiddle - Math.floor(length/2)*this.balldifference;
+ }
+
+ logger.log('startPoint',startPoint);
+ balls.forEach(function(item,index){
+ logger.log(index);
+ item.move(startPoint+index*this.balldifference,70);
+ item.addClickHandler();
+ }.bind(this));
+
+ logger.endLog();
+};
+
+game.ballClicked = function(ball){
+ ball.setVisible(false);
+ if(ball.color === this.instance.color){
+ this.setMiddleText(this.rightBallMessage);
+ this.finalBall = ball;
+ this.truck.moveToEnd();
+ setTimeout('game.restartGame()',2000);
+ }else{
+ this.setMiddleText(this.wrongBallMessage);
+ setTimeout('game.askQuestion()',2000);
+ this.startBalls();
+ }
+};
+
+game.restartGame = function(){
+ var ball = this.finalBall;
+ this.finalBall = undefined;
+ ball.setVisible(true);
+ this.startGame();
+};
diff --git a/Truck Game/js/logger.js b/Truck Game/js/logger.js
new file mode 100644
index 00000000..d6c71ee4
--- /dev/null
+++ b/Truck Game/js/logger.js
@@ -0,0 +1,76 @@
+var logger = function(){
+ var loggedFunctionArray = [];
+ var loggerObj = {
+ enableLog:false,
+ showTiming :false,
+ log: function(){
+ var prefix = "";
+ for (var i = 1; i < loggedFunctionArray.length; i++)
+ prefix += "\t";
+ var args = [prefix + loggedFunctionArray[loggedFunctionArray.length - 1] + " : "];
+ Array.prototype.push.apply(args,arguments);
+ console.log.apply(console,args);
+ },//log
+ warn: function(){
+ var prefix = "";
+ for (var i = 1; i < loggedFunctionArray.length; i++)
+ prefix += "\t";
+ var args = [prefix + loggedFunctionArray[loggedFunctionArray.length - 1] + " : "];
+ Array.prototype.push.apply(args,arguments);
+ console.warn.apply(console,args);
+ },//warn
+ error: function(){
+ var prefix = "";
+ for (var i = 1; i < loggedFunctionArray.length; i++)
+ prefix += "\t";
+ var args = [prefix + loggedFunctionArray[loggedFunctionArray.length - 1] + " : "];
+ Array.prototype.push.apply(args,arguments);
+ console.warn.apply(console,args);
+ },//error
+ trace: function(){
+ console.trace();
+ },//trace
+ dir: function(obj){
+ console.dir(obj);
+ },//dir
+ assert:function(){
+ console.assert.apply(console,arguments);
+ },//assert
+ count:function(){
+ console.count.apply(console,arguments);
+ },//assert
+
+ profile:function(){
+ console.profile.apply(console,arguments);
+ },//profile
+ profileEnd:function(){
+ console.profileEnd();
+ },//profileEnd
+ startLog: function(functionName){
+ loggedFunctionArray.push(functionName);
+ console.group(functionName);
+ this.log("Start");
+ if(this.showTiming === true && console.time)
+ console.time(functionName);
+ },//startLog
+ endLog: function(){
+ this.log("End");
+ if(this.showTiming === true && console.time)
+ console.timeEnd(loggedFunctionArray.pop());
+ else
+ loggedFunctionArray.pop();
+ console.groupEnd();
+ }//endLog
+ };//loggerObj
+ //add a switch to all logger functions.
+ for(attr in loggerObj)
+ if(loggerObj.hasOwnProperty(attr) && typeof loggerObj[attr] == 'function'){
+ loggerObj[attr] = function(func){
+ return function(){
+ if (this.enableLog === true && window.console != undefined)
+ func.apply(this,arguments);
+ };
+ }(loggerObj[attr]);
+ };
+ return loggerObj;
+}();
\ No newline at end of file
diff --git a/Truck Game/js/main.js b/Truck Game/js/main.js
new file mode 100644
index 00000000..af40b3ba
--- /dev/null
+++ b/Truck Game/js/main.js
@@ -0,0 +1,141 @@
+ "strict mode";
+// check if a number is even
+Number.prototype.isEven=function(){
+ return this%2===0;
+};
+
+Array.prototype.contains = function(item){
+ return this.some(function(i){return i === item;});
+};
+
+Array.prototype.shuffle = function(){
+ for(var j, x, i = this.length; i; j = parseInt(Math.random() * i), x = this[--i], this[i] = this[j], this[j] = x);
+ return this;
+};
+
+window.game = {
+ svgns : "http://www.w3.org/2000/svg",
+ ballMiddle : 375,
+ balldifference : 150,
+ balls:[],
+
+ colors:['red','green','blue','yellow'],
+ questions:{'red':'Which one is red?',
+ 'green':'Which one is green?',
+ 'blue':'Which one is blue?',
+ 'yellow':'Which one is yellow?'},
+ wrongBallMessage:'You chose the wrong ball, try again.',
+ rightBallMessage:'You chose the right ball, well done!',
+
+ applyConfig:function(color,count){
+ this.currentColor = color;
+ this.ballCount=count;
+ this.startGame();
+ },
+ initConfig:function(element){
+ var that = this;//for dialog onClick event
+ this.configDialog = $(element).dialog({ autoOpen: false,
+ title: 'Game Configuration',
+ buttons:{save:function(){
+ var color =$('input[name=color]:checked:radio').val();
+ var count =$('input[name=count]:checked:radio').val();
+ that.applyConfig(color,count);
+ game.configDialog.dialog('close');}},
+ closeOnEscape:true,
+ modal:true
+ });
+ },
+ openConfig:function(){
+ $('#color_'+this.currentColor).attr('checked','checked');
+ $('#count'+this.ballCount).attr('checked','checked');
+ game.configDialog.dialog('open');
+ },
+ init:function(svg,dialog,configLink,middleText){
+ this.svg = svg;
+ this.initConfig(dialog);
+ this.initTruck();
+ this.middleText = middleText;
+ this.applyConfig('random',"4");
+ this.initBalls(this.colors);
+ // Add config link event.
+ $(configLink).click(function(){this.openConfig();}.bind(this));
+ },
+ startGame:function(){
+ logger.startLog('game.startGame');
+ //clear old game data
+ this.clearGame();
+ // Initialize current variables
+ var colors = this.colors;
+ var currentColor = this.currentColor;
+ var ballCount = this.ballCount;
+ if(ballCount === "random"){
+ ballCount = Math.floor(Math.random()*4)+1;
+ }else{
+ ballCount = parseInt(ballCount);
+ }
+ var currentColors = [];
+ //if currentColor is not random, add chosen color to list
+ if(currentColor!== 'random'){
+ logger.log('Color is preset. ' + currentColor + ' was added to array.');
+ currentColors.push(currentColor);
+ }
+ //fill rest of the ball list with random colors
+ while(currentColors.length"],
+ "js": [
+ "js/logger.js",
+ "js/main.js",
+ "js/ball.js",
+ "js/truck.js"
+ ],
+ "css": ["css/main.css"]
+ }
+ ],
+ "web_accessible_resources": [
+ "http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js",
+ "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js",
+ "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/black-tie/jquery-ui.css"
+ ]
+ }
+
\ No newline at end of file