Skip to content
This repository
Browse code

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
Ben Eater beneater authored

Showing 1 changed file with 185 additions and 0 deletions. Show diff stats Hide diff stats

  1. +185 0 exercises/comparing_objects.html
185 exercises/comparing_objects.html
... ... @@ -0,0 +1,185 @@
  1 +<!DOCTYPE html>
  2 +<html data-require="math graphie word-problems">
  3 +<head>
  4 + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5 + <title>Comparing objects</title>
  6 + <script src="../khan-exercise.js"></script>
  7 +</head>
  8 +<body>
  9 + <div class="exercise">
  10 + <div class="vars">
  11 + <var id="SHAPE">randFromArray(["square", "circle", "triangle"])</var>
  12 + <var id="SIZES">shuffle([4, 5.2, 6.4, 7.6, 8.8, 10], 4)</var>
  13 + <var id="COLORS">shuffle(["#aec6f4", "#fdcf76", "#8ed4b8", "#fd79d4"])</var>
  14 + <var id="DRAW">{}</var>
  15 + </div>
  16 +
  17 + <p class="question">
  18 + Which <var>SHAPE</var> is the <var>QUESTION</var>?
  19 + </p>
  20 +
  21 + <div class="problem">
  22 + <div class="graphie">
  23 + init({ range: [[0, 100], [-11, 11]], scale: [5, 5] });
  24 + var x = 0;
  25 + DRAW.square = function(x, y, size, color) {
  26 + KhanUtil.currentGraph.path([[x - size, y + size], [x + size, y + size], [x + size, y - size],
  27 + [x - size, y - size], true],
  28 + { strokeWidth: 2, stroke: "black", fill: color });
  29 + };
  30 + DRAW.circle = function(x, y, size, color) {
  31 + KhanUtil.currentGraph.circle([x, y], size, { strokeWidth: 2, stroke: "black", fill: color });
  32 + };
  33 + DRAW.triangle = function(x, y, size, color) {
  34 + KhanUtil.currentGraph.path([[x, y + size], [x + (2 * size) / sqrt(3), y - size / sqrt(3)],
  35 + [x - (2 * size) / sqrt(3), y - size / sqrt(3)], true ],
  36 + { strokeWidth: 2, stroke: "black", fill: color });
  37 + };
  38 +
  39 + _(4).times(function(i) {
  40 + x += SIZES[i] + 5;
  41 + DRAW[SHAPE](x, 0, SIZES[i], COLORS[i]);
  42 + label([x, 0], "ABCD"[i]);
  43 + x += SIZES[i];
  44 + });
  45 + </div>
  46 + </div>
  47 +
  48 + <p class="solution"><var>capitalize(SHAPE)</var> <code><var>SOLUTION</var></code></p>
  49 + <ul class="choices" data-category="true">
  50 + <li><var>capitalize(SHAPE)</var> <code>A</code></li>
  51 + <li><var>capitalize(SHAPE)</var> <code>B</code></li>
  52 + <li><var>capitalize(SHAPE)</var> <code>C</code></li>
  53 + <li><var>capitalize(SHAPE)</var> <code>D</code></li>
  54 + </ul>
  55 +
  56 +
  57 + <div class="problems">
  58 + <div id="biggest">
  59 + <div class="vars" data-apply="appendVars">
  60 + <var id="QUESTION">"biggest"</var>
  61 + <var id="SOLUTION">"ABCD"[_.indexOf(SIZES, _.max(SIZES))]</var>
  62 + <var id="COMPARISONS">(function() {
  63 + var l = [];
  64 +
  65 + for (var i = 1; i &lt; 4; i++) {
  66 + var first = l.length ? l[l.length - 1].larger : 0;
  67 + var second = i;
  68 + var larger = _.max([first, second], function(i) { return SIZES[i]; });
  69 + var smaller = _.min([first, second], function(i) { return SIZES[i]; });
  70 + l.push({
  71 + first: first,
  72 + second: second,
  73 + larger: larger,
  74 + smaller: smaller
  75 + });
  76 + }
  77 + return l;
  78 + })()</var>
  79 + </div>
  80 +
  81 + <div class="hints">
  82 + <p>Bigger things take up more space.</p>
  83 + <p>Which <var>SHAPE</var> takes up the most space?</p>
  84 + <div data-each="COMPARISONS as COMP" data-unwrap>
  85 + <p>
  86 + Which takes up more space? <var>capitalize(SHAPE)</var> <code><var>"ABCD"[COMP.first]</var></code>
  87 + or <var>SHAPE</var> <code><var>"ABCD"[COMP.second]</var></code>?
  88 + </p>
  89 + <div>
  90 + <div class="graphie" style="float: left">
  91 + init({ range: [[-11, 16], [-11, 11]], scale: [5, 5] });
  92 + DRAW[SHAPE](0, 0, SIZES[COMP.larger], COLORS[COMP.larger]);
  93 + DRAW[SHAPE](0, 0, SIZES[COMP.smaller], COLORS[COMP.smaller]);
  94 + label([0, 0], "ABCD"[COMP.smaller]);
  95 + label([SIZES[COMP.larger] + 2, 0], "ABCD"[COMP.larger]);
  96 + </div>
  97 + <p style="height: 100px;">
  98 + We can move
  99 + <var>SHAPE</var> <code><var>"ABCD"[COMP.smaller]</var></code> inside
  100 + <var>SHAPE</var> <code><var>"ABCD"[COMP.larger]</var></code>, so
  101 + <var>SHAPE</var> <code><var>"ABCD"[COMP.larger]</var></code> is bigger than
  102 + <var>SHAPE</var> <code><var>"ABCD"[COMP.smaller]</var></code>.
  103 + </p>
  104 + </div>
  105 + </div>
  106 + <div>
  107 + <div class="graphie" style="float: left">
  108 + init({ range: [[-11, 16], [-11, 11]], scale: [5, 5] });
  109 + _.each(sortNumbers(SIZES).reverse(), function(size) {
  110 + DRAW[SHAPE](0, 0, size, COLORS[_.indexOf(SIZES, size)]);
  111 + });
  112 + label([_.max(SIZES) + 2, 0], SOLUTION);
  113 + </div>
  114 + <p style="height: 100px;">
  115 + <var>capitalize(SHAPE)</var> <code><var>SOLUTION</var></code> is the biggest.
  116 + </p>
  117 + </div>
  118 + </div>
  119 + </div>
  120 +
  121 + <div id="smallest">
  122 + <div class="vars" data-apply="appendVars">
  123 + <var id="QUESTION">"smallest"</var>
  124 + <var id="SOLUTION">"ABCD"[_.indexOf(SIZES, _.min(SIZES))]</var>
  125 + <var id="COMPARISONS">(function() {
  126 + var l = [];
  127 +
  128 + for (var i = 1; i &lt; 4; i++) {
  129 + var first = l.length ? l[l.length - 1].smaller : 0;
  130 + var second = i;
  131 + var larger = _.max([first, second], function(i) { return SIZES[i]; });
  132 + var smaller = _.min([first, second], function(i) { return SIZES[i]; });
  133 + l.push({
  134 + first: first,
  135 + second: second,
  136 + larger: larger,
  137 + smaller: smaller
  138 + });
  139 + }
  140 + return l;
  141 + })()</var>
  142 + </div>
  143 +
  144 + <div class="hints">
  145 + <p>Smaller things take up less space.</p>
  146 + <p>Which <var>SHAPE</var> takes up the least space?</p>
  147 + <div data-each="COMPARISONS as COMP" data-unwrap>
  148 + <p>
  149 + Which takes up less space? <var>capitalize(SHAPE)</var> <code><var>"ABCD"[COMP.first]</var></code>
  150 + or <var>SHAPE</var> <code><var>"ABCD"[COMP.second]</var></code>?
  151 + </p>
  152 + <div>
  153 + <div class="graphie" style="float: left">
  154 + init({ range: [[-11, 16], [-11, 11]], scale: [5, 5] });
  155 + DRAW[SHAPE](0, 0, SIZES[COMP.larger], COLORS[COMP.larger]);
  156 + DRAW[SHAPE](0, 0, SIZES[COMP.smaller], COLORS[COMP.smaller]);
  157 + label([0, 0], "ABCD"[COMP.smaller]);
  158 + </div>
  159 + <p style="height: 100px;">
  160 + We can move
  161 + <var>SHAPE</var> <code><var>"ABCD"[COMP.smaller]</var></code> inside
  162 + <var>SHAPE</var> <code><var>"ABCD"[COMP.larger]</var></code>, so
  163 + <var>SHAPE</var> <code><var>"ABCD"[COMP.smaller]</var></code> is smaller than
  164 + <var>SHAPE</var> <code><var>"ABCD"[COMP.larger]</var></code>.
  165 + </p>
  166 + </div>
  167 + </div>
  168 + <div>
  169 + <div class="graphie" style="float: left">
  170 + init({ range: [[-11, 16], [-11, 11]], scale: [5, 5] });
  171 + _.each(sortNumbers(SIZES).reverse(), function(size) {
  172 + DRAW[SHAPE](0, 0, size, COLORS[_.indexOf(SIZES, size)]);
  173 + });
  174 + label([0, 0], SOLUTION);
  175 + </div>
  176 + <p style="height: 100px;">
  177 + <var>capitalize(SHAPE)</var> <code><var>SOLUTION</var></code> is the smallest.
  178 + </p>
  179 + </div>
  180 + </div>
  181 + </div>
  182 + </div>
  183 + </div>
  184 +</body>
  185 +</html>

0 comments on commit cc000ac

Please sign in to comment.
Something went wrong with that request. Please try again.