انتقل إلى المحتوى الرئيسي
الوصفة رقم 168

دليل الوصفات · الفصل 12 · الكتب المدرسية

وحدة من كراسة أنشطة للمرحلة الابتدائية

وحدة علوم من أربع صفحات في كراسة أنشطة، أنشطتها الأحد عشر كتل :::exercise في Markdown يطبعها نمط واحد: أرقام في دوائر، وبنك كلمات، ونقاط للتوصيل.

في هذه الصفحة
المُخرَج
Canvas · PDF
المستوى
متوسط
Postext
اختُبرت مع Postext 1.59.0
تتطلب ≥ 1.59.0 · postext-pdf ≥ 1.59.0
الترخيص
حُدّثت في 24 أكتوبر 2026
الشيفرة MIT · النص CC BY 4.0
  • نموذج باللغة الإسبانية: لا توجد طبعة عربية بعد
  • مقاس القص 210 × 297 مم
  • عمود واحد
  • Atkinson Hyperlegible Next 12/17
  • Grandstander
  • 4 صفحات
  • المستوى
  • Postext 1.59.0
  • أُخرجت في 18 ms
  • أسطر الشيفرة: 182

باختصار

كراسة أنشطة لأطفال في الثامنة عن الحيوانات الفقارية. الأسئلة وإجاباتها مكتوبة في النص، ونمط واحد يقرر شكل كل نشاط على الصفحة.

ما الذي ستنضده

الوحدة 5 من كراسة أنشطة في العلوم للصف الثالث الابتدائي، بقياس A4: Animals with backbones، أي الحيوانات الفقارية. تضع الافتتاحية الوحدة في شريط أخضر فوق لوحة لبركة، ثم تأتي أحد عشر نشاطًا، لكل منها رقمه في دائرة خضراء وأيقونة قلم رصاص أو فقاعة كلام أو تلميذين معًا. فيها بنك كلمات في إطار ملوّن بحدّ متقطع، وجمل يُعلَّم عليها بـT أو F، وحيوانات تُوصَل بخط إلى مجموعاتها، وكلمات توضع حولها دائرة في جملة ثم في نص قصير، ومراحل من حياة الضفدع تُرقَّم، وشبكة للبحث عن الكلمات، وحيوانات تُصنَّف، وسؤال مفتوح على أسطر وآخر على ورق مربعات. وتطبع طبعة إسبانية الوحدة نفسها كما تنضدها مدارس إسبانيا، بـV وF وبعبارة une con flechas. وترافقها ثلاث لوحات مولّدة بنموذج انتشار.

تجيب هذه الوصفة عن

  • كيف أصفّ صفحة كراسة أنشطة: أرقام في دوائر وبنك كلمات وصواب وخطأ وصِل؟
  • كيف أضع أيقونات النشاط (اكتب، تحدّث، مع زميل) بجانب رقم التمرين؟
  • كيف أبني صفحة ورقة عمل: أسطر للتعبئة، وإطارات إجابات، وبنوك كلمات، وقوائم تحقق؟

الجواب المختصر

script.js · الأسطر 34–61في الشيفرة الكاملة
// 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) } };

المكونات

الخطوط
Atkinson Hyperlegible Next, Grandstander (SIL OFL 1.1)
الأصول
  • 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, أصلي)
  • Five stages of a frog's life, in a jumbled order. (Generated With Diffusion Models, أصلي)
  • A girl with a magnifying glass watching a sparrow and a lizard on a wall. (Generated With Diffusion Models, أصلي)

طريقة التحضير

#1 · اكتب الأنشطة في Markdown وأعطها نمطها مرة واحدة

script.js · الأسطر 34–61في الشيفرة الكاملة
// 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) } };

كل نشاط كتلة :::exercise. ما يقرؤه التلميذ وما يُعدّ صحيحًا مكتوب في النص: [[hair]] فراغ إجابته hair، و- [x] عبارة صحيحة، و- Dolphin -> Mammal زوج للتوصيل، و[[pelo | (plumas)]] اختيار كلمته الصحيحة بين قوسين. ولا يحمل النمط إلا الشكل، فتشترك الأنشطة الأحد عشر في actividad، ويرثه نمط ثانٍ هو cuadricula بـextends ليضع ورق المربعات مكان الأسطر. يرقّم المحرّك الأنشطة، ويخلط ببذرة العمودَ الأيمن من الأزواج وعناصرَ الترتيب، ويجعل كل فراغ بعرض أطول إجابة حتى لا يكشف فراغٌ إجابته، ويطبع T وF بالإنجليزية وV وF بالإسبانية بلا كلمة واحدة في الإعدادات.

#2 · أعطِ الأنشطة أيقوناتها

script.js · الأسطر 277–288في الشيفرة الكاملة
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"/>'),
};

تسمّي الأيقونة في exerciseStyles[].icons صورة من صور الكتاب، ويضع :::exercise{icon="oral pareja"} الصور بعد الرقم بالترتيب الذي كُتبت به، ويقرؤها قارئ الشاشة بنص alt. وهي علامات مسطحة مرسومة بالشيفرة على دائرة بلون الوحدة، فتبقى حادة في PDF وتتغير مع لوحة الألوان. وتطبع كراسة الأنشطة أيضًا قلمًا بجانب أنشطة الكتابة؛ أما أيقونتا الكلام والعمل في ثنائي فتعلّمان النشاط الأخير، الذي لا مساحة للكتابة فيه (area="none").

#3 · افتتح الوحدة بشريط ولوحة

script.js · الأسطر 65–81في الشيفرة الكاملة
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) }) },
] } };

يرسم عنوان المستوى الأول للوحدة الشريطَ وخانة الرقم والعنوانَ من سماته (unidad="Unit 5" pic="charca")، واللوحةَ تحت الشريط بقياس 176 × 75 مم. وتستعمل الصور داخل الأنشطة نوع مورد بلا تعليق ولا رقم (dibujo)، كما تطبعها كراسات الأنشطة. والنص سهل القراءة على الصغار: Atkinson Hyperlegible Next بحجم 12 pt على 17 pt، بلا تقسيم للكلمات، وأسطره غير مضبوطة الطرفين.

الوصفة كاملة

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

يعمل ملف script.js المجمّع كما هو: الصقه في سكربت الوحدة (module) لأي صفحة، أو افتح الوصفة على CodePen. مجلد الوصفة على GitHub ↗ (يفتح في تبويب جديد)

تنويعات

#اطبع الإجابات للمعلم

يُخرج Markdown نفسه نسخة المعلم: الفراغات كلها مملوءة، ومربعات العبارات الصحيحة معلَّمة، والكلمات الصحيحة محاطة بدوائر بلون الماجنتا.

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

#رقّم الأنشطة في مربعات

مربع مستدير الزوايا بلون الوحدة يبدو أسلوبَ ناشر آخر.

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

أخطاء شائعة

  • تحتفظ الكلمات التي توضع حولها دائرة في نص متصل بقليل من الفراغ على كل جانب من أجل الدائرة، فإذا جاءت الكلمة قبل فاصلة أو نقطة مباشرة ابتعدت عنها قليلًا.

الحقوق

الوصفة
Ignacio Ferro
النص
نص أصلي, CC BY 4.0
الصور
  • Animals at a pond: a frog, a kingfisher, a trout, a turtle and a rabbit. · Generated With Diffusion Models · أصلي
  • Five stages of a frog's life, in a jumbled order. · Generated With Diffusion Models · أصلي
  • A girl with a magnifying glass watching a sparrow and a lizard on a wall. · Generated With Diffusion Models · أصلي
الخطوط
Atkinson Hyperlegible Next (SIL OFL 1.1) · Grandstander (SIL OFL 1.1)
الشيفرة
MIT، مثل Postext
SandboxPDF