Busfahrt: Auftrags-Card tiefer, EN-Button -> Onboarding Seite 2, Texte
- ggs-quick-intro.js: optionale zweite Seite (config.page2 {title, html})
mit Weiter/Zurueck-Navigation. Rueckwaertskompatibel (ohne page2 = 1 Seite).
- Busfahrt: EN-Button entfernt; die "Warum Englisch?"-Erklaerung liegt jetzt
auf Onboarding-Seite 2 + Satz zur mehrsprachigen Hintergrundmusik.
- Onboarding-Schritte ohne lange "-" ausformuliert.
- Auftrags-Card (.bf-order) 20px tiefer (top 84).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -85,6 +85,7 @@
|
||||
|
||||
var _config = null;
|
||||
var _back = null;
|
||||
var _page = 1;
|
||||
|
||||
function lsKey() { return _config && _config.simId ? 'ggs.intro.' + _config.simId : null; }
|
||||
function markSeen() { try { var k = lsKey(); if (k) localStorage.setItem(k, '1'); } catch (_) {} }
|
||||
@@ -98,41 +99,68 @@
|
||||
}
|
||||
function onKey(e) { if (e.key === 'Escape') close(); }
|
||||
|
||||
function open() {
|
||||
if (!_config) return;
|
||||
function onBackClick(e) {
|
||||
if (e.target === _back) { markSeen(); close(); return; }
|
||||
var a = e.target && e.target.dataset && e.target.dataset.action;
|
||||
if (a === 'next') { _page = 2; render(); }
|
||||
else if (a === 'back') { _page = 1; render(); }
|
||||
else if (a === 'start') { markSeen(); close(); }
|
||||
}
|
||||
|
||||
function render() {
|
||||
injectCss();
|
||||
close();
|
||||
var steps = (_config.steps || []).map(function (s) {
|
||||
return '<li>' + (s.indexOf('<') >= 0 ? s : escapeHtml(s)) + '</li>';
|
||||
}).join('');
|
||||
var goals = (_config.goals || []).map(function (g) {
|
||||
return '<li>' + escapeHtml(g) + '</li>';
|
||||
}).join('');
|
||||
var p2 = _config.page2 || null;
|
||||
var hasP2 = !!(p2 && (p2.html || p2.body));
|
||||
|
||||
var headTitle, headLead, body, foot;
|
||||
if (_page === 2 && hasP2) {
|
||||
headTitle = p2.title || _config.title || 'Mehr dazu';
|
||||
headLead = '';
|
||||
body = (p2.html || p2.body || '');
|
||||
foot = '<button type="button" class="ggs-qi-btn" data-action="back" style="background:#e8e4d8;color:#2a2a2a">← Zurück</button>'
|
||||
+ '<button type="button" class="ggs-qi-btn ggs-qi-btn-primary" data-action="start">Los geht\'s →</button>';
|
||||
} else {
|
||||
var steps = (_config.steps || []).map(function (s) {
|
||||
return '<li>' + (s.indexOf('<') >= 0 ? s : escapeHtml(s)) + '</li>';
|
||||
}).join('');
|
||||
var goals = (_config.goals || []).map(function (g) {
|
||||
return '<li>' + escapeHtml(g) + '</li>';
|
||||
}).join('');
|
||||
headTitle = _config.title || 'Anleitung';
|
||||
headLead = _config.lead ? '<p class="ggs-qi-lead">' + escapeHtml(_config.lead) + '</p>' : '';
|
||||
body = (steps ? '<div class="ggs-qi-h3">Was tust du?</div><ol class="ggs-qi-steps">' + steps + '</ol>' : '')
|
||||
+ (goals ? '<div class="ggs-qi-h3">Was lernst du?</div><ul class="ggs-qi-goals">' + goals + '</ul>' : '');
|
||||
foot = hasP2
|
||||
? '<button type="button" class="ggs-qi-btn ggs-qi-btn-primary" data-action="next">Weiter →</button>'
|
||||
: '<button type="button" class="ggs-qi-btn ggs-qi-btn-primary" data-action="start">Los geht\'s →</button>';
|
||||
}
|
||||
|
||||
var html = ''
|
||||
+ '<div class="ggs-qi-modal" role="dialog" aria-modal="true" aria-labelledby="ggs-qi-title">'
|
||||
+ '<div class="ggs-qi-head">'
|
||||
+ '<h2 id="ggs-qi-title" class="ggs-qi-title">' + escapeHtml(_config.title || 'Anleitung') + '</h2>'
|
||||
+ (_config.lead ? '<p class="ggs-qi-lead">' + escapeHtml(_config.lead) + '</p>' : '')
|
||||
+ '</div>'
|
||||
+ '<div class="ggs-qi-body">'
|
||||
+ (steps ? '<div class="ggs-qi-h3">Was tust du?</div><ol class="ggs-qi-steps">' + steps + '</ol>' : '')
|
||||
+ (goals ? '<div class="ggs-qi-h3">Was lernst du?</div><ul class="ggs-qi-goals">' + goals + '</ul>' : '')
|
||||
+ '</div>'
|
||||
+ '<div class="ggs-qi-foot">'
|
||||
+ '<button type="button" class="ggs-qi-btn ggs-qi-btn-primary" data-action="start">Los geht\'s →</button>'
|
||||
+ '<h2 id="ggs-qi-title" class="ggs-qi-title">' + escapeHtml(headTitle) + '</h2>'
|
||||
+ headLead
|
||||
+ '</div>'
|
||||
+ '<div class="ggs-qi-body">' + body + '</div>'
|
||||
+ '<div class="ggs-qi-foot">' + foot + '</div>'
|
||||
+ '</div>';
|
||||
|
||||
_back = document.createElement('div');
|
||||
_back.className = 'ggs-qi-back';
|
||||
if (!_back) {
|
||||
_back = document.createElement('div');
|
||||
_back.className = 'ggs-qi-back';
|
||||
_back.addEventListener('click', onBackClick);
|
||||
document.body.appendChild(_back);
|
||||
document.addEventListener('keydown', onKey);
|
||||
}
|
||||
_back.innerHTML = html;
|
||||
_back.addEventListener('click', function (e) {
|
||||
if (e.target === _back) { markSeen(); close(); }
|
||||
if (e.target && e.target.dataset && e.target.dataset.action === 'start') { markSeen(); close(); }
|
||||
});
|
||||
document.body.appendChild(_back);
|
||||
document.addEventListener('keydown', onKey);
|
||||
var m = _back.querySelector('.ggs-qi-modal'); if (m) m.scrollTop = 0;
|
||||
}
|
||||
|
||||
function open() {
|
||||
if (!_config) return;
|
||||
close();
|
||||
_page = 1;
|
||||
render();
|
||||
}
|
||||
|
||||
window.GgsQuickIntro = {
|
||||
|
||||
@@ -115,7 +115,7 @@
|
||||
|
||||
/* ===== Auftrags-Card (oben rechts) ===== */
|
||||
.bf-order {
|
||||
position: absolute; top: 64px; right: 8px; z-index: 1000;
|
||||
position: absolute; top: 84px; right: 8px; z-index: 1000;
|
||||
background: #fff; border-radius: 12px;
|
||||
box-shadow: var(--bf-shadow);
|
||||
padding: 12px 14px;
|
||||
@@ -626,7 +626,6 @@
|
||||
<button class="bf-toggle active" id="audio-toggle" onclick="toggleAudio()" title="Ton (SFX) ein/aus" aria-label="Ton umschalten">🔊</button>
|
||||
<button class="bf-toggle" id="btn-info" onclick="if(window.GGS_TUTORIAL&&typeof window.GGS_TUTORIAL.replay==='function')window.GGS_TUTORIAL.replay();" title="Anleitung nochmal zeigen" aria-label="Anleitung">ℹ</button>
|
||||
<button class="bf-toggle" id="black-map-toggle" onclick="toggleBlackMap()" title="Beschriftung ein/aus" aria-label="Beschriftung umschalten"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12.6 4H18a2 2 0 0 1 2 2v5.4a2 2 0 0 1-.6 1.4l-6.6 6.6a2 2 0 0 1-2.8 0l-4.4-4.4a2 2 0 0 1 0-2.8L11.2 4.6a2 2 0 0 1 1.4-.6z"/><circle cx="15.7" cy="8.3" r="1.4"/></svg></button>
|
||||
<button class="bf-toggle" id="map-en-info" onclick="showMapEnglishInfo()" title="Warum ist die Karte auf Englisch?" aria-label="Karte auf Englisch — Erklärung" style="width:auto;padding:0 10px">ℹ️ EN</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -843,18 +842,30 @@
|
||||
if (window.GgsQuickIntro) GgsQuickIntro.init({
|
||||
simId: 'busfahrt',
|
||||
title: '🚌 Busfahrt',
|
||||
lead: 'Du fährst Aufträge durch Europa. Wähl gut — Zeit, Distanz und Bezahlung wollen abgewogen werden.',
|
||||
lead: 'Du fährst mit dem Reisebus Aufträge quer durch Europa. Wäge gut ab: Zeit, Distanz und Bezahlung entscheiden über deinen Gewinn.',
|
||||
steps: [
|
||||
'Auftrag auswählen — du siehst Stadt, Distanz und Marge.',
|
||||
'Auf der Karte das richtige Ziel-Land/-Stadt anklicken. Genauigkeit zählt.',
|
||||
'Hauptstadt-Quiz beantworten — Bonus auf den Auftrag.',
|
||||
'Budget hochhalten, Aufträge gewinnen, Stufen freischalten.',
|
||||
'Wähle links einen Auftrag aus. Du siehst die Zielstadt, die Distanz und deine Marge.',
|
||||
'Tippe auf der Karte das richtige Ziel-Land oder die richtige Stadt an. Je genauer du triffst, desto besser.',
|
||||
'Beantworte die Hauptstadt-Frage richtig und sichere dir einen Bonus auf den Auftrag.',
|
||||
'Halte dein Budget hoch, gewinne Aufträge und schalte nach und nach neue Stufen frei.',
|
||||
],
|
||||
goals: [
|
||||
'Europäische Hauptstädte und Länder zuordnen',
|
||||
'Distanzen auf der Europa-Karte einschätzen',
|
||||
'Wirtschaftlich planen — Marge, Treibstoff, Nachtfahrt',
|
||||
'Wirtschaftlich planen: Marge, Treibstoff und Nachtfahrt im Blick behalten',
|
||||
],
|
||||
page2: {
|
||||
title: '🗺 Warum ist die Karte auf Englisch?',
|
||||
html: ''
|
||||
+ '<p style="margin:0 0 .8rem">Die Städtenamen auf der Karte stehen auf <strong>Englisch</strong>, und das mit Absicht: es ist ein echter Lernvorteil.</p>'
|
||||
+ '<ul style="margin:0 0 1rem;padding-left:1.2rem;line-height:1.5">'
|
||||
+ '<li style="margin:.3rem 0"><strong>Namen unterscheiden sich international:</strong> auf der Karte steht „Vienna", im Quiz „Wien". So lernst du nebenbei, wie deine Heimat weltweit heißt.</li>'
|
||||
+ '<li style="margin:.3rem 0"><strong>Englisch ist die Sprache der Geographie:</strong> Reiseplanung, Tourismus und Karten-Apps nutzen es überall.</li>'
|
||||
+ '<li style="margin:.3rem 0"><strong>Übersetzen im Kopf</strong> („Munich" wird zu „München") trainiert geographisches Denken besser als reines Ablesen.</li>'
|
||||
+ '<li style="margin:.3rem 0"><strong>Endonym und Exonym:</strong> viele Orte haben mehrere Namen: einheimisch „Lisboa", englisch „Lisbon", deutsch „Lissabon".</li>'
|
||||
+ '</ul>'
|
||||
+ '<div style="background:#eef4ec;border:1px solid #cfe0cf;border-radius:8px;padding:.7rem .9rem;font-size:.94rem;line-height:1.5">🎧 <strong>Ohren auf:</strong> Die Hintergrundmusik wird in verschiedenen europäischen Sprachen gesungen. Errätst du, welche Sprache gerade läuft?</div>',
|
||||
},
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user