⚙️ Admin

Live Demo

Klicke auf die Buttons um den Slider zu animieren

HTML Struktur

<div class="modus-toggle-global">
    <div class="modus-toggle-slider" id="modus-toggle">
        <div class="modus-slider-bg" id="modus-slider-bg"></div>
        <button class="modus-slider-btn active" data-modus="anfaenger" onclick="setModus('anfaenger')">
            🎯 Standard
        </button>
        <button class="modus-slider-btn" data-modus="pro" onclick="setModus('pro')">
            ⚡ Pro
        </button>
    </div>
</div>

CSS Klassen

JavaScript Funktion

function setModus(modus) {
    // 1. Slider-Buttons aktualisieren
    document.querySelectorAll('.modus-slider-btn').forEach(btn => {
        btn.classList.toggle('active', btn.dataset.modus === modus);
    });

    // 2. Slider-Position animieren
    const toggle = document.getElementById('modus-toggle');
    if (toggle) {
        toggle.classList.toggle('pro-active', modus === 'pro');
    }

    // 3. Body-Klasse fuer CSS-Steuerung
    document.body.classList.toggle('modus-anfaenger', modus === 'anfaenger');
    document.body.classList.toggle('modus-pro', modus === 'pro');

    // 4. In localStorage speichern
    localStorage.setItem('quizkoenig-modus', modus);
}

Im Standard-Modus versteckte Elemente

Diese Elemente werden im Standard-Modus (Anfaenger) via CSS ausgeblendet:

• .btn-learn - Ist Lokale/Nationale Frage
• .btn-feedback - Feedback Button
• .btn-reject - Frage Sperren
• .btn-quellen-suchen - KI: Quellen suchen
• .lokal-options - Sender-Auswahl
• .reject-options - Sperr-Optionen
• .reject-confirm - Sperr-Bestaetigung
• .btn-nav - History-Pfeile
• .frage-counter - History-Counter
• .quellen-warning - Quellen-Warnung

Relevante Dateien

• static/css/style.css - CSS Styles (Zeile ~3215)
• static/js/app.js - JavaScript Funktion setModus()
• templates/index.html - HTML Toggle im Quiz