باختصار
كراسة أنشطة لأطفال في الثامنة عن الحيوانات الفقارية. الأسئلة وإجاباتها مكتوبة في النص، ونمط واحد يقرر شكل كل نشاط على الصفحة.
ما الذي ستنضده
الوحدة 5 من كراسة أنشطة في العلوم للصف الثالث الابتدائي، بقياس A4: Animals with backbones، أي الحيوانات الفقارية. تضع الافتتاحية الوحدة في شريط أخضر فوق لوحة لبركة، ثم تأتي أحد عشر نشاطًا، لكل منها رقمه في دائرة خضراء وأيقونة قلم رصاص أو فقاعة كلام أو تلميذين معًا. فيها بنك كلمات في إطار ملوّن بحدّ متقطع، وجمل يُعلَّم عليها بـT أو F، وحيوانات تُوصَل بخط إلى مجموعاتها، وكلمات توضع حولها دائرة في جملة ثم في نص قصير، ومراحل من حياة الضفدع تُرقَّم، وشبكة للبحث عن الكلمات، وحيوانات تُصنَّف، وسؤال مفتوح على أسطر وآخر على ورق مربعات. وتطبع طبعة إسبانية الوحدة نفسها كما تنضدها مدارس إسبانيا، بـV وF وبعبارة une con flechas. وترافقها ثلاث لوحات مولّدة بنموذج انتشار.
تجيب هذه الوصفة عن
- كيف أصفّ صفحة كراسة أنشطة: أرقام في دوائر وبنك كلمات وصواب وخطأ وصِل؟
- كيف أضع أيقونات النشاط (اكتب، تحدّث، مع زميل) بجانب رقم التمرين؟
- كيف أبني صفحة ورقة عمل: أسطر للتعبئة، وإطارات إجابات، وبنوك كلمات، وقوائم تحقق؟
الجواب المختصر
// 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) } };
المكونات
- الميزات
- أنماط التمارينالفراغات وبنوك الكلماتالتوصيل والتصنيفالتمارينالاختيار والصواب والخطأتعليم الكلماتالترتيبالبحث عن الكلمات والكلمات المتقاطعةالأسئلة المفتوحة ومساحات الكتابةصفحات افتتاح مصمَّمةسمات العنوانإطارات التنبيهلوحة ألوان دلاليةهوامش متناظرةالترويسات بحسب دور الصفحةصفحات على اللوحة (Canvas)التصدير إلى PDFالأشكال والجداول بوصفها مواردأنواع موارد مخصّصة
- تستخدم أيضًا
- إطارات تنقسم أو تبقى كاملةالحلولأشكال في هذا الموضع بالضبطأنماط الفقراتالخطوط المضمَّنة في PDF
- الخطوط
- Atkinson Hyperlegible Next, Grandstander (SIL OFL 1.1)
- الأصول
charca-1088.jpgciclo-1088.jpgnina-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 وأعطها نمطها مرة واحدة
// 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 · أعطِ الأنشطة أيقوناتها
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 · افتتح الوحدة بشريط ولوحة
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، بلا تقسيم للكلمات، وأسطره غير مضبوطة الطرفين.
الوصفة كاملة
// ═══ 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
حرّر هذا الشرح ↗ (يفتح في تبويب جديد)مجلد الوصفة على GitHub ↗ (يفتح في تبويب جديد)


