Web 0.13.9: PAP in Lektion 1 ausführlicher, Nachteile mit GOTO

CHANGELOG.md

@@ -8,6 +8,7 @@ The format is loosely inspired by Keep a Changelog.
 
 ### Added
 
+- **Web 0.13.9, flowchart in lesson 1 explained in more detail:** the old step „Andere Darstellungen: PAP und Pseudocode“ is now three steps. „Andere Darstellungen: Der PAP“ shows the tea Struktogramm again, then the same algorithm as PAP, its symbols and advantages (easy to read, flowcharts are used outside programming too). „Nachteile des PAP: Sprünge“ shows the tea example as a program with line numbers and GOTO, what goes wrong when one line is inserted, jumps out of loops and spaghetti code (Dijkstra moved here). „Pseudocode und Vergleich“ keeps pseudocode and the comparison. New checklist lines and a quiz question on GOTO; de/en/pt.
 - **Web 0.13.8, loop in lesson 1 is a „gekipptes L“:** lesson 1 no longer calls the loop shape in the Struktogramm a „Klammer links“ but a „gekipptes L“ (condition on top, strip on the left), in the text, the comparison and the quiz (en „upside-down L“, pt „L invertido“).
 - **Web 0.13.7, statements without class are coloured too:** when Programmieren shows the code without `class` and `main` (e.g. „Aufstehen;“, „Zähne putzen;“ in lesson 1), the statements now sit in a yellow block like a method, matching the yellow statements in the Struktogramm; loops and branches inside keep their own colours. Statements are now always yellow, also inside a loop or branch (own yellow stripe in the code, yellow box in the Struktogramm and in lesson 1); only the empty ø takes the colour of its block. A loop with pseudocode condition (`while (Tee noch zu heiß) {`) is coloured up to its closing brace.
 - **Web 0.13.6, lesson header pinned at the top:** in a lesson step the header (← Alle Lektionen, lesson title, step numbers, step title) stays at the top of the lesson column with its own ← Zurück / Weiter → buttons next to „Alle Lektionen“; only the step content below scrolls. The buttons at the end of the step stay as well.

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

@@ -102,27 +102,85 @@ 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: PAP und Pseudocode
+## Andere Darstellungen: Der PAP
 
-Ein Struktogramm ist nicht die einzige Art, einen Algorithmus aufzuschreiben. Zwei weitere wirst du im Unterricht treffen. Hier siehst du das Tee-Beispiel aus „Alle drei zusammen“ in allen drei Formen.
+Es gibt noch zwei weitere Arten, Algorithmen darzustellen: den **Programmablaufplan**, kurz **PAP**, und den **Pseudocode**. Beide wirst du im Unterricht treffen.
 
-### Struktogramm
+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.
 :::
 
-### Programmablaufplan (PAP)
-
-Der **Programmablaufplan**, kurz **PAP**, besteht aus Symbolen, die mit **Pfeilen** verbunden sind. Er ist nach DIN 66001 genormt. Eine Raute ist eine Verzweigung mit den Ausgängen ja und nein. Eine Schleife erkennst du daran, dass ein Pfeil **zurück nach oben** führt.
+### 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.
 :::
 
-### Pseudocode
+### 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.
+- Solche Pläne heißen allgemein **Flussdiagramm**, auf Englisch *flowchart*. Man benutzt sie 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.
+
+## 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.
 
-**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.
+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
@@ -138,7 +196,7 @@ Tee trinken
 ### 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.
+- **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.
@@ -156,10 +214,6 @@ Beim Programmieren passieren zwei Dinge gleichzeitig: Du musst dir den Ablauf ü
 
 Mit der **Simulation** kannst du dein Struktogramm außerdem Schritt für Schritt ausführen und prüfen, ob es wirklich tut, was es soll.
 
-::: angeberwissen
-Programme, die kreuz und quer springen, heißen **Spaghetticode**: Wer einem Faden folgen will, verheddert sich wie in einem Teller Spaghetti. Schuld war früher der Befehl GOTO, also „springe zu Zeile …“. 1968 schrieb der Informatiker Edsger Dijkstra deshalb 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.
-:::
-
 ## Spiel: Welcher Baustein?
 
 ::: spiel frage
@@ -215,7 +269,9 @@ richtig: Verzweigung
 - Ich weiß, dass ein Struktogramm von oben nach unten gelesen wird. → So liest du ein Struktogramm
 - Ich kenne die drei Grundbausteine Sequenz, Verzweigung und Wiederholung. → Baustein 1: Die Sequenz
 - Ich erkenne jeden Baustein im Struktogramm an seiner Form. → Alle drei zusammen
-- Ich kann einen einfachen Algorithmus auch als PAP und als Pseudocode lesen. → Andere Darstellungen: PAP und Pseudocode
+- Ich kenne die Elemente eines PAP und kann einen einfachen PAP lesen. → Andere Darstellungen: Der 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 auch als Pseudocode lesen. → Pseudocode und Vergleich
 :::
 
 ## Wissenstest
@@ -265,6 +321,12 @@ richtig: Verzweigung
 = Parallelogramm -> Ein- oder Ausgabe
 > Die Raute hat zwei Ausgänge: ja und nein.
 
+? Du fügst in ein Programm mit GOTO eine neue Zeile ein. Was kann passieren?
+- [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?
 - [ ] Die Farbe
 - [x] Die Einrückung und das ENDE SOLANGE

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

@@ -102,27 +102,85 @@ The boxes can also be **nested** inside each other: a loop or a path can contain
 Comfort for anyone who has messed up a test: the famous journal *Communications of the ACM* rejected the structure chart article. According to Nassi, the reviewer even said they should collect every copy and burn it. Ouch! It then appeared in 1973 in a smaller journal and today it is quoted thousands of times. Ha!
 :::
 
-## Other ways to draw it: flowchart and pseudocode
+## Other ways to draw it: the flowchart
 
-A structure chart is not the only way to write down an algorithm. You will meet two more in class. Here you see the tea example from “All three together” in all three forms.
+There are two more ways to show an algorithm: the **flowchart** and **pseudocode**. You will meet both in class.
 
-### Structure chart
+Here you see our structure chart for drinking tea from “All three together” once more. Next we look at the flowchart, using the same example.
 
 ::: diagramm l1-grundbausteine.visustruct
 The tea example as a structure chart: first the cup, then the branch for the sugar, then the loop.
 :::
 
-### Flowchart
-
-A **flowchart** is made of symbols joined by **arrows**. It is standardised as DIN 66001 (ISO 5807). A diamond is a decision with the exits yes and no. You recognise a loop by an arrow that leads **back up**.
+### The same algorithm as a flowchart
 
 ::: grafik l01-pap.svg
 The tea example as a flowchart. The arrow from “Wait 1 minute” back up forms the loop.
 :::
 
-### Pseudocode
+### The symbols
+
+A flowchart is made of a few symbols joined by **arrows**. It is standardised as DIN 66001 (ISO 5807).
+
+- **Oval:** start or end. Every flowchart has exactly one start and one end.
+- **Rectangle:** a statement, for example *Put a cup on the table*.
+- **Diamond:** a decision. The diamond holds a question, and two arrows lead out of it: **yes** and **no**.
+- **Parallelogram:** an input or output. The tea example does not have one.
+- **Arrow:** shows which step comes next.
+
+A loop has no symbol of its own in a flowchart. You recognise it by an arrow that leads **back up**.
+
+### The advantages
+
+- **Very easy to read**, even for people who have never seen a flowchart. You simply follow the arrows with your finger.
+- Flowcharts are not only used in programming but wherever a process is explained: in user manuals, for troubleshooting (“Is the lamp on? No: is it plugged in?”) or in companies for work processes.
+
+## Drawbacks of the flowchart: jumps
+
+An arrow in a flowchart may lead from any symbol to any other. That sounds handy, but it is dangerous.
 
-**Pseudocode** is text that looks like a program but is written in plain language. Fixed words such as IF and WHILE show the building blocks, and the **indentation** shows what belongs to them.
+In the old days, programs were written exactly like that. Every line had a **number**, and the command **GOTO** jumped to a line number. Every GOTO is an arrow from the flowchart. Our tea example would look like this:
+
+```
+10 Put a cup on the table
+20 IF no sugar wanted, GOTO 40
+30 Add sugar
+40 IF tea not too hot, GOTO 70
+50 Wait 1 minute
+60 GOTO 40
+70 Drink the tea
+```
+
+### One more line, and the jumps go wrong
+
+Now you improve the algorithm: after the sugar, the tea bag should come out. You insert the new line 40, and all lines below move down one number. But the jumps still point to the old numbers:
+
+```
+10 Put a cup on the table
+20 IF no sugar wanted, GOTO 40
+30 Add sugar
+40 Take out the tea bag
+50 IF tea not too hot, GOTO 70
+60 Wait 1 minute
+70 GOTO 40
+80 Drink the tea
+```
+
+Play it through: line 70 no longer sends you to the check in line 50 but to the tea bag. And when the tea is cool enough, line 50 jumps to line 70 instead of *Drink the tea*. So you keep taking out the tea bag and never drink. With every change you have to check every GOTO. In a big program with hundreds of jumps, something easily goes wrong.
+
+### All over the place: spaghetti code
+
+With arrows you can also jump out of the middle of a loop, or from outside into the middle of a loop. Such jumps quickly make the chart confusing. With many jumps the arrows cross until the chart looks like a plate of spaghetti. That is why it is called **spaghetti code**. You can hardly follow the flow any more, and mistakes hide well.
+
+A structure chart has no arrows. If you insert a box, everything below simply moves down with it, and no jump can point to the wrong place. For leaving a loop early there is a separate, tidy box, the break. You will meet it in lesson 18.
+
+::: angeberwissen
+In 1968 the computer scientist Edsger Dijkstra wrote a famous letter: “Go To Statement Considered Harmful”. Since then, programs are built only from sequence, branch and loop. In Java, `goto` is still a reserved word today, but you are not allowed to use it. Baah, I would rather eat spaghetti than program it.
+:::
+
+## Pseudocode and comparison
+
+**Pseudocode** is text that looks like a program but is written in plain language. Fixed words such as IF and WHILE show the building blocks, and the **indentation** shows what belongs to them. There are no jumps here either. This is our tea example:
 
 ```
 Put a cup on the table
@@ -138,7 +196,7 @@ Drink the tea
 ### Compared
 
 - **Structure chart:** boxes inside boxes, the loop is an upside-down L. You see the structure at a glance, and wild jumps are impossible.
-- **Flowchart:** symbols with arrows, the loop is an arrow back up. Very easy to picture, but big charts quickly get confusing.
+- **Flowchart:** symbols with arrows, the loop is an arrow back up. Very easy to picture, but big charts quickly get confusing, and jumps all over the place are possible.
 - **Pseudocode:** text with indentation, the loop sits between WHILE and END WHILE. Quick to write and already close to program code.
 
 > All three describe the same algorithm. Once you can read one form, you learn the others quickly.
@@ -156,10 +214,6 @@ When you program, two things happen at once: you have to think about the steps a
 
 With the **simulation** you can also run your structure chart step by step and check whether it really does what it should.
 
-::: angeberwissen
-Programs that jump all over the place are called **spaghetti code**: if you try to follow one thread, you get tangled up like in a plate of spaghetti. In the old days the culprit was the GOTO command, meaning “jump to line …”. So in 1968 the computer scientist Edsger Dijkstra wrote a famous letter: “Go To Statement Considered Harmful”. Since then, programs are built only from sequence, branch and loop. In Java, `goto` is still a reserved word today, but you are not allowed to use it. Baah, I would rather eat spaghetti than program it.
-:::
-
 ## Game: Which building block?
 
 ::: spiel frage
@@ -215,7 +269,9 @@ richtig: branch
 - I know that a structure chart is read from top to bottom. → How to read a structure chart
 - I know the three basic building blocks: sequence, branch and loop. → Building block 1: the sequence
 - I can recognise every building block in a structure chart by its shape. → All three together
-- I can also read a simple algorithm as a flowchart and as pseudocode. → Other ways to draw it: flowchart and pseudocode
+- I know the symbols of a flowchart and can read a simple flowchart. → Other ways to draw it: the flowchart
+- I can explain why jumps with GOTO lead to mistakes and spaghetti code. → Drawbacks of the flowchart: jumps
+- I can also read a simple algorithm as pseudocode. → Pseudocode and comparison
 :::
 
 ## Quiz
@@ -265,6 +321,12 @@ richtig: branch
 = Parallelogram -> Input or output
 > The diamond has two exits: yes and no.
 
+? You insert a new line into a program with GOTO. What can happen?
+- [x] The jumps point to the wrong lines because the numbers have moved
+- [ ] Nothing, the jumps adjust by themselves
+- [ ] The program automatically gets faster
+> Every GOTO points to a fixed line number. If the lines move down, the program jumps to the wrong place.
+
 ? In pseudocode, what shows which lines belong to a loop?
 - [ ] The colour
 - [x] The indentation and the END WHILE