<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>
<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>
// 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) { }
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.