Integration¶

Dieser Leitfaden beschreibt, wie Sie die TBA3-Rückmeldeelement in Ihre eigene Anwendung einbinden.

Prinzip¶

Die Komponenten sind reine Darstellungskomponenten. Sie holen keine Daten selbst -- Ihre Anwendung ruft die Daten über die TBA3-API ab und übergibt sie an die Komponenten.

Die Komponenten werden als Web Components (Custom Elements) bereitgestellt und können in jede HTML-basierte Anwendung eingebettet werden -- unabhängig vom Framework.

Voraussetzungen¶

Die Host-Seite benötigt:

Bootstrap 5 CSS -- für Layout und Styling
FontAwesome Icons -- für Icons in den Komponenten
Web-Components-Bundle -- die eigentlichen Komponenten

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet" />
<script src="pfad/zu/tba3-web-components/main.js" type="module"></script>

Schnellstart¶

<competence-levels-distribution id="chart"></competence-levels-distribution>

<script>
  fetch('/api/groups/klasse-8a/competence-levels')
    .then((res) => res.json())
    .then((data) => {
      document.getElementById('chart').setAttribute('data', JSON.stringify(data));
    });
</script>

Datenuebergabe¶

Alle Komponenten empfangen Daten als JSON-String-Attribute. Die Transformation von API-Response zum internen Format geschieht automatisch innerhalb der Komponente.

const element = document.querySelector('competence-levels-distribution');
element.setAttribute('data', JSON.stringify(apiResponse));

Verfuegbare Web Components¶

Custom Element	Beschreibung	API-Endpunkt
`<competence-levels-distribution>`	Verteilung auf Kompetenzstufen je Domäne	`/groups/{id}/competence-levels`
`<competence-levels-comparison>`	Vergleich der Kompetenzstufenverteilung	`/groups/{id}/competence-levels`
`<aggregations-bars-list>`	Lösungsquoten nach Teilkompetenz/Aufgabe	`/groups/{id}/aggregations`
`<group-summary>`	Zusammenfassung der Lerngruppe	`/groups/{id}/competence-levels?type=students`
`<group-students-table>`	Schüler-Tabelle mit Kompetenzstufen	`/groups/{id}/competence-levels?type=students`
`<school-groups-subjects-list>`	Klassen-Übersicht je Fach	`/schools/{id}/competence-levels`

Verantwortlichkeiten¶

Ihre Anwendung	Die Komponente
Datenabruf über die API	Darstellung der Daten
Authentifizierung	Interne Datentransformation
Proxy-Konfiguration	Interaktivität (Filter, Sortierung)
Übergabe der Response als JSON	Barrierefreiheit

Hinweise¶

Die Komponenten rendern ohne Shadow DOM direkt im Host-DOM. Bootstrap CSS muss daher global verfügbar sein.
Das Bundle ist ca. 1 MB groß (ca. 250 KB mit GZIP).
Es werden keine Hash-Suffixe in Dateinamen verwendet -- bei Updates muss der Cache manuell invalidiert werden.