# jc4p/khan-exercises forked from Khan/khan-exercises

plotting points in full coordinate plane

1 parent e5ee26e commit dd99850f605c39a0ddf3d95aa7548464594885fb Christi committed with beneater Mar 5, 2012
Showing with 162 additions and 99 deletions.
1. +162 −0 exercises/plotting_points.html
 @@ -0,0 +1,162 @@ + + + + + Plotting points + + + + + +
Plotting points on a coordinate plane and tell quadrant. + Common Core State Standard: 6.NS.6c + Related Videos: Quadrants of Coordinate Plane, The Coordinate Plane + Prerequisite: Number line, (coming soon) Plotting points 0.5 + Required/helpful For: Graphing linear equations, (coming soon) Graphing using x and y intercepts +
+
+
+ [randRangeNonZero( -10, 10), randRangeNonZero(-10, 10)] + correctQuadrant(POINT) +
+
+
+

Plot (POINT) and tell which quadrant the point is in.

+ +
+
+ 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(); + graph.movablePoint = addMovablePoint({coord: [0,0], snapY: 1, snapX: 1 }); + + graph.movablePoint.onMove = function( x, y ) { + if (x < -10 || 10 < x || y < -10 || 10 < y) { + return false; // don't allow the point to move past the bounds + } + }; +
+ +
+
+ +
+
+ Graph the point and select the quadrant that contains the point. +
+
• QI
• +
• QII
• +
• QIII
• +
• QIV
• +
+
+ [ graph.movablePoint.coord, + jQuery( "#solutionarea" ).find( "input:checked" ).val()] +
+
+ return ( guess[0][0] === POINT[0] && guess[0][1] === POINT[1] && guess[1]=== QUADRANT ); +
+
+ jQuery( "#solutionarea" ).find( "input:checked" ).prop( 'checked', false ); + if ( guess[1] != null ) { + jQuery( "#solutionarea" ).find( "input[value=" + guess[1] + "]" ).prop( 'checked', true ); + }; + graph.movablePoint.setCoord( guess[0] ); +
+
+ +
a point graphed and quadrant selected
+
+ +
+

Coordinates are listed as (\color{blue}{x},\color{green}{y}).

+ +

So, for ( \color{blue}{POINT[0]}, \color{green}{POINT[1]} ) our \color{blue}{x}-coordinate is \color{blue}{POINT[0]} and our \color{green}{y}-coordinate is \color{green}{POINT[1]}. + +

The \color{blue}{x}-coordinate tells how far we move left or right from the origin and the \color{green}{y}-coordinate tells us how far we move up or down from the origin.

+ +
+

Since our \color{blue}{x}-coordinate is positive negative, we move \color{blue}{abs(POINT[0])} to the right left.

+
+ style({ + stroke: "blue", + strokeWidth: 2, + arrows: "->" + }, function() { + line( [ 0, 0 ], [ POINT[0], 0 ]).toBack(); + }); + //label( [ 0, YINT + SLOPE_FRAC[0] / 2 ], abs( SLOPE_FRAC[0] ) + " \\text{ " + ( SLOPE_FRAC[0] < 0 ? "down" : "up" ) + "} \\quad", "left", { color: "purple" } ); + //label( [ 0, YINT + SLOPE_FRAC[0] ], SLOPE_FRAC[1] + " \\text{ right}", ( SLOPE_FRAC[0] < 0 ? "below right" : "above right" ), { color: "purple" } ); + //graph.yint.toBack(); +
+
+ +
+

Since our \color{green}{y}-coordinate is positive negative, we move \color{green}{abs(POINT[1])} up down.

+
+ style({ + stroke: "green", + strokeWidth: 2, + arrows: "->" + }, function() { + line( [ POINT[0], 0 ], POINT ).toBack(); + }); + //label( [ 0, YINT + SLOPE_FRAC[0] / 2 ], abs( SLOPE_FRAC[0] ) + " \\text{ " + ( SLOPE_FRAC[0] < 0 ? "down" : "up" ) + "} \\quad", "left", { color: "purple" } ); + //label( [ 0, YINT + SLOPE_FRAC[0] ], SLOPE_FRAC[1] + " \\text{ right}", ( SLOPE_FRAC[0] < 0 ? "below right" : "above right" ), { color: "purple" } ); + //graph.yint.toBack(); + circle( POINT, 0.15, { stroke: "purple", fill: "purple"} ).toBack(); +
+
+ +

Now that we have our point plotted, we can figure out the quadrant.

+
+

By convention, quadrants are named with a capital Q and a roman numeral, starting in the upper left quadrant as QI and rotating counter-clockwise.

+
+ label( [ 5, 5] , " \\text{ QI }", "center", { color: "purple" } ); + label( [ -5, 5] , " \\text{ QII }", "center", { color: "purple" } ); + label( [ -5, -5] , " \\text{ QIII }", "center", { color: "purple" } ); + label( [ 5, -5] , " \\text{ QIV }", "center", { color: "purple" } ); +
+
+ +

Since our point is in the upperlower rightleft portion of the graph, the quadrant is QUADRANT. +

+ Move the point to ( \color{blue}{POINT[0]}, \color{green}{POINT[1]} ) at the marked point above and select QUADRANT. + +
+
+
+
+
+ +
 @@ -1,99 +0,0 @@ - - - - - Graphing points - - - - - - -
Plotting points on a coordinate plane and tell quadrant. - Common Core State Standard: 6NS6c - Related Videos: Quadrants of Coordinate Plane, The Coordinate Plane -
-
-
- - [randRangeNonZero( -9, 9), randRangeNonZero(-9,9)] - correctQuadrant(POINT) -
- -
-
-
-

Plot (POINT) and tell which quadrant the point is in.

-
- -
-
- graphInit({ - range: 10, - scale: 20, - axisArrows: "<->", - tickStep: 1, - labelStep: 1 - }) - - label( [ 0, 10 ], "y", "above" ); - label( [ 10, 0 ], "x", "right" ); - - addMouseLayer(); - graph.movablePoint = addMovablePoint({coord: [0,0], snapY: 1, snapX: 1 }); - - graph.movablePoint.onMove = function( x, y ) { - if (x < -9 || 9 < x || y < -9 || 9 < y) { - return false; // don't allow the point to move past the bounds - } - }; -
- -
-
-

-
-
-
- [ graph.movablePoint.coord ] -
-
- return ( guess[0][0] === POINT[0] && guess[0][1] === POINT[1] ); -
-
- graph.movablePoint.setCoord( guess[0] ); -
-
-