// --- 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();