Interaktiv Test-Rakete

==== Flugprofil interaktiv komponieren ====

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//.

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: [-50, -10]}}
		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', [4, 30], Object.assign({name: 'P_1', size: 4, color: '#336699'}, snapAttr));
		43	var p2 = board.create('point', [16, 30], 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}}

Wiki-Quellcode von Interaktiv Test-Rakete