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.

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 <= 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 < 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 < 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 < 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 < 1) return false;
if (x > 9) return false;
var newx = round((x - 1) / 2);
showStep(newx);
return [newx * 2 + 1, y];
};

In step 0, we have `START` blocks. At each step, we add `XS` more blocks.

So, at step number

`START` `XS`

So, at step number

`S`

, we have`+`

`\times S`

blocks.
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.

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.

We see that there `plural("is", START)` `pluralTex(START, "block")` in step 0. Fill this in the answer box.

graph.slider.moveTo(1, 0);

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.

There are

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 `START + XS``START + XS` - `START` = `XS``plural("block", XS)` added in each step. Fill this in the answer box.

graph.slider.moveTo(3, 0);

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 `S`

, how many blocks would there be?"

Well, let's start looking at how many blocks there are, and we'll see if there's a pattern.

Step 0: `pluralTex(START, "block")`

We know step 1 has

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:`START + XS`

Step 1: `(`

Number of blocks in step 0`) + `

`XS` =`START` +

blocks`XS`

We can do the same thing with steps 2 and 3, because we know we add the same amount of blocks in each step:

Step 2: `(`

Number of blocks in step 1`) + `

`XS` =`START` +

blocks`XS` + `XS`

Step 3: `(`

Number of blocks in step 2`) + `

`XS` =`START` +

blocks`XS` + `XS` + `XS`

Here, we can see a pattern! The number of blocks in each step can be represented as the sum of `pluralTex(START, "block")` and some number of groups of `pluralTex(XS, "block")`. How many groups of `pluralTex(XS, "block")` are there in each step?

$(".const").addClass("hint_blue");
$(".lin").addClass("hint_orange");

That's right, the same number as the step they are on!

So, we can combine the groups of blocks together to look something like

, where S represents which step we are on.`START` + `XS` \times S