Wiki-Quellcode von Interaktiv Test-Rakete
Version 1.1 von Holger Engels am 2026/09/20 12:05
Zeige letzte Bearbeiter
| author | version | line-number | content |
|---|---|---|---|
| 1 | ==== Flugprofil interaktiv komponieren ==== | ||
| 2 | Entwirf ein eigenes Flugprofil für die 20 Sekunden. Du kannst die vier Eckpunkte des Graphen verschieben. Der Startpunkt ist bei //t=0// fixiert, der Endpunkt bei //t=20//. | ||
| 3 | |||
| 4 | **Ziel:** Finde eine Einstellung, bei der die Rakete am Ende exakt die geforderten 600 Meter zurückgelegt hat. | ||
| 5 | |||
| 6 | {{html clean="false"}} | ||
| 7 | <!-- CSS kann weiterhin normal geladen werden --> | ||
| 8 | <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css" /> | ||
| 9 | |||
| 10 | <div id="jxgbox_weg" class="jxgbox" style="width: 100%; max-width: 700px; height: 450px; border: 1px solid #ccc; margin-top: 10px;"></div> | ||
| 11 | |||
| 12 | <script type="text/javascript"> | ||
| 13 | require.config({ | ||
| 14 | paths: { | ||
| 15 | 'jsxgraph': 'https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore' | ||
| 16 | } | ||
| 17 | }); | ||
| 18 | |||
| 19 | require(['jsxgraph'], function(JXG) { | ||
| 20 | var board = JXG.JSXGraph.initBoard('jxgbox_weg', { | ||
| 21 | boundingbox: [-2, 80, 22, -15], | ||
| 22 | axis: true, | ||
| 23 | showCopyright: false, | ||
| 24 | defaultAxes: { | ||
| 25 | x: {name: 't [s]', withLabel: true, label: {position: 'rt', offset: [-25, -15]}}, | ||
| 26 | y: {name: 'v [m/s]', withLabel: true, label: {position: 'rt', offset: [-90, -20]}} | ||
| 27 | } | ||
| 28 | }); | ||
| 29 | |||
| 30 | var line0 = board.create('line', [[0, 0], [0, 1]], {visible: false}); | ||
| 31 | var line20 = board.create('line', [[20, 0], [20, 1]], {visible: false}); | ||
| 32 | |||
| 33 | // Gemeinsame Attribute für das Einrasten | ||
| 34 | var snapAttr = { | ||
| 35 | snapToGrid: true, | ||
| 36 | snapSizeX: 0.5, // Rasterweite auf der x-Achse: 0.5 Sekunden | ||
| 37 | snapSizeY: 1.0 // Rasterweite auf der y-Achse: 1.0 m/s | ||
| 38 | }; | ||
| 39 | |||
| 40 | // Punkte mit Raster-Eigenschaften erstellen (Object.assign kombiniert die Attribute) | ||
| 41 | var p0 = board.create('glider', [0, 0, line0], Object.assign({name: 'Start', size: 4, color: '#e66224'}, snapAttr)); | ||
| 42 | var p1 = board.create('point', [5, 40], Object.assign({name: 'P_1', size: 4, color: '#336699'}, snapAttr)); | ||
| 43 | var p2 = board.create('point', [15, 40], Object.assign({name: 'P_2', size: 4, color: '#336699'}, snapAttr)); | ||
| 44 | var p3 = board.create('glider', [20, 0, line20], Object.assign({name: 'Ende', size: 4, color: '#e66224'}, snapAttr)); | ||
| 45 | |||
| 46 | var pol = board.create('polygon', [p0, p1, p2, p3], { | ||
| 47 | fillColor: '#f39c12', | ||
| 48 | fillOpacity: 0.4, | ||
| 49 | borders: {strokeWidth: 2, strokeColor: '#d35400'} | ||
| 50 | }); | ||
| 51 | |||
| 52 | var txt = board.create('text', [1, 70, function() { | ||
| 53 | var area = pol.Area(); | ||
| 54 | var result = 'Zurückgelegter Weg: ' + area.toFixed(1) + ' m'; | ||
| 55 | if (Math.abs(area - 600) < 0.1) { | ||
| 56 | result += ' 🎉 Ziel (600m) erreicht!'; | ||
| 57 | } | ||
| 58 | return result; | ||
| 59 | }], {fontSize: 16, strokeColor: '#2c3e50'}); | ||
| 60 | }); | ||
| 61 | </script> | ||
| 62 | {{/html}} |