Guide

How B4Coder works

What every block does, when to use it, and an example you can open and run. Stuck on something? Search below, or look in Common questions.

Getting started

New here? Follow the learning path on the Start here page: learn the basics, see examples, try it yourself, play Story Mode, take on challenges, then build your own.
Every step is open, so jump in wherever you like. Steps you've done get a tick.

In Story Mode your flowchart drives a cartoon story. Build on one side, press Run, and the scene acts out every block.
Each mission says what to build and which blocks to use, with a How to use link for each one. Stuck? Press Show a hint.
Stories get harder one by one: from Rahul's morning walk to a hotel kitchen, a supermarket and a pet shop with objects and classes.

A program is a set of blocks joined by arrows. It always begins at Start and follows the arrows, one block at a time, until it reaches End.
Each block does one small job: ask a question, show a message, remember a value, make a choice or repeat something.
Blocks run in the order the arrows go, not the order you added them.

Tap a block in the Blocks list to add it after the selected block, or drag it onto the canvas.
To join two blocks, drag from the dot at the bottom of one block to the other block. Let go on empty space to pick a new block to put there.
Click the + on any arrow to slip a new block in between.
Click a block to change what it does in the panel on the right. Press Delete to remove it.
Auto layout lines blocks up for you. Switch to Free move to drag them wherever you like.

Run plays the whole program. Step runs just one block, so you can watch it think. Reset starts over.
Pick 🐢 Slow, 🚶 Normal or ⚡ Fast to choose how quickly it runs.
The Output tab shows everything your program says, and your answers. Values shows what each value holds right now. Steps lists every block that ran.
The block that is running glows. If something goes wrong, the block turns red and FlowBot explains what happened.

Examples, Challenges, Story Mode and Build Your Own across the top each open a list. What you pick opens in its own tab, like a web browser, and the button for it stays lit.
Save keeps your program in your account: sign in first (it's free). Find it again under ▾ → Open Program, on any computer. Open tabs also come back if you refresh the page.
▾ → Share with a Link gives you a link to send to a friend or teacher. They see your program and can open their own copy.
A tab with an amber dot has changes that aren't saved. B4Coder asks before closing it.
View Code shows your program as real code: pick Python, Java, C++, C# or JavaScript.

Tap a block to see what it does, what to fill in, and an example you can try.

Start

Talk

Values

Decide

Repeat

Lists

Functions

Objects

Finish

Many boxes take a value: a number, some text, a name, or a sum that works one out.

Numbers are typed plainly: 7, 3.5, -2.
Text goes in double quotes: "hello". Single quotes don't work.
Value names are one word, with no quotes: score, firstName.
true and false are the answers to yes-or-no questions.
Lists go in square brackets: ["red", "blue"], or [] for an empty one. colours[1] is the first item.

Symbols
Symbol	Means	Example
`+`	add numbers, or join text	`3 + 4` is 7, `"Hi " + name`
`- * /`	take away, times, divide	`10 / 4` is 2.5
`%`	remainder after dividing	`10 % 3` is 1
`== !=`	is equal to, is not equal to	`answer == 42`, `colour != "red"`
`> < >= <=`	bigger, smaller, at least, at most	`age >= 13`
`&&`	and: both must be true	`age >= 13 && age <= 19`
`\|\|`	or: at least one is true	`day == "Sat" \|\| day == "Sun"`
`!`	not: flips true and false	`!contains(word, "a")`
`( )`	work this part out first	`"Sum: " + (a + b)`

Use them in any box, like round(price, 2).

round(number) or round(number, digits): Rounds to the nearest whole number, or to that many decimal places.
floor(number): Rounds down to a whole number.
ceil(number): Rounds up to a whole number.
abs(number): Makes a number positive: abs(-5) is 5.
sqrt(number): Square root: sqrt(16) is 4.
power(number, times): Multiplies a number by itself: power(2, 3) is 8.
min(a, b, …) or min(list): The smallest of some numbers, or of a list.
max(a, b, …) or max(list): The biggest of some numbers, or of a list.
random(lowest, highest): A random whole number between the two, including both.
length(list or text): How many items are in a list, or letters in some text.
upper(text): The text in CAPITAL letters.
lower(text): The text in small letters.
contains(list or text, thing): True if the list has that item, or the text has those letters: contains("hello", "ell").
join(list) or join(list, between): Turns a list into text: join(["a", "b"]) is "a, b".
split(text) or split(text, between): Cuts text into a list: split("red blue green") is ["red", "blue", "green"]. Say what to cut at: split("a-b", "-").