Components
Created by Smart Sparrow

Graphing

The Graphing widget allows students to enter mathematical functions and have them drawn on a graph. It also allows students to visualise derivatives and areas under curves (integrals).

 

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

  1. Copy the widget link by clicking on the Get Component button at the top of this page.
  2. In the Author Tool, add a Blank component from the Components tab and resize it to your liking.
  3. Paste the url that you’ve just copied into the Component’s source.
  4. With the component selected, click on Configure and select Options to set it up.
  5. 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.

 

Capi Table

Property Purpose Acceptable Inputs Readable Writable
{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.

Want to work with us to create your own component?
Request services

Similar Components