Web 0.14.19: Fünf Übungen öffnen Struktogramm und Code zusammen

CHANGELOG.md

@@ -19,6 +19,7 @@ The format is loosely inspired by Keep a Changelog.
 
 ### Added
 
+- **Web 0.14.19, more exercises for both areas:** „Steckbrief in Java“ (L4), „Kinokarten in Java“ (L5), „Ticketpreis“ (L20), „Gerade Zahlen“ and „Wählen ab 16“ (L21) now use `bereich: beide`, so „Im Editor öffnen“ shows Struktogramm and Code together. Exercises without `code: java` keep the chosen language in Code (Python or JavaScript in L21) instead of switching to Java (de/en/pt).
 - **Web 0.14.14, rename a variable (refactoring):** right-click a variable name in the Code area (or press F2) and choose „Variable umbenennen …“; in the structure chart right-click an element, press F2 or use the new button in the object inspector. A small window shows the name, how often it is used and the new name. Every place with exactly the same spelling changes in the code and in the structure chart in one undo step (`zahl` and `Zahl` stay separate, matching the case-sensitivity exercises); text in "…", characters, comments and fields after a dot (`feld.length`) stay. Invalid names and Java keywords are refused; if the new name already exists, a warning says both would become one variable (all 21 languages).
 - **Web 0.14.13, no robot emoji in the world chooser:** the button „🤖 VisuBot“ in the gear menu and the start dialog is now just „VisuBot“, like the other worlds (Holger's wish).
 - **Web 0.14.12, the „Einrücken“ button also formats:** in the Code area the button no longer only fixes the spaces at the start of a line. It now puts every block brace `}` on its own line (`} else {`, `} catch`, `} while` of do-while stay together), one statement per line, and spaces around operators like `>=`, `=`, `&&`, `? :`, after commas and in `if (`/`) {`. It changes only whitespace between tokens, never joins lines, and is careful with array initialisers, generics, signs like `-1` and `(int) -x`, `import java.util.*`, pseudocode like `if (Alter über 18?)`, strings and comments. One undo step; breakpoints move with their line; with a selection only those lines. Nothing is reformatted while typing. New `web/src/core/javaFormat.ts` with tests (#244).

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

@@ -226,6 +226,7 @@ Java tippst du im Bereich [Code](#zeige-codelive). Das Struktogramm entsteht dab
 
 ::: übung l04-java-steckbrief
 titel: Steckbrief in Java
+bereich: beide
 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**

web/lessons/de/05-sequenz.md

@@ -104,6 +104,7 @@ Java tippst du im Bereich [Code](#zeige-codelive) rechts neben dem Struktogramm.
 
 ::: übung l05-java-kino
 titel: Kinokarten in Java
+bereich: beide
 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 Code. Tippe dort deinen Code, das Struktogramm entsteht dabei von selbst. Klicke dann auf Prüfen.

web/lessons/de/20-java.md

@@ -305,6 +305,7 @@ Im Struktogramm gibt es kein `else if`. Dort steckt eine zweite Verzweigung im N
 
 ::: übung l17-ticket
 titel: Ticketpreis
+bereich: beide
 auftrag: Frage nach dem Alter als ganze Zahl und baue den Java-Code oben als Struktogramm nach.
 test: 5 -> Eintritt frei
 test: 6 -> Kinderticket: 4 Euro

web/lessons/de/21-python-und-javascript.md

@@ -112,6 +112,7 @@ for i in range(0, grenze + 1, 2):
 
 ::: übung l18-python
 titel: Gerade Zahlen
+bereich: beide
 auftrag: Baue das Python-Programm oben als Struktogramm mit einer For-Schleife nach. Bei der Grenze 7 gibt es 0, 2, 4 und 6 aus.
 test: 7 -> 0 | 2 | 4 | 6
 test: 4 -> 0 | 2 | 4
@@ -136,6 +137,7 @@ if (alter >= 16) {
 
 ::: übung l18-js
 titel: Wählen ab 16
+bereich: beide
 auftrag: Baue den JavaScript-Code oben als Struktogramm nach. Teste danach in der Code-Ansicht mit **JavaScript** und **Im Browser testen**, ob dein Code dasselbe ausgibt wie die Simulation.
 test: 12 -> Noch 4 Jahre warten.
 test: 16 -> Du darfst wählen.

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

@@ -226,6 +226,7 @@ You type Java in the [Code](#zeige-codelive) area. The structure chart builds it
 
 ::: übung l04-java-steckbrief
 titel: Profile in Java
+bereich: beide
 code: java
 auftrag: Write a profile of Ludwig the billy goat. Create three variables: the name **Ludwig**, the age **7** and the height **1.2**. Then output these two lines:
   **Ludwig is 7 years old.** and **Height: 1.2 m**

web/lessons/en/05-sequenz.md

@@ -104,6 +104,7 @@ You type Java in the [Code](#zeige-codelive) area to the right of the structure
 
 ::: übung l05-java-kino
 titel: Cinema tickets in Java
+bereich: beide
 code: java
 auftrag: A cinema ticket costs 9 euros. Write a Java program that calculates the price of 3 tickets and outputs **Total: 27**.
   “Open in editor” also opens the Code area on the right. Type your code there; the structure chart builds itself. Then click Check.

web/lessons/en/20-java.md

@@ -305,6 +305,7 @@ There is no `else if` in a structure chart. There, a second branch sits in the f
 
 ::: übung l17-ticket
 titel: Ticket price
+bereich: beide
 auftrag: Ask for the age as a whole number and rebuild the Java code above as a structure chart.
 test: 5 -> Free entry
 test: 6 -> Child ticket: 4 euros

web/lessons/en/21-python-und-javascript.md

@@ -112,6 +112,7 @@ for i in range(0, limit + 1, 2):
 
 ::: übung l18-python
 titel: Even numbers
+bereich: beide
 auftrag: Rebuild the Python program above as a structure chart with a for loop. With the limit 7 it outputs 0, 2, 4 and 6.
 test: 7 -> 0 | 2 | 4 | 6
 test: 4 -> 0 | 2 | 4
@@ -136,6 +137,7 @@ if (age >= 16) {
 
 ::: übung l18-js
 titel: Voting from 16
+bereich: beide
 auftrag: Rebuild the JavaScript code above as a structure chart. Then test in the code view with **JavaScript** and **Test in browser** whether your code outputs the same as the simulation.
 test: 12 -> Wait 4 more years.
 test: 16 -> You may vote.

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

@@ -226,6 +226,7 @@ Escreves Java na área [Código](#zeige-codelive). O estrutograma constrói-se s
 
 ::: übung l04-java-steckbrief
 titel: Ficha em Java
+bereich: beide
 code: java
 auftrag: Escreve a ficha do Ludwig, o bode. Cria três variáveis: o nome **Ludwig**, a idade **7** e a altura **1.2**. Depois mostra estas duas linhas:
   **Ludwig tem 7 anos.** e **Altura: 1.2 m**

web/lessons/pt/05-sequenz.md

@@ -104,6 +104,7 @@ Escreves Java na área [Código](#zeige-codelive), à direita do estrutograma. E
 
 ::: übung l05-java-kino
 titel: Bilhetes de cinema em Java
+bereich: beide
 code: java
 auftrag: Um bilhete de cinema custa 9 euros. Escreve um programa em Java que calcula o preço de 3 bilhetes e mostra **Total: 27**.
   “Abrir no editor” abre também a área Código à direita. Escreve lá o teu código; o estrutograma constrói-se sozinho. Depois clica em Verificar.

web/lessons/pt/20-java.md

@@ -305,6 +305,7 @@ Num estrutograma não existe `else if`. Aí, uma segunda decisão fica no ramo f
 
 ::: übung l17-ticket
 titel: Preço do bilhete
+bereich: beide
 auftrag: Pede a idade como número inteiro e reconstrói o código Java de cima como estrutograma.
 test: 5 -> Entrada gratuita
 test: 6 -> Bilhete de criança: 4 euros

web/lessons/pt/21-python-und-javascript.md

@@ -112,6 +112,7 @@ for i in range(0, limite + 1, 2):
 
 ::: übung l18-python
 titel: Números pares
+bereich: beide
 auftrag: Reconstrói o programa Python de cima como estrutograma com um ciclo for. Com o limite 7, mostra 0, 2, 4 e 6.
 test: 7 -> 0 | 2 | 4 | 6
 test: 4 -> 0 | 2 | 4
@@ -136,6 +137,7 @@ if (idade >= 18) {
 
 ::: übung l18-js
 titel: Votar a partir dos 18
+bereich: beide
 auftrag: Reconstrói o código JavaScript de cima como estrutograma. Depois testa na vista de código, com **JavaScript** e **Testar no navegador**, se o teu código mostra o mesmo que a simulação.
 test: 12 -> Espera mais 6 anos.
 test: 18 -> Podes votar.

web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "visustruct-web",
   "private": true,
-  "version": "0.14.18",
+  "version": "0.14.19",
   "type": "module",
   "scripts": {
     "dev": "vite",

web/src/ui/app.ts

@@ -1240,7 +1240,11 @@ export class App {
         // dieser Bereich zu sehen (bei `beide` Struktogramm und Code); Dateien, mBot2 live usw. gehen zu.
         const area = exerciseArea(ex)
         if (area !== 'code') this.setEditorHidden(false)
-        if (area !== 'struktogramm') this.openJavaColumn()
+        // Java-Übungen stellen Code auf Java; sonst bleibt die Sprache (z. B. Python oder JavaScript in Lektion 21).
+        if (area !== 'struktogramm') {
+          if (ex.code === 'java') this.openJavaColumn()
+          else if (!this.liveCoding) this.setLiveCoding(true)
+        }
         if (this.coding) this.setCoding(false)
         if (this.shell.classList.contains('files-open')) this.setFilesOpen(false)
         if (this.previewOpen) this.setPreviewOpen(false)