document.getElementById('hintNumFormId').value = '0';
//sets up variables
let question1Answer = 0;
let question2Answer = 0;
let pImg = document.getElementById("personImage");
let hImg = document.getElementById("houseImage");
let hintLines = 0;
//sets up constants
const ctx = document.getElementById('c').getContext('2d'),
ca = document.getElementById('ca'),
coords = document.getElementById('coords'),
size = document.getElementById('size'),
toggleCartesian = (e) => { ca.cartesian = !ca.cartesian };
//draws stuff on the grid
function draw(ctx, view) {
let w = ctx.canvas.width, h = ctx.canvas.height,
sz = 20*view.scl, xoff = view.x%sz, yoff = view.y%sz;
if (ca.cartesian)
ctx.setTransform(1,0,0,-1,0.5,h-0.5);
else
ctx.setTransform(1,0,0,1,0.5,0.5);
ctx.clearRect(0,0,w,h);
// draw grid ...
if (view.scl > 0.2) {
ctx.strokeStyle = "#ccc";
ctx.lineWidth = 1;
ctx.beginPath();
for (let x=xoff,nx=w+1; x<nx; x+=sz) { ctx.moveTo(x,0); ctx.lineTo(x,h); }
for (let y=yoff,ny=h+1; y<ny; y+=sz) { ctx.moveTo(0,y); ctx.lineTo(w,y); }
ctx.stroke();
}
//draw origin lines
ctx.lineWidth = 2;
ctx.strokeStyle = "#555"; // origin lines ...
ctx.beginPath();
ctx.moveTo(view.x,0); ctx.lineTo(view.x,h);
ctx.moveTo(0,view.y); ctx.lineTo(w,view.y);
ctx.stroke();
ctx.closePath();
// draw rectangles ...
ctx.lineWidth = 1;
ctx.save();
ctx.setTransform(view.scl,0,0,-view.scl,view.x+0.5,h-view.y-0.5);
ctx.strokeStyle = "#555";
ctx.fillStyle = "#555";
noHintLinesF()
ctx.beginPath();
ctx.arc(60, 20, 3, 0, 2 * Math.PI, false);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.arc(-40, -160, 3, 0, 2 * Math.PI, false);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.arc(200, 160, 3, 0, 2 * Math.PI, false);
ctx.closePath();
ctx.fill();
ctx.lineWidth = 1;
ctx.stroke();
ctx.save();
ctx.rotate(180*Math.PI/180);
ctx.drawImage(personImage, -70, -85, 40,58.2 );
ctx.drawImage(houseImage, -245, -205, 40,40);
ctx.drawImage(houseImage, 40, 115, 40,40);
ctx.restore();
//draws the answers on the grid
if (question1Answer == 1) {
drawNumbers1();
}
if (question2Answer == 1) {
drawNumbers2();
}
//Calls the dashed lines function
if (document.getElementById("hintNumFormId").value == 2) {
hintLinesF();
}
//Calls the functtion that draws the lengths of the dashed lines
if (document.getElementById("hintNumFormId").value == 3) {
hintLinesF();
hintNumberzF();
}
//Handles if the hints show in the hints tab
if (document.getElementById("hintNumFormId").value == 1) {
document.getElementById("noHintMessage").style = "display: none;"
document.getElementById("hintTabN1").style = "display: block;"
}
if (document.getElementById("hintNumFormId").value == 2) {
document.getElementById("hintTabN2").style = "display: block;"
}
if (document.getElementById("hintNumFormId").value == 3) {
document.getElementById("hintTabN3").style = "display: block;"
}
}
//Draws the dashed lines
function hintLinesF() {
ctx.save();
ctx.beginPath();
ctx.setLineDash([5, 5]);
ctx.moveTo(60,20);
ctx.lineTo(200,20);
ctx.lineTo(200,160);
ctx.lineTo(60,20);
ctx.stroke();
ctx.beginPath();
ctx.setLineDash([5, 5]);
ctx.moveTo(60,20);
ctx.lineTo(-40,20);
ctx.lineTo(-40,-160);
ctx.lineTo(60,20);
ctx.stroke();
ctx.restore();
}
//Draws the lengths of the dashed lines
function hintNumberzF() {
ctx.save();
ctx.scale(1, -1);
ctx.font = "20px Arial";
ctx.fillText('7',120,-3);
ctx.fillText('7',205,-100);
ctx.fillText('5',10,-30);
ctx.fillText('9',-60,40);
ctx.restore();
}
//Draws the regular lines
function noHintLinesF() {
ctx.beginPath();
ctx.moveTo(60,20);
ctx.lineTo(200,160);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(60,20);
ctx.lineTo(-40,-160);
ctx.stroke();
}
function render() {
draw(ctx, ca.view);
requestAnimationFrame(render);
}
window.onload = () => {
ca.observe('pointer', e => {
let {x,y} = ca.pntToUsr(e),
prec = Math.max(Math.log(ca.view.scl)/Math.log(2), 0);
coords.innerHTML = `Cursor Location: ${Math.round((x/20)).toFixed(prec)} / ${Math.round((y/20)).toFixed(prec)}`;
});
ca.observe('resize', e => {
size.innerHTML = `size: ${e.width} / ${e.height}`;
});
ca.resize({width,height}=ca); // cause single initial notification ..
render();
}
//Checks if the 1st answer is correct
function checkAnswer() {
let problemAnswer = document.getElementById('answer').value;
document.cookie = 'problemAnswerC='+ document.getElementById('answer').value;
let trimAnswer = problemAnswer.replace(/ /g,'');
if (trimAnswer == '9.9' || trimAnswer == '9.90' || trimAnswer == '9.89') {
question1Answer = 1;
document.getElementById("answerresults").innerHTML = "<span class='alert alert-success'>Yay! Correct</span>";
} else {
document.getElementById("answerresults").innerHTML = "<span class='alert alert-danger'>Oops! Try Again!</div>";
}
};
//checks if the 2nd answer is correct
function checkAnswer2() {
let problemAnswer1 = document.getElementById('answer1').value;
document.cookie = 'znumber2Answer='+ document.getElementById('answer1').value;
let trimAnswer1 = problemAnswer1.replace(/ /g,'');
if (trimAnswer1 == '10.29' || trimAnswer1 == '10.3' || trimAnswer1 == '10.30') {
question2Answer = 1;
document.getElementById("answerresults1").innerHTML = "<span class='alert alert-success'>Yay! Correct</span>";
} else {
document.getElementById("answerresults1").innerHTML = "<span class='alert alert-danger'>Oops! Try Again!</div>";
}
};
//Draws the answers on the grid
function drawNumbers1() {
ctx.save();
ctx.scale(1, -1);
let problemAnswerCLet = readCookie('problemAnswerC');
ctx.font = "20px Arial";
ctx.fillText(problemAnswerCLet,100,-110);
ctx.restore();
}
function drawNumbers2() {
ctx.save();
ctx.scale(1, -1);
let problemAnswertCLet = readCookie('znumber2Answer');
ctx.font = "20px Arial";
ctx.fillText(problemAnswertCLet,25,65);
ctx.restore();
}
//Reads cookies, yum
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
//Displays hints when hint button is pressed
function hintFunc() {
let hintNum = document.getElementById("hintNumFormId").value
if (hintNum == 0) {
alert('Try using the distance formula to find the distance between the pizza man and one of the houses')
document.getElementById("hintNumFormId").value = "1";
}
if (hintNum == 1) {
alert('Rememer, on a triangle, If you sqare both legs and add them together, you get the squared hypotenuse')
document.getElementById("hintNumFormId").value = "2";
}
if (hintNum == 2) {
alert('Square both legs of the triangle, add them together, and take the square root of the sum. This should be the distance the pizza man is from the house')
document.getElementById("hintNumFormId").value = "3";
}
if (hintNum == 3) {
alert('Sorry, no more hints, use the hints tab to see previous hints')
}
if (hintNum > 3) {
alert('Please report this bug to Nathan, as this message should not appear, Unless you edited the code, you hacker')
}
}
//A lot less nothing this time!!!
!
