Web 0.14.7: Bereich „Code“, Farben für Struktogramm und Code, Übungen mit bereich:

CHANGELOG.md

@@ -15,6 +15,7 @@ The format is loosely inspired by Keep a Changelog.
 
 ### Added
 
+- **Web 0.14.7, area „Code“ and area colours:** the area „Programmieren“ is now called „Code“ (en „Code“, pt „Código“) in the app, all lessons, VisuBot lessons, tasks and glossary. Struktogramm and Code each have a colour (blue #007aff, violet #7c3aed): a coloured top edge, the slim strip when collapsed, and the area names on the exercise card („Löse diese Übung im Struktogramm und im Code.“). New exercise key `bereich: struktogramm | code | beide`: the card names the area(s) and „Im Editor öffnen“ shows exactly those: the lessons stay open, everything else (files, mBot2 live, the other area) is closed. Lesson 20 „Countdown“ and „Fakultät aus Java“ use `beide` (de/en/pt).
 - **Web 0.14.6, Konrad Zuse in lesson 3:** after the punched card, an Angeberwissen box on Konrad Zuse: the Z3 (12 May 1941, Berlin, first working program-controlled digital computer, binary, about 2,000 relays, program punched into used cinema film), Plankalkül as one of the first programming languages, and Hünfeld near Fulda where he lived until 1995, with the Konrad Zuse Museum (Z3 replicas) as a school trip tip (no opening hours, pointer to the town's website). New self-drawn, text-free SVG l03-zuse-lochstreifen.svg of a punched film strip (hole = 1, no hole = 0) (de/en/pt).
 - **Web 0.14.5, Ada Lovelace with picture:** lesson 1 step „Ein Algorithmus ist eine genaue Anleitung“ has a new Angeberwissen box after the tea example: Ada Lovelace wrote the first program in 1843 (Bernoulli numbers for Charles Babbage's Analytical Engine, instructions on punched cards, the machine was never built), had the idea that such a machine can work with letters, symbols and music, and the programming language Ada is named after her. Below it her portrait (watercolour by Alfred Edward Chalon, around 1840, Wikimedia Commons, public domain, 300×400) with caption (de/en/pt).
 - **Web 0.14.4, why we always write curly brackets:** lesson 8 step „Jetzt in Java“ has a new Angeberwissen box: Java lets you leave out `{ }` around a single statement, a short example shows the indented second line still running every time, and Apple's „goto fail“ bug (2014) shows the real consequence. Step „Ein leerer Zweig“ gets a box on Heartbleed (2014) as a forgotten if (missing length check, nothing to do with brackets). In step „Wenn, dann, sonst“ the structure chart now comes before the explanation (de/en/pt).

web/README.md

@@ -90,7 +90,7 @@ Verschieben vorhandener Elemente mit dem Finger.
 ## VisuObject (Welt `?visuobject`)
 
 Dritte Welt neben VisuStruct und VisuBot, für Objektorientierung ab Klasse 12 (Plan: `docs/visuobject/PLAN.md`).
-`src/ui/objectApp.ts` zeigt links den Java-Code (CodeMirror wie in „Programmieren“) und rechts das Klassendiagramm.
+`src/ui/objectApp.ts` zeigt links den Java-Code (CodeMirror wie in „Code“) und rechts das Klassendiagramm.
 `src/core/classModel.ts` liest Klassen, Attribute, Methoden-Köpfe, `extends` und `implements` aus dem Code und schreibt
 Änderungen im Diagramm an genau diese Stelle zurück (Rümpfe, Startwerte und Kommentare bleiben). Tests: `test/classModel.test.ts`.
 Ein Projekt hat mehrere Dateien in Packages (`src/core/javaProject.ts`, eine Datei pro Klasse, die Zeile `package …;` folgt

web/lessons/README.md

@@ -47,7 +47,7 @@ Eine Ausgabe mit Text in Anführungszeichen.
 ```
 
 Ein Java-Beispiel im Text mit Knopf „Im Editor öffnen“: Statt ```` ```java ```` schreibt man ```` ```java editor ````. Der Knopf
-öffnet das Beispiel in einem neuen Reiter, die Spalte Programmieren auf Java; dort kann man es ausführen und verändern.
+öffnet das Beispiel in einem neuen Reiter, die Spalte Code auf Java; dort kann man es ausführen und verändern.
 Der Test prüft, dass jedes solche Beispiel ohne Fehler geparst wird.
 
 Eine Übung, die VisuStruct beim Klick auf „Prüfen“ automatisch kontrolliert:
@@ -77,7 +77,8 @@ lösung: l2-hallo-loesung.visustruct
 - `unterprogramm:` (optional) Unterprogramme zur Musterlösung, durch Komma getrennt. Ihr Titel ist der Name im Aufruf. Beim Prüfen findet VisuStruct Unterprogramme in den anderen offenen Reitern.
 - `datei:` (optional, nach einem `test:`) Diese Datei soll das Programm in diesem Test speichern, zum Beispiel
   `datei: einkauf-neu.txt -> Heu | Äpfel | Kuchen`. Verglichen wird Zeile für Zeile wie bei den Ausgaben.
-- `code: java` (optional) Die Übung wird im Bereich Programmieren in Java gelöst. „Im Editor öffnen“ öffnet die Spalte gleich mit und stellt sie auf Java. Geprüft wird wie sonst das Struktogramm, das beim Tippen entsteht. Eine Musterlösung ist Pflicht, der Test tippt sie als Java und prüft sie.
+- `code: java` (optional) Die Übung wird im Bereich Code in Java gelöst. „Im Editor öffnen“ öffnet die Spalte gleich mit und stellt sie auf Java. Geprüft wird wie sonst das Struktogramm, das beim Tippen entsteht. Eine Musterlösung ist Pflicht, der Test tippt sie als Java und prüft sie.
+- `bereich: struktogramm | code | beide` (optional) Wo man die Übung löst. Die Karte zeigt es farbig an (Struktogramm blau, Code violett), und „Im Editor öffnen“ zeigt genau diese Bereiche: Lektionen bleiben offen, alles andere (Dateien, mBot2 live, bei `struktogramm` der Code, bei `code` das Struktogramm) wird geschlossen. Ohne Angabe gilt `code` bei `code: java`, sonst `struktogramm`. Für Übungen, bei denen man Code tippt und das Struktogramm liest (oder umgekehrt), `beide` nehmen.
 - Die Kennung (`l2-hallo`) muss überall eindeutig sein, denn unter ihr wird der Fortschritt gespeichert.
 
 Eine Checkliste zum Abhaken:

web/lessons/de/02-der-editor.md

@@ -14,7 +14,7 @@ kurz: Elemente einfügen, Text eingeben, verschieben und löschen.
 
 ## Die Oberfläche
 
-VisuStruct hat zwei Editoren: den [Struktogramm-Editor](#zeige-editor), um den es in dieser Lektion geht, und rechts den Bereich [Programmieren](#zeige-codelive) für Java-Code (ab Lektion 4). Ist der Struktogramm-Editor eingeklappt, öffnet ihn diese Lektion von selbst. Die blauen Wörter zeigen dir die Bereiche, auch wenn sie gerade eingeklappt sind: Fährst du mit der Maus darüber, öffnet sich der Bereich neben dem Lernbereich und leuchtet auf. Klickst du darauf (oder tippst es an), bleibt er offen.
+VisuStruct hat zwei Editoren: den [Struktogramm-Editor](#zeige-editor), um den es in dieser Lektion geht, und rechts den Bereich [Code](#zeige-codelive) für Java-Code (ab Lektion 4). Ist der Struktogramm-Editor eingeklappt, öffnet ihn diese Lektion von selbst. Die blauen Wörter zeigen dir die Bereiche, auch wenn sie gerade eingeklappt sind: Fährst du mit der Maus darüber, öffnet sich der Bereich neben dem Lernbereich und leuchtet auf. Klickst du darauf (oder tippst es an), bleibt er offen.
 
 Der Struktogramm-Editor besteht aus mehreren Bereichen. Fahre mit der Maus über ein blaues Wort oder tippe es an, dann leuchtet der Bereich im Editor auf, eingeklappte Bereiche wie die Elemente öffnen sich dabei.
 
@@ -24,7 +24,7 @@ Der Struktogramm-Editor besteht aus mehreren Bereichen. Fahre mit der Maus über
 - **In der Mitte das [Struktogramm](#zeige-struktogramm):** Ein neues Diagramm enthält nur einen leeren Platzhalter, erkennbar an **ø**.
 - **Unten der [Objektinspektor](#zeige-objektinspektor):** Hier bearbeitest du den Text des ausgewählten Elements.
 
-> Diesen Lernbereich kannst du jederzeit mit dem [Seitenleisten-Symbol](#zeige-lernen) oben in diesem Bereich einklappen. Dann bleibt links nur die schmale Leiste „🎓 Lernen“, ein Klick darauf öffnet ihn wieder. Er bleibt neben dem Editor offen, damit du gleich ausprobieren kannst, was du liest. Genauso gibt es links die Spalte [📁 Dateien](#zeige-dateien) für deine gespeicherten Programme (Lektion 3) und rechts den Bereich [Programmieren](#zeige-codelive) für Java (ab Lektion 4).
+> Diesen Lernbereich kannst du jederzeit mit dem [Seitenleisten-Symbol](#zeige-lernen) oben in diesem Bereich einklappen. Dann bleibt links nur die schmale Leiste „🎓 Lernen“, ein Klick darauf öffnet ihn wieder. Er bleibt neben dem Editor offen, damit du gleich ausprobieren kannst, was du liest. Genauso gibt es links die Spalte [📁 Dateien](#zeige-dateien) für deine gespeicherten Programme (Lektion 3) und rechts den Bereich [Code](#zeige-codelive) für Java (ab Lektion 4).
 
 ## Ein Element einfügen
 

web/lessons/de/04-variablen-und-datentypen.md

@@ -194,14 +194,14 @@ System.out.println("Größe: " + groesse + " m");
 - `String` schreibst du groß, `int`, `double` und `boolean` klein. Java unterscheidet das.
 - Mit `+` hängst du Text und Zahlen aneinander.
 
-Java tippst du im Bereich [Programmieren](#zeige-codelive). Das Struktogramm entsteht dabei von selbst. „Im Editor öffnen“ holt das Beispiel in den Bereich Programmieren. Klicke dort auf „Ausführen“, ändere dann Name, Alter oder Größe und probiere es noch einmal.
+Java tippst du im Bereich [Code](#zeige-codelive). Das Struktogramm entsteht dabei von selbst. „Im Editor öffnen“ holt das Beispiel in den Bereich Code. Klicke dort auf „Ausführen“, ändere dann Name, Alter oder Größe und probiere es noch einmal.
 
 ::: übung l04-java-steckbrief
 titel: Steckbrief in Java
 code: java
 auftrag: Schreibe einen Steckbrief für Ludwig den Geißbock. Lege drei Variablen an: den Namen **Ludwig**, das Alter **7** und die Größe **1.2**. Gib dann diese zwei Zeilen aus:
   **Ludwig ist 7 Jahre alt.** und **Größe: 1.2 m**
-  „Im Editor öffnen“ öffnet rechts auch den Bereich Programmieren. Tippe dort deinen Code, das Struktogramm entsteht dabei von selbst. Klicke dann auf Prüfen.
+  „Im Editor öffnen“ öffnet rechts auch den Bereich Code. Tippe dort deinen Code, das Struktogramm entsteht dabei von selbst. Klicke dann auf Prüfen.
 test: - -> Ludwig ist 7 Jahre alt. | Größe: 1.2 m
 braucht: anweisung
 tipp: Du brauchst einen `String`, einen `int` und einen `double`. Jede Zeile endet mit einem Semikolon.
@@ -225,7 +225,7 @@ auftrag: Ergänze die fehlenden Wörter. Ganz außen steht der Rahmen, den jedes
     }
 }
 ```
-erklärung: Ganze Zahlen sind `int`, Kommazahlen `double`, Texte `String` (groß geschrieben) und Wahrheitswerte `boolean`. `public class` und `public static void main` bilden den Rahmen. Im Bereich Programmieren darfst du ihn weglassen, mehr dazu in der Lektion „Java“.
+erklärung: Ganze Zahlen sind `int`, Kommazahlen `double`, Texte `String` (groß geschrieben) und Wahrheitswerte `boolean`. `public class` und `public static void main` bilden den Rahmen. Im Bereich Code darfst du ihn weglassen, mehr dazu in der Lektion „Java“.
 :::
 
 ## Fehler finden: Sekunden
@@ -234,7 +234,7 @@ erklärung: Ganze Zahlen sind `int`, Kommazahlen `double`, Texte `String` (groß
 titel: Sekunden reparieren
 code: java
 auftrag: Das Programm soll 200 Sekunden in Minuten und Sekunden umrechnen und **3 min 20 s** ausgeben. Es gibt aber **20 min 3 s** aus.
-  „Im Editor öffnen“ zeigt den Code im Bereich Programmieren. Finde den Fehler, repariere ihn und klicke auf Prüfen.
+  „Im Editor öffnen“ zeigt den Code im Bereich Code. Finde den Fehler, repariere ihn und klicke auf Prüfen.
 start: l04-java-fehler-start.visustruct
 test: - -> 3 min 20 s
 braucht: anweisung

web/lessons/de/05-sequenz.md

@@ -100,13 +100,13 @@ System.out.println("b = " + b);
 - Am Ende jeder Anweisung steht ein **Semikolon** `;`.
 - Eine Ausgabe heißt in Java `System.out.println(…)`. Achte auf das große S bei `System`, Java unterscheidet Groß- und Kleinbuchstaben.
 
-Java tippst du im Bereich [Programmieren](#zeige-codelive) rechts neben dem Struktogramm. Während du tippst, baut VisuStruct das Struktogramm mit. So siehst du sofort, welcher Kasten zu welcher Zeile gehört.
+Java tippst du im Bereich [Code](#zeige-codelive) rechts neben dem Struktogramm. Während du tippst, baut VisuStruct das Struktogramm mit. So siehst du sofort, welcher Kasten zu welcher Zeile gehört.
 
 ::: übung l05-java-kino
 titel: Kinokarten in Java
 code: java
 auftrag: Eine Kinokarte kostet 9 Euro. Schreibe ein Java-Programm, das den Preis für 3 Karten ausrechnet und **Gesamt: 27** ausgibt.
-  „Im Editor öffnen“ öffnet rechts auch den Bereich Programmieren. Tippe dort deinen Code, das Struktogramm entsteht dabei von selbst. Klicke dann auf Prüfen.
+  „Im Editor öffnen“ öffnet rechts auch den Bereich Code. Tippe dort deinen Code, das Struktogramm entsteht dabei von selbst. Klicke dann auf Prüfen.
 test: - -> Gesamt: 27
 braucht: anweisung
 tipp: Du brauchst drei Variablen: den Preis, die Anzahl und das Ergebnis. Jede Zeile endet mit einem Semikolon.
@@ -136,7 +136,7 @@ erklärung: Erst rettest du `a` in die Hilfsvariable, dann bekommt `a` den Wert
 titel: Guthaben reparieren
 code: java
 auftrag: Auf der Mensakarte sind 20 Euro. Ein Essen kostet 7 Euro. Das Programm soll das Guthaben **nach** dem Bezahlen ausgeben, also **Übrig: 13**. Es gibt aber **Übrig: 20** aus.
-  „Im Editor öffnen“ zeigt den Code im Bereich Programmieren. Finde den Fehler, repariere ihn und klicke auf Prüfen.
+  „Im Editor öffnen“ zeigt den Code im Bereich Code. Finde den Fehler, repariere ihn und klicke auf Prüfen.
 start: l05-java-fehler-start.visustruct
 test: - -> Übrig: 13
 braucht: anweisung

web/lessons/de/06-eingabe-und-ausgabe.md

@@ -262,7 +262,7 @@ erklärung: `scanner.next()` liest ein Wort, `scanner.nextInt()` eine ganze Zahl
 titel: Summe reparieren
 code: java
 auftrag: Das Programm liest zwei Zahlen ein und soll ihre Summe ausgeben. Bei 3 und 4 erscheint aber **Summe: 34** statt **Summe: 7**.
-  „Im Editor öffnen“ zeigt den Code im Bereich Programmieren. Finde den Fehler, repariere ihn und klicke auf Prüfen.
+  „Im Editor öffnen“ zeigt den Code im Bereich Code. Finde den Fehler, repariere ihn und klicke auf Prüfen.
 start: l06-java-fehler-start.visustruct
 test: 3, 4 -> Summe: 7
 test: 10, 5 -> Summe: 15

web/lessons/de/07-simulation-und-schreibtischtest.md

@@ -41,7 +41,7 @@ Die Werte von a und b werden vertauscht. Die Variable hilf merkt sich dabei eine
 - **Variablen:** Alle Variablen mit ihren aktuellen Werten.
 - **Ausgabe:** Alles, was mit `output:` ausgegeben wurde.
 
-Ist rechts der Bereich [Programmieren](#zeige-codelive) geöffnet, läuft dort zusätzlich die [Konsole](#zeige-konsole) mit. Sie wird beim Start geleert und zeigt dann die Ausgaben und Eingaben so, wie sie auch beim echten Programm erscheinen würden.
+Ist rechts der Bereich [Code](#zeige-codelive) geöffnet, läuft dort zusätzlich die [Konsole](#zeige-konsole) mit. Sie wird beim Start geleert und zeigt dann die Ausgaben und Eingaben so, wie sie auch beim echten Programm erscheinen würden.
 
 Am Ende erscheint **Simulation beendet**. Geht etwas schief, bleibt die Simulation auf dem fehlerhaften Kasten stehen und zeigt eine Meldung, z. B. **Unbekannte Variable: gesamt**.
 
@@ -128,7 +128,7 @@ lösung: sim-kino-loesung.visustruct
 
 ## Jetzt in Java
 
-Auch Java-Code kannst du Schritt für Schritt ausführen. Im Bereich [Programmieren](#zeige-codelive) heißt das Werkzeug dafür **Debugger**:
+Auch Java-Code kannst du Schritt für Schritt ausführen. Im Bereich [Code](#zeige-codelive) heißt das Werkzeug dafür **Debugger**:
 
 - Klicke links auf eine Zeilennummer. Ein roter Punkt erscheint, das ist ein **Haltepunkt**. [▶︎ Ausführen](#zeige-ausfuehren) hält vor dieser Zeile an.
 - Der Knopf [Einzelschritt](#zeige-einzelschritt) führt genau eine Zeile aus, wie **Schritt** in der Simulation.
@@ -160,7 +160,7 @@ b = a * 2;      // b ist jetzt [[14]]
 a = b - a;      // a ist jetzt [[7]]
 System.out.println(a + b);      // Ausgabe: [[21]]
 ```
-erklärung: Jede Zeile rechnet mit den Werten, die gerade in den Variablen stehen: a = 5 + 2 = 7, b = 7 · 2 = 14, a = 14 − 7 = 7, Ausgabe 7 + 14 = 21. Mit dem Einzelschritt im Bereich Programmieren kannst du es nachprüfen.
+erklärung: Jede Zeile rechnet mit den Werten, die gerade in den Variablen stehen: a = 5 + 2 = 7, b = 7 · 2 = 14, a = 14 − 7 = 7, Ausgabe 7 + 14 = 21. Mit dem Einzelschritt im Bereich Code kannst du es nachprüfen.
 :::
 
 ## Fehler finden: Spielstand
@@ -292,7 +292,7 @@ Schätze dich bei jedem Punkt ehrlich ein: ☂️ noch nicht, ⛅ teilweise, ☀
 - [ ] summe ist zu groß.
 - [ ] Das Struktogramm hat zu viele Kästen.
 
-? Was macht ein roter Punkt vor einer Zeilennummer im Bereich Programmieren?
+? Was macht ein roter Punkt vor einer Zeilennummer im Bereich Code?
 → Jetzt in Java
 - [ ] Er markiert einen Fehler.
 - [x] Das Programm hält vor dieser Zeile an.

web/lessons/de/08-verzweigung.md

@@ -134,7 +134,7 @@ Java hat auch ein Maskottchen: **Duke**, ein kleiner schwarz-weißer Kerl mit gr
 titel: Bestanden in Java
 code: java
 auftrag: Schreibe ein Java-Programm, das nach der Punktzahl fragt. Ab 50 Punkten gibt es **bestanden** aus, sonst **nicht bestanden**.
-  Tippe den Code im Bereich Programmieren und klicke dann auf Prüfen.
+  Tippe den Code im Bereich Code und klicke dann auf Prüfen.
 test: 50 -> bestanden
 test: 49 -> nicht bestanden
 test: 100 -> bestanden
@@ -185,7 +185,7 @@ erklärung: `zahl % 2` ist der Rest beim Teilen durch 2. Ist er 0, ist die Zahl
 titel: Eintritt reparieren
 code: java
 auftrag: Im Zoo haben Kinder **unter** 6 Jahren freien Eintritt, alle anderen zahlen 4 Euro. Das Programm lässt aber auch Sechsjährige umsonst hinein.
-  „Im Editor öffnen“ zeigt den Code im Bereich Programmieren. Finde den Fehler, repariere ihn und klicke auf Prüfen.
+  „Im Editor öffnen“ zeigt den Code im Bereich Code. Finde den Fehler, repariere ihn und klicke auf Prüfen.
 start: l08-java-fehler-start.visustruct
 test: 5 -> Eintritt frei
 test: 6 -> 4 Euro

web/lessons/de/09-bedingungen-verknuepfen.md

@@ -247,7 +247,7 @@ erklärung: Eine Note ist gültig, wenn **beide** Bedingungen stimmen, also `&&`
 titel: Schulfrei reparieren
 code: java
 auftrag: Das Programm soll bei Tag 6 (Samstag) und Tag 7 (Sonntag) **schulfrei** ausgeben, sonst **Schule**. Es gibt aber immer **Schule** aus.
-  „Im Editor öffnen“ zeigt den Code im Bereich Programmieren. Finde den Fehler, repariere ihn und klicke auf Prüfen.
+  „Im Editor öffnen“ zeigt den Code im Bereich Code. Finde den Fehler, repariere ihn und klicke auf Prüfen.
 start: l09-java-fehler-start.visustruct
 test: 6 -> schulfrei
 test: 7 -> schulfrei

web/lessons/de/10-fallauswahl.md

@@ -171,7 +171,7 @@ erklärung: Nach `switch` steht die Variable in runden Klammern. Jeder Fall begi
 titel: Rechner reparieren
 code: java
 auftrag: Der Rechner liest zwei Zahlen und eine Wahl ein: 1 plus, 2 minus, 3 mal. Bei 7, 3 und Wahl 2 soll **4** herauskommen, er rechnet aber **-4**.
-  „Im Editor öffnen“ zeigt den Code im Bereich Programmieren. Finde den Fehler, repariere ihn und klicke auf Prüfen.
+  „Im Editor öffnen“ zeigt den Code im Bereich Code. Finde den Fehler, repariere ihn und klicke auf Prüfen.
 start: l10-java-fehler-start.visustruct
 test: 7, 3, 2 -> 4
 test: 7, 3, 1 -> 10

web/lessons/de/12-do-while-schleife.md

@@ -132,7 +132,7 @@ erklärung: Der Rumpf steht zwischen `do {` und `}`, die Bedingung erst danach.
 titel: Halbieren reparieren
 code: java
 auftrag: Das Programm liest eine Startzahl ein und teilt sie mit einer Do-while-Schleife immer wieder ganzzahlig durch 2. Jedes Ergebnis wird ausgegeben, bis **0** erreicht ist. Bei 10 also 5, 2, 1 und 0. Die 0 fehlt aber.
-  „Im Editor öffnen“ zeigt den Code im Bereich Programmieren. Finde den Fehler, repariere ihn und klicke auf Prüfen.
+  „Im Editor öffnen“ zeigt den Code im Bereich Code. Finde den Fehler, repariere ihn und klicke auf Prüfen.
 start: l12-java-fehler-start.visustruct
 test: 10 -> 5 | 2 | 1 | 0
 test: 1 -> 0

web/lessons/de/13-for-schleife.md

@@ -169,7 +169,7 @@ erklärung: In den runden Klammern stehen Startwert, Bedingung und Schritt, getr
 titel: Einmaleins reparieren
 code: java
 auftrag: Das Programm fragt nach einer Reihe und soll sie vom 1-fachen bis zum 10-fachen ausgeben, bei 7 also 7, 14, … bis 70. Die 70 fehlt aber.
-  „Im Editor öffnen“ zeigt den Code im Bereich Programmieren. Finde den Fehler, repariere ihn und klicke auf Prüfen.
+  „Im Editor öffnen“ zeigt den Code im Bereich Code. Finde den Fehler, repariere ihn und klicke auf Prüfen.
 start: l13-java-fehler-start.visustruct
 test: 7 -> 7 | 14 | 21 | 28 | 35 | 42 | 49 | 56 | 63 | 70
 test: 3 -> 3 | 6 | 9 | 12 | 15 | 18 | 21 | 24 | 27 | 30