Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

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.