Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

185 lines (171 sloc) 9.831 kB
<!DOCTYPE html>
<html data-require="math interactive graphie">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Graphing points and naming quadrants</title>
<script data-main="../local-only/main" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="problems">
<div>
<div class="vars">
<var id="X">randRangeNonZero( -10, 10 )</var>
<var id="Y">randRangeNonZero( -10, 10 )</var>
<!-- I18N: This is the letter placed at the beginning of a quadrant, as in "Q1" for the first quadrant -->
<var id="Q">$._("Q")</var>
<!-- I18N: This is a quadrant label, as in "the first quadrant" -->
<var id="QI">$._("QI")</var>
<!-- I18N: This is a quadrant label, as in "the second quadrant" -->
<var id="QII">$._("QII")</var>
<!-- I18N: This is a quadrant label, as in "the third quadrant" -->
<var id="QIII">$._("QIII")</var>
<!-- I18N: This is a quadrant label, as in "the forth quadrant" -->
<var id="QIV">$._("QIV")</var>
<var id="QUADRANT">X &gt; 0 ? (Y &gt; 0 ? QI : QIV) : (Y &gt; 0 ? QII : QIII)</var>
</div>
<p class="question">
Plot <code>(<var>X</var>, <var>Y</var>)</code> and select the quadrant in which the point lies.
</p>
<div class="problem">
<p><em>The graph is part of your answer.</em></p>
<div class="graphie" id="grid">
graphInit({
range: 11,
scale: 20,
axisArrows: "&lt;-&gt;",
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( -10, min( x, 10 ) ), max( -10, min( y, 10 ) ) ];
};
graph.showCorrect = function() {
graph.movablePoint.moveTo(X, Y);
};
</div>
</div>
<p class="solution" data-type="multiple">
<span>
Graph the point then select the quadrant that contains it.<br>
Quadrant:
</span>
<span class="sol" data-choices="['', QI, QII, QIII, QIV]" data-type="list">
<var>QUADRANT</var>
</span>
<span class="sol" data-type="custom">
<span class="guess">graph.movablePoint.coord</span>
<span class="validator-function">
if (guess[0] === 0 &amp;&amp; guess[1] === 0) {
// TODO: Replace this string with "" when clues are added
return $._("Drag the orange point on the graph to the right position.");
}
return guess[0] === X &amp;&amp; guess[1] === Y;
</span>
<span class="show-guess">
graph.movablePoint.setCoord(guess);
</span>
</span>
</p>
<div class="hints">
<p>Coordinates are listed as <code>(\blue{x},\green{y})</code>.</p>
<p>
So, for <code>( \blue{<var>X</var>}, \green{<var>Y</var>} )</code> our <span class="hint_blue"><code>x</code>-coordinate</span>
is <code>\blue{<var>X</var>}</code> and our <span class="hint_green"><code>y</code>-coordinate</span> is <code>\green{<var>Y</var>}</code>.
</p>
<p>
The <span class="hint_blue"><code>x</code>-coordinate</span> tells how far we move to the right from the origin and the
<span class="hint_green"><code>y</code>-coordinate</span> tells us how far we move up from the origin.
</p>
<div>
<p data-if="X > 0">
Since our <span class="hint_blue"><code>x</code>-coordinate</span> is positive,
we move <code>\blue{<var>abs( X )</var>}</code> to the right.
</p><p data-else>
Since our <span class="hint_blue"><code>x</code>-coordinate</span> is negative,
we move <code>\blue{<var>abs( X )</var>}</code> to the left.
</p>
<div class="graphie" data-update="grid">
style({
stroke: BLUE,
strokeWidth: 3,
arrows: "-&gt;"
}, function() {
line( [ 0, 0 ], [ X, 0 ]);
});
graph.movablePoint.toFront();
</div>
</div>
<div>
<p data-if="Y > 0">
Since our <span class="hint_green"><code>y</code>-coordinate</span> is positive,
we move <code>\green{<var>abs( Y )</var>}</code> up.
</p><p data-else>
Since our <span class="hint_green"><code>y</code>-coordinate</span> is negative,
we move <code>\green{<var>abs( Y )</var>}</code> down.
</p>
<div class="graphie" data-update="grid">
style({
stroke: GREEN,
strokeWidth: 3,
arrows: "-&gt;"
}, function() {
line( [ X, 0 ], [ X, Y ] );
});
graph.movablePoint.toFront();
</div>
</div>
<div>
<p>
Move the point to <code>( \blue{<var>X</var>}, \green{<var>Y</var>} )</code> at the marked point above.
<input onclick="javascript:KhanUtil.currentGraph.graph.showCorrect();" type="button" value="Show me">
</p>
<div class="graphie" data-update="grid">
style({
stroke: PINK,
strokeWidth: 3
}, function() {
line( [ X - 0.3, Y - 0.3 ], [ X + 0.3, Y + 0.3 ] );
line( [ X + 0.3, Y - 0.3 ], [ X - 0.3, Y + 0.3 ] );
});
graph.movablePoint.toFront();
</div>
</div>
<div>
<p>Now that we have our point plotted, we can figure out the quadrant.</p>
<p>By convention, quadrants are named with a capital <code>\text{<var>Q</var>}</code> and a roman numeral,
starting in the upper right quadrant as <code>\text{<var>QI</var>}</code> and rotating counter-clockwise.</p>
<div class="graphie" data-update="grid">
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" } );
</div>
</div>
<p class="final_answer" data-if="X > 0 &amp;&amp; Y > 0">
Since our point is in the upper right portion of the graph,
the quadrant is <code>\purple{\text{<var>QUADRANT</var>}}</code>.
</p><p class="final_answer" data-else-if="X > 0 &amp;&amp; Y < 0">
Since our point is in the lower right portion of the graph,
the quadrant is <code>\purple{\text{<var>QUADRANT</var>}}</code>.
</p><p class="final_answer" data-else-if="X < 0 &amp;&amp; Y > 0">
Since our point is in the upper left portion of the graph,
the quadrant is <code>\purple{\text{<var>QUADRANT</var>}}</code>.
</p><p class="final_answer" data-else>
Since our point is in the lower left portion of the graph,
the quadrant is <code>\purple{\text{<var>QUADRANT</var>}}</code>.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.