Playground Guide — Learn to Code!

🌟

Welcome to Playground!

Here's everything you need to know to start building

🧱

Blocks are your tools

Every instruction in your program is a colorful block. Drag them onto the canvas to build!

🔗

Snap them together

Blocks connect like puzzle pieces. Drag one close to another and they'll snap together automatically.

▶️

Press Run to go!

When your blocks are connected, press the Run ▶ button and watch your program come to life.

💡

The Code Panel shows your work

On the right side of the screen, you can see your program written out in real code — automatically!

⭐

Every program needs a 🟢 Start block at the top and a 🔴 End block at the bottom. Think of them like the covers of a book — your program lives in between!

🖥

The Playground Screen

Let's explore what everything does

Block Palette

🟢 Start

💬 Say

🔁 Repeat

📦 Set

...more blocks!

Canvas — Build Here! 🎨

🟢 Start

💬 Say "Hello!"

🔴 End

Code Panel

start
  say "Hello!"
end

👈 Drag blocks from here

Drop them here and connect them!

Your code appears here ✨

1
Left panel = Block Palette. All your blocks live here, sorted into groups. Scroll down to find more!
2
Middle = Canvas. This is your workspace. Drag blocks here and snap them together to build your program.
3
Right = Code Panel. As you add blocks, real code appears here automatically. Pretty cool, right?
4
Top bar. Has the ▶ Run button, Save, Load, and other tools. Press Run when you're ready to go!

🎮

Control Blocks

Every program needs these two!

🟢 Start

Start Free

The beginning of your program

The Start block is where your program begins. Every program must have one. It's like pressing the "go" button — when you run your program, it starts right here and works its way down through all your blocks.

💡 Think of it like: The first page of your story. Everything begins here!

🔴 End

End Free

The finish line of your program

The End block tells your program to stop. Every program needs one at the very bottom of your block chain. Without an End block, Playground won't know where your program finishes!

💡 Think of it like: The last page of your story. This is "The End!"

🟢 Start

💬 Say Hello World!

🔴 End

start
  say "Hello World!"
end

💬

Talk & Ask Blocks

Make your program speak and listen!

💬 Say

Say Free

Print words to the screen

The Say block makes your program print words in the Output box. Type anything you want in the white box — your program will show it when it runs! You can also use a variable by typing $name (with a dollar sign) to show what's stored in that variable.

💬 Say

→ prints: Hello!

💬 Say

→ prints: Hi Alex!

🌟 Try it! Type your own name in the box and run it. Your program just said your name!

❓ Ask

Ask Starter

Ask the user a question and remember the answer

The Ask block pauses your program and pops up a question for the user to answer. Whatever they type gets saved into a variable so you can use it later. The first box is the variable name (where to save the answer), and the second box is the question to ask.

Example — Greeting Program

🟢 Start

❓ Ask name "What is your name?"

💬 Say "Hi $name! Welcome!"

🔴 End

💡 Remember: The dollar sign $ in front of a word means "show the value stored in this variable." So $name shows whatever name the user typed!

🔁

Loop Blocks

Do things over and over without repeating yourself!

🤔

Imagine you want to say "Hello!" 100 times. Would you drag 100 Say blocks? No way! That's what loops are for — they let you do something many times with just one block!

🔁 Repeat times

drag blocks here

Repeat Free

Do something a set number of times

The Repeat block runs everything inside it a certain number of times. Change the number to control how many times it repeats. The special variable $count tells you which time you're on (1, 2, 3...).

Example — Count to 5

🟢 Start

🔁 Repeat 5 times

💬 Say $count

🔴 End

Output: 1 2 3 4 5

🌟 Super power: Use $count inside a Repeat block to know which round you're on!

♾ Forever

drag blocks here

Forever Starter

Keep going until you stop the program

The Forever block loops endlessly — it never stops on its own! It's perfect for animations and games where you want something to keep happening. Use it with a Wait block to create smooth animations.

⚠️ Heads up! Forever loops never end by themselves. Press the Stop button to end your program!

🔀

Decision Blocks

Let your program make choices!

🤖

Programs aren't just one straight path — they can make decisions! "If the score is high, say congratulations. Otherwise, say try again!" That's what If/Else does.

🔀 If

✅ if true → blocks here

else

❌ if false → blocks here

If / Else Starter

Do one thing or another based on a condition

The If / Else block checks a condition. If the condition is true, it runs the blocks in the top section. If the condition is false, it runs the blocks in the bottom section. You only ever run one or the other — never both!

🔍 Condition examples:

$score > 10

$name == "Alex"

$count >= 5

$lives > 0

Example — Guess the Number Game

🟢 Start

❓ Ask guess "Guess a number 1-10:"

🔀 If $guess == 7

💬 Say "🎉 You got it!"

else

💬 Say "❌ Wrong! It was 7"

🔴 End

📦

Variable Blocks

Store and change information in your program

📦

Think of a variable like a labeled box. You can put a number or word in the box, check what's inside anytime, and swap it out for something new. Name your box anything you want — like score, lives, or name!

📦 Set to

Set Starter

Create a variable or change its value

The Set block creates a variable (or updates it). The first box is the name of your variable, and the second box is what you want to store in it. You can store numbers or words!

📦 Set to

→ score = 0

📦 Set to

→ player = "Alex"

➕ Change by

Change Starter

Add or subtract from a variable

The Change block adds a number to your variable. Use a positive number to go up, or a negative number to go down. Great for score counters and countdown timers!

➕ Change by

→ score goes up by 10

➕ Change by

→ lives goes down by 1

🎮 Game tip: Use score and lives variables with Change blocks to build a real game!

🚶

Motion Blocks

Move your sprite around the stage!

🐢

The sprite is the character on your stage — like a little turtle. Motion blocks tell it where to go. Combine motion with the Pen Down block and your sprite draws as it moves!

🚶 Move steps

Move Starter

Moves the sprite forward. Bigger numbers = more movement!

↩ Turn °

Turn Starter

Spins the sprite. 90° = quarter turn. 180° = U-turn. 360° = full circle!

📍 Go To x y

Go To Starter

Teleport the sprite to exact coordinates. (0,0) is the center of the stage.

Example — Draw a Square! 🟥

🟢 Start

✏ Pen Down

🔁 Repeat 4 times

🚶 Move 100 steps

↩ Turn 90 °

🔴 End

Result: A perfect square drawn on the stage! 🎨

✏

Drawing Blocks

Paint with your sprite!

✏ Pen Down

Pen Down Starter

Puts the pen on the paper! Your sprite will draw a line as it moves.

✋ Pen Up

Pen Up Starter

Lifts the pen up. Your sprite moves without drawing.

🎨 Set Color

Set Color Starter

Changes the pen color! Try: red, blue, #ff6600

🧹 Clear Stage

Clear Stage Starter

Wipes everything off the stage like an eraser. Start fresh!

👀

Looks Blocks

Control how your sprite appears!

🗨 Say

Say Bubble Starter

Shows a speech bubble above your sprite on the stage — like a comic book!

👁 Show Sprite

Show / Hide Starter

Make your sprite appear or disappear from the stage. Great for magic tricks!

🔧

Function Blocks

Give your favourite block groups a name and use them anywhere!

🧩

Imagine you keep using the same 5 blocks over and over. Instead of doing that, you can wrap them up, give them a name, and just call that name whenever you need them. That's a function!

🔧 Define

drag blocks here

Define Builder

Create a named group of blocks

The Define block lets you create your own custom block! Give it a name and fill it with whatever blocks you want. Place it on the canvas separately from your main program.

📞 Call

Call Builder

Run your custom block

The Call block runs your defined function. Just type the same name you used in Define. You can call it as many times as you want!

Example — Use a function!

DEFINE (place separately on canvas):

🔧 Define celebrate

💬 Say "🎉 Hooray!"

💬 Say "You did it!"

MAIN PROGRAM:

🟢 Start

📞 Call celebrate

🔴 End

Runs "celebrate" twice without repeating all those blocks!

🔢

Reporter Blocks

Little blocks that calculate values for you!

🧮

Reporter blocks are small, rounded blocks that calculate something and plug the answer right into another block. Drag them into the input boxes of other blocks — they snap right in!

Math Reporters Starter

5

+

3

10

-

4

6

×

7

20

÷

4

random

1

to

10

Drag these into the input of a Say block, Set block, or If condition. For example, drag a random reporter into a Say block to print a random number!

🎲 Fun idea: Use random 1 to 6 inside a Set block to make a dice roller!

Text Reporters Starter

join

Hello

World

length of

text

Join two words together or count the letters in a word. Great for building messages!

🏁

Event Blocks Pro

React to clicks, keypresses, and messages!

🎮

Events let your program react to things happening — like pressing a key or clicking the sprite. Instead of just running from top to bottom, your program can respond in real time. This is how games work!

🏁 When Flag Clicked

When Flag Clicked

Starts when you press the ▶ Run button. Works like Start but for event-style programs.

⌨️ When Pressed

When Key Pressed

Runs when you press a specific key. Use space, ArrowLeft, a, b...

🖱️ When Sprite Clicked

When Sprite Clicked

Runs when the user clicks on the sprite on the stage.

📢 Broadcast

Broadcast + Receive

Send a message to another chain of blocks! Use Broadcast to send, and When I Receive to listen. Lets two chains talk to each other.

🗑

Removing Blocks

Two easy ways to delete blocks you don't need

🖱️ ✕

Method 1 — The ✕ Button

Hover your mouse over any block and a small ✕ button appears in the top-right corner. Click it to delete just that block. Clean and easy!

💬 Say Hello! ✕

← hover to see the ✕

🗑️ 👋

Method 2 — Drag to Trash

Drag any block to the 🗑 Delete Zone in the bottom-right corner of the canvas. When it glows red, let go! Warning: this also deletes all blocks connected below it!

⚠️ Careful! The ✕ button only removes ONE block. Dragging to trash removes it AND everything below it.