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 `Gut gemacht! Ihr habt ${st.id} — ${st.name} durchgespielt.
+ ${phaseLine} +🎉 Damit habt ihr die Phase ${PHASEN[st.phase].label} zu Ende gespielt — weiter mit der Phase ${PHASEN[next.phase].label}.
` - : ``; - html += `Gut gemacht! Ihr habt ${st.id} — ${st.name} durchgespielt.
- ${phaseLine} -