Web 0.13.3: Struktogramm und Elemente in den Farben der Codeblöcke (#201)

* Web 0.13.3: Struktogramm und Elemente in den Farben der Codeblöcke

Anweisungen gelb wie die Methode, Schleifen rosa, Verzweigung/Fallauswahl
blau; Inneres erbt die Farbe des Blocks. Schalter heißt jetzt „Blöcke
farbig“ und gilt für Code, Struktogramm und Elemente. Exporte bleiben
weiß, Farben aus der Datei haben Vorrang. Lektion 1 nutzt dieselben Farben.

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

* Lektion 1: Anweisungen gelb, Sequenz ohne eigene Farbe

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.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 0.13.1, divider between Struktogramm and Programmieren always draggable:** with four open columns (lessons, Struktogramm, Programmieren, „mBot2 live“) the diagram sat at its minimum width and the divider barely moved. Dragging it now first uses the space of the two columns next to it, then takes width from „mBot2 live“, then from the lessons and files columns (down to their minimum widths). Works in both orders after ⇄; all widths are remembered.
 - **Web 0.13.0, VisuBot simulation in the „mBot2 live“ window:** in the VisuBot world „Simulation starten“ no longer shows a second 3D world in the simulation column; the mBot2 of the simulation drives in the „mBot2 live“ window instead (title „🤖 Simulation“, world buttons and distance/line values there, its own ▶ rests until the simulation ends). The window opens by itself for the simulation and closes again afterwards if it was closed before; if it is closed during the simulation, the 3D world goes back to the simulation column. Controls, variables, console, sensor sliders and the real mBot2 stay in the simulation column.
 - **Web 0.12.12, misspelled data types:** a misspelled basic type at the start of a declaration (`booelan`, `Int`, `string`, `dobule`) is marked red in Programmieren with „Meintest du boolean?“ and ▶ does not start (like javac); the VisuObject debugger reports it with file and line. Valid types (`Boolean`, `Integer`) and own classes stay untouched. The simulation now runs declarations without a start value (`boolean fertig;`, `int a, b;`) and prints conditions like `System.out.println(b == true)` or `x > 3` as true/false (#195).

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

@@ -32,7 +32,7 @@ Määäh, aufgepasst! 1972 waren Nassi und Shneiderman noch Doktoranden an der S
 
 ## Baustein 1: Die Sequenz
 
-Jeder Algorithmus lässt sich aus nur **drei Grundbausteinen** zusammensetzen: [**Sequenz**]{.blau}, [**Verzweigung**]{.orange} und [**Wiederholung**]{.gruen}. Die Farben helfen dir am Anfang beim Zuordnen, in deinen eigenen Diagrammen sind die Kästen weiß. In diesem und den nächsten beiden Schritten lernst du sie einzeln kennen.
+Jeder Algorithmus lässt sich aus nur **drei Grundbausteinen** zusammensetzen: **Sequenz**, [**Verzweigung**]{.blau} und [**Wiederholung**]{.rosa}. Die Farben helfen dir beim Zuordnen: [Anweisungen]{.gelb} sind gelb, Verzweigungen blau, Schleifen rosa. Die Sequenz hat keine eigene Farbe, sie ist einfach die Reihe von Anweisungen untereinander. Dieselben Farben siehst du im Editor und später im Code. Du kannst sie in den Einstellungen unter „Blöcke farbig“ ausschalten. In diesem und den nächsten beiden Schritten lernst du sie einzeln kennen.
 
 Die **Sequenz** ist der einfachste Baustein: Mehrere Anweisungen werden **nacheinander** ausgeführt, jede genau einmal.
 
@@ -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]{.blau} von oben nach unten, eine [Verzweigung]{.orange} und eine [Schleife]{.gruen}. Blau sind die einfachen Anweisungen. 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}. 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.
 
 ::: 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

@@ -1,30 +1,30 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <struktogramm caption="84;104;101;32;116;104;114;101;101;32;98;97;115;105;99;32;98;117;105;108;100;105;110;103;32;98;108;111;99;107;115;" pseudocode="true">
-  <strelem typ="0" zx="0" zy="0" bgcolor="-2364674">
+  <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
     <text>80;117;116;32;97;32;99;117;112;32;111;110;32;116;104;101;32;116;97;98;108;101;</text>
   </strelem>
-  <strelem typ="1" zx="0" zy="0" bgcolor="-4651">
+  <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="-2364674">
+      <strelem typ="0" zx="0" zy="0" bgcolor="-1773059">
         <text>65;100;100;32;115;117;103;97;114;</text>
       </strelem>
     </fall>
     <fall fallname="102;97;108;115;101;">
-      <strelem typ="0" zx="0" zy="0">
+      <strelem typ="0" zx="0" zy="0" bgcolor="-1773059">
         <text>248;</text>
       </strelem>
     </fall>
   </strelem>
-  <strelem typ="4" zx="0" zy="0" bgcolor="-2294553">
+  <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="-2364674">
+      <strelem typ="0" zx="0" zy="0" bgcolor="-202254">
         <text>87;97;105;116;32;49;32;109;105;110;117;116;101;</text>
       </strelem>
     </schleifeninhalt>
   </strelem>
-  <strelem typ="0" zx="0" zy="0" bgcolor="-2364674">
+  <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
     <text>68;114;105;110;107;32;116;104;101;32;116;101;97;</text>
   </strelem>
 </struktogramm>

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

@@ -1,15 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <struktogramm caption="73;110;32;116;104;101;32;109;111;114;110;105;110;103;" pseudocode="true">
-  <strelem typ="0" zx="0" zy="0" bgcolor="-2364674">
+  <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
     <text>71;101;116;32;117;112;</text>
   </strelem>
-  <strelem typ="0" zx="0" zy="0" bgcolor="-2364674">
+  <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
     <text>66;114;117;115;104;32;116;101;101;116;104;</text>
   </strelem>
-  <strelem typ="0" zx="0" zy="0" bgcolor="-2364674">
+  <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
     <text>71;101;116;32;100;114;101;115;115;101;100;</text>
   </strelem>
-  <strelem typ="0" zx="0" zy="0" bgcolor="-2364674">
+  <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
     <text>72;97;118;101;32;98;114;101;97;107;102;97;115;116;</text>
   </strelem>
 </struktogramm>

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

@@ -1,19 +1,19 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <struktogramm caption="71;111;32;111;117;116;115;105;100;101;" pseudocode="true">
-  <strelem typ="1" zx="0" zy="0" bgcolor="-4651">
+  <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="-2364674">
+      <strelem typ="0" zx="0" zy="0" bgcolor="-1773059">
         <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="-2364674">
+      <strelem typ="0" zx="0" zy="0" bgcolor="-1773059">
         <text>80;97;99;107;32;115;117;110;103;108;97;115;115;101;115;</text>
       </strelem>
     </fall>
   </strelem>
-  <strelem typ="0" zx="0" zy="0" bgcolor="-2364674">
+  <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
     <text>76;101;97;118;101;</text>
   </strelem>
 </struktogramm>

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

@@ -1,14 +1,14 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <struktogramm caption="69;97;116;" pseudocode="true">
-  <strelem typ="4" zx="0" zy="0" bgcolor="-2294553">
+  <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="-2364674">
+      <strelem typ="0" zx="0" zy="0" bgcolor="-202254">
         <text>84;97;107;101;32;97;32;98;105;116;101;</text>
       </strelem>
     </schleifeninhalt>
   </strelem>
-  <strelem typ="0" zx="0" zy="0" bgcolor="-2364674">
+  <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
     <text>67;108;101;97;114;32;116;104;101;32;112;108;97;116;101;</text>
   </strelem>
 </struktogramm>

web/lessons/diagramme/l1-grundbausteine.visustruct

@@ -1,30 +1,30 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <struktogramm caption="68;105;101;32;100;114;101;105;32;71;114;117;110;100;98;97;117;115;116;101;105;110;101;" pseudocode="true">
-  <strelem typ="0" zx="0" zy="0" bgcolor="-2364674">
+  <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
     <text>84;97;115;115;101;32;97;117;102;32;100;101;110;32;84;105;115;99;104;32;115;116;101;108;108;101;110;</text>
   </strelem>
-  <strelem typ="1" zx="0" zy="0" bgcolor="-4651">
+  <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="-2364674">
+      <strelem typ="0" zx="0" zy="0" bgcolor="-1773059">
         <text>90;117;99;107;101;114;32;104;105;110;101;105;110;103;101;98;101;110;</text>
       </strelem>
     </fall>
     <fall fallname="102;97;108;115;101;">
-      <strelem typ="0" zx="0" zy="0">
+      <strelem typ="0" zx="0" zy="0" bgcolor="-1773059">
         <text>248;</text>
       </strelem>
     </fall>
   </strelem>
-  <strelem typ="4" zx="0" zy="0" bgcolor="-2294553">
+  <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="-2364674">
+      <strelem typ="0" zx="0" zy="0" bgcolor="-202254">
         <text>49;32;77;105;110;117;116;101;32;119;97;114;116;101;110;</text>
       </strelem>
     </schleifeninhalt>
   </strelem>
-  <strelem typ="0" zx="0" zy="0" bgcolor="-2364674">
+  <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
     <text>84;101;101;32;116;114;105;110;107;101;110;</text>
   </strelem>
 </struktogramm>

web/lessons/diagramme/l1-sequenz.visustruct

@@ -1,15 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <struktogramm caption="77;111;114;103;101;110;115;" pseudocode="true">
-  <strelem typ="0" zx="0" zy="0" bgcolor="-2364674">
+  <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
     <text>65;117;102;115;116;101;104;101;110;</text>
   </strelem>
-  <strelem typ="0" zx="0" zy="0" bgcolor="-2364674">
+  <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
     <text>90;228;104;110;101;32;112;117;116;122;101;110;</text>
   </strelem>
-  <strelem typ="0" zx="0" zy="0" bgcolor="-2364674">
+  <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
     <text>65;110;122;105;101;104;101;110;</text>
   </strelem>
-  <strelem typ="0" zx="0" zy="0" bgcolor="-2364674">
+  <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
     <text>70;114;252;104;115;116;252;99;107;101;110;</text>
   </strelem>
 </struktogramm>

web/lessons/diagramme/l1-verzweigung.visustruct

@@ -1,19 +1,19 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <struktogramm caption="82;97;117;115;103;101;104;101;110;" pseudocode="true">
-  <strelem typ="1" zx="0" zy="0" bgcolor="-4651">
+  <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="-2364674">
+      <strelem typ="0" zx="0" zy="0" bgcolor="-1773059">
         <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="-2364674">
+      <strelem typ="0" zx="0" zy="0" bgcolor="-1773059">
         <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>
   </strelem>
-  <strelem typ="0" zx="0" zy="0" bgcolor="-2364674">
+  <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
     <text>76;111;115;103;101;104;101;110;</text>
   </strelem>
 </struktogramm>

web/lessons/diagramme/l1-wiederholung.visustruct

@@ -1,14 +1,14 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <struktogramm caption="69;115;115;101;110;" pseudocode="true">
-  <strelem typ="4" zx="0" zy="0" bgcolor="-2294553">
+  <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="-2364674">
+      <strelem typ="0" zx="0" zy="0" bgcolor="-202254">
         <text>69;105;110;101;110;32;66;105;115;115;101;110;32;101;115;115;101;110;</text>
       </strelem>
     </schleifeninhalt>
   </strelem>
-  <strelem typ="0" zx="0" zy="0" bgcolor="-2364674">
+  <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
     <text>84;101;108;108;101;114;32;97;98;114;228;117;109;101;110;</text>
   </strelem>
 </struktogramm>