JSXGraph Integration functions, Version 1.0, September 2, 2016. Written by Grant Sander.
Note: The jsxgraph macro library is an updated and more versitile version of these functions.
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.
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'}";
This function merely loads the JSXGraph script into the page, used to load the script for custom constructions.
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:
The created board with have a JS-name of board_$label.
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.
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:
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);
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:
$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.
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);
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:
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);
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:
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);
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:
The created board with have a JS-name of board_$label.
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.
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:
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);
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:
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);
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:
$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.
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");
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:
$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.
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);
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:
$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.
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);
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:
$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.
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);
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:
$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.
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);
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:
$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.
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);
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:
$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.
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);
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:
$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.
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);
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:
$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.
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);
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:
$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.
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")
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.
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' }")