Printable Blocks

[sway1233]

Hi,

As a teacher, it would be really useful if there was some kind of vector image version of the blocks which I could print out on A3 paper to make blocks we could move around the classroom. It's easier for primary school children to be able to build their programs using a select number of blocks and to move them around and explain their program before they make it.

I have attached a similar example that I do with Scratch blocks to help children transition to Python.

As well as this, I have attached the current screenshot which I am using tomorrow.

The children will use all of these blocks to make the 'Rock, Paper, Scissors' program. In the early stages of programming, they're learning to recognise what the blocks do and to apply core concepts such as variables, so they're given the blocks to arrange appropriately. At the moment, they're not all the 'proper' colours (as they're not attached within the program) and they're quite small.

Being able to select certain blocks to print would be ideal, so that I could make a big set to have out in the classroom.

[DavidWhaleMEF]

I spotted some 'magic' going on in the CSS/JS of the docs pages, that renders visual blocks based on the markdown in github. I wonder if part of that could be leveraged to create a page with infinitely scaleable images on that teachers could then print out and cut out for lessons?

This sort of thing is especially useful in primary schools with the younger children, but it would need to be visually accurate (and hence the lack of colours when blocks are not docked causes a problem, as does print resolution).

[riknoll]

One issue here is that Blockly blocks stretch. For example, the variables in your code wouldn't fit inside the equals blocks. If you right click on the block you can select "External Inputs" to make them more print friendly (but much uglier).

[abchatra]

Can download screenshot be used to print?

[pelikhan]

The download screenshot is rendered 4x the screen resolution so it's pretty good already. Probably good enough for the printer quality.

[sway1233]

The problem with the screenshot is all the blocks have to be clipped together. I don't want the children to know which blocks connect to which by matching the cut lines but instead by thinking of which blocks they need. Also, to screenshot and print each block, cropped and organised to an A3 page is a big job!

For growing blocks, a 'standardised' size for a blank hole would be best. Doesn't matter if they wouldn't all fit, as long as they get the idea that it's a field to put things in.

[jaustin]

So it sounds like the request is almost that we'd like to be able to print the 'blank' boxes in the toolbox. As they're defined in SVG this might also be really useful for people making posters and other things. I know ARM made some posters earlier in the year and needed to generate images of the blocks for them.

I optimistically tried "SVG Crowbar" bookmarklet http://nytimes.github.io/svg-crowbar/ but it can't make sense of the MakeCode DOM, by the looks of things.

[pelikhan]

You can use the "```shuffle" fenced code section in our docs to blow apart blocks, given a program.

[jaustin]

Also there are all the blocks in the 'reference' section https://makecode.microbit.org/reference (SVG crowbar worked better on these pages, but there would be a lot of manual work combining the SVGs again)

Peli, if there was an 'all blocks' page, that would be an awesome way to do this..

[DavidWhaleMEF]

Just a note that @jaustin has created a proof of concept of this that we have shared with @sway1233 - hopefully feedback will be good, and we can find somewhere to surface this work in a more public place that others can use too.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.