Four panes — visuco

Challenge 13 of 20

Three panes are placed and the fourth completes the square, gap right and gap down from the first. Writing it as gap rather than as a number is what keeps all four evenly spread.

Write the line for the fourth pane.

Your code JavaScript

Write the line for the fourth pane.

Console print() output

0 / 30 frames · 400×400

Target

Yours

Results

Press Run to check your code

Penalties: none this run

Report this challenge

Lesson Put It All Together

Everything from this course in one place: number variables, words, the four sums, and placing shapes with width and height.

As in the last topic of Course 1, each picture has missing lines with a // comment above telling you what to write. The difference is that positions should now be worked out from variables rather than typed as fixed numbers. If a comment says "60 left of the middle", that is width / 2 - 60, not 140.

It gives the same answer today, but it says why. Written that way the picture still holds together if a number above it changes, and it reads as a description of the drawing rather than a list of measurements someone once took. That is the habit worth building.

Two things make these easier than they look. Most pictures are symmetrical, so a line you have already written is usually most of the next one — copy it and change the number that differs. And where a value is already sitting in a box, use its name rather than the number inside it.

Take the lines one at a time and press Run after each. A picture that is half right scores partly right, so you can watch yourself getting closer rather than guessing at the end.