Testseite für Autorinnen und Autoren. Sie zeigt alle Zuschnitte des Werkzeugs nebeneinander — dieselbe Reihe wie die Entwicklungsseite im Git-Repository, hier aber so eingebunden, wie es eine Buchseite tut: über Features: oopython in der inhalt.txt und je Werkzeug ein div mit data-config. Unter jedem Werkzeug lässt sich der Zuschnitt aufklappen, mit dem es eingebunden ist.

Das Werkzeug lädt Pyodide, wenn es in den Sichtbereich kommt — und nur einmal je Seite, alle Werkzeuge einer Seite teilen sich die Laufzeit. Das erste Laden dauert je nach Verbindung einige Sekunden; danach starten die übrigen Werkzeuge sofort.

Die Schlüssel im data-config

Alles, was fehlt, bekommt seinen Vorgabewert. Die Kette lautet Vorgabe → Profil → Einzelangaben: Ein Profil überschreibt die Vorgabe, eine Einzelangabe im selben data-config überschreibt das Profil.

Ein abgeschalteter Bereich ist auch nicht über Umwege erreichbar — weder über ein Menü noch über Doppelklick oder Tastenkürzel.

Die fünf Profile

Schreibweise in der inhalt.txt

Der übliche Weg: Die Python-Dateien liegen im Ordner der Seite, neben der inhalt.txt, und werden unter dateien mit ihrem Namen genannt — eine einzelne Datei oder eine Liste. Der Dateiname ist zugleich der Modulname, unter dem eine Datei aus einer anderen importiert werden kann.

<div class="oopython" data-config='{"titel": "Würfelspiel", "dateien": ["wuerfel.py", "spiel.py"], "profil": "mehrere-klassen"}'></div>

Für ein kurzes Programm geht es auch ohne Datei, mit quelltext direkt im Attribut. Dann gilt: Zeilenumbrüche als \n, Anführungszeichen im Quelltext als \", und weil das Attribut in einfachen Anführungszeichen steht, darf der Quelltext keine einfachen Anführungszeichen enthalten — in Python also durchgehend doppelte verwenden.

<div class="oopython" data-config='{"titel": "Ampelsteuerung", "quelltext": "class Ampel(object):\n    def __init__(self):\n        self.farbe = \"rot\"\n\n    def weiter(self):\n        if self.farbe == \"rot\":\n            self.farbe = \"gruen\"\n        else:\n            self.farbe = \"rot\"\n", "profil": "objekte-benutzen"}'></div>

In beiden Fällen steht das data-config in einer Zeile; ein Umbruch im Attribut zerlegt das JSON, weil der Text durch KirbyText läuft.

Bereichsmarken im Aufgabentext

Jeder Bereich des Werkzeugs trägt sein Sinnbild im Kopf. Dasselbe Sinnbild lässt sich mitten in einen Satz setzen, damit „öffne die “ nicht gesucht werden muss. Dafür genügt ein leeres span:

Erzeuge unter <span class="oopy-marke" data-bereich="klassen"></span> ein Konto und
sieh es dir in der <span class="oopy-marke" data-bereich="objektbank"></span> an.

Gefüllt wird es beim Seitenaufbau. Voraussetzung ist nur Features: oopython — ein Werkzeug muss auf der Seite nicht unbedingt stehen, aber das Feature schon.

Steht im span schon ein Wort, bleibt es stehen und bekommt nur das Sinnbild davor. Das braucht man oft, weil der deutsche Satz beugt oder ein anderes Wort verlangt als der Bereichskopf: <span class="oopy-marke" data-bereich="diagramm">Klassendiagramm</span> ergibt Klassendiagramm, data-bereich="codespiegel" mit dem Wort Code-Spiegels ergibt Code-Spiegels.

Ein unbekannter Bereichsname lässt den Satz unverändert stehen und meldet sich auf der Browserkonsole — ein Tippfehler reißt also keine Lücke in die Aufgabe.

Wofür nicht: Eine Marke bezeichnet einen Ort im Werkzeug. Wenn im Text das Fachkonzept gemeint ist — „stell die Klasse per Hand mit einem Klassendiagramm dar“ — gehört dort keine Marke hin. Auf der Übungsseite stehen beide Bedeutungen im selben Satz; genau dort trägt das Sinnbild den Unterschied.

A — Volles Werkzeug

Alle Bereiche sichtbar, alle Rechte vergeben, Schalter für die Lernenden freigegeben. So sieht das Werkzeug aus, wenn nur eine Datei angegeben ist — hier zusätzlich mit quelltextAnzeigen, damit die Leseansicht neben dem Editor zu sehen ist. Die Datei konto.py liegt im Ordner dieser Seite.

{
  "titel": "Bankkonten",
  "quelltextAnzeigen": true,
  "dateien": "konto.py"
}

B — Profil „Objekte benutzen“

Erste Stunde: Objekte erzeugen und Methoden aufrufen, sonst nichts. Das Diagramm zeigt nur Klassennamen; , , und Code-Pad sind weg, und die Lernenden können nichts umstellen. Übrig bleiben Diagramm, und . Hier steht der Quelltext ausnahmsweise direkt im Attribut (quelltext).

{
  "titel": "Ampelsteuerung",
  "profil": "objekte-benutzen",
  "quelltext": "…"
}

C — Profil „Zustand verstehen“

Mit und : Der Blick geht ins Objekt (Doppelklick auf eine Objektkarte), aber noch nicht in den Code. Attribute und Methoden stehen im Diagramm.

{
  "titel": "Bankkonten",
  "profil": "zustand-verstehen",
  "dateien": [
    "konto.py"
  ]
}

D — Profil „Selbst programmieren“

und Code-Pad, eine Datei. Das Diagramm folgt dem Quelltext schon beim Tippen; ausgeführt wird auf Knopfdruck. Das Code-Pad benutzt denselben Namensraum wie die .

{
  "titel": "Bankkonten",
  "profil": "selbst-programmieren",
  "dateien": [
    "konto.py"
  ]
}

E — Profil „Mehrere Klassen“ — zwei Dateien

spiel.py importiert die Klasse aus wuerfel.py. Beide Dateien liegen als Reiter nebeneinander, beide Klassen stehen im Diagramm. dateien ist hier eine Liste aus zwei Pfaden. Spiel.namen_erfragen() zeigt, wie input() in einem Dialogfenster fragt.

{
  "titel": "Würfelspiel",
  "profil": "mehrere-klassen",
  "dateien": [
    "wuerfel.py",
    "spiel.py"
  ]
}

F — Profil „Modellierung“

Voller Umfang, zusätzlich mit internen Elementen: Attribute und Methoden mit Unterstrich sowie die Dunder-Methoden erscheinen im Diagramm und im Inspektor. Für die Oberstufe, wenn Datenkapselung zum Thema wird.

{
  "titel": "Bankkonten (Modellierung)",
  "profil": "modellierung",
  "dateien": [
    "konto_intern.py"
  ]
}

G — Quelltext nur zum Lesen

Kein Editor, kein Code-Pad, aber der Quelltext ist einsehbar. Für Aufgaben, in denen ein gegebenes Programm gelesen und benutzt, aber nicht verändert werden soll. Der Doppelklick auf einen Klassenkasten springt in die Leseansicht.

{
  "titel": "Bankkonten (nur lesen)",
  "editor": false,
  "codepad": false,
  "quelltextAnzeigen": true,
  "dateien": [
    "konto.py"
  ]
}

H — Entzogene Rechte und ausgewählte Klassen

Auf dem Profil „Selbst programmieren“ sind Bearbeiten, Zurücksetzen und Objektverwaltung entzogen. Der Quelltext enthält zwei Klassen, aber sichtbareKlassen zeigt nur Konto im Diagramm. So sieht eine Aufgabe aus, in der die Vorgabe nicht zerstört werden können soll.

{
  "titel": "Konto (nur benutzen)",
  "profil": "selbst-programmieren",
  "bearbeiten": false,
  "zuruecksetzen": false,
  "objekteVerwalten": false,
  "sichtbareKlassen": [
    "Konto"
  ],
  "dateien": [
    "konto_bank.py"
  ]
}

I — Abweichung vom Profil

Ein Profil wirkt zuerst, danach die Einzelangaben: Hier ist das Profil „Zustand verstehen“ gewählt, aber der Editor wieder eingeschaltet und die Objektnummern abgeschaltet. Wer ein Profil wählt und dann einen Schalter setzt, meint die Abweichung.

{
  "titel": "Bankkonten (Profil mit Abweichung)",
  "profil": "zustand-verstehen",
  "editor": true,
  "objektnummern": false,
  "dateien": [
    "konto.py"
  ]
}

J — Laden erst auf Klick

Mit laden: "klick" holt das Werkzeug Pyodide erst, wenn jemand es anstößt — statt beim Scrollen in den Sichtbereich. Sinnvoll weit unten auf langen Seiten oder wenn das Werkzeug nur eine Zusatzaufgabe trägt. Außerdem ohne Sichern des Arbeitsstands im Browser.

{
  "titel": "Ampelsteuerung (Laden auf Klick)",
  "laden": "klick",
  "speichern": false,
  "dateien": [
    "ampel.py"
  ]
}

K — Hauptprogramm aus einer Datei

Neben den Klassen ein Hauptprogramm, das sie benutzt — hier aus main_wuerfel.py. Es läuft auf Knopfdruck im Namensraum der Objektbank: entstandene Objekte werden Karten, die Ausgabe landet in der Ausgabe. Mit dem Haken „Bisherige Objekte behalten“ läuft es über der bestehenden Objektbank und hängt seinen Text ans Protokoll; ohne Haken beginnt es bei null. Eine Schleife, die nicht endet, wird abgebrochen.

{
  "titel": "Würfel mit Hauptprogramm",
  "hauptprogramm": "main_wuerfel.py",
  "profil": "selbst-programmieren",
  "laden": "klick",
  "dateien": [
    "wuerfel_uebung.py"
  ]
}

L — Anweisungen außerhalb der Klasse

zaehler_mit_programm.py enthält unter der Klasse noch Anweisungen. Beim Laden wandern sie ins Hauptprogramm, die Übernahme wird angezeigt; Import, Klasse und die Konstante OBERGRENZE bleiben in der Datei. So läuft beim Laden nichts unbemerkt, sondern erst auf Knopfdruck.

{
  "titel": "Zähler (Anweisungen werden übernommen)",
  "profil": "selbst-programmieren",
  "laden": "klick",
  "dateien": [
    "zaehler_mit_programm.py"
  ]
}

Was hier zu prüfen ist

• Fügt sich das Werkzeug in Breite, Abstand und Schrift in die Buchseite ein — auch auf einem schmalen Bildschirm?
• Sind zehn Werkzeuge auf einer Seite noch bedienbar, oder braucht es laden: "klick" ab einer gewissen Zahl?
• Lässt sich jedes Werkzeug vollständig mit der Tastatur bedienen?
• Passen die Bezeichnungen der Bereiche und Profile zum Sprachgebrauch auf inf-schule?