<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Industrialisierung Master-App</title>
<style>
:root {
--bg: #f0f2f5;
--card-bg: #ffffff;
--text: #1a1a1a;
--primary: #2c3e50;
--accent: #3498db;
--success: #27ae60;
--error: #e74c3c;
--font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body { font-family: var(--font); background: var(--bg); color: var(--text); display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }
#app { width: 95%; max-width: 700px; background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.screen { display: none; }
.active { display: block; }
h1 { font-size: 1.5rem; color: var(--primary); text-align: center; border-bottom: 2px solid var(--bg); padding-bottom: 1rem; }
.progress-container { height: 10px; background: var(--bg); border-radius: 5px; margin: 1.5rem 0; overflow: hidden; }
.progress-bar { height: 100%; background: var(--accent); width: 0%; transition: width 0.3s ease; }
.card-container { perspective: 1000px; height: 350px; cursor: pointer; position: relative; }
.card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); border: 2px solid #ddd; border-radius: 12px; }
.card.flipped { transform: rotateY(180deg); }
.card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: center; padding: 2rem; box-sizing: border-box; text-align: center; border-radius: 12px; overflow-y: auto; }
.card-back { transform: rotateY(180deg); text-align: left; background: #fafafa; }
.tag { font-size: 0.75rem; font-weight: bold; color: var(--accent); text-transform: uppercase; margin-bottom: 1rem; display: block; }
.analogy { margin-top: 1.5rem; padding: 0.8rem; background: #eef7ff; border-left: 4px solid var(--accent); font-size: 0.9rem; font-style: italic; }
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
button { padding: 1rem; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; transition: transform 0.1s; }
button:active { transform: scale(0.98); }
.btn-wrong { background: var(--error); color: white; }
.btn-right { background: var(--success); color: white; }
.btn-start { background: var(--accent); color: white; width: 100%; font-size: 1.1rem; }
input[type="number"] { width: 100%; padding: 0.8rem; margin: 1rem 0; border: 2px solid var(--bg); border-radius: 8px; box-sizing: border-box; }
.stats { display: flex; justify-content: space-between; font-size: 0.85rem; color: #666; margin-bottom: 0.5rem; }
b { color: #000; }
</style>
</head>
<body>
<div id="app">
<div id="start-screen" class="screen active">
<h1>Industrialisierung: Lern-App</h1>
<p>Systematische Vorbereitung (ASS/ADHS-optimiert). 80 Karten verfügbar.</p>
<label>Wie viele Karten möchtest du lernen?</label>
<input type="number" id="card-limit" value="20" min="1" max="80">
<button class="btn-start" onclick="initApp()">Lernrunde starten</button>
</div>
<div id="learning-screen" class="screen">
<div class="stats">
<span id="cat-display">Kategorie</span>
<span id="counter-display">1 / 20</span>
</div>
<div class="progress-container">
<div id="progress-bar" class="progress-bar"></div>
</div>
<div class="card-container" onclick="flipCard()">
<div id="card-obj" class="card">
<div class="card-face card-front">
<h2 id="q-text">Frage</h2>
<p style="font-size: 0.8rem; color: #888;">(Tippen zum Wenden)</p>
</div>
<div class="card-face card-back">
<div id="a-text">Antwort</div>
<div id="analogy-box" class="analogy"></div>
</div>
</div>
</div>
<div id="action-buttons" class="controls" style="visibility: hidden;">
<button class="btn-wrong" onclick="processAnswer(false)">FALSCH</button>
<button class="btn-right" onclick="processAnswer(true)">RICHTIG</button>
</div>
</div>
<div id="end-screen" class="screen">
<h1>Runde beendet!</h1>
<p id="final-stats" style="text-align: center; font-size: 1.2rem;"></p>
<p id="milestone-text" style="text-align: center; font-weight: bold; color: var(--success);"></p>
<button class="btn-start" onclick="location.reload()">Neue Runde</button>
</div>
</div>
<script>
const allCards = [
// POSTEN A: MEILENSTEINE
{ c: "A: Grundlagen", q: "Definiere den Begriff 'Zäsur' historisch.", a: "Ein tiefer **Einschnitt** oder **Wendepunkt**, der eine alte Epoche beendet und eine neue einleitet.", n: "Aggregatszustandswechsel in der Physik (z.B. von flüssig zu gasförmig).", ref: "165" },
{ c: "A: Meilensteine", q: "Nenne die 4 Stufen der Industrie.", a: "1.0 **Dampfkraft**, 2.0 **Fließband/Elektrizität**, 3.0 **IT/Automation**, 4.0 **Internet der Dinge**.", n: "System-Evolution von linearer zu vernetzter Komplexität.", ref: "32" },
{ c: "A: Analyse", q: "Was symbolisierte das Gemälde der Borsig-Werke?", a: "**Technisches Selbstbewusstsein** und Stolz; die Fabrik wurde als monumentales, fast herrschaftliches Anwesen inszeniert.", n: "Repräsentative Signalübertragung für wirtschaftliche Potenz.", ref: "163" },
{ c: "A: Technik", q: "Wann wurde die erste Dampfmaschine erfunden?", a: "Die erste atmosphärische Dampfmaschine stammt von **Thomas Newcomen** (1712). James Watt verbesserte sie 1769 entscheidend.", n: "Wirkungsgrad-Optimierung (Entropie-Minderung).", ref: "241" },
{ c: "A: Zäsur", q: "Welche Bereiche änderte die Industrialisierung?", a: "**Wirtschaft** (Handarbeit zu Fabrik), **Gesellschaft** (Urbanisierung), **Umwelt** und **Technik**.", n: "Fundamentaler Phasenübergang des sozioökonomischen Systems.", ref: "246" },
// POSTEN B: GROSSBRITANNIEN
{ c: "B: Warum England?", q: "Nenne 3 Gründe für Englands Vorreiterrolle.", a: "Reiche **Kohlevorkommen**, großes **Kolonialreich** (Rohstoffe/Märkte) und ein **stabiles politisches System** ohne Binnenzölle.", n: "Hohe Energiedichte kombiniert mit geringem Systemwiderstand.", ref: "169" },
{ c: "B: Theorie", q: "Erkläre Adam Smiths 'Unsichtbare Hand'.", a: "Individueller **Eigennutz** führt unbewusst zum **Gemeinwohl**, da der freie Markt Angebot und Nachfrage selbst reguliert.", n: "Selbstorganisation in komplexen, dynamischen Systemen.", ref: "171" },
{ c: "B: Politik", q: "Was ist ein 'Nachtwächterstaat'?", a: "Ein Staat, der nur **Schutz und Justiz** garantiert und sich ansonsten strikt aus der Wirtschaft heraushält.", n: "Staat als passiver Katalysator, nicht als Reaktant.", ref: "256" },
{ c: "B: Landwirtschaft", q: "Welche agrarische Neuerung half der Industrie?", a: "Die **Fruchtwechselwirtschaft** und **Einhegungen** steigerten Erträge, wodurch Arbeitskräfte für Fabriken frei wurden.", n: "Erhöhung der Effizienz in der Primärenergieproduktion (Nahrung).", ref: "581" },
{ c: "B: Gesellschaft", q: "Warum war die englische Schichtung vorteilhaft?", a: "Sie war **durchlässig**; der Adel durfte Handel treiben und Kapital investieren.", n: "Geringe Aktivierungsenergie für soziale Mobilität.", ref: "594" },
// POSTEN D/Q: TEXTIL & TECHNIK
{ c: "D: Technik", q: "Was war die 'Spinning Jenny'?", a: "Die erste **Feinspinnmaschine** (1764) von James Hargreaves; sie konnte mehrere Spindeln gleichzeitig bedienen.", n: "Parallelverarbeitung zur Durchsatzsteigerung.", ref: "179" },
{ c: "D: Technik", q: "Wer erfand den mechanischen Webstuhl?", a: "**Edmund Cartwright** (1785). Er beseitigte den Engpass beim Weben.", n: "Beseitigung von Flaschenhälsen im Produktionsfluss.", ref: "261" },
{ c: "D: Bergbau", q: "Wieso 'ernährte' sich die Dampfmaschine selbst?", a: "Sie pumpte **Grundwasser** ab, um tiefer nach **Kohle** zu graben, die sie wiederum als Brennstoff benötigte.", n: "Positiver Rückkopplungseffekt (Feedback Loop).", ref: "181" },
{ c: "D: Material", q: "Unterschied zwischen Eisen und Stahl?", a: "**Stahl** ist elastischer und fester; er entsteht durch die Reduktion des Kohlenstoffgehalts in Roheisen.", n: "Strukturveränderung auf molekularer Ebene zur Optimierung der Materialeigenschaften.", ref: "58" },
{ c: "D: Energie", q: "Was ist die 'Waterframe'?", a: "Eine von **Richard Arkwright** erfundene Spinnmaschine mit **Wasserantrieb**, die das Fabriksystem einleitete.", n: "Nutzung von kinetischer Energie zur Automation.", ref: "260" },
// POSTEN E: WATT & EISENBAHN
{ c: "E: James Watt", q: "Nenne Watts 2 wichtigste Innovationen.", a: "Das **Planetengetriebe** (Drehbewegung) und der **Fliehkraftregler** (konstante Geschwindigkeit).", n: "Regelungstechnik zur Systemstabilität.", ref: "186" },
{ c: "E: Eisenbahn", q: "Wer baute die 'Rocket'?", a: "**George Stephenson** (1829). Sie war die schnellste und zuverlässigste Lokomotive ihrer Zeit.", n: "Mobilitätsvektor mit hoher Beschleunigung.", ref: "2146" },
{ c: "E: Transport", q: "Wie veränderte die Bahn das Zeitgefühl?", a: "Entfernungen wurden **subjektiv kürzer**; Reisen wurde planbar und für Massen zugänglich.", n: "Kompression der Raum-Zeit-Metrik im Handel.", ref: "187" },
{ c: "E: Dampf", q: "Vorteil der Dampfkraft ggü. Wasserkraft?", a: "**Standortunabhängigkeit** und **Regelmäßigkeit** (kein Problem mit Hoch- oder Niedrigwasser).", n: "Unabhängigkeit von stochastischen Umweltvariablen.", ref: "397" },
{ c: "E: Technik", q: "Was bewirkt der Fliehkraftregler?", a: "Er hält die **Geschwindigkeit** der Maschine bei wechselnder Last konstant.", n: "Negatives Feedback zur Homöostase einer Maschine.", ref: "270" },
// POSTEN F: GLOBALISIERUNG
{ c: "F: Weltmarkt", q: "Wer war der 'Gewinner' um 1880?", a: "**Großbritannien** mit ca. 23% Anteil an der Weltproduktion.", n: "Dominante Spezies in der ökonomischen Nische.", ref: "193" },
{ c: "F: Arbeitsteilung", q: "Was ist internationale Arbeitsteilung?", a: "Die **Spezialisierung** einzelner Länder auf bestimmte Güter für den Weltmarkt.", n: "Funktionale Differenzierung in einem globalen Organismus.", ref: "190" },
{ c: "F: Disparität", q: "Wie entstanden Entwicklungsländer?", a: "Durch den Import billiger britischer Waren wurde das **heimische Handwerk** (z.B. in Indien) zerstört.", n: "Invasive ökonomische Prozesse verdrängen lokale Strukturen.", ref: "192" },
{ c: "F: Deutschland", q: "Wann überholte Deutschland GB im Export?", a: "Um **1913**, kurz vor dem Ersten Weltkrieg.", n: "Systematische Effizienzsteigerung führt zum Positionswechsel.", ref: "753" },
{ c: "F: Sektoren", q: "Nenne die 3 Wirtschaftssektoren.", a: "1. **Primär** (Rohstoffe), 2. **Sekundär** (Industrie), 3. **Tertiär** (Dienstleistung).", n: "Trophie-Ebenen der Wertschöpfung.", ref: "779" },
// POSTEN H/T: UMWELT
{ c: "H: Ökologie", q: "Nenne 3 historische Umweltfaktoren.", a: "**Luftverschmutzung** (Kohle), **Abwasser** (Chemie) und **Müllprobleme**.", n: "Entropie-Export des Fabriksystems in die Biosphäre.", ref: "199" },
{ c: "H: Lösungen", q: "Wie lösen wir Umweltprobleme heute?", a: "Durch **Filter**, **Kläranlagen**, **Recycling** und **erneuerbare Energien**.", n: "Kreislaufwirtschaft zur Minimierung des ökologischen Fußabdrucks.", ref: "200" },
{ c: "T: Katastrophe", q: "Was geschah 1986 bei Sandoz?", a: "Großbrand in **Schweizerhalle**; Löschwasser vergiftete den Rhein und tötete tausende Fische.", n: "Kaskadeneffekt einer chemischen Kontamination.", ref: "227" },
{ c: "T: Folgen", q: "Welche politische Folge hatte Schweizerhalle?", a: "Gründung des **Umweltministeriums** und Verschärfung der Umweltgesetze.", n: "Adaptive Systemreaktion auf eine externe Störung.", ref: "308" },
{ c: "H: Klima", q: "Wann wurde der Treibhauseffekt entdeckt?", a: "Bereits im **19. Jahrhundert**, aber erst ab den 1960ern systematisch erforscht.", n: "Früherkennung thermischer Anomalien im globalen System.", ref: "1142" },
// POSTEN I: MODERN TIMES
{ c: "I: Taylorismus", q: "Was kritisiert Chaplin in 'Modern Times'?", a: "Die **Dehumanisierung**; der Mensch wird zum austauschbaren **Zahnrad** im Getriebe.", n: "Mensch als mechanisches Bauteil ohne Autonomie.", ref: "204" },
{ c: "I: Essmaschine", q: "Was symbolisiert die Essmaschine?", a: "Den Versuch, **biologische Pausen** zwecks Profitmaximierung abzuschaffen.", n: "Vollständige Vereinnahmung des biologischen Zeitkontinuums.", ref: "205" },
{ c: "I: Psychologie", q: "Welche Folge hat die Fliessbandarbeit im Film?", a: "Einen **Nervenzusammenbruch** durch Monotonie und extremen Zeitdruck.", n: "Überlastung der neuronalen Verarbeitungskapazität.", ref: "1617" },
{ c: "I: Überwachung", q: "Wie kontrolliert der Chef die Arbeiter?", a: "Über **Bildschirme** (Sogar auf der Toilette); eine frühe Form permanenter Kontrolle.", n: "Panoptische Systemüberwachung.", ref: "1608" },
{ c: "I: Fordismus", q: "Merkmal des Fordismus laut Film?", a: "**Fließbandproduktion** und extreme Zerlegung der Arbeit in kleinste Schritte.", n: "Zerstückelung komplexer Prozesse in primitive Algorithmen.", ref: "1596" },
// POSTEN K: SCHWEIZ
{ c: "K: Schweiz", q: "Warum war 1848 wichtig für die Industrie?", a: "Schaffung eines einheitlichen **Zollgebiets** und des **Frankens** stärkte den Binnenmarkt.", n: "Systemhomogenisierung zur Reibungsminderung im Handel.", ref: "210" },
{ c: "K: Energie", q: "Was ist 'Weiße Kohle'?", a: "**Wasserkraft**; der Ersatz für fehlende Kohlevorkommen in der Schweiz.", n: "Nutzung regenerativer Potenziale statt fossiler Speicher.", ref: "209" },
{ c: "K: Verkehr", q: "Vorteil der SBB-Gründung 1898?", a: "Zusammenführung defizitärer Privatbahnen in ein **einheitliches Netz**.", n: "Zentralisierung der Infrastruktur zur Effizienzsteigerung.", ref: "487" },
{ c: "K: Landwirtschaft", q: "Welche Änderung ging der Industrie voraus?", a: "Aufhebung der **Dreizelgenwirtschaft** und Stallfütterung (mehr Dünger).", n: "Optimierung des Energie-Outputs im Primärsektor.", ref: "457" },
{ c: "K: Proto-Industrie", q: "Was ist das 'Verlagssystem'?", a: "Unternehmer liefern Rohstoffe an **Heimarbeiter** und verkaufen die fertigen Produkte.", n: "Dezentrale Produktion unter zentraler Steuerung.", ref: "460" },
{ c: "K: Tunnel", q: "Bauzeit des 1. Gotthardtunnels?", a: "**1872-1882** (10 Jahre); über 300 Todesfälle.", n: "Mechanischer Widerstand des Granits vs. menschliche Arbeitskraft.", ref: "485" },
{ c: "K: Sektoren", q: "Anteil Tertiärsektor Schweiz heute?", a: "Ca. **76.7%** (Dienstleistungen dominieren).", n: "Übergang zur Informationsgesellschaft.", ref: "491" },
{ c: "K: Industrie", q: "Nenne eine Schweizer Pionierbranche.", a: "Die **Textilindustrie** (z.B. Baumwollspinnerei in der Nordschweiz).", n: "Initiale Keimzelle der Industrialisierung.", ref: "473" },
{ c: "K: Elektrik", q: "Wieso war Strom für die Schweiz ideal?", a: "Weil die Topografie viele **Flüsse/Stauseen** für Kraftwerke bietet.", n: "Topografische Standortvorteile für Energiewandlung.", ref: "476" },
{ c: "K: Gotthard", q: "Kosten Gotthard-Basistunnel (2016)?", a: "Ca. **12.2 Milliarden** Franken.", n: "Massive Kapitalakkumulation für Langzeit-Infrastruktur.", ref: "486" },
// POSTEN L: TOURISMUS
{ c: "L: Rigi", q: "Wie hieß die Rigi im 19. Jahrhundert?", a: "**König der Berge**; ein Modeberg für die europäische Elite.", n: "Attraktor für hohen sozioökonomischen Status.", ref: "214" },
{ c: "L: Technik", q: "Was geschah 1871 auf der Rigi?", a: "Inbetriebnahme der **ersten Bergbahn** Europas (Vitznau-Rigi-Kulm).", n: "Überwindung der Gravitation durch Zahnrad-Technik.", ref: "214" },
{ c: "L: Wandel", q: "Wieso verschwanden die Luxushotels?", a: "Weltkriege brachten Krisen; Wandel zum **Tagestourismus**.", n: "Anpassung an veränderte ökonomische Umweltbedingungen.", ref: "215" },
{ c: "L: Jungfrau", q: "Was ist das Projekt V-Bahn?", a: "Ein Ausbau mit dem **Eiger Express**, um Touristen schneller hochzubringen.", n: "Zeitoptimierung im Dienstleistungsfluss.", ref: "1703" },
{ c: "L: Kontroverse", q: "Konflikt bei der V-Bahn?", a: "**Profitinteressen** (Massentourismus) vs. **Landschaftsschutz**.", n: "Zielkonflikt zwischen Ökonomie und Ökologie.", ref: "216" },
// POSTEN N: INDUSTRIE 4.0
{ c: "N: Zukunft", q: "Was ist das 'Internet der Dinge'?", a: "Die globale **Vernetzung** von physischen und virtuellen Gegenständen.", n: "Schaffung eines globalen neuronalen Objekt-Netzwerks.", ref: "142" },
{ c: "N: Arbeit", q: "McKinsey Prognose 2030: Was fällt weg?", a: "**Körperliche** und einfache **kognitive** Tätigkeiten (Büroarbeit/Fließband).", n: "Automation von Entropie-armen Routineprozessen.", ref: "298" },
{ c: "N: Kompetenz", q: "Was wird 2030 wichtiger?", a: "**IT-Fähigkeiten**, **soziale Kompetenzen** und **kritisches Denken**.", n: "Fokus auf komplexe, nicht-lineare Problemlösung.", ref: "223" },
{ c: "N: Management", q: "Was bedeutet 'New Work'?", a: "Flexibles Arbeiten (z.B. **Homeoffice**), Selbstbestimmung und flache Hierarchien.", n: "Dezentrale Netzwerk-Organisation statt hierarchischer Pyramide.", ref: "1494" },
{ c: "N: Ethik", q: "Risiko der digitalen Arbeitswelt?", a: "Permanente **Verfügbarkeit** und digitale **Überwachung**.", n: "Informationsasymmetrie zwischen System und Individuum.", ref: "1524" },
// POSTEN O-S: KATASTROPHEN & PIONIERE
{ c: "O: Erste Fabrik", q: "Besonderheit der Cromford Mill (1771)?", a: "Erste Fabrik, die alle Schritte **mechanisch unter einem Dach** vereinte.", n: "Integration spezialisierter Subsysteme zu einer Einheit.", ref: "302" },
{ c: "P: Eisen", q: "Was erfand Abraham Darby 1709?", a: "Das Schmelzen von Eisenerz mit **Koks** statt Holzkohle.", n: "Erschließung effizienterer fossiler Energiespeicher.", ref: "305" },
{ c: "R: Challenger", q: "Ursache der Challenger-Explosion?", a: "Versagen der **Dichtungsringe** (O-Ringe) aufgrund von Kälte.", n: "Thermische Materialermüdung unter Extrembedingungen.", ref: "1863" },
{ c: "R: Management", q: "Fehler der NASA-Leitung bei der Challenger?", a: "Ignorieren der **Ingenieur-Warnungen** aus Imagegründen (PR).", n: "Systemversagen durch Priorisierung von Marketing über Physik.", ref: "1855" },
{ c: "S: Tschernobyl", q: "Was geschah bei Block 4?", a: "**Leistungsexplosion** während eines misslungenen Sicherheitstests.", n: "Unkontrollierte Kettenreaktion (Positiver Rückkopplungseffekt).", ref: "2364" },
{ c: "S: Technik", q: "Baufehler des RBMK-Reaktors?", a: "Fehlendes **Containment** (Schutzhülle) und instabiles Design bei niedriger Last.", n: "Mangelnde systemische Sicherheitsbarrieren.", ref: "2357" },
{ c: "S: Folgen", q: "Politische Folge von Tschernobyl in DE?", a: "**Atomausstieg**-Debatte und Gründung des Umweltministeriums.", n: "Drastischer Richtungswechsel der Energiepolitik nach Störfall.", ref: "2410" },
// POSTEN U-W: GLOBALISIERTE INDUSTRIE
{ c: "U: Auto", q: "Was erfand Henry Ford 1908?", a: "Die **Fließbandproduktion** für das Modell T.", n: "Taktung der Produktion zur Massenfertigung.", ref: "1934" },
{ c: "U: Industrie", q: "Was bedeutet 'Just-in-Time'?", a: "Bauteile werden erst geliefert, wenn sie **tatsächlich gebraucht** werden (keine Lager).", n: "Flussoptimierung zur Minimierung toter Systemenergie.", ref: "1936" },
{ c: "V: Kleider", q: "Problem der 'Fast Fashion'?", a: "Extreme **Umweltbelastung** (Mikroplastik) und schlechte **Arbeitsbedingungen**.", n: "Negative externe Effekte im globalen Stoffkreislauf.", ref: "311" },
{ c: "V: Ressourcen", q: "Wasserverbrauch für eine Jeans?", a: "Ca. **7500 Liter** Wasser.", n: "Hoher spezifischer Ressourcenverbrauch pro Einheit.", ref: "2114" },
{ c: "W: Kaffee", q: "Woher stammt Kaffee ursprünglich?", a: "Aus dem Hochland von **Äthiopien** (Provinz Kafa).", n: "Biologischer Ursprungspunkt eines globalen Gutes.", ref: "2247" },
{ c: "W: Wirtschaft", q: "Wieviel bleibt dem Bauern beim Kaffee?", a: "Nur ca. **5%** des Verkaufspreises.", n: "Asymmetrische Wertschöpfungsverteilung im System.", ref: "2278" },
{ c: "W: Markt", q: "Größter Kaffeeproduzent weltweit?", a: "**Brasilien** (seit 1830 an der Spitze).", n: "Monopolartige Stellung in der globalen Nische.", ref: "2264" },
// WEITERE DETAILS
{ c: "D: Technik", q: "Was ist die 'Mule'?", a: "Kombination aus Spinning Jenny und Waterframe für **feineres Garn**.", n: "Hybridisierung von Technologien zur Qualitätssteigerung.", ref: "261" },
{ c: "K: Gotthard", q: "Problem beim Tunnelbau 1882?", a: "Katastrophale **Hygiene** und Staublunge; hunderte Tote.", n: "Biologischer Verschleiß im Dienste der Infrastruktur.", ref: "1308" },
{ c: "B: Adam Smith", q: "Aufgabe des Staates laut Smith?", a: "**Schutz** vor Angriffen, **Justiz** und **öffentliche Einrichtungen**.", n: "Minimale Rahmenbedingungen für Systemerhalt.", ref: "646" },
{ c: "H: Abwasser", q: "Wieso opferten Unternehmer die Flüsse?", a: "Wirtschaftlicher Wert der Industrie galt als **1000x höher** als der der Fischerei.", n: "Radikale ökonomische Abwägung gegen ökologische Interessen.", ref: "1186" },
{ c: "I: Chaplin", q: "Was bewirkt die Uhr am Filmanfang?", a: "Sie zeigt, dass der **Takt der Fabrik** das Leben der Menschen bestimmt.", n: "Synchronisation des Individuums mit der Maschinentaktung.", ref: "1622" },
{ c: "N: Swissmem", q: "Chance von Industrie 4.0 für die Schweiz?", a: "Erhöhte **Wettbewerbsfähigkeit** und Ressourceneffizienz.", n: "Systemoptimierung zur Standortsicherung.", ref: "1773" },
{ c: "Schweiz", q: "Was war 'Cromford Ratingen'?", a: "Die erste Fabrik auf dem **europäischen Festland** (nach englischem Vorbild).", n: "Diffusion technologischer Innovationen.", ref: "1976" },
{ c: "U: Zukunft", q: "Technologie-Trend im Autobau?", a: "**Elektro-Mobilität** und **autonomes Fahren**.", n: "Paradigmenwechsel im Antriebs- und Steuerungssystem.", ref: "1944" },
{ c: "A: Gemälde", q: "Unterschied Borsig-Bild zu Dossier-Titel?", a: "Borsig wirkt **hell/geordnet**, Titelbild zeigt **Russ/Enge**.", n: "Kontrast zwischen Idealvorstellung und realer Systementopie.", ref: "239" },
{ c: "K: Proto-Industrie", q: "Vorteil des Verlagssystems?", a: "Umgehung der innovationshemmenden **Zünfte**.", n: "Adaptive Strategie zur Vermeidung von Systemblockaden.", ref: "461" }
];
let currentSession = [];
let wrongQueue = [];
let currentIndex = 0;
let score = 0;
let totalInRound = 0;
function initApp() {
const limit = document.getElementById('card-limit').value;
totalInRound = Math.min(limit, allCards.length);
currentSession = allCards.sort(() => 0.5 - Math.random()).slice(0, totalInRound);
wrongQueue = [];
currentIndex = 0;
score = 0;
showScreen('learning-screen');
updateCard();
}
function showScreen(id) {
document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
document.getElementById(id).classList.add('active');
}
function updateCard() {
const card = currentSession[currentIndex];
document.getElementById('cat-display').innerText = card.c;
document.getElementById('counter-display').innerText = `${currentIndex + 1} / ${currentSession.length}`;
document.getElementById('q-text').innerText = card.q;
document.getElementById('a-text').innerHTML = formatText(card.a);
document.getElementById('analogy-box').innerHTML = `<b>Naturwiss. Analogie:</b><br>${card.n}`;
document.getElementById('card-obj').classList.remove('flipped');
document.getElementById('action-buttons').style.visibility = 'hidden';
const progress = (currentIndex / currentSession.length) * 100;
document.getElementById('progress-bar').style.width = progress + '%';
}
function formatText(text) {
return text.replace(/\*\*(.*?)\*\*/g, '<b>$1</b>');
}
function flipCard() {
document.getElementById('card-obj').classList.add('flipped');
document.getElementById('action-buttons').style.visibility = 'visible';
}
function processAnswer(correct) {
if (correct) {
score++;
} else {
wrongQueue.push(currentSession[currentIndex]);
}
currentIndex++;
if (currentIndex < currentSession.length) {
updateCard();
} else if (wrongQueue.length > 0) {
alert(`Runde beendet. Du wiederholst jetzt ${wrongQueue.length} Karten, die falsch waren.`);
currentSession = [...wrongQueue];
wrongQueue = [];
currentIndex = 0;
updateCard();
} else {
finishSession();
}
}
function finishSession() {
showScreen('end-screen');
document.getElementById('final-stats').innerText = `Ergebnis: ${score} von ${totalInRound} richtig gewusst!`;
let milestone = "";
if (score >= 20) milestone = "Status erreicht: PIONIER DER MECHANISIERUNG! ⚙️";
if (score >= 40) milestone = "Status erreicht: MEISTER DES FORDISMUS! 🚗";
if (score >= 60) milestone = "Status erreicht: ARCHITEKT DER INDUSTRIE 4.0! 🌐";
document.getElementById('milestone-text').innerText = milestone;
}
</script>
</body>
</html>
Industrialisierung Master-App