// Define the id of your board in BOARDID
const board = JXG.JSXGraph.initBoard(BOARDID, {
axis: true,
boundingbox: [-8, 6, 8, -2]
});
var n = board.create('slider', [
[1, 3],
[6, 3],
[1, 10, 70]
], {
name: 'n',
snapWidth: 1
});
// Fixed function term
var f = function(x) {
return 0.2 * x * x + 2.0 * Math.sin(x);
}
var plot = board.create('functiongraph', [f], {
strokeWidth: 1,
strokeOpacity: 0.3
});
// Plot dashed horizontal and vertical lines
var start = -3.0;
var end = 5.0;
var sc = board.create('curve', [
[0],
[0]
], {
dash: 1,
strokeWidth: 1,
strokeColor: 'red'
});
board.updateDataArray = function() {
var i;
var m = n.Value();
var d = (end - start) / m;
this.dataX = [];
this.dataY = [];
this.dataX[0] = start;
this.dataY[0] = f(start);
for (i = 1; i <= m; i++) {
this.dataX.push(start + i * d);
this.dataY.push(f(start + (i - 1) * d));
this.dataX.push(start + i * d);
this.dataY.push(f(start + i * d));
}
}
// Plot secants
var approx = board.create('curve', [
[0],
[0]
], {
strokeColor: 'red'
});
approx.updateDataArray = function() {
var i;
var m = n.Value();
var d = (end - start) / m;
this.dataX = [];
this.dataY = [];
this.dataX[0] = start;
this.dataY[0] = f(start);
for (i = 1; i <= m; i++) {
this.dataX.push(start + i * d);
this.dataY.push(f(start + i * d));
}
}
board.create('text', [-7, 1, function() {
var i, s, f0, f1;
var m = n.Value();
var d = (end - start) / m;
s = 0.0;
f0 = f(start);
for (i = 1; i <= m; i++) {
f1 = f(start + i * d);
s += Math.sqrt(d * d + (f1 - f0) * (f1 - f0));
f0 = f1;
}
return 'Length = ' + s.toFixed(4);
}], {
fontSize: 24
});
board.update();
This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License.
Please note that you have to mention The Center of Mobile Learning with Digital Technology in the credits.
/*
This example is licensed under a
Creative Commons Attribution ShareAlike 4.0 International License.
https://creativecommons.org/licenses/by-sa/4.0/
Please note that you have to mention
The Center of Mobile Learning with Digital Technology
in the credits.
*/
const BOARDID = 'your_div_id'; // Insert your id here!
const board = JXG.JSXGraph.initBoard(BOARDID, {
axis: true,
boundingbox: [-8, 6, 8, -2]
});
var n = board.create('slider', [
[1, 3],
[6, 3],
[1, 10, 70]
], {
name: 'n',
snapWidth: 1
});
// Fixed function term
var f = function(x) {
return 0.2 * x * x + 2.0 * Math.sin(x);
}
var plot = board.create('functiongraph', [f], {
strokeWidth: 1,
strokeOpacity: 0.3
});
// Plot dashed horizontal and vertical lines
var start = -3.0;
var end = 5.0;
var sc = board.create('curve', [
[0],
[0]
], {
dash: 1,
strokeWidth: 1,
strokeColor: 'red'
});
board.updateDataArray = function() {
var i;
var m = n.Value();
var d = (end - start) / m;
this.dataX = [];
this.dataY = [];
this.dataX[0] = start;
this.dataY[0] = f(start);
for (i = 1; i <= m; i++) {
this.dataX.push(start + i * d);
this.dataY.push(f(start + (i - 1) * d));
this.dataX.push(start + i * d);
this.dataY.push(f(start + i * d));
}
}
// Plot secants
var approx = board.create('curve', [
[0],
[0]
], {
strokeColor: 'red'
});
approx.updateDataArray = function() {
var i;
var m = n.Value();
var d = (end - start) / m;
this.dataX = [];
this.dataY = [];
this.dataX[0] = start;
this.dataY[0] = f(start);
for (i = 1; i <= m; i++) {
this.dataX.push(start + i * d);
this.dataY.push(f(start + i * d));
}
}
board.create('text', [-7, 1, function() {
var i, s, f0, f1;
var m = n.Value();
var d = (end - start) / m;
s = 0.0;
f0 = f(start);
for (i = 1; i <= m; i++) {
f1 = f(start + i * d);
s += Math.sqrt(d * d + (f1 - f0) * (f1 - f0));
f0 = f1;
}
return 'Length = ' + s.toFixed(4);
}], {
fontSize: 24
});
board.update();
<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
<div id="board-0" class="jxgbox" style="aspect-ratio: 2 / 1; width: 100%;" data-ar="2 / 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 that you have to mention
The Center of Mobile Learning with Digital Technology
in the credits.
*/
const BOARDID = 'board-0';
const board = JXG.JSXGraph.initBoard(BOARDID, {
axis: true,
boundingbox: [-8, 6, 8, -2]
});
var n = board.create('slider', [
[1, 3],
[6, 3],
[1, 10, 70]
], {
name: 'n',
snapWidth: 1
});
// Fixed function term
var f = function(x) {
return 0.2 * x * x + 2.0 * Math.sin(x);
}
var plot = board.create('functiongraph', [f], {
strokeWidth: 1,
strokeOpacity: 0.3
});
// Plot dashed horizontal and vertical lines
var start = -3.0;
var end = 5.0;
var sc = board.create('curve', [
[0],
[0]
], {
dash: 1,
strokeWidth: 1,
strokeColor: 'red'
});
board.updateDataArray = function() {
var i;
var m = n.Value();
var d = (end - start) / m;
this.dataX = [];
this.dataY = [];
this.dataX[0] = start;
this.dataY[0] = f(start);
for (i = 1; i <= m; i++) {
this.dataX.push(start + i * d);
this.dataY.push(f(start + (i - 1) * d));
this.dataX.push(start + i * d);
this.dataY.push(f(start + i * d));
}
}
// Plot secants
var approx = board.create('curve', [
[0],
[0]
], {
strokeColor: 'red'
});
approx.updateDataArray = function() {
var i;
var m = n.Value();
var d = (end - start) / m;
this.dataX = [];
this.dataY = [];
this.dataX[0] = start;
this.dataY[0] = f(start);
for (i = 1; i <= m; i++) {
this.dataX.push(start + i * d);
this.dataY.push(f(start + i * d));
}
}
board.create('text', [-7, 1, function() {
var i, s, f0, f1;
var m = n.Value();
var d = (end - start) / m;
s = 0.0;
f0 = f(start);
for (i = 1; i <= m; i++) {
f1 = f(start + i * d);
s += Math.sqrt(d * d + (f1 - f0) * (f1 - f0));
f0 = f1;
}
return 'Length = ' + s.toFixed(4);
}], {
fontSize: 24
});
board.update();
</script>
<jsxgraph width="100%" aspect-ratio="2 / 1" title="Approximate length of curve" description="This construction was copied from JSXGraph examples database: http://jsxgraph.uni-bayreuth.de/share/" useGlobalJS="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 that you have to mention
The Center of Mobile Learning with Digital Technology
in the credits.
*/
const board = JXG.JSXGraph.initBoard(BOARDID, {
axis: true,
boundingbox: [-8, 6, 8, -2]
});
var n = board.create('slider', [
[1, 3],
[6, 3],
[1, 10, 70]
], {
name: 'n',
snapWidth: 1
});
// Fixed function term
var f = function(x) {
return 0.2 * x * x + 2.0 * Math.sin(x);
}
var plot = board.create('functiongraph', [f], {
strokeWidth: 1,
strokeOpacity: 0.3
});
// Plot dashed horizontal and vertical lines
var start = -3.0;
var end = 5.0;
var sc = board.create('curve', [
[0],
[0]
], {
dash: 1,
strokeWidth: 1,
strokeColor: 'red'
});
board.updateDataArray = function() {
var i;
var m = n.Value();
var d = (end - start) / m;
this.dataX = [];
this.dataY = [];
this.dataX[0] = start;
this.dataY[0] = f(start);
for (i = 1; i <= m; i++) {
this.dataX.push(start + i * d);
this.dataY.push(f(start + (i - 1) * d));
this.dataX.push(start + i * d);
this.dataY.push(f(start + i * d));
}
}
// Plot secants
var approx = board.create('curve', [
[0],
[0]
], {
strokeColor: 'red'
});
approx.updateDataArray = function() {
var i;
var m = n.Value();
var d = (end - start) / m;
this.dataX = [];
this.dataY = [];
this.dataX[0] = start;
this.dataY[0] = f(start);
for (i = 1; i <= m; i++) {
this.dataX.push(start + i * d);
this.dataY.push(f(start + i * d));
}
}
board.create('text', [-7, 1, function() {
var i, s, f0, f1;
var m = n.Value();
var d = (end - start) / m;
s = 0.0;
f0 = f(start);
for (i = 1; i <= m; i++) {
f1 = f(start + i * d);
s += Math.sqrt(d * d + (f1 - f0) * (f1 - f0));
f0 = f1;
}
return 'Length = ' + s.toFixed(4);
}], {
fontSize: 24
});
board.update();
</jsxgraph>
/*
This example is licensed under a
Creative Commons Attribution ShareAlike 4.0 International License.
https://creativecommons.org/licenses/by-sa/4.0/
Please note that you have to mention
The Center of Mobile Learning with Digital Technology
in the credits.
*/
const BOARDID = 'your_div_id'; // Insert your id here!
const board = JXG.JSXGraph.initBoard(BOARDID, {
axis: true,
boundingbox: [-8, 6, 8, -2]
});
var n = board.create('slider', [
[1, 3],
[6, 3],
[1, 10, 70]
], {
name: 'n',
snapWidth: 1
});
// Fixed function term
var f = function(x) {
return 0.2 * x * x + 2.0 * Math.sin(x);
}
var plot = board.create('functiongraph', [f], {
strokeWidth: 1,
strokeOpacity: 0.3
});
// Plot dashed horizontal and vertical lines
var start = -3.0;
var end = 5.0;
var sc = board.create('curve', [
[0],
[0]
], {
dash: 1,
strokeWidth: 1,
strokeColor: 'red'
});
board.updateDataArray = function() {
var i;
var m = n.Value();
var d = (end - start) / m;
this.dataX = [];
this.dataY = [];
this.dataX[0] = start;
this.dataY[0] = f(start);
for (i = 1; i <= m; i++) {
this.dataX.push(start + i * d);
this.dataY.push(f(start + (i - 1) * d));
this.dataX.push(start + i * d);
this.dataY.push(f(start + i * d));
}
}
// Plot secants
var approx = board.create('curve', [
[0],
[0]
], {
strokeColor: 'red'
});
approx.updateDataArray = function() {
var i;
var m = n.Value();
var d = (end - start) / m;
this.dataX = [];
this.dataY = [];
this.dataX[0] = start;
this.dataY[0] = f(start);
for (i = 1; i <= m; i++) {
this.dataX.push(start + i * d);
this.dataY.push(f(start + i * d));
}
}
board.create('text', [-7, 1, function() {
var i, s, f0, f1;
var m = n.Value();
var d = (end - start) / m;
s = 0.0;
f0 = f(start);
for (i = 1; i <= m; i++) {
f1 = f(start + i * d);
s += Math.sqrt(d * d + (f1 - f0) * (f1 - f0));
f0 = f1;
}
return 'Length = ' + s.toFixed(4);
}], {
fontSize: 24
});
board.update();
<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
<div id="board-0" class="jxgbox" style="aspect-ratio: 2 / 1; width: 100%;" data-ar="2 / 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 that you have to mention
The Center of Mobile Learning with Digital Technology
in the credits.
*/
const BOARDID = 'board-0';
const board = JXG.JSXGraph.initBoard(BOARDID, {
axis: true,
boundingbox: [-8, 6, 8, -2]
});
var n = board.create('slider', [
[1, 3],
[6, 3],
[1, 10, 70]
], {
name: 'n',
snapWidth: 1
});
// Fixed function term
var f = function(x) {
return 0.2 * x * x + 2.0 * Math.sin(x);
}
var plot = board.create('functiongraph', [f], {
strokeWidth: 1,
strokeOpacity: 0.3
});
// Plot dashed horizontal and vertical lines
var start = -3.0;
var end = 5.0;
var sc = board.create('curve', [
[0],
[0]
], {
dash: 1,
strokeWidth: 1,
strokeColor: 'red'
});
board.updateDataArray = function() {
var i;
var m = n.Value();
var d = (end - start) / m;
this.dataX = [];
this.dataY = [];
this.dataX[0] = start;
this.dataY[0] = f(start);
for (i = 1; i <= m; i++) {
this.dataX.push(start + i * d);
this.dataY.push(f(start + (i - 1) * d));
this.dataX.push(start + i * d);
this.dataY.push(f(start + i * d));
}
}
// Plot secants
var approx = board.create('curve', [
[0],
[0]
], {
strokeColor: 'red'
});
approx.updateDataArray = function() {
var i;
var m = n.Value();
var d = (end - start) / m;
this.dataX = [];
this.dataY = [];
this.dataX[0] = start;
this.dataY[0] = f(start);
for (i = 1; i <= m; i++) {
this.dataX.push(start + i * d);
this.dataY.push(f(start + i * d));
}
}
board.create('text', [-7, 1, function() {
var i, s, f0, f1;
var m = n.Value();
var d = (end - start) / m;
s = 0.0;
f0 = f(start);
for (i = 1; i <= m; i++) {
f1 = f(start + i * d);
s += Math.sqrt(d * d + (f1 - f0) * (f1 - f0));
f0 = f1;
}
return 'Length = ' + s.toFixed(4);
}], {
fontSize: 24
});
board.update();
</script>
<jsxgraph width="100%" aspect-ratio="2 / 1" title="Approximate length of curve" description="This construction was copied from JSXGraph examples database: http://jsxgraph.uni-bayreuth.de/share/" useGlobalJS="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 that you have to mention
The Center of Mobile Learning with Digital Technology
in the credits.
*/
const board = JXG.JSXGraph.initBoard(BOARDID, {
axis: true,
boundingbox: [-8, 6, 8, -2]
});
var n = board.create('slider', [
[1, 3],
[6, 3],
[1, 10, 70]
], {
name: 'n',
snapWidth: 1
});
// Fixed function term
var f = function(x) {
return 0.2 * x * x + 2.0 * Math.sin(x);
}
var plot = board.create('functiongraph', [f], {
strokeWidth: 1,
strokeOpacity: 0.3
});
// Plot dashed horizontal and vertical lines
var start = -3.0;
var end = 5.0;
var sc = board.create('curve', [
[0],
[0]
], {
dash: 1,
strokeWidth: 1,
strokeColor: 'red'
});
board.updateDataArray = function() {
var i;
var m = n.Value();
var d = (end - start) / m;
this.dataX = [];
this.dataY = [];
this.dataX[0] = start;
this.dataY[0] = f(start);
for (i = 1; i <= m; i++) {
this.dataX.push(start + i * d);
this.dataY.push(f(start + (i - 1) * d));
this.dataX.push(start + i * d);
this.dataY.push(f(start + i * d));
}
}
// Plot secants
var approx = board.create('curve', [
[0],
[0]
], {
strokeColor: 'red'
});
approx.updateDataArray = function() {
var i;
var m = n.Value();
var d = (end - start) / m;
this.dataX = [];
this.dataY = [];
this.dataX[0] = start;
this.dataY[0] = f(start);
for (i = 1; i <= m; i++) {
this.dataX.push(start + i * d);
this.dataY.push(f(start + i * d));
}
}
board.create('text', [-7, 1, function() {
var i, s, f0, f1;
var m = n.Value();
var d = (end - start) / m;
s = 0.0;
f0 = f(start);
for (i = 1; i <= m; i++) {
f1 = f(start + i * d);
s += Math.sqrt(d * d + (f1 - f0) * (f1 - f0));
f0 = f1;
}
return 'Length = ' + s.toFixed(4);
}], {
fontSize: 24
});
board.update();
</jsxgraph>