+ ${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 = ``;
if(!S.entryDone){
const zones = order.map(ph=>
`
` : ``;
$("#panel").innerHTML = `
`;
if(!S.entryDone){
const zones = order.map(ph=>
`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}
+
`;
$("#panel").querySelectorAll(".phaseZone").forEach(el=>{
el.onclick=()=>{ const ph=el.dataset.ph;
@@ -1034,10 +1053,15 @@ function renderEntry(){
} else {
$("#panel").innerHTML = `
+
+ Change-Art: ${CHANGE_TYPES[S.change]}
+ In welcher Phase startet dieser Change?
+Klickt auf die Lebenszyklus-Phase, in der dieser Change einsteigt.
+ ${hint} +${zones}
+ 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)
? ``;
+ const stepBody = st.typ==="gate"
+ ? (S.stage==="gateDone" ? renderGateDone(st) : renderGate(st))
+ : renderActivity(st);
let body = `
${loopBanner}
-
↩ Nacharbeit nach Gate ${S.loopback.gateNr} — überarbeitet die folgenden Stationen; danach wird das Gate erneut vorgelegt und entscheidet neu.
`
: ``;
+ const cardBig = ``;
+ 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}
+
`;
$("#panel").innerHTML = body;
wire(st);
}
-/* Aktivitaet — Takt 1: Handeln am Brett (mit "Zeig mir") */
-function renderAct(st){
- return `
-
+
+ ${chip}${st.id}
+ ${st.name}
+ ${stepBody} +Handeln am Brett — besprecht und legt ab:
--
-
- Beteiligte Rollen → Figuren auf die Mulden des Station-Pucks -
- RACI klären → dieselben Figuren ins Aktiv-Feld (R·A·C·I) -
- Artefaktkarte → in die Service-Akte -
-
- 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("")}
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(); };