Desenvolvedores
src_
blocks
Flashcard.ts

📌 Bloco de Flashcard no PayloadCMS

O Flashcard é um bloco que pode ser usado dentro do PayloadCMS para armazenar perguntas e respostas em um formato interativo. Ele é útil para sistemas de aprendizado, onde os usuários podem visualizar uma pergunta na frente do cartão e a resposta no verso.

🚀 Estrutura do Bloco

A estrutura do bloco é definida como um objeto do tipo Block, contendo:

  • slug: Define um identificador único para o bloco, neste caso, "flashcard".
  • labels: Define nomes no singular e plural para facilitar a identificação no CMS.
  • fields: Lista os campos do bloco, que incluem "Frente" e "Verso".
import { Block } from 'payload'  
 
const Flashcard: Block = {  
  slug: 'flashcard', // 🏷️ Identificador único do bloco  
  labels: {  
    singular: 'Flashcard',  
    plural: 'Flashcards',  
  },  
  fields: [  
    {  
      name: 'frente',  
      label: 'Frente', // 📝 Pergunta do flashcard  
      type: 'textarea',  
      required: true,  
      admin: {  
        description: 'Frente do flashcard deve conter a pergunta e o verso a resposta',  
      },  
    },  
    {  
      name: 'verso',  
      label: 'Verso', // ✅ Resposta do flashcard  
      type: 'textarea',  
      required: true,  
    },  
  ],  
}  
 
export default Flashcard

📌 Explicação dos Campos

  1. Frente (frente) 📝

    • Campo do tipo textarea
    • Deve conter a pergunta que será exibida ao usuário
    • É um campo obrigatório (required: true)
    • Possui uma descrição administrativa para orientar os editores

  2. Verso (verso) ✅

    • Campo do tipo textarea
    • Deve conter a resposta correspondente à pergunta
    • Também é obrigatório (required: true)

🔥 Conclusão

Esse bloco permite criar flashcards de maneira eficiente dentro do PayloadCMS. Ele pode ser utilizado para estudos, treinamentos e sistemas educacionais interativos.

📜 Código Completo

import { Block } from 'payload'  
 
const Flashcard: Block = {  
  slug: 'flashcard',  
  labels: {  
    singular: 'Flashcard',  
    plural: 'Flashcards',  
  },  
  fields: [  
    {  
      name: 'frente',  
      label: 'Frente',  
      type: 'textarea',  
      required: true,  
      admin: {  
        description: 'Frente do flashcard deve conter a pergunta e o verso a resposta',  
      },  
    },  
    {  
      name: 'verso',  
      label: 'Verso',  
      type: 'textarea',  
      required: true,  
    },  
  ],  
}  
 
export default Flashcard
route.tsPerguntaDissertativa.ts