Steuerungstechnik/script.js

// --- Mobile Menu Toggle ---
const mobileMenuBtn = document.getElementById('mobile-menu');
const navLinks = document.querySelector('.nav-links');

if (mobileMenuBtn) {
    mobileMenuBtn.addEventListener('click', () => {
        navLinks.classList.toggle('active');
    });
    
    // Close menu when clicking a link
    document.querySelectorAll('.nav-links a').forEach(link => {
        link.addEventListener('click', () => {
            navLinks.classList.remove('active');
        });
    });
}


// --- Interactive Simulation (EVA Traffic Light) ---
const simBtn = document.getElementById('sim-btn');
const simLogic = document.getElementById('sim-logic');
const lightRed = document.getElementById('light-red');
const lightGreen = document.getElementById('light-green');
const simStatus = document.getElementById('sim-status');

let isTrafficGreen = true;

// Function to trigger traffic light sequence
function triggerTrafficLight() {
    if (!isTrafficGreen) return; // Already red or changing

    // 1. INPUT (Eingabe)
    simBtn.classList.add('active'); // Visual feedback button pressed
    simStatus.textContent = "Eingabe: Signal erfasst...";
    
    // 2. PROCESSING (Verarbeitung)
    setTimeout(() => {
        simLogic.classList.add('processing'); // Spin or glow
        simStatus.textContent = "Verarbeitung: Logik schaltet um...";
        
        // 3. OUTPUT (Ausgabe) sequence
        setTimeout(() => {
            // Traffic Green -> Red
            lightGreen.classList.remove('active');
            lightRed.classList.add('active');
            isTrafficGreen = false;
            
            simLogic.classList.remove('processing');
            simStatus.textContent = "Ausgabe: Autos Rot, Fußgänger Grün!";
            simStatus.style.color = "#10b981";

            // Reset after 3 seconds
            setTimeout(() => {
                lightRed.classList.remove('active');
                lightGreen.classList.add('active');
                isTrafficGreen = true;
                simStatus.textContent = "Status: Autos haben Grün";
                simStatus.style.color = "#1e293b";
                simBtn.classList.remove('active');
            }, 3000);

        }, 1000); // Wait 1s for processing simulation
    }, 500);
}

// Event Listeners
if (simBtn) {
    simBtn.addEventListener('click', triggerTrafficLight);
}


// --- Accordion Logic ---
const accordionHeaders = document.querySelectorAll('.accordion-header');

accordionHeaders.forEach(header => {
    header.addEventListener('click', () => {
        const content = header.nextElementSibling;
        content.classList.toggle('open');
    });
});


// --- Quiz Logic (Baustein 1) ---
const quizData = [
    {
        question: "Was ist der Unterschied zwischen Steuern und Regeln?",
        options: [
            "Es gibt keinen Unterschied.",
            "Beim Steuern gibt es keine Rückkopplung, beim Regeln schon.",
            "Steuern ist genauer als Regeln.",
            "Regeln passiert nur von Hand."
        ],
        correct: 1
    },
    {
        question: "Wofür steht EVA in der Steuerungstechnik?",
        options: [
            "Einschalten - Verriegeln - Ausschalten",
            "Energie - Versorgung - Antrieb",
            "Eingabe - Verarbeitung - Ausgabe",
            "Elektrisch - Verbunden - Automatisch"
        ],
        correct: 2
    },
    {
        question: "Welches ist ein Beispiel für eine EINGABE?",
        options: [
            "Ein Motor läuft an",
            "Eine Signallampe leuchtet",
            "Ein Taster wird gedrückt",
            "Ein Schütz zieht an"
        ],
        correct: 2
    },
    {
        question: "Was ist eine VPS?",
        options: [
            "Verbindungsprogrammierbare Steuerung (verdrahtet)",
            "Volle Power Steuerung",
            "Virtuelle Programm Struktur",
            "Variable Prozess Schnittstelle"
        ],
        correct: 0
    }
];

let currentQuestion = 0;
const questionEl = document.getElementById('quiz-question');
const optionsEl = document.getElementById('quiz-options');
const resultEl = document.getElementById('quiz-result');
const nextBtn = document.getElementById('next-question');

function loadQuestion() {
    if (!questionEl) return;
    
    const data = quizData[currentQuestion];
    questionEl.textContent = data.question;
    optionsEl.innerHTML = '';
    resultEl.textContent = '';
    nextBtn.classList.add('hidden');

    data.options.forEach((option, index) => {
        const btn = document.createElement('button');
        btn.textContent = option;
        btn.classList.add('option-btn');
        btn.addEventListener('click', () => checkAnswer(index));
        optionsEl.appendChild(btn);
    });
}

function checkAnswer(selectedIndex) {
    const data = quizData[currentQuestion];
    const buttons = optionsEl.querySelectorAll('.option-btn');
    
    // Disable all buttons
    buttons.forEach(btn => btn.disabled = true);

    if (selectedIndex === data.correct) {
        buttons[selectedIndex].classList.add('correct');
        resultEl.textContent = "Richtig! Gut gemacht.";
        resultEl.style.color = "#10b981";
    } else {
        buttons[selectedIndex].classList.add('wrong');
        buttons[data.correct].classList.add('correct'); // Show correct answer
        resultEl.textContent = "Leider falsch.";
        resultEl.style.color = "#ef4444";
    }

    if (currentQuestion < quizData.length - 1) {
        nextBtn.classList.remove('hidden');
    } else {
        resultEl.textContent += " Quiz beendet!";
    }
}

if (nextBtn) {
    nextBtn.addEventListener('click', () => {
        currentQuestion++;
        loadQuestion();
    });
}

// Initialize Quiz
loadQuestion();