- 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.
-- 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. +
+ ++ 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. +
++ 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 is distance from zero: \(|-7|=7\). Opposites have equal distance from zero and - opposite signs, such as \(+5\) and \(-5\). -
- -- You can think of addition and subtraction as movement on the number line. + Position gives order immediately:
- Example: \(6-(-4)=6+4=10\). + Example: \(-2 > -5\) because \(-2\) is to the right of \(-5\), even though both are negative. +
+ + ++ 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\). +
+ ++ Think of arithmetic as moves on the line: +
++ Examples: + \[ + -3+8=5,\qquad 4-9=-5,\qquad 6-(-4)=10. + \] +
++ 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: +
++ 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 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.
-- 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. +
+ ++ 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. +
++ 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 is distance from zero: \(|-7|=7\). Opposites have equal distance from zero and - opposite signs, such as \(+5\) and \(-5\). -
- -- You can think of addition and subtraction as movement on the number line. + Position gives order immediately:
- Example: \(6-(-4)=6+4=10\). + Example: \(-2 > -5\) because \(-2\) is to the right of \(-5\), even though both are negative. +
+ + ++ 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\). +
+ ++ Think of arithmetic as moves on the line: +
++ Examples: + \[ + -3+8=5,\qquad 4-9=-5,\qquad 6-(-4)=10. + \] +
++ 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: +
++ 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 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- Percent means “per hundred.” This chapter connects percent, fraction, and decimal forms and - applies them in everyday contexts. -
- -- \(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. +
+ ++ \[ + p\% = \frac{p}{100}. + \] +
++ For example: +
++ \[ + 45\%=\frac{45}{100}=0.45. + \] +
++ So 45% means “45 out of every 100.” +
+ ++ \[ + 35\%=\frac{35}{100}=0.35. + \] +
++ 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. +
+ ++ 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. +
++ 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. +
+ ++ The word “percent” comes from Latin per centum, meaning “by the hundred.” Over time, + written abbreviations of “per cento” contracted into the modern % symbol.
- 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\%. + \]
\[ - \%\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"
+ 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}. + \] +
+ ++ A percentage must be tied to a reference total (what counts as 100%). +
++ Example: +
++ 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. +
+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. + \] +
Discount \(=0.25\times80=20\), so sale price is \$60.
+\(\text{Discount}=0.25\times80=20\), so sale price is US$60.
\(200\times1.12=224\).
\(0.30\times450=135\).
+\(\frac{18}{120}\times100\%=15\%\).
+- Percent means “per hundred.” This chapter connects percent, fraction, and decimal forms and - applies them in everyday contexts. -
- -- \(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. +
+ ++ \[ + p\% = \frac{p}{100}. + \] +
++ For example: +
++ \[ + 45\%=\frac{45}{100}=0.45. + \] +
++ So 45% means “45 out of every 100.” +
+ ++ \[ + 35\%=\frac{35}{100}=0.35. + \] +
++ 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. +
+ ++ 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. +
++ 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. +
+ ++ The word “percent” comes from Latin per centum, meaning “by the hundred.” Over time, + written abbreviations of “per cento” contracted into the modern % symbol.
- 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\%. + \]
\[ - \%\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 @@
+ 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}. + \] +
+ ++ A percentage must be tied to a reference total (what counts as 100%). +
++ Example: +
++ 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. +
+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. + \] +
Discount \(=0.25\times80=20\), so sale price is \$60.
+\(\text{Discount}=0.25\times80=20\), so sale price is US$60.
\(200\times1.12=224\).
\(0.30\times450=135\).
+\(\frac{18}{120}\times100\%=15\%\).
+