Vorstellung

Dieses Projekt ist eine prototypische Lernplattform für Programmierung, die Aufgaben ähnlich wie bekannte Plattformen Codewars oder LeetCode bereitstellt.
Die Nutzer:innen können dabei Aufgabenstellungen direkt im integrierten Inline-Codeeditor bearbeiten und lösen.

Der entscheidende Unterschied – und zugleich der Kern meiner Bachelorarbeit – ist eine zusätzliche Visualisierungs-Funktion:
Beim Testen des eigenen Codes erzeugt die Plattform eine animierte Darstellung jedes Ausführungsschrittes des Algorithmus.
Das Besondere: Fehler im Code spiegeln sich auch in der Visualisierung wider – so werden Logikfehler nicht nur im Ergebnis, sondern auch im Ablauf sichtbar.

---

Beispiel-Demos

Bubblesort Algorithmus (YouTube-Video):

Quicksort Algorithmus (YouTube-Video):

---

Features der Visualisierung

Als Beispiel wurden die Algorithmen Bubblesort und Quicksort implementiert.
Die Visualisierung erkennt dabei automatisch verschiedene Zustände und markiert diese in der Animation sowie im zugehörigen Code.

Einige zentrale Beispiele:

1. Tauschvorgänge

• In Blau markiert sind die Elemente, die im aktuellen Schritt getauscht wurden.
• Die Elemente 64 und 12 sind gestrichelt umrandet und wackeln, um anzuzeigen, dass sie im nächsten Schritt vertauscht werden.
• Im Code werden die dafür verantwortlichen Zeilen hervorgehoben.

---

2. Ersetzung von Elementen

Hier ist zu sehen, wie Elemente sukzessive durch 0 ersetzt werden. Die Animation folgt dabei direkt dem Codefluss.

---

3. Markierung des Pivot-Elements

• Das aktuelle Pivot-Element wird in Orange hervorgehoben.
• Dieses wird automatisch aus dem Parameter der Funktion quickSortRecursive abgeleitet.

---

4. Rückgabewerte

Die Visualisierung erkennt auch Rückgabewerte von Funktionen und markiert deren Einfluss direkt in der Liste.

---

5. Rekursive Aufrufe

Rekursionen werden klar erkennbar dargestellt, sodass nachvollziehbar ist, welche Aufrufe gerade aktiv sind.

---

6. Vergleichsoperationen

Auch Vergleiche zwischen Elementen werden erkannt und im Ablauf hervorgehoben.

---

Installation

1. Konfiguriere die .env-Datei (z. B. Port, Umgebungsvariablen).

2. Analysis-Tool-Docker-Image (aktuell manuell):
   Der Executor startet den Analyse-Container über ANALYSIS_DOCKER_IMAGE. In docker-compose.prod.yml wird das Image nicht mehr mitgebaut; du musst es einmal selbst bauen (oder ein bereits gebautes Image von einer Registry pullen) und den Image-Namen in der .env setzen.

   Beispiel: Image aus dem Projektverzeichnis bauen und Namen wählen:

   docker build -t bachelor-thesis-analysis-tool ./analysis-tool

   In der .env denselben Namen eintragen:

   ANALYSIS_DOCKER_IMAGE=bachelor-thesis-analysis-tool
   

   Für die lokale Entwicklung mit docker compose (ohne -f docker-compose.prod.yml) kannst du das analysis-tool-Service weiterhin nutzen, damit Compose das Image baut; der Compose-Projektname ergibt dann typischerweise ein Image wie <projektordner>-analysis-tool – diesen vollen Namen trägst du ebenfalls in ANALYSIS_DOCKER_IMAGE ein.

3. Starte das Projekt mit:

   docker compose up -d

4. Wenn der Port in der .env-Datei nicht angepasst wurde, ist die Webseite anschließend unter http://localhost:3000 erreichbar.

Ausblick

Die gezeigte Plattform ist ein Prototyp, der exemplarisch an Sortieralgorithmen demonstriert wird. Das Visualisierungskonzept ist jedoch universell erweiterbar: In Zukunft könnten weitere Algorithmen oder sogar komplexere Programmieraufgaben unterstützt werden, um Lernenden tiefere Einblicke in das Verhalten ihres Codes zu geben.