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

v8

Browse source
This commit is contained in:
breitenbach76 2026-06-07 13:18:31 +02:00
parent 20c9444c2f
commit c42965ee31
1 changed files with 19 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -151,6 +151,11 @@
.aufBox ul li{margin:3px 0} .aufBox ul li{margin:3px 0}
.roleChips{display:flex;flex-wrap:wrap;gap:6px} .roleChips{display:flex;flex-wrap:wrap;gap:6px}
.roleChip{background:#eef0f3;border-radius:999px;padding:3px 11px;font-size:13px} .roleChip{background:#eef0f3;border-radius:999px;padding:3px 11px;font-size:13px}
/* RACI-Legende */
.raciLegend{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:10px 0 4px;background:#f7f9fb}
.raciLegend .rlHead{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700;margin-bottom:8px}
.raciLegend .rlRow{display:flex;align-items:flex-start;gap:10px;margin:5px 0;font-size:14px;line-height:1.45}
.raciLegend .rlRow .raciBadge{flex:none;margin-top:1px}
/* Aufgaben-Kasten (Anweisung hervorgehoben) */ /* Aufgaben-Kasten (Anweisung hervorgehoben) */
.frageBox{background:#f7f9fc;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px;padding:14px 18px;margin:6px 0;font-size:16px;line-height:1.55} .frageBox{background:#f7f9fc;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px;padding:14px 18px;margin:6px 0;font-size:16px;line-height:1.55}
.frageBox .frageLabel{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:700;margin-bottom:5px} .frageBox .frageLabel{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:700;margin-bottom:5px}
@ -1124,6 +1129,18 @@ function raciTable(st){
const rows = st.raci.map(([r,c])=>`<tr><td>${roleLabel(r)}</td><td><span class="raciBadge raci-${c}">${c}</span></td></tr>`).join(""); const rows = st.raci.map(([r,c])=>`<tr><td>${roleLabel(r)}</td><td><span class="raciBadge raci-${c}">${c}</span></td></tr>`).join("");
return `<table class="raci"><thead><tr><th>Rolle</th><th>RACI</th></tr></thead><tbody>${rows}</tbody></table>`; return `<table class="raci"><thead><tr><th>Rolle</th><th>RACI</th></tr></thead><tbody>${rows}</tbody></table>`;
} }
/* RACI-Legende (deutsch) — wird bei der RACI-Frage immer mit angezeigt. */
function raciLegendHtml(){
const items = [
["R","Responsible","verantwortlich für die Durchführung — erledigt die Aufgabe operativ"],
["A","Accountable","rechenschaftspflichtig — trägt die Ergebnisverantwortung (genau eine Rolle)"],
["C","Consulted","konsultiert — wird vorab um Rat/Beitrag gefragt"],
["I","Informed","informiert — wird über das Ergebnis in Kenntnis gesetzt"]
];
return `<div class="raciLegend"><div class="rlHead">Wofür RACI steht</div>` +
items.map(([l,en,de])=>`<div class="rlRow"><span class="raciBadge raci-${l}">${l}</span><span><b>${en}</b> — ${de}</span></div>`).join("") +
`</div>`;
}
function renderRun(){ function renderRun(){
renderList(); renderList();
@ -1165,6 +1182,7 @@ function activitySteps(st){
auf:`<h4 class="aufH">Beteiligte Rollen</h4><div class="roleChips">${st.raci.map(([r])=>`<span class="roleChip">${roleLabel(r)}</span>`).join("")}</div>` }, auf:`<h4 class="aufH">Beteiligte Rollen</h4><div class="roleChips">${st.raci.map(([r])=>`<span class="roleChip">${roleLabel(r)}</span>`).join("")}</div>` },
{ label:"RACI", { label:"RACI",
frage:`Klärt die <b>RACI</b>: Wer ist R, A, C, I? Sortiert die Figuren ins <b>Aktiv-Feld (R·A·C·I)</b>.`, frage:`Klärt die <b>RACI</b>: Wer ist R, A, C, I? Sortiert die Figuren ins <b>Aktiv-Feld (R·A·C·I)</b>.`,
legend: raciLegendHtml(),
auf:`<h4 class="aufH">RACI</h4>${raciTable(st)}` }, auf:`<h4 class="aufH">RACI</h4>${raciTable(st)}` },
{ label:"Artefakt", { label:"Artefakt",
frage:`Welche <b>Artefaktkarte</b> entsteht hier und gehört in die <b>Service-Akte</b>?`, frage:`Welche <b>Artefaktkarte</b> entsteht hier und gehört in die <b>Service-Akte</b>?`,
@ -1186,6 +1204,7 @@ function renderActivity(st){
<div class="frageLabel">Aufgabe ${i+1}</div> <div class="frageLabel">Aufgabe ${i+1}</div>
${step.frage} ${step.frage}
</div>`; </div>`;
if(step.legend) html += step.legend;
if(S.actReveal) html += `<div class="aufBox">${step.auf}</div>`; if(S.actReveal) html += `<div class="aufBox">${step.auf}</div>`;
if(phaseEnd){ if(phaseEnd){
const nextColor = PHASEN[next.phase].color; const nextColor = PHASEN[next.phase].color;