Rezept Nummer 168

Rezepte · Kapitel 12 · Schulbücher

Eine Einheit aus einem Arbeitsheft für die Grundschule

Eine vierseitige Sachunterricht-Einheit mit elf :::exercise-Aufgaben, gesetzt in einem einzigen Stil: Nummernkreise, Wörterkasten, Punkte zum Verbinden.

Auf dieser Seite
Ausgabe
Canvas · PDF
Stufe
Mittel
Postext
Getestet mit Postext 1.59.0
Erfordert ≥ 1.59.0 · postext-pdf ≥ 1.59.0
Lizenz
Aktualisiert am 24. Okt. 2026
Code MIT · Text CC BY 4.0

S. 1 von 4

Dieses Rezept als Text lesen →
  • Englisches Beispiel: noch keine deutsche Ausgabe
  • Endformat 210 × 297 mm
  • 1 Spalte
  • Atkinson Hyperlegible Next 12/17
  • Grandstander
  • 4 Seiten
  • Stufe
  • Postext 1.59.0
  • In 16 ms gesetzt
  • 182 Zeilen Code

Kurz gesagt

Ein Arbeitsheft für Achtjährige über Wirbeltiere. Die Fragen und ihre Antworten stehen im Text; ein Stil legt fest, wie jede Aufgabe auf der Seite aussieht.

Was Sie setzen

Einheit 5 eines Arbeitshefts für den Sachunterricht der 3. Klasse, in A4: Animals with backbones, die Wirbeltiere. Die Auftaktseite setzt die Einheit in ein grünes Band über einem Gemälde eines Teichs; danach folgen elf Aufgaben, jede mit ihrer Nummer in einem grünen Kreis und einem Symbol für Schreiben, Sprechen oder Partnerarbeit. Ein Wörterkasten in einem getönten, gestrichelten Rahmen, Sätze zum Ankreuzen mit T oder F, Tiere, die man mit einer Linie ihrer Gruppe zuordnet, Wörter zum Einkreisen in einem Satz und in einem kurzen Text, die Stadien des Froschs zum Nummerieren, ein Suchsel, Tiere zum Sortieren, eine offene Frage auf Linien und eine weitere auf Karopapier. Eine spanische Ausgabe druckt dieselbe Einheit so, wie die Schulen dort sie setzen, mit V und F und une con flechas. Drei Gemälde, mit einem Diffusionsmodell erzeugt, illustrieren sie.

Dieses Rezept beantwortet

  • Wie setze ich eine Arbeitsheftseite: Nummern im Kreis, Wortspeicher, richtig oder falsch, verbinde?
  • Wie setze ich Symbole (schreiben, sprechen, Partnerarbeit) neben die Nummer einer Übung?
  • Wie baue ich eine Arbeitsblattseite: Schreiblinien, Antwortkästen, Wortspeicher, Checklisten?

Die kurze Antwort

script.js · Zeilen 34–61im vollständigen Code
// 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) } };

Zutaten

Schrift
Atkinson Hyperlegible Next, Grandstander (SIL OFL 1.1)
Dateien
  • 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, eigener Text)
  • Five stages of a frog's life, in a jumbled order. (Generated With Diffusion Models, eigener Text)
  • A girl with a magnifying glass watching a sparrow and a lizard on a wall. (Generated With Diffusion Models, eigener Text)

Zubereitung

#1 · Die Aufgaben im Markdown schreiben und einmal gestalten

script.js · Zeilen 34–61im vollständigen Code
// 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) } };

Jede Aufgabe ist ein Block :::exercise. Was das Kind liest und was als richtig gilt, steht im Text: [[hair]] ist eine Lücke mit der Antwort hair, - [x] eine wahre Aussage, - Dolphin -> Mammal ein Paar, [[pelo | (plumas)]] eine Auswahl, deren richtiges Wort in Klammern steht. Der Stil enthält nur das Aussehen: Die elf Aufgaben teilen sich actividad, und ein zweiter Stil, cuadricula, erweitert ihn mit extends und tauscht die Linien gegen Karopapier. Die Engine nummeriert die Aufgaben, mischt die rechte Spalte der Paare und die zu ordnenden Einträge mit einem Startwert, macht jede Lücke so breit wie die längste Antwort, damit keine ihre Lösung verrät, und druckt T und F auf Englisch, V und F auf Spanisch, ohne ein Wort in der Konfiguration.

#2 · Den Aufgaben ihre Symbole geben

script.js · Zeilen 276–287im vollständigen Code
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"/>'),
};

Ein Symbol in exerciseStyles[].icons verweist auf ein Bild des Buchs, und :::exercise{icon="oral pareja"} setzt die Bilder in der geschriebenen Reihenfolge hinter die Nummer; vorgelesen werden sie über ihren alt-Text. Es sind flache Zeichen, im Code auf einen Kreis in der Farbe der Einheit gezeichnet, deshalb bleiben sie im PDF scharf und ändern sich mit der Palette. Ein Arbeitsheft druckt außerdem einen Bleistift neben die Aufgaben zum Schreiben; die Symbole für Sprechen und Partnerarbeit kennzeichnen die letzte Aufgabe, die keinen Schreibbereich hat (area="none").

#3 · Die Einheit mit einem Band und einem Gemälde eröffnen

script.js · Zeilen 65–81im vollständigen Code
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) }) },
] } };

Die Überschrift der Ebene 1 zeichnet aus ihren Attributen (unidad="Unit 5" pic="charca") das Band, das Feld mit der Nummer und den Titel, unter dem Band das Gemälde in 176 × 75 mm. Die Bilder in den Aufgaben verwenden einen Ressourcentyp ohne Bildunterschrift und ohne Nummer (dibujo), wie es Arbeitshefte drucken. Der Text liest sich für Kinder leicht: Atkinson Hyperlegible Next in 12 pt auf 17 pt, ohne Silbentrennung, im Flattersatz.

Das ganze Rezept

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

Das zusammengesetzte script.js läuft unverändert: Fügen Sie es in das Modulskript einer beliebigen Seite ein, oder öffnen Sie das Rezept auf CodePen. Ordner des Rezepts auf GitHub ↗ (öffnet sich in einem neuen Tab)

Varianten

#Die Lösungen für die Lehrkraft drucken

Aus demselben Markdown entsteht das Lehrerheft: alle Lücken ausgefüllt, die wahren Kästchen angekreuzt und die richtigen Wörter magentafarben eingekreist.

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

#Die Aufgaben in Quadraten nummerieren

Ein abgerundetes Quadrat in der Farbe der Einheit wirkt wie der Hausstil eines anderen Verlags.

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

Häufige Fehler

  • Wörter zum Einkreisen in einem Fließtext behalten auf jeder Seite etwas Raum für den Kreis, deshalb steht ein Wort direkt vor einem Komma oder Punkt ein wenig davon ab.

Nachweise

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

Diesen Text bearbeiten ↗ (öffnet sich in einem neuen Tab)Ordner des Rezepts auf GitHub ↗ (öffnet sich in einem neuen Tab)

Eine Rätselseite mit Lösungen auf dem Kopf

Nº 174PDF

Schulbücher

Die Rätselseite eines Kindermagazins: Kreuzworträtsel, Suchsel, Rätselfrage, eine Geschichte zum Ordnen und mehr auf Karten, die Lösungen auf dem Kopf.

Stufe 2 von 3: MittelMagazine und Zines2 S.

Ein arabisches Arbeitsheft, von rechts nach links

Nº 173PDF

Schulbücher

Ein arabisches Grundschulheft von rechts nach links: Auswahl mit أ ب ج, Zuordnungsspalten, Wortkasten, صح oder خطأ, Buchstabensalat, ostarabische Ziffern.

Stufe 2 von 3: MittelArbeitshefte und Übungen8 S.

Schriftliches Rechnen, wie jedes Land es schreibt

Nº 170BehelfslösungPDFLive

Schulbücher

Ein Rechenblatt, dessen Aufgaben Zeilen wie - 864 ÷ 4 im Markdown sind, Ziffer für Ziffer in Kästchen gesetzt, die schriftliche Division nach Art jedes Landes.

Stufe 3 von 3: FortgeschrittenArbeitshefte und Übungen4 S.

SandboxPDF