Web 0.13.11: Legende und Bausteine rechts in der PAP-Übung (#207)

Claude-Session: https://claude.ai/code/session_01Ugz28U3kz1Gn6VpW4ZHqDH

Co-authored-by: Claude <noreply@anthropic.com>

Author: code4teaching

CHANGELOG.md

@@ -8,6 +8,7 @@ The format is loosely inspired by Keep a Changelog.
 
 ### Added
 
+- **Web 0.13.11, legend in the flowchart exercise:** the PAP block takes `legende: ja` and then shows the four symbols with their meaning (Start oder Ende, Anweisung, Verzweigung, Ein- oder Ausgabe) under the chart; lesson 1 step 8 „Übung: Kuchen backen als PAP“ uses it (de/en/pt). The prepared elements now stand in a column right of the chart (sticky while scrolling) instead of below it, and the chart is only as wide as its content, so on a laptop chart and elements fit on one screen.
 - **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/laptop2.png

@@ -285,7 +285,8 @@ Für „Fehler finden“ eignet sich eine normale Übung mit `code: java`, deren
 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
+rechts daneben, von der ein Pfeil zurück zur Raute führt. Statt `nein` geht auch `ja`. `legende: ja` zeigt unter dem Plan die vier Symbole mit
+ihrer Bedeutung. Die Schlüsselwörter bleiben auch in
 en/pt deutsch, die Beschriftung ja/nein kommt aus der Oberflächensprache.
 
 ```

web/lessons/README.md

@@ -155,6 +155,7 @@ 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

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

@@ -155,6 +155,7 @@ 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.
+legende: ja
 :::
 
 ## Drawbacks of the flowchart: jumps

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

@@ -155,6 +155,7 @@ 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.
+legende: ja
 :::
 
 ## Desvantagens do fluxograma: saltos

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

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

web/package-lock.json

@@ -101,13 +101,17 @@
 "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_hint" = "Tippe ein Element rechts 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_pap_legend_oval" = "Start oder Ende";
+"web_learn_pap_legend_rect" = "Anweisung";
+"web_learn_pap_legend_diamond" = "Verzweigung: Frage mit ja und nein";
+"web_learn_pap_legend_para" = "Ein- oder Ausgabe";
 "web_learn_review" = "Nachlesen";
 "web_learn_terms" = "Fachbegriffe";
 "web_learn_resize" = "Breite des Lernbereichs ändern (Doppelklick: zurücksetzen)";

web/package.json

@@ -101,13 +101,17 @@
 "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_hint" = "Tap an element on the right 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_pap_legend_oval" = "Start or end";
+"web_learn_pap_legend_rect" = "Statement";
+"web_learn_pap_legend_diamond" = "Decision: question with yes and no";
+"web_learn_pap_legend_para" = "Input or output";
 "web_learn_review" = "Review";
 "web_learn_terms" = "Technical terms";
 "web_learn_resize" = "Change the width of the learning area (double-click: reset)";