From ef2c01f69f715d8381aafcf518c86ff5dd8ac868 Mon Sep 17 00:00:00 2001 From: breitenbach76 Date: Sun, 7 Jun 2026 15:57:25 +0200 Subject: [PATCH] v13 --- 04_Tablet-Quiz/app/index.html | 82 +++++++++++++++++++++++++---------- 04_Tablet-Quiz/app/sw.js | 2 +- 2 files changed, 60 insertions(+), 24 deletions(-) diff --git a/04_Tablet-Quiz/app/index.html b/04_Tablet-Quiz/app/index.html index 0770821..1b4ad68 100644 --- a/04_Tablet-Quiz/app/index.html +++ b/04_Tablet-Quiz/app/index.html @@ -269,6 +269,13 @@ .legend h4{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)} .legend dt{font-weight:700;font-size:13px} .legend dd{margin:2px 0 8px;color:var(--muted);font-size:13px} + .lgItem{padding:8px 0;border-top:1px solid var(--line)} + .lgItem:first-of-type{border-top:0;padding-top:2px} + .lgName{font-weight:700;font-size:13px;color:var(--ink)} + .lgIdee{margin:2px 0 4px;font-size:13px;color:var(--ink)} + .lgBed{margin:2px 0 4px;padding-left:18px;color:var(--muted);font-size:12px} + .lgBed li{margin:1px 0} + .lgBsp{font-size:12px;color:var(--muted)} .hint{font-weight:600;margin:8px 0} .hint.bad{color:var(--bad)} .hint.ok{color:var(--ok)} .phaseRow{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:14px 0} @@ -399,12 +406,39 @@ const CHANGE_TYPES = [ "Standard Change", "Emergency Change" ]; +/* Legende-Inhalte, Index parallel zu CHANGE_TYPES (0 Major, 1 Normal, 2 Standard, 3 Emergency). + Quelle: DIGITOM-Definitionen. Emergency wurde nicht mitgeliefert -> bestehende Beschreibung. */ const CHANGE_LEGEND = [ - "Strategisch/grundlegend, braucht ein echtes Design — durchläuft den vollen Lebenszyklus ab dem Design. Freigabe in der SOR; reicht deren Ressourcen-/Entscheidungshoheit nicht, wird daraus ein Demand (Routing DPM → Mission Board).", - "Geplant und dokumentiert, aber nicht strategisch — Einstieg an Gate 1 (Bauen oder Konfigurieren), meist Konfiguration.", - "Vorab genehmigt und im Katalog hinterlegt — keine Gates, kein Design, direkt im laufenden Betrieb.", - "Muss eine Störung sofort beheben — beschleunigt umgesetzt; die formale Freigabe erfolgt nachgelagert." + { idee:"Sonderform der Normal Change mit hohem Risiko, hohen Kosten oder breiter Auswirkung — höchste Eskalations- und Genehmigungsstufe.", + bed:["Hohes Risiko und/oder hohe Kosten und/oder weitreichende Auswirkung (viele Nutzer/Services betroffen)", + "Genehmigung oft durch erweitertes Gremium / Management / Lenkungsebene (nicht nur Standard-CAB)", + "Vollständige Bewertung, Business Case, ausführliche Planung & Tests, Kommunikationsplan", + "Häufig an Schwellenwerte gebunden (z. B. Kosten über X €, Ausfall kritischer Dienste)"], + bsp:"Rechenzentrumsumzug, Austausch eines Kernsystems, organisationsweite Plattformmigration." }, + { idee:"Der Regelfall für alles, was nicht vorab genehmigt ist und kein Notfall ist. Durchläuft den vollen Bewertungs- und Genehmigungsprozess.", + bed:["RfC (Request for Change) wird erfasst", + "Risiko- und Impact-Bewertung wird durchgeführt", + "Genehmigung durch Change-Manager bzw. CAB (Change Advisory Board) vor Umsetzung", + "Terminplanung (Scheduling), Test, ggf. Rollback-Plan", + "Geringes bis mittleres Risiko (die hochriskanten landen bei „Major“)"], + bsp:"Einführung einer neuen Software-Version, Konfigurationsänderung an einem produktiven System." }, + { idee:"Routine. Vorab genehmigt, weil sie oft vorkommt, das Risiko bekannt und niedrig ist und der Ablauf dokumentiert ist.", + bed:["Es existiert ein vorab freigegebenes Muster/Template für genau diese Änderung", + "Geringes, bekanntes Risiko, Auswirkung vorhersehbar", + "Wiederholbar, klar dokumentierter Ablauf", + "Keine Einzelfall-Genehmigung durch CAB/Change-Manager nötig — die Autorisierung gilt generell"], + bsp:"Standard-Passwort-Reset, Austausch eines defekten Standard-Geräts, Einspielen eines geprüften Routine-Patches." }, + { idee:"Muss eine Störung sofort beheben — beschleunigt umgesetzt; die formale Freigabe erfolgt nachgelagert.", + bed:["Akuter Notfall / drohender oder laufender Ausfall kritischer Dienste", + "Beschleunigtes Verfahren (Emergency-CAB bzw. Notfall-Autorisierung)", + "Umsetzung sofort — Dokumentation und formale Freigabe nachgelagert"], + bsp:"Sofort-Sperrung einer kompromittierten VPN-Zertifikatskette, Notfall-Hotfix einer kritischen Sicherheitslücke." } ]; +// Anzeige-Reihenfolge der Change-Arten (Indizes in CHANGE_TYPES): Standard, Emergency, Normal, Major +const CT_ORDER = [2, 3, 1, 0]; +// Feste, EINMALIG gemischte Deck-Reihenfolge ([service, change]) — bei jedem Start gleich, nicht gruppiert. +const DECK_ORDER = [[2,1],[0,3],[4,0],[1,2],[5,3],[3,0],[0,1],[2,3],[4,2],[1,0],[5,1],[3,2], + [2,0],[0,2],[4,3],[1,3],[5,0],[3,1],[2,2],[0,0],[4,1],[1,1],[5,2],[3,3]]; const USE_CASES = [ { service:"Zentrale VDI (Virtual-Desktop-Infrastructure)", desc:"Bereitstellung von virtuellen Windows-Desktops über das interne Rechenzentrum.", @@ -1140,20 +1174,16 @@ function renderCardBadge(){ /* ---------- Schritt 1: Action Card ziehen (Raster aller Karten) ---------- */ function renderDeck(){ - let grid = ""; - USE_CASES.forEach((u,si)=>{ - grid += `
${u.service}
`; - u.changes.forEach((c,ci)=>{ - grid += ``; - }); - grid += `
`; - }); + const cards = DECK_ORDER.map(([si,ci])=>{ + const c = USE_CASES[si].changes[ci]; + return ``; + }).join(""); $("#panel").innerHTML = `
Schritt 1 · Action Card ziehen
-

Welche Karte zieht ihr?

-

Tippt auf eine Action Card, um sie zu ziehen.

-
${grid}
`; +

Welche Karte habt ihr gezogen?

+

Tippt auf die Action Card, die ihr gezogen habt.

+
${cards}
`; $("#panel").querySelectorAll(".deckCard").forEach(el=>{ el.onclick=()=>{ S.service=+el.dataset.s; S.change=+el.dataset.c; S.classifyDone=false; S.classifyWrong=null; S.entryDone=false; S.entryWrong=null; @@ -1167,10 +1197,15 @@ function renderClassify(){ const card = acard(S.service,S.change); const cardBig = `${card.titel}`; if(!S.classifyDone){ - const choices = CHANGE_TYPES.map((t,i)=> - ``).join(""); - const legend = `

Legende — Change-Arten

` + - CHANGE_TYPES.map((t,i)=>`
${t}
${CHANGE_LEGEND[i]}
`).join("") + `
`; + const choices = CT_ORDER.map(i=> + ``).join(""); + const legend = `

Legende: Change-Arten im DIGITOM

` + + CT_ORDER.map(i=>{ const L = CHANGE_LEGEND[i]; + return `
${CHANGE_TYPES[i]}
` + + `
${L.idee}
` + + `
    ${L.bed.map(b=>`
  • ${b}
    • `).join("")}
` + + `
Beispiel: ${L.bsp}
`; + }).join("") + `
`; const hint = S.classifyWrong!=null ? `
Nicht ganz — überlegt nochmal und probiert es erneut.
` : ``; $("#panel").innerHTML = ` @@ -1178,11 +1213,11 @@ function renderClassify(){
${cardBig}
-

Welche Art von Change ist das?

+

Welche Art von Change könnte das sein?

Überlegt gemeinsam und wählt die passende Change-Art. Die Legende hilft beim Einordnen.

+ ${legend} ${hint}
${choices}
- ${legend}
`; @@ -1200,7 +1235,8 @@ function renderClassify(){
✓ Richtig: ${CHANGE_TYPES[correct]}

Warum?

-

${CHANGE_LEGEND[correct]}

+

${CHANGE_LEGEND[correct].idee}

+

Beispiel: ${CHANGE_LEGEND[correct].bsp}

diff --git a/04_Tablet-Quiz/app/sw.js b/04_Tablet-Quiz/app/sw.js index c945fa2..618f0fa 100644 --- a/04_Tablet-Quiz/app/sw.js +++ b/04_Tablet-Quiz/app/sw.js @@ -1,5 +1,5 @@ /* Service Worker — SLC-Workshop Companion (App-Shell, offline-first) */ -const CACHE = "slc-companion-v15"; +const CACHE = "slc-companion-v16"; const SHELL = ["./", "index.html", "manifest.webmanifest", "icon.svg"]; // Action-Card-Grafiken (cards/s-c.png) fuer Offline vorab cachen (alle 30). const CARDS = [];