-

04_Tablet-Quiz/README.md

@@ -3,9 +3,10 @@
 **Status:** App lauffähig (PWA) · Deploy vorbereitet · **Typ:** eigenständiges Software-Teilprojekt des SLC-Workshops
 
 > **Umsetzungsstand:** Die App liegt unter [`app/`](app/) als statische **PWA**
-> (offline-/kioskfähig). Sie führt den kompletten Flow durch (Action Card →
-> Startpunkt → optionale Tour → Station: Diskussion/Quiz/Auflösung → Debrief mit
-> **Markdown-/JSON-Export**). Inhalte (40 Stationen, 45 Quizfragen, 6 Use-Cases)
+> (offline-/kioskfähig). Flow: **Karten-Raster** (Action Card ziehen) → **Change-Art
+> bestimmen** (mit Legende, „nochmal versuchen" bis richtig) → **Phasen-Einstieg**
+> (Lebenszyklus-Phase anklicken) → **Stationen** (Diskussion/Quiz/Auflösung) →
+> **Debrief** mit **Markdown-/JSON-Export**. Inhalte (Stationen, Quizfragen, Use-Cases)
 > sind derzeit in `app/index.html` eingebettet. Die **finalen Action-Card-Grafiken**
 > (Freiburg-digital-Layout) liegen in `app/cards/` (`s<service>-c<change>.png`, **alle 30**).
 > **Deployment:** statisch, siehe
@@ -61,8 +62,12 @@ steht, sondern in der App liegt.
 ## 4. Ablauf (UI-Flow)
 
 ```
-[Start] → Szenario wählen (= Action Card)
-   → App führt zur aktuellen Station (linearer Lifecycle, Fortschritt sichtbar)
+[1] Action Card ziehen  → Raster aller Karten-Grafiken, eine antippen
+[2] Change-Art bestimmen → 5 Change-Arten + Legende; falsch = "nochmal", richtig = weiter
+[3] Erfolgreiche Kategorisierung → kurze Bestätigung + Warum
+[4] Einstieg finden     → Lebenszyklus groß: Phase anklicken (falsch = "nochmal")
+[5] Los geht's          → App nennt Start-Station + Begründung
+   → App führt ab Start-Station durch die Stationen (Fortschritt sichtbar)
    → Station:
        → Gruppe diskutiert am Board anhand der Kurzbezeichnung (App noch zu)
        → Quiz (vermittelnd): Frage(n) → Gruppentipp → "Auflösen" → richtig/falsch

04_Tablet-Quiz/app/index.html

@@ -160,6 +160,30 @@
   .tourProg { font-size:12px; color:var(--muted); margin-bottom:8px; font-variant-numeric:tabular-nums; }
   .tourNarr { background:#eef4fb; border-radius:12px; padding:16px 18px; margin:14px 0; font-size:16px; line-height:1.55; }
   .tourNarr h4 { margin:0 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--design); }
+
+  /* ---- Neuer Einstiegs-Flow (Deck / Classify / Entry) ---- */
+  .deck{display:flex;flex-direction:column;gap:16px}
+  .deckGroup .deckSvc{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:6px}
+  .deckRow{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
+  .deckCard{padding:0;border:1px solid var(--line);background:#fff;border-radius:10px;cursor:pointer;overflow:hidden;transition:transform .08s,box-shadow .08s}
+  .deckCard:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.16)}
+  .deckCard img{display:block;width:100%;height:auto}
+  .cardThumb{display:block;width:150px;border-radius:8px;margin:0 auto 14px;box-shadow:0 2px 10px rgba(0,0,0,.12)}
+  .choiceGrid{display:flex;flex-direction:column;gap:8px;margin:10px 0}
+  .choice{text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;font-size:15px;font-weight:600}
+  .choice:hover{border-color:var(--ink)}
+  .choice.bad{border-color:var(--bad);background:#fdf3f3}
+  .legend{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-top:12px;background:#f7f9fb}
+  .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}
+  .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}
+  .phaseZone{padding:22px 8px;border-radius:12px;color:#fff;font-weight:800;font-size:14px;text-align:center;cursor:pointer;border:0}
+  .phaseZone:hover{filter:brightness(1.06)}
+  .phaseZone.bad{outline:3px solid var(--bad);outline-offset:2px}
+  @media(max-width:760px){.deckRow{grid-template-columns:repeat(3,1fr)}.phaseRow{grid-template-columns:repeat(3,1fr)}}
 </style>
 </head>
 <body>
@@ -286,6 +310,13 @@ const CHANGE_TYPES = [
   "Standard Change",
   "Emergency Change"
 ];
+const CHANGE_LEGEND = [
+  "Strategisch getrieben, verändert den Service grundlegend — voller Lebenszyklus ab dem Design; Freigabe auf oberster Ebene.",
+  "Bringt neue Komponenten/Funktionen und braucht ein echtes Design — aber kleinere Tragweite und Freigabe-Ebene als Top-Level.",
+  "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."
+];
 const USE_CASES = [
   { service:"Zentrale VDI (Virtual-Desktop-Infrastructure)",
     desc:"Bereitstellung von virtuellen Windows-Desktops über das interne Rechenzentrum.",
@@ -825,8 +856,10 @@ const STATIONEN = [
 /* ====================== STATE ====================== */
 const LS_KEY = "slc-companion-proto";
 function defaultState(){
-  return { view:"card", service:0, change:0, startIndex:null, startRevealed:false,
-           tourIndex:0, index:0, stage:"discuss", quizIndex:0,
+  return { view:"deck", service:null, change:null,
+           classifyDone:false, classifyWrong:null,
+           entryDone:false, entryWrong:null,
+           index:0, stage:"discuss", quizIndex:0,
            picks:{}, done:{}, unclear:{} };
 }
 let S = load();
@@ -880,152 +913,128 @@ function renderList(){
 function draw(){
   document.body.classList.toggle("runMode", S.view==="run");
   renderCardBadge();
-  if(S.view==="card") return renderCardScreen();
-  if(S.view==="tour") return renderTour();
-  if(S.view==="start") return renderStartScreen();
+  if(S.view==="deck")     return renderDeck();
+  if(S.view==="classify") return renderClassify();
+  if(S.view==="entry")    return renderEntry();
   renderRun();
 }
 
 function renderCardBadge(){
   const el = $("#cardBadge");
-  if(S.view==="card" || S.view==="tour"){ el.style.display="none"; el.innerHTML=""; return; }
+  if(S.view==="deck" || S.service==null){ el.style.display="none"; el.innerHTML=""; return; }
   el.style.display="flex";
-  el.innerHTML = `<span class="cb-svc">${USE_CASES[S.service].service}</span><span class="ctChip">${CHANGE_TYPES[S.change]}</span>`;
+  const chip = S.classifyDone ? `<span class="ctChip">${CHANGE_TYPES[S.change]}</span>` : ``;
+  el.innerHTML = `<span class="cb-svc">${USE_CASES[S.service].service}</span>${chip}`;
 }
 
-/* ---------- Screen 1: Action Card ziehen ---------- */
-function renderCardScreen(){
+/* ---------- Schritt 1: Action Card ziehen (Raster aller Karten) ---------- */
+function renderDeck(){
+  let grid = "";
+  USE_CASES.forEach((u,si)=>{
+    grid += `<div class="deckGroup"><div class="deckSvc">${u.service}</div><div class="deckRow">`;
+    u.changes.forEach((c,ci)=>{
+      grid += `<button class="deckCard" data-s="${si}" data-c="${ci}" title="${c.titel}">
+        <img src="cards/s${si}-c${ci}.png" alt="${c.titel}" loading="lazy"></button>`;
+    });
+    grid += `</div></div>`;
+  });
   $("#panel").innerHTML = `
-    <div class="setupHead">Schritt 1 · Action Card</div>
-    <h2 class="setupTitle">Welches Szenario zieht ihr?</h2>
-    <p class="muted">Wählt Service und Change-Typ der gezogenen Action Card – oder zieht zufällig. Diese Karte liegt an der aktuellen Station und wandert mit durch alle Stationen.</p>
-    <div class="cardForm">
-      <label>Service<select id="serviceSel"></select></label>
-      <label>Change-Typ<select id="changeSel"></select></label>
-    </div>
-    <div class="ctText" id="cardTrigger">${cardMedia(S.service,S.change)}</div>
-    <div class="actions">
-      <button class="ghost" id="randomCard">🎲 Zufällig ziehen</button>
-      <button class="ghost" id="tourBtn">📘 Geführtes Beispiel</button>
-      <div class="spacer"></div>
-      <button class="primary" id="toStart">Weiter → Startpunkt wählen</button>
-    </div>
-    <p class="note" style="text-align:left">Neu hier? Das „Geführte Beispiel" spielt einen kompletten Fall (Bürgerportal) Station für Station durch – zum Verstehen, ohne Quiz.</p>`;
-  const svc=$("#serviceSel"), ch=$("#changeSel");
-  svc.innerHTML = USE_CASES.map((u,i)=>`<option value="${i}">${u.service}</option>`).join("");
-  ch.innerHTML = CHANGE_TYPES.map((c,i)=>`<option value="${i}">${c}</option>`).join("");
-  svc.value=S.service; ch.value=S.change;
-  const refresh=()=>{ $("#cardTrigger").innerHTML=cardMedia(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(); };
-  $("#tourBtn").onclick=()=>{ S.view="tour"; S.tourIndex=0; save(); draw(); };
-  $("#toStart").onclick=()=>{ S.view="start"; S.startRevealed=false; save(); draw(); };
+    <div class="setupHead">Schritt 1 · Action Card ziehen</div>
+    <h2 class="setupTitle">Welche Karte zieht ihr?</h2>
+    <p class="muted">Tippt auf eine Action Card, um sie zu ziehen.</p>
+    <div class="deck">${grid}</div>`;
+  $("#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;
+      S.view="classify"; save(); draw(); };
+  });
 }
 
-/* ---------- Geführte Tour (ein Beispiel durch alle Stationen) ---------- */
-function renderTour(){
-  const st = STATIONEN[S.tourIndex];
-  const ph = PHASEN[st.phase];
-  const chip = st.typ==="gate"
-    ? `<span class="phaseChip gateChip">⛩ Gate ${st.gateNr}</span>`
-    : `<span class="phaseChip" style="background:${ph.color}">${ph.label}</span>`;
-  const raci = st.raci.map(([r,c])=>`<tr><td>${roleLabel(r)}</td><td><span class="raciBadge raci-${c}">${c}</span></td></tr>`).join("");
-  let extra="";
-  if(st.pfade){
-    extra += `<h4>Entscheidungspfade</h4><div class="pfade">` +
-      st.pfade.map(([n,d])=>`<div class="pfad"><b>${n}</b><span style="color:var(--muted)">${d}</span></div>`).join("") + `</div>`;
-  }
-  const narr = TOUR.text[st.id] || "—";
-  const last = S.tourIndex === STATIONEN.length-1;
+/* ---------- Schritt 2+3: Change-Art bestimmen (retry bis richtig) -------- */
+function renderClassify(){
+  const correct = S.change;
+  const card = acard(S.service,S.change);
+  const thumb = `<img class="cardThumb" src="cards/s${S.service}-c${S.change}.png" alt="${card.titel}">`;
+  if(!S.classifyDone){
+    const choices = CHANGE_TYPES.map((t,i)=>
+      `<button class="choice ${S.classifyWrong===i?'bad':''}" data-i="${i}">${t}</button>`).join("");
+    const legend = `<div class="legend"><h4>Legende — Change-Arten</h4><dl>` +
+      CHANGE_TYPES.map((t,i)=>`<dt>${t}</dt><dd>${CHANGE_LEGEND[i]}</dd>`).join("") + `</dl></div>`;
+    const hint = S.classifyWrong!=null
+      ? `<div class="hint bad">Nicht ganz — überlegt nochmal und probiert es erneut.</div>` : ``;
     $("#panel").innerHTML = `
-    <div class="tourBanner">📘 Geführtes Beispiel · <b>${USE_CASES[TOUR.service].service}</b> — ${CHANGE_TYPES[TOUR.change]}<br>
-      <span style="color:var(--muted)"><b>${acard(TOUR.service,TOUR.change).titel}</b> — ${acard(TOUR.service,TOUR.change).text}</span></div>
-    <div class="tourProg">Station ${S.tourIndex+1} von ${STATIONEN.length}</div>
-    ${chip}
-    <div class="stationName">${st.name}</div>
-    <div class="stationId">${st.id}</div>
-    <div class="tourNarr"><h4>In diesem Beispiel</h4>${narr}</div>
-    <div class="reveal">
-      <h4>Fachlich (aus dem Blueprint)</h4>
-      <p>${st.beschreibung}</p>
-      <h4>Umfasst</h4><ul>${st.umfasst.map(u=>`<li>${u}</li>`).join("")}</ul>
-      <h4>Rollen / RACI</h4>
-      <table class="raci"><thead><tr><th>Rolle</th><th>RACI</th></tr></thead><tbody>${raci}</tbody></table>
-      <h4>Artefakt</h4><p>${st.artefakt}</p>
-      ${extra}
-    </div>
+      <div class="setupHead">Schritt 2 · Change-Art bestimmen</div>
+      ${thumb}
+      <h2 class="setupTitle">Welche Art von Change ist das?</h2>
+      <p class="muted">Überlegt gemeinsam und wählt die passende Change-Art. Die Legende hilft beim Einordnen.</p>
+      ${hint}
+      <div class="choiceGrid">${choices}</div>
+      ${legend}
+      <div class="actions"><button class="ghost" id="backDeck">← Andere Karte</button></div>`;
+    $("#panel").querySelectorAll(".choice").forEach(el=>{
+      el.onclick=()=>{ const i=+el.dataset.i;
+        if(i===correct){ S.classifyWrong=null; S.classifyDone=true; } else { S.classifyWrong=i; }
+        save(); renderClassify(); };
+    });
+    $("#backDeck").onclick=()=>{ S.view="deck"; save(); draw(); };
+  } else {
+    $("#panel").innerHTML = `
+      <div class="setupHead">Schritt 3 · Erfolgreiche Kategorisierung</div>
+      ${thumb}
+      <div class="hint ok">✓ Richtig: ${CHANGE_TYPES[correct]}</div>
+      <div class="recBox"><h4>Warum?</h4>
+        <p style="margin:0;color:var(--muted)">${CHANGE_LEGEND[correct]}</p></div>
       <div class="actions">
-      <button class="ghost" id="tourExit">Tour beenden</button>
-      <button class="ghost" id="tourBack" ${S.tourIndex===0?'disabled':''}>← Zurück</button>
+        <button class="ghost" id="backDeck">← Andere Karte</button>
         <div class="spacer"></div>
-      <button class="primary" id="tourNext">${last?'Fertig — zur Startseite':'Weiter →'}</button>
+        <button class="primary" id="toEntry">Weiter → Einstieg finden</button>
       </div>`;
-  $("#tourExit").onclick=()=>{ S.view="card"; save(); draw(); };
-  $("#tourBack").onclick=()=>{ if(S.tourIndex>0){ S.tourIndex--; save(); renderTour(); } };
-  $("#tourNext").onclick=()=>{ if(last){ S.view="card"; save(); draw(); } else { S.tourIndex++; save(); renderTour(); } };
+    $("#backDeck").onclick=()=>{ S.view="deck"; save(); draw(); };
+    $("#toEntry").onclick=()=>{ S.view="entry"; S.entryDone=false; S.entryWrong=null; save(); draw(); };
+  }
 }
 
-/* ---------- Screen 2: Startpunkt bestimmen (Tipp → Auflösen) ---------- */
-function renderStartScreen(){
+/* ---------- Schritt 4+5: Einstieg finden (Phase anklicken) -------------- */
+function renderEntry(){
   const rec = START_EMPFEHLUNG[S.change];
   const recIndex = STATIONEN.findIndex(s=>s.id===rec.id);
-  const revealed = S.startRevealed;
-  const groups={};
-  STATIONEN.forEach((st,i)=>{ (groups[st.phase]=groups[st.phase]||[]).push({st,i}); });
-  let list="";
-  for(const ph in PHASEN){
-    if(!groups[ph]) continue;
-    list += `<div class="pickerPhase">${PHASEN[ph].label}</div>`;
-    groups[ph].forEach(({st,i})=>{
-      let cls="pickerItem";
-      if(revealed){
-        if(i===recIndex) cls+=" correct";
-        else if(i===S.startIndex) cls+=" wrongPick";
-      } else if(i===S.startIndex) cls+=" sel";
-      list += `<div class="${cls}" data-i="${i}">
-        <span class="dot" style="background:${PHASEN[ph].color}"></span>
-        <span class="id">${st.id}</span>
-        <span class="nm">${st.name}</span>
-        ${st.typ==="gate"?`<span class="gate">Gate ${st.gateNr}</span>`:''}
-      </div>`;
-    });
-  }
-  let head, actions;
-  if(!revealed){
-    head = `<p class="muted">Welches Tile ist der sinnvolle Einstieg für diese Action Card? Diskutiert in der Gruppe, wählt ein Tile und löst dann auf.</p>`;
-    actions = `<button class="ghost" id="backToCard">← Action Card</button>
-      <div class="spacer"></div>
-      <button class="primary" id="revealStart" ${S.startIndex==null?'disabled':''}>Auflösen</button>`;
-  } else {
-    const tip = S.startIndex==null ? `` :
-      (S.startIndex===recIndex
-        ? `<p style="color:var(--ok);font-weight:600;margin:0 0 8px">Euer Tipp ${STATIONEN[S.startIndex].id} passt zum empfohlenen Einstieg. ✓</p>`
-        : `<p style="color:var(--bad);font-weight:600;margin:0 0 8px">Euer Tipp war ${STATIONEN[S.startIndex].id} — nicht der empfohlene Einstieg.</p>`);
-    head = `${tip}<div class="recBox"><h4>Empfohlener Einstieg · ${CHANGE_TYPES[S.change]}</h4>
-      <p style="margin:0 0 6px"><b>${rec.id} — ${STATIONEN[recIndex].name}</b></p>
-      <p style="margin:0;color:var(--muted)">${rec.grund}</p></div>`;
-    const ownDiff = (S.startIndex!=null && S.startIndex!==recIndex);
-    actions = `<button class="ghost" id="backToCard">← Action Card</button>
-      <div class="spacer"></div>
-      ${ownDiff?`<button class="ghost" id="startOwn">Auf eigener Wahl starten</button>`:``}
-      <button class="primary" id="startRec">Auf ${rec.id} starten →</button>`;
-  }
+  const correctPhase = STATIONEN[recIndex].phase;
+  const order = ["design","transition","operation","support","review"];
+  if(!S.entryDone){
+    const zones = order.map(ph=>
+      `<button class="phaseZone ${S.entryWrong===ph?'bad':''}" data-ph="${ph}"
+         style="background:${PHASEN[ph].color}">${PHASEN[ph].label}</button>`).join("");
+    const hint = S.entryWrong
+      ? `<div class="hint bad">Diese Phase passt nicht zur Change-Art — denkt an die Definition und probiert es erneut.</div>` : ``;
     $("#panel").innerHTML = `
-    <div class="setupHead">Schritt 2 · Startpunkt</div>
-    <h2 class="setupTitle">Wo startet ihr sinnvollerweise?</h2>
-    ${head}
-    <div class="pickerList">${list}</div>
-    <div class="actions">${actions}</div>`;
-  if(!revealed){
-    $("#panel").querySelectorAll(".pickerItem").forEach(el=>{
-      el.onclick=()=>{ S.startIndex=+el.dataset.i; save(); renderStartScreen(); };
+      <div class="setupHead">Schritt 4 · Einstieg finden</div>
+      <div class="hint ok">Change-Art: ${CHANGE_TYPES[S.change]}</div>
+      <h2 class="setupTitle">In welcher Phase startet dieser Change?</h2>
+      <p class="muted">Klickt auf die Lebenszyklus-Phase, in der dieser Change einsteigt.</p>
+      ${hint}
+      <div class="phaseRow">${zones}</div>
+      <div class="actions"><button class="ghost" id="backClassify">← zurück</button></div>`;
+    $("#panel").querySelectorAll(".phaseZone").forEach(el=>{
+      el.onclick=()=>{ const ph=el.dataset.ph;
+        if(ph===correctPhase){ S.entryWrong=null; S.entryDone=true; } else { S.entryWrong=ph; }
+        save(); renderEntry(); };
     });
+    $("#backClassify").onclick=()=>{ S.view="classify"; save(); draw(); };
+  } else {
+    $("#panel").innerHTML = `
+      <div class="setupHead">Schritt 5 · Los geht's</div>
+      <div class="hint ok">✓ Einstieg: ${PHASEN[correctPhase].label}</div>
+      <div class="recBox"><h4>Start-Station</h4>
+        <p style="margin:0 0 6px"><b>${rec.id} — ${STATIONEN[recIndex].name}</b></p>
+        <p style="margin:0;color:var(--muted)">${rec.grund}</p></div>
+      <div class="actions">
+        <button class="ghost" id="backClassify">← zurück</button>
+        <div class="spacer"></div>
+        <button class="primary" id="startRun">Los geht's →</button>
+      </div>`;
+    $("#backClassify").onclick=()=>{ S.view="classify"; save(); draw(); };
+    $("#startRun").onclick=()=>{ S.index=recIndex; S.view="run"; S.stage="discuss"; S.quizIndex=0; save(); draw(); };
   }
-  $("#backToCard").onclick=()=>{ S.view="card"; S.startRevealed=false; save(); draw(); };
-  if($("#revealStart")) $("#revealStart").onclick=()=>{ if(S.startIndex==null) return; S.startRevealed=true; save(); renderStartScreen(); };
-  if($("#startRec")) $("#startRec").onclick=()=>{ S.index=recIndex; S.view="run"; S.stage="discuss"; S.quizIndex=0; save(); draw(); };
-  if($("#startOwn")) $("#startOwn").onclick=()=>{ S.index=S.startIndex; S.view="run"; S.stage="discuss"; S.quizIndex=0; save(); draw(); };
 }
 
 /* ====================== RENDER: RUN (Station) ====================== */