patrick/SLC_Game
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

-

Browse source
This commit is contained in:
breitenbach76 2026-06-06 15:13:01 +02:00
parent 34a0c34acb
commit 8bd7c8d4ca
2 changed files with 148 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

15
04_Tablet-Quiz/README.md
View file

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

261
04_Tablet-Quiz/app/index.html
View file

@ -160,6 +160,30 @@
.tourProg { font-size:12px; color:var(--muted); margin-bottom:8px; font-variant-numeric:tabular-nums; } .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 { 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); } .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> </style>
</head> </head>
<body> <body>
@ -286,6 +310,13 @@ const CHANGE_TYPES = [
"Standard Change", "Standard Change",
"Emergency 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 = [ const USE_CASES = [
{ service:"Zentrale VDI (Virtual-Desktop-Infrastructure)", { service:"Zentrale VDI (Virtual-Desktop-Infrastructure)",
desc:"Bereitstellung von virtuellen Windows-Desktops über das interne Rechenzentrum.", desc:"Bereitstellung von virtuellen Windows-Desktops über das interne Rechenzentrum.",
@ -825,8 +856,10 @@ const STATIONEN = [
/* ====================== STATE ====================== */ /* ====================== STATE ====================== */
const LS_KEY = "slc-companion-proto"; const LS_KEY = "slc-companion-proto";
function defaultState(){ function defaultState(){
return { view:"card", service:0, change:0, startIndex:null, startRevealed:false, return { view:"deck", service:null, change:null,
tourIndex:0, index:0, stage:"discuss", quizIndex:0, classifyDone:false, classifyWrong:null,
entryDone:false, entryWrong:null,
index:0, stage:"discuss", quizIndex:0,
picks:{}, done:{}, unclear:{} }; picks:{}, done:{}, unclear:{} };
} }
let S = load(); let S = load();
@ -880,152 +913,128 @@ function renderList(){
function draw(){ function draw(){
document.body.classList.toggle("runMode", S.view==="run"); document.body.classList.toggle("runMode", S.view==="run");
renderCardBadge(); renderCardBadge();
if(S.view==="card") return renderCardScreen(); if(S.view==="deck") return renderDeck();
if(S.view==="tour") return renderTour(); if(S.view==="classify") return renderClassify();
if(S.view==="start") return renderStartScreen(); if(S.view==="entry") return renderEntry();
renderRun(); renderRun();
} }
function renderCardBadge(){ function renderCardBadge(){
const el = $("#cardBadge"); 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.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 ---------- */ /* ---------- Schritt 1: Action Card ziehen (Raster aller Karten) ---------- */
function renderCardScreen(){ 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 = ` $("#panel").innerHTML = `
<div class="setupHead">Schritt 1 · Action Card</div> <div class="setupHead">Schritt 1 · Action Card ziehen</div>
<h2 class="setupTitle">Welches Szenario zieht ihr?</h2> <h2 class="setupTitle">Welche Karte 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> <p class="muted">Tippt auf eine Action Card, um sie zu ziehen.</p>
<div class="cardForm"> <div class="deck">${grid}</div>`;
<label>Service<select id="serviceSel"></select></label> $("#panel").querySelectorAll(".deckCard").forEach(el=>{
<label>Change-Typ<select id="changeSel"></select></label> el.onclick=()=>{ S.service=+el.dataset.s; S.change=+el.dataset.c;
</div> S.classifyDone=false; S.classifyWrong=null; S.entryDone=false; S.entryWrong=null;
<div class="ctText" id="cardTrigger">${cardMedia(S.service,S.change)}</div> S.view="classify"; save(); draw(); };
<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(); };
} }
/* ---------- Geführte Tour (ein Beispiel durch alle Stationen) ---------- */ /* ---------- Schritt 2+3: Change-Art bestimmen (retry bis richtig) -------- */
function renderTour(){ function renderClassify(){
const st = STATIONEN[S.tourIndex]; const correct = S.change;
const ph = PHASEN[st.phase]; const card = acard(S.service,S.change);
const chip = st.typ==="gate" const thumb = `<img class="cardThumb" src="cards/s${S.service}-c${S.change}.png" alt="${card.titel}">`;
? `<span class="phaseChip gateChip">⛩ Gate ${st.gateNr}</span>` if(!S.classifyDone){
: `<span class="phaseChip" style="background:${ph.color}">${ph.label}</span>`; const choices = CHANGE_TYPES.map((t,i)=>
const raci = st.raci.map(([r,c])=>`<tr><td>${roleLabel(r)}</td><td><span class="raciBadge raci-${c}">${c}</span></td></tr>`).join(""); `<button class="choice ${S.classifyWrong===i?'bad':''}" data-i="${i}">${t}</button>`).join("");
let extra=""; const legend = `<div class="legend"><h4>Legende — Change-Arten</h4><dl>` +
if(st.pfade){ CHANGE_TYPES.map((t,i)=>`<dt>${t}</dt><dd>${CHANGE_LEGEND[i]}</dd>`).join("") + `</dl></div>`;
extra += `<h4>Entscheidungspfade</h4><div class="pfade">` + const hint = S.classifyWrong!=null
st.pfade.map(([n,d])=>`<div class="pfad"><b>${n}</b><span style="color:var(--muted)">${d}</span></div>`).join("") + `</div>`; ? `<div class="hint bad">Nicht ganz — überlegt nochmal und probiert es erneut.</div>` : ``;
}
const narr = TOUR.text[st.id] || "—";
const last = S.tourIndex === STATIONEN.length-1;
$("#panel").innerHTML = ` $("#panel").innerHTML = `
<div class="tourBanner">📘 Geführtes Beispiel · <b>${USE_CASES[TOUR.service].service}</b> — ${CHANGE_TYPES[TOUR.change]}<br> <div class="setupHead">Schritt 2 · Change-Art bestimmen</div>
<span style="color:var(--muted)"><b>${acard(TOUR.service,TOUR.change).titel}</b> — ${acard(TOUR.service,TOUR.change).text}</span></div> ${thumb}
<div class="tourProg">Station ${S.tourIndex+1} von ${STATIONEN.length}</div> <h2 class="setupTitle">Welche Art von Change ist das?</h2>
${chip} <p class="muted">Überlegt gemeinsam und wählt die passende Change-Art. Die Legende hilft beim Einordnen.</p>
<div class="stationName">${st.name}</div> ${hint}
<div class="stationId">${st.id}</div> <div class="choiceGrid">${choices}</div>
<div class="tourNarr"><h4>In diesem Beispiel</h4>${narr}</div> ${legend}
<div class="reveal"> <div class="actions"><button class="ghost" id="backDeck">← Andere Karte</button></div>`;
<h4>Fachlich (aus dem Blueprint)</h4> $("#panel").querySelectorAll(".choice").forEach(el=>{
<p>${st.beschreibung}</p> el.onclick=()=>{ const i=+el.dataset.i;
<h4>Umfasst</h4><ul>${st.umfasst.map(u=>`<li>${u}</li>`).join("")}</ul> if(i===correct){ S.classifyWrong=null; S.classifyDone=true; } else { S.classifyWrong=i; }
<h4>Rollen / RACI</h4> save(); renderClassify(); };
<table class="raci"><thead><tr><th>Rolle</th><th>RACI</th></tr></thead><tbody>${raci}</tbody></table> });
<h4>Artefakt</h4><p>${st.artefakt}</p> $("#backDeck").onclick=()=>{ S.view="deck"; save(); draw(); };
${extra} } else {
</div> $("#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"> <div class="actions">
<button class="ghost" id="tourExit">Tour beenden</button> <button class="ghost" id="backDeck">← Andere Karte</button>
<button class="ghost" id="tourBack" ${S.tourIndex===0?'disabled':''}>← Zurück</button>
<div class="spacer"></div> <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>`; </div>`;
$("#tourExit").onclick=()=>{ S.view="card"; save(); draw(); }; $("#backDeck").onclick=()=>{ S.view="deck"; save(); draw(); };
$("#tourBack").onclick=()=>{ if(S.tourIndex>0){ S.tourIndex--; save(); renderTour(); } }; $("#toEntry").onclick=()=>{ S.view="entry"; S.entryDone=false; S.entryWrong=null; save(); draw(); };
$("#tourNext").onclick=()=>{ if(last){ S.view="card"; save(); draw(); } else { S.tourIndex++; save(); renderTour(); } }; }
} }
/* ---------- Screen 2: Startpunkt bestimmen (Tipp → Auflösen) ---------- */ /* ---------- Schritt 4+5: Einstieg finden (Phase anklicken) -------------- */
function renderStartScreen(){ function renderEntry(){
const rec = START_EMPFEHLUNG[S.change]; const rec = START_EMPFEHLUNG[S.change];
const recIndex = STATIONEN.findIndex(s=>s.id===rec.id); const recIndex = STATIONEN.findIndex(s=>s.id===rec.id);
const revealed = S.startRevealed; const correctPhase = STATIONEN[recIndex].phase;
const groups={}; const order = ["design","transition","operation","support","review"];
STATIONEN.forEach((st,i)=>{ (groups[st.phase]=groups[st.phase]||[]).push({st,i}); }); if(!S.entryDone){
let list=""; const zones = order.map(ph=>
for(const ph in PHASEN){ `<button class="phaseZone ${S.entryWrong===ph?'bad':''}" data-ph="${ph}"
if(!groups[ph]) continue; style="background:${PHASEN[ph].color}">${PHASEN[ph].label}</button>`).join("");
list += `<div class="pickerPhase">${PHASEN[ph].label}</div>`; const hint = S.entryWrong
groups[ph].forEach(({st,i})=>{ ? `<div class="hint bad">Diese Phase passt nicht zur Change-Art — denkt an die Definition und probiert es erneut.</div>` : ``;
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>`;
}
$("#panel").innerHTML = ` $("#panel").innerHTML = `
<div class="setupHead">Schritt 2 · Startpunkt</div> <div class="setupHead">Schritt 4 · Einstieg finden</div>
<h2 class="setupTitle">Wo startet ihr sinnvollerweise?</h2> <div class="hint ok">Change-Art: ${CHANGE_TYPES[S.change]}</div>
${head} <h2 class="setupTitle">In welcher Phase startet dieser Change?</h2>
<div class="pickerList">${list}</div> <p class="muted">Klickt auf die Lebenszyklus-Phase, in der dieser Change einsteigt.</p>
<div class="actions">${actions}</div>`; ${hint}
if(!revealed){ <div class="phaseRow">${zones}</div>
$("#panel").querySelectorAll(".pickerItem").forEach(el=>{ <div class="actions"><button class="ghost" id="backClassify">← zurück</button></div>`;
el.onclick=()=>{ S.startIndex=+el.dataset.i; save(); renderStartScreen(); }; $("#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) ====================== */ /* ====================== RENDER: RUN (Station) ====================== */