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

180 lines (166 sloc) 7.579 kb
<!DOCTYPE html>
<html data-require="math graphie word-problems interactive">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ordering objects</title>
<script src="../khan-exercise.js"></script>
<style>
.sortable {
padding: 13px;
}
.sortable > ul > li {
background-color: #eee;
border: 1px solid #eee;
width: 110px;
height: 110px;
}
.sort-key {
visibility: hidden;
position: absolute;
}
</style>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="SHAPE">randFromArray(["square", "circle", "triangle"])</var>
<var id="COLORS">shuffle(["#aec6f4", "#fdcf76", "#8ed4b8", "#fd79d4"])</var>
<var id="DRAW">{}</var>
<var id="SORTER">createSorter()</var>
</div>
<p class="question"></p>
<div class="problem">
<div class="graphie">
DRAW.square = function(x, y, size, color) {
KhanUtil.currentGraph.path([[x - size, y + size], [x + size, y + size], [x + size, y - size],
[x - size, y - size], true ],
{ strokeWidth: 2, stroke: "black", fill: color });
};
DRAW.circle = function(x, y, size, color) {
KhanUtil.currentGraph.circle([x, y], size, { strokeWidth: 2, stroke: "black", fill: color });
};
DRAW.triangle = function(x, y, size, color) {
KhanUtil.currentGraph.path([[x, y + size], [x + (2 * size) / sqrt(3), y - size / sqrt(3)],
[x - (2 * size) / sqrt(3), y - size / sqrt(3)], true],
{ strokeWidth: 2, stroke: "black", fill: color });
};
</div>
<ul id="sortable">
<li data-each="SIZES as I, SIZE">
<span class="sort-key"><var>SIZE</var></span>
<div class="graphie add-unique-id">
$(".add-unique-id").eq(I).attr("id", "unique-" + I);
init({ range: [[-11, 11], [-11, 11]], scale: [5, 5] });
DRAW[SHAPE](0, 0, SIZE, COLORS[I]);
</div>
</li>
</ul>
<var>SORTER.init("sortable")</var>
</div>
<div class="problems">
<div id="small-to-large">
<div class="vars" data-apply="appendVars">
<var id="SIZES" data-ensure="SIZES.join(',') !== sortNumbers(SIZES).join(',')">
shuffle([4, 5, 6, 7, 8, 9], 4)
</var>
<var id="SOLUTION">_.map(sortNumbers(SIZES), function(el) {
return "ABCD"[_.indexOf(SIZES, el)];
})</var>
</div>
<p class="question">
Order the <var>plural(SHAPE)</var> from smallest to largest:
</p>
<div class="solution" data-type="custom">
<div class="instruction">
Drag the <var>plural(SHAPE)</var> left and right so they are in order from smallest to largest
</div>
<div class="guess">SORTER.getContent()</div>
<div class="validator-function">
return guess.join(",") === SIZES.sort().join(",");
</div>
<div class="show-guess">
SORTER.setContent(guess);
</div>
</div>
<div class="hints">
<div data-each="sortNumbers(SIZES) as I, SIZE">
<div data-if="I === 0" class="graphie">
_(4).times(function(i) {
$("#unique-" + i).data("graphie").label([0, 0], "ABCD"[i]);
});
</div>
<p>
The
<span data-if="I === 0">smallest</span>
<span data-else-if="I === SIZES.length - 1">largest</span>
<span data-else>next smallest</span>
is <var>SHAPE</var> <code><var>"ABCD"[_.indexOf(SIZES, SIZE)]</var>
</code><span data-if="I === 0">, so it goes on the left</span><span data-else-if="I === SIZES.length - 1">, so it goes on the right</span>.
</p>
<div class="graphie">
init({ range: [[-11, 80], [-11, 11]], scale: [5, 5] });
var x = 0;
_.each(_.first(sortNumbers(SIZES), I + 1), function(size, i) {
DRAW[SHAPE](x, 0, size, COLORS[_.indexOf(SIZES, size)]);
label([x, 0], "ABCD"[_.indexOf(SIZES, size)]);
x += 22;
});
</div>
</div>
</div>
</div>
<div id="large-to-small">
<div class="vars" data-apply="appendVars">
<var id="SIZES" data-ensure="SIZES.join(',') !== sortNumbers(SIZES).reverse().join(',')">
shuffle([4, 5, 6, 7, 8, 9], 4)
</var>
<var id="SOLUTION">_.map(sortNumbers(SIZES).reverse(), function(el) {
return "ABCD"[_.indexOf(SIZES, el)];
})</var>
</div>
<p class="question">
Order the <var>plural(SHAPE)</var> from largest to smallest:
</p>
<div class="solution" data-type="custom">
<div class="instruction">
Drag the <var>plural(SHAPE)</var> left and right so they are in order from largest to smallest
</div>
<div class="guess">SORTER.getContent()</div>
<div class="validator-function">
return guess.join(",") === SIZES.sort().reverse().join(",");
</div>
<div class="show-guess">
SORTER.setContent(guess);
</div>
</div>
<div class="hints">
<div data-each="sortNumbers(SIZES).reverse() as I, SIZE">
<div data-if="I === 0" class="graphie">
_(4).times(function(i) {
$("#unique-" + i).data("graphie").label([0, 0], "ABCD"[i]);
});
</div>
<p>
The
<span data-if="I === 0">largest</span>
<span data-else-if="I === SIZES.length - 1">smallest</span>
<span data-else>next largest</span>
is <var>SHAPE</var> <code><var>"ABCD"[_.indexOf(SIZES, SIZE)]</var>
</code><span data-if="I === 0">, so it goes on the left</span><span data-else-if="I === SIZES.length - 1">, so it goes on the right</span>.
</p>
<div class="graphie">
init({ range: [[-11, 80], [-11, 11]], scale: [5, 5] });
var x = 0;
_.each(_.first(sortNumbers(SIZES).reverse(), I + 1), function(size, i) {
DRAW[SHAPE](x, 0, size, COLORS[_.indexOf(SIZES, size)]);
label([x, 0], "ABCD"[_.indexOf(SIZES, size)]);
x += 22;
});
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.