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

Subversion checkout URL

You can clone with HTTPS or Subversion.

plotting points in full coordinate plane

commit dd99850f605c39a0ddf3d95aa7548464594885fb 1 parent e5ee26e
authored committed

Showing 2 changed files with 162 additions and 99 deletions.

1. exercises/plotting_points.html
162  exercises/plotting_points.html
 ... ... @@ -0,0 +1,162 @@ 1 + 2 + 3 +  4 +  5 + Plotting points 6 +  7 +  22 +  23 +  24 +  25 +
Plotting points on a coordinate plane and tell quadrant.  26 + Common Core State Standard: 6.NS.6c 27 + Related Videos: Quadrants of Coordinate Plane, The Coordinate Plane 28 + Prerequisite: Number line, (coming soon) Plotting points 0.5 29 + Required/helpful For: Graphing linear equations, (coming soon) Graphing using x and y intercepts 30 +
31 +
32 +
33 + [randRangeNonZero( -10, 10), randRangeNonZero(-10, 10)] 34 + correctQuadrant(POINT) 35 +
36 +
37 +
38 +

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

39 +  40 +
41 +
42 + graphInit({ 43 + range: 11, 44 + scale: 20, 45 + axisArrows: "<->", 46 + tickStep: 1, 47 + labelStep: 1, 48 + gridOpacity: 0.05, 49 + axisOpacity: 0.2, 50 + tickOpacity: 0.4, 51 + labelOpacity: 0.5 52 + }); 53 +  54 + label( [ 0, 11 ], "y", "above" ); 55 + label( [ 11, 0 ], "x", "right" ); 56 +  57 + addMouseLayer(); 58 + graph.movablePoint = addMovablePoint({coord: [0,0], snapY: 1, snapX: 1 }); 59 +  60 + graph.movablePoint.onMove = function( x, y ) { 61 + if (x < -10 || 10 < x || y < -10 || 10 < y) { 62 + return false; // don't allow the point to move past the bounds 63 + } 64 + }; 65 +
66 + 67 +
68 +
69 + 70 +
71 +
72 + Graph the point and select the quadrant that contains the point. 73 +
74 +
• QI
•  75 +
• QII
•  76 +
• QIII
•  77 +
• QIV
•  78 +
79 + 80 + Your graph is also part of your answer. 81 +
82 +
83 + [ graph.movablePoint.coord, 84 + jQuery( "#solutionarea" ).find( "input:checked" ).val()] 85 +
86 +
87 + return ( guess[0][0] === POINT[0] && guess[0][1] === POINT[1] && guess[1]=== QUADRANT ); 88 +
89 +
90 + jQuery( "#solutionarea" ).find( "input:checked" ).prop( 'checked', false ); 91 + if ( guess[1] != null ) { 92 + jQuery( "#solutionarea" ).find( "input[value=" + guess[1] + "]" ).prop( 'checked', true ); 93 + }; 94 + graph.movablePoint.setCoord( guess[0] ); 95 +
96 +
97 +  98 +
a point graphed and quadrant selected
99 +
100 + 101 +
102 +

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

103 +  104 +

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]}.  105 +  106 +

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.

107 +  108 +
109 +

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

110 +
111 + style({ 112 + stroke: "blue", 113 + strokeWidth: 2, 114 + arrows: "->" 115 + }, function() { 116 + line( [ 0, 0 ], [ POINT[0], 0 ]).toBack(); 117 + }); 118 + //label( [ 0, YINT + SLOPE_FRAC[0] / 2 ], abs( SLOPE_FRAC[0] ) + " \\text{ " + ( SLOPE_FRAC[0] < 0 ? "down" : "up" ) + "} \\quad", "left", { color: "purple" } ); 119 + //label( [ 0, YINT + SLOPE_FRAC[0] ], SLOPE_FRAC[1] + " \\text{ right}", ( SLOPE_FRAC[0] < 0 ? "below right" : "above right" ), { color: "purple" } ); 120 + //graph.yint.toBack(); 121 +
122 +
123 +  124 +
125 +

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

126 +
127 + style({ 128 + stroke: "green", 129 + strokeWidth: 2, 130 + arrows: "->" 131 + }, function() { 132 + line( [ POINT[0], 0 ], POINT ).toBack(); 133 + }); 134 + //label( [ 0, YINT + SLOPE_FRAC[0] / 2 ], abs( SLOPE_FRAC[0] ) + " \\text{ " + ( SLOPE_FRAC[0] < 0 ? "down" : "up" ) + "} \\quad", "left", { color: "purple" } ); 135 + //label( [ 0, YINT + SLOPE_FRAC[0] ], SLOPE_FRAC[1] + " \\text{ right}", ( SLOPE_FRAC[0] < 0 ? "below right" : "above right" ), { color: "purple" } ); 136 + //graph.yint.toBack(); 137 + circle( POINT, 0.15, { stroke: "purple", fill: "purple"} ).toBack(); 138 +
139 +
140 +  141 +

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

142 +
143 +

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.

144 +
145 + label( [ 5, 5] , " \\text{ QI }", "center", { color: "purple" } ); 146 + label( [ -5, 5] , " \\text{ QII }", "center", { color: "purple" } ); 147 + label( [ -5, -5] , " \\text{ QIII }", "center", { color: "purple" } ); 148 + label( [ 5, -5] , " \\text{ QIV }", "center", { color: "purple" } ); 149 +
150 +
151 +  152 +

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

154 + Move the point to ( \color{blue}{POINT[0]}, \color{green}{POINT[1]} ) at the marked point above and select QUADRANT. 155 + 156 +
157 +
158 +
159 +
160 +
161 +  162 +
 ... ... @@ -1,99 +0,0 @@ 1 - 2 - 3 -  4 -  5 - Graphing points 6 -  7 -  22 -  27 -  28 -  29 -  30 -
Plotting points on a coordinate plane and tell quadrant.  31 - Common Core State Standard: 6NS6c 32 - Related Videos: Quadrants of Coordinate Plane, The Coordinate Plane 33 -
34 -
35 -
36 -  37 - [randRangeNonZero( -9, 9), randRangeNonZero(-9,9)] 38 - correctQuadrant(POINT) 39 -
40 - 41 -
42 -
43 -
44 -

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

45 -
46 - 47 -
48 -
49 - graphInit({ 50 - range: 10, 51 - scale: 20, 52 - axisArrows: "<->", 53 - tickStep: 1, 54 - labelStep: 1 55 - }) 56 -  57 - label( [ 0, 10 ], "y", "above" ); 58 - label( [ 10, 0 ], "x", "right" ); 59 -  60 - addMouseLayer(); 61 - graph.movablePoint = addMovablePoint({coord: [0,0], snapY: 1, snapX: 1 }); 62 -  63 - graph.movablePoint.onMove = function( x, y ) { 64 - if (x < -9 || 9 < x || y < -9 || 9 < y) { 65 - return false; // don't allow the point to move past the bounds 66 - } 67 - }; 68 -
69 - 70 -
71 -
72 -

73 -
74 -
75 - Your graph is also part of your answer. 76 -
77 -
78 - [ graph.movablePoint.coord ] 79 -
80 -
81 - return ( guess[0][0] === POINT[0] && guess[0][1] === POINT[1] ); 82 -
83 -
84 - graph.movablePoint.setCoord( guess[0] ); 85 -
86 -
87 -
88 -
89 - 90 -
91 -
92 - //var point = POINTS[FORGOTTEN]; 93 - //label( point, PAIR( point ) + "\\text{ was not graphed.}", "above right" ); 94 - //circle( point, 0.15, { stroke: "red", fill: "red"} ); 95 -
96 -
97 -
98 -  99 -