Web 0.15.7: VisuBot-Abschlusslektion „Wie geht es weiter?“

CHANGELOG.md

@@ -8,6 +8,7 @@ The format is loosely inspired by Keep a Changelog.
 
 ### Changed
 
+- **Web 0.15.7, VisuBot ends with „Wie geht es weiter?“:** new last robot lesson (`23-wie-geht-es-weiter.md`, de/en, own part „Ausblick“/„Outlook“, VisuBot now has 34 lessons): a look back at the basics learned with the mBot2, a last „Warum läuft das nicht?“ (`mbot.getDistance` without brackets, three walls), and „Was noch fehlt“ with links to the VisuStruct lessons that VisuBot does not cover (PAP and pseudocode, keyboard input, 2D arrays, searching and sorting, Python/JavaScript, try/catch, files, Swing up to MVC). Game „Welche Welt?“ (VisuBot or VisuStruct, eight rounds), checklist and quiz. Test: five parts, the outlook is last.
 - **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/lessons/de/visubot/23-wie-geht-es-weiter.md

@@ -0,0 +1,149 @@
+---
+titel: Wie geht es weiter?
+bereich: Ausblick
+kurz: Zurückblicken, was du mit dem mBot2 gelernt hast, und sehen, was in VisuStruct noch auf dich wartet.
+---
+
+## Diese Kompetenzen erwerbe ich jetzt
+
+::: kompetenzen
+- sagen, welche Grundlagen der Programmierung ich mit dem mBot2 gelernt habe
+- einen Fehler in einem Roboterprogramm allein finden und reparieren
+- die Themen nennen, die in VisuStruct noch auf mich warten
+:::
+
+## Das kannst du jetzt
+
+Glückwunsch, du hast alle Roboter-Lektionen geschafft! Mit dem mBot2 hast du die **Grundlagen der strukturierten Programmierung** gelernt:
+
+- ein **Struktogramm** lesen und bauen und es mit dem **Schreibtischtest** prüfen,
+- **Sequenz**, **Verzweigung** und **Fallauswahl**, Bedingungen mit **und**, **oder** und **nicht**,
+- die Schleifen **for**, **while** und **do-while**, auch ineinander verschachtelt, und den Aussprung mit **break**,
+- **Variablen**, **Datentypen** und **Konstanten** mit `final`, Zählen, Summieren und den größten Wert finden,
+- **Arrays** und **Zeichenketten**,
+- eigene **Methoden** mit Parametern und Rückgabewert.
+
+Das alles gilt nicht nur für Roboter. Jedes Java-Programm ist aus genau diesen Bausteinen gebaut, auch ein Spiel oder eine App.
+
+::: angeberwissen
+Määäh, weißt du, was du mit dem mBot2 eigentlich gebaut hast? Ein **eingebettetes System**: einen kleinen Computer, der in einem Gerät steckt und mit Sensoren seine Umwelt misst. Solche Systeme stecken in Waschmaschinen, Autos und Herzschrittmachern. In einem modernen Auto sind es über hundert. Und programmiert werden sie mit genau den Bausteinen, die du jetzt kennst.
+:::
+
+## Noch einmal: Warum läuft das nicht?
+
+Zum Schluss eine letzte Fehlersuche. Diesmal ist es ein Fehler, den auch Profis oft machen.
+
+::: übung vb-fehler-23-wie-geht-es-weiter
+titel: Warum läuft das nicht?
+code: java
+auftrag: Das Programm soll bis kurz vor die Wand fahren, aber es 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-23-wie-geht-es-weiter-start.visustruct
+welt: wand-kurz, wand-mittel, wand-lang
+tipp: Lies die Fehlermeldung genau. Vergleiche den Sensor mit den anderen Befehlen: Was steht hinter `mbot.forward`?
+tipp: Hinter einem Befehl stehen immer runde Klammern, auch wenn nichts darin steht. Richtig heißt es `mbot.getDistance() > 15`.
+lösung: vb-bis-wand-loesung.visustruct
+:::
+
+## Was noch fehlt
+
+Einige Themen der Programmierung haben mit dem Roboter wenig zu tun. Du findest sie in **VisuStruct**, der Welt ohne Roboter. Weil du die Grundlagen schon kennst, kommst du dort schnell voran. Die Links öffnen sich in einem neuen Fenster.
+
+- **Andere Darstellungen:** Algorithmen als Ablaufplan mit Pfeilen oder als Text aufschreiben, in [„PAP und Pseudocode“](?visustruct&lektion=01-weitere-darstellungen).
+- **Eingabe mit der Tastatur:** Werte beim Ausführen abfragen, in [„Eingabe und Ausgabe“](?visustruct&lektion=06-eingabe-und-ausgabe).
+- **Tabellen im Speicher:** Arrays mit Zeilen und Spalten, zum Beispiel für einen Kinosaal, in [„Zweidimensionale Arrays“](?visustruct&lektion=16-zweidimensionale-arrays).
+- **Suchen und Sortieren:** einen Wert schnell finden und eine Liste der Größe nach ordnen, in [„Suchen und Sortieren“](?visustruct&lektion=19-suchen-und-sortieren).
+- **Andere Sprachen:** dasselbe Programm in Python und JavaScript, in [„Python und JavaScript“](?visustruct&lektion=21-python-und-javascript).
+- **Abstürze abfangen:** was passiert, wenn jemand „abc“ statt einer Zahl eintippt, in [„Wenn das Programm abstürzt: try und catch“](?visustruct&lektion=22-try-und-catch).
+- **Dateien:** Text, Tabellen und Daten lesen und speichern, ab [„Text einlesen und speichern“](?visustruct&lektion=23-text-einlesen-und-speichern) über [„Tabellen als CSV“](?visustruct&lektion=25-tabellen-als-csv) bis [„Daten als JSON“](?visustruct&lektion=26-json).
+- **Fenster mit Knöpfen:** eigene Programme mit Fenster, Textfeld und Knopf, ab [„Dein erstes Fenster“](?visustruct&lektion=28-erstes-fenster) bis [„Model View Controller“](?visustruct&lektion=40-model-view-controller).
+
+> Den mBot2 brauchst du dafür nicht. Du kannst aber jederzeit zurückkommen und ihm neue Kunststücke beibringen.
+
+## Spiel: Welche Welt?
+
+::: spiel frage
+titel: Spiel: Welche Welt?
+intro: Ludwig hat Ideen für neue Programme. Lernst du das mit dem mBot2 in VisuBot oder ohne Roboter in VisuStruct? Acht Runden.
+antworten: VisuBot | VisuStruct
+
+runde:
+frage: „Fahre bis zur Wand und piepe dann.“
+richtig: VisuBot
+> Abstandssensor, Motoren und Lautsprecher: Das ist ein Fall für den mBot2.
+
+runde:
+frage: „Ein Fenster mit einem Knopf, der bis 10 zählt.“
+richtig: VisuStruct
+> Fenster mit Knöpfen baust du mit Swing in VisuStruct.
+
+runde:
+frage: „Spiele eine Melodie, die in einem Array steht.“
+richtig: VisuBot
+> Arrays und Melodien hast du mit dem Lautsprecher des mBot2 gelernt.
+
+runde:
+frage: „Lies die Noten der Klasse aus einer CSV-Datei.“
+richtig: VisuStruct
+> Dateien lesen und speichern lernst du in VisuStruct.
+
+runde:
+frage: „Tippt jemand ‚abc‘ statt einer Zahl ein, soll das Programm nicht abstürzen.“
+richtig: VisuStruct
+> Abstürze fängst du mit try und catch ab. Das steht in VisuStruct.
+
+runde:
+frage: „Folge mit dem Liniensensor einer schwarzen Linie.“
+richtig: VisuBot
+> Der Liniensensor sitzt unter dem mBot2.
+
+runde:
+frage: „Sortiere zehn Zahlen der Größe nach.“
+richtig: VisuStruct
+> Suchen und Sortieren steht in VisuStruct. Den größten Wert finden kannst du aber schon.
+
+runde:
+frage: „Zeichne den Ablauf als Plan mit Pfeilen.“
+richtig: VisuStruct
+> Das ist ein PAP. Ihn lernst du in VisuStruct in „PAP und Pseudocode“.
+:::
+
+## 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 sagen, welche Grundlagen der Programmierung ich mit dem mBot2 gelernt habe. → Das kannst du jetzt
+- Ich kann einen Fehler in einem Roboterprogramm allein finden und reparieren. → Noch einmal: Warum läuft das nicht?
+- Ich kann die Themen nennen, die in VisuStruct noch auf mich warten. → Was noch fehlt
+:::
+
+## Wissenstest
+
+::: quiz
+? Gelten die Bausteine aus den Roboter-Lektionen auch für Programme ohne Roboter?
+→ Das kannst du jetzt
+- [x] Ja, jedes Java-Programm ist aus Sequenz, Verzweigung, Schleife, Variablen und Methoden gebaut
+- [ ] Nein, ohne Roboter braucht man ganz andere Befehle
+- [ ] Nur die Schleifen
+> Nur die `mbot.`-Befehle gehören zum Roboter. Alles andere ist ganz normales Java.
+
+? Warum läuft `mbot.getDistance > 15` nicht?
+→ Noch einmal: Warum läuft das nicht?
+- [ ] Weil 15 zu klein ist
+- [x] Weil hinter dem Befehl die runden Klammern fehlen
+- [ ] Weil man `<` schreiben muss
+> Ohne Klammern sucht Java eine Variable `getDistance` und findet keine.
+
+? Wo lernst du, wie ein Programm Abstürze mit try und catch abfängt?
+→ Was noch fehlt
+- [ ] In VisuBot
+- [x] In VisuStruct
+> Dort steht die Lektion „Wenn das Programm abstürzt: try und catch“.
+
+? Welche Themen findest du in VisuStruct? Wähle die passende Liste.
+→ Was noch fehlt
+- [x] PAP, Sortieren, Dateien und Fenster mit Knöpfen
+- [ ] Liniensensor, LEDs und Motoren
+- [ ] Nur die for-Schleife
+> Liniensensor, LEDs und Motoren gehören zum mBot2, die for-Schleife kennst du schon.
+:::

web/lessons/diagramme/en/vb-fehler-23-wie-geht-es-weiter-start.visustruct

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<struktogramm caption="85;112;32;116;111;32;116;104;101;32;119;97;108;108;">
+  <strelem typ="4" zx="0" zy="0">
+    <text>109;98;111;116;46;103;101;116;68;105;115;116;97;110;99;101;32;62;32;49;53;</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>
+</struktogramm>

web/lessons/diagramme/vb-fehler-23-wie-geht-es-weiter-start.visustruct

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<struktogramm caption="66;105;115;32;122;117;114;32;87;97;110;100;">
+  <strelem typ="4" zx="0" zy="0">
+    <text>109;98;111;116;46;103;101;116;68;105;115;116;97;110;99;101;32;62;32;49;53;</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>
+</struktogramm>

web/lessons/en/visubot/23-wie-geht-es-weiter.md

@@ -0,0 +1,149 @@
+---
+titel: What's next?
+bereich: Outlook
+kurz: Look back at what you learned with the mBot2 and see what is still waiting for you in VisuStruct.
+---
+
+## Skills I will gain now
+
+::: kompetenzen
+- say which programming basics I learned with the mBot2
+- find and fix a mistake in a robot program on my own
+- name the topics that are still waiting for me in VisuStruct
+:::
+
+## What you can do now
+
+Congratulations, you have finished all the robot lessons! With the mBot2 you learned the **basics of structured programming**:
+
+- reading and building a **structure chart** and checking it with a **desk check**,
+- **sequence**, **branch** and **switch**, conditions with **and**, **or** and **not**,
+- the loops **for**, **while** and **do-while**, also nested, and leaving a loop with **break**,
+- **variables**, **data types** and **constants** with `final`, counting, adding up and finding the largest value,
+- **arrays** and **strings**,
+- your own **methods** with parameters and a return value.
+
+All of this is not just for robots. Every Java program is built from exactly these building blocks, even a game or an app.
+
+::: angeberwissen
+Baah, do you know what you actually built with the mBot2? An **embedded system**: a small computer inside a device that measures its surroundings with sensors. Such systems are in washing machines, cars and pacemakers. A modern car has more than a hundred of them. And they are programmed with exactly the building blocks you know now.
+:::
+
+## Once more: Why doesn't it run?
+
+One last bug hunt to finish. This time it is a mistake that even professionals often make.
+
+::: übung vb-fehler-23-wie-geht-es-weiter
+titel: Why doesn't it run?
+code: java
+auftrag: The program should drive up to just before the wall, but it doesn't run. "Open in editor" shows the code in the Code area. Click "Run" and read the error message. Fix the mistake and click Check.
+start: vb-fehler-23-wie-geht-es-weiter-start.visustruct
+welt: wand-kurz, wand-mittel, wand-lang
+tipp: Read the error message carefully. Compare the sensor with the other commands: what comes after `mbot.forward`?
+tipp: A command is always followed by round brackets, even if there is nothing inside them. It should be `mbot.getDistance() > 15`.
+lösung: vb-bis-wand-loesung.visustruct
+:::
+
+## What is still missing
+
+Some programming topics have little to do with the robot. You will find them in **VisuStruct**, the world without the robot. Because you already know the basics, you will make quick progress there. The links open in a new window.
+
+- **Other ways to draw it:** writing algorithms as a chart with arrows or as text, in ["Flowcharts and pseudocode"](?visustruct&lektion=01-weitere-darstellungen).
+- **Keyboard input:** asking for values while the program runs, in ["Input and output"](?visustruct&lektion=06-eingabe-und-ausgabe).
+- **Tables in memory:** arrays with rows and columns, for example for a cinema, in ["Two-dimensional arrays"](?visustruct&lektion=16-zweidimensionale-arrays).
+- **Searching and sorting:** finding a value quickly and putting a list in order, in ["Searching and sorting"](?visustruct&lektion=19-suchen-und-sortieren).
+- **Other languages:** the same program in Python and JavaScript, in ["Python and JavaScript"](?visustruct&lektion=21-python-und-javascript).
+- **Catching crashes:** what happens when someone types "abc" instead of a number, in ["When the program crashes: try and catch"](?visustruct&lektion=22-try-und-catch).
+- **Files:** reading and saving text, tables and data, from ["Reading and saving text"](?visustruct&lektion=23-text-einlesen-und-speichern) via ["Tables as CSV"](?visustruct&lektion=25-tabellen-als-csv) to ["Data as JSON"](?visustruct&lektion=26-json).
+- **Windows with buttons:** your own programs with a window, a text field and a button, from ["Your first window"](?visustruct&lektion=28-erstes-fenster) to ["Model View Controller"](?visustruct&lektion=40-model-view-controller).
+
+> You don't need the mBot2 for this. But you can come back at any time and teach it new tricks.
+
+## Game: Which world?
+
+::: spiel frage
+titel: Game: Which world?
+intro: Ludwig has ideas for new programs. Do you learn this with the mBot2 in VisuBot or without the robot in VisuStruct? Eight rounds.
+antworten: VisuBot | VisuStruct
+
+runde:
+frage: "Drive up to the wall and then beep."
+richtig: VisuBot
+> Distance sensor, motors and speaker: that is a job for the mBot2.
+
+runde:
+frage: "A window with a button that counts to 10."
+richtig: VisuStruct
+> You build windows with buttons with Swing in VisuStruct.
+
+runde:
+frage: "Play a melody that is stored in an array."
+richtig: VisuBot
+> You learned arrays and melodies with the mBot2's speaker.
+
+runde:
+frage: "Read the class's marks from a CSV file."
+richtig: VisuStruct
+> You learn to read and save files in VisuStruct.
+
+runde:
+frage: "If someone types 'abc' instead of a number, the program should not crash."
+richtig: VisuStruct
+> You catch crashes with try and catch. That is in VisuStruct.
+
+runde:
+frage: "Follow a black line with the line sensor."
+richtig: VisuBot
+> The line sensor sits under the mBot2.
+
+runde:
+frage: "Sort ten numbers by size."
+richtig: VisuStruct
+> Searching and sorting is in VisuStruct. But you can already find the largest value.
+
+runde:
+frage: "Draw the steps as a chart with arrows."
+richtig: VisuStruct
+> That is a flowchart. You learn it in VisuStruct in "Flowcharts and pseudocode".
+:::
+
+## Checklist
+
+Rate yourself honestly for each point: ☂️ not yet, ⛅ partly, ☀️ I can do this confidently. For ⛅ and ☂️, **Review** helps you. Then comes the quiz. It shows you whether your self-assessment is right.
+
+::: checkliste
+- I can say which programming basics I learned with the mBot2. → What you can do now
+- I can find and fix a mistake in a robot program on my own. → Once more: Why doesn't it run?
+- I can name the topics that are still waiting for me in VisuStruct. → What is still missing
+:::
+
+## Quiz
+
+::: quiz
+? Do the building blocks from the robot lessons also work for programs without a robot?
+→ What you can do now
+- [x] Yes, every Java program is built from sequence, branch, loop, variables and methods
+- [ ] No, without a robot you need completely different commands
+- [ ] Only the loops
+> Only the `mbot.` commands belong to the robot. Everything else is ordinary Java.
+
+? Why doesn't `mbot.getDistance > 15` run?
+→ Once more: Why doesn't it run?
+- [ ] Because 15 is too small
+- [x] Because the round brackets after the command are missing
+- [ ] Because you have to write `<`
+> Without brackets, Java looks for a variable `getDistance` and finds none.
+
+? Where do you learn how a program catches crashes with try and catch?
+→ What is still missing
+- [ ] In VisuBot
+- [x] In VisuStruct
+> That is where the lesson "When the program crashes: try and catch" is.
+
+? Which topics do you find in VisuStruct? Choose the right list.
+→ What is still missing
+- [x] Flowcharts, sorting, files and windows with buttons
+- [ ] Line sensor, LEDs and motors
+- [ ] Only the for loop
+> Line sensor, LEDs and motors belong to the mBot2, and you already know the for loop.
+:::

web/package.json

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