Bloco Baralho de flashcards
Uma carta que vira para exercícios de vocabulário ou memorização de fatos: adicione um Baralho de flashcards, depois solte Flashcards filhos dentro dele, cada um com sua própria frente (pergunta) e verso (resposta) em texto, além de uma imagem opcional em qualquer um dos lados. É um recurso de estudo, não uma pergunta — não há nada a pontuar ou coletar.
Como funciona
Cada carta do baralho vira de forma independente, usando o mesmo mecanismo de checkbox oculto mais CSS :checked que os blocos de acordeão e raspadinha usam — sem JavaScript, sem depender de um elemento nativo de divulgação HTML. Tocar em uma carta marca seu próprio checkbox oculto, o que esconde a face da frente daquela carta e mostra sua face do verso através de uma regra CSS delimitada. Toda outra carta no baralho está conectada ao seu próprio checkbox independente, então virar uma não tem efeito sobre as demais.
Diferente da maioria dos outros blocos cinéticos do estúdio, a renderização de e-mail e de visualização ao vivo do baralho de flashcards é genuinamente unificada, em vez de divergir em caminhos de código separados para e-mail/visualização ao vivo. Um flip de checkbox-e-rótulo :checked não tem uma alternativa nativa "melhor" para a qual evoluir em um navegador real — diferente, digamos, do fallback baseado em link de uma enquete, que é substituído por um formulário de verdade. Então a visualização ao vivo renderiza exatamente a mesma marcação que o e-mail.
Sempre que essa regra CSS não é respeitada — Outlook, ou qualquer cliente que não suporta o nível cinético — frente e verso simplesmente são renderizados empilhados um sobre o outro, de forma estática, em vez de virarem. Cada uma é rotulada com um prefixo simples "Q:" / "A:", de modo que o pareamento continua legível mesmo sem nenhuma interação. Nada fica escondido atrás de um gesto que um cliente não consegue realizar; o fallback mostra o conteúdo completo de cada carta, frente e verso, tudo de uma vez.
Um baralho de flashcards não registra nada. Não há voto, envio ou evento de revelação para o flip de uma carta, e o bloco não declara nenhuma capability que o registraria no painel de respostas, na exportação CSV, no mapa de calor de cliques ou em qualquer outro agregado. É conteúdo de estudo puro, a mesma categoria de um bloco simples de imagem ou texto, só que interativo.
Os campos configuráveis do próprio Baralho de flashcards se limitam à estilização das cartas — Cor de fundo, espaçamento interno, borda e raio da borda — já que tudo específico de conteúdo fica nas cartas individuais.
Cada Flashcard filho carrega:
- Texto de Frente (pergunta) e Verso (resposta), cada um com sua própria cor e tamanho de fonte.
- Imagem da frente e Imagem do verso — opcionais, renderizadas acima do texto da face correspondente; escolhidas na sua biblioteca de mídia em vez de digitadas como uma URL.
Adicione, remova ou reordene cartas livremente na árvore, da mesma forma que você gerenciaria opções de enquete ou perguntas de quiz.
Exemplos
Subject
Study these before Friday's quiz
Um boletim de aprendizado de idiomas pode enviar um conjunto temático de cartas de vocabulário toda semana: frente no idioma-alvo, verso com a tradução e uma nota de uso. Veja Educação para o padrão mais amplo de entrega de conteúdo de aprendizado por e-mail. Uma sequência de preparação para certificação pode usar um baralho por área de tema como um reforço no estilo de repetição espaçada entre quizzes práticos (combine com um Bloco Quiz mais adiante no mesmo envio para testar a memorização logo após o exercício). Um e-mail de integração para um produto técnico pode usar flashcards para definições rápidas de termos (frente: o termo, verso: o que ele significa no seu produto) como uma alternativa mais leve a uma página de glossário que ninguém abriria de outra forma.
Como é o fallback estático
<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>
Ambas as faces são renderizadas incondicionalmente; apenas uma folha de estilos de nível cinético (omitida aqui) esconde uma face de cada vez e as troca ao toque — sem ela, frente e verso simplesmente se empilham, cada uma rotulada "Q:" / "A:".