Plotting points in QI.
Common Core State Standard: 5.G.1
Related Videos: Quadrants of Coordinate Plane, The Coordinate Plane
Prerequisite: Number line (sort of, or coming soon Number line 0.5 which handles only positive points)
Required/helpful For: Plotting points, Graphing linear equations, (coming soon) Graphing using x and y intercepts

Plot `(`

`X`, `Y`)

graphInit({
range: [ [-1, 11], [-1, 11] ],
scale: 30,
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 ) {
return [ max( 0, min( x, 10 ) ), max( 0, min( y, 10 ) ) ];
};

Drag the orange dot to graph the point.

graph.movablePoint.coord

if ( guess[0] === 0 && guess[1] === 0 ) {
return "";
}
return ( guess[0] === X && guess[1] === Y );

graph.movablePoint.setCoord( guess );

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

.

So, for `( \blue{`

our
`X`}, \green{`Y`} )`x`

-coordinate is

and our
`X``y`

-coordinate is

.`Y`

The `x`

-coordinate tells how far we move to the right from the origin and the
`y`

-coordinate tells us how far we move up from the origin.

Since our

`x`

-coordinate is equal to `0`

, we don't need to move to the right of the origin.
Since our `x`

-coordinate is equal to

,
we move `X`

to the right of the origin.
`X`

style({
stroke: BLUE,
strokeWidth: 3,
arrows: "->"
}, function() {
line( [ 0, 0 ], [ X, 0 ]);
});
graph.movablePoint.toFront();

Since our

`y`

-coordinate is equal to `0`

, we don't need to move up from the origin.
Since our `y`

-coordinate is equal to

,
we move up `Y`

from the origin.
`Y`

style({
stroke: GREEN,
strokeWidth: 3,
arrows: "->"
}, function() {
line( [ X, 0 ], [ X, Y ] );
});
graph.movablePoint.toFront();

Move the point to `( \blue{`

at the marked point above.
`X`}, \green{`Y`} )

style({
stroke: PINK,
strokeWidth: 3
}, function() {
line( [ X - 0.25, Y - 0.25 ], [ X + 0.25, Y + 0.25 ] );
line( [ X + 0.25, Y - 0.25 ], [ X - 0.25, Y + 0.25 ] );
});
graph.movablePoint.toFront();