AP01 Lernplattform
KI-gestützte IHK-Prüfungssimulation
Eine detaillierte Dokumentation über die Konzeption und Entwicklung einer KI-gestützten Fullstack-Applikation zur Prüfungsvorbereitung. Der gesamte Lernprozess wurde digitalisiert und in 19 spezialisierte Module unterteilt.
Vom Papier-Archiv zur intelligenten App
Die Plattform entstand aus der Notwendigkeit heraus, eine effiziente und zeitgemäße Lernumgebung für die IHK-Zwischenprüfung (AP01) zum Fachinformatiker zu schaffen. Da Übungsmaterialien oft nur analog oder in statischen Formaten vorliegen, wurde der gesamte Lernprozess digitalisiert.
Hard Facts
- 10 Realistische Prüfungen:
Simulation unter Original-Bedingungen (90 Min. Timer). - IHK-Konform:
Integrierter, einfacher Taschenrechner für kaufmännische Aufgaben. - 270 Karteikarten:
Gezieltes Üben des kompletten Stoffes der AP01. - AI-Driven:
Das gesamte Projekt wurde unter massiver Nutzung von KI-Pair-Programming entwickelt.
Benutzerführung & Core UI
Das Interface wurde nach dem "Focus-First"-Prinzip gestaltet. Die Startseite dient als ruhiger Pol, um den Nutzer auf die bevorstehende Prüfungssimulation vorzubereiten.
Ein visuelles Tracking-System, das Lernerfolge über verschiedene Prüfungsperioden hinweg vergleichbar macht.
Die Anwendung nutzt ein modernes Dark-Theme im „Cyber“-Stil mit einem dezenten Gitter-Hintergrund, das speziell auf die technische Zielgruppe der Fachinformatiker ausgerichtet ist.
Diese Ansicht dient der langfristigen Erfolgskontrolle und bietet dem Nutzer eine grafische Aufbereitung seiner bisherigen Leistungen innerhalb der Plattform.
Diese Ansicht dient als zentraler Hub für die Prüfungssimulation.
Sie ermöglicht es dem Nutzer, gezielt spezifische Themengebiete oder reale
Prüfungsszenarien für die Vorbereitung auszuwählen.
Themenzentrierte Prüfungs-Cards: Jede Prüfung wird als eigenständige
Karte mit Titel (z. B. „Frühjahr 2025“ oder „Prüfung 01“) und einer Auflistung der
enthaltenen Schwerpunkte wie Netzwerktechnik, Datenbanken oder Hardware dargestellt.
Status-Icons: Kleine Symbole in der oberen rechten Ecke jeder Card geben Hinweise auf
den
Inhaltstyp oder den bereits erreichten Status der jeweiligen Prüfung.
<div className="icon-container">{icon}</div>
<h2>{title}</h2>
<p>{desc}</p>
</div>
);
Dynamisches Kachel-System (React)
Dieser
Ausschnitt zeigt, wie die Landing Page modular aufgebaut ist, um verschiedene Lernmodule
(Simulation, Karteikarten etc.) konsistent darzustellen.
const savedResults = localStorage.getItem('exam_results');
if (savedResults) {
setPerformanceData(JSON.parse(savedResults));
}
}, []);
State-Persistence des Lernfortschritts
Ein
wichtiges Feature deiner Landing Page ist das Tracking des Fortschritts. Dieser
Ausschnitt zeigt, wie du Daten persistierst.
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
padding: 20px;
}
Responsives Grid-Layout (Tailwind/CSS)
Für
die professionelle Darstellung der Landing Page auf allen Endgeräten nutzt du modernes
CSS/Tailwind.
Farbcodiertes Leitsystem: Die Kacheln nutzen unterschiedliche Farbakzente (Blau, Grün,
Orange, Magenta), um die verschiedenen Simulationen visuell voneinander abzugrenzen und
die
Navigation zu erleichtern.
Direkter Einstieg: Jedes Modul verfügt über einen prominenten „Starten“-Button, der den
Nutzer direkt in die Bearbeitungsoberfläche führt, in der später die technische
Validierung
und KI-Korrektur zum Einsatz kommen.
Das neuronale Herzstück
Die Integration der Google Gemini API erfordert mehr als nur einen API-Aufruf. Um konsistente, prüfungsrelevante Bewertungen zu erhalten, wurde ein hybrider Ansatz aus System-Instructions und JSON-Schema-Validation gewählt.
Lösung: Ein striktes Prompt-Korsett, das die KI zwingt, die Antwort gegen ein offizielles Erwartungshorizont-Objekt zu prüfen.
const model = genAI.getGenerativeModel({
model: "gemini-1.5-pro",
generationConfig: { responseMimeType: "application/json" }
});
Dieser Code-Abschnitt stellt die Verbindung zur Google Gemini API her und konfiguriert das Herzstück der Anwendung. Hier wird festgelegt, welche "Intelligenz" für die spätere Korrektur der Prüfungsaufgaben genutzt wird.
Nutze folgendes JSON-Format:
{ "points": number, "feedback": "string", "correct": boolean }
Kriterien: Fachliche Korrektheit nach IHK-Standard.`;
Dieser Abschnitt definiert den System-Prompt, der als Verhaltensrichtlinie für die KI dient. Er stellt sicher, dass die KI nicht einfach nur Text generiert, sondern als präziser "KI-Prüfer" agiert, der seine Ergebnisse in einem maschinenlesbaren Format liefert.
{ category: "HARM_CATEGORY_HARASSMENT", threshold: "BLOCK_MEDIUM_AND_ABOVE" }
];
Dieser Code-Abschnitt definiert die Sicherheitsbarrieren für die KI-Interaktion. Da die Anwendung Nutzereingaben verarbeitet und KI-generiertes Feedback ausgibt, stellt diese Konfiguration sicher, dass der Korrekturprozess professionell und sicher bleibt.
Aktiv-Badge: Das grüne Label "Aktiv: gemini-3-pro-preview" markiert das aktuell geladene Modell. Dies ist die Instanz, die in deinem Code das Objekt model definiert und für alle kommenden evaluateWithAI-Aufrufe genutzt wird.
API-Key Validierung: Das Eingabefeld zeigt einen maskierten API-Key, der durch das grüne Häkchen-Symbol als "gültig" und "aktiv" markiert ist.
Diese Ansicht zeigt das erweiterte Konfigurationsmenü für die KI-Schnittstelle. Es bietet dem Nutzer eine granulare Kontrolle über die verwendete KI-Engine und dient als visuelles Interface für die Modell-Initialisierung in deinem Code.
Interaktive Aufgaben-Renderer
Um reale Prüfungssituationen abzubilden, wurden spezialisierte React-Module für verschiedene Aufgabentypen entwickelt: Von der Entscheidungsmatrix bis zur Port-Konfiguration.
Technische Simulationen: Die Oberfläche integriert ein simuliertes Verbindungsfenster („New Connection“), in das Nutzer IP-Adressen und Portnummern direkt eingeben sowie Verbindungstypen (SSH, Serial, Telnet) auswählen müssen.
Grafischer Editor: Das Herzstück bildet ein interaktiver Netzplan mit
standardisierten Knotenpunkten. Nutzer können hier Werte für FAZ, FEZ, SAZ, SEZ sowie den
Gesamt- und freien Puffer (GP/FP) direkt in die vorgesehenen Felder eintragen.
Hilfestellung: Eine integrierte Legende erklärt den Aufbau der Netzknoten, um eine korrekte
Dateneingabe gemäß den fachlichen Standards zu unterstützen.
Dynamische Entscheidungsmatrix mit Live-Berechnung.
Zentrale Arbeitsfläche: Die Aufgabenstellungen (z. B. komplexe Entscheidungstabellen zu
Multifunktionsgeräten) werden in einem klaren, dokumentenähnlichen Layout im Zentrum
präsentiert.
Marketing-Szenarien mit integriertem Kalkulator.
Diese Ansicht verdeutlicht, wie die Plattform komplexe theoretische Aufgaben aus dem Bereich
Marketing und Persona-Analyse mit praktischen digitalen Werkzeugen kombiniert.
Wissensretention & Karteikarten
Das Lernmodul nutzt eine Filterlogik, um bereits beherrschte Begriffe aus dem Cycle zu entfernen. Dies optimiert die Lernzeit durch Fokus auf Schwachstellen.
- Status-Tracking: Gelernt vs. Offen
- Randomisierte Misch-Funktion
- Zweiseitige Karten-Animation (CSS 3D-Transform)
// Status kann 'offen', 'gelernt' oder 'markiert' sein
const updatedCards = cards.map(card =>
card.id === cardId ? { ...card, status: status } : card
);
setCards(updatedCards);
};
if (filter === "Gelernt") return card.status === "gelernt";
if (filter === "Offen") return card.status !== "gelernt";
return true; // "Alle Karten"
});
Karteikarten-Status & Filterung
Diese
Funktionen bilden das Rückgrat der Wissensretention. Durch das Markieren von Karten als
"Gelernt" wird der Lernfortschritt messbar. Die Filter-Logik ermöglicht es dem Nutzer,
sich gezielt auf Wissenslücken zu konzentrieren, indem bereits beherrschte Inhalte
ausgeblendet werden.
const shuffled = [...cards].sort(() => Math.random() - 0.5);
setCards(shuffled);
setCurrentCardIndex(0);
};
Shuffle-Funktion (Randomisierung)
Die
Shuffle-Funktion unterstützt das Langzeitgedächtnis, indem sie die chronologische
Reihenfolge der Fragen aufbricht. Dies zwingt das Gehirn, Informationen aktiv abzurufen,
statt sich auf die Abfolge der Karten zu verlassen.
Aktive Lernansicht (Vorderseite)
Diese Ansicht zeigt die Vorderseite einer digitalen Karteikarte im Lernmodus.
Frage-Fokus: Im Zentrum steht die prägnante Fragestellung (z. B. "Nenne
Merkmale eines Projekts").
Klassifizierung: Am oberen Rand wird das zugehörige Lernfeld (z. B.
"Planen, Vorbereiten und Durchführen von Arbeitsaufgaben") angezeigt, um den fachlichen
Kontext zu wahren.
Navigation: Über intuitive Pfeil-Buttons am unteren Rand kann der Nutzer
zwischen den insgesamt 228 Karten des Sets wechseln.
Wissensüberprüfung (Rückseite)
Nach einem Klick auf die Karte wird die Rückseite mit der detaillierten Lösung
eingeblendet.
Strukturierte Antwort: Die Lösung wird in Form einer übersichtlichen
Bullet-Point-Liste präsentiert, die alle prüfungsrelevanten Kriterien (Einmaligkeit, klares
Ziel, zeitliche Befristung etc.) enthält.
Layout: Das helle Design der Karteninnenseite kontrastiert zum dunklen
Gitter-Hintergrund der App, was die Lesbarkeit der Lerninhalte maximiert.
Fortschritts- & Filterverwaltung
Dieser Screenshot zeigt die Interaktionselemente für das Verwalten des Lernstandes.
Status-Badge: Eine Karte kann über einen Button als "Gelernt" markiert
werden, woraufhin ein grünes Badge erscheint, das den Erfolg visuell bestätigt.
Intelligente Filterung: Das Dropdown-Menü oben rechts ermöglicht das
Umschalten zwischen "Alle Karten", "Offen (Nicht gelernt)" und "Gelernt", um den Lernprozess
effizient zu steuern.
Misch-Option: Die "Mischen"-Funktion in der Kopfzeile erlaubt die
Randomisierung des Kartendecks für eine abwechslungsreiche Wissensabfrage.
Hybrid-Grading System
Die Plattform bietet zwei Validierungswege: Ein KI-gestütztes Semantic Grading für Freitexte und ein klassisches Key-Value Matching für technische Parameter. Dies garantiert höchste Genauigkeit bei minimaler Fehlerquote.
const prompt = `Vergleiche Antwort: "${userInput}"
mit Musterlösung: "${solution}".
Vergib 0-10 Punkte basierend auf der Fachterminologie.`;
const response = await model.generateContent(prompt);
return JSON.parse(response.text);
}
Diese asynchrone Funktion führt einen semantischen Abgleich zwischen einer Benutzereingabe und einer hinterlegten Musterlösung durch. Anstatt nur auf exakte Übereinstimmungen zu prüfen, nutzt sie ein Large Language Model (LLM), um die inhaltliche Qualität und die Verwendung von Fachterminologie zu bewerten.
// Exakter Abgleich technischer Werte (z.B. Portnummern)
return inputs.map(input => ({
id: input.id,
isCorrect: schema[input.id].expected === input.value
}));
}
Diese Funktion dient der präzisen Überprüfung von technischen Parametern durch einen direkten Abgleich mit einem vordefinierten Schema. Im Gegensatz zur semantischen KI-Analyse arbeitet dieser Ansatz nach dem Booleschen Prinzip (Richtig oder Falsch).
if (percentage >= 92) return "Sehr Gut";
if (percentage >= 81) return "Gut";
return "Ausreichend / Nicht Bestanden";
}
Diese Hilfsfunktion übersetzt erreichte Punktzahlen oder Prozentsätze in die offiziellen IHK-Notenstufen. Sie dient als finale Verarbeitungsinstanz, um aus den vorangegangenen Validierungen (KI oder klassisch) ein offiziell lesbares Ergebnis zu generieren.
Dieses UI-Element fungiert als Entscheidungsinstanz am Ende einer Prüfung. Es ermöglicht dem Nutzer, zwischen der automatisierten Analyse und einer manuellen Überprüfung zu wählen.
Diese Ansicht präsentiert die finale Auswertung der Prüfung und führt alle Datenströme (KI-Bewertung und technische Validierung) in einer übersichtlichen Ergebniskarte zusammen.
Diese Ansicht visualisiert den direkten Abgleich zwischen Nutzerleistung und Musterlösung für eine komplexe technische Aufgabe (in diesem Fall eine Entscheidungsmatrix). Sie ist das Bindeglied zwischen der technischen Validierung und dem Feedback für den Lernenden.