4- Atividades Educacionais: Complete a Primeira Letra da Palavra

Olá pessoal, tudo bem com vocês?

Hoje iremos explorar como criar uma atividade educacional do tipo “complete a primeira letra da palavra”. Nesta atividade, apresentaremos uma imagem e, abaixo dela, uma palavra correspondente com a primeira letra faltando.

Vamos lá?

Tópicos:

• Introdução
• Diversificação de modelos
• Código da Atividade
• Lista de Imagens
• Filtro e Seleção
• Criação da Arte
• Adição de Texto
• Fluxo para Download

Introdução

Hoje iremos ver como criar uma atividade onde o aluno deve completar a primeira letra da palavra associada a uma imagem. A ideia é ter uma imagem com uma palavra abaixo, mas com a primeira letra faltando.
Com o objetivo de ficar didático, iremos disponibilizar o fluxo para Download e explicar algumas partes importantes do desenvolvimento.

Diversificação de modelos

Uma implementação para ter uma variedade de atividades foi criar diferentes modelos que poderão ser utilizados pelo fluxo.

Os modelos terão a mesma estrutura para os locais das imagens e poderão ser utilizados para a geração de atividades em diferentes formatos.
Lembre-se ao criar um modelo que em suas variações os locais que serão preenchidos com imagens deverão tem o mesmo lugar e o mesmo tamanho.

Código da Atividade

Com o objetivo de criar um nome único para a atividade, iremos utilizar a data no momento em que a atividade está sendo criada.
Para isso utilizaremos a função “generateId”, ela irá recuperar a data no momento da execução e nos retornar no formato texto, contendo o dia e o segundo exato da execução.

# Função generateId
function generateId() {
  const now = new Date();
  const timestamp = now.getTime();
  const formattedDate = now.toISOString().replace(/[-:T.]/g, '');
  return `${formattedDate}-${timestamp}`;
}

# Exemplo de resultado
# 20250512120215503Z-1747051335503

Esse método foi escolhido para o nome das atividades que serão criadas, assim não corremos o risco de sobrescrever uma atividade já existente.

Retornando Dados e Arquivos juntos

No nosso fluxo implementamos uma funcionalidade no N8N que permite trafegarmos arquivos e dados juntos. Os tipos disponíveis no N8N são JSON e Binary, onde:

• JSON: é um formato de texto leve usado para armazenar e transportar dados. Ele é fácil de ler e escrever para humanos e fácil de analisar e gerar para máquinas.
• Binary: refere-se a dados que são representados em formato binário, ou seja, como uma sequência de 0s e 1s. Arquivos binários podem incluir imagens, vídeos, executáveis, entre outros tipos de dados que não são texto.

No elemento CODE, é possível retornar os dois tipos de informação, assim como foi feito na caixinha: “gera_id_atividade”

const fileName = $input.first().json.fileName

function generateId() {
  const now = new Date();
  const timestamp = now.getTime();
  const formattedDate = now.toISOString().replace(/[-:T.]/g, '');
  return `${formattedDate}-${timestamp}`;
}

return {
  json: {
    id: `${generateId()}_${fileName}`
  },
  binary: {
    data: $input.first().binary.data
  }
}

Aqui temos no tipo JSON o ID gerado que é um texto com o nome do arquivo e em BINARY teremos o arquivo binário que recebemos da etapa anterior.
Com isso temos flexibilidade de encaminhar arquivos e textos para serem utilizados na próxima caixinha.

Fluxo para Download

Por hoje é só. Na próxima postagem iremos entrar mais a fundo em outras partes do fluxo.
Disponibilizamos o fluxo para download.
Lembre-se de alterar para a sua planilha Google Sheets e para o caminho onde estão os mockups criados.

Até a próxima!