Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- gf_informatik:programmieren_i [2025-09-01 08:00] – hof
+++ gf_informatik:programmieren_i [2026-04-29 09:01] (aktuell) – hof
@@ Zeile 5: / Zeile 5: @@
 Ein Computer ist zunächst einfach mal eine Maschine, die wahnsinnig schnell arbeiten (rechnen) kann. Damit man zum Beispiel ein Spiel spielen können, muss irgend jemand dem Computer also sagen, was er denn genau zu tun hat. Jemand muss also ein **Computerprogramm**, oder **Code**, schreiben. Dieses besteht aus //Befehlen, die der Computer auszuführen// hat. Damit der Computer auch versteht, was er machen soll, müssen Programmierer und Computer 'die gleiche Sprache' sprechen. Es gibt sehr viele unterschiedliche solche Programmiersprachen mit unterschiedlichen Anwendungsbereichen und Vor- und Nachteilen.
-Wir wählen hier die Programmiersprache **Python**. Im Jahre 2025 ist diese Sprache sicher in der Top 3 der wichtigsten Programmiersprachen - wenn nicht sogar auf dem ersten Platz. Dazu kommt, dass Python im Vergleich zu anderen Sprachen, z.B. C\+\+ (C Plus Plus), Java oder C# (C Sharp) relativ einfach zu erlernen ist.
+Wir wählen hier die Programmiersprache **Python**. Im Jahre 2026 ist diese Sprache sicher in der Top 3 der wichtigsten Programmiersprachen - wenn nicht sogar auf dem ersten Platz. Dazu kommt, dass Python im Vergleich zu anderen Sprachen, z.B. C\+\+ (C Plus Plus), Java oder C# (C sharp) relativ einfach zu erlernen ist.
-Wenn wir einen Satz mit vielen Schreibfelern und Grammatikfehler lesen, so sind wir meist trotzdem in der Lage, den Satz zu verstehen. Im Gegensatz zu uns hat ein Computer aber keine Intelligenz und ist deshalb nicht in der Lage, einen Text selbst zu interpretieren. Ein Computer kann ein Programm nur ausführen, wenn es gar keine Fehler, sogenannte **Bugs**, hat. Es ist deshalb wichtig, dass man sich an die formalen Vorgaben der Programmiersprache hält.
-Wie gesagt, werden wir in der Programmiersprache Python programmieren. Wir brauchen aber noch ein Programm, um unseren Code zu schreiben und auszuführen, eine sogenannte **IDE (Integrated Development Environment, auf Deutsch Entwicklungsumgebung)**. Dazu wählen wir die IDE **TigerPython**.
+Wenn wir einen Satz mit vielen Schreibfelern und Grammatikfehler lesen, so sind wir meist trotzdem in der Lage, den Satz zu verstehen. Im Gegensatz zu uns ist ein Computer ist nicht in der Lage, einen Text selbst zu interpretieren. Ein Computer kann ein Programm nur ausführen, wenn es gar keine Fehler, sogenannte **Bugs**, hat. Es ist deshalb wichtig, dass man sich an die formalen Vorgaben der Programmiersprache hält.
 ==== Installation ====
 === Web Tiger Python ===
-Am einfachsten ist es, Programme direkt im Web zu schreiben: auf https://webtigerpython.ethz.ch/.
+Am einfachsten ist es, Programme direkt im Web zu schreiben. Wir verwenden die folgende Seite:
+  * [[https://bottom.ch/editor/|bottom.ch/editor]]
-Um ein Programm abzuspeichern, musst es heruntergeladen werden:
-{{ :gf_informatik:wtp_save_small.mp4 |}}
-Die heruntergeladene Datei muss noch in den richtigen Ordner verschoben werden, z.B. `1M/Informatik/Programmieren 1/`.
-Alternativ dazu kann ein Link kopiert werden und z.B. in einem Notiz-Dokument hinzugefügt werden.
+Die Programme werden im Web allerdings nicht gespeichert. Am besten dokumentierst du deine Codes, indem du ein [[https://word.cloud.microsoft/|Word]]- oder [[https://onenote.cloud.microsoft/|OneNote]]-Dokument anlegst und darin die Permalinks auf die Aufgaben speicherst. Tipp: mit <kbd>Ctrl+K</kbd> kann in vielen Programmen ein Hyperlink hinterlegt werden.
+{{ :gf_informatik:bottom_share.mp4 |}}
 <nodisp 2>
@@ Zeile 51: / Zeile 44: @@
 </nodisp>
-==== Aufgaben ====
+==== Dokumentation ====
-   * In jedem Kapitel gibt es ein **Set an Aufgaben**. Jedes Set ist mit einem Buchstaben gekennzeichnet.
+   * Erstelle eine Ordnerstruktur auf [[https://kantonsschuleromanshorn-my.sharepoint.com/my/|OneDrive]] für jedes Fach, z.B.: `1M/Informatik`
-   * Erstelle an einem Ort auf deinem Computer, der mit OneDrive synchronisiert wird, einen Ordner für die Informatik und darin einen Unterordner für dieses Thema, z.B.: `Informatik\Programmieren 1\`
+   * Erstelle für jedes Kapitel [[https://word.cloud.microsoft/|Word]]- oder [[https://onenote.cloud.microsoft/|OneNote]]-Dokument, z.B. `1M/Informatik/Programmieren1.docx`.
-   * Erstelle für **jede Aufgabe eine eigene Datei**. Benenne diese nach dem folgenden Schema: Aufgabe B2 in Datei `B2.py`
+   * Du machst dir Notizen während der Lektionen und zu den Aufgaben. Programme speicherst du als Permalink.
    * Für einige Aufgaben wird es **Musterlösungen** geben, aber nicht für alle. Falls du dir unsicher bist: Frage bei der Lehrperson nach.
    * Du bist **selbst verantwortlich**, dass du alle Aufgaben gelöst hast.
@@ Zeile 62: / Zeile 55: @@
    * Im Dossier gibt es viele kleine **Code-Beispiele**. Tippe diese jeweils //von Hand ab// und versuche, alles zu //verstehen//. Wenn du den Code per Copy-Paste kopierst, lernst du gar nichts!
-   * Verwende **Shortcuts**:
+   * Verwende **Tastenkombinationen**:
-      * Ctrl+Enter: Programm ausführen (statt auf den grünen Pfeil klicken).
+      * <kbd>Ctrl+Enter</kbd>: Programm ausführen (statt auf den grünen Pfeil klicken).
+      * Allgemeine [[user:hof:copypaste]]
       * Generell: Benutze die Maus so wenig wie möglich!
 ===== - Einfache Bewegungen =====
-<html><iframe src="https://webtigerpython.ethz.ch/?layout=%5B%22Editor%22%2C%20%22Canvas%22%5D&lang=de&full_screen=false&dark_mode=false&device=-&code=NobwRAdghgtgpmAXGGUCWEB0AHAnmAGjABMoAXKJMAMwCcB7GAAjIFdayAbOJtGbehyYAqADoRxdNGQBeTALxMAKuy5wAFAEpxk2tJmZqggO5RaxdQEYADNc1gAvgF0gA%3D%3D%3D" allow="usb;clipboard-write" style="border: 1px solid lightgray; height: 10lh; width: 100%">
+<bottom-editor id="one" layout='canvas' showswitcher >
-</iframe>
+from turtle import *
-</html>
+fritz = Turtle()
+fritz.forward(100)
+</bottom-editor>
 Erklärung der Zeilen:
-  - Zuerst musst du das *Modul `turtle` importieren*, damit wir mit Turtlegrafik arbeiten können.
+  - Zuerst musst du das *Modul `turtle` importieren*, damit wir mit Turtle-Grafik arbeiten können.
   - Erzeuge eine neue Turtle mit einem Namen, hier `fritz`. Man nennt dieses auch ein *Turtle-Objekt*.
   - Gib deiner Turtle den Befehl, 100 Pixel vorwärts zu laufen.
-Du kannst deiner Turtle nun auch sagen, er soll sich um einen gewissen Winkel drehen oder rückwärts laufen. Die wichtigsten Befehle sind die folgenden. Jedem Befehl muss der Name der Turtle (im Beispiel `fritz`) und ein Punkt vorangestellt werden. Viele weitere Befehle finden sich auf der  [[gf_informatik:programmieren_i:turtle_summary]].
+Du kannst deiner Turtle befehlen, sie soll sich um einen gewissen Winkel drehen oder rückwärts laufen. Die wichtigsten Befehle sind unten aufgeführt. Jedem Befehl muss der Name der Turtle (im Beispiel `fritz`) und ein Punkt vorangestellt werden. Viele weitere Befehle finden sich auf der  [[gf_informatik:programmieren_i:turtle_summary]].
 ^ Befehl ^ Beschreibung ^
@@ Zeile 85: / Zeile 83: @@
 | `left(w)`    | um den Winkel `w` nach links drehen              |
 | `home()`     | setzt Turtle in die Mitte des Fensters mit Richtung nach rechts |
-| `hideturtle()`     | Turtle versteckt sich. |
 Um die Turtle an eine andere Stelle zu bewegen, brauchst du die folgenden Befehle:
@@ Zeile 98: / Zeile 95: @@
 Du willst mehr machen? Dann findest du viele weitere Funktionen in der [[https://docs.python.org/3/library/turtle.html#turtle-methods|offiziellen Python-Turtle-Dokumentation]].
 ==== Aufgaben A ====
@@ Zeile 103: / Zeile 101: @@
 Mache dich mit all diesen **Befehlen vertraut** und probiere sie aus.
+<bottom-editor id="a1" layout='canvas' showswitcher>
+from turtle import *
+fritz = Turtle()
+# Was soll fritz zeichnen?
+</bottom-editor>
 === Aufgabe A2 ===
-Programmiere deine Turtle so, dass es ein **Quadrat** abläuft.
+Programmiere deine Turtle so, dass sie ein **Quadrat** abläuft.
+<bottom-exercise id="a2" layout='canvas' showswitcher>
+<script type="text/x-starter">
+</script>
+<script type="text/x-solution">
+from turtle import *
+fritz = Turtle()
+fritz.forward(100)
+fritz.left(90)
+fritz.forward(100)
+fritz.left(90)
+fritz.forward(100)
+fritz.left(90)
+fritz.forward(100)
+fritz.left(90)
+</script>
+</bottom-exercise>
 === Aufgabe A3 ===
-Programmiere deine Turtle so, dass er **deinen Namen**, Spitznamen oder zumindest deine Initialen abläuft.
+Programmiere deine Turtle so, dass sie **deinen Namen**, Spitznamen oder zumindest deine Initialen abläuft.
+<bottom-exercise id="a3" layout='canvas' showswitcher>
+<script type="text/x-starter">
+</script>
+<script type="text/x-solution">
+from turtle import *
+fritz = Turtle()
+# Buchstabe: K
+fritz.left(90)
+fritz.teleport(-200, -100)
+fritz.forward(200)
+fritz.teleport(-200,0)
+fritz.right(45)
+fritz.forward(141)
+fritz.teleport(-200,0)
+fritz.right(90)
+fritz.forward(141)
+# Buchstabe: S
+fritz.teleport(-50,-100)
+fritz.left(45)
+fritz.forward(100)
+fritz.left(90)
+fritz.forward(100)
+fritz.left(90)
+fritz.forward(100)
+fritz.right(90)
+fritz.forward(100)
+fritz.right(90)
+fritz.forward(100)
+# Buchstabe: R
+fritz.teleport(100,-100)
+fritz.left(90)
+fritz.forward(200)
+fritz.right(90)
+fritz.forward(100)
+fritz.right(90)
+fritz.forward(100)
+fritz.right(90)
+fritz.forward(100)
+fritz.left(135)
+fritz.forward(141)
+</script>
+</bottom-exercise>
 === Aufgabe A4 ===
-Wahrscheinlich hast du die Aufgabe 2 (Quadrat ablaufen) so gelöst, dass dein Code aus 4x genau den gleichen vier Zeilen Code besteht. Dies ist zwar richtig, vom Programmierstyle her aber nicht sehr elegant. Mit `repeat` kannst du sagen, dass du einen Codeblock eine gewisse Anzahl mal hintereinander ausführen möchtest:
+Wahrscheinlich hast du die Aufgabe 2 (Quadrat ablaufen) so gelöst, dass dein Code aus 4x genau den gleichen vier Zeilen Code besteht. Dies ist zwar richtig, aber nicht sehr elegant. Mit `repeat` kannst du sagen, dass du einen Codeblock eine gewisse Anzahl mal hintereinander ausführen möchtest:
 <code python>
@@ Zeile 122: / Zeile 192: @@
 Bemerkungen:
-   * Der Codeblock, welcher mehrfach Wiederholt werden soll muss nach dem `repeat` Befehl **eingerückt** sein, und zwar um genau 4 Leerzeichen (oder 1x Tab).
+   * Der Codeblock, der wiederholt werden soll muss nach dem `repeat` Befehl **eingerückt** sein, und zwar um genau 4 Leerzeichen (oder 1x Tab).
-   * **Kommentare** werden in Python mit `#` gekennzeichnet. Kommentare werden von Python *ignoriert*. Man kann diese z.B. brauchen, um im Code Erklärungen anzufügen, damit jemand andere den Code besser verstehen kann.
+   * **Kommentare** werden in Python mit `#` gekennzeichnet. Kommentare werden von Python *ignoriert*. Damit werden im Code Erklärungen eingefügt, damit jemand andere den Code besser verstehen kann.
+Löse nochmals Aufgabe A2. Schreibe deine Lösung um, indem du den `repeat` Befehl verwendest.
+<bottom-exercise id="a4" layout='canvas' showswitcher>
+<script type="text/x-starter">
+</script>
+<script type="text/x-solution">
+from turtle import *
+fritz = Turtle()
+repeat 4:
+    fritz.forward(100)
+    fritz.left(90)
+</script>
+</bottom-exercise>
-Mache eine Kopie deiner Lösung aus Aufgabe A2. Schreibe nun deine Lösung um, indem du den `repeat` Befehl verwendest.
 ===== - Kreisbogen =====
@@ Zeile 153: / Zeile 237: @@
 Verwende die Befehle `dot(), forward(), right(), left()`, um folgende Figur zu zeichnen:
-{{:gf_informatik:s1a4.png?nolink&300|}}
+{{.:programmieren_i_new:pasted:20260421-164903.png?nolink&300}}
+<bottom-exercise id="b1" layout='canvas' showswitcher>
+<script type="text/x-starter">
+</script>
+<script type="text/x-solution">
+from turtle import *
+matteo = Turtle()
+repeat 2:
+    matteo.dot(20)
+    matteo.left(45)
+    matteo.forward(100)
+    matteo.dot(20)
+    matteo.right(90)
+    matteo.forward(100)
+    matteo.dot(20)
+    # Turn left only 45° as the next round
+    # will start with a left turn.
+    matteo.left(45)
+</script>
+</bottom-exercise>
 Versuche nun deinen Code zu kurz wie möglich zu schreiben. Vermeide Code-Wiederholungen, arbeite deshalb mit `repeat`.
@@ Zeile 161: / Zeile 267: @@
 Zeichne mit Hilfe der Befehle `circle()` die nebenstehende Figur.
-{{:gf_informatik:a1_6.png?nolink&300|}}
+{{.:programmieren_i_new:pasted:20260421-165112.png?nolink&300|}}
+<bottom-exercise id="b2" layout='canvas' showswitcher>
+<script type="text/x-solution">
+from turtle import *
+matteo = Turtle()
+matteo.left(90)
+matteo.teleport(-100, 0)
+matteo.circle(-100, 180)
+matteo.circle(-50, 180)
+matteo.circle(50, 180)
+</script>
+</bottom-exercise>
 === Aufgabe B3 ===
@@ Zeile 167: / Zeile 288: @@
 Zeichne die folgende Schmetterling-Figur:
-{{: gf_informatik:butterfly.png?nolink&250|}}
+{{.:programmieren_i_new:pasted:20260421-165245.png?nolink&250|}}
+<bottom-exercise id="b3" layout='canvas' showswitcher>
+<script type="text/x-starter">
+</script>
+<script type="text/x-solution">
+from turtle import *
+matteo = Turtle()
+matteo.left(90)
+matteo.circle(-25, 360)
+matteo.circle(-50, 360)
+matteo.circle(-100, 70)
+matteo.teleport(0, 0)
+matteo.setheading(90)
+matteo.circle(25, 360)
+matteo.circle(50, 360)
+matteo.circle(100, 70)
+</script>
+</bottom-exercise>
 === Aufgabe B4 ===
@@ Zeile 173: / Zeile 316: @@
 Zeichne die folgenden Figuren;
-{{:gf_informatik:s1a123.png?nolink&600|}}
+{{.:programmieren_i_new:pasted:20260421-165446.png?nolink&300|}}
+<bottom-exercise id="b4" layout='canvas' showswitcher>
+<script type="text/x-starter">
+</script>
+<script type="text/x-solution">
+from turtle import *
+anna = Turtle()
+# 1
+anna.left(90)
+anna.teleport(-150,-75)
+repeat 3:
+    anna.forward(100)
+    anna.right(120)
+# 2
+anna.teleport(-50,-50)
+repeat 6:
+    anna.forward(50)
+    anna.right(60)
+# 3
+anna.teleport(50,-50)
+repeat 2:
+    anna.forward(50)
+    anna.right(90)
+repeat 3:
+    anna.forward(50)
+    anna.left(90)
+</script>
+</bottom-exercise>
 === Aufgabe B5 ===
@@ Zeile 179: / Zeile 359: @@
 Gelingt es dir die nebenstehende Figur in einem Zug zu zeichnen, ohne dass dabei eine Strecke zweimal durchlaufen wird?
-{{: gf_informatik:s1a5.png?nolink&200|}}
+{{.:programmieren_i_new:pasted:20260421-165601.png?nolink&200|}}
+<bottom-exercise id="b5" layout='canvas' showswitcher>
+<script type="text/x-starter">
+</script>
+<script type="text/x-solution">
+from turtle import *
+from math import sqrt
+josef = Turtle()
+m = 200
+l = m*sqrt(2)
+s = m/sqrt(2)
+josef.left(135)
+josef.forward(l)
+repeat 2:
+    josef.right(90)
+    josef.forward(s)
+josef.right(90)
+josef.forward(l)
+josef.right(135)
+josef.forward(m)
+repeat 3:
+    josef.right(90)
+    josef.forward(m)
+</script>
+</bottom-exercise>
-===== - Farben (**Optional) =====
+===== - Farben =====
 Wir haben gelernt, wie man mit einem Turtle Figuren zeichnen kann. Nun wollen wir noch etwas Farbe ins Spiel bringen!
@@ Zeile 189: / Zeile 396: @@
 Just for fun:
-  * Kopiere den folgenden Code nach TigerPython (oder folge [[https://webtigerpython.ethz.ch/?code=NobwRAdghgtgpmAXGGUCWEB0AHAnmAGjABMoAXKJMAYgAIAVAVwCcyAbOWgdzWeNrQxsAe1Zo4rWowj84GThDiNOTVh1ow0ZADoQ6xODFoA5WHAi0A5ADNmWgF6XuvWcwDOZOGzZlMu28JGZCzsnIIikgBU_nZk9rQAvAwhHAAUAJS6unQAYrHxPHy00ADGABa0wgBG5lIytGwYANZutJ4cEWTirH4Qtg6YjNgZMQNucGQibqkAtACsAAwEtIuZffmYxMJcECMQ2bSYR7oAyiXMcOYZmFUA5iXCbKKp2mAXxK9r_XGYD0_MLzAXDKWjgnyy6wGNVuGAA-tY0N49hdsHByLQACyIXS0XG0FFosi0ADM2IseIp33smGsoi4UD4qQAjAsFmsKZSNnZbmUyKkAJxsnF4qmYDjWPlMgAcQshP3MxHhiLYGTAAF8ALpAA|diesem Link]])!
+  * Lies den folgenden Code, aber führe ihn noch nicht aus!
   * Überlege dir bei jedem Codeblock, was dieser tut, und dokumentiere in einem Kommentar!
   * Vergleicht eure Voraussagen zu zweit.
   * Führe den Code aus!
     * Trifft deine Voraussage zu?
+    * Was musst du ändern, damit der Code funktioniert?
   * Ändere den Code ab, um das Bild zu verändern!
-<code python>
+<bottom-editor layout='canvas' showswitcher id='swissflag' session='isolate'>
 # Turtle wird importiert und eine neue Turtle mit
 # dem Namen 'fritz' wird erstellt.
-from turtle import *
+# TODO import
 fritz = Turtle()
@@ Zeile 216: / Zeile 424: @@
     fritz.left(180)
 fritz.end_fill()
-</code>
+</bottom-editor>
 Studiere den Code Zeile für Zeile. Stelle sicher, dass du folgende Befehle genau verstehst.
@@ Zeile 238: / Zeile 446: @@
 {{:gf_informatik:programmieren_i:pasted:20240906-095752.png?nolink&163}}
-<nodisp 2>
+<bottom-exercise id="c1" layout='canvas' showswitcher>
-++++Lösung|
+<script type="text/x-starter">
+</script>
+<script type="text/x-solution">
+from turtle import *
+t = Turtle()
+# Farbe und Stiftbreite
+t.color("purple")
+t.width(5)
+# Gefüllter Kreis
+t.begin_fill()
+t.circle(50)
+t.end_fill()
+# Griff
+t.right(90)
+t.forward(75)
+t.backward(40)
+t.left(90)
+t.forward(40)
+t.backward(80)
+</script>
+</bottom-exercise>
-<html><iframe src="https://webtigerpython.ethz.ch/?code=NobwRAdghgtgpmAXGGUCWEB0AHAnmAGjABMoAXKJMAMwCcB7GAAjIFdayAbOJtGbehyYAqADoQm4skwC8TACrsucABQBKKZgAWaYnDYdu68ZIgBiJgDEotAEY9WEYkwDKZNNTK3acNGTiaAMb0nIIqomDY7NjcERoQZJgA7rpkWioArPGmFgDicNQAP5yc_rRMANI-aADOmvYA5hgA-tRoJcYJmIFotIFGGQAM8YlwTq3tnJ05TLm0HtSa8w1aZCoAnMOa1IJJNsQqAOxZ9VCBANZ7tAcALFtd3J4b94k7tFe3L5i2Z5f7KgAOYZgAC-AF0gA&layout=%5B%22Editor%22%2C%22Canvas%22%5D" allow="usb;clipboard-write" style="border: 1px solid lightgray; height: 30lh; width: 100%">
-</iframe>
-</html>
-++++
-</nodisp>
 === Aufgabe C2 ===
@@ Zeile 253: / Zeile 480: @@
 {{:gf_informatik:programmieren_i:pasted:20240906-095842.png?nolink&175}}
-<nodisp 2>
+<bottom-exercise id="c2" layout='canvas' showswitcher>
-++++Lösung|
+<script type="text/x-starter">
-<html><iframe src="https://webtigerpython.ethz.ch/?code=NobwRAdghgtgpmAXGGUCWEB0AHAnmAGjABMoAXKJMAMwCcB7GAAjIFdayAbOJtGbehyYAqADoQm4skwC8TACrsucABQBKKZgAWaYnDYdu6pkwDETAGpxaAZzJwAxgGtpxND0WGerCMSaoHLVcoGyYALTg0QIg4CRtouE5OTHFxcwAJDHtaAHNaH2IAWgImADEAH6TCpgKmAGUyNGoyaihaACM4cTqHWjhY9Ux2nId6TkEVUTBONByg9s5WLrANCDJMajQk0fHaSbBcRPGAdynV9exYnYmp0lonPuIzzWPdMi0VABZVtPrHLVCAFFnLFNJ0chgAPqbJLqcR9S7kJgANkQ4hMJnW1EExzaxC-AAZVhiWJhaLMgioAIwAJiJ6IxWJxeMJxMZmG4zRUyPpa0wsWI0K2nDhEDAAF8ALpAA&layout=%5B%22Editor%22%2C%22Canvas%22%5D" allow="usb;clipboard-write" style="border: 1px solid lightgray; height: 30lh; width: 100%">
+</script>
-</iframe>
+<script type="text/x-solution">
-</html>
+from turtle import *
+t = Turtle()
+# Hintergrund-, Füll- und Stiftfarbe
+Screen().bgcolor("lightblue")
+t.fillcolor("yellow")
+t.pencolor("darkred")
+t.width(4)
+# Sechs Ecken
+t.begin_fill()
+repeat 6:
+    t.forward(40)
+    t.right(120)
+    t.forward(40)
+    t.left(60)
+t.end_fill()
+</script>
+</bottom-exercise>
-++++
-</nodisp>
 === Aufgabe C3 ===
@@ Zeile 267: / Zeile 511: @@
 {{:gf_informatik:pasted:20230905-084624.png?nolink&200}}
-<nodisp 2>
+<bottom-exercise id="c3" layout='canvas' showswitcher>
-++++Lösung|
+<script type="text/x-starter">
-<html><iframe src="https://webtigerpython.ethz.ch/?layout=%5B%22Editor%22%2C%20%22Canvas%22%5D&lang=de&full_screen=false&dark_mode=false&device=-&code=NobwRAdghgtgpmAXGGUCWEB0AHAnmAGjABMoAXKJMAMwCcB7GAAjIFdayAbOJtGbehwBUAHQhMxZJgF4mAFXZc4ACgCUkzAAs0xOGw7c1GgM7Y4cYsoAM68WIDKAY1rmIazACMA5o%2FqdByiJguHCc%2FgDuQbZkmL7%2BtIFgLsRRYhIQAMRM9hRkUl5QEABeTABuaKFwtEwAWlCOANZwEIhMADIYFeLE7I6aRRWazZgjGh5wXhgA%2BtRoYUYQLmbkTADMAGyIaUw7MdSC4VC0lgCMVjbbu5i0aF6aZMonqzY7WRtCT1a8xlJwGEwANQqnGo9SGxjK9HEGy%2BAHFaFBiJgNM1iDM5pw1GAAL4AXSAA" allow="usb;clipboard-write" style="border: 1px solid lightgray; height: 500px; width: 100%">
+</script>
-</iframe>
+<script type="text/x-solution">
-</html>
+from turtle import*
+t = Turtle()
+t.speed(0)  # Maximale Geschwindigkeit
+Screen().bgcolor("yellow")
+t.color("red")
+# Statt ganz vieler Zacken: Linien durchziehen...
+t.begin_fill()
+repeat 36:
+    t.forward(100)
+    t.right(130)  # 36*130 ist ein Vielfaches von 360 Grad.
+t.end_fill()
+</script>
+</bottom-exercise>
-++++
-</nodisp>
-===== - Lösungen =====
-<nodisp 1>
-++++Lösungen A|
-==== Aufgaben A ====
-===== A2 =====
-<html><iframe src="https://webtigerpython.ethz.ch/?code=NobwRAdghgtgpmAXGGUCWEB0AHAnmAGjABMoAXKJMAMwCcB7GAAjIFdayAbOJtGbehyYAqADoQm4umjIAvJgF4mAFXZc4ACgCU4qbRmzM1QQHcotYhoCMABhs6I0uZm7UyGgJz29Bo6fOWtt6O-s6u7l4OTobGtGYW1nZRoYbhnsHRfnEBiRkpLnBu6Q5gAL4AukA&layout=%5B%22Editor%22%2C%22Canvas%22%5D" allow="usb;clipboard-write" style="border: 1px solid lightgray; height: 20lh; width: 100%">
-</iframe>
-</html>
-===== A3 =====
-<html><iframe src="https://webtigerpython.ethz.ch/?code=NobwRAdghgtgpmAXGGUCWEB0AHAnmAGjABMoAXKJMAMwCcB7GAAjIFdayAbOJtGbehyYAqADoQm4umjIAvJgF4mAFXZc4ACgCU48QGImAIVYBjABYBnCgCM4iJgGkptGbMzdqZDQE4ADDohpOUwyOG4BDg0AWgAmX18CJiiARniAoLdqQQB3KFpiDTj_Z1cQsLgIr1j4gmLAl2CXAHMzLwAWAFZ0hsycvILktuTu0tDwwSqi2pHGtBavPxne2lz8jUHh3QgDY3MrKFt7AGUS4LGKieiOhJS007cPdq77zCyV_vW7-tLHnzqM159Napf49dxwTx_JaA97Ar4A5qtKEvN6rAbwsGIhag0qoj4ggL6IymSw2OxMABKL3OlU-NwJL1-ixRQIKRWhWOR32CeLhONm8y5AN56P5bk5zO5yzRdOhv2SAGZnlKYTKNlowABfAC6QA&layout=%5B%22Editor%22%2C%22Canvas%22%5D" allow="usb;clipboard-write" style="border: 1px solid lightgray; height: 20lh; width: 100%">
-</iframe>
-</html>
-===== A4 =====
-<html><iframe src="https://webtigerpython.ethz.ch/?code=NobwRAdghgtgpmAXGGUCWEB0AHAnmAGjABMoAXKJMAMwCcB7GAAjIFdayAbOJtGbehyYAqADoRxdNGQBeTALxMAKuy5wAFAEpx42nGxxyTACyJxTC0ymzM1QQHcotYuoCMABnfaIlq7WkymNzUZOoAnF7iYAC-ALpAA&layout=%5B%22Editor%22%2C%22Canvas%22%5D" allow="usb;clipboard-write" style="border: 1px solid lightgray; height: 20lh; width: 100%">
-</iframe>
-</html>
-++++
-</nodisp>
-<nodisp 2>
-++++Lösungen B|
-==== Aufgaben B ====
-===== B1 =====
-<html><iframe src="https://webtigerpython.ethz.ch/?code=NobwRAdghgtgpmAXGGUCWEB0AHAnmAGjABMoAXKJMAMwCcB7GAAjIFdayAbOJtGbehyYAqADoRxqMmTj0mAXiYAVdlzgAKAJTjxtONjjkmAJkTimFplJn1MxemXXGADNoiWr5G5m7VHAFgBWNw9rWUxqQQB3KFpidQBGZ1dzSzDbe0cXELSvcNo0AHMAC0cAThT3XOlwyNoYuMTknIt0uwcnSo8AYmV2d18yJnoITlwmIIAGpigAZxZingg4AA8hhlYIYlSLXqi0Tk4mWYohfbJimaZBln7MHc8a20H1ILcwAF8AXSA&layout=%5B%22Editor%22%2C%22Canvas%22%5D" allow="usb;clipboard-write" style="border: 1px solid lightgray; height: 20lh; width: 100%">
-</iframe>
-</html>
-===== B2 =====
-<html><iframe src="https://webtigerpython.ethz.ch/?code=NobwRAdghgtgpmAXGGUCWEB0AHAnmAGjABMoAXKJMAMwCcB7GAAjIFdayAbOJtGbehyYAqADoRxqMmTj0mAXiYAVdlzgAKAJSTyM-pm7Uy6gJwAGbRIhS9mGdwEd1AWgDMZswSYXxO6bMwAYzRaQO4Xd08mAEYADh9rXQDg0PDnaIBWKLiEm2SQsI1M7PjLMABfAF0gA&layout=%5B%22Editor%22%2C%22Canvas%22%5D" allow="usb;clipboard-write" style="border: 1px solid lightgray; height: 20lh; width: 100%">
-</iframe>
-</html>
-===== B3 =====
-<html><iframe src="https://webtigerpython.ethz.ch/?code=NobwRAdghgtgpmAXGGUCWEB0AHAnmAGjABMoAXKJMAMwCcB7GAAjIFdayAbOJtGbehyYAqADoRxqMmTj0mAXiYAVdlzgAKAJSTyM-pm7Uy6gJwAGbRIhS9mAMZpad7uoC0ARjNmCTAMwA2Cx1pWXtHZw1XACYvHwCg611QhycXVwAWWKYAdgTg2xluAQ51byYEm1CAZzgyAAs4KGIMAHNTPMSQ_RSI9U8y-MtK7vCXGIHAoaSR1I1MstzLMABfAF0gA&layout=%5B%22Editor%22%2C%22Canvas%22%5D" allow="usb;clipboard-write" style="border: 1px solid lightgray; height: 20lh; width: 100%">
-</iframe>
-</html>
-===== B4 =====
-<html><iframe src="https://webtigerpython.ethz.ch/?code=NobwRAdghgtgpmAXGGUCWEB0AHAnmAGjABMoAXKJMAMwCcB7GAAjIFdayAbOJtGbehyYAqADoRxUCNCYBeJgBV2XOAAoAlJOlRMACzTE4bDtw3jxAYiYBGLdEzdqZVQE4ADJujbMZONwEcqgC0AMwArG4EQdZuHuYQtHDYcORMIYjiTFlMUvbUggDuULTEqgBMsZ7ZOd60aADmus7WFZ6WTGV2Or7-gs7RsVERbQlJKWRMAGwZENW5Ovm0RSWqMXGz2fOYdY3Ok-vtIV0-fkl9qxFDB6PJqWUzc96Ly6VrVZu1DU2u64m3E-lMh88oViq9KkCsltHM53OowABfAC6QA&layout=%5B%22Editor%22%2C%22Canvas%22%5D" allow="usb;clipboard-write" style="border: 1px solid lightgray; height: 20lh; width: 100%">
-</iframe>
-</html>
-===== B5 =====
-<html><iframe src="https://webtigerpython.ethz.ch/?code=NobwRAdghgtgpmAXGGUCWEB0AHAnmAGjABMoAXKJMAMwCcB7GAAjIFdayAbOJtGbehyYAqADoQm4gFb0AznGpMAvEwAq7LnAAUASnEBiGfOqYAFmmJw2HbrvHjmKgEwAGF-M7KmMYbICOHFpOehCyXjAA9P6BwfYQRgqY3NRkWgCMAMwArCEJJtSCAO5QtMRanCG0cNhw5ExOiOJMzUx5mLRoAOamqQCcLiEtrXKJBbTFpVqyuSMmHd19A9KzmGMTZRXLxu1dPenZM9trJWUwldW1ZEwZjRItbfN7_YP3K8eTZ2AAvgC6QA&layout=%5B%22Editor%22%2C%22Canvas%22%5D" allow="usb;clipboard-write" style="border: 1px solid lightgray; height: 20lh; width: 100%">
-</iframe>
-</html>
-++++
-</nodisp>