All bind functions support two way binding, i.e. if the input itself is modified then the graph will be modified as well and the modification of the graph modifies the inputs matching the bound objects. It also makes sure that when the page is reloaded and a value is already in the input the graph will be restored to a configuration matching the value that is in the input.

None of the binding functions will set the value of the input unless the bound object gets moved. This may be problematic if one has multiple inputs and it is not necessarily natural to move all the objects, yet one has PRTs that only activate once all the inputs have values. To deal with this one can define groups stack_jxg.define_group([point1,point2,slider...]) of objects so that moving even one of them triggers all the input tied to them to be filled. In some cases one may even want the inputs to be considered moved from the very start, however in those cases one probably won't give points, to make an object start as moved and thus populate the matching input use stack_jxg.starts_moved(point_or_slider).

Currently, the binding function support points and sliders, but other types can be supported in the future. However, acting on these two primitives is often simpler than trying to deal with more complex constructions. There are special functions for dealing with pairs of points i.e. vectors/circles that may prove to be useful for many tasks.

All floats are in excessive accuracy, this due to the variable geometries and previsions of the display devices and the need to restore the objects to their original positions on page load. You will need to do your own rounding if you show these values to the student in the feedback.

Basic binding

stack_jxg.bind_point(input, point) just returns a list with two floating point values:

[[escape]]
[[jsxgraph input-ref-bp="input" width="100%" aspect-ratio="3/2"]]
 var board = JXG.JSXGraph.initBoard(divid, {axis: true});
 var p = board.create('point', [1,1], {name:"Bound"});
 var p2 = board.create('point', [-1,-1], {name:"Not bound"});
 stack_jxg.bind_point(input, p);
[[/jsxgraph]]
[[/escape]]

stack_jxg.bind_slider(input, slider) just returns the value of the slider a float:

[[escape]]
[[jsxgraph input-ref-bs="input" width="100%" aspect-ratio="3/2"]]
 var board = JXG.JSXGraph.initBoard(divid, {axis: true});
 var s = board.create('slider', [[-2,1],[2,1],[-2,1,2]], {name:"Bound"});
 stack_jxg.bind_slider(input, s);
[[/jsxgraph]]
[[/escape]]

At this point we stop showing the validation messages, as they take room.

Dual point binding

It is not uncommon to have to represent a vector or any other construction that needs to be defined with two points. We have three distinct forms of functions for this that aim to simplify the grading logic by providing precomputed values for direct use. For example, if the length of a vector or a radius of a circle is the thing that matters the stack_jxg.bind_point_direction might be handy as the second element of the second element in the value is the distance between those two points.

[[escape]]
[[jsxgraph input-ref-dp="inputdp" input-ref-dpr="inputdpr"
  input-ref-dpd="inputdpd" width="100%" aspect-ratio="3/2"]]
 var board = JXG.JSXGraph.initBoard(divid, {axis: true});
 var p1 = board.create('point', [1,1], {name:"A"});
 var p2 = board.create('point', [-1,-1], {name:"B"});
 board.create('line',[p1,p2], {straightFirst:false, straightLast:false});
 stack_jxg.bind_point_dual(inputdp, p1, p2);
 stack_jxg.bind_point_relative(inputdpr, p1, p2);
 stack_jxg.bind_point_direction(inputdpd, p1, p2);
[[/jsxgraph]]
[[/escape]]

Multi object binding

As stated earlier one may find oneself in trouble if there are multiple inputs tied to distinct objects and one's grading depends on all the inputs receiving values. In these examples the first one has three points of which A and B are bound to separate inputs and all three are bound to the third input, you should see that moving any point will populate the third input but will not populate the inputs bound to A or B if the moved point is not A or B. The three points to one input binding has been done with stack_jxg.bind_list_of(input, [point1,point2,slider....]), which will accept any number of objects as long as they are points or sliders and the number does not change during the lifecycle of this question variant.

[[escape]]
[[jsxgraph input-ref-p1="input1" input-ref-p2="input2"
  input-ref-poly="inputpoly" width="100%" aspect-ratio="3/2"]]
 var board = JXG.JSXGraph.initBoard(divid, {axis: true});
 var p1 = board.create('point', [1,1], {name:"A"});
 var p2 = board.create('point', [-1,-1], {name:"B"});
 var p3 = board.create('point', [0,-2], {name:"C"});
 stack_jxg.bind_point(input1, p1);
 stack_jxg.bind_point(input2, p2);
 stack_jxg.bind_list_of(inputpoly, [p1,p2,p3]);
[[/jsxgraph]]
[[/escape]]

If one wants A or B-point to be considered moved when others move one can use stack_jxg.define_group([point,slider...]) to define that it is part of a set of objects that are to be considered as one from the binding logics point of view. Note that a group will only trigger serialisation for its members and not for the groups of its members so if an object belongs to multiple groups movement does not propagate to other groups unless that object was actually moved.

[[escape]]
[[jsxgraph input-ref-p1b="input1" input-ref-p2b="input2"
  input-ref-polyb="inputpoly" width="100%" aspect-ratio="3/2"]]
 var board = JXG.JSXGraph.initBoard(divid, {axis: true});
 var p1 = board.create('point', [1,1], {name:"A"});
 var p2 = board.create('point', [-1,-1], {name:"B"});
 var p3 = board.create('point', [0,-2], {name:"C"});
 stack_jxg.bind_point(input1, p1);
 stack_jxg.bind_point(input2, p2);
 stack_jxg.bind_list_of(inputpoly, [p1,p2,p3]);
 stack_jxg.define_group([p1,p2,p3]);
[[/jsxgraph]]
[[/escape]]

Custom binding

The existing binding functions are relatively simple and mainly aim to numbers into the CAS, you can however use custom binding to define more complex serialization and deserialization logic for your own objects. If you go for this you will probably use JSON to encode structures and will have to deal with the STACK JSON parser. The major benefit here is that you may add arbitrarily complex rules in your serialization as well as make it work with varying numbers of elements.

To do a custom bind you use the stack_jxg.custom_bind(inputName, serializerFunction, desearializerFunction, listOfObjects)-function and should you need to connect more objects to that same input it is assumed that your (de)serialization-functions can do it and that you use stack_jxg.register_object(inputName, object, serializerFunction) to register any objects added after the initial custom bind. However, if you need to use it you are probably going to replace the whole operation logic anyway, just note that the rules for restoring, movement and starting as moved work as long as things are registered, if not then you will need to implement your own logic.

In this example, we represent point coordinates in a slightly different way, note that the input here is a string input as it needs to be able to accept JSON-objects and those are not something the normal inputs accept:

[[escape]]
[[jsxgraph input-ref-custom="input" width="100%" aspect-ratio="3/2"]]
 var board = JXG.JSXGraph.initBoard(divid, {axis: true});
 var points = [];
 for (var i=0; i<10; i++) {
  points.push(board.create('point', [10*(Math.random()-0.5),10*(Math.random()-0.5)]));
 }
 var serializer = () => {
  var r = [];
  for (var i=0; i < points.length; i++) {
   r.push({x:points[i].X(),y:points[i].Y()});
  }
  return JSON.stringify(r);
 }; 
 var deserializer = (value) => {
  var tmp = JSON.parse(value);
  for (var i=0; i < points.length; i++) {
   points[i].setPosition(JXG.COORDS_BY_USER,[tmp[i].x,tmp[i].y]);
   points[i].update();
  }
  points[0].board.update();
 };

 stack_jxg.custom_bind(input, serializer, deserializer, points);
[[/jsxgraph]]
[[/escape]]