-
This commit is contained in:
parent
34a0c34acb
commit
8bd7c8d4ca
2 changed files with 148 additions and 134 deletions
|
|
@ -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>`;
|
||||
/* ---------- 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="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="backDeck">← Andere Karte</button>
|
||||
<div class="spacer"></div>
|
||||
<button class="primary" id="toEntry">Weiter → Einstieg finden</button>
|
||||
</div>`;
|
||||
$("#backDeck").onclick=()=>{ S.view="deck"; save(); draw(); };
|
||||
$("#toEntry").onclick=()=>{ S.view="entry"; S.entryDone=false; S.entryWrong=null; save(); draw(); };
|
||||
}
|
||||
const narr = TOUR.text[st.id] || "—";
|
||||
const last = S.tourIndex === STATIONEN.length-1;
|
||||
$("#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="actions">
|
||||
<button class="ghost" id="tourExit">Tour beenden</button>
|
||||
<button class="ghost" id="tourBack" ${S.tourIndex===0?'disabled':''}>← Zurück</button>
|
||||
<div class="spacer"></div>
|
||||
<button class="primary" id="tourNext">${last?'Fertig — zur Startseite':'Weiter →'}</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(); } };
|
||||
}
|
||||
|
||||
/* ---------- 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>`;
|
||||
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 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(); };
|
||||
});
|
||||
}
|
||||
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>`;
|
||||
$("#backClassify").onclick=()=>{ S.view="classify"; save(); draw(); };
|
||||
} 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>`;
|
||||
$("#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(); };
|
||||
}
|
||||
$("#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(); };
|
||||
});
|
||||
}
|
||||
$("#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) ====================== */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue