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

v20

Browse source
This commit is contained in:
breitenbach76 2026-06-09 08:13:12 +02:00
parent 6e1bc8d944
commit 4b031fd98a
5 changed files with 115 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -268,7 +268,11 @@
.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}
.classifyMain .phaseRow{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:6px}
.classifyMain .phaseZone{flex:0 1 130px;max-width:150px;padding:14px 10px;font-size:13px}
.slcOrient{display:flex;flex-direction:column;align-items:center;margin:6px 0 12px}
.slcDonut{width:172px;height:172px;max-width:70%}
.slcCap{font-size:11px;color:var(--muted);margin-top:4px;text-align:center}
@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)}
@ -1377,6 +1381,25 @@ function renderFreigabe(){
}
}
/* SLC-Orientierungs-Donut (5 Phasen, Farben = Phasenfarben der App) */
function phaseDonut(){
const order=["design","transition","operation","support","review"];
const cx=100,cy=100,R=92,r=46,seg=72,start=-90-seg/2;
const P=(a,rad)=>[ (cx+rad*Math.cos(a*Math.PI/180)).toFixed(1), (cy+rad*Math.sin(a*Math.PI/180)).toFixed(1) ];
let s="";
order.forEach((ph,i)=>{
const a0=start+i*seg, a1=a0+seg, o0=P(a0,R), o1=P(a1,R), i1=P(a1,r), i0=P(a0,r);
s+=`<path d="M${o0[0]} ${o0[1]} A${R} ${R} 0 0 1 ${o1[0]} ${o1[1]} L${i1[0]} ${i1[1]} A${r} ${r} 0 0 0 ${i0[0]} ${i0[1]} Z" fill="var(--${ph})"/>`;
});
order.forEach((ph,i)=>{
const mid=start+i*seg+seg/2, L=P(mid,(R+r)/2);
s+=`<text x="${L[0]}" y="${(+L[1]+3).toFixed(1)}" text-anchor="middle" font-size="9.5" font-weight="700" fill="#fff">${PHASEN[ph].label}</text>`;
});
s+=`<text x="100" y="96" text-anchor="middle" font-size="9" font-weight="700" fill="var(--muted)">Service-</text>`;
s+=`<text x="100" y="108" text-anchor="middle" font-size="9" font-weight="700" fill="var(--muted)">Lifecycle</text>`;
return `<svg viewBox="0 0 200 200" class="slcDonut" role="img" aria-label="Service-Lifecycle: Design, Transition, Operation und Support (parallel), Review">${s}</svg>`;
}
/* ---------- Aufgabe 3: Einstieg finden (Phase anklicken) ---------------- */
function renderEntry(){
const rec = START_EMPFEHLUNG[S.change];
@ -1399,6 +1422,7 @@ function renderEntry(){
<h2 class="setupTitle" style="margin-top:8px">Wo würde die Umsetzung starten — nachdem der Change freigegeben ist?</h2>
<p class="muted">Klickt auf die Lebenszyklus-Phase, in der die Umsetzung beginnt.</p>
${hint}
<div class="slcOrient">${phaseDonut()}<div class="slcCap">Reihenfolge im Lebenszyklus · Operation ⇄ Support laufen parallel</div></div>
<div class="phaseRow">${zones}</div>
</div>
</div>