Web 0.15.4: Lektion 1 geteilt, neue Lektion 2 „PAP und Pseudocode“

CHANGELOG.md

@@ -7,8 +7,9 @@ The format is loosely inspired by Keep a Changelog.
 ## [Unreleased]
 
 ### Changed
-- **Web 0.15.3, VisuBot orange like visucode.de:** the VisuBot theme in the app used #e07000 (buttons, selection, focus) and #f08a00 („Bot“ in the title bar), the visucode.de start page uses #c2410c with the gradient #ea580c → #c2410c (css/visucode.css, MARKE.md). The app now uses the same values; white text on the accent goes from 3.2 : 1 to 5.2 : 1. The command group „Fahren“ (stripe and dot) moves from the old VisuBot orange #d96a00 to #c2410c as well.
 
+- **Web 0.15.4, lesson 1 split in two:** VisuStruct lesson 1 „Was ist ein Struktogramm?“ was very long (15 steps). It now covers algorithm, reading a structure chart, the three building blocks, „Erst die Struktur, dann der Code“, the game „Welcher Baustein?“, checklist and quiz. The new lesson 2 „PAP und Pseudocode“ (`01-weitere-darstellungen.md`) takes the flowchart part (PAP elements, exercise „Kuchen backen als PAP“, jumps/GOTO/spaghetti code, pseudocode and comparison) with its own Kompetenzen, a new game „Welche Darstellung?“ (structure chart, flowchart or pseudocode, eight rounds), checklist and quiz (de/en/pt). VisuStruct now numbers lessons like VisuBot: in file order, so the new lesson keeps file number 01 and no file is renamed (progress stays). All later lessons move up by one; „Lektion N“ in texts and `nach:` in tasks are renumbered automatically. Saved step positions in lesson 1 may point to a later step than before. New test checks the split and the renumbered references.
+- **Web 0.15.3, VisuBot orange like visucode.de:** the VisuBot theme in the app used #e07000 (buttons, selection, focus) and #f08a00 („Bot“ in the title bar), the visucode.de start page uses #c2410c with the gradient #ea580c → #c2410c (css/visucode.css, MARKE.md). The app now uses the same values; white text on the accent goes from 3.2 : 1 to 5.2 : 1. The command group „Fahren“ (stripe and dot) moves from the old VisuBot orange #d96a00 to #c2410c as well.
 - **Web 0.15.2, checklist and quiz always in their own steps:** every lesson in both worlds now ends with its own „Checkliste“ step followed by its own „Wissenstest“ step, after at least one game (Holger: VisuBot lesson 1 step 5 had both in one step before 0.14.33). Three robot lessons still lacked a final quiz step: L2 „Der mBot2“ (game „Sensor oder Aktor?“ moves into its own step before the checklist, the quiz from „Sensoren und Aktoren“ moves to the new „Wissenstest“ and gets six more questions, one per checklist item), L3 „Das Quadrat“ and L27 „Eigene Methoden“ (new „Wissenstest“ with five questions each; the small quizzes inside the steps stay). de/en. A new test (`web/test/lessonEnd.ts`, used by lessons.test.ts and visubotLessons.test.ts) fails if the checklist shares a step with anything else, if the quiz is not alone in the last step, or if no game comes before the checklist. Saved self-assessments in L2 start fresh because steps moved.
 - **Web 0.15.1, third hint and robot game moved:** eight harder exercises get a third hint that gives the outline of the solution box by box (L9 Schaltjahr, L10 Taschenrechner, L12 Summe bis 0, L14 Rechteck, L15 Summe und Maximum, L17 Rückwärts and Wörter zählen, L19 Absteigend sortieren; de/en/pt, with the variable names of each language). Students working alone are no longer stuck after two hints; the sample solution stays teacher-only. VisuBot: the game „Wo landet der mBot2?“ moves from lesson 1 „Struktogramm und Editor“ (where the commands with numbers in brackets were not explained yet) to lesson 2 „Der mBot2“, right after „Befehle für den mBot2“ and „Erste Fahrt“ (de/en). Saved step positions in these two lessons may shift by one.
 - **Web 0.15.0, release:** version number only, no further changes. 0.15.0 bundles everything since 0.14.x: VisuBot as a robotics-only world with its own basic lessons, a game in every lesson, repaired lesson steps (0.14.34) and lessons that are easier for self-study (0.14.35).

web/lessons/de/01-was-ist-ein-struktogramm.md

@@ -10,9 +10,6 @@ kurz: Algorithmen als Folge klarer Schritte darstellen und lesen.
 - erklären, was ein Algorithmus ist
 - ein Struktogramm lesen
 - die drei Grundbausteine Sequenz, Verzweigung und Wiederholung erkennen
-- einen PAP (englisch *flowchart*) lesen und selbst zusammenbauen
-- erklären, warum Sprünge im PAP zu Fehlern führen
-- einen einfachen Algorithmus als Pseudocode lesen
 :::
 
 ## Ein Algorithmus ist eine genaue Anleitung
@@ -45,7 +42,7 @@ Die Darstellung stammt von **Isaac Nassi und Ben Shneiderman** (1973). Deshalb h
 Links Isaac „Ike“ Nassi (Foto: [Ed Schipul](https://commons.wikimedia.org/wiki/File:Me_with_Ike_Nassi!!!!!_%286893328729%29.jpg), [CC BY 2.0](https://creativecommons.org/licenses/by/2.0/deed.de), zugeschnitten), rechts Ben Shneiderman (Foto: [Robert Kosara](https://commons.wikimedia.org/wiki/File:Ben_Shneiderman_at_UNCC_%283x4_cropped%29.jpg), CC0).
 :::
 
-> Ein Struktogramm hat immer genau einen Anfang (oben) und ein Ende (unten). Es gibt keine Pfeile und keine Sprünge kreuz und quer. Programme, die kreuz und quer springen, nennt man **Spaghetticode**, weil sich ihr Ablauf verheddert wie Nudeln auf dem Teller. Mehr dazu in Schritt 10.
+> Ein Struktogramm hat immer genau einen Anfang (oben) und ein Ende (unten). Es gibt keine Pfeile und keine Sprünge kreuz und quer. Programme, die kreuz und quer springen, nennt man **Spaghetticode**, weil sich ihr Ablauf verheddert wie Nudeln auf dem Teller. Mehr dazu in der nächsten Lektion.
 
 ::: angeberwissen
 Määäh, aufgepasst! 1972 waren Nassi und Shneiderman noch Doktoranden an der Stony Brook University bei New York, Shneiderman etwa 25 und Nassi etwa 23. Also quasi zwei Studis, die nebenbei Informatikgeschichte geschrieben haben.
@@ -123,138 +120,6 @@ Die Kästen können auch **ineinander geschachtelt** werden: In einer Schleife o
 Trostpflaster für alle mit einer verpatzten Arbeit: Die berühmte Fachzeitschrift *Communications of the ACM* hat den Struktogramm-Artikel abgelehnt. Laut Nassi meinte der Gutachter sogar, sie sollten alle Exemplare einsammeln und verbrennen. Autsch! Er erschien 1973 dann in einem kleineren Heft und wird heute tausendfach zitiert. Ätsch!
 :::
 
-## Andere Darstellungen: Der PAP
-
-Es gibt noch zwei weitere Arten, Algorithmen darzustellen: den **Programmablaufplan**, kurz **PAP**, und den **Pseudocode**. Beide wirst du im Unterricht treffen. Auf Englisch heißt der PAP **flowchart**, auf Deutsch auch Flussdiagramm. Das englische Wort begegnet dir oft, zum Beispiel in Programmen und im Internet.
-
-Hier siehst du noch einmal unser Struktogramm zum Teetrinken aus „Alle drei zusammen“. Als Nächstes schauen wir uns den PAP an, und zwar mit demselben Beispiel.
-
-::: diagramm l1-grundbausteine.visustruct
-Das Tee-Beispiel als Struktogramm: erst die Tasse, dann die Verzweigung für den Zucker, dann die Schleife.
-:::
-
-### Derselbe Algorithmus als PAP
-
-::: grafik l01-pap.svg
-Das Tee-Beispiel als Programmablaufplan. Der Pfeil von „1 Minute warten“ zurück nach oben bildet die Schleife.
-:::
-
-### Die Elemente
-
-Ein PAP besteht aus wenigen Symbolen, die mit **Pfeilen** verbunden sind. Er ist nach DIN 66001 genormt.
-
-- **Oval:** Start oder Ende. Jeder PAP hat genau einen Start und ein Ende.
-- **Rechteck:** eine Anweisung, zum Beispiel *Tasse auf den Tisch stellen*.
-- **Raute:** eine Verzweigung. In der Raute steht eine Frage, heraus führen zwei Pfeile: **ja** und **nein**.
-- **Parallelogramm:** eine Ein- oder Ausgabe. Im Tee-Beispiel kommt sie nicht vor.
-- **Pfeil:** zeigt, welcher Schritt als Nächstes kommt.
-
-Eine Schleife hat im PAP kein eigenes Symbol. Du erkennst sie daran, dass ein Pfeil **zurück nach oben** führt.
-
-### Die Vorteile
-
-- **Sehr gut lesbar**, auch für Leute, die noch nie einen PAP gesehen haben. Man folgt einfach den Pfeilen mit dem Finger.
-- Flussdiagramme benutzt man nicht nur beim Programmieren, sondern überall, wo ein Ablauf erklärt wird: in Bedienungsanleitungen, bei der Fehlersuche („Leuchtet die Lampe? Nein: Steckt der Stecker?“) oder in Firmen für Arbeitsabläufe.
-
-## Übung: Kuchen backen als PAP
-
-Jetzt baust du selbst einen PAP. Ludwig backt einen Kuchen und geht so vor:
-
-Er gibt die Zutaten in die Schüssel und rührt den Teig. Ist der Teig noch nicht glatt, rührt er weiter. Ist er glatt, füllt er den Teig in die Form und backt den Kuchen 30 Minuten. Dann prüft er mit einem Holzstäbchen: Klebt noch Teig daran, backt er 5 Minuten weiter und prüft noch einmal. Ist das Stäbchen sauber, nimmt er den Kuchen heraus und ruft: „Der Kuchen ist fertig!“
-
-::: pap
-titel: Übung: Kuchen backen als PAP
-auftrag: Die Plätze im Plan sind leer. Lege jedes Element an seinen Platz. Die Form des Platzes hilft dir.
-start: Start
-anweisung: Zutaten in die Schüssel geben
-anweisung: Teig rühren
-frage: Teig glatt? | nein -> Teig rühren
-anweisung: Teig in die Form füllen
-anweisung: Kuchen 30 Minuten backen
-frage: Stäbchen sauber? | nein: 5 Minuten weiterbacken
-anweisung: Kuchen herausnehmen
-ausgabe: „Der Kuchen ist fertig!“
-ende: Ende
-erklärung: Zwei Schleifen, zwei Pfeile zurück nach oben: Beim Rühren führt der Pfeil zurück zu „Teig rühren“, beim Backen von „5 Minuten weiterbacken“ zurück zur Frage. Die Ausgabe steht im Parallelogramm.
-legende: ja
-:::
-
-## Nachteile des PAP: Sprünge
-
-Ein Pfeil im PAP darf von jedem Symbol zu jedem anderen führen. Das klingt praktisch, ist aber gefährlich.
-
-Früher hat man Programme genau so geschrieben. Jede Zeile hatte eine **Nummer**, und der Befehl **GOTO**, auf Deutsch „gehe zu“, sprang zu einer Zeilennummer. Jedes GEHE ZU ist ein Pfeil aus dem PAP. Unser Tee-Beispiel sähe so aus:
-
-```
-10 Tasse auf den Tisch stellen
-20 WENN kein Zucker gewünscht, GEHE ZU 40
-30 Zucker hineingeben
-40 WENN Tee nicht zu heiß, GEHE ZU 70
-50 1 Minute warten
-60 GEHE ZU 40
-70 Tee trinken
-```
-
-### Eine Zeile mehr, und schon springt es falsch
-
-Jetzt verbesserst du den Algorithmus: Nach dem Zucker soll der Teebeutel heraus. Du fügst die neue Zeile 40 ein, und alle Zeilen darunter rutschen eine Nummer weiter. Die Sprünge zeigen aber noch auf die alten Nummern:
-
-```
-10 Tasse auf den Tisch stellen
-20 WENN kein Zucker gewünscht, GEHE ZU 40
-30 Zucker hineingeben
-40 Teebeutel herausnehmen
-50 WENN Tee nicht zu heiß, GEHE ZU 70
-60 1 Minute warten
-70 GEHE ZU 40
-80 Tee trinken
-```
-
-Spiel es durch: Zeile 70 schickt dich nicht mehr zur Prüfung in Zeile 50, sondern zum Teebeutel. Und wenn der Tee kühl genug ist, springt Zeile 50 zu Zeile 70 und nicht mehr zu *Tee trinken*. Du nimmst also immer wieder den Teebeutel heraus und trinkst nie. Bei jeder Änderung musst du jedes GEHE ZU prüfen. In einem großen Programm mit Hunderten Sprüngen geht dabei leicht etwas schief.
-
-### Kreuz und quer: Spaghetticode
-
-Mit Pfeilen kann man auch mitten aus einer Schleife herausspringen oder von außen mitten in eine Schleife hinein. Solche **Aussprünge** und Einsprünge machen den Plan schnell unübersichtlich. Bei vielen Sprüngen kreuzen sich die Pfeile, bis der Plan aussieht wie ein Teller Spaghetti. Deshalb nennt man das **Spaghetticode**. Den Ablauf kann man kaum noch verfolgen, und Fehler verstecken sich gut.
-
-Im Struktogramm gibt es keine Pfeile. Fügst du einen Kasten ein, rutscht alles darunter einfach mit, und kein Sprung kann auf die falsche Stelle zeigen. Für das vorzeitige Verlassen einer Schleife gibt es dort einen eigenen, ordentlichen Kasten, den Aussprung. Den lernst du in Lektion 18 kennen.
-
-::: angeberwissen
-1968 schrieb der Informatiker Edsger Dijkstra einen berühmten Brief: „Go To Statement Considered Harmful“, auf Deutsch „GOTO gilt als schädlich“. Seitdem baut man Programme nur noch aus Sequenz, Verzweigung und Wiederholung. In Java ist `goto` bis heute ein reserviertes Wort, benutzen darf man es aber nicht. Mäh, Spaghetti esse ich lieber, als sie zu programmieren.
-:::
-
-## Pseudocode und Vergleich
-
-**Pseudocode** ist Text, der wie ein Programm aussieht, aber in normaler Sprache geschrieben ist. Feste Wörter wie WENN und SOLANGE zeigen die Bausteine, die **Einrückung** zeigt, was dazugehört. Sprünge gibt es auch hier nicht. Das ist unser Tee-Beispiel:
-
-```
-Tasse auf den Tisch stellen
-WENN Zucker gewünscht DANN
-    Zucker hineingeben
-ENDE WENN
-SOLANGE Tee noch zu heiß
-    1 Minute warten
-ENDE SOLANGE
-Tee trinken
-```
-
-Pseudocode hat **keine feste Schreibweise**. Manche schreiben FALLS statt WENN, andere setzen einen Pfeil für die Zuweisung (`zahl ← 5`) oder schreiben ganz ohne ENDE-Zeilen. Das ist alles erlaubt. Wichtig ist nur, dass jeder Mensch ihn ohne Erklärung versteht. Pseudocode ist also keine weitere Programmiersprache, die man lernen muss.
-
-::: angeberwissen
-Kommt dir Pseudocode bekannt vor? Die Programmiersprache Python sieht ihm sehr ähnlich, und das ist Absicht: Ihr Erfinder Guido van Rossum wollte, dass sich Programme fast wie normaler Text lesen. Auch Python zeigt mit der Einrückung, was zusammengehört. Aber Vorsicht: Python ist eine echte Programmiersprache mit festen Regeln. Ein Leerzeichen zu viel, und der Computer meckert. Pseudocode ist da großzügiger, so wie ich beim Frühstück.
-:::
-
-### Im Vergleich
-
-- **Struktogramm:** Kästen ineinander, die Schleife ist ein gekipptes L. Die Struktur siehst du auf einen Blick, wilde Sprünge sind unmöglich.
-- **PAP:** Symbole mit Pfeilen, die Schleife ist ein Pfeil zurück nach oben. Sehr anschaulich, aber bei großen Plänen schnell unübersichtlich, und Sprünge kreuz und quer sind möglich.
-- **Pseudocode:** Text mit Einrückung, die Schleife steht zwischen SOLANGE und ENDE SOLANGE. Schnell geschrieben und schon nah am Programmcode.
-
-> Alle drei beschreiben denselben Algorithmus. Wenn du eine Form lesen kannst, lernst du die anderen schnell.
-
-::: angeberwissen
-Nassi und Shneiderman wollten den Pfeilen an den Kragen! Ihr Artikel von 1973 hieß „Flowchart Techniques for Structured Programming“. Flowchart ist das englische Wort für Ablaufplan. Mit Pfeilen kann man nämlich kreuz und quer springen, bis der Plan aussieht wie ein Teller Spaghetti. Im Struktogramm geht das gar nicht. Mäh, so mag ich das: ordentlich, wie mein Stall.
-:::
-
 ## Erst die Struktur, dann der Code
 
 Beim Programmieren passieren zwei Dinge gleichzeitig: Du musst dir den Ablauf überlegen und die Schreibweise der Programmiersprache beachten. Mit einem Struktogramm trennst du beides.
@@ -321,10 +186,6 @@ Schätze dich bei jedem Punkt ehrlich ein: ☂️ noch nicht, ⛅ teilweise, ☀
 - Ich kann ein Struktogramm von oben nach unten lesen. → So liest du ein Struktogramm
 - Ich kann die drei Grundbausteine Sequenz, Verzweigung und Wiederholung nennen. → Baustein 1: Die Sequenz
 - Ich kann jeden Baustein im Struktogramm an seiner Form erkennen. → Alle drei zusammen
-- Ich kann die Elemente eines PAP benennen und einen einfachen PAP lesen. → Andere Darstellungen: Der PAP
-- Ich kann einen einfachen Algorithmus selbst als PAP zusammenbauen. → Übung: Kuchen backen als PAP
-- Ich kann erklären, warum Sprünge mit GOTO zu Fehlern und Spaghetticode führen. → Nachteile des PAP: Sprünge
-- Ich kann einen einfachen Algorithmus als Pseudocode lesen. → Pseudocode und Vergleich
 :::
 
 ## Wissenstest
@@ -365,40 +226,4 @@ Schätze dich bei jedem Punkt ehrlich ein: ☂️ noch nicht, ⛅ teilweise, ☀
 - [ ] Ein bestimmtes Programm in Java
 - [ ] Ein Bild, das ein Programm erklärt
 > Ein Algorithmus ist unabhängig von der Programmiersprache. Ein Struktogramm ist eine Möglichkeit, ihn aufzuschreiben.
-
-? Woran erkennst du in einem Programmablaufplan (PAP) eine Schleife?
-→ Andere Darstellungen: Der PAP
-- [ ] An einem gekippten L
-- [x] An einem Pfeil, der zurück nach oben führt
-- [ ] Am Wort SOLANGE
-> Das gekippte L gehört zum Struktogramm, SOLANGE zum Pseudocode.
-
-? Ordne jedem Symbol im PAP seine Bedeutung zu.
-→ Andere Darstellungen: Der PAP
-= Oval -> Start oder Ende
-= Rechteck -> Anweisung
-= Raute -> Verzweigung
-= Parallelogramm -> Ein- oder Ausgabe
-> Die Raute hat zwei Ausgänge: ja und nein.
-
-? Wie heißt der Programmablaufplan auf Englisch?
-→ Andere Darstellungen: Der PAP
-- [x] Flowchart
-- [ ] Structure chart
-- [ ] Pseudocode
-> Auf Deutsch sagt man auch Flussdiagramm. Structure chart ist das Struktogramm.
-
-? Du fügst in ein Programm mit GOTO eine neue Zeile ein. Was kann passieren?
-→ Nachteile des PAP: Sprünge
-- [x] Die Sprünge zeigen auf die falschen Zeilen, weil sich die Nummern verschoben haben
-- [ ] Nichts, die Sprünge passen sich von selbst an
-- [ ] Das Programm wird automatisch schneller
-> Jedes GEHE ZU zeigt auf eine feste Zeilennummer. Rutschen die Zeilen weiter, springt das Programm an die falsche Stelle.
-
-? Was zeigt im Pseudocode, welche Zeilen zu einer Schleife gehören?
-→ Pseudocode und Vergleich
-- [ ] Die Farbe
-- [x] Die Einrückung und das ENDE SOLANGE
-- [ ] Ein Pfeil
-> Alles zwischen SOLANGE und ENDE SOLANGE ist eingerückt und wird wiederholt.
 :::