Web 0.15.28: Block-Lektion 7 „Der Linie folgen“

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ugz28UyJP4CyzFezJTWZbD

Author: claude

CHANGELOG.md

@@ -8,6 +8,7 @@ The format is loosely inspired by Keep a Changelog.
 
 ### Changed
 
+- **Web 0.15.28, VisuBot block lesson 7 „Der Linie folgen“:** the line sensor for younger learners: turn around at the black edge (`solange Linie == 0`), then a simple two-case line follower with „Linie links?“ and „Räder einzeln“ (wenn links Schwarz: 10, 40, sonst 40, 10), checked in both line worlds; game „Was passiert?“ with four rounds.
 - **Web 0.15.27, VisuBot block lessons 5 „Lichter und Töne“ and 6 „Immer wieder prüfen“:** LEDs in RGB colours, blinking with „wiederhole“ and „kurz warten“, a siren with „Ton spielen“, and a free light show. The game „Was passiert?“ (`spiel frage`) shows its rounds as blocks in the block lessons, like „Wo landet der mBot2?“. Lesson 6 „Immer wieder prüfen“: wait for button A (solange nicht …), endless loop with an emergency brake, free obstacle avoidance. Blocks also show „nicht“, „und“, „oder“ and „verlasse die Schleife“ instead of `!`, `&&`, `||` and `break`.
 - **Web 0.15.26, VisuBot: short block lessons for younger learners (grades 5/6):** when the block view is on in VisuBot, the learning area shows its own short lesson series from `web/lessons/<lang>/visubot/bloecke/` instead of the Java series (switching back restores it; no exercises tab content there). Lessons are about trying things out: step 1 „Das schaffst du heute“, a few hands-on exercises, a game, and „Das hab ich geschafft“ as the checklist; no knowledge test. First lessons (German): 1 „Losfahren“ (drive, change numbers, turn), 2 „Immer wieder“ (square, „wiederhole“, triangle and other shapes), 3 „Der mBot2 misst“ (show the distance, drive while the way is free) and 4 „Entscheidungen“ (wenn/sonst with the wall and the colour sensor). The blocks now show their keywords in the UI language: „wenn“, „sonst“, „solange“, „wiederhole immer“, „mache“ (en: if, else, while, forever, do; pt: se, senão, enquanto, repetir sempre, faz). In „Wo landet der mBot2?“ the rounds are shown as blocks instead of Java (`blockPicture.ts`). Tests in `blockLessons.test.ts`.
 - **Web 0.15.25, VisuBot blocks (stage 5): variables and operators:** new areas in „Elemente“ (VisuBot): **Operatoren** (plus, minus, mal, geteilt durch, Rest beim Teilen, Zufallszahl, kleiner als, größer als, gleich, und, oder, nicht; round = number, hexagonal = yes/no, green), **Variablen** (Variable anlegen → `int zahl = 0` with a free name, setze Variable auf → `zahl = 0`, ändere Variable um → `zahl = zahl + 1`; every declared variable appears as an orange building block) and **Steuerung** („wiederhole 10 mal“ → `for (int i = 0; i < 10; i++)`). In the blocks, operators and variables are dropped onto a white field (an operator gets brackets only when needed) or onto a condition (replaces it; „und“/„oder“/„nicht“ combine with the old condition). Variables show as orange pills; the one being declared or set is not a field. „Zufallszahl von [1] bis [10]“ is a green pill with two fields (`(int) (Math.random() * 10) + 1`). A count loop whose variable is not used in its body reads „wiederhole [10] mal“; its end can also be a variable. Commands from „Elemente“ with empty brackets (`mbot.forward()`) get an empty white field to type the number. The rules come from VisuBlocks (`expressions.ts`, `variables.ts`). Tests in `blockView.test.ts`.

web/lessons/de/visubot/bloecke/07-der-linie-folgen.md

@@ -0,0 +1,125 @@
+---
+titel: Der Linie folgen
+bereich: Sensoren und Entscheidungen
+kurz: Mit dem Liniensensor am Rand umkehren und einer schwarzen Linie folgen.
+---
+
+## Das schaffst du heute
+
+::: kompetenzen
+- mit dem Liniensensor eine schwarze Linie erkennen
+- den mBot2 am Rand umkehren lassen
+- den mBot2 einer Linie folgen lassen
+:::
+
+## Augen nach unten
+
+Unter dem mBot2 sitzt vorn der **Liniensensor**. Er leuchtet auf den Boden und sieht, ob es dort hell oder dunkel ist.
+
+::: mbot2
+fokus: lineSensor
+ansicht: unten
+:::
+
+Der Sensor **Linie** aus der Gruppe **➖ Linie** liefert **0**, wenn unter dem mBot2 alles hell ist. Sieht er etwas Schwarzes, ist die Zahl größer als 0.
+
+## Am Rand umkehren
+
+Stell dir einen Tisch vor, um den schwarzes Klebeband klebt. Der mBot2 soll vorfahren, bis er das Band sieht, und dann umkehren. So fällt er nicht herunter.
+
+1. Zieh eine **While-Schleife** unter 🏁.
+2. Zieh aus **Operatoren** den Baustein **gleich** auf die Frage hinter **solange**.
+3. Leg den Sensor **Linie** in das linke Feld und tipp rechts **0** ein.
+4. Leg **fahre vor** in die Schleife und **drehe rechts** mit **180** darunter.
+
+::: übung vbb-rand
+titel: Am Rand umkehren
+auftrag: Der mBot2 fährt vor, solange er keine Linie sieht. Dann dreht er sich um. Es gibt zwei Welten, der Rand ist mal näher und mal weiter weg.
+welt: rand-1 -> forward 20, turnRight 180
+welt: rand-2 -> forward 50, turnRight 180
+braucht: whileSchleife
+tipp: Die Frage der Schleife heißt `mbot.getLine() == 0`.
+tipp: **drehe rechts** mit 180 liegt unter der Schleife, nicht darin.
+lösung: vbb-rand-loesung.visustruct
+:::
+
+## Der Linie folgen
+
+Jetzt kommt ein Klassiker: Der mBot2 fährt eine schwarze Linie entlang, auch durch Kurven. Dafür brauchst du zwei neue Dinge:
+
+- **Linie links?** aus der Gruppe **➖ Linie** sagt ja, wenn der linke Fühler Schwarz sieht.
+- **Räder einzeln** aus der Gruppe **⚙️ Räder einzeln** lässt jedes Rad anders schnell drehen. Die erste Zahl ist das linke Rad, die zweite das rechte. Dreht das rechte schneller, fährt er eine Linkskurve.
+
+Die Idee ist ganz einfach: **Wenn** links Schwarz ist, lenkt er nach links. **Sonst** lenkt er nach rechts. So wackelt er an der Linie entlang.
+
+::: übung vbb-linienfolger
+titel: Linienfolger
+auftrag: Solange die Wand mehr als 15 cm weg ist, folgt der mBot2 der Linie. Danach hält er an. In der einen Welt biegt die Linie nach rechts ab, in der anderen nach links.
+welt: linie-1, linie-2
+braucht: whileSchleife, verzweigung
+tipp: Außen eine While-Schleife mit `mbot.getDistance() > 15`. Darin eine Verzweigung mit **Linie links?**. Unter der Schleife liegt **anhalten**.
+tipp: Unter **wenn** liegt **Räder einzeln** mit `10, 40`, unter **sonst** **Räder einzeln** mit `40, 10`.
+lösung: vbb-linienfolger-loesung.visustruct
+:::
+
+Probier aus: Was passiert mit `20, 60` und `60, 20`? Wird er schneller oder fliegt er aus der Kurve?
+
+::: ludwig
+Am echten mBot2 klebst du die Linie mit schwarzem Isolierband auf einen hellen Boden. Fang langsam an, sonst schießt er in der Kurve über die Linie hinaus.
+:::
+
+## Spiel: Was passiert?
+
+::: spiel frage
+titel: Spiel: Was passiert?
+intro: Schau dir die Blöcke an. Was macht der mBot2? Vier Runden.
+
+runde:
+    mbot.drive(40, 40);
+frage: Wie fährt der mBot2?
+- [x] geradeaus
+- Linkskurve
+- Rechtskurve
+> Beide Räder drehen gleich schnell.
+
+runde:
+    mbot.drive(10, 40);
+frage: Wie fährt der mBot2?
+- geradeaus
+- [x] Linkskurve
+- Rechtskurve
+> Das rechte Rad ist schneller, also schiebt es ihn nach links.
+
+runde:
+    if (mbot.isLineLeft()) {
+        mbot.drive(10, 40);
+    } else {
+        mbot.drive(40, 10);
+    }
+frage: Nur der rechte Fühler sieht die Linie. Wie fährt er?
+- Linkskurve
+- [x] Rechtskurve
+- Er hält an.
+> Links ist kein Schwarz, also nimmt er den sonst-Teil: das linke Rad ist schneller.
+
+runde:
+    while (mbot.getLine() == 0) {
+        mbot.forward();
+    }
+    mbot.turnRight(180);
+frage: Der mBot2 steht schon auf der schwarzen Linie. Was tut er?
+- Er fährt erst ein Stück vor.
+- [x] Er dreht sich sofort um.
+- Er fährt immer weiter.
+> Die Frage der Schleife ist gleich am Anfang nein, also läuft sie gar nicht.
+:::
+
+## Das hab ich geschafft
+
+Wie gut klappt es schon? ☂️ noch nicht, ⛅ ein bisschen, ☀️ klappt prima. Bei ☂️ und ⛅ bringt dich **Nachlesen** zum passenden Schritt.
+
+::: checkliste
+- Ich kann mit dem Liniensensor eine Linie erkennen. → Augen nach unten
+- Ich kann den mBot2 am Rand umkehren lassen. → Am Rand umkehren
+- Ich kann den mBot2 einer Linie folgen lassen. → Der Linie folgen
+:::

web/lessons/diagramme/vbb-linienfolger-loesung.visustruct

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<struktogramm caption="-1;">
+  <strelem typ="4" zx="0" zy="0">
+    <text>109;98;111;116;46;103;101;116;68;105;115;116;97;110;99;101;40;41;32;62;32;49;53;</text>
+    <schleifeninhalt>
+      <strelem typ="1" zx="0" zy="0">
+        <text>109;98;111;116;46;105;115;76;105;110;101;76;101;102;116;40;41;</text>
+        <fall fallname="116;114;117;101;">
+          <strelem typ="0" zx="0" zy="0">
+            <text>109;98;111;116;46;100;114;105;118;101;40;49;48;44;32;52;48;41;</text>
+          </strelem>
+        </fall>
+        <fall fallname="102;97;108;115;101;">
+          <strelem typ="0" zx="0" zy="0">
+            <text>109;98;111;116;46;100;114;105;118;101;40;52;48;44;32;49;48;41;</text>
+          </strelem>
+        </fall>
+      </strelem>
+    </schleifeninhalt>
+  </strelem>
+  <strelem typ="0" zx="0" zy="0">
+    <text>109;98;111;116;46;115;116;111;112;40;41;</text>
+  </strelem>
+</struktogramm>

web/lessons/diagramme/vbb-rand-loesung.visustruct

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<struktogramm caption="-1;">
+  <strelem typ="4" zx="0" zy="0">
+    <text>109;98;111;116;46;103;101;116;76;105;110;101;40;41;32;61;61;32;48;</text>
+    <schleifeninhalt>
+      <strelem typ="0" zx="0" zy="0">
+        <text>109;98;111;116;46;102;111;114;119;97;114;100;40;41;</text>
+      </strelem>
+    </schleifeninhalt>
+  </strelem>
+  <strelem typ="0" zx="0" zy="0">
+    <text>109;98;111;116;46;116;117;114;110;82;105;103;104;116;40;49;56;48;41;</text>
+  </strelem>
+</struktogramm>

web/package-lock.json

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

web/package.json

@@ -21,7 +21,7 @@ describe('Block-Lektionen (de)', () => {
 
   it('erscheinen nur mit Block-Ansicht in VisuBot, ohne Aufgaben', () => {
     expect(showingBlockLessons()).toBe(true)
-    expect(lessons.length).toBeGreaterThanOrEqual(6)
+    expect(lessons.length).toBeGreaterThanOrEqual(7)
     expect(lessons.every((l) => l.blocks && l.robot)).toBe(true)
     lessons.forEach((l, i) => expect(l.number, l.id).toBe(i + 1))
     expect(tasks).toEqual([])
@@ -67,7 +67,7 @@ describe('Block-Lektionen (de)', () => {
         checked++
       }
     }
-    expect(checked).toBeGreaterThanOrEqual(15)
+    expect(checked).toBeGreaterThanOrEqual(17)
   })
 
   it('jede Runde von „Wo landet der mBot2?“ endet auf dem angegebenen Feld', () => {