`<pegboard/>`

Renders a grid of pegs on a graph

<pegboard/> is a Graphical component that renders a grid of small dots (“pegs”) covering the visible region of an enclosing <graph>. The peg spacing and offset are controlled by dx, dy, xoffset, and yoffset. The pegboard re-tiles automatically as the user pans or zooms the graph.

A <pegboard/> does not, on its own, cause other graphical objects to snap. To make a <point> snap to peg locations, pair the pegboard with an <attractToGrid/> or <constrainToGrid/> constraint using the same dx, dy, xOffset, and yOffset values.

Attributes and Properties

Attributes for `<pegboard>`

Labels (1)

labelIsName

boolean. Default value: false. Whether to use this component's name as its rendered label.

Other (6)

applyStyleToLabel

boolean. Default value: false. Whether to apply this component's selected style to its label.

dx

number. Default value: 1. Horizontal spacing between pegs.

dy

number. Default value: 1. Vertical spacing between pegs.

layer

integer. Default value: 0. Z-order layer index used to stack graphical components (higher values render on top).

xoffset

number. Default value: 0. Horizontal offset of the peg grid origin.

yoffset

number. Default value: 0. Vertical offset of the peg grid origin.

Common to all components (9)

copy

reference. Create an independent copy of another component by reference. Enter a references a $name.

disabled

boolean. Default value: false. Whether this component is disabled and cannot be interacted with.

extend

reference. Extend another component by reference, inheriting its children and attributes. Enter a reference as $name.

fixed

boolean. Default value: false. Whether this component's value is fixed and cannot be modified.

fixLocation

boolean. Default value: false. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

hide

boolean. Default value: false. Whether to hide this component from the rendered output.

isResponse

boolean. Default value: false. Whether this component is treated as a response for the purposes of assessment.

name

text. The name used to reference this component from elsewhere in the document.

styleNumber

integer. Default value: 1. The style number used to select this component's visual styling from the available style definitions.

Properties for `<pegboard name="p">`

Labels (2)

$p.label

label. The label rendered with this component.

$p.labelIsName

boolean. Whether to use this component's name as its rendered label.

Other (10)

$p.applyStyleToLabel

boolean. Whether to apply this component's selected style to its label.

$p.disabled

boolean. Whether this component is disabled and cannot be interacted with.

$p.dx

number. Horizontal spacing between pegs.

$p.dy

number. Vertical spacing between pegs.

$p.fixed

boolean. Whether this component's value is fixed and cannot be modified.

$p.fixLocation

boolean. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

$p.hidden

boolean. Whether this component is hidden from the rendered output.

$p.layer

integer. Z-order layer index used to stack graphical components (higher values render on top).

$p.xoffset

number. Horizontal offset of the peg grid origin.

$p.yoffset

number. Vertical offset of the peg grid origin.

Common to all components (4)

$p.doenetML

text. The DoenetML source code that produced this component.

$p.hide

boolean. Whether to hide this component from the rendered output.

$p.isResponse

boolean. Whether this component is treated as a response for the purposes of assessment.

$p.styleNumber

integer. The style number used to select this component's visual styling from the available style definitions.

Examples

Example: A default pegboard

With the default attributes, pegs appear at every integer coordinate of the graph.

Example: Pegboard paired with `<attractToGrid/>`

The visible pegs and the attraction grid use the same default $1 \times 1$ spacing, so the point softly snaps to each peg as it is dragged near.

Attribute Examples

Attribute Example: dx, dy

The dx and dy attributes set the horizontal and vertical spacing between pegs. Use uneven spacings when modeling a domain whose axes carry different units.

Attribute Example: xoffset, yoffset

xoffset and yoffset shift the peg lattice so that a peg appears at (xoffset, yoffset) rather than at the origin.

Property Examples

Property Example: dx, dy, xoffset, yoffset

Each attribute of <pegboard/> is also available as a property of a named pegboard.

part periodicSet

<pegboard/>