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

Commit

Permalink
Add exercise: Comparing objects
Browse files Browse the repository at this point in the history 
Reviewers: emily

Reviewed By: emily

CC: alpert

Differential Revision: http://phabricator.khanacademy.org/D123
  • Loading branch information
@beneater
beneater committed Jun 1, 2012
1 parent 219a3fa commit cc000ac
Showing 1 changed file with 185 additions and 0 deletions.
185 changes: 185 additions & 0 deletions exercises/comparing_objects.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,185 @@
<!DOCTYPE html>
<html data-require="math graphie word-problems">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Comparing objects</title>
<script src="../khan-exercise.js"></script>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="SHAPE">randFromArray(["square", "circle", "triangle"])</var>
<var id="SIZES">shuffle([4, 5.2, 6.4, 7.6, 8.8, 10], 4)</var>
<var id="COLORS">shuffle(["#aec6f4", "#fdcf76", "#8ed4b8", "#fd79d4"])</var>
<var id="DRAW">{}</var>
</div>

<p class="question">
Which <var>SHAPE</var> is the <var>QUESTION</var>?
</p>

<div class="problem">
<div class="graphie">
init({ range: [[0, 100], [-11, 11]], scale: [5, 5] });
var x = 0;
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 });
};

_(4).times(function(i) {
x += SIZES[i] + 5;
DRAW[SHAPE](x, 0, SIZES[i], COLORS[i]);
label([x, 0], "ABCD"[i]);
x += SIZES[i];
});
</div>
</div>

<p class="solution"><var>capitalize(SHAPE)</var> <code><var>SOLUTION</var></code></p>
<ul class="choices" data-category="true">
<li><var>capitalize(SHAPE)</var> <code>A</code></li>
<li><var>capitalize(SHAPE)</var> <code>B</code></li>
<li><var>capitalize(SHAPE)</var> <code>C</code></li>
<li><var>capitalize(SHAPE)</var> <code>D</code></li>
</ul>


<div class="problems">
<div id="biggest">
<div class="vars" data-apply="appendVars">
<var id="QUESTION">"biggest"</var>
<var id="SOLUTION">"ABCD"[_.indexOf(SIZES, _.max(SIZES))]</var>
<var id="COMPARISONS">(function() {
var l = [];

for (var i = 1; i &lt; 4; i++) {
var first = l.length ? l[l.length - 1].larger : 0;
var second = i;
var larger = _.max([first, second], function(i) { return SIZES[i]; });
var smaller = _.min([first, second], function(i) { return SIZES[i]; });
l.push({
first: first,
second: second,
larger: larger,
smaller: smaller
});
}
return l;
})()</var>
</div>

<div class="hints">
<p>Bigger things take up more space.</p>
<p>Which <var>SHAPE</var> takes up the most space?</p>
<div data-each="COMPARISONS as COMP" data-unwrap>
<p>
Which takes up more space? <var>capitalize(SHAPE)</var> <code><var>"ABCD"[COMP.first]</var></code>
or <var>SHAPE</var> <code><var>"ABCD"[COMP.second]</var></code>?
</p>
<div>
<div class="graphie" style="float: left">
init({ range: [[-11, 16], [-11, 11]], scale: [5, 5] });
DRAW[SHAPE](0, 0, SIZES[COMP.larger], COLORS[COMP.larger]);
DRAW[SHAPE](0, 0, SIZES[COMP.smaller], COLORS[COMP.smaller]);
label([0, 0], "ABCD"[COMP.smaller]);
label([SIZES[COMP.larger] + 2, 0], "ABCD"[COMP.larger]);
</div>
<p style="height: 100px;">
We can move
<var>SHAPE</var> <code><var>"ABCD"[COMP.smaller]</var></code> inside
<var>SHAPE</var> <code><var>"ABCD"[COMP.larger]</var></code>, so
<var>SHAPE</var> <code><var>"ABCD"[COMP.larger]</var></code> is bigger than
<var>SHAPE</var> <code><var>"ABCD"[COMP.smaller]</var></code>.
</p>
</div>
</div>
<div>
<div class="graphie" style="float: left">
init({ range: [[-11, 16], [-11, 11]], scale: [5, 5] });
_.each(sortNumbers(SIZES).reverse(), function(size) {
DRAW[SHAPE](0, 0, size, COLORS[_.indexOf(SIZES, size)]);
});
label([_.max(SIZES) + 2, 0], SOLUTION);
</div>
<p style="height: 100px;">
<var>capitalize(SHAPE)</var> <code><var>SOLUTION</var></code> is the biggest.
</p>
</div>
</div>
</div>

<div id="smallest">
<div class="vars" data-apply="appendVars">
<var id="QUESTION">"smallest"</var>
<var id="SOLUTION">"ABCD"[_.indexOf(SIZES, _.min(SIZES))]</var>
<var id="COMPARISONS">(function() {
var l = [];

for (var i = 1; i &lt; 4; i++) {
var first = l.length ? l[l.length - 1].smaller : 0;
var second = i;
var larger = _.max([first, second], function(i) { return SIZES[i]; });
var smaller = _.min([first, second], function(i) { return SIZES[i]; });
l.push({
first: first,
second: second,
larger: larger,
smaller: smaller
});
}
return l;
})()</var>
</div>

<div class="hints">
<p>Smaller things take up less space.</p>
<p>Which <var>SHAPE</var> takes up the least space?</p>
<div data-each="COMPARISONS as COMP" data-unwrap>
<p>
Which takes up less space? <var>capitalize(SHAPE)</var> <code><var>"ABCD"[COMP.first]</var></code>
or <var>SHAPE</var> <code><var>"ABCD"[COMP.second]</var></code>?
</p>
<div>
<div class="graphie" style="float: left">
init({ range: [[-11, 16], [-11, 11]], scale: [5, 5] });
DRAW[SHAPE](0, 0, SIZES[COMP.larger], COLORS[COMP.larger]);
DRAW[SHAPE](0, 0, SIZES[COMP.smaller], COLORS[COMP.smaller]);
label([0, 0], "ABCD"[COMP.smaller]);
</div>
<p style="height: 100px;">
We can move
<var>SHAPE</var> <code><var>"ABCD"[COMP.smaller]</var></code> inside
<var>SHAPE</var> <code><var>"ABCD"[COMP.larger]</var></code>, so
<var>SHAPE</var> <code><var>"ABCD"[COMP.smaller]</var></code> is smaller than
<var>SHAPE</var> <code><var>"ABCD"[COMP.larger]</var></code>.
</p>
</div>
</div>
<div>
<div class="graphie" style="float: left">
init({ range: [[-11, 16], [-11, 11]], scale: [5, 5] });
_.each(sortNumbers(SIZES).reverse(), function(size) {
DRAW[SHAPE](0, 0, size, COLORS[_.indexOf(SIZES, size)]);
});
label([0, 0], SOLUTION);
</div>
<p style="height: 100px;">
<var>capitalize(SHAPE)</var> <code><var>SOLUTION</var></code> is the smallest.
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

0 comments on commit cc000ac

Please sign in to comment.