Hi. I am trying to learn to use JSXGraph.
I see a lot of util information; but i can't find specific examples.
I copied an example from Formula course and i modified some details, but can understand the basic concepts. There are many explains, but I can't find practical uses.
How and where can put code to change the backgound color of board? I tried several ways (i put in bold some tries I did)
I know the learning, subjects and practices are more important than attributes; just it is good for me.
--------------------------------------------------------------------------------------------------------------
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<h3 style="margin-top:5px;">Parábola</h3>
<p>Usa los deslizadores para indicar la curva de la ecuación: {a}x<sup>2</sup> + {b}x + {c} = 0:</p>
<div style="display: flex; justify-content: center;margin-top:15px; background-color:#FFFDE1;">
<div>
<p></p>
<jsxgraph width="500" height="500" box="AT" , background-color: "#FFFDE0" >
(function(myFunction){
var ax = sessionStorage.getItem("as");
var bx = sessionStorage.getItem("bs");
var cx = sessionStorage.getItem("cs");
var Plano = JXG.JSXGraph.initBoard('AT',
{
boundingbox: [-10.5, 10.5, 10.5, -10.5],
axis:true,
showCopyright: false,
shownavigation: false,
zoom: {enabled: false, wheel: false },
pan: { enabled: false, needTwoFingers: false }
, background-color: "#FFFDE0"
} ),
Plano.options.background-color: "#FFFDE0"
a = Plano.create('slider',2,-5],[7,-5],[-5,ax,5, {snapWidth:0.25, name:'a'}),
b = Plano.create('slider',2,-6],[7,-6],[-5,bx,5, {snapWidth:0.5, name:'b'}),
c = Plano.create('slider',2,-7],[7,-7],[-5,cx,5, {snapWidth:0.5, name:'c'}),
f = Plano.create('functiongraph',[function(x){
return a.Value()*x*x + b.Value()*x + c.Value();
}]),
g = setInterval(function(){
var aa = a.Value();
var bb = b.Value();
var cc = c.Value();
$("input.formulas_number:eq(0):text").val(aa);
$("input.formulas_number:eq(1):text").val(bb);
$("input.formulas_number:eq(2):text").val(cc);
}, 1000);
})();
</jsxgraph>
<p></p>
<script>
$(window).on( "load", function() {
$(".formulas_number").css("width", "40px");
$(".formulas_number").css("height", "24px");
$(".formulas_number").css("padding", "3");
$(".formulas_number").css("background-color", "#FFF5D5");
$(".formulas_number").css("border", "1px solid #1A3BA2");
$(".formulas_number").css("border-radius", "5px");
$(".formulas_number").css("outline", "none");
$(".formulas_number").css("text-align", "center");
$(".formulas_number").css("font-weight", "700");
$(".formulas_number").css("font-size", "16px");
$("input.submit").on("focus", function(){
az=$("input.formulas_number:eq(0):text").val();
bz=$("input.formulas_number:eq(1):text").val();
cz=$("input.formulas_number:eq(2):text").val();
sessionStorage.setItem("as", az);
sessionStorage.setItem("bs", bz);
sessionStorage.setItem("cs", cz);
});
});
</script>
</div>
</div>
<button style="margin:10px 0 0 65%;" onclick="sessionStorage.clear();">Reiniciar</button>
<p>Usa los deslizadores para seleccionar los coeficientes.</p>
{#1}{#2}{#3}