CommGrapher & CommGraphingCanvas

Last updated March 25, 2011

Available since CTAT 2.11

1. Component Overview

The CommGrapher and CommGraphingCanvas are the most complex components in this release (CTAT 2.11). The graphing canvas is a 2D grid, allowing the students to draw points and curves. The grapher CONTAINS a graphing canvas and adds more controls such as changing the boundaries or adding axis labels. Usually authors will want to include a grapher in the problem. When you just need to show a curve, point and do not want the added student controls such as changing the boundaries, step sizes and so on, the graphing canvas be sufficient.

There are a great many actions a student may perform on the grapher, as described in the Tutor Component parameter below. For a demo of a grapher tutor problem, please go to the MathTutor website.

2. Component Parameters

Most parameters are both for the Grapher and Graphing Canvas (G,GC), some are just for the Grapher (G) and some just for the Graphing Canvas (GC).

Parameter Name Description
1 Show Axis (G,GC) Sets whether the x-axis and y-axis are visible.
2 Show Grid (G,GC) Sets whether the grid lines (horizontal and vertical) are visible.
3 Outer Border Color (G,GC) Specifies the color for the outer border of the entire grapher component. The graphing canvas within the grapher does not have a border.
4 Background Color (G,GC) Specifies the color backgroud of the entire grapher component.
5 Border roundness (G,GC) Sets the roundness of the outer border of the entire grapher component
6 Show Grid Labels (G,GC) Sets whether the component should show labels at the axes for the grid line values.
7 Axis Color (G,GC) Specifies the color for the axes.
8 Point Color (G,GC) Specifies the color of points.
9 Point Size (G,GC) Sets the size of points on the graph.
10 Curve Color (G,GC) Specifies the color of curves.
11 Curve Thickness (G,GC) Sets the thickness of curves.
12 Left Boundary (G,GC) Sets the initial value of the left boundary of the graphing canvas. Can be changed by the student in the grapher.
13 Right Boundary (G,GC) Sets the initial value of the right boundary of the graphing canvas. Can be changed by the student in the grapher.
14 Upper Boundary (G,GC) Sets the initial value of the upper boundary of the graphing canvas. Can be changed by the student in the grapher.
15 Lower Boundary (G,GC) Sets the initial value of the lower boundary of the graphing canvas. Can be changed by the student in the grapher.
16 Given Points (G,GC) Defines points to be show initially. E.g. "(2,3.5);(-1,0)".
17 Given Equations (G,GC) Defines the curves to be show initially. E.g. "y=2*x;x^2".
18 Answer Precision (# of decimals) (G,GC) Specifies how many decimals the grapher/graphing canvas should return for the points (i.e. rounding of point coordinates).
19 Graph Drawing Mode (G,GC) Determines whether the curve drawing button is shown and if so, how curve drawing should behave.
20 Point Drawing (G,GC) Determines whether the point drawing button is shown.
21 Tutor Component (G,GC) Set the tutoring policy for the component.
22 Snap to Grid (G,GC) Sets whether points can only be placed at grid intersection by the student, or whether point may be placed anywhere.
23 Step Size - Horizontal (G,GC) Initial value for the horizontal grid step size. Can be changed by the student in the grapher.
24 Step Size - Vertical (G,GC) Initial value for the vertical grid step size. Can be changed by the student in the grapher.
25 Label Width (G) Specifies the width of the label boxes (axes labels, unit labels, boundary labels and step size labels) around the graphing canvas.
26 Label Height (G) Specifies the height of the label boxes (axes labels, unit labels, boundary labels and step size labels) around the graphing canvas.
27 Show Unit Labels (G) Parameter specifies whether the second tier axis labels should show. E.g. after the student specifies the first tier 'time', a second box for 'hours' appears.
28 Show Buttons (GC) Sets whether the 'add a point' and 'draw curves' button should show on the graphing canvas as well (is not applicable for the grapher, since the buttons are already shown next to the labels).

3. Parameter Descriptions and Values

Most parameters are both for the Grapher and Graphing Canvas (G,GC), some are just for the Grapher (G) and some just for the Graphing Canvas (GC).

Show Axis (G,GC)

Sets whether the x-axis and y-axis are visible. If set to "true", the axes will have the color as specified below.

Show Grid (G,GC)

Sets whether the grid lines (horizontal and vertical) are visible. If set to "true", the grid will have the color as specified below.

Outer Border Color (G,GC)

Specifies the color for the outer border of the entire component whether grapher or graphing canvas. The graphing canvas within the grapher does not have a border.

Background Color (G,GC)

Specifies the color backgroud of the entire grapher component including the graphing canvas.

Border roundness (G,GC)

Specifies the roundness of the border around the entire component. Since the graphing canvas inside the grapher doesn't have a border, this property does not affect the graphing canvas inside a grapher.

Show Grid Labels (G,GC)

Sets whether the component should show labels at the axes for the grid line values. The labels are 'smart' in the sence that under normal circumstances it will show the value of every grid line. However, if there is not enough space to show every value (e.g. there are a thousant grid lines visible) it will get the lowest multiple of 10 or half of that (e.g. 5, 50, 500, etc.) that will still fit nicely on the screen.

Axis Color (G,GC)

Specifies the color for the axes.

Point Color (G,GC)

Specifies the color of points on the graphing canvas. Points will have a green glow when correct, a red when incorrect.

Point Size (G,GC)

Sets the size of points on the graph. Value: the diameter of the points in pixels. Default value = 5.

Curve Color (G,GC)

Specifies the color of curves on the graphing canvas. Curves will have a green stroke when correct, a red when incorrect.

Curve Thickness (G,GC)

Sets the thickness of curves on the graph. Value: the thickness of the curve in pixels. Default value = 2.

Left Boundary (G,GC)

Sets the x-value of the left boundary of the graphing canvas. Default value = 0.

Right Boundary (G,GC)

Sets the x-value of the right boundary of the graphing canvas. Default value = 8.

Upper Boundary (G,GC)

Sets the y-value of the upper boundary of the graphing canvas. Default value = 6.

Lower Boundary (G,GC)

Sets the y-value of the lower boundary of the graphing canvas. Default value = 0.

Given Points (G,GC)

There are two ways to set points on the canvas as an author. One is via Tutor Performed Actions (i.e. 'demonstrate' in CTAT), the other is by specifying the coordinates here, seperated by a semicolon. E.g. "(2,3.5);(-1,0);(3.45,-4.333333)".

Given Equations (G,GC)

For setting curves at run-time, we currently only support liniar functions (plot two points first, then draw a line between them). You may enter polynomial function in this parameter though, sepertated by a semicolon. E.g. "y=2*x;x^2;y=x^4+4x^2-9".

Please note, parentheses, division or multiplication other than "2*x^2" are currently NOT supported in this parameter.

Answer Precision (# of decimals) (G,GC)

Specifies how many decimals the grapher/graphing canvas should return to CTAT for the points (i.e. rounding of point coordinates). Value: The number decimals. Default value = 2.

Use Gradient Fill

Sets if gradient coloring is used when drawing the wedges. Value: true: (default) gradient coloring is used such that the wedge gets lighter as it goes to the outer edge of the pie chart. false: the wedge is uniformly colored.

Graph Drawing Mode (G,GC)

Determines whether the curve drawing button is shown and if so, how curve drawing should behave.

  • Automatic: When the student clicks on the 'add curve' button, the graphing canvas checks whether there are two or more points on the canvas, and then draw a line between the first two points that are not evaluated as 'incorrect'.
  • Student Clicks on Points: When the student clicks the 'add curve' button, all non-incorrect points light up. The student may draw a liniar curve by clicking on two points on the graph.
  • No Graphs: Hides the 'add curve' button, no curves can be drawn (curves defined in the 'Given Equations' parameter however, will still show).
Point Drawing (G,GC)

Determines whether the point drawing button is shown.

  • true: When the student clicks on the 'add point' button, the graphing canvas goes into 'point adding mode'. When the student hovers over the graph, a point marker will appear. Clicking will add a point to the graph at that location. See also the parameter 'Snap to Grid'.
  • false: Hides the 'add a new point' button, no points can be plotted (points defined in the 'Given Points' parameter however, will still show).
Tutor Component (G,GC)

Set the tutoring policy for the component. The following actions are tutored:

  • Setting the x-axis and y-axis labels (G).
  • Setting the x-axis and y-axis units (G).
  • Setting the boundaries (G).
  • Setting the step size interval (G).
  • Going into/leaving point adding mode (G,GC).
  • Going into/leaving curve adding mode (G,GC).
  • Plotting a point (G,GC). Note: deleting a point is untutored, incorrect points are deleted by clicking on them or automatically after a point is evaluated as 'correct'.
  • Plotting a curve if Graph Drawing Mode is set to 'Student Clicks on Points' (G,GC).

Besides tutored actions, bug messages are generated when:

  • The boundaries overlap (e.g. the left boundaries is set to the right of the right boundary).
  • Changing the boundaries causes a point to be out of range.
  • The student tries a rediculously small step size interval.
  • The student tries to draw a curve but there are not at least two points available.
  • The student tries to draw a vertical line as a graph (unsupported).
  • The student randomly click on the canvas, instead of on points, when drawing a curve.

Please note, making a CTAT graph for a complex component such as the grapher can be a difficult undertaking. You can find an example CTAT graph here. ****INSERT LINK TO BRD****

Snap to Grid (G,GC)

Sets whether points can only be placed at grid intersections, or whether points may be placed anywhere. In point drawing mode, the point marker will automatically 'snap' to the grid intersection nearest to the mouse cursor.

Step Size - Horizontal (G,GC)

Set the x-interval between grids. Value: the horizontal interval between two vertical grid lines. Note that these are not pixels but on the graphing canvas coordinate scale. Default=1

Step Size - Vertical (G,GC)

Set the y-interval between grids. Value: the vertical interval between two horizontal grid lines. Note that these are not pixels but on the graphing canvas coordinate scale. Default=1

Label Width (G)

Specifies the width of the label boxes (axes labels, unit labels, boundary labels and step size labels) around the graphing canvas. Value: Width of the boxes in pixels. Please adjust this parameter if the axis labels do not fit properly. Default = 35

Label Height (G)

Specifies the height of the label boxes (axes labels, unit labels, boundary labels and step size labels) around the graphing canvas. Value: Height of the boxes in pixels. Default = 20

Show Unit Labels (G)

Parameter specifies whether the second tier axis labels should show. E.g. after the student specifies the first tier 'time', a second box for 'hours'

Show Buttons (GC)

A graphing canvas only parameter that hides the 'add point' and 'add curve' buttons, while still allowing their fuctionality. The buttons are displayed in the grapher instead. Set this property to 'false' you do not want the students to be adding points or curves.

4. Advanced options

Sometimes you want to change the behavior of the grapher mid-way through a problem. The following settings will help you accomplish that either through a tutor performed action in CTAT (TPA) or via an ActionScript call in your Flash .fla file (AS).

enablePointDrawing

In a TPA set the selection to be the grapher, 'enablePointDrawing' to be the action and use 'true' or 'false' to hide/unhide the point drawing button. Alternatively by calling enablePointDrawing("true") you may set this option in ActionScript.

enableCurveDrawing

In a TPA set the selection to be the grapher, 'enableCurveDrawing' to be the action and use 'true' or 'false' to hide/unhide the curve drawing button. Alternatively by calling the_grapher_name.enableCurveDrawing("true") you may set this option in ActionScript.

Other TPAs

All actions performed by a student can be done by the tutor as well. Just 'demonstrate' the step in CTAT and set the step to be a tutor performed action.

The current state of the grapher

For some hint messages and/or buggy messages you may want the hints to know what current state is. For instance, whether the boundaries are set correctly before you want to allow a student to set a point. Here is a list of parameters you may reference from within CTAT's hints/function matcher (assuming the instance name of the component is "grapher":

  • grapher.leftBoundary, grapher.rightBoundary, grapher.upperBoundary and grapher.lowerBoundary
  • grapher.xStep, grapher.yStep
  • grapher.pointCount (the number of correct point currently plotted)