jsxgraph Macro Library

JSXGraph Integration functions - Version 1.1
by David Flenner

Written: October 14th, 2020

Last Updated: January 30th, 2021

Adapted from JSXG library written by Grant Sander


Introduction

This library provides an interface to the mathematics graphics library JSXGraph for iMathAS systems such as MyOpenMath. To use the library, you must first call the function:

loadlibrary("jsxgraph")

Then you must create a "board" that you will add objects on. You create a board through a call like:

$board = jsxBoard("rectangular")

Where "rectangular" indicates a standard cartesian coordinate grid. You can also create a "polar" grid, or a "geometry" board that is blank. Once you create the board, you can start adding objects to the board. To add an object, you make a call such as:

$a = jsxPoint($board, [1, 2])

Where $board is the variable name of the board you created, $a is a reference to the point you are making and [1, 2] are the coordinates of the point. Every object you create can take a number of different options that you can control: color, size, dashes, etc. This is done by passing an optional associative array to the end of your function call. For instance:

$b = jsxPoint($board, [-1, 2], ["color" => "blue"])

This will make a second point on the board that will be blue. See the documentation below for the types of options you can control for each object

Another feature of this library is the ability for these objects to interact with each other. You can use the reference variable in the creation of other objects. For instance, you could write:

$c = jsxCircle($board, [$a, $b])

This would make a circle that passes through the points $a and $b. The really cool thing is that now if you move points $a or $b on your board, the circle will adjust accordingly! You can even use functions like: $a.X(), or $a.Y() if you want to reference the individual components of the point. For instance:

$f = jsxFunction($board, "(x - $a.X()) * (x - $b.X()))")

will create a parabolic graph whose zeros are located at the x-values of points $a and $b, and will automatically adjust every time point $a or $b is moved!

To label your objects, this library allows the use of either static or dynamic labeling. If you want to label an object, simply pass the label text as an option:

$p = jsxPoint($board, [1, 2], ['label' => 'A'])

This will create a point with the label text 'A' attached to it and as you move the point, the label will follow. If you want to customize the label, you can change the 'fontcolor' and the 'fontsize' through $options. All labels support ASCII math, and that can be enabled by surrounding your text with ``:

$p = jsxPoint($board, [1, 2], ['label' => '`pi`'])

Alternatively, you can use rendering hints to make your labels display in ASCII math, just pass your label as an array with the first element containing your label, and the next element containing the word: 'display'. This will wrap your label in back-ticks for you. Another rendering hint you can use is 'makepretty', this will attemp to clean up things like 1*x^2 = x^2 or 0*x+2 = 2 in your functions for nicer display. Test this extensively with your function as the regular expressions cleaning these can be buggy with different kinds of functions, but should work fine with polynomials, exponentials, and basic elementary functions.

$a = jsxFunction($board, "x+$a", ['label' => ["'y = x+' + $a.Value()", 'makepretty', 'display']])

If you need to express the deriviative of a function, it is best to write f prime (x) in your ASCII Math because writing f'(x) can confuse the system since ' is used to start and end a string

You can also create dynamic labels by using references to jsx objects in conjunction with javascript. To reference an object during creation, use the keyword 'this'. For instance, the following code will create a point that is labeled with its coordinates:

$p = jsxPoint($board, [1, 2], ['label' => "'(' + this.X().toFixed(2) + ', ' + this.Y().toFixed(2) + ')'"])
This is obviouly more of an advanced feature, but the library is written with the ability to keep things simple, but allow the extensibility of advanced constructs so the user can take full advantage of the power of JSX Graph.

Lastly, for grading, you can pass important aspects to an answerbox, and all the library needs to know is the question number in the assignment - and the answerbox number if you happen to be using a multipart question.

You can easily pass the quetion number through the variable [$thisq] that is defined for all questions in an assessment. If you pass: ["answerbox" => [thisq]] for a point object, then you will see the coordinates of the point show up in the answerbox for this question. You can then grab this data from the answerbox to check an answer.

I hope you find this library useful and easy to use. I've included a lot of example code below to give you ideas on how to use it. If you create a question using it, please tag the question with #jsx in the name of the question so its easy for everyone to be able to find these great interactive questions!

Notes:

Functions in this Library:

jsxBoard($type, [$options])

This function creates a jsx board that allows you to add jsx objects on to. You then display the graph in the question text by adding the $board where you would like the graph to display. The board $type must be specified as one of:

Additional optional items can be specified through an associative array:

The following options are used with rectangular boards:

The following options are used with polar boards:

The return of this function is a set of javascript code necessary to display your board, in order to add objects to your board you need to pass this variable to all of your following calls to functions like jsxPoint in order to add additional javascript code to your drawing.

Rectangular Example

loadlibrary("jsxgraph")
$ops = [ "size" => [300, 300], "bounds" => [-3,7,-5,5], "axislabel" => ["`x`","`y=x^2`"]]
$board = jsxBoard('rectangular', $ops)
  

Polar Example

loadlibrary("jsxgraph")
$ops = ['size' => [400, 400], 'padtop' => true, 'r' => [7,1], 'theta' => ['pi',6], 'pan' => false ]
$board = jsxBoard('polar', $ops)
  

jsxSlider($board, [$min, $max, $step, $defaultval], [$options])

A slider is like a variable that a user can control the value of on screen. The necessary input values are the minimum value for the variable, the maximum value, and what increment each change to the slider has on the value of the variable. The function returns a reference object to the slider that can be used in other parts of your construction to make interactive elements. $defaultval is an optional parameter and can be used to set the starting position of the slider, if it is omitted then the default value is the midrange.

An additional associative array can be provided to have futher control over the look and feel of the slider

Additional JavaScript functions that can be used in JSX constructions and labels:

Note: If you set the $step value to be less than 1, you will need to adjust the value of $decimals in order to display these value.

Example 1

loadlibrary("jsxgraph")
$board = jsxBoard("rectangular")
$a = jsxSlider($board, [0, 10, 1], ['answerbox' => [$thisq], 'color' => 'blue'])
  

Example 2

loadlibrary("jsxgraph")
$board = jsxBoard("rectangular")
$ops = ['answerbox' => [$thisq], 'position' => [[-4, -4], [1, -4]], 'color' => '#935218', 'decimals' => 1, 'name' => "a", 'fontsize' => 20, 'attributes' => '{ face: "cross" }']
$a = jsxSlider($board, [-15, 10, 0.1, 8], $ops)
  

Example 3

loadlibrary("jsxgraph")
$board = jsxBoard("rectangular")
$a = jsxSlider($board, [-10, 10, 0.1], ['label' => "'a =' + this.Value().toFixed(1)",  'decimals' => 1])
$f = jsxFunction($board, "($a) * (x-3)*(x+1)")
  

jsxPoint($board, [$x $y], [$options])

Adds a point to a $board, which is a variable returned from jsxBoard(). The initial location of the point must be provided as an array of two numbers, or as a string containing a function or a reference to another jsx object. The location of the point can be linked to an answerbox and updated as the user moves the point around. The return of the function is a reference to this point contained within a string. This reference can be used to link the point to other objects. You can reference the entire point with a variable such as $p, or individual components as $p.X(), or $p.Y().

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

Additional JavaScript functions that can be used in JSX constructions and labels:

Note: For easier grading you can either set question type to N-Tuple, or use the function jsx_getCoords() to help read the coordinates from the answerbox.

Example 1

loadlibrary("jsxgraph")
$board = jsxBoard('rectangular', ['pan' => false])
$a = jsxSlider($board, [-3, 3, 1])
$p = jsxPoint($board, [$a, 1])
  

Example 2

loadlibrary("jsxgraph")
$board = jsxBoard('rectangular')
$ops = ['size' => 3, 'face' => 'cross', 'label' => "`pi`", 'answerbox' => [$thisq]]
$p = jsxPoint($board, [2, 1], $ops)
  

jsxGlider($board, [[$x, $y], $obj], [$options])

Attaches a point to another object that has already been created, and restricts the movement of the point to this object. The input variable $board should be a reference to a board returned by jsxBoard(). The input location will adjust if the coordinates [$x, $y] does not appear on the curve of $obj, so choosing an $x value of where you want the point to start is genearlly sufficient. $obj must be a reference returned by another objected created by jsxgraph. Functions, parametric functions, polar graphs, circles, lines, polygons, etc. are all types of curves that a Glider can be attached to. The return is a reference to the glider object such as $g, which can be used as a reference in the creation of other objects. You can also reference its individual components with calls such as $g.X() or $g.Y().

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

Additional JavaScript functions that can be used in JSX constructions and labels:

Note: For easier grading you can either set question type to N-Tuple, or use the function jsx_getCoords() to help read the coordinates from the answerbox.

Example

loadlibrary("jsxgraph")
$board = jsxBoard('geometry', ['pan' => false])
$c = jsxCircle($board, [[0, 0], 2], ['visible' => false])
$p = jsxGlider($board, [[0, -2], $c], ['label'=>"A", 'color' => 'blue', 'trace' => true]) 
  

jsxIntersection($board, [$obj1 $obj2], [$options])

Creates an intersection point between two lines, two circles, or a circle and a line. If a circle is used, then only one intersection point will be found, but you can choose which one is found through the parameter 'negativeroot'. By default, jsxgraph will find the one that results in a positive square root when it is locating the intersection. $bj1 and $obj2 are expected to be references to either jsx lines or circles that were previously used in your construction.

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

Additional JavaScript functions that can be used in JSX constructions and labels:

Note: For easier grading you can either set question type to N-Tuple, or use the function jsx_getCoords() to help read the coordinates from the answerbox.

Example 1

loadlibrary("jsxgraph")
$board = jsxBoard('rectangular')
$a = jsxPoint($board, [-4, -3])
$b = jsxPoint($board, [-2, 4])
$c = jsxPoint($board, [3, 3])
$d = jsxPoint($board, [-5, -1])
$l1 = jsxLine($board, [$a, $b])
$l2 = jsxLine($board, [$c, $d])
$i = jsxIntersection($board, [$l1, $l2], ['color' => 'blue', 'label' => 'A'])
  

jsxFunction($board, $f, [$options])

Adds the graph of a function to a jsx $board, which is a variable that must be returned from jsxBoard(). $f is the function to graph written as a string using common calculator notation. The return is a variable which is a string object reference to the function, which can be used in other parts of the construction.

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

Example 1

loadlibrary("jsxgraph")
$board = jsxBoard('rectangular', ['zoom' => false, 'pan' => false])
$a = jsxSlider($board, [-3, 3, 0.1, 1], ['decimals' => 1])
$f = jsxFunction($board, "sin($a*x)")
  

Example 2

loadlibrary("jsxgraph")
$board = jsxBoard('rectangular', ['zoom' => false, 'pan' => false])
$a = jsxSlider($board, [-3, 3, 0.1, 1])
$ops = ['domain' => [$a, 10]]
$f = jsxFunction($board, "sin(x)", $ops)
  

Example 3

loadlibrary("jsxgraph")
$board = jsxBoard('rectangular')
$l = jsxLine($board, [[0, 0], [1, 0]], [ 'visible' => false ])
$p = jsxGlider($board, [[-2, 0], $l])
$q = jsxGlider($board, [[2, 0], $l])
$f = jsxFunction($board, "-(x-$p.X())(x-$q.X())")

jsxParametric($board, [$x, $y], [$options])

Adds a parametric curve to a jsx $board created by jsxBoard(). $x and $y are strings that represent functions expressed in common calculator syntax and are of the variable t by default.

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

Example

loadlibrary("jsxgraph")
$board = jsxBoard('rectangular')
$d = jsxSlider($board, [-3.14, 3.14, 0.01], ['decimals' => 2])
$curve = jsxParametric($board, ["3sin(4t + $d)", "3sin(5t)"])
  

jsxPolar($board, $rule, [$options])

Adds a polar curve to an existing $board which is a variable returned from jsxBoard(). The variable $rule contains the function that needs to be drawn. It is expected to be a function of t, but this can be modified if needed. The return of this function is a reference to the curve that can be used in other object constructions.

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

Example

loadlibrary("jsxgraph")
$ops = ['size' => [400, 400], 'r' => [7,1], 'theta' => ['pi',6], 'pan' => false]
$board = jsxBoard('polar', $ops)
$a = jsxSlider($board, [0.1, 8, 0.1, 1], ['decimals' => 1])
$graph = jsxPolar($board, "t/3 * cos(t)", [ 'domain' => [0, "$a * pi"]])
  

jsxCircle($board, [$paramenters], [$options])

Adds a circle to an existing $board created by a call to jsxBoard(). The parameters can be set in differnet ways. You can call with [[$x, $y], $r], which would create a circle centered at [$x, $y] and radius $r. The point can be a reference to a jsx point that was previously created or a new point. If you send a new point, the center of the circle will be static, but if you send a reference it will be dynamic. The same is true of the radius, if you use a reference to another jsx object it will be a dynamic radius. Another way to create a circle is to call with [[$h, $k], [$x, $y]] which will create a circle that has a center located at ($h, $k), and passes through the point ($x, $y). Finally, you can call with an array of three points which will create a circle through those three points.

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

Additional JavaScript functions that can be used in JSX constructions and labels:

$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 1

loadlibrary("jsxgraph")
$board = jsxBoard('rectangular')
$a = jsxSlider($board, [0, 3, 0.1, 1], ['decimals' => 1])
$p = jsxPoint($board, [0, 0])
$circ = jsxCircle($board, [$p, $a], ['color' => 'blue'])
  

Example 2

loadlibrary("jsxgraph")
$board = jsxBoard('rectangular')
$a = jsxPoint($board, [0, 0], ['color' => 'orangered'])
$b = jsxPoint($board, [-2, -2], ['color' => 'orangered'])
$ops = ['color' => 'orange', 'dash' => 3, 'fillcolor' => 'orange', 'fillopacity' => 0.3]
$circ = jsxCircle($board, [$a, $b], $ops)
  

Example 3

  
loadlibrary("jsxgraph")
$board = jsxBoard('rectangular')
$a = jsxPoint($board, [1, 1])
$b = jsxPoint($board, [-2, -2])
$circ = jsxCircle($board, [$a, $b, [-3, 2]], ['color' => 'blue'])

jsxPolygon($board [$pointlist], [$options])

Adds a polygon to a jsx $board object created by a call to jsxBoard(). The input to this function is an array of points describing the vertices of the polygon. If you use points defined as arrays of float values, these vertices will be static, but if you sent jsxPoints, or references to other objects, the vertices will be dynamic. The return of this function is a reference variable to this object that can be used in the creation of other objects.

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

Example

loadlibrary("jsxgraph")
$board = jsxBoard('rectangular')
$p = jsxPoint($board, [-1, 3])
$ops = ['fillcolor' => '#00FF00']
$poly = jsxPolygon($board, [[1, 2], $p, [-3, 2]], $ops)
  

jsxLine($board, [[$x1, $y1], [$x2, $y2]], [$options])

Adds a line to a jsx $board, which is a variable returned from jsxBoard. The input to this function two points that the line line is passing through. This can be an array of float values that will produce a static point, or it can be a reference to a jsx point of some sort to make a dynamic line. The return is a reference to the line that can be used in other jsx object creations.

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

Additional JavaScript functions that can be used in JSX constructions and labels:

Example

loadlibrary("jsxgraph")
$board = jsxBoard('geometry')
$c = jsxCircle($board, [[0, 0], 2.5])
$p = jsxGlider($board, [[2.5, 0], $c], ['label' => 'A', 'fontcolor' => 'blue'])
$line = jsxLine($board, [[-4, 0], $p])
  

jsxSegment($board, [[$x1, $y1], [$x2, $y2]], [$options])

Adds a segment to a jsx $board, which is a variable returned from jsxBoard. A segment is defined a the portion of a line that begins at [$x1, $y1] and ends at [$x2, $y2]. Each point can either be an array of float values - which will produce a static point, or it can be a reference to a jsx point of some sort to make a segment that can be manipulated. The return is a reference to the segment that can be used in other jsx object creations.

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

Additional JavaScript functions that can be used in JSX constructions and labels:

Example

loadlibrary("jsxgraph")
$board = jsxBoard('geometry')
$a = jsxPoint($board, [-4, -3], ['label' => 'A'])
$b = jsxPoint($board, [-2, 4], ['label' => 'B'])
$c = jsxPoint($board, [1, 0], ['label' => 'C'])
$s0 = jsxSegment($board, [$a, $b])
$s1 = jsxSegment($board, [$b, $c], ['label' => "this.L()"])
$s2 = jsxSegment($board, [$c, $a], ['length' => 5.8])
  

jsxRay($board, [[$x1, $y1], [$x2, $y2]], [$options])

Adds a ray to a jsx $board, which is a variable returned from jsxBoard. A ray is defined a the portion of a line that begins at [$x1, $y1] and extentds through [$x2, $y2]. An arrow is drawn by default at the end of the ray indicating its diretction. This can be turned off by setting lastArrow to false in an attribute setting. Each point can either be an array of float values - which will produce a static point, or it can be a reference to a jsx point of some sort to make a ray that can be manipulated. The return is a reference to the ray that can be used in other jsx object creations.

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

Additional JavaScript functions that can be used in JSX constructions and labels:

Example

loadlibrary("jsxgraph")
$board = jsxBoard('geometry')
$a = jsxPoint($board, [0, 0])
$r1 = jsxSegment($board, [$a, [4, 0]])
$r2 = jsxSegment($board, [$a, [-4, 0]])
  

jsxVector($board, [[$x1, $y1], [[$x2, $y2]] or [$mag, $dir], [$options])

Createa a vector on a jsx $board, which is a variable returned by jsxBoard. You can call the function with the x and y coordinates of an initial and terminal point of a vector, or you can provide the magnitude and direction of a vector in standard position. If you need the initial point in the second example to be something other than [0, 0], you can set the offset parameter with an array of points to place the start of the vector. The return of the function is a reference to the vector object that can be used in other jsx object constructions.

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

Additional JavaScript functions that can be used in JSX constructions and labels:

Example

loadlibrary("jsxgraph")
$board = jsxBoard('geometry')
$a = jsxSlider($board, [0, 1, 0.01, 0], ['decimals' => 2])
$v = jsxVector($board, [3, "$a * 2 * pi"])
  

jsxTangent($board, $glider, [$options])

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 jsxBoard().

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

Additional JavaScript functions that can be used in JSX constructions and labels:

Example

loadlibrary("jsxgraph")
$board = jsxBoard('rectangular')
$f = jsxFunction($board, "sec(x)")
$p = jsxGlider($board, [[0, 0], $f])
$ops = ['label' => "'`m` = ' + this.getSlope().toFixed(2)"]
$tangent = jsxTangent($board, $p, $ops)

  

jsxAngle($board, [$p1, $p2, $p3], [$options])

Creates an angle on a jsx $board, which is a variable created by jsxBoard(). This will only create the angle measure itself, and will not create lines to surround the angle. $p1, $p2, and $p3 are the three points that define the angle, $p1 being the center point. The order of $p1 and $p3 is important as one direction will make an internal angle and the other order will create an external angle. Right angles are marked with a square.

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

Additional JavaScript functions that can be used in JSX constructions and labels:

Example

loadlibrary("jsxgraph")
$board = jsxBoard('geometry')
$p1 = jsxPoint($board, [4, 0])
$p2 = jsxPoint($board, [0, 0], ['visible' => false])
$p3 = jsxPoint($board, [-1, 4])
$v1 = jsxVector($board, [$p2, $p1])
$v2 = jsxVector($board, [$p2, $p3])
$ops = ['label' => "'α = ' + (this.Value() * 180 / pi).toFixed(0) + '°'"]
$angle = jsxAngle($board, [$p1, $p2, $p3], $ops)
  

jsxText($board, [[$x, $y], $text], [$options])

Enables the ability to add a text box to a jsx $board. This is the same construct as an object's label, but it allows placement anywhere on the board, and doesn't have to be anchored to an object. Can be used to display aspects of objects.

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

Example

loadlibrary("jsxgraph")
$board = jsxBoard('geometry')
$p1 = jsxPoint($board, [4, 0])
$text = jsxText($board, [[-4.5, 4.5], "'`x = `' + $p1.X().toFixed(2)"])
  

jsxIntegral($board, [[$x1, $x2], $f], [$options])

Creates an integral object, which allows to shade the area trapped between a curve and the x-axis. [$x1, $x2] is an array of a starting x-value and ending x-value for the integral, these can be float values or references to other jsx objects. If float values are provided, then a static integral will be created, if jsx objects are provided, then the integral will be interactable. $param[1] is a function created by jsx to find the area under. The return is a reference that can be used in other object creation.

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

Additional JavaScript functions that can be used in JSX constructions and labels:

Example 1

loadlibrary("jsxgraph")
$board = jsxBoard('rectangular')
$a = jsxSlider($board, [-pi, pi, 0.1], ['decimals' => 1])
$f = jsxFunction($board, "sin(x)")
$integral = jsxIntegral($board, [[$a, pi], $f])
  

Example 2

loadlibrary("jsxgraph")
$board = jsxBoard('rectangular')
$k = jsxSlider($board, [0, 3, 0.1, 1], ['decimals' => 1])
$axis = jsxLine($board, [[0, 0], [1, 0]], ['visible' => false])
$a = jsxGlider($board, [[-1, 0], $axis])
$b = jsxGlider($board, [[1, 0], $axis])
$f = jsxFunction($board, "$k * sin(x)")
$integral = jsxIntegral($board, [["$a.X()", "$b.X()"], $f], ['label' => "'`int = `' + this.Value().toFixed(2)"])
  

jsxRiemannSum($board, [[$a, $b, $n], $f or [$f, $g], [$options])

Creates a Riemann sum trapped between a function and the x-axis, or between two different functions. The parameters expected are passed in an array and are: an array containing the lower endpoint and upper endpoint of the interval and the number of rectangles to use. Each of these items can be numeric that will make them static. You can also use references to other jsx objects in order to make them dynamic. The second parameter can be a single function in order to create rectangles between the x-axis and the function, or an array of functions which will draw the rectanges between the functions. The return is an object reference that can be used in the creation of other jsx objects.

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

Additional JavaScript functions that can be used in JSX constructions and labels:

Example 1

loadlibrary("jsxgraph")
$board = jsxBoard('rectangular')
$n = jsxSlider($board, [1, 100, 1, 4])
$f = jsxFunction($board, "4*sin(x)")
$sum = jsxRiemannSum($board, [[-pi, pi, $n], $f], ['type' => 'middle'])
  

Example 2

loadlibrary("jsxgraph")
$board = jsxBoard('rectangular')
$n = jsxSlider($board, [1, 10, 1, 4])
$axis = jsxLine($board, [[0, 0], [1, 0]], ['visible' => false])
$a = jsxGlider($board, [[-1, 0], $axis])
$b = jsxGlider($board, [[1, 0], $axis])
$f = jsxFunction($board, "2")
$g = jsxFunction($board, "x")
$sum = jsxRiemannSum($board, [["$a.X()", "$b.X()", $n], [$f, $g]])
  

jsxSuspendUpdate($board)

Temporarily pauses all updates to a board object so that a lot of objects can be drawn more quickly. This is useful if you have a lot of objects to draw initially, like a set of points for instance.

jsxUnsuspendUpdate($board)

Unpauses updates to a board object so that objects will become interactive again.

jsxSetChild($parentBoard, $childBoard)

Sets a relation between two boards so that changes to sliders/gliders in the parent board trigger updates in the child board. Note that the parent board needs to be displayed first to prevent errors.

jsx_getCoords(string)

Takes a string that depicts a point and returns the x and y coordinates contained within, useful for grading questions based on the location of a jsx point.

jsx_getXCoord(string)

Takes a string that depicts a point and returns only the x coordinate of the point, useful for grading questions based on the location of a jsx point.

jsx_getYCoord(string)

Takes a string that depicts a point and returns only the y coordinate of the point, useful for grading questions based on the location of a jsx point.

Advanced Examples

This example demonstrates how to make dynamic aspects from items that may not seem obvious. JSX Graph supports making all items dynamic, but it isn't always useful. However, this library gives you the ability to take advantage of those advanced constructs but you must resort to more complex notation. For example here, I have tied the opacity attribute of a polygon to a slider, allowing me to change the opacity dynamically. This had to be accomplished by creating a wrapper function - which is a common construct in JSX dynamic objects - within a json parameter. Notice that within the construct I can call $a which is a reference to the slider, but I have to call $a.Value() in order to get the value of the slider. This is the procedure in JSX graph, but in this library, I made it so you don't have to use the .Value() function to get the value of a slider for simplicity.

Example 1

loadlibrary("jsxgraph")
$board = jsxBoard('rectangular')
$a = jsxSlider($board, [0, 1, 0.01], ['decimals' => 2])
$poly = jsxPolygon($board, [[1, 2], [-1, 3], [-3, 2]], ['attributes' => " { fillOpacity: function() { return $a.Value(); } } "])
$g = jsxGlider($board, [[0, 0], $poly])

The next example demonstrates how you can control the positioning of labels if the default position is not preferred. The easiest option is to use a text object for the label, rather than the objects' label because the positioning can easily be controlled through the anchor attribute.

Example 2

loadlibrary("jsxgraph")
$board = jsxBoard('rectangular')
$a = jsxPoint($board, [-3, -2])
$b = jsxPoint($board, [4, 1])
$midpoint = jsxPoint($board, ["($a.X() + $b.X()) / 2", "($a.Y() + $b.Y()) / 2"], ['visible' => false])
$line = jsxLine($board, [$a, $b])
$label = jsxText($board, [[0,0], "'slope = ' + $line.getSlope().toFixed(2)"], ['anchor' => "$midpoint"])

The next example is an example that utilizes grading within jsxgraph. The question type here is set to "Conditional".

Example 3

// Common Control:

loadlibrary("jsxgraph")
$anstypes = ["number"]
$board = jsxBoard("geometry", $ops)

$c = jsxCircle($board, [[1, -2], 2], ["fillcolor" => "red", "color" => "red"])
$p = jsxPoint($board, [0, 0], ["answerbox" => [$thisq, 0]])

$stu = getstuans($stuanswers, $thisq, 0)
if($stu == null) {
  $stu = -50 // Make a default answer
} else {
  $x, $y = jsx_getCoords($stu) // parse the x and y coordinates from the point
}

$dist = sqrt(($center[0] - $x)^2 + ($center[1] - $y)^2)
//print_r($dist)

$answer = ($dist < $radius)

// Question Text:
Move the point into the circle for credit.
$board
// Note: you can hide the answerbox with a line like below, but remove the extra spaces after the < and the \
< p hidden>$answerbox<\ p>