11
$\begingroup$

Block-based languages use individual "jigsaw puzzle" pieces of code that slot together to build up programs. Commonly the blocks have various obvious protrusions and depressions that make only some combinations of blocks physically able to couple, in order to prevent the formation of syntax or semantic errors. The incompatibility is sufficiently visible that the programmer will understand they cannot put the block there, and not attempt it:

A screenshot of the Scratch events toolbox showing a "when I receive message" block with a rounded top and a small trapezoidal protrusion below, and a "broadcast message" block with corresponding trapezoidal indent above and protrusion below.

How can such a language prevent construction of type errors? Scratch uses rounded rectangles and flattened hexagons for its combined string/number/list and boolean types, with both the blocks and the slots they can be put in taking on these shapes, but we are already close to running out of distinguishable shapes at two:

A screenshot of the Scratch operator toolbox, with two rounded blocks "letter '1' of 'apple'" and "length of 'apple'", and a flattened hexagon "'apple' contains 'a'" block

Most languages have many more incompatible types than this even as built-ins. What mechanism can a block language use to represent and enforce type compatibility of values and expressions?

$\endgroup$
4
  • $\begingroup$ What do you mean by running out of distinguishable shapes? You could have any number of "key" and "lock" patterns on adjacent shapes. $\endgroup$ Commented May 22, 2023 at 23:48
  • $\begingroup$ It is true that you can always make new shapes that are distinguishable to the machine, but it's a person who has to tell them apart at a glance or identify what else is the same shape. I think those are quite limited, but if not then that's an answer. $\endgroup$
    – Michael Homer
    Commented May 22, 2023 at 23:54
  • $\begingroup$ I thought the whole point of visual languages like this is that the human brain is good at identifying shapes at a glance. Just consider for a start +ov*^$ shaped protruberences. Then add colour and put them in a row to mean different. The harder issue is making them meaningful and controlling clutter. $\endgroup$ Commented May 23, 2023 at 0:03
  • $\begingroup$ That sounds like the start of an answer! But yes, the hard part is the hard part. $\endgroup$
    – Michael Homer
    Commented May 23, 2023 at 0:30

3 Answers 3

9
$\begingroup$

One idea might be using symbols or icons that need to match. For example, you could have

,-------------------------------------,
| Letter (    ๐Ÿ”ข ) of (      ๐Ÿ’ฌ ) ๐Ÿ’ฌ |
`-------------------------------------'

into which you can slot

( 1 ๐Ÿ”ข )

( apple ๐Ÿ’ฌ )

,-----------------------------------,
| (    ๐Ÿ’ฌ ) contains (      ๐Ÿ’ฌ ) ? |
`-----------------------------------'

These icons could then be highlighted or flashing if the user tries to insert an expression into a slot with a different type.

$\endgroup$
4
$\begingroup$

One option is to change the visual representation depending on the context. Type compatibility matters while you are choosing where to move an expression block to (i.e. during drag-and-drop), so you could wait until the user selects a block before you visualise where that block can fit.

For example, expressions might all have the same shape, but while the user is dragging an expression block, you draw a "not allowed" symbol ๐Ÿšซ or a "locked" symbol ๐Ÿ”’ in the sockets where that expression cannot be dropped. Perhaps you could also draw a different symbol in the sockets where it can be dropped.

Alternatively, you could have the shapes all be the same, but change the shapes of incompatible sockets only while dragging an expression. Perhaps all expression blocks are round, but when the user drags an expression block, the incompatible sockets become pointy.

This has the drawback that this information won't be visible all the time. But the more information you want to show at once, the harder it will be to show everything in a legible way. By hiding some information when it is not relevant, the information you do show becomes easier to distinguish.

$\endgroup$
3
$\begingroup$

Rewrite of @kaya3 answer.

You can change the mouse shape when the block is above the not allowed socket.

Like this:

enter image description here

And the block doesn't drop in this socket.

$\endgroup$
1
  • $\begingroup$ Adding to this, perhaps graying out everything except the areas where you are allowed to drop the block $\endgroup$
    – Jacob
    Commented May 25, 2023 at 11:13

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .