randRange( 0, 2 )
1 / randRange( 2, 5 )
randRange( 1, 3 )
[ deskItem( 0 ), fruit( 0 ), "X" ][ INDEX ]
[
$._("# of %(unit)s", {unit: plural_form( UNIT )}),
$._("# of %(unit)s", {unit: plural_form( UNIT )}),
"X"
][ INDEX ]
[
$._("Price of %(unit)s", {unit: plural_form( UNIT )}),
$._("Price of %(unit)s", {unit: plural_form( UNIT )}),
"Y"
][ INDEX ]
$._("black arrow")
$._("green arrow")
How does Y change as X increases?
How does the price of plural_form(UNIT) change as the number of plural_form(UNIT) increases?
init({
range: [[-3, 10], [-1, 10]],
scale: [30, 30]
});
grid( [10, 10], [10, 10], {
stroke: "#ccc"
});
style({
stroke: "#888",
strokeWidth: 2,
arrows: "->"
});
path( [ [-0.5, 0], [10, 0] ] );
path( [ [0, -0.5], [0, 10] ] );
style({
stroke: "#000000",
strokeWidth: 0.9,
arrows: "->"
});
label( [ 0, 9.2 ], "\\text{" + Y_AXIS_LABEL + "}", "right");
label( [ 8.5, 0], "\\text{" + X_AXIS_LABEL + "}", "below");
style({
stroke: "#6495ED",
strokeWidth: 2,
arrows: "->"
});
plot( function( x ) {
return ( M ) * x + B;
}, [0, 10]);
Increases
- Increases
- Decreases
- Stays the same
style({ fill: "", stroke: "#000000" });
line( [ 4, 4 * M + B ], [ 7, 4 * M + B ] );
style({ stroke: "#40a020" });
line( [ 7, 4 * M + B ], [ 7, 7 * M + B ] );
Looking at the graph, we see that as x increases (\color{#000000}{\text{BLACK_ARROW}}), y also increases (\color{#40a020}{\text{GREEN_ARROW}}).
We can say that the slope of the line is positive, or that the variables have a direct relationship.
Thus, as X increases, Y also increases.
Thus, as the number of plural_form(UNIT) increases, the price of plural_form(UNIT) also increases.
1 / randRange( 2, 5 ) * -1
randRange( 6, 8 )
$._("black arrow")
$._("red arrow")
Decreases
style({ fill: "", stroke: "#000000" });
line( [ 4, 4 * M + B ], [ 7, 4 * M + B ] );
style({ stroke: "#ff0000" });
line( [ 7, 4 * M + B ], [ 7, 7 * M + B ] );
Looking at the graph, we see that as x increases (\color{#000000}{\text{BLACK_ARROW}}), y decreases (\color{#ff0000}{\text{RED_ARROW}}).
We can say that the slope of the line is negative, or that the variables have an inverse relationship.
Thus, as X increases, Y decreases.
Thus, as the number of plural_form(UNIT) increases, the price of plural_form(UNIT) decreases.
0
randRange( 2, 8 )
Stays the same
Looking at the graph, we see that as x increases, there is no change in y.
We can say that the slope of the line is zero, or that the variables have no correlation.
Thus, as X increases, Y stays the same.
Thus, as the number of plural_form(UNIT) increases, the price of plural_form(UNIT) stays the same.
randRange( -9, 9, 2 )
randFromArray([ POINTX, POINTY ])
(function() {
var lineStartX,
lineStartY;
if (randFromArray([ false, true ])) {
lineStartX = randFromArray([ -10, 10 ]);
lineStartY = randRange( -10, 10 );
} else {
lineStartX = randRange( -10, 10 );
lineStartY = randFromArray([ -10, 10 ]);
}
return [ lineStartX, lineStartY ];
})()
(function() {
var lineEndX = POINTX,
lineEndY = POINTY,
newXDelta,
newYDelta,
xDelta = -( LINESTART[ 0 ] - POINTX ),
yDelta = -( LINESTART[ 1 ] - POINTY );
// Reduce xDelta and yDelta until their absolute values are less than or equal
// to one.
if ( Math.abs( xDelta ) > Math.abs( yDelta ) ) {
newXDelta = xDelta > 0 ? 1 : -1;
newYDelta = yDelta * newXDelta / xDelta;
} else {
newYDelta = yDelta > 0 ? 1 : -1;
newXDelta = xDelta * newYDelta / yDelta;
}
xDelta = newXDelta;
yDelta = newYDelta;
while ( Math.abs( lineEndX ) < 10 && Math.abs( lineEndY ) < 10 ) {
lineEndX += xDelta;
lineEndY += yDelta;
}
return [ lineEndX, lineEndY ];
})()
What is x when y is POINTY?
What is y when x is POINTX?
graphInit({
range: 10,
scale: 20,
axisArrows: "<->",
tickStep: 2,
labelStep: 1,
});
label( [ 0, 10], "y", "below right");
label( [ 10, 0], "x", "above left");
style({ stroke: '#6495ed' });
line( LINESTART, LINEEND );
var lineStart, lineEnd;
if ( POINTX === SOLUTION ) {
lineStart = [ -10, POINTY ];
lineEnd = [ 10, POINTY ];
} else {
lineStart = [ POINTX, -10 ];
lineEnd = [ POINTX, 10 ];
}
line( lineStart, lineEnd, {
stroke: '#28ae7b',
strokeDasharray: '- '
});
The dashed green line shows where y is POINTY.
The dashed green line shows where x is POINTX.
The blue and dashed green lines meet at (POINTX, POINTY).
Therefore x is SOLUTION.
Therefore y is SOLUTION.
POINTX === SOLUTION ? 'x' : 'y' = SOLUTION