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.

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

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.

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.

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.

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

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

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

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.

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

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

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

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

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.

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

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/'
});

// 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'
]

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

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

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

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().

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

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));

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-.