JSXGraph in STACK Questions

JSXGraph in STACK Questions

by Ruth Reynolds -
Number of replies: 2
Hi all, currently trying to do some bug fixes on a STACK question with a JSXGraph which won't display. When I go to the question tests page and send the code for the JSXGraph to the CAS directly, it generates the graph fine, but it won't do it when I load the full STACK question. I don't suppose anyone has experienced this, and knows how to fix it?

The code is:

jsxgraph
// boundingbox:[left, top, right, bottom]
var brd = JXG.JSXGraph.initBoard(divid, {axis: true, boundingbox: [-0.5, 4, 5, -0.5], showCopyright: false, shownavigation: false});
var xaxis = brd.create('text', [4.5,-0.3, "U"]);
var yaxis = brd.create('text', [-0.4,3.5, "V"]);

// create nullcline dummies
var l1p1 = brd.create('point',[4,2], {name:'',face:'<>',strokeColor:'green',size:2});
var l1p2 = brd.create('point',[4,2.5], {name:'',face:'<>',strokeColor:'green',size:2});
var l1 = brd.create('line',[l1p1,l1p2], {straightFirst:false, straightLast:false,strokeColor:'green',strokeWidth:2,dash:1});

var l2p1 = brd.create('point',[4.5,2], {name:'',face:'<>',strokeColor:'green',size:2});
var l2p2 = brd.create('point',[4.5,2.5], {name:'',face:'<>',strokeColor:'green',size:2});
var l2 = brd.create('line',[l2p1,l2p2], {straightFirst:false, straightLast:false,strokeColor:'green',strokeWidth:2,dash:1});

var l3p1 = brd.create('point',[4,1], {name:'',face:'<>',strokeColor:'green',size:2});
var l3p2 = brd.create('point',[4,1.5], {name:'',face:'<>',strokeColor:'green',size:2});
var l3 = brd.create('line',[l3p1,l3p2], {straightFirst:false, straightLast:false,strokeColor:'green',strokeWidth:2,dash:1});

var l4p1 = brd.create('point',[4.5,1], {name:'',face:'<>',strokeColor:'green',size:2});
var l4p2 = brd.create('point',[4.5,1.5], {name:'',face:'<>',strokeColor:'green',size:2});
var l4 = brd.create('line',[l4p1,l4p2], {straightFirst:false, straightLast:false,strokeColor:'green',strokeWidth:2,dash:1});

var button1 = brd.create('button', [3.5, 3.5, 'Calculate trajectory', function() {clearturtle(); run();}], {});
  
var ic = brd.create('point',[1,1],{size:4,name:'(U(0), V(0))'});

var UV = brd.create('turtle',[1,2],{strokeColor:'blue',strokeWidth:3});

var b = 3;
var a = 4;

var t = 0; 
var U = ic.X();
var V = ic.Y();
var delta = 0.01; 
            
UV.hideTurtle();

function clearturtle() {
  UV.cs();
  UV.hideTurtle();
}

function run() {
  UV.setPos(ic.X(),ic.Y()); 
  U = ic.X();
  V = ic.Y();
  t = 0;
  loop();
}

function loop() {
  // define RHSs of the equation
  var dU = delta*(2*U*(1-U/b)-U*V);
  var dV = delta*(U*V-a*V);
   
  U = U+dU;
  V = V+dV;

   UV.moveTo([U,V]);
                
   t += delta;
  if (t<100.0) {
    active = setTimeout(loop,10);
  }
}
brd.unsuspendUpdate();
/jsxgraph

Average of ratings: -
In reply to Ruth Reynolds

Re: JSXGraph in STACK Questions

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
Generally STACK question type is discussed in the 'Mathematics tools' forum. I will move you question there, so you are more likely to get an answer.
Average of ratings: -
In reply to Ruth Reynolds

Re: JSXGraph in STACK Questions

by AL Rachels -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

I know it has been ages with no answer, but I just got STACK working again on my main sandbox, and I took a look at this. It appears to me the problem is with you start and finish. This worked for me. At least it produced a nice graph.

Please not that to keep them visible, I had to ad a space between the brackets. [ [ and [ ]. The code is:

[ [jsxgraph width='500px' height='500px'] ]
// boundingbox:[left, top, right, bottom]
var brd = JXG.JSXGraph.initBoard(divid, {axis: true, boundingbox: [-0.5, 4, 5, -0.5], showCopyright: false, shownavigation: false});
var xaxis = brd.create('text', [4.5,-0.3, "U"]);
var yaxis = brd.create('text', [-0.4,3.5, "V"]);

// create nullcline dummies
var l1p1 = brd.create('point',[4,2], {name:'',face:'<>',strokeColor:'green',size:2});
var l1p2 = brd.create('point',[4,2.5], {name:'',face:'<>',strokeColor:'green',size:2});
var l1 = brd.create('line',[l1p1,l1p2], {straightFirst:false, straightLast:false,strokeColor:'green',strokeWidth:2,dash:1});

var l2p1 = brd.create('point',[4.5,2], {name:'',face:'<>',strokeColor:'green',size:2});
var l2p2 = brd.create('point',[4.5,2.5], {name:'',face:'<>',strokeColor:'green',size:2});
var l2 = brd.create('line',[l2p1,l2p2], {straightFirst:false, straightLast:false,strokeColor:'green',strokeWidth:2,dash:1});

var l3p1 = brd.create('point',[4,1], {name:'',face:'<>',strokeColor:'green',size:2});
var l3p2 = brd.create('point',[4,1.5], {name:'',face:'<>',strokeColor:'green',size:2});
var l3 = brd.create('line',[l3p1,l3p2], {straightFirst:false, straightLast:false,strokeColor:'green',strokeWidth:2,dash:1});

var l4p1 = brd.create('point',[4.5,1], {name:'',face:'<>',strokeColor:'green',size:2});
var l4p2 = brd.create('point',[4.5,1.5], {name:'',face:'<>',strokeColor:'green',size:2});
var l4 = brd.create('line',[l4p1,l4p2], {straightFirst:false, straightLast:false,strokeColor:'green',strokeWidth:2,dash:1});

var button1 = brd.create('button', [3.5, 3.5, 'Calculate trajectory', function() {clearturtle(); run();}], {});
  
var ic = brd.create('point',[1,1],{size:4,name:'(U(0), V(0))'});

var UV = brd.create('turtle',[1,2],{strokeColor:'blue',strokeWidth:3});

var b = 3;
var a = 4;

var t = 0; 
var U = ic.X();
var V = ic.Y();
var delta = 0.01; 
            
UV.hideTurtle();

function clearturtle() {
  UV.cs();
  UV.hideTurtle();
}

function run() {
  UV.setPos(ic.X(),ic.Y()); 
  U = ic.X();
  V = ic.Y();
  t = 0;
  loop();
}

function loop() {
  // define RHSs of the equation
  var dU = delta*(2*U*(1-U/b)-U*V);
  var dV = delta*(U*V-a*V);
   
  U = U+dU;
  V = V+dV;

   UV.moveTo([U,V]);
                
   t += delta;
  if (t<100.0) {
    active = setTimeout(loop,10);
  }
}
brd.unsuspendupdate();
[ [/jsxgraph] ]

CalculateTrajectory.png

Average of ratings: Useful (1)