Programmieren lernen & üben
AI Coding Mentor
Eine Lern-Webanwendung für alle, die programmieren lernen: Code in einem echten Editor schreiben, ihn von einem simulierten Mentor erklären lassen, Hinweise holen und mit 18 Übungen in Python, JavaScript und Java üben. Der Mentor arbeitet mit festen Regeln, nicht mit einem KI-Modell.
Auf einen Blick
- 3Sprachen im Editor: Python, JavaScript und Java
- 18Übungen, filterbar nach Sprache, Schwierigkeit und Thema
- 16typische Anfängerfehler, nach denen «Debuggen» sucht
- 335automatisierte Tests mit Vitest und React Testing Library
Überblick
AI Coding Mentor ist eine Webanwendung zum Programmierenlernen mit zwei Bereichen: einem Arbeitsbereich mit Code-Editor und Mentor sowie einer Übungsbibliothek mit 18 Aufgaben in Python, JavaScript und Java. Sie ist als Prototyp in Version 2.0 veröffentlicht und läuft vollständig im Browser. Sie ersetzt einen früheren Python-Prototyp und wurde mit Unterstützung von Claude Code entwickelt.
Funktionen
Editor
- Monaco, der Editor von Visual Studio Code, mit Syntaxhervorhebung für Python, JavaScript und Java
- Entwürfe pro Sprache und pro Übung, lokal im Browser gespeichert
- Responsives Layout mit einklappbarer Seitenleiste
Erklären, Debuggen, Hinweise
- Erklären: beschreibt bei erkannten Mustern, was ein Programm tut, und erläutert die verwendeten Konzepte
- Debuggen: sucht nach 16 typischen Anfängerfehlern und begründet jeden Fund
- Hinweise in drei Stufen, vom kleinen Anstoss bis zum konkreten Vorschlag
Übungen
- Bibliothek mit 18 Aufgaben, filterbar nach Sprache, Schwierigkeit und Thema
- Übungsansicht mit Aufgabe, Startcode, Anforderungsprüfung und eigenen Hinweisen
- Rückmeldung in drei Kategorien: erkannt, nicht erkannt, nicht überprüfbar
Ehrlich statt magisch
- Feste, nachvollziehbare Regeln statt eines KI-Modells: gleicher Code, gleiche Antwort
- Seite «How the demo works», die offenlegt, was der Mentor erkennt und was nicht
Screenshots
Problem
Wer programmieren lernt, bekommt von KI-Assistenten oft sofort fertigen Code. Die Aufgabe ist dann gelöst, verstanden hat man kaum mehr als vorher. Zum Lernen hilft es mehr, den eigenen Code erklärt zu bekommen, auf typische Fehler hingewiesen zu werden und Hinweise zu erhalten, die das Denken nicht abnehmen.
Lösung
Der Mentor bietet drei Aktionen: Erklären, Debuggen und Hinweis geben. Er ist eine Simulation: Feste, nachvollziehbare Regeln suchen im Code nach bekannten Mustern und wählen dazu vorbereitete Texte aus. Für denselben Code kommt immer dieselbe Antwort. Wenn nichts passt, sagt der Mentor das, statt etwas zu erfinden. In den Übungen vergleicht eine Anforderungsprüfung den Code mit dem, was die Aufgabe verlangt, zum Beispiel eine Funktion mit bestimmtem Namen, eine Schleife oder eine Rückgabe. Jede Anforderung wird als erkannt, nicht erkannt oder nicht überprüfbar gemeldet und begründet. Hinweise gibt es in drei Stufen, damit die Lösung nicht vorweggenommen wird.
Technische Umsetzung
Die Oberfläche ist mit React und TypeScript gebaut, Vite erstellt daraus statische Dateien. Als Editor dient Monaco, der erst nachgeladen wird, wenn die Seite sichtbar ist. Die Logik ist von der Oberfläche getrennt: Mentor und Übungssystem liegen in eigenen Modulen ohne React. Die Oberfläche spricht den Mentor nur über eine kleine Schnittstelle an, sodass er sich später durch einen echten Dienst ersetzen liesse. Bevor Regeln angewendet werden, blendet ein Vorverarbeitungsschritt Kommentare und Zeichenketten aus, damit Text darin keine Regel auslöst. Die Übungen sind reine Daten; jede Anforderung verweist auf eine typisierte Prüfung. Entwürfe werden im localStorage gespeichert und beim Laden validiert. 335 automatisierte Tests mit Vitest und React Testing Library decken Mentor, Übungsprüfung, Speicherung und Oberfläche ab.
Herausforderungen
Die grösste Schwierigkeit war die Ehrlichkeit der Rückmeldungen. Eine Prüfung, die nur Text vergleicht, darf eine Lösung nie als richtig bezeichnen. Deshalb gibt es die Kategorie «nicht überprüfbar», und die Zusammenfassung spricht von erkannten Mustern, nicht von bestandenen Tests. Ebenso wichtig war, Fehlalarme zu vermeiden: Auskommentierter Code oder Code in einer Zeichenkette darf nicht zählen, gängige alternative Schreibweisen dagegen schon. Beides ist mit Tests abgesichert.
Grenzen
Der Mentor ist kein KI-Modell und versteht Code nicht. Er erkennt nur eine begrenzte Zahl von Mustern, kann echte Fehler übersehen und gelegentlich korrekten Code beanstanden. Code wird nirgends ausgeführt. Die Anforderungsprüfung kann darum nicht feststellen, ob ein Programm funktioniert: Eine Lösung kann alle erwarteten Muster enthalten und trotzdem falsch sein, und eine ungewöhnlich geschriebene, funktionierende Lösung kann als «nicht erkannt» gelten. Es gibt keinen Lernfortschritt und keine Konten, und die Oberfläche ist nur auf Englisch verfügbar.
Erkenntnisse
Das Projekt zeigt, wie viel sich mit klar getrennter Logik und Oberfläche gewinnen lässt: Regeln und Übungen lassen sich einzeln testen und erweitern, ohne die Darstellung anzufassen. Es zeigt auch, wo statische Prüfungen enden. Ob Code wirklich funktioniert, lässt sich nur klären, indem man ihn ausführt. Ein Lernwerkzeug sollte diese Grenze offen benennen, statt Sicherheit vorzutäuschen.