Vectornaut/jsxgraph-3d-workshop
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Put each script block next to the associated board div

Browse source
This commit is contained in:
Aaron Fenyes 2024-10-21 16:31:15 -07:00
parent 7a79ed1de0
commit 883e660e7c
6 changed files with 106 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

50
templates/glider-sampler.html
View file

@ -10,28 +10,12 @@
<h1>3D glider sampler</h1>
<!-- line glider -->
<h2>Line glider</h2>
<p>The large point is a glider on the line segment defined by the two small points. This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/line3d_glider.html"><code>Line3D</code> glider example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.</p>
<div id="line-glider-board" class="jxgbox" style="width:600px; height:600px"></div>
<h2>Intersection line glider</h2>
<p>The large point is a glider on the line where the two planes intersect.</p>
<div id="intersection-line-glider-board" class="jxgbox" style="width:600px; height:600px"></div>
<h2>Circle glider</h2>
<p>The point is a glider on the circle. This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/circle3d_glider.html"><code>Circle3D</code> glider example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.</p>
<p>Right now, the glider gets caught on the point where the circle starts and ends. If you can overcome this limitation, try contributing some code!</p>
<div id="circle-glider-board" class="jxgbox" style="width:600px; height:600px"></div>
<h2>Curve glider</h2>
<p>The point is a glider on the curve. This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/curve3d_glider.html"><code>Curve3D</code> glider example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.</p>
<div id="curve-glider-board" class="jxgbox" style="width:600px; height:600px"></div>
<h2>Parametric surface glider</h2>
<p>The point is a glider on the parametric surface. This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/parametricsurface3d_glider.html"><code>ParametricSurface3D</code> glider example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.</p>
<div id="surface-glider-board" class="jxgbox" style="width:600px; height:600px"></div>
<!-- line glider -->
<script type="text/javascript">
// to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block
@ -96,12 +80,17 @@
fillColor: 'white',
gradientSecondColor: '#fe00a0',
highlightStrokeColor: '#900060'
}
}
);
}
</script>
<!-- intersection line glider -->
<h2>Intersection line glider</h2>
<p>The large point is a glider on the line where the two planes intersect.</p>
<div id="intersection-line-glider-board" class="jxgbox" style="width:600px; height:600px"></div>
<script type="text/javascript">
// to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block
@ -138,7 +127,7 @@
fillColor: 'white',
gradientSecondColor: '#5000a0',
highlightStrokeColor: '#300060'
}
}
);
let planeHoriz = view.create(
'plane3d',
@ -194,6 +183,12 @@
</script>
<!-- circle glider -->
<h2>Circle glider</h2>
<p>The point is a glider on the circle. This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/circle3d_glider.html"><code>Circle3D</code> glider example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.</p>
<p>Right now, the glider gets caught on the point where the circle starts and ends. If you can overcome this limitation, try contributing some code!</p>
<div id="circle-glider-board" class="jxgbox" style="width:600px; height:600px"></div>
<script type="text/javascript">
// to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block
@ -237,12 +232,17 @@
fillColor: 'white',
gradientSecondColor: '#fe00a0',
highlightStrokeColor: '#900060'
}
}
);
}
</script>
<!-- curve glider -->
<h2>Curve glider</h2>
<p>The point is a glider on the curve. This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/curve3d_glider.html"><code>Curve3D</code> glider example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.</p>
<div id="curve-glider-board" class="jxgbox" style="width:600px; height:600px"></div>
<script type="text/javascript">
// to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block
@ -291,12 +291,17 @@
fillColor: 'white',
gradientSecondColor: '#fe00a0',
highlightStrokeColor: '#900060'
}
}
);
}
</script>
<!-- parametric surface glider -->
<h2>Parametric surface glider</h2>
<p>The point is a glider on the parametric surface. This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/parametricsurface3d_glider.html"><code>ParametricSurface3D</code> glider example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.</p>
<div id="surface-glider-board" class="jxgbox" style="width:600px; height:600px"></div>
<script type="text/javascript">
// to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block
@ -354,5 +359,6 @@
);
}
</script>
</body>
</html>