Unsere Visualisierungsfunktion ist im Rahmen einer Masterarbeit entstanden

Unsere Visualisierung (Veranschaulichung) von Java-Programmen wurde in einer Masterarbeit entwickelt - ein Grund, ein wenig über den Umfang und das Ziel dieser Masterarbeit zu berichten!

Als Tutor in „Praktische Informatik 2“ im SoSe 2018 beschäftigte mich oft, wie man mittels Veranschaulichungen Algorithmen und Datenstrukturen verständlicher machen konnte und habe im Verlauf des Semesters für meine TutantInnen wirklich viele Animationen per Hand erstellt. Ziel der Animationen war es, den TutantInnen ein Gefühl davon zu geben, was der Programmcode macht, den der Professor damals oft nur knapp erklärte.

Wie dies beispielsweise aussah, zeigen nachfolgende Folien:

Das Erstellen dieser Animationen war als Tutor wirklich mühselige Arbeit, hat viele Stunden in Anspruch genommen und die Animationen waren auch nicht immer einheitlich. Deshalb machte ich mir zu der Zeit oft Gedanken, wie man diesen Prozess ggf. automatisieren könnte. Nach der Entwicklung der Coding Platform vom Oktober 2018 bis Februar 2019 im Rahmen einer Independent Study schlug ich dem betreuenden Dozenten Dr. Karsten Hölscher das Thema einer automatischen Visualisierung der Ausführung von Java-Programmen für die Coding Platform vor, an dem er viel Interesse zeigte.

Das Ziel war es, eine Visualisierung zu entwickeln, mit welcher sich SchülerInnen und Studierende zu jeder Zeit eine Veranschaulichung (also Visualisierung) zu ihrem eigenen Programmcode ansehen können, um zu verstehen, wie die Algorithmen und Datenstrukturen funktionieren und auch eigene Fehler schneller finden können.

Zum Zeitpunkt der Entwicklung an der Masterarbeit gab es bereits einige Visualisierungssysteme für Java, die die Ausführung von Java-Programmcode vollautomatisch darstellen konnten. Diese brachten entweder eine eigene IDE mit oder ließen sich als Plugin zu einer bestehenden IDE hinzufügen - beispielsweise Jeliot 3, JGrasp und Jive. Alle bestehenden Visualisierungen besaßen ganz unterschiedliche Vor- und Nachteile und zielten auch auf leicht unterschiedliche Zielgruppen ab. Zudem ließen sich kurze Java-Programme bereits auf Java Tutor im Webbrowser visualisieren. Die vorhandenen Systeme waren i.d.R. allerdings nur begrenzt für komplexere Algorithmen und Datenstrukturen geeignet.

Nachfolgend ein paar Screenshots mit nahezu dem gleichen Programmcode in den genannten Visualisierungen:

Offensichtliche Ziele einer solchen Visualisierung sind natürlich, dass die entwickelte Visualisierung möglichst effektiv beim Lernen und dem Finden selbstgemachter Fehler helfen soll, dass sie intuitiv verstanden werden kann und sich ebenfalls auch für die komplexeren Programmbeispiele eignet. Speziell für die Coding Platform gab es allerdings weitere Ziele in Hinsicht der Performance, die für die Akzeptanz auf der Coding Platform erreicht werden müssen - ohne diese würde die Visualisierung nämlich wohl kaum Verwendung finden:

• Einerseits darf der Einsatz bzw. das Aktivieren der Visualisierung nicht dazu führen, dass die Kosten für den Betrieb der Plattform nennenswert steigen. Bevor ein Programm visualisiert werden kann, muss die Visualisierung nämlich erst einmal an die Informationen gelangen, die gezeigt werden sollen. Da die Ausführung der Programme auf den Servern der Coding Platform statfindet, muss diese Information auch auf dem Server gewonnen werden. Würde sich die Zeit der Kompilierung und Ausführung durch diese Informationsgewinnung allerdings verdoppeln oder verdreifachen, würde sich die Anzahl der benötigten Server ebenfalls erhöhen und die Betriebskosten damit steigen - dies wird von Schulen und Universitäten natürlich eher ungern gesehen.
• Andererseits sollen die Nutzer auch keine 2, 10 oder 100 Sekunden darauf warten müssen, bis die Visualisierung geladen ist und gezeigt werden kann. Als Nutzer soll man einfach ein Fenster öffnen können und eben schnell danach schauen können, was das Programm gerade falsch macht. Dies war insbesondere einer der Schwierigkeiten bei Java Tutor, da hier nicht ganz triviale Programme aufgrund der Art & Weise des Auslesens der Informationen oft sehr lange für die Generierung der Visualisierung brauchten.

Schließlich habe ich in meiner Masterarbeit eine Visualisierung entwickeln können, die auch für komplexere Programmausführungen mit vielen tausend Schritten meist deutlich weniger als eine Sekunde zusätzliche Kompilierungs- und Ausführungszeit erfordert. So hat sich die Kompilierungs- und Ausführungszeit von 2035 Programmversionen, die auf der Coding Platform der Uni Bremen zum Zeitpunkt der Evaluation der entwickelten Visualisierung vorlagen, mit aktivierter Visualisierung von durchschnittlich 1,85 Sekunden auf durchschnittlich lediglich 2,18 Sekunden erhöht - die Generierung der Visualisierung dauerte bei diesen Programmausführungen durchschnittlich also lediglich 0,33 Sekunden. Nach erfolgter Kompilierung und Ausführung kann die Visualisierung dann einfach ohne zusätzliches Laden im Webbrowser vom Benutzer gestartet werden.

In der Masterarbeit habe ich mich neben der Implementierung und der Evaluierung eines sehr schnellen Systems zum Auslesen dieser Informationen während der Ausführung nahezu beliebiger Java-Programme noch mit dem Design der Nutzeroberfläche und dem Force-Layout-Verfahren, mit welchem die Objekte ausgerichtet werden, beschäftigt, damit die Objekte tatsächlich intuitiv und übersichtlich dargestellt werden. So werden baumartige Datenstrukturen auch automatisch eher hierarchisch angeordnet. Referenzen mit dem Attributnamen „links“ oder „left“ werden automatisch nach links geschoben, während Referenzen mit dem Attributnamen „rechts“ oder „right“ auch automatisch nach rechts gezogen werden:

Das Ergebnis kennen einige Nutzer der Coding Platform bereits. Eine Kurzanleitung und Übersicht über den Funktionsumfang für Lehrende und Interessierte:

Um schließlich noch ein paar Indizien dafür zu sammeln, ob die Visualisierung tatsächlich auch beim Lernen helfen könnte, habe ich noch eine kleine Nutzerstudie mit 17 Teilnehmern durchgeführt, größtenteils aus der Veranstaltung „Praktische Informatik 2(a)“ der Universität Bremen. Nach Bearbeitung von drei Programmieraufgaben wurden die ersten zwei allgemeine Fragen nach der Erfassung persönlicher Informationen wie folgt beantwortet:

• Ich halte den Einsatz der Coding Platform (auch ohne Visualisierungsfunktion) zum begleitenden Lernen in der Praktischen Informatik für nützlich:

• Ich halte den Einsatz der Visualisierung zum begleitenden Lernen in der Praktischen Informatik für nützlich.

Auch nachfolgende Fragen wurden mit Ausnahme zweier spezieller Fragen durchweg sehr positiv beantwortet. Die Antworten im Freitextfeld waren darüber hinaus sehr erfreulich:


Die häufigsten Kritikpunkte waren die fehlende Autovervollständigung des Programmcodes sowie ein damaliger Bug, der noch zu fehlerhaften Einrückungen des Programmcodes führte. Letzteres haben wir selbstverständlich schnell behoben. Vereinzelt wurden Funktionalitäten innerhalb der Visualisierung nicht gefunden, die wir nachträglich ein wenig angepasst haben - z.B. haben wir kleine Buttons zum herein- und herauszoomen aus der Objektansicht hinzugefügt, da ein Teilnehmer nicht bewusst war, dass man mit dem Mausrad zoomen konnte oder die präzisere Benennung einzelnen Ansichten, da einem anderen Teilnehmer nicht bemerkt hat, dass die Visualisierung auch den Wert der lokalen Variablen darstellt. Dafür, dass die Studienteilnehmer keine größere Einweisung in die Visualisierung erhalten haben, schien die Visualisierung dennoch schnell von den meisten Teilnehmern problemlos verwendet werden zu können.

Eine Rückmeldung, die schließlich auch dazu führte, dass wir mit der Entwicklung eigener Java-Kurse begannen, war folgende:



Schließlich war die Arbeit an der Masterarbeit und die Entwicklung der Visualisierung wirklich spannend! Für die Coding Platform liefert sie eine wirklich nützliche Funktionalität basierend auf einer soliden Implementierung, die wir auch in Zukunft verbessern und weiter entwickeln werden.

Author: Andre Mühlenbrock