## Unique ways to use this widget

There are multiple ways you can use this widget to assess learner knowledge. For example:

- Ask students to select the function that has been graphed using multiple choice or other inputs.
- Ask students to select the equation of one function based on another function shown on the graph.
- Ask students to name the intersection(s) of two or more functions.
- Ask students to change variables in order to understand the relationships in the function.
- In combination with other widgets like the Expression Editor, ask students to write an equation they would like to graph

## Have a play

## Basic setup instructions

- Copy the widget link by clicking on the
**Get Component**button at the top of this page. - In the Author Tool, add a
**Blank component**from the Components tab and resize it to your liking. **Paste the url**that you’ve just copied into the**Component’s source**.- With the component selected, click on
**Configure**and select**Options**to set it up. - Have a look at the
**CAPI table**description at the bottom of the article for more information on what you can do.- Set up the function(s) the graph will display.
- Change the min and max values of the X- and Y-axes.
- Set the integral upper and lower bounds.
- Change the color of the function(s).
- Turn on/off derivatives of the functions.
- Show/hide the functions you have graphed by turning on/off the Tooltip for the function.

## Component Properties

Properties available for creating trap states or configuring your questions.

**Property**

**Purpose**

**Type**

{name} Axis.Minimum

Minimum value of graph

Number

{name} Axis.Maximum

Maximum value of graph

Number

{name} Axis.Label

Set the axis label

String

{name} Axis.Show Label

Show the axis label

Boolean

{name} Axis.Interval Size

Set the axis intervals

Number

{name} Axis.Interval Subdivision

Set the axis intervals (ticks in between grid lines)

Number

{name} Axis.Show Values

Show the values for axis

Boolean

Curve {id}.Function

Function to render on the graph, in Latex Code

String

Curve {id}.Integral Upper Bound

Upper bound of curve integral

Number

Curve {id}.Integral Lower Bound

Lower bound of curve integral

Number

Curve {id}.Show First Derivative

Show the first derivative of curve

Boolean

Curve {id}.Show Second Derivative

Show the second derivative of curve

Boolean

Curve {id}.Show Integral

Show integral of curve

Boolean

Curve {id}.Curve Colour

Set the colour of the curve

String

Curve {id}.First Derivative Colour

Set the colour of the curve first derivative

String

Curve {id}.Second Derivative Colour

Set the colour of the curve second derivative

String

Curve {id}.Integral Colour

Set the colour of the curve integral

String

Curve {id}.Show Tooltip

Toggle the tooltip for the curve

Boolean

Curve {id}.Show Integral Label

Toggle the Integral Label for the curve

Boolean

Curve {id}.Integral Label Class

Css Class for Integral Label for the curve

String

Curve {id}.Integral Label Format

Format for Integral Label for the curve

Numeric

Percentage

Curve {id}.Integral Enable Edit

Edit the Integral value of the curve

Boolean

Custom.CSS

Add custom styling by pasting in CSS code or CSS URL

String

Custom.CSS Type

Determine the type of custom css being applied

Inline

Url

Graph.Total Curves

Number of curves to render to the graph, in Latex Code

Number

Graph.Show grid

Show the axis grid

Boolean

Graph.Enable Student Interaction

Enable/Disable user interaction

Boolean

Series {id}.Points

The points of the series

Point Array

Series {id}.Color

The color of the Series

String

Series {id}.Show Tooltip

Shows Tooltip of the Series

Boolean

## Advanced widget setup

Contact our team for help setting up the widget and trap states in your lessons.