JSXGraph
JSXGraph share

Share

Linear Function: parameters
QR code 
<iframe 
    src="https://www.jsxgraph.uni-bayreuth.de/share/iframe/linear-function-parameters" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Linear Function: parameters" 
    allowfullscreen
></iframe>
This code has to 
<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution ShareAlike 4.0 International License.
    https://creativecommons.org/licenses/by-sa/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    JXG.Options.text.useMathJax = true;
    var board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-5, 7, 5, -3],
        axis: true,
        keepaspectratio: true
    });
    
    // slope
    var m = board.create('slider', [[4, 1], [4, 5], [0, 1, 4]], {
        snapWidth: 0.1,
        precision: 1,
        ticks: { drawLabels: true, label: { position: 'rt', offset: [10, 0] } },
        name: "m"
    });
    
    // intercept
    var t = board.create('slider', [[-4, 1], [-4, 5], [-2, 0, 6]], {
        snapWidth: 0.1,
        precision: 1,
        ticks: {
            drawZero: true,
            drawLabels: true,
            ticksDistance: 1,
            minTicksDistance: 5,
            tickEndings: [1, 0],
            label: { position: 'lft', offset: [-20, 0] }
        },
        name: "t"
    });
    
    var tval = () => t.Value();
    var T = board.create('point', [0, tval], { name: "T", label: "T", strokeColor: 'purple', face: 'cross' });
    
    var mval = () => m.Value();
    
    // The linear function without intercept
    var linF0 = (x) => mval() * x;
    var G0 = board.create('functiongraph', [linF0, -5, 5], { strokeWidth: 1, dash: 2 });
    
    // The linear function with intercept
    var linF = (x) => mval() * x + tval();
    var G = board.create('functiongraph', [linF, -5, 5], { strokeWidth: 2 });
    
    // Generate a nice dynamic function term text,
    // suppress intercept if it is zero.
    var ftextval = function() {
        var vz = "",
            tv = "";
        if (tval() >= 0.0) {
            if (tval() == 0.0) {
                vz = "";
                tv = "";
            } else {
                vz = "+";
                tv = JXG.toFixed(tval(), 1);
            }
        } else {
            vz = "";
            tv = JXG.toFixed(tval(), 1);
        };
        return `\\[f(x)= ${JXG.toFixed(mval(), 1)} \\cdot x ${vz} ${tv} \\]`;
    };
    
    // Show the text with white background
    var ftext = board.create('text', [-4.2, 6.0, ftextval], {
        fontSize: 18,
        color: 'blue',
        cssStyle: 'background-color: rgb(255,255,255)'
    });
    
    // Line to show the intercept.
    var dt = board.create('segment', [[0, 0], [0, tval]], { strokeColor: 'purple', strokeWidth: 3 });
    
    var A = board.create('glider', [1, 2, G], { name: 'A', label: { offset: [0, -15] } });
    
    // Create tangent together with slope triangle.
    // Tangent is necessary for the slope triangle, but somehow uninteresting for lines.
    var tangent = board.create('tangent', [A]);
    var st = board.create('slopetriangle', [tangent]);
 </script> 
/*
This example is licensed under a 
Creative Commons Attribution ShareAlike 4.0 International License.
https://creativecommons.org/licenses/by-sa/4.0/

Please note you have to mention 
The Center of Mobile Learning with Digital Technology
in the credits.
*/

const BOARDID = 'your_div_id'; // Insert your id here!

JXG.Options.text.useMathJax = true;
var board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-5, 7, 5, -3],
    axis: true,
    keepaspectratio: true
});

// slope
var m = board.create('slider', [[4, 1], [4, 5], [0, 1, 4]], {
    snapWidth: 0.1,
    precision: 1,
    ticks: { drawLabels: true, label: { position: 'rt', offset: [10, 0] } },
    name: "m"
});

// intercept
var t = board.create('slider', [[-4, 1], [-4, 5], [-2, 0, 6]], {
    snapWidth: 0.1,
    precision: 1,
    ticks: {
        drawZero: true,
        drawLabels: true,
        ticksDistance: 1,
        minTicksDistance: 5,
        tickEndings: [1, 0],
        label: { position: 'lft', offset: [-20, 0] }
    },
    name: "t"
});

var tval = () => t.Value();
var T = board.create('point', [0, tval], { name: "T", label: "T", strokeColor: 'purple', face: 'cross' });

var mval = () => m.Value();

// The linear function without intercept
var linF0 = (x) => mval() * x;
var G0 = board.create('functiongraph', [linF0, -5, 5], { strokeWidth: 1, dash: 2 });

// The linear function with intercept
var linF = (x) => mval() * x + tval();
var G = board.create('functiongraph', [linF, -5, 5], { strokeWidth: 2 });

// Generate a nice dynamic function term text,
// suppress intercept if it is zero.
var ftextval = function() {
    var vz = "",
        tv = "";
    if (tval() >= 0.0) {
        if (tval() == 0.0) {
            vz = "";
            tv = "";
        } else {
            vz = "+";
            tv = JXG.toFixed(tval(), 1);
        }
    } else {
        vz = "";
        tv = JXG.toFixed(tval(), 1);
    };
    return `\\[f(x)= ${JXG.toFixed(mval(), 1)} \\cdot x ${vz} ${tv} \\]`;
};

// Show the text with white background
var ftext = board.create('text', [-4.2, 6.0, ftextval], {
    fontSize: 18,
    color: 'blue',
    cssStyle: 'background-color: rgb(255,255,255)'
});

// Line to show the intercept.
var dt = board.create('segment', [[0, 0], [0, tval]], { strokeColor: 'purple', strokeWidth: 3 });

var A = board.create('glider', [1, 2, G], { name: 'A', label: { offset: [0, -15] } });

// Create tangent together with slope triangle.
// Tangent is necessary for the slope triangle, but somehow uninteresting for lines.
var tangent = board.create('tangent', [A]);
var st = board.create('slopetriangle', [tangent]);
<jsxgraph width="100%" aspect-ratio="1 / 1" title="Linear Function: parameters" description="This construction was copied from JSXGraph examples database: BTW HERE SHOULD BE A GENERATED LINKuseGlobalJS="false">
   /*
   This example is licensed under a 
   Creative Commons Attribution ShareAlike 4.0 International License.
   https://creativecommons.org/licenses/by-sa/4.0/
   
   Please note you have to mention 
   The Center of Mobile Learning with Digital Technology
   in the credits.
   */
   
   JXG.Options.text.useMathJax = true;
   var board = JXG.JSXGraph.initBoard(BOARDID, {
       boundingbox: [-5, 7, 5, -3],
       axis: true,
       keepaspectratio: true
   });
   
   // slope
   var m = board.create('slider', [[4, 1], [4, 5], [0, 1, 4]], {
       snapWidth: 0.1,
       precision: 1,
       ticks: { drawLabels: true, label: { position: 'rt', offset: [10, 0] } },
       name: "m"
   });
   
   // intercept
   var t = board.create('slider', [[-4, 1], [-4, 5], [-2, 0, 6]], {
       snapWidth: 0.1,
       precision: 1,
       ticks: {
           drawZero: true,
           drawLabels: true,
           ticksDistance: 1,
           minTicksDistance: 5,
           tickEndings: [1, 0],
           label: { position: 'lft', offset: [-20, 0] }
       },
       name: "t"
   });
   
   var tval = () => t.Value();
   var T = board.create('point', [0, tval], { name: "T", label: "T", strokeColor: 'purple', face: 'cross' });
   
   var mval = () => m.Value();
   
   // The linear function without intercept
   var linF0 = (x) => mval() * x;
   var G0 = board.create('functiongraph', [linF0, -5, 5], { strokeWidth: 1, dash: 2 });
   
   // The linear function with intercept
   var linF = (x) => mval() * x + tval();
   var G = board.create('functiongraph', [linF, -5, 5], { strokeWidth: 2 });
   
   // Generate a nice dynamic function term text,
   // suppress intercept if it is zero.
   var ftextval = function() {
       var vz = "",
           tv = "";
       if (tval() >= 0.0) {
           if (tval() == 0.0) {
               vz = "";
               tv = "";
           } else {
               vz = "+";
               tv = JXG.toFixed(tval(), 1);
           }
       } else {
           vz = "";
           tv = JXG.toFixed(tval(), 1);
       };
       return `\\[f(x)= ${JXG.toFixed(mval(), 1)} \\cdot x ${vz} ${tv} \\]`;
   };
   
   // Show the text with white background
   var ftext = board.create('text', [-4.2, 6.0, ftextval], {
       fontSize: 18,
       color: 'blue',
       cssStyle: 'background-color: rgb(255,255,255)'
   });
   
   // Line to show the intercept.
   var dt = board.create('segment', [[0, 0], [0, tval]], { strokeColor: 'purple', strokeWidth: 3 });
   
   var A = board.create('glider', [1, 2, G], { name: 'A', label: { offset: [0, -15] } });
   
   // Create tangent together with slope triangle.
   // Tangent is necessary for the slope triangle, but somehow uninteresting for lines.
   var tangent = board.create('tangent', [A]);
   var st = board.create('slopetriangle', [tangent]);
</jsxgraph>
Interactive JSXGraph demo to explore __linear functions__ of the form $f(x) = m\cdot x + t$. Sliders adjust slope ($m)$ and intercept ($t$), updating the line, its slope triangle, and MathJax-rendered function text in real time.
// Define the id of your board in BOARDID

JXG.Options.text.useMathJax = true;
var board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-5, 7, 5, -3],
    axis: true,
    keepaspectratio: true
});

// slope
var m = board.create('slider', [[4, 1], [4, 5], [0, 1, 4]], {
    snapWidth: 0.1,
    precision: 1,
    ticks: { drawLabels: true, label: { position: 'rt', offset: [10, 0] } },
    name: "m"
});

// intercept
var t = board.create('slider', [[-4, 1], [-4, 5], [-2, 0, 6]], {
    snapWidth: 0.1,
    precision: 1,
    ticks: {
        drawZero: true,
        drawLabels: true,
        ticksDistance: 1,
        minTicksDistance: 5,
        tickEndings: [1, 0],
        label: { position: 'lft', offset: [-20, 0] }
    },
    name: "t"
});

var tval = () => t.Value();
var T = board.create('point', [0, tval], { name: "T", label: "T", strokeColor: 'purple', face: 'cross' });

var mval = () => m.Value();

// The linear function without intercept
var linF0 = (x) => mval() * x;
var G0 = board.create('functiongraph', [linF0, -5, 5], { strokeWidth: 1, dash: 2 });

// The linear function with intercept
var linF = (x) => mval() * x + tval();
var G = board.create('functiongraph', [linF, -5, 5], { strokeWidth: 2 });

// Generate a nice dynamic function term text,
// suppress intercept if it is zero.
var ftextval = function() {
    var vz = "",
        tv = "";
    if (tval() >= 0.0) {
        if (tval() == 0.0) {
            vz = "";
            tv = "";
        } else {
            vz = "+";
            tv = JXG.toFixed(tval(), 1);
        }
    } else {
        vz = "";
        tv = JXG.toFixed(tval(), 1);
    };
    return `\\[f(x)= ${JXG.toFixed(mval(), 1)} \\cdot x ${vz} ${tv} \\]`;
};

// Show the text with white background
var ftext = board.create('text', [-4.2, 6.0, ftextval], {
    fontSize: 18,
    color: 'blue',
    cssStyle: 'background-color: rgb(255,255,255)'
});

// Line to show the intercept.
var dt = board.create('segment', [[0, 0], [0, tval]], { strokeColor: 'purple', strokeWidth: 3 });

var A = board.create('glider', [1, 2, G], { name: 'A', label: { offset: [0, -15] } });

// Create tangent together with slope triangle.
// Tangent is necessary for the slope triangle, but somehow uninteresting for lines.
var tangent = board.create('tangent', [A]);
var st = board.create('slopetriangle', [tangent]);

license

This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License.
Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.