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

v21

Browse source
This commit is contained in:
breitenbach76 2026-06-09 08:21:31 +02:00
parent 4b031fd98a
commit e7e7912211
5 changed files with 55 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -271,7 +271,10 @@
.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%}
.slcDonut{width:240px;height:240px;max-width:88%}
.slcDonut.clickable .donutSeg{cursor:pointer;transition:opacity .12s}
.slcDonut.clickable .donutSeg:hover{opacity:.82}
.slcDonut .donutSeg.bad{stroke:var(--bad);stroke-width:4}
.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}
@ -1382,22 +1385,21 @@ function renderFreigabe(){
}
/* SLC-Orientierungs-Donut (5 Phasen, Farben = Phasenfarben der App) */
function phaseDonut(){
function phaseDonut(wrongPh, clickable){
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="";
let segs="", labels="";
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})"/>`;
const cls = (clickable?"donutSeg":"") + (ph===wrongPh?" bad":"");
segs+=`<path class="${cls}" data-ph="${ph}" 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})"/>`;
const mid=a0+seg/2, L=P(mid,(R+r)/2);
labels+=`<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>`;
});
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>`;
labels+=`<text x="100" y="96" text-anchor="middle" font-size="9" font-weight="700" fill="var(--muted)">Service-</text>`;
labels+=`<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${clickable?' clickable':''}" role="img" aria-label="Service-Lifecycle: Design, Transition, Operation und Support (parallel), Review">${segs}<g pointer-events="none">${labels}</g></svg>`;
}
/* ---------- Aufgabe 3: Einstieg finden (Phase anklicken) ---------------- */
@ -1408,9 +1410,6 @@ function renderEntry(){
const order = ["design","transition","operation","support","review"];
const cardBig = `<img class="classifyCard" src="cards/s${S.service}-c${S.change}.png" alt="${acard(S.service,S.change).titel}">`;
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 = `
@ -1420,14 +1419,13 @@ function renderEntry(){
<div class="classifyMain">
<div class="hint ok">Change-Art: ${CHANGE_TYPES[S.change]} · Freigabe: ${FREIGABE_OPTIONS[FREIGABE_CORRECT[S.change]]}</div>
<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>
<p class="muted">Klickt <b>im Ring</b> 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 class="slcOrient">${phaseDonut(S.entryWrong, true)}<div class="slcCap">Operation ⇄ Support laufen parallel</div></div>
</div>
</div>
<div class="actions"><button class="ghost" id="backFreigabe">← zurück</button></div>`;
$("#panel").querySelectorAll(".phaseZone").forEach(el=>{
$("#panel").querySelectorAll(".donutSeg").forEach(el=>{
el.onclick=()=>{ const ph=el.dataset.ph;
if(ph===correctPhase){ S.entryWrong=null; S.entryDone=true; } else { S.entryWrong=ph; }
save(); renderEntry(); };