123 lines
3.7 KiB
Markdown
123 lines
3.7 KiB
Markdown
# Sortier-Algorithmen Visualisierung
|
||
|
||
Interaktive Visualisierung von 20 Sortieralgorithmen mit Schritt-für-Schritt-Darstellung, Speicher-Ansicht und Keyboard-Steuerung.
|
||
|
||
**Datei:** `sorting_visualization.html` — Single-File, keine Abhängigkeiten, läuft direkt im Browser.
|
||
|
||
[Online ansehen](sorting_visualization.html) · [Tests bestehen: 198/198](test_algorithms.js)
|
||
|
||
---
|
||
|
||
## Algorithmus-Übersicht
|
||
|
||
| Kategorie | Algorithmen |
|
||
|---|---|
|
||
| O(n²) | Bubble Sort, Selection Sort, Insertion Sort, Cocktail Shaker Sort |
|
||
| O(n log n) | Merge Sort, Heap Sort, Quick Sort, 3-Way Quick Sort, Dual-Pivot Quick Sort, Introsort, Shell Sort, Tree Sort, Timsort |
|
||
| Linear | Counting Sort, Radix Sort, Bucket Sort |
|
||
| Spezial | Pancake Sort, Cycle Sort, Bogo Sort, Fisher-Yates Shuffle |
|
||
|
||
---
|
||
|
||
## Features
|
||
|
||
- **20 Algorithmen** — vom klassischen Bubble Sort bis zum Fisher-Yates Shuffle
|
||
- **Speicher-Ansicht** — zeigt Hilfsdatenstrukturen bei Merge Sort, Heap Sort, Timsort, Counting/Radix/Bucket Sort
|
||
- **5 Datensatz-Presets** — Zufällig, Sortiert, Umgekehrt, Fast sortiert, Duplikate
|
||
- **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
|
||
- **Hell/Dunkel-Modus** — per Button oder `T`
|
||
- **Barrierefreiheit** — ARIA-Labels, Screen-Reader-Ankündigungen
|
||
|
||
---
|
||
|
||
## Schnellstart
|
||
|
||
1. `sorting_visualization.html` im Browser öffnen
|
||
2. Algorithmus wählen → Start mit `Space`
|
||
3. Oder: Play-Button drücken
|
||
|
||
---
|
||
|
||
## Tastaturkürzel
|
||
|
||
| Taste | Funktion |
|
||
|---|---|
|
||
| `Space` / `K` | Play / Pause |
|
||
| `→` / `L` | Ein Schritt vor |
|
||
| `←` / `J` | Ein Schritt zurück |
|
||
| `R` | Reset |
|
||
| `T` | Theme wechseln |
|
||
| `S` | Mischen (Fisher-Yates) |
|
||
|
||
---
|
||
|
||
## Tests
|
||
|
||
```bash
|
||
node test_algorithms.js # Kurzbericht
|
||
node test_algorithms.js --verbose # Detaillierte Ausgabe
|
||
```
|
||
|
||
### 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.
|
||
|
||
---
|
||
|
||
## Dateien
|
||
|
||
```
|
||
sorting_visualization.html # Hauptprogramm (Single-File)
|
||
BEDIENUNGSANLEITUNG.md # Bedienungsanlietung
|
||
test_algorithms.js # Node.js Test-Suite
|
||
.gitignore # Git-Konfiguration
|
||
README.md # Dieses Dokument
|
||
```
|
||
|
||
---
|
||
|
||
## Entwicklung
|
||
|
||
- **Kein Build-Schritt** — pure HTML/JS/CSS
|
||
- **Keine externen Abhängigkeiten** — läuft offline
|
||
- **Externe CDN** (optional, für Icons): Lucide Icons, Tailwind CSS
|
||
- **Version** — wird automatisch via `pre-commit`-Hook erhöht
|
||
|
||
---
|
||
|
||
## Autor
|
||
|
||
© 2026 Dieter Schlüter <dieter(dot)schlueter(at)linix(dot)de>
|