Web 0.14.15: Drei Arten von Fehlern, rote Zeilennummer, Glühbirne mit Vorschlägen

CHANGELOG.md

@@ -8,6 +8,7 @@ The format is loosely inspired by Keep a Changelog.
 
 ### Changed
 
+- **Web 0.14.15, three kinds of errors, red line numbers and a light bulb with suggestions:** lesson 7 gets the new step „Drei Arten von Fehlern“ (syntax error, runtime error, logic error, with the app's own messages), a Kompetenz item and two quiz questions; lesson 20 explains the red line number and the light bulb and calls the debugger the tool for logic errors (plus Kompetenz and quiz question); lesson 22 calls an exception a runtime error; glossary entries Syntaxfehler, Laufzeitfehler, Logikfehler (de/en/pt). In the Code area the line number of an error turns red (syntax problems and the line where the run stopped), the console names the line of a runtime error (e.g. „Zeile 3: Division durch null.“), and a 💡 at the end of the line offers a fix when VisuStruct knows it (missing `import`, missing `Scanner … = new Scanner(System.in);`, missing `;` or `)`, misspelled data type such as `Strng` → `String`); hover shows it, a click applies it. The round red dot stays the breakpoint.
 - **Web 0.13.37, no coffee cup and a better camel in lesson 4:** the coffee cup drawing in step „Jetzt in Java“ is removed again (Holger's decision). The camel for camelCase is redrawn to look more like a camel: long legs with knees and broad feet, U-shaped neck, longer snout, tail with tuft.
 - **Web 0.13.34, camel for camelCase and coffee cup for Java in lesson 4:** below the Angeberwissen on CamelCase a drawing of a two-humped camel whose humps sit under the capitals of `preisMitSteuer` (en `priceWithTax`, pt `precoComIva`), with a caption (de/en/pt). Step „Jetzt in Java“ shows a steaming coffee cup with `{ }` on it (own drawing, deliberately not the Java logo, which is an Oracle trademark), caption: „Java“ is American slang for coffee (de/en/pt). Own SVG drawings, no third-party licence.
 - **Web 0.13.33, clearer competence in lesson 6:** „vor der Ausgabe in einer Variablen rechnen“ now reads „ein Ergebnis zuerst ausrechnen und in einer Variablen speichern, dann diese Variable ausgeben, z. B. `int summe = a + b`, danach `output: summe`“, in the competences step and the „Ich kann“ checklist (de/en/pt).

web/lessons/de/07-simulation-und-schreibtischtest.md

@@ -10,6 +10,7 @@ kurz: Ein Struktogramm Schritt für Schritt ausführen, von Hand nachrechnen und
 - die Simulation starten, anhalten, einzelne Schritte ausführen und stoppen
 - während der Simulation Variablen, Ausgabe und den letzten Schritt ablesen
 - einen Schreibtischtest als Tabelle von Hand durchführen
+- Syntaxfehler, Laufzeitfehler und Logikfehler unterscheiden
 - einen Fehler finden, indem ich die Werte mit meiner Erwartung vergleiche
 - Java-Code mit dem Einzelschritt und Haltepunkten verfolgen
 :::
@@ -79,9 +80,25 @@ Ihre Kollegin Dorothy Vaughan merkte früh, dass die IBM-Computer die Rechenarbe
 Katherine Johnson (1918–2020), Mathematikerin bei der NASA (Foto: [NASA](https://commons.wikimedia.org/wiki/File:Katherine_Johnson_1983.jpg), gemeinfrei).
 :::
 
+## Drei Arten von Fehlern
+
+Fehler gehören zum Programmieren dazu, auch bei Profis. Man unterscheidet drei Arten, denn jede findest du auf einem anderen Weg:
+
+- **Syntaxfehler** (syntax error): Der Text hält sich nicht an die Regeln der Sprache, z. B. fehlt am Ende ein `;`. Das Programm startet gar nicht.
+- **Laufzeitfehler** (runtime error): Das Programm startet, bricht aber an einer Stelle ab, z. B. beim Teilen durch 0.
+- **Logikfehler** (logic error): Das Programm läuft bis zum Ende, aber das Ergebnis ist falsch, z. B. weil Klammern fehlen: `a + b / 2` statt `(a + b) / 2`.
+
+So zeigt dir VisuStruct die Fehler:
+
+- **Syntaxfehler:** Im Struktogramm passieren sie seltener, weil die Kästen die Form vorgeben. Im Bereich [Code](#zeige-codelive) wird die Stelle rot unterstrichen, die Zeilennummer wird rot, und dazu steht z. B. **Zeile 2: Hier fehlt noch: ;**.
+- **Laufzeitfehler:** Die Simulation bleibt auf dem Kasten stehen und meldet z. B. **Division durch null.** Im Bereich Code wird die Zeilennummer rot, und die [Konsole](#zeige-konsole) nennt die Zeile: **Zeile 3: Division durch null.**
+- **Logikfehler:** Hier meldet niemand etwas. Der Computer weiß nicht, was du eigentlich wolltest. Nur du kennst das richtige Ergebnis, darum hilft hier der Schreibtischtest.
+
+> Eine rote Zeilennummer zeigt einen Fehler. Der runde rote Punkt vor der Zeilennummer ist etwas anderes: ein Haltepunkt. Den lernst du unten bei „Jetzt in Java“ kennen.
+
 ## Fehler finden
 
-Gibt ein Struktogramm etwas Falsches aus, gehst du so vor:
+Gibt ein Struktogramm etwas Falsches aus, ist das ein Logikfehler. Dann gehst du so vor:
 
 1. **Erwartung aufschreiben:** Was soll bei einer bestimmten Eingabe herauskommen?
 2. **Schritt für Schritt ausführen:** Starte die Simulation mit **Schritt** und beobachte die Variablen.
@@ -266,6 +283,7 @@ Schätze dich bei jedem Punkt ehrlich ein: ☂️ noch nicht, ⛅ teilweise, ☀
 - Ich kann die Simulation starten, anhalten, einzelne Schritte ausführen und stoppen. → Die Simulation starten
 - Ich kann während der Simulation Variablen, Ausgabe und den letzten Schritt ablesen. → Was die Simulation anzeigt
 - Ich kann einen Schreibtischtest als Tabelle von Hand durchführen. → Der Schreibtischtest
+- Ich kann Syntaxfehler, Laufzeitfehler und Logikfehler unterscheiden. → Drei Arten von Fehlern
 - Ich kann einen Fehler finden, indem ich die Werte mit meiner Erwartung vergleiche. → Fehler finden
 - Ich kann Java-Code mit dem Einzelschritt und Haltepunkten verfolgen. → Jetzt in Java
 :::
@@ -312,4 +330,16 @@ Schätze dich bei jedem Punkt ehrlich ein: ☂️ noch nicht, ⛅ teilweise, ☀
 - [x] Das Programm hält vor dieser Zeile an.
 - [ ] Die Zeile wird übersprungen.
 > Das ist ein Haltepunkt. Mit ▶︎ oder dem Einzelschritt geht es weiter.
+? Ordne jedem Fehler seine Fehlerart zu.
+→ Drei Arten von Fehlern
+= Am Zeilenende fehlt das Semikolon. -> Syntaxfehler
+= Das Programm teilt durch 0 und bricht ab. -> Laufzeitfehler
+= Der Durchschnitt ist zu groß, weil Klammern fehlen. -> Logikfehler
+
+? Das Programm läuft ohne Meldung bis zum Ende, gibt aber 12 statt 21 aus. Welche Fehlerart ist das?
+→ Drei Arten von Fehlern
+- [ ] Syntaxfehler
+- [ ] Laufzeitfehler
+- [x] Logikfehler
+> Es gibt keine Meldung, das Ergebnis ist trotzdem falsch. So einen Fehler findest du nur mit deiner Erwartung und dem Schreibtischtest.
 :::

web/lessons/de/20-java.md

@@ -16,6 +16,7 @@ kurz: Alle Elemente in Java auf einen Blick, Code erzeugen, im Bereich Code Java
 - ein kurzes Java-Programm als Struktogramm nachbauen
 - im Bereich Code Java tippen und das entstehende Struktogramm lesen
 - ein Programm mit ▶︎ ausführen und Ein- und Ausgaben in der Konsole nutzen
+- an der roten Zeilennummer einen Syntaxfehler oder Laufzeitfehler finden
 - Haltepunkte setzen und ein Programm im Einzelschritt verfolgen
 :::
 
@@ -196,6 +197,10 @@ Oben im Bereich Code startet [▶︎ Ausführen](#zeige-ausfuehren) dein Program
 
 Die Grenze zwischen Code und Konsole kannst du mit der Maus nach oben oder unten ziehen.
 
+Geht etwas schief, wird die Zeilennummer rot. Bei einem Syntaxfehler ist die Stelle zusätzlich rot unterstrichen, und es steht z. B. **Zeile 2: Hier fehlt noch: ;** darunter. Dann startet ▶︎ das Programm gar nicht erst. Bricht das Programm beim Ausführen ab, ist es ein Laufzeitfehler, und die Konsole nennt die Zeile, z. B. **Zeile 3: Division durch null.** Die drei Fehlerarten kennst du aus der Lektion „Simulation und Schreibtischtest“.
+
+Weiß VisuStruct genau, was fehlt, steht am Ende der Zeile eine 💡. Fährst du mit der Maus darauf, siehst du den Vorschlag, z. B. **Vorschlag: import java.util.Scanner; einfügen**. Ein Klick übernimmt ihn. Lies trotzdem nach, was eingefügt wurde, damit du es beim nächsten Mal selbst weißt.
+
 > Der Bereich Code versteht die Java-Befehle, die es auch als Kasten im Struktogramm gibt. Eigene Klassen und Objekte kennt es noch nicht. Fenster mit Swing gehen trotzdem: Schalte dafür im Zahnrad **Echtes Java (mit Swing)** ein (Lektion „Dein erstes Fenster“).
 
 ::: angeberwissen
@@ -204,7 +209,7 @@ Profis nennen ein Programm, in dem man Code schreibt, ausführt und Fehler sucht
 
 ## Fehler suchen mit dem Debugger
 
-Manchmal läuft ein Programm, rechnet aber falsch. Dann hilft der **Debugger**: Er führt dein Programm langsam aus, und du schaust ihm dabei zu.
+Manchmal läuft ein Programm, rechnet aber falsch. Das ist ein Logikfehler. Dann hilft der **Debugger**: Er führt dein Programm langsam aus, und du schaust ihm dabei zu.
 
 - **Haltepunkt:** Klicke links auf eine Zeilennummer. Ein roter Punkt erscheint. [▶︎ Ausführen](#zeige-ausfuehren) hält vor dieser Zeile an. Ein zweiter Klick nimmt den Punkt wieder weg.
 - **Gelbe Zeile:** Sie wird als Nächstes ausgeführt. Im Struktogramm ist der passende Kasten markiert.
@@ -395,6 +400,7 @@ Schätze dich bei jedem Punkt ehrlich ein: ☂️ noch nicht, ⛅ teilweise, ☀
 - Ich kann ein kurzes Java-Programm als Struktogramm nachbauen. → Übung: Java als Struktogramm
 - Ich kann im Bereich Code Java tippen und das entstehende Struktogramm lesen. → Java direkt schreiben
 - Ich kann ein Programm mit ▶︎ ausführen und Ein- und Ausgaben in der Konsole nutzen. → Das Programm ausführen
+- Ich kann an der roten Zeilennummer einen Syntaxfehler oder Laufzeitfehler finden. → Das Programm ausführen
 - Ich kann Haltepunkte setzen und ein Programm im Einzelschritt verfolgen. → Fehler suchen mit dem Debugger
 :::
 
@@ -455,4 +461,11 @@ Schätze dich bei jedem Punkt ehrlich ein: ☂️ noch nicht, ⛅ teilweise, ☀
 - [x] C++ musst du für jedes System neu kompilieren, Java nicht.
 - [ ] Beide musst du nur einmal kompilieren.
 > C++ wird direkt zu Maschinencode für ein System. Java wird zu Bytecode, und den führt auf jedem System die JVM aus.
+
+? Die Zeilennummer 3 im Bereich Code ist rot. Was heißt das?
+→ Das Programm ausführen
+- [ ] In Zeile 3 ist ein Haltepunkt.
+- [x] In Zeile 3 steckt ein Fehler.
+- [ ] Zeile 3 wird als Nächstes ausgeführt.
+> Der Haltepunkt ist ein runder roter Punkt, die nächste Zeile ist gelb. Eine rote Zeilennummer zeigt einen Syntaxfehler oder einen Laufzeitfehler.
 :::

web/lessons/de/22-try-und-catch.md

@@ -77,7 +77,7 @@ So eine Meldung sieht erst einmal erschreckend aus. Sie verrät dir aber genau,
 | `3` | Der falsche Index. |
 | `Noten.java:5` | Die Zeile, in der es passiert ist: Zeile 5. |
 
-So einen Fehler zur Laufzeit nennt Java eine **Exception** (englisch für Ausnahme). Man sagt: Java *wirft* eine Exception. Fängt sie niemand auf, bricht das Programm ab. Deshalb erscheint „Fertig!“ nicht.
+So einen Laufzeitfehler nennt Java eine **Exception** (englisch für Ausnahme). Man sagt: Java *wirft* eine Exception. Fängt sie niemand auf, bricht das Programm ab. Deshalb erscheint „Fertig!“ nicht.
 
 ::: ludwig
 Lies Fehlermeldungen immer von oben: Erst der Name der Exception, dann die Zeilennummer. Die Zeilennummern stehen im Bereich Code links neben dem Code.

web/lessons/de/begriffe.md

@@ -159,6 +159,18 @@ Das Ergebnis, das ein Unterprogramm mit return an den Aufruf zurückgibt.
 ### Aussprung
 Verlässt sofort die Schleife, in der er steht. Danach geht es unter der Schleife weiter.
 
+### Syntaxfehler
+auch: Syntaxfehlern, Syntaxfehlers
+Ein Fehler in der Schreibweise, zum Beispiel ein fehlendes `;`. Das Programm startet gar nicht. Englisch: syntax error.
+
+### Laufzeitfehler
+auch: Laufzeitfehlern, Laufzeitfehlers
+Ein Fehler, der erst beim Ausführen auftritt, zum Beispiel Teilen durch 0. Das Programm bricht an dieser Stelle ab. Englisch: runtime error.
+
+### Logikfehler
+auch: Logikfehlern, Logikfehlers
+Das Programm läuft ohne Meldung, liefert aber ein falsches Ergebnis. Du findest ihn mit dem Schreibtischtest. Englisch: logic error.
+
 ### Schreibtischtest
 auch: Schreibtischtests
 Du führst ein Struktogramm auf Papier aus und notierst nach jedem Schritt die Werte der Variablen.

web/lessons/en/07-simulation-und-schreibtischtest.md

@@ -10,6 +10,7 @@ kurz: Run a structure chart step by step, work it out by hand and find mistakes.
 - start the simulation, pause it, run single steps and stop it
 - read the variables, the output and the last step during the simulation
 - do a desk check by hand as a table
+- tell syntax errors, runtime errors and logic errors apart
 - find a mistake by comparing the values with what I expect
 - follow Java code with Step and breakpoints
 :::
@@ -79,9 +80,25 @@ Her colleague Dorothy Vaughan saw early on that the IBM computers would take ove
 Katherine Johnson (1918–2020), mathematician at NASA (photo: [NASA](https://commons.wikimedia.org/wiki/File:Katherine_Johnson_1983.jpg), public domain).
 :::
 
+## Three kinds of errors
+
+Errors are part of programming, even for professionals. There are three kinds, and you find each of them in a different way:
+
+- **Syntax error**: The text breaks the rules of the language, e.g. a `;` is missing at the end. The program does not start at all.
+- **Runtime error**: The program starts but stops at one point, e.g. when it divides by 0.
+- **Logic error**: The program runs to the end, but the result is wrong, e.g. because brackets are missing: `a + b / 2` instead of `(a + b) / 2`.
+
+This is how VisuStruct shows you the errors:
+
+- **Syntax error:** They happen less often in a structure chart, because the boxes give you the shape. In the [Code](#zeige-codelive) area the spot is underlined in red, the line number turns red, and you read e.g. **Line 2: Still missing here: ;**.
+- **Runtime error:** The simulation stops on the box and reports e.g. **Division by zero.** In the Code area the line number turns red, and the [console](#zeige-konsole) names the line: **Line 3: Division by zero.**
+- **Logic error:** Nobody reports anything here. The computer does not know what you actually wanted. Only you know the right result, so the desk check helps here.
+
+> A red line number shows an error. The round red dot in front of the line number is something else: a breakpoint. You will meet it below in “Now in Java”.
+
 ## Find mistakes
 
-If a structure chart outputs something wrong, do this:
+If a structure chart outputs something wrong, that is a logic error. Then do this:
 
 1. **Write down what you expect:** What should come out for a particular input?
 2. **Run it step by step:** Start the simulation with **Step** and watch the variables.
@@ -266,6 +283,7 @@ Rate yourself honestly for each point: ☂️ not yet, ⛅ partly, ☀️ I can
 - I can start the simulation, pause it, run single steps and stop it. → Start the simulation
 - I can read the variables, the output and the last step during the simulation. → What the simulation shows
 - I can do a desk check by hand as a table. → The desk check
+- I can tell syntax errors, runtime errors and logic errors apart. → Three kinds of errors
 - I can find a mistake by comparing the values with what I expect. → Find mistakes
 - I can follow Java code with Step and breakpoints. → Now in Java
 :::
@@ -312,4 +330,16 @@ Rate yourself honestly for each point: ☂️ not yet, ⛅ partly, ☀️ I can
 - [x] The program pauses before this line.
 - [ ] The line is skipped.
 > That is a breakpoint. ▶︎ or Step carries on.
+? Match each error to its kind.
+→ Three kinds of errors
+= The semicolon at the end of the line is missing. -> Syntax error
+= The program divides by 0 and stops. -> Runtime error
+= The average is too big because brackets are missing. -> Logic error
+
+? The program runs to the end without any message but prints 12 instead of 21. What kind of error is that?
+→ Three kinds of errors
+- [ ] Syntax error
+- [ ] Runtime error
+- [x] Logic error
+> There is no message, but the result is still wrong. You only find an error like this with your expectation and a desk check.
 :::

web/lessons/en/20-java.md

@@ -16,6 +16,7 @@ kurz: All elements in Java at a glance, generate code, write Java in the Code ar
 - rebuild a short Java program as a structure chart
 - type Java in the Code area and read the structure chart that is built
 - run a program with ▶︎ and use input and output in the console
+- find a syntax error or a runtime error by its red line number
 - set breakpoints and follow a program step by step
 :::
 
@@ -196,6 +197,10 @@ At the top of the Code area, [▶︎ Run](#zeige-ausfuehren) starts your program
 
 You can drag the border between code and console up or down with the mouse.
 
+If something goes wrong, the line number turns red. With a syntax error the spot is also underlined in red, and below it you read e.g. **Line 2: Still missing here: ;**. Then ▶︎ does not even start the program. If the program stops while it runs, it is a runtime error, and the console names the line, e.g. **Line 3: Division by zero.** You know the three kinds of errors from the lesson “Simulation and desk check”.
+
+If VisuStruct knows exactly what is missing, there is a 💡 at the end of the line. Move the mouse onto it to see the suggestion, e.g. **Suggestion: insert import java.util.Scanner;**. A click applies it. Still read what was inserted, so that you know it yourself next time.
+
 > The Code area understands the Java commands that also exist as boxes in the structure chart. It does not know your own classes and objects yet. Windows with Swing work anyway: turn on **Real Java (with Swing)** under the gear (lesson “Your first window”).
 
 ::: angeberwissen
@@ -204,7 +209,7 @@ Professionals call a program where you write code, run it and look for mistakes
 
 ## Find mistakes with the debugger
 
-Sometimes a program runs but calculates something wrong. Then the **debugger** helps: it runs your program slowly while you watch.
+Sometimes a program runs but calculates something wrong. That is a logic error. Then the **debugger** helps: it runs your program slowly while you watch.
 
 - **Breakpoint:** Click a line number on the left. A red dot appears. [▶︎ Run](#zeige-ausfuehren) pauses before this line. Click again to remove the dot.
 - **Yellow line:** This line runs next. The matching box is selected in the structure chart.
@@ -395,6 +400,7 @@ Rate yourself honestly for each point: ☂️ not yet, ⛅ partly, ☀️ I can
 - I can rebuild a short Java program as a structure chart. → Exercise: Java as a structure chart
 - I can type Java in the Code area and read the structure chart that is built. → Write Java directly
 - I can run a program with ▶︎ and use input and output in the console. → Run the program
+- I can find a syntax error or a runtime error by its red line number. → Run the program
 - I can set breakpoints and follow a program step by step. → Find mistakes with the debugger
 :::
 
@@ -455,4 +461,11 @@ Rate yourself honestly for each point: ☂️ not yet, ⛅ partly, ☀️ I can
 - [x] You have to compile C++ again for every system, but not Java.
 - [ ] You only compile both once.
 > C++ becomes machine code for one system directly. Java becomes bytecode, and the JVM runs it on every system.
+
+? Line number 3 in the Code area is red. What does that mean?
+→ Run the program
+- [ ] There is a breakpoint in line 3.
+- [x] There is an error in line 3.
+- [ ] Line 3 runs next.
+> A breakpoint is a round red dot, and the next line is yellow. A red line number shows a syntax error or a runtime error.
 :::

web/lessons/en/22-try-und-catch.md

@@ -77,7 +77,7 @@ A message like this looks scary at first. But it tells you exactly what is going
 | `3` | The wrong index. |
 | `Grades.java:5` | The line where it happened: line 5. |
 
-Java calls an error like this, at run time, an **exception**. We say: Java *throws* an exception. If nobody catches it, the program stops. That is why “Done!” does not appear.
+Java calls a runtime error like this an **exception**. We say: Java *throws* an exception. If nobody catches it, the program stops. That is why “Done!” does not appear.
 
 ::: ludwig
 Always read error messages from the top: first the name of the exception, then the line number. In the Code area the line numbers are on the left next to the code.