Geometry Cloze (@webwriter/[email protected])

License: MIT | Version: 2.4.0

Create and view geometry exercises with coloring, styling and labeling options.

Snippets

Snippets are examples and templates using the package's widgets.

| Name | Import Path | | :--: | :---------: | | Geometry Cloze | @webwriter/geometry-cloze/snippets/geometry-cloze.html | | Polygon | @webwriter/geometry-cloze/snippets/polygon.html | | Right Triangle | @webwriter/geometry-cloze/snippets/right-triangle.html |

WwGeometryCloze (<ww-geometry-cloze>)

The geometry cloze widgets allows for the creation and embedding of geometric figures. It provides a 1000 x 700 unit wide canvas which can contain arbitrary polygons, lines and points with custom styling, labels and measurements.

If the widget is contenteditable, the user can interactively create and edit the shapes on the canvas. Otherwise, the canvas is rendered as a static image.

Usage

Use with a CDN (e.g. jsdelivr):

<link href="https://cdn.jsdelivr.net/npm/@webwriter/geometry-cloze/widgets/ww-geometry-cloze.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/geometry-cloze/widgets/ww-geometry-cloze.js"></script>
<ww-geometry-cloze></ww-geometry-cloze>

Or use with a bundler (e.g. Vite):

npm install @webwriter/geometry-cloze

<link href="@webwriter/geometry-cloze/widgets/ww-geometry-cloze.css" rel="stylesheet">
<script type="module" src="@webwriter/geometry-cloze/widgets/ww-geometry-cloze.js"></script>
<ww-geometry-cloze></ww-geometry-cloze>

Fields

| Name (Attribute Name) | Type | Description | Default | Reflects | | :-------------------: | :--: | :---------: | :-----: | :------: | | elements (elements) | CanvasData['children'] | A JSON-serialized list of all the objects that make up the canvas. Eachobject is either a polygon element or a divider line, described below.### Elements- Represents a drawable object on the 1000×700 canvas.- Every object must include a "_type" field to indicate its type.- Every object must provide a numeric id that is unique across the entire canvas.### Polygon Object ("_type": "element")- id (number): Unique identifier for the shape.- fill (string, optional): 'transparent' or a palette color with a 50 alpha suffix (for example "#2563eb50").- labelColor (string, optional): Palette color applied to any label rendered for the shape.- showArea, showPerimeter (boolean, optional): Enable live area and perimeter labels respectively. When either is true, required child labels are shown automatically.- children (array): Mix of point and line definitions describing the polygon.### Point Child ("_type": "point")- id (number): Unique identifier within the shape.- x, y (number): Absolute coordinates on the canvas.- fill (string, optional): Palette color for the point marker. When omitted, the point defaults to black.- showLabel (boolean, optional): When true, renders an angle marker and label around the point.- labelColor (string, optional): Palette color for the angle label.- labelStyle (string, optional): 'name' renders a fixed letter; 'value' displays the measured angle.- labelName (string, optional): One of ['α','β','γ','δ','ε','ζ','η','θ',<br> 'ι','κ','λ','μ','ν','ξ','ο','π','ρ','σ','τ','υ','φ','χ','ω','ϡ','ͳ','ϸ'] when labelStyle is 'name'.- showOutsideAngle (boolean, optional): When true, the displayed angle wraps around the exterior.### Line Child ("_type": "line")- id (number): Unique identifier within the shape.- start, end (object): Either { "_type": "reference", "id": <pointId> } to reuse a point or { "_type": "absolute", "x": number, "y": number } for an independent endpoint.- lineWidth (number, optional): Width of the line in px, should be one of 1, 2, 3, 5, 7.- stroke (string, optional): Palette color for the stroke.- showLabel (boolean, optional): When true, renders a length label along the line.- labelColor (string, optional): Palette color for the line label.- labelStyle (string, optional): 'name' renders a chosen letter; 'value' displays the live length.- labelName (string, optional): One of ['a','b','c','d','e','f','g','h',<br> 'i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'] when labelStyle is 'name'.### Divider Line ("_type": "divider-line")- id (number): Unique identifier.- start, end (object): Always absolute coordinate objects of the form { "_type": "absolute", "x": number, "y": number }.- lineWidth, stroke, labelColor, showLabel, labelStyle, labelName: Same meaning and value sets as for regular lines. Divider strokes are automatically rendered with a dashed pattern.### Palette Colors| Color | Hex || ------ | --------- || Black | #131316 || Red | #dc2626 || Orange | #ea580c || Yellow | #ca8a04 || Lime | #65a30d || Green | #16a34a || Cyan | #0891b2 || Blue | #2563eb || Violet | #7c3aed || Pink | #db2777 | | - | ✓ | | mode (mode) | CanvasData['mode'] | Active editing mode, accepting three possible values:- select: Move and connect objects- create: Create and connect objects- divider: Create divider lines | 'select' | ✓ | | abstractRightAngle (abstractRightAngle) | CanvasData['abstractRightAngle'] | If set, right angles will be rendered as a square instead of a curved arc. | false | ✓ | | hideGrid (hideGrid) | CanvasData['showGrid'] | If set, the grid will not be rendered. | false | ✓ | | disableSnapping (disableSnapping) | CanvasData['snapping'] | If set, user interactions will not snap to the grid.Does not depend on whether the grid is visible or hidden. | false | ✓ | | scale (scale) | number | Global scale factor for the entire canvas.Importantly, this does not effect the rendering of the shapes themselves, only the labels showing lengths and sizes. | 1 | ✓ |

Fields including properties and attributes define the current state of the widget and offer customization options.

Editing config

| Name | Value | | :--: | :---------: |

The editing config defines how explorable authoring tools such as WebWriter treat the widget.

No public methods, slots, events, custom CSS properties, or CSS parts.

Generated with @webwriter/[email protected]