diff --git a/04_Tablet-Quiz/app/index.html b/04_Tablet-Quiz/app/index.html index 8912efe..e12d740 100644 --- a/04_Tablet-Quiz/app/index.html +++ b/04_Tablet-Quiz/app/index.html @@ -80,7 +80,6 @@ .stationItem.active { background: #eef4fb; font-weight:600; } .stationItem .dot { width:10px; height:10px; border-radius:50%; flex:none; } .stationItem .id { color: var(--muted); font-variant-numeric: tabular-nums; font-size:12px; } - .stationItem .flag { margin-left:auto; color: var(--accent); } .stationItem.done .id::after { content:" ✓"; color: var(--ok); } main { padding: 28px clamp(20px, 5vw, 64px); overflow:auto; } @@ -167,10 +166,12 @@ .actDone{margin:16px 0 4px;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--ok)} .actDone .adTitle{font-weight:800;font-size:16px;color:#177a44;margin-bottom:2px} .actDone .adPhase{margin:10px 0 0;padding-top:10px;border-top:1px dashed var(--line);font-size:15px} + .actDone.big{margin:8px 0 4px;padding:22px 24px} + .actDone.big .adTitle{font-size:22px;margin-bottom:6px} + .actDone.big p{font-size:16px} .actions { display:flex; gap:10px; align-items:center; margin-top:24px; flex-wrap:wrap; } .actions .spacer { flex:1; } - .unclear { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px; } /* Setup-Screens (Action Card / Startpunkt) */ body:not(.runMode) aside { display:none; } @@ -887,8 +888,8 @@ function defaultState(){ classifyDone:false, classifyWrong:null, entryDone:false, entryWrong:null, index:0, stage:"discuss", quizIndex:0, - actStep:0, actReveal:false, - picks:{}, done:{}, unclear:{}, + actStep:0, actReveal:false, actDone:false, + picks:{}, done:{}, loopback:null, revisit:{}, endReason:null, endGate:null }; } let S = load(); @@ -926,7 +927,6 @@ function renderList(){ ${st.id} ${st.typ==="gate"?"⛩ ":""}${st.name.length>34?st.name.slice(0,32)+"…":st.name} - ${S.unclear[st.id]?'':''} `; }); } @@ -1104,7 +1104,7 @@ function enterStation(idx){ S.index = idx; S.stage = STATIONEN[idx].typ==="gate" ? "gate" : "act"; S.gatePick = null; S.quizIndex = 0; - S.actStep = 0; S.actReveal = false; + S.actStep = 0; S.actReveal = false; S.actDone = false; } function gateGoto(st, i){ S.done[st.id] = true; @@ -1194,14 +1194,36 @@ function activitySteps(st){ ]; } function renderActivity(st){ + const phaseColor = PHASEN[st.phase].color; + const next = STATIONEN[S.index+1]; + const lastOverall = S.index >= STATIONEN.length-1; + const phaseEnd = next && next.phase !== st.phase; + + /* Eigener Abschluss-Screen nach der letzten Aufgabe */ + if(S.actDone){ + const phaseLine = phaseEnd + ? `

🎉 Damit habt ihr die Phase ${PHASEN[st.phase].label} zu Ende gespielt — weiter mit der Phase ${PHASEN[next.phase].label}.

` + : ``; + const btn = lastOverall ? `` + : phaseEnd ? `` + : ``; + return `
+
✓ Aktivität abgeschlossen
+

Gut gemacht! Ihr habt ${st.id} — ${st.name} durchgespielt.

+ ${phaseLine} +
+
+ +
+ ${btn} +
`; + } + + /* Schrittweiser Frage-Flow */ const steps = activitySteps(st); const i = Math.min(S.actStep||0, steps.length-1); const step = steps[i]; const isLast = i === steps.length-1; - const phaseColor = PHASEN[st.phase].color; - const next = STATIONEN[S.index+1]; - const lastOverall = S.index >= STATIONEN.length-1; - const phaseEnd = isLast && S.actReveal && next && next.phase !== st.phase; let html = `
Schritt ${i+1}/${steps.length} · ${step.label}
@@ -1210,27 +1232,13 @@ function renderActivity(st){
`; if(step.legend) html += step.legend; if(S.actReveal) html += `
${step.auf}
`; - if(S.actReveal && isLast){ - const phaseLine = phaseEnd - ? `

🎉 Damit habt ihr die Phase ${PHASEN[st.phase].label} zu Ende gespielt — weiter mit der Phase ${PHASEN[next.phase].label}.

` - : ``; - html += `
-
✓ Aktivität abgeschlossen
-

Gut gemacht! Ihr habt ${st.id} — ${st.name} durchgespielt.

- ${phaseLine} -
`; - } let actions = `
`; if(S.actReveal || i>0) actions += ``; - if(S.actReveal && isLast) - actions += ``; actions += `
`; - if(!S.actReveal) actions += ``; - else if(!isLast) actions += ``; - else if(lastOverall) actions += ``; - else if(phaseEnd) actions += ``; - else actions += ``; + if(!S.actReveal) actions += ``; + else if(!isLast) actions += ``; + else actions += ``; actions += `
`; return html + actions; } @@ -1297,8 +1305,12 @@ function wire(st){ const b = id => $("#"+id); if(b("actReveal")) b("actReveal").onclick = ()=>{ S.actReveal=true; save(); draw(); }; if(b("actNext")) b("actNext").onclick = ()=>{ S.actStep=(S.actStep||0)+1; S.actReveal=false; save(); draw(); }; - if(b("actBack")) b("actBack").onclick = ()=>{ if(S.actReveal){ S.actReveal=false; } else if((S.actStep||0)>0){ S.actStep--; S.actReveal=true; } save(); draw(); }; - if(b("unclear")) b("unclear").onchange = e=>{ if(e.target.checked) S.unclear[st.id]=true; else delete S.unclear[st.id]; save(); renderList(); }; + if(b("actToDone")) b("actToDone").onclick = ()=>{ S.actDone=true; save(); draw(); }; + if(b("actBack")) b("actBack").onclick = ()=>{ + if(S.actDone){ S.actDone=false; } + else if(S.actReveal){ S.actReveal=false; } + else if((S.actStep||0)>0){ S.actStep--; S.actReveal=true; } + save(); draw(); }; if(b("nextStation")) b("nextStation").onclick = ()=>{ S.done[st.id]=true; enterStation(S.index+1); save(); draw(); }; if(b("finish")) b("finish").onclick = ()=>{ S.done[st.id]=true; S.view="end"; S.endReason="done"; save(); draw(); }; // Gate