From f74867fe4ccdca05c2a2da312298cd2c427eba31 Mon Sep 17 00:00:00 2001 From: Hananoshika Yomaru Date: Thu, 21 May 2026 16:42:19 -0700 Subject: [PATCH] Refactor math notation and integer foundations content: Update basic math notation to replace half-bar representation with a dot-based notation for clarity. Enhance integer foundations by revising definitions, adding historical context, and improving explanations of operations, absolute value, and percentages. Include new examples and applications to better illustrate concepts and their relevance in real-world scenarios. --- content/math/basic-math-notation/_index.md | 5 +- content/math/basic-math-notation/chapter.scss | 27 +- content/math/basic-math-notation/core.html | 5 +- content/math/integer-foundations/_index.md | 118 ++++- content/math/integer-foundations/chapter.scss | 61 +++ content/math/integer-foundations/core.html | 118 ++++- .../widgets/integer-compare-demo.tsx | 403 ++++++++++++++++++ .../math/percentage-applications/_index.md | 208 ++++++++- .../math/percentage-applications/core.html | 208 ++++++++- 9 files changed, 1073 insertions(+), 80 deletions(-) create mode 100644 content/math/integer-foundations/chapter.scss create mode 100644 content/math/integer-foundations/widgets/integer-compare-demo.tsx diff --git a/content/math/basic-math-notation/_index.md b/content/math/basic-math-notation/_index.md index 32dd2ce..2ed6740 100644 --- a/content/math/basic-math-notation/_index.md +++ b/content/math/basic-math-notation/_index.md @@ -370,9 +370,8 @@ strand = "Number & Algebra" - - - + diff --git a/content/math/basic-math-notation/chapter.scss b/content/math/basic-math-notation/chapter.scss index 9c9951d..4079fc5 100644 --- a/content/math/basic-math-notation/chapter.scss +++ b/content/math/basic-math-notation/chapter.scss @@ -143,24 +143,19 @@ color: #b45309; } -.notation-decimal-demo__half-bar { - display: inline-flex; - width: 56px; - height: 18px; - border-radius: 6px; - overflow: hidden; - border: 2px solid rgba(15, 118, 110, 0.4); - vertical-align: middle; +.notation-dots--half { + gap: 0; } -.notation-decimal-demo__half-on { - flex: 1; - background: #0f766e; -} - -.notation-decimal-demo__half-off { - flex: 1; - background: rgba(20, 184, 166, 0.1); +.notation-dots__dot--half { + background: linear-gradient( + to right, + #0f766e 0 50%, + rgba(15, 118, 110, 0.16) 50% 100% + ); + box-shadow: + inset 0 0 0 1px rgba(15, 118, 110, 0.45), + 0 1px 0 rgba(0, 0, 0, 0.12); } .notation-decimal-demo__caption { diff --git a/content/math/basic-math-notation/core.html b/content/math/basic-math-notation/core.html index d86fc2e..b56d7f4 100644 --- a/content/math/basic-math-notation/core.html +++ b/content/math/basic-math-notation/core.html @@ -359,9 +359,8 @@ - - - + diff --git a/content/math/integer-foundations/_index.md b/content/math/integer-foundations/_index.md index 89e615e..8c0f875 100644 --- a/content/math/integer-foundations/_index.md +++ b/content/math/integer-foundations/_index.md @@ -11,36 +11,103 @@ strand = "Number & Algebra"

- Integers extend whole numbers to include values below zero. They are useful for temperature, - elevation, and money balances. + Integers extend whole numbers so we can model values above, below, and exactly at a reference + point. They appear in temperature, sea level, game scores, electricity, and money balances. + Without integers, many real situations would be awkward to calculate.

-

Directed numbers on a number line

+

A short history of the number line idea

- Positive numbers are to the right of zero, negative numbers are to the left. Moving right - increases value; moving left decreases value. + The modern number line grew over time. Early printed works arranged numbers in order, and later + mathematicians described arithmetic as movement along a line. By the late 1600s, this “walk + forward / backward” idea was used to explain addition and subtraction in a geometric way. +

+

+ The key shift was not just drawing numbers in order, but treating position on a line as a model + for operations. That model is now foundational in school mathematics. +

+ +

Drawing and reading a number line

+

+ A number line is a straight line with equally spaced marks. Numbers increase to the right and + decrease to the left. Zero is the center reference point for positive and negative values. +

+
    +
  • Right of 0: positive integers (\(+1, +2, +3, \dots\)).
    • +
  • Left of 0: negative integers (\(-1, -2, -3, \dots\)).
    • +
  • At 0: neither positive nor negative.
    • +
+

+ In coordinate graphs, both axes are number lines: the horizontal \(x\)-axis and vertical + \(y\)-axis.

Compare quickly

\(a > b\) means \(a\) is to the right of \(b\) on the number line.

-

Absolute value and opposites

+

Comparing integers with position

- Absolute value is distance from zero: \(|-7|=7\). Opposites have equal distance from zero and - opposite signs, such as \(+5\) and \(-5\). -

- -

Adding and subtracting integers

-

- You can think of addition and subtraction as movement on the number line. + Position gives order immediately:

    -
  • \(a+b\): start at \(a\), move by \(b\).
    • -
  • \(a-b = a+(-b)\): subtracting is adding the opposite.
    • +
  • If \(a\) is to the right of \(b\), then \(a > b\).
    • +
  • If \(a\) is to the left of \(b\), then \(a < b\).

- Example: \(6-(-4)=6+4=10\). + Example: \(-2 > -5\) because \(-2\) is to the right of \(-5\), even though both are negative. +

+
+ +

Absolute value and opposites

+

+ Absolute value means distance from zero, so it is never negative: \(|-7|=7\), \(|7|=7\). + Opposite numbers are equally far from zero in opposite directions, such as \(+5\) and \(-5\). +

+

+ Distance between two integers can be read from the line: + \[ + \text{distance between } a \text{ and } b = |a-b|. + \] + For example, the distance from \(-4\) to \(3\) is \(|-4-3|=7\). +

+ +

Operations as movement and grouping

+

Addition and subtraction

+

+ Think of arithmetic as moves on the line: +

+
    +
  • \(a+b\): start at \(a\), move \(b\) units (right if \(b>0\), left if \(b<0\)).
    • +
  • \(a-b = a+(-b)\): subtracting means adding the opposite.
    • +
+

+ Examples: + \[ + -3+8=5,\qquad 4-9=-5,\qquad 6-(-4)=10. + \] +

+

Multiplication

+

+ Multiplication can be seen as repeated equal jumps. For instance, \(5\times3\) means three jumps + of length 5 to the right, ending at 15. +

+

+ Sign rules come from direction: +

+
    +
  • \((+)\times(+)=+\)
    • +
  • \((+)\times(-)=-\)
    • +
  • \((-)\times(+)=-\)
    • +
  • \((-)\times(-)=+\)
    • +
+

Division

+

+ Division asks how many equal lengths fit into another length. For example, \(6\div2=3\) because + three jumps of 2 reach 6. Integer sign rules mirror multiplication: + \[ + (+)\div(+)=+,\quad (+)\div(-)=-,\quad (-)\div(+)=-,\quad (-)\div(-)=+. + \]

Zero principle with tiles

@@ -71,4 +138,23 @@ strand = "Number & Algebra"

+ +

Why zero and negatives matter

+

+ Zero and negative numbers make arithmetic coherent. Before negatives were accepted, people often + restricted results to non-negative values, which forced case-by-case rules and extra wording. +

+

+ With integers, one set of laws works smoothly: +

+ +

+ This consistency is why integer arithmetic is not just “extra symbols”; it is the foundation for + algebra, equations, and later topics like vectors and coordinate geometry. +

diff --git a/content/math/integer-foundations/chapter.scss b/content/math/integer-foundations/chapter.scss new file mode 100644 index 0000000..5f7deda --- /dev/null +++ b/content/math/integer-foundations/chapter.scss @@ -0,0 +1,61 @@ +.integer-compare-demo { + margin: 1rem 0 1.5rem; +} + +.integer-compare-demo__canvas { + display: block; + width: 100%; + max-width: 760px; + margin: 0 auto; + border: 1px solid var(--line); + border-radius: 10px; + background: color-mix(in srgb, var(--paper) 82%, #f8fafc 18%); + touch-action: none; +} + +.integer-compare-demo__readout { + margin: 12px 0 0; + text-align: center; + font-family: var(--mono); + font-size: 0.92rem; + color: var(--soft-ink); +} + +.integer-compare-demo__actions { + margin-top: 12px; + display: flex; + justify-content: center; +} + +.integer-compare-demo__reset-btn { + width: 2.2rem; + height: 2.2rem; + padding: 0; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.integer-compare-demo__reset-icon { + display: block; +} + +[data-theme="dark"] .integer-compare-demo__canvas { + border-color: rgba(148, 163, 184, 0.5); + background: #0f172a; +} + +[data-theme="dark"] .integer-compare-demo__readout { + color: #e2e8f0; +} + +@media (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) .integer-compare-demo__canvas { + border-color: rgba(148, 163, 184, 0.5); + background: #0f172a; + } + + :root:not([data-theme="light"]) .integer-compare-demo__readout { + color: #e2e8f0; + } +} diff --git a/content/math/integer-foundations/core.html b/content/math/integer-foundations/core.html index e27d007..28b9981 100644 --- a/content/math/integer-foundations/core.html +++ b/content/math/integer-foundations/core.html @@ -1,35 +1,102 @@

- Integers extend whole numbers to include values below zero. They are useful for temperature, - elevation, and money balances. + Integers extend whole numbers so we can model values above, below, and exactly at a reference + point. They appear in temperature, sea level, game scores, electricity, and money balances. + Without integers, many real situations would be awkward to calculate.

-

Directed numbers on a number line

+

A short history of the number line idea

- Positive numbers are to the right of zero, negative numbers are to the left. Moving right - increases value; moving left decreases value. + The modern number line grew over time. Early printed works arranged numbers in order, and later + mathematicians described arithmetic as movement along a line. By the late 1600s, this “walk + forward / backward” idea was used to explain addition and subtraction in a geometric way. +

+

+ The key shift was not just drawing numbers in order, but treating position on a line as a model + for operations. That model is now foundational in school mathematics. +

+ +

Drawing and reading a number line

+

+ A number line is a straight line with equally spaced marks. Numbers increase to the right and + decrease to the left. Zero is the center reference point for positive and negative values. +

+
    +
  • Right of 0: positive integers (\(+1, +2, +3, \dots\)).
    • +
  • Left of 0: negative integers (\(-1, -2, -3, \dots\)).
    • +
  • At 0: neither positive nor negative.
    • +
+

+ In coordinate graphs, both axes are number lines: the horizontal \(x\)-axis and vertical + \(y\)-axis.

Compare quickly

\(a > b\) means \(a\) is to the right of \(b\) on the number line.

-

Absolute value and opposites

+

Comparing integers with position

- Absolute value is distance from zero: \(|-7|=7\). Opposites have equal distance from zero and - opposite signs, such as \(+5\) and \(-5\). -

- -

Adding and subtracting integers

-

- You can think of addition and subtraction as movement on the number line. + Position gives order immediately:

    -
  • \(a+b\): start at \(a\), move by \(b\).
    • -
  • \(a-b = a+(-b)\): subtracting is adding the opposite.
    • +
  • If \(a\) is to the right of \(b\), then \(a > b\).
    • +
  • If \(a\) is to the left of \(b\), then \(a < b\).

- Example: \(6-(-4)=6+4=10\). + Example: \(-2 > -5\) because \(-2\) is to the right of \(-5\), even though both are negative. +

+
+ +

Absolute value and opposites

+

+ Absolute value means distance from zero, so it is never negative: \(|-7|=7\), \(|7|=7\). + Opposite numbers are equally far from zero in opposite directions, such as \(+5\) and \(-5\). +

+

+ Distance between two integers can be read from the line: + \[ + \text{distance between } a \text{ and } b = |a-b|. + \] + For example, the distance from \(-4\) to \(3\) is \(|-4-3|=7\). +

+ +

Operations as movement and grouping

+

Addition and subtraction

+

+ Think of arithmetic as moves on the line: +

+
    +
  • \(a+b\): start at \(a\), move \(b\) units (right if \(b>0\), left if \(b<0\)).
    • +
  • \(a-b = a+(-b)\): subtracting means adding the opposite.
    • +
+

+ Examples: + \[ + -3+8=5,\qquad 4-9=-5,\qquad 6-(-4)=10. + \] +

+

Multiplication

+

+ Multiplication can be seen as repeated equal jumps. For instance, \(5\times3\) means three jumps + of length 5 to the right, ending at 15. +

+

+ Sign rules come from direction: +

+
    +
  • \((+)\times(+)=+\)
    • +
  • \((+)\times(-)=-\)
    • +
  • \((-)\times(+)=-\)
    • +
  • \((-)\times(-)=+\)
    • +
+

Division

+

+ Division asks how many equal lengths fit into another length. For example, \(6\div2=3\) because + three jumps of 2 reach 6. Integer sign rules mirror multiplication: + \[ + (+)\div(+)=+,\quad (+)\div(-)=-,\quad (-)\div(+)=-,\quad (-)\div(-)=+. + \]

Zero principle with tiles

@@ -60,4 +127,23 @@

+ +

Why zero and negatives matter

+

+ Zero and negative numbers make arithmetic coherent. Before negatives were accepted, people often + restricted results to non-negative values, which forced case-by-case rules and extra wording. +

+

+ With integers, one set of laws works smoothly: +

+ +

+ This consistency is why integer arithmetic is not just “extra symbols”; it is the foundation for + algebra, equations, and later topics like vectors and coordinate geometry. +

diff --git a/content/math/integer-foundations/widgets/integer-compare-demo.tsx b/content/math/integer-foundations/widgets/integer-compare-demo.tsx new file mode 100644 index 0000000..569c338 --- /dev/null +++ b/content/math/integer-foundations/widgets/integer-compare-demo.tsx @@ -0,0 +1,403 @@ +import { onCleanup, onMount } from "solid-js"; + +const MIN_VALUE = -10; +const MAX_VALUE = 10; +const STEP = 0.5; + +function clampToStep(value: number) { + const clamped = Math.max(MIN_VALUE, Math.min(MAX_VALUE, value)); + return Math.round(clamped / STEP) * STEP; +} + +function relationSymbol(a: number, b: number) { + if (a > b) return ">"; + if (a < b) return "<"; + return "="; +} + +type DemoPalette = { + canvasFill: string; + distanceBand: string; + positiveRay: string; + negativeRay: string; + axisLine: string; + arrow: string; + majorTick: string; + minorTick: string; + tickLabel: string; + axisLabel: string; + guideLine: string; + absoluteLabelBg: string; + absoluteLabelText: string; + pointValueText: string; + pointRing: string; + pointA: string; + pointB: string; +}; + +function resolvePalette(): DemoPalette { + const explicitTheme = document.documentElement.getAttribute("data-theme"); + const isDark = + explicitTheme === "dark" || + (explicitTheme !== "light" && window.matchMedia("(prefers-color-scheme: dark)").matches); + + if (isDark) { + return { + canvasFill: "#0f172a", + distanceBand: "rgba(56, 189, 248, 0.8)", + positiveRay: "#22d3ee", + negativeRay: "#fda4af", + axisLine: "#e2e8f0", + arrow: "#f1f5f9", + majorTick: "#e2e8f0", + minorTick: "#94a3b8", + tickLabel: "#f8fafc", + axisLabel: "#cbd5e1", + guideLine: "rgba(226, 232, 240, 0.65)", + absoluteLabelBg: "rgba(15, 23, 42, 0.82)", + absoluteLabelText: "#f8fafc", + pointValueText: "#f8fafc", + pointRing: "#0f172a", + pointA: "#2dd4bf", + pointB: "#f59e0b", + }; + } + + return { + canvasFill: "rgba(148, 163, 184, 0.08)", + distanceBand: "rgba(14, 116, 144, 0.75)", + positiveRay: "#0f766e", + negativeRay: "#b91c1c", + axisLine: "#334155", + arrow: "#64748b", + majorTick: "#475569", + minorTick: "#94a3b8", + tickLabel: "#475569", + axisLabel: "#64748b", + guideLine: "rgba(15, 23, 42, 0.25)", + absoluteLabelBg: "rgba(255, 255, 255, 0.92)", + absoluteLabelText: "#0f172a", + pointValueText: "#0f172a", + pointRing: "#ffffff", + pointA: "#0f766e", + pointB: "#b45309", + }; +} + +function IntegerCompareDemo() { + let rootRef: HTMLDivElement | undefined; + let canvasRef: HTMLCanvasElement | undefined; + let valueARef: HTMLSpanElement | undefined; + let valueBRef: HTMLSpanElement | undefined; + let relationRef: HTMLSpanElement | undefined; + let distanceRef: HTMLSpanElement | undefined; + + onMount(() => { + const canvas = canvasRef; + if (!canvas) return; + const ctxCandidate = canvas.getContext("2d"); + if (!(ctxCandidate instanceof CanvasRenderingContext2D)) return; + const ctx: CanvasRenderingContext2D = ctxCandidate; + const canvasEl: HTMLCanvasElement = canvas; + + let valueA = -2; + let valueB = -5; + let dragging: "a" | "b" | null = null; + let dpr = window.devicePixelRatio || 1; + let logicalWidth = 760; + let logicalHeight = 260; + + const marginX = 40; + const axisY = 164; + const handleY = 98; + + const pxPerUnit = () => (logicalWidth - marginX * 2) / (MAX_VALUE - MIN_VALUE); + const toScreenX = (value: number) => marginX + (value - MIN_VALUE) * pxPerUnit(); + const fromScreenX = (screenX: number) => MIN_VALUE + (screenX - marginX) / pxPerUnit(); + + function drawArrowHead(x: number, y: number, direction: 1 | -1, color: string) { + const size = 7; + ctx.fillStyle = color; + ctx.beginPath(); + ctx.moveTo(x, y); + ctx.lineTo(x - direction * size, y - size * 0.75); + ctx.lineTo(x - direction * size, y + size * 0.75); + ctx.closePath(); + ctx.fill(); + } + + function drawPoint(x: number, y: number, color: string, ringColor: string) { + ctx.beginPath(); + ctx.arc(x, y, 10, 0, Math.PI * 2); + ctx.fillStyle = color; + ctx.fill(); + ctx.lineWidth = 2; + ctx.strokeStyle = ringColor; + ctx.stroke(); + } + + function updateText() { + if (valueARef) valueARef.textContent = valueA.toFixed(1); + if (valueBRef) valueBRef.textContent = valueB.toFixed(1); + if (relationRef) relationRef.textContent = relationSymbol(valueA, valueB); + if (distanceRef) distanceRef.textContent = Math.abs(valueA - valueB).toFixed(1); + } + + function draw() { + const palette = resolvePalette(); + ctx.clearRect(0, 0, logicalWidth, logicalHeight); + + ctx.fillStyle = palette.canvasFill; + ctx.fillRect(0, 0, logicalWidth, logicalHeight); + + const xA = toScreenX(valueA); + const xB = toScreenX(valueB); + const xZero = toScreenX(0); + const minX = Math.min(xA, xB); + const maxX = Math.max(xA, xB); + + ctx.strokeStyle = palette.distanceBand; + ctx.lineWidth = 9; + ctx.lineCap = "round"; + ctx.beginPath(); + ctx.moveTo(minX, axisY); + ctx.lineTo(maxX, axisY); + ctx.stroke(); + + const drawZeroRay = (value: number, x: number, y: number) => { + if (value === 0) return; + ctx.strokeStyle = value > 0 ? palette.positiveRay : palette.negativeRay; + ctx.lineWidth = 5; + ctx.lineCap = "round"; + ctx.beginPath(); + ctx.moveTo(xZero, y); + ctx.lineTo(x, y); + ctx.stroke(); + }; + + drawZeroRay(valueA, xA, axisY - 12); + drawZeroRay(valueB, xB, axisY + 12); + + ctx.strokeStyle = palette.axisLine; + ctx.lineWidth = 2; + ctx.lineCap = "round"; + ctx.beginPath(); + ctx.moveTo(marginX - 12, axisY); + ctx.lineTo(logicalWidth - marginX + 12, axisY); + ctx.stroke(); + + drawArrowHead(logicalWidth - marginX + 12, axisY, 1, palette.arrow); + drawArrowHead(marginX - 12, axisY, -1, palette.arrow); + + for (let tick = MIN_VALUE; tick <= MAX_VALUE; tick += 1) { + const x = toScreenX(tick); + const major = tick % 2 === 0; + + ctx.strokeStyle = major ? palette.majorTick : palette.minorTick; + ctx.lineWidth = major ? 1.5 : 1; + ctx.beginPath(); + ctx.moveTo(x, axisY - (major ? 9 : 6)); + ctx.lineTo(x, axisY + (major ? 9 : 6)); + ctx.stroke(); + + if (major) { + ctx.font = "12px var(--mono, ui-monospace, monospace)"; + ctx.textAlign = "center"; + ctx.textBaseline = "top"; + ctx.fillStyle = palette.tickLabel; + ctx.fillText(String(tick), x, axisY + 11); + } + } + + ctx.font = "600 12px var(--font-sans, system-ui, sans-serif)"; + ctx.textAlign = "right"; + ctx.textBaseline = "bottom"; + ctx.fillStyle = palette.axisLabel; + ctx.fillText("Number line", logicalWidth - marginX + 12, axisY - 12); + + ctx.strokeStyle = palette.guideLine; + ctx.lineWidth = 1.5; + ctx.setLineDash([5, 4]); + ctx.beginPath(); + ctx.moveTo(xA, handleY + 12); + ctx.lineTo(xA, axisY - 12); + ctx.moveTo(xB, handleY + 12); + ctx.lineTo(xB, axisY - 12); + ctx.stroke(); + ctx.setLineDash([]); + + drawPoint(xA, handleY, palette.pointA, palette.pointRing); + drawPoint(xB, handleY, palette.pointB, palette.pointRing); + + const drawPointValue = (x: number, value: number) => { + const text = value.toFixed(1); + const y = handleY - 20; + ctx.font = "700 12px var(--mono, ui-monospace, monospace)"; + ctx.textAlign = "center"; + ctx.textBaseline = "middle"; + ctx.fillStyle = palette.pointValueText; + ctx.fillText(text, x, y); + }; + + drawPointValue(xA, valueA); + drawPointValue(xB, valueB); + + const absText = `|A - B| = ${Math.abs(valueA - valueB).toFixed(1)}`; + const absX = (xA + xB) / 2; + const absY = axisY - 30; + ctx.font = "700 12px var(--mono, ui-monospace, monospace)"; + const absTextWidth = ctx.measureText(absText).width; + ctx.fillStyle = palette.absoluteLabelBg; + ctx.fillRect(absX - absTextWidth / 2 - 6, absY - 9, absTextWidth + 12, 18); + ctx.fillStyle = palette.absoluteLabelText; + ctx.textAlign = "center"; + ctx.textBaseline = "middle"; + ctx.fillText(absText, absX, absY); + updateText(); + } + + function resize() { + dpr = window.devicePixelRatio || 1; + const rect = canvasEl.getBoundingClientRect(); + logicalWidth = Math.max(320, rect.width); + logicalHeight = 260; + + canvasEl.width = Math.round(logicalWidth * dpr); + canvasEl.height = Math.round(logicalHeight * dpr); + canvasEl.style.height = `${logicalHeight}px`; + + ctx.setTransform(1, 0, 0, 1, 0, 0); + ctx.scale(dpr, dpr); + draw(); + } + + function pickHandle(pointerX: number, pointerY: number) { + const xA = toScreenX(valueA); + const xB = toScreenX(valueB); + const distA = Math.hypot(pointerX - xA, pointerY - handleY); + const distB = Math.hypot(pointerX - xB, pointerY - handleY); + if (distA <= 18 && distA <= distB) return "a"; + if (distB <= 18) return "b"; + return null; + } + + function onPointerDown(event: PointerEvent) { + const rect = canvasEl.getBoundingClientRect(); + const x = event.clientX - rect.left; + const y = event.clientY - rect.top; + dragging = pickHandle(x, y); + if (!dragging) return; + canvasEl.setPointerCapture(event.pointerId); + canvasEl.style.cursor = "grabbing"; + event.preventDefault(); + } + + function onPointerMove(event: PointerEvent) { + if (!dragging) { + const rect = canvasEl.getBoundingClientRect(); + const x = event.clientX - rect.left; + const y = event.clientY - rect.top; + canvasEl.style.cursor = pickHandle(x, y) ? "grab" : "default"; + return; + } + const rect = canvasEl.getBoundingClientRect(); + const x = event.clientX - rect.left; + const next = clampToStep(fromScreenX(x)); + if (dragging === "a") { + valueA = next; + } else { + valueB = next; + } + draw(); + event.preventDefault(); + } + + function onPointerEnd(event: PointerEvent) { + if (dragging) { + canvasEl.releasePointerCapture(event.pointerId); + } + dragging = null; + canvasEl.style.cursor = "default"; + } + + function onResetClick() { + valueA = -2; + valueB = -5; + draw(); + } + + const resetBtn = rootRef?.querySelector("[data-compare-reset]"); + resetBtn?.addEventListener("click", onResetClick); + + canvasEl.addEventListener("pointerdown", onPointerDown); + canvasEl.addEventListener("pointermove", onPointerMove); + canvasEl.addEventListener("pointerup", onPointerEnd); + canvasEl.addEventListener("pointercancel", onPointerEnd); + window.addEventListener("resize", resize); + + const themeObserver = new MutationObserver(() => { + draw(); + }); + themeObserver.observe(document.documentElement, { + attributes: true, + attributeFilter: ["data-theme"], + }); + const darkQuery = window.matchMedia("(prefers-color-scheme: dark)"); + const onSystemThemeChange = () => draw(); + darkQuery.addEventListener("change", onSystemThemeChange); + + resize(); + + onCleanup(() => { + resetBtn?.removeEventListener("click", onResetClick); + canvasEl.removeEventListener("pointerdown", onPointerDown); + canvasEl.removeEventListener("pointermove", onPointerMove); + canvasEl.removeEventListener("pointerup", onPointerEnd); + canvasEl.removeEventListener("pointercancel", onPointerEnd); + window.removeEventListener("resize", resize); + themeObserver.disconnect(); + darkQuery.removeEventListener("change", onSystemThemeChange); + }); + }); + + return ( +
+

+ Comparison demo: drag A and B on the number line +

+
+

+ Drag each point horizontally. The point farther right is greater. The highlighted segment + shows absolute distance. +

+ +

+ A = -2.0, B = -5.0, so A{" "} + {">"} B and |A - B| ={" "} + 3.0 +

+
+ +
+
+
+ ); +} + +export default IntegerCompareDemo; diff --git a/content/math/percentage-applications/_index.md b/content/math/percentage-applications/_index.md index 713ceba..9fd8f2b 100644 --- a/content/math/percentage-applications/_index.md +++ b/content/math/percentage-applications/_index.md @@ -11,24 +11,134 @@ strand = "Number & Algebra"

- Percent means “per hundred.” This chapter connects percent, fraction, and decimal forms and - applies them in everyday contexts. -

- -

Percent, fraction, decimal

-

- \(35\% = \frac{35}{100}=0.35\) + A percentage (percent) means “per hundred”. It is a way to + describe a ratio out of 100, written with the symbol %.

- Convert by multiplying or dividing by 100 as needed. + Percentages are used to compare parts to a total in finance, science, population data, discounts, + tax, growth, and error rates. +

+ +

What percent means

+

+ \[ + p\% = \frac{p}{100}. + \] +

+

+ For example: +

+

+ \[ + 45\%=\frac{45}{100}=0.45. + \] +

+

+ So 45% means “45 out of every 100.” +

+ +

Percent, fraction, and decimal forms

+

+ \[ + 35\%=\frac{35}{100}=0.35. + \] +

+
    +
  • Percent \(\to\) decimal: divide by 100.
    • +
  • Decimal \(\to\) percent: multiply by 100 and add \(%\).
    • +
  • Fraction \(\to\) percent: convert to denominator 100 or decimal, then multiply by 100.
    • +
+ +

Core examples

+

Example 1: class composition

+

+ If 50% of students in a class are male, that means 50 out of every 100 students are male. If + there are 500 students: +

+

+ \[ + 50\%\text{ of }500 = 0.50\times500 = 250. + \] +

+

+ So 250 students are male. +

+ +

Example 2: price increase

+

+ A price rises by \$0.15 from \$2.50. The fractional increase is: +

+

+ \[ + \frac{0.15}{2.50}=0.06. + \] +

+

+ So the price increase is 6%. +

+ +
+

Range of percentages

+

+ Percentages are not limited to 0% to 100%. In practice, values like 111% or -35% can appear, + especially for percent change. +

+

+ \[ + 200\%\text{ of }40 = 2.00\times40 = 80. + \] +

+

+ So 200% means twice the reference amount. +

+
+ +

Short history

+

+ Before decimal notation became standard, many calculations were done with fractions out of 100. + In Roman contexts, some taxes were set as hundredth fractions. +

+

+ Through the late Middle Ages and early modern period, denominator-100 arithmetic became common in + trade, profit/loss, and interest calculations. By the 17th century, quoting rates in hundredths + was standard in many settings. +

+ +

Percent sign (%)

+

+ The word “percent” comes from Latin per centum, meaning “by the hundred.” Over time, + written abbreviations of “per cento” contracted into the modern % symbol.

Finding part and whole

- To find \(p\%\) of a quantity \(Q\), use \(\frac{p}{100}\times Q\). + To find \(p\%\) of a quantity \(Q\):

- \(18\%\text{ of }250 = 0.18\times250 = 45\) + \[ + \frac{p}{100}\times Q. + \] +

+

+ \[ + 18\%\text{ of }250 = 0.18\times250 = 45. + \] +

+

+ To find what percent one number is of another: +

+

+ \[ + \text{percent}=\frac{\text{part}}{\text{whole}}\times100\%. + \] +

+

+ Example: 50 apples as a percentage of 1250 apples: +

+

+ \[ + \frac{50}{1250}=0.04,\quad 0.04\times100\%=4\%. + \]

Percent increase and decrease

@@ -37,7 +147,7 @@ strand = "Number & Algebra"

\[ - \%\text{ change}=\frac{\text{new}-\text{original}}{\text{original}}\times 100\%. + \%\text{ change}=\frac{\text{new}-\text{original}}{\text{original}}\times100\%. \]

@@ -48,15 +158,73 @@ strand = "Number & Algebra"

  • Decrease by \(r\%\): multiply by \(1-\frac{r}{100}\).
    • +

    Percentage of a percentage

    +

    + Convert both percentages to fractions (or decimals), then multiply: +

    +

    + \[ + 50\%\text{ of }40\%=\frac{50}{100}\times\frac{40}{100}=0.20=20\%. + \] +

    +

    + Avoid double-dividing by 100. For example: +

    +

    + \[ + 25\%=0.25,\text{ not }\frac{25\%}{100}. + \] +

    + +

    Always state “of what?”

    +

    + A percentage must be tied to a reference total (what counts as 100%). +

    +

    + Example: +

    +
      +
    • 60% of all students are female.
      • +
    • 10% of all students are computer science majors.
      • +
    • 5% of female students are computer science majors.
      • +
    +

    + Female CS majors as a percentage of all students: +

    +

    + \[ + 60\%\times5\%=3\%. + \] +

    +

    + As a percentage of CS majors: +

    +

    + \[ + \frac{3\%}{10\%}=30\%. + \] +

    +

    + So 30% of CS majors are female. +

    +

    Real-world applications

    Discounts, tax, markups, interest, and error rates are all percentage models.

    +

    + Reversing expressions does not change multiplication results: +

    +

    + \[ + 50\%\text{ of }20=10,\qquad 20\%\text{ of }50=10. + \] +

    - Checkpoint: 25% off a \$80 item + Checkpoint: 25% off a US$80 item
    -

    Discount \(=0.25\times80=20\), so sale price is \$60.

    +

    \(\text{Discount}=0.25\times80=20\), so sale price is US$60.

    @@ -66,4 +234,18 @@ strand = "Number & Algebra"

    \(200\times1.12=224\).

    + +
    + Checkpoint: find 30% of 450 +
    +

    \(0.30\times450=135\).

    +
    +
    + +
    + Checkpoint: what percent is 18 out of 120? +
    +

    \(\frac{18}{120}\times100\%=15\%\).

    +
    +
    diff --git a/content/math/percentage-applications/core.html b/content/math/percentage-applications/core.html index c23dcf1..1ff2e03 100644 --- a/content/math/percentage-applications/core.html +++ b/content/math/percentage-applications/core.html @@ -1,23 +1,133 @@

    - Percent means “per hundred.” This chapter connects percent, fraction, and decimal forms and - applies them in everyday contexts. -

    - -

    Percent, fraction, decimal

    -

    - \(35\% = \frac{35}{100}=0.35\) + A percentage (percent) means “per hundred”. It is a way to + describe a ratio out of 100, written with the symbol %.

    - Convert by multiplying or dividing by 100 as needed. + Percentages are used to compare parts to a total in finance, science, population data, discounts, + tax, growth, and error rates. +

    + +

    What percent means

    +

    + \[ + p\% = \frac{p}{100}. + \] +

    +

    + For example: +

    +

    + \[ + 45\%=\frac{45}{100}=0.45. + \] +

    +

    + So 45% means “45 out of every 100.” +

    + +

    Percent, fraction, and decimal forms

    +

    + \[ + 35\%=\frac{35}{100}=0.35. + \] +

    +
      +
    • Percent \(\to\) decimal: divide by 100.
      • +
    • Decimal \(\to\) percent: multiply by 100 and add \(%\).
      • +
    • Fraction \(\to\) percent: convert to denominator 100 or decimal, then multiply by 100.
      • +
    + +

    Core examples

    +

    Example 1: class composition

    +

    + If 50% of students in a class are male, that means 50 out of every 100 students are male. If + there are 500 students: +

    +

    + \[ + 50\%\text{ of }500 = 0.50\times500 = 250. + \] +

    +

    + So 250 students are male. +

    + +

    Example 2: price increase

    +

    + A price rises by \$0.15 from \$2.50. The fractional increase is: +

    +

    + \[ + \frac{0.15}{2.50}=0.06. + \] +

    +

    + So the price increase is 6%. +

    + +
    +

    Range of percentages

    +

    + Percentages are not limited to 0% to 100%. In practice, values like 111% or -35% can appear, + especially for percent change. +

    +

    + \[ + 200\%\text{ of }40 = 2.00\times40 = 80. + \] +

    +

    + So 200% means twice the reference amount. +

    +
    + +

    Short history

    +

    + Before decimal notation became standard, many calculations were done with fractions out of 100. + In Roman contexts, some taxes were set as hundredth fractions. +

    +

    + Through the late Middle Ages and early modern period, denominator-100 arithmetic became common in + trade, profit/loss, and interest calculations. By the 17th century, quoting rates in hundredths + was standard in many settings. +

    + +

    Percent sign (%)

    +

    + The word “percent” comes from Latin per centum, meaning “by the hundred.” Over time, + written abbreviations of “per cento” contracted into the modern % symbol.

    Finding part and whole

    - To find \(p\%\) of a quantity \(Q\), use \(\frac{p}{100}\times Q\). + To find \(p\%\) of a quantity \(Q\):

    - \(18\%\text{ of }250 = 0.18\times250 = 45\) + \[ + \frac{p}{100}\times Q. + \] +

    +

    + \[ + 18\%\text{ of }250 = 0.18\times250 = 45. + \] +

    +

    + To find what percent one number is of another: +

    +

    + \[ + \text{percent}=\frac{\text{part}}{\text{whole}}\times100\%. + \] +

    +

    + Example: 50 apples as a percentage of 1250 apples: +

    +

    + \[ + \frac{50}{1250}=0.04,\quad 0.04\times100\%=4\%. + \]

    Percent increase and decrease

    @@ -26,7 +136,7 @@

    \[ - \%\text{ change}=\frac{\text{new}-\text{original}}{\text{original}}\times 100\%. + \%\text{ change}=\frac{\text{new}-\text{original}}{\text{original}}\times100\%. \]

    @@ -37,15 +147,73 @@

  • Decrease by \(r\%\): multiply by \(1-\frac{r}{100}\).
    • +

    Percentage of a percentage

    +

    + Convert both percentages to fractions (or decimals), then multiply: +

    +

    + \[ + 50\%\text{ of }40\%=\frac{50}{100}\times\frac{40}{100}=0.20=20\%. + \] +

    +

    + Avoid double-dividing by 100. For example: +

    +

    + \[ + 25\%=0.25,\text{ not }\frac{25\%}{100}. + \] +

    + +

    Always state “of what?”

    +

    + A percentage must be tied to a reference total (what counts as 100%). +

    +

    + Example: +

    +
      +
    • 60% of all students are female.
      • +
    • 10% of all students are computer science majors.
      • +
    • 5% of female students are computer science majors.
      • +
    +

    + Female CS majors as a percentage of all students: +

    +

    + \[ + 60\%\times5\%=3\%. + \] +

    +

    + As a percentage of CS majors: +

    +

    + \[ + \frac{3\%}{10\%}=30\%. + \] +

    +

    + So 30% of CS majors are female. +

    +

    Real-world applications

    Discounts, tax, markups, interest, and error rates are all percentage models.

    +

    + Reversing expressions does not change multiplication results: +

    +

    + \[ + 50\%\text{ of }20=10,\qquad 20\%\text{ of }50=10. + \] +

    - Checkpoint: 25% off a \$80 item + Checkpoint: 25% off a US$80 item
    -

    Discount \(=0.25\times80=20\), so sale price is \$60.

    +

    \(\text{Discount}=0.25\times80=20\), so sale price is US$60.

    @@ -55,4 +223,18 @@

    \(200\times1.12=224\).

    + +
    + Checkpoint: find 30% of 450 +
    +

    \(0.30\times450=135\).

    +
    +
    + +
    + Checkpoint: what percent is 18 out of 120? +
    +

    \(\frac{18}{120}\times100\%=15\%\).

    +
    +