# JSXG Macro Library

JSXGraph Integration functions, Version 1.0, September 2, 2016. Written by Grant Sander.

This library provides functions to integrate JSXGraph into MathAS/MOM. To use the library in a question, make sure to call

    loadlibrary("JSXG");

before calling the functions.

- loadJSX
- JSXG_createAxes
- JSXG_addSlider
- JSXG_addFunction
- JSXG_addParametric
- JSXG_addText
- JSXG_addcreatePolarAxes
- JSXG_addPolar
- JSXG_createBlankBoard
- JSXG_addPoint
- JSXG_addSegment
- JSXG_addArrow
- JSXG_addLine
- JSXG_addRay
- JSXG_addAngle
- JSXG_addCircle
- JSXG_addPolygon
- JSXG_addGlider
- JSXG_addTangent
- JSXG_setAttribute

## Some Notes

In all of the construction functions, and argument of 'attributes' can be passed to the options array, which will manually override the default attributes of an object. Use the JSXGraph API Reference to view key-value pairs for attributes of certain objects. The $ops['attributes'] value should be a JSON string representing an attributes object that JSXGraph will understand, such as $ops['attributes']="{fixed:true, strokeColor:'purple'}";

## loadJSX()

This function merely loads the JSXGraph script into the page, used to load the script for custom constructions.

## JSXG_createAxes($label, $ops)

Creates a set of cartesian axes. $label is the name of the board, and should be unique if there are more than one JSXGraph boards in a question.

$ops is an associative array containing name/value pairs for the options. The options are:

- $ops['size']=[(float) width, (float) height] sets the width/height of the board in pixels.
- $ops['bounds']=[(float) xmin, (float) xmax, (float) ymin, (float) ymax] sets the min/max coordinate bounds for the axes
- $ops['ticksDistance']=[(float) ticksDistanceX, (float) ticksDistanceY] sets the distance between each major tick on the axes
- $ops['minorTicks']=[(int) minorTicksX, (int) minorTicksY] sets the number of minor ticks between each major tick on the axes
- $ops['controls']=['nav-bar', 'zoom', 'no-pan'] adds some navigation options. Include 'nav-bar' to include navigation buttons, 'zoom' for zooming, 'no-pan' to disable panning.
- $ops['axisLabel']=[(string) xLabel, (string) yLabel] adds labels to the axes. ASCIIMath can be used.
- $ops['centered']=false will make the board left-justified, otherwise it will be centered.

The created board with have a JS-name of board_$label.

#### Example

    loadlibrary("JSXG");
    $ops=array(); $ops['size']=[300, 300]; $ops['bounds']=[-3,7,-5,5]; $ops['axisLabel']=["`x`","`y=x^2`"];
    $board = JSXG_createAxes("plot{$thisq}", $ops);

Add the $board variable to your Question Text where you want the graph to display.

## JSXG_addSlider($board, $sname, $ops)

Creates a slider. $board should be a variable returned from JSXG_createAxes() or JSXG_createPolarAxes(). $sname is the name of the slider, and should be distinct from other slider names.

$ops is an associative array containing name/value pairs for the options. The options are:

- $ops['position']=[(float) x1, (float) y1, (float) x2, (float) y2] sets the position of the slider relative to the top-left corner of the board, and coordinates are in portion of the board (between 0 and 1), so x1,y1 = 0.5,0.5 starts a slider in the middle of the board. This is so slider positions are fixed as the board zooms/pans.
- $ops['range']=[(float) min, (float) max, (float) default] sets the range for the slider. If default isn't provided, the average of min and max will be used.
- $ops['name']=name sets the display name of the slider, which will be displayed next to the slider value.
- $ops['snapWidth']=(float) sets the snap width of the slider. Setting this to 1 will make the slider snap in integer increments. Continous slide by default.
- $ops['precision']=(int) sets the number of decimal places to show on the value in the slider. Defaults to 2.
- $ops['color']=(string) sets the color of the slider and slider value. Should be a string with a color name, or color value recognizable by CSS (e.g., 'rgb(0,100,250)').

#### Example

    loadlibrary("JSXG");
    $ops=array(); $ops['size']=[300, 300]; $ops['bounds']=[-5,5,-5,5]; $ops['axisLabel']=["`x`","`y`"];
    $board = JSXG_createAxes("plot{$thisq}", $ops);

    $ops=array(); $ops['position']=[0.05,0.1,0.25,0.1]; $ops['range']=[1,10,3]; $ops['name']="a";
    $board = JSXG_addSlider($board, "a", $ops);

## JSXG_addFunction($board, $ops, [$ref])

Adds the graph of a function to an existing set of axes. $board should be a variable returned from JSXG_createAxes() or JSXG_createPolarAxes().

$ops is an associative array containing name/value pairs for the options. The options are:

- $ops['slider-names']=[(string)], array of slider names, tells PHP that you're going to be using those slider values in either the function definition or bounds. If you're not using a slider, don't set this option.
- $ops['inputVariable']=(string) sets the variable name that your function will take as its input. Defaults to "x", so this doesn't need to be touched if your function is defined in terms of x.
- $ops['rule']=(string) sets the function rule. This should be a string and entered using "calculator input" (i.e. "sin(x^2)"). If you want to reference a slider, precede the slider name with a % (e.g., "sin(%a*x^2)").
- $ops['bounds']=[(float|string) lower, (float|string) upper] sets the bounds for the input of the function. Enter a numerical value for a static bound, or a string using slider references to have a dynamic bound.
- $ops['strokeColor']=(string) sets the color of the function graph.
- $ops['strokeWidth']=(int) sets the width of the function graph. Should be a number between 1 and 9.
- $ops['dash']=(int) sets the dash of the function graph. Set to 2 through 9 to get different dashes. No dashing by default.

$ref is an optional variable that will give a reference to this object, so the JavaScript object can be referenced via func_$label_$ref where $label is the label of the board that the function lives in.

#### Example

    loadlibrary("JSXG");
    $ops=array(); $ops['size']=[400, 400]; $ops['bounds']=[-5,5,-5,5]; $ops['axisLabel']=["`x`","`y`"];
    $board = JSXG_createAxes("plot{$thisq}", $ops);

    $ops=array(); $ops['position']=[0.05,0.1,0.25,0.1]; $ops['range']=[1,10,3]; $ops['name']="a";
    $board = JSXG_addSlider($board, "a", $ops);

    $ops=array(); $ops['slider-names']=["a"]; $ops['rule']="sin(%a*x)"; $ops['bounds']=[0, "%a"]; $ops['attributes']="{strokeColor:'green'}";
    $board = JSXG_addFunction($board, $ops);

## JSXG_addParametric($board, $ops)

Adds a parametric curve to an existing set of axes. $board should be a variable returned from JSXG_createAxes() or JSXG_createPolarAxes().

$ops is an associative array containing name/value pairs for the options. The options are:

- $ops['slider-names']=[(string)], array of slider names, tells PHP that you're going to be using those slider values in either the function rules or bounds. If you're not using a slider, don't set this option.
- $ops['inputVariable']=(string) sets the variable name that your x-y functions will take as input. Defaults to "t", so this doesn't need to be touched if your functions are defined in terms of t.
- $ops['rule']=[(string) x-rule, (string) y-rule] sets the x and y function rules. Use calculator-type input (e.g., ["cos(t)","3*sin(t)"]). If you want to reference a slider, precede the slider name with a % (e.g., ["cos(t)","%a*sin(t)"])
- $ops['bounds']=[(float|string) lower, (float|string) upper] sets the bounds for the input of the functions. Enter a numerical value for a static bound, or a string using slider references to have a dynamic bound.
- $ops['strokeColor']=(string) sets the color of the curve.
- $ops['strokeWidth']=(int) sets the width of the curve. Should be a number between 1 and 9.
- $ops['dash']=(int) sets the dash of the curve. Set to 2 through 9 to get different dashes. No dashing by default.

#### Example

    loadlibrary("JSXG");
    $ops=array(); $ops['size']=[300, 300]; $ops['bounds']=[-5,5,-5,5]; $ops['axisLabel']=["`x`","`y`"];
    $board = JSXG_createAxes("plot{$thisq}", $ops);

    $ops=array(); $ops['position']=[0.05,0.1,0.25,0.1]; $ops['range']=[1,10,3]; $ops['name']="a";
    $board = JSXG_addSlider($board, "a", $ops);

    $ops=array(); $ops['slider-names']=["a"]; $ops['rule']=["t*cos(%a/5*t)", "sin(t)"]; $ops['bounds']=[-1, "%a"];
    $board = JSXG_addParametric($board, $ops);

## JSXG_addText($board, $ops)

Adds text to an existing set of axes. $board should be a variable returned from JSXG_createAxes() or JSXG_createPolarAxes().

$ops is an associative array containing name/value pairs for the options. The options are:

- $ops['slider-names']=[(string)], array of slider names, tells PHP that you're going to be using those slider values in the text. If you're not using a slider, don't set this option.
- $ops['text']=(string) sets the text to be display. This can contain ASCIIMath and certain HTML tags/entities, and slider references if $ops['slider-names'] is set.
- $ops['position']=[(float|string) x, (float|string) y] sets the position of the text. Slider values can be used.
- $ops['anchor']=[(string) anchorX, (string) anchorY] sets the "anchor" of the text. Defaults to "middle" for x and y, so text is centered at location you specified. Change to "left", "right", "top", "bottom", etc. if needed.
- $ops['fontSize']=(int) sets the font size. Defaults to 16.
- $ops['color']=(string) sets the color of the text
- $ops['rotate']=(float) will rotate the text a given number of degrees.

#### Example

    loadlibrary("JSXG");
    $ops=array(); $ops['size']=[300, 300]; $ops['bounds']=[-5,5,-5,5]; $ops['axisLabel']=["`x`","`y`"];
    $board = JSXG_createAxes("plot{$thisq}", $ops);

    $ops=array(); $ops['position']=[0.05,0.1,0.25,0.1]; $ops['range']=[1,10,3]; $ops['name']="a";
    $board = JSXG_addSlider($board, "a", $ops);

    $ops=array(); $ops['slider-names']=["a"]; $ops['position']=["3*cos(%a)", "3*sin(%a)"]; $ops['text']="math: `x^2/pi`"; $ops['attributes']="{anchorX:'left', anchorY:'middle', color:'red'}";
    $board = JSXG_addText($board, $ops);

## JSXG_createPolarAxes($label, $ops)

Creates a set of polar axes. $label is the name of the board, and should be unique if there are more than one JSXGraph boards in a question/page.

$ops is an associative array containing name/value pairs for the options. The options are:

- $ops['size']=(float) sets the width/height of the board in pixels. The board is set to be square.
- $ops['pad-top']=true adds some space to the top of the board to add sliders, etc..
- $ops['r']=[(float) max, (float) increment] sets the max/increment for the radius ticks. Defaults to [5, 1].
- $ops['theta']=[(string) type, (float) increment] sets the type and increment of the theta grid components.
  - $ops['theta']=['degrees', 30] sets up the grid for degrees, with increments of 30°.
  - $ops['theta']=['pi', 6] sets up the grid for fractions of pi. In this case, the increment is pi/6.
  - $ops['theta']=['custom', 8] sets up the grid for a unit of angle measure that takes 8 units to comprise a full rotation
  - $ops['theta']=['radians', 1] sets up the grid for radians, with increments of 1 radian.
  Defaults to ['radians', 1].
- $ops['controls']=['nav-bar', 'zoom', 'no-pan'] controls some aspects of pan/zoom. Including 'nav-bar' will add the navigation buttons. Including 'zoom' allows for zooming. 'no-pan' disables panning.
- $ops['centered']=false will make the board left-justified, otherwise it will be centered.

The created board with have a JS-name of board_$label.

#### Example

    loadlibrary("JSXG");
    $ops=array(); $ops['size']=400; $ops['pad-top']=true; $ops['r']=[7,1]; $ops['theta']=['pi',6]; $ops['controls']=['no-pan'];
    $board = JSXG_createPolarAxes("plot{$thisq}", $ops);

Add the $board variable to your Question Text where you want the graph to display.

## JSXG_addPolar($board, $ops)

Adds a polar curve to an existing set of axes/polar axes. $board should be a variable returned from JSXG_createAxes() or JSXG_createPolarAxes().

$ops is an associative array containing name/value pairs for the options. The options are:

- $ops['slider-names']=[(string)], array of slider names, tells PHP that you're going to be using those slider values. If you're not using a slider, don't set this option.
- $ops['inputVariable']=(string) sets the variable JS will expect as the input variable for the polar function. Defaults to t. Don't touch this if you plan on using t as your input variable (recommended).
- $ops['rule']=(string) sets the rule for polar function. Use calculator-type input (e.g., "sin(t^2)"). Slider values can be used by entering a % before their name (e.g., "sin(%a*t)").
- $ops['bounds']=[(float|string) lower, (float|string) upper] sets the bounds for the input variable. Can be a number for a static bound, or a string with a slider reference for a dynamic bound.
- $ops['strokeColor']=(string) sets the color of the curve
- $ops['strokeWidth']=(int) sets the width of the curve. Defaults to 2.

#### Example

    loadlibrary("JSXG");
    $ops=array(); $ops['size']=400; $ops['pad-top']=true; $ops['r']=[7,1]; $ops['theta']=['pi',6]; $ops['controls']=['no-pan'];
    $board = JSXG_createPolarAxes("plot{$thisq}", $ops);

    $ops=array(); $ops['position']=[0.05,0.1,0.25,0.1]; $ops['range']=[0.1,8,1]; $ops['name']="a";
    $board = JSXG_addSlider($board, "a", $ops);

    $ops=array(); $ops['slider-names']=["a"]; $ops['rule'] = "t/3*cos(t)"; $ops['bounds']=[0, "%a*pi"];
    $board = JSXG_addPolar($board, $ops);

## JSXG_createBlankBoard($label, $ops)

Creates a blank canvas. Similar to JSXG_createAxes(), but doesn't draw axes. $label is the name of the board, and should be unique if there are more than one JSXGraph boards in a question/page.

$ops is an associative array containing name/value pairs for the options. The options are:

- $ops['size']=[(float) width, (float) height], size of board. Provide width and height (in pixels).
- $ops['bounds']=[(float) xmin, (float) xmax, (float) ymin, (float) ymax] sets the cartesian bounds of the board.
- $ops['controls']=['nav-bar', 'zoom', 'no-pan'] adds some navigation options. Include 'nav-bar' to include navigation buttons, 'zoom' for zooming, 'no-pan' to disable panning.
- $ops['centered']=false will make the board left-justified, otherwise it will be centered.

#### Example

    loadlibrary("JSXG");

    $ops=array(); $ops['size']=[400,400]; $ops['bounds']=[-5,5,-5,5];
    $board = JSXG_createBlankBoard("plot{$thisq}", $ops);

    $ops=array(); $ops['position']=[0.05,0.1,0.25,0.1]; $ops['range']=[0.1,8,1]; $ops['name']="a";
    $board = JSXG_addSlider($board, "a", $ops);

    $ops=array(); $ops['slider-names']=["a"]; $ops['rule'] = "t/3*cos(t)"; $ops['bounds']=[0, "%a*pi"];
    $board = JSXG_addPolar($board, $ops);

## JSXG_addPoint($board, $ops, $ref)

Adds a point to an existing set of axes. $board should be a variable returned from JSXG_createAxes() or JSXG_createPolarAxes(). The position of the point can be linked to an answer box.

$ops is an associative array containing name/value pairs for the options. The options are:

- $ops['slider-names']=[(string)], array of slider names, tells PHP that you're going to be using those slider values. If you're not using a slider, don't set this option.
- $ops['position']=[(float|string) x, (float|string) y] sets the position of the point. Slider values can be used.
- $ops['fixed']=true will make the point fixed. By default, points are moveable.
- $ops['color']=(string) sets the color of the point
- $ops['size']=(int) sets the size of the point. Defaults to 2.
- $ops['face']=(string) sets the face of the point. Defaults to "circle".
- $ops['name']=(string) sets the label of the point. ASCIIMath can be used.
- $ops['answerbox']=[$thisq, (optional) partNumber], if specified, this will like the point's coordinates to an answer box. If the question is not multipart/conditional, use $ops['answerbox']=[$thisq]. If multipart, use $ops['answerbox']=[$thisq, 0] to link to first box, etc..

$ref is an optional variable. It will give the point a name for reference, so that you can use it when constructing other elements. If a reference is provided, the point can be reference using the variable "p_$label_$ref" where $label is the label of the board the point lives in, and $ref is the reference you gave the point.

#### Example

Set question type to N-Tuple.

    loadlibrary("JSXG");
    $ops=array(); $ops['size']=[300, 300]; $ops['bounds']=[-5,5,-5,5]; $ops['axisLabel']=["`x`","`y`"];
    $board = JSXG_createAxes("plot{$thisq}", $ops);

    $ops=array(); $ops['position']=[1,1]; $ops['answerbox']=[$thisq]; $ops['name']="`x/pi`";
    $board = JSXG_addPoint($board, $ops, "A");

## JSXG_addSegment($board, $ops, $ref)

Adds a segment to an existing set of axes. $board should be a variable returned from JSXG_createAxes() or JSXG_createPolarAxes().

$ops is an associative array containing name/value pairs for the options. The options are:

- $ops['slider-names']=[(string)], array of slider names, tells PHP that you're going to be using those slider values. If you're not using a slider, don't set this option.
- $ops['position']=[[(float|string) x1, (float|string) y1], [(float|string) x2, (float|string) y2]] sets the starting and ending point of the segment. Slider values can be used. If you want to reference a point, use the point name for a position of the segment: $ops['position']=["p_plot{$thisq}_a", [0,3]];
- $ops['strokeColor']=(string) sets the color of the segment
- $ops['strokeWidth']=(int) sets the width of the segment. Defaults to 2.
- $ops['dash']=(int) will make the segment dashed. Not dashed by default. Set to 2-9 for dashing.

$ref is an optional variable. It will give the segment a name for reference, so that you can use it when constructing other elements. If a reference is provided, the point can be reference using the variable "seg_$label_$ref" where $label is the label of the board the point lives in, and $ref is the reference you gave the point.

#### Example

    loadlibrary("JSXG");
    $ops=array(); $ops['size']=[300, 300]; $ops['bounds']=[-5,5,-5,5]; $ops['axisLabel']=["`x`","`y`"];
    $board = JSXG_createAxes("plot{$thisq}", $ops);

    $ops=array(); $ops['position']=[1,1];
    $board = JSXG_addPoint($board, $ops, "a");

    $ops=array(); $ops['slider-names']=["a"]; $ops['position']=[[0,0], "p_plot{$thisq}_a"]; $ops['strokeWidth']=4;
    $board = JSXG_addSegment($board, $ops);

## JSXG_addArrow($board, $ops, $ref)

Adds an arrow to an existing set of axes. $board should be a variable returned from JSXG_createAxes() or JSXG_createPolarAxes().

$ops is an associative array containing name/value pairs for the options. The options are:

- $ops['slider-names']=[(string)], array of slider names, tells PHP that you're going to be using those slider values. If you're not using a slider, don't set this option.
- $ops['position']=[[(float|string) x1, (float|string) y1], [(float|string) x2, (float|string) y2]] sets the starting and ending point of an arrow. Slider values can be used. If you want to reference a point, use the point name for a position of the segment: $ops['position']=["p_plot{$thisq}_a", [0,3]];
- $ops['strokeColor']=(string) sets the color of the arrow
- $ops['strokeWidth']=(int) sets the width of the arrow. Defaults to 2.
- $ops['dash']=(int) will make the arrow dashed. Not dashed by default. Set to 2-9 for dashing.

$ref is an optional variable that will give a reference to this object, so the JavaScript object can be referenced via vec_$label_$ref where $label is the label of the board that the arrow/vector lives in.

#### Example

    loadlibrary("JSXG");
    $ops=array(); $ops['size']=[300, 300]; $ops['bounds']=[-5,5,-5,5]; $ops['axisLabel']=["`x`","`y`"];
    $board = JSXG_createAxes("plot{$thisq}", $ops);

    $ops=array(); $ops['position']=[0.05,0.1,0.25,0.1]; $ops['range']=[1,10,3]; $ops['name']="a";
    $board = JSXG_addSlider($board, "a", $ops);

    $ops=array(); $ops['slider-names']=["a"]; $ops['position']=[[0,0],["4*cos(%a)","abs(cos(%a))*sin(%a)"]]; $ops['dash']=3; $ops['strokeColor']="red";
    $board = JSXG_addArrow($board, $ops);

## JSXG_addLine($board, $ops, $ref)

Adds a line to an existing set of axes or board. $board should be a variable returned from a board or axes construction function.

$ops is an associative array containing name/value pairs for the options. The options are:

- $ops['slider-names']=[(string)], array of slider names, tells PHP that you're going to be using those slider values. If you're not using a slider, don't set this option.
- $ops['position']=[[(float|string) x1, (float|string) y1], [(float|string) x2, (float|string)y2]] sets the starting and ending point of an arrow. Slider values can be used. If you want to reference a point, use the point name for a position of the segment: $ops['position']=["p_plot{$thisq}_a", [0,3]];
- $ops['strokeColor']=(string) sets the color of the arrow
- $ops['strokeWidth']=(int) sets the width of the arrow. Defaults to 2.
- $ops['dash']=(int) will make the arrow dashed. Not dashed by default. Set to 2-9 for dashing.

$ref is an optional variable that will give a reference to this object, so the JavaScript object can be referenced via line_$label_$ref where $label is the label of the board that the line lives in.

#### Example

    loadlibrary("JSXG");

    $ops=array(); $ops['size']=[400,400]; $ops['bounds']=[-5,5,-5,5]; $ops['controls'] = ['no-pan'];
    $board = JSXG_createBlankBoard("plot{$thisq}", $ops);

    $ops=array(); $ops['position'] = [-1,1]; $ops['name']='A';
    $board = JSXG_addPoint($board, $ops, "a");

    $ops=array(); $ops['position'] = [1,2]; $ops['name']='B';
    $board = JSXG_addPoint($board, $ops, "b");

    $ops=array(); $ops['position'] = ["p_plot{$thisq}_a", "p_plot{$thisq}_b"];
    $ops['attributes']="{strokeColor:'rgb(200,0,230)'}";
    $board = JSXG_addLine($board, $ops);

## JSXG_addRay($board, $ops, $ref)

Adds a ray to an existing set of axes or board. $board should be a variable returned from a board or axes construction function.

$ops is an associative array containing name/value pairs for the options. The options are:

- $ops['slider-names']=[(string)], array of slider names, tells PHP that you're going to be using those slider values. If you're not using a slider, don't set this option.
- $ops['position']=[[(float|string) x1, (float|string) y1], [(float|string) x2, (float|string)y2]] sets the starting point and point to pass through of the ray. Slider values can be used. If you want to reference a point, use the point name for a position of the segment: $ops['position']=["p_plot{$thisq}_a", [0,3]];
- $ops['strokeColor']=(string) sets the color of the arrow
- $ops['strokeWidth']=(int) sets the width of the arrow. Defaults to 2.
- $ops['dash']=(int) will make the arrow dashed. Not dashed by default. Set to 2-9 for dashing.

$ref is an optional variable that will give a reference to this object, so the JavaScript object can be referenced via ray_$label_$ref where $label is the label of the board that the ray lives in.

#### Example

    loadlibrary("JSXG");

    $ops=array(); $ops['size']=[400,400]; $ops['bounds']=[-5,5,-5,5]; $ops['controls'] = ['no-pan'];
    $board = JSXG_createBlankBoard("plot{$thisq}", $ops);

    $ops=array(); $ops['position'] = [-1,1]; $ops['name']='A';
    $board = JSXG_addPoint($board, $ops, "a");

    $ops=array(); $ops['position'] = [[0,0], "p_plot{$thisq}_a"];
    $ops['attributes']="{strokeColor:'rgb(200,0,230)'}";
    $board = JSXG_addRay($board, $ops);

## JSXG_addAngle($board, $ops, $ref)

Adds an angle to an existing set of axes or board. $board should be a variable returned from a board or axes construction function.

$ops is an associative array containing name/value pairs for the options. The options are:

- $ops['slider-names']=[(string)], array of slider names, tells PHP that you're going to be using those slider values. If you're not using a slider, don't set this option.
- $ops['position']=[(point) p1, (point) p2, (point) p3] defines the angle as ∠p1, p2, p3. Slider values can be used. If you want to reference a point, use the point name for a position of the segment: $ops['position']=["p_plot{$thisq}_a", [0,0], ["%a", 0]];
- $ops['strokeColor']=(string) sets the color of the arrow
- $ops['strokeWidth']=(int) sets the width of the arrow. Defaults to 2.
- $ops['dash']=(int) will make the arrow dashed. Not dashed by default. Set to 2-9 for dashing.

$ref is an optional variable that will give a reference to this object, so the JavaScript objects can be referenced via angle_$label_$ref_i (initial ray) and angle_$label_$ref_t (terminal ray) where $label is the label of the board that the angle lives in.

#### Example

    loadlibrary("JSXG");

    $ops=array(); $ops['size']=[400,400]; $ops['bounds']=[-5,5,-5,5]; $ops['controls'] = ['no-pan'];
    $board = JSXG_createBlankBoard("plot{$thisq}", $ops);

    $ops=array(); $ops['position'] = [-1,1]; $ops['name']='A';
    $board = JSXG_addPoint($board, $ops, "a");

    $ops=array(); $ops['position'] = [1,2]; $ops['name']='B';
    $board = JSXG_addPoint($board, $ops, "b");

    $ops=array(); $ops['position'] = ["p_plot{$thisq}_a", [0,0], "p_plot{$thisq}_b"];
    $board = JSXG_addAngle($board, $ops);

## JSXG_addCircle($board, $ops, $ref)

Adds a circle to an existing set of axes or board. $board should be a variable returned from a board or axes construction function.

$ops is an associative array containing name/value pairs for the options. The options are:

- $ops['slider-names']=[(string)], array of slider names, tells PHP that you're going to be using those slider values. If you're not using a slider, don't set this option.
- $ops['position']=[(point) center, (float) radius] sets the center and radius of the circle, The second argument can also be a point, and the circle will pass through that point. If you want to reference a point, use the point name for a position of the segment: $ops['position']=["p_plot{$thisq}_a", 2];
- $ops['strokeColor']=(string) sets the color of the arrow
- $ops['strokeWidth']=(int) sets the width of the arrow. Defaults to 2.
- $ops['dash']=(int) will make the arrow dashed. Not dashed by default. Set to 2-9 for dashing.

$ref is an optional variable that will give a reference to this object, so the JavaScript object can be referenced via circ_$label_$ref where $label is the label of the board that the circle lives in.

#### Example

    loadlibrary("JSXG");

    $ops=array(); $ops['size']=[400,400]; $ops['bounds']=[-5,5,-5,5]; $ops['controls'] = ['no-pan'];
    $board = JSXG_createBlankBoard("plot{$thisq}", $ops);

    $ops=array(); $ops['range'] = [0,4,1]; $ops['name']='a';
    $board = JSXG_addSlider($board, "a", $ops);

    $ops=array(); $ops['position'] = [1,2]; $ops['name']='C';
    $board = JSXG_addPoint($board, $ops, "c");

    $ops=array(); $ops['position'] = ["p_plot{$thisq}_c", "%a"]; $ops['slider-names']=["a"];
    $board = JSXG_addCircle($board, $ops);

## JSXG_addPolygon($board, $ops, $ref)

Adds a polygon to an existing set of axes or board. $board should be a variable returned from a board or axes construction function.

$ops is an associative array containing name/value pairs for the options. The options are:

- $ops['slider-names']=[(string)], array of slider names, tells PHP that you're going to be using those slider values. If you're not using a slider, don't set this option.
- $ops['position']= [array of points] sets the vertices of the polygon. If you want to reference a point, use the point name for a position of the segment: $ops['position']=["p_plot{$thisq}_a", "p_plot{$thisq}_a", [0,0]];
- $ops['strokeColor']=(string) sets the color of the arrow
- $ops['strokeWidth']=(int) sets the width of the arrow. Defaults to 2.
- $ops['dash']=(int) will make the arrow dashed. Not dashed by default. Set to 2-9 for dashing.

$ref is an optional variable that will give a reference to this object, so the JavaScript object can be referenced via poly_$label_$ref where $label is the label of the board that the polygon lives in.

#### Example

    loadlibrary("JSXG");

    $ops=array(); $ops['size']=[400,400]; $ops['bounds']=[-5,5,-5,5]; $ops['controls'] = ['no-pan'];
    $board = JSXG_createBlankBoard("plot{$thisq}", $ops);

    $ops=array(); $ops['range'] = [-2*pi,2*pi,0]; $ops['name']='a';
    $board = JSXG_addSlider($board, "a", $ops);

    $ops=array(); $ops['position'] = [-1,1];
    $board = JSXG_addPoint($board, $ops, "a");

    $ops=array(); $ops['position'] = [1,2];
    $board = JSXG_addPoint($board, $ops, "b");

    $ops=array(); $ops['position'] = ["p_plot{$thisq}_a", "p_plot{$thisq}_b", ["2*cos(%a)", "2*sin(%a)"]]; $ops['slider-names']=["a"];
    $ops['attributes'] ="{fillColor:'green', fillOpacity:0.7}";
    $board = JSXG_addPolygon($board, $ops);

## JSXG_addGlider($board, $ops, $ref)

Adds a glider (or point on an object) to an existing set of axes or board. $board should be a variable returned from a board or axes construction function.

$ops is an associative array containing name/value pairs for the options. The options are:

- $ops['position']= [(float) x, (float) y, (object) home] sets the starting location of the point, and the object the point/glider lives on. If you want to reference a point, use the point name for a position of the segment: $ops['position']=[0,0, "circ_plot{$thisq}_a"];
- $ops['color']=(string) sets the color of the point
- $ops['size']=(int) sets the size of the point. Defaults to 2.
- $ops['face']=(string) sets the face of the point. Defaults to "circle".
- $ops['name']=(string) sets the label of the point. ASCIIMath can be used.
- $ops['answerbox']=[$thisq, (optional) partNumber], if specified, this will like the point's coordinates to an answer box. If the question is not multipart/conditional, use $ops['answerbox']=[$thisq]. If multipart, use $ops['answerbox']=[$thisq, 0] to link to first box, etc..

$ref is an optional variable that will give a reference to this object, so the JavaScript object can be referenced via glider_$label_$ref where $label is the label of the board that the glider lives in.

#### Example

    loadlibrary("JSXG");

    $ops=array(); $ops['size']=[400,400]; $ops['bounds']=[-5,5,-5,5]; $ops['controls'] = ['no-pan'];
    $board = JSXG_createBlankBoard("plot{$thisq}", $ops);

    $ops=array(); $ops['range'] = [1,3,1]; $ops['name']='a';
    $board = JSXG_addSlider($board, "a", $ops);

    $ops=array(); $ops['position'] = [[0,0], "%a"]; $ops['slider-names']=["a"];
    $board = JSXG_addCircle($board, $ops, "1");

    $ops=array(); $ops['position'] = [1,0, "circ_plot{$thisq}_1"];
    $board = JSXG_addGlider($board, $ops, "1");

    $ops=array(); $ops['position'] = [[0,0], "glider_plot{$thisq}_1"];
    $board = JSXG_addLine($board, $ops);

## JSXG_addTangent($board, $glidername, $ops, [$ref])

Adds a tangent line to an object (circle, function, etc.). These can only be placed on a glider that exists on the object. $board should be a variable returned from JSXG_createAxes(), JSXG_createPolarAxes(), or JSXG_createBlankBoard().

$ops is an associative array containing name/value pairs for the options. The options are:

- $ops['glider'] = (string) - a reference to a glider on the object you wish to attach your tangent line to.
- $ops['label'] = (string) - adds a label to the tangent line, this can be wrapped in `` for math notation.
- $ops['color'] = (string) - sets the color of the tangent line. Can be expressed as a word describing the color such as 'blue' or as a RGB hexidecimal value such as '#00FF65'.
- $ops['dash'] = (int) - if set, draws the line as a set of dashes. Use 1 - 6 as input for different patterns.
- $ops['width'] = (int) - sets the width of the tangent line, the default is 2.
- $ops['visible'] = (boolean) - can be used to show or hide the tangent by default, this can be changed later by using JSXG_setAttribute().

$ref is an optional variable that will give a reference to this object, so the JavaScript object can be referenced via tangent_$label_$ref where $label is the label of the board that the tangent lives in.

#### Example

    loadlibrary("JSXG")

    loadJSX()
    $board = JSXG_createAxes("plot{$thisq}")

    $ops = array()
    $ops['rule'] = "sec(x)"
    $board = JSXG_addFunction($board, $ops, "1")

    $ops = array()
    $ops['position'] = [1, 0, "func_plot{$thisq}_1"]
    $board = JSXG_addGlider($board, $ops, "1")

    $ops = array()
    $ops['glider'] = "glider_plot{$thisq}_1"
    $board = JSXG_addTangent($board, $ops, "1")

## JSXG_setAttribute($board, $object, $parameters)

Can be used to change an attribute of an object after it has been initialized.

$board - the name of the board for which the object resides.

$object - the reference name of the object you want to make a change to.

$parameters - a json object containing comma-separated key:value pairs of the attributes you wish to change. See the JSX Graph API Reference for a list of available attributes on each type of object. Note that this object must be delimited as a string.

#### Example

    loadlibrary("JSXG")

    loadJSX()
    $board = JSXG_createAxes("plot{$thisq}")

    $ops = array()
    $ops['rule'] = "x^2-3"
    $board = JSXG_addFunction($board, $ops, "1")

    $board = JSXG_setAttribute($board, "func_plot{$thisq}_1", "{ strokeColor: 'red' }")