Olá pessoal, tudo bem com vocês?
Hoje vamos explorar como automatizar uma atividade educacional que simplifica o trabalho de professores e educadores. Vamos criar uma rotina que permite unir palavras a imagens, facilitando a análise e o aprendizado dos alunos.
Vamos lá?
Tópicos:
- Introdução
- Posicionamento
- Embaralhando as palavras
- Múltiplos Arquivos
- Fluxo para download
Introdução
Nesta etapa, o foco será criar uma rotina que automatize a atividade de ligar palavras a imagens.
Utilizando as imagens disponíveis e o modelo de atividade, uniremos as informações em uma atividade final.
O objetivo é que o aluno analise a palavra e a ligue com a imagem correspondente, simplificando o processo de ensino.
Posicionamento
Para realizar essa atividade, utilizaremos tanto textos quanto imagens.
Isso significa que duas variáveis são importantes: as posições das imagens e as posições dos textos.
Na caixinha de “configs” é possível ver as variáveis definidas. Ao definir essas posições, garantimos que a atividade seja clara e organizada para o aluno.
# Imagens
{
0: { x: 145, y: 540 },
1: { x: 145, y: 880 },
2: { x: 145, y: 1230 },
3: { x: 145, y: 1570 },
}
# Textos
{
0: { x: 900, y: 620 },
1: { x: 900, y: 960 },
2: { x: 900, y: 1300 },
3: { x: 900, y: 1615 },
}Embaralhando as palavras
Para evitar que as palavras fiquem diretamente alinhadas com suas imagens correspondentes, implementamos uma função de sorteio.
Essa função embaralha as palavras, permitindo que ocupem posições aleatórias na atividade.
Isso adiciona um elemento de desafio e engajamento para os alunos.
function embaralharJsonPalavras(resultado) {
// Extrai todas as palavras atuais
const palavras = resultado.map(item => item.json.palavra);
// Embaralha as palavras (Fisher-Yates)
for (let i = palavras.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[palavras[i], palavras[j]] = [palavras[j], palavras[i]];
}
// Atribui as palavras embaralhadas de volta
return resultado.map((item, index) => {
item.json.palavra = palavras[index];
return item;
});
}
Múltiplos Arquivos
No N8N, é possível selecionar múltiplos arquivos, e utilizamos essa funcionalidade em nosso fluxo.
Combinamos informações de textos no formato JSON, permitindo mesclar conteúdos e associá-los às imagens. Isso torna o processo mais dinâmico e eficiente.
const mockup = $input.first().binary.data
const palavra =
$("redimensiona_imagem").first().json.palavra
const origem = $("redimensiona_imagem").first().json.origem
const image = $("redimensiona_imagem").first().binary[origem]
const position = $('redimensiona_imagem').first().json.position
const texts = $('redimensiona_imagem').first().json.texts
return [
{
json: {
position,
texts
},
binary: {
mockup: mockup,
image: image
}
}
];
Fluxo para download
Por hoje é só! Disponibilizamos o fluxo para download. Lembre-se de alterar para a sua planilha Google Sheets e ajustar o caminho onde estão os mockups criados. Até a próxima!