From 883e660e7cad28d0a0937a1b0d969e3d3f3b4c20 Mon Sep 17 00:00:00 2001
From: Aaron Fenyes <aaron.fenyes@fareycircles.ooo>
Date: Mon, 21 Oct 2024 16:31:15 -0700
Subject: [PATCH] Put each script block next to the associated board div

---
 templates/circle-sampler.html       |  1 +
 templates/glider-sampler.html       | 50 +++++++++++----------
 templates/intersection-sampler.html | 26 ++++++-----
 templates/polygon-sampler.html      | 31 +++++++------
 templates/sphere-sampler.html       | 15 ++++---
 templates/view-demo.html            | 67 +++++++++++++++--------------
 6 files changed, 106 insertions(+), 84 deletions(-)

diff --git a/templates/circle-sampler.html b/templates/circle-sampler.html
index d0a5e12..958469e 100644
--- a/templates/circle-sampler.html
+++ b/templates/circle-sampler.html
@@ -72,5 +72,6 @@
         );
     }
 </script>
+
 </body>
 </html>
diff --git a/templates/glider-sampler.html b/templates/glider-sampler.html
index 868e79f..4b8d005 100644
--- a/templates/glider-sampler.html
+++ b/templates/glider-sampler.html
@@ -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>
diff --git a/templates/intersection-sampler.html b/templates/intersection-sampler.html
index f99022f..930c31b 100644
--- a/templates/intersection-sampler.html
+++ b/templates/intersection-sampler.html
@@ -10,19 +10,12 @@
 
 <h1>3D intersection sampler</h1>
 
+<!-- plane-plane -->
+
 <h2>Plane–plane</h2>
 <p>This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/intersection_plane_plane.html">plane–plane intersection 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="plane-plane-board" class="jxgbox" style="width:600px; height:600px"></div>
 
-<h2>Plane–sphere</h2>
-<p>This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/intersection_plane_sphere.html">plane–sphere intersection 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="plane-sphere-board" class="jxgbox" style="width:600px; height:600px"></div>
-
-<h2>Sphere–sphere</h2>
-<p>This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/intersection_sphere_sphere.html">sphere–sphere intersection 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="sphere-sphere-board" class="jxgbox" style="width:600px; height:600px"></div>
-
-<!-- plane-plane -->
 <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
@@ -60,7 +53,7 @@
             fillColor: 'white',
             gradientSecondColor: '#5000a0',
             highlightStrokeColor: '#300060'
-       }
+        }
     );
     let planeHoriz = view.create(
         'plane3d',
@@ -101,6 +94,11 @@
 </script>
 
 <!-- plane-sphere -->
+
+<h2>Plane–sphere</h2>
+<p>This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/intersection_plane_sphere.html">plane–sphere intersection 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="plane-sphere-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
@@ -165,7 +163,7 @@
             fillColor: 'white',
             gradientSecondColor: '#a00050',
             highlightStrokeColor: '#600030'
-       }
+        }
     );
     let sphere = view.create(
     'sphere3d',
@@ -192,6 +190,11 @@
 </script>
 
 <!-- sphere-sphere -->
+
+<h2>Sphere–sphere</h2>
+<p>This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/intersection_sphere_sphere.html">sphere–sphere intersection 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="sphere-sphere-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
@@ -280,5 +283,6 @@
     );
 }
 </script>
+
 </body>
 </html>
diff --git a/templates/polygon-sampler.html b/templates/polygon-sampler.html
index b84fe09..3d224b1 100644
--- a/templates/polygon-sampler.html
+++ b/templates/polygon-sampler.html
@@ -10,24 +10,13 @@
 
 <h1>3D polygon sampler</h1>
 
+<!-- creating a polygon -->
+
 <h2>Creating a polygon</h2>
 <p>A polygon is created from a list of vertices. Each vertex is given either in coordinates or as a <a href="https://jsxgraph.org/docs/symbols/Point3D.html#constructor"><code>Point3D</code></a> element. The vertices that are created from coordinates are styled according to the <code>vertices</code> attribute. The edges of the polygon are styled according to the <code>borders</code> attribute.</p>
 <p>To make the layout of the vertices easier to see, I’ve set the view’s <code>depthOrderPoints</code> attribute to <code>true</code>.
 <div id="polygon-homog-board" class="jxgbox" style="width:600px; height:600px"></div>
 
-<h2>Mixing coordinates and <code>Point3D</code> elements</h2>
-<p>This example shows how you can mix coordinates and <a href="https://jsxgraph.org/docs/symbols/Point3D.html#constructor"><code>Point3D</code></a> elements in a polygon’s vertex list.</p>
-<div id="polygon-mixed-board" class="jxgbox" style="width:600px; height:600px"></div>
-
-<h2>Filling a polygon</h2>
-<p>You can set the fill and opacity of a 3D polygon just like you would with a 2D polygon. I recommend only filling polygons that are guaranteed to stay planar. In this example, the polygons are always planar because they’re triangles.</p>
-<div id="planar-fill-board" class="jxgbox" style="width:600px; height:600px"></div>
-
-<h2>The pitalls of filling a non-planar polygon</h2>
-<p>Make the polygon below non-planar by dragging its vertices. This will probably make the fill look really weird from certain angles.</p>
-<div id="non-planar-fill-board" class="jxgbox" style="width:600px; height:600px"></div>
-
-<!-- creating a polygon -->
 <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
@@ -130,6 +119,11 @@
 </script>
 
 <!-- mixing coordinates and Point3D elements -->
+
+<h2>Mixing coordinates and <code>Point3D</code> elements</h2>
+<p>This example shows how you can mix coordinates and <a href="https://jsxgraph.org/docs/symbols/Point3D.html#constructor"><code>Point3D</code></a> elements in a polygon’s vertex list.</p>
+<div id="polygon-mixed-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
@@ -223,6 +217,11 @@
 </script>
 
 <!-- filling a polygon -->
+
+<h2>Filling a polygon</h2>
+<p>You can set the fill and opacity of a 3D polygon just like you would with a 2D polygon. I recommend only filling polygons that are guaranteed to stay planar. In this example, the polygons are always planar because they’re triangles.</p>
+<div id="planar-fill-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
@@ -326,6 +325,11 @@
 </script>
 
 <!-- the pitfalls of filling a non-planar polygon -->
+
+<h2>The pitalls of filling a non-planar polygon</h2>
+<p>Make the polygon below non-planar by dragging its vertices. This will probably make the fill look really weird from certain angles.</p>
+<div id="non-planar-fill-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
@@ -400,5 +404,6 @@
     
 }
 </script>
+
 </body>
 </html>
diff --git a/templates/sphere-sampler.html b/templates/sphere-sampler.html
index 3d41541..1ddc916 100644
--- a/templates/sphere-sampler.html
+++ b/templates/sphere-sampler.html
@@ -10,6 +10,8 @@
 
 <h1>Sphere sampler</h1>
 
+<!-- creating spheres -->
+
 <h2>Creating spheres</h2>
 <p>
   Right now, there are two ways to create a <a href="https://jsxgraph.org/docs/symbols/Sphere3D.html#constructor"><code>Sphere3D</code></a>:
@@ -21,11 +23,6 @@
 </p>
 <div id="creating-spheres-board" class="jxgbox" style="width:600px; height:600px"></div>
 
-<h2>Styling spheres</h2>
-<p>Here are some styling options for spheres and the points that define them.</p>
-<div id="styling-spheres-board" class="jxgbox" style="width:600px; height:600px"></div>
-
-<!-- creating spheres -->
 <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
@@ -93,7 +90,12 @@
 }
 </script>
 
-<!-- styling demo -->
+<!-- styling spheres -->
+
+<h2>Styling spheres</h2>
+<p>Here are some styling options for spheres and the points that define them.</p>
+<div id="styling-spheres-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
@@ -223,5 +225,6 @@
     );
 }
 </script>
+
 </body>
 </html>
diff --git a/templates/view-demo.html b/templates/view-demo.html
index 053f7bb..a17669f 100644
--- a/templates/view-demo.html
+++ b/templates/view-demo.html
@@ -10,6 +10,8 @@
 
 <h1>View options demo</h1>
 
+<!-- central projection; depth ordering for points -->
+
 <h2>Central projection; depth ordering for points</h2>
 <p>
   This demo shows how the new <code>projection</code> and <code>depthOrderPoints</code> options of a <code>View3D</code> affect the view. Use the controls to:
@@ -32,38 +34,6 @@
 </div>
 <div id="proj-depth-board" class="jxgbox" style="width:600px; height:600px"></div>
 
-<h2>Virtual trackball; bank angle slider</h2>
-<p>
-  In the default orientation control mode, dragging the mouse changes the Tait-Bryan angles of the camera.
-  <ul>
-    <li>Dragging horizontally changes the azimuth.</li>
-    <li>Dragging vertically changes the elevation.</li>
-    <li>As of <a href="https://jsxgraph.org/wp/2024-06-28-release-of-version-1.9.2/">version 1.9.2</a>, doing a scroll gesture with the mouse button down changes the bank angle.</li>
-  </ul>
-  The Tait-Bryan angles can also be controlled with sliders, which are hidden by default. To show them, set the following attributes:
-  <ul>
-    <li><code>az: {slider: {visible: true}}</code></li>
-    <li><code>el: {slider: {visible: true}}</code></li>
-    <li><code>bank: {slider: {visible: true}}</code> (as of <a href="https://jsxgraph.org/wp/2024-06-28-release-of-version-1.9.2/">version 1.9.2</a>)</li>
-  </ul>
-</p>
-<p>
-  <a href="https://jsxgraph.org/wp/2024-06-28-release-of-version-1.9.2/">Version 1.9.2</a> introduces a new orientation control mode: the <em>virtual trackball</em>. In this mode, dragging from near the center of the board rolls the view along the drag direction, while dragging from near the edge of the board rotates the view in the plane of the board. These two motions transition smoothly into each other as the drag start position changes. To enable the virtual trackball, set the <code>trackball</code> attribute of the <code>View3D</code> to <code>{enabled: true}</code>.
-</p>
-<p>
-  This demo is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/trackball.html">virtual trackball example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.
-</p>
-</p>
-<div>
-    <label for="ori-ctl">Orientation control:</label>
-    <select id="ori-ctl">
-        <option value="angles">Tait–Bryan angles</option>
-        <option value="trackball">Virtual trackball</option>
-    </select>
-</div>
-<div id="trackball-board" class="jxgbox" style="width:600px; height:600px"></div>
-
-<!-- projection style; and depth ordering for points -->
 <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
@@ -181,6 +151,38 @@
 </script>
 
 <!-- virtual trackball; bank angle slider -->
+
+<h2>Virtual trackball; bank angle slider</h2>
+<p>
+  In the default orientation control mode, dragging the mouse changes the Tait-Bryan angles of the camera.
+  <ul>
+    <li>Dragging horizontally changes the azimuth.</li>
+    <li>Dragging vertically changes the elevation.</li>
+    <li>As of <a href="https://jsxgraph.org/wp/2024-06-28-release-of-version-1.9.2/">version 1.9.2</a>, doing a scroll gesture with the mouse button down changes the bank angle.</li>
+  </ul>
+  The Tait-Bryan angles can also be controlled with sliders, which are hidden by default. To show them, set the following attributes:
+  <ul>
+    <li><code>az: {slider: {visible: true}}</code></li>
+    <li><code>el: {slider: {visible: true}}</code></li>
+    <li><code>bank: {slider: {visible: true}}</code> (as of <a href="https://jsxgraph.org/wp/2024-06-28-release-of-version-1.9.2/">version 1.9.2</a>)</li>
+  </ul>
+</p>
+<p>
+  <a href="https://jsxgraph.org/wp/2024-06-28-release-of-version-1.9.2/">Version 1.9.2</a> introduces a new orientation control mode: the <em>virtual trackball</em>. In this mode, dragging from near the center of the board rolls the view along the drag direction, while dragging from near the edge of the board rotates the view in the plane of the board. These two motions transition smoothly into each other as the drag start position changes. To enable the virtual trackball, set the <code>trackball</code> attribute of the <code>View3D</code> to <code>{enabled: true}</code>.
+</p>
+<p>
+  This demo is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/trackball.html">virtual trackball example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.
+</p>
+</p>
+<div>
+    <label for="ori-ctl">Orientation control:</label>
+    <select id="ori-ctl">
+        <option value="angles">Tait–Bryan angles</option>
+        <option value="trackball">Virtual trackball</option>
+    </select>
+</div>
+<div id="trackball-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
@@ -248,5 +250,6 @@
     inputOriCtl();
 }
 </script>
+
 </body>
 </html>