From 6d09b07dec1bd309c91acd18986afd21a5e30beb Mon Sep 17 00:00:00 2001 From: breitenbach76 Date: Sun, 7 Jun 2026 12:52:01 +0200 Subject: [PATCH] v7 --- 04_Tablet-Quiz/app/index.html | 146 +++++++++++++++++++++------------- 1 file changed, 91 insertions(+), 55 deletions(-) diff --git a/04_Tablet-Quiz/app/index.html b/04_Tablet-Quiz/app/index.html index c015865..cc49586 100644 --- a/04_Tablet-Quiz/app/index.html +++ b/04_Tablet-Quiz/app/index.html @@ -144,6 +144,13 @@ details.det>summary::before{content:"▸ ";color:var(--muted)} details.det[open]>summary::before{content:"▾ "} details.det>div,details.det>p,details.det>ul{margin-top:10px} + /* Schrittweise Aktivitaet: Aufloesung */ + .aufBox{background:#f1faf4;border:1px solid #cde6d6;border-left:3px solid var(--ok);border-radius:10px;padding:14px 16px;margin:14px 0 4px} + .aufBox .aufH{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)} + .aufBox ul{margin:6px 0 0;padding-left:20px} + .aufBox ul li{margin:3px 0} + .roleChips{display:flex;flex-wrap:wrap;gap:6px} + .roleChip{background:#eef0f3;border-radius:999px;padding:3px 11px;font-size:13px} .actions { display:flex; gap:10px; align-items:center; margin-top:24px; flex-wrap:wrap; } .actions .spacer { flex:1; } @@ -196,6 +203,7 @@ .classifyTop{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:26px;align-items:start;margin:18px 0 6px} .classifyCard{display:block;width:100%;border-radius:12px;box-shadow:0 3px 16px rgba(0,0,0,.16)} .classifyMain{min-width:0} + .classifyMain .phaseRow{grid-template-columns:repeat(2,1fr);margin-top:12px} @media(max-width:680px){.classifyTop{grid-template-columns:1fr}.classifyCard{max-width:300px;margin:0 auto}.classifyMain{margin-top:6px}} .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)} @@ -863,6 +871,7 @@ function defaultState(){ classifyDone:false, classifyWrong:null, entryDone:false, entryWrong:null, index:0, stage:"discuss", quizIndex:0, + actStep:0, actReveal:false, picks:{}, done:{}, unclear:{}, loopback:null, revisit:{}, endReason:null, endGate:null }; } @@ -961,7 +970,7 @@ function renderDeck(){ function renderClassify(){ const correct = S.change; const card = acard(S.service,S.change); - const thumb = `${card.titel}`; + const cardBig = `${card.titel}`; if(!S.classifyDone){ const choices = CHANGE_TYPES.map((t,i)=> ``).join(""); @@ -972,7 +981,7 @@ function renderClassify(){ $("#panel").innerHTML = `
Schritt 2 · Change-Art bestimmen
- ${card.titel} + ${cardBig}

Welche Art von Change ist das?

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

@@ -991,10 +1000,14 @@ function renderClassify(){ } else { $("#panel").innerHTML = `
Schritt 3 · Erfolgreiche Kategorisierung
- ${thumb} -
✓ Richtig: ${CHANGE_TYPES[correct]}
-

Warum?

-

${CHANGE_LEGEND[correct]}

+
+ ${cardBig} +
+
✓ Richtig: ${CHANGE_TYPES[correct]}
+

Warum?

+

${CHANGE_LEGEND[correct]}

+
+
@@ -1011,6 +1024,7 @@ function renderEntry(){ const recIndex = STATIONEN.findIndex(s=>s.id===rec.id); const correctPhase = STATIONEN[recIndex].phase; const order = ["design","transition","operation","support","review"]; + const cardBig = `${acard(S.service,S.change).titel}`; if(!S.entryDone){ const zones = order.map(ph=> `
` : ``; $("#panel").innerHTML = `
Schritt 4 · Einstieg finden
-
Change-Art: ${CHANGE_TYPES[S.change]}
-

In welcher Phase startet dieser Change?

-

Klickt auf die Lebenszyklus-Phase, in der dieser Change einsteigt.

- ${hint} -
${zones}
+
+ ${cardBig} +
+
Change-Art: ${CHANGE_TYPES[S.change]}
+

In welcher Phase startet dieser Change?

+

Klickt auf die Lebenszyklus-Phase, in der dieser Change einsteigt.

+ ${hint} +
${zones}
+
+
`; $("#panel").querySelectorAll(".phaseZone").forEach(el=>{ el.onclick=()=>{ const ph=el.dataset.ph; @@ -1034,10 +1053,15 @@ function renderEntry(){ } else { $("#panel").innerHTML = `
Schritt 5 · Los geht's
-
✓ Einstieg: ${PHASEN[correctPhase].label}
-

Start-Station

-

${rec.id} — ${STATIONEN[recIndex].name}

-

${rec.grund}

+
+ ${cardBig} +
+
✓ Einstieg: ${PHASEN[correctPhase].label}
+

Start-Station

+

${rec.id} — ${STATIONEN[recIndex].name}

+

${rec.grund}

+
+
@@ -1064,6 +1088,7 @@ function enterStation(idx){ S.index = idx; S.stage = STATIONEN[idx].typ==="gate" ? "gate" : "act"; S.gatePick = null; S.quizIndex = 0; + S.actStep = 0; S.actReveal = false; } function gateGoto(st, i){ S.done[st.id] = true; @@ -1095,53 +1120,62 @@ function renderRun(){ const loopBanner = (S.loopback && S.index < S.loopback.untilIdx) ? `
↩ Nacharbeit nach Gate ${S.loopback.gateNr} — überarbeitet die folgenden Stationen; danach wird das Gate erneut vorgelegt und entscheidet neu.
` : ``; + const cardBig = `${acard(S.service,S.change).titel}`; + const stepBody = st.typ==="gate" + ? (S.stage==="gateDone" ? renderGateDone(st) : renderGate(st)) + : renderActivity(st); let body = ` ${loopBanner} -
${chip}${st.id}
-

${st.name}

-
Fall: «${acard(S.service,S.change).titel}»
`; - if(st.typ==="gate") body += (S.stage==="gateDone") ? renderGateDone(st) : renderGate(st); - else body += (S.stage==="reveal") ? renderReveal(st) : renderAct(st); +
+ ${cardBig} +
+
${chip}${st.id}
+

${st.name}

+ ${stepBody} +
+
`; $("#panel").innerHTML = body; wire(st); } -/* Aktivitaet — Takt 1: Handeln am Brett (mit "Zeig mir") */ -function renderAct(st){ - return ` -

Handeln am Brett — besprecht und legt ab:

-
    -
  1. Beteiligte Rollen → Figuren auf die Mulden des Station-Pucks
    2. -
  2. RACI klären → dieselben Figuren ins Aktiv-Feld (R·A·C·I)
    3. -
  3. Artefaktkarte → in die Service-Akte
    4. -
-
- Zeig mir -
${raciTable(st)}

Artefakt: ${st.artefakt}

-
-
-
- -
`; +/* Aktivitaet — schrittweiser Mikro-Ablauf: 4 Fragen, je einzeln + Aufloesung. + 1) Was steckt hinter der Ueberschrift? 2) Beteiligte Rollen 3) RACI 4) Artefakt */ +function activitySteps(st){ + return [ + { label:"Diskussion", + frage:`

Diskutiert gemeinsam: Was fällt alles unter „${st.name}"? Was stellt ihr euch darunter vor? Nennt Beispiele.

`, + auf:`

${st.beschreibung}

Das fällt darunter

    ${st.umfasst.map(u=>`
  • ${u}
    • `).join("")}
` }, + { label:"Beteiligte Rollen", + frage:`

Welche Rollen sind an dieser Aktivität beteiligt? Stellt ihre Figuren auf die Mulden des Station-Pucks.

`, + auf:`

Beteiligte Rollen

${st.raci.map(([r])=>`${roleLabel(r)}`).join("")}
` }, + { label:"RACI", + frage:`

Klärt die RACI: Wer ist R, A, C, I? Sortiert die Figuren ins Aktiv-Feld (R·A·C·I).

`, + auf:`

RACI

${raciTable(st)}` }, + { label:"Artefakt", + frage:`

Welche Artefaktkarte entsteht hier und gehört in die Service-Akte?

`, + auf:`

Artefakt

${st.artefakt}

` } + ]; } +function renderActivity(st){ + const steps = activitySteps(st); + const i = Math.min(S.actStep||0, steps.length-1); + const step = steps[i]; + const isLast = i === steps.length-1; + let html = `
Schritt ${i+1}/${steps.length} · ${step.label}
${step.frage}`; + if(S.actReveal) html += `
${step.auf}
`; -/* Aktivitaet — Takt 2: Aufloesung & Abgleich */ -function renderReveal(st){ - return ` -

Auflösung — gleicht euer Brett ab:

- ${raciTable(st)} -

Artefakt: ${st.artefakt}

-
- Worum geht's & was umfasst die Station -

${st.beschreibung}

    ${st.umfasst.map(u=>`
  • ${u}
    • `).join("")}
-
-
- -
- ${S.index < STATIONEN.length-1 - ? `` - : ``} -
`; + let actions = `
`; + if(S.actReveal || i>0) actions += ``; + if(S.actReveal && isLast) + actions += ``; + actions += `
`; + if(!S.actReveal) actions += ``; + else if(!isLast) actions += ``; + else actions += S.index < STATIONEN.length-1 + ? `` + : ``; + actions += `
`; + return html + actions; } /* Gate — Entscheidung nach Kriterien */ @@ -1190,7 +1224,9 @@ function renderGateDone(st){ /* ====================== WIRING ====================== */ function wire(st){ const b = id => $("#"+id); - if(b("toReveal")) b("toReveal").onclick = ()=>{ S.stage="reveal"; save(); draw(); }; + if(b("actReveal")) b("actReveal").onclick = ()=>{ S.actReveal=true; save(); draw(); }; + if(b("actNext")) b("actNext").onclick = ()=>{ S.actStep=(S.actStep||0)+1; S.actReveal=false; save(); draw(); }; + if(b("actBack")) b("actBack").onclick = ()=>{ if(S.actReveal){ S.actReveal=false; } else if((S.actStep||0)>0){ S.actStep--; S.actReveal=true; } save(); draw(); }; if(b("unclear")) b("unclear").onchange = e=>{ if(e.target.checked) S.unclear[st.id]=true; else delete S.unclear[st.id]; save(); renderList(); }; if(b("nextStation")) b("nextStation").onclick = ()=>{ S.done[st.id]=true; enterStation(S.index+1); save(); draw(); }; if(b("finish")) b("finish").onclick = ()=>{ S.done[st.id]=true; S.view="end"; S.endReason="done"; save(); draw(); };