• STACK version does not allow you to name the div-element storing the graph, instead it gives you the name it has chosen in a variable named divid, the reason for this is that we ensure that each graph has an unique identifier and that there cannot exist name collisions, not even if you were to place the same question twice on the same page.
• We provide a way to reference the input fields of the question and provide the identifiers of those input field elements if requested. The key benefit here is that we can provide those references in the same way regardless on the VLE you are running the question in, so you do not need to adapt the graph code if you decide to ditch Moodle and move ILIAS or some other system. (see more of this in the other examples of this category)
• We also provide convenience functions to bind primitives (points and sliders) in the graph to STACK input fields so that you do not need to repeat that binding code yourself. Basically, single call to binding function will replace about twenty lines of code, more importantly we can change the implementation of the binding functions if the world changes so that you do not need to fix all your graphs with all their bindings.

Note that as these graphs are coded in JavaScript you should not use WYSIWYG editors to edit these questions, as they tend to "helpfully" add random styling to random places and might break things. In Moodle do switch your text editor to 'plain text area', before editing these.

Now as a minimal example lets copy some example from JSXGraphs showcase library http://jsxgraph.uni-bayreuth.de/wiki/index.php/Showcases. Note, that we do not provide memory for this example, so it will revert to its initial state when the page reloads or you return to this page.

[[escape value="[[jsxgraph width='500px' height='500px']]"/]]
/* http://jsxgraph.uni-bayreuth.de/wiki/index.php/Five_Circle_Theorem */
/* Only difference here to the example is the 'jxgbox' => divid replacement */
/* so that the element name becomes dynamic. */
var brd = JXG.JSXGraph.initBoard(divid, {boundingbox:[-5,5,5,-5]});
var p = [], l = [], i = [], c = [], j = [], k;

p[0] = brd.create('point',[-2.5,-3],{name:'',strokeColor:'#7355ff',fillColor:'#7355ff'});
p[1] = brd.create('point',[-0,4],{name:'',strokeColor:'#7355ff',fillColor:'#7355ff'});
p[2] = brd.create('point',[2.5,-3],{name:'',strokeColor:'#7355ff',fillColor:'#7355ff'});
p[3] = brd.create('point',[-4,0],{name:'',strokeColor:'#7355ff',fillColor:'#7355ff'});
p[4] = brd.create('point',[4,0],{name:'',strokeColor:'#7355ff',fillColor:'#7355ff'});

for (k=0;k<5;k++) {
   l[k] = brd.create('segment',[p[k],p[(k+1)%5]],{strokeColor:'black',strokeWidth:1});
}

for (k=0;k<5;k++) {
   i[k] = brd.create('intersection',[l[k],l[(k+2)%5],0],{name:'',strokeColor:'#EAEA00',fillColor:'#EAEA00'});
}

for (k=0;k<5;k++) {
   c[k] = brd.create('circumcircle',[p[k],i[k],i[(k+2)%5]],{strokeColor:'gray', strokeWidth:1, point: {visible: false}});
}
for (k=0;k<5;k++) {
   j[k] = brd.create('intersection',[c[k],c[(k+2)%5],0],{name:'',strokeColor:'#EA0000',fillColor:'#EA0000'});
}

var cc = brd.create('circumcircle',[j[0],j[2],j[3]],{strokeColor:'red',strokeWidth:2,point:{strokeColor:'#000000',fillColor:'#000000',size:1}});
brd.update();
[[escape value="[[/jsxgraph]]"/]]

Renders as:

As an simplified example of this we now build a graph with a line segment which has two draggable end points one of which is bound and one which is not. Drag the two points around and then press 'Check'. When the checking process reloads the page you should see the bound one staying where you dragged it to and the other to return into its initial position. You should also see that the STACK logic side received the position of the bound point.

[[escape value="[[jsxgraph input-ref-ans1='ans1Ref']]"/]]
var board = JXG.JSXGraph.initBoard(divid, {boundingbox: [-5, 5, 5, -5],showNavigation:false});
var p1 = board.create('point', [-3,3], {name:'Bound',size:4});
var p2 = board.create('point', [3,-3], {name:'Free',size:4});
var line = board.create('line', [p1,p2], {straightFirst:false, straightLast:false});

/* There exists a simple convenience method for binding inputs to points
    It just needs an input reference, defined as a parameter of the jsxgraph-block
    and a primitive object of the type of the binding, in this case a point. */
stack_jxg.bind_point(ans1Ref, p1);

/* Always call board.update() at the end if you have bindings. */
board.update();

/* In this example we hide the input as we are not yet ready to talk about two-way binding. */
document.getElementById(ans1Ref).style.display = 'none';
[[escape value="[[/jsxgraph]]"/]]

As a special test case here, try moving the bound one out of the box. For that to work the binding needs to track not only direct actions affecting the point but also changes caused by other actions. Those needing to build their own binding logic for more complex things should note this. Simply tracking the point may not be enough.

[[input:ans1]] [[validation:ans1]]

Now why would we want to do that when the graph itself sets the value!?

• We might want to provide the input field as a visible editable field so that if the student cannot drag e.g. the slider in the graph they can write the value into the input and the graph reacts as if the thing was moved there, this may be necessary in some cases, but it is not that useful generally.
• More likely is the case where we have multiple graphs connected to the same input and we want them to move in sync when something is done in any one of them.
• We could also have scripting outside the graph that could act on the value on the input(s) in some way and connecting to that might be difficult, but it is much simpler to connect to the input directly and our binding does just that.

This time you will need to open the questions source to see the code for these graphs, the key here being that each of them reference that same input and bind their slider to it.

Note that in this example if you write a valid value that the slider does not allow the slider will map that value to a value it allows and the binding to the other way will fix the input value. Basically, this slider has specific fixed ticks and those are enforced even in the input.

• Creation and deletion of arbitrary numbers of points/objects in graph cannot be tracked with one input per object logic as you cannot create inputs. In these cases you need to store more structure into inputs.
• Not dealing with the positions of things might also be an obvious case, if you want to for example track the order the student clicks some edges in some graph use of the simple binding tools will not help.

Basically, you cannot use one-to-one input-object-binding if you have dynamic number of objects. To deal with this you need to have some form of data-structures (simple lists of coordinates are often enough but once you have multiple types of things with connections between them you will probably want more) that you can store that represent the state of your graph. As you are authoring JSXGraph graphs in JavaScript the obvious structures are JavaScript objects/dictionaries and lists, luckily those can easily be turned to JSON strings that can be stored into String input fields. And what is important STACK now provides a way for parsing those JSON strings on Maxima side so that you can process the values there.

[[escape value="[[jsxgraph height='700px' width='700px' input-ref-ans1='ans1Ref']]"/]]
/* In this example ans1 is a String type input, which is important as the value we store 
   there is most definitely not a valid Maxima expression. */
var board = JXG.JSXGraph.initBoard(divid, {boundingbox: [-5, 5, 5, -5],showNavigation:false});

/* We will store our points here. */
var points = new Array();
var i = 0;

/* If we have stored state of points we will resurrect them now. */
var theInput = document.getElementById(ans1Ref);
if (theInput.value && theInput.value != '') {
 var pointList = JSON.parse(theInput.value);
 for (i=0; i<pointList.length; i++) {
  var p = board.create('point', [pointList[i]['x'],pointList[i]['y']], {name:'',color:pointList[i]['color']});
  points[i] = p;
 } 
}

/* Lets create some magic, in this example dragging points through specific areas changes 
   the color of the points. And there is an area that both creates and deletes points. */

var source = board.create('circle',[board.create('point',[-4,-4],{visible: false}),0.7], {  strokeColor:'black',frozen:true, fixed:true, method:'pointRadius',hasInnerPoints:true});
var red = board.create('circle',[board.create('point',[0,-4],{visible: false}),0.7], {  strokeColor:'red',frozen:true, fixed:true, method:'pointRadius',hasInnerPoints:true});
var green = board.create('circle',[board.create('point',[2,-4],{visible: false}),0.7], {    strokeColor:'green',frozen:true, fixed:true, method:'pointRadius',hasInnerPoints:true});
var blue = board.create('circle',[board.create('point',[4,-4],{visible: false}),0.7], { strokeColor:'blue',frozen:true, fixed:true, method:'pointRadius',hasInnerPoints:true});

/* A function the we can tie to points so that their color changes. */
var colorDragListener = function() {
 /* this in this context should be the point. */
 if (JXG.Math.Geometry.distance([this.X(),this.Y()],[source.center.X(),source.center.Y()]) < source.Radius()) {
  this.setAttribute({color:'black'});
 } else if (JXG.Math.Geometry.distance([this.X(),this.Y()],[red.center.X(),red.center.Y()]) < red.Radius()) {
  this.setAttribute({color:'red'});
 } else if (JXG.Math.Geometry.distance([this.X(),this.Y()],[green.center.X(),green.center.Y()]) < green.Radius()) {
  this.setAttribute({color:'green'});
 } else if (JXG.Math.Geometry.distance([this.X(),this.Y()],[blue.center.X(),blue.center.Y()]) < blue.Radius()) {
  this.setAttribute({color:'blue'});
 }
}

/* Another function to handle the release of dragged points and the storage of the state. */
var dropHandler = function() {
 /* this in this context should be the point. */
 var newOne = points.indexOf(this);
 if (newOne == -1) {
  /* This is a new one depending on where it was dropped we do things. */
  if (JXG.Math.Geometry.distance([this.X(),this.Y()],[source.center.X(),source.center.Y()]) < source.Radius()) {
   /* When dropped into the source, reset the point. */
   this.moveTo([source.center.X(),source.center.Y()],100);
   this.setAttribute({color:'black'});
  } else {
   /* it is now in play add it to the list. */
   points[points.length] = this;
   /* also initialise a new point in the source. */
   var p = board.create('point', [source.center.X(),source.center.Y()], {name:'',color:'black'});
   p.on('drag',colorDragListener);
   p.on('up',dropHandler);
  }
 } else {
  if (JXG.Math.Geometry.distance([this.X(),this.Y()],[source.center.X(),source.center.Y()]) < source.Radius()) {
   /* When dropped into the source delete this point as this is an existing point. */
   points.splice(newOne, 1);
   this.board.removeObject(this);
  }
  /* Otherwise all fine. */
 }

 /* Then construct the state. Basically, map the points to a specific form, in this example the form is 
    a bit too complex as it includes an object/dictionary when a list would have worked but maybe this
    will come in handy elsewhere. */
 var newState = new Array();
 for (i=0; i<points.length; i++) {
  var P = {'x':points[i].X(),'y':points[i].Y(),'color':points[i].getAttribute('color')};
  newState[i] = P;
 }
 theInput.value = JSON.stringify(newState);

 /* NOTE! You will need to do certain things to make the VLE around you know that things happen, 
    for this reason we need to generate a "change" event. In the case of Moodle and this question the event
    marks the form modified and causes a warning if the page is left through non saving routes. */
 var e = new Event('change');
 theInput.dispatchEvent(e);
}


/* This is the intial point. */
var p = board.create('point', [source.center.X(),source.center.Y()], {name:'',color:'black'});
p.on('drag',colorDragListener);
p.on('up',dropHandler);

/* Remember that the points from stored state must also be tied to the listeners if present. */
for (i=0; i<points.length; i++) {
 points[i].on('drag',colorDragListener);
 points[i].on('up',dropHandler);
}

/* Always call board.update() at the end if you have bindings. */
board.update();

/* In this example we hide the input as it will get absurd very soon. */
document.getElementById(ans1Ref).style.display = 'none';
[[escape value="[[/jsxgraph]]"/]]