From 668367a241095d41d93a00dae298baf0429e1b57 Mon Sep 17 00:00:00 2001 From: breitenbach76 Date: Fri, 5 Jun 2026 17:01:28 +0200 Subject: [PATCH] Companion-App: 30 Action-Card-Texte (Titel + Szenario) eingebaut - USE_CASES.changes von Strings auf {titel, text} umgestellt (6 Services x 5 = 30 Action Cards, Stil wie das Freiburg-Action-Card-PDF). - UI zeigt Titel (fett) + Text + "Was passiert an welchen Stellen?"; Karten-Screen, Run-Token, Tour-Banner und Debrief (MD+JSON) nachgezogen. - Helfer acard()/cardHtml(); JS-Syntax + Datenform verifiziert. Co-Authored-By: Claude Opus 4.8 --- 04_Tablet-Quiz/app/index.html | 78 +++++++++++++++++++---------------- 1 file changed, 42 insertions(+), 36 deletions(-) diff --git a/04_Tablet-Quiz/app/index.html b/04_Tablet-Quiz/app/index.html index 94058c5..7c87540 100644 --- a/04_Tablet-Quiz/app/index.html +++ b/04_Tablet-Quiz/app/index.html @@ -291,56 +291,56 @@ const USE_CASES = [ { service:"Zentrale VDI (Virtual-Desktop-Infrastructure)", desc:"Bereitstellung von virtuellen Windows-Desktops über das interne Rechenzentrum.", changes:[ - "Strategische IT-Richtlinie auf Geheiß des OB, die den Umstieg von einer proprietären VDI-Lösung auf eine Open-Source-Alternative (z. B. OpenStack + Thin-Client) vorschreibt.", - "Das Bauamt fordert die Einführung einer neuen Fachsoftware (z. B. ein GIS-Tool), die auf dem virtuellen Desktop zugänglich sein soll.", - "Rebranding des Logos der Stadt Freiburg: Anpassung der Desktop-Hintergrundgrafik erforderlich.", - "Quartalsweises Update der VDI-Host-Hypervisor-Firmware – im Standard-Change-Katalog verankert.", - "Stromausfall: Ausfall eines VDI-Host-Clusters, der die sofortige Migration der Sitzungen auf ein Backup-Cluster erfordert." + {titel:"Open Source von oben!", text:"Der OB gibt die Richtung vor: Die proprietäre VDI-Lösung soll auf eine Open-Source-Alternative (OpenStack + Thin-Client) umgestellt werden."}, + {titel:"Bauamt will mehr!", text:"Das Bauamt fordert ein neues GIS-Fachverfahren, das künftig direkt auf dem virtuellen Desktop laufen soll."}, + {titel:"Tapetenwechsel", text:"Die Stadt bekommt ein neues Logo — der Desktop-Hintergrund aller virtuellen Arbeitsplätze muss angepasst werden."}, + {titel:"Quartalspflege", text:"Das turnusmäßige Firmware-Update der VDI-Host-Hypervisoren steht an — im Standard-Change-Katalog längst hinterlegt."}, + {titel:"Blackout!", text:"Ein Stromausfall reißt ein ganzes VDI-Host-Cluster aus dem Betrieb — die Sitzungen müssen sofort auf ein Backup-Cluster migriert werden."} ]}, { service:"Managed VPN-Access Service", desc:"Zentral verwalteter VPN-Dienst, der Mitarbeitenden der Fachämter sicheren Remote-Zugriff auf interne Systeme (Intranet, Fachanwendungen, Datenbanken) ermöglicht.", changes:[ - "EU-weite neue Datenschutz- oder IT-Sicherheitsverordnung, die die gesamte VPN-Architektur neu gestaltet.", - "HPA fordert die Einführung einer neuen Authentifizierungsmethode (z. B. verpflichtende Nutzung von FIDO2-Security-Keys).", - "HPA möchte eine interne Anwendung (z. B. ein neues Intranet-Portal) in die Split-Tunnel-Liste ergänzen, weil Nutzer nun von zu Hause darauf zugreifen müssen.", - "Regelmäßige (monatliche) Firmware-Updates der VPN-Appliance, bereits im Change-Katalog als Standard-Change definiert.", - "Erfolgreicher Phishing-Angriff: Eine VPN-Benutzerzertifikatskette ist kompromittiert – sofortige Sperrung und Neu-Ausstellung der Zertifikate erforderlich." + {titel:"Brüssel ruft!", text:"Eine neue EU-weite IT-Sicherheitsverordnung zwingt dazu, die gesamte VPN-Architektur neu aufzustellen."}, + {titel:"Schlüsselpflicht", text:"Das Hauptpersonalamt verlangt eine neue Authentifizierung: FIDO2-Security-Keys werden für alle verpflichtend."}, + {titel:"Heimvorteil", text:"Ein neues Intranet-Portal soll in die Split-Tunnel-Liste, damit Mitarbeitende auch aus dem Homeoffice darauf zugreifen."}, + {titel:"Monatsroutine", text:"Das monatliche Firmware-Update der VPN-Appliance steht an — als Standard-Change bereits freigegeben."}, + {titel:"Gephisht!", text:"Ein erfolgreicher Phishing-Angriff hat eine VPN-Zertifikatskette kompromittiert — sofort sperren und neu ausstellen."} ]}, { service:"Online-Bürgerportal für Meldungen & Anträge", desc:"Zentrales Web-Portal, über das Bürger*innen Meldungen (z. B. Straßenreparatur, Lärm) und Anträge (z. B. Baugenehmigung, Personalausweis) digital einreichen und den Status verfolgen.", changes:[ - "Neues Landesgesetz zur digitalen Bürgerbeteiligung (z. B. verpflichtende Online-Beteiligungs-Tools für größere Baumaßnahmen) → komplette Erweiterung des Portals um Beteiligungs-Module.", - "Neuer Gemeinderat fordert Einführung eines neuen Meldetyps (z. B. „Klimaschutz-Meldungen“) durch das Umweltamt – neue Formulare und Workflows erforderlich.", - "Bürgerservice meldet Rechtschreibfehler in einem statischen Hinweis-Text, der geändert werden muss.", - "Monatliches Sicherheits-Patch-Update des Web-Servers (Apache/Nginx) – bereits im Change-Katalog definiert.", - "Entdeckung einer kritischen XSS-Lücke in einem Eingabe-Formular, die eine sofortige Hot-Fix-Implementierung nötig macht." + {titel:"Mitreden, Pflicht!", text:"Ein neues Landesgesetz schreibt digitale Bürgerbeteiligung vor — das Portal muss um komplette Beteiligungs-Module erweitert werden."}, + {titel:"Ratsbeschluss!", text:"Der Gemeinderat will einen neuen Meldetyp „Klimaschutz“ — das Umweltamt braucht dafür eigene Formulare und Workflows."}, + {titel:"Rotstift gefragt", text:"Der Bürgerservice meldet einen Rechtschreibfehler in einem statischen Hinweistext, der korrigiert werden muss."}, + {titel:"Patchday", text:"Das monatliche Sicherheits-Patch des Webservers (Apache/Nginx) steht an — im Change-Katalog definiert."}, + {titel:"Lücke im Formular!", text:"In einem Eingabe-Formular wird eine kritische XSS-Schwachstelle entdeckt — ein Hotfix muss sofort raus."} ]}, { service:"Zentrales Dokumenten-Management-System (DMS)", desc:"Elektronisches Archiv, das alle ein- und ausgehenden Dokumente (PDF, Scans, E-Mails) zentral speichert, versioniert und revisionssicher archiviert.", changes:[ - "EU-DSGVO-Ergänzung (z. B. neue Vorgaben zur Daten-Minimierung) → komplette Neugestaltung des Metadaten-Modells und der Archivierungs-Policies.", - "Einführung eines neuen Fachverfahrens (z. B. „Bürgerbeteiligungs-Verfahren“), das eigene Dokumenten-Klassen und Workflows erfordert.", - "Rückmeldung aus dem Finanzamt: Ein Metadaten-Feld (z. B. neues Dropdown-Feld „Kostenstelle“) muss angepasst werden.", - "Quartalsweises Update der DMS-Software-Version (Sicherheits- und Funktions-Patches) – im Standard-Change-Katalog.", - "Ransomware-Alarm: Verdächtige Verschlüsselung von Dokumenten – sofortige Isolation des Storage-Systems und Wiederherstellung aus letzten Snapshots." + {titel:"Datendiät", text:"Eine DSGVO-Ergänzung zur Datenminimierung erzwingt die komplette Neugestaltung von Metadaten-Modell und Archivierungs-Policies."}, + {titel:"Akten-Zuwachs", text:"Ein neues Fachverfahren zieht ein und braucht eigene Dokumentenklassen und Workflows im DMS."}, + {titel:"Dropdown-Wunsch", text:"Das Finanzamt bittet um ein neues Metadaten-Feld „Kostenstelle“ als Auswahlliste."}, + {titel:"Versionspflege", text:"Das quartalsweise Update der DMS-Software (Sicherheits- und Funktions-Patches) steht an."}, + {titel:"Ransomware!", text:"Alarm: Dokumente werden verdächtig verschlüsselt — Storage sofort isolieren und aus den letzten Snapshots wiederherstellen."} ]}, { service:"Kommunales GIS-Portal (Geoinformations-System)", desc:"Web-basiertes Karten- und Analyse-Portal, das Fachämtern (Bau, Umwelt, Verkehr) räumliche Daten (Flurstücke, Infrastruktur, Umweltzonen) und bearbeitbare Layer bereitstellt.", changes:[ - "Bundesweite Vorgabe zur Nutzung von EU-Standards → komplette Migration des GIS-Stacks zu konformen Services und Datenmodellen.", - "Das Umweltamt möchte ein neues Analyse-Modul (z. B. „Klimarisiko-Analyse“) einführen, das neue Daten-Layer und Rechen-Ressourcen erfordert.", - "Rückmeldung aus dem Bauamt: Korrektur einer falschen Beschriftung eines Karten-Layers.", - "Monatliches Update der GIS-Software (z. B. GeoServer 2.23 → 2.24) – im Standard-Change-Katalog definiert.", - "Entdeckung einer kritischen Schwachstelle an einer Schnittstelle, die unautorisierten Datenzugriff ermöglicht → sofortige Deaktivierung des Dienstes und Patch-Roll-out." + {titel:"Norm-Zwang", text:"Eine bundesweite Vorgabe zu EU-Standards erzwingt die komplette Migration des GIS-Stacks auf konforme Services und Datenmodelle."}, + {titel:"Klimarisiko im Blick", text:"Das Umweltamt will ein neues Analyse-Modul „Klimarisiko“ — mit neuen Daten-Layern und Rechen-Ressourcen."}, + {titel:"Falsch beschriftet", text:"Das Bauamt meldet eine falsche Beschriftung eines Karten-Layers, die korrigiert werden muss."}, + {titel:"GeoServer-Update", text:"Das monatliche Update der GIS-Software (GeoServer 2.23 → 2.24) steht an — im Standard-Change-Katalog."}, + {titel:"Schnittstelle offen!", text:"An einer Schnittstelle wird eine kritische Schwachstelle entdeckt, die unautorisierten Datenzugriff erlaubt — Dienst sofort abschalten und patchen."} ]}, { service:"Beschaffungs- und Vertrags-System für Fachämter", desc:"Web-Applikation, über die Fachämter interne Beschaffungen (Material, Dienstleistungen) anlegen, prüfen und Verträge digital verwalten.", changes:[ - "Neue EU-Vergaberichtlinie zwingt zur Einführung von e-Invoicing und erweiterten Transparenz-Reports.", - "Einführung eines neuen Lieferanten-Portals (z. B. für Badenova), das neue API-Schnittstellen und Authentifizierungs-Flows erfordert.", - "Rückmeldung aus dem Finanzamt: Anpassung eines Formular-Labels (z. B. „Kostenstelle“ → „Kostenstelle (4-stellig)“).", - "Quartalsweises Sicherheits-Patch-Update des Anwendungs-Servers – bereits im Change-Katalog.", - "Entdeckung einer kritischen Schwachstelle im Vertrags-Upload-Modul, die das Hochladen von Schadcode ermöglicht → sofortige Deaktivierung des Upload-Endpoints und Hot-Fix." + {titel:"Vergabe neu!", text:"Eine neue EU-Vergaberichtlinie zwingt zur Einführung von E-Invoicing und erweiterten Transparenz-Reports."}, + {titel:"Portal für Partner", text:"Ein neues Lieferanten-Portal (z. B. für Badenova) soll andocken — mit neuen API-Schnittstellen und Authentifizierungs-Flows."}, + {titel:"Vierstellig, bitte", text:"Das Finanzamt wünscht eine kleine Anpassung: aus dem Label „Kostenstelle“ wird „Kostenstelle (4-stellig)“."}, + {titel:"Patch-Quartal", text:"Das quartalsweise Sicherheits-Patch des Anwendungsservers steht an — bereits im Change-Katalog."}, + {titel:"Upload-Falle!", text:"Im Vertrags-Upload wird eine kritische Lücke entdeckt, über die sich Schadcode hochladen lässt — Endpoint sofort sperren, Hotfix einspielen."} ]} ]; @@ -852,6 +852,11 @@ const $ = s => document.querySelector(s); const cur = () => STATIONEN[S.index]; function pkey(sid, qi){ return sid+"#"+qi; } function roleLabel(id){ return ROLLEN[id] || id; } +function acard(si, ci){ return USE_CASES[si].changes[ci]; } // {titel, text} +function cardHtml(si, ci){ const c = acard(si, ci); + return `
${c.titel}
` + + `
${c.text}
` + + `
Was passiert an welchen Stellen?
`; } /* ====================== RENDER: SIDEBAR ====================== */ function renderList(){ @@ -906,7 +911,7 @@ function renderCardScreen(){ -
${USE_CASES[S.service].changes[S.change]}
+
${cardHtml(S.service,S.change)}
@@ -918,7 +923,7 @@ function renderCardScreen(){ svc.innerHTML = USE_CASES.map((u,i)=>``).join(""); ch.innerHTML = CHANGE_TYPES.map((c,i)=>``).join(""); svc.value=S.service; ch.value=S.change; - const refresh=()=>{ $("#cardTrigger").textContent=USE_CASES[S.service].changes[S.change]; }; + const refresh=()=>{ $("#cardTrigger").innerHTML=cardHtml(S.service,S.change); }; svc.onchange=()=>{ S.service=+svc.value; save(); refresh(); }; ch.onchange=()=>{ S.change=+ch.value; save(); refresh(); }; $("#randomCard").onclick=()=>{ S.service=Math.floor(Math.random()*USE_CASES.length); S.change=Math.floor(Math.random()*CHANGE_TYPES.length); save(); draw(); }; @@ -943,7 +948,7 @@ function renderTour(){ const last = S.tourIndex === STATIONEN.length-1; $("#panel").innerHTML = `
📘 Geführtes Beispiel · ${USE_CASES[TOUR.service].service} — ${CHANGE_TYPES[TOUR.change]}
- ${USE_CASES[TOUR.service].changes[TOUR.change]}
+ ${acard(TOUR.service,TOUR.change).titel} — ${acard(TOUR.service,TOUR.change).text}
Station ${S.tourIndex+1} von ${STATIONEN.length}
${chip}
${st.name}
@@ -1046,7 +1051,7 @@ function renderRun(){
${st.id}
Action Card: ${USE_CASES[S.service].service} ${CHANGE_TYPES[S.change]} -
${USE_CASES[S.service].changes[S.change]}
+
${acard(S.service,S.change).titel} — ${acard(S.service,S.change).text}
`; @@ -1183,7 +1188,7 @@ function openDebrief(){ let md = `# SLC-Workshop — Debrief\n\n`; md += `**Service:** ${USE_CASES[S.service].service}\n`; md += `**Change-Typ:** ${CHANGE_TYPES[S.change]}\n`; - md += `**Auslöser:** ${USE_CASES[S.service].changes[S.change]}\n`; + md += `**Action Card:** „${acard(S.service,S.change).titel}“ — ${acard(S.service,S.change).text}\n`; md += `**Stationen bearbeitet:** ${doneN}/${STATIONEN.length}\n`; md += `**Quiz:** ${correct}/${total} richtig\n\n`; md += `## Als unklar markiert\n`; @@ -1199,7 +1204,8 @@ function openDebrief(){ erzeugt: stamp, service: USE_CASES[S.service].service, changeTyp: CHANGE_TYPES[S.change], - ausloeser: USE_CASES[S.service].changes[S.change], + actionCard: acard(S.service,S.change).titel, + ausloeser: acard(S.service,S.change).text, stationenBearbeitet: doneN, stationenGesamt: STATIONEN.length, quiz: { richtig: correct, gesamt: total },