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/challenges/octahedron.html
+++ b/challenges/octahedron.html
@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Octahedron challenge</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>Octahedron challenge</h1>
+<p>Can you create something like this using <a href="https://jsxgraph.org/docs/symbols/Point3D.html#constructor"><code>Point3D</code></a> and <a href="https://jsxgraph.org/docs/symbols/Polygon3D.html#constructor"><code>Polygon3D</code></a> elements? Don’t worry about including the colors; they’re just to emphasize how the polygons fit together.</p>
+<p>The <code>create</code> call for <code>Polygon3D</code> isn’t documented, but you can look at the polygon sampler for examples.</p>
+<div id="octahedron-from-triangles" class="jxgbox" style="width:600px; height:600px"></div>
+
+<!-- a solution to the octahedron challenge -->
+<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
+{
+    // create a JSXGraph board and draw a 3D view on it
+    let board = JXG.JSXGraph.initBoard(
+        'octahedron-from-triangles',
+        {
+            boundingbox: [-8, 8, 8,-8],
+            axis: false,
+            showCopyright: false,
+            showNavigation: false
+        }
+    );
+    let view = board.create(
+        'view3d',
+        [[-4.5, -4.5], [9, 9],
+        [[0, 4], [0, 4], [0, 4]]],
+        {
+            xPlaneRear: {fillOpacity: 0.2, gradient: null},
+            yPlaneRear: {fillOpacity: 0.2, gradient: null},
+            zPlaneRear: {fillOpacity: 0.2, gradient: null},
+            depthOrderPoints: true
+        }
+    );
+
+    // create the vertices of the octahedron
+    let vertices = [];
+    coords = [
+        [1, 2, 2],
+        [3, 2, 2],
+        [2, 1, 2],
+        [2, 3, 2],
+        [2, 2, 1],
+        [2, 2, 3]
+    ];
+    colors = [
+        '#f08',
+        '#4f0',
+        '#f60',
+        '#0af',
+        '#40f',
+        '#fb0'
+    ];
+    for (i in coords) {
+        vertices.push(view.create(
+            'point3d',
+            coords[i],
+            {
+                withLabel: false,
+                size: 5,
+                strokeColor: 'none',
+                fillColor: 'white',
+                gradientSecondColor: colors[i],
+                highlightStrokeWidth: 1,
+                highlightStrokeColor: '#777'
+            }
+        ));
+    }
+    
+    // create the faces of the octahedron
+    view.create(
+        'polygon3d',
+        [vertices[0], vertices[2], vertices[5]],
+        {
+            fillColor: '#f85',
+            fillOpacity: 0.2,
+            borders: {
+                strokeWidth: 2,
+                strokeColor: '#f85',
+                highlightStrokeColor: '#777'
+            }
+        }
+    );
+    view.create(
+        'polygon3d',
+        [vertices[1], vertices[3], vertices[5]],
+        {
+            fillColor: '#af0',
+            fillOpacity: 0.2,
+            borders: {
+                strokeWidth: 2,
+                strokeColor: '#af0',
+                highlightStrokeColor: '#777'
+            }
+        }
+    );
+    view.create(
+        'polygon3d',
+        [vertices[0], vertices[3], vertices[4]],
+        {
+            fillColor: '#a0f',
+            fillOpacity: 0.2,
+            borders: {
+                strokeWidth: 2,
+                strokeColor: '#a0f',
+                highlightStrokeColor: '#777'
+            }
+        }
+    );
+    view.create(
+        'polygon3d',
+        [vertices[1], vertices[2], vertices[4]],
+        {
+            fillColor: '#a87',
+            fillOpacity: 0.2,
+            borders: {
+                strokeWidth: 2,
+                strokeColor: '#a87',
+                highlightStrokeColor: '#777'
+            }
+        }
+    );
+}
+</script>
+</body>
+</html>