rand(4)
[
$._("a positive"),
$._("a negative"),
$._("a zero"),
$._("an undefined")
][SLOPE]
{}
Graph a line that has SLOPE_NAME slope:
graphInit({
range: 11,
scale: 20,
axisArrows: "<->",
tickStep: 1,
labelStep: 1,
gridOpacity: 0.05,
axisOpacity: 0.2,
tickOpacity: 0.4,
labelOpacity: 0.5
});
label([0, 11], "y", "above");
label([11, 0], "x", "right");
addMouseLayer();
POINTS.pointA = addMovablePoint({
coord: [-5, 5],
snapX: 0.5,
snapY: 0.5,
});
POINTS.pointB = addMovablePoint({
coord: [5, 5],
snapX: 0.5,
snapY: 0.5,
});
graph.line1 = addMovableLineSegment({
pointA: POINTS.pointA,
pointZ: POINTS.pointB,
fixed: true,
extendLine: true,
normalStyle: {
stroke: ORANGE,
"stroke-width": 2
}
});
// A and B can't be in the same place
POINTS.pointA.onMove = function(x, y) {
return (x !== POINTS.pointB.coord[0] ||
y !== POINTS.pointB.coord[1]);
}
POINTS.pointB.onMove = function(x, y) {
return (x !== POINTS.pointA.coord[0] ||
y !== POINTS.pointA.coord[1]);
}
POINTS.pointA.toFront();
POINTS.pointB.toFront();
[POINTS.pointA.coord, POINTS.pointB.coord]
if (SLOPE !== 2&&
guess[0][0] === -5 &&
guess[0][1] === 5 &&
guess[1][0] === 5 &&
guess[1][1] === 5) {
return "";
}
var slope = (guess[1][1] - guess[0][1]) /
(guess[1][0] - guess[0][0]);
if (SLOPE === 0) {
return slope > 0;
} else if (SLOPE === 1) {
return slope < 0;
} else if (SLOPE === 2) {
return abs(slope) < 0.001;
} else if (SLOPE === 3) {
return guess[1][0] === guess[0][0];
}
POINTS.pointA.setCoord(guess[0]);
POINTS.pointB.setCoord(guess[1]);
graph.line1.transform(true);
The slope of a line is the ratio of the change in
y over the change in x. Also
known as rise over run.
For a positive slope, if the change in y from
one point to another is positive then the change in
x should also be positive.
For a negative slope, if the change in y from
one point to another is positive then the change in
x should be negative.
For a zero slope, the change in y should be
zero from any point to another point.
For an undefined slope, the change in x should
be zero from any point to another point.
A line with SLOPE_NAME slope looks like:
graphInit({
range: 6,
scale: 20,
axisArrows: "<->",
tickStep: 1,
labelStep: 10,
gridOpacity: 0.05,
axisOpacity: 0.2,
tickOpacity: 0.4,
labelOpacity: 0.5
});
style({ stroke: ORANGE }, function() {
var intercept = randRange(-3, 3);
if (SLOPE === 0) {
plot(function(x) {
return x + intercept;
}, [-6, 6]);
} else if (SLOPE === 1) {
var yInt = randRange(-3, 3);
plot(function(x) {
return -x + intercept;
}, [-6, 6]);
} else if (SLOPE === 2) {
var y = randRangeNonZero(-3, 3);
path([[-6, intercept], [6, intercept]]);
} else if (SLOPE === 3) {
var x = randRangeNonZero(-3, 3);
path([[intercept, -6], [intercept, 6]]);
}
});
randRangeNonZero(-5, 5)
randRange(1, 5)
randRange(-5, 5)
[SLOPE_N < 0, SLOPE_N < 0 ? $._("negative") : $._("positive")]
randFromArray([[0, "greater"], [1, "less"]])
(function() {
if (GOAL_NEGATIVE) {
if (CHANGE === 0) {
return (SLOPE_N / SLOPE_D) / 2;
} else {
return (SLOPE_N / SLOPE_D) * 2;
}
} else {
if (CHANGE === 1) {
return (SLOPE_N / SLOPE_D) / 2;
} else {
return (SLOPE_N / SLOPE_D) * 2;
}
}
})()
Graph a line that has a slope that is
GOAL and
CHANGE_NAME than the slope of the blue line.
plot(function(x) {
return (SLOPE_N / SLOPE_D) * x + Y_INT;
}, [-11, 11], {
stroke: BLUE
}).toBack();
[POINTS.pointA.coord, POINTS.pointB.coord]
if (guess[0][0] === -5 &&
guess[0][1] === 5 &&
guess[1][0] === 5 &&
guess[1][1] === 5) {
return "";
}
var slope = (guess[1][1] - guess[0][1]) /
(guess[1][0] - guess[0][0]);
if (!GOAL_NEGATIVE &&
CHANGE === 1) {
return (slope > 0) &&
(slope < SLOPE_N / SLOPE_D);
} else if (!GOAL_NEGATIVE &&
CHANGE === 0) {
return (slope > 0) &&
(slope > SLOPE_N / SLOPE_D);
} else if (GOAL_NEGATIVE &&
CHANGE === 1) {
return (slope < 0) &&
(slope < SLOPE_N / SLOPE_D);
} else if (GOAL_NEGATIVE &&
CHANGE === 0) {
return (slope < 0) &&
(slope > SLOPE_N / SLOPE_D);
}
POINTS.pointA.setCoord(guess[0]);
POINTS.pointB.setCoord(guess[1]);
graph.line1.transform(true);
The slope of the original line is negative.
The slope of the original line is positive.
If the slope of the new line is negative and
greater than the slope of the original line with
negative slope then the new line should be less
steep.
If the slope of the new line is negative and less
than the slope of the original line with negative
slope, then the new line should be steeper.
If the slope of the new line is positive and greater
than the slope of the original line with positive
slope, then the new line should be steeper.
If the slope of the new line is positive and less
than the slope of the original line with positive
slope, then the new line should be less steep.
Since the original slope is
fractionReduce(SLOPE_N, SLOPE_D),
the slope of the new line could be
decimalFraction(NEW_SLOPE, true, true)
and could look like this:
graphInit({
range: 11,
scale: 10,
axisArrows: "<->",
tickStep: 1,
labelStep: 20,
gridOpacity: 0.05,
axisOpacity: 0.2,
tickOpacity: 0.4,
labelOpacity: 0.5
});
style({ stroke: BLUE }, function() {
plot(function(x) {
return x * (SLOPE_N / SLOPE_D) + Y_INT;
}, [-11, 11]);
});
style({ stroke: ORANGE }, function() {
plot(function(x) {
return x * NEW_SLOPE + 2;
}, [-11, 11]);
});
randRangeUnique(-8, 8, 2)
randRangeUnique(-8, 8, 2)
Y2 - Y1
X2 - X1
RISE / RUN
Y1 - X1 * M
abs(RUN) / getGCD(abs(RISE), abs(RUN))
{}
Adjust the slope and y-intercept until it connects the two
points. How do the slope and y-intercept values affect the line?
graphInit({
range: 11,
scale: 20,
axisArrows: "<->",
tickStep: 1,
labelStep: 1,
gridOpacity: 0.05,
axisOpacity: 0.2,
tickOpacity: 0.4,
labelOpacity: 0.5
});
label([0, 11], "y", "above");
label([11, 0], "x", "right");
style({
stroke: BLUE,
fill: BLUE
}, function() {
circle([X1, Y1], 0.2);
circle([X2, Y2], 0.2);
});
GRAPH.MN = 1;
GRAPH.MD = 1;
GRAPH.BN = 1;
GRAPH.BD = 1;
var plot = line([-11, -11 * GRAPH.MN / GRAPH.MD +
GRAPH.BN / GRAPH.BD], [11, 11 * GRAPH.MN / GRAPH.MD +
GRAPH.BN / GRAPH.BD], { stroke: BLUE });
GRAPH.redraw = function() {
plot.remove();
plot = line([-11, -11 * GRAPH.MN / GRAPH.MD +
GRAPH.BN / GRAPH.BD], [11, 11 * GRAPH.MN / GRAPH.MD +
GRAPH.BN / GRAPH.BD], { stroke: BLUE });
GRAPH.updateLabels();
};
GRAPH.changeSlope = function(dir) {
var prevDenom = GRAPH.MD;
GRAPH.MD = getLCM(prevDenom, INCR);
GRAPH.MN = (GRAPH.MD / prevDenom * GRAPH.MN) +
(dir * GRAPH.MD / INCR);
GRAPH.redraw();
};
GRAPH.changeIntercept = function(dir) {
var prevDenom = GRAPH.BD;
GRAPH.BD = getLCM(prevDenom, INCR)
GRAPH.BN = (GRAPH.BD / prevDenom * GRAPH.BN) +
(dir * GRAPH.BD / INCR);
GRAPH.redraw();
};
init({
range: [[0, 4], [0.5, 2.5]]
});
label([0, 1.5], "y = ", "right");
var slopeLabel = label([1.7, 1.5], "1", "left");
label([1.45, 1.5], "x", "right");
signLabel = label([1.8, 1.5], "+", "right");
var interceptLabel = label([2.2, 1.5], "1", "right");
addMouseLayer();
addArrowWidget({
coord: [1.4, 2.1],
direction: "up",
onClick: function() {
GRAPH.changeSlope(1);
}
});
addArrowWidget({
coord: [1.4, 0.8],
direction: "down",
onClick: function() {
GRAPH.changeSlope(-1);
}
});
addArrowWidget({
coord: [2.5, 2.1],
direction: "up",
onClick: function() {
GRAPH.changeIntercept(1);
}
});
addArrowWidget({
coord: [2.5, 0.8],
direction: "down",
onClick: function() {
GRAPH.changeIntercept(-1);
}
});
GRAPH.updateLabels = function() {
slopeLabel.remove();
signLabel.remove();
interceptLabel.remove();
slopeLabel = label([1.7, 1.5],
fractionReduce(GRAPH.MN, GRAPH.MD), "left");
signLabel = label([1.8, 1.5],
(GRAPH.BN < 0 ? "-" : "+"), "right");
interceptLabel = label([2.2, 1.5],
fractionReduce(abs(GRAPH.BN), GRAPH.BD),
"right");
};
[GRAPH.MN / GRAPH.MD, GRAPH.BN / GRAPH.BD]
if ((abs(guess[0] - M) < 0.001) &&
(abs(guess[1] - B) < 0.001)) {
return true;
}
if (guess[0] === 1 && guess[1] === 1) {
return "";
}
return false;
guess = guess.length ? guess : [1, 1, 1, 1];
GRAPH.MN = guess[0];
GRAPH.MD = 1;
GRAPH.BN = guess[1];
GRAPH.BD = 1;
GRAPH.updateLabels();
GRAPH.redraw();