Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Add exercise: Comparing objects

Reviewers: emily

Reviewed By: emily

CC: alpert

Differential Revision: http://phabricator.khanacademy.org/D123
  • Loading branch information...
commit cc000ac03fa26426a52677060bf9f4b5dd8973b0 1 parent 219a3fa
@beneater beneater authored
Showing with 185 additions and 0 deletions.
  1. +185 −0 exercises/comparing_objects.html
View
185 exercises/comparing_objects.html
@@ -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.
Something went wrong with that request. Please try again.