Desenvolvedores
src_
blocks
VerdadeiroOuFalso.ts

📌 Bloco VerdadeiroOuFalso

Este bloco representa um tipo de pergunta do tipo Verdadeiro ou Falso, onde os usuários devem selecionar a alternativa correta. Ele é utilizado dentro do Payload CMS para criação de conteúdos interativos.

🏗️ Estrutura do Bloco

Primeiro, importamos as dependências necessárias:

import { Block } from 'payload' 
import {
  FixedToolbarFeature,
  InlineToolbarFeature,
  lexicalEditor,
} from '@payloadcms/richtext-lexical'
  • Block: Define um bloco reutilizável dentro do Payload CMS.
  • lexicalEditor: Permite a edição de texto rico para o enunciado da pergunta.
  • FixedToolbarFeature e InlineToolbarFeature: Adicionam funcionalidades extras ao editor de texto.

🏷️ Definição do Bloco

Agora, criamos o bloco VerdadeiroOuFalso:

const VerdadeiroOuFalso: Block = {
  slug: 'verdadeiroOuFalso',
  labels: {
    singular: 'Verdadeiro ou Falso',
    plural: 'Verdadeiros ou Falsos',
  },
  • slug: Nome interno do bloco.
  • labels: Define nomes para exibição no CMS.

❓ Campo da Pergunta

  fields: [
    {
      name: 'pergunta',
      label: 'Enunciado da Pergunta',
      type: 'richText',
      required: true,
      editor: lexicalEditor({
        features: ({ defaultFeatures }) => {
          return [...defaultFeatures, FixedToolbarFeature(), InlineToolbarFeature()]
        },
      }),
    },
  • name: Identificador do campo no banco de dados.
  • label: Nome do campo no CMS.
  • type: richText permite formatação avançada no enunciado.
  • required: true: Torna o campo obrigatório.

🔘 Campo das Alternativas

    {
      name: 'alternativas',
      label: 'Alternativas',
      type: 'array',
      required: true,
      fields: [
        {
          type: 'row',
          fields: [
            {
              name: 'valor',
              label: 'Valor da Alternativa',
              type: 'select',
              options: [
                { label: 'Verdadeiro', value: 'true' },
                { label: 'Falso', value: 'false' },
              ],
              required: true,
              admin: {
                width: '19%',
              },
            },
  • type: 'array': Permite múltiplas alternativas.
  • valor: Um campo select para escolher entre "Verdadeiro" e "Falso".

📝 Campo Explicação

    {
      name: 'explicacao',
      label: 'Explicação (Opcional)',
      type: 'textarea',
      required: false,
    },
  • Permite que o criador da questão forneça uma explicação para a resposta.

✅ Código Completo

import { Block } from 'payload' 
import {
  FixedToolbarFeature,
  InlineToolbarFeature,
  lexicalEditor,
} from '@payloadcms/richtext-lexical'
 
const VerdadeiroOuFalso: Block = {
  slug: 'verdadeiroOuFalso',
  labels: {
    singular: 'Verdadeiro ou Falso',
    plural: 'Verdadeiros ou Falsos',
  },
  fields: [
    {
      name: 'pergunta',
      label: 'Enunciado da Pergunta',
      type: 'richText',
      required: true,
      editor: lexicalEditor({
        features: ({ defaultFeatures }) => {
          return [...defaultFeatures, FixedToolbarFeature(), InlineToolbarFeature()]
        },
      }),
    },
    {
      name: 'alternativas',
      label: 'Alternativas',
      type: 'array',
      required: true,
      fields: [
        {
          type: 'row',
          fields: [
            {
              name: 'valor',
              label: 'Valor da Alternativa',
              type: 'select',
              options: [
                { label: 'Verdadeiro', value: 'true' },
                { label: 'Falso', value: 'false' },
              ],
              required: true,
              admin: {
                width: '19%',
              },
            },
            {
              name: 'texto',
              label: 'Texto da Alternativa',
              type: 'textarea',
              required: true,
              admin: {
                width: '79%',
              },
            },
          ],
        },
      ],
    },
    {
      name: 'explicacao',
      label: 'Explicação (Opcional)',
      type: 'textarea',
      required: false,
    },
  ],
}
 
export default VerdadeiroOuFalso
PerguntaObjetiva.tsAlunos.js