From 8f89613eee506b2388e9e4cd1057ace218e8a3ec Mon Sep 17 00:00:00 2001 From: Thomas Date: Tue, 25 Aug 2026 16:32:32 +0200 Subject: [PATCH] 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 --- App/assets/js/ggs-quick-intro.js | 80 +++++++++++++++++++++----------- App/sims/busfahrt/game.html | 27 +++++++---- 2 files changed, 73 insertions(+), 34 deletions(-) diff --git a/App/assets/js/ggs-quick-intro.js b/App/assets/js/ggs-quick-intro.js index a97ce67..b8eca1e 100644 --- a/App/assets/js/ggs-quick-intro.js +++ b/App/assets/js/ggs-quick-intro.js @@ -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 '
  • ' + (s.indexOf('<') >= 0 ? s : escapeHtml(s)) + '
    • '; - }).join(''); - var goals = (_config.goals || []).map(function (g) { - return '
  • ' + escapeHtml(g) + '
    • '; - }).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 = '' + + ''; + } else { + var steps = (_config.steps || []).map(function (s) { + return '
  • ' + (s.indexOf('<') >= 0 ? s : escapeHtml(s)) + '
    • '; + }).join(''); + var goals = (_config.goals || []).map(function (g) { + return '
  • ' + escapeHtml(g) + '
    • '; + }).join(''); + headTitle = _config.title || 'Anleitung'; + headLead = _config.lead ? '

    ' + escapeHtml(_config.lead) + '

    ' : ''; + body = (steps ? '
    Was tust du?
      ' + steps + '
    ' : '') + + (goals ? '
    Was lernst du?
    ' : ''); + foot = hasP2 + ? '' + : ''; + } var html = '' + ''; - _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 = { diff --git a/App/sims/busfahrt/game.html b/App/sims/busfahrt/game.html index e8467d1..bf596fd 100644 --- a/App/sims/busfahrt/game.html +++ b/App/sims/busfahrt/game.html @@ -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 @@ - @@ -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: '' + + '

    Die Städtenamen auf der Karte stehen auf Englisch, und das mit Absicht: es ist ein echter Lernvorteil.

    ' + + '' + + '
    🎧 Ohren auf: Die Hintergrundmusik wird in verschiedenen europäischen Sprachen gesungen. Errätst du, welche Sprache gerade läuft?
    ', + }, }); });