Zum Inhalt springen

Änderungen von Dokument Interaktiv Skizzieren

Zuletzt geändert von Holger Engels am 2024/10/06 16:24
Von Version 1.1
bearbeitet von Holger Engels
am 2024/10/06 16:20
Änderungskommentar: Es gibt keinen Kommentar für diese Version
Auf Version 4.1
bearbeitet von Holger Engels
am 2024/10/06 16:24
Änderungskommentar: Es gibt keinen Kommentar für diese Version

Zusammenfassung

Details

Seiteneigenschaften
Inhalt
... ... @@ -1,3 +1,3 @@
1 -{{html}}
2 -<iframe style="width: 100%; min-width: 350px; max-width: 450px; aspect-ratio: 1; border: none" src="attachment:power-function.html"></iframe>
1 +{{html clean="false"}}
2 +<iframe style="width: 100%; min-width: 350px; max-width: 450px; aspect-ratio: 1; border: none" src="/xwiki/bin/download/Eingangsklasse/BPE_2_1/Interaktiv%20Skizzieren/WebHome/power-function.html"></iframe>
3 3  {{/html}}
power-function.html
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.holgerengels
Größe
... ... @@ -1,0 +1,1 @@
1 +2.5 KB
Inhalt
... ... @@ -1,0 +1,49 @@
1 +<!doctype html>
2 +<html lang="de">
3 +<head>
4 + <title>Potenzfunktion</title>
5 + <meta charset="utf-8">
6 + <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
7 + <link rel='stylesheet' type='text/css' href='https://cdn.jsdelivr.net/npm/jsxgraph@latest/distrib/jsxgraph.css'/>
8 + <script src='https://cdn.jsdelivr.net/npm/jsxgraph@latest/distrib/jsxgraphcore.js' type='text/javascript'></script>
9 +
10 + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css" crossorigin="anonymous">
11 + <script src="https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.js" crossorigin="anonymous"></script>
12 +
13 + <style>
14 + body {
15 + margin: 0px;
16 + padding: 0px;
17 + overflow: hidden;
18 + }
19 + .container {
20 + display: grid;
21 + grid-template-columns: 1fr;
22 + position: relative;
23 + }
24 + .jxgbox { border-radius: 0px; border: none}
25 + </style>
26 +</head>
27 +<body>
28 +
29 +<div class="container">
30 + <div id='board' class='jxgbox' style='width: 100%; aspect-ratio: 1'></div>
31 +</div>
32 +
33 +<script type='text/javascript'>
34 + var board = JXG.JSXGraph.initBoard('board', {boundingbox: [-8, 8, 8, -8], axis: true, showNavigation: false, showZoom: false, showCopyright: false, pan: { enabled: false}});
35 +
36 + var n = board.create('slider', [[1.5, -7], [6, -7], [-4, 2, 5]], { snapWidth: 1, size: 4, ticks: { ticksDistance: 1, insertTicks: false, drawLabels: true, label: {fontSize: 1, fontUnit: 'em', offset: [-4, -16], } }, name: 'n', digits: 0, label: {fontSize: 1, fontUnit: 'em', cssClass: 'term'}});
37 + var para = board.create('functiongraph', [(x) => JXG.Math.ratpow(x, n.Value(), 1)], {strokeWidth: 3, strokeColor: JXG.palette.green});
38 + var hype = board.create('functiongraph', [(x) => JXG.Math.ratpow(x, -n.Value(), 1)], {strokeWidth: 3, strokeColor: JXG.palette.blue});
39 + var root = board.create('functiongraph', [(x) => JXG.Math.ratpow(x, 1, n.Value())], {strokeWidth: 3, strokeColor: JXG.palette.red});
40 +
41 + var parat = board.create('text', [1.5, -5, () => `\\large p(x)=x^${n.Value()}`], { cssClass: 'term', fixed: true, useKatex: true, color: JXG.palette.green });
42 + var hypet = board.create('text', [1.5, -4, () => `\\large h(x)=x^{${-n.Value()}}`], { cssClass: 'term', fixed: true, useKatex: true, color: JXG.palette.blue });
43 + var roott = board.create('text', [1.5, -3, () => `\\large r(x)=x^{\\frac{1}{${n.Value()}}}`], { cssClass: 'term', fixed: true, useKatex: true, color: JXG.palette.red });
44 +
45 +</script>
46 +
47 +</body>
48 +</html>
49 +