Bloc Jeu de cartes mémo
Une carte à retourner pour réviser du vocabulaire ou des faits : ajoutez un Jeu de cartes mémo, puis déposez-y des enfants Carte mémo, chacun avec son propre texte recto (question) et verso (réponse), plus une image facultative de chaque côté. C'est une aide à la révision, pas une question — il n'y a rien à noter ou à collecter.
Comment ça fonctionne
Chaque carte du jeu se retourne indépendamment, en utilisant le même mécanisme de case à cocher masquée plus CSS :checked que les blocs accordéon et carte à gratter utilisent — pas de JavaScript, pas de dépendance à un élément natif de divulgation HTML. Toucher une carte coche sa propre case à cocher masquée, ce qui masque la face recto de cette carte et affiche sa face verso via une règle CSS ciblée. Chaque autre carte du jeu est câblée à sa propre case à cocher indépendante, donc retourner l'une n'a aucun effet sur les autres.
Contrairement à la plupart des autres blocs cinétiques du studio, le rendu du jeu de cartes mémo pour le courrier et la vue en direct est véritablement unifié plutôt que de diverger en chemins de code courrier/vue en direct séparés. Un retournement à base de case à cocher :checked et d'étiquette n'a pas de « meilleure » alternative native vers laquelle évoluer dans un vrai navigateur — contrairement, par exemple, au repli par lien d'un sondage, qui est remplacé par un vrai formulaire. La vue en direct rend donc exactement le même balisage que le courrier.
Partout où cette règle CSS n'est pas honorée — Outlook, ou tout client qui ne prend pas en charge le niveau cinétique — le recto et le verso se rendent simplement empilés l'un sur l'autre de façon statique plutôt que de se retourner. Chacun est étiqueté d'un préfixe simple « Q : » / « R : », de sorte que l'appariement reste lisible même sans aucune interaction. Rien n'est jamais caché derrière un geste qu'un client ne peut pas effectuer ; le repli affiche le contenu complet de chaque carte, recto et verso, tout à la fois.
Un jeu de cartes mémo n'enregistre rien. Il n'y a ni vote, ni soumission, ni événement de révélation pour un retournement de carte, et le bloc ne déclare aucune capacité qui l'inscrirait dans le tableau de bord des réponses, l'export CSV, la carte de chaleur des clics, ou toute autre synthèse. C'est du contenu de révision pur, la même catégorie qu'un simple bloc image ou texte, simplement interactif.
Les champs configurables sur le Jeu de cartes mémo lui-même se limitent au style de la carte — Couleur d'arrière-plan, marge intérieure, bordure, et rayon de bordure — puisque tout ce qui est spécifique au contenu vit sur les cartes individuelles.
Chaque enfant Carte mémo porte :
- Le texte Recto (question) et Verso (réponse), chacun avec sa propre couleur et taille de police.
- Image recto et Image verso — facultatives, rendues au-dessus du texte de la face correspondante ; choisies depuis votre bibliothèque de médias plutôt que saisies comme une URL.
Ajoutez, retirez, ou réordonnez les cartes librement dans l'arborescence, de la même façon que vous géreriez des options de sondage ou des questions de quiz.
Exemples
Subject
Study these before Friday's quiz
Une newsletter d'apprentissage de langue peut envoyer chaque semaine un ensemble thématique de cartes de vocabulaire : recto dans la langue cible, verso avec la traduction et une note d'usage. Voir Éducation pour le motif plus large de livrer du contenu d'apprentissage par email. Une séquence de préparation à une certification peut utiliser un jeu par domaine thématique comme rappel de type répétition espacée entre les quiz de pratique (associez-le à un bloc Quiz plus loin dans le même envoi pour tester la mémorisation juste après l'exercice). Un email d'intégration pour un produit technique peut utiliser des cartes mémo pour des définitions rapides de termes (recto : le terme, verso : ce qu'il signifie dans votre produit) comme alternative plus légère à une page de glossaire que personne n'ouvrirait autrement.
À quoi ressemble l'alternative statique
<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>
Les deux faces se rendent inconditionnellement ; seule une feuille de style de niveau cinétique (omise ici) masque une face à la fois et les échange au toucher — sans elle, recto et verso s'empilent simplement, chacun étiqueté « Q : » / « R : ».