Web 0.13.10: PAP selbst bauen in Lektion 1 (Kuchen backen), Begriff flowchart

CHANGELOG.md

@@ -8,6 +8,7 @@ The format is loosely inspired by Keep a Changelog.
 
 ### Added
 
+- **Web 0.13.10, build a flowchart yourself in lesson 1:** new lesson block `::: pap` („PAP bauen“): a flowchart with empty dashed places and the finished, labelled elements shuffled below; tap an element and then its place, or drag it there (mouse, pen, finger). „Prüfen“ marks right and wrong places, after a wrong try „Lösung zeigen“. Lesson 1 gets the new step „Übung: Kuchen backen als PAP“ (Ludwig bakes a cake: two loops, one output). Lesson 1 now introduces the English word **flowchart** for the PAP right at the start, and the quiz asks for it (de, pt).
 - **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/lessons/README.md

@@ -281,6 +281,27 @@ für sich geprüft.
 
 Für „Fehler finden“ eignet sich eine normale Übung mit `code: java`, deren `start:`-Diagramm einen Fehler enthält.
 
+„PAP bauen“: Ein Programmablaufplan mit leeren Plätzen, darunter liegen die fertigen Elemente gemischt. Man tippt ein
+Element und dann seinen Platz an oder zieht es hin. `start:`/`ende:` sind Ovale, `anweisung:` Rechtecke, `eingabe:`/
+`ausgabe:` Parallelogramme, `frage:` Rauten. Die Zeilen stehen von oben nach unten. Eine Frage braucht nach ` | ` ihren
+zweiten Ausgang: `nein -> Text` ist ein Pfeil zurück nach oben zum Element mit diesem Text, `nein: Text` eine Anweisung
+rechts daneben, von der ein Pfeil zurück zur Raute führt. Statt `nein` geht auch `ja`. Die Schlüsselwörter bleiben auch in
+en/pt deutsch, die Beschriftung ja/nein kommt aus der Oberflächensprache.
+
+```
+::: pap
+titel: Übung: Kuchen backen als PAP
+auftrag: Lege jedes Element an seinen Platz.
+start: Start
+anweisung: Teig rühren
+frage: Teig glatt? | nein -> Teig rühren
+frage: Stäbchen sauber? | nein: 5 Minuten weiterbacken
+ausgabe: „Der Kuchen ist fertig!“
+ende: Ende
+erklärung: Wird gezeigt, wenn alles stimmt.
+:::
+```
+
 Ein Quiz, `[x]` markiert richtige Antworten, `>` ist die Erklärung nach dem Antworten:
 
 ```

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

@@ -24,7 +24,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 8.
+> 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 9.
 
 ::: 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.
@@ -104,7 +104,7 @@ Trostpflaster für alle mit einer verpatzten Arbeit: Die berühmte Fachzeitschri
 
 ## 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.
+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.
 
@@ -133,7 +133,29 @@ Eine Schleife hat im PAP kein eigenes Symbol. Du erkennst sie daran, dass ein Pf
 ### 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.
+- 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.
+:::
 
 ## Nachteile des PAP: Sprünge
 
@@ -270,6 +292,7 @@ richtig: Verzweigung
 - 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 kenne die Elemente eines PAP und kann 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 auch als Pseudocode lesen. → Pseudocode und Vergleich
 :::
@@ -321,6 +344,12 @@ richtig: Verzweigung
 = Parallelogramm -> Ein- oder Ausgabe
 > Die Raute hat zwei Ausgänge: ja und nein.
 
+? Wie heißt der Programmablaufplan auf Englisch?
+- [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?
 - [x] Die Sprünge zeigen auf die falschen Zeilen, weil sich die Nummern verschoben haben
 - [ ] Nichts, die Sprünge passen sich von selbst an

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

@@ -24,7 +24,7 @@ This way of drawing was invented by **Isaac Nassi and Ben Shneiderman** (1973).
 Left: Isaac “Ike” Nassi (photo: [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/), cropped), right: Ben Shneiderman (photo: [Robert Kosara](https://commons.wikimedia.org/wiki/File:Ben_Shneiderman_at_UNCC_%283x4_cropped%29.jpg), CC0).
 :::
 
-> A structure chart always has exactly one start (at the top) and one end (at the bottom). There are no arrows and no jumps all over the place. Programs that jump all over the place are called **spaghetti code**, because their flow gets tangled like noodles on a plate. More on this in step 8.
+> A structure chart always has exactly one start (at the top) and one end (at the bottom). There are no arrows and no jumps all over the place. Programs that jump all over the place are called **spaghetti code**, because their flow gets tangled like noodles on a plate. More on this in step 9.
 
 ::: angeberwissen
 Baaah, listen up! In 1972 Nassi and Shneiderman were still PhD students at Stony Brook University near New York. Shneiderman was about 25 and Nassi about 23. So basically two students who wrote computer science history on the side.
@@ -135,6 +135,28 @@ A loop has no symbol of its own in a flowchart. You recognise it by an arrow tha
 - **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.
 
+## Exercise: Baking a cake as a flowchart
+
+Now you build a flowchart yourself. Ludwig bakes a cake like this:
+
+He puts the ingredients in the bowl and stirs the batter. If the batter is not smooth yet, he keeps stirring. Once it is smooth, he pours the batter into the tin and bakes the cake for 30 minutes. Then he checks with a wooden skewer: if batter still sticks to it, he bakes for 5 more minutes and checks again. Once the skewer comes out clean, he takes the cake out and calls: “The cake is ready!”
+
+::: pap
+titel: Exercise: Baking a cake as a flowchart
+auftrag: The places in the chart are empty. Put each element in its place. The shape of the place helps you.
+start: Start
+anweisung: Put ingredients in the bowl
+anweisung: Stir the batter
+frage: Batter smooth? | nein -> Stir the batter
+anweisung: Pour batter into the tin
+anweisung: Bake for 30 minutes
+frage: Skewer clean? | nein: Bake 5 more minutes
+anweisung: Take the cake out
+ausgabe: “The cake is ready!”
+ende: End
+erklärung: Two loops, two arrows back up: when stirring, the arrow leads back to “Stir the batter”; when baking, it leads from “Bake 5 more minutes” back to the question. The output sits in the parallelogram.
+:::
+
 ## 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.
@@ -270,6 +292,7 @@ richtig: branch
 - 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 know the symbols of a flowchart and can read a simple flowchart. → Other ways to draw it: the flowchart
+- I can build a simple algorithm as a flowchart myself. → Exercise: Baking a cake as a 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
 :::

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

@@ -24,7 +24,7 @@ Esta forma de desenhar foi inventada por **Isaac Nassi e Ben Shneiderman** (1973
 À esquerda: 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/), recortada), à direita: Ben Shneiderman (foto: [Robert Kosara](https://commons.wikimedia.org/wiki/File:Ben_Shneiderman_at_UNCC_%283x4_cropped%29.jpg), CC0).
 :::
 
-> Um estrutograma tem sempre exatamente um início (em cima) e um fim (em baixo). Não há setas nem saltos para todo o lado. Programas que saltam para todo o lado chamam-se **código esparguete**, porque o seu fluxo se enrola como massa no prato. Mais sobre isto no passo 8.
+> Um estrutograma tem sempre exatamente um início (em cima) e um fim (em baixo). Não há setas nem saltos para todo o lado. Programas que saltam para todo o lado chamam-se **código esparguete**, porque o seu fluxo se enrola como massa no prato. Mais sobre isto no passo 9.
 
 ::: angeberwissen
 Méééé, ouve bem! Em 1972, Nassi e Shneiderman ainda eram doutorandos na Universidade de Stony Brook, perto de Nova Iorque. Shneiderman tinha uns 25 anos e Nassi uns 23. Ou seja, dois estudantes que escreveram história da informática nas horas vagas.
@@ -104,7 +104,7 @@ Consolo para quem correu mal um teste: a famosa revista *Communications of the A
 
 ## Outras formas de desenhar: o fluxograma
 
-Há mais duas formas de representar um algoritmo: o **fluxograma** e o **pseudocódigo**. Vais conhecer as duas nas aulas.
+Há mais duas formas de representar um algoritmo: o **fluxograma** e o **pseudocódigo**. Vais conhecer as duas nas aulas. Em inglês, o fluxograma chama-se **flowchart**. Esta palavra aparece muitas vezes, por exemplo em programas e na internet.
 
 Aqui vês outra vez o nosso estrutograma para beber chá de “Os três juntos”. A seguir vamos ver o fluxograma, com o mesmo exemplo.
 
@@ -133,7 +133,29 @@ Um ciclo não tem símbolo próprio no fluxograma. Reconheces um ciclo por uma s
 ### As vantagens
 
 - **Muito fácil de ler**, mesmo para quem nunca viu um fluxograma. Basta seguir as setas com o dedo.
-- Os fluxogramas (em inglês *flowchart*) não se usam só na programação, mas em todo o lado onde se explica um processo: em manuais de instruções, na procura de avarias (“A lâmpada acende? Não: a ficha está ligada?”) ou nas empresas para os processos de trabalho.
+- Os fluxogramas não se usam só na programação, mas em todo o lado onde se explica um processo: em manuais de instruções, na procura de avarias (“A lâmpada acende? Não: a ficha está ligada?”) ou nas empresas para os processos de trabalho.
+
+## Exercício: Fazer um bolo como fluxograma
+
+Agora és tu que constróis um fluxograma. O Ludwig faz um bolo assim:
+
+Põe os ingredientes na tigela e mexe a massa. Se a massa ainda não estiver lisa, continua a mexer. Quando está lisa, deita a massa na forma e coze o bolo durante 30 minutos. Depois testa com um palito: se ainda tiver massa agarrada, coze mais 5 minutos e testa outra vez. Quando o palito sai limpo, tira o bolo e diz: “O bolo está pronto!”
+
+::: pap
+titel: Exercício: Fazer um bolo como fluxograma
+auftrag: Os lugares no fluxograma estão vazios. Põe cada elemento no seu lugar. A forma do lugar ajuda-te.
+start: Início
+anweisung: Pôr os ingredientes na tigela
+anweisung: Mexer a massa
+frage: Massa lisa? | nein -> Mexer a massa
+anweisung: Deitar a massa na forma
+anweisung: Cozer 30 minutos
+frage: Palito limpo? | nein: Cozer mais 5 minutos
+anweisung: Tirar o bolo do forno
+ausgabe: “O bolo está pronto!”
+ende: Fim
+erklärung: Dois ciclos, duas setas para cima: ao mexer, a seta volta a “Mexer a massa”; ao cozer, vai de “Cozer mais 5 minutos” de volta à pergunta. A saída fica no paralelogramo.
+:::
 
 ## Desvantagens do fluxograma: saltos
 
@@ -270,6 +292,7 @@ richtig: decisão
 - Conheço os três blocos básicos: sequência, decisão e ciclo. → Bloco básico 1: a sequência
 - Reconheço cada bloco básico num estrutograma pela sua forma. → Os três juntos
 - Conheço os símbolos de um fluxograma e sei ler um fluxograma simples. → Outras formas de desenhar: o fluxograma
+- Sei construir sozinho um algoritmo simples como fluxograma. → Exercício: Fazer um bolo como fluxograma
 - Sei explicar porque é que os saltos com GOTO levam a erros e a código esparguete. → Desvantagens do fluxograma: saltos
 - Também consigo ler um algoritmo simples em pseudocódigo. → Pseudocódigo e comparação
 :::
@@ -321,6 +344,12 @@ richtig: decisão
 = Paralelogramo -> Entrada ou saída
 > O losango tem duas saídas: sim e não.
 
+? Como se diz fluxograma em inglês?
+- [x] Flowchart
+- [ ] Structure chart
+- [ ] Pseudocode
+> Structure chart é o estrutograma.
+
 ? Acrescentas uma nova linha a um programa com GOTO. O que pode acontecer?
 - [x] Os saltos apontam para as linhas erradas, porque os números mudaram
 - [ ] Nada, os saltos ajustam-se sozinhos

web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "visustruct-web",
   "private": true,
-  "version": "0.13.9",
+  "version": "0.13.10",
   "type": "module",
   "scripts": {
     "dev": "vite",

web/src/i18n/de.strings

@@ -101,6 +101,13 @@
 "web_learn_cloze_all_right" = "Alle Lücken richtig!";
 "web_learn_cloze_solution" = "Lösung zeigen";
 "web_learn_cloze_again" = "Nochmal";
+"web_learn_pap_hint" = "Tippe ein Element unten an und dann seinen Platz im Plan. Du kannst es auch hinziehen. Ein belegter Platz gibt sein Element beim Antippen zurück.";
+"web_learn_pap_score_fmt" = "%d von %d Elementen richtig";
+"web_learn_pap_all_right" = "Alles richtig! Dein PAP ist fertig.";
+"web_learn_pap_missing_fmt" = "Es fehlen noch %d Elemente.";
+"web_learn_pap_empty" = "Leerer Platz";
+"web_learn_pap_yes" = "ja";
+"web_learn_pap_no" = "nein";
 "web_learn_review" = "Nachlesen";
 "web_learn_terms" = "Fachbegriffe";
 "web_learn_resize" = "Breite des Lernbereichs ändern (Doppelklick: zurücksetzen)";

web/src/i18n/en.strings

@@ -101,6 +101,13 @@
 "web_learn_cloze_all_right" = "All gaps correct!";
 "web_learn_cloze_solution" = "Show solution";
 "web_learn_cloze_again" = "Try again";
+"web_learn_pap_hint" = "Tap an element below and then its place in the chart. You can also drag it there. Tapping a filled place gives its element back.";
+"web_learn_pap_score_fmt" = "%d of %d elements correct";
+"web_learn_pap_all_right" = "All correct! Your flowchart is finished.";
+"web_learn_pap_missing_fmt" = "%d elements are still missing.";
+"web_learn_pap_empty" = "Empty place";
+"web_learn_pap_yes" = "yes";
+"web_learn_pap_no" = "no";
 "web_learn_review" = "Review";
 "web_learn_terms" = "Technical terms";
 "web_learn_resize" = "Change the width of the learning area (double-click: reset)";