Zum Inhalt springen

Änderungen von Dokument Interaktiv Besondere Geraden

Zuletzt geändert von Holger Engels am 2024/11/03 09:44
Von Version 1.1
bearbeitet von Holger Engels
am 2024/11/03 09:39
Änderungskommentar: Es gibt keinen Kommentar für diese Version
Auf Version 4.1
bearbeitet von Holger Engels
am 2024/11/03 09:44
Änderungskommentar: Neuen Anhang linear-function-main-form.html hochladen

Zusammenfassung

Details

Seiteneigenschaften
Inhalt
... ... @@ -1,3 +1,3 @@
1 -{{html wiki="true"}}
2 -<iframe style="width: 100%; min-width: 350px; max-width: 450px; aspect-ratio: 1; border: none" src="[[attach:linear-function-main-form.html]]"></iframe>
1 +{{html clear="false"}}
2 +<iframe style="width: 100%; min-width: 350px; max-width: 450px; aspect-ratio: 1; border: none" src="/xwiki/bin/download/Eingangsklasse/BPE_1_4/Interaktiv%20Besondere%20Geraden/WebHome/linear-function-main-form.html?rev=1.1"></iframe>
3 3  {{/html}}
linear-function-main-form.html
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.holgerengels
Größe
... ... @@ -1,0 +1,1 @@
1 +3.2 KB
Inhalt
... ... @@ -1,0 +1,96 @@
1 +<!doctype html>
2 +<html lang="de">
3 +<head>
4 + <title>Lineare Funktion - Hauptform</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 + <style>
11 + body {
12 + margin: 0px;
13 + padding: 0px;
14 + overflow: hidden;
15 + }
16 + .container {
17 + display: grid;
18 + grid-template-columns: 1fr;
19 + position: relative;
20 + }
21 + .jxgbox { border-radius: 0px; border: none}
22 + </style>
23 +</head>
24 +<body>
25 +
26 +<div class="container">
27 + <div id='board' class='jxgbox' style='width: 100%; aspect-ratio: 1'></div>
28 +</div>
29 +
30 +<script type='text/javascript'>
31 + var board = JXG.JSXGraph.initBoard('board', {boundingbox: [-5, 5, 5, -5], axis: true, showNavigation: false, showZoom: false, showCopyright: false, pan: { enabled: false}});
32 + var a = board.create('point', [-1, -1], {visible: true, name: 'A', snapToGrid: true, snapSizeX: .5, snapSizeY: .5});
33 + var b = board.create('point', [1, 1], {visible: true, name: 'B', snapToGrid: true, snapSizeX: .5, snapSizeY: .5});
34 + var g = board.create('line', [a, b], {});
35 + var p1 = board.create('point', [0, -5], {visible: false,});
36 + var p2 = board.create('point', [0, 5], {visible: false});
37 + var l = board.create('line', [p1, p2], {visible: false});
38 + var i = board.create('intersection', [g, l], {visible: false});
39 +
40 +
41 + var text = board.create('text', [.5, -4.5, () => {
42 + if (a.X() === b.X())
43 + return "keine Funktion!";
44 +
45 + let dx = b.X() - a.X();
46 + let dy = b.Y() - a.Y();
47 + let m = dy/dx;
48 + let mi = dy%dx === 0;
49 + let e = "f(x) = ";
50 +
51 + if (m === 0)
52 + return "f(x) = " + b.Y();
53 + else if (m === 1)
54 + e += "x";
55 + else if (m === -1)
56 + e += "-x";
57 + else if (mi)
58 + e += m + "x";
59 + else {
60 + if (Math.floor(dx) + .5 === dx || Math.floor(dy) + .5 === dy) {
61 + dx *=2;
62 + dy *=2;
63 + }
64 + e += (dy / dx < 0 ? "-" : "") + Math.abs(dy) + "/" + Math.abs(dx) + "x";
65 + }
66 + let tz = - dy * b.X() + b.Y() * dx;
67 + tz *=4;
68 + if (tz !== 0) {
69 + let tn = dx * 4;
70 + let ts = tz * tn >= 0;
71 + let t = (!ts ? " - " : " + ") + reduceFraction(Math.abs(tz), Math.abs(tn));
72 + e += t;
73 + }
74 + return e;
75 + }], {fontSize: 1.1, fontUnit: 'em', color: '#D55E00', cssStyle: 'background-color: white'});
76 +
77 + function reduceFraction(numOne, numTwo) {
78 + var result = '';
79 + for (var i = Math.max(numOne, numTwo); i > 1; i--) {
80 + if ((numOne % i == 0) && (numTwo % i == 0)) {
81 + numOne /= i;
82 + numTwo /= i;
83 + }
84 + }
85 + if (numTwo === 1) {
86 + result = numOne.toString()
87 + } else {
88 + result = numOne.toString() + '/' + numTwo.toString()
89 + }
90 + return result
91 + }
92 +</script>
93 +
94 +</body>
95 +</html>
96 +