Agentic Coding

JavaScript HTML CSS LLM-Reflexion

Assignment 2: Interaktiver DH-Daten-Explorer

Abgabe: 18. Mai 2026 — Präsentation: 19. Mai 2026 (Einheit 08)

Beschreibung

Entwickeln Sie eine interaktive Web-Applikation, die einen DH-Datensatz mit mindestens 20 Einträgen lädt, übersichtlich darstellt und durch Filter- und Suchfunktionen explorierbar macht. Dieses Assignment baut auf Ihrer Portfolio-Seite aus Assignment 1 auf und erweitert sie um JavaScript-Interaktivität.

Der Fokus liegt auf der Verarbeitung und Darstellung strukturierter Daten aus den Digital Humanities. Sie können einen der bereitgestellten Datensätze verwenden oder eigene Daten mitbringen. Entscheidend ist, dass die Daten per JavaScript geladen und dynamisch in die Seite eingefügt werden.

Aufbauend auf Assignment 1

Dieses Assignment erweitert Ihre Portfolio-Website aus Assignment 1. Sie können den Daten-Explorer als neue Seite in Ihr bestehendes Portfolio integrieren oder ein separates Projekt erstellen, das auf dem gleichen Design-System aufbaut.

Anforderungen

Datenverarbeitung

  • Daten per JavaScript laden — Verwenden Sie fetch() zum Laden einer externen Datei (JSON, CSV oder XML/TEI)
  • Daten parsen — Verarbeiten Sie die Daten mit JSON.parse(), DOMParser (für XML/TEI) oder einer CSV-Parse-Logik
  • Mindestens 20 Datensätze — Der Datensatz muss mindestens 20 Einträge enthalten
  • Fehlerbehandlung — Fangen Sie Fehler beim Laden ab und zeigen Sie eine benutzerfreundliche Fehlermeldung an

Darstellung

  • Tabellarische oder Karten-Darstellung — Stellen Sie die Daten als Tabelle, als Kartenraster (Cards) oder in einer anderen übersichtlichen Form dar
  • Detailansicht — Beim Klick auf einen Eintrag werden weitere Details angezeigt (z. B. als Modal, Seitenbereich oder eigene Ansicht)
  • Ladeindikator — Zeigen Sie während des Ladens einen Hinweis an

Interaktivität

  • Mindestens eine Filterfunktion — z. B. Suchfeld (Freitextsuche), Dropdown-Filter nach Kategorie, Datumswahl oder Checkbox-Filter
  • Mindestens eine Sortierfunktion — z. B. nach Name, Datum, Kategorie (aufsteigend/absteigend)
  • Ergebnisanzeige — Zeigen Sie die Anzahl der gefundenen/gefilterten Ergebnisse an

Technik

  • Vanilla JavaScript — Kein Framework (kein React, Vue, jQuery etc.)
  • Moderner JavaScript-Stil — const/let statt var, Arrow Functions, Template Literals
  • DOM-Manipulation — Elemente werden per JavaScript erstellt und eingefügt
  • Event Handling — Sinnvoller Einsatz von Event Listeners
  • Responsive Design — Die Applikation funktioniert auf Mobilgeräten

Bewertungskriterien

Insgesamt 100 Punkte, verteilt wie folgt:

JavaScript-Qualität und Code-Struktur 25 Punkte
Datenverarbeitung (Laden, Parsen, Fehlerbehandlung) 20 Punkte
Interaktivität (Filter, Suche, Sortierung) 20 Punkte
UI/UX-Design 10 Punkte
LLM-Reflexion (800 - 1200 Wörter) 15 Punkte
Präsentation (7 Minuten) 10 Punkte
Gesamt 100 Punkte

Detaillierte Kriterien

JavaScript-Qualität (25 Punkte)

  • Sauberer, lesbarer Code mit sinnvollen Variablen- und Funktionsnamen
  • Moderner JavaScript-Stil (const/let, Arrow Functions, Template Literals)
  • Sinnvolle Aufteilung in Funktionen (keine "Mega-Funktion")
  • Keine Konsolenfehler im Browser
  • Kommentare an sinnvollen Stellen

Datenverarbeitung (20 Punkte)

  • Daten werden per fetch() geladen (nicht hartcodiert)
  • Korrektes Parsen des Datenformats
  • Fehlerbehandlung mit try/catch und Benutzer-Feedback
  • Ladeindikator während des Datenabrufs

Interaktivität (20 Punkte)

  • Mindestens eine funktionale Filterfunktion
  • Mindestens eine funktionale Sortierfunktion
  • Detailansicht für einzelne Datensätze
  • Ergebnisanzeige (z. B. "12 von 45 Einträgen")

UI/UX-Design (10 Punkte)

  • Übersichtliche, intuitive Benutzeroberfläche
  • Konsistentes Design (aufbauend auf Assignment 1)
  • Responsive Darstellung auf Mobilgeräten

LLM-Reflexion (15 Punkte)

  • 800 - 1200 Wörter Umfang
  • Mindestens 3 konkrete Prompt-Dialoge dokumentiert (inklusive Iterationen)
  • Analyse des Debugging-Prozesses mit LLM-Unterstützung
  • Vergleich der Prompt-Qualität: Anfang vs. jetzt

Präsentation (10 Punkte)

  • 7 Minuten Dauer
  • Live-Demo der Applikation
  • Datenquelle und technische Entscheidungen werden erklärt
  • Ein Aspekt der LLM-gestützten Entwicklung wird reflektiert

LLM-Reflexion: Erweiterte Anforderungen

Die Reflexion wird in Assignment 2 umfangreicher und tiefgehender. Sie dokumentieren nicht nur den Einsatz, sondern analysieren Ihren Lernprozess und die Qualität Ihrer Prompts.

Anforderungen an die Reflexion

  • 3 konkrete Prompt-Dialoge dokumentieren: Wählen Sie drei aussagekräftige Prompt-Interaktionen aus. Dokumentieren Sie jeweils den ursprünglichen Prompt, die LLM-Antwort, Ihre Iteration(en) und das Endergebnis.
  • Wo hat das LLM geholfen, wo Fehler gemacht? Analysieren Sie spezifische Situationen, in denen das LLM besonders hilfreich war, und Fälle, in denen es fehlerhaften oder unpassenden Code generiert hat.
  • Debugging-Prozess beschreiben: Beschreiben Sie mindestens einen Fall, in dem Sie einen Bug mit Hilfe eines LLMs gefunden und behoben haben. Wie haben Sie den Fehler beschrieben? War die Lösung korrekt?
  • Prompt-Qualität vergleichen: Vergleichen Sie Ihre ersten Prompts aus Assignment 1 mit Ihren aktuellen Prompts. Was hat sich verändert? Sind Ihre Prompts spezifischer, kontextreicher, besser strukturiert?

Zur ausführlichen Reflexionsvorlage mit Beispielen und Bewertungskriterien

Datenquellen-Vorschläge

Sie können einen der folgenden bereitgestellten Datensätze verwenden oder eigene Daten mitbringen. Wenn Sie eigene Daten verwenden, besprechen Sie die Eignung vorab mit den Lehrenden.

TEI-XML Korrespondenz-Metadaten TEI-kodierte Briefmetadaten mit Absender, Empfänger, Datum und Ort. Laden per fetch() und Parsen mit DOMParser. Geeignet für eine Korrespondenz-Suchmaschine. XML
JSON Sammlungsobjekte JSON-Datei mit Objekten aus einer kulturellen Sammlung: Titel, Beschreibung, Datierung, Kategorie, Bild-URL. Ideal für eine Karten-Darstellung (Cards) mit Filter nach Kategorie und Zeitraum. JSON
CSV Historische Daten CSV-Datei mit tabellarischen historischen Daten (z. B. Orte, Personen, Ereignisse). Parsen per JavaScript und Darstellung als sortierbare Tabelle. Geeignet für Studien zu historischen Netzwerken. CSV
API Europeana Search API Live-Abfrage der Europeana-Datenbank. Kostenloser API-Key erforderlich. Ermöglicht die Suche nach digitalen Objekten aus europäischen Sammlungen. Fortgeschrittener: Umgang mit API-Keys und asynchronem Code. API JSON

Tipp: Datensatz früh wählen

Wählen Sie Ihren Datensatz möglichst früh und machen Sie sich mit dessen Struktur vertraut. Je besser Sie die Daten kennen, desto gezielter können Sie das LLM bei der JavaScript-Entwicklung einsetzen. Geben Sie dem LLM immer einen Ausschnitt Ihrer Datenstruktur als Kontext mit.

Tipp: Bereitgestellte Daten

Im Kurs-Repository finden Sie vorbereitete Datensätze im Ordner data/. Diese sind in den Formaten TEI-XML (data/tei/), JSON (data/json/), CSV (data/csv/) und GeoJSON (data/geojson/) verfügbar.

Abgabe

  1. Aktualisieren Sie Ihr GitHub-Repository (oder erstellen Sie ein neues).
  2. Stellen Sie sicher, dass die Applikation auf GitHub Pages funktioniert (alle Datenpfade relativ!).
  3. Reichen Sie im Moodle-Kurs folgende Informationen ein:
    • Link zum GitHub-Repository
    • Link zur GitHub Pages-Website
    • Die LLM-Reflexion (als reflexion-2.md oder reflexion-2.html im Repository)
  4. Bereiten Sie eine 7-minütige Präsentation für Einheit 08 (19. Mai 2026) vor.