Web 0.15.6: VisuBot – Grundlagen kleinschrittig

CHANGELOG.md

@@ -8,6 +8,7 @@ The format is loosely inspired by Keep a Changelog.
 
 ### Changed
 
+- **Web 0.15.6, VisuBot: structured programming basics, step by step:** six new beginner robot lessons (de/en), inserted by file name without renaming (the series now has 33 lessons): „Zählen und Summieren“ after do-while (counter and sum pattern, exercises „Schritte bis zur Wand“ in three worlds and Java „Spirale mit Strecke“), „Feste Werte mit final“ after the ultrasonic sensor (constants, `const`/`final`, „Wand mit Konstante“, Java „Quadrat mit Konstante“), „Nah, mittel oder weit?“ (three cases, `else if`, order of conditions; „Tempo nach Abstand“, Java „Tag oder Nacht?“), „Der größte Wert“ after colours (maximum with desk-check table, new worlds `platz-1`/`platz-2`, „Wo ist am meisten Platz?“, Java „Die Richtung merken“), „Ein Merker mit boolean“ after the light sensor („Wurde es dunkel?“, Java „Wurde geklatscht?“) and „Zustände: Was mache ich gerade?“ after stopwatch/battery (state machine, Robo-Ampel with switch, Java with String states and `.equals`). Each lesson has competencies, a game, a „Warum läuft das nicht?“ exercise, a checklist and a quiz. Glossary: Merker/flag, Zustandsautomat/state machine.
 - **Web 0.15.5, small lesson fixes from the second review:** the free tasks „Einheitenrechner“ (after L36) and „Würfeln mit MVC“ (after L41) get a list „Du bist fertig, wenn …“ with things you can see in the window and console. L38 „Viele Knöpfe, ein Zuhörer“: Ludwig's tip in the task „Zahlenschloss“ talked about the calculator; it now helps with the task (count wrong attempts, `setEnabled(false)`, stars with a separate `eingabe`). Steps „Profiwissen: …“ in L23, L29, L31, L36 and L37 lose the prefix (Holger: no separate Profiwissen), L39 refers to the step by name. L5 Angeberwissen no longer mentions the coffee-cup logo. de/en/pt. New test: no step title starts with „Profiwissen“.
 - **Web 0.15.4, lesson 1 split in two:** VisuStruct lesson 1 „Was ist ein Struktogramm?“ was very long (15 steps). It now covers algorithm, reading a structure chart, the three building blocks, „Erst die Struktur, dann der Code“, the game „Welcher Baustein?“, checklist and quiz. The new lesson 2 „PAP und Pseudocode“ (`01-weitere-darstellungen.md`) takes the flowchart part (PAP elements, exercise „Kuchen backen als PAP“, jumps/GOTO/spaghetti code, pseudocode and comparison) with its own Kompetenzen, a new game „Welche Darstellung?“ (structure chart, flowchart or pseudocode, eight rounds), checklist and quiz (de/en/pt). VisuStruct now numbers lessons like VisuBot: in file order, so the new lesson keeps file number 01 and no file is renamed (progress stays). All later lessons move up by one; „Lektion N“ in texts and `nach:` in tasks are renumbered automatically. Saved step positions in lesson 1 may point to a later step than before. New test checks the split and the renumbered references.
 - **Web 0.15.3, VisuBot orange like visucode.de:** the VisuBot theme in the app used #e07000 (buttons, selection, focus) and #f08a00 („Bot“ in the title bar), the visucode.de start page uses #c2410c with the gradient #ea580c → #c2410c (css/visucode.css, MARKE.md). The app now uses the same values; white text on the accent goes from 3.2 : 1 to 5.2 : 1. The command group „Fahren“ (stripe and dot) moves from the old VisuBot orange #d96a00 to #c2410c as well.

web/lessons/de/begriffe.md

@@ -115,6 +115,13 @@ Eine Variable, die in einer Schleife mitzählt, meistens i.
 auch: Endlosschleifen
 Eine Schleife, deren Bedingung nie falsch wird. Sie hört nie von selbst auf.
 
+### Merker
+Eine Variable vom Typ boolean, die mit false anfängt und auf true gesetzt wird, sobald etwas passiert ist.
+
+### Zustandsautomat
+auch: Zustandsautomaten, Zustandsvariable, Zustandsvariablen
+Ein Programm, das immer in genau einem Zustand ist und nach festen Regeln in den nächsten Zustand wechselt, z. B. eine Ampel.
+
 ### Array
 auch: Arrays
 Eine Reihe von Fächern mit einem gemeinsamen Namen und demselben Datentyp. Im Lehrplan heißt es auch Feld.

web/lessons/de/visubot/05-zaehlen-und-summieren.md

@@ -0,0 +1,154 @@
+---
+titel: Zählen und Summieren
+bereich: Sensoren und Entscheidungen
+kurz: Mit einer Variablen mitzählen und Werte zusammenzählen.
+---
+
+## Diese Kompetenzen erwerbe ich jetzt
+
+::: kompetenzen
+- eine Zählvariable anlegen und in einer Schleife hochzählen
+- in einer Schleife eine Summe bilden
+- das Ergebnis nach der Schleife auf dem Bildschirm zeigen
+:::
+
+## Mitzählen
+
+Wie viele Schritte fährt der mBot2 bis zur Wand? Das weißt du vorher nicht, die Welt ist jedes Mal anders. Der mBot2 soll deshalb **mitzählen**. Dafür brauchst du drei Kästen:
+
+1. **Vor** der Schleife: `int schritte = 0`. Am Anfang ist noch nichts gezählt.
+2. **In** der Schleife: `schritte = schritte + 1`. Nach jedem Schritt eins mehr.
+3. **Nach** der Schleife: das Ergebnis zeigen, zum Beispiel mit `mbot.showText("Schritte: " + schritte)`.
+
+Lies `schritte = schritte + 1` von rechts nach links: Nimm den alten Wert von `schritte`, zähle 1 dazu und speichere das Ergebnis wieder in `schritte`. So eine Variable heißt **Zählvariable** oder kurz Zähler.
+
+> Achtung: Steht `int schritte = 0` **in** der Schleife, fängt der Zähler bei jedem Durchgang wieder bei 0 an. Am Ende steht dann immer 1 da.
+
+::: angeberwissen
+Dein Handy zählt deine Schritte genau so: Bei jedem Schritt rechnet es `schritte = schritte + 1`. Ich zähle lieber meine Grashalme. Ich bin bei 4 Millionen.
+:::
+
+::: übung vb-schritte-welt
+titel: Schritte bis zur Wand
+auftrag: Baue ein Struktogramm: Der mBot2 fährt vor, solange der Abstand größer als 15 ist. Dabei zählt er seine Schritte mit. Danach zeigt er zum Beispiel **Schritte: 3** auf dem Bildschirm. Es gibt drei Welten.
+welt: wand-kurz -> screen "Schritte: 3"
+welt: wand-mittel -> screen "Schritte: 7"
+welt: wand-lang -> screen "Schritte: 12"
+braucht: whileSchleife
+tipp: Der erste Kasten ist `int schritte = 0`. Danach kommt die While-Schleife mit `mbot.getDistance() > 15`.
+tipp: In der Schleife stehen **fahre vor** und `schritte = schritte + 1`. Nach der Schleife steht `mbot.showText("Schritte: " + schritte)`.
+lösung: vb-schritte-welt-loesung.visustruct
+:::
+
+## Zusammenzählen
+
+Ein Zähler wächst immer um 1. Eine **Summe** wächst um verschiedene Werte. Der mBot2 fährt eine Spirale: erst 10 cm, dann 20, dann 30, dann 40. Wie weit ist er insgesamt gefahren?
+
+| Durchgang | `seite` | `gesamt` danach |
+|---|---|---|
+| vorher | 10 | 0 |
+| 1 | 10 | 0 + 10 = 10 |
+| 2 | 20 | 10 + 20 = 30 |
+| 3 | 30 | 30 + 30 = 60 |
+| 4 | 40 | 60 + 40 = 100 |
+
+Das Muster ist dasselbe wie beim Zählen. Nur steht statt der 1 jetzt der Wert, der dazukommt: `gesamt = gesamt + seite`.
+
+## Jetzt in Java: Spirale mit Strecke
+
+::: übung vb-java-spirale-strecke
+titel: Spirale mit Strecke
+code: java
+auftrag: Schreibe in Java: Lege `int seite = 10` und `int gesamt = 0` an. Fahre viermal: `seite` cm vor, rechts drehen, `seite` zu `gesamt` dazuzählen, `seite` um 10 größer machen. Zeige danach **Strecke: 100 cm** auf dem Bildschirm.
+fahrt: forward 10, turnRight, forward 20, turnRight, forward 30, turnRight, forward 40, turnRight
+befehle: showText "Strecke: 100 cm"
+braucht: forSchleife
+tipp: In der For-Schleife stehen vier Zeilen: `mbot.forward(seite);`, `mbot.turnRight();`, `gesamt = gesamt + seite;` und `seite = seite + 10;`.
+tipp: Nach der Schleife steht `mbot.showText("Strecke: " + gesamt + " cm");`.
+lösung: vb-java-spirale-strecke-loesung.visustruct
+:::
+
+::: übung vb-fehler-05-zaehlen-und-summieren
+titel: Warum läuft das nicht?
+code: java
+auftrag: Ludwig hat „Spirale mit Strecke“ abgetippt, aber das Programm läuft nicht. „Im Editor öffnen“ zeigt den Code im Bereich Code. Klicke auf „Ausführen“ und lies die Fehlermeldung. Repariere den Fehler und klicke auf Prüfen.
+start: vb-fehler-05-zaehlen-und-summieren-start.visustruct
+fahrt: forward 10, turnRight, forward 20, turnRight, forward 30, turnRight, forward 40, turnRight
+befehle: showText "Strecke: 100 cm"
+tipp: Die Fehlermeldung nennt eine unbekannte Variable. Wie heißt die Variable dort, wo sie angelegt wird? Java unterscheidet Groß- und Kleinschreibung.
+tipp: Richtig heißt es `gesamt = gesamt + seite`.
+lösung: vb-java-spirale-strecke-loesung.visustruct
+:::
+
+## Spiel: Was steht am Ende in der Variablen?
+
+::: spiel frage
+titel: Spiel: Was steht am Ende in der Variablen?
+intro: Ludwig hat kleine Programme geschrieben. Rechne im Kopf mit. Fünf Runden.
+
+runde:
+frage: `int z = 0`, dann dreimal `z = z + 1`. Was ist `z`?
+- 1
+- [x] 3
+- 0
+> Jeder Durchgang zählt 1 dazu: 1, 2, 3.
+
+runde:
+frage: `int summe = 0`, dann `summe = summe + 5` und `summe = summe + 7`. Was ist `summe`?
+- 7
+- [x] 12
+- 5
+> 0 + 5 = 5, dann 5 + 7 = 12.
+
+runde:
+frage: Eine Schleife läuft viermal. In ihr stehen `int z = 0` und `z = z + 1`. Was ist `z` am Ende?
+- 4
+- [x] 1
+- 0
+> Der Zähler wird in jedem Durchgang wieder auf 0 gesetzt. Er gehört vor die Schleife.
+
+runde:
+frage: `int gesamt = 0`. Der mBot2 fährt 20, 20 und 30 cm und zählt jedes Mal dazu. Was ist `gesamt`?
+- 30
+- 20
+- [x] 70
+> 20 + 20 + 30 = 70.
+
+runde:
+frage: `int schritte = 10`, dann zweimal `schritte = schritte + 1`. Was ist `schritte`?
+- 2
+- [x] 12
+- 11
+> Der Zähler fängt hier bei 10 an, nicht bei 0.
+:::
+
+## Checkliste
+
+Schätze dich bei jedem Punkt ehrlich ein: ☂️ noch nicht, ⛅ teilweise, ☀️ kann ich sicher. Bei ⛅ und ☂️ hilft dir **Nachlesen**. Danach kommt der Wissenstest. Er zeigt dir, ob deine Einschätzung stimmt.
+
+::: checkliste
+- Ich kann eine Zählvariable anlegen und in einer Schleife hochzählen. → Mitzählen
+- Ich kann in einer Schleife eine Summe bilden. → Zusammenzählen
+- Ich kann das Ergebnis nach der Schleife auf dem Bildschirm zeigen. → Jetzt in Java: Spirale mit Strecke
+:::
+
+## Wissenstest
+
+::: quiz
+? Wo legst du die Zählvariable `int schritte = 0` an?
+→ Mitzählen
+- [x] Vor der Schleife
+- [ ] In der Schleife
+- [ ] Nach der Schleife
+> In der Schleife würde sie bei jedem Durchgang wieder 0.
+? Was macht `schritte = schritte + 1`?
+→ Mitzählen
+- [ ] Es vergleicht schritte mit schritte + 1.
+- [x] Es nimmt den alten Wert, zählt 1 dazu und speichert das Ergebnis.
+- [ ] Es setzt schritte auf 1.
+? Wie zählst du die Seitenlänge `seite` zur Summe `gesamt` dazu?
+→ Zusammenzählen
+- [ ] `gesamt = seite`
+- [ ] `seite = gesamt + seite`
+- [x] `gesamt = gesamt + seite`
+:::

web/lessons/de/visubot/06-konstanten-final.md

@@ -0,0 +1,151 @@
+---
+titel: Feste Werte mit final
+bereich: Sensoren und Entscheidungen
+kurz: Eine Konstante anlegen, damit eine wichtige Zahl nur an einer Stelle steht.
+---
+
+## Diese Kompetenzen erwerbe ich jetzt
+
+::: kompetenzen
+- erklären, was eine Konstante ist
+- eine Konstante im Struktogramm und in Java anlegen
+- eine Konstante in einer Bedingung und in einem Befehl benutzen
+:::
+
+## Eine Zahl an vielen Stellen
+
+Ludwig hat ein Programm für den Flur geschrieben: Der mBot2 fährt bis 20 cm vor die Wand, dreht sich um und fährt bis 20 cm vor die andere Wand.
+
+::: diagramm vb-l06k-ohne.visustruct
+Hin und zurück. Die Zahl 20 steht an zwei Stellen.
+:::
+
+Jetzt soll der mBot2 schon bei 30 cm anhalten. Ludwig muss jede 20 suchen und ändern. Vergisst er eine, hält der mBot2 einmal bei 30 und einmal bei 20 cm. In langen Programmen passiert so etwas schnell.
+
+::: angeberwissen
+Profis nennen eine Zahl, die einfach so im Programm steht, eine **magische Zahl**. Magisch, weil niemand mehr weiß, was sie bedeutet. Ich mag nur magische Grashalme.
+:::
+
+## Eine Konstante anlegen
+
+Besser ist eine **Konstante**. Das ist eine Variable, deren Wert nach dem Festlegen gleich bleibt. Du legst sie einmal ganz oben an und benutzt danach nur noch ihren Namen.
+
+| | Struktogramm | Java |
+|---|---|---|
+| anlegen | `const int ABSTAND = 20` | `final int ABSTAND = 20;` |
+| benutzen | `mbot.getDistance() > ABSTAND` | `mbot.getDistance() > ABSTAND` |
+
+Im Struktogramm schreibst du `const` davor, in Java `final`. Beides heißt: Dieser Wert ändert sich nicht mehr. Namen von Konstanten schreibt man in **Großbuchstaben**, dann erkennt man sie sofort.
+
+::: diagramm vb-l06k-mit.visustruct
+Dasselbe Programm mit der Konstanten ABSTAND. Für 30 cm änderst du nur die erste Zeile.
+:::
+
+::: übung vb-konstante-wand
+titel: Wand mit Konstante
+auftrag: Lege die Konstante `ABSTAND` mit dem Wert 20 an. Der mBot2 fährt vor, solange der Abstand größer als `ABSTAND` ist. Danach spielt er einen Ton. Es gibt drei Welten.
+welt: wand-kurz -> tone
+welt: wand-mittel -> tone
+welt: wand-lang -> tone
+braucht: whileSchleife
+tipp: Der erste Kasten ist eine Anweisung mit `const int ABSTAND = 20`. Darunter kommt eine While-Schleife.
+tipp: Die Bedingung der Schleife ist `mbot.getDistance() > ABSTAND`. In der Schleife steht **fahre vor**, nach der Schleife **spiele Ton**.
+lösung: vb-konstante-wand-loesung.visustruct
+:::
+
+## Jetzt in Java: Quadrat mit Konstante
+
+Eine Konstante passt auch in einen Befehl. Mit `final int SEITE = 30;` fährt `mbot.forward(SEITE);` genau 30 cm. Soll das Quadrat größer werden, änderst du nur die eine Zeile.
+
+::: übung vb-java-konstante-seite
+titel: Quadrat mit Konstante
+code: java
+auftrag: Schreibe in Java: Lege die Konstante `SEITE` mit dem Wert 30 an. Fahre dann mit einer For-Schleife ein Quadrat mit der Seitenlänge `SEITE`.
+fahrt: 4 x (forward 30, turnRight)
+braucht: forSchleife
+tipp: Die erste Zeile ist `final int SEITE = 30;`. Danach kommt `for (int i = 0; i < 4; i++) { … }`.
+tipp: In der Schleife stehen `mbot.forward(SEITE);` und `mbot.turnRight();`.
+lösung: vb-java-konstante-seite-loesung.visustruct
+:::
+
+::: übung vb-fehler-06-konstanten-final
+titel: Warum läuft das nicht?
+code: java
+auftrag: Ludwig hat „Quadrat mit Konstante“ abgetippt, aber das Programm läuft nicht. „Im Editor öffnen“ zeigt den Code im Bereich Code. Klicke auf „Ausführen“ und lies die Fehlermeldung. Repariere den Fehler und klicke auf Prüfen.
+start: vb-fehler-06-konstanten-final-start.visustruct
+fahrt: 4 x (forward 30, turnRight)
+tipp: Die Fehlermeldung nennt eine unbekannte Variable. Wie heißt die Konstante dort, wo sie angelegt wird? Konstanten schreibt man in Großbuchstaben.
+tipp: Richtig heißt es `mbot.forward(SEITE)`.
+lösung: vb-java-konstante-seite-loesung.visustruct
+:::
+
+## Spiel: Konstante oder Variable?
+
+::: spiel frage
+titel: Spiel: Konstante oder Variable?
+intro: Ludwig sortiert Werte. Bleibt der Wert im ganzen Programm gleich, ist er eine Konstante. Ändert er sich, ist er eine Variable. Sechs Runden.
+frage: Konstante oder Variable?
+antworten: Konstante | Variable
+
+runde:
+frage: Die Anzahl der Ecken eines Quadrats
+richtig: Konstante
+> Ein Quadrat hat immer vier Ecken.
+
+runde:
+frage: Der Abstand, den der Ultraschallsensor gerade misst
+richtig: Variable
+> Fährt der mBot2, ändert sich der Abstand ständig.
+
+runde:
+frage: Der Mindestabstand, bei dem der mBot2 immer anhalten soll
+richtig: Konstante
+> Du legst ihn einmal fest, zum Beispiel `final int ABSTAND = 20;`.
+
+runde:
+frage: Die Zahl der Schritte, die der mBot2 schon gefahren ist
+richtig: Variable
+> Nach jedem Schritt wird sie um 1 größer.
+
+runde:
+frage: Die Tonhöhe des Warntons, immer 440 Hz
+richtig: Konstante
+> Der Warnton klingt immer gleich.
+
+runde:
+frage: Der Akkustand in Prozent
+richtig: Variable
+> Der Akku wird beim Fahren langsam leer.
+:::
+
+## Checkliste
+
+Schätze dich bei jedem Punkt ehrlich ein: ☂️ noch nicht, ⛅ teilweise, ☀️ kann ich sicher. Bei ⛅ und ☂️ hilft dir **Nachlesen**. Danach kommt der Wissenstest. Er zeigt dir, ob deine Einschätzung stimmt.
+
+::: checkliste
+- Ich kann erklären, was eine Konstante ist. → Eine Konstante anlegen
+- Ich kann eine Konstante im Struktogramm und in Java anlegen. → Eine Konstante anlegen
+- Ich kann eine Konstante in einer Bedingung und in einem Befehl benutzen. → Jetzt in Java: Quadrat mit Konstante
+:::
+
+## Wissenstest
+
+::: quiz
+? Was ist eine Konstante?
+→ Eine Konstante anlegen
+- [ ] Eine Variable, die sich in jedem Durchgang ändert
+- [x] Eine Variable, deren Wert nach dem Festlegen gleich bleibt
+- [ ] Ein Sensor, der immer denselben Wert misst
+> Eine Konstante legst du einmal fest. Danach benutzt du nur ihren Namen.
+? Wie legst du in Java die Konstante `ABSTAND` mit dem Wert 20 an?
+→ Eine Konstante anlegen
+- [ ] `const ABSTAND = 20;`
+- [x] `final int ABSTAND = 20;`
+- [ ] `int final = 20;`
+> In Java steht `final` vor dem Datentyp. Im Struktogramm schreibst du `const`.
+? Warum ist eine Konstante besser als die Zahl 20 an vielen Stellen?
+→ Eine Konstante anlegen
+- [ ] Weil das Programm dann schneller fährt
+- [x] Weil du den Wert nur an einer Stelle ändern musst
+- [ ] Weil der Sensor dann genauer misst
+:::