ganze project

script.js

@@ -0,0 +1,184 @@
+// --- 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();