FlowTutor: Programming Using Flowcharts

Abstract

In der Programmierlehre setzt der traditionelle Ansatz oft auf syntaxlastige Vorlesungen und Programmierübungen, welche speziell für Personen, welche zum ersten Mal mit einer Programmiersprache konfrontiert werden, besonders herausfordernd sein können. Um den Einstieg in das Programmieren zu erleichtern, werden in dieser Arbeit das Design, die Entwicklung und die Evaluierung einer Anwendung vorgestellt, die darauf abzielt, das Erlernen von Programmierkonzepten durch die Verwendung von interaktiven Flussdiagrammen zu verbessern.Die Anwendung mit dem Namen “FlowTutor” ermöglicht es Studierenden, Flussdiagramme zu erstellen, welche die Programmierlogik darstellen. Durch das Verbinden von Knoten, die Programmierkonstrukte wie Schleifen, Konditionale und Variablen darstellen, können die Auszubildenden intuitiv und unterstützt durch grafische Darstellung ihre Algorithmen entwerfen und den Ablauf der Ausführung effizienter nachvollziehen und auch verstehen.Die Definition benutzerdefinierter Knotentypen ermöglicht es, Quellcode für beliebige Programmiersprachen und Konstrukte zu erzeugen.Programme können in FlowTutor visuell ausgeführt und debuggt werden, wobei die Möglichkeit besteht, schrittweise durch das Programm zu gehen und Variablenzuweisungen zu visualisieren.Abschließend wird in dieser Arbeit die Benutzerfreundlichkeit und die Arbeitsbelastung der Anwendung mithilfe der System Usability Scale (SUS) und des NASA Task Load Index (TLX) mit einem mixed-methods Ansatz bewertet. Die SUS-Punktzahl und die TLX Ergebnisse in der Evaluierung legen eine gute Nutzerfreundlichkeit für Personen mit wenig oder gar keiner Programmiererfahrung nahe. Zusätzlich haben wir qualitatives Feedback gesammelt, um die weitere Entwicklung von FlowTutor in der Zukunft zu unterstützen.

In the realm of programming education, the traditional approach often involves syntax-heavy lectures and code-writing exercises, which can be very challenging, particularly for beginners who have never dealt with programming languages before. To make the first programming steps more efficient for newcomers, in this thesis the design, development, and evaluation of an application aimed at enhancing the learning experience of programming concepts through the use of interactive flowcharts are presented.The application, named “FlowTutor” allows students to visually construct flowcharts which represent programming logic. By connecting nodes representing programming constructs such as loops, conditionals, and variables, students can intuitively design algorithms and understand the flow of execution.A templating system allows for defining custom node types, with which source code can be produced for arbitrary programming languages and constructs.Programs can be executed and debugged visually within FlowTutor with the ability to step through the program and visualize variable assignments.Finally, the thesis employs a mixed-methods approach to evaluate the usability and workload of the application, using the System Usability Scale (SUS) and the NASA Task Load Index (TLX), respectively. The SUS score and TLX results in the evaluation suggest that the tool is usable for those with little to no previous programming experience. In addition, we gathered qualitative feedback to aid the further development of FlowTutor in the future.