v9
This commit is contained in:
parent
31fdaeb3e0
commit
c3ae02c020
1 changed files with 41 additions and 29 deletions
|
|
@ -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(){
|
|||
<span class="dot" style="background:${PHASEN[ph].color}"></span>
|
||||
<span class="id">${st.id}</span>
|
||||
<span class="nm">${st.typ==="gate"?"⛩ ":""}${st.name.length>34?st.name.slice(0,32)+"…":st.name}</span>
|
||||
${S.unclear[st.id]?'<span class="flag">●</span>':''}
|
||||
</div>`;
|
||||
});
|
||||
}
|
||||
|
|
@ -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
|
||||
? `<p class="adPhase">🎉 Damit habt ihr die Phase <b style="color:${phaseColor}">${PHASEN[st.phase].label}</b> zu Ende gespielt — weiter mit der Phase <b style="color:${PHASEN[next.phase].color}">${PHASEN[next.phase].label}</b>.</p>`
|
||||
: ``;
|
||||
const btn = lastOverall ? `<button class="primary" id="finish">Durchlauf abschließen</button>`
|
||||
: phaseEnd ? `<button class="primary" id="nextStation">→ Weiter zur Phase ${PHASEN[next.phase].label}</button>`
|
||||
: `<button class="primary" id="nextStation">Nächste Station →</button>`;
|
||||
return `<div class="actDone big">
|
||||
<div class="adTitle">✓ Aktivität abgeschlossen</div>
|
||||
<p style="margin:6px 0">Gut gemacht! Ihr habt <b>${st.id} — ${st.name}</b> durchgespielt.</p>
|
||||
${phaseLine}
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="ghost" id="actBack">← zurück</button>
|
||||
<div class="spacer"></div>
|
||||
${btn}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
/* 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 = `<div class="tourProg">Schritt ${i+1}/${steps.length} · ${step.label}</div>
|
||||
<div class="frageBox" style="border-left-color:${phaseColor}">
|
||||
|
|
@ -1210,27 +1232,13 @@ function renderActivity(st){
|
|||
</div>`;
|
||||
if(step.legend) html += step.legend;
|
||||
if(S.actReveal) html += `<div class="aufBox">${step.auf}</div>`;
|
||||
if(S.actReveal && isLast){
|
||||
const phaseLine = phaseEnd
|
||||
? `<p class="adPhase">🎉 Damit habt ihr die Phase <b style="color:${phaseColor}">${PHASEN[st.phase].label}</b> zu Ende gespielt — weiter mit der Phase <b style="color:${PHASEN[next.phase].color}">${PHASEN[next.phase].label}</b>.</p>`
|
||||
: ``;
|
||||
html += `<div class="actDone">
|
||||
<div class="adTitle">✓ Aktivität abgeschlossen</div>
|
||||
<p style="margin:4px 0">Gut gemacht! Ihr habt <b>${st.id} — ${st.name}</b> durchgespielt.</p>
|
||||
${phaseLine}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
let actions = `<div class="actions">`;
|
||||
if(S.actReveal || i>0) actions += `<button class="ghost" id="actBack">← zurück</button>`;
|
||||
if(S.actReveal && isLast)
|
||||
actions += `<label class="unclear"><input type="checkbox" id="unclear" ${S.unclear[st.id]?'checked':''}/> War unklar</label>`;
|
||||
actions += `<div class="spacer"></div>`;
|
||||
if(!S.actReveal) actions += `<button class="primary" id="actReveal">Auflösen →</button>`;
|
||||
else if(!isLast) actions += `<button class="primary" id="actNext">Weiter →</button>`;
|
||||
else if(lastOverall) actions += `<button class="primary" id="finish">Durchlauf abschließen</button>`;
|
||||
else if(phaseEnd) actions += `<button class="primary" id="nextStation">→ Weiter zur Phase ${PHASEN[next.phase].label}</button>`;
|
||||
else actions += `<button class="primary" id="nextStation">Nächste Station →</button>`;
|
||||
if(!S.actReveal) actions += `<button class="primary" id="actReveal">Auflösen →</button>`;
|
||||
else if(!isLast) actions += `<button class="primary" id="actNext">Weiter →</button>`;
|
||||
else actions += `<button class="primary" id="actToDone">Weiter →</button>`;
|
||||
actions += `</div>`;
|
||||
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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue