1.1topic

Sets the topic label displayed above the concept web diagram.

topic 'Concept Web'

1.2instructions

Sets instructions text displayed below the topic label. Supports markdown formatting for lists and emphasis.

instructions 'Drag the correct concepts onto the matching nodes.'

Multiline with markdown:

instructions `
- Drag concepts from the tray onto the correct nodes
- Green means correct, red means incorrect
`

1.3anchor

Defines the central anchor concept placed at the center of the diagram. Every connection automatically has a solid edge to the anchor.

anchor text 'Hub' {}

1.4connections

Defines a list of peripheral connection nodes arranged radially around the anchor. Style keywords (w, h, rounded, bg, color, border) on the continuation set defaults for all children; per-connection overrides win. Do not add {} after the closing ] unless connections is at the end of the program; style keywords or the next function in the program provide the continuation value.

connections [
  connection text 'Foo' {},
  connection text 'Bar' {}
]

With shared styles:

connections [
  connection value 'A' bg 'red-200' {},
  connection value 'B' {}
] w 24 h 12 bg 'blue-100' rounded 'lg' {}

1.5connection

Defines a single peripheral connection (arity 1). Properties like text and assess are passed through the pipeline.

connection text 'Foo' assess [method 'value' expected 'Foo'] {}

1.6value

Sets the scoring value for a concept. This is compared against expected during assessment. Also serves as the default display text unless overridden by text or image.

value 'Hub'

1.7text

Overrides the display text for a node or concept. When set on a concept, the value is still used for scoring.

text 'Hub'

1.8assess

Sets assessment configuration for a node. Takes a list containing a single pipeline of method and expected.

assess [method 'value' expected 'Hub']

1.9method

Sets the assessment method. Accepts either the string 'value' or the tag VALUE. Both are normalized to the string "value" in the compiled output.

method 'value'
method VALUE

1.10expected

Sets the expected correct value for assessment.

expected 'Hub'

1.11concepts

Defines a list of tray concepts that students can drag onto concept web nodes. Concepts render as badges in a tray alongside the diagram. Style keywords on the continuation set defaults for all children. Do not add {} after the closing ] unless concepts is at the end of the program; style keywords or the next function in the program provide the continuation value.

concepts [
  concept text 'Answer A' {},
  concept text 'Answer B' {}
] align RIGHT {}

1.12concept

Defines a single tray concept (arity 1). Properties like text and image are passed through the pipeline.

concept text 'Answer A' {}

1.13image

Sets an image URL for a tray concept. The image is displayed in the badge and on the node when the concept is dropped.

concept image 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Circle_-_black_simple.svg/120px-Circle_-_black_simple.svg.png' {}

1.14align

Sets the tray position relative to the concept web diagram. Accepted tags: RIGHT (default), LEFT, TOP, BOTTOM.

align RIGHT

1.15edges

Defines a list of edge definitions for custom edge rendering. When omitted, solid edges are automatically drawn from the anchor to each connection. When provided (even as an empty list), only the specified edges are rendered. Style keywords on the continuation set defaults for all children.

Assessment validation considers edge properties: positions with identical edge configurations (same type, text, image, and connected nodes) are interchangeable — swapping values between them is valid. Positions with different edge configurations require exact matching.

edges [
  edge from 'Hub' to '*' type 'solid' {},
  edge from 'Foo' to 'Bar' type 'dashed' text 'related' {}
] {}

1.16edge

Defines a single edge (arity 1). Properties like from, to, type, text, and image are passed through the pipeline.

edge from 'Hub' to '*' type 'solid' {}

1.17from

Sets the source node(s) for an edge. The value is matched against node value strings. Accepts a single string or a list of strings. The special value '*' means all nodes except those specified in to.

from 'Hub'
from ['Hub', 'Foo']
from '*'

1.18to

Sets the target node(s) for an edge. The value is matched against node value strings. Accepts a single string or a list of strings. The special value '*' means all nodes except those specified in from.

to 'Foo'
to ['Foo', 'Bar']
to '*'

1.19type

Sets the edge type. Accepted values: 'solid' (default), 'dashed', 'solid-arrow', 'dashed-arrow'.

type 'solid'
type 'dashed-arrow'

1.20relations

Defines a list of relation labels that students can drag onto edges. Relations render as badges in a tray alongside the diagram, similar to concepts but for edges. Use align to position the relations tray. Style keywords on the continuation set defaults for all children. Do not add {} after the closing ] unless relations is at the end of the program; style keywords or the next function in the program provide the continuation value.

relations [
  relation value 'causes' {},
  relation value 'inhibits' {}
] align BOTTOM {}

1.21relation

Defines a single relation label (arity 1). Properties like value, text, image, and style keywords (bg, color, border, rounded) are passed through the pipeline. The value is used for scoring; text or image override the display. Style keywords apply to the tray badge and carry through to the edge label when placed.

relation value 'causes' {}
relation value 'inhibits' text 'Inhibits →' {}
relation value 'enables' image 'https://...' {}
relation value 'activates' bg 'green-100' color 'green-800' border 'green-400' {}

1.22w

Sets the width of a node in Tailwind spacing units (1 unit = 4px). Can be applied to anchor, connections, concepts, edges, and relations. When used on a list container (e.g. connections), it sets the default width for all children.

w 24

1.23h

Sets the height of a node in Tailwind spacing units (1 unit = 4px).

h 12

1.24rounded

Sets the border radius preset. Accepted values: "none", "xs", "sm", "md" (default for nodes), "lg", "xl", "2xl", "3xl", "full" (circle). Relations default to "xs". Raw CSS values are also accepted as passthrough (e.g. "50% / 25%" for different horizontal/vertical radii).

rounded 'lg'
rounded 'full'
rounded '50% / 25%'

1.25bg

Sets the background color using a Tailwind color name.

bg 'blue-500'
bg 'indigo-100'

1.26color

Sets the text color using a Tailwind color name.

color 'white'
color 'zinc-800'

1.27border

Sets the border color using a Tailwind color name.

border 'zinc-400'
border 'blue-600'

1.28theme

Select a theme and render the theme toggle button to allow users to set the theme. The tag values DARK and LIGHT are the only accepted argument values.

theme DARK