code4teaching · Oct 30, 2026 · Oct 30, 2026 · Oct 30, 2026 · Oct 30, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,7 @@ The format is loosely inspired by Keep a Changelog.
 
 ### Added
 
+- **Web 0.13.36, sequence diagram in lesson 5:** step „Schritt für Schritt“ now shows a sequence as a structure chart: four boxes one below the other (`laenge`, `breite`, `flaeche = laenge * breite`, output 15) with a short caption that each box runs exactly once from top to bottom (de/en/pt).
 - **Web 0.13.35, open Java examples in the editor:** a Java example in a lesson can now carry the button „Im Editor öffnen“. It opens the example in a new tab with Programmieren set to Java, so students can run it, change values and try again; the structure chart builds itself from the code. Lesson 4 step „Text in Java“ (Mia, 14, 1.62) uses it and says how to try it (de/en/pt). For authors: write ```` ```java editor ```` instead of ```` ```java ````; a test checks that every such example parses without errors.
 - **Web 0.13.32, every exercise says where to solve it:** below the title of each exercise card a small label names the area: „Löse diese Übung im Struktogramm.“ or, for `code: java` exercises, „Löse diese Übung in Programmieren.“ The area names are taken from the on-screen headings, so they always match (de/en/pt; applies to all VisuStruct, VisuBot and task-area exercises).
 - **Web 0.13.28, data type char:** lesson 4 now names `char` after the four data types (a single character in single quotation marks, e.g. `char note = 'C'`, more in lesson 17). Lesson 17 has its own step „Ein einzelnes Zeichen: char“: `'C'` vs. `"C"`, no empty char, `charAt`, comparing with `==`, and the character code from the ASCII table with `(int)` and `(char)` as preparation for the Caesar task, plus a competence, a checklist line and two quiz questions for it. Nachschlagen has a new table „Datentypen“ with int, double, String, boolean and char; the glossary has new entries char and Zeichencode, and Datentyp mentions char (de/en/pt).

diff --git a/web/lessons/de/05-sequenz.md b/web/lessons/de/05-sequenz.md
@@ -19,6 +19,10 @@ Eine **Sequenz** ist eine Folge von Schritten, die genau einmal und genau in die
 
 Jeder Kasten wird erst begonnen, wenn der Kasten darüber fertig ist. Es wird nichts übersprungen und nichts wiederholt.
 
+::: diagramm l05-sequenz.visustruct
+Eine Sequenz aus vier Kästen: Zuerst bekommen `laenge` und `breite` ihre Werte, dann wird die Fläche berechnet, und zum Schluss wird sie ausgegeben. Jeder Kasten läuft genau einmal, von oben nach unten. Ausgabe: 15.
+:::
+
 > Die Sequenz ist der einfachste der drei Grundbausteine. Fast jedes Struktogramm besteht zum größten Teil aus Sequenzen.
 
 ## Die Reihenfolge zählt

diff --git a/web/lessons/diagramme/en/l05-sequenz.visustruct b/web/lessons/diagramme/en/l05-sequenz.visustruct
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<struktogramm caption="67;97;108;99;117;108;97;116;101;32;116;104;101;32;97;114;101;97;">
+  <strelem typ="0" zx="0" zy="0">
+    <text>105;110;116;32;108;101;110;103;116;104;32;61;32;53;</text>
+  </strelem>
+  <strelem typ="0" zx="0" zy="0">
+    <text>105;110;116;32;119;105;100;116;104;32;61;32;51;</text>
+  </strelem>
+  <strelem typ="0" zx="0" zy="0">
+    <text>105;110;116;32;97;114;101;97;32;61;32;108;101;110;103;116;104;32;42;32;119;105;100;116;104;</text>
+  </strelem>
+  <strelem typ="0" zx="0" zy="0">
+    <text>111;117;116;112;117;116;58;32;97;114;101;97;</text>
+  </strelem>
+</struktogramm>
diff --git a/web/lessons/diagramme/l05-sequenz.visustruct b/web/lessons/diagramme/l05-sequenz.visustruct
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<struktogramm caption="70;108;228;99;104;101;32;98;101;114;101;99;104;110;101;110;">
+  <strelem typ="0" zx="0" zy="0">
+    <text>105;110;116;32;108;97;101;110;103;101;32;61;32;53;</text>
+  </strelem>
+  <strelem typ="0" zx="0" zy="0">
+    <text>105;110;116;32;98;114;101;105;116;101;32;61;32;51;</text>
+  </strelem>
+  <strelem typ="0" zx="0" zy="0">
+    <text>105;110;116;32;102;108;97;101;99;104;101;32;61;32;108;97;101;110;103;101;32;42;32;98;114;101;105;116;101;</text>
+  </strelem>
+  <strelem typ="0" zx="0" zy="0">
+    <text>111;117;116;112;117;116;58;32;102;108;97;101;99;104;101;</text>
+  </strelem>
+</struktogramm>
diff --git a/web/lessons/diagramme/pt/l05-sequenz.visustruct b/web/lessons/diagramme/pt/l05-sequenz.visustruct
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<struktogramm caption="67;97;108;99;117;108;97;114;32;97;32;225;114;101;97;">
+  <strelem typ="0" zx="0" zy="0">
+    <text>105;110;116;32;99;111;109;112;114;105;109;101;110;116;111;32;61;32;53;</text>
+  </strelem>
+  <strelem typ="0" zx="0" zy="0">
+    <text>105;110;116;32;108;97;114;103;117;114;97;32;61;32;51;</text>
+  </strelem>
+  <strelem typ="0" zx="0" zy="0">
+    <text>105;110;116;32;97;114;101;97;32;61;32;99;111;109;112;114;105;109;101;110;116;111;32;42;32;108;97;114;103;117;114;97;</text>
+  </strelem>
+  <strelem typ="0" zx="0" zy="0">
+    <text>111;117;116;112;117;116;58;32;97;114;101;97;</text>
+  </strelem>
+</struktogramm>
diff --git a/web/lessons/en/05-sequenz.md b/web/lessons/en/05-sequenz.md
@@ -19,6 +19,10 @@ A **sequence** is a series of steps that run exactly once and in exactly this or
 
 Each box only starts when the box above it is finished. Nothing is skipped and nothing is repeated.
 
+::: diagramm l05-sequenz.visustruct
+A sequence of four boxes: first `length` and `width` get their values, then the area is calculated, and finally it is output. Each box runs exactly once, from top to bottom. Output: 15.
+:::
+
 > The sequence is the simplest of the three basic building blocks. Almost every structure chart is mostly made of sequences.
 
 ## Order matters

diff --git a/web/lessons/pt/05-sequenz.md b/web/lessons/pt/05-sequenz.md
@@ -19,6 +19,10 @@ Uma **sequência** é uma série de passos que são executados exatamente uma ve
 
 Cada bloco só começa quando o bloco de cima terminou. Nada é saltado e nada é repetido.
 
+::: diagramm l05-sequenz.visustruct
+Uma sequência de quatro blocos: primeiro `comprimento` e `largura` recebem os seus valores, depois a área é calculada e, no fim, é apresentada. Cada bloco é executado exatamente uma vez, de cima para baixo. Saída: 15.
+:::
+
 > A sequência é o mais simples dos três blocos básicos. Quase todos os estrutogramas são feitos sobretudo de sequências.
 
 ## A ordem conta

diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -1,7 +1,7 @@
 {
   "name": "visustruct-web",
   "private": true,
-  "version": "0.13.35",
+  "version": "0.13.36",
   "type": "module",
   "scripts": {
     "dev": "vite",