Shape Widget

The shape widget is primarily visual. Use it to frame content, point attention, create dividers, add a decorative accent, or build a simple layout system on the canvas.

Choosing a shape

When you add a shape from Lesson Widgets, the Configure dialog opens straight to the shape library so you can pick what you actually want instead of restyling a rectangle. You can reopen it any time: select the shape and click ⚙ Configure, or double-click the shape on the canvas.

Shapes are grouped the way you'd expect to browse them:

• Basic shapes — rectangle, circle, ellipse, pill, triangle, right triangle, diamond, parallelogram, trapezoid, cross.
• Polygons — pentagon, hexagon, heptagon, octagon, decagon, dodecagon.
• Stars — 4-, 5-, 6-, and 8-point stars, plus a sparkle, a burst, and an asterisk.
• Arrows — block arrows pointing in any direction, a double-headed arrow, a chevron, a thin arrow, and a plain line.
• Speech bubbles — a speech bubble and a thought bubble.
• Organic shapes — cloud, heart, teardrop, flower, and blob.
• Banners and cogs — banner, ribbon, and cog.
• Exact shapes — Custom: exact corners, a shape you draw corner by corner for geometry lessons. See Exact shapes for card sorts.

A live preview sits beside the library, so you can see the shape at its real proportions and colours before you save.

Shapes with options

Some shapes have a dial or two of their own. Those controls appear under the library once you pick the shape, and only for shapes that have them:

• Polygon — Sides (3 to 12), so one shape covers everything from a triangle to a dodecagon.
• Star, burst, and asterisk — Points and Point depth. Deeper points make a spikier star; shallower points make a rounder, softer one.
• Sparkle — Points (3 to 12).
• Block arrow — Direction (right, left, up, down) and Two heads to point both ways.
• Chevron — Direction.
• Cog — Teeth (5 to 24).
• Flower — Petals (3 to 16).
• Blob — Roundness and Wonkiness. Roundness softens the corners; wonkiness makes the edges uneven, so no two blobs look stamped from the same mould.

Picking a shape from the library always gives you that shape's standard options. If you tuned a hexagon to nine sides, choosing Hexagon again gives you the six-sided one. The same goes for a detour: tune a blob, switch to a star, then pick Blob again, and you get a standard blob, not the one you tuned. Pick the shape first, then adjust its dials.

Exact shapes for card sorts

Pick Custom: exact corners when the shape itself is the lesson: a "triangle or not?" sort, "which ones are rectangles?", or a shape next to its near-miss. The editor under the library is the same one shape choices use:

• Kind and Corners: start from a triangle, rectangle, square, rhombus, trapezoid, hexagon, circle or oval, then drag the corners on the grid to make it skinny, long and thin, or lopsided. Custom takes any number of corners.
• Turn: turn it in 15° steps, or click Upside down.
• Near-miss: a shape that looks almost right but isn't: One curved side (a pizza slice), Rounded corners, Gap in one side, Wavy side, or Cut corner (four sides, almost a triangle).
• Description: what a screen reader says for the card, By sides and corners ("a shape with 3 straight sides and 3 corners, upside down") or By name ("a triangle, upside down").

Resize the shape on the canvas to make it bigger or smaller; it keeps its proportions. Its colours come from Style & Layout, like any shape. A shape with a gap is always drawn as an outline, since a fill would close the gap.

To show a shape cut into equal parts, or to let students do the cutting, use Equal Shares instead. A shape widget is a picture; Equal Shares works out the parts and checks them.

To build the sort, make each card an exact shape, make it draggable, and add a Drop Bucket for each group ("Triangles", "Not triangles"). A screen reader names each card by its description unless you write alt text, so the card is never announced by its answer. The Is it a triangle? pattern walks through a whole lesson. The tutorial Sort rectangles from shapes that aren't builds a sort step by step, and shows why a rectangle sort needs your own alt text: the generated description counts sides and corners but doesn't say whether the corners are square.

Colour, outline, and corners

Fill, stroke colour, stroke width, corner radius, and layout live in the Style & Layout section of the properties panel on the right — the settings you come back to while you're arranging a scene, rather than the one-time "which shape?" decision. Corner radius applies to rectangles; for a fully rounded rectangle, pick the Pill shape instead.

A line and a thin arrow are drawn in the stroke colour, so Fill is hidden for them while a stroke colour is set. Clear the stroke colour and they use the fill colour instead.

Select several shapes at once and the panel lets you set fill, stroke colour, and stroke width on all of them together. Corner radius shows up there only when every shape you selected is a rectangle.

Making a shape clickable

Give a shape an On Press interaction and students can click or tap it, like a button. Write alt text for it, too, such as "Go to the next page". That's what a screen reader says for the shape. If you leave it blank, or as the starting text "Shape", the screen reader just says the shape's name ("Block arrow"), which tells a student nothing about what pressing it does. A shape with alt text and no On Press is read out as an image. A shape with neither is treated as decoration and skipped. _Example: Describe your pictures for screen-reader users names an arrow Next page and leaves two decorative sparkles as Shape._

For a step-by-step walkthrough, follow the tutorial Draw a life-cycle diagram with shapes and arrows. To draw a Venn diagram, two circles lowered to about 60% Opacity so their colours mix where they overlap, see Compare frogs and toads with a Venn diagram. See Configuring a Shape for the dialog itself, Widgets and Widget Settings for how Configure and the sidebar divide up a widget's settings, and Typography and Fonts for pairing shapes with text.

Grading setup

Shapes are not graded. They are support elements for clarity, emphasis, and visual rhythm.

How to set up the content

Choose the simplest shape that solves the visual problem. Use lines, arrows, and chevrons to direct attention. Use rectangles, pills, or circles to create callouts or highlight zones. Save the decorative shapes — stars, hearts, sparkles, banners — for moments that earn a little celebration.

Useful setting combinations

• Rectangle + light fill + thin stroke:

Best for direction panels and feedback boxes.

• Line, arrow, or chevron + strong stroke:

Best for guiding attention to part of a diagram.

• Circle, star, or sparkle + bright fill:

Best for badges, callouts, and celebration moments.

• Speech bubble + text on top:

Best for a character's line of dialogue or a hint from a narrator.

• Blob or flower + soft fill, behind other widgets:

Best for a warm background accent that doesn't compete with content.

• Locked shape + text above it:

Best for reusable layout structure that should not move accidentally.

Strong use cases

• Framing a hint or feedback area.
• Drawing attention to a key part of a diagram.
• Building a visual step sequence with arrows or chevrons.
• Giving a scene a friendly accent — a cloud, a heart, a blob — without adding an image to load.

Great pairings with other widgets

• Pair a shape with text to create a callout box.
• Pair a speech bubble with text so a prompt reads as someone speaking.
• Pair it with image to highlight a region without using grading.
• Pair it with button to make an action area feel more intentional.
• Pair it with score to visually separate progress feedback from the rest of the scene.