Receta número 168

Recetario · Capítulo 12 · Libros de texto

Unidad de un cuaderno de actividades de Primaria

Una unidad de cuaderno de Ciencias con once actividades :::exercise que imprime un solo estilo: números en círculos, banco y puntos para unir.

En esta página
Salida
Canvas · PDF
Postext
Probada con Postext 1.59.0
Requiere ≥ 1.59.0 · postext-pdf ≥ 1.59.0
Licencia
Actualizada el 24 oct 2026
Código MIT · Texto CC BY 4.0

p. 1 de 4

Leer esta receta como texto →
  • Formato 210 × 297 mm
  • 1 columna
  • Atkinson Hyperlegible Next 12/17
  • Grandstander
  • 4 páginas
  • Nivel
  • Postext 1.59.0
  • Compuesto en 18 ms
  • 182 líneas de código

En pocas palabras

Un cuaderno de actividades de 3.º de Primaria sobre los animales vertebrados. Las preguntas y sus respuestas están escritas en el texto; un estilo decide cómo se ve cada actividad en la página.

Lo que vas a componer

La unidad 5 de un cuaderno de Ciencias de la Naturaleza de 3.º de Primaria, en A4: Los animales vertebrados. La apertura pone la unidad en una banda verde sobre una ilustración de una charca; después vienen once actividades, cada una con su número en un círculo verde y un icono de lápiz, de bocadillo o de pareja. Un banco de palabras en un recuadro tintado de borde discontinuo, frases con V y F, animales que unir con flechas a su grupo, palabras que rodear en una frase y en un texto, fases de la rana que numerar, una sopa de letras, animales que clasificar, una pregunta abierta con renglones y otra en cuadrícula. La edición inglesa imprime la misma unidad como la componen sus escuelas, con T y F y join with a line. Tres ilustraciones generadas con un modelo de difusión la acompañan.

Esta receta responde a

  • ¿Cómo compongo una página de cuaderno de actividades: números en círculos, banco de palabras, verdadero o falso, une con flechas?
  • ¿Cómo pongo iconos de actividad (escribe, habla, en pareja) junto al número de un ejercicio?
  • ¿Cómo hago una ficha de ejercicios: líneas para rellenar, cajas de respuesta, bancos de palabras, listas de comprobación?

La respuesta corta

script.js · líneas 34–61en el 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

Tipografía
Atkinson Hyperlegible Next, Grandstander (SIL OFL 1.1)
Recursos
  • charca-1088.jpg
  • ciclo-1088.jpg
  • nina-720.jpg
  • Animales de una charca: una rana, un martín pescador, una trucha, una tortuga y un conejo. (Generated With Diffusion Models, original)
  • Cinco fases de la vida de una rana, desordenadas. (Generated With Diffusion Models, original)
  • Una niña con una lupa observa un gorrión y una lagartija sobre un muro. (Generated With Diffusion Models, original)

Elaboración

#1 · Escribe las actividades en el Markdown y dales estilo una vez

script.js · líneas 34–61en el 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 actividad es una valla :::exercise. Lo que lee el alumno y lo que cuenta como correcto están en el texto: [[pelo]] es un hueco cuya respuesta es pelo, - [x] una afirmación verdadera, - Delfín -> Mamífero una pareja, [[pelo | (plumas)]] una elección cuya palabra correcta va entre paréntesis. El estilo solo guarda el aspecto, así que las once actividades comparten actividad y un segundo estilo, cuadricula, que la amplía con extends para cambiar los renglones por cuadrícula. El motor las numera, baraja con una semilla la columna derecha de las parejas y las frases que ordenar, hace los huecos tan anchos como la respuesta más larga para que ninguno se delate e imprime V y F en español y T y F en inglés sin una palabra en la configuración.

#2 · Pon los iconos de actividad

script.js · líneas 277–288en el 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"/>'),
};

Un icono de exerciseStyles[].icons nombra una imagen del libro, y :::exercise{icon="oral pareja"} pone las imágenes tras el número, en el orden escrito, y las lee en voz alta por su alt. Son signos planos dibujados en código sobre un círculo del color de la unidad, así que siguen nítidos en el PDF y cambian con la paleta. El lápiz acompaña a las actividades de escribir; los iconos de hablar y de pareja marcan la última, que no tiene zona de escritura (area="none").

#3 · Abre la unidad con una banda y una ilustración

script.js · líneas 65–81en el 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) }) },
] } };

El título de nivel 1 de la unidad dibuja la banda, la pastilla del número y el título a partir de sus atributos (unidad="Unidad 5" pic="charca"), y la ilustración bajo la banda a 176 × 75 mm. Las imágenes de dentro de las actividades usan un tipo de recurso sin pie ni número (dibujo), como las imprime un cuaderno. El texto se lee con facilidad a esa edad: Atkinson Hyperlegible Next de 12 pt sobre 17 pt, sin separación silábica y en bandera.

La receta 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 = 'es'; // @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: ' ' },

El script.js compuesto funciona tal cual: pégalo como script de módulo en cualquier página o abre la receta en CodePen. Carpeta de la receta en GitHub ↗ (se abre en una nueva pestaña)

Variantes

#Imprime las soluciones para el profesor

El mismo Markdown da la copia del profesor: los huecos rellenos, las casillas verdaderas marcadas y las palabras correctas rodeadas en magenta.

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

#Numera las actividades en cuadrados

Un cuadrado redondeado del color de la unidad se lee como el estilo de otra editorial.

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

Errores frecuentes

  • Las palabras que se rodean en un texto corrido guardan un poco de aire a cada lado para el círculo, así que una palabra justo antes de una coma o un punto queda algo separada de él.

Créditos

Texto
Texto original, CC BY 4.0
Imágenes
  • Animales de una charca: una rana, un martín pescador, una trucha, una tortuga y un conejo. · Generated With Diffusion Models · original
  • Cinco fases de la vida de una rana, desordenadas. · Generated With Diffusion Models · original
  • Una niña con una lupa observa un gorrión y una lagartija sobre un muro. · Generated With Diffusion Models · original
Fuentes
Atkinson Hyperlegible Next (SIL OFL 1.1) · Grandstander (SIL OFL 1.1)

Editar este texto ↗ (se abre en una nueva pestaña)Carpeta de la receta en GitHub ↗ (se abre en una nueva pestaña)

Una página de pasatiempos con las soluciones del revés

N.º 174PDF

Libros de texto

La página de pasatiempos de una revista infantil: crucigrama, sopa de letras, adivinanza, historia que ordenar y más, en tarjetas con las soluciones del revés.

Nivel 2 de 3: IntermedioRevistas y fanzines2 págs.

Un cuaderno de ejercicios árabe, de derecha a izquierda

N.º 173PDF

Libros de texto

Un cuaderno árabe de primaria de derecha a izquierda: opciones أ ب ج, columnas para unir, palabras en recuadro, صح o خطأ y cifras arábigo-índicas.

Nivel 2 de 3: IntermedioCuadernos y ejercicios8 págs.

Cuentas en columna como las escribe cada país

N.º 170AlternativaPDFEn vivo

Libros de texto

Una ficha de cálculo cuyas cuentas son líneas - 864 : 4 del Markdown, cifra a cifra en casillas, con la división como la hacen las escuelas de cada país.

Nivel 3 de 3: AvanzadoCuadernos y ejercicios4 págs.

SandboxPDF