In a group of objects Segment doesn't move

Question

I am a new commer to jsxgraph. I will have many questions. My first graph is the following

Here is what I have been able to code.

> <div id="box" class="jxgbox" style="width:500px; height:500px;">
> <script type="text/javascript"> var board =
> JXG.JSXGraph.initBoard('box', {boundingbox: [0, 10, 10, 0],
> axis:false}); var grid = board.create('grid', []); var t1 =
> board.create('text',[.5,5.2,"$A$"]); var t2 =
> board.create('text',[1.9,3.6,"$0$"]); var t3 =
> board.create('text',[1.9,6.4,"$1$"]); var p1 =
> board.create('point',[1,5], {name:'',
> size:1,strokeColor:'#AE181E',visible:false,fixed:true}); var p2 =
> board.create('point',[2,5],
> {name:'',size:1,strokeColor:'#AE181E',visible:false,fixed:true}); var
> p3 = board.create('point',[2,4], {name:'',
> size:1,strokeColor:'#AE181E',visible:false,fixed:true}); var p4 =
> board.create('point',[2,6],
> {name:'',size:1,strokeColor:'#AE181E',visible:false,fixed:true}); var
> li1 = board.create('line',[p1,p2], {straightFirst:false,
> straightLast:false,strokeColor:'#AE181E',strokeWidth:2}); var li2 =
> board.create('line',[p3,p4], {straightFirst:false,
> straightLast:false,strokeColor:'#AE181E',strokeWidth:2}); var seg1 =
> board.create('segment',[[2,4],[2,6]],{strokeColor:'#5F9EA0'}); var p5
> = board.create('point',[2.2,4], {name:'', size:1,strokeColor:'#AE181E',visible:false,fixed:true}); var p6 =
> board.create('point',[3.2,4], {name:'',
> size:1,strokeColor:'#AE181E',visible:false,fixed:true}); d=[]
> d[0]=board.create('glider',[seg1],{name:'',strokeColor:'#5F9EA0',fillColor:'#5F9EA0'});
> d[1] = board.create('point',[2.2,4], {name:'',
> size:1,strokeColor:'#AE181E',visible:false,fixed:true}); d[2] =
> board.create('point',[3.2,4], {name:'',
> size:1,strokeColor:'#AE181E',visible:false,fixed:true});
> d[3]=board.create('segment',[d[1],d[2]]);
> d[4]=board.create('text',[3.5,4,"$B$"]);
> d[5]=board.create('text',[2.7,4.2,"$C$"]); var gr =
> board.create('group',d) </script> </div>

But the segment d[3] doesn't move accordingly with the other d[] elements and I am not able to obtain Latex rendering of $\lambda_0$.

What are my mistakes?

Answer 1

Your approach to realize dependent objects with the group object is very creative. There are just two small issues which prevent your construction to work:

1. Groups may contain points, texts, images only (objects which have single coordinates).
2. The points d[1] and d[2] are fixed in your construction, ie not allowed to move.

Here is a working variant of your construction, see it live at https://jsfiddle.net/d47bfye6/ :

JXG.Options.point.strokeColor = '#AE181E';
var board = JXG.JSXGraph.initBoard('box', {boundingbox: [0, 10, 10, 0], axis: false});

var grid = board.create('grid', []); 
var t1 = board.create('text',[.5, 5.2,"$A$"]); 
var t2 = board.create('text',[1.9, 3.6,"$0$"]); 
var t3 = board.create('text',[1.9, 6.4,"$1$"]); 
var p1 = board.create('point', [1,5], {name:'', size:1,visible:false, fixed:true}); 
var p2 = board.create('point', [2,5], {name:'',size:1, visible:false, fixed:true}); 
var p3 = board.create('point', [2,4], {name:'', size:1,visible:false, fixed:true}); 
var p4 = board.create('point', [2,6], {name:'',size:1, visible:false, fixed:true}); 
var li1 = board.create('segment', [p1, p2], {strokeColor: '#AE181E', strokeWidth:2}); 
var li2 = board.create('segment', [p3, p4], {strokeColor: '#AE181E', strokeWidth:2}); 
var seg1 = board.create('segment', [[2,4],[2,6]],{strokeColor: '#5F9EA0'}); 
var p5 = board.create('point', [2.2,4], {name:'', visible:false, fixed:true}); 
var p6 = board.create('point', [3.2,4], {name:'', visible:false, fixed:true}); 
var d = [];
d[0] = board.create('glider', [seg1],{name:'',strokeColor:'#5F9EA0',fillColor:'#5F9EA0'});
d[1] = board.create('point', [2.2, 4], {name:'', visible: false, fixed:false}); 
d[2] = board.create('point', [3.2, 4], {name:'', visible: false, fixed:false});
d[3] = board.create('text', [3.5, 4, "$B$"]);
d[4] = board.create('text', [2.7, 4.2, "$C$"]); 

board.create('segment', [d[1], d[2]]);

var gr = board.create('group', d);

At least, I hope that you wanted the construction to work like this, your link to the image seem snot to work.

Regarding MathJax / LaTeX: please include in your document head:

<script>
window.MathJax = {
  tex: {
    inlineMath: [ ['$','$'], ["\\(","\\)"] ],
    displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
    packages: ['base', 'ams']
  },
  options: {
    ignoreHtmlClass: 'tex2jax_ignore',
    processHtmlClass: 'tex2jax_process'
  }
};
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script>