Add templates and challenges used in workshop

2024-10-14 00:25:12 -07:00 · 2024-10-14 00:25:12 -07:00 · 6354bc97fe
commit 6354bc97fe
8 changed files with 1882 additions and 0 deletions
--- a/templates/circle-sampler.html
+++ b/templates/circle-sampler.html
@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>3D circle sampler</title>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css" />
+    <script type="text/javascript" charset="UTF-8" src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
+</head>
+<body>
+
+<h1>3D circle sampler</h1>
+
+<p>A <a href="https://jsxgraph.org/docs/symbols/Circle3D.html"><code>Circle3D</code></a> element is created from a center, a normal vector, and a radius. The center can be given either in coordinates or as a <a href="https://jsxgraph.org/docs/symbols/Point3D.html#constructor"><code>Point3D</code></a>. The normal vector is given in coordinates.</p>
+<p>There’s another <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/circle3d.html"><code>Circle3D</code> 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="circle-board" class="jxgbox" style="width:600px; height:600px"></div>
+
+<script type="text/javascript">
+    // create a JSXGraph board and draw a 3D view on it
+    let board = JXG.JSXGraph.initBoard(
+        'circle-board',
+        {
+            boundingbox: [-8, 8, 8,-8],
+            axis: false,
+            showCopyright: false,
+            showNavigation: false
+        }
+    );
+    let view = board.create(
+        'view3d',
+        [[-4.5, -4.5], [9, 9],
+        [[0, 3], [0, 3], [0, 3]]],
+        {
+            xPlaneRear: {fillOpacity: 0.2, gradient: null},
+            yPlaneRear: {fillOpacity: 0.2, gradient: null},
+            zPlaneRear: {fillOpacity: 0.2, gradient: null}
+        }
+    );
+    
+    // create a point
+    let center = view.create(
+        'point3d',
+        [1.5, 1.5, 1.5],
+        {
+            withLabel: false,
+            strokeWidth: 1,
+            size: 5,
+            strokeColor: '#300060',
+            fillColor: 'white',
+            gradientSecondColor: '#5000a0',
+            highlightStrokeColor: '#300060'
+       }
+    );
+    
+    // create some circles that share a center
+    let normals = [
+        [1, 1, 1],
+        [1, -1, 1],
+        [-1, 1, 1],
+        [-1, -1, 1]
+    ];
+    let colors = [
+        '#f08',
+        '#f60',
+        '#fb0',
+        '#80f'
+    ];
+    for (i in normals) {
+        view.create(
+            'circle3d',
+            [center, normals[i], 1],
+            {strokeColor: colors[i]}
+        );
+    }
+</script>
+</body>
+</html>