Everything you have written so far has been an instruction: draw this, add that, do it again. This topic is about something different — a question.

score > 100

That is a question. It is asking whether the number in score is bigger than 100, and like any question it has an answer. The answer is one of only two things: true, or false. There is no third possibility and no in between.

You can see the answer, because write can draw it just as happily as it draws words and numbers:

write(score > 100, 130, 300);

If score holds 240 the canvas says true. If score holds 60 it says false. Nothing else in the sketch changes — only the word.

There are two signs to know for now:

score > 100 asks whether score is bigger
score < 100 asks whether score is smaller

The wide end of the sign always faces the bigger side, which is a fair way to remember it.

Both sides of a question can be boxes, and either side can be a sum worked out first:

cats > dogs
apples + pears > 300

In these challenges every number is drawn as a bar as long as it is big, so you can see the question as well as read it. Turn the grid on if you want to measure a bar; the numbers along the top are the same numbers you are typing.

One thing to be clear about before the next topic. A question does not do anything. It has an answer and that is all. What happens next — a colour changing, a shape appearing — is the next topic's job, and it is called if.

Last topic a question had an answer and that was the end of it. This topic gives the answer something to do.

if (score > 100) {
shapeColour(GREEN);
}

Read it as a sentence: if score is bigger than 100, pick up a green pen. The question goes in the round brackets. The lines that wait on it go in the curly brackets.

When the answer is true, the lines in the curly brackets run, and then the sketch carries on underneath as usual.

When the answer is false, those lines are skipped. Not undone, not delayed — skipped, as though they were not there. This is the first time your lines have not simply run one after the other from the top.

That is why a grey badge is worth looking at twice. It is not grey because something said so. It is grey because the pen was already grey and nothing ran to change it.

Anything can go inside the curly brackets. One line, three lines, a whole shape, a background, a number put into a box:

if (temperature > 25) {
backgroundColour(ORANGE);
shapeColour(RED);
}

A box changed inside an if keeps its new number afterwards, so an answer up here can reach a line much further down.

Watch what comes after the brackets, though. If you pick up another colour below the if, that one wins — the last pen named before a shape is the one it is drawn with. That is the same top-to-bottom rule you have always had.

The line at the bottom of every challenge in this course shows you the numbers the question is asking about, so you can always see what it is working from.

One thing an if cannot do yet: say what to do when the answer is false. That is the next topic, and it is called else.

An if on its own can only say what to do when the answer is true. When it is false, nothing happens — and a badge that stayed grey because nothing happened is a strange thing to have to explain.

else is the other half.

if (score > 100) {
shapeColour(GREEN);
} else {
shapeColour(RED);
}

Read it as one sentence: if score is over 100 use green, or else use red. The else has no question of its own. It does not need one, because it means everything the if did not catch.

Exactly one of those two blocks runs. Never both, never neither. That is worth saying plainly, because it is what makes an else so restful to read: whatever happens, you know something happened.

Notice what you no longer need. In the last topic every badge had a grey pen picked up first, in case the if did not run. With an else naming a colour on each side there is nothing for a fallback to cover, so it can go.

Either side can hold as many lines as it likes, and they need not do the same kind of thing:

if (score > 200) {
howBig = 260;
} else {
howBig = 100;
}

A colour, a size, a place, a whole background, even a different shape altogether. The one rule is that the else comes straight after the if's closing curly bracket, on the same line as it in these challenges.

Two questions written one after another are two separate decisions. Ask the same thing twice with the colours swapped over and you get two lamps, exactly one of which is lit.

So far every question has been the same one: is this bigger than that. The next topic has the rest of them.

Three topics, and every question has asked the same thing: is this bigger than that. There are five signs altogether, and here they all are.

score > 100 bigger than
score < 100 smaller than
score == 100 exactly the same as
score != 100 not the same as
score >= 100 bigger than, or the same as
score <= 100 smaller than, or the same as

The first two you know. The wide end of the sign faces the bigger side.

The same one is two equals signs, not one. This matters more than it looks. A single equals sign is the one that puts a number into a box — score = 100 changes score. Two equals signs ask a question and change nothing. Writing one where you meant two is the most common mistake there is in this whole business, and nothing goes wrong loudly when you do it.

Not the same is an exclamation mark in front of the equals sign. Read it as "is not". score != 100 is true for 99, for 101, for anything at all except 100.

Then the two with an equals sign underneath. score >= 100 is bigger than or the same as. These only ever differ from > and < at one single number: the one on the line. Everywhere else they agree exactly. So when you are choosing between > and >=, the only question worth asking is what should happen when the value lands exactly on the mark.

All five are in the Reference drawer beside the editor, written out in words, if you ever need reminding which is which.

Words work the same way as numbers with == and !=, and the quote marks matter:

if (name == "ada") {

Without the quote marks the sketch goes looking for a box called ada and does not find one. With them, it is the word itself.

One thing none of these can do yet. A mark of 72 is not a fail and not top of the class, and an if with one else can only tell two things apart. Three bands need something new, and it is next.

An if with one else can tell two things apart, and that is all. A mark of 72 is not a fail and not top of the class, so two outcomes are not enough.

else if is an else with a question of its own.

if (mark >= 80) {
shapeColour(YELLOW);
} else if (mark >= 50) {
shapeColour(GREEN);
} else {
shapeColour(RED);
}

Read it from the top. Is the mark 80 or more? If so, gold, and the sketch walks straight out of the chain — nothing below is even looked at. Otherwise, is it 50 or more? And if none of the questions said true, the else on the end catches whatever is left.

THE FIRST TRUE ONE WINS. This is the whole idea, and it is what makes a chain different from a row of separate ifs. A mark of 90 is over 80 and over 50 as well, and both questions would say true if they were asked — but the second one never is.

That is also why order matters so much. Put the widest band at the top and it swallows everything meant for the narrower ones underneath it:

if (mark >= 20) {
shapeColour(RED);
} else if (mark >= 80) {

Every mark of 20 or more comes out red, and the gold band is never reached at all. Nothing errors. The picture is simply wrong. Ask about the narrowest band first and work outwards.

The else on the end is optional. Leave it off and a value that fits no band means nothing happens at all — which is Topic 2's grey badge again.

The last thing here is the one to be careful about for the rest of your life.

if (mark = 40)

That is one equals sign, and it does not ask anything. It puts 40 into mark and then treats the box it has just filled as an answer, which always comes out true. Nothing errors, nothing complains, and the number you were comparing has been quietly overwritten. Two equals signs ask. One puts a value in a box. If a chain is behaving as though the first band always wins, count the equals signs first.

Last topic ended with four drawBadge lines saying very nearly the same thing. A loop already knows how to repeat a line like that. Put the question inside it and one decision covers the lot.

for (var i = 0; i < 6; i = i + 1) {
if (i > 2) {
shapeColour(RED);
} else {
shapeColour(CYAN);
}
circle(40 + i * 64, 170, 54);
}

The if is asked again on every single turn, with whatever the counter is holding at that moment. Six turns, six answers, and the row comes out split.

The counter starts at 0. That matters more here than anywhere else, because a question about the counter is really a question about position in the row. i > 2 leaves the first three alone and catches the last three. i == 3 picks out the fourth circle, not the third.

The question does not have to be about the counter. Work something out first and ask about that instead:

var howTall = 40 + i * 44;
if (howTall > 160) {

and the row becomes a chart with its tall bars called out.

A chain fits inside a loop exactly as a single if does, so every turn can walk a queue of bands.

Then there are two counters. A grid is a loop inside a loop, and with both counters in hand you can ask a question that compares them with each other:

if (row == col) {

That is true only where a square is as far across as it is down — a diagonal, drawn without ever naming a single one of its squares. Ask it with a bigger or smaller sign instead and it cuts the grid in half along that same line.

One thing to watch when you are working out a picture. In a loop it is the SIGN that changes everything and the number that changes very little. Get the number wrong by one and a single shape moves; get the sign the wrong way round and the whole row swaps over.

And one thing a single if still cannot do: colour the middle of a row. That is far enough along AND not too far, which is two questions at once. Next topic.

Last topic could not colour the middle of a row. Far enough along and not too far is two questions at once, and an if only holds one.

There are two ways to join a pair of questions into a single one.

if (i > 1 && i < 5) {

Two ampersands mean AND. The joined answer is true only when both halves are true. One half false and the whole thing is false, however good the other half was.

if (acrossPos < 100 || acrossPos > 300) {

Two upright bars mean OR. The joined answer is true when either half is — one, the other, or both. It is only false when neither of them holds.

These two are the only things in the whole taught language that are punctuation rather than words. There is a reason: the friendly names on this site are given to commands, and a joiner is not a command. The reference drawer has them written out in words if you need reminding which is which.

The way to picture them is to look at how much each one catches. On a grid, row == 0 || col == 0 catches a whole row and a whole column — an or is generous. Change nothing but the joiner and row == 0 && col == 0 catches one single square, the one where they cross. And is fussy.

Two questions can be about the same number, which is what makes a gate:

if (acrossPos > 100 && acrossPos < 300) {

Past the left post and before the right one. That is a band, a middle, an inside, and it takes no else if at all.

Brackets group a joined question so it can be joined again:

if ((row == 0 || row == 3) && (col == 0 || col == 3)) {

At one end of the rows, and at one end of the columns. Which is the four corners.

One caution. Both halves have to be whole questions. Writing acrossPos > 100 && < 300 does not work — the second half has nothing on its left to be about, and it has to say the name again.

You have seen this line before. It has been sitting in your animation challenges since the bouncing topic, always written for you, always with a comment above it explaining what it did:

if (x > 360) {
speed = -speed;
}

Now you know exactly what it is. A question asked once on every single frame, and a line that only runs on the frames where the answer is true.

Nothing about it is special. x climbs by the speed every frame; on most frames the question is false and nothing happens; on the one frame where x finally gets past 360 the speed is turned into its own negative, and from then on adding it takes the ball back the other way.

Two walls are two questions, one for each end, and only one of them can be true at a time. Two numbers moving is a ball in a box: across and down each get a speed and a pair of questions, and they know nothing about each other.

The number that turns round does not have to be a place. Make it a size and the same recipe gives you something that swells and then shrinks.

Instead of turning round, a question can put a number back where it started:

if (x > 440) {
x = 0;
}

which runs the ball off one edge and back on at the other. Wait until it is properly off the canvas or it will jump while you are still watching it.

distance works out how far apart two points are, so a question about it is how a sketch knows two things have met:

if (distance(x, y, 200, 180) < 110) {

Everything from the last seven topics still works here. A chain turns a journey into three coloured stretches. A joined question makes a gate the ball lights up as it passes through. A loop with a question inside it gives every ball in a row its own answer, on every frame.

Press Try to watch any of these run past the frames the marking uses. Run is what gets marked, and the readout along the bottom shows you what your numbers are doing on the frame you are looking at — drag the playbar and step through it one frame at a time if a wall is not doing what you expected.

This is the last topic of the course, and the decisions are yours now.

Up to here every question was written for you and you filled in a number, a sign or a joiner. From now on the lines themselves are missing, and each gap has a comment sitting directly above it saying what belongs there. That comment is the instruction. Read it as a sentence:

// choose the colour: green
// circle(across, down, wide)\n // 200 across, 170 down, 190 wide
// turn speed into its own negative

An empty block is not an error. The question is still asked and the block still runs; it simply does nothing, so a grey badge or an empty canvas is telling you exactly which line is missing rather than shouting at you.

Then the questions go too. A hole in the round brackets wants a whole question — a name, a sign, and something to compare it against:

// is mark 80 or more
if (mark >= 80) {

Everything you have learnt about them still applies. Ask about the narrowest band first in a chain. Both halves of a joined question have to say their name. Two equals signs ask and one puts a value in a box.

The last five move, and the frame contract comes back with them: the readout along the bottom shows what your numbers are doing on the frame you are looking at, so if a wall is not catching the ball, step through it and watch the number go past.

That is the whole course. A comparison is a question and its answer is true or false. An if lets the answer decide whether some lines run. An else says what to do instead. There are five signs and two ways of joining a pair of questions. A chain asks them in order and the first true one wins. And a question asked inside a loop, or once per frame, decides a whole picture rather than a single shape.

The editor is empty. There is no code to fill in, no highlighted holes, and nothing to read except the description at the top of the page.

The row of buttons above the editor is the block palette. Each one drops a ready-made piece of code in at the cursor — everyFrame, a for loop already counting 0 to 4, an if with a working question in it, an else. Click one, then edit the numbers and names inside it until it says what you want.

The if button gives you this:

if (frameNumber > 10) {

}

which is a real question about a real number, so it runs as it stands. Change what it asks about and what goes inside it.

Everything in this topic asks its question about something that CHANGES. That is not decoration. A question about a number that never moves always gives the same answer, so it may as well not be there — and you would be quicker drawing the picture by hand. Put the if inside a loop and the counter changes it on every turn. Put it inside everyFrame and time changes it.

Read each description as a list of instructions in order. It tells you how many shapes there are, where the first one goes, how far apart they are, what the question asks and what each answer does. Everything you need is in it, and nothing that is not.

There is no readout along the bottom in this topic. Turn the grid on if you want to check where your shapes have actually landed, and press Try to watch an animation run past the frames the marking uses.

Nothing here is new. It is the same eight topics, with the page left blank.