B1 Bachelor Der kleine Weg des Programmierens JavaScript lernen kinderfreundlich gestaltet.

Team

  • Anas Yunis Altaee
  • Anna Gröpler
  • Duncan Wittner
  • Jonathan Zieger
  • Kevin Le
  • Manh Hoáng
  • Ole Marwede

Supervision

Bruno Schilling
Source Code Link Icon Source_Code Website Link Icon Website

Mit interaktiven Elementen ermöglichen wir den Kindern des CoderDojo Schöneweide, spielerisch JavaScript von Grund auf zu lernen.


Unser Ziel

Eine Webseite für das CoderDojo Schöneweide zu erstellen, die es Kindern unterschiedlichen Alters ermöglicht, JavaScript auf spielerische und unterhaltsame Weise zu erlernen. Die Seite soll verschiedene Schwierigkeitsstufen bieten, um den unterschiedlichen Vorkenntnissen der Kinder gerecht zu werden. Der Hauptfokus liegt darauf, ihnen die Grundlagen des Programmierens auf einer levelbasierten Plattform beizubringen. Zusätzlich wird eine integrierte KI bereitgestellt, damit die Kinder selbstständiger lernen können und nicht bei jedem Schritt auf Hilfe angewiesen sind. Die Webseite soll außerdem leicht erweiterbar sein, um eine nahtlose Fortführung durch das CoderDojo zu ermöglichen.

Prozess

Von Anfang an hatten wir einen groben Plan: eine Webseite zu erstellen, auf der Kinder im CoderDojo mithilfe einer KI programmieren lernen können.

Durch unsere wöchentlichen Präsenz- und Online-Meetings entwickelten wir nach und nach das Grundgerüst für unsere Webseite. Wir begannen mit Python, wechselten jedoch zu JavaScript, da es sich besser für die Implementierung eignete und sowohl Python als auch JavaScript zur Option standen.

In den ersten Sitzungen brainstormten wir über unsere Vorstellungen und erstellten einen ersten Entwurf der Benutzeroberfläche. Theoretisch entwickelten wir Ideen für die Implementierung der Levels. Schritt für Schritt nahm die Webseite ihre heutige Form an, indem wir mehr interaktive Elemente einfügten, die KI-Komponente optimierten und die Benutzeroberfläche kindgerecht und visuell ansprechend gestalteten.

Die KI dient als Hilfestellung bei den Aufgaben und läuft auf einem lokalen Server, was die Leistung leider einschränkt. Grund dafür sind geringere Kosten für das gemeinnützige CoderDojo.

Nach einigen Wochen bekamen alle Teammitglieder individuelle Aufgaben, die sie bis zum Projektende begleiteten. Das gemeinsame Repository auf GitHub erwies sich als große Hilfe für die Zusammenarbeit. Schließlich hatten wir die Gelegenheit, unsere Webseite direkt mit den Kindern im CoderDojo zu testen. Das direkt gewonnene Feedback half uns immens bei der Weiterentwicklung.

Unser Ergebnis

Unsere Webseite bietet eine bunt gestaltete, kinderfreundliche Benutzeroberfläche. Wir haben zehn Level, bestehend aus mehreren Unterlevel. Am Anfang kann zwischen zwei Modi gewählt werden: 1. die Level in der vorgegebenen Reihenfolge bearbeiten, und 2. den freien Modus, in dem alle Level von Beginn an frei auswählbar sind.

Unsere Startseite

Die Aufgaben werden übersichtlich auf der linken Seite präsentiert, während der Code und die Ausgabe auf der rechten Seite zu sehen sind.

Programmierumgebung

Das Feedback von unserem Besuch im CoderDojo haben wir berücksichtigt. Die Aufgabenstellungen sind für die Kinder leicht verständlich und die Webseite ist intuitiv bedienbar. Das integrierte Progressionssystem ermöglicht es den Kindern, ihren Lernfortschritt nachzuvollziehen, während die KI als Maskottchen sowohl bei der Bestätigung richtiger Lösungen als auch beim Lösen von Problemen Unterstützung bietet.

Karte

Team