2026-04-06 21:38:06 +02:00
|
|
|
|
# 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
|
2026-04-07 03:50:24 +02:00
|
|
|
|
- **Mobile optimiert** — Touch-Support, zoom-resistent, responsive
|
2026-04-06 21:38:06 +02:00
|
|
|
|
- **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
|
2026-04-07 03:34:32 +02:00
|
|
|
|
node test_algorithms.js # Kurzbericht
|
|
|
|
|
|
node test_algorithms.js --verbose # Detaillierte Ausgabe
|
2026-04-06 21:38:06 +02:00
|
|
|
|
```
|
|
|
|
|
|
|
2026-04-07 03:34:32 +02:00
|
|
|
|
### 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.
|
2026-04-06 21:38:06 +02:00
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## Dateien
|
|
|
|
|
|
|
|
|
|
|
|
```
|
2026-04-07 03:27:16 +02:00
|
|
|
|
sorting_visualization.html # Hauptprogramm (Single-File)
|
|
|
|
|
|
BEDIENUNGSANLEITUNG.md # Bedienungsanlietung
|
2026-04-06 21:38:06 +02:00
|
|
|
|
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
|
2026-04-06 21:50:08 +02:00
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## Autor
|
|
|
|
|
|
|
|
|
|
|
|
© 2026 Dieter Schlüter <dieter(dot)schlueter(at)linix(dot)de>
|
