Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

added problem type with 0/undefined slope; refactored out embedded JS #6124

Closed
wants to merge 1 commit into from

2 participants

@stephjang

Trello bug title

  • Add problem type to slope of a line exercise

Changes

  • Added problem type with 0/undefined slope
  • Refactored out embedded JS in
  • Added data-weight=2 to the existing exercises and data-weight=1 to the new one

Not changed

  • Kept the problem options un-randomized, due to referencing by array index within the Hints
@marcia

Great job refactoring my suboptimal code :)

I made a few whitespace changes here 35c0c45 and then I swapped out "infinity" for "undefined" here 7090569. Thanks so much, and I look forward to more things coming my way from you!

@marcia marcia closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 52 additions and 30 deletions.
  1. +52 −30 exercises/slope_of_a_line.html
View
82 exercises/slope_of_a_line.html
@@ -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>
@@ -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">
@@ -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>
@@ -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>
Something went wrong with that request. Please try again.