Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

223 lines (171 sloc) 9.267 kb
<!DOCTYPE html>
<html data-require="math math-format graphie graphie-helpers">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Inequalities on a number line</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
<script>
function numberLineWithArrow( start, end, step, x, y, arrowStartX, arrowEndX, inclusive ) {
// Offset arrow appropriately in case number line's point is empty
var arrowOffsetX = 0.15;
if ( arrowStartX > arrowEndX ) {
arrowOffsetX *= -1;
}
numberLine( start, end, step, x, y );
graph = KhanUtil.currentGraph;
graph.style({ stroke: "#6495ED", fill: inclusive ? "#6495ED" : null });
graph.pt = graph.circle( [ arrowStartX, 0 ], 0.15 );
graph.style({ stroke: "#6495ED", fill: "#6495ED", strokeWidth: 3.5, arrows: "->" });
graph.arrow = graph.path( [ [ arrowStartX + arrowOffsetX, 0 ], [ arrowEndX, 0 ] ] );
graph.pt.toFront();
}
function numberLineWithArrowAndMistakes( label, sign, i, frac, less_than, inclusive, mistakeTypes, mistakeIndex ) {
function makeMistake( mistakeType ) {
// Various types of mistakes for number line possibilities
switch ( mistakeType.toString() ) {
case "direction":
less_than = !less_than;
break;
case "inclusion":
inclusive = !inclusive;
break;
case "positivity":
sign = sign === "-" ? "" : "-";
break;
case "quantity":
var original = i;
while (Math.abs(original) == Math.abs(i)) {
// The only quantity mistake we don't allow is a perfect reflection around the origin,
// b/c it may combine with a positivity mistake to create a correct answer.
i += KhanUtil.randRangeNonZero( -3, 3 )
}
break;
}
}
if ( mistakeTypes[mistakeIndex] !== "none" ) {
$.each( mistakeTypes, function () {
// Make at least one of each mistake, and possibly more
if ( mistakeTypes[ mistakeIndex ] == this || KhanUtil.rand( 6 ) === 0 ) {
makeMistake( this );
}
});
}
var multiplier = sign === "-" ? -1 : 1;
// Grab some random padding for left & right of number lines
var start = ( i * multiplier ) - KhanUtil.randRange(2, 6);
var end = ( i * multiplier ) + KhanUtil.randRange(2, 6);
graph = KhanUtil.currentGraph;
graph.init({
range: [ [start - 1, end + 0.5], [-1, 1] ],
scale: 36
});
// Label number line choice if necessary
if ( label ) {
graph.label( [start - 0.2, 0], "\\text{" + $.i18nDoNotTranslate("%(label)s:", {label: label}) + "}", "left" );
}
var arrowStartX = ( i + frac ) * multiplier;
var arrowEndX = less_than ? start : end;
numberLineWithArrow( start, end, null, start, null, arrowStartX, arrowEndX, inclusive );
}
</script>
</head>
<body>
<div class="exercise">
<div class="vars">
<div data-ensure="INT !== 0 || FRAC !== 0">
<var id="INT">rand( 6 ) &gt; 0 ? randRange( 1, 9 ) : 0</var>
<var id="FRAC">rand( 3 ) &gt; 0 ? (randRange( 1, 9 ) / 10) : 0</var>
</div>
<var id="SIGN">(INT === 0 ? "" : randFromArray(["", "-"]))</var>
<var id="REL">randFromArray([ "&lt;", "&gt;", "≤", "≥" ])</var>
<var id="INCLUSIVE">REL === "≤" || REL === "≥"</var>
<var id="LESS_THAN">REL === "&lt;" || REL === "≤"</var>
<var id="VARIABLE_NAME">randVar()</var>
<var id="LINE_ERROR_TYPES">shuffle([ "direction", "inclusion", "positivity", "quantity", "none" ])</var>
<var id="CORRECT_LINE_INDEX">$.inArray( "none", LINE_ERROR_TYPES )</var>
<var id="LINE_LABELS">[ "A", "B", "C", "D", "E" ]</var>
<var id="LINE_SOLUTION">LINE_LABELS[ CORRECT_LINE_INDEX ]</var>
</div>
<div class="problems">
<div id="line_from_equation">
<p class="question">
Which graph on the number line represents <code><var>VARIABLE_NAME</var> <var>REL</var> <var>SIGN + ( INT + FRAC )</var></code>?
</p>
<div class="problem">
<div class="graphie" data-each="LINE_LABELS as index, label">
numberLineWithArrowAndMistakes(
label, SIGN, INT, FRAC, LESS_THAN, INCLUSIVE, LINE_ERROR_TYPES, index
);
</div>
</div>
<div class="solution">Graph <var>LINE_SOLUTION</var></div>
<ol class="choices" data-category="true">
<li data-each="LINE_LABELS as label">Graph <var>label</var></li>
</ol>
<div class="hints">
<div>
<p>First, draw a number line with at least a few numbers on each side of <code><var>SIGN + ( INT + FRAC )</var></code>.</p>
<div class="graphie" id="number_line_hint">
// Draw number line only
numberLineWithArrowAndMistakes(
null, SIGN, INT, FRAC, LESS_THAN, INCLUSIVE, LINE_ERROR_TYPES, CORRECT_LINE_INDEX
);
arrow.hide();
pt.hide();
</div>
</div>
<div>
<p data-if="INCLUSIVE">
Since <code><var>VARIABLE_NAME</var> <var>REL</var> <var>SIGN + ( INT + FRAC )</var></code>, draw a full circle at <code><var>SIGN + ( INT + FRAC )</var></code> to show that the inequality includes <code><var>SIGN + ( INT + FRAC )</var></code>.
</p><p data-else="">
Since <code><var>VARIABLE_NAME</var> <var>REL</var> <var>SIGN + ( INT + FRAC )</var></code>, draw an empty circle at <code><var>SIGN + ( INT + FRAC )</var></code> to show that the inequality does not include <code><var>SIGN + ( INT + FRAC )</var></code>.
</p>
<div class="graphie" data-update="number_line_hint">pt.show();</div>
</div>
<div>
<p data-if="LESS_THAN">
Now draw an arrow to the left of the circle to include all numbers less than <code><var>SIGN + ( INT + FRAC )</var></code>.
</p><p data-else="">
Now draw an arrow to the right of the circle to include all numbers greater than <code><var>SIGN + ( INT + FRAC )</var></code>.
</p>
<div class="graphie" data-update="number_line_hint">arrow.show();</div>
</div>
<p>This looks like it matches the arrow and circle from Graph <var>LINE_SOLUTION</var> above.</p>
</div>
</div>
<div id="equation_from_line">
<div class="question">
<p>Determine the inequality represented by this graph on the number line:</p>
<div class="graphie">
numberLineWithArrowAndMistakes(
null, SIGN, INT, 0, LESS_THAN, INCLUSIVE, LINE_ERROR_TYPES, CORRECT_LINE_INDEX
);
</div>
</div>
<p class="solution" data-type="multiple">
<code><var>VARIABLE_NAME</var></code>
<span class="sol" data-choices="['', '&lt;', '&gt;', '≤', '≥', '≠']" data-type="list">
<var>REL</var>
</span>
<span class="sol"><var>SIGN + INT</var></span>
</p>
<div class="hints">
<p data-if="LESS_THAN">
The arrow is pointing to the left of <code><var>SIGN + INT</var></code>, so everything less than <code><var>SIGN + INT</var></code> is included.
</p><p data-else="">
The arrow is pointing to the right of <code><var>SIGN + INT</var></code>, so everything greater than <code><var>SIGN + INT</var></code> is included.
</p>
<p data-if="INCLUSIVE">
The circle is filled in, so <code><var>SIGN + INT</var></code> itself is also included.
</p><p data-else="">
The circle is not filled in, so <code><var>SIGN + INT</var></code> itself is not included.
</p>
<p>
The graph represents <code><var>VARIABLE_NAME</var> <var>REL</var><var>SIGN + INT</var></code>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.