Karteikarten-Stapel-Block
Eine umdrehbare Karte für Vokabel- oder Faktenlernen: Fügen Sie einen Karteikarten-Stapel hinzu und legen Sie dann Karteikarte-Kinder hinein, jede mit eigener Vorder- (Frage) und Rückseite (Antwort) sowie einem optionalen Bild auf beiden Seiten. Es ist eine Lernhilfe, keine Frage — es gibt nichts zu bewerten oder zu erfassen.
Wie es funktioniert
Jede Karte im Stapel dreht sich unabhängig um, mit demselben Mechanismus aus verstecktem Kontrollkästchen plus :checked-CSS, den auch der Akkordeon- und der Rubbelkarte-Block verwenden — kein JavaScript, keine Abhängigkeit von einem nativen HTML-Disclosure-Element. Ein Tap auf eine Karte aktiviert ihr eigenes verstecktes Kontrollkästchen, was über eine begrenzte CSS-Regel die Vorderseite dieser Karte ausblendet und ihre Rückseite anzeigt. Jede andere Karte im Stapel ist mit ihrem eigenen, unabhängigen Kontrollkästchen verdrahtet, sodass das Umdrehen einer Karte keine Auswirkung auf die übrigen hat.
Anders als bei den meisten anderen kinetischen Blöcken des Studios sind das Rendering des Karteikarten-Stapels für E-Mail und Live-Ansicht tatsächlich vereinheitlicht, statt in separate Mail-/Live-Ansicht-Codepfade auseinanderzugehen. Ein :checked-Umschalten aus Kontrollkästchen und Label hat keine „bessere“ native Alternative, auf die in einem echten Browser aktualisiert werden könnte — anders als etwa der linkbasierte Fallback einer Abstimmung, der durch ein echtes Formular ersetzt wird. Die Live-Ansicht rendert also genau dasselbe Markup wie die E-Mail.
Überall dort, wo diese CSS-Regel nicht beachtet wird — Outlook oder jeder Client, der die kinetische Stufe nicht unterstützt —, werden Vorder- und Rückseite stattdessen einfach statisch übereinander gestapelt. Jede ist mit einem einfachen „F:“-/„A:“-Präfix beschriftet, sodass die Zuordnung auch ganz ohne Interaktion noch nachvollziehbar bleibt. Nichts wird je hinter einer Geste versteckt, die ein Client nicht ausführen kann; der Fallback zeigt den vollständigen Inhalt jeder Karte, Vorder- und Rückseite, gleichzeitig an.
Ein Karteikarten-Stapel erfasst nichts. Es gibt kein Abstimmungs-, Einreichungs- oder Aufdeckungsereignis für das Umdrehen einer Karte, und der Block deklariert keine Fähigkeit, die ihn in das Antworten-Dashboard, den CSV-Export, die Klick-Heatmap oder eine andere Zusammenfassung eintragen würde. Es ist reiner Lerninhalt, in derselben Kategorie wie ein einfacher Bild- oder Textblock, nur interaktiv.
Konfigurierbare Felder am Karteikarten-Stapel selbst beschränken sich auf das Karten-Styling — Hintergrundfarbe, Innenabstand, Rahmen und Eckenradius —, da alles Inhaltsspezifische auf den einzelnen Karten liegt.
Jedes Karteikarte-Kind trägt:
- Vorderseite (Frage) und Rückseite (Antwort) als Text, jeweils mit eigener Farbe und Schriftgröße.
- Vorderseitenbild und Rückseitenbild — optional, oberhalb des Texts der jeweiligen Seite gerendert; ausgewählt aus Ihrer Mediathek statt als URL eingetippt.
Fügen Sie Karten im Baum frei hinzu, entfernen oder ordnen Sie sie neu, genauso wie Sie Abstimmungsoptionen oder Quiz-Fragen verwalten würden.
Beispiele
Subject
Study these before Friday's quiz
Ein Newsletter zum Sprachenlernen kann jede Woche ein thematisches Set an Vokabelkarten versenden: Vorderseite in der Zielsprache, Rückseite mit Übersetzung und Verwendungshinweis. Das breitere Muster, Lerninhalte per E-Mail bereitzustellen, finden Sie unter Bildung. Eine Zertifizierungsvorbereitung kann einen Stapel pro Themenbereich als spaced-repetition-artige Auffrischung zwischen Übungsquizzen verwenden (kombinieren Sie ihn im selben Versand mit einem späteren Quiz-Block, um den Lerneffekt unmittelbar zu testen). Eine Onboarding-E-Mail für ein technisches Produkt kann Karteikarten für schnelle Begriffsdefinitionen nutzen (Vorderseite: der Begriff, Rückseite: seine Bedeutung in Ihrem Produkt) als leichtere Alternative zu einer Glossarseite, die sonst niemand öffnen würde.
So sieht der statische Fallback aus
<div style="border:1px solid #e5e7eb;border-radius:8px;padding:14px;
margin-bottom:8px;text-align:center">
<div class="fc-front">
<p style="margin:0;font-weight:600;font-size:16px;color:#111827">
Q: What is the powerhouse of the cell?
</p>
</div>
<div class="fc-back">
<p style="margin:0;font-size:16px;color:#111827">
A: The mitochondria
</p>
</div>
</div>
Beide Seiten werden bedingungslos gerendert; nur ein kinetisches Stylesheet (hier ausgelassen) blendet jeweils eine Seite aus und tauscht sie bei einem Tap — ohne es stapeln sich Vorder- und Rückseite einfach, jeweils beschriftet mit „F:“ / „A:“.