Uploaded of Math I/O Graph Game
This commit is contained in:
commit
1b6a0d265a
13 changed files with 2038 additions and 0 deletions
290
GameData.js
Normal file
290
GameData.js
Normal file
|
|
@ -0,0 +1,290 @@
|
||||||
|
/*
|
||||||
|
GameData.js- Stores level data
|
||||||
|
Goal points (x,y) are made through the respective level functions and saved
|
||||||
|
Transformation data is saved here.
|
||||||
|
|
||||||
|
Random algorithm works like this:
|
||||||
|
Math.floor(Math.random() * (end - start + 1) + start);
|
||||||
|
and for lists....
|
||||||
|
myArray[Math.floor(Math.random() * myArray.length)];
|
||||||
|
|
||||||
|
Game.Level keeps track of players progress
|
||||||
|
Game.LastX/Game.LastY keeps track of points for responsive.js
|
||||||
|
TransformTimes/SubLevel keeps track of Transformation levels
|
||||||
|
*/
|
||||||
|
Game = {
|
||||||
|
TransformTimes: 4,
|
||||||
|
Score: 0,
|
||||||
|
SubLevel: 1,
|
||||||
|
fStretch: function () {
|
||||||
|
myChoices = [-2, -1, -0.5, 0.5, 1, 2];
|
||||||
|
return myChoices[Math.floor(Math.random() * myChoices.length)];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Game.Tutorial = {
|
||||||
|
fGoalX: function () {
|
||||||
|
return Math.floor((Math.random() * 6) + 2);
|
||||||
|
},
|
||||||
|
fGoalY: function () {
|
||||||
|
return Math.floor((Math.random() * 5) + 2);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Game.Coordinate = {
|
||||||
|
fGoalX1: function () {
|
||||||
|
return Math.floor((Math.random() * 5) + 3);
|
||||||
|
},
|
||||||
|
fGoalY1: function () {
|
||||||
|
return Math.floor((Math.random() * 3) + 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Game.Linear = {
|
||||||
|
fGoalX1: function () {
|
||||||
|
return Math.floor((Math.random() * 7) + 2);
|
||||||
|
},
|
||||||
|
fGoalY1: function () {
|
||||||
|
return Math.floor((Math.random() * 6) + 2);
|
||||||
|
},
|
||||||
|
fGoalX2: function () {
|
||||||
|
X2 = Math.floor((Math.random() * 7) + 2);
|
||||||
|
if (X2 == this.GoalX1) {
|
||||||
|
this.fGoalX2();
|
||||||
|
}
|
||||||
|
return X2;
|
||||||
|
},
|
||||||
|
fGoalY2: function () {
|
||||||
|
return Math.floor((Math.random() * 6) + 2);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Game.StandLinear = {
|
||||||
|
fGoalX1: function () {
|
||||||
|
return Math.floor((Math.random() * 7) + 2);
|
||||||
|
},
|
||||||
|
fGoalY1: function () {
|
||||||
|
return Math.floor((Math.random() * 6) + 2);
|
||||||
|
},
|
||||||
|
fGoalX2: function () {
|
||||||
|
X2 = Math.floor((Math.random() * 7) + 2);
|
||||||
|
if (X2 == this.GoalX1) {
|
||||||
|
this.fGoalX2();
|
||||||
|
}
|
||||||
|
return X2;
|
||||||
|
},
|
||||||
|
fGoalY2: function () {
|
||||||
|
return Math.floor((Math.random() * 6) + 2);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Game.SimpleQuad = {
|
||||||
|
fGoalX: function () {
|
||||||
|
return Math.floor((Math.random() * 5) + 3);
|
||||||
|
},
|
||||||
|
fGoalY: function () {
|
||||||
|
return Math.floor((Math.random() * 3) + 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Game.StandardQuad = {
|
||||||
|
fGoalX1: function () {
|
||||||
|
return Math.floor((Math.random() * 5) + 3);
|
||||||
|
},
|
||||||
|
fGoalY1: function () {
|
||||||
|
return Math.floor((Math.random() * 3) + 1);
|
||||||
|
},
|
||||||
|
fGoalX2: function () {
|
||||||
|
return this.GoalX1 + Math.floor((Math.random() * 2) + 1);
|
||||||
|
},
|
||||||
|
fGoalY2: function () {
|
||||||
|
return this.GoalY1 + Math.floor((Math.random() * 4) + 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Game.GeneralQuad = {
|
||||||
|
fGoalX1: function () {
|
||||||
|
return Math.floor((Math.random() * 5) + 3);
|
||||||
|
},
|
||||||
|
fGoalY1: function () {
|
||||||
|
return Math.floor((Math.random() * 3) + 1);
|
||||||
|
},
|
||||||
|
fGoalX2: function () {
|
||||||
|
return this.GoalX1 + Math.floor((Math.random() * 2) + 1);
|
||||||
|
},
|
||||||
|
fGoalY2: function () {
|
||||||
|
return this.GoalY1 + Math.floor((Math.random() * 4) + 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Game.ZeroQuad = {
|
||||||
|
fGoalX1: function () {
|
||||||
|
return Math.floor((Math.random() * 5) + 3);
|
||||||
|
},
|
||||||
|
fGoalX2: function () {
|
||||||
|
return this.GoalX1 + Math.floor((Math.random() * 2) + 1);
|
||||||
|
},
|
||||||
|
GoalY1: 0,
|
||||||
|
GoalY2: 0
|
||||||
|
};
|
||||||
|
|
||||||
|
Game.LinearTransformations = {
|
||||||
|
Level1: {
|
||||||
|
fGoalX1: function () {
|
||||||
|
return Math.floor((Math.random() * 7) + 2);
|
||||||
|
},
|
||||||
|
fGoalY1: function () {
|
||||||
|
return Math.floor((Math.random() * 4) + 2);
|
||||||
|
},
|
||||||
|
fGoalX2: function () {
|
||||||
|
X2 = Math.floor((Math.random() * 7) + 2);
|
||||||
|
if (X2 == this.GoalX1) {
|
||||||
|
this.fGoalX2();
|
||||||
|
}
|
||||||
|
return X2;
|
||||||
|
},
|
||||||
|
fGoalY2: function () {
|
||||||
|
return Math.floor((Math.random() * 4) + 2);
|
||||||
|
},
|
||||||
|
fVerticalShift: function () {
|
||||||
|
return Math.floor((Math.random() * 5) - 2);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
Level2: {
|
||||||
|
fGoalX1: function () {
|
||||||
|
return Math.floor((Math.random() * 6) + 2);
|
||||||
|
},
|
||||||
|
fGoalY1: function () {
|
||||||
|
return Math.floor(Math.random() * 7);
|
||||||
|
},
|
||||||
|
fGoalX2: function () {
|
||||||
|
X2 = Math.floor((Math.random() * 6) + 2);
|
||||||
|
if (X2 == this.GoalX1) {
|
||||||
|
this.fGoalX2();
|
||||||
|
}
|
||||||
|
return X2;
|
||||||
|
},
|
||||||
|
fGoalY2: function () {
|
||||||
|
return Math.floor(Math.random() * 7);
|
||||||
|
},
|
||||||
|
fHorizontalShift: function () {
|
||||||
|
return Math.floor((Math.random() * 5) - 2);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
Level3: {
|
||||||
|
fGoalX1: function () {
|
||||||
|
return Math.floor((Math.random() * 6) + 2);
|
||||||
|
},
|
||||||
|
fGoalY1: function () {
|
||||||
|
return Math.floor(Math.random() * 7);
|
||||||
|
},
|
||||||
|
fGoalX2: function () {
|
||||||
|
X2 = Math.floor((Math.random() * 6) + 2);
|
||||||
|
if (X2 == this.GoalX1) {
|
||||||
|
this.fGoalX2();
|
||||||
|
}
|
||||||
|
return X2;
|
||||||
|
},
|
||||||
|
fGoalY2: function () {
|
||||||
|
return Math.floor(Math.random() * 7);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
Level4: {
|
||||||
|
fGoalX1: function () {
|
||||||
|
return Math.floor((Math.random() * 6) + 2);
|
||||||
|
},
|
||||||
|
fGoalY1: function () {
|
||||||
|
return Math.floor((Math.random() * 4) + 2);
|
||||||
|
},
|
||||||
|
fGoalX2: function () {
|
||||||
|
X2 = Math.floor((Math.random() * 6) + 2);
|
||||||
|
if (X2 == this.GoalX1) {
|
||||||
|
this.fGoalX2();
|
||||||
|
}
|
||||||
|
return X2;
|
||||||
|
},
|
||||||
|
fGoalY2: function () {
|
||||||
|
return Math.floor((Math.random() * 4) + 2);
|
||||||
|
},
|
||||||
|
fVerticalShift: function () {
|
||||||
|
return Math.floor((Math.random() * 5) - 2);
|
||||||
|
},
|
||||||
|
fHorizontalShift: function () {
|
||||||
|
return Math.floor((Math.random() * 5) - 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Game.QuadTransformations = {
|
||||||
|
Level1: {
|
||||||
|
fGoalX1: function () {
|
||||||
|
return Math.floor((Math.random() * 5) + 3);
|
||||||
|
},
|
||||||
|
fGoalY1: function () {
|
||||||
|
return Math.floor((Math.random() * 3) + 1);
|
||||||
|
},
|
||||||
|
fGoalX2: function () {
|
||||||
|
return this.GoalX1 + Math.floor((Math.random() * 2) + 1);
|
||||||
|
},
|
||||||
|
fGoalY2: function () {
|
||||||
|
return this.GoalY1 + Math.floor((Math.random() * 4) + 1);
|
||||||
|
},
|
||||||
|
fVerticalShift: function () {
|
||||||
|
return Math.floor((Math.random() * 5) - 2);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
Level2: {
|
||||||
|
fGoalX1: function () {
|
||||||
|
return Math.floor((Math.random() * 5) + 3);
|
||||||
|
},
|
||||||
|
fGoalY1: function () {
|
||||||
|
return Math.floor((Math.random() * 3) + 1);
|
||||||
|
},
|
||||||
|
fGoalX2: function () {
|
||||||
|
return this.GoalX1 + Math.floor((Math.random() * 2) + 1);
|
||||||
|
},
|
||||||
|
fGoalY2: function () {
|
||||||
|
return this.GoalY1 + Math.floor((Math.random() * 4) + 1);
|
||||||
|
},
|
||||||
|
fHorizontalShift: function () {
|
||||||
|
return Math.floor((Math.random() * 5) - 2);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
Level3: {
|
||||||
|
fGoalX1: function () {
|
||||||
|
return Math.floor((Math.random() * 5) + 3);
|
||||||
|
},
|
||||||
|
fGoalY1: function () {
|
||||||
|
return Math.floor((Math.random() * 3) + 1);
|
||||||
|
},
|
||||||
|
fGoalX2: function () {
|
||||||
|
return this.GoalX1 + Math.floor((Math.random() * 2) + 1);
|
||||||
|
},
|
||||||
|
fGoalY2: function () {
|
||||||
|
return this.GoalY1 + Math.floor((Math.random() * 4) + 1);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
Level4: {
|
||||||
|
fGoalX1: function () {
|
||||||
|
return Math.floor((Math.random() * 5) + 3);
|
||||||
|
},
|
||||||
|
fGoalY1: function () {
|
||||||
|
return Math.floor((Math.random() * 3) + 1);
|
||||||
|
},
|
||||||
|
fGoalX2: function () {
|
||||||
|
return this.GoalX1 + Math.floor((Math.random() * 2) + 1);
|
||||||
|
},
|
||||||
|
fGoalY2: function () {
|
||||||
|
return this.GoalY1 + Math.floor((Math.random() * 4) + 1);
|
||||||
|
},
|
||||||
|
fVerticalShift: function () {
|
||||||
|
return Math.floor((Math.random() * 5) - 2);
|
||||||
|
},
|
||||||
|
fHorizontalShift: function () {
|
||||||
|
return Math.floor((Math.random() * 5) - 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
179
Graph.js
Normal file
179
Graph.js
Normal file
|
|
@ -0,0 +1,179 @@
|
||||||
|
function Graph(config) {
|
||||||
|
// user defined properties
|
||||||
|
this.minX = config.minX;
|
||||||
|
this.minY = config.minY;
|
||||||
|
this.maxX = config.maxX;
|
||||||
|
this.maxY = config.maxY;
|
||||||
|
this.unitsPerTick = config.unitsPerTick;
|
||||||
|
this.centerY = config.centerY; /*center x and y is the "origin" of the graph relative to canvas location*/
|
||||||
|
this.centerX = config.centerX;
|
||||||
|
// constants
|
||||||
|
this.canvas = document.getElementById('myCanvas');
|
||||||
|
this.tickSize = 20;
|
||||||
|
// relationships
|
||||||
|
this.context = this.canvas.getContext('2d');
|
||||||
|
this.rangeX = this.maxX - this.minX;
|
||||||
|
this.rangeY = this.maxY - this.minY;
|
||||||
|
this.unitX = this.canvas.width / this.rangeX;
|
||||||
|
this.unitY = this.canvas.height / this.rangeY;
|
||||||
|
this.iteration = (this.maxX - this.minX) / 1000;
|
||||||
|
this.scaleX = this.canvas.width / this.rangeX;
|
||||||
|
this.scaleY = this.canvas.height / this.rangeY;
|
||||||
|
this.XmaxUnit;
|
||||||
|
this.XminUnit;
|
||||||
|
// draw x and y axis
|
||||||
|
this.drawXAxis();
|
||||||
|
this.drawYAxis();
|
||||||
|
this.drawGrid();
|
||||||
|
}
|
||||||
|
|
||||||
|
Graph.prototype.drawXAxis = function () {
|
||||||
|
var context = this.context;
|
||||||
|
context.save();
|
||||||
|
context.beginPath();
|
||||||
|
context.moveTo(0, this.centerY);
|
||||||
|
context.lineTo(this.canvas.width, this.centerY);
|
||||||
|
context.strokeStyle = 'green';
|
||||||
|
context.lineWidth = 2;
|
||||||
|
context.stroke();
|
||||||
|
context.restore();
|
||||||
|
};
|
||||||
|
|
||||||
|
Graph.prototype.drawYAxis = function () {
|
||||||
|
var context = this.context;
|
||||||
|
context.save();
|
||||||
|
context.beginPath();
|
||||||
|
context.moveTo(this.centerX, 0);
|
||||||
|
context.lineTo(this.centerX, this.canvas.height);
|
||||||
|
context.strokeStyle = 'green';
|
||||||
|
context.lineWidth = 2;
|
||||||
|
context.stroke();
|
||||||
|
context.restore();
|
||||||
|
};
|
||||||
|
|
||||||
|
Graph.prototype.drawGrid = function () {
|
||||||
|
var context = this.context;
|
||||||
|
context.save();
|
||||||
|
context.beginPath();
|
||||||
|
context.strokeStyle = '#8c8c8c';
|
||||||
|
context.fillStyle = '#000000';
|
||||||
|
context.lineWidth = 2;
|
||||||
|
|
||||||
|
// Sets up x coordinate tick marks
|
||||||
|
var xPosIncrement = this.unitsPerTick * this.unitX;
|
||||||
|
var xPos, unit;
|
||||||
|
context.font = '12pt Ubuntu';
|
||||||
|
context.textAlign = 'left';
|
||||||
|
context.textBaseline = 'top';
|
||||||
|
|
||||||
|
// draws vertical lines before x = 0
|
||||||
|
xPos = this.centerX - xPosIncrement;
|
||||||
|
unit = -1 * this.unitsPerTick;
|
||||||
|
while (xPos > 0) {
|
||||||
|
context.moveTo(xPos, this.centerY - this.tickSize / 2);
|
||||||
|
context.lineTo(xPos, this.canvas.height);
|
||||||
|
context.lineTo(xPos, -this.canvas.height);
|
||||||
|
context.stroke();
|
||||||
|
context.fillText(unit, xPos, this.centerY + this.tickSize / 2 + 3);
|
||||||
|
unit -= this.unitsPerTick;
|
||||||
|
xPos = Math.round(xPos - xPosIncrement);
|
||||||
|
this.XminUnit = unit;
|
||||||
|
}
|
||||||
|
if (this.XminUnit === undefined) {
|
||||||
|
this.XminUnit = -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// draws vertical lines after x = 0
|
||||||
|
xPos = this.centerX + xPosIncrement;
|
||||||
|
unit = this.unitsPerTick;
|
||||||
|
while (xPos < this.canvas.width) {
|
||||||
|
context.moveTo(xPos, this.centerY - this.tickSize / 2);
|
||||||
|
context.lineTo(xPos, this.canvas.height);
|
||||||
|
context.lineTo(xPos, -this.canvas.height);
|
||||||
|
context.stroke();
|
||||||
|
context.fillText(unit, xPos, this.centerY + this.tickSize / 2 + 3);
|
||||||
|
unit += this.unitsPerTick;
|
||||||
|
xPos = Math.round(xPos + xPosIncrement);
|
||||||
|
this.XmaxUnit = unit;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sets up Y coordinate tick marks
|
||||||
|
var yPosIncrement = this.unitsPerTick * this.unitY;
|
||||||
|
var yPos, unit;
|
||||||
|
context.font = '12pt Ubuntu';
|
||||||
|
context.textAlign = 'right';
|
||||||
|
context.textBaseline = 'bottom';
|
||||||
|
// draws horizontal lines after y = 0
|
||||||
|
yPos = this.centerY - yPosIncrement;
|
||||||
|
unit = this.unitsPerTick;
|
||||||
|
while (yPos > 0) {
|
||||||
|
context.moveTo(this.centerX - this.tickSize / 2, yPos);
|
||||||
|
context.lineTo(this.canvas.width, yPos);
|
||||||
|
context.lineTo(-this.canvas.width, yPos);
|
||||||
|
context.stroke();
|
||||||
|
context.fillText(unit, this.centerX - this.tickSize / 2 - 3, yPos);
|
||||||
|
unit += this.unitsPerTick;
|
||||||
|
yPos = Math.round(yPos - yPosIncrement);
|
||||||
|
}
|
||||||
|
|
||||||
|
// draws horizontal lines before y = 0
|
||||||
|
yPos = this.centerY + yPosIncrement;
|
||||||
|
unit = -1 * this.unitsPerTick;
|
||||||
|
while (yPos < this.canvas.height) {
|
||||||
|
context.moveTo(this.centerX - this.tickSize / 2, yPos);
|
||||||
|
context.lineTo(this.canvas.width, yPos);
|
||||||
|
context.lineTo(-this.canvas.width, yPos);
|
||||||
|
context.stroke();
|
||||||
|
context.fillText(unit, this.centerX - this.tickSize / 2 - 3, yPos);
|
||||||
|
unit -= this.unitsPerTick;
|
||||||
|
yPos = Math.round(yPos + yPosIncrement);
|
||||||
|
}
|
||||||
|
context.restore();
|
||||||
|
};
|
||||||
|
|
||||||
|
Graph.prototype.drawEquation = function (equation) {
|
||||||
|
var context = this.context;
|
||||||
|
context.save();
|
||||||
|
this.transformContext();
|
||||||
|
context.beginPath();
|
||||||
|
context.moveTo(this.XminUnit, equation(this.XminUnit));
|
||||||
|
for (var x = this.XminUnit + this.iteration; x <= this.XmaxUnit; x += this.iteration) {
|
||||||
|
context.lineTo(x, equation(x));
|
||||||
|
}
|
||||||
|
context.restore();
|
||||||
|
context.lineJoin = 'round';
|
||||||
|
context.lineWidth = 1;
|
||||||
|
context.strokeStyle = 'red';
|
||||||
|
context.stroke();
|
||||||
|
context.restore();
|
||||||
|
};
|
||||||
|
|
||||||
|
Graph.prototype.drawPoint = function (goalx, goaly) {
|
||||||
|
var context = this.context;
|
||||||
|
context.save();
|
||||||
|
this.transformContext();
|
||||||
|
context.beginPath();
|
||||||
|
var c = document.getElementById("myCanvas");
|
||||||
|
var img = document.getElementById("balloon");
|
||||||
|
context.drawImage(img, goalx - 0.32, goaly - 0.48, 0.64, 0.96);
|
||||||
|
context.stroke();
|
||||||
|
context.restore();
|
||||||
|
};
|
||||||
|
|
||||||
|
//sets context to origin
|
||||||
|
Graph.prototype.transformContext = function () {
|
||||||
|
var context = this.context;
|
||||||
|
this.context.translate(this.centerX, this.centerY);
|
||||||
|
context.scale(this.scaleX, -this.scaleY);
|
||||||
|
};
|
||||||
|
|
||||||
|
Graph.prototype.reset = function () {
|
||||||
|
var context = this.context;
|
||||||
|
context.save();
|
||||||
|
context.fillStyle = 'white';
|
||||||
|
context.fillRect(0, 0, myCanvas.width, myCanvas.height);
|
||||||
|
this.drawXAxis();
|
||||||
|
this.drawYAxis();
|
||||||
|
this.drawGrid();
|
||||||
|
context.restore();
|
||||||
|
};
|
||||||
507
Input.js
Normal file
507
Input.js
Normal file
|
|
@ -0,0 +1,507 @@
|
||||||
|
/*
|
||||||
|
Input.js- Receives input and checks answer
|
||||||
|
At the end of the code it says the following
|
||||||
|
$(document).ready(Game.Start) Which runs the Start function when page is loaded
|
||||||
|
|
||||||
|
Core functions
|
||||||
|
--------------
|
||||||
|
Game.Start() - Prepares game and checks to see if browser is compatible
|
||||||
|
First it hides all the elements of the DOM that is not needed at the momment
|
||||||
|
Then it checks if the browser is compatible
|
||||||
|
If not then it shows an error message
|
||||||
|
If so then it calls the startEvents function
|
||||||
|
One of which that calls the GameStart function when play button is pressed
|
||||||
|
|
||||||
|
Game.startEvents() - Starts events necessary
|
||||||
|
Shows the menu
|
||||||
|
Adds event listeners one of which calls the GameStart function when clicked [Play]
|
||||||
|
|
||||||
|
Game.GameStart() - Prepares DOM for canvas game
|
||||||
|
Hides elements
|
||||||
|
Calls the PlayLevel function [in another file] which eventually leads to the check function
|
||||||
|
|
||||||
|
Game.Check() - Checks answer and prepares for future level progression
|
||||||
|
Turns off submit button event listener then calls a switch statement
|
||||||
|
Switch statement takes Game.Type as it's argument and uses it to decide which equation function checks
|
||||||
|
If win then calls afterLevel(true) if lost then it calls afterLevel(false)
|
||||||
|
|
||||||
|
Game.afterLevel(win) - Takes win as an input and displays whether player won or not
|
||||||
|
Creates variable containing text for message box
|
||||||
|
Hides input
|
||||||
|
If the person won...
|
||||||
|
Increases their score by 10
|
||||||
|
Displays win message
|
||||||
|
Calls Reset(true)
|
||||||
|
If not...
|
||||||
|
Subtracts their score by 5
|
||||||
|
Displays lose message
|
||||||
|
Calsl Reset(false)
|
||||||
|
|
||||||
|
Game.Reset(win) - takes win as an input and prepares for the next level
|
||||||
|
Resets the graph
|
||||||
|
Removes the message
|
||||||
|
Increases sublevel just in case it's a transformation level
|
||||||
|
Calls PlayLevel(Game.Type, x)
|
||||||
|
x is...
|
||||||
|
if Game.Type is Linear/Quadratic Transformations then it's Game.TransformationTimes
|
||||||
|
if not then it's (times-1)
|
||||||
|
Turns on Submit button
|
||||||
|
|
||||||
|
Etc functions
|
||||||
|
------------------
|
||||||
|
All equation functions are the same, takes goal as input
|
||||||
|
Obtains variables needed
|
||||||
|
Graphs the equation
|
||||||
|
Returns y for given goal [x]
|
||||||
|
|
||||||
|
Game.PreventAlpha(e) - Prevents any other thing than numbers and "/"s to be inputted
|
||||||
|
Takes an event as it's argument and prevents non numerical keys except for '/'
|
||||||
|
If enter is pressed will simulate Submit button click
|
||||||
|
Contains key/char codes and checks when key is pressed to see if it's one of the permitted
|
||||||
|
|
||||||
|
Game.Fix(str) - Allows fractional input
|
||||||
|
Takes a string as a argument
|
||||||
|
Checks if "/" is detected
|
||||||
|
If so..
|
||||||
|
It takes the string before the / and divides it by the string after it
|
||||||
|
If not..
|
||||||
|
Just returns the number form of the string
|
||||||
|
|
||||||
|
Game.TimeSet() - Allows for the time to be set
|
||||||
|
if nChoice is not a number
|
||||||
|
Gives you div to select time
|
||||||
|
|
||||||
|
Game.RunTimer() - Runs the timer
|
||||||
|
Subtracts the time by 1
|
||||||
|
if time is 0
|
||||||
|
stops timer
|
||||||
|
if transformation level
|
||||||
|
stops when 4 levels are completed
|
||||||
|
*/
|
||||||
|
var timed;
|
||||||
|
|
||||||
|
Game.Start = function () {
|
||||||
|
Game.Type = "Tutorial";
|
||||||
|
$('.input').hide();
|
||||||
|
$('#myCanvas').hide();
|
||||||
|
$('#End').hide();
|
||||||
|
$('#Menu').hide();
|
||||||
|
$('#timeInput').hide();
|
||||||
|
$("#timer").hide();
|
||||||
|
$('#exit').hide();
|
||||||
|
if (navigator.userAgent.indexOf("MSIE 8.0") != -1) {
|
||||||
|
document.getElementById("NotSuported").hidden = false;
|
||||||
|
} else {
|
||||||
|
document.getElementById("NotSuported").hidden = true;
|
||||||
|
$(window).on('resize', Game.Responsive.start);
|
||||||
|
Game.startEvents();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Game.startEvents = function () {
|
||||||
|
$('#Menu').show();
|
||||||
|
$('#Play').on('click', Game.GameStart);
|
||||||
|
$('.topic').on('click', function (event) {
|
||||||
|
Game.Type = event.target.id.substring(0, event.target.id.length - 5);
|
||||||
|
$("li").toggleClass('clicked', false);
|
||||||
|
$(event.target).toggleClass('clicked');
|
||||||
|
});
|
||||||
|
$("#nchoice").on('change', Game.TimeSet);
|
||||||
|
};
|
||||||
|
|
||||||
|
Game.GameStart = function () {
|
||||||
|
$(".topic").off();
|
||||||
|
$('#Play').off();
|
||||||
|
$('#nchoice').off();
|
||||||
|
ntime = $('#nchoice').val() == "time" ? 1 : Number($('#nchoice').val());
|
||||||
|
if (timed) {
|
||||||
|
window.seconds = Number($('#sec').val());
|
||||||
|
window.minutes = Number($('#min').val());
|
||||||
|
window.totalTime = seconds + minutes * 60;
|
||||||
|
$('#secOut').text((seconds < 10) ? ("0" + String(seconds)) : String(seconds));
|
||||||
|
$('#minOut').text(String(window.minutes));
|
||||||
|
$("#timer").show();
|
||||||
|
window.timeRun = window.setInterval(Game.RunTimer, 1000);
|
||||||
|
} else {
|
||||||
|
///////////
|
||||||
|
window.totalTime = undefined;
|
||||||
|
}
|
||||||
|
$('#Menu').hide();
|
||||||
|
$('#myCanvas').show();
|
||||||
|
$('#End').show();
|
||||||
|
$('#exit').show();
|
||||||
|
Game.PlayLevel(ntime);
|
||||||
|
};
|
||||||
|
|
||||||
|
Game.TimeSet = function () {
|
||||||
|
window.totalTime = undefined;
|
||||||
|
if (isNaN($("#nchoice").val())) {
|
||||||
|
timed = true;
|
||||||
|
// '\' characters below are necessary for formatting cleanly
|
||||||
|
$("label").before('<div id = "timeInput">\
|
||||||
|
<label>\
|
||||||
|
<select id = "min">\
|
||||||
|
<option value = "5">5 minutes</option>\
|
||||||
|
<option value = "4">4 minutes</option>\
|
||||||
|
<option value = "3">3 minutes</option>\
|
||||||
|
<option value = "2">2 minutes</option>\
|
||||||
|
<option value = "1">1 minutes</option>\
|
||||||
|
</select>\
|
||||||
|
</label>\
|
||||||
|
<label>\
|
||||||
|
<select id = "sec">\
|
||||||
|
<option value = "0">0 seconds</option>\
|
||||||
|
<option value = "15">15 seconds</option>\
|
||||||
|
<option value = "30">30 seconds</option>\
|
||||||
|
<option value = "45">45 seconds</option>\
|
||||||
|
</select>\
|
||||||
|
</label>\
|
||||||
|
</div>');
|
||||||
|
} else {
|
||||||
|
$("#timeInput").remove();
|
||||||
|
timed = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
//////////changed to accomodate pause for exit button
|
||||||
|
Game.RunTimer = function () {
|
||||||
|
/////// cases with called arguments as the paused setting, or just the start
|
||||||
|
if (arguments[0] == true){
|
||||||
|
window.clearInterval(window.timeRun);
|
||||||
|
} else if (arguments[0] == false){
|
||||||
|
window.timeRun = window.setInterval(Game.RunTimer, 1000);
|
||||||
|
} else {
|
||||||
|
window.totalTime -= 1;
|
||||||
|
window.seconds = window.totalTime - Math.floor(window.totalTime / 60) * 60;
|
||||||
|
window.minutes = Math.floor(window.totalTime / 60);
|
||||||
|
$('#secOut').text((seconds < 10) ? ("0" + String(seconds)) : String(seconds));
|
||||||
|
$('#minOut').text(String(window.minutes));
|
||||||
|
if (window.totalTime === 0) {
|
||||||
|
window.clearInterval(window.timeRun);
|
||||||
|
Reset(true);
|
||||||
|
} else if (Game.Type == "LinearTransformations" || Game.Type == "QuadTransformations") {
|
||||||
|
if (Game.TransformTimes == 0) {
|
||||||
|
window.clearInterval(window.timeRun);
|
||||||
|
Reset(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Game.PreventAlpha = function (e) {
|
||||||
|
if (e.keyCode == 13) {
|
||||||
|
$('.Submit').click();
|
||||||
|
}
|
||||||
|
var acceptChars = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '/', '-', '.'];
|
||||||
|
var acceptCodes = [0, 13, 8, 37, 38, 39, 40, 33, 34];
|
||||||
|
if (e.shiftKey){
|
||||||
|
e.preventDefault();
|
||||||
|
} else {
|
||||||
|
if (acceptChars.indexOf(String.fromCharCode(e.which)) === -1 && acceptCodes.indexOf(e.which) === -1) {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Game.Exit = function () {
|
||||||
|
///////
|
||||||
|
if (Game.Type == "GeneralQuad"){
|
||||||
|
var divType = "GenaralQuad";
|
||||||
|
} else if ( Game.Type == "QuadTransformations"){
|
||||||
|
divType = "StandardQuad";
|
||||||
|
} else if (Game.Type == "LinearTransformations"){
|
||||||
|
divType = "Linear";
|
||||||
|
} else {
|
||||||
|
divType = Game.Type;
|
||||||
|
}
|
||||||
|
if (arguments.length === 0) {
|
||||||
|
var exit = "<div id='endText' class='msg'> <h2> Are you sure you want to quit? </h2> <input type='submit' id='quit' value='Yes'/><input type='submit' id='resume' value='No'/> </div>";
|
||||||
|
////////pause timer
|
||||||
|
Game.RunTimer(true);
|
||||||
|
$('#End').after(exit);
|
||||||
|
$('#quit').on('click', function () { Game.Exit(true); })
|
||||||
|
$('#resume').on('click', function () { Game.Exit(false); })
|
||||||
|
/////////
|
||||||
|
$('#myCanvas').hide();
|
||||||
|
|
||||||
|
$('#' + divType).hide();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if (arguments[0] == true) {
|
||||||
|
$('.msg').remove();
|
||||||
|
$('.Submit').off();
|
||||||
|
|
||||||
|
Game.PlayLevel(0);
|
||||||
|
}
|
||||||
|
if (arguments[0] == false) {
|
||||||
|
$('.msg').remove();
|
||||||
|
///////// resume timer
|
||||||
|
Game.RunTimer(false);
|
||||||
|
/////////
|
||||||
|
$('#myCanvas').show();
|
||||||
|
$('#' + divType).show();
|
||||||
|
}
|
||||||
|
$('#quit').off();
|
||||||
|
$('#resume').off();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Game.Check = function () {
|
||||||
|
$('.Submit').off()
|
||||||
|
$('input').off();
|
||||||
|
$('#exit').off();
|
||||||
|
switch (Game.Type) {
|
||||||
|
case "Tutorial":
|
||||||
|
Game.TutorialEquation(Game.LastX);
|
||||||
|
if (Game.TutorialEquation(Game.LastX) == Game.LastY) {
|
||||||
|
Game.afterLevel(true);
|
||||||
|
} else {
|
||||||
|
Game.afterLevel(false);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "Coordinate":
|
||||||
|
x = Game.Fix($('#X0').val());
|
||||||
|
y = Game.Fix($('#Y0').val());
|
||||||
|
if (x == Game.LastX && y == Game.LastY) {
|
||||||
|
Game.afterLevel(true);
|
||||||
|
} else {
|
||||||
|
Game.afterLevel(false);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "Linear":
|
||||||
|
Game.LinearEquation(Game.LastX);
|
||||||
|
if (Game.LinearEquation(Game.LastX) == Game.LastY && Game.LinearEquation(Game.LastX2) == Game.LastY2) {
|
||||||
|
Game.afterLevel(true);
|
||||||
|
} else {
|
||||||
|
Game.afterLevel(false);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "StandLinear":
|
||||||
|
Game.StandLinearEquation(Game.LastX);
|
||||||
|
if (Game.StandLinearEquation(Game.LastX) == Game.LastY && Game.StandLinearEquation(Game.LastX2) == Game.LastY2) {
|
||||||
|
Game.afterLevel(true);
|
||||||
|
} else {
|
||||||
|
Game.afterLevel(false);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "SimpleQuad":
|
||||||
|
Game.SimpleQuadEquation(Game.LastX);
|
||||||
|
if (Game.SimpleQuadEquation(Game.LastX) == Game.LastY) {
|
||||||
|
Game.afterLevel(true);
|
||||||
|
} else {
|
||||||
|
Game.afterLevel(false);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "StandardQuad":
|
||||||
|
Game.StandardQuadEquation(Game.LastX);
|
||||||
|
if (Game.StandardQuadEquation(Game.LastX) == Game.LastY && Game.StandardQuadEquation(Game.LastX2) == Game.LastY2) {
|
||||||
|
Game.afterLevel(true);
|
||||||
|
} else {
|
||||||
|
Game.afterLevel(false);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "GeneralQuad":
|
||||||
|
Game.GenearalQuadEquation(Game.LastX);
|
||||||
|
if (Game.GenearalQuadEquation(Game.LastX) == Game.LastY && Game.GenearalQuadEquation(Game.LastX2) == Game.LastY2) {
|
||||||
|
Game.afterLevel(true);
|
||||||
|
} else {
|
||||||
|
Game.afterLevel(false);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "ZeroQuad":
|
||||||
|
Game.ZeroQuadEquation(Game.LastX);
|
||||||
|
if (Game.ZeroQuadEquation(Game.LastX) == Game.LastY && Game.ZeroQuadEquation(Game.LastX2) == Game.LastY2) {
|
||||||
|
Game.afterLevel(true);
|
||||||
|
} else {
|
||||||
|
Game.afterLevel(false);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "LinearTransformations":
|
||||||
|
Game.LinearEquation(Game.LastX);
|
||||||
|
if (Game.LinearEquation(Game.LastX) == Game.LastY && Game.LinearEquation(Game.LastX2) == Game.LastY2) {
|
||||||
|
Game.afterLevel(true);
|
||||||
|
} else {
|
||||||
|
Game.afterLevel(false);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "QuadTransformations":
|
||||||
|
Game.StandardQuadEquation(Game.LastX);
|
||||||
|
if (Game.StandardQuadEquation(Game.LastX) == Game.LastY && Game.StandardQuadEquation(Game.LastX2) == Game.LastY2) {
|
||||||
|
Game.afterLevel(true);
|
||||||
|
} else {
|
||||||
|
Game.afterLevel(false);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Game.afterLevel = function (win) {
|
||||||
|
winText = "<div id='endText' class='msg'> <h1> You win! </h1> <input type='submit' id='reset' value='Next'/> </div>";
|
||||||
|
loseText = "<div id='endText' class='msg'> <h1> You lose... </h1> <input type='submit' id='reset' value='Retry'/> </div>";
|
||||||
|
$('#exit').hide();
|
||||||
|
$('.input').hide();
|
||||||
|
$('.Shifts').remove();
|
||||||
|
if (win) {
|
||||||
|
Game.Score += 10;
|
||||||
|
$('#End').after(winText);
|
||||||
|
$('#reset').click(function () {
|
||||||
|
Game.Reset(true);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
Game.Score -= 5;
|
||||||
|
$('#End').after(loseText);
|
||||||
|
$('#reset').click(function () {
|
||||||
|
Game.Reset(false);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Game.Reset = function (win) {
|
||||||
|
myGraph.reset();
|
||||||
|
$('.msg').remove();
|
||||||
|
Game.SubLevel += 1;
|
||||||
|
Game.TransformTimes -= 1;
|
||||||
|
if (timed) {
|
||||||
|
if (window.totalTime == 0) {
|
||||||
|
times = 0;
|
||||||
|
$('.input').hide();
|
||||||
|
timed == false;
|
||||||
|
} else if (window.totalTime == undefined) {
|
||||||
|
times -= 1;
|
||||||
|
timed == false;
|
||||||
|
} else {
|
||||||
|
times = 1;
|
||||||
|
}
|
||||||
|
} else if (Game.Type == "LinearTransformations" || Game.Type == "QuadTransformations") {
|
||||||
|
times = Game.TransformTimes;
|
||||||
|
} else {
|
||||||
|
times -= 1;
|
||||||
|
}
|
||||||
|
Game.PlayLevel(times);
|
||||||
|
};
|
||||||
|
|
||||||
|
Game.Fix = function (str) {
|
||||||
|
if (isNaN(str)) {
|
||||||
|
if (str.indexOf('/') != -1) {
|
||||||
|
return Number(str.substring(0, str.indexOf('/'))) / Number(str.substring(str.indexOf('/') + 1));
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return Number(str);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/*Equations*/
|
||||||
|
|
||||||
|
Game.TutorialEquation = function (goal) {
|
||||||
|
m = Game.Fix($("#m1").val());
|
||||||
|
b = Game.Fix($("#b1").val());
|
||||||
|
myGraph.drawEquation(function (x) {
|
||||||
|
return m * x + b;
|
||||||
|
});
|
||||||
|
return m * goal + b;
|
||||||
|
};
|
||||||
|
|
||||||
|
Game.LinearEquation = function (goal) {
|
||||||
|
rise = Game.Fix($('#rise').val());
|
||||||
|
run = Game.Fix($('#run').val());
|
||||||
|
b = Game.Fix($('#b2').val());
|
||||||
|
hShift = 0;
|
||||||
|
stretch = 1;
|
||||||
|
Game.Transformations();
|
||||||
|
myGraph.drawEquation(function (x) {
|
||||||
|
return stretch * (rise / run) * (x + hShift) + b;
|
||||||
|
});
|
||||||
|
return stretch * (rise / run) * (goal + hShift) + b;
|
||||||
|
};
|
||||||
|
Game.StandLinearEquation = function (goal) {
|
||||||
|
a = Game.Fix($('#a0').val());
|
||||||
|
b = Game.Fix($('#b0').val());
|
||||||
|
c = Game.Fix($('#c0').val());
|
||||||
|
myGraph.drawEquation(function (x) {
|
||||||
|
return (c - a * x) / b;
|
||||||
|
});
|
||||||
|
return (c - a * goal) / b;
|
||||||
|
};
|
||||||
|
Game.SimpleQuadEquation = function (goal) {
|
||||||
|
h = Game.Fix($('#h1').val());
|
||||||
|
k = Game.Fix($('#k1').val());
|
||||||
|
myGraph.drawEquation(function (x) {
|
||||||
|
return ((x - h) * (x - h)) + k;
|
||||||
|
});
|
||||||
|
return ((goal - h) * (goal - h)) + k;
|
||||||
|
};
|
||||||
|
|
||||||
|
Game.StandardQuadEquation = function (goal) {
|
||||||
|
a = Game.Fix($('#a').val());
|
||||||
|
h = Game.Fix($('#h2').val());
|
||||||
|
k = Game.Fix($('#k2').val());
|
||||||
|
hShift = 0;
|
||||||
|
stretch = 1;
|
||||||
|
Game.Transformations();
|
||||||
|
myGraph.drawEquation(function (x) {
|
||||||
|
return a * stretch * ((x - h + hShift) * (x - h + hShift)) + k;
|
||||||
|
});
|
||||||
|
return a * stretch * ((goal - h + hShift) * (goal - h + hShift)) + k;
|
||||||
|
};
|
||||||
|
|
||||||
|
Game.GenearalQuadEquation = function (goal) {
|
||||||
|
a = Game.Fix($('#a2').val());
|
||||||
|
b = Game.Fix($('#b3').val());
|
||||||
|
c = Game.Fix($('#c').val());
|
||||||
|
myGraph.drawEquation(function (x) {
|
||||||
|
return a * (x * x) + b * x + c;
|
||||||
|
});
|
||||||
|
return a * (goal * goal) + b * goal + c;
|
||||||
|
};
|
||||||
|
|
||||||
|
Game.ZeroQuadEquation = function (goal) {
|
||||||
|
X1 = Game.Fix($('#X1').val());
|
||||||
|
X2 = Game.Fix($('#X2').val());
|
||||||
|
myGraph.drawEquation(function (x) {
|
||||||
|
return (x - X1) * (x - X2);
|
||||||
|
});
|
||||||
|
return (goal - X1) * (goal - X2);
|
||||||
|
};
|
||||||
|
|
||||||
|
Game.Transformations = function () {
|
||||||
|
if (Game.Type == "LinearTransformations") {
|
||||||
|
switch (Game.SubLevel) {
|
||||||
|
case 1:
|
||||||
|
b += Game.LinearTransformations.Level1.VerticalShift;
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
hShift = Game.LinearTransformations.Level2.HorizontalShift;
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
stretch = Game.LinearTransformations.Level3.Stretch;
|
||||||
|
break;
|
||||||
|
case 4:
|
||||||
|
b += Game.LinearTransformations.Level4.VerticalShift;
|
||||||
|
hShift = Game.LinearTransformations.Level4.HorizontalShift;
|
||||||
|
stretch = Game.LinearTransformations.Level4.Stretch;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (Game.Type == "QuadTransformations") {
|
||||||
|
switch (Game.SubLevel) {
|
||||||
|
case 1:
|
||||||
|
k += Game.QuadTransformations.Level1.VerticalShift;
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
hShift = Game.QuadTransformations.Level2.HorizontalShift;
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
stretch = Game.QuadTransformations.Level3.Stretch;
|
||||||
|
break;
|
||||||
|
case 4:
|
||||||
|
k += Game.QuadTransformations.Level4.VerticalShift;
|
||||||
|
hShift = Game.QuadTransformations.Level4.HorizontalShift;
|
||||||
|
stretch = Game.QuadTransformations.Level4.Stretch;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
$(document).ready(Game.Start);
|
||||||
245
PlayLevel.js
Normal file
245
PlayLevel.js
Normal file
|
|
@ -0,0 +1,245 @@
|
||||||
|
/*
|
||||||
|
PlayLevel.js- single function code that sets up/shows levels
|
||||||
|
Takes 1 argument: ntimes
|
||||||
|
|
||||||
|
when times = 0 or when game is over
|
||||||
|
it shows your score and then resets everything so it can show the menu
|
||||||
|
|
||||||
|
Otherwise uses switch statement to check Game.Type
|
||||||
|
Sets up appropriate points [and shifts if applicable]
|
||||||
|
Calls appropriate event listeners for buttons
|
||||||
|
Starts
|
||||||
|
*/
|
||||||
|
Game.PlayLevel = function (ntimes) {
|
||||||
|
times = ntimes;
|
||||||
|
if (times == 0) {
|
||||||
|
$('#End').after("<div id='endText' class='msg'> <h1> Your Score: " + Game.Score + "</h1> <input type='submit' id='Last' value='Finish'/> </div>");
|
||||||
|
$('#Last').on('click', function () {
|
||||||
|
$('#endText').remove();
|
||||||
|
myGraph.reset();
|
||||||
|
Game.LastX = undefined;
|
||||||
|
Game.LastY = undefined;
|
||||||
|
Game.LastX2 = undefined;
|
||||||
|
Game.LastY2 = undefined;
|
||||||
|
Game.Score = 0;
|
||||||
|
Game.SubLevel = 1;
|
||||||
|
Game.TransformTimes = 4;
|
||||||
|
$('#myCanvas').hide();
|
||||||
|
$('.input').hide();
|
||||||
|
$('#End').hide();
|
||||||
|
$('#timer').hide();
|
||||||
|
$('#exit').hide();
|
||||||
|
Game.startEvents();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
$('#exit').show();
|
||||||
|
switch (Game.Type) {
|
||||||
|
case "Tutorial":
|
||||||
|
$('#Tutorial').show();
|
||||||
|
Game.LastX = Game.Tutorial.fGoalX();
|
||||||
|
Game.LastY = Game.Tutorial.fGoalY();
|
||||||
|
Game.LastX2 = undefined;
|
||||||
|
Game.LastY2 = undefined;
|
||||||
|
break;
|
||||||
|
case "Coordinate":
|
||||||
|
$('#Coordinate').show();
|
||||||
|
Game.LastX = Game.Coordinate.fGoalX1();
|
||||||
|
Game.LastY = Game.Coordinate.fGoalY1();
|
||||||
|
Game.LastX2 = undefined;
|
||||||
|
Game.LastY2 = undefined;
|
||||||
|
break;
|
||||||
|
case "Linear":
|
||||||
|
$('#Linear').show();
|
||||||
|
Game.Linear.GoalX1 = Game.Linear.fGoalX1();
|
||||||
|
Game.Linear.GoalY1 = Game.Linear.fGoalY1();
|
||||||
|
Game.LastX = Game.Linear.GoalX1
|
||||||
|
Game.LastY = Game.Linear.GoalY1
|
||||||
|
Game.Linear.GoalX2 = Game.Linear.fGoalX2();
|
||||||
|
Game.Linear.GoalY2 = Game.Linear.fGoalY2();
|
||||||
|
Game.LastX2 = Game.Linear.GoalX2
|
||||||
|
Game.LastY2 = Game.Linear.GoalY2
|
||||||
|
break;
|
||||||
|
case "StandLinear":
|
||||||
|
$('#StandLinear').show();
|
||||||
|
Game.StandLinear.GoalX1 = Game.StandLinear.fGoalX1();
|
||||||
|
Game.StandLinear.GoalY1 = Game.StandLinear.fGoalY1();
|
||||||
|
Game.LastX = Game.StandLinear.GoalX1;
|
||||||
|
Game.LastY = Game.StandLinear.GoalY1;
|
||||||
|
Game.StandLinear.GoalX2 = Game.StandLinear.fGoalX2();
|
||||||
|
Game.StandLinear.GoalY2 = Game.StandLinear.fGoalY2();
|
||||||
|
Game.LastX2 = Game.StandLinear.GoalX2;
|
||||||
|
Game.LastY2 = Game.StandLinear.GoalY2;
|
||||||
|
break;
|
||||||
|
case "SimpleQuad":
|
||||||
|
$('#SimpleQuad').show();
|
||||||
|
Game.LastX = Game.SimpleQuad.fGoalX();
|
||||||
|
Game.LastY = Game.SimpleQuad.fGoalY();
|
||||||
|
Game.LastX2 = undefined;
|
||||||
|
Game.LastY2 = undefined;
|
||||||
|
break;
|
||||||
|
case "StandardQuad":
|
||||||
|
$('#StandardQuad').show();
|
||||||
|
Game.StandardQuad.GoalX1 = Game.StandardQuad.fGoalX1();
|
||||||
|
Game.StandardQuad.GoalY1 = Game.StandardQuad.fGoalY1();
|
||||||
|
Game.LastX = Game.StandardQuad.GoalX1;
|
||||||
|
Game.LastY = Game.StandardQuad.GoalY1;
|
||||||
|
Game.StandardQuad.GoalX2 = Game.StandardQuad.fGoalX2();
|
||||||
|
Game.StandardQuad.GoalY2 = Game.StandardQuad.fGoalY2();
|
||||||
|
Game.LastX2 = Game.StandardQuad.GoalX2;
|
||||||
|
Game.LastY2 = Game.StandardQuad.GoalY2;
|
||||||
|
break;
|
||||||
|
case "GeneralQuad":
|
||||||
|
$('#GenaralQuad').show();
|
||||||
|
Game.GeneralQuad.GoalX1 = Game.GeneralQuad.fGoalX1();
|
||||||
|
Game.GeneralQuad.GoalY1 = Game.GeneralQuad.fGoalY1();
|
||||||
|
Game.LastX = Game.GeneralQuad.GoalX1;
|
||||||
|
Game.LastY = Game.GeneralQuad.GoalY1;
|
||||||
|
Game.GeneralQuad.GoalX2 = Game.GeneralQuad.fGoalX2();
|
||||||
|
Game.GeneralQuad.GoalY2 = Game.GeneralQuad.fGoalY2();
|
||||||
|
Game.LastX2 = Game.GeneralQuad.GoalX2;
|
||||||
|
Game.LastY2 = Game.GeneralQuad.GoalY2;
|
||||||
|
break;
|
||||||
|
case "ZeroQuad":
|
||||||
|
$('#ZeroQuad').show();
|
||||||
|
Game.ZeroQuad.GoalX1 = Game.ZeroQuad.fGoalX1();
|
||||||
|
Game.LastX = Game.ZeroQuad.GoalX1;
|
||||||
|
Game.LastY = Game.ZeroQuad.GoalY1;
|
||||||
|
Game.ZeroQuad.GoalX2 = Game.ZeroQuad.fGoalX2();
|
||||||
|
Game.LastX2 = Game.ZeroQuad.GoalX2;
|
||||||
|
Game.LastY2 = Game.ZeroQuad.GoalY2;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "LinearTransformations":
|
||||||
|
$('#Linear').show();
|
||||||
|
switch (Game.SubLevel) {
|
||||||
|
case 1:
|
||||||
|
Game.LinearTransformations.Level1.VerticalShift = Game.LinearTransformations.Level1.fVerticalShift();
|
||||||
|
Sign = (Game.LinearTransformations.Level1.VerticalShift >= 0) ? "+" : "";
|
||||||
|
$('#b2').after("<span style='color:#FF0000;' class='Shifts'>" + Sign + Game.LinearTransformations.Level1.VerticalShift + "</span>");
|
||||||
|
Game.LinearTransformations.Level1.GoalX1 = Game.LinearTransformations.Level1.fGoalX1();
|
||||||
|
Game.LinearTransformations.Level1.GoalY1 = Game.LinearTransformations.Level1.fGoalY1();
|
||||||
|
Game.LastX = Game.LinearTransformations.Level1.GoalX1;
|
||||||
|
Game.LastY = Game.LinearTransformations.Level1.GoalY1;
|
||||||
|
Game.LinearTransformations.Level1.GoalX2 = Game.LinearTransformations.Level1.fGoalX2();
|
||||||
|
Game.LinearTransformations.Level1.GoalY2 = Game.LinearTransformations.Level1.fGoalY2();
|
||||||
|
Game.LastX2 = Game.LinearTransformations.Level1.GoalX2;
|
||||||
|
Game.LastY2 = Game.LinearTransformations.Level1.GoalY2;
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
Game.LinearTransformations.Level2.HorizontalShift = Game.LinearTransformations.Level2.fHorizontalShift();
|
||||||
|
Sign = (Game.LinearTransformations.Level2.HorizontalShift >= 0) ? "+" : "";
|
||||||
|
$('#run').after("<span class='Shifts'> ( </span>");
|
||||||
|
$('#Horizontal').after("<span class='Shifts' style='color:#FF0000;'>" + Sign + Game.LinearTransformations.Level2.HorizontalShift + ")</span>");
|
||||||
|
Game.LinearTransformations.Level2.GoalX1 = Game.LinearTransformations.Level2.fGoalX1();
|
||||||
|
Game.LinearTransformations.Level2.GoalY1 = Game.LinearTransformations.Level2.fGoalY1();
|
||||||
|
Game.LastX = Game.LinearTransformations.Level2.GoalX1;
|
||||||
|
Game.LastY = Game.LinearTransformations.Level2.GoalY1;
|
||||||
|
Game.LinearTransformations.Level2.GoalX2 = Game.LinearTransformations.Level2.fGoalX2();
|
||||||
|
Game.LinearTransformations.Level2.GoalY2 = Game.LinearTransformations.Level2.fGoalY2();
|
||||||
|
Game.LastX2 = Game.LinearTransformations.Level2.GoalX2;
|
||||||
|
Game.LastY2 = Game.LinearTransformations.Level2.GoalY2;
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
Game.LinearTransformations.Level3.Stretch = Game.fStretch();
|
||||||
|
$('#rise').before("<span style='color:#FF0000' class='Shifts'>" + Game.LinearTransformations.Level3.Stretch + " * </span>");
|
||||||
|
Game.LinearTransformations.Level3.GoalX1 = Game.LinearTransformations.Level3.fGoalX1();
|
||||||
|
Game.LinearTransformations.Level3.GoalY1 = Game.LinearTransformations.Level3.fGoalY1();
|
||||||
|
Game.LastX = Game.LinearTransformations.Level3.GoalX1;
|
||||||
|
Game.LastY = Game.LinearTransformations.Level3.GoalY1;
|
||||||
|
Game.LinearTransformations.Level3.GoalX2 = Game.LinearTransformations.Level3.fGoalX2();
|
||||||
|
Game.LinearTransformations.Level3.GoalY2 = Game.LinearTransformations.Level3.fGoalY2();
|
||||||
|
Game.LastX2 = Game.LinearTransformations.Level3.GoalX2;
|
||||||
|
Game.LastY2 = Game.LinearTransformations.Level3.GoalY2;
|
||||||
|
break;
|
||||||
|
case 4:
|
||||||
|
Game.LinearTransformations.Level4.HorizontalShift = Game.LinearTransformations.Level4.fHorizontalShift();
|
||||||
|
Game.LinearTransformations.Level4.VerticalShift = Game.LinearTransformations.Level4.fVerticalShift();
|
||||||
|
var SignV = (Game.LinearTransformations.Level4.VerticalShift >= 0) ? "+" : "";
|
||||||
|
$('#b2').after("<span style='color:#FF0000;' class='Shifts'>" + SignV + Game.LinearTransformations.Level4.VerticalShift + "</span>");
|
||||||
|
var SignH = (Game.LinearTransformations.Level4.HorizontalShift >= 0) ? "+" : "";
|
||||||
|
$('#run').after("<span class='Shifts'> ( </span>");
|
||||||
|
$('#Horizontal').after("<span class='Shifts' style='color:#FF0000;'>" + SignH + Game.LinearTransformations.Level4.HorizontalShift + ")</span>");
|
||||||
|
Game.LinearTransformations.Level4.Stretch = Game.fStretch();
|
||||||
|
$('#rise').before("<span style='color:#FF0000' class='Shifts'>" + Game.LinearTransformations.Level4.Stretch + " * </span>");
|
||||||
|
Game.LinearTransformations.Level4.GoalX1 = Game.LinearTransformations.Level4.fGoalX1();
|
||||||
|
Game.LinearTransformations.Level4.GoalY1 = Game.LinearTransformations.Level4.fGoalY1();
|
||||||
|
Game.LastX = Game.LinearTransformations.Level4.GoalX1;
|
||||||
|
Game.LastY = Game.LinearTransformations.Level4.GoalY1;
|
||||||
|
Game.LinearTransformations.Level4.GoalX2 = Game.LinearTransformations.Level4.fGoalX2();
|
||||||
|
Game.LinearTransformations.Level4.GoalY2 = Game.LinearTransformations.Level4.fGoalY2();
|
||||||
|
Game.LastX2 = Game.LinearTransformations.Level4.GoalX2;
|
||||||
|
Game.LastY2 = Game.LinearTransformations.Level4.GoalY2;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "QuadTransformations":
|
||||||
|
$('#StandardQuad').show();
|
||||||
|
switch (Game.SubLevel) {
|
||||||
|
case 1:
|
||||||
|
Game.QuadTransformations.Level1.VerticalShift = Game.QuadTransformations.Level1.fVerticalShift();
|
||||||
|
Sign = (Game.QuadTransformations.Level1.VerticalShift >= 0) ? "+" : "";
|
||||||
|
$('#k2').after("<span style='color:#FF0000;' class='Shifts'>" + Sign + Game.QuadTransformations.Level1.VerticalShift + "</span>");
|
||||||
|
Game.QuadTransformations.Level1.GoalX1 = Game.QuadTransformations.Level1.fGoalX1();
|
||||||
|
Game.QuadTransformations.Level1.GoalY1 = Game.QuadTransformations.Level1.fGoalY1();
|
||||||
|
Game.LastX = Game.QuadTransformations.Level1.GoalX1;
|
||||||
|
Game.LastY = Game.QuadTransformations.Level1.GoalY1;
|
||||||
|
Game.QuadTransformations.Level1.GoalX2 = Game.QuadTransformations.Level1.fGoalX2();
|
||||||
|
Game.QuadTransformations.Level1.GoalY2 = Game.QuadTransformations.Level1.fGoalY2();
|
||||||
|
Game.LastX2 = Game.QuadTransformations.Level1.GoalX2;
|
||||||
|
Game.LastY2 = Game.QuadTransformations.Level1.GoalY2;
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
Game.QuadTransformations.Level2.HorizontalShift = Game.QuadTransformations.Level2.fHorizontalShift();
|
||||||
|
Sign = (Game.QuadTransformations.Level2.HorizontalShift >= 0) ? "+" : "";
|
||||||
|
$('#h2').after("<span style='color:#FF0000;' class='Shifts'>" + Sign + Game.QuadTransformations.Level2.HorizontalShift + "</span>");
|
||||||
|
Game.QuadTransformations.Level2.GoalX1 = Game.QuadTransformations.Level2.fGoalX1();
|
||||||
|
Game.QuadTransformations.Level2.GoalY1 = Game.QuadTransformations.Level2.fGoalY1();
|
||||||
|
Game.LastX = Game.QuadTransformations.Level2.GoalX1;
|
||||||
|
Game.LastY = Game.QuadTransformations.Level2.GoalY1;
|
||||||
|
Game.QuadTransformations.Level2.GoalX2 = Game.QuadTransformations.Level2.fGoalX2();
|
||||||
|
Game.QuadTransformations.Level2.GoalY2 = Game.QuadTransformations.Level2.fGoalY2();
|
||||||
|
Game.LastX2 = Game.QuadTransformations.Level2.GoalX2;
|
||||||
|
Game.LastY2 = Game.QuadTransformations.Level2.GoalY2;
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
Game.QuadTransformations.Level3.Stretch = Game.fStretch();
|
||||||
|
$('#a').before("<span style='color:#FF0000' class='Shifts'>" + Game.QuadTransformations.Level3.Stretch + " * </span>");
|
||||||
|
Game.QuadTransformations.Level3.GoalX1 = Game.QuadTransformations.Level3.fGoalX1();
|
||||||
|
Game.QuadTransformations.Level3.GoalY1 = Game.QuadTransformations.Level3.fGoalY1();
|
||||||
|
Game.LastX = Game.QuadTransformations.Level3.GoalX1;
|
||||||
|
Game.LastY = Game.QuadTransformations.Level3.GoalY1;
|
||||||
|
Game.QuadTransformations.Level3.GoalX2 = Game.QuadTransformations.Level3.fGoalX2();
|
||||||
|
Game.QuadTransformations.Level3.GoalY2 = Game.QuadTransformations.Level3.fGoalY2();
|
||||||
|
Game.LastX2 = Game.QuadTransformations.Level3.GoalX2;
|
||||||
|
Game.LastY2 = Game.QuadTransformations.Level3.GoalY2;
|
||||||
|
break;
|
||||||
|
case 4:
|
||||||
|
Game.QuadTransformations.Level4.HorizontalShift = Game.QuadTransformations.Level4.fHorizontalShift();
|
||||||
|
Game.QuadTransformations.Level4.VerticalShift = Game.QuadTransformations.Level4.fVerticalShift();
|
||||||
|
Game.QuadTransformations.Level4.Stretch = Game.fStretch();
|
||||||
|
SignH = (Game.QuadTransformations.Level4.HorizontalShift >= 0) ? "+" : "";
|
||||||
|
SignV = (Game.QuadTransformations.Level4.VerticalShift >= 0) ? "+" : "";
|
||||||
|
$('#a').before("<span style='color:#FF0000' class='Shifts'>" + Game.QuadTransformations.Level4.Stretch + " * </span>");
|
||||||
|
$('#h2').after("<span style='color:#FF0000;' class='Shifts'>" + SignH + Game.QuadTransformations.Level4.HorizontalShift + "</span>");
|
||||||
|
$('#k2').after("<span style='color:#FF0000;' class='Shifts'>" + SignV + Game.QuadTransformations.Level4.VerticalShift + "</span>");
|
||||||
|
Game.QuadTransformations.Level4.GoalX1 = Game.QuadTransformations.Level4.fGoalX1();
|
||||||
|
Game.QuadTransformations.Level4.GoalY1 = Game.QuadTransformations.Level4.fGoalY1();
|
||||||
|
Game.LastX = Game.QuadTransformations.Level4.GoalX1;
|
||||||
|
Game.LastY = Game.QuadTransformations.Level4.GoalY1;
|
||||||
|
Game.QuadTransformations.Level4.GoalX2 = Game.QuadTransformations.Level4.fGoalX2();
|
||||||
|
Game.QuadTransformations.Level4.GoalY2 = Game.QuadTransformations.Level4.fGoalY2();
|
||||||
|
Game.LastX2 = Game.QuadTransformations.Level4.GoalX2;
|
||||||
|
Game.LastY2 = Game.QuadTransformations.Level4.GoalY2;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
$(".Submit").on('click', Game.Check);
|
||||||
|
$('input[type=text]').on('keypress', Game.PreventAlpha);
|
||||||
|
$('input[type=text]').on('focus', function () {
|
||||||
|
$(this).val("");
|
||||||
|
});
|
||||||
|
$('#exit').on('click', function () { Game.Exit(); });
|
||||||
|
Game.Responsive.start();
|
||||||
|
}
|
||||||
|
};
|
||||||
77
Responsive.js
Normal file
77
Responsive.js
Normal file
|
|
@ -0,0 +1,77 @@
|
||||||
|
/*
|
||||||
|
Responsive.js- Handles responsiveness of website
|
||||||
|
|
||||||
|
Game.Responsive.start()- Initiates Responsive functions
|
||||||
|
Initiates canvas, inputs, and menu functions
|
||||||
|
Draws the appropriate graph for the level
|
||||||
|
Draws points for level
|
||||||
|
|
||||||
|
Game.Responsive.canvas() - Adjusts canvas on resize
|
||||||
|
Changes width and height to window
|
||||||
|
|
||||||
|
Game.Responsive.inputs() - Adjusts input boxes on resize
|
||||||
|
Changes it to what seems as an appropriate size
|
||||||
|
|
||||||
|
Game.Responsive.menu() - Adjusts menu div on resize
|
||||||
|
Sets it to window size [Bug]
|
||||||
|
|
||||||
|
---- Draggable div functions -----
|
||||||
|
Game.Responsive.mouseUp() - removes event listener on mouseup
|
||||||
|
|
||||||
|
Game.Responsive.mouseDown(e) - prepares for div move
|
||||||
|
stores drag offset from orriginal div
|
||||||
|
calls divMouse function
|
||||||
|
|
||||||
|
Game.Responsive.divMove(e) - moves the div
|
||||||
|
targets div
|
||||||
|
moves the div according to "offset" variable
|
||||||
|
*/
|
||||||
|
Game.Responsive = {
|
||||||
|
canvas: function () {
|
||||||
|
document.getElementById('myCanvas').width = window.innerWidth;
|
||||||
|
document.getElementById('myCanvas').height = window.innerHeight;
|
||||||
|
},
|
||||||
|
inputs: function () {
|
||||||
|
$('.input').width(window.innerWidth / 2.8);
|
||||||
|
$('.input').height(window.innerHeight / 10);
|
||||||
|
},
|
||||||
|
menu: function () {
|
||||||
|
document.getElementById('Menu').width = window.innerWidth;
|
||||||
|
document.getElementById('Menu').height = window.innerHeight;
|
||||||
|
},
|
||||||
|
start: function () {
|
||||||
|
Game.Responsive.canvas();
|
||||||
|
Game.Responsive.inputs();
|
||||||
|
Game.Responsive.menu();
|
||||||
|
myGraph = {};
|
||||||
|
myGraph = new Graph({
|
||||||
|
centerY: (Game.Type != "ZeroQuad") ? window.innerHeight - 60 : window.innerHeight / 2,
|
||||||
|
centerX: 30,
|
||||||
|
minX: 0,
|
||||||
|
minY: 0,
|
||||||
|
maxX: window.innerWidth / (window.innerHeight / 10),
|
||||||
|
maxY: 10,
|
||||||
|
unitsPerTick: 1
|
||||||
|
});
|
||||||
|
myGraph.drawPoint(Game.LastX, Game.LastY);
|
||||||
|
myGraph.drawPoint(Game.LastX2, Game.LastY2);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Game.Responsive.mouseUp = function () {
|
||||||
|
window.removeEventListener('mousemove', Game.Responsive.divMove, true);
|
||||||
|
};
|
||||||
|
|
||||||
|
Game.Responsive.mouseDown = function (e) {
|
||||||
|
target = (e.target || e.srcElement).id;
|
||||||
|
var div = document.getElementById(target);
|
||||||
|
offY = e.clientY - parseInt(div.offsetTop);
|
||||||
|
offX = e.clientX - parseInt(div.offsetLeft);
|
||||||
|
window.addEventListener('mousemove', Game.Responsive.divMove, true);
|
||||||
|
};
|
||||||
|
|
||||||
|
Game.Responsive.divMove = function (e) {
|
||||||
|
var div = document.getElementById(target);
|
||||||
|
div.style.top = (e.clientY - offY) + 'px';
|
||||||
|
div.style.left = (e.clientX - offX) + 'px';
|
||||||
|
};
|
||||||
190
StyleSheet.css
Normal file
190
StyleSheet.css
Normal file
|
|
@ -0,0 +1,190 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: Ubuntu;
|
||||||
|
font-style: normal;
|
||||||
|
src: url(UbuntuMono-R.ttf);
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Ubuntu;
|
||||||
|
font-weight: bold;
|
||||||
|
src: url(Ubuntu-M.ttf);
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Ubuntu;
|
||||||
|
font-style: thin;
|
||||||
|
src: url(Ubuntu-L.ttf);
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
canvas {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
div.input {
|
||||||
|
z-index: 2;
|
||||||
|
position: fixed;
|
||||||
|
top: 6%;
|
||||||
|
left: 6%;
|
||||||
|
right: 0%;
|
||||||
|
text-align:center;
|
||||||
|
font-family: Ubuntu, Verdana sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 1.5em;
|
||||||
|
background-color:rgba(134, 238, 238, 0.6);
|
||||||
|
border-color:#BFBFBF;
|
||||||
|
border-radius: 15px;
|
||||||
|
border-width:medium;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
input[type=text] {
|
||||||
|
font-family: Ubuntu;
|
||||||
|
padding: 3px;
|
||||||
|
font-size: 0.8em;
|
||||||
|
margin: 10px;
|
||||||
|
width: 10%;
|
||||||
|
}
|
||||||
|
/********Changed********/
|
||||||
|
input[type=submit] {
|
||||||
|
font-family: Ubuntu;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 10px;
|
||||||
|
background: #73B9FF;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.msg {
|
||||||
|
z-index: 2;
|
||||||
|
position: fixed;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
bottom: 50%;
|
||||||
|
top: 50%;
|
||||||
|
left: 0%;
|
||||||
|
right: 0%;
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
height: 150px;
|
||||||
|
background-color:rgba(134, 238, 238, 0.6);
|
||||||
|
border-color:#BFBFBF;
|
||||||
|
border-width:medium;
|
||||||
|
box-shadow:0px 0px 10px rgba(78, 78, 78, 0.89);
|
||||||
|
border-radius: 15px;
|
||||||
|
font-family: Ubuntu, Verdana sans-serif;
|
||||||
|
font-style: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#Menu {
|
||||||
|
font-family: Ubuntu;
|
||||||
|
font-size: 30px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice{
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
li:hover:not(.clicked){
|
||||||
|
font-weight: bold;
|
||||||
|
text-shadow: 0px 0px 3px rgba(26, 10, 255, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
#topics{
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
html{
|
||||||
|
height:100%;
|
||||||
|
background-image: -webkit-gradient(
|
||||||
|
linear,
|
||||||
|
left top,
|
||||||
|
left bottom,
|
||||||
|
color-stop(0.1, #FFFFFF),
|
||||||
|
color-stop(0.71, #C0B8FF),
|
||||||
|
color-stop(0.86, #31A338)
|
||||||
|
);
|
||||||
|
background-image: -o-linear-gradient(bottom, #FFFFFF 10%, #C0B8FF 71%, #31A338 86%);
|
||||||
|
background-image: -moz-linear-gradient(bottom, #FFFFFF 10%, #C0B8FF 71%, #31A338 86%);
|
||||||
|
background-image: -webkit-linear-gradient(bottom, #FFFFFF 10%, #C0B8FF 71%, #31A338 86%);
|
||||||
|
background-image: -ms-linear-gradient(bottom, #FFFFFF 10%, #C0B8FF 71%, #31A338 86%);
|
||||||
|
background-image: linear-gradient(to bottom, #FFFFFF 10%, #C0B8FF 71%, #31A338 86%);
|
||||||
|
}
|
||||||
|
#Play{
|
||||||
|
font-size: 25px;
|
||||||
|
margin-top: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
input[type=submit]:hover{
|
||||||
|
background-color: #D6EBFF;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.clicked {
|
||||||
|
font-weight: bold;
|
||||||
|
text-shadow: 0px 0px 3px rgba(26, 10, 255, 1);
|
||||||
|
|
||||||
|
}
|
||||||
|
label{
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
select{
|
||||||
|
background: none;
|
||||||
|
font-family: Ubuntu;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 20px;
|
||||||
|
width: 140px;
|
||||||
|
padding:12px;
|
||||||
|
text-align: center;
|
||||||
|
border: 3px solid #86eeee;
|
||||||
|
border-radius: 5px;
|
||||||
|
appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
}
|
||||||
|
label:after{
|
||||||
|
content: "\25bc";
|
||||||
|
font-size: 13px;
|
||||||
|
position: absolute;
|
||||||
|
right: 11px;
|
||||||
|
top: 13px;
|
||||||
|
pointer-events:none;
|
||||||
|
}
|
||||||
|
#timer{
|
||||||
|
z-index: 2;
|
||||||
|
position: fixed;
|
||||||
|
top: 6%;
|
||||||
|
right: 6%;
|
||||||
|
text-align:center;
|
||||||
|
color: red;
|
||||||
|
font-family: Ubuntu, Verdana sans-serif;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 2em;
|
||||||
|
background-color:rgba(134, 238, 238, 0.6);
|
||||||
|
border-color:#000000;
|
||||||
|
border-radius: 15px;
|
||||||
|
border-width:2px;
|
||||||
|
padding: 10px;
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
.time {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
#exit {
|
||||||
|
z-index: 2;
|
||||||
|
position: absolute;
|
||||||
|
top: 6%;
|
||||||
|
left: 1%;
|
||||||
|
margin-top:-30px;
|
||||||
|
margin-right:-30px;
|
||||||
|
cursor:pointer;
|
||||||
|
color: #fff;
|
||||||
|
border: 1px solid #AEAEAE;
|
||||||
|
border-radius: 30px;
|
||||||
|
background-color: #be5056;
|
||||||
|
font-family: Ubuntu;
|
||||||
|
font-size: 25px;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 0px;
|
||||||
|
padding: 14px 6px;
|
||||||
|
}
|
||||||
|
#exit:hover {
|
||||||
|
font-weight: bold;
|
||||||
|
background-color: #cc8589;
|
||||||
|
}
|
||||||
447
Test.js
Normal file
447
Test.js
Normal file
|
|
@ -0,0 +1,447 @@
|
||||||
|
/*
|
||||||
|
Test.js- Automates testing [Black Box Testing Style]
|
||||||
|
Expects Elements to be shown and score to be equal to 15 (25 if transformations)
|
||||||
|
|
||||||
|
Test.Errors - An array that contains all the errors once tests are ran.
|
||||||
|
|
||||||
|
Test.Multiple(choice, times) - Runs [choice] test [times] times
|
||||||
|
Basically works as: if option run option.test
|
||||||
|
Displays errors at end using Test.DisplayErrors function
|
||||||
|
|
||||||
|
Test.All() - Runs all tests
|
||||||
|
Runs each test once
|
||||||
|
Displays errors at end using Test.DisplayErrors function
|
||||||
|
|
||||||
|
Test.DisplayErrors()
|
||||||
|
if no errors
|
||||||
|
Displays "All tests passed"
|
||||||
|
if errors
|
||||||
|
Shows errors
|
||||||
|
Says how many errors there are
|
||||||
|
|
||||||
|
------Simulation Testing [Not going into detail with simulatePlay()]-------
|
||||||
|
simulatePlay() - Wins 2 levels and loses 1, then checks if score equals 15
|
||||||
|
unless it's a transformation level then checks if score = 25
|
||||||
|
|
||||||
|
Test.Menu() - Checks Menu
|
||||||
|
If menu,
|
||||||
|
topics,
|
||||||
|
nchoice,
|
||||||
|
or play is undefined or not shown error is raised
|
||||||
|
Simulates clicks with clickTest function
|
||||||
|
ClickTest() - Simulates topics being clicked
|
||||||
|
if topic cannot be clicked then error is raised
|
||||||
|
|
||||||
|
Test.[insert level name]() - Checks [level name]
|
||||||
|
Gets into said level
|
||||||
|
If canvas or input isn't defined or shown then an error is raised
|
||||||
|
Simulates level using simulatePlay function
|
||||||
|
*/
|
||||||
|
|
||||||
|
var Test = new Object();
|
||||||
|
|
||||||
|
Test.Errors = []
|
||||||
|
|
||||||
|
Test.Menu = function () {
|
||||||
|
menu = (document.getElementById('Menu') == undefined || $("#Menu").is(':hidden')) ? false : true;
|
||||||
|
topics = (document.getElementById('topics') == undefined || $("#topics").is(':hidden')) ? false : true;
|
||||||
|
nchoice = (document.getElementById('nchoice') == undefined || $("#nchoice").is(':hidden')) ? false : true;
|
||||||
|
play = (document.getElementById('Play') == undefined || $("#Play").is(':hidden')) ? false : true;
|
||||||
|
if (!menu) { Test.Errors.push("Expected menu to be shown."); }
|
||||||
|
if (!topics) { Test.Errors.push("Expected topics to be shown.") }
|
||||||
|
if (!nchoice) { Test.Errors.push("Expected number of times option to be shown.") }
|
||||||
|
if (!play) { Test.Errors.push("Expected Play button to be shown.") }
|
||||||
|
//--------Start ClickTest-------//
|
||||||
|
length = $("#topics").children().length
|
||||||
|
for (i = 1; i <= length; i++) {
|
||||||
|
item = '#topics li:nth-child(' + i + ')'
|
||||||
|
$(item).click()
|
||||||
|
if (!$(item).hasClass("clicked")) {
|
||||||
|
id = $(item).attr('id');
|
||||||
|
Test.Errors.push(id + " cannot be clicked");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Test.Tutorial = function () {
|
||||||
|
$('#TutorialTopic').click();
|
||||||
|
$('#Play').click();
|
||||||
|
Canvas = (document.getElementById('myCanvas') == undefined || $("#myCanvas").is(':hidden')) ? false : true;
|
||||||
|
Tutorial = (document.getElementById('Tutorial') == undefined || $("#Tutorial").is(':hidden')) ? false : true;
|
||||||
|
if (!myCanvas) { Test.Errors.push("[Tutorial] Expected canvas to be shown."); }
|
||||||
|
if (!Tutorial) { Test.Errors.push("[Tutorial] Expected input to be shown."); }
|
||||||
|
//-----Start Game Simulation-----//
|
||||||
|
$('#m1').val(0);
|
||||||
|
$('#b1').val(Game.LastY);
|
||||||
|
$('.Submit').click();
|
||||||
|
$('#reset').click();
|
||||||
|
$('#m1').val(0);
|
||||||
|
$('#b1').val(Game.LastY);
|
||||||
|
$('.Submit').click();
|
||||||
|
$('#reset').click();
|
||||||
|
$('#m1').val(0);
|
||||||
|
$('#b1').val(Game.LastY - 1);
|
||||||
|
$('.Submit').click();
|
||||||
|
if (Game.Score != 15) {
|
||||||
|
Test.Errors.push("[Tutorial] The scoring system was incorrect: \n" + "Expected 15, instead got: " + Game.Score);
|
||||||
|
}
|
||||||
|
$('#reset').click();
|
||||||
|
$('#Last').click();
|
||||||
|
}
|
||||||
|
|
||||||
|
Test.Coordinate = function() {
|
||||||
|
$('#CoordinateTopic').click();
|
||||||
|
$('#Play').click();
|
||||||
|
Canvas = (document.getElementById('myCanvas') == undefined || $("#myCanvas").is(':hidden')) ? false : true;
|
||||||
|
Coordinate = (document.getElementById('Coordinate') == undefined || $("#Coordinate").is(':hidden')) ? false : true;
|
||||||
|
if (!myCanvas) { Test.Errors.push("[Coordinate] Expected canvas to be shown."); }
|
||||||
|
if (!Coordinate) { Test.Errors.push("[Coordinate] Expected input to be shown."); }
|
||||||
|
//-----Start Game Simulation----//
|
||||||
|
$('#X0').val(Game.LastX);
|
||||||
|
$('#Y0').val(Game.LastY);
|
||||||
|
$('.Submit').click();
|
||||||
|
$('#reset').click();
|
||||||
|
$('#X0').val(Game.LastX);
|
||||||
|
$('#Y0').val(Game.LastY);
|
||||||
|
$('.Submit').click();
|
||||||
|
$('#reset').click();
|
||||||
|
$('#X0').val(Game.LastX);
|
||||||
|
$('#Y0').val(Game.LastY - 1);
|
||||||
|
$('.Submit').click();
|
||||||
|
if (Game.Score != 15) {
|
||||||
|
Test.Errors.push("[Coordinate] The scoring system was incorrect: \n" + "Expected 15, instead got: " + Game.Score);
|
||||||
|
}
|
||||||
|
$('#reset').click();
|
||||||
|
$('#Last').click();
|
||||||
|
}
|
||||||
|
|
||||||
|
Test.Linear = function () {
|
||||||
|
$('#LinearTopic').click();
|
||||||
|
$('#Play').click();
|
||||||
|
Canvas = (document.getElementById('myCanvas') == undefined || $("#myCanvas").is(':hidden')) ? false : true;
|
||||||
|
Linear = (document.getElementById('Linear') == undefined || $("#Linear").is(':hidden')) ? false : true;
|
||||||
|
if (!myCanvas) { Test.Errors.push("[Linear] Expected canvas to be shown."); }
|
||||||
|
if (!Linear) { Test.Errors.push("[Linear] Expected input to be shown."); }
|
||||||
|
//-----Start Game Simulation----//
|
||||||
|
m = (Game.LastY2 - Game.LastY) / (Game.LastX2 - Game.LastX);
|
||||||
|
b = Game.LastY - (m * Game.LastX);
|
||||||
|
$('#rise').val(m);
|
||||||
|
$('#run').val(1);
|
||||||
|
$('#b2').val(b);
|
||||||
|
$('.Submit').click();
|
||||||
|
$('#reset').click();
|
||||||
|
m = (Game.LastY2 - Game.LastY) / (Game.LastX2 - Game.LastX);
|
||||||
|
b = Game.LastY - (m * Game.LastX);
|
||||||
|
$('#rise').val(m);
|
||||||
|
$('#run').val(1);
|
||||||
|
$('#b2').val(b);
|
||||||
|
$('.Submit').click();
|
||||||
|
$('#reset').click();
|
||||||
|
m = (Game.LastY2 - Game.LastY) / (Game.LastX2 - Game.LastX);
|
||||||
|
b = Game.LastY - (m * Game.LastX);
|
||||||
|
$('#rise').val(m);
|
||||||
|
$('#run').val(1);
|
||||||
|
$('#b2').val(b - 1);
|
||||||
|
$('.Submit').click();
|
||||||
|
if (Game.Score != 15) {
|
||||||
|
Test.Errors.push("[Linear] The scoring system was incorrect: \n" + "Expected 15, instead got: " + Game.Score);
|
||||||
|
}
|
||||||
|
$('#reset').click();
|
||||||
|
$('#Last').click();
|
||||||
|
}
|
||||||
|
|
||||||
|
Test.StandLinear = function () {
|
||||||
|
$('#StandLinearTopic').click();
|
||||||
|
$('#Play').click();
|
||||||
|
Canvas = (document.getElementById('myCanvas') == undefined || $("#myCanvas").is(':hidden')) ? false : true;
|
||||||
|
StandLinear = (document.getElementById('StandLinear') == undefined || $("#StandLinear").is(':hidden')) ? false : true;
|
||||||
|
if (!myCanvas) { Test.Errors.push("[StandLinear] Expected canvas to be shown."); }
|
||||||
|
if (!StandLinear) { Test.Errors.push("[StandLinear] Expected input to be shown."); }
|
||||||
|
//----Simulate Game Play-----//
|
||||||
|
a = (Game.LastY2 - Game.LastY);
|
||||||
|
b = (Game.LastX2 - Game.LastX);
|
||||||
|
m = a / b
|
||||||
|
c = (Game.LastY - (m * Game.LastX)) * b
|
||||||
|
$('#a0').val(-1 * a);
|
||||||
|
$('#b0').val(b);
|
||||||
|
$('#c0').val(c);
|
||||||
|
$('.Submit').click();
|
||||||
|
$('#reset').click();
|
||||||
|
a = (Game.LastY2 - Game.LastY);
|
||||||
|
b = (Game.LastX2 - Game.LastX);
|
||||||
|
m = a / b
|
||||||
|
c = (Game.LastY - (m * Game.LastX)) * b
|
||||||
|
$('#a0').val(-1 * a);
|
||||||
|
$('#b0').val(b);
|
||||||
|
$('#c0').val(c);
|
||||||
|
$('.Submit').click();
|
||||||
|
$('#reset').click();
|
||||||
|
a = (Game.LastY2 - Game.LastY);
|
||||||
|
b = (Game.LastX2 - Game.LastX);
|
||||||
|
m = a / b
|
||||||
|
c = (Game.LastY - (m * Game.LastX)) * b
|
||||||
|
$('#a0').val(-1 * a);
|
||||||
|
$('#b0').val(b);
|
||||||
|
$('#c0').val(c - 1);
|
||||||
|
$('.Submit').click();
|
||||||
|
if (Game.Score != 15) {
|
||||||
|
Test.Errors.push("[StandLinear] The scoring system was incorrect: \n" + "Expected 15, instead got: " + Game.Score);
|
||||||
|
}
|
||||||
|
$('#reset').click();
|
||||||
|
$('#Last').click();
|
||||||
|
}
|
||||||
|
|
||||||
|
Test.LinearTransformations = function () {
|
||||||
|
$('#LinearTransformationsTopic').click();
|
||||||
|
$('#Play').click();
|
||||||
|
Canvas = (document.getElementById('myCanvas') == undefined || $("#myCanvas").is(':hidden')) ? false : true;
|
||||||
|
Linear = (document.getElementById('Linear') == undefined || $("#Linear").is(':hidden')) ? false : true;
|
||||||
|
if (!myCanvas) { Test.Errors.push("[LinearTransformations] Expected canvas to be shown."); }
|
||||||
|
if (!Linear) { Test.Errors.push("[LinearTransformations] Expected input to be shown."); }
|
||||||
|
//----Simulate Game Play----//
|
||||||
|
m = (Game.LastY2 - Game.LastY) / (Game.LastX2 - Game.LastX);
|
||||||
|
b = Game.LastY - (m * Game.LastX);
|
||||||
|
$('#rise').val(m);
|
||||||
|
$('#run').val(1);
|
||||||
|
$('#b2').val(b - Game.LinearTransformations.Level1.VerticalShift);
|
||||||
|
$('.Submit').click();
|
||||||
|
if (Game.Score != 10) { alert("") }
|
||||||
|
$('#reset').click();
|
||||||
|
m = (Game.LastY2 - Game.LastY) / (Game.LastX2 - Game.LastX);
|
||||||
|
b = Game.LastY - m * (Game.LastX + Game.LinearTransformations.Level2.HorizontalShift);
|
||||||
|
$('#rise').val(m);
|
||||||
|
$('#run').val(1);
|
||||||
|
$('#b2').val(b);
|
||||||
|
$('.Submit').click();
|
||||||
|
$('#reset').click();
|
||||||
|
m = (Game.LastY2 - Game.LastY) / (Game.LastX2 - Game.LastX);
|
||||||
|
b = Game.LastY - (m * Game.LastX)
|
||||||
|
$('#rise').val(m * (1 / Game.LinearTransformations.Level3.Stretch));
|
||||||
|
$('#run').val(1);
|
||||||
|
$('#b2').val(b);
|
||||||
|
$('.Submit').click();
|
||||||
|
$('#reset').click();
|
||||||
|
$('#rise').val(0);
|
||||||
|
$('#run').val(1);
|
||||||
|
$('#b2').val(-20);
|
||||||
|
$('.Submit').click();
|
||||||
|
if (Game.Score != 25) {
|
||||||
|
Test.Errors.push("[LinearTransformations] The scoring system was incorrect: \n" + "Expected 25, instead got: " + Game.Score);
|
||||||
|
}
|
||||||
|
$('#reset').click();
|
||||||
|
$('#Last').click();
|
||||||
|
}
|
||||||
|
|
||||||
|
Test.SimpleQuad = function () {
|
||||||
|
$('#SimpleQuadTopic').click();
|
||||||
|
$('#Play').click();
|
||||||
|
Canvas = (document.getElementById('myCanvas') == undefined || $("#myCanvas").is(':hidden')) ? false : true;
|
||||||
|
SimpleQuad = (document.getElementById('SimpleQuad') == undefined || $("#SimpleQuad").is(':hidden')) ? false : true;
|
||||||
|
if (!myCanvas) { Test.Errors.push("[SimpleQuad] Expected canvas to be shown."); }
|
||||||
|
if (!SimpleQuad) { Test.Errors.push("[SimpleQuad] Expected input to be shown."); }
|
||||||
|
//------Simulate Game Play------//
|
||||||
|
$('#h1').val(Game.LastX);
|
||||||
|
$('#k1').val(Game.LastY);
|
||||||
|
$('.Submit').click();
|
||||||
|
$('#reset').click();
|
||||||
|
$('#h1').val(Game.LastX);
|
||||||
|
$('#k1').val(Game.LastY);
|
||||||
|
$('.Submit').click();
|
||||||
|
$('#reset').click();
|
||||||
|
$('#h1').val(Game.LastX);
|
||||||
|
$('#k1').val(Game.LastY - 1);
|
||||||
|
$('.Submit').click();
|
||||||
|
if (Game.Score != 15) {
|
||||||
|
Test.Errors.push("[SimpleQuad] The scoring system was incorrect: \n" + "Expected 15, instead got: " + Game.Score);
|
||||||
|
}
|
||||||
|
$('#reset').click();
|
||||||
|
$('#Last').click();
|
||||||
|
}
|
||||||
|
|
||||||
|
Test.StandardQuad = function () {
|
||||||
|
$('#StandardQuadTopic').click();
|
||||||
|
$('#Play').click();
|
||||||
|
Canvas = (document.getElementById('myCanvas') == undefined || $("#myCanvas").is(':hidden')) ? false : true;
|
||||||
|
StandardQuad = (document.getElementById('StandardQuad') == undefined || $("#StandardQuad").is(':hidden')) ? false : true;
|
||||||
|
if (!myCanvas) { Test.Errors.push("[StandardQuad] Expected canvas to be shown."); }
|
||||||
|
if (!StandardQuad) { Test.Errors.push("[StandardQuad] Expected input to be shown."); }
|
||||||
|
//------Simulate Game Play------//
|
||||||
|
n = Game.LastX2 - Game.LastX;
|
||||||
|
a = (Game.LastY2 - Game.LastY) / (n * n);
|
||||||
|
$('#a').val(a);
|
||||||
|
$('#h2').val(Game.LastX);
|
||||||
|
$('#k2').val(Game.LastY);
|
||||||
|
$('.Submit').click();
|
||||||
|
$('#reset').click();
|
||||||
|
n = Game.LastX2 - Game.LastX;
|
||||||
|
a = (Game.LastY2 - Game.LastY) / (n * n);
|
||||||
|
$('#a').val(a);
|
||||||
|
$('#h2').val(Game.LastX);
|
||||||
|
$('#k2').val(Game.LastY);
|
||||||
|
$('.Submit').click();
|
||||||
|
$('#reset').click();
|
||||||
|
n = Game.LastX2 - Game.LastX;
|
||||||
|
a = (Game.LastY2 - Game.LastY) / (n * n);
|
||||||
|
$('#a').val(a);
|
||||||
|
$('#h2').val(Game.LastX);
|
||||||
|
$('#k2').val(Game.LastY - 1);
|
||||||
|
$('.Submit').click();
|
||||||
|
if (Game.Score != 15) {
|
||||||
|
Test.Errors.push("[StandardQuad] The scoring system was incorrect: \n" + "Expected 15, instead got: " + Game.Score);
|
||||||
|
}
|
||||||
|
$('#reset').click();
|
||||||
|
$('#Last').click();
|
||||||
|
}
|
||||||
|
|
||||||
|
Test.GeneralQuad = function () {
|
||||||
|
$('#GeneralQuadTopic').click();
|
||||||
|
$('#Play').click();
|
||||||
|
Canvas = (document.getElementById('myCanvas') == undefined || $("#myCanvas").is(':hidden')) ? false : true;
|
||||||
|
GeneralQuad = (document.getElementById('GenaralQuad') == undefined || $("#GenaralQuad").is(':hidden')) ? false : true;
|
||||||
|
if (!myCanvas) { Test.Errors.push("[GeneralQuad] Expected canvas to be shown."); }
|
||||||
|
if (!GeneralQuad) { Test.Errors.push("[GeneralQuad] Expected input to be shown."); }
|
||||||
|
//-------Simulate Game Play-------//
|
||||||
|
n = Game.LastX2 - Game.LastX;
|
||||||
|
a = (Game.LastY2 - Game.LastY) / (n * n);
|
||||||
|
b = -2 * a * Game.LastX;
|
||||||
|
c = a * Game.LastX * Game.LastX + Game.LastY
|
||||||
|
$('#a2').val(a);
|
||||||
|
$('#b3').val(b);
|
||||||
|
$('#c').val(c);
|
||||||
|
$('.Submit').click();
|
||||||
|
$('#reset').click();
|
||||||
|
n = Game.LastX2 - Game.LastX;
|
||||||
|
a = (Game.LastY2 - Game.LastY) / (n * n);
|
||||||
|
b = -2 * a * Game.LastX;
|
||||||
|
c = a * Game.LastX * Game.LastX + Game.LastY
|
||||||
|
$('#a2').val(a);
|
||||||
|
$('#b3').val(b);
|
||||||
|
$('#c').val(c);
|
||||||
|
$('.Submit').click();
|
||||||
|
$('#reset').click();
|
||||||
|
n = Game.LastX2 - Game.LastX;
|
||||||
|
a = (Game.LastY2 - Game.LastY) / (n * n);
|
||||||
|
b = -2 * a * Game.LastX;
|
||||||
|
c = a * Game.LastX * Game.LastX + Game.LastY
|
||||||
|
$('#a2').val(a);
|
||||||
|
$('#b3').val(b);
|
||||||
|
$('#c').val(c - 1);
|
||||||
|
$('.Submit').click();
|
||||||
|
if (Game.Score != 15) {
|
||||||
|
Test.Errors.push("[GeneralQuad] The scoring system was incorrect: \n" + "Expected 15, instead got: " + Game.Score);
|
||||||
|
}
|
||||||
|
$('#reset').click();
|
||||||
|
$('#Last').click();
|
||||||
|
}
|
||||||
|
|
||||||
|
Test.ZeroQuad = function () {
|
||||||
|
$('#ZeroQuadTopic').click();
|
||||||
|
$('#Play').click();
|
||||||
|
Canvas = (document.getElementById('myCanvas') == undefined || $("#myCanvas").is(':hidden')) ? false : true;
|
||||||
|
ZeroQuad = (document.getElementById('ZeroQuad') == undefined || $("#ZeroQuad").is(':hidden')) ? false : true;
|
||||||
|
if (!myCanvas) { Test.Errors.push("[ZeroQuad] Expected canvas to be shown."); }
|
||||||
|
if (!ZeroQuad) { Test.Errors.push("[ZeroQuad] Expected input to be shown."); }
|
||||||
|
//-----Simulate Game Play-----//
|
||||||
|
$('#X1').val(Game.LastX);
|
||||||
|
$('#X2').val(Game.LastX2);
|
||||||
|
$('.Submit').click();
|
||||||
|
$('#reset').click();
|
||||||
|
$('#X1').val(Game.LastX);
|
||||||
|
$('#X2').val(Game.LastX2);
|
||||||
|
$('.Submit').click();
|
||||||
|
$('#reset').click();
|
||||||
|
$('#X1').val(Game.LastX);
|
||||||
|
$('#X2').val(Game.LastX2 + 1);
|
||||||
|
$('.Submit').click();
|
||||||
|
$('#reset').click();
|
||||||
|
if (Game.Score != 15) {
|
||||||
|
Test.Errors.push("[ZeroQuad] The scoring system was incorrect: \n" + "Expected 15, instead got: " + Game.Score);
|
||||||
|
}
|
||||||
|
$('#reset').click();
|
||||||
|
$('#Last').click();
|
||||||
|
}
|
||||||
|
|
||||||
|
Test.QuadTransformations = function () {
|
||||||
|
$('#QuadTransformationsTopic').click();
|
||||||
|
$('#Play').click();
|
||||||
|
Canvas = (document.getElementById('myCanvas') == undefined || $("#myCanvas").is(':hidden')) ? false : true;
|
||||||
|
QuadTransformations = (document.getElementById('StandardQuad') == undefined || $("#StandardQuad").is(':hidden')) ? false : true;
|
||||||
|
if (!myCanvas) { Test.Errors.push("[QuadTransformations] Expected canvas to be shown."); }
|
||||||
|
if (!QuadTransformations) { Test.Errors.push("[QuadTransformations] Expected input to be shown."); }
|
||||||
|
//----Simulate Game Play-----//
|
||||||
|
n = Game.LastX2 - Game.LastX;
|
||||||
|
a = (Game.LastY2 - Game.LastY) / (n * n);
|
||||||
|
$('#a').val(a);
|
||||||
|
$('#h2').val(Game.LastX);
|
||||||
|
$('#k2').val(Game.LastY - Game.QuadTransformations.Level1.VerticalShift);
|
||||||
|
$('.Submit').click();
|
||||||
|
$('#reset').click();
|
||||||
|
n = Game.LastX2 - Game.LastX;
|
||||||
|
a = (Game.LastY2 - Game.LastY) / (n * n);
|
||||||
|
$('#a').val(a);
|
||||||
|
$('#h2').val(Game.LastX + Game.QuadTransformations.Level2.HorizontalShift);
|
||||||
|
$('#k2').val(Game.LastY);
|
||||||
|
$('.Submit').click();
|
||||||
|
$('#reset').click();
|
||||||
|
n = Game.LastX2 - Game.LastX;
|
||||||
|
a = (Game.LastY2 - Game.LastY) / (n * n);
|
||||||
|
$('#a').val(a * (1 / Game.QuadTransformations.Level3.Stretch));
|
||||||
|
$('#h2').val(Game.LastX);
|
||||||
|
$('#k2').val(Game.LastY);
|
||||||
|
$('.Submit').click();
|
||||||
|
$('#reset').click();
|
||||||
|
$('#a').val(-10);
|
||||||
|
$('#h2').val(1000);
|
||||||
|
$('#k2').val(-50);
|
||||||
|
$('.Submit').click();
|
||||||
|
if (Game.Score != 25) {
|
||||||
|
Test.Errors.push("[QuadTransformations] The scoring system was incorrect: \n" + "Expected 25, instead got: " + Game.Score);
|
||||||
|
}
|
||||||
|
$('#reset').click();
|
||||||
|
$('#Last').click();
|
||||||
|
}
|
||||||
|
|
||||||
|
Test.Multiple = function (choice, times) {
|
||||||
|
for (i = 0; i < times; i++) {
|
||||||
|
switch (choice.toUpperCase()) {
|
||||||
|
case "MENU": Test.Menu(); break;
|
||||||
|
case "TUTORIAL": Test.Tutorial(); break;
|
||||||
|
case "COORDINATE": Test.Coordinate(); break;
|
||||||
|
case "LINEAR": Test.Linear(); break;
|
||||||
|
case "STANDLINEAR": Test.StandLinear(); break;
|
||||||
|
case "LINEARTRANSFORMATIONS": Test.LinearTransformations(); break;
|
||||||
|
case "SIMPLEQUAD": Test.SimpleQuad(); break;
|
||||||
|
case "STANDARDQUAD": Test.StandardQuad(); break;
|
||||||
|
case "GENERALQUAD": Test.GeneralQuad(); break;
|
||||||
|
case "ZEROQUAD": Test.ZeroQuad(); break;
|
||||||
|
case "QUADTRANSFORMATIONS": Test.QuadTransformations(); break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Test.DisplayErrors();
|
||||||
|
}
|
||||||
|
|
||||||
|
Test.All = function () {
|
||||||
|
Test.Menu();
|
||||||
|
Test.Tutorial();
|
||||||
|
Test.Coordinate();
|
||||||
|
Test.Linear();
|
||||||
|
Test.StandLinear()
|
||||||
|
Test.LinearTransformations();
|
||||||
|
Test.SimpleQuad();
|
||||||
|
Test.StandardQuad();
|
||||||
|
Test.GeneralQuad();
|
||||||
|
Test.ZeroQuad();
|
||||||
|
Test.QuadTransformations();
|
||||||
|
Test.DisplayErrors();
|
||||||
|
}
|
||||||
|
|
||||||
|
Test.DisplayErrors = function () {
|
||||||
|
if (Test.Errors.length > 0) {
|
||||||
|
for (i = 0; i < Test.Errors.length; i++) {
|
||||||
|
console.error(Test.Errors[i]);
|
||||||
|
}
|
||||||
|
console.warn("Of all tests, " + Test.Errors.length + " have failed.");
|
||||||
|
}
|
||||||
|
if (Test.Errors.length == 0) {
|
||||||
|
console.log("All tests passed");
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
Ubuntu-L.ttf
Normal file
BIN
Ubuntu-L.ttf
Normal file
Binary file not shown.
BIN
Ubuntu-M.ttf
Normal file
BIN
Ubuntu-M.ttf
Normal file
Binary file not shown.
BIN
UbuntuMono-R.ttf
Normal file
BIN
UbuntuMono-R.ttf
Normal file
Binary file not shown.
BIN
balloon.png
Normal file
BIN
balloon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
99
index.html
Normal file
99
index.html
Normal file
|
|
@ -0,0 +1,99 @@
|
||||||
|
<!-- index.html- creates visual framework. Calls upon necessary tags and files needed for this to work. Creates canvas. Up until #End it creates containers for each type of input. After #End is where the win/lose text goes. -->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<img id="balloon" src="balloon.png" hidden="true"/>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Graph Game</title>
|
||||||
|
<link href="StyleSheet.css" rel="stylesheet" />
|
||||||
|
<script src="jquery.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="Menu">
|
||||||
|
<h1>Graph Game</h1>
|
||||||
|
<ul id="topics">
|
||||||
|
<!--These items CANNOT have the same id as the divs below, which contain the input box and everything important!!!!!!-->
|
||||||
|
<li id="TutorialTopic" class="topic">Tutorial</li>
|
||||||
|
<li id="CoordinateTopic" class="topic">Coordinate</li>
|
||||||
|
<li id="LinearTopic" class="topic">Linear Equations</li>
|
||||||
|
<li id="StandLinearTopic" class="topic">Linear Standard Form</li>
|
||||||
|
<li id="LinearTransformationsTopic" class="topic">Linear Transformations</li>
|
||||||
|
<li id="SimpleQuadTopic" class="topic">Introduction to Quadratics</li>
|
||||||
|
<li id="StandardQuadTopic" class="topic">Standard Quadratics Form</li>
|
||||||
|
<li id = "GeneralQuadTopic" class="topic">General Quadratic Form</li>
|
||||||
|
<li id="ZeroQuadTopic" class="topic">Zeros (Quadratics)</li>
|
||||||
|
<li id="QuadTransformationsTopic" class= "topic"> Quadratic Transformations</li>
|
||||||
|
</ul>
|
||||||
|
<label>
|
||||||
|
<select id="nchoice">
|
||||||
|
<option value = "3">3 times</option>
|
||||||
|
<option value = "5">5 times</option>
|
||||||
|
<option value = "10">10 times</option>
|
||||||
|
<option value = "time">Timed</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<input type="submit" value="Play!" id="Play"/>
|
||||||
|
<p class = "notice">If you choose transformation levels it will be automatically set to 4 times.</p>
|
||||||
|
</div>
|
||||||
|
<canvas id="myCanvas" width="578" height="300"></canvas>
|
||||||
|
<p id="NotSuported">Your Browser is not compatible with the Canvas tag. Please use Chrome, Firefox, or IE 9 or above.</p>
|
||||||
|
<div id="Coordinate" class="input" onMouseDown="Game.Responsive.mouseDown(event)" onMouseUp="Game.Responsive.mouseUp()">(
|
||||||
|
<input type="text" id="X0" />,
|
||||||
|
<input type="text" id="Y0" />)
|
||||||
|
<input type="submit" value="Submit!" class="Submit" />
|
||||||
|
</div>
|
||||||
|
<div id="Tutorial" class="input" onMouseDown="Game.Responsive.mouseDown(event)" onMouseUp="Game.Responsive.mouseUp()">Y =
|
||||||
|
<input type="text" id="m1" class="text" />X +
|
||||||
|
<input type="text" id="b1" class="text" />
|
||||||
|
<input type="submit" value="Submit!" class="Submit" />
|
||||||
|
</div>
|
||||||
|
<div id="Linear" class="input" onMouseDown="Game.Responsive.mouseDown(event)" onMouseUp="Game.Responsive.mouseUp()">Y =
|
||||||
|
<input type="text" id="rise" value="rise" class="text" />/
|
||||||
|
<input type="text" id="run" value="run" class="text" />X<span id="Horizontal"></span> +
|
||||||
|
<input type="text" id="b2" class="text" />
|
||||||
|
<input type="submit" value="Submit!" class="Submit" />
|
||||||
|
</div>
|
||||||
|
<div id="StandLinear" class="input" onMouseDown="Game.Responsive.mouseDown(event)" onMouseUp="Game.Responsive.mouseUp()">
|
||||||
|
<input type="text" id="a0" value="a" class="text" /> X +
|
||||||
|
<input type="text" id="b0" value="b" class="text" /> Y =
|
||||||
|
<input type="text" id="c0" value="c" class="text" />
|
||||||
|
<input type="submit" value="Submit!" class="Submit" />
|
||||||
|
</div>
|
||||||
|
<div id="SimpleQuad" class="input" onMouseDown="Game.Responsive.mouseDown(event)" onMouseUp="Game.Responsive.mouseUp()">Y = ( X -
|
||||||
|
<input type="text" id="h1" value="h" class="text" />)^2 +
|
||||||
|
<input type="text" id="k1" value="k" class="text" />
|
||||||
|
<input type="submit" value="Submit!" class="Submit" />
|
||||||
|
</div>
|
||||||
|
<div id="StandardQuad" class="input" onMouseDown="Game.Responsive.mouseDown(event)" onMouseUp="Game.Responsive.mouseUp()">Y =
|
||||||
|
<input type="text" id="a" value="a" class="text" />( X -
|
||||||
|
<input type="text" id="h2" value="h" class="text" />)^2 +
|
||||||
|
<input type="text" id="k2" value="k" class="text" />
|
||||||
|
<input type="submit" value="Submit!" class="Submit" />
|
||||||
|
</div>
|
||||||
|
<div id="GenaralQuad" class="input" onMouseDown="Game.Responsive.mouseDown(event)" onMouseUp="Game.Responsive.mouseUp()">Y =
|
||||||
|
<input type="text" id="a2" value="a" class="text" />X^2 +
|
||||||
|
<input type="text" id="b3" value="b" class="text" />X +
|
||||||
|
<input type="text" id="c" value="c" class="text" />
|
||||||
|
<input type="submit" value="Submit!" class="Submit" />
|
||||||
|
</div>
|
||||||
|
<div id="ZeroQuad" class="input" onMouseDown="Game.Responsive.mouseDown(event)" onMouseUp="Game.Responsive.mouseUp()">Y = (X -
|
||||||
|
<input type="text" id="X1" />) (X -
|
||||||
|
<input type="text" id="X2" />)
|
||||||
|
<input type="submit" value="Submit!" class="Submit" />
|
||||||
|
</div>
|
||||||
|
<div id="exit">Exit</div>
|
||||||
|
<div id = "timer" onMouseDown="mouseDown(event)" onMouseUp="mouseUp()">
|
||||||
|
<p id = "minOut" class = "time"></p>:<p id = "secOut" class = "time"></p>
|
||||||
|
</div>
|
||||||
|
<div id="End"></div>
|
||||||
|
<script src="GameData.js"></script>
|
||||||
|
<script src="Graph.js"></script>
|
||||||
|
<script src="Responsive.js"></script>
|
||||||
|
<script src="PlayLevel.js"></script>
|
||||||
|
<script src="Input.js"></script>
|
||||||
|
<script src="Test.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
4
jquery.js
vendored
Normal file
4
jquery.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in a new issue