Skip to content
This repository
Fetching contributors…

Cannot retrieve contributors at this time

file 224 lines (197 sloc) 11.507 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224
<!DOCTYPE html>
<html data-require="math graphie interactive word-problems">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Pile patterns</title>
    <script src="../khan-exercise.js"></script>
    <style type="text/css">
        #answer_area input[type=text] {
            width: 40px;
        }
    </style>
</head>
<body>
    <div class="exercise">
        <div class="problems">
            <div>
                <div class="vars"
                    data-ensure="(USEA || USEB || USEC || USED)
&amp;&amp; A + B + C + D > 0 &amp;&amp;
XS !== START">
                    <var id="USEA">random() &lt; 0.5</var>
                    <var id="A">USEA ? randRange(1, 3) : 0</var>
                    <var id="USEB">random() &lt; 0.5</var>
                    <var id="B">USEB ? randRange(0, 2) : 0</var>
                    <var id="USEC">random() &lt; 0.5</var>
                    <var id="C">USEC ? randRange(1, 3) : 0</var>
                    <var id="USED">random() &lt; 0.5</var>
                    <var id="D">USED ? randRange(0, 2) : 0</var>
                    <var id="LEFTMAX">USEC ? (C + 4) : 2</var>
                    <var id="TOPMAX">USED ? (D + 4) : 0</var>
                    <var id="XS">_.reduce([USEA, USEB, USEC, USED],
                    function(sum, e) {
                        return sum + (e ? 1 : 0);
                    }, 0)</var>
                    <var id="START">A + B + C + D</var>
                </div>
                <p class="question">
                    How many blocks are in the diagram for each step? You can see how the diagram looks for the first five steps by moving the slider.
                </p>
                <div class="problem">
                    <div class="graphie" id="main">
                        var vertscale = -2;

                        if (USEB) {
                            vertscale -= B + 4;
                        }
                        if (USED) {
                            vertscale -= D + 4;
                        }
                        if (USEA) {
                            vertscale -= 1;
                        }
                        if (USEC) {
                            vertscale -= 1;
                        }

                        init({
                            range: [[-1, 15], [vertscale, 1]]
                        });

                        addMouseLayer();

                        label([1, 0.2], "\\text{step}:", "above left");
                        line([1, 0], [9, 0]);
                        for (var x = 1; x &lt;= 9; x += 2) {
                            line([x, -0.2], [x, 0.2]);
                            label([x, 0.2], (x - 1) / 2, "above");
                        }

                        var drawBox = function(x, y) {
                            y = -y - 2 - TOPMAX;
                            x = x + LEFTMAX;

                            return path([
                                [x, y],
                                [x + 1, y],
                                [x + 1, y + 1],
                                [x, y + 1],
                                true
                            ]);
                        };

                        var drawPile = function(x, y, dir, start, num) {
                            var set = raphael.set();

                            var offset = [
                                [1, 0],
                                [0, 1],
                                [-1, 0],
                                [0, -1]
                            ][dir];

                            for (var i = start; i &lt; num; ++i) {
                                set.push(
                                    drawBox(x + offset[0] * i,
                                            y + offset[1] * i)
                                );
                            }

                            return set;
                        };

                        var drawPattern = function(num) {
                            var boxes = raphael.set();

                            var start = (num === 0);

                            if (USED) {
                                boxes.push(drawPile(0, -1, 3,
                                    start ? 0 : D + num - 1, num + D));
                            }

                            var y = 0;

                            if (USEC) {
                                boxes.push(drawPile(0, y, 2,
                                    start ? 0 : C + num - 1, num + C));
                                y += 1;
                            }
                            if (USEA) {
                                boxes.push(drawPile(0, y, 0,
                                    start ? 0 : A + num - 1, num + A));
                                y += 1;
                            }
                            if (USEB) {
                                boxes.push(drawPile(0, y, 1,
                                    start ? 0 : B + num - 1, num + B));
                                y += 1;
                            }

                            return boxes;
                        };

                        var steps = [];

                        for (var i = 0; i &lt; 5; i++) {
                            steps[i] = drawPattern(i);

                            steps[i].attr("opacity", 0);
                        }

                        steps[0].attr("opacity", 1);
                        steps[1].attr("opacity", 1);

                        var currStep = 1;

                        var showStep = function(step) {
                            while (currStep &lt; step) {
                                // add blocks
                                steps[currStep + 1].attr("fill", "#ddddff");
                                steps[currStep + 1].animate({ "opacity": 1 }, 300);
                                steps[currStep + 1].animate({ "fill": "#ffffff" }, 200);
                                currStep++;
                            }
                            while (currStep > step) {
                                steps[currStep].animate({ "opacity": 0 }, 200);
                                currStep--;
                            }
                        };

                        graph.slider = addMovablePoint({
                            coord: [3, 0],
                            constraints: {
                                constrainY: true
                            }
                        });

                        graph.slider.onMove = function(x, y) {
                            if (x &lt; 1) return false;
                            if (x > 9) return false;

                            var newx = round((x - 1) / 2);

                            showStep(newx);

                            return [newx * 2 + 1, y];
                        };
                    </div>
                </div>
                <div class="solution" data-type="multiple">
                    In step 0, we have <span class="sol"><var>START</var></span> blocks. At each step, we add <span class="sol"><var>XS</var></span> more blocks.<br><br>
                    So, at step number <code>S</code>, we have<br><span class="sol"><var>START</var></span> <code>+</code> <span class="sol"><var>XS</var></span> <code>\times S</code> blocks.
                </div>
                <div class="hints">
                    <p>The number of blocks in the diagram make an arithmetic progression. This means that at each step, the same number of blocks are added. We want to find a way to know how many blocks there will be at any step.</p>
                    <p>First, we need to find out how many blocks we start out with. Count how many blocks there are in step 0 by dragging the slider all the way to the left.</p>
                    <div>
                        <p>We see that there <var>plural("is", START)</var> <var>pluralTex(START, "block")</var> in step 0. Fill this in the answer box.</p>
                        <div class="graphie" data-update="main">
                            graph.slider.moveTo(1, 0);
                        </div>
                    </div>
                    <p>Next, let's figure out how many blocks are added in each step. The easiest way to do that is to see how many blocks are added from step 0 to step 1.</p>
                    <div>
                        <p>There are <code><var>START + XS</var></code> blocks in step 1. To find how many blocks are added in each steps we just subtract this number from the number of blocks in step 0. So there are <code><var>START + XS</var> - <var>START</var> = <var>XS</var></code> <var>plural("block", XS)</var> added in each step. Fill this in the answer box.</p>
                        <div class="graphie" data-update="main">
                            graph.slider.moveTo(3, 0);
                        </div>
                    </div>
                    <p>Last, we have to figure out how many blocks there would be at any step. We can answer this by thinking "If we are at some step <code>S</code>, how many blocks would there be?"</p>
                    <p>Well, let's start looking at how many blocks there are, and we'll see if there's a pattern.</p>
                    <p>Step 0: <span class="const"><var>pluralTex(START, "block")</var></span></p>
                    <div>
                        <p>We know step 1 has <code><var>START + XS</var></code> blocks, but we can also write it as the number of blocks in step 0, plus the number of blocks we add from step 0 to step 1:</p>
                        <p>Step 1: <code>(</code>Number of blocks in step 0<code>) + <var>XS</var> =</code> <span class="const"><code><var>START</var> + </code></span><span class="lin"><code><var>XS</var></code></span> blocks</p>
                    </div>
                    <p>We can do the same thing with steps 2 and 3, because we know we add the same amount of blocks in each step:</p>
                    <p>Step 2: <code>(</code>Number of blocks in step 1<code>) + <var>XS</var> =</code> <span class="const"><code><var>START</var> + </code></span><span class="lin"><code><var>XS</var> + <var>XS</var></code></span> blocks</p>
                    <p>Step 3: <code>(</code>Number of blocks in step 2<code>) + <var>XS</var> =</code> <span class="const"><code><var>START</var> + </code></span><span class="lin"><code><var>XS</var> + <var>XS</var> + <var>XS</var></code></span> blocks</p>
                    <div>
                        <p>Here, we can see a pattern! The number of blocks in each step can be represented as the sum of <span class="const"><var>pluralTex(START, "block")</var></span> and some number of groups of <span class="lin"><var>pluralTex(XS, "block")</var></span>. How many groups of <var>pluralTex(XS, "block")</var> are there in each step?</p>
                        <div class="graphie">
                            $(".const").addClass("hint_blue");
                            $(".lin").addClass("hint_orange");
                        </div>
                    </div>
                    <p>That's right, the same number as the step they are on!</p>
                    <p>So, we can combine the groups of blocks together to look something like <code><var>START</var> + <var>XS</var> \times S</code>, where S represents which step we are on.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
Something went wrong with that request. Please try again.