Scratch is a visual programming language. Because of this, it’s helpful to show what the blocks look like when teaching people to program using this language. Whether you’re creating presentations, planning sheets, or something else, I’ll show you how you can quickly and easily create images of Scratch blocks for these materials. At the end, I have a template you can use to create these blocks directly in Google Docs and Slides just by typing.

Scratch Blocks Generator

This Scratch Blocks Generator by Tim Radvan is great for creating mockups of blocks. On the webpage, type the Scratch blocks in the box, one block per line, in the editor box. As you type, you’ll see your text transformed into Scratch blocks. Animation showing Scratch code being typed and transformed into blocks

Saving Images

You can download your blocks in PNG and SVG formats using the Export buttons. The PNG format is good for plugging and playing. You can insert this type of image into just about any program/app. SVG is a vector format that needs to be opened with more specialized programs and exported into a more common format before it can be inserted into other apps/programs. SVG files offer more editing capabilities, such as making the shapes larger or changing their text.

What do I type?

In the editor, type one block per line. For most blocks, type the exact words that appear in the Scratch blocks. This page lists what needs to be typed for each type of block. Here are a few general-purpose blocks:

Flag

when flag clicked

when flag clicked

Text placeholders

Text placeholders go inside of [ and ]

say [Hello world!]

say [Hello world!]

Number placeholders

Number placeholders go inside of ( and )

wait (3) seconds

wait (3) seconds

G Suite add-ons

If you’re planning to make Scratch materials in Google Docs or Slides, I used Tim Radvan’s generator to create two add-ons that you can use to generate blocks directly in those apps. To use them, follow these steps:

  1. Make a copy of the document you want:
  2. Click the “Scratch Blocks [app]”, “Show Generator” next to the “Help” menu at the top of the screen. This sometimes takes a few extra seconds to appear after you open the document. Screenshot of "Scratch Blocks Slides" menu and "Show generator" button
  3. The first time through, you’ll need to give the add-on permission to run. Click your email address and then “Allow”. The permissions just allow the add-on to insert images into your document/presentation. No data is transferred beyond your computer/Google drive.
  4. Type your blocks code in the white box (same as described above)
  5. Set the image size you’d like to download. Bigger numbers produce larger, more clear pictures but may slow down Google Docs/Slides depending on the number of blocks in your image. Screenshot that indicates where image size field is located

  6. Click “Add Blocks to [app]” Screenshot that indicates where "Add Blocks to Slide" button is located

This add-on is attached to the individual document/slideshow you copy. If you’d like to use it in another Docs/Slides file, you’ll need to make another copy. You won’t see the “Scratch Blocks” menu in documents/presentations unless they are copies of the above templates. You’ll need to authorize the script to run in each copy you make.

Add-on Video:

Tags:

Categories:

Updated:

Get new posts by email: