Web 0.13.35: Java-Beispiele mit „Im Editor öffnen“, Lektion 4 „Text in Java“ (#222)

```java editor zeigt unter dem Beispiel den Knopf „Im Editor öffnen“: neuer Reiter,
Spalte Programmieren auf Java, das Struktogramm entsteht aus dem Code. Lektion 4
(Mia, 14, 1.62) nutzt ihn (de/en/pt). Test: jedes solche Beispiel parst ohne Fehler.


Claude-Session: https://claude.ai/code/session_01Ugz28SXiSAUwXyrxcvRaHn

Co-authored-by: Claude <noreply@anthropic.com>

Author: code4teaching

CHANGELOG.md

@@ -14,6 +14,7 @@ The format is loosely inspired by Keep a Changelog.
 
 ### Added
 
+- **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).
 - **Web 0.13.26, competences and „Ich kann“ checklists in the VisuBot lessons:** all 22 VisuBot lessons follow the pattern of the VisuStruct lessons: first step „Diese Kompetenzen erwerbe ich jetzt“, „Ich kann …“ checklist with ☂️ ⛅ ☀️, quiz questions linked to their steps (de/en).

web/lessons/README.md

@@ -46,6 +46,10 @@ 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.
+Der Test prüft, dass jedes solche Beispiel ohne Fehler geparst wird.
+
 Eine Übung, die VisuStruct beim Klick auf „Prüfen“ automatisch kontrolliert:
 
 ```

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

@@ -184,7 +184,7 @@ Java hieß zuerst **Oak** (Eiche), nach dem Baum vor dem Bürofenster von James
 
 Variablen speichern nicht nur Zahlen. Für Text gibt es den Datentyp `String`:
 
-```java
+```java editor
 String name = "Mia";
 int alter = 14;
 double groesse = 1.62;
@@ -196,7 +196,7 @@ 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.
+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.
 
 ::: übung l04-java-steckbrief
 titel: Steckbrief in Java

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

@@ -184,7 +184,7 @@ Java was first called **Oak**, after the tree outside James Gosling’s office w
 
 Variables do not only store numbers. For text there is the data type `String`:
 
-```java
+```java editor
 String name = "Mia";
 int age = 14;
 double height = 1.62;
@@ -196,7 +196,7 @@ System.out.println("Height: " + height + " m");
 - You write `String` with a capital letter, `int`, `double` and `boolean` in lowercase. Java tells them apart.
 - With `+` you join text and numbers together.
 
-You type Java in the [Programming](#zeige-codelive) area. The structure chart builds itself as you type.
+You type Java in the [Programming](#zeige-codelive) area. The structure chart builds itself as you type. “Open in editor” brings the example into the Programming area. Click “Run” there, then change the name, age or height and try again.
 
 ::: übung l04-java-steckbrief
 titel: Profile in Java

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

@@ -184,7 +184,7 @@ O Java chamava-se primeiro **Oak** (carvalho), por causa da árvore em frente à
 
 As variáveis não guardam só números. Para texto existe o tipo de dados `String`:
 
-```java
+```java editor
 String nome = "Inês";
 int idade = 14;
 double altura = 1.62;
@@ -196,7 +196,7 @@ System.out.println("Altura: " + altura + " m");
 - `String` escreve-se com maiúscula, `int`, `double` e `boolean` com minúscula. O Java distingue-os.
 - Com `+` juntas texto e números.
 
-Escreves Java na área [Programação](#zeige-codelive). O estrutograma constrói-se sozinho enquanto escreves.
+Escreves Java na área [Programação](#zeige-codelive). O estrutograma constrói-se sozinho enquanto escreves. “Abrir no editor” leva o exemplo para a área Programação. Clica aí em “Executar”, depois muda o nome, a idade ou a altura e experimenta outra vez.
 
 ::: übung l04-java-steckbrief
 titel: Ficha em Java

web/package-lock.json

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

web/package.json

@@ -34,12 +34,15 @@ export function markdownToHTML(source: string): string {
       continue
     }
     if (line.startsWith('```')) {
-      const java = line.slice(3).trim() === 'java'
+      // ```java editor: Unter dem Beispiel steht „Im Editor öffnen“, dann kann man es in Programmieren ausprobieren.
+      const [lang, extra] = line.slice(3).trim().split(/\s+/)
+      const java = lang === 'java'
+      const open = java && extra === 'editor'
       const code: string[] = []
       i++
       while (i < lines.length && !lines[i].startsWith('```')) code.push(lines[i++])
       i++
-      out.push(`<pre class="lesson-code"${java ? ' data-lang="java"' : ''} dir="ltr"><code>${escape(code.join('\n'))}</code></pre>`)
+      out.push(`<pre class="lesson-code"${java ? ' data-lang="java"' : ''}${open ? ' data-open="editor"' : ''} dir="ltr"><code>${escape(code.join('\n'))}</code></pre>`)
       continue
     }
     const heading = /^(#{2,4})\s+(.*)$/.exec(line)

web/src/learn/markdown.ts

@@ -1245,6 +1245,19 @@ export class App {
         this.setSimulating(false)
         this.render()
       },
+      openJavaCode: (java: string) => {
+        this.openJavaColumn()
+        const tab = this.makeTab()
+        tab.doc = this.live.documentFromJavaText(java)
+        // Ein unberührter leerer Reiter wird ersetzt statt einen weiteren zu öffnen.
+        if (this.isPristine(this.tab)) this.tabs[this.tabIndex] = tab
+        else this.tabs.push(tab)
+        this.tabIndex = this.tabs.indexOf(tab)
+        this.setSimulating(false)
+        // Der Code bleibt so stehen, wie er in der Lektion steht.
+        this.live.adoptJava(tab.doc, java)
+        this.render()
+      },
       openDiagram: (doc: VSDocument, fileName: string) => {
         this.setEditorHidden(false)
         // Tab nach der Diagrammüberschrift benennen, nicht nach der Datei (l1-tee)

web/src/ui/app.ts

@@ -30,6 +30,8 @@ import { attachPointers, attachTermTips, markPointers, markTerms, pointsIntoEdit
 export interface LearnHost {
   /** Übung im Editor öffnen (vorhandenen Reiter wählen oder neuen anlegen). */
   openExercise(exercise: Exercise, doc: VSDocument): void
+  /** Java-Beispiel aus dem Text in einem neuen Reiter öffnen, Spalte „Programmieren“ auf Java. */
+  openJavaCode(java: string): void
   /** Beispieldiagramm in einem neuen Reiter öffnen. */
   openDiagram(doc: VSDocument, fileName: string): void
   /** Diagramm des Reiters, in dem die Übung offen ist. */
@@ -434,7 +436,7 @@ export class LearnPanel {
   private renderBlock(block: Block, key: string, lesson?: Lesson): HTMLElement {
     switch (block.kind) {
       case 'markdown':
-        return html('div', { class: 'learn-text' }, markdownToHTML(block.text))
+        return this.withOpenButtons(html('div', { class: 'learn-text' }, markdownToHTML(block.text)))
       case 'diagram':
         return this.renderDiagram(block.file, block.caption)
       case 'exercise':
@@ -576,6 +578,17 @@ export class LearnPanel {
     return figure
   }
 
+  /** Unter jedes Java-Beispiel mit ```java editor kommt „Im Editor öffnen“. */
+  private withOpenButtons(text: HTMLElement): HTMLElement {
+    for (const pre of text.querySelectorAll<HTMLElement>('pre.lesson-code[data-open=editor]')) {
+      const code = pre.textContent ?? ''
+      const open = h('button', { class: 'learn-open-code' }, t('web_learn_open_in_editor'))
+      open.addEventListener('click', () => this.host.openJavaCode(code))
+      pre.after(open)
+    }
+    return text
+  }
+
   private renderDiagram(file: string, caption: string): HTMLElement {
     const doc = diagram(file)
     const figure = h('figure', { class: 'learn-figure' })