Bloque de mazo de tarjetas didácticas
Una tarjeta que se voltea para memorizar vocabulario o datos: agrega un Mazo de tarjetas didácticas, y luego coloca hijos de Tarjeta didáctica dentro de él, cada uno con su propio texto de frente (pregunta) y reverso (respuesta), más una imagen opcional en cualquiera de los dos lados. Es una ayuda de estudio, no una pregunta — no hay nada que puntuar ni recopilar.
Cómo funciona
Cada tarjeta del mazo se voltea de forma independiente, usando el mismo mecanismo de casilla oculta más CSS :checked que usan los bloques de acordeón y rasca y gana — sin JavaScript, sin depender de un elemento nativo de divulgación HTML. Al tocar una tarjeta se marca su propia casilla oculta, lo que oculta la cara frontal de esa tarjeta y muestra su reverso mediante una regla CSS delimitada. Cada una de las demás tarjetas del mazo está conectada a su propia casilla independiente, así que voltear una no afecta a las demás.
A diferencia de la mayoría de los demás bloques cinéticos del estudio, el renderizado de correo y de vista en vivo del mazo de tarjetas didácticas está realmente unificado, en lugar de dividirse en rutas de código separadas para correo y vista en vivo. Un volteo de casilla-y-etiqueta :checked no tiene una alternativa nativa "mejor" a la que actualizarse en un navegador real — a diferencia, por ejemplo, de la alternativa basada en enlaces de una encuesta, que se reemplaza por un formulario real. Así que la vista en vivo renderiza exactamente el mismo marcado que el correo.
En cualquier lugar donde esa regla CSS no se respete — Outlook, o cualquier cliente que no admita el nivel cinético — el frente y el reverso simplemente se renderizan apilados de forma estática en lugar de voltearse. Cada uno lleva un prefijo simple "P:" / "R:", así que el emparejamiento sigue siendo legible sin ninguna interacción. Nada queda nunca oculto detrás de un gesto que un cliente no puede realizar; la alternativa muestra el contenido completo de cada tarjeta, frente y reverso, todo a la vez.
Un mazo de tarjetas didácticas no registra nada. No hay evento de voto, envío ni revelación por voltear una tarjeta, y el bloque no declara ninguna capacidad que lo registre en el panel de respuestas, la exportación CSV, el mapa de calor de clics, ni ningún otro resumen. Es contenido de estudio puro, la misma categoría que un bloque simple de imagen o texto, solo que interactivo.
Los campos configurables del Mazo de tarjetas didácticas en sí se limitan al estilo de la tarjeta — Color de fondo, relleno, borde y radio de borde — ya que todo lo específico del contenido vive en las tarjetas individuales.
Cada hijo Tarjeta didáctica lleva:
- Texto de Frente (pregunta) y Reverso (respuesta), cada uno con su propio color y tamaño de fuente.
- Imagen de frente e Imagen de reverso — opcionales, renderizadas encima del texto de la cara correspondiente; elegidas desde tu biblioteca multimedia en lugar de escribirse como URL.
Agrega, elimina o reordena tarjetas libremente en el árbol, de la misma forma en que gestionarías las opciones de una encuesta o las preguntas de un cuestionario.
Ejemplos
Subject
Study these before Friday's quiz
Un boletín de aprendizaje de idiomas puede enviar cada semana un conjunto temático de tarjetas de vocabulario: el frente en el idioma objetivo, el reverso con la traducción y una nota de uso. Mira Educación para el patrón más amplio de entregar contenido de aprendizaje por correo. Una secuencia de preparación para una certificación puede usar un mazo por área temática como repaso al estilo de repetición espaciada entre cuestionarios de práctica (combínalo con un bloque de Cuestionario más adelante en el mismo envío para poner a prueba la memoria justo después del repaso). Un correo de incorporación para un producto técnico puede usar tarjetas didácticas para definiciones rápidas de términos (frente: el término, reverso: qué significa en tu producto) como una alternativa más ligera a una página de glosario que nadie abriría de otro modo.
Cómo se ve la alternativa estática
<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 caras se renderizan incondicionalmente; solo una hoja de estilos de nivel cinético (omitida aquí) oculta una cara a la vez y las intercambia al tocar — sin ella, el frente y el reverso simplemente se apilan, cada uno etiquetado "P:" / "R:".