diff --git a/BEDIENUNGSANLEITUNG.md b/BEDIENUNGSANLEITUNG.md index 234768a..cd41a7c 100644 --- a/BEDIENUNGSANLEITUNG.md +++ b/BEDIENUNGSANLEITUNG.md @@ -28,27 +28,27 @@ Dieses Programm visualisiert die Funktionsweise von **20 Sortieralgorithmen** ## 2. Oberfläche ``` -┌───────────────────────────────────────────────────────────────┐ +┌──────────────────────────────────────────────────────────┐ │ Sortier-Algorithmen [Bedienung] │ -├──────────────┬────────────────────────────────────────────────┤ -│ │ ┌─ Phase-Label ───────────────────────┐ │ -│ Algorithmus │ │ Vergleich: arr[3]=42 mit arr[4]=17 │ │ -│ [Dropdown] │ └─────────────────────────────────────┘ │ -│ │ │ -│ Daten │ ┌─────────── Canvas ──────────────────┐ │ -│ [Vorlage] │ │ │ │ -│ │ │ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ │ │ -│ Eigene │ │ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ │ │ -│ Werte │ │ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ │ │ -│ │ │ │ │ -│ Array-Größe │ └─────────────────────────────────────┘ │ -│ ─────────── │ │ -│ Geschw. │ [▶][⏸][⏭][🔀][↺][🌙] │ -│ ─────────── │ │ -│ Legend │ Vergleiche: 128 Tausche: 64 Zeit: 1.2s │ -│ │ │ -│ [▶ Play] │ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ │ -└──────────────┴────────────────────────────────────────────────┘ +├──────────────┬─────────────────────────────────────────────┤ +│ │ ┌─ Phase-Label ──────────────────────┐ │ +│ Algorithmus │ │ Vergleich: arr[3]=42 mit arr[4]=17 │ │ +│ [Dropdown] │ └────────────────────────────────────┘ │ +│ │ │ +│ Daten │ ┌─────────── Canvas ─────────────────┐ │ +│ [Vorlage] │ │ │ │ +│ │ │ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ │ │ +│ Eigene │ │ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ │ │ +│ Werte │ │ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ │ │ +│ │ │ │ │ +│ Array-Größe │ └────────────────────────────────────┘ │ +│ ─────────── │ │ +│ Geschw. │ [▶][⏸][⏭][🔀][↺][🌙] │ +│ ─────────── │ │ +│ Legend │ Vergleiche: 128 Tausche: 64 Zeit: 1.2s │ +│ │ │ +│ [▶ Play] │ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ │ +└──────────────┴─────────────────────────────────────────────┘ ``` - **Links (Sidebar):** Algorithmus wählen, Datensatz, eigene Werte, Geschwindigkeit, Legende @@ -314,29 +314,6 @@ Algorithmen mit besonderen Eigenschaften oder Anwendungsfällen. --- -## Tests - -```bash -node test_algorithms.js # Kurzbericht -node test_algorithms.js --verbose # Detaillierte Ausgabe -``` - -Das Testskript führt **automatisierte Korrektheitstests** für alle Sortieralgorithmen durch: - -**Haupt-Tests** — 19 Sortier-Algorithmen × 5 Presets × 2 Größen = 190 Tests. Für jeden: `done`-Step, sortiert, Länge erhalten. - -**Shuffle-Tests** — 10 Tests. Prüft dass die Werte permutiert aber erhalten bleiben. - -**Edge Cases** — Leeres Array und Single-Element. - -**Performance-Test** — 6 Algorithmen mit 100 Elementen. - -**Gesamt: 198 Tests** — alle müssen bestehen. - -Das Skript extrahiert den JavaScript-Code aus `sorting_visualization.html`, führt ihn in einer isolierten Node.js-VM aus und ruft `buildSteps(algo)` auf. Die Funktion ist rein funktional — keine DOM-Manipulation — und daher unit-testbar. - ---- - ## Lizenz Dieses Projekt ist eine Open-Source-Lehr- und Lernressource. diff --git a/README.md b/README.md index d449c74..7465c7f 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ Interaktive Visualisierung von 20 Sortieralgorithmen mit Schritt-für-Schritt-Da - **Schritt-Navigation** — vor, zurück, Play/Pause - **Keyboard-Steuerung** — alle Funktionen auch ohne Maus bedienbar - **URL-State** — Auswahl bleibt beim Neuladen erhalten -- **Mobile optimiert** — Touch-Support, zoom-resistent, responsive +- **Mobile optimiert** — Touch-Support, zoom-resistent - **Hell/Dunkel-Modus** — per Button oder `T` - **Barrierefreiheit** — ARIA-Labels, Screen-Reader-Ankündigungen @@ -57,51 +57,17 @@ Interaktive Visualisierung von 20 Sortieralgorithmen mit Schritt-für-Schritt-Da ## Tests ```bash -node test_algorithms.js # Kurzbericht -node test_algorithms.js --verbose # Detaillierte Ausgabe +node test_algorithms.js ``` -### Was wird getestet? - -Das Testskript führt **automatisierte Korrektheitstests** für alle Sortieralgorithmen durch: - -**1. Haupt-Tests (2 Größen × 5 Presets × 19 Sortier-Algorithmen = 190)** -Für jeden Algorithmus (außer Shuffle) wird geprüft: -- Der letzte Step hat `type === 'done'` -- Das Array ist vollständig sortiert -- Die Array-Länge bleibt erhalten - -**2. Shuffle-Tests (10 Tests)** -Shuffle ist speziell — prüft stattdessen: -- Länge bleibt erhalten -- Alle Original-Werte sind noch vorhanden - -**3. Edge Cases (2 Tests)** -- Leeres Array → Bubble Sort -- Single-Element `[42]` → Bubble Sort - -**4. Performance-Test (6 Algorithmen × 100 Elemente)** -- Sortiert das Array korrekt in akzeptabler Zeit - -**Gesamt: 198 Tests** - -### Technische Details - -Das Skript: -1. **Extrahiert** den JavaScript-Code aus `sorting_visualization.html` -2. **Führt** ihn in einer isolierten Node.js-VM aus (mit gemockten DOM-Elementen) -3. **Ruft** `buildSteps(algo)` auf — die Funktion die alle Steps für die Animation erzeugt -4. **Verifiziert** dass der letzte Step das Array korrekt sortiert hat - -Die `buildSteps`-Funktion ist rein funktional und gibt nur Step-Objekte zurück — keine DOM-Manipulation. Das macht sie unit-testbar. +Alle 198 Tests müssen bestehen. --- ## Dateien ``` -sorting_visualization.html # Hauptprogramm (Single-File) -BEDIENUNGSANLEITUNG.md # Bedienungsanlietung +sorting_visualization.html # Hauptprogramm (Single-File) test_algorithms.js # Node.js Test-Suite .gitignore # Git-Konfiguration README.md # Dieses Dokument diff --git a/sorting_visualization.html b/sorting_visualization.html index 4af0cc9..bdc188a 100644 --- a/sorting_visualization.html +++ b/sorting_visualization.html @@ -204,7 +204,7 @@

- Sortier-Algorithmen v0.3.1 + Sortier-Algorithmen v0.2.18

Interaktive Visualisierung mit schrittweiser Animation