`<cobwebPolyline>`

An interactive cobweb diagram for visualizing iteration of a one-variable function

<cobwebPolyline> visualizes the iteration $x_{n+1} = f(x_n)$ of a one-variable function. When placed inside a <graph>, the user clicks to add successive vertices that should alternate between the curve $y = f(x)$ and the diagonal $y = x$ . Each vertex is graded for correctness against the true iteration, so the component can drive both interactive exploration and answer checking.

Attributes and Properties

Attributes for `<cobwebPolyline>`

Number display (5)

avoidScientificNotation

boolean. Default value: false. Whether to render numbers in full decimal form rather than scientific notation.

displayDecimals

integer. Default value: 2. Number of decimal places to display when rendering this number.

displayDigits

integer. Default value: 3. Number of significant digits to display when rendering this number.

displaySmallAsZero

number. Default value: 1e-14. Threshold below which numbers are displayed as zero.

padZeros

boolean. Default value: false. Whether to pad displayed numbers with trailing zeros to fill the requested digits/decimals.

Labels (1)

labelIsName

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

Other (27)

allowDilation

boolean. Default value: true. Whether the shape can be dilated (scaled) under drag.

allowReflection

boolean. Default value: true. Whether the polyline can be reflected under drag.

allowRotation

boolean. Default value: true. Whether the polyline can be rotated under drag.

allowTranslation

boolean. Default value: true. Whether the polyline can be translated under drag.

applyStyleToLabel

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

attractThreshold

number. Default value: 0.5. Distance within which a dragged vertex snaps to the function curve or diagonal.

defaultPoint

point. The default location for newly added points on the cobweb diagram.

draggable

boolean. Default value: true. Whether the polyline can be dragged on a graph.

function

function. The function being iterated.

initialPoint

[ point ]. The starting point on the diagonal where iteration begins.

layer

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

lineStyle

keyword. Stroke style for lines.

Value	Description
`solid`	Continuous, unbroken stroke.
`dashed`	Stroke composed of evenly-spaced dashes.
`dotted`	Stroke composed of evenly-spaced dots.

lineWidth

number. Stroke width for lines, in pixels.

lockToSolution

boolean. Default value: false. Whether to constrain dragged vertices to the correct cobweb solution.

minShrink

number. Default value: 0.1. Minimum scaling factor allowed when dilating.

numIterationsRequired

number. Default value: 0. Minimum number of iterations the user is required to perform.

numPoints

number. Default value: 1. Number of points (iterations) currently shown on the cobweb diagram.

preserveSimilarity

boolean. Default value: false. Whether the shape is preserved up to similarity (uniform scaling) under drag.

rigid

boolean. Default value: false. Whether the polyline is treated as rigid (preserves shape under drag).

rotateAround

keyword. What point to rotate the shape around.

Value	Description
`centroid` (default)	Rotate around the centroid of the shape.
`vertex`	Rotate around the vertex specified by `rotationVertex`.
`point`	Rotate around the explicit point given by `rotationCenter`.

rotationCenter

point. The point to rotate around when rotateAround is 'point'.

rotationHandleVertices

numberList. Default value: [1]. Vertex indices that should display rotation handles when the shape is rigid or preserves similarity.

rotationVertex

integer. Default value: 1. The vertex index to rotate around when rotateAround is 'vertex'.

showCoordsWhenDragging

boolean. Default value: true. Whether to show coordinate labels while dragging.

variable

_variableName. Default value: $x$. Symbol used as the independent variable when displaying iterate values.

vertices

[ pointList ]. The list of vertex points that define the shape.

verticesDraggable

boolean. Whether individual vertices may be dragged independently.

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 `<cobwebPolyline name="c">`

Number display (5)

$c.avoidScientificNotation

boolean. Whether to render numbers in full decimal form rather than scientific notation.

$c.displayDecimals

integer. Number of decimal places to display when rendering this number.

$c.displayDigits

integer. Number of significant digits to display when rendering this number.

$c.displaySmallAsZero

number. Threshold below which numbers are displayed as zero.

$c.padZeros

boolean. Whether to pad displayed numbers with trailing zeros to fill the requested digits/decimals.

Labels (2)

$c.label

label. The label rendered with this component.

$c.labelIsName

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

Other (35)

$c.allowDilation

boolean. Whether the polyline can be dilated under drag.

$c.allowReflection

boolean. Whether the polyline can be reflected under drag.

$c.allowRotation

boolean. Whether the polyline can be rotated under drag.

$c.allowTranslation

boolean. Whether the polyline can be translated under drag.

$c.applyStyleToLabel

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

$c.attractThreshold

number. Distance within which a dragged vertex snaps to the function curve or diagonal.

$c.center

[ math ]. The centroid of the polyline's vertices.

$c.correctVertices

[ boolean ]. Per-vertex flags indicating whether each vertex is positioned at the correct cobweb solution.

$c.disabled

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

$c.draggable

boolean. Whether the polyline can be dragged on a graph.

$c.fixed

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

$c.fixLocation

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

$c.fractionCorrectVertices

number. The fraction of vertices placed at correct cobweb positions.

$c.fractionCorrectVerticesAdjusted

number. The fraction of correct vertices, scaled by the required minimum number of iterations.

$c.hidden

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

$c.initialPoint

[ math ]. The starting point on the diagonal where iteration begins.

$c.iterateValues

[ math ]. The list of iterate values shown by the cobweb diagram.

$c.layer

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

$c.length

number. The total length of the polyline.

$c.numCorrectVertices

number. The number of cobweb vertices placed at correct positions.

$c.numDimensions

number. The number of dimensions the polyline lives in.

$c.numGradedVertices

number. The number of cobweb vertices that were evaluated for correctness.

$c.numGradedVerticesAdjusted

number. The effective number of graded vertices after adjusting for the required minimum number of iterations.

$c.numIterateValues

number. The number of iterate values produced by the cobweb diagram.

$c.numIterationsRequired

number. Minimum number of iterations the user is required to perform.

$c.numPoints

number. Number of points (iterations) currently shown on the cobweb diagram.

$c.numVertices

number. Number of cobweb vertices currently shown (alias for numPoints).

$c.preserveSimilarity

boolean. Whether the polyline preserves its shape (up to similarity).

$c.rigid

boolean. Whether the polyline is treated as rigid (preserves shape under drag).

$c.showCoordsWhenDragging

boolean. Whether to show coordinate labels while dragging.

$c.styleDescription

text. A textual description of the polyline's style.

$c.styleDescriptionWithNoun

text. Style description including the word "polyline".

$c.variable

_variableName. Symbol used as the independent variable when displaying iterate values.

$c.vertices

[ math ]. The vertices of the polyline.

$c.verticesDraggable

boolean. Whether each vertex can be dragged independently.

Common to all components (4)

$c.doenetML

text. The DoenetML source code that produced this component.

$c.hide

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

$c.isResponse

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

$c.styleNumber

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

Examples

Example: Basic cobweb for a quadratic iteration

A <cobwebPolyline> is added to a graph that already shows the function curve and the diagonal. The function attribute identifies the iterated function, initialPoint sets the starting point on the diagonal, and numPoints controls how many vertices are currently displayed. As the user drags successive vertices, each one snaps to either the curve or the diagonal when within attractThreshold of the correct position.

Example: Locked to the correct solution

Setting lockToSolution forces every vertex to lie at the exact cobweb position, ignoring any user drag. This is useful for demonstrating an iteration deterministically — for instance to illustrate convergence or divergence from different initial conditions without manual placement.

Example: Reading the iterate values

The iterateValues property is an array of the successive values $x_0, x_1, x_2, \ldots$ implied by the current vertices, with one entry per iteration. Combined with <repeat> this lets the document render a numeric table of the iteration that stays in sync with the diagram.

Example: Scoring a cobweb answer

For graded use, award credit equal to the fractionCorrectVerticesAdjusted property. That value is the fraction of correctly placed vertices, scaled by numIterationsRequired so a partial cobweb cannot earn full credit just by having a few correct vertices. The vertices themselves are recorded as the answer’s responses via <considerAsResponses>.

Attribute Examples

Attribute Example: variable

The variable attribute sets the symbol used as the independent variable when displaying iterate values. It does not change the function being iterated; it only affects rendering.

Property Examples

Property Example: fractionCorrectVertices

The fractionCorrectVertices property is the unscaled fraction of placed vertices that are at the correct cobweb positions. Use this when you do not want to enforce a minimum number of iterations; use fractionCorrectVerticesAdjusted (illustrated in the scoring example above) when you do.

clampNumber codeEditor

<cobwebPolyline>