diff --git a/content/math/directed-numbers-rates/_index.md b/content/math/directed-numbers-rates/_index.md new file mode 100644 index 0000000..1dedce3 --- /dev/null +++ b/content/math/directed-numbers-rates/_index.md @@ -0,0 +1,336 @@ ++++ +title = "Directed numbers, rates & ratios" +description = "Operate with negative numbers and solve ratio, rate, and proportion problems in context." +template = "chapter.html" +weight = 0 +[extra] +subject = "math" +chapter_id = "directed-numbers-rates" +strand = "Number & Algebra" ++++ + +
+

+ Numbers on a line can lie to the right of zero (positive) or to the + left (negative). Temperatures below freezing, bank overdrafts, and positions + below sea level are everyday examples of directed numbers. +

+ +

The number line

+

+ On a horizontal number line, moving right means the value increases; moving left means it + decreases. The distance from zero is the absolute value + \(|a|\). For example, \(|-5| = 5\) and \(|3| = 3\). +

+ +
+

Comparing

+

+ \(a > b\) means \(a\) lies to the right of \(b\). Any negative number is less than any + positive number. +

+
+ +

Adding and subtracting

+

+ Think in terms of movement on the line: +

+ +

+ Subtracting a negative is adding a positive: \(5 - (-3) = 5 + 3 = 8\). +

+ +

Multiplying and dividing

+
+ + + + + + + + + + + + + + + + + +
SignsResult
positive × positive, negative × negativepositive
positive × negative (either order)negative
+
+ +

Ratios

+

+ A ratio compares quantities of the same kind. The ratio \(2:3\) means “2 parts + to 3 parts” — five equal parts in total. To share \(40\) in the ratio \(2:3\), one part is + \(40 \div 5 = 8\), so the shares are \(16\) and \(24\). +

+ +
+

Sharing in ratio \(m:n\)

+

+ \[ \text{one part} = \frac{\text{total}}{m+n}, \quad + \text{first share} = \frac{m}{m+n}\times\text{total}, \quad + \text{second share} = \frac{n}{m+n}\times\text{total} \] +

+
+ +

Rates

+

+ A rate compares different units. Speed is distance per time: + \[ \text{speed} = \frac{\text{distance}}{\text{time}}. \] + A unit rate tells “how much per one” — for example \(60\) km in \(1.5\) h gives + \(60 \div 1.5 = 40\) km/h. +

+ +

Try it yourself

+

+ Use the number-line explorer to pick two directed numbers and see their sum on the line. Then try + the ratio sharer in the applications section below. +

+
+ +
+ +
+

History

+

+ For much of history, mathematicians treated only positive quantities as numbers. Negative + solutions to equations were often rejected as meaningless. Practical needs — debts, losses, + and temperatures below zero — still pushed people to work with “numbers less than nothing.” +

+ +
+ Illustrated timeline: ancient rejection of negative roots, Indian and Chinese rules for signed quantities, European skepticism, and the development of ratios from barter to modern rates +
+ A sketch of how directed numbers and ratios were understood — from Greek reluctance to use + negative roots, through Indian and Chinese models of fortune and debt, to modern rates such + as speed and exchange. +
+
+ +

+ In India around the 7th century, Brahmagupta gave rules for operating with + positive and negative quantities (fortunes and debts). Chinese scholars used counting rods with + two colours to represent opposite signs. European acceptance grew slowly; even in the 18th century + some writers called negative roots “false.” +

+

+ Ratios and proportions appear in Babylonian and Egyptian problems (sharing grain, scaling + recipes). The modern notation \(a:b\) and systematic treatment of unit rates + became standard as commerce and science needed comparable measures — speed, price per item, and + exchange rates between currencies. +

+ +

Derivation

+ +

Why \((-)\times(-) = (+)\)?

+

+ One useful pattern: multiplication should keep the rules of arithmetic consistent. For any + real \(a\), you want \(a \times 0 = 0\). Then + \[ a \times 0 = a \times (1 + (-1)) = a\cdot 1 + a\cdot(-1) = a + a\cdot(-1). \] + So \(a\cdot(-1) = -a\). Now apply that twice: + \[ (-a)\cdot(-1) = -((-a)) = a, \] + which shows that multiplying two negatives gives a positive. +

+ +

Sharing in the ratio \(m:n\)

+

+ Suppose a total \(T\) is split into two parts in the ratio \(m:n\). Think of \(m+n\) equal + parts. Each part has size + \[ \frac{T}{m+n}. \] + The first quantity gets \(m\) of those parts: + \[ \frac{m}{m+n}\,T, \] + and the second gets \(\frac{n}{m+n}\,T\). The parts add to \(T\), as required. +

+ +

Unit rate

+

+ If \(d\) units of quantity are produced in \(t\) units of time, the average rate is + \(d/t\). “Per one hour” means divide by \(t\) when \(t \neq 0\): + \[ \text{rate per unit time} = \frac{d}{t}. \] + Re-arranging gives \(d = \text{rate} \times t\), the formula used for uniform motion. +

+ +

Checkpoints

+

+ Pause and reason before continuing. Discuss with a partner or write your work in a notebook. +

+ +
+

Checkpoint

+

+ Without a calculator: is \((-4) + (-7)\) positive or negative? Where do you land if you start + at \(-4\) and move 7 units left? +

+
+ +
+

Checkpoint

+

+ Simplify \(6 - (-2)\). Explain using “subtracting a negative is adding a positive.” +

+
+ +
+

Checkpoint

+

+ Share \(72\) in the ratio \(5:4\). How many “parts” are there in total? +

+
+ +
+

Checkpoint

+

+ A car travels \(150\) km in \(2.5\) hours. What is the average speed? Which formula did you use? +

+
+ +
+

Checkpoint

+

+ Currency A costs \(1.2\) units of Currency B per unit of A. You exchange \(50\) units of A. + How many units of B do you receive? +

+
+ +

Applications

+ +

Temperature and altitude

+

+ A weather station records \(3\,^{\circ}\mathrm{C}\) at noon and the temperature drops + \(8\,^{\circ}\mathrm{C}\) by midnight. The change is \(-8\), so the midnight temperature is + \[ 3 + (-8) = -5\,^{\circ}\mathrm{C}. \] + Altitude above sea level is positive; below sea level (e.g. Dead Sea shore) is negative + elevation relative to sea level. +

+ +

Sharing and mixtures

+

+ Paint is mixed in the ratio blue : white \(= 2:5\). For \(21\) litres total, there are + \(7\) equal parts, each \(3\) litres, giving \(6\) L blue and \(15\) L white. +

+ +
+ +

Speed and exchange rates

+

+ Walking \(6\) km in \(1.5\) h gives speed \(\frac{6}{1.5} = 4\) km/h. An exchange rate of + \(1\) USD \(=\) \(7.8\) HKD means \(100\) USD converts to \(780\) HKD by multiplying by the + unit rate. +

+ +

Question bank

+

+ Work each question, then open the solution to check your reasoning. Difficulty increases + through the sets. +

+ +

Easy

+ +
+ Which is larger, \(-3\) or \(-7\)? +
+

Answer: \(-3\) is larger (lies to the right on the number line).

+

Explanation: For negative numbers, the one closer to zero is greater.

+
+
+ +
+ Evaluate \((-2) + 9\). +
+

Answer: \(7\).

+

Steps: Start at \(-2\), move 9 units right.

+
+
+ +
+ \((-4) \times 6 = \) ______ +
+

Answer: \(-24\).

+

Explanation: Different signs → negative product.

+
+
+ +

Intermediate

+ +
+ Evaluate \(5 - (-3) \times 2\). +
+

Answer: \(11\).

+

Steps: \((-3)\times 2 = -6\); then \(5 - (-6) = 5 + 6 = 11\).

+
+
+ +
+ Divide \(84\) in the ratio \(2:5\). +
+

Answer: \(24\) and \(60\).

+

Steps: \(7\) parts; each part \(84 \div 7 = 12\); shares \(24\) and \(60\).

+
+
+ +
+ A cyclist goes \(45\) km in \(3\) h. What is the average speed? +
+

Answer: \(15\) km/h.

+

Calculation: \(45 \div 3 = 15\).

+
+
+ +

Difficult

+ +
+ The temperature was \(-2\,^{\circ}\mathrm{C}\) and fell by \(9\,^{\circ}\mathrm{C}\). Find the new temperature. +
+

Answer: \(-11\,^{\circ}\mathrm{C}\).

+

Steps: \(-2 + (-9) = -11\).

+
+
+ +
+ Put in order from smallest to largest: \(-1\), \(0\), \(-\frac{1}{2}\), \(-2\). +
+

Answer: \(-2 < -1 < -\frac{1}{2} < 0\).

+

Explanation: On the number line, further left means smaller.

+
+
+ +

Hardcore

+ +
+ \(A:B = 3:4\) and \(B:C = 2:5\). Find \(A:B:C\) in simplest form. +
+

Answer: \(A:B:C = 3:4:10\) after matching \(B\) (multiply first ratio by 2: \(6:8\), second by 4: \(8:20\) → \(6:8:20 = 3:4:10\)).

+

Steps: Align \(B\) to LCM 8: \(A:B = 6:8\), \(B:C = 8:20\), so \(A:B:C = 6:8:20 = 3:4:10\).

+
+
+ +
+ Which situation matches a negative directed number? +
+

Answer: A bank balance of \(500\) in debt (owe \(500\)) — often modelled as \(-500\).

+

Explanation: Debt below zero balance is a standard directed-number model.

+
+
+ +

References

+ +
diff --git a/content/math/directed-numbers-rates/assets/directed-numbers-history.png b/content/math/directed-numbers-rates/assets/directed-numbers-history.png new file mode 100644 index 0000000..94ee61b Binary files /dev/null and b/content/math/directed-numbers-rates/assets/directed-numbers-history.png differ diff --git a/content/math/directed-numbers-rates/core.html b/content/math/directed-numbers-rates/core.html new file mode 100644 index 0000000..a942c92 --- /dev/null +++ b/content/math/directed-numbers-rates/core.html @@ -0,0 +1,88 @@ +
+

+ Numbers on a line can lie to the right of zero (positive) or to the + left (negative). Temperatures below freezing, bank overdrafts, and positions + below sea level are everyday examples of directed numbers. +

+ +

The number line

+

+ On a horizontal number line, moving right means the value increases; moving left means it + decreases. The distance from zero is the absolute value + \(|a|\). For example, \(|-5| = 5\) and \(|3| = 3\). +

+ +
+

Comparing

+

+ \(a > b\) means \(a\) lies to the right of \(b\). Any negative number is less than any + positive number. +

+
+ +

Adding and subtracting

+

+ Think in terms of movement on the line: +

+ +

+ Subtracting a negative is adding a positive: \(5 - (-3) = 5 + 3 = 8\). +

+ +

Multiplying and dividing

+
+ + + + + + + + + + + + + + + + + +
SignsResult
positive × positive, negative × negativepositive
positive × negative (either order)negative
+
+ +

Ratios

+

+ A ratio compares quantities of the same kind. The ratio \(2:3\) means “2 parts + to 3 parts” — five equal parts in total. To share \(40\) in the ratio \(2:3\), one part is + \(40 \div 5 = 8\), so the shares are \(16\) and \(24\). +

+ +
+

Sharing in ratio \(m:n\)

+

+ \[ \text{one part} = \frac{\text{total}}{m+n}, \quad + \text{first share} = \frac{m}{m+n}\times\text{total}, \quad + \text{second share} = \frac{n}{m+n}\times\text{total} \] +

+
+ +

Rates

+

+ A rate compares different units. Speed is distance per time: + \[ \text{speed} = \frac{\text{distance}}{\text{time}}. \] + A unit rate tells “how much per one” — for example \(60\) km in \(1.5\) h gives + \(60 \div 1.5 = 40\) km/h. +

+ +

Try it yourself

+

+ Use the number-line explorer to pick two directed numbers and see their sum on the line. Then try + the ratio sharer in the applications section below. +

+
+ +
diff --git a/content/math/directed-numbers-rates/supplement.html b/content/math/directed-numbers-rates/supplement.html new file mode 100644 index 0000000..63d9a5d --- /dev/null +++ b/content/math/directed-numbers-rates/supplement.html @@ -0,0 +1,236 @@ +
+

History

+

+ For much of history, mathematicians treated only positive quantities as numbers. Negative + solutions to equations were often rejected as meaningless. Practical needs — debts, losses, + and temperatures below zero — still pushed people to work with “numbers less than nothing.” +

+ +
+ Illustrated timeline: ancient rejection of negative roots, Indian and Chinese rules for signed quantities, European skepticism, and the development of ratios from barter to modern rates +
+ A sketch of how directed numbers and ratios were understood — from Greek reluctance to use + negative roots, through Indian and Chinese models of fortune and debt, to modern rates such + as speed and exchange. +
+
+ +

+ In India around the 7th century, Brahmagupta gave rules for operating with + positive and negative quantities (fortunes and debts). Chinese scholars used counting rods with + two colours to represent opposite signs. European acceptance grew slowly; even in the 18th century + some writers called negative roots “false.” +

+

+ Ratios and proportions appear in Babylonian and Egyptian problems (sharing grain, scaling + recipes). The modern notation \(a:b\) and systematic treatment of unit rates + became standard as commerce and science needed comparable measures — speed, price per item, and + exchange rates between currencies. +

+ +

Derivation

+ +

Why \((-)\times(-) = (+)\)?

+

+ One useful pattern: multiplication should keep the rules of arithmetic consistent. For any + real \(a\), you want \(a \times 0 = 0\). Then + \[ a \times 0 = a \times (1 + (-1)) = a\cdot 1 + a\cdot(-1) = a + a\cdot(-1). \] + So \(a\cdot(-1) = -a\). Now apply that twice: + \[ (-a)\cdot(-1) = -((-a)) = a, \] + which shows that multiplying two negatives gives a positive. +

+ +

Sharing in the ratio \(m:n\)

+

+ Suppose a total \(T\) is split into two parts in the ratio \(m:n\). Think of \(m+n\) equal + parts. Each part has size + \[ \frac{T}{m+n}. \] + The first quantity gets \(m\) of those parts: + \[ \frac{m}{m+n}\,T, \] + and the second gets \(\frac{n}{m+n}\,T\). The parts add to \(T\), as required. +

+ +

Unit rate

+

+ If \(d\) units of quantity are produced in \(t\) units of time, the average rate is + \(d/t\). “Per one hour” means divide by \(t\) when \(t \neq 0\): + \[ \text{rate per unit time} = \frac{d}{t}. \] + Re-arranging gives \(d = \text{rate} \times t\), the formula used for uniform motion. +

+ +

Checkpoints

+

+ Pause and reason before continuing. Discuss with a partner or write your work in a notebook. +

+ +
+

Checkpoint

+

+ Without a calculator: is \((-4) + (-7)\) positive or negative? Where do you land if you start + at \(-4\) and move 7 units left? +

+
+ +
+

Checkpoint

+

+ Simplify \(6 - (-2)\). Explain using “subtracting a negative is adding a positive.” +

+
+ +
+

Checkpoint

+

+ Share \(72\) in the ratio \(5:4\). How many “parts” are there in total? +

+
+ +
+

Checkpoint

+

+ A car travels \(150\) km in \(2.5\) hours. What is the average speed? Which formula did you use? +

+
+ +
+

Checkpoint

+

+ Currency A costs \(1.2\) units of Currency B per unit of A. You exchange \(50\) units of A. + How many units of B do you receive? +

+
+ +

Applications

+ +

Temperature and altitude

+

+ A weather station records \(3\,^{\circ}\mathrm{C}\) at noon and the temperature drops + \(8\,^{\circ}\mathrm{C}\) by midnight. The change is \(-8\), so the midnight temperature is + \[ 3 + (-8) = -5\,^{\circ}\mathrm{C}. \] + Altitude above sea level is positive; below sea level (e.g. Dead Sea shore) is negative + elevation relative to sea level. +

+ +

Sharing and mixtures

+

+ Paint is mixed in the ratio blue : white \(= 2:5\). For \(21\) litres total, there are + \(7\) equal parts, each \(3\) litres, giving \(6\) L blue and \(15\) L white. +

+ +
+ +

Speed and exchange rates

+

+ Walking \(6\) km in \(1.5\) h gives speed \(\frac{6}{1.5} = 4\) km/h. An exchange rate of + \(1\) USD \(=\) \(7.8\) HKD means \(100\) USD converts to \(780\) HKD by multiplying by the + unit rate. +

+ +

Question bank

+

+ Work each question, then open the solution to check your reasoning. Difficulty increases + through the sets. +

+ +

Easy

+ +
+ Which is larger, \(-3\) or \(-7\)? +
+

Answer: \(-3\) is larger (lies to the right on the number line).

+

Explanation: For negative numbers, the one closer to zero is greater.

+
+
+ +
+ Evaluate \((-2) + 9\). +
+

Answer: \(7\).

+

Steps: Start at \(-2\), move 9 units right.

+
+
+ +
+ \((-4) \times 6 = \) ______ +
+

Answer: \(-24\).

+

Explanation: Different signs → negative product.

+
+
+ +

Intermediate

+ +
+ Evaluate \(5 - (-3) \times 2\). +
+

Answer: \(11\).

+

Steps: \((-3)\times 2 = -6\); then \(5 - (-6) = 5 + 6 = 11\).

+
+
+ +
+ Divide \(84\) in the ratio \(2:5\). +
+

Answer: \(24\) and \(60\).

+

Steps: \(7\) parts; each part \(84 \div 7 = 12\); shares \(24\) and \(60\).

+
+
+ +
+ A cyclist goes \(45\) km in \(3\) h. What is the average speed? +
+

Answer: \(15\) km/h.

+

Calculation: \(45 \div 3 = 15\).

+
+
+ +

Difficult

+ +
+ The temperature was \(-2\,^{\circ}\mathrm{C}\) and fell by \(9\,^{\circ}\mathrm{C}\). Find the new temperature. +
+

Answer: \(-11\,^{\circ}\mathrm{C}\).

+

Steps: \(-2 + (-9) = -11\).

+
+
+ +
+ Put in order from smallest to largest: \(-1\), \(0\), \(-\frac{1}{2}\), \(-2\). +
+

Answer: \(-2 < -1 < -\frac{1}{2} < 0\).

+

Explanation: On the number line, further left means smaller.

+
+
+ +

Hardcore

+ +
+ \(A:B = 3:4\) and \(B:C = 2:5\). Find \(A:B:C\) in simplest form. +
+

Answer: \(A:B:C = 3:4:10\) after matching \(B\) (multiply first ratio by 2: \(6:8\), second by 4: \(8:20\) → \(6:8:20 = 3:4:10\)).

+

Steps: Align \(B\) to LCM 8: \(A:B = 6:8\), \(B:C = 8:20\), so \(A:B:C = 6:8:20 = 3:4:10\).

+
+
+ +
+ Which situation matches a negative directed number? +
+

Answer: A bank balance of \(500\) in debt (owe \(500\)) — often modelled as \(-500\).

+

Explanation: Debt below zero balance is a standard directed-number model.

+
+
+ +

References

+ +
diff --git a/content/math/directed-numbers-rates/widgets/number-line.tsx b/content/math/directed-numbers-rates/widgets/number-line.tsx new file mode 100644 index 0000000..4b55540 --- /dev/null +++ b/content/math/directed-numbers-rates/widgets/number-line.tsx @@ -0,0 +1,182 @@ +import katex from "katex"; +import { createEffect, createMemo, createSignal } from "solid-js"; +import { renderMathInContainer } from "../../../../frontend/src/lib/render-math"; + +const MIN = -10; +const MAX = 10; +const WIDTH = 400; +const PAD = 28; +const PLOT = WIDTH - 2 * PAD; + +function formatNum(n: number) { + if (Number.isInteger(n)) return String(n); + return (Math.round(n * 100) / 100).toString(); +} + +function renderLatex(latex: string) { + return katex.renderToString(latex, { throwOnError: false, strict: "ignore" }); +} + +function toX(value: number) { + const t = (value - MIN) / (MAX - MIN); + return PAD + t * PLOT; +} + +function NumberLine() { + const [a, setA] = createSignal(3); + const [b, setB] = createSignal(-2); + let canvasRef: HTMLCanvasElement | undefined; + const sum = createMemo(() => a() + b()); + + const equationHtml = createMemo(() => + renderLatex(`${formatNum(a())} + (${formatNum(b())}) = ${formatNum(sum())}`) + ); + + const redraw = () => { + const canvas = canvasRef; + if (!canvas) return; + const ctx = canvas.getContext("2d"); + if (!ctx) return; + + const h = 120; + const dpr = window.devicePixelRatio || 1; + canvas.width = WIDTH * dpr; + canvas.height = h * dpr; + ctx.setTransform(dpr, 0, 0, dpr, 0, 0); + + const style = getComputedStyle(canvas); + const grid = style.getPropertyValue("--math-grid").trim() || "#e5e5e5"; + const axis = style.getPropertyValue("--math-axis").trim() || "#a8a29e"; + const curve = style.getPropertyValue("--math-curve").trim() || "#9a6b2e"; + const root = style.getPropertyValue("--math-root").trim() || "#2563eb"; + const vertex = style.getPropertyValue("--math-vertex").trim() || "#4a6b4a"; + const bg = style.getPropertyValue("--math-canvas-bg").trim() || "#ffffff"; + + ctx.fillStyle = bg; + ctx.fillRect(0, 0, WIDTH, h); + + const y = h / 2; + ctx.strokeStyle = grid; + ctx.lineWidth = 1; + for (let v = MIN; v <= MAX; v++) { + const x = toX(v); + ctx.beginPath(); + ctx.moveTo(x, y - 4); + ctx.lineTo(x, y + 4); + ctx.stroke(); + } + + ctx.strokeStyle = axis; + ctx.lineWidth = 2; + ctx.beginPath(); + ctx.moveTo(PAD, y); + ctx.lineTo(WIDTH - PAD, y); + ctx.stroke(); + + ctx.fillStyle = axis; + ctx.font = "10px IBM Plex Mono, monospace"; + ctx.textAlign = "center"; + for (let v = MIN; v <= MAX; v += 2) { + ctx.fillText(String(v), toX(v), y + 18); + } + + const drawTick = (value: number, color: string, radius: number) => { + const x = toX(value); + ctx.fillStyle = color; + ctx.beginPath(); + ctx.arc(x, y, radius, 0, Math.PI * 2); + ctx.fill(); + }; + + const av = a(); + const bv = b(); + const sv = sum(); + + drawTick(av, root, 6); + drawTick(bv, vertex, 6); + drawTick(sv, curve, 7); + + ctx.strokeStyle = curve; + ctx.lineWidth = 2; + ctx.setLineDash([6, 4]); + ctx.beginPath(); + ctx.moveTo(toX(av), y); + ctx.lineTo(toX(sv), y); + ctx.stroke(); + ctx.setLineDash([]); + }; + + createEffect(() => { + a(); + b(); + sum(); + redraw(); + }); + + return ( +
+

Number-line addition

+
+
+
+ + setA(Number(e.currentTarget.value))} + /> +
+
+ + setB(Number(e.currentTarget.value))} + /> +
+
+
+
+ { + canvasRef = el; + redraw(); + }} + class="math-widget__canvas" + width={WIDTH} + height={120} + role="img" + aria-label={`Number line showing ${formatNum(a())} plus ${formatNum(b())} equals ${formatNum(sum())}`} + /> +
{ + if (el) renderMathInContainer(el); + }} + > + Blue: \(a\). Green: \(b\). Gold: sum \(a+b\). Dashed segment shows the move from \(a\) to + \(a+b\). +
+
+
+
+ ); +} + +export default NumberLine; diff --git a/content/math/directed-numbers-rates/widgets/ratio-demo.tsx b/content/math/directed-numbers-rates/widgets/ratio-demo.tsx new file mode 100644 index 0000000..ecd26f8 --- /dev/null +++ b/content/math/directed-numbers-rates/widgets/ratio-demo.tsx @@ -0,0 +1,118 @@ +import katex from "katex"; +import { createMemo, createSignal } from "solid-js"; + +function formatNum(n: number) { + if (Number.isInteger(n)) return String(n); + return (Math.round(n * 100) / 100).toString(); +} + +function renderLatex(latex: string) { + return katex.renderToString(latex, { throwOnError: false, strict: "ignore" }); +} + +function RatioDemo() { + const [partA, setPartA] = createSignal(2); + const [partB, setPartB] = createSignal(5); + const [total, setTotal] = createSignal(28); + + const sumParts = createMemo(() => partA() + partB()); + const shareA = createMemo(() => (partA() / sumParts()) * total()); + const shareB = createMemo(() => (partB() / sumParts()) * total()); + + const formulaHtml = createMemo(() => + renderLatex( + `${partA()}:${partB()} \\Rightarrow ${formatNum(shareA())} : ${formatNum(shareB())} \\text{ from total } ${formatNum(total())}` + ) + ); + + return ( +
+
+

+ Split {formatNum(total())} in the ratio{" "} + + {partA()}:{partB()} + + . Each of the {sumParts()} equal parts has size{" "} + {formatNum(total() / sumParts())}. +

+
+ ); +} + +export default RatioDemo; diff --git a/data/math-curriculum.json b/data/math-curriculum.json index eba6232..36c5fa9 100644 --- a/data/math-curriculum.json +++ b/data/math-curriculum.json @@ -53,7 +53,7 @@ "slug": "directed-numbers-rates", "title": "Directed numbers, rates & ratios", "description": "Operate with negative numbers and solve ratio, rate, and proportion problems in context.", - "status": "planned", + "status": "live", "curriculums": ["DSE"] }, { diff --git a/frontend/src/lib/render-math.ts b/frontend/src/lib/render-math.ts index bebe467..c12955e 100644 --- a/frontend/src/lib/render-math.ts +++ b/frontend/src/lib/render-math.ts @@ -7,12 +7,18 @@ const DELIMITERS = [ { left: "\\[", right: "\\]", display: true }, ]; -export function renderBookMath() { - document.querySelectorAll(".book-prose, .book-callout").forEach((el) => { - renderMathInElement(el, { - delimiters: DELIMITERS, - throwOnError: false, - strict: "ignore", - }); - }); +const RENDER_OPTIONS = { + delimiters: DELIMITERS, + throwOnError: false, + strict: "ignore" as const, +}; + +export function renderMathInContainer(el: HTMLElement) { + renderMathInElement(el, RENDER_OPTIONS); +} + +export function renderBookMath() { + document + .querySelectorAll(".book-prose, .book-callout, .math-widget__caption") + .forEach(renderMathInContainer); } diff --git a/spec.md b/spec.md index bb7e91d..1181341 100644 --- a/spec.md +++ b/spec.md @@ -16,12 +16,6 @@ we have a catalog of subjects. Each subject will have chapters. Each chapters ca we need to have a question bank feature. since this is purely static sites, question answer needs to be determined and able to grade in advanced. -1. multiple-choice -2. short-answer -3. fill-in-the-blank -4. choice -5. ranking - question bank not only show answer but also steps, explanation, calcultion. ## Chapters requirements diff --git a/themes/openfreebooks/sass/_book.scss b/themes/openfreebooks/sass/_book.scss index 49b59f0..e1ca3f4 100644 --- a/themes/openfreebooks/sass/_book.scss +++ b/themes/openfreebooks/sass/_book.scss @@ -375,6 +375,83 @@ a.book-chapter-link:focus-visible { max-width: 960px; } +.book-question { + margin: 1rem 0; + border: 1px solid var(--card-border); + border-radius: 12px; + background: var(--card-bg); +} + +.book-question__prompt { + position: relative; + padding: 14px 18px 14px 2.75rem; + font-weight: 500; + line-height: 1.55; + cursor: pointer; + list-style: none; +} + +.book-question__prompt::-webkit-details-marker { + display: none; +} + +.book-question__prompt::marker { + content: ""; +} + +.book-question__prompt::before { + content: ""; + position: absolute; + left: 1.125rem; + top: 1.35em; + width: 0.45em; + height: 0.45em; + border-right: 2px solid var(--accent); + border-bottom: 2px solid var(--accent); + transform: rotate(-45deg); + transition: transform 200ms ease; +} + +.book-question[open] .book-question__prompt::before { + top: 1.5em; + transform: rotate(45deg); +} + +.book-question__prompt:hover::before, +.book-question__prompt:focus-visible::before { + border-color: var(--ink); +} + +.book-question__solution { + padding: 0 18px 16px; + border-top: 1px solid var(--card-border); + font-size: 0.95rem; + color: var(--soft-ink); +} + +.book-question__solution p { + margin: 0.75rem 0 0; +} + +.ratio-demo__bars { + display: flex; + width: 100%; + max-width: 400px; + height: 28px; + margin: 16px 0 20px; + border-radius: 8px; + overflow: hidden; + border: 1px solid var(--card-border); +} + +.ratio-demo__bar--a { + background: var(--math-root, #2563eb); +} + +.ratio-demo__bar--b { + background: var(--math-curve, #9a6b2e); +} + .book-page--chapter .book-callout--dse { max-width: var(--prose-width); margin-top: 2rem; diff --git a/themes/openfreebooks/sass/_catalog.scss b/themes/openfreebooks/sass/_catalog.scss index c6c6552..114bb05 100644 --- a/themes/openfreebooks/sass/_catalog.scss +++ b/themes/openfreebooks/sass/_catalog.scss @@ -453,8 +453,20 @@ :global(.catalog-mermaid-view__svg .plannedNode rect), :global(.catalog-mermaid-view__svg .plannedNode polygon) { - stroke: color-mix(in srgb, var(--muted) 85%, transparent); - fill: color-mix(in srgb, var(--paper) 92%, var(--muted) 8%); + stroke: color-mix(in srgb, var(--muted) 70%, var(--line)); + fill: color-mix(in srgb, var(--paper) 82%, var(--muted) 18%); + } + + :global(.catalog-mermaid-view__svg .plannedNode .catalog-mermaid-node__title) { + color: var(--muted); + } + + :global(.catalog-mermaid-view__svg .plannedNode .catalog-mermaid-node__description) { + color: color-mix(in srgb, var(--muted) 88%, var(--soft-ink)); + } + + :global(.catalog-mermaid-view__svg .plannedNode .catalog-badge:not(.book-chapter-badge--planned)) { + opacity: 0.55; } :global(.catalog-mermaid-view__svg .edge-path path) { @@ -615,6 +627,16 @@ &:focus-within::before { background: var(--accent); } + + &:has(.catalog-chapter-card--planned)::before { + background: color-mix(in srgb, var(--muted) 45%, var(--line)); + box-shadow: 0 0 0 4px var(--card-bg); + } + + &:has(.catalog-chapter-card--planned):hover::before, + &:has(.catalog-chapter-card--planned):focus-within::before { + background: color-mix(in srgb, var(--muted) 45%, var(--line)); + } } .catalog-chapter-card { @@ -631,8 +653,27 @@ transition: border-color 200ms ease, box-shadow 200ms ease; &--planned { - opacity: 0.85; + color: var(--muted); + background: color-mix(in srgb, var(--paper) 86%, var(--muted) 14%); + border-color: color-mix(in srgb, var(--line) 65%, transparent); + border-style: dashed; cursor: default; + + .catalog-chapter-card__number, + .catalog-chapter-card__title, + .catalog-chapter-card__description { + color: var(--muted); + } + + .catalog-badge:not(.book-chapter-badge--planned) { + opacity: 0.5; + } + + .book-chapter-badge--planned { + color: var(--muted); + background: color-mix(in srgb, var(--muted) 16%, transparent); + border: 1px solid color-mix(in srgb, var(--line) 75%, transparent); + } } }