{{ block title }}Kurze Wissensfragen{{ endblock }}

{{ block content }}

<meta name="viewport" content="width=device-width, initial-scale=1">

<div style="max-width: 700px; margin: 0 auto 20px auto;">
    <div style="background: #e9ecef; border-radius: 10px; height: 8px;">
        <div style="background: #007bff; width: 35%; height: 8px; border-radius: 10px;"></div>
    </div>
</div>

<p>Drei kurze Fragen zu den Quellen – danach folgt {{ if player.treatment == 'treatment' }}die Vorbereitung mit dem KI-Assistenten und {{ endif }}die Verhandlung.</p>

<style>
.mc-item { margin-bottom: 20px; padding: 15px; background: #f8f9fa; border-radius: 8px; }
.mc-label { font-weight: bold; margin-bottom: 12px; display: block; }
.mc-options { display: flex; flex-direction: column; gap: 8px; }
.mc-options label { cursor: pointer; display: flex; align-items: center; gap: 10px; font-weight: normal; padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; background: white; transition: background 0.15s; }
.mc-options label:hover { background: #f0f4ff; border-color: #007bff; }
.mc-options label.selected-wrong { background: #fff0f0; border-color: #dc3545; }
.mc-feedback { display: none; margin-top: 10px; padding: 10px 14px; background: #e8f5e9; border: 1px solid #66bb6a; border-radius: 6px; font-size: 0.9em; color: #1b5e20; }
.mc-feedback.visible { display: block; }
</style>

<div class="mc-item" id="block-mc_company_budget">
    <span class="mc-label">1. Welches Gehalt zahlt ShopFlow GmbH typischerweise Data Analysts?</span>
    <div class="mc-options">
        <label><input type="radio" name="mc_company_budget" value="wrong1"> 36.000 – 43.000 €</label>
        <label><input type="radio" name="mc_company_budget" value="wrong2"> 58.000 – 67.000 €</label>
        <label><input type="radio" name="mc_company_budget" value="correct"> 44.000 – 57.000 €</label>
    </div>
    <div class="mc-feedback" id="feedback-mc_company_budget">
        ✓ Richtige Antwort: <strong>44.000 – 57.000 €</strong> – laut Gehaltsangaben auf rankunu.de (Durchschnitt: 48.200 €).
    </div>
</div>

<div class="mc-item" id="block-mc_anchor_strategy">
    <span class="mc-label">2. Wie viel Prozent über dem eigenen Zielgehalt sollte man laut den Quellen mit dem ersten Angebot starten?</span>
    <div class="mc-options">
        <label><input type="radio" name="mc_anchor_strategy" value="correct"> 10–15 %</label>
        <label><input type="radio" name="mc_anchor_strategy" value="wrong2"> 5–10 %</label>
        <label><input type="radio" name="mc_anchor_strategy" value="wrong3"> 20–30 %</label>
    </div>
    <div class="mc-feedback" id="feedback-mc_anchor_strategy">
        ✓ Richtige Antwort: <strong>10–15 %</strong> – laut karriereinsider.de (Strategie 2: Anker setzen).
    </div>
</div>

<div class="mc-item" id="block-mc_salary_range">
    <span class="mc-label">3. In welche drei Kategorien sollen laut karriereinsider.de Argumente für die Gehaltsverhandlung eingeteilt werden?</span>
    <div class="mc-options">
        <label><input type="radio" name="mc_salary_range" value="wrong2"> Ausbildung, Arbeitsweg, Inflationsrate</label>
        <label><input type="radio" name="mc_salary_range" value="correct"> Marktdaten, Qualifikationen, Mehrwert für das Unternehmen</label>
        <label><input type="radio" name="mc_salary_range" value="wrong3"> Erfahrung, Familienstand, Gehalt der Kollegen</label>
    </div>
    <div class="mc-feedback" id="feedback-mc_salary_range">
        ✓ Richtige Antwort: <strong>Marktdaten, Qualifikationen, Mehrwert für das Unternehmen</strong> – laut karriereinsider.de (Strategie 3: Argumente vorbereiten).
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form');
    if (!form) return;
    const CORRECT = {
        mc_company_budget: 'correct',
        mc_anchor_strategy: 'correct',
        mc_salary_range: 'correct'
    };
    const required = ['mc_company_budget', 'mc_anchor_strategy', 'mc_salary_range'];
    const btn = document.getElementById('mc-next-btn');
    let feedbackShown = false;

    btn.addEventListener('click', function() {
        if (feedbackShown) {
            form.submit();
            return;
        }

        // Check completeness
        const missing = required.some(name => !document.querySelector(`input[name="${name}"]:checked`));
        if (missing) {
            let msg = document.getElementById('error-msg');
            if (!msg) {
                msg = document.createElement('div');
                msg.id = 'error-msg';
                msg.style.cssText = 'background:#f8d7da; color:#842029; padding:15px; border-radius:8px; margin:20px 0; border:1px solid #f5c2c7; font-weight:bold;';
                msg.innerHTML = '&#9888;&#65039; Bitte beantworten Sie alle drei Fragen bevor Sie fortfahren.';
                form.insertBefore(msg, btn);
            }
            msg.scrollIntoView({behavior: 'smooth'});
            return;
        }

        // Check correctness
        let anyWrong = false;
        required.forEach(name => {
            const selected = document.querySelector(`input[name="${name}"]:checked`);
            if (selected && selected.value !== CORRECT[name]) {
                anyWrong = true;
                selected.closest('label').classList.add('selected-wrong');
                document.getElementById('feedback-' + name).classList.add('visible');
            }
        });

        if (anyWrong) {
            feedbackShown = true;
            btn.textContent = 'Verstanden \u2013 weiter \u2192';
            btn.style.background = '#28a745';
            btn.style.borderColor = '#28a745';
            btn.scrollIntoView({behavior: 'smooth', block: 'nearest'});
        } else {
            form.submit();
        }
    });
});
</script>

<button type="button" id="mc-next-btn" class="btn btn-primary" style="width: 100%; padding: 13px; font-size: 1.05em; border-radius: 8px; margin-top: 10px;">Weiter →</button>

{{ endblock }}