Recepta número 168

Receptari · Capítol 12 · Llibres de text

Unitat d’un quadern d’activitats de primària

Una unitat de quadern de Ciències amb onze activitats :::exercise que imprimeix un sol estil: números en cercles, banc de paraules i punts per unir.

En aquesta pàgina
Sortida
Canvas · PDF
Nivell
Intermedi
Postext
Provada amb Postext 1.59.0
Requereix ≥ 1.59.0 · postext-pdf ≥ 1.59.0
Llicència
Actualitzada el 24 d’oct. del 2026
Codi MIT · Text CC BY 4.0

p. 1 de 4

Llegir aquesta recepta com a text →
  • Mostra en castellà: encara no hi ha edició en català
  • Format 210 × 297 mm
  • 1 columna
  • Atkinson Hyperlegible Next 12/17
  • Grandstander
  • 4 pàgines
  • Nivell
  • Postext 1.59.0
  • Compost en 18 ms
  • 182 línies de codi

En poques paraules

Un quadern d’activitats de 3r de primària sobre els animals vertebrats. Les preguntes i les seves respostes són escrites al text; un estil decideix com es veu cada activitat a la pàgina.

Què compondràs

La unitat 5 d’un quadern de Ciències de la Naturalesa de 3r de primària, en A4: Los animales vertebrados. L’obertura situa la unitat en una banda verda sobre una il·lustració d’una bassa; després venen onze activitats, cadascuna amb el número en un cercle verd i una icona de llapis, de bafarada o de parella. Un banc de paraules en un requadre tintat amb vora discontínua, frases amb V i F, animals per unir amb fletxes al seu grup, paraules per encerclar en una frase i en un text, fases de la granota per numerar, una sopa de lletres, animals per classificar, una pregunta oberta amb ratlles i una altra en quadrícula. L’edició anglesa imprimeix la mateixa unitat com la componen les seves escoles, amb T i F i join with a line. L’acompanyen tres il·lustracions generades amb un model de difusió.

Aquesta recepta respon a

  • Com componc una pàgina de quadern d'activitats: números en cercles, banc de paraules, vertader o fals, uneix amb fletxes?
  • Com poso icones d'activitat (escriu, parla, en parella) al costat del número d'un exercici?
  • Com faig una fitxa d'exercicis: línies per omplir, caixes de resposta, bancs de paraules, llistes de comprovació?

La resposta curta

script.js · línies 34–61al codi complet
// 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) } };

Ingredients

Tipografia
Atkinson Hyperlegible Next, Grandstander (SIL OFL 1.1)
Recursos
  • 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)

Elaboració

#1 · Escriu les activitats al Markdown i dona’ls estil una sola vegada

script.js · línies 34–61al codi complet
// 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 activitat és una tanca :::exercise. El que llegeix l’alumne i el que compta com a correcte són al text: [[pelo]] és un buit la resposta del qual és pelo, - [x] una afirmació vertadera, - Delfín -> Mamífero una parella, [[pelo | (plumas)]] una tria amb la paraula correcta entre parèntesis. L’estil només guarda l’aspecte, així que les onze activitats comparteixen actividad i un segon estil, cuadricula, que l’amplia amb extends per canviar les ratlles per quadrícula. El motor les numera, barreja amb una llavor la columna dreta de les parelles i les frases per ordenar, fa els buits tan amples com la resposta més llarga perquè cap no es delati i imprimeix V i F en castellà i T i F en anglès sense una paraula a la configuració.

#2 · Posa les icones d’activitat

script.js · línies 277–288al codi complet
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"/>'),
};

Una icona del camp exerciseStyles[].icons anomena una imatge del llibre, i :::exercise{icon="oral pareja"} posa les imatges després del número, en l’ordre escrit, i les llegeix en veu alta pel seu alt. Són signes plans dibuixats en codi sobre un cercle del color de la unitat, així que es mantenen nítids al PDF i canvien amb la paleta. El llapis acompanya les activitats d’escriure; les icones de parlar i de parella marquen l’última, que no té zona d’escriptura (area="none").

#3 · Obre la unitat amb una banda i una il·lustració

script.js · línies 65–81al codi complet
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ítol de nivell 1 de la unitat dibuixa la banda, la píndola del número i el títol a partir dels seus atributs (unidad="Unidad 5" pic="charca"), i la il·lustració sota la banda a 176 × 75 mm. Les imatges de dins de les activitats fan servir un tipus de recurs sense peu ni número (dibujo), com les imprimeix un quadern. El text es llegeix amb facilitat a aquesta edat: Atkinson Hyperlegible Next de 12 pt sobre 17 pt, sense partició de mots i en bandera.

La recepta 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: ' ' },

L'script.js compost funciona tal com és: enganxa'l com a script de mòdul en qualsevol pàgina o obre la recepta a CodePen. Carpeta de la recepta a GitHub ↗ (s'obre en una pestanya nova)

Variants

#Imprimeix les solucions per al mestre

El mateix Markdown dona la còpia del mestre: els buits plens, les caselles vertaderes marcades i les paraules correctes encerclades en magenta.

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

#Numera les activitats en quadrats

Un quadrat arrodonit del color de la unitat es llegeix com l’estil d’una altra editorial.

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

Errors freqüents

  • Les paraules que s’encerclen en un text seguit guarden una mica d’aire a cada costat per al cercle, així que una paraula just abans d’una coma o d’un punt en queda una mica separada.

Crèdits

Text
Text original, CC BY 4.0
Imatges
  • 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
Fonts
Atkinson Hyperlegible Next (SIL OFL 1.1) · Grandstander (SIL OFL 1.1)

Editar aquest text ↗ (s'obre en una pestanya nova)Carpeta de la recepta a GitHub ↗ (s'obre en una pestanya nova)

Una pàgina de passatemps amb les solucions del revés

Núm. 174PDF

Llibres de text

La pàgina de passatemps d’una revista infantil: mots encreuats, sopa de lletres, endevinalla i història per ordenar, en targetes amb les solucions del revés.

Nivell 2 de 3: IntermediRevistes i fanzins2 pàgs.

Un quadern d’exercicis àrab, de dreta a esquerra

Núm. 173PDF

Llibres de text

Un quadern àrab de primària de dreta a esquerra: opcions أ ب ج, columnes per unir, paraules en un requadre, صح o خطأ i xifres arabicoíndiques.

Nivell 2 de 3: IntermediQuaderns i exercicis8 pàgs.

Comptes en columna com els escriu cada país

Núm. 170AlternativaPDFEn directe

Llibres de text

Una fitxa de càlcul amb els comptes escrits com a línies - 864 : 4 del Markdown, xifra a xifra en caselles, i la divisió com la fan les escoles de cada país.

Nivell 3 de 3: AvançatQuaderns i exercicis4 pàgs.

SandboxPDF