# Khan/khan-exercises

Fetching contributors…
Cannot retrieve contributors at this time
488 lines (463 sloc) 20.1 KB
 Line graph intuition
randFromArray([ "positive", "negative", "zero", "undefined" ]) {}

Graph a line that has an(SLOPE) 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();
Drag the two points to move the line into the correct position.
[POINTS.pointA.coord, POINTS.pointB.coord]
if (SLOPE !== "zero" && 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 === "positive") { return slope > 0; } else if (SLOPE === "negative") { return slope < 0; } else if (SLOPE === "zero") { return abs(slope) < 0.001; } else if (SLOPE === "undefined") { 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 an(SLOPE) 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 === "positive") { plot(function(x) { return x + intercept; }, [-6, 6]); } else if (SLOPE === "negative") { var yInt = randRange(-3, 3); plot(function(x) { return -x + intercept; }, [-6, 6]); } else if (SLOPE === "zero") { var y = randRangeNonZero(-3, 3); path([[-6, intercept], [6, intercept]]); } else if (SLOPE === "undefined") { var x = randRangeNonZero(-3, 3); path([[intercept, -6], [intercept, 6]]); } });
randRangeNonZero(-5, 5) randRange(1, 5) randRange(-5, 5) SLOPE_N < 0 ? "negative" : "positive" randFromArray(["greater", "less"]) (function() { if (SLOPE_N < 0) { if (CHANGE === "greater") { return (SLOPE_N / SLOPE_D) / 2; } else { return (SLOPE_N / SLOPE_D) * 2; } } else { if (CHANGE === "less") { 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 than the slope of the blue line.

plot(function(x) { return (SLOPE_N / SLOPE_D) * x + Y_INT; }, [-11, 11], { stroke: BLUE }).toBack();
Drag the two points to move the line into the correct position.
[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 === "positive" && CHANGE === "less") { return (slope > 0) && (slope < SLOPE_N / SLOPE_D); } else if (GOAL === "positive" && CHANGE === "greater") { return (slope > 0) && (slope > SLOPE_N / SLOPE_D); } else if (GOAL === "negative" && CHANGE === "less") { return (slope < 0) && (slope < SLOPE_N / SLOPE_D); } else if (GOAL === "negative" && CHANGE === "greater") { 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 positive. negative.

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(); };
Adjust this equation by clicking on the arrows:
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();
Something went wrong with that request. Please try again.