feature: add interactive applets

2026-01-31 22:12:22 +01:00
parent c1cd1a8ef7
commit e56d0dcea5
18 changed files with 2943 additions and 0 deletions
@@ -0,0 +1,39 @@
+Mit dem folgenden Applet kann man beide Halbperioden getrennt anschauen.<br><br>
+
+<html>
+    <script src="https://www.50ohm.de/assets/jquery/3.7.1/jquery.min.js"></script>
+    <script src="https://www.50ohm.de/assets/chartjs/4.4.1/chart.min.js"></script>
+
+    <button id="button0">Keine Aktion</button>
+    <button id="button1">1. Halbperiode</button>
+    <button id="button2">2. Halbperiode</button>
+
+    <img id="GR1" width="100%"/>
+    
+    <script>
+        const image = [
+            "https://50ohm.de/pictures/962.svg",
+            "https://50ohm.de/pictures/963.svg",
+            "https://50ohm.de/pictures/964.svg",
+        ];
+
+        document.getElementById('button0').addEventListener('click', function() {
+            cycle(0);
+        });
+
+        document.getElementById('button1').addEventListener('click', function() {
+            cycle(1);
+        });
+
+        document.getElementById('button2').addEventListener('click', function() {
+            cycle(2);
+        });
+
+        function cycle(index = 0) {
+            document.querySelector('#GR1').src = image[index];
+        }
+
+        cycle(0);
+
+    </script>
+</html>