JSXGraph use

JSXGraph use

by Miguel Bejarano -
Number of replies: 2

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}


Average of ratings: -
In reply to Miguel Bejarano

Re: JSXGraph use

by Martin Kraska -
You can change the background color on html level as style of the div

    <div id="jxgbox" class="jxgbox" style="width:500px; height:500px; background-color:#33475b">
    </div>
Average of ratings: Useful (1)