# CommNumberBar

Last updated June 01, 2012

**Figure 1: A fully-configured number line with CommNumberBar**

CommNumberBar is a number line visualization component first included with CTAT 2.7. Number lines are used in math teaching to visualize properties of numbers, intervals and vectors. You can configure the CommNumberBar component to show all of these mathematical entities and you can show them in different forms. For example, you could place a CommNumberBar in your tutor and have it show a few points displayed as large dots and then ask the user to place another point.

## 1. Main Features

The following aspects determine the look and feel of the CommNumberBar component
in your tutor. See **Figure 1** for a visual guide for the following items:

1. **Border Roundness** is a new feature that will soon apply to all or most
components. When setting this to a non-0 value, the outer edges of the
component will appear smoothed. The example shown here uses a border roundness
of 10.

2. **Outer Border**, a thin border that indicates the outer edge of the
component. You can set the border color (**Outer Border Color**) as well as the roundness of the
edges (**Border Roundness**).

3. Since this component is visually complex, we provide you with a way to set margins through the definition of a window. In Figure 1, you can see that the window is considerably smaller than the total component area. You use the window to allow the decorations on the horizontal axes on the left and right side and to ensure that the labels on the outer boundaries don’t fall outside the component.

4. Our number line component is in fact a full coordinate system of which we
only use the horizontal axes. We do show the y axes in abbreviated form as a
short line at the 0 indicator. You can turn off this line by using the
**Show Vertical Axis** parameter.

5. You can specify a coordinate system by setting a left and right boundary.
Here you see the left boundary is set at -10. Note that the coordinate system
does not have to be symmetrical. For example you could specify a line from -2
to 15. Use the parameters **Left Boundary** and **Right
Boundary** to specify the coordinate system.

6. Every component has a base layer. Think of this as the painting canvas on
which the component is drawn. Each component also has a border drawn as an
outline (see feature 2) You can specify the paint color for the
component’s painting canvas by using the parameter **Background
Color**.

7. The number line can be partitioned dynamically as the user makes inputs
into the partition input area on the right. The partition tickmarks are
distinguished by a color that can be specified in the parameter
**Partition Color**. In Figure 1, the partition tickmark’s
color is set to blue. Other partitioning properties can be specified by
parameters such as **Partition Region** and **Partition
Unit**.

8. You can include a number of decorations to refine the visualization of
the coordinate system. For example, item 7 shows the use of a step size.
Suppose we start at 0 on the coordinate system. Then every 1 increment the
component would draw a short vertical line. You can set this step size to any
increment you would like. You can even use formats like ½. See the parameters
**Small Step Size** and **Large Step Size**.

9. The horizontal axes can be decorated with what we call end styles. In
Figure 1 we show the end style ‘Open Arrow’. You can use the
parameter **End Style** to set the visualization of this decoration.
More information and example of decoration styles can be found in the section
‘Arrow Styles’.

10. This input area for the number line partition comes in two appearances;
one with an input text box, and one without. This can be specified using the
parameter **Display Number of Partitions**. The input area shares a
parameter of **Partition Region** with the partition tickmark. Using
this parameter, one can specify the input area’s location and
visibility.

## 2. Component Parameters

The table below shows a list of all configuration parameters and the default value of each. Parameter descriptions are given following the table.

Keep in mind that some combinations of parameters are either meaningless or invalid.

**Note**: Gray values indicate parameters are no longer in use.

Parameter Name | Default Value | |
---|---|---|

1 | Allow Blocking | true |

2 | Axis Thickness | 3 |

3 | Background Color | #f8f8f8 |

4 | Bold | false |

5 | Border Roundness | 5 |

6 | Button Spacing | 0 |

7 | Controller for Partitions | <empty> |

8 | Controller for Value | <empty> |

9 | Cursor Marker Visible | true |

10 | Display | <empty> See Parameter Descriptions for possible input |

11 | Display Fixed Labels | <empty> See Parameter Descriptions for possible input |

12 | Display Labels | None |

13 | Display Line Thickness | 5 |

14 | Display Number of Partitions | false |

15 | Display Offset | 15 |

16 | Display Point Size | 6 |

17 | End Style | Open Arrow (See Figure 2 for possible options) |

18 | Font | Verdana |

19 | Font Size | 12 |

20 | Input Type | Interval |

21 | Italic | false |

22 | Large Step Size | 1 |

23 | Large Tickmark Denominator | 0 |

24 | Large Tickmark Label Reduce Fraction | true |

25 | Large Tickmark Labels | above |

26 | Large Tickmarks | true |

27 | Left Boundary | 0 |

28 | Limit Valid Points (not just correct) | false |

29 | Max Points | 1 |

30 | Outer Border Color | #999999 |

31 | Partition Color | #0000CC |

32 | Partition Color Style | Color |

33 | Partition Region | 0,0 |

34 | Partition Unit | 1 |

35 | Point Label | None |

36 | Point Label Denominator | Independent |

37 | Point Output Format | (decimal) |

38 | Point Replacement Policy | Replace Oldest Point |

39 | Point Shape | Large Circle (See Figure 2 for possible options) |

40 | Right Boundary | 10 |

41 | Separate labels that are too close | false |

42 | Show Horizontal Axis | true |

43 | Show Vertical Axis | true |

44 | Significant Digits | 5 |

Show Horizontal Tickmarks | true | |

Show Labels | true | |

45 | Small Step Size | 1 |

46 | Small Tickmark Denominator | 0 |

47 | Small Tickmark Label Reduce Fraction | true |

48 | Small Tickmark Labels | Above |

49 | Small Tickmarks | true |

50 | Snap to Steps | true |

Step Size | 1 | |

Label Step Size | 5 | |

51 | Tickmark Thickness | 3 |

52 | Underline | false |

### Parameter Descriptions

- Allow Blocking (true, false)
Can be used to tell the tutor that this component can be blocked when the interface is inactive or busy. For example, when a tutor starts you will see a grey overlay on top of your interface to allow all code to initialize before a student starts using the tutor. During that time components are normally blocked. You can override this behavior by setting this parameter to ‘false’.

- Background Color (hexadecimal code)
See item 6 in Figure 1. You can provide a color value that is used to give the base layer of the component a fill color. The default value is #f8f8f8, an off-white. When you click on this value in the parameter list you will see a color chooser for picking another color.

- Border Roundness (integer)
- Cursor Marker Visible (true, false)
Can set the cursor sprite’s visibility while hovering over the component. However, a visible cursor marker sprite will be placed on the number line regardless of this parameter’s value when placing an answer. This parameter is built for tutors that prompt users to estimate a value in the number line.

- Display
For entering points/intervals (formula) for the component to display but are not considered user input. The formula in Display are alternately drawn above and below the number line at the distance specified in

**Display Offset**.Display is a string where the formulas are separated with a ";". The formulas are formulated like this: (<number>) is a point, (<number>,<number>) is an open interval, and [<number>,<number>] is a closed interval. It is also acceptable to mix open and closed intervals so that one end is open and the other closed. It is also assumed that the numbers in the intervals are in left-to-right order, (eg) for [a,b], a < b. <number> can be an integer, a decimal, or a fraction.

Here are some examples of valid Display settings:

(1)

(1);(2,3)

(1);(3/2,3.3];[4,5];[6,7];(0,10)

[-2,3]

[-5,3)

[3,@)

(3);(1);(-4)

- Display Fixed Labels
Displays the specified labels instead of the normal numeric values for user entered points (points only, not intervals or vectors).

The normal labels will be used if the number of user entered points exceeds the number of listed strings.

Note: this can have some interesting interactions with

**Point Replacement Policy**as the specified labels are associated with the order of points as they are stored internally which does not always correspond to the order in which they were entered. For best results, limit the number of points to a single point.Values: a semicolon(;) delimited list of strings.

- Display Number of Partitions (true, false)
- Specifies the partition input box’s appearance.
Note: The partition input box will not appear unless Partition Region is set.

- Display Offset
Related to

**Display**, this parameter allows you to set the the vertical distance in pixels that the formulas in Display will be offset from the number line. The value should be a number. If Display Offset is 0, then the formula will be drawn on the number line.- End Style (Closed Arrow, Open Arrow, Circle, Line, Unmarked, None)
See Figure 2 for possible options. Difference between “Unmarked”, and “None” is marked with absence of marks, and absence of mark AND line segment, respectively.

- Input Type (interval, points, vector, none)
Specifies types of input the user can make on the number line.

- Large Step Size (Number in fraction or decimal)
Specifies the size of the distance between each large tickmark. For example, if the number line display values between 0 and 10, you can make large tickmarks appear every 2 small tickmarks by setting this parameter’s value as “2”.

Note: this parameter has no control over the labels for each tickmarks. Use Large Tickmark Denominator and Large Tickmark Labels to display labels for each tickmark.

- Large Tickmark Denominator (Number in fraction or decimal)
Sets the denominator for the labels of the large tickmarks. This parameter is useful for making the denominator of the labels consistent across the number line.

Note: As its name suggests, this parameter will only have an effect on labels when the labels are fractions, i.e. when Large Step Size’s value is a fraction.

Note: This parameter becomes overridden by the parameter Large Tickmark Label Reduce Fraction which reduces all of the fractions, preventing labels from having consistent denominators.

- Large Tickmark Label Reduce Fraction (true, false)
- Reduces the large tickmark labels to simplest fractions.
- Large Tickmark Labels (Above, Below, Center, None)
- Sets the location of the large tickmark labels. This parameter can also remove the labels with a value of “None”.
- Large Tickmarks (true, false)
- Sets the tickmark sprites' visibility.
- Left Boundary
- (Number in fraction or decimal)
- Max Points (Integer)
- Sets the maximum number of correct inputs the user can make.
- Outer Border Color
See item 2 In Figure 1. You can provide a color value that is used to draw a line around the shape of the component. The default value is #999999. When you click on this value in the parameter list you will see a chooser in which you can select an alternative color.

- Partition Color (hexadecimal code)
- Though a misleading name, this parameter describes the color of the partition tickmark sprites.
- Partition Color Style (Rational Number Project, Color)
Value of “Color” will use the color set in Partition Color. The value of “color” is suggested if the tutor is not for “Rational Number Project”, which displays a different color for each partition value.

- Partition Region (“integer, integer”)
- Controls two things:
1. Location of the partition input box. This parameter can also be used to show/hide the partition input. First integer value.

2. Range of appearance of partition tickmarks.

Note: Partition input box will always appear on the right side. Therefore, only the second integer value will effect location of the input box.

Note: using “*”s will help the input box and tickmark range to be dynamic for tutors that have number lines that vary in size.

Examples:

-“0,0”: Removes the partition input box.

-“0,2” Partition input box appears at value of “2” on the number line.

-“0,*”: Partition input box appears at the right boundary of the number line.

-“*,*”: Same as above. And partition tickmarks appear on the entire number line. This is necessary for number lines that start from negative values.

- Partition Unit (Number in fraction or decimal)
Sets the size of the unit which the partition increments/decrements. This parameter’s value corresponds to the size of the distance between each partition tickmark at the initial partition condition. (Partition Value of “1”).

- Point Output Format ((decimal), (fraction), decimal, fraction)
Controls how the user input appears on CTAT. Values with parentheses will report values in either decimal or fraction actually enclosed in parentheses.

- Point Shape (Large Circle, Small Circle, Line, Open Arrow, Closed Arrow)
Describes the marker sprite the user will see when hovering over the number line. See the figure below for all of the available shapes. They are (left to right) Large Circle, Small Circle, Line, Open Arrow, Closed Arrow.

- Right Boundary (Number in fraction or decimal)
- Show Horizontal Axis (true, false)
- Show Vertical Axis (true, false)
- Small Step Size (Number in fraction or decimal)
The size of distance between each small tickmark. For example, if the number line displays values between 0 and 10, you can make small tickmarks appear every 2 spaces by setting this parameter’s value as “2”.

Note: this parameter has no control over the labels for each tickmarks. Use Small Tickmark Denominator and Small Tickmark Labels to display proper labels for each tickmark.

Note: Small tickmarks are sub-tickmarks between large tickmarks. Value for this parameter will apply between every large tickmark.

- Small Tickmark Denominator (Number in fraction or decimal)
Sets the denominator for the labels of the small tickmarks. This parameter is useful for making the denominator of the labels consistent across the number line.

Note: As its name suggests, this parameter will only take its effect on the labels when the labels are fraction, meaning when Small Step Size’s value is a fraction.

Note: This parameter can be overridden by the parameter Small Tickmark Label Reduce Fraction which reduces all of the fractions, preventing labels from having consistent denominators.

- Small Tickmark Label Reduce Fraction (true, false)
- Reduces the small tickmark labels to simplest fractions.
- Small Tickmark Labels (Above, Below, Center, None)
Sets the location of the small tickmark labels. This parameter can also remove the labels with a value of “None”.

- Small Tickmarks (true, false)
- Sets the tickmark sprites’ visibility.
- Snap to Steps (true, false)
Sets whether the marker sprite should snap to the closest tickmark of any kind. The snapping will still occur for tickmarks that are set invisible.

### Arrow Styles

Figure 2. End Types