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

Commit

Permalink
Comparing fractions with the same denom
Browse files Browse the repository at this point in the history 
Summary: Finish hints

Reviewers: eater

Reviewed By: eater

Differential Revision: http://phabricator.khanacademy.org/D7144
  • Loading branch information
@petercollingridge
petercollingridge committed Mar 9, 2014
1 parent ae23541 commit 67b0727
Show file tree
Hide file tree
Showing 6 changed files with 239 additions and 19 deletions.
5 changes: 5 additions & 0 deletions css/khan-exercise.css
View file
Expand Up @@ -968,6 +968,11 @@ span.hover-hint:hover {
padding-left: 5px;
}

.question li span.sort-key {
visibility: hidden;
position: absolute;
}

body.debug span.error {
font-weight: bold;
color: #FFF;
Expand Down
234 changes: 234 additions & 0 deletions exercises/comparing_fractions_with_the_same_denominator.html
View file
@@ -0,0 +1,234 @@
<!DOCTYPE html>
<html data-require="math math-format interactive graphie graphie-helpers word-problems">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ordering fractions with the same denominator</title>
<script src="../khan-exercise.js"></script>
</head>
<body>
<div class="exercise">
<div class="problems">
<div id="ordering">
<div class="vars" data-ensure="NUMERATORS.join(',') !== SORTED_LIST">
<var id="NUM_ITEMS">3</var>
<var id="DENOMINATOR">randFromArray([3, 4, 6, 8])</var>
<var id="NUMERATORS">randRangeUnique(1, DENOMINATOR, NUM_ITEMS)</var>
<var id="NUMS_SORTED">$.map(NUMERATORS, function(el) {
return el;
}).sort(function(a, b) {
return a - b;
})</var>
<var id="SORTED_LIST">NUMS_SORTED.join(",")</var>
<var id="ANSWER">$.map(NUMS_SORTED, function(el) {
return "\\dfrac{" + el + "}{" + DENOMINATOR + "}";
}).join(",")</var>
<var id="SORTER">createSorter()</var>
</div>

<div class="question">
<p>Order the following fractions from least to greatest:</p>
<ul id="sortable">
<li data-each="NUMERATORS as N">
<span class="sort-key"><var>N</var></span>
<code>\dfrac{<var>N</var>}{<var>DENOMINATOR</var>}</code>
</li>
</ul>
<p><var>SORTER.init("sortable")</var></p>

</div>

<div class="solution" data-type="custom">
<div class="instruction">
Drag the fractions left and right so they are in order from least to greatest
</div>
<div class="guess">SORTER.getContent()</div>
<div class="validator-function">
if (SORTER.hasAttempted) {
return guess.join(",") === SORTED_LIST;
} else {
return "";
}
</div>
<div class="show-guess">
SORTER.setContent(guess);
</div>
</div>

<div class="hints">
<div>
<p>We can draw a picture to compare the fractions.</p>
<div class="graphie">
init({
range: [[-0.1, 1], [0, NUM_ITEMS * 2]],
scale: [400, 25]
});
for (var i = 0; i &lt; NUM_ITEMS; i++) {
var y = (NUM_ITEMS - i - 1) * 2;
rectchart([NUMERATORS[i], DENOMINATOR - NUMERATORS[i]], [RED, GRAY], y);
label([-0.05, y + 0.5], "\\dfrac{" + NUMERATORS[i] + "}{" + DENOMINATOR + "}");
}
</div>
</div>
<p>The order from least to greatest is: <code><var>ANSWER</var></code>.</p>
</div>
</div>

<div id="comparison-operator">
<div class="vars">
<var id="DENOMINATOR">randFromArray([3, 4, 6, 8])</var>
<var id="NUMERATOR_1">randRange(1, DENOMINATOR)</var>
<var id="NUMERATOR_2">randRangeExclude(1, DENOMINATOR, [NUMERATOR_1])</var>
<var id="SOLUTION">NUMERATOR_1 &lt; NUMERATOR_2 ? "&lt;" : "&gt;"</var>
</div>

<div class="problem">
<p>Fill in the blank.</p>
<p>
<code>\dfrac{<var>NUMERATOR_1</var>}{<var>DENOMINATOR</var>}</code> ____
<code>\dfrac{<var>NUMERATOR_2</var>}{<var>DENOMINATOR</var>}</code>
</p>
</div>
<p class="solution"><code><var>SOLUTION</var></code></p>
<ul class="choices" data-category="true">
<li><code>&lt;</code></li>
<li><code>&gt;</code></li>
</ul>
<div class="hints">
<div>
<p>We can draw a picture to compare the fractions.</p>
<div class="graphie">
init({
range: [[-0.1, 1], [0, 5.5]],
scale: [425, 25]
});

rectchart([NUMERATOR_1, DENOMINATOR - NUMERATOR_1], [RED, GRAY], 3);
rectchart([NUMERATOR_2, DENOMINATOR - NUMERATOR_2], [RED, GRAY], 1);
label([-0.05, 3.5], "\\dfrac{" + NUMERATOR_1 + "}{" + DENOMINATOR + "}");
label([-0.05, 1.5], "\\dfrac{" + NUMERATOR_2 + "}{" + DENOMINATOR + "}");
</div>
</div>
<p>
<code>\dfrac{<var>NUMERATOR_1</var>}{<var>DENOMINATOR</var>} <var>SOLUTION</var>
\dfrac{<var>NUMERATOR_2</var>}{<var>DENOMINATOR</var>}</code>
</p>
</div>
</div>

<div id="number-line">
<div class="vars">
<var id="DENOMINATOR">randFromArray([2, 3, 4, 6, 8])</var>
<var id="NUMERATOR_1">randRange(1, 10)</var>
<var id="NUMERATOR_2">randRangeExclude(1, 10, [NUMERATOR_1])</var>
<var id="MAX_NUM">ceil(max(NUMERATOR_1, NUMERATOR_2) / DENOMINATOR)</var>
<var id="SOLUTION">randFromArray(["A", "B"])</var>
</div>

<div class="problem">
<p>Which number line correctly shows
<code>\dfrac{<var>NUMERATOR_1</var>}{<var>DENOMINATOR</var>}</code> and
<code>\dfrac{<var>NUMERATOR_2</var>}{<var>DENOMINATOR</var>}</code>?
</p>
<div class="graphie">
init({
range: [[-0.15, 1.1], [0, 7]],
scale: [400, 25]
});

var tick = 0.25;
var labels = [
0,
"\\dfrac{" + NUMERATOR_1 + "}{" + DENOMINATOR + "}",
"\\dfrac{" + NUMERATOR_2 + "}{" + DENOMINATOR + "}"
];

var drawNumberLine = function(y, name, numbers) {
// Seems this only adds an arrow to one end
line([-0.05, y], [1.05, y], { arrows: "&lt;-&gt;" });
line([1.05, y], [-0.05, y], { arrows: "&lt;-&gt;" });
label([-0.1, y], name);

for (var i = 0; i &lt; numbers.length; i++) {
var x = numbers[i] / DENOMINATOR / MAX_NUM;
line([x, y - tick], [x, y + tick]);
label([x, y - 0.2], labels[i], "below");
}
};

if (SOLUTION === "A") {
drawNumberLine(6, "A", [0, NUMERATOR_1, NUMERATOR_2]);
drawNumberLine(2, "B", [0, NUMERATOR_2, NUMERATOR_1]);
} else {
drawNumberLine(6, "A", [0, NUMERATOR_2, NUMERATOR_1]);
drawNumberLine(2, "B", [0, NUMERATOR_1, NUMERATOR_2]);
}
</div>
</div>
<div class="solution">Number line <code><var>SOLUTION</var></code></div>
<ul class="choices" data-category="true">
<li>Number line <code>A</code></li>
<li>Number line <code>B</code></li>
</ul>
<div class="hints">
<div>
<p>
We can draw a picture of a number line showing <code>1</code> divided into <code><var>DENOMINATOR</var></code> equal pieces of
<code>\dfrac{1}{<var>DENOMINATOR</var>}</code> to compare the fractions.
</p>
<div class="graphie" id="hint-line">
init({
range: [[-0.1, 1.1], [0, 3]],
scale: [400, 25]
});

var y = 2;
line([-0.05, y], [1.05, y], { arrows: "&lt;-&gt;" });
line([1.05, y], [-0.05, y], { arrows: "&lt;-&gt;" });

var tick = 0.25
for (var i = 0; i &lt;= MAX_NUM * DENOMINATOR; i++) {
var x = i / DENOMINATOR / MAX_NUM;
line([x, y - tick], [x, y + tick]);
if (i % DENOMINATOR === 0) {
label([x, y], roundTo(1, i / DENOMINATOR), "above");
}
}
</div>
</div>
<div>
<p data-if="isSingular(NUMERATOR_1)">
Count <code>\blue{<var>NUMERATOR_1</var>}</code> tick along to add
<code>\blue{\dfrac{<var>NUMERATOR_1</var>}{<var>DENOMINATOR</var>}}</code> to the number line.
</p>
<p data-else="">
Count <code>\blue{<var>NUMERATOR_1</var>}</code> ticks along to add
<code>\blue{\dfrac{<var>NUMERATOR_1</var>}{<var>DENOMINATOR</var>}}</code> to the number line.
</p>
<p data-if="isSingular(NUMERATOR_2)">
Count <code>\red{<var>NUMERATOR_2</var>}</code> tick along to add
<code>\red{\dfrac{<var>NUMERATOR_2</var>}{<var>DENOMINATOR</var>}}</code> to the number line.
</p>
<p data-else="">
Count <code>\red{<var>NUMERATOR_2</var>}</code> ticks along to add
<code>\red{\dfrac{<var>NUMERATOR_2</var>}{<var>DENOMINATOR</var>}}</code> to the number line.
</p>
<div class="graphie" data-update="hint-line">
label(
[NUMERATOR_1 / DENOMINATOR / MAX_NUM, 1.8],
"\\blue{\\dfrac{" + NUMERATOR_1 + "}{" + DENOMINATOR + "}}",
"below"
);
label(
[NUMERATOR_2 / DENOMINATOR / MAX_NUM, 1.8],
"\\red{\\dfrac{" + NUMERATOR_2 + "}{" + DENOMINATOR + "}}",
"below"
);
</div>
</div>
<p>So number line <code><var>SOLUTION</var></code> is correct.</p>
</div>
</div>
</div>
</div>
</body>
</html>
5 changes: 0 additions & 5 deletions exercises/conditional_statements_2.html
View file
Expand Up @@ -73,11 +73,6 @@
vertical-align: middle;
line-height: 24px;
}

.sort-key {
display: none;
}

.single-line {
line-height: 50px;
}
Expand Down
6 changes: 0 additions & 6 deletions exercises/ordering_decimals.html
View file
Expand Up @@ -4,12 +4,6 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ordering decimals</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
<style>
.sort-key {
visibility: hidden;
position: absolute;
}
</style>
</head>
<body>
<div class="exercise">
Expand Down
4 changes: 0 additions & 4 deletions exercises/ordering_fractions.html
View file
Expand Up @@ -10,10 +10,6 @@
font-size: 1.7em;
text-align: center
}
.sort-key {
visibility: hidden;
position: absolute;
}
</style>
</head>
<body>
Expand Down
4 changes: 0 additions & 4 deletions exercises/ordering_negative_numbers.html
View file
Expand Up @@ -10,10 +10,6 @@
font-size: 1.7em;
text-align: center
}
.sort-key {
visibility: hidden;
position: absolute;
}
</style>
</head>
<body>
Expand Down

0 comments on commit 67b0727

Please sign in to comment.