Web 0.13.7: Anweisungen im Code und Struktogramm immer gelb (#202)

* Web 0.13.5: Anweisungen ohne Klasse im Code gelb, Pseudocode-Schleifen ganz farbig

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ugz28U8wYCXi1s1XAhMW6n

* Anweisungen in Schleifen und Verzweigungen immer gelb

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ugz28U8wYCXi1s1XAhMW6n

---------

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.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 0.13.3, Struktogramm and Elemente in the code block colours:** the Struktogramm uses the same soft colours as the blocks in Programmieren: statements yellow like the method, loops (for, while, do-until, endless) pink, Verzweigung and Fallauswahl blue; elements inside a loop or branch take its colour, so code and diagram side by side show the matching blocks at a glance. The boxes in „Elemente“ get the same colours. The setting is now called „Blöcke farbig“ and switches code, diagram and Elemente together; a colour stored in the file still wins, and exports stay white. Lesson 1 uses the same colours (statements yellow, branch blue, loop pink; the sequence itself has no colour, it is the row of statements).

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

@@ -90,7 +90,7 @@ Solange der Teller nicht leer ist, wird ein Bissen gegessen. Danach wird der Tel
 
 ## Alle drei zusammen
 
-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}. Was in einer Verzweigung oder Schleife steht, bekommt deren Farbe. Genau genommen ist das ganze Diagramm eine Sequenz, denn auch Verzweigung und Schleife stehen in der Reihe von oben nach unten.
+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.

web/lessons/diagramme/en/l1-grundbausteine.visustruct

@@ -6,7 +6,7 @@
   <strelem typ="1" zx="0" zy="0" bgcolor="-1773059">
     <text>83;117;103;97;114;32;119;97;110;116;101;100;63;</text>
     <fall fallname="116;114;117;101;">
-      <strelem typ="0" zx="0" zy="0" bgcolor="-1773059">
+      <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
         <text>65;100;100;32;115;117;103;97;114;</text>
       </strelem>
     </fall>
@@ -19,7 +19,7 @@
   <strelem typ="4" zx="0" zy="0" bgcolor="-202254">
     <text>84;101;97;32;115;116;105;108;108;32;116;111;111;32;104;111;116;</text>
     <schleifeninhalt>
-      <strelem typ="0" zx="0" zy="0" bgcolor="-202254">
+      <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
         <text>87;97;105;116;32;49;32;109;105;110;117;116;101;</text>
       </strelem>
     </schleifeninhalt>

web/lessons/diagramme/en/l1-verzweigung.visustruct

@@ -3,12 +3,12 @@
   <strelem typ="1" zx="0" zy="0" bgcolor="-1773059">
     <text>73;115;32;105;116;32;114;97;105;110;105;110;103;63;</text>
     <fall fallname="116;114;117;101;">
-      <strelem typ="0" zx="0" zy="0" bgcolor="-1773059">
+      <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
         <text>80;97;99;107;32;97;110;32;117;109;98;114;101;108;108;97;</text>
       </strelem>
     </fall>
     <fall fallname="102;97;108;115;101;">
-      <strelem typ="0" zx="0" zy="0" bgcolor="-1773059">
+      <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
         <text>80;97;99;107;32;115;117;110;103;108;97;115;115;101;115;</text>
       </strelem>
     </fall>

web/lessons/diagramme/en/l1-wiederholung.visustruct

@@ -3,7 +3,7 @@
   <strelem typ="4" zx="0" zy="0" bgcolor="-202254">
     <text>80;108;97;116;101;32;110;111;116;32;101;109;112;116;121;</text>
     <schleifeninhalt>
-      <strelem typ="0" zx="0" zy="0" bgcolor="-202254">
+      <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
         <text>84;97;107;101;32;97;32;98;105;116;101;</text>
       </strelem>
     </schleifeninhalt>

web/lessons/diagramme/l1-grundbausteine.visustruct

@@ -6,7 +6,7 @@
   <strelem typ="1" zx="0" zy="0" bgcolor="-1773059">
     <text>90;117;99;107;101;114;32;103;101;119;252;110;115;99;104;116;63;</text>
     <fall fallname="116;114;117;101;">
-      <strelem typ="0" zx="0" zy="0" bgcolor="-1773059">
+      <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
         <text>90;117;99;107;101;114;32;104;105;110;101;105;110;103;101;98;101;110;</text>
       </strelem>
     </fall>
@@ -19,7 +19,7 @@
   <strelem typ="4" zx="0" zy="0" bgcolor="-202254">
     <text>84;101;101;32;110;111;99;104;32;122;117;32;104;101;105;223;</text>
     <schleifeninhalt>
-      <strelem typ="0" zx="0" zy="0" bgcolor="-202254">
+      <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
         <text>49;32;77;105;110;117;116;101;32;119;97;114;116;101;110;</text>
       </strelem>
     </schleifeninhalt>

web/lessons/diagramme/l1-verzweigung.visustruct

@@ -3,12 +3,12 @@
   <strelem typ="1" zx="0" zy="0" bgcolor="-1773059">
     <text>82;101;103;110;101;116;32;101;115;63;</text>
     <fall fallname="116;114;117;101;">
-      <strelem typ="0" zx="0" zy="0" bgcolor="-1773059">
+      <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
         <text>82;101;103;101;110;115;99;104;105;114;109;32;101;105;110;112;97;99;107;101;110;</text>
       </strelem>
     </fall>
     <fall fallname="102;97;108;115;101;">
-      <strelem typ="0" zx="0" zy="0" bgcolor="-1773059">
+      <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
         <text>83;111;110;110;101;110;98;114;105;108;108;101;32;101;105;110;112;97;99;107;101;110;</text>
       </strelem>
     </fall>

web/lessons/diagramme/l1-wiederholung.visustruct

@@ -3,7 +3,7 @@
   <strelem typ="4" zx="0" zy="0" bgcolor="-202254">
     <text>84;101;108;108;101;114;32;110;105;99;104;116;32;108;101;101;114;</text>
     <schleifeninhalt>
-      <strelem typ="0" zx="0" zy="0" bgcolor="-202254">
+      <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
         <text>69;105;110;101;110;32;66;105;115;115;101;110;32;101;115;115;101;110;</text>
       </strelem>
     </schleifeninhalt>

web/lessons/diagramme/pt/l1-grundbausteine.visustruct

@@ -6,7 +6,7 @@
   <strelem typ="1" zx="0" zy="0" bgcolor="-1773059">
     <text>81;117;101;114;32;97;231;250;99;97;114;63;</text>
     <fall fallname="116;114;117;101;">
-      <strelem typ="0" zx="0" zy="0" bgcolor="-1773059">
+      <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
         <text>74;117;110;116;97;114;32;97;231;250;99;97;114;</text>
       </strelem>
     </fall>
@@ -19,7 +19,7 @@
   <strelem typ="4" zx="0" zy="0" bgcolor="-202254">
     <text>67;104;225;32;97;105;110;100;97;32;100;101;109;97;115;105;97;100;111;32;113;117;101;110;116;101;</text>
     <schleifeninhalt>
-      <strelem typ="0" zx="0" zy="0" bgcolor="-202254">
+      <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
         <text>69;115;112;101;114;97;114;32;49;32;109;105;110;117;116;111;</text>
       </strelem>
     </schleifeninhalt>

web/lessons/diagramme/pt/l1-verzweigung.visustruct

@@ -3,12 +3,12 @@
   <strelem typ="1" zx="0" zy="0" bgcolor="-1773059">
     <text>69;115;116;225;32;97;32;99;104;111;118;101;114;63;</text>
     <fall fallname="116;114;117;101;">
-      <strelem typ="0" zx="0" zy="0" bgcolor="-1773059">
+      <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
         <text>76;101;118;97;114;32;103;117;97;114;100;97;45;99;104;117;118;97;</text>
       </strelem>
     </fall>
     <fall fallname="102;97;108;115;101;">
-      <strelem typ="0" zx="0" zy="0" bgcolor="-1773059">
+      <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
         <text>76;101;118;97;114;32;243;99;117;108;111;115;32;100;101;32;115;111;108;</text>
       </strelem>
     </fall>