Hilfsvideo
Schülergerechte Bedienungsanleitung
1. Überblick
Auf Deinem Bildschirm siehst Du folgende Bereiche:
- Darstellungsbereich (oben): Hier liegen Deine Knoten (als Boxen dargestellt) sowie die
Kanten (als verbindende Pfeile dargestellt). Hier kannst Du selber Einstellungen an der konkreten
Datenstruktur vornehmen.
- Codebereich (unten): Links siehst Du die Zeilennummern, rechts den Pseudocode-Editor.
In diesen wird automatisch der Code zu Deinen Aktionen im Darstellungsbereich geschrieben. Außerdem
kannst Du den Code im Editor selber schreiben oder ändern.
- Kopfleiste (ganz oben): Von links nach rechts siehst Du Buttons, mit denen Du (von
links nach rechts) zur Hilfe, zu den Einstellungen und in den Dunkel- bzw. Hell-Modus gelangst.
- Buttons: Auf der ganzen Seite sind weitere Buttons verteilt. Diese werden nachfolgend
erläutert. Zwei wichtige sind die Buttons in den oberen Zeilen von Darstellungs- und Code-Bereich ganz
rechts. Mit diesen kannst Du die Bereiche auf den ganzen Bildschirm vergrößern.
2. Darstellungsbereich
Dieses Werkzeug ist im Darstellungsbereich einfach und anschaulich zu benutzen:
- Tippe oben rechts im Edit-Feld mit der Aufschrift „Knoten-ID eingeben“ einen eindeutigen Bezeichner für Deinen
ersten Knoten ein. Drücke anschließend auf den Button mit der Aufschrift „+“ oder Enter, wenn Du noch im
Edit-Feld bist.
- Mit Doppelklick kannst Du den Knoten mit Inhalt befüllen. Drücke anschließend „Strg“ + „Enter“ oder
klicke ins Leere, um den Bearbeitungsmodus zu beenden.
- Wiederhole diesen Ablauf für mehrere Knoten.
- Du kannst die Knoten nun beliebig auf der Leinwand verschieben. Klicke dazu mit der linken Maustaste auf
ein Knotenelement und halte es gedrückt.
- Unten links auf der Leinwand findest Du drei Buttons. Hier kannst Du die Leinwand vergrößern (links),
verkleinern (Mitte) oder auf den Ausgangszustand zurücksetzen (rechts). Der Ausgangszustand bringt die
Leinwand immer genau in die Mitte aller Knoten, die Du gerade erstellt hast.
Zoomen kannst Du
außerdem mit Deinem Mausrad.
- Nun kannst Du zwei Knoten mit einer Kante verbinden, indem Du zuerst auf den Startknoten klickst. Dann
erhältst Du eine Vorschaulinie. Solltest Du Dich verklickt haben, kannst Du jetzt noch entweder mit der
Maus auf einen freien Bereich linksklicken oder Du drückst die „Escape“-Taste. Wenn Du die Kante ziehen
willst, klickst Du mit der linken Maustaste auf den zweiten Knoten. Dann erscheint die Kante
zwischen beiden Knoten und wird automatisch entsprechend beschriftet.
- Klickst Du mit der rechten Maustaste auf einen Knoten, so öffnet sich ein Menü. Hier kannst Du den
Knoten zum Beispiel „als Head“ (Anfang der Liste) festlegen oder ihn löschen.
- Mit Rechtsklick auf eine Kante (oder ihre Beschriftung) kannst Du ebenfalls ein Menü öffnen und hier die
Kante löschen oder lösen. Beim Lösen kannst Du dann – genau wie beim Erstellen der Kante – ein neues
Ziel auswählen.
- Löschen kannst Du Knoten und Kanten auch, indem Du auf sie linksklickst und dann die „Entfernen“-Taste
drückst.
3. Codebereich
Der Codebereich ist etwas komplizierter und sollte erst modifiziert werden, wenn Du mit der Darstellung
sicher bist.
Alle Aktionen in der Darstellung erzeugen einen Pseudocode, welcher genau diese obige Darstellung repräsentiert.
Code bearbeiten:
- Du kannst im Editor selber tippen. Beachte dabei die erlaubten Befehle (Abschnitt 6).
- Kommentare kannst Du mit
//… in der aktuellen Zeile setzen.
Code ausführen:
In der oberen Zeile des Codes siehst Du mehrere Buttons, mit denen Du den Code ausprobieren kannst:
- Du kannst den Code mit dem Play-Button (dritter von rechts) abspielen. Sobald dieses Abspielen beginnt,
werden einige Bereiche gesperrt, damit Du während des Ausführens nichts mehr veränderst. Es erscheint
ein Pause-Button als vierter Button von rechts, welchen Du dafür verwenden kannst, um das Abspielen
anzuhalten.
- Beim Abspielen erscheint anstelle des Play-Buttons ein Abbruch-Button. Wird dieser gedrückt, wird das
gesamte Abspielen abgebrochen. Die Darstellung bleibt auf dem aktuellen Stand.
- Außerdem gibt es den schrittweisen (Step-) Modus. Wenn Du jeden einzelnen Schritt nachvollziehen und
zwischendrin eine Pause haben willst, kannst Du damit jede Codezeile einzeln ausführen. Du kannst mit
dem Step-Modus direkt beginnen (zweiter Button von rechts) oder aus einer Pause des Play-Modus starten.
Außerdem kannst Du immer zum Play-Modus wechseln.
Synchronisation:
- Mit dem dritten Button von links kannst Du den Code aufräumen, indem Du ihn so minimierst, dass er genau
auf die aktuell oben dargestellte Struktur passt. Achtung: Alles, was nichts mit der Struktur der
Darstellung zu tun hat (beispielsweise auch Suchbefehle), wird entfernt.
- Umgedreht gibt es einen solchen Button auch oben im Darstellungsbereich, der die Darstellung auf den
aktuellen Code synchronisiert. Achtung: sind Fehler im Code, wird die Synchronisation an der
Fehlerstelle abgebrochen.
Import und Export:
- Mit dem Button ganz links im Codebereich kannst Du eine .txt-Datei als Code laden.
- Mit dem zweiten Button von links im Codebereich kannst Du den aktuellen Code als .txt-Datei
exportieren.
4. Such- und Traversierungsfunktionen
Lineare Suche (in den Modi mit Listen)
- Klickst Du mit der rechten Maustaste auf den zu suchenden Knoten und anschließend im Menü auf „Suchen“,
wird die Suche gestartet.
- Die Suche durchläuft ab dem head-Knoten jeweils zum Knoten, der mit dem
.next-Zeiger verbunden ist, bis er den Knoten findet.
- Existiert kein head-Knoten oder gibt es keine Verbindung zum gesuchten Knoten, bricht die
Suche mit einem Fehler ab.
Breitensuche (BFS) und Tiefensuche (DFS) im „Graph“-Modus
- Klickst Du mit der rechten Taste auf den Startknoten der Suche, so öffnet sich das Menü. In diesem
kannst Du die Suche auswählen.
- Die Suche durchläuft entsprechend ihrer bekannten Implementierung den gesamten Graphen.
5. Einstellungen
Mittels des Zahnrad-Buttons können die Einstellungen geöffnet werden. Die Einstellungen werden automatisch
mit dem Schließen des Fensters (per „Escape“-Taste oder Klick auf das „X“) gespeichert.
- Listentyp: Hier kannst Du zwischen einfach verketteter Liste (nur ein
.next-Zeiger pro Knoten), der doppelt verketteten Liste (zwei Zeiger (.next
und .prev)) pro Knoten und dem Graph (beliebig viele Zeiger pro Knoten) auswählen.
- Abspielgeschwindigkeit: Diese bezieht sich auf die Schnelligkeit, in der der Code
abgespielt wird und gleichzeitig auch auf die Geschwindigkeit der Animation von Suchen und
Traversierungen.
- Suchanimation: Hier kann die Animation bei der Suche ein- und ausgeschaltet werden.
- Suchergebnis anzeigen: Die Anzeige für das Ergebnis einer Suche kann hier aktiviert und
deaktiviert werden.
6. Erlaubte Befehle:
Folgende Befehle kannst Du im Pseudocode verwenden. Beachte, dass pro Zeile jeweils nur ein Befehl stehen
darf, damit alles richtig interpretiert werden kann. Kommentare dürfen hinter den Befehlen oder auch in
einer eigenen Zeile stehen.
Einfach verkettete Liste:
createNode("ID", x-Koordinate, y-Koordinate)
Erstellt einen Knoten
mit der angegebenen ID. Die Koordinatenangaben sind optional.deleteNode("ID")
Löscht den Knoten mit der angegebenen ID.setHead("ID")
Setzt den Knoten mit der angegebenen ID als
head.
removeHead("ID")
Entfernt den Knoten mit der angegebenen ID als
head.setNext("Start-ID", "End-ID")
Erzeugt .next-Kante zwischen dem Knoten
mit der Start-ID und dem Knoten mit der End-ID.removeNext("Start-ID")
Entfernt .next-Kante des Knotens mit der
Start-ID.updateNodeContent("ID", "Text")
Setzt Inhalt des Knotens mit ID auf den
Text.head.next(…).content()
Geht von head ausgehend so oft über .next, wie
Du es aufgeschrieben hast und gibt mit .content den Inhalt des letzten erreichten Knotens aus.
Knoten kannst Du statt mit ihrer ID auch mittels head.next()… ansprechen. So kannst Du Dich vollständig an
die Regeln der einfach verketteten Liste halten, bei der nach außen nur der Zeiger head auf das erste
Element bekannt ist. Das zweite Element der Liste kannst Du mit head.next() ansprechen, das dritte mit
head.next().next() und so weiter.
Doppelt verkettete Liste:
Alle bei einfach verketteten Listen verfügbaren Befehle können verwendet werden. Folgende Befehle sind zusätzlich
möglich:
setTail("ID")
Setzt den Knoten mit der angegebenen ID als tail.removeTail("ID")
Entfernt den Knoten mit der angegebenen ID als tail.
setPrev("Start-ID", "End-ID")
Erzeugt .prev-Kante zwischen dem Knoten
mit der Start-ID und dem Knoten mit der End-ID.removePrev("Start-ID")
Entfernt .prev-Kante des Knotens mit der
Start-ID.
Graph:
Bei Graphen sind ausschließlich folgende Befehle gültig:
createNode("ID", x-Koordinate, y-Koordinate)
Erstellt einen Knoten mit
der angegebenen ID. Die Koordinatenangaben sind optional.deleteNode("ID")
Löscht den Knoten mit der angegebenen ID.setHead("ID")
Setzt den Knoten mit der angegebenen ID als head.removeHead("ID")
Entfernt den Knoten mit der angegebenen ID als head.
createLink("Start-ID", "End-ID", Index)
Erzeugt eine Kante mit
angegebenen eindeutigem Index zwischen dem Knoten mit der Start-ID und dem Knoten mit der End-ID.deleteLink("Start-ID", Index)
Entfernt die Kante mit angegebenem Index
ausgehend vom Knoten mit der Start-ID.BFS("Start-ID")
Führt eine Breitensuche ausgehend vom Knoten mit der
Start-ID durch.DFS("Start-ID")
Führt eine Tiefensuche ausgehend vom Knoten mit der
Start-ID durch.updateNodeContent("ID", "Text")
Setzt Inhalt des Knotens mit ID auf den
Text.
7. Fehlerbehandlung und Tipps
- Gelbe Markierung über den Zeilennummern: In dieser Zeile befindet sich der Code gerade
beim Abspielen.
- Rote Markierung über den Zeilennummern: In dieser Zeile befindet sich ein Fehler im
Code, der beim Abspielen nicht interpretiert werden konnte. Der Code wurde nur bis zur Zeile zuvor
ausgeführt und nun abgebrochen.
- „Escape“-Taste: Schließt Fenster oder bricht Aktionen ab, u. a. die Auswahl beim
Erstellen von Zeigern.
- „Delete“-Taste: Löscht zuvor mit Linksklick ausgewählte Verbindungen.
- Button mit dem Mülleimer (Darstellungsbereich rechts, Button ganz
links): Nach Deiner Bestätigung wird alles (Code und Darstellung) gelöscht.
- Dunkel- / Hell-Modus (Zeile ganz oben, ganz rechts): Button zum
Umschalten des Helligkeit-Themas.
8. Häufige Probleme und Antworten
- „Warum passiert beim Klicken nichts?“
Wird gerade ein Pseudocode ausgeführt, so sind einige Buttons
gesperrt. Beende den Play-Modus, um wieder beliebige Änderungen vornehmen zu können.
- „Ich kann keinen Tail auf einen Knoten setzen.“
In bestimmten Modi sind einige Funktionen
nicht möglich. Tails können nur im doppelt verketteten Listen-Modus gesetzt werden. Im Graph-Modus sind
.next- und .prev-Zeiger nicht vorgesehen. Prüfe in den Einstellungen, in welchem Modus Du Dich
befindest und ändere ihn gegebenenfalls.
- „In der Darstellung war keine Datenstruktur, dann habe ich etwas eingefügt und jetzt funktioniert
mein Code nicht.“
Wechselst Du den Modus der Datenstruktur, so wird die Darstellung
resettet.
Der Pseudocode bleibt aber erhalten, falls Du einen Fehler gemacht hast und doch noch den alten Code
retten willst. Änderst Du oben nun etwas in der Darstellung, so werden die neuen Befehle unterhalb der
alten im Pseudocode eingefügt. Willst Du dies nicht, so kannst Du unten den Code neu generieren lassen,
um ihn auf den aktuellen Stand der visuellen Darstellung zu bringen.
Besonderer Dank
Ich danke Herrn Prof. Martin Hennecke für die Betreuung dieser Zulassungsarbeit.
Mein besonderer Dank gilt zudem all denjenigen, die mich bei der Entwicklung dieser Anwendung durch
umfangreiche
Tests unterstützt haben. Durch diese Rückmeldungen und Hinweise konnte das Projekt in dieser Form realisiert
werden.
Vielen Dank an C.F., M.G., L.R. und L.S. für Eure Unterstützung!
Impressum
Verantwortlicher für den Inhalt nach § 55 Abs. 2 RStV und § 5 TMG
Johann Fischer
Am Galgenberg 52
97074 Würzburg
Deutschland
Kontakt
eMail: johann.fischer@stud-mail.uni-wuerzburg.de
Einbringung
Julius-Maximilians-Universität Würzburg
Fakultät für Mathematik und Informatik
Institut für Informatik
Erste Staatsprüfung für ein Lehramt an Gymnasien - Herbst 2026
Zulassungsarbeit: Didaktik der Informatik
Didaktische Aufbereitung von Datenstrukturen:
Entwurf und Implementierung eines
anwendungsorientierten Lernwerkzeugs
Betreuer: Prof. Dr. Martin Hennecke
Eingereicht am 8.8.2025
Cookies und Datenschutz
Wir senden keinerlei personenbezogene Daten an einen Server. Lokal auf dem Endgerät des Nutzers werden
folgende
für die Nutzung dieser Seite essentielle Key-Value-Werte gespeichert:
- Einstellungen (z.B. Listentyp und Wiedergabegeschwindigkeit)
- Marker für Dark- / Light-Mode
- Marker, ob der Nutzer diese Seite bereits einmal betreten hat, um beim ersten Besuch diese
Hilfe-Seite zu
zeigen