Web 0.13.8: Schleife in Lektion 1 als gekipptes L (#204)

Statt „Klammer links“ heißt die Schleifenform im Struktogramm jetzt
„gekipptes L“ (en upside-down L, pt L invertido), im Text, im Vergleich
und im Wissenstest.


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

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.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 0.13.4, Pseudocode switch in the toolbar and simulation of pseudocode:** the checkbox „Pseudocode“ now sits in the toolbar left of ⇄ (before it was only in the code window). For a diagram marked as pseudocode (e.g. „Tee kochen“ in Lektion 1) the simulation no longer runs the boxes as Java: it only highlights them one after another, and for a condition („Regnet es?“), a loop or a Fallauswahl it asks for the answer (true/false or ja/nein, case name). Programmieren shows no Java errors for pseudocode. Lektion 1 now mentions spaghetti code right where it says a Struktogramm has no jumps.

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

@@ -79,8 +79,8 @@ Soll etwas **mehrmals** passieren, schreibt man es nicht mehrmals hin. Stattdess
 So sieht sie aus:
 
 - Oben steht die Bedingung, zum Beispiel *Teller nicht leer*.
-- Die Schritte, die wiederholt werden, stehen **eingerückt** darunter. Links bildet der Kasten eine **Klammer** um sie.
-- Vor jedem Durchlauf wird die Bedingung geprüft. Solange sie **true** ist, werden die Schritte in der Klammer noch einmal ausgeführt. Ist sie **false**, geht es unter der Schleife weiter.
+- Die Schritte, die wiederholt werden, stehen **eingerückt** darunter. Oben und links bildet der Kasten ein **gekipptes L** um sie.
+- Vor jedem Durchlauf wird die Bedingung geprüft. Solange sie **true** ist, werden die Schritte im gekippten L noch einmal ausgeführt. Ist sie **false**, geht es unter der Schleife weiter.
 
 ::: diagramm l1-wiederholung.visustruct
 Solange der Teller nicht leer ist, wird ein Bissen gegessen. Danach wird der Teller abgeräumt.
@@ -93,7 +93,7 @@ Solange der Teller nicht leer ist, wird ein Bissen gegessen. Danach wird der Tel
 Richtig nützlich werden die Bausteine, wenn man sie kombiniert. Das Diagramm enthält alle drei: eine Sequenz von oben nach unten, eine [Verzweigung]{.blau} und eine [Schleife]{.rosa}. Gelb sind die einfachen [Anweisungen]{.gelb}. Auch die Anweisungen in einer Verzweigung oder Schleife sind gelb. Genau genommen ist das ganze Diagramm eine Sequenz, denn auch Verzweigung und Schleife stehen in der Reihe von oben nach unten.
 
 ::: diagramm l1-grundbausteine.visustruct
-Die Verzweigung erkennst du am Dreieck, die Schleife an der Klammer links. Alles zusammen steht in einer Sequenz.
+Die Verzweigung erkennst du am Dreieck, die Schleife am gekippten L. Alles zusammen steht in einer Sequenz.
 :::
 
 Die Kästen können auch **ineinander geschachtelt** werden: In einer Schleife oder einem Zweig können wieder Sequenzen, Verzweigungen und Schleifen stehen.
@@ -137,7 +137,7 @@ Tee trinken
 
 ### Im Vergleich
 
-- **Struktogramm:** Kästen ineinander, die Schleife ist eine Klammer links. Die Struktur siehst du auf einen Blick, wilde Sprünge sind unmöglich.
+- **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.
 - **Pseudocode:** Text mit Einrückung, die Schleife steht zwischen SOLANGE und ENDE SOLANGE. Schnell geschrieben und schon nah am Programmcode.
 
@@ -235,10 +235,10 @@ richtig: Verzweigung
 > Sprünge gibt es im Struktogramm nicht. Sequenz, Verzweigung und Wiederholung reichen für jeden Algorithmus.
 
 ? Woran erkennst du im Struktogramm eine Verzweigung?
-- [ ] An einer Klammer auf der linken Seite
+- [ ] An einem gekippten L
 - [x] An einem Dreieck mit der Bedingung und zwei Spalten darunter
 - [ ] An mehreren Rechtecken untereinander
-> Die Klammer gehört zur Schleife, Rechtecke untereinander sind eine Sequenz.
+> Das gekippte L gehört zur Schleife, Rechtecke untereinander sind eine Sequenz.
 
 ? Wann wird der Inhalt einer Schleife noch einmal ausgeführt?
 - [x] Solange die Bedingung true ist
@@ -253,10 +253,10 @@ richtig: Verzweigung
 > 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?
-- [ ] An einer Klammer auf der linken Seite
+- [ ] An einem gekippten L
 - [x] An einem Pfeil, der zurück nach oben führt
 - [ ] Am Wort SOLANGE
-> Die Klammer gehört zum Struktogramm, SOLANGE zum Pseudocode.
+> Das gekippte L gehört zum Struktogramm, SOLANGE zum Pseudocode.
 
 ? Ordne jedem Symbol im PAP seine Bedeutung zu.
 = Oval -> Start oder Ende

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

@@ -79,8 +79,8 @@ If something should happen **several times**, you do not write it down several t
 This is what it looks like:
 
 - At the top is the condition, for example *Plate not empty*.
-- The steps that are repeated are **indented** below it. On the left, the box forms a **bracket** around them.
-- Before every pass the condition is checked. As long as it is **true**, the steps inside the bracket run once more. If it is **false**, the program continues below the loop.
+- The steps that are repeated are **indented** below it. At the top and on the left, the box forms an **upside-down L** around them.
+- Before every pass the condition is checked. As long as it is **true**, the steps inside the upside-down L run once more. If it is **false**, the program continues below the loop.
 
 ::: diagramm l1-wiederholung.visustruct
 As long as the plate is not empty, you take a bite. After that, the plate is cleared.
@@ -93,7 +93,7 @@ As long as the plate is not empty, you take a bite. After that, the plate is cle
 The building blocks become really useful when you combine them. This diagram contains all three: a sequence from top to bottom, a [branch]{.blau} and a [loop]{.rosa}. The yellow boxes are simple [statements]{.gelb}. The statements inside a branch or a loop are yellow too. Strictly speaking, the whole diagram is a sequence, because the branch and the loop also stand in the row from top to bottom.
 
 ::: diagramm l1-grundbausteine.visustruct
-You recognise the branch by its triangle and the loop by the bracket on the left. Everything together sits in a sequence.
+You recognise the branch by its triangle and the loop by its upside-down L. Everything together sits in a sequence.
 :::
 
 The boxes can also be **nested** inside each other: a loop or a path can contain sequences, branches and loops again.
@@ -137,7 +137,7 @@ Drink the tea
 
 ### Compared
 
-- **Structure chart:** boxes inside boxes, the loop is a bracket on the left. You see the structure at a glance, and wild jumps are impossible.
+- **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.
 - **Pseudocode:** text with indentation, the loop sits between WHILE and END WHILE. Quick to write and already close to program code.
 
@@ -235,10 +235,10 @@ richtig: branch
 > There are no jumps in a structure chart. Sequence, branch and loop are enough for every algorithm.
 
 ? How do you recognise a branch in a structure chart?
-- [ ] By a bracket on the left side
+- [ ] By an upside-down L
 - [x] By a triangle with the condition and two columns below it
 - [ ] By several rectangles on top of each other
-> The bracket belongs to the loop, and rectangles on top of each other are a sequence.
+> The upside-down L belongs to the loop, and rectangles on top of each other are a sequence.
 
 ? When does the inside of a loop run once more?
 - [x] As long as the condition is true
@@ -253,10 +253,10 @@ richtig: branch
 > An algorithm does not depend on a programming language. A structure chart is one way to write it down.
 
 ? How do you recognise a loop in a flowchart?
-- [ ] By a bracket on the left side
+- [ ] By an upside-down L
 - [x] By an arrow that leads back up
 - [ ] By the word WHILE
-> The bracket belongs to the structure chart, and WHILE to pseudocode.
+> The upside-down L belongs to the structure chart, and WHILE to pseudocode.
 
 ? Match each flowchart symbol to its meaning.
 = Oval -> Start or end

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

@@ -79,8 +79,8 @@ Se uma coisa deve acontecer **várias vezes**, não a escreves várias vezes. Em
 É assim que se parece:
 
 - Em cima está a condição, por exemplo *Prato não vazio*.
-- Os passos que se repetem ficam **recuados** por baixo dela. À esquerda, o bloco forma um **parêntese** à volta deles.
-- Antes de cada iteração, a condição é verificada. Enquanto for **true**, os passos dentro do parêntese são executados mais uma vez. Se for **false**, o programa continua por baixo do ciclo.
+- Os passos que se repetem ficam **recuados** por baixo dela. Em cima e à esquerda, o bloco forma um **L invertido** à volta deles.
+- Antes de cada iteração, a condição é verificada. Enquanto for **true**, os passos dentro do L invertido são executados mais uma vez. Se for **false**, o programa continua por baixo do ciclo.
 
 ::: diagramm l1-wiederholung.visustruct
 Enquanto o prato não estiver vazio, dás uma garfada. Depois, o prato é levantado.
@@ -93,7 +93,7 @@ Enquanto o prato não estiver vazio, dás uma garfada. Depois, o prato é levant
 Os blocos básicos tornam-se realmente úteis quando os combinas. Este diagrama contém os três: uma sequência de cima para baixo, uma [decisão]{.blau} e um [ciclo]{.rosa}. As caixas amarelas são [instruções]{.gelb} simples. As instruções dentro de uma decisão ou de um ciclo também são amarelas. Em rigor, o diagrama todo é uma sequência, porque a decisão e o ciclo também estão na fila de cima para baixo.
 
 ::: diagramm l1-grundbausteine.visustruct
-Reconheces a decisão pelo triângulo e o ciclo pelo parêntese à esquerda. Tudo junto forma uma sequência.
+Reconheces a decisão pelo triângulo e o ciclo pelo L invertido. Tudo junto forma uma sequência.
 :::
 
 Os blocos também podem ser **encaixados** uns dentro dos outros: um ciclo ou um ramo pode voltar a conter sequências, decisões e ciclos.
@@ -137,7 +137,7 @@ Beber o chá
 
 ### Comparação
 
-- **Estrutograma:** blocos dentro de blocos, o ciclo é um parêntese à esquerda. Vês a estrutura num relance, e saltos malucos são impossíveis.
+- **Estrutograma:** blocos dentro de blocos, o ciclo é um L invertido. Vês a estrutura num relance, e saltos malucos são impossíveis.
 - **Fluxograma:** símbolos com setas, o ciclo é uma seta que volta para cima. Muito fácil de imaginar, mas os fluxogramas grandes ficam depressa confusos.
 - **Pseudocódigo:** texto com indentação, o ciclo fica entre ENQUANTO e FIM ENQUANTO. Rápido de escrever e já perto do código de um programa.
 
@@ -235,10 +235,10 @@ richtig: decisão
 > Num estrutograma não há saltos. Sequência, decisão e ciclo chegam para qualquer algoritmo.
 
 ? Como reconheces uma decisão num estrutograma?
-- [ ] Por um parêntese do lado esquerdo
+- [ ] Por um L invertido
 - [x] Por um triângulo com a condição e duas colunas por baixo
 - [ ] Por vários retângulos uns por cima dos outros
-> O parêntese pertence ao ciclo, e retângulos uns por cima dos outros são uma sequência.
+> O L invertido pertence ao ciclo, e retângulos uns por cima dos outros são uma sequência.
 
 ? Quando é que o interior de um ciclo é executado mais uma vez?
 - [x] Enquanto a condição for verdadeira
@@ -253,10 +253,10 @@ richtig: decisão
 > Um algoritmo não depende de nenhuma linguagem de programação. Um estrutograma é uma forma de o escrever.
 
 ? Como reconheces um ciclo num fluxograma?
-- [ ] Por um parêntese do lado esquerdo
+- [ ] Por um L invertido
 - [x] Por uma seta que volta para cima
 - [ ] Pela palavra ENQUANTO
-> O parêntese pertence ao estrutograma, e ENQUANTO ao pseudocódigo.
+> O L invertido pertence ao estrutograma, e ENQUANTO ao pseudocódigo.
 
 ? Associa cada símbolo do fluxograma ao seu significado.
 = Oval -> Início ou fim

web/package-lock.json

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