Blocco Mazzo di flashcard
Una carta ribaltabile per esercitarsi con vocabolario o nozioni: aggiungi un Mazzo di flashcard, quindi inserisci al suo interno elementi figli Flashcard, ciascuno con il proprio testo sul fronte (domanda) e sul retro (risposta), oltre a un'immagine facoltativa su entrambi i lati. È uno strumento di studio, non una domanda — non c'è nulla da valutare o raccogliere.
Come funziona
Ogni carta nel mazzo si ribalta in modo indipendente, usando lo stesso meccanismo a checkbox nascosta più CSS :checked usato dai blocchi Fisarmonica e Gratta e vinci — nessun JavaScript, nessuna dipendenza da un elemento nativo HTML di disclosure. Toccando una carta si seleziona la sua checkbox nascosta, che nasconde il fronte di quella carta e mostra il suo retro tramite una regola CSS mirata. Ogni altra carta nel mazzo è collegata alla propria checkbox indipendente, quindi ribaltarne una non ha alcun effetto sulle altre.
A differenza della maggior parte degli altri blocchi cinetici dello Studio, il rendering email e vista live del mazzo di flashcard sono davvero unificati invece di divergere in percorsi di codice separati per email e vista live. Un ribaltamento tramite checkbox-e-etichetta :checked non ha un'alternativa nativa "migliore" a cui passare in un browser reale — a differenza, ad esempio, del fallback basato su link di un Sondaggio, che viene sostituito da un vero modulo. Quindi la vista live renderizza esattamente lo stesso markup dell'email.
Ovunque quella regola CSS non venga rispettata — Outlook, o qualsiasi client che non supporta il livello cinetico — fronte e retro vengono semplicemente renderizzati impilati uno sopra l'altro in modo statico invece di ribaltarsi. Ciascuno è etichettato con un semplice prefisso "D:" / "R:", così l'abbinamento resta leggibile anche senza alcuna interazione. Nulla resta mai nascosto dietro un gesto che un client non può eseguire; il fallback mostra il contenuto completo di ogni carta, fronte e retro, tutto insieme.
Un mazzo di flashcard non registra nulla. Non c'è alcun voto, invio o evento di rivelazione per il ribaltamento di una carta, e il blocco non dichiara alcuna capability che lo registrerebbe nella dashboard delle risposte, nell'esportazione CSV, nella mappa di calore dei clic o in qualsiasi altro riepilogo. È puro contenuto di studio, la stessa categoria di un semplice blocco immagine o testo, solo interattivo.
I campi configurabili sul Mazzo di flashcard stesso sono limitati allo stile della carta — Colore di sfondo, padding, bordo e raggio del bordo — poiché tutto ciò che è specifico al contenuto risiede sulle singole carte.
Ogni Flashcard figlia porta con sé:
- Testo Fronte (domanda) e Retro (risposta), ciascuno con il proprio colore e dimensione del font.
- Immagine fronte e Immagine retro — facoltative, renderizzate sopra il testo della relativa faccia; scelte dalla tua libreria multimediale invece che digitate come URL.
Aggiungi, rimuovi o riordina le carte liberamente nell'albero, allo stesso modo in cui gestiresti le opzioni di un sondaggio o le domande di un quiz.
Esempi
Subject
Study these before Friday's quiz
Una newsletter di apprendimento linguistico può inviare un set tematico di carte vocabolario ogni settimana: fronte nella lingua di destinazione, retro con la traduzione e una nota d'uso. Vedi Istruzione per il pattern più ampio di distribuire contenuti didattici via email. Una sequenza di preparazione a una certificazione può usare un mazzo per area tematica come ripasso in stile ripetizione dilazionata tra un quiz di pratica e l'altro (abbinalo a un blocco Quiz più avanti nello stesso invio per verificare la memorizzazione subito dopo l'esercizio). Un'email di onboarding per un prodotto tecnico può usare le flashcard per definizioni rapide di termini (fronte: il termine, retro: cosa significa nel tuo prodotto) come alternativa più leggera a una pagina glossario che altrimenti nessuno aprirebbe.
Come appare il fallback statico
<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>
Entrambe le facce vengono renderizzate incondizionatamente; solo un foglio di stile del livello cinetico (omesso qui) nasconde una faccia alla volta e le scambia al tap — senza di esso, fronte e retro si limitano a impilarsi, ciascuno etichettato "D:" / "R:".