Home
Random example
Search
Applications
Chemistry
Economy
Famous theorems
Geography
Physics
Sports
Test
Assessment
Calculus
3D
Applied calculus
Basic calculus
Differential equations
Function plotting
Implicit plotting
Sequences and series
Charts and data
Charts
Statistics
Curves
Interpolation
Intersection, Union, Difference
Lindenmayer Systems
Splines
Geometry
3D
Analytic
Euclidean
Basic constructions
Mappings
Non-Euclidean
Projective
Symmetry
Technical
Accessibility
Animation
Roulettes
Board options
First steps
Images
JSXGraph objects
Arcs and angles
Axes
Circles
Groups
Lines and arrows
Point
Polygons
Slider
Turtle
Vectors
JessieCode
Texts
Transformations
Video
jsxgraph.org
JSXGraph logo
JSXGraph
JSXGraph share

Share

Continuity
Show plain example
QR code
<iframe 
    src="https://jsxgraph.org/share/iframe/continuity" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Continuity" 
    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;
    JXG.Options.axis.ticks.insertTicks = false;
    JXG.Options.axis.ticks.majorHeight = 0;
    JXG.Options.axis.ticks.minorHeight = 0;
    JXG.Options.axis.ticks.drawLabels = false;
    JXG.Options.axis.ticks.insertTicks = false;
    JXG.Options.point.showInfobox = false;
    
    var board = JXG.JSXGraph.initBoard(BOARDID, {
        axis: false,
        boundingbox: [-3, 5, 5.5, -2],
        infoboxText: '',
        showCopyright: false,
        showNavigation: false,
        pan: { enabled: false },
        zoom: { enabled: false }
    });
    
    // global epsilon
    var global_epsilon = 0.00000001;
    
    /*
     * axis
     */
    
    // x-axis
    var x_axis = board.create('axis', [[0, 0], [1, 0]],
        {
            label: {
                position: 'rt',
                offset: [-10, -15]
            },
            name: '\\(x\\)',
            straightFirst: false,
            withLabel: true
        });
    
    // highlight D
    highlightElement(x_axis, "xaxis", "highlightGrey");
    
    // y-axis
    var y_axis = board.create('axis', [[0, 0], [0, 1]],
        {
            label: {
                position: 'lft',
                offset: [-40, -5]
            },
            name: '\\(f(x)\\)',
            straightFirst: false,
            withLabel: true
        });
    
    /*
     * function
     */
    
    // specific point
    var specific_point = 0;
    
    // x0 start value for glider (x0;0)
    var x0_init = 2;
    
    // function term f
    var term_f = function (x) {
        /*
         * functions
         */
    
        // continuous function (polynom)
        // return (0.25 * Math.pow(x - 2.5, 3) + 0.5 * Math.pow(x - 2.5, 2)) + 1.5;
    
        /*/ continuous function (polynom)
        specific_point = 2;
        x0_init = 3;
        return Math.pow(x - specific_point, 2) + 1;
        //*/
    
        /*/ continuous function abs()
        specific_point = 1.75;
        x0_init = 3;
        return Math.abs(x - specific_point) + 1.5;
        //*/
    
        /*/ continuous function sin()
        specific_point = 1;
        x0_init = 1.5;
        return Math.sin(2.5 * x - specific_point) + 1.5;
        //*/
    
        /*/ continuous function sin()
        x0_init = 1.8;
        return Math.sin(5 * x) / x + 2.25;
        //*/
    
        /*
         * piecewise-defined functions
         */
    
        /*/ continuous function (polynoms)
        specific_point = 2;
        x0_init = 1.5;
        if (x < specific_point) {
            return x + 1;
        } else {
            return -Math.pow((x - specific_point - 0.5), 2) + 3.25;
        }
        //*/
    
        /*/ continuous function (polynoms)
        specific_point = 2.5;
        x0_init = 1.5;
        if (x < specific_point) {
            return 1.5;
        } else {
            return Math.pow(x - specific_point, 2) + 1.5;
        }
        //*/
    
        // discontinuous function (polynoms)
        specific_point = 3.25;
        x0_init = 3.25;
        if (x < specific_point) {
            return 0.2 * x * x;
        } else {
            return x - 0.5;
        }
        //*/
    
        /*/ continuous function (polynoms)
        specific_point = Math.PI;
        x0_init = 2;
        if (x < specific_point) {
            return Math.sin(3 * x) / x + 2;
        } else {
            return -x + 2 + Math.PI;
        }
        //*/
    
    
    };
    
    // graph of f
    var graph_f = board.create('functiongraph', [term_f, 0.25, 4.1], {
        dash: 0,
        layer: 8,
        strokeColor: '#4080aa',
        strokeWidth: 2
    });
    
    // piecewise-defined discontinuous function
    if (Math.abs(term_f(specific_point - global_epsilon) - term_f(specific_point)) > global_epsilon) {
        // point (specific_point-0;f(specific_point-0))
        var point_specific_point_minus_global_epsilon_fspecific_point_minus_global_epsilon = board.create('point', [specific_point - global_epsilon, term_f(specific_point - global_epsilon)], {
            fillColor: '#ffffff',
            name: '',
            size: 1,
            strokeColor: '#4080aa',
            strokeWidth: 2
        });
    
        // point (specific_point;f(specific_point))
        var point_specific_point_fspecific_point = board.create('point', [specific_point, term_f(specific_point)], {
            fillColor: '#4080aa',
            name: '',
            size: 1,
            strokeColor: '#4080aa',
            strokeWidth: 2
        });
    
        // dashed line (specific_point;0) - (specific_point;max(f(specific_point),f(specific_point-0)))
        var line_specific_point_0_specific_point_fmax_specific_point_or_specific_point_minus_0 = board.create('line',[[specific_point,0],[specific_point,Math.max(term_f(specific_point),term_f(specific_point - global_epsilon))]],{
            dash: 1,
            name:'',
            straightFirst: false,
            straightLast: false,
            strokeColor: '#4080aa',
            strokeWidth: 1
        });
    }
    
    // highlight function
    highlightElement(graph_f, "graph", "highlightDarkBlue");
    
    /*
     * x0 and f(x0)
     */
    
    // coordonate for parallel line to x-axis
    var cx = -0.5;
    
    // start x0
    var x0_start = 0.5;
    
    // end x0
    var x0_end = 4;
    
    // line parallel to x-axis for x0 glider
    var line_parallel_x_axis = board.create('line', [[x0_start, cx], [x0_end, cx]], {
        straightFirst: false,
        straightLast: false,
        visible: false
    });
    
    // x0 glider (not on x-axis for better visibility)
    var glider_x0_0 = board.create('glider', [x0_init, 0, line_parallel_x_axis], {
        fillColor: '#ff00ff',
        label: {
            offset: [-5, -15]
        },
        name: '\\(x_0\\)',
        size: 2,
        strokeColor: '#000000',
        strokeWidth: 1
    });
    
    // highlight x0
    highlightElement(glider_x0_0, 'x0', 'highlightMagenta');
    
    // point (x0;f(x0))
    var point_x0_fx0 = board.create('point', [
        function () {
            return glider_x0_0.X();
        },
        function () {
            return term_f(glider_x0_0.X());
        }], {
        fillColor: '#000000',
        name: '',
        size: 2,
        strokeWidth: 0
    });
    
    // point (0;f(x))
    var point_0_fx0 = board.create('point', [0,
        function () {
            return term_f(glider_x0_0.X());
        }], {
        fillColor: '#000000',
        /* label not display because of epsilon
        label: {
            offset: [-45, 0]
        },
        name: '\\(f(x_0)\\)',
        */
        name: '',
        size: 2,
        strokeWidth: 0
    });
    
    // dashed line (x0;0) - (x0;f(x0))
    var line_x0_0_x0_fx0 = board.create('line', [glider_x0_0, point_x0_fx0], {
        dash: 2,
        straightFirst: false,
        straightLast: false,
        strokeColor: '#000000',
        strokeWidth: 1,
    });
    
    // point (x0;0) on x-axis (refers to glider_x0_0)
    var point_x0_0 = board.create('intersection', [x_axis, line_x0_0_x0_fx0], {
        fillColor: '#000000',
        label: {
            offset: [-20, -35]
        },
        name: '',
        size: 1,
        strokeWidth: 0
    });
    
    // dashed line (x0;f(x0)) - (0;f(x0))
    var line_x0_fx0_0_fx0 = board.create('line', [point_x0_fx0, point_0_fx0], {
        dash: 2,
        straightFirst: false,
        straightLast: false,
        strokeColor: '#000000',
        strokeWidth: 1,
    });
    
    /*
     * epsilon
     */
    
    // coordonate for parallel line to y-axis
    var cx = -1.1;
    
    // point (cx;f(x0))
    var point_cx_fx0 = board.create('point', [function () {
        return point_0_fx0.X() + cx;
    
    }, function () {
        return point_0_fx0.Y();
    }], {
        fillColor: '#000000',
        label: {
            offset: [-55, 0]
        },
        name: '\\(f(x_0)\\)',
        size: 2,
        strokeWidth: 0
    });
    
    // point (cx,f(x0)+1)
    var point_cx_fx01 = board.create('point', [function () {
        return point_cx_fx0.X();
    
    }, function () {
        return point_cx_fx0.Y() + 1;
    }], {
        visible: false
    });
    
    // dashed line (0;f(x0)) - (cx;f(x0))
    var line_0_fx0_cx_fx0 = board.create('line', [point_0_fx0, point_cx_fx0], {
        dash: 2,
        straightFirst: false,
        straightLast: false,
        strokeColor: '#000000',
        strokeWidth: 1
    });
    
    // line (cx;f(x0)) - (cx,f(x0)+1) for epsilon glider
    var line_cx_fx0_cx_fx01 = board.create('line', [point_cx_fx0, point_cx_fx01], {
        straightFirst: false,
        visible: false
    });
    
    // epsilon
    var epsilon = 1;
    
    // epsilon glider
    var glider_cx_fx0_espilon = board.create('glider', [0, (function () {
        return point_0_fx0.Y() + epsilon;
    })(), line_cx_fx0_cx_fx01], {
        fillColor: '#00dd66',
        label: {
            offset: [-55, 20]
        },
        name: '\\(f(x_0)+\\epsilon\\)',
        size: 2,
        strokeColor: '#000000',
        strokeWidth: 1
    });
    
    // highlight epsilon point
    highlightElement(glider_cx_fx0_espilon, "epsilon", "highlightGreen");
    
    // epsilon as line length
    var line_cx_fx0_cx_fx0_epsilon = board.create('line', [point_cx_fx0, glider_cx_fx0_espilon], {
        straightFirst: false,
        straightLast: false,
        strokeColor: '#00dd66',
        strokeWidth: 3
    });
    
    // highlight epsilon line
    highlightElement(line_cx_fx0_cx_fx0_epsilon, "epsilon", "highlightGreen");
    
    // point for epsilon label
    var point_label_epsilon = board.create('midpoint', [point_cx_fx0, glider_cx_fx0_espilon], {
        label: {
            offset: [5, 1]
        },
        name: '\\(\\epsilon\\)',
        size: 0
    });
    
    // point (cx;f(x0)-epsilon)
    var point_cx_fx0_minus_epsilon = board.create('mirrorpoint', [glider_cx_fx0_espilon, point_cx_fx0], {
        fillColor: '#000000',
        label: {
            offset: [-55, -20]
        },
        name: '\\(f(x_0)-\\epsilon\\)',
        size: 2,
        strokeWidth: 0
    });
    
    // dotted line (cx;f(x0)) - (cx;f(x0)-epsilon)
    var line_cx_fx0_cx_fx0_minus_epsilon = board.create('line', [point_cx_fx0, point_cx_fx0_minus_epsilon], {
        dash: 1,
        straightFirst: false,
        straightLast: false,
        strokeColor: '#00dd66'
    });
    
    // point (0,f(x0)+epsilon)
    var point_0_fx0_epsilon = board.create('point', [0,
        function () {
            return glider_cx_fx0_espilon.Y();
        }], {
        fillColor: '#000000',
        name: '',
        size: 1,
        strokeWidth: 0
    });
    
    // point (0,f(x0)-epsilon)
    var point_0_fx0_minus_epsilon = board.create('point', [0,
        function () {
            return point_cx_fx0_minus_epsilon.Y();
        }], {
        fillColor: '#000000',
        name: '',
        size: 1,
        strokeWidth: 0
    });
    
    // line (cx;f(x0)+epsilon) - (0;f(x0)+epsilon)
    var line_cx_fx0_epsilon_0_fx0_epsilon = board.create('line', [glider_cx_fx0_espilon, point_0_fx0_epsilon], {
        dash: 1,
        straightFirst: false,
        straightLast: true,
        strokeColor: '#cccccc'
    });
    
    // line (cx;f(x0)-epsilon) - (0;f(x0)-epsilon)
    var line_cx_fx0_minus_epsilon_0_fx0_minus_epsilon = board.create('line', [point_cx_fx0_minus_epsilon, point_0_fx0_minus_epsilon], {
        dash: 1,
        straightFirst: false,
        straightLast: true,
        strokeColor: '#cccccc'
    });
    
    /*
     * delta
     */
    
    // coordonate for parallel line to x-axis
    var cy = -1.25;
    
    // point (x0;cy)
    var point_x0_cy = board.create('point', [function () {
        return glider_x0_0.X();
    }, cy], {
        fillColor: '#000000',
        name: '',
        size: 2,
        strokeWidth: 0
    });
    
    // point (x0+1;cy)
    var point_x01_cy = board.create('point', [function () {
        return glider_x0_0.X() + 1;
    
    }, cy], {
        visible: false
    });
    
    // line (x0;cy) - (x0+1,cy) for delta glider
    var line_x0_cy_x01_cy = board.create('line', [point_x0_cy, point_x01_cy], {
        straightFirst: false,
        visible: false
    });
    
    // delta
    var delta = 0.75;
    
    // delta glider
    var glider_x0_delta_cy = board.create('glider', [(function () {
        return point_x0_0.X() + delta;
    })(), cy, line_x0_cy_x01_cy], {
        fillColor: '#ffaa33',
        label: {
            offset: [10, -10]
        },
        name: '\\(x_0+\\delta\\)',
        size: 2,
        strokeColor: '#000000',
        strokeWidth: 1
    });
    
    // highlight delta point
    highlightElement(glider_x0_delta_cy, "delta", "highlightOrange");
    
    // delta as line length
    var line_x0_cy_x0_delta_cy = board.create('line', [point_x0_cy, glider_x0_delta_cy], {
        straightFirst: false,
        straightLast: false,
        strokeColor: '#ffaa33',
        strokeWidth: 3
    });
    
    // highlight delta line
    highlightElement(line_x0_cy_x0_delta_cy, "delta", "highlightOrange");
    
    // point (x0-delta;cy)
    var point_x0_minus_delta_cy = board.create('mirrorpoint', [glider_x0_delta_cy, point_x0_cy], {
        fillColor: '#000000',
        label: {
            offset: [-50, -10]
        },
        name: '\\(x_0-\\delta\\)',
        size: 2,
        strokeWidth: 0
    });
    
    // dotted line (x0;cy) - (x0-delta;cy)
    var line_x0_cy_x0_minus_delta_cy = board.create('line', [point_x0_cy, point_x0_minus_delta_cy], {
        dash: 1,
        straightFirst: false,
        straightLast: false,
        strokeColor: '#ffaa33'
    });
    
    // point for delta label
    var point_label_delta = board.create('midpoint', [point_x0_cy, glider_x0_delta_cy], {
        label: {
            offset: [-2, 12]
        },
        name: '\\(\\delta\\)',
        size: 0
    });
    
    // point (x0+delta;0)
    var point_x0_delta_0 = board.create('point', [
        function () {
            return glider_x0_delta_cy.X();
        }, 0], {
        fillColor: '#000000',
        label: {
            offset: [-20, -35]
        },
        name: '',
        size: 1,
        strokeWidth: 0
    });
    
    // point (x0-delta;0)
    var point_x0_minus_delta_0 = board.create('point', [
        function () {
            return point_x0_minus_delta_cy.X();
        }, 0], {
        fillColor: '#000000',
        label: {
            offset: [-20, -35]
        },
        name: '',
        size: 1,
        strokeWidth: 0
    });
    
    // end point y for vertical dotted line
    var cym = 4.75;
    
    // point (x0+delta;cym)
    var point_x0_delta_cym = board.create('point', [
        function () {
            return glider_x0_delta_cy.X();
        }, cym], {
        visible: false
    });
    
    // point (x0-delta;cym)
    var point_x0_minus_delta_cym = board.create('point', [
        function () {
            return point_x0_minus_delta_cy.X();
        }, cym], {
        visible: false
    });
    
    // dotted line (x0+delta;cy) - (x0+delta;cym)
    var line_x0_delta_cy_x0_delta_cym = board.create('line', [glider_x0_delta_cy, point_x0_delta_cym], {
        dash: 1,
        straightFirst: false,
        straightLast: false,
        strokeColor: '#cccccc'
    });
    
    // dotted line (x0-delta;cy) - (x0-delta;cym)
    var line_x0_minus_delta_cy_x0_minus_delta_cym = board.create('line', [point_x0_minus_delta_cy, point_x0_minus_delta_cym], {
        dash: 1,
        straightFirst: false,
        straightLast: false,
        strokeColor: '#cccccc'
    });
    
    /*
     * intersections delta an epsilon lines
     */
    
    // point (x0+delta;f(x0)+epsilon)
    var point_x0_delta_fx0_epsilon = board.create('intersection', [line_x0_delta_cy_x0_delta_cym, line_cx_fx0_epsilon_0_fx0_epsilon, 0], {
        fillColor: '#000000',
        name: '',
        size: 1,
        strokeWidth: 0
    });
    
    // point (x0-delta;f(x0)+epsilon)
    var point_x0_minus_delta_fx0_epsilon = board.create('intersection', [line_x0_minus_delta_cy_x0_minus_delta_cym, line_cx_fx0_epsilon_0_fx0_epsilon, 0], {
        fillColor: '#000000',
        name: '',
        size: 1,
        strokeWidth: 0
    });
    // point (x0+delta;f(x0)-epsilon)
    var point_x0_delta_fx0_epsilon = board.create('intersection', [line_x0_delta_cy_x0_delta_cym, line_cx_fx0_minus_epsilon_0_fx0_minus_epsilon, 0], {
        fillColor: '#000000',
        name: '',
        size: 1,
        strokeWidth: 0
    });
    // point (x0+delta;f(x0)+epsilon)
    var point_x0_delta_fx0_epsilon = board.create('intersection', [line_x0_minus_delta_cy_x0_minus_delta_cym, line_cx_fx0_minus_epsilon_0_fx0_minus_epsilon, 0], {
        fillColor: '#000000',
        name: '',
        size: 1,
        strokeWidth: 0
    });
    
    /*
     * x
     */
    
    // line (x0-delta;0) - (x0+delta;0) for x glider
    var line_x0_minus_delta_0_x0_delta_0 = board.create('line', [point_x0_minus_delta_0, point_x0_delta_0], {
        straightFirst: false,
        straightLast: false,
        visible: false
    });
    
    // x glider
    var glider_x_0 = board.create('glider', [glider_x0_0.X() + delta / 2, 0, line_x0_minus_delta_0_x0_delta_0], {
        fillColor: '#3366ff',
        label: {
            offset: [-4, -15]
        },
        name: '\\(x\\)',
        size: 2,
        strokeColor: '#000000',
        strokeWidth: 1
    });
    
    // highlight x
    highlightElement(glider_x_0, 'xed', 'highlightBlue');
    
    // point (x;f(x))
    var point_x_fx = board.create('point', [
        function () {
            return glider_x_0.X();
        },
        function () {
            return term_f(glider_x_0.X());
        }], {
        fillColor: '#000000',
        name: '',
        size: 2,
        strokeWidth: 0
    });
    
    // point (0;f(x))
    var point_0_fx = board.create('point', [0,
        function () {
            return term_f(glider_x_0.X());
        }], {
        fillColor: '#000000',
        label: {
            offset: [-30, 0]
        },
        name: '\\(f(x)\\)',
        size: 2,
        strokeWidth: 0
    });
    
    // dotted line (x;0) -(x,f(x))
    var line_x_0_x_fx = board.create('line', [glider_x_0, point_x_fx], {
        dash: 2,
        straightFirst: false,
        straightLast: false,
        strokeColor: '#000000',
        strokeWidth: 1,
    });
    
    // dotted line (x;f(x)) - (0;f(x))
    var line_x_fx_0_fx = board.create('line', [point_x_fx, point_0_fx], {
        dash: 2,
        straightFirst: false,
        straightLast: false,
        strokeColor: '#000000',
        strokeWidth: 1,
    });
    
    /*
     * line  for |x-x0|<delta
     */
    
    // line (x0;0) - (x;0) for |x-x0|<delta
    var line_x0_0_x_0 = board.create('line', [point_x0_0, glider_x_0], {
        straightFirst: false,
        straightLast: false,
        strokeColor: '#3366ff',
        strokeWidth: 3,
    });
    
    // highlight |x-x0|<delta
    highlightElement(line_x0_0_x_0, 'xx0d', 'highlightBlue');
    
    /*
     * line  for |f(x)-f(x0)|<epsilon
     */
    
    // line (0;f(x)) - (0;f(x0)) for |f(x)-f(x0)|<epsilon with epsilon-delta-condition
    var line_0_fx_0_fx0 = board.create('line', [point_0_fx0, point_0_fx], {
        straightFirst: false,
        straightLast: false,
        strokeColor: function () {
            if (line_cx_fx0_cx_fx0_epsilon.L() > point_0_fx0.Dist(point_0_fx))
                return '#993333';
            else
                return '#ff00ff';
        },
        strokeWidth: 3,
    });
    
    // highlight |f(x)-f(x0)|<epsilon
    highlightElement(line_0_fx_0_fx0, 'fxfx0', 'highlightDarkRed');
    
    // area with epsilon-delta-condition
    var polygon_delta_epsilon = board.create('polygon', [
        point_x0_0,
        glider_x_0,
        point_x_fx,
        point_0_fx,
        point_0_fx0,
        point_x0_fx0
    ], {
        borders: {
            visible: false
        },
        fillColor: function () {
            if (line_cx_fx0_cx_fx0_epsilon.L() > point_0_fx0.Dist(point_0_fx))
                return '#dddddd';
            else
                return '#ff00ff';
        },
        highlightFillColor: '#dddddd'
    });
    
    /*
     * alert epsilon-delta-condition
     */
    
    function highlightElement(el, id, cl) {
    
    }
    
 </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;
JXG.Options.axis.ticks.insertTicks = false;
JXG.Options.axis.ticks.majorHeight = 0;
JXG.Options.axis.ticks.minorHeight = 0;
JXG.Options.axis.ticks.drawLabels = false;
JXG.Options.axis.ticks.insertTicks = false;
JXG.Options.point.showInfobox = false;

var board = JXG.JSXGraph.initBoard(BOARDID, {
    axis: false,
    boundingbox: [-3, 5, 5.5, -2],
    infoboxText: '',
    showCopyright: false,
    showNavigation: false,
    pan: { enabled: false },
    zoom: { enabled: false }
});

// global epsilon
var global_epsilon = 0.00000001;

/*
 * axis
 */

// x-axis
var x_axis = board.create('axis', [[0, 0], [1, 0]],
    {
        label: {
            position: 'rt',
            offset: [-10, -15]
        },
        name: '\\(x\\)',
        straightFirst: false,
        withLabel: true
    });

// highlight D
highlightElement(x_axis, "xaxis", "highlightGrey");

// y-axis
var y_axis = board.create('axis', [[0, 0], [0, 1]],
    {
        label: {
            position: 'lft',
            offset: [-40, -5]
        },
        name: '\\(f(x)\\)',
        straightFirst: false,
        withLabel: true
    });

/*
 * function
 */

// specific point
var specific_point = 0;

// x0 start value for glider (x0;0)
var x0_init = 2;

// function term f
var term_f = function (x) {
    /*
     * functions
     */

    // continuous function (polynom)
    // return (0.25 * Math.pow(x - 2.5, 3) + 0.5 * Math.pow(x - 2.5, 2)) + 1.5;

    /*/ continuous function (polynom)
    specific_point = 2;
    x0_init = 3;
    return Math.pow(x - specific_point, 2) + 1;
    //*/

    /*/ continuous function abs()
    specific_point = 1.75;
    x0_init = 3;
    return Math.abs(x - specific_point) + 1.5;
    //*/

    /*/ continuous function sin()
    specific_point = 1;
    x0_init = 1.5;
    return Math.sin(2.5 * x - specific_point) + 1.5;
    //*/

    /*/ continuous function sin()
    x0_init = 1.8;
    return Math.sin(5 * x) / x + 2.25;
    //*/

    /*
     * piecewise-defined functions
     */

    /*/ continuous function (polynoms)
    specific_point = 2;
    x0_init = 1.5;
    if (x < specific_point) {
        return x + 1;
    } else {
        return -Math.pow((x - specific_point - 0.5), 2) + 3.25;
    }
    //*/

    /*/ continuous function (polynoms)
    specific_point = 2.5;
    x0_init = 1.5;
    if (x < specific_point) {
        return 1.5;
    } else {
        return Math.pow(x - specific_point, 2) + 1.5;
    }
    //*/

    // discontinuous function (polynoms)
    specific_point = 3.25;
    x0_init = 3.25;
    if (x < specific_point) {
        return 0.2 * x * x;
    } else {
        return x - 0.5;
    }
    //*/

    /*/ continuous function (polynoms)
    specific_point = Math.PI;
    x0_init = 2;
    if (x < specific_point) {
        return Math.sin(3 * x) / x + 2;
    } else {
        return -x + 2 + Math.PI;
    }
    //*/


};

// graph of f
var graph_f = board.create('functiongraph', [term_f, 0.25, 4.1], {
    dash: 0,
    layer: 8,
    strokeColor: '#4080aa',
    strokeWidth: 2
});

// piecewise-defined discontinuous function
if (Math.abs(term_f(specific_point - global_epsilon) - term_f(specific_point)) > global_epsilon) {
    // point (specific_point-0;f(specific_point-0))
    var point_specific_point_minus_global_epsilon_fspecific_point_minus_global_epsilon = board.create('point', [specific_point - global_epsilon, term_f(specific_point - global_epsilon)], {
        fillColor: '#ffffff',
        name: '',
        size: 1,
        strokeColor: '#4080aa',
        strokeWidth: 2
    });

    // point (specific_point;f(specific_point))
    var point_specific_point_fspecific_point = board.create('point', [specific_point, term_f(specific_point)], {
        fillColor: '#4080aa',
        name: '',
        size: 1,
        strokeColor: '#4080aa',
        strokeWidth: 2
    });

    // dashed line (specific_point;0) - (specific_point;max(f(specific_point),f(specific_point-0)))
    var line_specific_point_0_specific_point_fmax_specific_point_or_specific_point_minus_0 = board.create('line',[[specific_point,0],[specific_point,Math.max(term_f(specific_point),term_f(specific_point - global_epsilon))]],{
        dash: 1,
        name:'',
        straightFirst: false,
        straightLast: false,
        strokeColor: '#4080aa',
        strokeWidth: 1
    });
}

// highlight function
highlightElement(graph_f, "graph", "highlightDarkBlue");

/*
 * x0 and f(x0)
 */

// coordonate for parallel line to x-axis
var cx = -0.5;

// start x0
var x0_start = 0.5;

// end x0
var x0_end = 4;

// line parallel to x-axis for x0 glider
var line_parallel_x_axis = board.create('line', [[x0_start, cx], [x0_end, cx]], {
    straightFirst: false,
    straightLast: false,
    visible: false
});

// x0 glider (not on x-axis for better visibility)
var glider_x0_0 = board.create('glider', [x0_init, 0, line_parallel_x_axis], {
    fillColor: '#ff00ff',
    label: {
        offset: [-5, -15]
    },
    name: '\\(x_0\\)',
    size: 2,
    strokeColor: '#000000',
    strokeWidth: 1
});

// highlight x0
highlightElement(glider_x0_0, 'x0', 'highlightMagenta');

// point (x0;f(x0))
var point_x0_fx0 = board.create('point', [
    function () {
        return glider_x0_0.X();
    },
    function () {
        return term_f(glider_x0_0.X());
    }], {
    fillColor: '#000000',
    name: '',
    size: 2,
    strokeWidth: 0
});

// point (0;f(x))
var point_0_fx0 = board.create('point', [0,
    function () {
        return term_f(glider_x0_0.X());
    }], {
    fillColor: '#000000',
    /* label not display because of epsilon
    label: {
        offset: [-45, 0]
    },
    name: '\\(f(x_0)\\)',
    */
    name: '',
    size: 2,
    strokeWidth: 0
});

// dashed line (x0;0) - (x0;f(x0))
var line_x0_0_x0_fx0 = board.create('line', [glider_x0_0, point_x0_fx0], {
    dash: 2,
    straightFirst: false,
    straightLast: false,
    strokeColor: '#000000',
    strokeWidth: 1,
});

// point (x0;0) on x-axis (refers to glider_x0_0)
var point_x0_0 = board.create('intersection', [x_axis, line_x0_0_x0_fx0], {
    fillColor: '#000000',
    label: {
        offset: [-20, -35]
    },
    name: '',
    size: 1,
    strokeWidth: 0
});

// dashed line (x0;f(x0)) - (0;f(x0))
var line_x0_fx0_0_fx0 = board.create('line', [point_x0_fx0, point_0_fx0], {
    dash: 2,
    straightFirst: false,
    straightLast: false,
    strokeColor: '#000000',
    strokeWidth: 1,
});

/*
 * epsilon
 */

// coordonate for parallel line to y-axis
var cx = -1.1;

// point (cx;f(x0))
var point_cx_fx0 = board.create('point', [function () {
    return point_0_fx0.X() + cx;

}, function () {
    return point_0_fx0.Y();
}], {
    fillColor: '#000000',
    label: {
        offset: [-55, 0]
    },
    name: '\\(f(x_0)\\)',
    size: 2,
    strokeWidth: 0
});

// point (cx,f(x0)+1)
var point_cx_fx01 = board.create('point', [function () {
    return point_cx_fx0.X();

}, function () {
    return point_cx_fx0.Y() + 1;
}], {
    visible: false
});

// dashed line (0;f(x0)) - (cx;f(x0))
var line_0_fx0_cx_fx0 = board.create('line', [point_0_fx0, point_cx_fx0], {
    dash: 2,
    straightFirst: false,
    straightLast: false,
    strokeColor: '#000000',
    strokeWidth: 1
});

// line (cx;f(x0)) - (cx,f(x0)+1) for epsilon glider
var line_cx_fx0_cx_fx01 = board.create('line', [point_cx_fx0, point_cx_fx01], {
    straightFirst: false,
    visible: false
});

// epsilon
var epsilon = 1;

// epsilon glider
var glider_cx_fx0_espilon = board.create('glider', [0, (function () {
    return point_0_fx0.Y() + epsilon;
})(), line_cx_fx0_cx_fx01], {
    fillColor: '#00dd66',
    label: {
        offset: [-55, 20]
    },
    name: '\\(f(x_0)+\\epsilon\\)',
    size: 2,
    strokeColor: '#000000',
    strokeWidth: 1
});

// highlight epsilon point
highlightElement(glider_cx_fx0_espilon, "epsilon", "highlightGreen");

// epsilon as line length
var line_cx_fx0_cx_fx0_epsilon = board.create('line', [point_cx_fx0, glider_cx_fx0_espilon], {
    straightFirst: false,
    straightLast: false,
    strokeColor: '#00dd66',
    strokeWidth: 3
});

// highlight epsilon line
highlightElement(line_cx_fx0_cx_fx0_epsilon, "epsilon", "highlightGreen");

// point for epsilon label
var point_label_epsilon = board.create('midpoint', [point_cx_fx0, glider_cx_fx0_espilon], {
    label: {
        offset: [5, 1]
    },
    name: '\\(\\epsilon\\)',
    size: 0
});

// point (cx;f(x0)-epsilon)
var point_cx_fx0_minus_epsilon = board.create('mirrorpoint', [glider_cx_fx0_espilon, point_cx_fx0], {
    fillColor: '#000000',
    label: {
        offset: [-55, -20]
    },
    name: '\\(f(x_0)-\\epsilon\\)',
    size: 2,
    strokeWidth: 0
});

// dotted line (cx;f(x0)) - (cx;f(x0)-epsilon)
var line_cx_fx0_cx_fx0_minus_epsilon = board.create('line', [point_cx_fx0, point_cx_fx0_minus_epsilon], {
    dash: 1,
    straightFirst: false,
    straightLast: false,
    strokeColor: '#00dd66'
});

// point (0,f(x0)+epsilon)
var point_0_fx0_epsilon = board.create('point', [0,
    function () {
        return glider_cx_fx0_espilon.Y();
    }], {
    fillColor: '#000000',
    name: '',
    size: 1,
    strokeWidth: 0
});

// point (0,f(x0)-epsilon)
var point_0_fx0_minus_epsilon = board.create('point', [0,
    function () {
        return point_cx_fx0_minus_epsilon.Y();
    }], {
    fillColor: '#000000',
    name: '',
    size: 1,
    strokeWidth: 0
});

// line (cx;f(x0)+epsilon) - (0;f(x0)+epsilon)
var line_cx_fx0_epsilon_0_fx0_epsilon = board.create('line', [glider_cx_fx0_espilon, point_0_fx0_epsilon], {
    dash: 1,
    straightFirst: false,
    straightLast: true,
    strokeColor: '#cccccc'
});

// line (cx;f(x0)-epsilon) - (0;f(x0)-epsilon)
var line_cx_fx0_minus_epsilon_0_fx0_minus_epsilon = board.create('line', [point_cx_fx0_minus_epsilon, point_0_fx0_minus_epsilon], {
    dash: 1,
    straightFirst: false,
    straightLast: true,
    strokeColor: '#cccccc'
});

/*
 * delta
 */

// coordonate for parallel line to x-axis
var cy = -1.25;

// point (x0;cy)
var point_x0_cy = board.create('point', [function () {
    return glider_x0_0.X();
}, cy], {
    fillColor: '#000000',
    name: '',
    size: 2,
    strokeWidth: 0
});

// point (x0+1;cy)
var point_x01_cy = board.create('point', [function () {
    return glider_x0_0.X() + 1;

}, cy], {
    visible: false
});

// line (x0;cy) - (x0+1,cy) for delta glider
var line_x0_cy_x01_cy = board.create('line', [point_x0_cy, point_x01_cy], {
    straightFirst: false,
    visible: false
});

// delta
var delta = 0.75;

// delta glider
var glider_x0_delta_cy = board.create('glider', [(function () {
    return point_x0_0.X() + delta;
})(), cy, line_x0_cy_x01_cy], {
    fillColor: '#ffaa33',
    label: {
        offset: [10, -10]
    },
    name: '\\(x_0+\\delta\\)',
    size: 2,
    strokeColor: '#000000',
    strokeWidth: 1
});

// highlight delta point
highlightElement(glider_x0_delta_cy, "delta", "highlightOrange");

// delta as line length
var line_x0_cy_x0_delta_cy = board.create('line', [point_x0_cy, glider_x0_delta_cy], {
    straightFirst: false,
    straightLast: false,
    strokeColor: '#ffaa33',
    strokeWidth: 3
});

// highlight delta line
highlightElement(line_x0_cy_x0_delta_cy, "delta", "highlightOrange");

// point (x0-delta;cy)
var point_x0_minus_delta_cy = board.create('mirrorpoint', [glider_x0_delta_cy, point_x0_cy], {
    fillColor: '#000000',
    label: {
        offset: [-50, -10]
    },
    name: '\\(x_0-\\delta\\)',
    size: 2,
    strokeWidth: 0
});

// dotted line (x0;cy) - (x0-delta;cy)
var line_x0_cy_x0_minus_delta_cy = board.create('line', [point_x0_cy, point_x0_minus_delta_cy], {
    dash: 1,
    straightFirst: false,
    straightLast: false,
    strokeColor: '#ffaa33'
});

// point for delta label
var point_label_delta = board.create('midpoint', [point_x0_cy, glider_x0_delta_cy], {
    label: {
        offset: [-2, 12]
    },
    name: '\\(\\delta\\)',
    size: 0
});

// point (x0+delta;0)
var point_x0_delta_0 = board.create('point', [
    function () {
        return glider_x0_delta_cy.X();
    }, 0], {
    fillColor: '#000000',
    label: {
        offset: [-20, -35]
    },
    name: '',
    size: 1,
    strokeWidth: 0
});

// point (x0-delta;0)
var point_x0_minus_delta_0 = board.create('point', [
    function () {
        return point_x0_minus_delta_cy.X();
    }, 0], {
    fillColor: '#000000',
    label: {
        offset: [-20, -35]
    },
    name: '',
    size: 1,
    strokeWidth: 0
});

// end point y for vertical dotted line
var cym = 4.75;

// point (x0+delta;cym)
var point_x0_delta_cym = board.create('point', [
    function () {
        return glider_x0_delta_cy.X();
    }, cym], {
    visible: false
});

// point (x0-delta;cym)
var point_x0_minus_delta_cym = board.create('point', [
    function () {
        return point_x0_minus_delta_cy.X();
    }, cym], {
    visible: false
});

// dotted line (x0+delta;cy) - (x0+delta;cym)
var line_x0_delta_cy_x0_delta_cym = board.create('line', [glider_x0_delta_cy, point_x0_delta_cym], {
    dash: 1,
    straightFirst: false,
    straightLast: false,
    strokeColor: '#cccccc'
});

// dotted line (x0-delta;cy) - (x0-delta;cym)
var line_x0_minus_delta_cy_x0_minus_delta_cym = board.create('line', [point_x0_minus_delta_cy, point_x0_minus_delta_cym], {
    dash: 1,
    straightFirst: false,
    straightLast: false,
    strokeColor: '#cccccc'
});

/*
 * intersections delta an epsilon lines
 */

// point (x0+delta;f(x0)+epsilon)
var point_x0_delta_fx0_epsilon = board.create('intersection', [line_x0_delta_cy_x0_delta_cym, line_cx_fx0_epsilon_0_fx0_epsilon, 0], {
    fillColor: '#000000',
    name: '',
    size: 1,
    strokeWidth: 0
});

// point (x0-delta;f(x0)+epsilon)
var point_x0_minus_delta_fx0_epsilon = board.create('intersection', [line_x0_minus_delta_cy_x0_minus_delta_cym, line_cx_fx0_epsilon_0_fx0_epsilon, 0], {
    fillColor: '#000000',
    name: '',
    size: 1,
    strokeWidth: 0
});
// point (x0+delta;f(x0)-epsilon)
var point_x0_delta_fx0_epsilon = board.create('intersection', [line_x0_delta_cy_x0_delta_cym, line_cx_fx0_minus_epsilon_0_fx0_minus_epsilon, 0], {
    fillColor: '#000000',
    name: '',
    size: 1,
    strokeWidth: 0
});
// point (x0+delta;f(x0)+epsilon)
var point_x0_delta_fx0_epsilon = board.create('intersection', [line_x0_minus_delta_cy_x0_minus_delta_cym, line_cx_fx0_minus_epsilon_0_fx0_minus_epsilon, 0], {
    fillColor: '#000000',
    name: '',
    size: 1,
    strokeWidth: 0
});

/*
 * x
 */

// line (x0-delta;0) - (x0+delta;0) for x glider
var line_x0_minus_delta_0_x0_delta_0 = board.create('line', [point_x0_minus_delta_0, point_x0_delta_0], {
    straightFirst: false,
    straightLast: false,
    visible: false
});

// x glider
var glider_x_0 = board.create('glider', [glider_x0_0.X() + delta / 2, 0, line_x0_minus_delta_0_x0_delta_0], {
    fillColor: '#3366ff',
    label: {
        offset: [-4, -15]
    },
    name: '\\(x\\)',
    size: 2,
    strokeColor: '#000000',
    strokeWidth: 1
});

// highlight x
highlightElement(glider_x_0, 'xed', 'highlightBlue');

// point (x;f(x))
var point_x_fx = board.create('point', [
    function () {
        return glider_x_0.X();
    },
    function () {
        return term_f(glider_x_0.X());
    }], {
    fillColor: '#000000',
    name: '',
    size: 2,
    strokeWidth: 0
});

// point (0;f(x))
var point_0_fx = board.create('point', [0,
    function () {
        return term_f(glider_x_0.X());
    }], {
    fillColor: '#000000',
    label: {
        offset: [-30, 0]
    },
    name: '\\(f(x)\\)',
    size: 2,
    strokeWidth: 0
});

// dotted line (x;0) -(x,f(x))
var line_x_0_x_fx = board.create('line', [glider_x_0, point_x_fx], {
    dash: 2,
    straightFirst: false,
    straightLast: false,
    strokeColor: '#000000',
    strokeWidth: 1,
});

// dotted line (x;f(x)) - (0;f(x))
var line_x_fx_0_fx = board.create('line', [point_x_fx, point_0_fx], {
    dash: 2,
    straightFirst: false,
    straightLast: false,
    strokeColor: '#000000',
    strokeWidth: 1,
});

/*
 * line  for |x-x0|<delta
 */

// line (x0;0) - (x;0) for |x-x0|<delta
var line_x0_0_x_0 = board.create('line', [point_x0_0, glider_x_0], {
    straightFirst: false,
    straightLast: false,
    strokeColor: '#3366ff',
    strokeWidth: 3,
});

// highlight |x-x0|<delta
highlightElement(line_x0_0_x_0, 'xx0d', 'highlightBlue');

/*
 * line  for |f(x)-f(x0)|<epsilon
 */

// line (0;f(x)) - (0;f(x0)) for |f(x)-f(x0)|<epsilon with epsilon-delta-condition
var line_0_fx_0_fx0 = board.create('line', [point_0_fx0, point_0_fx], {
    straightFirst: false,
    straightLast: false,
    strokeColor: function () {
        if (line_cx_fx0_cx_fx0_epsilon.L() > point_0_fx0.Dist(point_0_fx))
            return '#993333';
        else
            return '#ff00ff';
    },
    strokeWidth: 3,
});

// highlight |f(x)-f(x0)|<epsilon
highlightElement(line_0_fx_0_fx0, 'fxfx0', 'highlightDarkRed');

// area with epsilon-delta-condition
var polygon_delta_epsilon = board.create('polygon', [
    point_x0_0,
    glider_x_0,
    point_x_fx,
    point_0_fx,
    point_0_fx0,
    point_x0_fx0
], {
    borders: {
        visible: false
    },
    fillColor: function () {
        if (line_cx_fx0_cx_fx0_epsilon.L() > point_0_fx0.Dist(point_0_fx))
            return '#dddddd';
        else
            return '#ff00ff';
    },
    highlightFillColor: '#dddddd'
});

/*
 * alert epsilon-delta-condition
 */

function highlightElement(el, id, cl) {

}
<jsxgraph width="100%" aspect-ratio="1 / 1" title="Continuity" 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;
   JXG.Options.axis.ticks.insertTicks = false;
   JXG.Options.axis.ticks.majorHeight = 0;
   JXG.Options.axis.ticks.minorHeight = 0;
   JXG.Options.axis.ticks.drawLabels = false;
   JXG.Options.axis.ticks.insertTicks = false;
   JXG.Options.point.showInfobox = false;
   
   var board = JXG.JSXGraph.initBoard(BOARDID, {
       axis: false,
       boundingbox: [-3, 5, 5.5, -2],
       infoboxText: '',
       showCopyright: false,
       showNavigation: false,
       pan: { enabled: false },
       zoom: { enabled: false }
   });
   
   // global epsilon
   var global_epsilon = 0.00000001;
   
   /*
    * axis
    */
   
   // x-axis
   var x_axis = board.create('axis', [[0, 0], [1, 0]],
       {
           label: {
               position: 'rt',
               offset: [-10, -15]
           },
           name: '\\(x\\)',
           straightFirst: false,
           withLabel: true
       });
   
   // highlight D
   highlightElement(x_axis, "xaxis", "highlightGrey");
   
   // y-axis
   var y_axis = board.create('axis', [[0, 0], [0, 1]],
       {
           label: {
               position: 'lft',
               offset: [-40, -5]
           },
           name: '\\(f(x)\\)',
           straightFirst: false,
           withLabel: true
       });
   
   /*
    * function
    */
   
   // specific point
   var specific_point = 0;
   
   // x0 start value for glider (x0;0)
   var x0_init = 2;
   
   // function term f
   var term_f = function (x) {
       /*
        * functions
        */
   
       // continuous function (polynom)
       // return (0.25 * Math.pow(x - 2.5, 3) + 0.5 * Math.pow(x - 2.5, 2)) + 1.5;
   
       /*/ continuous function (polynom)
       specific_point = 2;
       x0_init = 3;
       return Math.pow(x - specific_point, 2) + 1;
       //*/
   
       /*/ continuous function abs()
       specific_point = 1.75;
       x0_init = 3;
       return Math.abs(x - specific_point) + 1.5;
       //*/
   
       /*/ continuous function sin()
       specific_point = 1;
       x0_init = 1.5;
       return Math.sin(2.5 * x - specific_point) + 1.5;
       //*/
   
       /*/ continuous function sin()
       x0_init = 1.8;
       return Math.sin(5 * x) / x + 2.25;
       //*/
   
       /*
        * piecewise-defined functions
        */
   
       /*/ continuous function (polynoms)
       specific_point = 2;
       x0_init = 1.5;
       if (x < specific_point) {
           return x + 1;
       } else {
           return -Math.pow((x - specific_point - 0.5), 2) + 3.25;
       }
       //*/
   
       /*/ continuous function (polynoms)
       specific_point = 2.5;
       x0_init = 1.5;
       if (x < specific_point) {
           return 1.5;
       } else {
           return Math.pow(x - specific_point, 2) + 1.5;
       }
       //*/
   
       // discontinuous function (polynoms)
       specific_point = 3.25;
       x0_init = 3.25;
       if (x < specific_point) {
           return 0.2 * x * x;
       } else {
           return x - 0.5;
       }
       //*/
   
       /*/ continuous function (polynoms)
       specific_point = Math.PI;
       x0_init = 2;
       if (x < specific_point) {
           return Math.sin(3 * x) / x + 2;
       } else {
           return -x + 2 + Math.PI;
       }
       //*/
   
   
   };
   
   // graph of f
   var graph_f = board.create('functiongraph', [term_f, 0.25, 4.1], {
       dash: 0,
       layer: 8,
       strokeColor: '#4080aa',
       strokeWidth: 2
   });
   
   // piecewise-defined discontinuous function
   if (Math.abs(term_f(specific_point - global_epsilon) - term_f(specific_point)) > global_epsilon) {
       // point (specific_point-0;f(specific_point-0))
       var point_specific_point_minus_global_epsilon_fspecific_point_minus_global_epsilon = board.create('point', [specific_point - global_epsilon, term_f(specific_point - global_epsilon)], {
           fillColor: '#ffffff',
           name: '',
           size: 1,
           strokeColor: '#4080aa',
           strokeWidth: 2
       });
   
       // point (specific_point;f(specific_point))
       var point_specific_point_fspecific_point = board.create('point', [specific_point, term_f(specific_point)], {
           fillColor: '#4080aa',
           name: '',
           size: 1,
           strokeColor: '#4080aa',
           strokeWidth: 2
       });
   
       // dashed line (specific_point;0) - (specific_point;max(f(specific_point),f(specific_point-0)))
       var line_specific_point_0_specific_point_fmax_specific_point_or_specific_point_minus_0 = board.create('line',[[specific_point,0],[specific_point,Math.max(term_f(specific_point),term_f(specific_point - global_epsilon))]],{
           dash: 1,
           name:'',
           straightFirst: false,
           straightLast: false,
           strokeColor: '#4080aa',
           strokeWidth: 1
       });
   }
   
   // highlight function
   highlightElement(graph_f, "graph", "highlightDarkBlue");
   
   /*
    * x0 and f(x0)
    */
   
   // coordonate for parallel line to x-axis
   var cx = -0.5;
   
   // start x0
   var x0_start = 0.5;
   
   // end x0
   var x0_end = 4;
   
   // line parallel to x-axis for x0 glider
   var line_parallel_x_axis = board.create('line', [[x0_start, cx], [x0_end, cx]], {
       straightFirst: false,
       straightLast: false,
       visible: false
   });
   
   // x0 glider (not on x-axis for better visibility)
   var glider_x0_0 = board.create('glider', [x0_init, 0, line_parallel_x_axis], {
       fillColor: '#ff00ff',
       label: {
           offset: [-5, -15]
       },
       name: '\\(x_0\\)',
       size: 2,
       strokeColor: '#000000',
       strokeWidth: 1
   });
   
   // highlight x0
   highlightElement(glider_x0_0, 'x0', 'highlightMagenta');
   
   // point (x0;f(x0))
   var point_x0_fx0 = board.create('point', [
       function () {
           return glider_x0_0.X();
       },
       function () {
           return term_f(glider_x0_0.X());
       }], {
       fillColor: '#000000',
       name: '',
       size: 2,
       strokeWidth: 0
   });
   
   // point (0;f(x))
   var point_0_fx0 = board.create('point', [0,
       function () {
           return term_f(glider_x0_0.X());
       }], {
       fillColor: '#000000',
       /* label not display because of epsilon
       label: {
           offset: [-45, 0]
       },
       name: '\\(f(x_0)\\)',
       */
       name: '',
       size: 2,
       strokeWidth: 0
   });
   
   // dashed line (x0;0) - (x0;f(x0))
   var line_x0_0_x0_fx0 = board.create('line', [glider_x0_0, point_x0_fx0], {
       dash: 2,
       straightFirst: false,
       straightLast: false,
       strokeColor: '#000000',
       strokeWidth: 1,
   });
   
   // point (x0;0) on x-axis (refers to glider_x0_0)
   var point_x0_0 = board.create('intersection', [x_axis, line_x0_0_x0_fx0], {
       fillColor: '#000000',
       label: {
           offset: [-20, -35]
       },
       name: '',
       size: 1,
       strokeWidth: 0
   });
   
   // dashed line (x0;f(x0)) - (0;f(x0))
   var line_x0_fx0_0_fx0 = board.create('line', [point_x0_fx0, point_0_fx0], {
       dash: 2,
       straightFirst: false,
       straightLast: false,
       strokeColor: '#000000',
       strokeWidth: 1,
   });
   
   /*
    * epsilon
    */
   
   // coordonate for parallel line to y-axis
   var cx = -1.1;
   
   // point (cx;f(x0))
   var point_cx_fx0 = board.create('point', [function () {
       return point_0_fx0.X() + cx;
   
   }, function () {
       return point_0_fx0.Y();
   }], {
       fillColor: '#000000',
       label: {
           offset: [-55, 0]
       },
       name: '\\(f(x_0)\\)',
       size: 2,
       strokeWidth: 0
   });
   
   // point (cx,f(x0)+1)
   var point_cx_fx01 = board.create('point', [function () {
       return point_cx_fx0.X();
   
   }, function () {
       return point_cx_fx0.Y() + 1;
   }], {
       visible: false
   });
   
   // dashed line (0;f(x0)) - (cx;f(x0))
   var line_0_fx0_cx_fx0 = board.create('line', [point_0_fx0, point_cx_fx0], {
       dash: 2,
       straightFirst: false,
       straightLast: false,
       strokeColor: '#000000',
       strokeWidth: 1
   });
   
   // line (cx;f(x0)) - (cx,f(x0)+1) for epsilon glider
   var line_cx_fx0_cx_fx01 = board.create('line', [point_cx_fx0, point_cx_fx01], {
       straightFirst: false,
       visible: false
   });
   
   // epsilon
   var epsilon = 1;
   
   // epsilon glider
   var glider_cx_fx0_espilon = board.create('glider', [0, (function () {
       return point_0_fx0.Y() + epsilon;
   })(), line_cx_fx0_cx_fx01], {
       fillColor: '#00dd66',
       label: {
           offset: [-55, 20]
       },
       name: '\\(f(x_0)+\\epsilon\\)',
       size: 2,
       strokeColor: '#000000',
       strokeWidth: 1
   });
   
   // highlight epsilon point
   highlightElement(glider_cx_fx0_espilon, "epsilon", "highlightGreen");
   
   // epsilon as line length
   var line_cx_fx0_cx_fx0_epsilon = board.create('line', [point_cx_fx0, glider_cx_fx0_espilon], {
       straightFirst: false,
       straightLast: false,
       strokeColor: '#00dd66',
       strokeWidth: 3
   });
   
   // highlight epsilon line
   highlightElement(line_cx_fx0_cx_fx0_epsilon, "epsilon", "highlightGreen");
   
   // point for epsilon label
   var point_label_epsilon = board.create('midpoint', [point_cx_fx0, glider_cx_fx0_espilon], {
       label: {
           offset: [5, 1]
       },
       name: '\\(\\epsilon\\)',
       size: 0
   });
   
   // point (cx;f(x0)-epsilon)
   var point_cx_fx0_minus_epsilon = board.create('mirrorpoint', [glider_cx_fx0_espilon, point_cx_fx0], {
       fillColor: '#000000',
       label: {
           offset: [-55, -20]
       },
       name: '\\(f(x_0)-\\epsilon\\)',
       size: 2,
       strokeWidth: 0
   });
   
   // dotted line (cx;f(x0)) - (cx;f(x0)-epsilon)
   var line_cx_fx0_cx_fx0_minus_epsilon = board.create('line', [point_cx_fx0, point_cx_fx0_minus_epsilon], {
       dash: 1,
       straightFirst: false,
       straightLast: false,
       strokeColor: '#00dd66'
   });
   
   // point (0,f(x0)+epsilon)
   var point_0_fx0_epsilon = board.create('point', [0,
       function () {
           return glider_cx_fx0_espilon.Y();
       }], {
       fillColor: '#000000',
       name: '',
       size: 1,
       strokeWidth: 0
   });
   
   // point (0,f(x0)-epsilon)
   var point_0_fx0_minus_epsilon = board.create('point', [0,
       function () {
           return point_cx_fx0_minus_epsilon.Y();
       }], {
       fillColor: '#000000',
       name: '',
       size: 1,
       strokeWidth: 0
   });
   
   // line (cx;f(x0)+epsilon) - (0;f(x0)+epsilon)
   var line_cx_fx0_epsilon_0_fx0_epsilon = board.create('line', [glider_cx_fx0_espilon, point_0_fx0_epsilon], {
       dash: 1,
       straightFirst: false,
       straightLast: true,
       strokeColor: '#cccccc'
   });
   
   // line (cx;f(x0)-epsilon) - (0;f(x0)-epsilon)
   var line_cx_fx0_minus_epsilon_0_fx0_minus_epsilon = board.create('line', [point_cx_fx0_minus_epsilon, point_0_fx0_minus_epsilon], {
       dash: 1,
       straightFirst: false,
       straightLast: true,
       strokeColor: '#cccccc'
   });
   
   /*
    * delta
    */
   
   // coordonate for parallel line to x-axis
   var cy = -1.25;
   
   // point (x0;cy)
   var point_x0_cy = board.create('point', [function () {
       return glider_x0_0.X();
   }, cy], {
       fillColor: '#000000',
       name: '',
       size: 2,
       strokeWidth: 0
   });
   
   // point (x0+1;cy)
   var point_x01_cy = board.create('point', [function () {
       return glider_x0_0.X() + 1;
   
   }, cy], {
       visible: false
   });
   
   // line (x0;cy) - (x0+1,cy) for delta glider
   var line_x0_cy_x01_cy = board.create('line', [point_x0_cy, point_x01_cy], {
       straightFirst: false,
       visible: false
   });
   
   // delta
   var delta = 0.75;
   
   // delta glider
   var glider_x0_delta_cy = board.create('glider', [(function () {
       return point_x0_0.X() + delta;
   })(), cy, line_x0_cy_x01_cy], {
       fillColor: '#ffaa33',
       label: {
           offset: [10, -10]
       },
       name: '\\(x_0+\\delta\\)',
       size: 2,
       strokeColor: '#000000',
       strokeWidth: 1
   });
   
   // highlight delta point
   highlightElement(glider_x0_delta_cy, "delta", "highlightOrange");
   
   // delta as line length
   var line_x0_cy_x0_delta_cy = board.create('line', [point_x0_cy, glider_x0_delta_cy], {
       straightFirst: false,
       straightLast: false,
       strokeColor: '#ffaa33',
       strokeWidth: 3
   });
   
   // highlight delta line
   highlightElement(line_x0_cy_x0_delta_cy, "delta", "highlightOrange");
   
   // point (x0-delta;cy)
   var point_x0_minus_delta_cy = board.create('mirrorpoint', [glider_x0_delta_cy, point_x0_cy], {
       fillColor: '#000000',
       label: {
           offset: [-50, -10]
       },
       name: '\\(x_0-\\delta\\)',
       size: 2,
       strokeWidth: 0
   });
   
   // dotted line (x0;cy) - (x0-delta;cy)
   var line_x0_cy_x0_minus_delta_cy = board.create('line', [point_x0_cy, point_x0_minus_delta_cy], {
       dash: 1,
       straightFirst: false,
       straightLast: false,
       strokeColor: '#ffaa33'
   });
   
   // point for delta label
   var point_label_delta = board.create('midpoint', [point_x0_cy, glider_x0_delta_cy], {
       label: {
           offset: [-2, 12]
       },
       name: '\\(\\delta\\)',
       size: 0
   });
   
   // point (x0+delta;0)
   var point_x0_delta_0 = board.create('point', [
       function () {
           return glider_x0_delta_cy.X();
       }, 0], {
       fillColor: '#000000',
       label: {
           offset: [-20, -35]
       },
       name: '',
       size: 1,
       strokeWidth: 0
   });
   
   // point (x0-delta;0)
   var point_x0_minus_delta_0 = board.create('point', [
       function () {
           return point_x0_minus_delta_cy.X();
       }, 0], {
       fillColor: '#000000',
       label: {
           offset: [-20, -35]
       },
       name: '',
       size: 1,
       strokeWidth: 0
   });
   
   // end point y for vertical dotted line
   var cym = 4.75;
   
   // point (x0+delta;cym)
   var point_x0_delta_cym = board.create('point', [
       function () {
           return glider_x0_delta_cy.X();
       }, cym], {
       visible: false
   });
   
   // point (x0-delta;cym)
   var point_x0_minus_delta_cym = board.create('point', [
       function () {
           return point_x0_minus_delta_cy.X();
       }, cym], {
       visible: false
   });
   
   // dotted line (x0+delta;cy) - (x0+delta;cym)
   var line_x0_delta_cy_x0_delta_cym = board.create('line', [glider_x0_delta_cy, point_x0_delta_cym], {
       dash: 1,
       straightFirst: false,
       straightLast: false,
       strokeColor: '#cccccc'
   });
   
   // dotted line (x0-delta;cy) - (x0-delta;cym)
   var line_x0_minus_delta_cy_x0_minus_delta_cym = board.create('line', [point_x0_minus_delta_cy, point_x0_minus_delta_cym], {
       dash: 1,
       straightFirst: false,
       straightLast: false,
       strokeColor: '#cccccc'
   });
   
   /*
    * intersections delta an epsilon lines
    */
   
   // point (x0+delta;f(x0)+epsilon)
   var point_x0_delta_fx0_epsilon = board.create('intersection', [line_x0_delta_cy_x0_delta_cym, line_cx_fx0_epsilon_0_fx0_epsilon, 0], {
       fillColor: '#000000',
       name: '',
       size: 1,
       strokeWidth: 0
   });
   
   // point (x0-delta;f(x0)+epsilon)
   var point_x0_minus_delta_fx0_epsilon = board.create('intersection', [line_x0_minus_delta_cy_x0_minus_delta_cym, line_cx_fx0_epsilon_0_fx0_epsilon, 0], {
       fillColor: '#000000',
       name: '',
       size: 1,
       strokeWidth: 0
   });
   // point (x0+delta;f(x0)-epsilon)
   var point_x0_delta_fx0_epsilon = board.create('intersection', [line_x0_delta_cy_x0_delta_cym, line_cx_fx0_minus_epsilon_0_fx0_minus_epsilon, 0], {
       fillColor: '#000000',
       name: '',
       size: 1,
       strokeWidth: 0
   });
   // point (x0+delta;f(x0)+epsilon)
   var point_x0_delta_fx0_epsilon = board.create('intersection', [line_x0_minus_delta_cy_x0_minus_delta_cym, line_cx_fx0_minus_epsilon_0_fx0_minus_epsilon, 0], {
       fillColor: '#000000',
       name: '',
       size: 1,
       strokeWidth: 0
   });
   
   /*
    * x
    */
   
   // line (x0-delta;0) - (x0+delta;0) for x glider
   var line_x0_minus_delta_0_x0_delta_0 = board.create('line', [point_x0_minus_delta_0, point_x0_delta_0], {
       straightFirst: false,
       straightLast: false,
       visible: false
   });
   
   // x glider
   var glider_x_0 = board.create('glider', [glider_x0_0.X() + delta / 2, 0, line_x0_minus_delta_0_x0_delta_0], {
       fillColor: '#3366ff',
       label: {
           offset: [-4, -15]
       },
       name: '\\(x\\)',
       size: 2,
       strokeColor: '#000000',
       strokeWidth: 1
   });
   
   // highlight x
   highlightElement(glider_x_0, 'xed', 'highlightBlue');
   
   // point (x;f(x))
   var point_x_fx = board.create('point', [
       function () {
           return glider_x_0.X();
       },
       function () {
           return term_f(glider_x_0.X());
       }], {
       fillColor: '#000000',
       name: '',
       size: 2,
       strokeWidth: 0
   });
   
   // point (0;f(x))
   var point_0_fx = board.create('point', [0,
       function () {
           return term_f(glider_x_0.X());
       }], {
       fillColor: '#000000',
       label: {
           offset: [-30, 0]
       },
       name: '\\(f(x)\\)',
       size: 2,
       strokeWidth: 0
   });
   
   // dotted line (x;0) -(x,f(x))
   var line_x_0_x_fx = board.create('line', [glider_x_0, point_x_fx], {
       dash: 2,
       straightFirst: false,
       straightLast: false,
       strokeColor: '#000000',
       strokeWidth: 1,
   });
   
   // dotted line (x;f(x)) - (0;f(x))
   var line_x_fx_0_fx = board.create('line', [point_x_fx, point_0_fx], {
       dash: 2,
       straightFirst: false,
       straightLast: false,
       strokeColor: '#000000',
       strokeWidth: 1,
   });
   
   /*
    * line  for |x-x0|<delta
    */
   
   // line (x0;0) - (x;0) for |x-x0|<delta
   var line_x0_0_x_0 = board.create('line', [point_x0_0, glider_x_0], {
       straightFirst: false,
       straightLast: false,
       strokeColor: '#3366ff',
       strokeWidth: 3,
   });
   
   // highlight |x-x0|<delta
   highlightElement(line_x0_0_x_0, 'xx0d', 'highlightBlue');
   
   /*
    * line  for |f(x)-f(x0)|<epsilon
    */
   
   // line (0;f(x)) - (0;f(x0)) for |f(x)-f(x0)|<epsilon with epsilon-delta-condition
   var line_0_fx_0_fx0 = board.create('line', [point_0_fx0, point_0_fx], {
       straightFirst: false,
       straightLast: false,
       strokeColor: function () {
           if (line_cx_fx0_cx_fx0_epsilon.L() > point_0_fx0.Dist(point_0_fx))
               return '#993333';
           else
               return '#ff00ff';
       },
       strokeWidth: 3,
   });
   
   // highlight |f(x)-f(x0)|<epsilon
   highlightElement(line_0_fx_0_fx0, 'fxfx0', 'highlightDarkRed');
   
   // area with epsilon-delta-condition
   var polygon_delta_epsilon = board.create('polygon', [
       point_x0_0,
       glider_x_0,
       point_x_fx,
       point_0_fx,
       point_0_fx0,
       point_x0_fx0
   ], {
       borders: {
           visible: false
       },
       fillColor: function () {
           if (line_cx_fx0_cx_fx0_epsilon.L() > point_0_fx0.Dist(point_0_fx))
               return '#dddddd';
           else
               return '#ff00ff';
       },
       highlightFillColor: '#dddddd'
   });
   
   /*
    * alert epsilon-delta-condition
    */
   
   function highlightElement(el, id, cl) {
   
   }
   
</jsxgraph>

Continuity

Basic calculus
Calculus
This example illustrates the concept of continuity using a piecewise-defined function. The graph allows users to explore how the function behaves near a critical point where it was originally undefined. By interactively approaching this point from both sides, users can visually observe how the function value matches the limiting behavior.
// Define the id of your board in BOARDID




JXG.Options.text.useMathJax = true;
JXG.Options.axis.ticks.insertTicks = false;
JXG.Options.axis.ticks.majorHeight = 0;
JXG.Options.axis.ticks.minorHeight = 0;
JXG.Options.axis.ticks.drawLabels = false;
JXG.Options.axis.ticks.insertTicks = false;
JXG.Options.point.showInfobox = false;

var board = JXG.JSXGraph.initBoard(BOARDID, {
    axis: false,
    boundingbox: [-3, 5, 5.5, -2],
    infoboxText: '',
    showCopyright: false,
    showNavigation: false,
    pan: { enabled: false },
    zoom: { enabled: false }
});

// global epsilon
var global_epsilon = 0.00000001;

/*
 * axis
 */

// x-axis
var x_axis = board.create('axis', [[0, 0], [1, 0]],
    {
        label: {
            position: 'rt',
            offset: [-10, -15]
        },
        name: '\\(x\\)',
        straightFirst: false,
        withLabel: true
    });

// highlight D
highlightElement(x_axis, "xaxis", "highlightGrey");

// y-axis
var y_axis = board.create('axis', [[0, 0], [0, 1]],
    {
        label: {
            position: 'lft',
            offset: [-40, -5]
        },
        name: '\\(f(x)\\)',
        straightFirst: false,
        withLabel: true
    });

/*
 * function
 */

// specific point
var specific_point = 0;

// x0 start value for glider (x0;0)
var x0_init = 2;

// function term f
var term_f = function (x) {
    /*
     * functions
     */

    // continuous function (polynom)
    // return (0.25 * Math.pow(x - 2.5, 3) + 0.5 * Math.pow(x - 2.5, 2)) + 1.5;

    /*/ continuous function (polynom)
    specific_point = 2;
    x0_init = 3;
    return Math.pow(x - specific_point, 2) + 1;
    //*/

    /*/ continuous function abs()
    specific_point = 1.75;
    x0_init = 3;
    return Math.abs(x - specific_point) + 1.5;
    //*/

    /*/ continuous function sin()
    specific_point = 1;
    x0_init = 1.5;
    return Math.sin(2.5 * x - specific_point) + 1.5;
    //*/

    /*/ continuous function sin()
    x0_init = 1.8;
    return Math.sin(5 * x) / x + 2.25;
    //*/

    /*
     * piecewise-defined functions
     */

    /*/ continuous function (polynoms)
    specific_point = 2;
    x0_init = 1.5;
    if (x < specific_point) {
        return x + 1;
    } else {
        return -Math.pow((x - specific_point - 0.5), 2) + 3.25;
    }
    //*/

    /*/ continuous function (polynoms)
    specific_point = 2.5;
    x0_init = 1.5;
    if (x < specific_point) {
        return 1.5;
    } else {
        return Math.pow(x - specific_point, 2) + 1.5;
    }
    //*/

    // discontinuous function (polynoms)
    specific_point = 3.25;
    x0_init = 3.25;
    if (x < specific_point) {
        return 0.2 * x * x;
    } else {
        return x - 0.5;
    }
    //*/

    /*/ continuous function (polynoms)
    specific_point = Math.PI;
    x0_init = 2;
    if (x < specific_point) {
        return Math.sin(3 * x) / x + 2;
    } else {
        return -x + 2 + Math.PI;
    }
    //*/


};

// graph of f
var graph_f = board.create('functiongraph', [term_f, 0.25, 4.1], {
    dash: 0,
    layer: 8,
    strokeColor: '#4080aa',
    strokeWidth: 2
});

// piecewise-defined discontinuous function
if (Math.abs(term_f(specific_point - global_epsilon) - term_f(specific_point)) > global_epsilon) {
    // point (specific_point-0;f(specific_point-0))
    var point_specific_point_minus_global_epsilon_fspecific_point_minus_global_epsilon = board.create('point', [specific_point - global_epsilon, term_f(specific_point - global_epsilon)], {
        fillColor: '#ffffff',
        name: '',
        size: 1,
        strokeColor: '#4080aa',
        strokeWidth: 2
    });

    // point (specific_point;f(specific_point))
    var point_specific_point_fspecific_point = board.create('point', [specific_point, term_f(specific_point)], {
        fillColor: '#4080aa',
        name: '',
        size: 1,
        strokeColor: '#4080aa',
        strokeWidth: 2
    });

    // dashed line (specific_point;0) - (specific_point;max(f(specific_point),f(specific_point-0)))
    var line_specific_point_0_specific_point_fmax_specific_point_or_specific_point_minus_0 = board.create('line',[[specific_point,0],[specific_point,Math.max(term_f(specific_point),term_f(specific_point - global_epsilon))]],{
        dash: 1,
        name:'',
        straightFirst: false,
        straightLast: false,
        strokeColor: '#4080aa',
        strokeWidth: 1
    });
}

// highlight function
highlightElement(graph_f, "graph", "highlightDarkBlue");

/*
 * x0 and f(x0)
 */

// coordonate for parallel line to x-axis
var cx = -0.5;

// start x0
var x0_start = 0.5;

// end x0
var x0_end = 4;

// line parallel to x-axis for x0 glider
var line_parallel_x_axis = board.create('line', [[x0_start, cx], [x0_end, cx]], {
    straightFirst: false,
    straightLast: false,
    visible: false
});

// x0 glider (not on x-axis for better visibility)
var glider_x0_0 = board.create('glider', [x0_init, 0, line_parallel_x_axis], {
    fillColor: '#ff00ff',
    label: {
        offset: [-5, -15]
    },
    name: '\\(x_0\\)',
    size: 2,
    strokeColor: '#000000',
    strokeWidth: 1
});

// highlight x0
highlightElement(glider_x0_0, 'x0', 'highlightMagenta');

// point (x0;f(x0))
var point_x0_fx0 = board.create('point', [
    function () {
        return glider_x0_0.X();
    },
    function () {
        return term_f(glider_x0_0.X());
    }], {
    fillColor: '#000000',
    name: '',
    size: 2,
    strokeWidth: 0
});

// point (0;f(x))
var point_0_fx0 = board.create('point', [0,
    function () {
        return term_f(glider_x0_0.X());
    }], {
    fillColor: '#000000',
    /* label not display because of epsilon
    label: {
        offset: [-45, 0]
    },
    name: '\\(f(x_0)\\)',
    */
    name: '',
    size: 2,
    strokeWidth: 0
});

// dashed line (x0;0) - (x0;f(x0))
var line_x0_0_x0_fx0 = board.create('line', [glider_x0_0, point_x0_fx0], {
    dash: 2,
    straightFirst: false,
    straightLast: false,
    strokeColor: '#000000',
    strokeWidth: 1,
});

// point (x0;0) on x-axis (refers to glider_x0_0)
var point_x0_0 = board.create('intersection', [x_axis, line_x0_0_x0_fx0], {
    fillColor: '#000000',
    label: {
        offset: [-20, -35]
    },
    name: '',
    size: 1,
    strokeWidth: 0
});

// dashed line (x0;f(x0)) - (0;f(x0))
var line_x0_fx0_0_fx0 = board.create('line', [point_x0_fx0, point_0_fx0], {
    dash: 2,
    straightFirst: false,
    straightLast: false,
    strokeColor: '#000000',
    strokeWidth: 1,
});

/*
 * epsilon
 */

// coordonate for parallel line to y-axis
var cx = -1.1;

// point (cx;f(x0))
var point_cx_fx0 = board.create('point', [function () {
    return point_0_fx0.X() + cx;

}, function () {
    return point_0_fx0.Y();
}], {
    fillColor: '#000000',
    label: {
        offset: [-55, 0]
    },
    name: '\\(f(x_0)\\)',
    size: 2,
    strokeWidth: 0
});

// point (cx,f(x0)+1)
var point_cx_fx01 = board.create('point', [function () {
    return point_cx_fx0.X();

}, function () {
    return point_cx_fx0.Y() + 1;
}], {
    visible: false
});

// dashed line (0;f(x0)) - (cx;f(x0))
var line_0_fx0_cx_fx0 = board.create('line', [point_0_fx0, point_cx_fx0], {
    dash: 2,
    straightFirst: false,
    straightLast: false,
    strokeColor: '#000000',
    strokeWidth: 1
});

// line (cx;f(x0)) - (cx,f(x0)+1) for epsilon glider
var line_cx_fx0_cx_fx01 = board.create('line', [point_cx_fx0, point_cx_fx01], {
    straightFirst: false,
    visible: false
});

// epsilon
var epsilon = 1;

// epsilon glider
var glider_cx_fx0_espilon = board.create('glider', [0, (function () {
    return point_0_fx0.Y() + epsilon;
})(), line_cx_fx0_cx_fx01], {
    fillColor: '#00dd66',
    label: {
        offset: [-55, 20]
    },
    name: '\\(f(x_0)+\\epsilon\\)',
    size: 2,
    strokeColor: '#000000',
    strokeWidth: 1
});

// highlight epsilon point
highlightElement(glider_cx_fx0_espilon, "epsilon", "highlightGreen");

// epsilon as line length
var line_cx_fx0_cx_fx0_epsilon = board.create('line', [point_cx_fx0, glider_cx_fx0_espilon], {
    straightFirst: false,
    straightLast: false,
    strokeColor: '#00dd66',
    strokeWidth: 3
});

// highlight epsilon line
highlightElement(line_cx_fx0_cx_fx0_epsilon, "epsilon", "highlightGreen");

// point for epsilon label
var point_label_epsilon = board.create('midpoint', [point_cx_fx0, glider_cx_fx0_espilon], {
    label: {
        offset: [5, 1]
    },
    name: '\\(\\epsilon\\)',
    size: 0
});

// point (cx;f(x0)-epsilon)
var point_cx_fx0_minus_epsilon = board.create('mirrorpoint', [glider_cx_fx0_espilon, point_cx_fx0], {
    fillColor: '#000000',
    label: {
        offset: [-55, -20]
    },
    name: '\\(f(x_0)-\\epsilon\\)',
    size: 2,
    strokeWidth: 0
});

// dotted line (cx;f(x0)) - (cx;f(x0)-epsilon)
var line_cx_fx0_cx_fx0_minus_epsilon = board.create('line', [point_cx_fx0, point_cx_fx0_minus_epsilon], {
    dash: 1,
    straightFirst: false,
    straightLast: false,
    strokeColor: '#00dd66'
});

// point (0,f(x0)+epsilon)
var point_0_fx0_epsilon = board.create('point', [0,
    function () {
        return glider_cx_fx0_espilon.Y();
    }], {
    fillColor: '#000000',
    name: '',
    size: 1,
    strokeWidth: 0
});

// point (0,f(x0)-epsilon)
var point_0_fx0_minus_epsilon = board.create('point', [0,
    function () {
        return point_cx_fx0_minus_epsilon.Y();
    }], {
    fillColor: '#000000',
    name: '',
    size: 1,
    strokeWidth: 0
});

// line (cx;f(x0)+epsilon) - (0;f(x0)+epsilon)
var line_cx_fx0_epsilon_0_fx0_epsilon = board.create('line', [glider_cx_fx0_espilon, point_0_fx0_epsilon], {
    dash: 1,
    straightFirst: false,
    straightLast: true,
    strokeColor: '#cccccc'
});

// line (cx;f(x0)-epsilon) - (0;f(x0)-epsilon)
var line_cx_fx0_minus_epsilon_0_fx0_minus_epsilon = board.create('line', [point_cx_fx0_minus_epsilon, point_0_fx0_minus_epsilon], {
    dash: 1,
    straightFirst: false,
    straightLast: true,
    strokeColor: '#cccccc'
});

/*
 * delta
 */

// coordonate for parallel line to x-axis
var cy = -1.25;

// point (x0;cy)
var point_x0_cy = board.create('point', [function () {
    return glider_x0_0.X();
}, cy], {
    fillColor: '#000000',
    name: '',
    size: 2,
    strokeWidth: 0
});

// point (x0+1;cy)
var point_x01_cy = board.create('point', [function () {
    return glider_x0_0.X() + 1;

}, cy], {
    visible: false
});

// line (x0;cy) - (x0+1,cy) for delta glider
var line_x0_cy_x01_cy = board.create('line', [point_x0_cy, point_x01_cy], {
    straightFirst: false,
    visible: false
});

// delta
var delta = 0.75;

// delta glider
var glider_x0_delta_cy = board.create('glider', [(function () {
    return point_x0_0.X() + delta;
})(), cy, line_x0_cy_x01_cy], {
    fillColor: '#ffaa33',
    label: {
        offset: [10, -10]
    },
    name: '\\(x_0+\\delta\\)',
    size: 2,
    strokeColor: '#000000',
    strokeWidth: 1
});

// highlight delta point
highlightElement(glider_x0_delta_cy, "delta", "highlightOrange");

// delta as line length
var line_x0_cy_x0_delta_cy = board.create('line', [point_x0_cy, glider_x0_delta_cy], {
    straightFirst: false,
    straightLast: false,
    strokeColor: '#ffaa33',
    strokeWidth: 3
});

// highlight delta line
highlightElement(line_x0_cy_x0_delta_cy, "delta", "highlightOrange");

// point (x0-delta;cy)
var point_x0_minus_delta_cy = board.create('mirrorpoint', [glider_x0_delta_cy, point_x0_cy], {
    fillColor: '#000000',
    label: {
        offset: [-50, -10]
    },
    name: '\\(x_0-\\delta\\)',
    size: 2,
    strokeWidth: 0
});

// dotted line (x0;cy) - (x0-delta;cy)
var line_x0_cy_x0_minus_delta_cy = board.create('line', [point_x0_cy, point_x0_minus_delta_cy], {
    dash: 1,
    straightFirst: false,
    straightLast: false,
    strokeColor: '#ffaa33'
});

// point for delta label
var point_label_delta = board.create('midpoint', [point_x0_cy, glider_x0_delta_cy], {
    label: {
        offset: [-2, 12]
    },
    name: '\\(\\delta\\)',
    size: 0
});

// point (x0+delta;0)
var point_x0_delta_0 = board.create('point', [
    function () {
        return glider_x0_delta_cy.X();
    }, 0], {
    fillColor: '#000000',
    label: {
        offset: [-20, -35]
    },
    name: '',
    size: 1,
    strokeWidth: 0
});

// point (x0-delta;0)
var point_x0_minus_delta_0 = board.create('point', [
    function () {
        return point_x0_minus_delta_cy.X();
    }, 0], {
    fillColor: '#000000',
    label: {
        offset: [-20, -35]
    },
    name: '',
    size: 1,
    strokeWidth: 0
});

// end point y for vertical dotted line
var cym = 4.75;

// point (x0+delta;cym)
var point_x0_delta_cym = board.create('point', [
    function () {
        return glider_x0_delta_cy.X();
    }, cym], {
    visible: false
});

// point (x0-delta;cym)
var point_x0_minus_delta_cym = board.create('point', [
    function () {
        return point_x0_minus_delta_cy.X();
    }, cym], {
    visible: false
});

// dotted line (x0+delta;cy) - (x0+delta;cym)
var line_x0_delta_cy_x0_delta_cym = board.create('line', [glider_x0_delta_cy, point_x0_delta_cym], {
    dash: 1,
    straightFirst: false,
    straightLast: false,
    strokeColor: '#cccccc'
});

// dotted line (x0-delta;cy) - (x0-delta;cym)
var line_x0_minus_delta_cy_x0_minus_delta_cym = board.create('line', [point_x0_minus_delta_cy, point_x0_minus_delta_cym], {
    dash: 1,
    straightFirst: false,
    straightLast: false,
    strokeColor: '#cccccc'
});

/*
 * intersections delta an epsilon lines
 */

// point (x0+delta;f(x0)+epsilon)
var point_x0_delta_fx0_epsilon = board.create('intersection', [line_x0_delta_cy_x0_delta_cym, line_cx_fx0_epsilon_0_fx0_epsilon, 0], {
    fillColor: '#000000',
    name: '',
    size: 1,
    strokeWidth: 0
});

// point (x0-delta;f(x0)+epsilon)
var point_x0_minus_delta_fx0_epsilon = board.create('intersection', [line_x0_minus_delta_cy_x0_minus_delta_cym, line_cx_fx0_epsilon_0_fx0_epsilon, 0], {
    fillColor: '#000000',
    name: '',
    size: 1,
    strokeWidth: 0
});
// point (x0+delta;f(x0)-epsilon)
var point_x0_delta_fx0_epsilon = board.create('intersection', [line_x0_delta_cy_x0_delta_cym, line_cx_fx0_minus_epsilon_0_fx0_minus_epsilon, 0], {
    fillColor: '#000000',
    name: '',
    size: 1,
    strokeWidth: 0
});
// point (x0+delta;f(x0)+epsilon)
var point_x0_delta_fx0_epsilon = board.create('intersection', [line_x0_minus_delta_cy_x0_minus_delta_cym, line_cx_fx0_minus_epsilon_0_fx0_minus_epsilon, 0], {
    fillColor: '#000000',
    name: '',
    size: 1,
    strokeWidth: 0
});

/*
 * x
 */

// line (x0-delta;0) - (x0+delta;0) for x glider
var line_x0_minus_delta_0_x0_delta_0 = board.create('line', [point_x0_minus_delta_0, point_x0_delta_0], {
    straightFirst: false,
    straightLast: false,
    visible: false
});

// x glider
var glider_x_0 = board.create('glider', [glider_x0_0.X() + delta / 2, 0, line_x0_minus_delta_0_x0_delta_0], {
    fillColor: '#3366ff',
    label: {
        offset: [-4, -15]
    },
    name: '\\(x\\)',
    size: 2,
    strokeColor: '#000000',
    strokeWidth: 1
});

// highlight x
highlightElement(glider_x_0, 'xed', 'highlightBlue');

// point (x;f(x))
var point_x_fx = board.create('point', [
    function () {
        return glider_x_0.X();
    },
    function () {
        return term_f(glider_x_0.X());
    }], {
    fillColor: '#000000',
    name: '',
    size: 2,
    strokeWidth: 0
});

// point (0;f(x))
var point_0_fx = board.create('point', [0,
    function () {
        return term_f(glider_x_0.X());
    }], {
    fillColor: '#000000',
    label: {
        offset: [-30, 0]
    },
    name: '\\(f(x)\\)',
    size: 2,
    strokeWidth: 0
});

// dotted line (x;0) -(x,f(x))
var line_x_0_x_fx = board.create('line', [glider_x_0, point_x_fx], {
    dash: 2,
    straightFirst: false,
    straightLast: false,
    strokeColor: '#000000',
    strokeWidth: 1,
});

// dotted line (x;f(x)) - (0;f(x))
var line_x_fx_0_fx = board.create('line', [point_x_fx, point_0_fx], {
    dash: 2,
    straightFirst: false,
    straightLast: false,
    strokeColor: '#000000',
    strokeWidth: 1,
});

/*
 * line  for |x-x0|<delta
 */

// line (x0;0) - (x;0) for |x-x0|<delta
var line_x0_0_x_0 = board.create('line', [point_x0_0, glider_x_0], {
    straightFirst: false,
    straightLast: false,
    strokeColor: '#3366ff',
    strokeWidth: 3,
});

// highlight |x-x0|<delta
highlightElement(line_x0_0_x_0, 'xx0d', 'highlightBlue');

/*
 * line  for |f(x)-f(x0)|<epsilon
 */

// line (0;f(x)) - (0;f(x0)) for |f(x)-f(x0)|<epsilon with epsilon-delta-condition
var line_0_fx_0_fx0 = board.create('line', [point_0_fx0, point_0_fx], {
    straightFirst: false,
    straightLast: false,
    strokeColor: function () {
        if (line_cx_fx0_cx_fx0_epsilon.L() > point_0_fx0.Dist(point_0_fx))
            return '#993333';
        else
            return '#ff00ff';
    },
    strokeWidth: 3,
});

// highlight |f(x)-f(x0)|<epsilon
highlightElement(line_0_fx_0_fx0, 'fxfx0', 'highlightDarkRed');

// area with epsilon-delta-condition
var polygon_delta_epsilon = board.create('polygon', [
    point_x0_0,
    glider_x_0,
    point_x_fx,
    point_0_fx,
    point_0_fx0,
    point_x0_fx0
], {
    borders: {
        visible: false
    },
    fillColor: function () {
        if (line_cx_fx0_cx_fx0_epsilon.L() > point_0_fx0.Dist(point_0_fx))
            return '#dddddd';
        else
            return '#ff00ff';
    },
    highlightFillColor: '#dddddd'
});

/*
 * alert epsilon-delta-condition
 */

function highlightElement(el, id, cl) {

}

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.