Skip to content
This repository has been archived by the owner on May 11, 2021. It is now read-only.

Commit

Permalink
added problem type with 0/undefined slope; refactored out embedded JS
Browse files Browse the repository at this point in the history
  • Loading branch information
@stephjang
stephjang committed Nov 11, 2011
1 parent 997d1a3 commit 236a155
Showing 1 changed file with 52 additions and 30 deletions.
82 changes: 52 additions & 30 deletions exercises/slope_of_a_line.html
View file
Expand Up @@ -11,30 +11,11 @@
padding-right: 20px;
}
</style>
<script>
function getColor( i ) {
switch( i % 4 ) {
case 0: return { name: "Blue", hex: KhanUtil.BLUE };
case 1: return { name: "Orange", hex: KhanUtil.ORANGE };
case 2: return { name: "Green", hex: KhanUtil.GREEN };
case 3: return { name: "Pink", hex: KhanUtil.PINK };
}
}

function getSlope( i, m ) {
switch( i ) {
case 0: return { value: m, display: m };
case 1: return { value: -1 * m, display: "-" + m };
case 2: return { value: 1 / m, display: "\\dfrac{1}{" + m + "}" };
case 3: return { value: -1 / m, display: "-\\dfrac{1}{" + m + "}" };
}
}
</script>
</head>
<body>
<div class="exercise">
<div class="problems">
<div id="give-two-points">
<div id="give-two-points" data-weight="2">
<div class="vars" data-ensure="Math.pow(Y1 - Y2, 2) + Math.pow(X1 - X2, 2) < 36 && X1 < X2">
<var id="X1">randRange(-9, 9)</var>
<var id="Y1">randRange(-9, 9)</var>
Expand Down Expand Up @@ -132,13 +113,25 @@
<p>So, the slope <code>m</code> is <code><var>fractionReduce( Y2 - Y1, X2 - X1 )</var></code>.</p>
</div>
</div>
<div id="show-four-graphs">
<div id="show-four-graphs" data-weight="2">
<div class="vars">
<var id="COLORS">[
{ name: "Blue", hex: KhanUtil.BLUE },
{ name: "Orange", hex: KhanUtil.ORANGE },
{ name: "Green", hex: KhanUtil.GREEN },
{ name: "Pink", hex: KhanUtil.PINK }
]</var>
<var id="M_INIT">randRange( 2, 5 )</var>
<var id="B">randRange( -3, 3 )</var>
<var id="WHICH">randRange( 0, 3 )</var>
<var id="SLOPES">[
{ value: M_INIT, display: M_INIT },
{ value: -1 * M_INIT, display: "-" + M_INIT },
{ value: 1 / M_INIT, display: "\\dfrac{1}{" + M_INIT + "}" },
{ value: -1 / M_INIT, display: "-\\dfrac{1}{" + M_INIT + "}" }
]</var>
<var id="B">randRange( -3, 3 )</var>
<var id="WHICH">randRange( 0, 3 )</var>
<var id="DUMMY">[ 0, 1, 2, 3 ]</var>
<var id="M">getSlope( WHICH, M_INIT )</var>
<var id="M">SLOPES[WHICH]</var>
</div>
<p class="question">Which graph best depicts a slope of <code><var>M.display</var></code>?</p>
<div data-each="DUMMY as index">
Expand All @@ -152,18 +145,22 @@
axisArrows: "&lt;-&gt;"
});

style({ stroke: getColor( index ).hex });
style({ stroke: COLORS[index].hex });
plot(function( x ) {
return x * getSlope( index, M_INIT ).value + B;
return x * SLOPES[index].value + B;
}, [ -11, 11 ]);
</div>
</div>
<div class="solution"><code>\quad \color{<var>getColor( WHICH ).hex</var>}{\text{<var>getColor( WHICH ).name</var>}}</code></div>
<div class="solution"><code>\quad \color{<var>COLORS[WHICH].hex</var>}{\text{<var>COLORS[WHICH].name</var>}}</code></div>
<ol class="choices" data-category="true">
<li data-each="DUMMY as index"><code>\quad \color{<var>getColor( index ).hex</var>}{\text{<var>getColor( index ).name</var>}}</code></li>
<li data-each="DUMMY as index"><code>\quad \color{<var>COLORS[index].hex</var>}{\text{<var>COLORS[index].name</var>}}</code></li>
</ol>
<div class="hints">
<p style="clear: both">Remember that the slope corresponds to which direction the line slants, and how much it slants.</p>
<div data-if="M.value === 0">
<p>Because the slope is <code><var>M.display</var></code>, the line should not slant at all.</p>
<p>The answer is either the <code class="hint_orange">\text{orange}</code> or <code class="hint_pink">\text{pink}</code> graph.</p>
</div>
<div data-if="M.value < 0">
<p>Because <code><var>M.display</var></code> is negative, the line should slant downwards as we follow it to the right.</p>
<p>The answer is either the <code class="hint_orange">\text{orange}</code> or <code class="hint_pink">\text{pink}</code> graph.</p>
Expand All @@ -173,10 +170,35 @@
<p>The answer is either the <code class="hint_blue">\text{blue}</code> or <code class="hint_green">\text{green}</code> graph.</p>
</div>
<p>In which graph does the y value change by <code><var>M.display</var></code> if the x value changes by <code>1</code>?</p>
<p>The <code>\color{<var>getColor( WHICH ).hex</var>}{\text{<var>getColor( WHICH ).name.toLowerCase()</var>}}</code> graph best depicts a slope of <code><var>M.display</var></code>.</p>
<p>The <code>\color{<var>COLORS[WHICH].hex</var>}{\text{<var>COLORS[WHICH].name.toLowerCase()</var>}}</code> graph best depicts a slope of <code><var>M.display</var></code>.</p>
</div>
</div>
<div id="slopes-zero-infinity" data-type="show-four-graphs" data-weight="1">
<div class="vars">
<var id="SLOPES">[
{ value: M_INIT, display: M_INIT },
{ value: 0, display: 0 },
{ value: Number.POSITIVE_INFINITY, display: "\\infty" },
{ value: 1 / M_INIT, display: "\\dfrac{1}{" + M_INIT + "}" }
]</var>
<var id="WHICH">randRange( 1, 2 )</var>
<var id="M">SLOPES[WHICH]</var>
</div>
<div class="hints">
<p style="clear: both">Remember that the slope corresponds to how steep the line is.
<p>Imagine walking up a hill represented by a line. A larger slope means a steeper hill.</p>
<div data-if="M.value === 0">
<p>Because the slope is <code><var>M.display</var></code>, the hill should not be steep.</p>
<p>The answer is either the <code class="hint_orange">\text{orange}</code> or <code class="hint_pink">\text{pink}</code> graph.</p>
</div>
<div data-if="M.value === Number.POSITIVE_INFINITY">
<p>Because the slope is <code><var>M.display</var></code>, the hill should be extremely steep.</p>
<p>The answer is either the <code class="hint_blue">\text{blue}</code> or <code class="hint_green">\text{green}</code> graph.</p>
</div>
<p>The <code>\color{<var>COLORS[WHICH].hex</var>}{\text{<var>COLORS[WHICH].name.toLowerCase()</var>}}</code> graph best depicts a slope of <code><var>M.display</var></code>.</p>
</div>
</div>
</div>
</div>
</body>
</html>
</html>

0 comments on commit 236a155

Please sign in to comment.