Receita número 168

Receitas · Capítulo 12 · Livros didáticos

Unidade de um caderno de atividades do fundamental

Uma unidade de Ciências de quatro páginas com onze atividades :::exercise, impressas por um só estilo: círculos numerados, banco de palavras, pontos para ligar.

Nesta página
Saída
Canvas · PDF
Postext
Testada com o Postext 1.59.0
Requer ≥ 1.59.0 · postext-pdf ≥ 1.59.0
Licença
Atualizada em 24 de out. de 2026
Código MIT · Texto CC BY 4.0

p. 1 de 4

Ler esta receita como texto →
  • Amostra em inglês: ainda sem edição em português
  • Refile 210 × 297 mm
  • 1 coluna
  • Atkinson Hyperlegible Next 12/17
  • Grandstander
  • 4 páginas
  • Nível
  • Postext 1.59.0
  • Diagramado em 16 ms
  • 182 linhas de código

Em poucas palavras

Um caderno de atividades para crianças de oito anos sobre os animais vertebrados. As perguntas e as respostas estão escritas no texto; um estilo decide como cada atividade aparece na página.

O que você vai compor

A unidade 5 de um caderno de atividades de Ciências do 3.º ano, em A4: Animals with backbones, os animais vertebrados. A abertura põe a unidade numa faixa verde sobre a pintura de uma lagoa; depois vêm onze atividades, cada uma com o número num círculo verde e um ícone de lápis, de balão de fala ou de dupla. Um banco de palavras num boxe colorido de borda tracejada, frases para marcar com T ou F, animais para ligar ao seu grupo com um traço, palavras para circular numa frase e num texto curto, fases da rã para numerar, um caça-palavras, animais para classificar, uma pergunta aberta com linhas para escrever e outra em quadriculado. Uma edição espanhola imprime a mesma unidade como as escolas de lá a compõem, com V e F e une con flechas. Três pinturas geradas com um modelo de difusão a ilustram.

Esta receita responde a

  • Como componho uma página de caderno de atividades: números em círculos, banco de palavras, verdadeiro ou falso, ligue?
  • Como coloco ícones de atividade (escreva, fale, em dupla) ao lado do número de um exercício?
  • Como monto uma ficha de exercícios: linhas para preencher, caixas de resposta, bancos de palavras, listas de verificação?

A resposta curta

script.js · linhas 34–61no código completo
// The Markdown says what each activity asks (:::exercise, [[answers]], - A -> B, - [x]);
// this style says how a Spanish workbook prints it: the number in a disc of the unit
// colour, the instruction in bold, blanks on a line, V/F boxes at the line's end, dots to
// join, the bank in a tinted box, squared paper for writing and the activity icons.
const icon = (id, alt) => ({ resourceId: `icon-${id}`, alt, size: 1.05 });
const actividad = {
  id: 'actividad',
  number: { shape: 'disc', background: col('unit'), color: col('paper'),
    fontFamily: DISPLAY, fontSize: em(1.05), fontWeight: 800 },
  instruction: { bold: true, color: col('ink') },
  options: { marker: 'circle' },
  blank: { look: 'line', color: col('ink'), weight: pt(0.75), extra: em(2) },
  trueFalse: { look: 'boxes' }, // V F in Spanish, T F in English: the language's own words
  match: { look: 'dots', gap: em(7), dotSize: em(0.42), color: col('unit') },
  bank: { box: 'banco', order: 'alpha', separator: ' ' },
  area: { kind: 'lines', spacing: mm(9), color: col('rule'), weight: pt(0.6) },
  grid: { cell: mm(9.5), fontFamily: DISPLAY, fontSize: pt(13), rule: col('rule'),
    color: col('ink') },
  icons: {
    escribe: icon('write', t({ es: 'Escribe', en: 'Write' })),
    oral: icon('oral', t({ es: 'Actividad oral', en: 'Speaking' })),
    pareja: icon('pair', t({ es: 'En pareja', en: 'In pairs' })),
  },
  marginTop: mm(7), marginBottom: mm(2), itemSpacing: em(0.8),
};
// The same activity written on squared paper (cuadrícula): `style="cuadricula"`.
const cuadricula = { id: 'cuadricula', extends: 'actividad',
  area: { kind: 'grid', spacing: mm(5), weight: pt(0.4) } };

Ingredientes

Tipografia
Atkinson Hyperlegible Next, Grandstander (SIL OFL 1.1)
Materiais
  • charca-1088.jpg
  • ciclo-1088.jpg
  • nina-720.jpg
  • Animals at a pond: a frog, a kingfisher, a trout, a turtle and a rabbit. (Generated With Diffusion Models, original)
  • Five stages of a frog's life, in a jumbled order. (Generated With Diffusion Models, original)
  • A girl with a magnifying glass watching a sparrow and a lizard on a wall. (Generated With Diffusion Models, original)

Preparo

#1 · Escreva as atividades no Markdown e dê estilo a elas uma vez só

script.js · linhas 34–61no código completo
// The Markdown says what each activity asks (:::exercise, [[answers]], - A -> B, - [x]);
// this style says how a Spanish workbook prints it: the number in a disc of the unit
// colour, the instruction in bold, blanks on a line, V/F boxes at the line's end, dots to
// join, the bank in a tinted box, squared paper for writing and the activity icons.
const icon = (id, alt) => ({ resourceId: `icon-${id}`, alt, size: 1.05 });
const actividad = {
  id: 'actividad',
  number: { shape: 'disc', background: col('unit'), color: col('paper'),
    fontFamily: DISPLAY, fontSize: em(1.05), fontWeight: 800 },
  instruction: { bold: true, color: col('ink') },
  options: { marker: 'circle' },
  blank: { look: 'line', color: col('ink'), weight: pt(0.75), extra: em(2) },
  trueFalse: { look: 'boxes' }, // V F in Spanish, T F in English: the language's own words
  match: { look: 'dots', gap: em(7), dotSize: em(0.42), color: col('unit') },
  bank: { box: 'banco', order: 'alpha', separator: ' ' },
  area: { kind: 'lines', spacing: mm(9), color: col('rule'), weight: pt(0.6) },
  grid: { cell: mm(9.5), fontFamily: DISPLAY, fontSize: pt(13), rule: col('rule'),
    color: col('ink') },
  icons: {
    escribe: icon('write', t({ es: 'Escribe', en: 'Write' })),
    oral: icon('oral', t({ es: 'Actividad oral', en: 'Speaking' })),
    pareja: icon('pair', t({ es: 'En pareja', en: 'In pairs' })),
  },
  marginTop: mm(7), marginBottom: mm(2), itemSpacing: em(0.8),
};
// The same activity written on squared paper (cuadrícula): `style="cuadricula"`.
const cuadricula = { id: 'cuadricula', extends: 'actividad',
  area: { kind: 'grid', spacing: mm(5), weight: pt(0.4) } };

Cada atividade é um bloco :::exercise. O que o aluno lê e o que conta como certo estão no texto: [[hair]] é uma lacuna cuja resposta é hair, - [x] uma afirmação verdadeira, - Dolphin -> Mammal um par, [[pelo | (plumas)]] uma escolha cuja palavra certa vem entre parênteses. O estilo guarda só a aparência, então as onze atividades compartilham actividad e um segundo estilo, cuadricula, que o amplia com extends para trocar as linhas pelo quadriculado. O motor numera as atividades, embaralha com uma semente a coluna da direita dos pares e os itens a ordenar, deixa cada lacuna da largura da resposta mais longa para que nenhuma entregue a sua e imprime T e F em inglês e V e F em espanhol sem uma palavra na configuração.

#2 · Dê às atividades os seus ícones

script.js · linhas 276–287no código completo
const disc = (body) => '<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" '
  + `viewBox="0 0 24 24"><circle cx="12" cy="12" r="12" fill="${palette.unit}"/>`
  + `<g fill="none" stroke="#fff" stroke-width="1.7" stroke-linecap="round" `
  + `stroke-linejoin="round">${body}</g></svg>`;
const ICONS = {
  write: disc('<path d="M7 17l1-4 7.5-7.5 3 3L11 16l-4 1z"/><path d="M14 7l3 3"/>'),
  oral: disc('<path d="M6 7.5h12v7.5H11l-3.5 3v-3H6z"/><path d="M9.5 11.2h.01M12 11.2h.01M14.5'
    + ' 11.2h.01" stroke-width="2.2"/>'),
  pair: disc('<circle cx="9" cy="9" r="2.3"/><circle cx="15.3" cy="9.6" r="2"/>'
    + '<path d="M4.8 17.5c.4-2.8 2.1-4.3 4.2-4.3s3.8 1.5 4.2 4.3M13.6 13.9c.6-.3 1.1-.4 1.7-.4'
    + ' 1.9 0 3.3 1.3 3.7 3.8"/>'),
};

Um ícone de exerciseStyles[].icons nomeia uma imagem do livro, e :::exercise{icon="oral pareja"} põe as imagens depois do número, na ordem em que foram escritas; o leitor de tela as lê pelo seu alt. São sinais chapados desenhados em código sobre um círculo da cor da unidade, então ficam nítidos no PDF e mudam com a paleta. Um caderno de atividades também imprime um lápis ao lado das atividades de escrever; os ícones de falar e de dupla marcam a última, que não tem área de escrita (area="none").

#3 · Abra a unidade com uma faixa e uma pintura

script.js · linhas 65–81no código completo
const at = (to, edge, x = 0, y = 0, size) => ({ anchor: { to, edge },
  offset: { x: mm(x), y: mm(y) }, ...(size && { size }) });
const PIC = 75; // mm: the painting's height (it is 176 × 75 mm, 2.35:1)
const opener = { enabled: true, minHeight: mm(20 + PIC + 4), slot: { elements: [
  { kind: 'box', id: 'band', style: { backgroundColor: col('unit'), borderRadius: mm(4) },
    placement: at('container', 'top-left', 0, 0, { width: mm(176), height: mm(18) }) },
  { kind: 'text', id: 'unit', content: '{attr.unidad}', fontFamily: DISPLAY, fontSize: pt(11),
    fontWeight: 800, color: col('unit'), align: 'center', verticalAlign: 'middle',
    textTransform: 'uppercase', letterSpacing: pt(1.4), lineHeight: 1.1,
    box: { backgroundColor: col('paper'), borderRadius: mm(4) },
    placement: at('container', 'top-left', 4, 4, { width: mm(30), height: mm(10) }) },
  { kind: 'text', id: 'title', content: '{titleText}', fontFamily: DISPLAY, fontSize: pt(27),
    fontWeight: 800, color: col('paper'), align: 'left', lineHeight: 1,
    placement: at('container', 'top-left', 40, 4.4, { width: mm(132) }) },
  { kind: 'image', id: 'picture', resourceId: '{attr.pic}', decorative: true,
    placement: at('container', 'top-left', 0, 22, { width: mm(176), height: mm(PIC) }) },
] } };

O título de nível 1 da unidade desenha a faixa, a pílula do número e o título a partir dos seus atributos (unidad="Unit 5" pic="charca"), e a pintura sob a faixa em 176 × 75 mm. As imagens dentro das atividades usam um tipo de recurso sem legenda e sem número (dibujo), do jeito que um caderno as imprime. O texto é fácil de ler para crianças: Atkinson Hyperlegible Next em 12 pt sobre 17 pt, sem hifenização, alinhado à esquerda.

A receita completa

Sandbox
// ═══ Postext Cookbook · Nº 168 · Primary workbook unit of activities ═══════════
// https://postext.dev/en/cookbook/primary-workbook-activities
// Code: MIT · Text: original (CC BY 4.0) · Pictures: generated with diffusion models
// Fonts: Atkinson Hyperlegible Next, Grandstander (SIL OFL 1.1) · Needs postext ≥ 1.59.0
import {
  buildDocumentWithFonts, renderPageToCanvas, registerResourceImage,
} from 'https://esm.sh/postext';
import { renderToPdf, decompressWoff2 } from 'https://esm.sh/postext-pdf';

const LANG = 'en'; // @lang: the language of the sample document ('es' | 'en')
const RECIPE = 'primary-workbook-activities';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: one unit colour (green for this unit), a pale tint of it, a sun yellow
const palette = {
  ink: '#1f2b27', // text: a green-tinted near-black
  unit: '#2b7a3d', // the unit's colour: discs, band, folio, dots to join
  deep: '#1d5a2b', // the bank's words and the kicker on white
  tint: '#e6f2e2', // the reminder box, the bank
  sun: '#f2b330', // the reminder's stripe
  rule: '#9cc3a2', // writing lines, the squared paper
  muted: '#5c6b64', // running heads, colophon
  paper: '#ffffff',
};
const col = (id) => ({ hex: palette[id], model: 'hex', paletteId: id });
const colorPalette = [
  ...Object.entries(palette).map(([id, hex]) => ({ id, name: id, value: { hex, model: 'hex' } })),
  { id: 'main-color', name: 'unit (defaults)', value: { hex: palette.unit, model: 'hex' } },
];
// #endregion
const [TEXT, DISPLAY] = ['Atkinson Hyperlegible Next', 'Grandstander'];

// #region answer: the workbook's activity style, one for every kind of exercise
// The Markdown says what each activity asks (:::exercise, [[answers]], - A -> B, - [x]);
// this style says how a Spanish workbook prints it: the number in a disc of the unit
// colour, the instruction in bold, blanks on a line, V/F boxes at the line's end, dots to
// join, the bank in a tinted box, squared paper for writing and the activity icons.
const icon = (id, alt) => ({ resourceId: `icon-${id}`, alt, size: 1.05 });
const actividad = {
  id: 'actividad',
  number: { shape: 'disc', background: col('unit'), color: col('paper'),
    fontFamily: DISPLAY, fontSize: em(1.05), fontWeight: 800 },
  instruction: { bold: true, color: col('ink') },
  options: { marker: 'circle' },
  blank: { look: 'line', color: col('ink'), weight: pt(0.75), extra: em(2) },
  trueFalse: { look: 'boxes' }, // V F in Spanish, T F in English: the language's own words
  match: { look: 'dots', gap: em(7), dotSize: em(0.42), color: col('unit') },
  bank: { box: 'banco', order: 'alpha', separator: ' ' },

O script.js montado funciona como está: cole-o como script de módulo em qualquer página ou abra a receita no CodePen. Pasta da receita no GitHub ↗ (abre em uma nova aba)

Variações

#Imprima as respostas para o professor

O mesmo Markdown gera o livro do professor: todas as lacunas preenchidas, os quadradinhos verdadeiros marcados e as palavras certas circuladas em magenta.

   exerciseStyles: [actividad, cuadricula],
+  exercises: { edition: 'teacher' },

#Numere as atividades em quadrados

Um quadrado arredondado da cor da unidade lembra o padrão gráfico de outra editora.

-  number: { shape: 'disc', background: col('unit'), color: col('paper'),
+  number: { shape: 'rounded', background: col('unit'), color: col('paper'),

Erros comuns

  • As palavras para circular num texto corrido guardam um pouco de espaço de cada lado para o círculo, então uma palavra logo antes de uma vírgula ou de um ponto fica um pouco afastada dele.

Créditos

Texto
Texto original, CC BY 4.0
Imagens
  • Animals at a pond: a frog, a kingfisher, a trout, a turtle and a rabbit. · Generated With Diffusion Models · original
  • Five stages of a frog's life, in a jumbled order. · Generated With Diffusion Models · original
  • A girl with a magnifying glass watching a sparrow and a lizard on a wall. · Generated With Diffusion Models · original
Fontes
Atkinson Hyperlegible Next (SIL OFL 1.1) · Grandstander (SIL OFL 1.1)

Editar este texto ↗ (abre em uma nova aba)Pasta da receita no GitHub ↗ (abre em uma nova aba)

Uma página de passatempos com as respostas invertidas

Nº 174PDF

Livros didáticos

A página de passatempos de uma revista infantil: palavras cruzadas, caça-palavras, adivinha e história para ordenar, em cartões com as respostas invertidas.

Nível 2 de 3: IntermediárioRevistas e fanzines2 págs.

Um caderno de exercícios árabe, da direita para a esquerda

Nº 173PDF

Livros didáticos

Um caderno árabe da direita para a esquerda: opções أ ب ج, colunas para ligar, banco de palavras, صح ou خطأ, caça-palavras e algarismos arábico-índicos.

Nível 2 de 3: IntermediárioCadernos de exercícios8 págs.

Contas armadas do jeito de cada país

Nº 170AlternativaPDFAo vivo

Livros didáticos

Uma folha de exercícios cujas contas são linhas - 864 ÷ 4 do Markdown, algarismo por algarismo em quadradinhos, com a divisão armada como em cada país.

Nível 3 de 3: AvançadoCadernos de exercícios4 págs.

SandboxPDF