Difference between revisions of "Applets:Periodendauer periodischer Signale"

Revision as of 17:54, 13 September 2017

Funktion: $$x(t) = A_1\cdot cos\Big(2\pi f_1\cdot t- \frac{2\pi}{360}\cdot \phi_1\Big)+A_2\cdot cos\Big(2\pi f_2\cdot t- \frac{2\pi}{360}\cdot \phi_2\Big)$$

@@ Line 1: / Line 1: @@
 <p>
 {{BlaueBox|TEXT=
@@ Line 9: / Line 10: @@
 <html>
 <head>
-    <meta charset="utf-8" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.6/jsxgraphcore.js"></script>
-<script type="text/javascript" src="https://cdn.rawgit.com/mathjax/MathJax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
+  <script type="text/javascript" src="https://cdn.rawgit.com/mathjax/MathJax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
-    <style>
-        .button {
-            background-color: black;
-            border: none;
-            color: white;
-            font-family: arial;
-            padding: 8px 20px;
-            text-align: center;
-            text-decoration: none;
-            display: inline-block;
-            font-size: 16px;
-            border-radius: 15px;
-        }
-        .button:active {
-            background-color: #939393;
-        }
-        table {
-            border-collapse: separate;
-            border-spacing: 20px 0;
-        }
-    </style>
-</head>
     <style>
     .button1{
@@ Line 63: / Line 40: @@
 <form id="jxgForm">
 <!-- Resetbutton, Checkbox und Formel -->
-    <p>
+<p>
-        <input type="checkbox" id="gridbox" onclick="showgrid();" checked> <label for="gridbox">Gitterlinien zeigen</label>
+    <input type="checkbox" id="gridbox" onclick="showgrid();" checked> <label for="gridbox">Gitterlinien zeigen</label>
-        <button class="button" onclick="rst()">Reset</button>
+    <button class="button" onclick="rst()">Reset</button>
-    </p>
+</p>
-<div id="pltBoxHtml" class="jxgbox" style="width:600px; height:600px; border:1px solid black; margin:170px 20px 0px 0px;"></div>
+<div id="box1" class="jxgbox" style="width:600px; height:600px; border:1px solid black; margin:100px 20px 0px 0px;"></div>
-<div id="cnfBoxHtml" class="jxgbox" style="width:600px; height:150px; border:1px solid white; margin:-960px 20px 0px 0px;"></div>
+<div id="box2" class="jxgbox" style="width:600px; height:150px; border:1px solid white; margin:-760px 20px 0px 0px;"></div>
-<div id="outBoxHtml" class="jxgbox" style="width:600px; height:100px; border:1px solid white; margin:625px 20px 0px 0px;"></div>
+<div id="box3" class="jxgbox" style="width:600px; height:100px; border:1px solid white; margin:625px 20px 0px 0px;"></div>
-</form>
 <script type="text/javascript">
@@ Line 78: / Line 55: @@
 //Grundeinstellungen der beiden Applets
 JXG.Options.text.useMathJax = true;
-var brd1 = JXG.JSXGraph.initBoard('pltBoxHtml', {showCopyright:false, axis:false, zoom:{factorX:1.1, factorY:1.1, wheel:true, needshift:true, eps: 0.1}, grid:false, boundingbox: [-0.5, 2.2, 12.4, -2.2]});
+var brd1 = JXG.JSXGraph.initBoard('box1', {showCopyright:false, axis:false, zoom:{factorX:1.1, factorY:1.1, wheel:true, needshift:true, eps: 0.1}, grid:false, boundingbox: [-0.5, 2.2, 12.4, -2.2]});
-var brd2 = JXG.JSXGraph.initBoard('cnfBoxHtml', {showCopyright:false, showNavigation:false, axis:false, grid:false, zoom:{enabled:false}, pan:{enabled:false}, boundingbox: [-1, 2.2, 12.4, -2.2]});
+var brd2 = JXG.JSXGraph.initBoard('box2', {showCopyright:false, showNavigation:false, axis:false, grid:false, zoom:{enabled:false}, pan:{enabled:false}, boundingbox: [-1, 2.2, 12.4, -2.2]});
-var brd3 = JXG.JSXGraph.initBoard('outBoxHtml', {showCopyright:false, showNavigation:false, axis:false, grid:false, zoom:{enabled:false}, pan:{enabled:false}, boundingbox: [-1, 2.2, 12.4, -2.2]});
+var brd3 = JXG.JSXGraph.initBoard('box3', {showCopyright:false, showNavigation:false, axis:false, grid:false, zoom:{enabled:false}, pan:{enabled:false}, boundingbox: [-1, 2.2, 12.4, -2.2]});
 brd2.addChild(brd1);
 brd2.addChild(brd3);
 //Einstellungen der Achsen
-xaxis = brd1.create('axis', [[0, 0], [1,0]], {name:'\\[\\frac{t}{T}\\]', withLabel:true, label:{position:'rt', offset:[-25, 15]}});
+xaxis = brd1.create('axis', [[0, 0], [1,0]], {name:'\\[t/T\\]', withLabel:true, label:{position:'rt', offset:[-25, 15]}});
 yaxis = brd1.create('axis', [[0, 0], [0, 1]], {name:'\\[x(t)\\]', withLabel:true, label:{position:'rt', offset:[10, -5]}});
@@ Line 193: / Line 170: @@
 //Definition des Reset-Buttons
 function rst() {
-     document.getElementById("myForm").reset();
+     document.getElementById("jxgForm").reset();
 };
 </script>