<callAction>

<callAction> is a General Operator component that triggers an action based on a click interaction or a specified boolean condition. The available actions are:

• addChildren: Adds one or more children to the target component.
• deleteChildren: Deletes one or more children from the target component.
• submitAnswer: Submits the target answer component.
• resample: Resamples the target component.
• startAnimation: Starts the animation of the target component.
• stopAnimation: Stops the animation of the target component.
• toggleAnimation: Toggles the animation of the target component.
• playVideo: Plays the target video component.
• pauseVideo: Pauses the target video component.
• navigateToTarget: Navigates to a specified target, such as a reference link.
• copyDoenetMLToClipboard: Copies the DoenetML of the target component to the clipboard.

Attributes and Properties

Example: Add a <point> child to a <graph>

<callAction actionName="addChildren" target="$g">
  <point>(2,3)</point>
  <label>Add point</label>
</callAction>
 
<graph name="g" size="small"/> 

Each time the <callAction> button is clicked, a new <point> child is added to the graph at $(2,3)$.

Example: Delete a <point> child from a <graph>

<callAction actionName="addChildren" target="$g">
  <point>(2,3)</point>
  <label>Add point</label>
</callAction>
 
<callAction actionName="deleteChildren" target="$g" number="1">
  <label>Delete point</label>
</callAction>
 
<graph name="g" size="small"/>

Each time the second <callAction> button is clicked, a <point> child that was added previously is deleted from the <graph>.

Example: Perform multiple actions with one click

Multiple <callActions> can be performed with the action of one button click when grouped together inside a <triggerSet> component.

Example: Generate new random numbers

<callAction actionName="resample" target="$numbers">
  <label>Get new numbers</label>
</callAction>
 
<p>
  <sampleRandomNumbers name="numbers" from="1" to="1000" numSamples="3"/>
</p>

Each time the <callAction> button is clicked, the <sampleRandomNumbers/> component is resampled.

Attribute Example: labelIsName

<graph name="g" size="small">
  <callAction name="AddPoint" actionName="addChildren" target="$g" labelIsName anchor="(-6,4)">
    <point>(5,2)</point>
  </callAction>
</graph>

Using the labelIsName attribute is a shortcut to adding a separate <label> child to the <callAction> component.

Attribute Example: anchor

<graph name="g" size="small">
  <callAction name="AddPoint" actionName="addChildren" target="$g" labelIsName anchor="(-6,4)">
    <point>(5,2)</point>
  </callAction>
</graph>

The anchor attribute specifies the position of the <callAction> button when the <callAction> is used inside a <graph>.

Attribute Example: actionName

<graph name="g" size="small">
  <callAction name="AddPoint" actionName="addChildren" target="$g" labelIsName anchor="(-6,4)">
    <point>(5,2)</point>
  </callAction>
</graph>

The actionName attribute specifies the action to be performed by the <callAction> component.

Attribute Example: actionName=“resample”

The resample specification for the actionName acts on the <sampleRandomNumbers> component to generate a new set of random numbers.

Attribute Example: actionName=“addChildren”

The addChildren specification for the actionName attribute creates one or more children of the target component.

Attribute Example: actionName=“deleteChildren”

The deleteChildren specification for the actionName attribute deletes one or more children of the target component that have been added to the <graph> with a <callAction>.

Attribute Example: actionName=“submitAnswer”

The submitAnswer specification for the actionName attribute triggers automatic submission of the target <answer> when the condition for the <callAction> is satisfied.

Attribute Example: actionName=“startAnimation”

The startAnimation specification for the actionName attribute acts on a target <animateFromSequence/> component.

Attribute Example: actionName=“stopAnimation”

The stopAnimation specification for the actionName attribute acts on a target <animateFromSequence/> component.

Attribute Example: actionName=“toggleAnimation”

The toggleAnimation specification for the actionName attribute acts on a target <animateFromSequence/> component.

Attribute Example: actionName=“playVideo”

The playVideo specification for the actionName attribute acts on a target <video/> component.

Attribute Example: actionName=“pauseVideo”

The pauseVideo specification for the actionName attribute acts on a target <video/> component.

Attribute Example: actionName=“navigateToTarget”

The navigateToTarget specification for the actionName attribute acts on a target <ref/> component. The user is automatically taken to the referenced link when the condition for the <callAction> becomes true.

Attribute Example: actionName=“copyDoenetMLToClipboard”

The copyDoenetMLToClipboard specification for the actionName attribute acts on a target sectional component.

Attribute Example: triggerWhen

<p>Drag the $p.styleDescriptionWithNoun into quadrant II or III.</p>
 
<callAction actionName="addChildren" target="$g" triggerWhen="$p.x < 0">
  <point>(8,0)</point>
</callAction>
 
<graph name="g" size="small">
  <point name="p" styleNumber="2">(8,0)</point>
</graph>

The triggerWhen attribute takes a boolean condition that triggers the action to occur when the condition is true.

Note that this process is repeated each time the boolean is newly true. To observe this behavior, drag the point back and forth into the negative $x$ region several times. Also, move the blue <point> child each time so that you can clearly see the new <point> child that appears.

Attribute Example: triggerWith

The triggerWith attribute references a named <callAction>, <updateValue>, <triggerSet>, <booleanInput>, or an <answer>.

When the user perfoms any interaction with the referenced component (including submitting an incorrect answer or unchecking a checkbox), the <callAction> is performed.

Attribute Example: triggerWhenObjectsClicked

The triggerWhenObjectsClicked attribute takes a component reference as input. Any graphical component that can be clicked can serve as a trigger.