পাঠ্যবই কীভাবে তৈরি

বিষয়বস্তু কোথায় থাকে#

সব পাঠ src/content ফোল্ডারে। ফোল্ডারের গঠনই সূচিপত্র:

src/content/
  math-8/                     ← একটি বই (শ্রেণি + বিষয়)
    book.yaml                 ← বইয়ের নাম, রং, প্রতীক ও অধ্যায়ের তালিকা
    pythagoras/               ← প্রতিটি অধ্যায়ের জন্য একটি ফোল্ডার (slug আসে book.yaml থেকে)
      01-the-theorem.svx      ← একটি পাঠ: NN-slug.svx, NN অনুযায়ী ক্রম
      SquaresExplorer.svelte  ← ওই পাঠের ইন্টারেক্টিভ চিত্র পাশেই থাকে
      figure.png              ← ছবিও পাশেই রাখা যায়
      questions.yaml          ← অধ্যায়ের প্রশ্নব্যাংক (অনুশীলনী)

অধ্যায়গুলো book.yaml-এ ঘোষণা করা থাকে, তাই পাঠ লেখার আগেই পুরো সূচিপত্র দেখা যায়; ফাঁকা অধ্যায়গুলো দেখায় “শীঘ্রই আসছে”। পাঠগুলো Markdown-এ লেখা, মাঝে মাঝে Svelte উপাদান (.svx ফরম্যাট, mdsvex দিয়ে)। সাইট তৈরির সময়েই সব গণিত ও কোড প্রস্তুত হয়ে যায়, আর প্রতিটি পাতা শুধু নিজের পাঠটুকুই ডাউনলোড করে।

title: গণিত
en: Mathematics
class: 8
glyph: গ            # বইয়ের প্রতীক
hue: 255            # বইয়ের রং (০ থেকে ৩৬০, OKLCH hue)
description: >
  অষ্টম শ্রেণির গণিত …
chapters:
  - slug: pythagoras
    title: পিথাগোরাসের উপপাদ্য
    en: Pythagorean theorem
    summary: সমকোণী ত্রিভুজের তিন বাহুর সম্পর্ক …
    outcomes:                     # "এই অধ্যায় শেষে তুমি:"
      - অতিভুজ চিনতে পারবে।

নতুন পাঠ#

টার্মিনালে একটি কমান্ডেই নতুন পাঠের ফাইল তৈরি হয় (ক্রমিক নম্বর নিজে থেকে বসে):

pnpm new lesson math-8/pythagoras converse "বিপরীত উপপাদ্য"
pnpm new chapter math-8 circle "বৃত্ত"
pnpm content:check      # সব পাঠ, গণিত আর প্রশ্নব্যাংক যাচাই

প্রতিটি পাঠ শুরু হয় frontmatter দিয়ে:

---
title: পিথাগোরাসের উপপাদ্য          # আবশ্যক
en: The Pythagorean theorem         # ইংরেজি নাম, খোঁজায় কাজে লাগে
summary: সমকোণী ত্রিভুজের তিন বাহুর সম্পর্ক।
difficulty: 2                       # ১ সহজ · ২ মাঝারি · ৩ কঠিন
tags: [pythagoras, hypotenuse]      # খোঁজার জন্য বাড়তি শব্দ
pages: "১৪২-১৪৬"                    # পাঠ্যবইয়ের পৃষ্ঠা
minutes: 15                         # না দিলে নিজে থেকে হিসাব হয়
exampleStart: 4                     # উদাহরণের নম্বর ৪ থেকে শুরু (বইয়ের সঙ্গে মেলাতে)
draft: true                         # শুধু dev-এ দেখা যাবে
---

লেখা#

সাধারণ Markdown সবই চলে: মোটা, জোর দেওয়া, কোড, লিংক, তালিকা, টেবিল, উদ্ধৃতি। বাংলায় বাঁকা (italic) হরফ হয় না, তাই জোর দেওয়া লেখা রঙে ও ওজনে আলাদা দেখায়।

টেবিল ছোট পর্দায় চেপে না গিয়ে পাশে স্ক্রল হয়।

গণিত#

লাইনের ভেতরে গণিত এক ডলারের মাঝে: $a^2 + b^2 = c^2$। আলাদা লাইনে দুই ডলারের মাঝে:

সাইট তৈরির সময়েই KaTeX দিয়ে সব গণিত প্রস্তুত হয়, তাই পাতা খুলতে কোনো দেরি হয় না। দুটি সুবিধা আলাদা করে বলার মতো:

• সংখ্যা বাংলায়: LaTeX-এ সাধারণ 0 থেকে 9 লিখলেই পাঠ্যবইয়ের মতো ০ থেকে ৯ দেখায় (src/lib/site.js-এ mathDigits বদলে বন্ধ করা যায়)।
• গণিতের ভেতরে বাংলা: ${\text{দূরত্ব}} = {\text{বেগ}} \times {\text{সময়}}$। বাংলা শব্দ নিজে থেকেই \text{…}-এ মোড়ানো হয়, তাই যুক্তাক্ষর ও কার-চিহ্ন ভাঙে না। গণিতের পরে “-এর”, “-কে” জুড়লে লাইন ভাঙে না: $AB$-এর দৈর্ঘ্য।

কিছু শর্টকাট আগে থেকেই আছে:

কলআউট#

প্রতিটি ধরনের একটি ঐচ্ছিক title থাকে; label দিলে নাম বদলানো যায় (যেমন “দলগত কাজ”)।

<Definition title="সমকোণী ত্রিভুজ">

যে ত্রিভুজের একটি কোণ সমকোণ, তাকে সমকোণী ত্রিভুজ বলে।

</Definition>

<Experiment title="পাতায় পানির বাষ্প" materials={['টবের গাছ', 'পলিথিন ব্যাগ']}>
…
</Experiment>

ধরনগুলো: Definition সংজ্ঞা · Theorem উপপাদ্য · Formula সূত্র · Note জেনে রাখো · Tip কৌশল · Warning সাবধান · KeyIdea মনে রাখো · Activity কাজ · Experiment পরীক্ষণ · Exam পরীক্ষায় · Fact জানো কি? · Summary এক নজরে।

উদাহরণ, সমাধান ও প্রমাণ#

উদাহরণগুলো প্রতিটি পাঠে নিজে থেকে ক্রমিক নম্বর পায়। বইয়ের সঙ্গে মেলাতে n={5} দাও, অথবা frontmatter-এ exampleStart।

Hint (হিন্ট), Solution (সমাধান) আর Reveal চাপলে মসৃণভাবে খোলে ও বন্ধ হয়। বন্ধ থাকলেও লেখাটা পাতায় থাকে: ব্রাউজারে Ctrl F দিয়ে খুঁজলে নিজে থেকে খুলে যায়, আর ছাপলে সব খোলা অবস্থায় আসে। label দিয়ে বোতামের লেখা বদলানো যায়।

<Example title="অতিভুজ নির্ণয়">

সমকোণ সংলগ্ন বাহু $6$ ও $8$ সেমি হলে অতিভুজ কত?

<Hint>

$6$ ও $8$ কোন পরিচিত ত্রয়ীর গুণিতক?

</Hint>

<Solution>

$c = \sqrt{36 + 64} = 10$ সেমি।

</Solution>

</Example>

ধাপ, ট্যাব ও কলাম#

Steps ধাপে ধাপে কাজ দেখায়। reveal দিলে একবারে একটি ধাপ খোলে, “পরের ধাপটা নিজে ভেবে দেখো” ধরনের কাজের জন্য।

Tabs-এ ট্যাব বদলাতে চাপো, অথবা ট্যাবে ফোকাস করে ← → (আর Home/End)। বাক্সটি সবচেয়ে লম্বা ট্যাবের সমান উঁচু থাকে, তাই ট্যাব বদলালে নিচের লেখা সরে যায় না।

1. ১

   সমীকরণ সাজাও

   $2x + 3 = 11$

<Steps reveal>

<Step title="সমীকরণ সাজাও">

$2x + 3 = 11$

</Step>

</Steps>

<Tabs>

<Tab label="বীজগাণিতিক">
…
</Tab>

</Tabs>

পরিভাষা#

পারিভাষিক শব্দের সঙ্গে ইংরেজি নাম: অতিভুজ। শব্দটির ওপর মাউস রাখো, আঙুল দিয়ে চাপো, অথবা Tab দিয়ে এসে Enter চাপো; ছোট একটি বুদ্বুদে ইংরেজি নাম আসে, Esc চাপলে বা বাইরে চাপলে বন্ধ হয়। show দিলে বইয়ের মতো বন্ধনীতে দেখায়: সালোকসংশ্লেষণ (Photosynthesis)।

<Term en="Hypotenuse">অতিভুজ</Term>
<Term en="Photosynthesis" show>সালোকসংশ্লেষণ</Term>

ছবি#

ছবি পাঠের পাশে রেখে সরাসরি লিংক দাও; সাইট তৈরির সময় সেটি অপ্টিমাইজ হয়। Markdown ছবিতে চাপলে (বা Enter) পুরো পর্দায় বড় হয়; ছবিতে আবার চাপলে বা Esc চাপলে বন্ধ।

![একটি উদ্ভিদকোষ](./plant-cell.png)

<Figure src="./plant-cell.png" alt="উদ্ভিদকোষ" caption="উদ্ভিদকোষের গঠন" />

যে ছবি পরে আঁকা হবে#

যা কোডে আঁকা যায় (জ্যামিতি, লেখচিত্র, পরমাণুর মডেল, সারণি), তা উইজেট বা SVG হিসেবেই আঁকো। দৃশ্য, বাস্তব বস্তু বা পরিবেশের ছবি আঁকবে একটি ছবি-তৈরির এজেন্ট (নির্দেশনা ART.md-এ)। পাঠে শুধু ছবির id দাও আর অধ্যায়ের art.yaml-এ ছবিটির বিস্তারিত বর্ণনা লেখো। ছবি তৈরি না হওয়া পর্যন্ত একই মাপের একটি জায়গা-রাখা ঘর দেখায়; ছবির ফাইল art/-এ এলেই সেটি নিজে থেকে বসে যায়।

<Figure art="food-irradiation" caption="তেজস্ক্রিয় রশ্মি দিয়ে খাবার জীবাণুমুক্ত করা" n={4} />

- id: food-irradiation            # ফাইল: art/food-irradiation.webp
  size: 1536x1024                 # 1536x1024, 1024x1024, 1024x1536 বা 1536x864
  kind: scene                     # scene, object, diagram…
  alt: "…"                        # বাংলায় ছবির বর্ণনা (স্ক্রিন রিডারের জন্য)
  used: [03-uses-of-isotopes]
  reference: [sources/science-8/06-atomic-structure/figures/p59-fig2.jpg]
  brief: |                        # ইংরেজিতে, বিস্তারিত: কী, কোথায়, কেমন করে
    …
  must: [ … ]                     # যা ঠিক থাকতেই হবে
  avoid: [ … ]

ছবির ভেতরে কোনো লেখা, অক্ষর বা সংখ্যা চাইবে না (লেবেল থাকে ক্যাপশনে), আর বাস্তব কোনো মানুষের প্রতিকৃতিও না। আঁকার ধরন নিয়ে লেখার দরকার নেই, সেটি docs/art-style.md-এ একবারই ঠিক করা আছে। কোন ছবি বাকি, দেখতে pnpm art।

ইন্টারেক্টিভ চিত্র#

চিত্রগুলো তৈরি হয় $lib/viz-এর ছোট একটি কিট দিয়ে। ছোট চিত্র সরাসরি পাঠেই লেখা যায়; বড়গুলো পাঠের পাশে আলাদা .svelte ফাইলে। Figure দিয়ে মুড়লে প্লেট, নম্বর ও ক্যাপশন পাওয়া যায়; wide দিলে বড় পর্দায় লেখার কলামের বাইরে ছড়ায়।

স্থানাঙ্ক তল#

Plot অক্ষ ও ছক আঁকে; ভেতরে FunctionGraph, Point, Line, Segment, Vector, Polygon, Circle, Angle, Area, Label, Bars বসে। বিন্দু টেনে সরানো যায়, আর কোনো রেখার ওপর আটকে রাখা যায়:

<script>
	let px = $state(1.5);
	const f = (x) => (x * x) / 2 - 1;
</script>

<Figure caption="…">
	<Plot x={[-3.5, 3.5]} y={[-2, 3.5]}>
		<FunctionGraph fn={f} />
		<Line through={[px, f(px)]} slope={px} dashed color="orange" />
		<Point bind:x={px} y={f(px)} draggable constrain={(x) => [x, f(x)]} label="P" />
	</Plot>
</Figure>

রং হিসেবে দেওয়া যায় accent (বইয়ের রং), blue, orange, green, purple, yellow, teal, good, bad, muted, অথবা যেকোনো CSS রং। অক্ষ ডানে-নিচে রাখতে frame (লেখচিত্র ও আয়তলেখের জন্য)।

জ্যামিতি#

Controls-এর ভেতরে Slider (টেনে, ট্র্যাকে চেপে, অথবা ফোকাস করে তীর চিহ্ন দিয়ে), Toggle (চালু/বন্ধ সুইচ) আর Readout (চলমান মান) বসে। সবই কিবোর্ড আর স্পর্শে চলে, আর স্ক্রিন রিডার এককসহ মান পড়ে শোনায়।

লেখচিত্র ও পাইচিত্র#

<Plot x={[0, 6]} y={[0, 30]} frame equal={false} height={260}>
	<Bars data={[{ x: 1, y: 12, label: 'শনি' }, …]} values />
</Plot>

<Pie data={[{ label: 'ধান', value: 45 }, { label: 'গম', value: 20 }]} showDegrees />

সংখ্যারেখা ও ভেনচিত্র#

<NumberLine min={-4} max={4} points={[{ x: -1.5, label: 'a', draggable: true }]}
	intervals={[{ from: -1, to: 3, open: [false, true] }]} />

<Venn sets={['A', 'B']} shade="A∩B" ops={['A∪B', 'A∩B', 'A−B', "A'"]}
	elements={{ a: [1, 2], ab: [3, 4], b: [5], none: [6, 7] }} />

ধাপে ধাপে চালানো#

StepPlayer আগে থেকে হিসাব করা ধাপগুলো একে একে দেখায়: অঙ্কন (সম্পাদ্য), প্রমাণ বা কোনো প্রক্রিয়ার জন্য। ▶ চাপো, অথবা প্লেয়ারে ফোকাস করে ← → চাপো।

সিমুলেশন#

Simulation একটি canvas আর চালাও/থামাও/আবার শুরু বোতাম দেয়; setup ফাংশন প্রতি ফ্রেমে আঁকার ফাংশন ফেরত দেয়। বিজ্ঞানের কণা, তরঙ্গ, গতি, সবই এভাবে বানানো যায়। (ব্যাপনের পাঠে একটি পূর্ণ উদাহরণ আছে।)

চলমান গণিত#

উইজেটের ভেতরে বদলাতে থাকা মান দেখাতে Tex, যা ব্রাউজারেই গণিত তৈরি করে: $\sin 40^\circ \approx 0.643$। স্থির গণিতের জন্য সবসময় $…$ ব্যবহার করো, কারণ সেটি আগেই তৈরি হয়ে থাকে।

প্রশ্নব্যাংক#

প্রতিটি অধ্যায়ের প্রশ্ন একটি questions.yaml ফাইলে। প্রশ্নের ধরন ঘরগুলো দেখে নিজে থেকেই বোঝা যায়:

প্রতিটি প্রশ্নে id আবশ্যক। lesson দিলে প্রশ্নটি সেই পাঠের শেষে “নিজেকে যাচাই করো” অংশে আসে; সব প্রশ্ন অধ্যায়ের পাতায় “অনুশীলনী” হিসেবে আর অনুশীলন মোডে পাওয়া যায়। ঐচ্ছিক: difficulty (১ থেকে ৩), source (যেমন “ঢাকা বোর্ড ২০১৯”), hints, explanation, figure: ./ছবি.png।

- id: hyp-3-4
  lesson: the-theorem
  difficulty: 1
  prompt: সমকোণ সংলগ্ন বাহু $3$ ও $4$ সেমি হলে অতিভুজ কত?
  choices: ['$5$', '$6$', '$7$', '$\sqrt{7}$']   # একক উদ্ধৃতিতে ব্যাকস্ল্যাশ ঠিক থাকে
  answer: ক
  hints: [পিথাগোরাসের উপপাদ্য ব্যবহার করো।]
  explanation: $\sqrt{3^2 + 4^2} = 5$

- id: statements-right-triangle
  prompt: $\tri ABC$-এ $\ang A = 90\degree$। নিচের তথ্যগুলো লক্ষ করো:
  statements: ['$BC$ বৃহত্তম বাহু', '$AB^2 + AC^2 = BC^2$', '$\ang B + \ang C = 90\degree$']
  answer: ঘ

- id: missing-leg
  prompt: অতিভুজ $17$ সেমি, একটি বাহু $8$ সেমি। অপর বাহু কত?
  answer: 15
  unit: সেমি

- id: cq-field
  stem: একটি আয়তাকার বাগানের দৈর্ঘ্য $24$ মিটার ও প্রস্থ $10$ মিটার …
  parts:
    - prompt: পিথাগোরাসের উপপাদ্যটি বিবৃত করো।
      answer: …
    - prompt: পথটির দৈর্ঘ্য নির্ণয় করো।
      answer: …

পাঠের ভেতরে যেকোনো প্রশ্ন বসাতে: <Question id="hyp-3-4" />।

উত্তর যাচাই করলে সঙ্গে সঙ্গে সাড়া মেলে: সঠিক হলে টিক চিহ্ন আঁকা হয়, একটু ঝলমলে ফুলঝুরি আর উৎসাহের কথা; ভুল হলে বিকল্পটি আলতো করে দুলে ওঠে আর নরম একটি পরামর্শ আসে। প্রশ্নে hints থাকলে “হিন্টস দেখো” বোতাম আসে, একটার পর একটা হিন্ট খোলে। নিচে কয়েকটি আসল প্রশ্ন:

পড়ার সুবিধা#

সাইটের কাঠামো (মেনু, বোতাম, সেটিংস, অনুশীলনের পাতা) ইংরেজিতে; পাঠ্যবইয়ের সব লেখা, পাঠের উপাদান আর প্রশ্ন বাংলায়।

• ওপরের Aa বোতাম (Reading settings): থিম, লেখার আকার, ফন্ট, লাইনের দৈর্ঘ্য ও ফাঁক। অগ্রগতির ব্যাকআপ, ফিরিয়ে আনা আর মুছে ফেলাও সেখানে।
• চাঁদ/সূর্যের বোতাম: দিন আর রাতের থিম; নতুন থিম বোতাম থেকে গোল হয়ে ছড়িয়ে পড়ে।
• Ctrl K বা /: যেকোনো পাঠ, অধ্যায় বা অংশ খোঁজো (বাংলা বা ইংরেজিতে); ↑ ↓ দিয়ে বাছাই, Enter দিয়ে খোলো।
• পাঠের পাতায় F: দুই পাশের সূচি লুকিয়ে শুধু পাঠ।
• পাঠ শেষে “Mark as done” চাপলে ছোট্ট একটা উদযাপন হয় আর অগ্রগতি জমা থাকে; বই ও অধ্যায়ের পাতায় অগ্রগতির বৃত্ত ভরে ওঠে, প্রথম পাতায় “Continue reading” আর টানা পড়ার দিন দেখা যায়।
• কেউ কম নড়াচড়া চাইলে (ডিভাইসের reduce motion সেটিং) সব অ্যানিমেশন নিজে থেকেই বন্ধ থাকে।