Adminator
fecd8bb9c9
562 Ersetzungen in 50 Dateien: Halbgeviertstrich zwischen zwei Ziffern (= "bis"-Bereich) bekommt Leerzeichen davor/danach (3–4 -> 3 – 4). Regex /([0-9])\s*–\s*(?=[0-9])/ auf Rohtext (format-erhaltend, CRLF/Einrueckung unveraendert), Bindestriche in Woertern und Minuszeichen unangetastet, alle JSON weiter gueltig. Energiemanager-Zeitbloecke sind Display-Labels (kein Logik-Key) -> safe. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
1509 lines
62 KiB
HTML
1509 lines
62 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
||
<title>GeoGraSim — Geografie unterrichten · Präsentation</title>
|
||
<link rel="icon" type="image/png" href="../../favicon-96x96.png" sizes="96x96"/>
|
||
<link rel="icon" type="image/svg+xml" href="../../favicon.svg"/>
|
||
<script src="../API Key.js"></script>
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reset.css"/>
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.css"/>
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css"/>
|
||
<link rel="stylesheet" href="fonts/fonts.css"/>
|
||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js"></script>
|
||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js"></script>
|
||
<style>
|
||
:root {
|
||
--brand: #163374;
|
||
--bar-h: 52px;
|
||
}
|
||
|
||
/* ── Base ── */
|
||
.reveal {
|
||
font-family: system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
|
||
font-size: 32px;
|
||
color: #111;
|
||
background: #fff;
|
||
}
|
||
.reveal h1 { font-size: 1.8em; font-weight: 700; line-height: 1.1; margin-bottom: 0.35em; }
|
||
.reveal h2 { font-size: 1.15em; font-weight: 700; line-height: 1.2; margin-bottom: 0.35em; }
|
||
.reveal h3 { font-size: 0.68em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: #888; margin: 0.8em 0 0.3em; }
|
||
.reveal p, .reveal li { font-size: 0.78em; line-height: 1.75; color: #333; }
|
||
.reveal p { margin-bottom: 0.35em; }
|
||
.reveal strong { font-weight: 700; color: #111; }
|
||
.reveal em { font-style: italic; }
|
||
.reveal a { color: var(--brand); }
|
||
.reveal ul { list-style: none; padding: 0; margin: 0; }
|
||
.reveal ul li { padding-left: 1.1em; position: relative; margin-bottom: 0.3em; }
|
||
.reveal ul li::before { content: '–'; position: absolute; left: 0; color: #aaa; }
|
||
.reveal ol li { margin-bottom: 0.3em; }
|
||
.reveal .slides section { padding-bottom: calc(var(--bar-h) + 16px) !important; box-sizing: border-box; text-align: left; }
|
||
.reveal .progress span { background: var(--brand); }
|
||
.reveal .controls { color: var(--brand); bottom: calc(var(--bar-h) + 10px) !important; }
|
||
|
||
/* ── Footer bar ── */
|
||
#slide-footer-bar {
|
||
position: fixed; bottom: 0; left: 0; right: 0;
|
||
height: var(--bar-h); background: var(--brand);
|
||
display: flex; align-items: center; padding: 0 2em;
|
||
z-index: 200;
|
||
}
|
||
#footer-logo { height: 26px; width: 26px; opacity: 0.85; color: rgba(255,255,255,.9); flex-shrink: 0; }
|
||
#footer-num { position: absolute; left: 50%; transform: translateX(-50%); font-size: 11px; color: rgba(255,255,255,.45); letter-spacing: .1em; font-family: system-ui; }
|
||
#footer-clock { margin-left: auto; font-size: 12px; color: rgba(255,255,255,.45); font-family: system-ui; font-variant-numeric: tabular-nums; }
|
||
#slide-footer-bar.bar-light { background: #fff; box-shadow: 0 -1px 0 rgba(0,0,0,.1); }
|
||
#slide-footer-bar.bar-light #footer-num,
|
||
#slide-footer-bar.bar-light #footer-clock { color: rgba(22,51,116,.4); }
|
||
#slide-footer-bar.bar-light #footer-logo { color: var(--brand); }
|
||
|
||
/* ── UI buttons ── */
|
||
.home-btn {
|
||
position: fixed; top: 1em; right: 1em; width: 1.9em; height: 1.9em;
|
||
border-radius: 50%; border: 1px solid rgba(0,0,0,.15); background: rgba(255,255,255,.9);
|
||
color: #555; font-size: 1em; display: flex; align-items: center; justify-content: center;
|
||
text-decoration: none; z-index: 300; box-shadow: 0 1px 4px rgba(0,0,0,.1);
|
||
}
|
||
.home-btn.light { color: var(--brand); }
|
||
.fab {
|
||
width: 1.9em; height: 1.9em; border-radius: 50%; border: 1px solid rgba(0,0,0,.15);
|
||
background: rgba(255,255,255,.9); color: #555; font-size: 1em; cursor: pointer;
|
||
display: flex; align-items: center; justify-content: center; text-decoration: none;
|
||
box-shadow: 0 1px 4px rgba(0,0,0,.1);
|
||
}
|
||
.fab.light { color: var(--brand); }
|
||
/* ── Collapsible FAB cluster ── */
|
||
#fab-cluster {
|
||
position: fixed; top: 1em; right: 3.5em;
|
||
display: flex; align-items: center; gap: .4em;
|
||
z-index: 300;
|
||
}
|
||
#fab-tools {
|
||
display: flex; gap: .4em; align-items: center;
|
||
max-width: 0; overflow: hidden; opacity: 0;
|
||
transition: max-width .28s ease, opacity .2s ease;
|
||
}
|
||
#fab-cluster.open #fab-tools { max-width: 22em; opacity: 1; }
|
||
#img-btn.generating { animation: spin 1.2s linear infinite; cursor: default; }
|
||
@keyframes spin { to { transform: rotate(360deg); } }
|
||
|
||
/* ── Toast ── */
|
||
#img-toast {
|
||
position: fixed; bottom: calc(var(--bar-h) + 12px); left: 50%; transform: translateX(-50%);
|
||
background: rgba(22,51,116,.92); color: #fff; font-size: .7rem; padding: .38rem 1.1rem;
|
||
border-radius: 20px; pointer-events: none; opacity: 0; transition: opacity .4s;
|
||
z-index: 400; white-space: nowrap; font-family: system-ui;
|
||
}
|
||
|
||
@media print { #slide-footer-bar, #img-toast { display: none; } .reveal section { page-break-after: always; } }
|
||
|
||
/* ══ LAYOUT-VARIANTEN ══
|
||
Gradient-Modus: Der Verlauf ist direkt in das KI-generierte Bild eingebacken —
|
||
linke Seite weiß (Textbereich lesbar), rechte Seite volles Motiv.
|
||
Kein CSS-Overlay nötig, Opacity 1. */
|
||
|
||
/* ══ UI PANELS ══ */
|
||
.ui-panel {
|
||
display: none;
|
||
position: fixed;
|
||
bottom: calc(var(--bar-h) + 14px);
|
||
right: 1em;
|
||
background: #fff;
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 10px;
|
||
padding: 1.1em 1.2em;
|
||
z-index: 350;
|
||
box-shadow: 0 6px 28px rgba(0,0,0,.16);
|
||
min-width: 280px;
|
||
max-width: 340px;
|
||
}
|
||
.ui-panel.open { display: block; }
|
||
.panel-title {
|
||
font-size: .65rem; font-weight: 700; text-transform: uppercase;
|
||
letter-spacing: .12em; color: #999; margin-bottom: .85em;
|
||
font-family: system-ui;
|
||
}
|
||
|
||
/* Layout panel */
|
||
.layout-opts { display: flex; gap: .6em; }
|
||
.layout-opt {
|
||
flex: 1; border: 2px solid #e0e0e0; border-radius: 8px;
|
||
padding: .6em .4em; cursor: pointer; background: #fafafa;
|
||
transition: border-color .15s, background .15s; text-align: center;
|
||
}
|
||
.layout-opt:hover { border-color: var(--brand); background: #f0f4fd; }
|
||
.layout-opt.active { border-color: var(--brand); background: #eef2fc; }
|
||
.lo-icon { font-size: 1.4em; margin-bottom: .25em; color: #444; }
|
||
.lo-name { font-size: .62rem; font-weight: 700; color: #222; font-family: system-ui; }
|
||
.lo-desc { font-size: .55rem; color: #888; margin-top: .15em; font-family: system-ui; line-height: 1.4; }
|
||
|
||
/* Font panel */
|
||
.font-opts { display: flex; flex-direction: column; gap: .5em; }
|
||
.font-opt {
|
||
border: 2px solid #e8e8e8; border-radius: 7px; padding: .55em .9em;
|
||
cursor: pointer; background: #fafafa; transition: border-color .15s;
|
||
display: flex; align-items: center; gap: .8em;
|
||
}
|
||
.font-opt:hover { border-color: var(--brand); }
|
||
.font-opt.active { border-color: var(--brand); background: #eef2fc; }
|
||
.fo-sample { font-size: 1.15em; font-weight: 700; color: #111; flex-shrink: 0; width: 2.8em; }
|
||
.fo-info { flex: 1; }
|
||
.fo-name { font-size: .66rem; font-weight: 700; color: #222; font-family: system-ui; }
|
||
.fo-pair { font-size: .58rem; color: #888; font-family: system-ui; }
|
||
|
||
/* Color panel */
|
||
.color-swatches { display: flex; flex-wrap: wrap; gap: .4em; margin-bottom: .75em; }
|
||
.color-swatch {
|
||
width: 2em; height: 2em; border-radius: 50%; cursor: pointer;
|
||
border: 2px solid transparent; transition: transform .12s, border-color .12s;
|
||
box-shadow: 0 1px 4px rgba(0,0,0,.12);
|
||
}
|
||
.color-swatch:hover { transform: scale(1.15); border-color: #555; }
|
||
.color-row { display: flex; align-items: center; gap: .6em; margin-top: .4em; }
|
||
.color-row input[type=color] {
|
||
width: 2.2em; height: 2.2em; border: none; border-radius: 4px;
|
||
cursor: pointer; padding: 0; background: none;
|
||
}
|
||
.color-row label { font-size: .62rem; color: #666; font-family: system-ui; }
|
||
.panel-btn {
|
||
width: 100%; padding: .45em; font-size: .65rem; border-radius: 6px;
|
||
border: 1px solid #ddd; background: #f5f5f5; cursor: pointer;
|
||
font-family: system-ui; margin-top: .5em; color: #444;
|
||
transition: background .15s;
|
||
}
|
||
.panel-btn:hover { background: #eee; }
|
||
.panel-btn.danger { border-color: #f5a0a0; color: #b71c1c; background: #fff5f5; }
|
||
.panel-btn.danger:hover { background: #fde8e8; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="reveal">
|
||
<div class="slides">
|
||
|
||
<!-- 01 TITEL -->
|
||
<section>
|
||
<h1>Geografie unterrichten<br>in der Sekundarstufe I</h1>
|
||
<p>Lehrplan, Kompetenzen, Schülervorstellungen,<br>Inklusion, Differenzierung & Sprachsensibilität</p>
|
||
<p>Thomas Schroffenegger<br>
|
||
GeoGraSim — Plattform für Geografie-Simulationen<br>
|
||
Auf Basis des österreichischen GW-Lehrplans 2023</p>
|
||
</section>
|
||
|
||
<!-- 02 ZÄSUR -->
|
||
<section>
|
||
<h3>1. September 2023</h3>
|
||
<h1>Der GW-Lehrplan ist neu — kompetenzorientiert & verbindlich</h1>
|
||
<p>Bundesgesetzblatt II Nr. 1/2023 · Inkraft seit Schuljahr 2023/24</p>
|
||
<ul>
|
||
<li>Erstmals <strong>Kompetenzraster</strong> mit verbindlichen Anforderungen pro Klasse</li>
|
||
<li><strong>Wirtschaftliche Bildung</strong> erstmals namensgebend gleichberechtigt</li>
|
||
<li><strong>4 Basiskonzepte</strong> als roter Faden — Raum, Maßstab, System, Mensch-Umwelt</li>
|
||
</ul>
|
||
<p>BMBWF, BGBl. II 1/2023 · Geographie und wirtschaftliche Bildung</p>
|
||
</section>
|
||
|
||
<!-- 03 DIE FRAGE -->
|
||
<section>
|
||
<h2>Was bedeutet das für den Unterricht?</h2>
|
||
<p>Vom „Wir lernen über Länder" hin zum „Wir bauen Verstehen von räumlichen Systemen" — das ist die Verschiebung des neuen Lehrplans.</p>
|
||
<p>Welche Kompetenzen stehen im Zentrum? Wie unterrichten wir sie? Und wie gehen wir mit den Schülervorstellungen um, die schon da sind?</p>
|
||
<ul>
|
||
<li>10 bis 14 Jahre — die Konzepte werden hier grundgelegt</li>
|
||
<li>Klimawandel, Migration, Globalisierung — drängende Themen, jede Stunde</li>
|
||
<li>Inklusion, Sprachsensibilität, Digitalität als Querschnittsanforderung</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- 04 ÜBERBLICK -->
|
||
<section>
|
||
<h2>Überblick</h2>
|
||
<h3>Theorie & Lehrplan</h3>
|
||
<ol>
|
||
<li>Grundlagen der Geografie-Didaktik</li>
|
||
<li>Der GW-Lehrplan 2023 im Detail</li>
|
||
<li>Schülervorstellungen & Conceptual Change</li>
|
||
<li>Kompetenzorientierung</li>
|
||
</ol>
|
||
<h3>Praxis</h3>
|
||
<ol start="5">
|
||
<li>Inklusion, Differenzierung, Sprache</li>
|
||
<li>Assessment & Feedback</li>
|
||
<li>Internationaler Vergleich</li>
|
||
<li>Herausforderungen & Ausblick</li>
|
||
</ol>
|
||
<p>Basis: 135 peer-reviewed Quellen · GW-Lehrplan 2023 · DACH-Vergleich · IGU/GeoCapabilities</p>
|
||
</section>
|
||
|
||
<!-- KAPITEL 1 -->
|
||
<section>
|
||
<h3>Kapitel 1 — Grundlagen</h3>
|
||
<h1>Was ist<br>Geografie-Didaktik?</h1>
|
||
</section>
|
||
|
||
<!-- 06 PARADIGMEN -->
|
||
<section>
|
||
<h2>Drei prägende Paradigmen</h2>
|
||
<h3>Powerful Knowledge</h3>
|
||
<p>Geografie liefert Wissen, das Alltagsdenken übersteigt — Strukturwissen statt Faktenliste. Young, Lambert.</p>
|
||
<h3>Basiskonzepte</h3>
|
||
<p>Wenige Schlüsselideen strukturieren das gesamte Fach: Raum, Maßstab, System, Mensch-Umwelt. Im AT-Lehrplan 2023 verbindlich verankert.</p>
|
||
<h3>Raumkonzepte</h3>
|
||
<p>Vier Zugänge: Container · Beziehung · System · Konstrukt. Die Wahl prägt den ganzen Unterricht.</p>
|
||
</section>
|
||
|
||
<!-- 07 ENTWICKLUNG -->
|
||
<section>
|
||
<h2>Vom Realienunterricht zur GW-Bildung</h2>
|
||
<ul>
|
||
<li><strong>Bis 1962</strong> — Erdkunde als beschreibende Länderkunde</li>
|
||
<li><strong>1962</strong> — „Geografie und Wirtschaftskunde" als Doppelfach in der HS</li>
|
||
<li><strong>1985</strong> — Lehrplan: regionalgeografisch, wirtschaftsorientiert</li>
|
||
<li><strong>2000</strong> — Kompetenzorientierung beginnt</li>
|
||
<li><strong>2023</strong> — Lehrplan-Neuverordnung: Kompetenzraster, Basiskonzepte, wirtschaftliche Bildung gleichberechtigt</li>
|
||
</ul>
|
||
<p>Österreich ist in dieser Hinsicht didaktisch fortschrittlich — aber Stundenknappheit bleibt.</p>
|
||
</section>
|
||
|
||
<!-- KAPITEL 2 -->
|
||
<section>
|
||
<h3>Kapitel 2 — Lehrplan</h3>
|
||
<h1>GW-Lehrplan 2023<br>im Detail</h1>
|
||
</section>
|
||
|
||
<!-- 09 KOMPETENZMODELL -->
|
||
<section>
|
||
<h2>Das Kompetenzmodell — vier Bereiche</h2>
|
||
<h3>Fachwissen</h3>
|
||
<p>Geografische Konzepte, räumliche Strukturen, ökonomische Zusammenhänge.</p>
|
||
<h3>Erkenntnisgewinnung</h3>
|
||
<p>Methodisches Arbeiten mit Geomedien, Daten, Karten, Modellen.</p>
|
||
<h3>Kommunikation</h3>
|
||
<p>Räumliche Sachverhalte fachsprachlich darstellen und argumentieren.</p>
|
||
<h3>Bewertung & Handeln</h3>
|
||
<p>Werteorientierte Beurteilung räumlicher Konflikte und Folgen.</p>
|
||
</section>
|
||
|
||
<!-- 10 KLASSENSTUFEN -->
|
||
<section>
|
||
<h2>Aufbau über vier Klassenstufen</h2>
|
||
<h3>1. Klasse — Leben und Wirtschaften (2 Wo.-Std.)</h3>
|
||
<p>Grundkonzepte Raum, Maßstab, System; Wetter und Klima; Einführung in Karten.</p>
|
||
<h3>2. Klasse — Nachhaltiges Leben und Wirtschaften (1 Wo.-Std.)</h3>
|
||
<p>Ressourcen, Energie, Kreisläufe; Konsum, Lebensstile, Globalisierung in Ansätzen.</p>
|
||
<h3>3. Klasse — Österreich (2 Wo.-Std.)</h3>
|
||
<p>Verkehr, Logistik, Wirtschaft, Bevölkerung — eigenes Land in Detail.</p>
|
||
<h3>4. Klasse — Globalisierte Welt (2 Wo.-Std.)</h3>
|
||
<p>Klimawandel, Migration, Welthandel, internationale Verflechtung.</p>
|
||
</section>
|
||
|
||
<!-- 11 BASISKONZEPTE -->
|
||
<section>
|
||
<h2>Vier Basiskonzepte als roter Faden</h2>
|
||
<ol>
|
||
<li><strong>Raum</strong> — was ist räumlich gemeint? Container, Beziehung, System, Konstrukt</li>
|
||
<li><strong>Maßstab</strong> — von lokal bis global · Wechsel der Maßstabsebene</li>
|
||
<li><strong>System</strong> — Elemente, Prozesse, Wechselwirkungen, Emergenz</li>
|
||
<li><strong>Mensch-Umwelt</strong> — Wechselwirkung, Verantwortung, Nachhaltigkeit</li>
|
||
</ol>
|
||
<p>Diese Konzepte sind der eigentliche Lerngegenstand — die Inhalte sind Beispiele, an denen sie geübt werden.</p>
|
||
</section>
|
||
|
||
<!-- KAPITEL 3 -->
|
||
<section>
|
||
<h3>Kapitel 3 — Vorstellungen</h3>
|
||
<h1>Schülervorstellungen<br>& Conceptual Change</h1>
|
||
</section>
|
||
|
||
<!-- 13 ALLTAGSVORSTELLUNGEN -->
|
||
<section>
|
||
<h2>Was Schüler*innen mitbringen</h2>
|
||
<p>Kinder kommen nicht als leere Tafel in den Unterricht. Sie haben Alltagsvorstellungen — oft anschaulich, oft falsch — von Klima, Raum, Wirtschaft.</p>
|
||
<ul>
|
||
<li><strong>„Das Ozonloch ist die Erderwärmung."</strong> — Robust, weltweit verbreitet, hartnäckig.</li>
|
||
<li><strong>„Tropisch = warm, nichts mehr."</strong> — Reduktion auf Temperatur statt Niederschlag und Vegetation.</li>
|
||
<li><strong>„Geld kommt vom Staat."</strong> — Ökonomisches Alltagsmodell mit Lücken.</li>
|
||
<li><strong>„Migration = Flucht."</strong> — Mediendominiertes Vorverständnis</li>
|
||
</ul>
|
||
<p>Quelle: Reinfried 2015, Conrad 2020 u. v. a.</p>
|
||
</section>
|
||
|
||
<!-- 14 CONCEPTUAL CHANGE -->
|
||
<section>
|
||
<h2>Conceptual Change im GW-Unterricht</h2>
|
||
<p>Vorstellungen ändern sich nicht durch Wiederholung, sondern durch <em>Konflikt mit Erfahrung</em>.</p>
|
||
<h3>Vier Schritte (Posner et al.)</h3>
|
||
<ol>
|
||
<li><strong>Unzufriedenheit</strong> mit der bisherigen Vorstellung erzeugen</li>
|
||
<li><strong>Verständlichkeit</strong> der neuen Vorstellung sichern</li>
|
||
<li><strong>Plausibilität</strong> — die neue Vorstellung muss erfahrungslogisch sinnvoll sein</li>
|
||
<li><strong>Fruchtbarkeit</strong> — sie erklärt Neues, nicht nur das Alte</li>
|
||
</ol>
|
||
<p><em>Simulationen können genau das leisten</em> — Vorhersage formulieren, Konflikt zur Erwartung erleben, neu denken.</p>
|
||
</section>
|
||
|
||
<!-- KAPITEL 4 -->
|
||
<section>
|
||
<h3>Kapitel 4 — Kompetenzen</h3>
|
||
<h1>Kompetenz-<br>orientierung</h1>
|
||
</section>
|
||
|
||
<!-- 16 KOMPETENZBEREICHE -->
|
||
<section>
|
||
<h2>Drei tragende Kompetenzen</h2>
|
||
<h3>Systemkompetenz</h3>
|
||
<p>Erkennen, beschreiben, modellieren von Wechselwirkungen — Kernanliegen der Geografie.</p>
|
||
<h3>Räumliche Orientierungskompetenz</h3>
|
||
<p>Karten lesen, Maßstäbe wechseln, sich im Raum verorten — fachspezifischer als oft angenommen.</p>
|
||
<h3>Argumentations- & Kommunikationskompetenz</h3>
|
||
<p>Räumliche Sachverhalte mit Fachsprache darstellen, Positionen begründen, Konflikte bewerten.</p>
|
||
</section>
|
||
|
||
<!-- 17 INHALT VS KOMPETENZ -->
|
||
<section>
|
||
<h2>Vom Inhalt zur Kompetenz</h2>
|
||
<h3>Früher</h3>
|
||
<ul>
|
||
<li><em>„Die Schüler*innen kennen die Hauptstadt von Norwegen."</em></li>
|
||
<li>Faktenwissen, abprüfbar, kurzlebig</li>
|
||
</ul>
|
||
<h3>Heute</h3>
|
||
<ul>
|
||
<li><em>„Die Schüler*innen können räumliche Strukturen Norwegens unter Bezug auf Klima und Wirtschaft erklären."</em></li>
|
||
<li>Anwendungswissen, übertragbar</li>
|
||
</ul>
|
||
<p>Inhalte verschwinden nicht — sie werden Mittel zum Aufbau von Kompetenzen, nicht Selbstzweck.</p>
|
||
</section>
|
||
|
||
<!-- KAPITEL 5 -->
|
||
<section>
|
||
<h3>Kapitel 5 — Inklusion</h3>
|
||
<h1>Inklusion, Differenzierung,<br>Sprachsensibilität</h1>
|
||
</section>
|
||
|
||
<!-- 19 INKLUSION -->
|
||
<section>
|
||
<h2>Inklusiver GW-Unterricht</h2>
|
||
<p>Inklusion ist Querschnittsaufgabe, nicht Sonderfall einer einzelnen Stunde. Geografie eignet sich gut — räumliches Denken ist nicht an Lese- oder Rechenkompetenz gebunden.</p>
|
||
<ul>
|
||
<li><strong>Mehrere Zugänge</strong> — Karte, Modell, Bild, Erfahrung, Erzählung</li>
|
||
<li><strong>Unterschiedliche Anforderungsniveaus</strong> bei gleicher Aufgabenklasse</li>
|
||
<li><strong>Soziales Lernen</strong> — räumliche Konflikte als Anlass für Perspektivwechsel</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- 20 DIFFERENZIERUNG -->
|
||
<section>
|
||
<h2>Differenzierte Instruktion</h2>
|
||
<p>Tomlinsons Modell unterscheidet drei Achsen — alle drei sind im GW-Unterricht praktikabel.</p>
|
||
<h3>Inhalt</h3>
|
||
<p>Verschiedene Quellen, Tiefen, Maßstabsebenen für dieselbe Frage.</p>
|
||
<h3>Prozess</h3>
|
||
<p>Manche Schüler*innen rechnen, andere kartieren, andere argumentieren — gleiches Ziel, andere Wege.</p>
|
||
<h3>Produkt</h3>
|
||
<p>Plakat, Karte, Vortrag, Simulation, Text — Wahl der Darstellungsform.</p>
|
||
<p>Simulationen sind hier besonders flexibel — gleiche Software, unterschiedliche Aufgabentiefe pro Lernendem.</p>
|
||
</section>
|
||
|
||
<!-- 21 SPRACHE -->
|
||
<section>
|
||
<h2>Sprachsensibler Fachunterricht</h2>
|
||
<p>GW-Unterricht ist Sprachunterricht — wer Fachsprache nicht lernt, lernt das Fach nicht. Besonders relevant für DaZ-Lernende.</p>
|
||
<h3>Drei Schichten</h3>
|
||
<ul>
|
||
<li><strong>Alltagssprache</strong> — Vorerfahrung, Zugang</li>
|
||
<li><strong>Bildungssprache</strong> — Argumentation, Begründung</li>
|
||
<li><strong>Fachsprache</strong> — präzise Begriffe, korrekte Konzepte</li>
|
||
</ul>
|
||
<p>Methodische Hilfen: Wortspeicher, Satzbausteine, Scaffolding-Karten, Bild-Wort-Listen, Anwendungs- statt Definitionsorientierung.</p>
|
||
</section>
|
||
|
||
<!-- KAPITEL 6 -->
|
||
<section>
|
||
<h3>Kapitel 6 — Assessment</h3>
|
||
<h1>Leistungsfeststellung<br>& Feedback</h1>
|
||
</section>
|
||
|
||
<!-- 23 FORMATIV -->
|
||
<section>
|
||
<h2>Formatives Assessment</h2>
|
||
<p>Die wirkungsvollste Form von Leistungsbewertung ist die, die <em>nicht</em> am Ende kommt — sondern zwischendurch.</p>
|
||
<h3>Kernidee</h3>
|
||
<ul>
|
||
<li>Lernen sichtbar machen — für Lernende und Lehrkraft</li>
|
||
<li>Korrektur in dem Moment, in dem sie noch wirken kann</li>
|
||
<li>Selbstreflexion als Teil der Lernarbeit</li>
|
||
</ul>
|
||
<p>Hattie-Effektstärke: <strong>d ≈ 0,90</strong> — eine der wirksamsten Interventionen überhaupt.</p>
|
||
</section>
|
||
|
||
<!-- 24 ASSESSMENT-DASHBOARD -->
|
||
<section>
|
||
<h2>Assessment in Simulationsumgebungen</h2>
|
||
<p>Digitale Lernumgebungen ermöglichen Beobachtungen, die im Buchunterricht unsichtbar bleiben.</p>
|
||
<ul>
|
||
<li><strong>Prozessdaten</strong> — wie lange, wie oft, in welcher Reihenfolge gearbeitet</li>
|
||
<li><strong>Vorhersage vs. Ergebnis</strong> — direkter Zugang zu Schülervorstellungen</li>
|
||
<li><strong>Reflexionsantworten</strong> — qualitatives Verstehen</li>
|
||
<li><strong>Lehrkräfte-Dashboard</strong> — Übersicht über die ganze Klasse, Drilldown auf Einzelne</li>
|
||
</ul>
|
||
<p>Wichtig: Datenschutz · Pseudonymisierung · Einwilligung der Erziehungsberechtigten.</p>
|
||
</section>
|
||
|
||
<!-- KAPITEL 7 -->
|
||
<section>
|
||
<h3>Kapitel 7 — Vergleich</h3>
|
||
<h1>Internationale<br>Perspektive</h1>
|
||
</section>
|
||
|
||
<!-- 26 DACH -->
|
||
<section>
|
||
<h2>Geografie im DACH-Raum</h2>
|
||
<h3>Österreich</h3>
|
||
<p>„Geographie und wirtschaftliche Bildung" — Wirtschaft gleichberechtigt namensgebend, eigenes Profil.</p>
|
||
<h3>Deutschland (16 Länder)</h3>
|
||
<p>Erdkunde / Geographie / Gesellschaftswissenschaften — uneinheitlich; teils mit Geschichte/Politik fusioniert.</p>
|
||
<h3>Schweiz (Lehrplan 21)</h3>
|
||
<p>„Räume, Zeiten, Gesellschaften" — Geografie eingebettet in einen größeren Verbund.</p>
|
||
<p>Im Vergleich profiliert AT die wirtschaftliche Bildung am stärksten — eine Stärke, die international Beachtung findet.</p>
|
||
</section>
|
||
|
||
<!-- 27 GEOCAPABILITIES -->
|
||
<section>
|
||
<h2>GeoCapabilities & Powerful Knowledge</h2>
|
||
<p>Internationale Bewegung um Lambert, Solem, Tani: Welche <em>Befähigungen</em> liefert Geografie für ein gelingendes Leben?</p>
|
||
<ul>
|
||
<li><strong>Räumliches Denken</strong> als kognitiver Werkzeugkasten</li>
|
||
<li><strong>Verständnis komplexer Systeme</strong> — Klima, Migration, Wirtschaft</li>
|
||
<li><strong>Werteorientierung</strong> — kritisch über Räume und ihre Nutzung urteilen</li>
|
||
<li><strong>Bürgerschaftliche Handlungsfähigkeit</strong> — räumliche Konflikte begreifen, sich beteiligen</li>
|
||
</ul>
|
||
<p>IGU Commission on Geography Education — internationale Plattform.</p>
|
||
</section>
|
||
|
||
<!-- KAPITEL 8 -->
|
||
<section>
|
||
<h3>Kapitel 8 — Hürden</h3>
|
||
<h1>Herausforderungen<br>& Ausblick</h1>
|
||
</section>
|
||
|
||
<!-- 29 HERAUSFORDERUNGEN -->
|
||
<section>
|
||
<h2>Was den Alltag schwer macht</h2>
|
||
<h3>Stundenknappheit & Stofffülle</h3>
|
||
<ul>
|
||
<li>1 – 2 Wo.-Std. — der ganze Lehrplan muss durchgenommen werden</li>
|
||
<li>Tendenz zur Oberflächlichkeit, Verlust von Tiefe</li>
|
||
</ul>
|
||
<h3>Lehrkräftebildung</h3>
|
||
<ul>
|
||
<li>Kompetenzorientierung muss explizit gelernt werden — Eigene Schulzeit war oft anders</li>
|
||
<li>Fortbildung zur Digitalität noch lückenhaft</li>
|
||
</ul>
|
||
<h3>Digitale Transformation & Inklusion</h3>
|
||
<ul>
|
||
<li>Geräteausstattung sehr ungleich, BYOD-Heterogenität</li>
|
||
<li>Inklusion als Querschnittsaufgabe ohne zusätzliche Ressourcen</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- 30 AUSBLICK -->
|
||
<section>
|
||
<h2>Was wir besser machen können</h2>
|
||
<h3>Simulationen als Teil des Werkzeugkastens</h3>
|
||
<p>Klima, Stadt, Wirtschaft, Logistik — manipulierbar im Unterricht statt nur erzählt.</p>
|
||
<h3>Kollegiale Vorbereitung</h3>
|
||
<p>Geteilte Stundenbilder, geteilte Aufgaben, gemeinsame Fortbildung.</p>
|
||
<h3>Forschung-Praxis-Brücken</h3>
|
||
<p>Universitäten, Pädagogische Hochschulen, Lehrkräfte gemeinsam — Begleitforschung statt Wissensgefälle.</p>
|
||
<h3>Stundenmindeststandard</h3>
|
||
<p>2 Wo.-Std. in allen vier Klassen wäre fachlich angemessen — politische Forderung.</p>
|
||
</section>
|
||
|
||
<!-- 31 EMPFEHLUNGEN -->
|
||
<section>
|
||
<h2>5 Empfehlungen für die Praxis</h2>
|
||
<ol>
|
||
<li><strong>Basiskonzepte sichtbar machen</strong> — bei jeder Stunde explizit benennen, welches Konzept gerade geübt wird</li>
|
||
<li><strong>Schülervorstellungen aktiv abfragen</strong> — vor dem Lehrstoff, nicht erst danach</li>
|
||
<li><strong>Sprachsensibel planen</strong> — Wortspeicher, Satzbausteine, Bild-Wort-Brücken</li>
|
||
<li><strong>Differenzieren über Maßstabsebene</strong> — gleiche Aufgabe, andere Tiefe</li>
|
||
<li><strong>Formatives Feedback verankern</strong> — Lernen sichtbar machen, nicht erst am Ende prüfen</li>
|
||
</ol>
|
||
</section>
|
||
|
||
<!-- 32 FAZIT -->
|
||
<section>
|
||
<h2>Die entscheidende Frage</h2>
|
||
<p>ist nicht <strong>was</strong> wir unterrichten —</p>
|
||
<p>sondern <strong>wozu</strong> die Schüler*innen es brauchen.</p>
|
||
<p>Geografie liefert Werkzeuge zum Denken über Räume, Systeme, Mensch-Umwelt — eine Befähigung für das ganze Leben, nicht nur für die nächste Schularbeit.</p>
|
||
</section>
|
||
|
||
<!-- 33 QUELLEN -->
|
||
<section>
|
||
<h2>Kernquellen</h2>
|
||
<p>Vollständig unter quellen-geografie.html</p>
|
||
<p>BMBWF (2023). Lehrplan Geographie und wirtschaftliche Bildung. <em>BGBl. II 1/2023.</em></p>
|
||
<p>Reinfried, S. (2015). Schülervorstellungen und Geographieunterricht. <em>VS / Springer.</em></p>
|
||
<p>Lambert, D. & Solem, M. (2014). GeoCapabilities. <em>Journal of Geography.</em></p>
|
||
<p>Young, M. (2013). Powerful knowledge. <em>Curriculum Journal.</em></p>
|
||
<p>Tomlinson, C. A. (2014). <em>The Differentiated Classroom.</em></p>
|
||
<p>Hattie, J. (2009/2023). <em>Visible Learning.</em></p>
|
||
<p>Posner et al. (1982). Conceptual change. <em>Science Education.</em></p>
|
||
</section>
|
||
|
||
<!-- 34 DANKE -->
|
||
<section>
|
||
<h1>Danke.</h1>
|
||
<p>Fragen & Diskussion</p>
|
||
<p>Artikel & Quellenverzeichnis: geografie-didaktik.html · quellen-geografie.html</p>
|
||
<p>Thomas Schroffenegger · GeoGraSim · Sekundarstufe I · 2026</p>
|
||
</section>
|
||
|
||
</div><!-- /slides -->
|
||
</div><!-- /reveal -->
|
||
|
||
<!-- Home Button -->
|
||
<a class="home-btn" id="home-btn" href="../index.html" title="Zurück zum Artikel">⌂</a>
|
||
|
||
<!-- Panels -->
|
||
<div id="panel-layout" class="ui-panel">
|
||
<div class="panel-title">Design-Variante — Text immer fix oben links</div>
|
||
<div class="layout-opts">
|
||
<button class="layout-opt" id="lopt-rein" onclick="setLayout('rein')">
|
||
<div class="lo-icon">▭</div>
|
||
<div class="lo-name">Rein</div>
|
||
<div class="lo-desc">Kein Bild, klarer Hintergrund</div>
|
||
</button>
|
||
<button class="layout-opt" id="lopt-gradient" onclick="setLayout('gradient')">
|
||
<div class="lo-icon">◁▨</div>
|
||
<div class="lo-name">Verlauf</div>
|
||
<div class="lo-desc">Bild blendet rechts ein</div>
|
||
</button>
|
||
<button class="layout-opt" id="lopt-bg" onclick="setLayout('bg')">
|
||
<div class="lo-icon">▨</div>
|
||
<div class="lo-name">Hintergrund</div>
|
||
<div class="lo-desc">Bild blass dahinter</div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="panel-font" class="ui-panel">
|
||
<div class="panel-title">Schriftstil</div>
|
||
<div class="font-opts" id="font-opts-list"></div>
|
||
</div>
|
||
|
||
<div id="panel-color" class="ui-panel">
|
||
<div class="panel-title">Hintergrundfarbe — aktuelle Folie</div>
|
||
<div class="color-swatches" id="color-swatches"></div>
|
||
<div class="color-row">
|
||
<input type="color" id="custom-color-input" value="#163374" oninput="applySlideColor(this.value)"/>
|
||
<label>Eigene Farbe</label>
|
||
</div>
|
||
<button class="panel-btn danger" onclick="clearSlideColor()">Farbe entfernen</button>
|
||
</div>
|
||
|
||
<!-- FAB Cluster — standardmäßig eingeklappt -->
|
||
<div id="fab-cluster">
|
||
<button class="fab" id="fab-toggle" title="Werkzeuge" onclick="toggleFabCluster()">⚙</button>
|
||
<div id="fab-tools">
|
||
<a class="fab" id="stil-btn" href="stile.html" title="Bildstil">◈</a>
|
||
<button class="fab" id="img-btn" title="Alle Folien generieren" onclick="generateAllImages()">✦</button>
|
||
<button class="fab" id="regen-btn" title="Nur diese Folie" onclick="regenCurrentSlide()">◎</button>
|
||
<button class="fab" id="layout-btn" title="Design-Variante" onclick="togglePanel('layout')">⊞</button>
|
||
<button class="fab" id="font-btn" title="Schriftstil" onclick="togglePanel('font')">Aa</button>
|
||
<button class="fab" id="color-btn" title="Farbe" onclick="togglePanel('color')">◉</button>
|
||
<button class="fab" id="save-btn" title="Speichern" onclick="saveAllSettings()">⊡</button>
|
||
<button class="fab" id="deploy-btn" title="Deployment-ZIP erstellen" onclick="buildDeployment()">⬇</button>
|
||
<button class="fab" id="pptx-btn" title="PowerPoint exportieren" onclick="exportPPTX()">⬇P</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Fixed Footer Bar -->
|
||
<div id="slide-footer-bar">
|
||
<svg id="footer-logo" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9 9 0 0 0 8 15m0-9.007c1.664-1.711 5.825 1.283 0 5.132-5.825-3.85-1.664-6.843 0-5.132"/></svg>
|
||
<span id="footer-num"></span>
|
||
<span id="footer-clock"></span>
|
||
</div>
|
||
|
||
<!-- Toast notification -->
|
||
<div id="img-toast"></div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.js"></script>
|
||
<script>
|
||
Reveal.initialize({
|
||
hash: true,
|
||
transition: 'fade',
|
||
transitionSpeed: 'fast',
|
||
controls: true,
|
||
progress: true,
|
||
center: false,
|
||
slideNumber: false,
|
||
overview: true,
|
||
keyboard: true,
|
||
touch: true,
|
||
width: 1280,
|
||
height: 720,
|
||
margin: 0.10,
|
||
minScale: 0.2,
|
||
maxScale: 2.0,
|
||
plugins: []
|
||
});
|
||
|
||
// ── Footer bar ──
|
||
const homeBtn = document.getElementById('home-btn');
|
||
const imgBtn = document.getElementById('img-btn');
|
||
const stilBtn = document.getElementById('stil-btn');
|
||
const footerBar = document.getElementById('slide-footer-bar');
|
||
const footerNum = document.getElementById('footer-num');
|
||
const footerClk = document.getElementById('footer-clock');
|
||
var totalSlides = 0;
|
||
|
||
(function() {
|
||
var sn = localStorage.getItem('fal_presentation_style_name');
|
||
if (sn) imgBtn.title = 'KI-Bilder generieren · Stil: ' + sn;
|
||
})();
|
||
|
||
function isDarkSlide(slide) {
|
||
if (!slide) return false;
|
||
return slide.classList.contains('chapter-slide') || slide.classList.contains('title-slide');
|
||
}
|
||
|
||
function updateFooter() {
|
||
const slide = Reveal.getCurrentSlide();
|
||
const idx = Reveal.getState().indexh + 1;
|
||
const dark = isDarkSlide(slide);
|
||
if (dark) {
|
||
footerBar.classList.add('bar-light');
|
||
homeBtn.classList.remove('light');
|
||
imgBtn.classList.remove('light');
|
||
stilBtn.classList.remove('light');
|
||
} else {
|
||
footerBar.classList.remove('bar-light');
|
||
homeBtn.classList.add('light');
|
||
imgBtn.classList.add('light');
|
||
stilBtn.classList.add('light');
|
||
}
|
||
if (totalSlides > 0) footerNum.textContent = idx + ' / ' + totalSlides;
|
||
}
|
||
|
||
function updateClock() {
|
||
var now = new Date();
|
||
footerClk.textContent =
|
||
String(now.getHours()).padStart(2,'0') + ':' +
|
||
String(now.getMinutes()).padStart(2,'0') + ':' +
|
||
String(now.getSeconds()).padStart(2,'0');
|
||
}
|
||
setInterval(updateClock, 1000);
|
||
updateClock();
|
||
|
||
Reveal.on('slidechanged', updateFooter);
|
||
Reveal.on('ready', function() {
|
||
totalSlides = Reveal.getTotalSlides();
|
||
updateFooter();
|
||
setTimeout(_restoreCachedBackgrounds, 300);
|
||
if (window.renderMathInElement) {
|
||
renderMathInElement(document.body, {
|
||
delimiters: [{left:'$$',right:'$$',display:true},{left:'$',right:'$',display:false}],
|
||
throwOnError: false
|
||
});
|
||
}
|
||
});
|
||
|
||
// ══════════════════════════════════════════════════════════════════
|
||
// KI-BILDGENERIERUNG (fal.ai Flux)
|
||
// ══════════════════════════════════════════════════════════════════
|
||
var _LS_KEY = 'fal_presentation_style';
|
||
|
||
// Visueller Rahmenstil: technische Blaupause / Blueprint-Ästhetik
|
||
// Wird durch stile.html überschrieben falls der User einen Stil wählt.
|
||
var _DEFAULT_STYLE = "precise engineering schematic illustration, fine clean lines on dark navy blue " +
|
||
"background, schematic diagram, technical drawing aesthetic, no text labels, no numbers, no letters, " +
|
||
"ultra wide 16:9 format, elegant minimal composition";
|
||
var IMG_STYLE = localStorage.getItem(_LS_KEY + '_prompt') || _DEFAULT_STYLE;
|
||
|
||
var _imgGenerating = false;
|
||
var _SLIDE_CACHE_KEY = 'fal_slide_bg_v4';
|
||
var _SLIDE_CACHE_TTL = 55 * 60 * 1000;
|
||
|
||
function _slideCacheSet(idx, url) {
|
||
try {
|
||
var c = JSON.parse(localStorage.getItem(_SLIDE_CACHE_KEY) || '{}');
|
||
c['s' + idx] = { url: url, ts: Date.now() };
|
||
localStorage.setItem(_SLIDE_CACHE_KEY, JSON.stringify(c));
|
||
} catch(e) {}
|
||
}
|
||
function _slideCacheGet(idx) {
|
||
try {
|
||
var c = JSON.parse(localStorage.getItem(_SLIDE_CACHE_KEY) || '{}');
|
||
var e = c['s' + idx];
|
||
if (!e || Date.now() - e.ts > _SLIDE_CACHE_TTL) return null;
|
||
return e.url;
|
||
} catch(e) { return null; }
|
||
}
|
||
|
||
function _applyBackground(section, imageUrl) {
|
||
section.setAttribute('data-background-image', imageUrl);
|
||
section.setAttribute('data-background-opacity', '0.18');
|
||
section.setAttribute('data-background-size', 'cover');
|
||
section.setAttribute('data-background-position', 'center');
|
||
Reveal.sync();
|
||
}
|
||
|
||
function _restoreCachedBackgrounds() {
|
||
if (_currentLayout === 'rein') return;
|
||
var sects = [...document.querySelectorAll('.reveal .slides > section')];
|
||
var anyRestored = false;
|
||
sects.forEach(function(s, idx) {
|
||
var url = _slideCacheGet(idx);
|
||
if (url) { _applyBackground(s, url); anyRestored = true; }
|
||
});
|
||
if (anyRestored) setTimeout(function() { Reveal.sync(); }, 1200);
|
||
}
|
||
|
||
function _toast(msg, ms) {
|
||
var t = document.getElementById('img-toast');
|
||
t.textContent = msg;
|
||
t.style.opacity = '1';
|
||
setTimeout(function() { t.style.opacity = '0'; }, ms || 2500);
|
||
}
|
||
|
||
async function _fetchImage(prompt) {
|
||
var key = window.FAL_KEY;
|
||
if (!key) return null;
|
||
try {
|
||
var res = await fetch('https://fal.run/fal-ai/flux/schnell', {
|
||
method: 'POST',
|
||
headers: { 'Authorization': 'Key ' + key, 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
prompt: prompt + ', ' + IMG_STYLE + ', no text, no letters, no numbers',
|
||
image_size: 'landscape_16_9',
|
||
num_inference_steps: 4,
|
||
num_images: 1,
|
||
enable_safety_checker: true
|
||
})
|
||
});
|
||
var data = await res.json();
|
||
if (data.detail) { console.warn('fal.ai:', data.detail); return null; }
|
||
return (data.images && data.images[0]) ? data.images[0].url : null;
|
||
} catch(e) { console.warn('fal.ai Fehler:', e); return null; }
|
||
}
|
||
|
||
// ── Thematische Bildbeschreibung pro Folie (Blueprint-Stil) ──
|
||
// Motiv passend zum Slide-Inhalt, dargestellt als technische Blaupause / Schemazeichnung.
|
||
// Kein Foto, kein Text, keine Buchstaben im Bild.
|
||
function _slideVisual(section) {
|
||
var h1 = (section.querySelector('h1') || {}).textContent || '';
|
||
var h2 = (section.querySelector('h2') || {}).textContent || '';
|
||
var h3 = (section.querySelector('h3') || {}).textContent || '';
|
||
var txt = (h1 + ' ' + h2 + ' ' + h3).toLowerCase();
|
||
|
||
if (/geografie unterrichten|sekundarstufe i|titel.*geografie|gw-lehrplan 2023.*titel/.test(txt))
|
||
return "schematic of an open atlas with stylised austrian alpine landscape and a teacher figure pointing, fine white and gold lines on dark navy blue background, technical educational illustration";
|
||
|
||
if (/lehrplan ist neu|2023.*verbindlich|kompetenzraster|bgbl/.test(txt))
|
||
return "schematic of an open lawbook or codex with chapter markers and a stamped seal, technical illustration, fine white and gold lines on dark navy blue";
|
||
|
||
if (/was bedeutet das|10 bis 14|verschiebung/.test(txt))
|
||
return "schematic of a stylised map of austria zoomed at multiple scales connected by guide lines, technical cartographic illustration, fine white lines on dark navy blue";
|
||
|
||
if (/überblick|aufbau|leitfragen/.test(txt))
|
||
return "top-down technical grid schematic of a presentation outline, two columns of stacked rectangular sections, structured plan view, fine white lines on dark navy blue";
|
||
|
||
if (/was ist.*geografie-didakt|paradigm|powerful knowledge|raumkonzept|basiskonzept/.test(txt))
|
||
return "schematic of three nested geometric shapes representing paradigms, abstract conceptual diagram, fine white and gold lines on dark navy blue background";
|
||
|
||
if (/realienunterricht|wirtschaftskund|gw-bildung|entwicklung/.test(txt))
|
||
return "schematic horizontal timeline with marked decade points and stylised chronology icons, technical historical diagram, fine white lines on dark navy blue";
|
||
|
||
if (/lehrplan 2023.*detail|kompetenzmodell|kompetenzbereich/.test(txt))
|
||
return "schematic of four interlocking puzzle pieces representing competence areas, abstract diagram, fine white and gold lines on dark navy blue";
|
||
|
||
if (/aufbau über vier|klassenstufe|klasse.*wo.*std|wochenstunde/.test(txt))
|
||
return "schematic of four stacked teaching modules ascending in size, abstract diagram of curriculum progression, fine white lines on dark navy blue";
|
||
|
||
if (/basiskonzept|raum.*maßstab.*system/.test(txt))
|
||
return "schematic of four labelled concentric rings representing basic concepts, abstract conceptual diagram, fine white and gold lines on dark navy blue";
|
||
|
||
if (/schülervorstellung|alltagsvorstellung|ozonloch|tropisch/.test(txt))
|
||
return "schematic of a child silhouette with thought bubbles containing simplified concept icons, conceptual diagram, fine white lines on dark navy blue";
|
||
|
||
if (/conceptual change|posner|unzufriedenheit|plausibilität/.test(txt))
|
||
return "schematic of two arrows curving from an old to a new concept node, abstract transformation diagram, fine white and gold lines on dark navy blue";
|
||
|
||
if (/kompetenzorientier|systemkompetenz|orientierungskompetenz|argumentation/.test(txt))
|
||
return "schematic of a tree-shaped diagram with labelled branches representing competences, abstract conceptual illustration, fine white lines on dark navy blue";
|
||
|
||
if (/inhalt zur kompetenz|früher.*heute|faktenwissen/.test(txt))
|
||
return "schematic of a balance scale comparing fact icons on one side and concept-network on the other, abstract diagram, fine white lines on dark navy blue";
|
||
|
||
if (/inklusion|differenzierung|sprachsensib/.test(txt))
|
||
return "schematic of multiple stylised student silhouettes of different sizes in a classroom row, with thin connecting guide lines, fine white lines on dark navy blue";
|
||
|
||
if (/inklusiver.*unterricht|querschnitt/.test(txt))
|
||
return "schematic of an inclusive classroom layout with diverse student silhouettes connected by thin lines, technical illustration, fine white and gold lines on dark navy blue";
|
||
|
||
if (/differenzierte instruktion|tomlinson|inhalt.*prozess.*produkt/.test(txt))
|
||
return "schematic of three parallel paths leading to one shared goal, abstract diagram of differentiation, fine white and gold lines on dark navy blue";
|
||
|
||
if (/sprache|sprachsens|fachsprache|wortspeicher/.test(txt))
|
||
return "schematic of stacked layered speech bubbles representing language layers, conceptual diagram, fine white lines on dark navy blue";
|
||
|
||
if (/leistungsfeststell|assessment|formativ|hattie/.test(txt))
|
||
return "schematic of a clipboard with feedback arrows looping back to a stylised student silhouette, technical illustration, fine white lines on dark navy blue";
|
||
|
||
if (/dashboard|simulationsumgeb|prozessdaten/.test(txt))
|
||
return "schematic of a teacher dashboard with stylised charts and student row icons, abstract user interface diagram, fine white and gold lines on dark navy blue";
|
||
|
||
if (/internationale|dach|deutschland|schweiz|lehrplan 21/.test(txt))
|
||
return "schematic of three labelled country outlines side by side connected by thin lines, abstract comparison diagram, fine white lines on dark navy blue";
|
||
|
||
if (/geocapabilities|powerful.*knowledge|igu|bürgerschaftlich/.test(txt))
|
||
return "schematic of a stylised globe with five labelled radial spokes representing capabilities, abstract diagram, fine white and gold lines on dark navy blue";
|
||
|
||
if (/herausforder|stundenknapp|lehrkräftebild|digitale transformat/.test(txt))
|
||
return "schematic of multiple obstacle blocks in a row with thin guide lines around them, technical illustration of challenges, fine white lines on dark navy blue";
|
||
|
||
if (/besser machen|simulationen.*werkzeug|kollegiale|forschung-praxis/.test(txt))
|
||
return "schematic of a telescope cross-section with light rays pointing forward, technical optical diagram, fine white and gold lines on dark navy blue";
|
||
|
||
if (/empfehlung|praxis/.test(txt))
|
||
return "schematic of a clipboard with five numbered annotation lines, technical checklist illustration, fine white and gold lines on dark navy blue";
|
||
|
||
if (/entscheidend.*frage|fazit|wozu|brauchen/.test(txt))
|
||
return "schematic of a key inserted into a lock cross-section, abstract technical diagram, fine white and gold lines on dark navy blue";
|
||
|
||
if (/quellen|literatur|kernquellen/.test(txt))
|
||
return "schematic cross-section of a library bookshelf with stacked volumes, technical drawing, fine white lines on dark navy blue";
|
||
|
||
if (/danke|diskussion/.test(txt))
|
||
return "schematic of a stylised circular rose window divided into equal segments radiating from center, fine white lines on dark navy blue, elegant symmetry";
|
||
|
||
return "schematic of an open atlas with stylised landscape and route arrows, fine white and gold lines on dark navy blue, technical educational illustration";
|
||
}
|
||
|
||
window.generateAllImages = async function() {
|
||
if (_imgGenerating) return;
|
||
if (!window.FAL_KEY) { alert('Kein API-Key.\nBitte in „API Key.js" eintragen.'); return; }
|
||
IMG_STYLE = localStorage.getItem(_LS_KEY + '_prompt') || _DEFAULT_STYLE;
|
||
_imgGenerating = true;
|
||
imgBtn.classList.add('generating');
|
||
|
||
var allSects = [...document.querySelectorAll('.reveal .slides > section')];
|
||
var total = allSects.length;
|
||
var done = 0;
|
||
|
||
_toast('Generiere ' + total + ' Bilder — Navigation weiter möglich ✓', 3500);
|
||
|
||
for (var i = 0; i < allSects.length; i++) {
|
||
var section = allSects[i];
|
||
done++;
|
||
imgBtn.textContent = done + '/' + total;
|
||
|
||
var visual = _slideVisual(section);
|
||
var url = await _fetchImage(visual);
|
||
if (url) {
|
||
_slideCacheSet(i, url);
|
||
_applyBackground(section, url);
|
||
}
|
||
}
|
||
|
||
_imgGenerating = false;
|
||
imgBtn.classList.remove('generating');
|
||
imgBtn.textContent = '↺';
|
||
imgBtn.title = 'Bilder neu generieren';
|
||
_toast('Fertig — alle Bilder generiert ✓', 3000);
|
||
};
|
||
|
||
// ── Per-Folie neu generieren ──
|
||
window.regenCurrentSlide = async function() {
|
||
if (_imgGenerating) return;
|
||
if (!window.FAL_KEY) { alert('Kein API-Key.\nBitte in „API Key.js" eintragen.'); return; }
|
||
IMG_STYLE = localStorage.getItem(_LS_KEY + '_prompt') || _DEFAULT_STYLE;
|
||
var allSects = [...document.querySelectorAll('.reveal .slides > section')];
|
||
var section = Reveal.getCurrentSlide();
|
||
var idx = allSects.indexOf(section);
|
||
document.getElementById('regen-btn').textContent = '…';
|
||
var url = await _fetchImage(_slideVisual(section));
|
||
if (url) {
|
||
_slideCacheSet(idx, url);
|
||
_applyBackground(section, url);
|
||
_toast('Bild aktualisiert ✓', 2000);
|
||
}
|
||
document.getElementById('regen-btn').textContent = '◎';
|
||
};
|
||
|
||
// ══ LAYOUT-VARIANTEN ══
|
||
// Drei Modi — Text sitzt immer fix, Bilder sind reine Dekoration.
|
||
// rein: Kein Bild, klarer Hintergrund
|
||
// gradient: Bild von rechts einblendend (Gradient-Overlay schützt Text)
|
||
// bg: Bild blass im gesamten Hintergrund
|
||
var _currentLayout = localStorage.getItem('pres_layout_v1') || 'rein';
|
||
|
||
function _bgOpacityForLayout() {
|
||
return _currentLayout === 'gradient' ? '1' : '0.18';
|
||
}
|
||
|
||
window.setLayout = function(name) {
|
||
_currentLayout = name;
|
||
localStorage.setItem('pres_layout_v1', name);
|
||
|
||
var allSects = [...document.querySelectorAll('.reveal .slides > section')];
|
||
var slidesEl = document.querySelector('.reveal .slides');
|
||
|
||
// CSS-Klasse für mask-image auf .slide-background-image + .slides inline background
|
||
if (slidesEl) slidesEl.style.background = '';
|
||
|
||
if (name === 'rein') {
|
||
allSects.forEach(function(s) { s.removeAttribute('data-background-image'); });
|
||
Reveal.sync();
|
||
} else {
|
||
// gradient + bg: _applyBackground-Überschreibung kümmert sich um Canvas-Verarbeitung
|
||
allSects.forEach(function(s, idx) {
|
||
var url = _slideCacheGet(idx);
|
||
if (url) _applyBackground(s, url);
|
||
});
|
||
// Finales Sync nach async Canvas-Verarbeitung
|
||
setTimeout(function() { Reveal.sync(); }, 1200);
|
||
}
|
||
|
||
// Panel-Buttons markieren
|
||
['rein','gradient','bg'].forEach(function(id) {
|
||
var el = document.getElementById('lopt-' + id);
|
||
if (el) el.classList.toggle('active', id === name);
|
||
});
|
||
closePanel('layout');
|
||
};
|
||
|
||
function _applyStoredLayout() {
|
||
setLayout(_currentLayout);
|
||
}
|
||
|
||
// ── Canvas-Gradient: weiß links → voll rechts (Pixelebene, kein CSS-Layer-Problem) ──
|
||
function _processImageWithGradient(imageUrl) {
|
||
return new Promise(function(resolve) {
|
||
var img = new Image();
|
||
img.crossOrigin = 'anonymous';
|
||
img.onload = function() {
|
||
try {
|
||
var W = 1280, H = 720;
|
||
var canvas = document.createElement('canvas');
|
||
canvas.width = W; canvas.height = H;
|
||
var ctx = canvas.getContext('2d');
|
||
// Bild skaliert auf Canvas zeichnen
|
||
ctx.drawImage(img, 0, 0, W, H);
|
||
// Weißen Verlauf drüberlegen: links deckend → rechts transparent
|
||
var grad = ctx.createLinearGradient(0, 0, W, 0);
|
||
grad.addColorStop(0, 'rgba(255,255,255,1)');
|
||
grad.addColorStop(0.50, 'rgba(255,255,255,1)');
|
||
grad.addColorStop(0.65, 'rgba(255,255,255,0.80)');
|
||
grad.addColorStop(0.78, 'rgba(255,255,255,0.45)');
|
||
grad.addColorStop(0.90, 'rgba(255,255,255,0.12)');
|
||
grad.addColorStop(1, 'rgba(255,255,255,0)');
|
||
ctx.fillStyle = grad;
|
||
ctx.fillRect(0, 0, W, H);
|
||
resolve(canvas.toDataURL('image/jpeg', 0.93));
|
||
} catch(e) {
|
||
// CORS-Taint — Original-URL als Fallback
|
||
console.warn('Canvas CORS-Fehler, Fallback auf Original:', e);
|
||
resolve(imageUrl);
|
||
}
|
||
};
|
||
img.onerror = function() { resolve(imageUrl); };
|
||
img.src = imageUrl;
|
||
});
|
||
}
|
||
|
||
// _applyBackground berücksichtigt den aktuellen Layout-Modus
|
||
var _origApplyBackground = _applyBackground;
|
||
_applyBackground = async function(section, imageUrl) {
|
||
if (_currentLayout === 'rein') return;
|
||
var url = imageUrl;
|
||
if (_currentLayout === 'gradient') {
|
||
url = await _processImageWithGradient(imageUrl);
|
||
}
|
||
var opacity = _currentLayout === 'gradient' ? '1' : '0.18';
|
||
section.setAttribute('data-background-image', url);
|
||
section.setAttribute('data-background-opacity', opacity);
|
||
section.setAttribute('data-background-size', 'cover');
|
||
section.setAttribute('data-background-position', 'center');
|
||
Reveal.sync();
|
||
};
|
||
|
||
// ══ SCHRIFTSTILE ══
|
||
var FONT_THEMES = [
|
||
{
|
||
id: 'system',
|
||
name: 'System',
|
||
pair: 'system-ui — neutral',
|
||
h: 'system-ui, -apple-system, sans-serif',
|
||
b: 'system-ui, -apple-system, sans-serif'
|
||
},
|
||
{
|
||
id: 'fraunces',
|
||
name: 'Fraunces',
|
||
pair: 'Fraunces + Inter — elegant Serif',
|
||
h: "'Fraunces', Georgia, serif",
|
||
b: "'Inter', system-ui, sans-serif"
|
||
},
|
||
{
|
||
id: 'space',
|
||
name: 'Space Grotesk',
|
||
pair: 'Space Grotesk — geometrisch',
|
||
h: "'Space Grotesk', system-ui, sans-serif",
|
||
b: "'Space Grotesk', system-ui, sans-serif"
|
||
},
|
||
{
|
||
id: 'syne',
|
||
name: 'Syne',
|
||
pair: 'Syne — Graphic Display',
|
||
h: "'Syne', system-ui, sans-serif",
|
||
b: "'Syne', system-ui, sans-serif"
|
||
},
|
||
{
|
||
id: 'bricolage',
|
||
name: 'Bricolage',
|
||
pair: 'Bricolage Grotesque — zeitgenössisch',
|
||
h: "'Bricolage Grotesque', system-ui, sans-serif",
|
||
b: "'Bricolage Grotesque', system-ui, sans-serif"
|
||
},
|
||
{
|
||
id: 'barlow',
|
||
name: 'Barlow Condensed',
|
||
pair: 'Barlow Condensed — Lettering-Style',
|
||
h: "'Barlow Condensed', system-ui, sans-serif",
|
||
b: "'Inter', system-ui, sans-serif"
|
||
},
|
||
{
|
||
id: 'caveat',
|
||
name: 'Caveat Brush',
|
||
pair: 'Caveat Brush — Hand Lettering',
|
||
h: "'Caveat Brush', cursive",
|
||
b: "'Inter', system-ui, sans-serif"
|
||
},
|
||
{
|
||
id: 'satisfy',
|
||
name: 'Satisfy',
|
||
pair: 'Satisfy — Brush Script',
|
||
h: "'Satisfy', cursive",
|
||
b: "'Inter', system-ui, sans-serif"
|
||
}
|
||
];
|
||
|
||
var _currentFontId = (function() {
|
||
var stored = localStorage.getItem('pres_font_v1') || 'system';
|
||
return FONT_THEMES.some(function(f){ return f.id === stored; }) ? stored : 'system';
|
||
})();
|
||
|
||
function _renderFontPanel() {
|
||
var list = document.getElementById('font-opts-list');
|
||
if (!list) return;
|
||
list.innerHTML = '';
|
||
FONT_THEMES.forEach(function(t) {
|
||
var div = document.createElement('button');
|
||
div.className = 'font-opt' + (t.id === _currentFontId ? ' active' : '');
|
||
div.id = 'fopt-' + t.id;
|
||
div.onclick = function() { applyFontTheme(t.id); };
|
||
div.innerHTML =
|
||
'<span class="fo-sample" style="font-family:' + t.h + ';font-weight:700">Ag</span>' +
|
||
'<span class="fo-info"><span class="fo-name">' + t.name + '</span>' +
|
||
'<span class="fo-pair" style="display:block">' + t.pair + '</span></span>';
|
||
list.appendChild(div);
|
||
});
|
||
}
|
||
|
||
window.applyFontTheme = function(id) {
|
||
var t = FONT_THEMES.find(function(f){ return f.id === id; });
|
||
if (!t) return;
|
||
_currentFontId = id;
|
||
localStorage.setItem('pres_font_v1', id);
|
||
var style = document.getElementById('font-theme-style') || document.createElement('style');
|
||
style.id = 'font-theme-style';
|
||
style.textContent =
|
||
'.reveal h1, .reveal h2 { font-family: ' + t.h + ' !important; }' +
|
||
'.reveal, .reveal p, .reveal li, .reveal h3 { font-family: ' + t.b + ' !important; }';
|
||
document.head.appendChild(style);
|
||
// Update active state
|
||
document.querySelectorAll('.font-opt').forEach(function(el) {
|
||
el.classList.toggle('active', el.id === 'fopt-' + id);
|
||
});
|
||
closePanel('font');
|
||
_toast(t.name + ' aktiviert', 1800);
|
||
};
|
||
|
||
// ══ HINTERGRUNDFARBE ══
|
||
var _COLORS_KEY = 'pres_colors_v1';
|
||
var _COLOR_PRESETS = [
|
||
'#ffffff','#f8f7f4','#f0f4fd','#e8f5ee','#fdf6e3',
|
||
'#0c0f18','#163374','#1a3a1a','#2d2d2d','#f5e6d3'
|
||
];
|
||
|
||
function _renderColorPanel() {
|
||
var box = document.getElementById('color-swatches');
|
||
if (!box) return;
|
||
box.innerHTML = '';
|
||
_COLOR_PRESETS.forEach(function(c) {
|
||
var s = document.createElement('div');
|
||
s.className = 'color-swatch';
|
||
s.style.background = c;
|
||
s.style.border = c === '#ffffff' ? '2px solid #ddd' : '2px solid transparent';
|
||
s.title = c;
|
||
s.onclick = function() { applySlideColor(c); };
|
||
box.appendChild(s);
|
||
});
|
||
}
|
||
|
||
window.applySlideColor = function(color) {
|
||
var section = Reveal.getCurrentSlide();
|
||
var allSects = [...document.querySelectorAll('.reveal .slides > section')];
|
||
var idx = allSects.indexOf(section);
|
||
section.setAttribute('data-background-color', color);
|
||
try {
|
||
var c = JSON.parse(localStorage.getItem(_COLORS_KEY) || '{}');
|
||
c['s' + idx] = color;
|
||
localStorage.setItem(_COLORS_KEY, JSON.stringify(c));
|
||
} catch(e) {}
|
||
Reveal.sync();
|
||
};
|
||
|
||
window.clearSlideColor = function() {
|
||
var section = Reveal.getCurrentSlide();
|
||
var allSects = [...document.querySelectorAll('.reveal .slides > section')];
|
||
var idx = allSects.indexOf(section);
|
||
section.removeAttribute('data-background-color');
|
||
try {
|
||
var c = JSON.parse(localStorage.getItem(_COLORS_KEY) || '{}');
|
||
delete c['s' + idx];
|
||
localStorage.setItem(_COLORS_KEY, JSON.stringify(c));
|
||
} catch(e) {}
|
||
Reveal.sync();
|
||
};
|
||
|
||
function _restoreSlideColors() {
|
||
try {
|
||
var c = JSON.parse(localStorage.getItem(_COLORS_KEY) || '{}');
|
||
var sects = [...document.querySelectorAll('.reveal .slides > section')];
|
||
Object.keys(c).forEach(function(k) {
|
||
var idx = parseInt(k.slice(1));
|
||
var color = c[k];
|
||
if (sects[idx]) {
|
||
sects[idx].setAttribute('data-background-color', color);
|
||
}
|
||
});
|
||
if (Object.keys(c).length) Reveal.sync();
|
||
} catch(e) {}
|
||
}
|
||
|
||
// ══ FAB TOGGLE ══
|
||
var _fabOpen = false;
|
||
window.toggleFabCluster = function() {
|
||
_fabOpen = !_fabOpen;
|
||
document.getElementById('fab-cluster').classList.toggle('open', _fabOpen);
|
||
document.getElementById('fab-toggle').textContent = _fabOpen ? '✕' : '⚙';
|
||
if (!_fabOpen && _openPanel) closePanel(_openPanel);
|
||
};
|
||
|
||
// ══ PANELS ══
|
||
var _openPanel = null;
|
||
window.togglePanel = function(name) {
|
||
var el = document.getElementById('panel-' + name);
|
||
if (!el) return;
|
||
if (_openPanel && _openPanel !== name) {
|
||
var prev = document.getElementById('panel-' + _openPanel);
|
||
if (prev) prev.classList.remove('open');
|
||
}
|
||
el.classList.toggle('open');
|
||
_openPanel = el.classList.contains('open') ? name : null;
|
||
};
|
||
window.closePanel = function(name) {
|
||
var el = document.getElementById('panel-' + name);
|
||
if (el) el.classList.remove('open');
|
||
if (_openPanel === name) _openPanel = null;
|
||
};
|
||
// Close panels + fab on outside click
|
||
document.addEventListener('click', function(e) {
|
||
var inFab = e.target.closest('#fab-cluster');
|
||
var inPanel = e.target.closest('.ui-panel');
|
||
var inHome = e.target.closest('.home-btn');
|
||
if (_openPanel && !inPanel && !inFab && !inHome) closePanel(_openPanel);
|
||
if (_fabOpen && !inFab && !inPanel) {
|
||
_fabOpen = false;
|
||
document.getElementById('fab-cluster').classList.remove('open');
|
||
document.getElementById('fab-toggle').textContent = '⚙';
|
||
}
|
||
});
|
||
|
||
// ══ SPEICHERN ══
|
||
window.saveAllSettings = function() {
|
||
var settings = {
|
||
layout: _currentLayout,
|
||
font: _currentFontId,
|
||
styleId: localStorage.getItem('fal_presentation_style_id') || '',
|
||
stylePrompt: localStorage.getItem('fal_presentation_style_prompt') || '',
|
||
slideColors: JSON.parse(localStorage.getItem(_COLORS_KEY) || '{}'),
|
||
slideImages: JSON.parse(localStorage.getItem(_SLIDE_CACHE_KEY) || '{}'),
|
||
savedAt: new Date().toISOString()
|
||
};
|
||
// Download als JSON
|
||
var blob = new Blob([JSON.stringify(settings, null, 2)], { type: 'application/json' });
|
||
var a = document.createElement('a');
|
||
a.href = URL.createObjectURL(blob);
|
||
a.download = 'praesentation-einstellungen.json';
|
||
a.click();
|
||
_toast('Einstellungen gespeichert ✓', 2500);
|
||
};
|
||
|
||
// ══ INIT ══
|
||
Reveal.on('ready', function() {
|
||
_renderFontPanel();
|
||
_renderColorPanel();
|
||
setTimeout(function() {
|
||
_applyStoredLayout();
|
||
_restoreSlideColors();
|
||
applyFontTheme(_currentFontId);
|
||
}, 400);
|
||
});
|
||
|
||
// ══ DEPLOYMENT-EXPORT ══
|
||
// Erstellt ein ZIP mit statischer Präsentation (Bilder eingebettet, kein FAB),
|
||
// standalone.html, quellen.html und lokalen Schriften.
|
||
window.buildDeployment = async function() {
|
||
var deployBtn = document.getElementById('deploy-btn');
|
||
deployBtn.textContent = '…';
|
||
|
||
// JSZip dynamisch laden
|
||
if (!window.JSZip) {
|
||
await new Promise(function(resolve, reject) {
|
||
var s = document.createElement('script');
|
||
s.src = 'https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js';
|
||
s.onload = resolve; s.onerror = reject;
|
||
document.head.appendChild(s);
|
||
});
|
||
}
|
||
|
||
var zip = new JSZip();
|
||
_toast('Deployment wird erstellt …', 10000);
|
||
|
||
// ── 1. Statische Präsentation ──
|
||
// Aktuellen DOM klonen, Werkzeuge entfernen
|
||
var clone = document.documentElement.cloneNode(true);
|
||
['#fab-cluster', '#panel-layout', '#panel-font', '#panel-color', '#img-toast'].forEach(function(sel) {
|
||
var el = clone.querySelector(sel); if (el) el.remove();
|
||
});
|
||
// API Key Script entfernen
|
||
clone.querySelectorAll('script').forEach(function(s) {
|
||
if (s.src && s.src.includes('API Key')) s.remove();
|
||
});
|
||
// Aktuelle Font-Theme-Styles als statisch einbetten (bereits im DOM)
|
||
zip.file('presentation/index.html', '<!DOCTYPE html>\n' + clone.outerHTML);
|
||
|
||
// ── 2. Schriften ──
|
||
var fontFiles = [
|
||
'fonts.css',
|
||
'barlow-condensed-600.woff2','barlow-condensed-700.woff2','barlow-condensed-800.woff2',
|
||
'bricolage-grotesque.woff2','caveat-brush.woff2','fraunces-normal.woff2','fraunces-italic.woff2',
|
||
'inter.woff2','satisfy.woff2','space-grotesk.woff2','syne.woff2',
|
||
'SpaceGrotesk-400.woff2','SpaceGrotesk-600.woff2','SpaceGrotesk-700.woff2',
|
||
'PlayfairDisplay-400.woff2','PlayfairDisplay-700.woff2','PlayfairDisplay-900.woff2'
|
||
];
|
||
for (var ff of fontFiles) {
|
||
try {
|
||
var r = await fetch('fonts/' + ff);
|
||
if (r.ok) zip.file('presentation/fonts/' + ff, await r.arrayBuffer());
|
||
} catch(e) {}
|
||
}
|
||
|
||
// ── 3. Artikel und Quellen ──
|
||
for (var pf of ['standalone.html', 'quellen.html']) {
|
||
try {
|
||
var r2 = await fetch('../' + pf);
|
||
if (r2.ok) zip.file(pf, await r2.text());
|
||
} catch(e) { console.warn('Nicht ladbar:', pf, e); }
|
||
}
|
||
|
||
// ── 4. Landingpage ──
|
||
var meta = document.title || 'Forschungsartikel';
|
||
zip.file('index.html', '<!DOCTYPE html>\n<html lang="de">\n<head>\n<meta charset="UTF-8"/>\n' +
|
||
'<meta name="viewport" content="width=device-width,initial-scale=1"/>\n' +
|
||
'<title>' + meta + '</title>\n' +
|
||
'<style>body{font-family:system-ui,sans-serif;max-width:680px;margin:4rem auto;padding:0 2rem;color:#222}' +
|
||
'h1{font-size:1.4rem;margin-bottom:.5rem}p{color:#666;margin-bottom:2rem}' +
|
||
'nav{display:flex;flex-direction:column;gap:.8rem}' +
|
||
'a{display:inline-block;padding:.7rem 1.2rem;background:#163374;color:#fff;text-decoration:none;border-radius:6px;width:fit-content}' +
|
||
'a:hover{background:#0f2456}</style>\n</head>\n<body>\n' +
|
||
'<h1>' + meta + '</h1>\n<p>Wähle einen Bereich:</p>\n<nav>\n' +
|
||
'<a href="standalone.html">📄 Artikel lesen</a>\n' +
|
||
'<a href="quellen.html">📚 Quelldatenbank</a>\n' +
|
||
'<a href="presentation/index.html">▶ Präsentation</a>\n' +
|
||
'</nav>\n</body>\n</html>');
|
||
|
||
// ── 5. ZIP herunterladen ──
|
||
var blob = await zip.generateAsync({ type: 'blob', compression: 'DEFLATE', compressionOptions: { level: 6 } });
|
||
var a = document.createElement('a');
|
||
a.href = URL.createObjectURL(blob);
|
||
a.download = 'deployment.zip';
|
||
a.click();
|
||
deployBtn.textContent = '⬇';
|
||
_toast('deployment.zip heruntergeladen ✓', 3000);
|
||
};
|
||
|
||
// ══ PPTX-EXPORT ══
|
||
// Erzeugt eine echte .pptx-Datei mit pptxgenjs — editierbar in PowerPoint/LibreOffice
|
||
window.exportPPTX = async function() {
|
||
var btn = document.getElementById('pptx-btn');
|
||
btn.textContent = '…';
|
||
_toast('PowerPoint wird erstellt …', 8000);
|
||
|
||
// pptxgenjs dynamisch laden
|
||
if (!window.PptxGenJS) {
|
||
await new Promise(function(resolve, reject) {
|
||
var s = document.createElement('script');
|
||
s.src = 'https://cdn.jsdelivr.net/npm/pptxgenjs@3.12.0/dist/pptxgen.bundle.js';
|
||
s.onload = resolve; s.onerror = reject;
|
||
document.head.appendChild(s);
|
||
});
|
||
}
|
||
|
||
var pptx = new PptxGenJS();
|
||
pptx.layout = 'LAYOUT_WIDE';
|
||
pptx.author = document.title || 'Forschungsartikel';
|
||
|
||
var sections = document.querySelectorAll('.reveal .slides > section');
|
||
|
||
for (var i = 0; i < sections.length; i++) {
|
||
var sec = sections[i];
|
||
var slide = pptx.addSlide();
|
||
|
||
// ── Hintergrundbild ──
|
||
var bgImg = sec.getAttribute('data-background-image');
|
||
var bgColor = sec.getAttribute('data-background-color');
|
||
var bgOpacity = parseFloat(sec.getAttribute('data-background-opacity') || '1');
|
||
|
||
if (bgImg) {
|
||
try {
|
||
var imgData = bgImg;
|
||
if (!bgImg.startsWith('data:')) {
|
||
imgData = await (async function(url) {
|
||
try {
|
||
var resp = await fetch(url);
|
||
var blob = await resp.blob();
|
||
return await new Promise(function(resolve) {
|
||
var reader = new FileReader();
|
||
reader.onloadend = function() { resolve(reader.result); };
|
||
reader.readAsDataURL(blob);
|
||
});
|
||
} catch(e) { return null; }
|
||
})(bgImg);
|
||
}
|
||
if (imgData) {
|
||
if (bgOpacity < 0.5) {
|
||
imgData = await (async function(dataUrl, opacity) {
|
||
return new Promise(function(resolve) {
|
||
var img = new Image();
|
||
img.onload = function() {
|
||
var c = document.createElement('canvas');
|
||
c.width = 1280; c.height = 720;
|
||
var ctx = c.getContext('2d');
|
||
ctx.fillStyle = '#fff';
|
||
ctx.fillRect(0, 0, 1280, 720);
|
||
ctx.globalAlpha = opacity;
|
||
ctx.drawImage(img, 0, 0, 1280, 720);
|
||
ctx.globalAlpha = 1;
|
||
resolve(c.toDataURL('image/jpeg', 0.92));
|
||
};
|
||
img.onerror = function() { resolve(dataUrl); };
|
||
img.src = dataUrl;
|
||
});
|
||
})(imgData, bgOpacity);
|
||
}
|
||
slide.background = { data: imgData };
|
||
} else {
|
||
slide.background = { color: bgColor ? bgColor.replace('#', '') : 'FFFFFF' };
|
||
}
|
||
} catch(e) {
|
||
slide.background = { color: 'FFFFFF' };
|
||
}
|
||
} else if (bgColor) {
|
||
slide.background = { color: bgColor.replace('#', '') };
|
||
} else {
|
||
slide.background = { color: 'FFFFFF' };
|
||
}
|
||
|
||
// ── Texte ──
|
||
var h1 = sec.querySelector('h1');
|
||
var h2 = sec.querySelector('h2');
|
||
var h3 = sec.querySelector('h3');
|
||
var pars = sec.querySelectorAll('p');
|
||
var lis = sec.querySelectorAll('li');
|
||
var yPos = 0.5;
|
||
|
||
if (h3) {
|
||
slide.addText(h3.textContent.trim(), {
|
||
x: 0.6, y: yPos, w: '80%', h: 0.4,
|
||
fontSize: 11, color: '888888', fontFace: 'Arial',
|
||
bold: true, charSpacing: 3, isTextBox: true
|
||
});
|
||
yPos += 0.45;
|
||
}
|
||
if (h1) {
|
||
slide.addText(h1.textContent.trim(), {
|
||
x: 0.6, y: yPos, w: '55%', h: 1.0,
|
||
fontSize: 32, color: '111111', fontFace: 'Arial',
|
||
bold: true, isTextBox: true, shrinkText: true
|
||
});
|
||
yPos += 1.1;
|
||
}
|
||
if (h2 && (!h1 || h2.textContent !== h1.textContent)) {
|
||
slide.addText(h2.textContent.trim(), {
|
||
x: 0.6, y: yPos, w: '55%', h: 0.6,
|
||
fontSize: 20, color: '163374', fontFace: 'Arial',
|
||
bold: true, isTextBox: true
|
||
});
|
||
yPos += 0.7;
|
||
}
|
||
if (lis.length > 0) {
|
||
var bullets = [];
|
||
lis.forEach(function(li) {
|
||
var text = li.textContent.trim();
|
||
if (text) bullets.push({ text: text, options: { fontSize: 14, color: '333333', bullet: { code: '2013' }, indentLevel: 0 } });
|
||
});
|
||
if (bullets.length > 0) {
|
||
slide.addText(bullets, {
|
||
x: 0.6, y: yPos, w: '55%', h: 5.5 - yPos,
|
||
fontFace: 'Arial', lineSpacingMultiple: 1.3,
|
||
valign: 'top', isTextBox: true, shrinkText: true
|
||
});
|
||
}
|
||
}
|
||
if (lis.length === 0 && pars.length > 0) {
|
||
var parTexts = [];
|
||
pars.forEach(function(p) { var t = p.textContent.trim(); if (t && t.length > 2) parTexts.push(t); });
|
||
if (parTexts.length > 0) {
|
||
slide.addText(parTexts.join('\n\n'), {
|
||
x: 0.6, y: yPos, w: '55%', h: 5.5 - yPos,
|
||
fontSize: 14, color: '333333', fontFace: 'Arial',
|
||
lineSpacingMultiple: 1.4, valign: 'top', isTextBox: true, shrinkText: true
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
var filename = (document.title || 'praesentation').replace(/[^a-zA-Z0-9äöüÄÖÜß\-_ ]/g, '').trim();
|
||
await pptx.writeFile({ fileName: filename + '.pptx' });
|
||
btn.textContent = '⬇P';
|
||
_toast('PowerPoint heruntergeladen ✓', 3000);
|
||
};
|
||
|
||
// ── Stil-Wechsel aus stile.html automatisch erkennen und Bilder neu generieren ──
|
||
window.addEventListener('storage', function(e) {
|
||
if (e.key === _LS_KEY + '_prompt' && e.newValue && e.newValue !== e.oldValue) {
|
||
IMG_STYLE = e.newValue;
|
||
var name = localStorage.getItem(_LS_KEY + '_name') || 'Neuer Stil';
|
||
_toast('Stil gewechselt: ' + name + ' — generiere Bilder …', 3500);
|
||
setTimeout(generateAllImages, 600);
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|