# Spec: Zahlensystem-Konverter für IT-Azubis (1. Lehrjahr) > Maschinenlesbare Spezifikation nach Spec-Driven-Development. > Target: KI-Coding-Agent. Jede Anforderung ist eindeutig, testbar und minimal. > Status: **ready for implementation** --- ## 0. Metadaten | Feld | Wert | |---|---| | Projektname | `numconv` | | Typ | Monolithische, statische Web-App (Single Page) | | Zielgruppe | Fachinformatiker-Azubis im 1. Ausbildungsjahr | | Stack | Statisches HTML5 + Vanilla JavaScript (ES2020+) + CSS3 (kein Build, keine Abhängigkeiten, kein Framework) | | Deployment | Beliebiger statischer Datei-Server / GitHub Pages / lokaler Doppelklick auf `index.html` | | Browser-Support | Evergreen-Browser (Chrome, Firefox, Edge, Safari), Desktop-First | | Sprachen (UI) | Deutsch (i18n: post-MVP) | | Accessibility-Ziel | WCAG 2.1 Level AA (Teil des MVP) | | Repository-Struktur | Flach: `index.html`, `styles.css`, `app.js`, optional `README.md` | --- ## 1. Produktvision & Ziel Eine kleine, monolithische Web-Oberfläche, mit der IT-Azubis im 1. Lehrjahr **Dezimalzahlen in Hexadezimal und Binär** umrechnen können. Das Werkzeug kombiniert einen Live-Konverter mit interaktiven Bitgewichts-Spalten und einem Übungsmodus (Quiz), um aktives Lernen zu fördern. Technische Komplexität wird zugunsten didaktischer Klarheit bewusst minimiert. **Nicht-Ziele (ausdrücklich kein Scope):** - Oktal- oder generische Basis-n-Konvertierung - Schritt-für-Schritt-Erklärungen / Rechenweg-Animationen - Bitweise Operationen (AND/OR/XOR/NOT, Schieben) - Negative Zahlen / Zweierkomplement - Wortbreiten > 8 Bit - Mehrseitige App oder clientseitiger Router - Internationalisierung (post-MVP) - Backend, Persistenz, Accounts --- ## 2. Funktionale Anforderungen ### 2.1 Konverter (Kernfunktion) **F2.1.1** Die App zeigt drei separate, editierbare Eingabefelder nebeneinander: - `Dezimal` (Basis 10) - `Hexadezimal` (Basis 16) - `Binär` (Basis 2) **F2.1.2** Alle drei Felder sind live synchronisiert: Ändert der User ein Feld, werden die beiden anderen Felder sofort mit dem äquivalenten Wert aktualisiert (Echtzeit, ohne Submit-Button). **F2.1.3** Gültiger Wertebereich: ganze Zahlen `0` bis einschließlich `255` (8-Bit-Fenster). **F2.1.4** Jedes Feld akzeptiert nur die Zeichen seines Zahlensystems: - Dezimal: `0`–`9` - Hexadezimal: `0`–`9`, `a`–`f`, `A`–`F` - Binär: `0`, `1` **F2.1.5** Eingaben sind nicht case-sensitiv (Hex `aF` äquivalent zu `Af`); die kanonische Anzeige im Hex-Feld verwendet Großbuchstaben (`0`–`9A`–`F`). **F2.1.6** Führende Nullen sind in der Eingabe erlaubt; die kanonische Anzeige entfernt sie (z. B. `007` → `7`), außer der Wert ist `0` (zeigt `0`). **F2.1.7** Bei leerem Eingabefeld zeigen die abhängigen Felder ebenfalls einen leeren Wert. ### 2.2 Interaktive Bitgewichts-Anzeige **F2.2.1** Unterhalb der drei Eingabefelder wird eine interaktive 8-Spalten-Bitgewichts-Reihe angezeigt, Spalten von links (MSB) nach rechts (LSB) mit den Beschriftungen `128 | 64 | 32 | 16 | 8 | 4 | 2 | 1`. **F2.2.2** Jede der 8 Spalten zeigt ihren aktuellen Bitwert (`0` oder `1`) groß und deutlich lesbar. **F2.2.3** Jede Spalte ist **klickbar**: Ein Klick toggelt das entsprechende Bit `0↔1`. Der neue Wert wird sofort berechnet und in alle drei Eingabefelder übernommen. **F2.2.4** Die Bitgewichts-Spalten sind vollständige Tastaturerreichbar: über Tab fokussierbar, über `Enter`/`Leertaste` umschaltbar (WCAG 2.1 AA). **F2.2.5** Die Spalten tragen ein `aria-label` im Format `Bit mit Wertigkeit 128, aktuell 0`. Zustandsänderungen werden `aria-live` an die Assistenztechnologie kommuniziert. ### 2.3 Quiz-Modus **F2.3.1** Über der Konverter-Sektion gibt es einen umschaltbaren Modus-Tab-Bereich mit den zwei Sichten: - `Konverter` (Standardansicht beim Laden) - `Quiz` **F2.3.2** Die Quiz-Sicht enthält: - einen Schwierigkeits-Dropdown mit drei Stufen: - `Leicht` → Zufallswert im Bereich `0`–`15` (4 Bit) - `Mittel` → Zufallswert im Bereich `0`–`127` (7 Bit) - `Schwer` → Zufallswert im Bereich `0`–`255` (8 Bit) - ein Aufgaben-Label im Format: `Rechne: () → ` - ein einzelnes Eingabefeld für die Antwort - einen Button `Prüfen` - einen Button `Nächste Aufgabe` - einen Status-Bereich für Feedback/Ergebnis **F2.3.3** Aufgaben werden per Zufallsgenerator zur Laufzeit erzeugt: 1. Zufälliger Wert aus dem gewählten Wertebereich. 2. Zufällige Konvertierungsrichtung aus den **sechs möglichen** Richtungen: - Dec→Bin, Bin→Dec - Dec→Hex, Hex→Dec - Bin→Hex, Hex→Bin 3. Quell- und Zielsystem müssen verschieden sein. **F2.3.4** Eine Runde besteht aus **genau einer** Aufgabe. **F2.3.5** Nach Klick auf `Prüfen`: - Ist die Antwort korrekt: Status zeigt `Richtig!` in Grün, die korrekte Lösung wird angezeigt. - Ist die Antwort falsch: Status zeigt `Falsch.` in Rot, zusätzlich die korrekte Lösung (`Lösung: `). - Das Eingabefeld wird nach der Auswertung deaktiviert, bis `Nächste Aufgabe` geklickt wird. **F2.3.6** Es gibt **keine Punkte**, keinen Score, keine Zeitmessung, keinen Highscore und keine Speicherung (kein localStorage). Jede Runde ist zustandslos. **F2.3.7** Klick auf `Nächste Aufgabe`: - Leert Status-, Eingabe- und Feedback-Bereich. - Generiert eine neue zufällige Aufgabe gemäß aktuell gewählter Stufe. - Reaktiviert das Eingabefeld und fokussiert es. **F2.3.8** Wechsel des Schwierigkeits-Dropdown generiert sofort eine neue Aufgabe der neuen Stufe. **F2.3.9** Die Quiz-Eingabevalidierung entspricht der Konverter-Validierung (Zeichen je Zielsystem, Groß-/Kleinschreibung nicht relevant). ### 2.4 Referenz (Cheat Sheet) **F2.4.1** Die App enthält eine sichtbare Referenz-Sektion (unter dem Konverter / Bitgewichten, außerhalb des Tab-Bereichs, immer sichtbar): - Eine Hex-Tabelle `0`–`F` mit jeweiliger Dezimal- und Binärdarstellung. - Eine dezimal nach hex/binär Tabelle für die Werte `0`–`15` (kompakte Übersicht). **F2.4.2** Die Referenz ist statisch, nicht interaktiv. --- ## 3. Nicht-funktionale Anforderungen ### 3.1 Layout & UI **NF3.1.1** Layout ist **Single-Page**, alle Sektionen vertikal gestapelt: 1. Header mit Titel und Untertitel 2. Modus-Tab-Bereich (Konverter / Quiz) 3. Tab-Inhalt 4. Referenz-Sektion (immer sichtbar) 5. Footer mit Versions-/Quellenhinweis **NF3.1.2** Desktop-First-Layout. Auf schmalen Viewports (≤ 768px) dürfen Eingabefelder und Bit-Spalten umbrechen; Lesbarkeit bleibt gewährleistet (Responsive „best effort", nicht proaktiv optimiert). **NF3.1.3** Die drei Konverter-Eingabefelder werden nebeneinander (mindestens Desktop) in einer Zeile angeordnet. **NF3.1.4** Bitgewichts-Spalten verwenden feste, gleichbreite Boxen mit klarem Kontrast zwischen Bitwert `0` und `1` (Farbe oder Helligkeit) und erhalten ein sichtbares Fokus-Indikator. ### 3.2 Eingabevalidierung & Fehlerverhalten **NF3.2.1** Bei Eingabe eines unerlaubten Zeichens: Das Zeichen wird **nicht** in das Feld übernommen; das Feld zeigt gleichzeitig einen roten Rand und einen Hilfetext unter dem Feld (z. B. `Nur Ziffern 0–9 erlaubt.`). **NF3.2.2** Bei Eingabe eines gültigen Wertes, der den Wertebereich `0–255` überschreitet (nur relevant, wenn Feldwert numerisch > 255 ergibt): Das Feld zeigt einen roten Rand und den Hilfetext `Wert muss zwischen 0 und 255 liegen.`; die abhängigen Felder werden **nicht** aktualisiert. **NF3.2.3** Bei gültiger Eingabe werden roter Rand und Hilfetext entfernt. **NF3.2.4** Validierung erfolgt während der Eingabe (Live), nicht erst bei Submit/Blur. ### 3.3 Performance **NF3.3.1** App lädt ohne externe Netzwerk-Requests (alle Assets lokal, keine CDN-Abhängigkeiten, keine Web Fonts von Dritten). **NF3.3.2** Interaktionslatenz (Tastatureingabe bis Feld-Sync) < 50 ms auf Standard-Hardware. **NF3.3.2** Initialer DOM-Content-Loaded < 200 ms lokal. ### 3.4 Accessibility (WCAG 2.1 AA, Teil des MVP) **NF3.4.1** Alle interaktiven Steuerelemente sind per Tastatur erreichbar und bedienbar (Tab/Shift+Tab, Enter/Space). **NF3.4.2** Sichtbarer Fokus-Indikator für alle fokussierbaren Elemente. **NF3.4.3** Eingabefelder tragen `