← Back to Portal / Zurück zum Portal

## Teil 1: Benutzerhandbuch

Dieser Teil richtet sich an Lernende und erklärt die tägliche Nutzung des Portals von der Auswahl einer Prüfung bis zur Auswertung abgeschlossener Quizdurchläufe.

1. Willkommen / Überblick

Das Azure Certification Learning Portal ist eine lokale, statische Single-Page-Application (SPA) zum Lernen für 24 Microsoft-Azure-Zertifizierungen. Es kombiniert Lernmodus, Prüfungsmodus, Fortschrittsverfolgung, Sprachumschaltung und Theme-Wechsel in einer einzigen Oberfläche. Szenarien verwenden fiktive Demounternehmen (Contoso, Fabrikam, Tailwind Traders u. a.) für praxisnahe Fragen.

24 abgedeckte Prüfungen
3 Level: Grundlagen, Associate, Experte
700 / 1000 angezeigte Bestehensgrenze
Offline-fähig keine Installation, kein Server nötig

Prüfung | Titel | Level | Dauer | offizieller Rahmen
--- | --- | --- | --- | ---
🟢 Grundlagen
AZ-900 | Microsoft Azure-Grundlagen | Grundlagen | 85 Min. | 40–60 Fragen
AI-900 | Microsoft Azure KI-Grundlagen | Grundlagen | 85 Min. | 40–60 Fragen
AI-901 | Azure AI Fundamentals (2026) | Grundlagen | 85 Min. | 40–60 Fragen
SC-900 | Microsoft Sicherheit, Compliance und Identität – Grundlagen | Grundlagen | 65 Min. | 40–60 Fragen
DP-900 | Microsoft Azure-Datengrundlagen | Grundlagen | 65 Min. | 40–60 Fragen
🔵 Kern-Rollen
AZ-104 | Microsoft Azure-Administrator | Associate | 120 Min. | 40–60 Fragen
AZ-204 | Entwicklung von Lösungen für Microsoft Azure | Associate | 120 Min. | 40–60 Fragen
AZ-700 | Entwurf und Implementierung von Microsoft Azure-Netzwerklösungen | Associate | 120 Min. | 40–60 Fragen
⭐ Experte & Architekt
AZ-305 | Entwurf von Microsoft Azure-Infrastrukturlösungen | Experte | 120 Min. | 120+ Fragen
🔐 Security & Identity
SC-100 | Microsoft Cybersecurity-Architekt | Experte | 120 Min. | 40–60 Fragen
SC-200 | Microsoft Security Operations Analyst | Associate | 120 Min. | 40–60 Fragen
SC-300 | Microsoft Identitäts- und Zugriffsadministrator | Associate | 120 Min. | 40–60 Fragen
SC-400 | Microsoft Informationsschutz-Administrator | Associate | 120 Min. | 100+ Fragen
AZ-500 | Microsoft Azure Security Technologies | Associate | 120 Min. | 40–60 Fragen
🔄 DevOps
AZ-400 | Entwerfen und Implementieren von Microsoft DevOps-Lösungen | Experte | 120 Min. | 40–60 Fragen
🤖 AI & Machine Learning
AI-102 | Entwerfen und Implementieren einer Microsoft Azure KI-Lösung | Associate | 120 Min. | 40–60 Fragen
AI-103 | Azure AI Apps Engineer (2026) | Associate | 120 Min. | 40–60 Fragen
AI-200 | AI Cloud Developer (2026) | Associate | 120 Min. | 40–60 Fragen
📊 Data & Analytics
DP-100 | Entwerfen und Implementieren einer Data-Science-Lösung | Associate | 120 Min. | 40–60 Fragen
DP-203 | Data Engineering auf Microsoft Azure | Associate | 120 Min. | 40–60 Fragen
DP-300 | Azure-Datenbankadministrator | Associate | 120 Min. | 40–60 Fragen
DP-700 | Implementierung von Analyselösungen mit Microsoft Fabric | Associate | 120 Min. | 40–60 Fragen
🌐 Infrastruktur & Spezial
AZ-120 | Planung und Verwaltung von Microsoft Azure für SAP-Workloads | Associate | 120 Min. | 40–60 Fragen
AZ-140 | Konfiguration und Betrieb von Azure Virtual Desktop | Associate | 120 Min. | 40–60 Fragen

Hinweis: Das Portal ist komplett lokal lauffähig. Ihr Lernfortschritt bleibt im Browser gespeichert, bis Sie ihn zurücksetzen oder den Browser-Speicher löschen.
↑ Zurück zum Beginn von Teil 1
2. Erste Schritte

#### 1Portal öffnen

Öffnen Sie `index.html` im Ordner `C:\SC\azure-cert-portal` per Doppelklick oder über den Browser-Menübefehl Datei öffnen.

#### 2JavaScript zulassen

Das Portal benötigt JavaScript und lokalen Browser-Speicher (`localStorage`), um Navigation, Quizlogik und Fortschritt bereitzustellen.

#### 3Direkt loslernen

Es ist keine Installation, kein Login, kein Build-Prozess und kein Server notwendig. Das Portal funktioniert über lokale Dateien.

#### Empfohlene Browser

- Microsoft Edge (empfohlen)
- Google Chrome / Chromium
- Mozilla Firefox
- Safari (mit aktiviertem JavaScript)

#### Voraussetzungen

- Moderner Browser mit ES6-Unterstützung
- Aktiviertes JavaScript
- Aktiviertes `localStorage`
- Zugriff auf lokale Dateien

Tipp: Wenn Ihr Browser lokale Skripte aus Sicherheitsgründen blockiert, starten Sie das Portal alternativ über einen kleinen lokalen Webserver oder hosten Sie es statisch.
↑ Zurück zum Beginn von Teil 1
3. Dashboard

Das Dashboard ist die Startansicht. Es zeigt den Gesamtüberblick über alle verfügbaren Prüfungen und Ihren bisherigen Lernstand.

#### Obere Kennzahlen

- Gesamtzahl Prüfungen: Anzahl geladener Examensdaten.
- Beantwortete Fragen: Summe über alle Prüfungen.
- Ø Punktzahl: Anteil richtiger Antworten bezogen auf bereits beantwortete Fragen.

#### Prüfungskarten

- Code der Prüfung (z. B. AZ-104)
- lokalisierter Titel
- Level-Badge
- Fortschrittsbalken mit Prozentwert
- Bestscore, sobald vorhanden

AZ-305 wird auf dem Dashboard zusätzlich mit einer "MUSS / MUST"-Markierung hervorgehoben. Die Seitenleiste zeigt pro Prüfung außerdem einen kompakten Prozentwert an, sobald Fortschritt vorhanden ist.

So nutzen Sie das Dashboard effizient: Beginnen Sie mit Karten, deren Fortschrittsanzeige niedrig ist, oder prüfen Sie Prüfungen mit hoher Fehlerquote gezielt im Lernmodus nach.
↑ Zurück zum Beginn von Teil 1
4. Prüfung auswählen

Die Navigation erfolgt über die linke Seitenleiste. Die Prüfungen sind in acht Gruppen organisiert: 🟢 Grundlagen, 🔵 Kern-Rollen, ⭐ Experte & Architekt, 🔐 Security & Identity, 🔄 DevOps, 🤖 AI & Machine Learning, 📊 Data & Analytics und 🌐 Infrastruktur & Spezial.

#### 1Prüfung in der Seitenleiste anklicken

Wählen Sie z. B. AZ-900, SC-300 oder DP-203. Die aktive Auswahl wird hervorgehoben.

#### 2Detailansicht lesen

Die Prüfungsseite zeigt Titel, Beschreibung, Zeitlimit, Bestehensgrenze, Level und optional einen Microsoft-Learn-Link.

#### 3Domains auswerten

Unterhalb der Kopfsektion sehen Sie Themenbereiche mit prozentualer Gewichtung und Lernzielen. Diese sind ideal für fokussiertes Lernen.

#### Aktionsschaltflächen

- Lernen starten – öffnet den Lernmodus
- Prüfung starten – öffnet die Quiz-Konfiguration
- Microsoft Learn öffnen – offizieller Lernpfad
- Fortschritt zurücksetzen – entfernt gespeicherte Daten dieser Prüfung

#### Statistikbereich

- Alle Fragen
- Beantwortet
- Richtig-%
- Beste Punktzahl
- Versuche

↑ Zurück zum Beginn von Teil 1
5. Lernmodus

Der Lernmodus ist für kontrolliertes, erklärungsbasiertes Lernen optimiert. Anders als im Prüfungsmodus sehen Sie nach der Auflösung sofort Rückmeldung, Erklärung, Hinweis und Referenzlink.

#### 1Lernen starten

Öffnen Sie zuerst eine Prüfung und klicken Sie auf Lernen starten.

#### 2Fragen filtern

Nutzen Sie die Filterleiste für Domain, Schwierigkeit und Status (alle, unbeantwortet, richtig, falsch).

#### 3Antwort(en) auswählen

Einzelauswahlfragen erlauben genau eine Option, Mehrfachauswahlfragen mehrere. Szenariofragen zeigen zusätzlich einen Szenario-Block.

#### 4Antwort anzeigen

Die Schaltfläche Antwort anzeigen wird aktiv, sobald Sie mindestens eine Option gewählt haben. Danach wird Ihre Auswahl geprüft und gespeichert.

#### 5Erklärung lesen

Nach der Auflösung sehen Sie farbige Markierungen an den Optionen sowie Erklärung, optionalen Hinweis und einen Referenzlink.

#### 6Zwischen Fragen navigieren

Verwenden Sie Vorherige, Nächste oder die nummerierte Fragenübersicht am Seitenende.

#### 7Schwachstellen gezielt wiederholen

Filtern Sie anschließend auf Falsch oder auf einen bestimmten Themenbereich, um Lücken systematisch zu schließen.

#### Was gespeichert wird

Im Lernmodus wird eine Antwort beim Auflösen gespeichert – inklusive ausgewählter Optionen, Richtig/Falsch und Zeitstempel.

#### Fragentypen

Unterstützt werden single, multiple und scenario. Die Frage-Metadaten zeigen Schwierigkeit, Domain und Typ.

#### Fragenkarte

Die Fragenübersicht markiert aktuelle, richtige und falsche Fragen farblich – ideal für gezielte Wiederholungen.

Wichtig: Im Lernmodus gibt es keine separate „Prüfen“-Schaltfläche. Die Funktion heißt absichtlich Antwort anzeigen und ist stärker auf Lernen als auf Prüfungssimulation ausgelegt.
↑ Zurück zum Beginn von Teil 1
6. Quiz- / Prüfungsmodus

Der Prüfungsmodus simuliert eine zeitkritische Testsituation. Vor dem Start können Anzahl der Fragen, Timer-Nutzung und Durchmischung konfiguriert werden.

#### 1Prüfung starten

Klicken Sie auf der Prüfungsdetailseite auf Prüfung starten. Ein Modal zur Konfiguration öffnet sich.

#### 2Quiz konfigurieren

Stellen Sie Anzahl Fragen (mindestens 5), Mit Timer und Fragen mischen ein.

#### 3Timer beobachten

Bei aktiviertem Timer sehen Sie oben eine laufende MM:SS-Anzeige, Fortschrittsbalken und Warnfarben bei wenig Restzeit.

#### 4Antworten abgeben

Wählen Sie Optionen aus und klicken Sie auf Antwort prüfen. Erst danach zählt die Frage als beantwortet.

#### 5Navigieren

Wechseln Sie über Vorherige, Nächste oder die nummerierte Fragenübersicht zwischen den Aufgaben.

#### 6Prüfung beenden

Beenden Sie das Quiz über Prüfung beenden oder automatisch bei Ablauf des Timers.

#### Fragenübersicht

Die Fragenkarte markiert die aktuelle Frage und bereits eingereichte Fragen. So lässt sich schnell zu offenen Punkten zurückspringen.

#### Flagging / Markieren

Die aktuelle Version bietet keine separate „Flag for review“-/Markieren-Schaltfläche. Nutzen Sie stattdessen die Fragenübersicht und unbeantwortete Positionen zur Rückkehr.

Hinweis: Quizdaten werden nicht bei jeder Einzelfrage persistiert. Das Ergebnis wird als kompletter Versuch gespeichert, wenn Sie das Quiz abschließen.
↑ Zurück zum Beginn von Teil 1
7. Ergebnisse & Review

Nach Abschluss eines Quizdurchlaufs berechnet die Engine einen Score von 0 bis 1000. Als bestanden gilt aktuell ein Ergebnis von 700 oder höher.

Score Rohwert: richtige Antworten / Gesamtfragen × 1000
Bestanden ab 700 / 1000
Breakdown richtig, falsch, unbeantwortet
Dauer automatisch aus Start- und Endzeit berechnet

#### 1Score lesen

Die Ergebnisansicht zeigt den Score prominent zentral an. Die Beschriftung wechselt zwischen Bestanden und Nicht bestanden.

#### 2Statistik prüfen

Darunter finden Sie die absolute Anzahl richtiger, falscher und unbeantworteter Fragen sowie die Gesamtdauer.

#### 3Antworten überprüfen

Über Antworten überprüfen gelangen Sie in die Review-Ansicht mit jeder Frage, Ihrer Auswahl, der korrekten Lösung und der Erklärung.

Interpretation: Die Review-Ansicht zeigt bei falschen Fragen sowohl Ihre Auswahl als auch die korrekten Optionsbuchstaben. Nutzen Sie diese Ansicht, um gezielt in den Lernmodus zurückzukehren.
↑ Zurück zum Beginn von Teil 1
8. Fortschrittsverfolgung

Der Fortschritt wird im Browser per `localStorage` gespeichert. Es ist kein Cloud-Backend beteiligt.

#### Gespeicherte Metriken

- beantwortete Fragen pro Prüfung
- richtig/falsch je Frage
- ausgewählte Antwortoptionen
- Zeitstempel der letzten Antwort
- Versuchsanzahl pro Prüfung
- beste Punktzahl
- Zeitpunkt des letzten Quizversuchs

#### Wichtige Schlüssel

- `certportal-progress-<examId>`
- `certportal-lang`
- `certportal-theme`

Eine einzelne Prüfung setzen Sie in der Prüfungsdetailansicht über Fortschritt zurücksetzen zurück. Die Codebasis enthält zusätzlich eine globale Reset-Funktion für alle Prüfungen, diese ist jedoch in der Standardoberfläche nicht als eigener Button eingebunden.

Achtung: Wenn Sie Browserdaten löschen, im privaten Modus arbeiten oder den Browser wechseln, geht der lokal gespeicherte Fortschritt verloren.
↑ Zurück zum Beginn von Teil 1
9. Sprachwechsel

Das Portal unterstützt Deutsch und Englisch. In der Seitenleiste finden Sie unten die Schaltflächen DE und EN.

#### 1Sprache wählen

Klicken Sie auf DE oder EN.

#### 2Aktive Ansicht wird neu gerendert

Dashboard, Prüfungsseiten, Fragen, Filtertexte und Ergebnisansicht werden mit der gewählten Sprache neu aufgebaut.

#### 3Einstellung bleibt erhalten

Die Auswahl wird unter `certportal-lang` im Browser gespeichert.

Praxisnutzen: Viele Lernende schalten zwischen DE und EN um, um Fachbegriffe in beiden Sprachkontexten einzuüben.
↑ Zurück zum Beginn von Teil 1
10. Dark / Light Theme

Über das Mond-/Sonnen-Symbol in der Seitenleiste wechseln Sie zwischen hellem und dunklem Design.

#### Light Theme

Helle Karten, dezente Schatten und hoher Kontrast – ideal für Tageslicht und Ausdrucke.

#### Dark Theme

Gedämpfter Hintergrund und helle Schrift – angenehm für längere Lerneinheiten bei wenig Umgebungslicht.

Die Einstellung wird unter `certportal-theme` gespeichert und beim nächsten Öffnen automatisch wiederhergestellt.

↑ Zurück zum Beginn von Teil 1
11. Tastaturkürzel

Im aktuellen Codebestand sind keine dedizierten Tastaturkürzel implementiert. Es gibt also keine eigene Navigation per Zahlentaste, Pfeiltaste oder Hotkey-Ebene.

`Tab` und `Shift`+`Tab` nutzen weiterhin die normale Browser-Fokusnavigation.
Empfehlung: Wenn Tastatursteuerung wichtig ist, sollte sie als zukünftige Erweiterung direkt in `app.js` ergänzt und dokumentiert werden.
↑ Zurück zum Beginn von Teil 1
12. Tipps für effektives Lernen

#### Empfohlene Strategie

1. Mit Grundlagenprüfungen oder vertrauten Domains beginnen.
2. Zuerst easy, danach medium, zuletzt hard.
3. Fehler regelmäßig über den Statusfilter Falsch wiederholen.
4. Vor einer echten Prüfung mehrere gemischte Quizdurchläufe absolvieren.

#### Spaced-Repetition-Idee

- Tag 1: neue Domain im Lernmodus
- Tag 2: nur falsch beantwortete Fragen
- Tag 4: gemischtes Quiz mit Timer
- Tag 7: vollständiger Review-Durchlauf

Praktischer Tipp: Verwenden Sie die Domain-Gewichtungen auf der Prüfungsdetailseite, um Ihre Lernzeit proportional nach Examenschwerpunkt zu verteilen.
↑ Zurück zum Beginn von Teil 1

## Teil 2: Administratorhandbuch

Dieser Teil richtet sich an Maintainer und beschreibt Aufbau, Datenformat, Pflege, Sicherung und Bereitstellung des Portals.

1. Architekturüberblick

Das Portal ist eine statische SPA. Es benötigt keinen Serverprozess, keine API, keine Datenbank und keinen Build-Schritt. Die komplette Anwendung besteht aus einer HTML-Einstiegsseite, einem CSS-Stylesheet und mehreren JavaScript-Dateien.

#### index.html

Layout, Sidebar, Topbar, Script-Reihenfolge

→

#### i18n.js

DE/EN Texte und Sprachumschaltung

→

#### quiz-engine.js + data/*.js + app.js

Quizlogik, Progress, Prüfungsdaten, Rendering

#### Bereitstellung

Direkt via `file://` oder als statische Website.

#### Persistenz

Nur Browser-`localStorage`.

#### Routing

Kein serverseitiges Routing, keine Framework-Abhängigkeit.

Ladereihenfolge: `i18n.js` → `quiz-engine.js` → alle Datendateien → `app.js`. Diese Reihenfolge ist wichtig, weil `app.js` auf die vorher definierten Objekte zugreift.
↑ Zurück zum Beginn von Teil 2
2. Dateistruktur

Aktuelle Verzeichnisstruktur des Portals:

    azure-cert-portal/
    ├── css/
    │   └── styles.css
    ├── js/
    │   ├── app.js
    │   ├── i18n.js
    │   ├── quiz-engine.js
    │   └── data/
    │       ├── ai102.js
    │       ├── ai900.js
    │       ├── az104.js
    │       ├── az305.js
    │       ├── az400.js
    │       ├── az900.js
    │       ├── dp203.js
    │       ├── dp700.js
    │       ├── sc100.js
    │       ├── sc200.js
    │       ├── sc300.js
    │       └── sc400.js
    ├── index.html
    └── manual.html

Datei | Rolle
--- | ---
`index.html` | Startdatei des Portals; enthält Grundlayout, Sidebar, Topbar, Modal und Script-Einbindung.
`manual.html` | Dieses Handbuch; vollständig eigenständig mit Inline-CSS und Inline-JavaScript.
`css\styles.css` | Portal-Design im Microsoft-Fluent-Stil, Theme-Variablen, Layout und Komponentenklassen.
`js\i18n.js` | DE/EN-Übersetzungen, Sprachstatus, Umschaltlogik und Re-Rendering.
`js\quiz-engine.js` | QuizEngine, Punktelogik, Timer, Navigation, ProgressManager, lokale Persistenz.
`js\app.js` | UI-Controller, Navigation, Rendering von Dashboard, Prüfungsseite, Lernmodus, Quiz, Ergebnis und Review.
`js\data\*.js` | Prüfungsdaten. Jede Datei registriert ein Exam unter `window.ExamData['exam-id']`.

↑ Zurück zum Beginn von Teil 2
3. Neue Fragen hinzufügen

#### 1Zieldatei wählen

Öffnen Sie die passende Datendatei in `js\data\`, z. B. `az104.js` für AZ-104.

#### 2Frageobjekt im `questions`-Array ergänzen

Fügen Sie ein neues Objekt mit eindeutiger ID ein. Halten Sie das vorhandene Format konsistent.

#### 3DE- und EN-Texte pflegen

Frage, Domain, Erklärungen und Hinweise sollten immer bilingual gepflegt werden.

#### 4Korrekte Options-IDs referenzieren

Die Einträge in `correct` müssen exakt zu den Option-IDs (typisch A/B/C/D) passen.

#### 5Im Portal testen

Datei speichern, `index.html` neu laden, Frage im Lernmodus und im Quizmodus prüfen.

    window.ExamData['az-104'].questions.push({
      id: 'az104-121',
      type: 'single',
      domain: {
        en: 'Manage Azure identities and governance',
        de: 'Azure-Identitäten und Governance verwalten'
      },
      difficulty: 'medium',
      scenario: null,
      question: {
        en: 'Which Azure service is used to assign access at resource scope?',
        de: 'Welcher Azure-Dienst wird verwendet, um Zugriff auf Ressourcenebene zuzuweisen?'
      },
      options: [
        { id: 'A', text: { en: 'Azure RBAC', de: 'Azure RBAC' } },
        { id: 'B', text: { en: 'Azure Policy', de: 'Azure Policy' } },
        { id: 'C', text: { en: 'Azure Monitor', de: 'Azure Monitor' } },
        { id: 'D', text: { en: 'Cost Management', de: 'Cost Management' } }
      ],
      correct: ['A'],
      explanation: {
        en: 'Azure RBAC controls authorization for Azure resources.',
        de: 'Azure RBAC steuert die Autorisierung für Azure-Ressourcen.'
      },
      hint: {
        en: 'Think about authorization, not compliance.',
        de: 'Denken Sie an Autorisierung, nicht an Compliance.'
      },
      reference: 'https://learn.microsoft.com/azure/role-based-access-control/'
    });

Wichtig: Mehrfachauswahlfragen werden nur dann als korrekt gewertet, wenn alle richtigen Optionen ausgewählt wurden und keine zusätzliche falsche Option enthalten ist.
↑ Zurück zum Beginn von Teil 2
4. Neue Prüfungen hinzufügen

#### 1Neue Datendatei anlegen

Erstellen Sie z. B. `js\data\az123.js` und registrieren Sie darin `window.ExamData['az-123']`.

#### 2Meta- und Frageobjekte definieren

Orientieren Sie sich am bestehenden Schema mit `meta` und `questions`.

#### 3Script in `index.html` registrieren

Fügen Sie vor `js\app.js` einen neuen `<script src="js/data/...">`-Eintrag ein.

#### 4Sidebar-Button ergänzen

Ergänzen Sie in `index.html` einen neuen `.nav-item` mit passendem `data-exam`-Wert.

#### 5Exam-Reihenfolge anpassen

Tragen Sie die neue ID in `App.examOrder` in `js\app.js` ein, damit Dashboard und Nav-Fortschritt die Prüfung berücksichtigen.

#### 6Optional neue Gruppe übersetzen

Wenn Sie eine neue Navigationsgruppe einführen, ergänzen Sie deren Texte in `js\i18n.js`.

    // index.html
    <script src="js/data/az123.js"></script>
    <script src="js/app.js"></script>

    // app.js
    examOrder: [
      'az-900', 'ai-900', 'ai-901', 'sc-900', 'dp-900',
      'az-104', 'az-204', 'az-700', 'az-305',
      'sc-100', 'sc-200', 'sc-300', 'sc-400', 'az-500',
      'az-400', 'ai-102', 'ai-103', 'ai-200',
      'dp-100', 'dp-203', 'dp-300', 'dp-700',
      'az-120', 'az-140',
      'az-123'
    ]

Oft vergessen: Nur das Einbinden der Datendatei reicht nicht. Ohne Sidebar-Eintrag und `examOrder`-Erweiterung erscheint die Prüfung nicht vollständig im UI-Fluss.
↑ Zurück zum Beginn von Teil 2
5. Datenformat-Referenz

Jede Datendatei registriert genau ein Prüfungsobjekt unter `window.ExamData['exam-id']`. Das Schema besteht aus `meta` und `questions`.

Pfad | Typ | Pflicht | Beschreibung / zulässige Werte
--- | --- | --- | ---
`meta.id` | String | ja | Prüfungs-ID, z. B. `az-900`.
`meta.title` | Objekt | ja | `{ en, de }` – lokalisierter Titel.
`meta.description` | Objekt | ja | `{ en, de }` – Beschreibung der Prüfung.
`meta.icon` | String | ja | Emoji oder kurzes Symbol für Dashboard und Detailansicht.
`meta.level` | String | ja | `fundamentals`, `associate`, `expert`.
`meta.passingScore` | Number | ja | Angezeigter Passing Score; aktuell in allen Dateien 700.
`meta.totalTime` | Number | ja | Minuten für den Timer im Quizmodus.
`meta.questionCount` | String | ja | Anzeige-Text wie `40-60` oder `120+`; informativ, nicht technisch erzwingend.
`meta.msLearnUrl` | String | optional | Microsoft-Learn-Link; erzeugt den Button „Open Microsoft Learn“.
`meta.domains` | Array | optional | Liste der Themenbereiche für die Detailansicht.
`meta.domains[].name` | Objekt | ja | `{ en, de }`.
`meta.domains[].weight` | String | ja | Gewichtung als Text, z. B. `25-30%`.
`meta.domains[].objectives` | Array | optional | Liste lokalisierter Lernziele.
`questions[].id` | String | ja | Eindeutige Frage-ID, empfohlen im Format `examcode-001`.
`questions[].type` | String | ja | `single`, `multiple`, `scenario`.
`questions[].domain` | Objekt | ja | `{ en, de }`; wird für Badge und Filter verwendet.
`questions[].difficulty` | String | ja | `easy`, `medium`, `hard`.
`questions[].scenario` | Objekt oder `null` | ja | Bei Szenariofragen lokalisierter Text; sonst `null`.
`questions[].question` | Objekt | ja | `{ en, de }` – eigentlicher Fragetext.
`questions[].options` | Array | ja | Antwortoptionen mit ID und lokalisiertem Text.
`questions[].options[].id` | String | ja | Typisch `A`, `B`, `C`, `D`.
`questions[].options[].text` | Objekt | ja | `{ en, de }`.
`questions[].correct` | Array | ja | Liste der korrekten Option-IDs; bei Mehrfachauswahl mehrere Einträge.
`questions[].explanation` | Objekt | ja | Erklärung nach der Auflösung bzw. nach dem Submit.
`questions[].hint` | Objekt | optional | Zusätzlicher Hinweis; wird nur gerendert, wenn vorhanden.
`questions[].reference` | String | optional | Externe URL zur Referenz, typischerweise Microsoft Learn.

Implementierungsdetail: Der Typ `scenario` beeinflusst primär die Darstellung. Die Bewertungslogik basiert weiterhin ausschließlich auf `correct` und den gewählten Optionen.
↑ Zurück zum Beginn von Teil 2
6. Anpassung

#### Farben und Theme

Die Portal-Farben liegen als CSS-Custom-Properties in `css\styles.css`. Relevante Variablen sind u. a. `--primary`, `--bg-page`, `--bg-card` und `--text-primary`.

#### Übersetzungen

Neue UI-Texte werden in `js\i18n.js` unter `I18N.de` und `I18N.en` ergänzt. Elemente im DOM nutzen `data-i18n`.

    :root {
      --primary: #0078d4;
      --primary-hover: #106ebe;
      --bg-page: #f5f5f5;
    }

    [data-theme="dark"] {
      --bg-page: #1a1a1a;
      --bg-card: #2d2d2d;
    }

Passing Score anpassen: Wenn Sie die Bestehensgrenze ändern möchten, aktualisieren Sie zwei Stellen: `meta.passingScore` in der Datendatei und die feste Prüfung in `QuizEngine.getResults()`, die derzeit `score >= 700` verwendet.

Weitere typische Anpassungen:

- Standard-Sprache: Initialwert in `i18n.js`.
- Standard-Theme: Initialwert in `app.js`.
- Fragenanzahl im Quiz-Dialog: Default in `showQuizConfig()`.
- Warnschwellen des Timers: Anzeige-Logik in `renderQuizMode()` und `updateTimerDisplay()`.

↑ Zurück zum Beginn von Teil 2
7. Fehlerbehebung

Problem | Mögliche Ursache | Lösung
--- | --- | ---
Portal bleibt leer oder lädt nicht | Script-Reihenfolge beschädigt oder Datendatei mit Syntaxfehler | Browser-Konsole prüfen, neue Datei validieren, Script-Tags vor `app.js` laden.
Fortschritt wird nicht gespeichert | `localStorage` deaktiviert, privater Modus, restriktive Browser-Richtlinie | Normales Browserfenster verwenden, Speichern erlauben, ggf. anderen Browser testen.
Lokale Datei funktioniert nicht unter `file://` | Browser/Unternehmensrichtlinie blockiert lokale Skripte | Per lokalem Webserver, GitHub Pages oder Azure Static Web Apps hosten.
Neue Prüfung erscheint nicht | Sidebar-Eintrag oder `examOrder` fehlt | `index.html` und `app.js` ergänzen.
Frage zählt nie als richtig | `correct`-Array passt nicht zu Option-IDs oder Mehrfachauswahl unvollständig | Option-IDs und `correct` exakt abgleichen.
Sehr alter Browser zeigt Fehler | Fehlende Unterstützung moderner JavaScript-Features | Aktuellen Chromium-, Edge-, Firefox- oder Safari-Browser verwenden.
localStorage-Quota erreicht | Sehr viele lokale Daten oder restriktives Profil | Nicht benötigte Browserdaten löschen oder Fortschritt exportieren und Speicher bereinigen.

Praxis-Tipp: Nach Änderungen an Datendateien hilft fast immer ein vollständiger Browser-Reload, damit alle Skripte neu geladen werden.
↑ Zurück zum Beginn von Teil 2
8. Backup & Restore

Da alle Fortschrittsdaten im Browser gespeichert werden, lassen sie sich über die Entwicklerwerkzeuge exportieren und wieder importieren.

#### Backup erstellen

    const backup = {};
    for (let i = 0; i < localStorage.length; i++) {
      const key = localStorage.key(i);
      if (key && key.startsWith('certportal-')) {
        backup[key] = localStorage.getItem(key);
      }
    }
    console.log(JSON.stringify(backup, null, 2));

#### Backup wiederherstellen

    const backup = JSON.parse(prompt('Backup JSON einfügen'));
    Object.entries(backup).forEach(([key, value]) => {
      localStorage.setItem(key, value);
    });
    location.reload();

Wenn Sie nur Fortschrittsdaten ohne Theme und Sprache sichern möchten, filtern Sie statt `certportal-` nur auf `certportal-progress-`.

Sicherheitsaspekt: Ein Backup enthält Lernhistorie. Behandeln Sie exportierte JSON-Daten wie persönliche Nutzungsdaten.
↑ Zurück zum Beginn von Teil 2
9. Deployment

#### Optionen

- Lokale Datei: `index.html` direkt öffnen.
- Einfacher Webserver: z. B. IIS, nginx, Apache oder Dev-Server.
- GitHub Pages: ideal für öffentliches, statisches Hosting.
- Azure Static Web Apps: passender Azure-native Host.

#### Besonderheiten

- Kein Build-Prozess erforderlich
- Kein Servercode
- Keine API-Konfiguration nötig
- Keine Rewrite-Regeln für SPA-Routing nötig, da keine URL-Routen verwendet werden

Empfehlung: Für Teamnutzung eignet sich Azure Static Web Apps oder GitHub Pages besonders gut, weil Deployment und Versionierung sehr einfach bleiben.
↑ Zurück zum Beginn von Teil 2

## Part 1: User Manual

This part is intended for learners and explains everyday portal usage from selecting an exam to reviewing completed quiz attempts.

1. Welcome / Overview

The Azure Certification Learning Portal is a local, static single-page application (SPA) for studying 24 Microsoft Azure certification exams. It combines study mode, exam mode, progress tracking, language switching, and theme switching in one interface. Scenarios use fictional demo companies (Contoso, Fabrikam, Tailwind Traders, etc.) for real-world questions.

24 covered exams
3 levels: Fundamentals, Associate, Expert
700 / 1000 displayed passing threshold
Offline-ready no install, no server required

Exam | Title | Level | Duration | official range
--- | --- | --- | --- | ---
🟢 Fundamentals
AZ-900 | Microsoft Azure Fundamentals | Fundamentals | 85 min | 40–60 questions
AI-900 | Microsoft Azure AI Fundamentals | Fundamentals | 85 min | 40–60 questions
AI-901 | Azure AI Fundamentals (2026) | Fundamentals | 85 min | 40–60 questions
SC-900 | Microsoft Security, Compliance, and Identity Fundamentals | Fundamentals | 65 min | 40–60 questions
DP-900 | Microsoft Azure Data Fundamentals | Fundamentals | 65 min | 40–60 questions
🔵 Core Roles
AZ-104 | Microsoft Azure Administrator | Associate | 120 min | 40–60 questions
AZ-204 | Developing Solutions for Microsoft Azure | Associate | 120 min | 40–60 questions
AZ-700 | Designing and Implementing Microsoft Azure Networking Solutions | Associate | 120 min | 40–60 questions
⭐ Expert & Architect
AZ-305 | Designing Microsoft Azure Infrastructure Solutions | Expert | 120 min | 120+ questions
🔐 Security & Identity
SC-100 | Microsoft Cybersecurity Architect | Expert | 120 min | 40–60 questions
SC-200 | Microsoft Security Operations Analyst | Associate | 120 min | 40–60 questions
SC-300 | Microsoft Identity and Access Administrator | Associate | 120 min | 40–60 questions
SC-400 | Microsoft Information Protection Administrator | Associate | 120 min | 100+ questions
AZ-500 | Microsoft Azure Security Technologies | Associate | 120 min | 40–60 questions
🔄 DevOps
AZ-400 | Designing and Implementing Microsoft DevOps Solutions | Expert | 120 min | 40–60 questions
🤖 AI & Machine Learning
AI-102 | Designing and Implementing a Microsoft Azure AI Solution | Associate | 120 min | 40–60 questions
AI-103 | Azure AI Apps Engineer (2026) | Associate | 120 min | 40–60 questions
AI-200 | AI Cloud Developer (2026) | Associate | 120 min | 40–60 questions
📊 Data & Analytics
DP-100 | Designing and Implementing a Data Science Solution on Azure | Associate | 120 min | 40–60 questions
DP-203 | Data Engineering on Microsoft Azure | Associate | 120 min | 40–60 questions
DP-300 | Administering Microsoft Azure SQL Solutions | Associate | 120 min | 40–60 questions
DP-700 | Implementing Analytics Solutions Using Microsoft Fabric | Associate | 120 min | 40–60 questions
🌐 Infrastructure & Specialty
AZ-120 | Planning and Administering Microsoft Azure for SAP Workloads | Associate | 120 min | 40–60 questions
AZ-140 | Configuring and Operating Microsoft Azure Virtual Desktop | Associate | 120 min | 40–60 questions

Note: The portal runs entirely locally. Your study progress stays in the browser until you reset it or clear browser storage.
↑ Back to the start of Part 1
2. Getting Started

#### 1Open the portal

Open `index.html` in `C:\SC\azure-cert-portal` by double-clicking it or by using your browser’s Open File command.

#### 2Allow JavaScript

The portal requires JavaScript and browser storage (`localStorage`) for navigation, quiz logic, and progress persistence.

#### 3Start studying immediately

No installation, login, build step, or server is required. The portal works directly from local files.

#### Recommended browsers

- Microsoft Edge (recommended)
- Google Chrome / Chromium
- Mozilla Firefox
- Safari (with JavaScript enabled)

#### Requirements

- Modern browser with ES6 support
- JavaScript enabled
- `localStorage` enabled
- Access to local files

Tip: If your browser blocks local scripts for security reasons, run the portal from a small local web server or host it as a static site.
↑ Back to the start of Part 1
3. Dashboard

The dashboard is the default landing view. It gives you a full overview of all available exams and your current study status.

#### Top metrics

- Total exams: number of loaded exam datasets.
- Questions answered: combined across all exams.
- Avg score: percentage of correct answers across answered items.

#### Exam cards

- exam code (for example AZ-104)
- localized title
- level badge
- progress bar with percentage
- best score when available

AZ-305 is additionally highlighted with a “MUSS / MUST” marker on the dashboard. The sidebar also shows a compact per-exam progress percentage whenever data exists.

Efficient use: Start with cards that have low progress, or revisit exams with weak accuracy in study mode.
↑ Back to the start of Part 1
4. Selecting an Exam

Navigation happens through the left sidebar. Exams are grouped into eight categories: 🟢 Fundamentals, 🔵 Core Roles, ⭐ Expert & Architect, 🔐 Security & Identity, 🔄 DevOps, 🤖 AI & Machine Learning, 📊 Data & Analytics, and 🌐 Infrastructure & Specialty.

#### 1Click an exam in the sidebar

Select AZ-900, SC-300, DP-203, or any other available exam. The active selection is highlighted.

#### 2Read the detail view

The exam page shows title, description, time limit, passing score, level, and an optional Microsoft Learn link.

#### 3Review the domains

Below the header you will see domain cards with weightings and objectives. These are ideal for targeted study planning.

#### Action buttons

- Start Studying – opens study mode
- Start Exam – opens quiz configuration
- Open Microsoft Learn – official learning path
- Reset Progress – deletes saved data for that exam

#### Statistics area

- All Questions
- Answered
- Correct %
- Best Score
- Attempts

↑ Back to the start of Part 1
5. Study Mode

Study mode is optimized for controlled, explanation-driven learning. Unlike exam mode, it reveals immediate feedback, explanation, hint, and reference once you resolve a question.

#### 1Start studying

Open an exam and click Start Studying.

#### 2Filter questions

Use the filter bar for domain, difficulty, and status (all, unanswered, correct, incorrect).

#### 3Select answer(s)

Single-choice questions allow one answer, multiple-choice questions allow several. Scenario questions include an extra scenario box.

#### 4Reveal the answer

The Show Answer button becomes active after at least one option is selected. Your selection is then checked and stored.

#### 5Read the explanation

After resolution you get colored answer highlighting, the explanation, an optional hint, and a reference link.

#### 6Navigate between questions

Use Previous, Next, or the numbered Question Map at the bottom.

#### 7Repeat weak areas

Filter by Incorrect or by a specific domain to close gaps systematically.

#### What gets saved

In study mode, an answer is stored when you reveal it, including selected options, correct/incorrect state, and timestamp.

#### Question types

Supported question types are single, multiple, and scenario. Metadata badges show difficulty, domain, and type.

#### Question map

The map color-codes current, correct, and incorrect questions, making targeted repetition easy.

Important: Study mode intentionally uses Show Answer rather than a separate “Check Answer” flow. It is designed for learning, not for pure simulation.
↑ Back to the start of Part 1
6. Quiz / Exam Mode

Exam mode simulates a more time-critical test session. Before starting, you can configure question count, timer usage, and shuffling.

#### 1Start the exam

Click Start Exam on the exam detail page. A configuration modal appears.

#### 2Configure the quiz

Set the number of questions (minimum 5), whether it is timed, and whether to shuffle questions.

#### 3Watch the timer

When timing is enabled, the top area shows an MM:SS countdown, a timer progress bar, and warning colors near the end.

#### 4Submit answers

Select one or more options and click Check Answer. Only then does the question count as answered.

#### 5Navigate

Move through questions using Previous, Next, or the numbered question map.

#### 6Finish the exam

Finish manually with Finish Exam or automatically when the timer expires.

#### Question map

The map highlights the current question and already submitted items so you can jump back to unfinished areas quickly.

#### Flagging questions

The current build has no dedicated flag-for-review button. Use the question map and unanswered positions instead.

Note: Quiz results are not persisted after every single question. The full attempt is stored when the exam is finished.
↑ Back to the start of Part 1
7. Results & Review

After a quiz attempt is completed, the engine calculates a score from 0 to 1000. The current pass condition is 700 or above.

Score raw value: correct answers / total questions × 1000
Passed from 700 / 1000
Breakdown correct, incorrect, unanswered
Duration calculated from start and end time

#### 1Read the score

The results page shows the score prominently in the center. The label changes between Passed and Failed.

#### 2Inspect the statistics

Below that, you will see the counts of correct, incorrect, and unanswered questions plus total duration.

#### 3Review your answers

Click Review Answers to open the review view with each question, your answer, the correct answer, and the explanation.

Interpretation tip: The review screen shows your selected option letters and, when needed, the correct option letters. Use it to decide what to repeat in study mode.
↑ Back to the start of Part 1
8. Progress Tracking

Progress is stored in the browser using `localStorage`. No cloud backend is involved.

#### Tracked metrics

- answered questions per exam
- correct/incorrect state per question
- selected answer options
- timestamp of the last answer
- number of attempts per exam
- best score
- time of the last quiz attempt

#### Important keys

- `certportal-progress-<examId>`
- `certportal-lang`
- `certportal-theme`

You can reset a single exam from the exam detail screen using Reset Progress. The codebase also includes a reset-all function for every exam, but the standard UI does not expose it as a dedicated button.

Warning: If you clear browser data, use private browsing, or change browsers, the locally stored progress will be lost.
↑ Back to the start of Part 1
9. Language Switching

The portal supports German and English. The DE and EN buttons are located at the bottom of the sidebar.

#### 1Select a language

Click DE or EN.

#### 2The active view re-renders

The dashboard, exam pages, questions, filter labels, and results are rebuilt in the selected language.

#### 3The setting persists

The selection is saved under `certportal-lang`.

Practical use: Many learners switch between German and English to practice technical terminology in both contexts.
↑ Back to the start of Part 1
10. Dark / Light Theme

Use the moon/sun icon in the sidebar to switch between light and dark appearance.

#### Light theme

Bright cards, subtle shadows, and high contrast — ideal for daylight and printouts.

#### Dark theme

Muted background with bright text — comfortable for long evening study sessions.

The preference is saved under `certportal-theme` and restored automatically on the next launch.

↑ Back to the start of Part 1
11. Keyboard Shortcuts

The current codebase implements no dedicated keyboard shortcuts. There is no custom number-key, arrow-key, or hotkey navigation layer.

`Tab` and `Shift`+`Tab` still follow normal browser focus navigation.
Recommendation: If keyboard control becomes important, it should be added explicitly in `app.js` and then documented.
↑ Back to the start of Part 1
12. Tips for Effective Study

#### Recommended strategy

1. Start with fundamentals or with domains you already recognize.
2. Go from easy to medium to hard.
3. Regularly revisit mistakes using the Incorrect status filter.
4. Before the real exam, run several mixed timed quizzes.

#### Spaced repetition idea

- Day 1: new domain in study mode
- Day 2: only previously incorrect items
- Day 4: mixed timed quiz
- Day 7: full review run

Practical tip: Use the domain weightings on the exam detail page to distribute study time according to the exam blueprint.
↑ Back to the start of Part 1

## Part 2: Administrator Manual

This part is intended for maintainers and documents architecture, data format, upkeep, backup, and deployment.

1. Architecture Overview

The portal is a static SPA. It requires no server process, no API, no database, and no build step. The entire application consists of an HTML entry file, one CSS stylesheet, and several JavaScript files.

#### index.html

layout, sidebar, top bar, script order

→

#### i18n.js

DE/EN labels and language switching

→

#### quiz-engine.js + data/*.js + app.js

quiz logic, progress, exam data, rendering

#### Delivery model

Works via `file://` or any static hosting platform.

#### Persistence

Browser `localStorage` only.

#### Routing

No server-side routing and no framework dependency.

Load order: `i18n.js` → `quiz-engine.js` → all data files → `app.js`. This order matters because `app.js` depends on previously defined objects.
↑ Back to the start of Part 2
2. File Structure

Current portal directory tree:

    azure-cert-portal/
    ├── css/
    │   └── styles.css
    ├── js/
    │   ├── app.js
    │   ├── i18n.js
    │   ├── quiz-engine.js
    │   └── data/
    │       ├── ai102.js
    │       ├── ai900.js
    │       ├── az104.js
    │       ├── az305.js
    │       ├── az400.js
    │       ├── az900.js
    │       ├── dp203.js
    │       ├── dp700.js
    │       ├── sc100.js
    │       ├── sc200.js
    │       ├── sc300.js
    │       └── sc400.js
    ├── index.html
    └── manual.html

File | Purpose
--- | ---
`index.html` | Main portal entry point; defines the layout, sidebar, top bar, modal, and script loading.
`manual.html` | This manual; fully self-contained with inline CSS and inline JavaScript.
`css\styles.css` | Portal styling in Microsoft Fluent-inspired design, theme variables, layout, and component rules.
`js\i18n.js` | DE/EN translations, language state, switch logic, and rerendering support.
`js\quiz-engine.js` | QuizEngine, score logic, timer, navigation, ProgressManager, and local persistence.
`js\app.js` | UI controller, navigation, and rendering for dashboard, exam detail, study mode, quiz mode, results, and review.
`js\data\*.js` | Exam datasets. Each file registers one exam under `window.ExamData['exam-id']`.

↑ Back to the start of Part 2
3. Adding New Questions

#### 1Choose the target file

Open the relevant dataset in `js\data\`, for example `az104.js` for AZ-104.

#### 2Add a question object inside `questions`

Insert a new object with a unique ID and follow the existing formatting style.

#### 3Maintain DE and EN text

Question text, domain labels, explanations, and hints should remain bilingual.

#### 4Reference the correct option IDs

Entries in `correct` must exactly match the option IDs, typically A/B/C/D.

#### 5Test in the portal

Save the file, reload `index.html`, and validate the new question in both study and exam mode.

    window.ExamData['az-104'].questions.push({
      id: 'az104-121',
      type: 'single',
      domain: {
        en: 'Manage Azure identities and governance',
        de: 'Azure-Identitäten und Governance verwalten'
      },
      difficulty: 'medium',
      scenario: null,
      question: {
        en: 'Which Azure service is used to assign access at resource scope?',
        de: 'Welcher Azure-Dienst wird verwendet, um Zugriff auf Ressourcenebene zuzuweisen?'
      },
      options: [
        { id: 'A', text: { en: 'Azure RBAC', de: 'Azure RBAC' } },
        { id: 'B', text: { en: 'Azure Policy', de: 'Azure Policy' } },
        { id: 'C', text: { en: 'Azure Monitor', de: 'Azure Monitor' } },
        { id: 'D', text: { en: 'Cost Management', de: 'Cost Management' } }
      ],
      correct: ['A'],
      explanation: {
        en: 'Azure RBAC controls authorization for Azure resources.',
        de: 'Azure RBAC steuert die Autorisierung für Azure-Ressourcen.'
      },
      hint: {
        en: 'Think about authorization, not compliance.',
        de: 'Denken Sie an Autorisierung, nicht an Compliance.'
      },
      reference: 'https://learn.microsoft.com/azure/role-based-access-control/'
    });

Important: Multiple-answer questions are only marked correct when all correct options are selected and no extra incorrect option is included.
↑ Back to the start of Part 2
4. Adding New Exams

#### 1Create a new data file

Create something like `js\data\az123.js` and register `window.ExamData['az-123']` inside it.

#### 2Define metadata and questions

Follow the existing structure with `meta` and `questions`.

#### 3Register the script in `index.html`

Add a new `<script src="js/data/...">` entry before `js\app.js`.

#### 4Add a sidebar button

Insert a new `.nav-item` in `index.html` with the correct `data-exam` value.

#### 5Update exam order

Add the new ID to `App.examOrder` in `js\app.js` so dashboard and nav progress include it.

#### 6Optionally translate a new group

If you introduce a new sidebar category, add its translations to `js\i18n.js`.

    // index.html
    <script src="js/data/az123.js"></script>
    <script src="js/app.js"></script>

    // app.js
    examOrder: [
      'az-900', 'ai-900', 'ai-901', 'sc-900', 'dp-900',
      'az-104', 'az-204', 'az-700', 'az-305',
      'sc-100', 'sc-200', 'sc-300', 'sc-400', 'az-500',
      'az-400', 'ai-102', 'ai-103', 'ai-200',
      'dp-100', 'dp-203', 'dp-300', 'dp-700',
      'az-120', 'az-140',
      'az-123'
    ]

Frequently missed: Loading the data file alone is not enough. Without the sidebar entry and the `examOrder` update, the exam will not fully participate in the UI flow.
↑ Back to the start of Part 2
5. Data Format Reference

Each dataset file registers exactly one exam object under `window.ExamData['exam-id']`. The schema is split into `meta` and `questions`.

Path | Type | Required | Description / allowed values
--- | --- | --- | ---
`meta.id` | String | yes | Exam ID, for example `az-900`.
`meta.title` | Object | yes | `{ en, de }` localized title.
`meta.description` | Object | yes | `{ en, de }` exam description.
`meta.icon` | String | yes | Emoji or short symbol shown on the dashboard and detail page.
`meta.level` | String | yes | `fundamentals`, `associate`, or `expert`.
`meta.passingScore` | Number | yes | Displayed passing score; currently 700 in all datasets.
`meta.totalTime` | Number | yes | Minutes used for the timed quiz option.
`meta.questionCount` | String | yes | Display text such as `40-60` or `120+`; informative only, not enforced technically.
`meta.msLearnUrl` | String | optional | Microsoft Learn URL; creates the “Open Microsoft Learn” button.
`meta.domains` | Array | optional | List of domain cards shown on the exam detail page.
`meta.domains[].name` | Object | yes | `{ en, de }`.
`meta.domains[].weight` | String | yes | Weight text such as `25-30%`.
`meta.domains[].objectives` | Array | optional | List of localized objectives.
`questions[].id` | String | yes | Unique question ID; recommended format `examcode-001`.
`questions[].type` | String | yes | `single`, `multiple`, `scenario`.
`questions[].domain` | Object | yes | `{ en, de }`; used by badges and filters.
`questions[].difficulty` | String | yes | `easy`, `medium`, `hard`.
`questions[].scenario` | Object or `null` | yes | Localized scenario text for scenario questions; otherwise `null`.
`questions[].question` | Object | yes | `{ en, de }` main question text.
`questions[].options` | Array | yes | Answer options with ID and localized text.
`questions[].options[].id` | String | yes | Typically `A`, `B`, `C`, `D`.
`questions[].options[].text` | Object | yes | `{ en, de }`.
`questions[].correct` | Array | yes | Array of correct option IDs; multiple items for multiple-answer questions.
`questions[].explanation` | Object | yes | Explanation shown after resolution or submission.
`questions[].hint` | Object | optional | Additional hint; rendered only if present.
`questions[].reference` | String | optional | External URL, usually to Microsoft Learn.

Implementation detail: The `scenario` type mostly affects presentation. Scoring still depends only on `correct` and the selected option IDs.
↑ Back to the start of Part 2
6. Customization

#### Colors and theme

Portal colors are defined as CSS custom properties in `css\styles.css`. Important variables include `--primary`, `--bg-page`, `--bg-card`, and `--text-primary`.

#### Translations

Add new UI strings in `js\i18n.js` under `I18N.de` and `I18N.en`. Static DOM elements use `data-i18n`.

    :root {
      --primary: #0078d4;
      --primary-hover: #106ebe;
      --bg-page: #f5f5f5;
    }

    [data-theme="dark"] {
      --bg-page: #1a1a1a;
      --bg-card: #2d2d2d;
    }

Changing the passing score: Update two places: `meta.passingScore` in the dataset and the fixed threshold inside `QuizEngine.getResults()`, which currently uses `score >= 700`.

Other common customizations:

- Default language: initial language logic in `i18n.js`.
- Default theme: initial theme logic in `app.js`.
- Default quiz question count: value in `showQuizConfig()`.
- Timer warning thresholds: logic in `renderQuizMode()` and `updateTimerDisplay()`.

↑ Back to the start of Part 2
7. Troubleshooting

Issue | Likely cause | Resolution
--- | --- | ---
Portal stays empty or does not render | Broken script order or syntax error in a data file | Check the browser console, validate the new file, and ensure data files load before `app.js`.
Progress is not saved | `localStorage` disabled, private mode, restrictive browser policy | Use a normal browser window, allow storage, or test with another browser.
Local file does not work via `file://` | Browser or corporate policy blocks local scripts | Run from a local web server, GitHub Pages, or Azure Static Web Apps.
New exam does not appear | Missing sidebar entry or missing `examOrder` entry | Update both `index.html` and `app.js`.
A question never evaluates as correct | `correct` array does not match option IDs, or multiple-answer selection is incomplete | Verify option IDs and `correct` values exactly.
Very old browser shows errors | Missing support for modern JavaScript features | Use a current Chromium, Edge, Firefox, or Safari version.
localStorage quota is reached | Too much local data or restrictive profile settings | Export progress, clear unnecessary browser data, or use a cleaner browser profile.

Practical tip: After editing dataset files, a full browser reload usually resolves stale script state immediately.
↑ Back to the start of Part 2
8. Backup & Restore

Because all progress data lives in the browser, it can be exported and re-imported through Developer Tools.

#### Create a backup

    const backup = {};
    for (let i = 0; i < localStorage.length; i++) {
      const key = localStorage.key(i);
      if (key && key.startsWith('certportal-')) {
        backup[key] = localStorage.getItem(key);
      }
    }
    console.log(JSON.stringify(backup, null, 2));

#### Restore a backup

    const backup = JSON.parse(prompt('Paste backup JSON'));
    Object.entries(backup).forEach(([key, value]) => {
      localStorage.setItem(key, value);
    });
    location.reload();

If you only want study progress without theme and language preferences, filter on `certportal-progress-` instead of `certportal-`.

Security note: A backup contains study history. Treat exported JSON as personal usage data.
↑ Back to the start of Part 2
9. Deployment

#### Options

- Local file: open `index.html` directly.
- Simple web server: IIS, nginx, Apache, or any development server.
- GitHub Pages: ideal for public static hosting.
- Azure Static Web Apps: excellent Azure-native hosting choice.

#### Key characteristics

- No build pipeline required
- No server-side code
- No API configuration needed
- No SPA rewrite rules needed because the app does not rely on client-side URL routing

Recommendation: For team usage, Azure Static Web Apps or GitHub Pages keep deployment and versioning especially simple.
↑ Back to the start of Part 2