200 lines
9.4 KiB
HTML
200 lines
9.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Grundlagen der Steuerungstechnik</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<nav class="navbar">
|
|
<div class="logo">Steuerungstechnik</div>
|
|
<button class="menu-toggle" id="mobile-menu">
|
|
<span class="bar"></span>
|
|
<span class="bar"></span>
|
|
<span class="bar"></span>
|
|
</button>
|
|
<ul class="nav-links">
|
|
<li><a href="#start">Start</a></li>
|
|
<li><a href="#goals">Ziele</a></li>
|
|
<li><a href="#basics">Grundlagen</a></li>
|
|
<li><a href="#eva">EVA-Prinzip</a></li>
|
|
<li><a href="#types">Arten</a></li>
|
|
<li><a href="#quiz">Quiz</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<header id="start" class="hero">
|
|
<div class="hero-content">
|
|
<h1>Grundlagen der Steuerungstechnik</h1>
|
|
<p>Baustein 1</p>
|
|
<a href="#basics" class="btn">Los geht's</a>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Section: Lernziele (Green) -->
|
|
<section id="goals" class="section">
|
|
<h2 class="section-title" style="color: #15803d;">Das wirst du lernen</h2> <!-- Green Title -->
|
|
<div class="goals-container" style="border-left: 5px solid #22c55e;">
|
|
<ul class="goals-list" style="color: #166534;"> <!-- Dark Green Text -->
|
|
<li><span class="check-icon">✓</span> Unterscheidung zwischen <strong>Steuerung</strong> und <strong>Regelung</strong> verstehen</li>
|
|
<li><span class="check-icon">✓</span> Das <strong>EVA-Prinzip</strong> erkennen und erklären können</li>
|
|
<li><span class="check-icon">✓</span> Wichtige <strong>Größen</strong> der Steuerungstechnik benennen</li>
|
|
<li><span class="check-icon">✓</span> Verschiedene <strong>Steuerungsarten</strong> (VPS, SPS) kennenlernen</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section: Grundlagen Cards -->
|
|
<section id="basics" class="section">
|
|
<h2 class="section-title">Was ist Steuerungstechnik?</h2>
|
|
<div class="card-grid">
|
|
<div class="card">
|
|
<!-- Icon removed -->
|
|
<h3>Steuern</h3>
|
|
<p>Beeinflussung einer Ausgangsgröße. Wichtig: Der Ausgang hat <strong>keinen</strong> Einfluss auf den Eingang (offener Wirkungsablauf).<br><em>Beispiel: Heizung nach Außentemperatur.</em></p>
|
|
</div>
|
|
<div class="card">
|
|
<!-- Icon removed -->
|
|
<h3>Regeln</h3>
|
|
<p>Hier wird der Ist-Wert gemessen und mit dem Soll-Wert verglichen. Der Ausgang wirkt auf den Eingang zurück (geschlossener Regelkreis).<br><em>Beispiel: Tempomat im Auto.</em></p>
|
|
</div>
|
|
<div class="card">
|
|
<!-- Icon removed -->
|
|
<h3>Beeinflussung</h3>
|
|
<p>Wir steuern physikalische Größen wie:<br>• Drehzahl<br>• Temperatur<br>• Helligkeit<br>• Geschwindigkeit</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section: EVA-Prinzip -->
|
|
<section id="eva" class="section alt-bg">
|
|
<h2 class="section-title">Das EVA-Prinzip</h2>
|
|
<p style="text-align: center; margin-bottom: 2rem;">Jede Steuerung folgt diesem Grundmuster:</p>
|
|
|
|
<div class="steps-container">
|
|
<div class="step">
|
|
<div class="step-number">E</div>
|
|
<h3>Eingabe</h3>
|
|
<p>Sensoren erfassen Signale.</p>
|
|
<p class="small-text">(z.B. Taster, Lichtschranke)</p>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-number">V</div>
|
|
<h3>Verarbeitung</h3>
|
|
<p>Die Logik verknüpft die Signale.</p>
|
|
<p class="small-text">(z.B. Steuergerät, SPS)</p>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-number">A</div>
|
|
<h3>Ausgabe</h3>
|
|
<p>Aktoren führen den Befehl aus.</p>
|
|
<p class="small-text">(z.B. Motor, Lampe)</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Interactive EVA Simulation -->
|
|
<div class="simulation-container" style="margin-top: 3rem;">
|
|
<h3>Interaktives EVA-Beispiel: Ampel</h3>
|
|
<p>Drücke den Fußgänger-Taster (Eingabe), um die Ampel zu steuern.</p>
|
|
|
|
<div class="circuit-diagram">
|
|
<!-- EINGABE -->
|
|
<div class="circuit-control">
|
|
<h4>Eingabe</h4>
|
|
<button id="sim-btn" class="sim-button">
|
|
<div class="symbol-taster">
|
|
<span class="line-top"></span>
|
|
<span class="button-head"></span>
|
|
<span class="line-bottom"></span>
|
|
</div>
|
|
</button>
|
|
<span class="label">Taster drücken</span>
|
|
</div>
|
|
|
|
<div class="circuit-arrow">➜ Signal ➜</div>
|
|
|
|
<!-- VERARBEITUNG -->
|
|
<div class="circuit-control" style="background-color: #e0f2fe;">
|
|
<h4>Verarbeitung</h4>
|
|
<div class="coil" id="sim-logic" style="width: 80px; height: 80px; border-radius: 10px;">
|
|
<span style="font-size: 2rem;">⚙️</span>
|
|
</div>
|
|
<span class="label">Steuerung verarbeitet...</span>
|
|
</div>
|
|
|
|
<div class="circuit-arrow">➜ Befehl ➜</div>
|
|
|
|
<!-- AUSGABE -->
|
|
<div class="circuit-power">
|
|
<h4>Ausgabe</h4>
|
|
<div class="traffic-light">
|
|
<div class="light red" id="light-red"></div>
|
|
<div class="light green active" id="light-green"></div>
|
|
</div>
|
|
<span class="label">Ampel schaltet</span>
|
|
</div>
|
|
</div>
|
|
<div id="sim-status" class="status-text">Status: Autos haben Grün</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section: Wichtige Begriffe -->
|
|
<section id="types" class="section">
|
|
<h2 class="section-title">Wichtige Begriffe & Arten</h2>
|
|
<div class="accordion">
|
|
<div class="accordion-item">
|
|
<button class="accordion-header">Verknüpfungssteuerung</button>
|
|
<div class="accordion-content">
|
|
<p>Auch "kombinatorische Steuerung". Sie verknüpft Eingangssignale logisch (UND, ODER, NICHT). Das Ausgangssignal hängt direkt von der Kombination der Eingänge ab.</p>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<button class="accordion-header">Ablaufsteuerung</button>
|
|
<div class="accordion-content">
|
|
<p>Arbeitet in Schritten nacheinander. Der nächste Schritt passiert erst, wenn eine bestimmte Bedingung erfüllt ist (Schrittkette).</p>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<button class="accordion-header">VPS (Verbindungsprogrammierbar)</button>
|
|
<div class="accordion-content">
|
|
<p>Die Logik wird durch <strong>Verdrahtung</strong> erstellt. Um die Funktion zu ändern, muss man Kabel umklemmen. (z.B. Schützschaltung)</p>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-item">
|
|
<button class="accordion-header">SPS (Speicherprogrammierbar)</button>
|
|
<div class="accordion-content">
|
|
<p>Die Logik ist als <strong>Software</strong> gespeichert. Änderungen sind einfach per Programmierung möglich. (z.B. Siemens S7)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section: Quiz -->
|
|
<section id="quiz" class="section alt-bg">
|
|
<h2 class="section-title">Wissens-Check</h2>
|
|
<div class="quiz-container">
|
|
<div id="quiz-question" class="quiz-question">Frage wird geladen...</div>
|
|
<div id="quiz-options" class="quiz-options">
|
|
<!-- Options generated by JS -->
|
|
</div>
|
|
<div id="quiz-result" class="quiz-result"></div>
|
|
<button id="next-question" class="btn hidden">Nächste Frage</button>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<p>© 2025 Schulprojekt Steuerungstechnik | Baustein 1</p>
|
|
</footer>
|
|
|
|
<div class="watermark">Powered by Webklar</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|