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

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>

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

@@ -1,30 +1,30 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <struktogramm caption="79;115;32;116;114;234;115;32;98;108;111;99;111;115;32;98;225;115;105;99;111;115;" pseudocode="true">
-  <strelem typ="0" zx="0" zy="0" bgcolor="-2364674">
+  <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
     <text>80;244;114;32;117;109;97;32;99;104;225;118;101;110;97;32;110;97;32;109;101;115;97;</text>
   </strelem>
-  <strelem typ="1" zx="0" zy="0" bgcolor="-4651">
+  <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="-2364674">
+      <strelem typ="0" zx="0" zy="0" bgcolor="-1773059">
         <text>74;117;110;116;97;114;32;97;231;250;99;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>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="-2364674">
+      <strelem typ="0" zx="0" zy="0" bgcolor="-202254">
         <text>69;115;112;101;114;97;114;32;49;32;109;105;110;117;116;111;</text>
       </strelem>
     </schleifeninhalt>
   </strelem>
-  <strelem typ="0" zx="0" zy="0" bgcolor="-2364674">
+  <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
     <text>66;101;98;101;114;32;111;32;99;104;225;</text>
   </strelem>
 </struktogramm>

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

@@ -1,15 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <struktogramm caption="68;101;32;109;97;110;104;227;" pseudocode="true">
-  <strelem typ="0" zx="0" zy="0" bgcolor="-2364674">
+  <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
     <text>76;101;118;97;110;116;97;114;</text>
   </strelem>
-  <strelem typ="0" zx="0" zy="0" bgcolor="-2364674">
+  <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
     <text>76;97;118;97;114;32;111;115;32;100;101;110;116;101;115;</text>
   </strelem>
-  <strelem typ="0" zx="0" zy="0" bgcolor="-2364674">
+  <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
     <text>86;101;115;116;105;114;</text>
   </strelem>
-  <strelem typ="0" zx="0" zy="0" bgcolor="-2364674">
+  <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
     <text>84;111;109;97;114;32;111;32;112;101;113;117;101;110;111;45;97;108;109;111;231;111;</text>
   </strelem>
 </struktogramm>

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

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

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

@@ -1,14 +1,14 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <struktogramm caption="67;111;109;101;114;" pseudocode="true">
-  <strelem typ="4" zx="0" zy="0" bgcolor="-2294553">
+  <strelem typ="4" zx="0" zy="0" bgcolor="-202254">
     <text>80;114;97;116;111;32;110;227;111;32;118;97;122;105;111;</text>
     <schleifeninhalt>
-      <strelem typ="0" zx="0" zy="0" bgcolor="-2364674">
+      <strelem typ="0" zx="0" zy="0" bgcolor="-202254">
         <text>68;97;114;32;117;109;97;32;103;97;114;102;97;100;97;</text>
       </strelem>
     </schleifeninhalt>
   </strelem>
-  <strelem typ="0" zx="0" zy="0" bgcolor="-2364674">
+  <strelem typ="0" zx="0" zy="0" bgcolor="-133925">
     <text>76;101;118;97;110;116;97;114;32;111;32;112;114;97;116;111;</text>
   </strelem>
 </struktogramm>

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

@@ -32,7 +32,7 @@ Baaah, listen up! In 1972 Nassi and Shneiderman were still PhD students at Stony
 
 ## Building block 1: the sequence
 
-Every algorithm can be built from just **three basic building blocks**: [**sequence**]{.blau}, [**branch**]{.orange} and [**loop**]{.gruen}. The colours help you match them at the start; in your own diagrams the boxes are white. In this step and the next two you get to know them one by one.
+Every algorithm can be built from just **three basic building blocks**: **sequence**, [**branch**]{.blau} and [**loop**]{.rosa}. The colours help you match them: [statements]{.gelb} are yellow, branches blue, loops pink. The sequence has no colour of its own, it is simply the row of statements one below the other. You see the same colours in the editor and later in the code. You can switch them off in the settings under “Colored blocks”. In this step and the next two you get to know them one by one.
 
 The **sequence** is the simplest building block: several statements run **one after another**, each exactly once.
 
@@ -90,7 +90,7 @@ As long as the plate is not empty, you take a bite. After that, the plate is cle
 
 ## All three together
 
-The building blocks become really useful when you combine them. This diagram contains all three: a [sequence]{.blau} from top to bottom, a [branch]{.orange} and a [loop]{.gruen}. The blue boxes are simple statements. Strictly speaking, the whole diagram is a sequence, because the branch and the loop also stand in the row from top to bottom.
+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}. Whatever stands inside a branch or a loop takes its colour. 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.