Add full deck, config tool, and updated design docs

Adds the complete "KI verstehen" presentation (36 slides), the
Präsentations-Konfigurator (config.html + slides-manifest.js) for
curating which slides to show, and updates DESIGN.md/PATTERNS.md/
deck-template.html to reflect the new house font (General Sans) and
newly established patterns (chapter dividers, term tooltips, the
mitmach game, ambient sound, and the slide configurator).
This commit is contained in:
Erik Thiele
2026-07-25 16:29:28 +02:00
parent a0641c6fbf
commit 2633ca0e0d
9 changed files with 4570 additions and 0 deletions

60
slides-manifest.js Normal file
View File

@@ -0,0 +1,60 @@
/* ===========================================
SLIDE-MANIFEST — einzige Quelle der Wahrheit für Titel/Reihenfolge.
Wird von ki-verstehen.html (Deck) UND config.html (Konfigurator) geladen.
`id` muss exakt der Dokumentreihenfolge der <section class="slide" data-slide-id="…">
in ki-verstehen.html entsprechen (1-basiert). Beim Umbau des Decks hier mitpflegen.
=========================================== */
const SLIDE_MANIFEST = [
{ id: 1, title: "Titel", kapitel: "—", type: "content", locked: true },
{ id: 2, title: "Hook: Wer hat heute schon KI benutzt?", kapitel: "—", type: "content" },
{ id: 3, title: "Kapitel 1 · Wie alles begann", kapitel: "Wie alles begann", type: "divider" },
{ id: 4, title: "Geschichte: Zeitstrahl 19502022", kapitel: "Wie alles begann", type: "content" },
{ id: 5, title: "Verschachtelte Kreise: KI/ML/DL/GenAI", kapitel: "Wie alles begann", type: "content" },
{ id: 6, title: "Wie lernt eine Maschine (das „A“)", kapitel: "Wie alles begann", type: "content" },
{ id: 7, title: "ANI vs. AGI", kapitel: "Wie alles begann", type: "content" },
{ id: 8, title: "Kapitel 2 · Wie ein LLM funktioniert", kapitel: "Wie ein LLM funktioniert", type: "divider" },
{ id: 9, title: "Mitmach-Spiel: Satz vervollständigen", kapitel: "Wie ein LLM funktioniert", type: "content" },
{ id: 10, title: "LLM: Autovervollständigung", kapitel: "Wie ein LLM funktioniert", type: "content" },
{ id: 11, title: "Token & Parameter", kapitel: "Wie ein LLM funktioniert", type: "content" },
{ id: 12, title: "Reasoning-Modelle", kapitel: "Wie ein LLM funktioniert", type: "content" },
{ id: 13, title: "System-Prompt, User-Prompt, Context", kapitel: "Wie ein LLM funktioniert", type: "content" },
{ id: 14, title: "Beispiel: System- & User-Prompt", kapitel: "Wie ein LLM funktioniert", type: "content" },
{ id: 15, title: "Kontext-Limit & Compact", kapitel: "Wie ein LLM funktioniert", type: "content" },
{ id: 16, title: "Kapitel 3 · Die Modell-Landschaft", kapitel: "Die Modell-Landschaft", type: "divider" },
{ id: 17, title: "Woher kommt das Wissen", kapitel: "Die Modell-Landschaft", type: "content" },
{ id: 18, title: "Modell-Landschaft (GPT, Claude, Gemini …)", kapitel: "Die Modell-Landschaft", type: "content" },
{ id: 19, title: "Wer baut sie, was unterscheidet sie", kapitel: "Die Modell-Landschaft", type: "content" },
{ id: 20, title: "Geschäftsmodell: Womit verdienen sie Geld", kapitel: "Die Modell-Landschaft", type: "content" },
{ id: 21, title: "SEO vs. GEO", kapitel: "Die Modell-Landschaft", type: "content" },
{ id: 22, title: "Wo finde ich diese Modelle", kapitel: "Die Modell-Landschaft", type: "content" },
{ id: 23, title: "Kapitel 4 · Vom Chatbot zum Agenten", kapitel: "Vom Chatbot zum Agenten", type: "divider" },
{ id: 24, title: "Eskalationsleiter: Chatbot → Agent", kapitel: "Vom Chatbot zum Agenten", type: "content" },
{ id: 25, title: "MCP: USB-C für KI", kapitel: "Vom Chatbot zum Agenten", type: "content" },
{ id: 26, title: "Kapitel 5 · Die Grenzen der KI", kapitel: "Die Grenzen der KI", type: "divider" },
{ id: 27, title: "Schwächen der KI (Übersicht)", kapitel: "Die Grenzen der KI", type: "content" },
{ id: 28, title: "Halluzination im Detail", kapitel: "Die Grenzen der KI", type: "content" },
{ id: 29, title: "Kapitel 6 · Sicherheit im Umgang mit KI", kapitel: "Sicherheit im Umgang mit KI", type: "divider" },
{ id: 30, title: "Prompt Injection", kapitel: "Sicherheit im Umgang mit KI", type: "content" },
{ id: 31, title: "Security: weitere Punkte", kapitel: "Sicherheit im Umgang mit KI", type: "content" },
{ id: 32, title: "Kapitel 7 · Praxis & Ausblick", kapitel: "Praxis & Ausblick", type: "divider" },
{ id: 33, title: "Praktische Tipps", kapitel: "Praxis & Ausblick", type: "content" },
{ id: 34, title: "Ausblick", kapitel: "Praxis & Ausblick", type: "content" },
{ id: 35, title: "Glossar", kapitel: "Praxis & Ausblick", type: "content" },
{ id: 36, title: "Closing", kapitel: "—", type: "content", locked: true },
];
const SLIDE_CONFIG_STORAGE_KEY = 'cancomDeckSlideConfig';
function loadSlideConfig() {
try {
const raw = localStorage.getItem(SLIDE_CONFIG_STORAGE_KEY);
if (!raw) return null;
const parsed = JSON.parse(raw);
if (Array.isArray(parsed)) return new Set(parsed);
} catch (_) {}
return null;
}
function saveSlideConfig(enabledIdSet) {
localStorage.setItem(SLIDE_CONFIG_STORAGE_KEY, JSON.stringify(Array.from(enabledIdSet)));
}