mirror of
https://github.com/HananoshikaYomaru/openfreebooks.git
synced 2026-11-12 20:45:52 +00:00
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.
This commit is contained in:
Hananoshika Yomaru
parent
057f2bebf2
commit
f74867fe4c
9 changed files with 1073 additions and 80 deletions
|
|
@ -370,9 +370,8 @@ strand = "Number & Algebra"
|
|||
</span>
|
||||
<span class="notation-decimal-demo__fence" aria-hidden="true">·</span>
|
||||
<span class="notation-decimal-demo__half" role="presentation">
|
||||
<span class="notation-decimal-demo__half-bar">
|
||||
<span class="notation-decimal-demo__half-on"></span>
|
||||
<span class="notation-decimal-demo__half-off"></span>
|
||||
<span class="notation-dots notation-dots--decimal notation-dots--half" aria-hidden="true">
|
||||
<span class="notation-dots__dot notation-dots__dot--half"></span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -359,9 +359,8 @@
|
|||
</span>
|
||||
<span class="notation-decimal-demo__fence" aria-hidden="true">·</span>
|
||||
<span class="notation-decimal-demo__half" role="presentation">
|
||||
<span class="notation-decimal-demo__half-bar">
|
||||
<span class="notation-decimal-demo__half-on"></span>
|
||||
<span class="notation-decimal-demo__half-off"></span>
|
||||
<span class="notation-dots notation-dots--decimal notation-dots--half" aria-hidden="true">
|
||||
<span class="notation-dots__dot notation-dots__dot--half"></span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,36 +11,103 @@ strand = "Number & Algebra"
|
|||
|
||||
<div class="book-prose">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<h2 id="number-line" class="book-prose__heading">Directed numbers on a number line</h2>
|
||||
<h2 id="history" class="book-prose__heading">A short history of the number line idea</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<h2 id="number-line" class="book-prose__heading">Drawing and reading a number line</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<ul>
|
||||
<li><strong>Right of 0:</strong> positive integers (\(+1, +2, +3, \dots\)).</li>
|
||||
<li><strong>Left of 0:</strong> negative integers (\(-1, -2, -3, \dots\)).</li>
|
||||
<li><strong>At 0:</strong> neither positive nor negative.</li>
|
||||
</ul>
|
||||
<p>
|
||||
In coordinate graphs, both axes are number lines: the horizontal \(x\)-axis and vertical
|
||||
\(y\)-axis.
|
||||
</p>
|
||||
<div class="book-callout book-callout--formula" role="note">
|
||||
<p class="book-callout__label">Compare quickly</p>
|
||||
<p class="book-formula">\(a > b\) means \(a\) is to the right of \(b\) on the number line.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="absolute-value" class="book-prose__heading">Absolute value and opposites</h2>
|
||||
<h2 id="compare" class="book-prose__heading">Comparing integers with position</h2>
|
||||
<p>
|
||||
Absolute value is distance from zero: \(|-7|=7\). Opposites have equal distance from zero and
|
||||
opposite signs, such as \(+5\) and \(-5\).
|
||||
</p>
|
||||
|
||||
<h2 id="add-subtract" class="book-prose__heading">Adding and subtracting integers</h2>
|
||||
<p>
|
||||
You can think of addition and subtraction as movement on the number line.
|
||||
Position gives order immediately:
|
||||
</p>
|
||||
<ul>
|
||||
<li>\(a+b\): start at \(a\), move by \(b\).</li>
|
||||
<li>\(a-b = a+(-b)\): subtracting is adding the opposite.</li>
|
||||
<li>If \(a\) is to the right of \(b\), then \(a > b\).</li>
|
||||
<li>If \(a\) is to the left of \(b\), then \(a < b\).</li>
|
||||
</ul>
|
||||
<p>
|
||||
Example: \(6-(-4)=6+4=10\).
|
||||
Example: \(-2 > -5\) because \(-2\) is to the right of \(-5\), even though both are negative.
|
||||
</p>
|
||||
<div class="math-widget-mount" data-widget="integer-compare-demo" data-pagefind-ignore></div>
|
||||
|
||||
<h2 id="absolute-value" class="book-prose__heading">Absolute value and opposites</h2>
|
||||
<p>
|
||||
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\).
|
||||
</p>
|
||||
<p>
|
||||
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\).
|
||||
</p>
|
||||
|
||||
<h2 id="operations" class="book-prose__heading">Operations as movement and grouping</h2>
|
||||
<h3 class="book-prose__heading">Addition and subtraction</h3>
|
||||
<p>
|
||||
Think of arithmetic as moves on the line:
|
||||
</p>
|
||||
<ul>
|
||||
<li>\(a+b\): start at \(a\), move \(b\) units (right if \(b>0\), left if \(b<0\)).</li>
|
||||
<li>\(a-b = a+(-b)\): subtracting means adding the opposite.</li>
|
||||
</ul>
|
||||
<p>
|
||||
Examples:
|
||||
\[
|
||||
-3+8=5,\qquad 4-9=-5,\qquad 6-(-4)=10.
|
||||
\]
|
||||
</p>
|
||||
<h3 class="book-prose__heading">Multiplication</h3>
|
||||
<p>
|
||||
Multiplication can be seen as repeated equal jumps. For instance, \(5\times3\) means three jumps
|
||||
of length 5 to the right, ending at 15.
|
||||
</p>
|
||||
<p>
|
||||
Sign rules come from direction:
|
||||
</p>
|
||||
<ul>
|
||||
<li>\((+)\times(+)=+\)</li>
|
||||
<li>\((+)\times(-)=-\)</li>
|
||||
<li>\((-)\times(+)=-\)</li>
|
||||
<li>\((-)\times(-)=+\)</li>
|
||||
</ul>
|
||||
<h3 class="book-prose__heading">Division</h3>
|
||||
<p>
|
||||
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(-)=+.
|
||||
\]
|
||||
</p>
|
||||
|
||||
<h2 id="zero-principle" class="book-prose__heading">Zero principle with tiles</h2>
|
||||
|
|
@ -71,4 +138,23 @@ strand = "Number & Algebra"
|
|||
</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<h2 id="why-zero-negative" class="book-prose__heading">Why zero and negatives matter</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
With integers, one set of laws works smoothly:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Subtraction is always possible: \(a-b=a+(-b)\).</li>
|
||||
<li>Opposites are explicit: every \(a\) has \(-a\), and \(a+(-a)=0\).</li>
|
||||
<li>Distributive structure stays consistent across signs:
|
||||
\(k(a+b)=ka+kb\), even when values are negative.</li>
|
||||
</ul>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
61
content/math/integer-foundations/chapter.scss
Normal file
61
content/math/integer-foundations/chapter.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,35 +1,102 @@
|
|||
<div class="book-prose">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<h2 id="number-line" class="book-prose__heading">Directed numbers on a number line</h2>
|
||||
<h2 id="history" class="book-prose__heading">A short history of the number line idea</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<h2 id="number-line" class="book-prose__heading">Drawing and reading a number line</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<ul>
|
||||
<li><strong>Right of 0:</strong> positive integers (\(+1, +2, +3, \dots\)).</li>
|
||||
<li><strong>Left of 0:</strong> negative integers (\(-1, -2, -3, \dots\)).</li>
|
||||
<li><strong>At 0:</strong> neither positive nor negative.</li>
|
||||
</ul>
|
||||
<p>
|
||||
In coordinate graphs, both axes are number lines: the horizontal \(x\)-axis and vertical
|
||||
\(y\)-axis.
|
||||
</p>
|
||||
<div class="book-callout book-callout--formula" role="note">
|
||||
<p class="book-callout__label">Compare quickly</p>
|
||||
<p class="book-formula">\(a > b\) means \(a\) is to the right of \(b\) on the number line.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="absolute-value" class="book-prose__heading">Absolute value and opposites</h2>
|
||||
<h2 id="compare" class="book-prose__heading">Comparing integers with position</h2>
|
||||
<p>
|
||||
Absolute value is distance from zero: \(|-7|=7\). Opposites have equal distance from zero and
|
||||
opposite signs, such as \(+5\) and \(-5\).
|
||||
</p>
|
||||
|
||||
<h2 id="add-subtract" class="book-prose__heading">Adding and subtracting integers</h2>
|
||||
<p>
|
||||
You can think of addition and subtraction as movement on the number line.
|
||||
Position gives order immediately:
|
||||
</p>
|
||||
<ul>
|
||||
<li>\(a+b\): start at \(a\), move by \(b\).</li>
|
||||
<li>\(a-b = a+(-b)\): subtracting is adding the opposite.</li>
|
||||
<li>If \(a\) is to the right of \(b\), then \(a > b\).</li>
|
||||
<li>If \(a\) is to the left of \(b\), then \(a < b\).</li>
|
||||
</ul>
|
||||
<p>
|
||||
Example: \(6-(-4)=6+4=10\).
|
||||
Example: \(-2 > -5\) because \(-2\) is to the right of \(-5\), even though both are negative.
|
||||
</p>
|
||||
<div class="math-widget-mount" data-widget="integer-compare-demo" data-pagefind-ignore></div>
|
||||
|
||||
<h2 id="absolute-value" class="book-prose__heading">Absolute value and opposites</h2>
|
||||
<p>
|
||||
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\).
|
||||
</p>
|
||||
<p>
|
||||
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\).
|
||||
</p>
|
||||
|
||||
<h2 id="operations" class="book-prose__heading">Operations as movement and grouping</h2>
|
||||
<h3 class="book-prose__heading">Addition and subtraction</h3>
|
||||
<p>
|
||||
Think of arithmetic as moves on the line:
|
||||
</p>
|
||||
<ul>
|
||||
<li>\(a+b\): start at \(a\), move \(b\) units (right if \(b>0\), left if \(b<0\)).</li>
|
||||
<li>\(a-b = a+(-b)\): subtracting means adding the opposite.</li>
|
||||
</ul>
|
||||
<p>
|
||||
Examples:
|
||||
\[
|
||||
-3+8=5,\qquad 4-9=-5,\qquad 6-(-4)=10.
|
||||
\]
|
||||
</p>
|
||||
<h3 class="book-prose__heading">Multiplication</h3>
|
||||
<p>
|
||||
Multiplication can be seen as repeated equal jumps. For instance, \(5\times3\) means three jumps
|
||||
of length 5 to the right, ending at 15.
|
||||
</p>
|
||||
<p>
|
||||
Sign rules come from direction:
|
||||
</p>
|
||||
<ul>
|
||||
<li>\((+)\times(+)=+\)</li>
|
||||
<li>\((+)\times(-)=-\)</li>
|
||||
<li>\((-)\times(+)=-\)</li>
|
||||
<li>\((-)\times(-)=+\)</li>
|
||||
</ul>
|
||||
<h3 class="book-prose__heading">Division</h3>
|
||||
<p>
|
||||
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(-)=+.
|
||||
\]
|
||||
</p>
|
||||
|
||||
<h2 id="zero-principle" class="book-prose__heading">Zero principle with tiles</h2>
|
||||
|
|
@ -60,4 +127,23 @@
|
|||
</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<h2 id="why-zero-negative" class="book-prose__heading">Why zero and negatives matter</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
With integers, one set of laws works smoothly:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Subtraction is always possible: \(a-b=a+(-b)\).</li>
|
||||
<li>Opposites are explicit: every \(a\) has \(-a\), and \(a+(-a)=0\).</li>
|
||||
<li>Distributive structure stays consistent across signs:
|
||||
\(k(a+b)=ka+kb\), even when values are negative.</li>
|
||||
</ul>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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<HTMLButtonElement>("[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 (
|
||||
<section class="math-widget integer-compare-demo" aria-labelledby="integer-compare-demo-title">
|
||||
<h3 id="integer-compare-demo-title" class="math-widget__title">
|
||||
Comparison demo: drag A and B on the number line
|
||||
</h3>
|
||||
<div class="math-widget__body" ref={rootRef}>
|
||||
<p class="math-widget__caption">
|
||||
Drag each point horizontally. The point farther right is greater. The highlighted segment
|
||||
shows absolute distance.
|
||||
</p>
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
class="integer-compare-demo__canvas"
|
||||
aria-label="Interactive number line for comparing integers"
|
||||
/>
|
||||
<p class="integer-compare-demo__readout" aria-live="polite">
|
||||
A = <span ref={valueARef}>-2.0</span>, B = <span ref={valueBRef}>-5.0</span>, so A{" "}
|
||||
<span ref={relationRef}>{">"}</span> B and |A - B| ={" "}
|
||||
<span ref={distanceRef}>3.0</span>
|
||||
</p>
|
||||
<div class="integer-compare-demo__actions">
|
||||
<button
|
||||
type="button"
|
||||
class="scenario-demo__btn integer-compare-demo__reset-btn"
|
||||
data-compare-reset
|
||||
aria-label="Reset example"
|
||||
title="Reset example"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-reload">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1 7.935 1.007 9.425 4.747" />
|
||||
<path d="M20 4v5h-5" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default IntegerCompareDemo;
|
||||
|
|
@ -11,24 +11,134 @@ strand = "Number & Algebra"
|
|||
|
||||
<div class="book-prose">
|
||||
<p>
|
||||
Percent means “per hundred.” This chapter connects percent, fraction, and decimal forms and
|
||||
applies them in everyday contexts.
|
||||
</p>
|
||||
|
||||
<h2 id="representations" class="book-prose__heading">Percent, fraction, decimal</h2>
|
||||
<p class="book-formula">
|
||||
\(35\% = \frac{35}{100}=0.35\)
|
||||
A <strong>percentage</strong> (percent) means <strong>“per hundred”</strong>. It is a way to
|
||||
describe a ratio out of 100, written with the symbol <strong>%</strong>.
|
||||
</p>
|
||||
<p>
|
||||
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>
|
||||
|
||||
<h2 id="meaning" class="book-prose__heading">What percent means</h2>
|
||||
<p class="book-formula">
|
||||
\[
|
||||
p\% = \frac{p}{100}.
|
||||
\]
|
||||
</p>
|
||||
<p>
|
||||
For example:
|
||||
</p>
|
||||
<p class="book-formula">
|
||||
\[
|
||||
45\%=\frac{45}{100}=0.45.
|
||||
\]
|
||||
</p>
|
||||
<p>
|
||||
So 45% means “45 out of every 100.”
|
||||
</p>
|
||||
|
||||
<h2 id="representations" class="book-prose__heading">Percent, fraction, and decimal forms</h2>
|
||||
<p class="book-formula">
|
||||
\[
|
||||
35\%=\frac{35}{100}=0.35.
|
||||
\]
|
||||
</p>
|
||||
<ul>
|
||||
<li>Percent \(\to\) decimal: divide by 100.</li>
|
||||
<li>Decimal \(\to\) percent: multiply by 100 and add \(%\).</li>
|
||||
<li>Fraction \(\to\) percent: convert to denominator 100 or decimal, then multiply by 100.</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="examples" class="book-prose__heading">Core examples</h2>
|
||||
<h3 class="book-prose__heading">Example 1: class composition</h3>
|
||||
<p>
|
||||
If 50% of students in a class are male, that means 50 out of every 100 students are male. If
|
||||
there are 500 students:
|
||||
</p>
|
||||
<p class="book-formula">
|
||||
\[
|
||||
50\%\text{ of }500 = 0.50\times500 = 250.
|
||||
\]
|
||||
</p>
|
||||
<p>
|
||||
So 250 students are male.
|
||||
</p>
|
||||
|
||||
<h3 class="book-prose__heading">Example 2: price increase</h3>
|
||||
<p>
|
||||
A price rises by \$0.15 from \$2.50. The fractional increase is:
|
||||
</p>
|
||||
<p class="book-formula">
|
||||
\[
|
||||
\frac{0.15}{2.50}=0.06.
|
||||
\]
|
||||
</p>
|
||||
<p>
|
||||
So the price increase is <strong>6%</strong>.
|
||||
</p>
|
||||
|
||||
<div class="book-callout" role="note">
|
||||
<p class="book-callout__label">Range of percentages</p>
|
||||
<p>
|
||||
Percentages are not limited to 0% to 100%. In practice, values like 111% or -35% can appear,
|
||||
especially for percent change.
|
||||
</p>
|
||||
<p class="book-formula">
|
||||
\[
|
||||
200\%\text{ of }40 = 2.00\times40 = 80.
|
||||
\]
|
||||
</p>
|
||||
<p>
|
||||
So 200% means <strong>twice</strong> the reference amount.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2 id="history" class="book-prose__heading">Short history</h2>
|
||||
<p>
|
||||
Before decimal notation became standard, many calculations were done with fractions out of 100.
|
||||
In Roman contexts, some taxes were set as hundredth fractions.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<h2 id="percent-sign" class="book-prose__heading">Percent sign (%)</h2>
|
||||
<p>
|
||||
The word “percent” comes from Latin <em>per centum</em>, meaning “by the hundred.” Over time,
|
||||
written abbreviations of “per cento” contracted into the modern <strong>%</strong> symbol.
|
||||
</p>
|
||||
|
||||
<h2 id="part-whole" class="book-prose__heading">Finding part and whole</h2>
|
||||
<p>
|
||||
To find \(p\%\) of a quantity \(Q\), use \(\frac{p}{100}\times Q\).
|
||||
To find \(p\%\) of a quantity \(Q\):
|
||||
</p>
|
||||
<p class="book-formula">
|
||||
\(18\%\text{ of }250 = 0.18\times250 = 45\)
|
||||
\[
|
||||
\frac{p}{100}\times Q.
|
||||
\]
|
||||
</p>
|
||||
<p class="book-formula">
|
||||
\[
|
||||
18\%\text{ of }250 = 0.18\times250 = 45.
|
||||
\]
|
||||
</p>
|
||||
<p>
|
||||
To find what percent one number is of another:
|
||||
</p>
|
||||
<p class="book-formula">
|
||||
\[
|
||||
\text{percent}=\frac{\text{part}}{\text{whole}}\times100\%.
|
||||
\]
|
||||
</p>
|
||||
<p>
|
||||
Example: 50 apples as a percentage of 1250 apples:
|
||||
</p>
|
||||
<p class="book-formula">
|
||||
\[
|
||||
\frac{50}{1250}=0.04,\quad 0.04\times100\%=4\%.
|
||||
\]
|
||||
</p>
|
||||
|
||||
<h2 id="change" class="book-prose__heading">Percent increase and decrease</h2>
|
||||
|
|
@ -37,7 +147,7 @@ strand = "Number & Algebra"
|
|||
</p>
|
||||
<p class="book-formula">
|
||||
\[
|
||||
\%\text{ change}=\frac{\text{new}-\text{original}}{\text{original}}\times 100\%.
|
||||
\%\text{ change}=\frac{\text{new}-\text{original}}{\text{original}}\times100\%.
|
||||
\]
|
||||
</p>
|
||||
<p>
|
||||
|
|
@ -48,15 +158,73 @@ strand = "Number & Algebra"
|
|||
<li>Decrease by \(r\%\): multiply by \(1-\frac{r}{100}\).</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="percent-of-percent" class="book-prose__heading">Percentage of a percentage</h2>
|
||||
<p>
|
||||
Convert both percentages to fractions (or decimals), then multiply:
|
||||
</p>
|
||||
<p class="book-formula">
|
||||
\[
|
||||
50\%\text{ of }40\%=\frac{50}{100}\times\frac{40}{100}=0.20=20\%.
|
||||
\]
|
||||
</p>
|
||||
<p>
|
||||
Avoid double-dividing by 100. For example:
|
||||
</p>
|
||||
<p class="book-formula">
|
||||
\[
|
||||
25\%=0.25,\text{ not }\frac{25\%}{100}.
|
||||
\]
|
||||
</p>
|
||||
|
||||
<h2 id="relative-base" class="book-prose__heading">Always state “of what?”</h2>
|
||||
<p>
|
||||
A percentage must be tied to a reference total (what counts as 100%).
|
||||
</p>
|
||||
<p>
|
||||
Example:
|
||||
</p>
|
||||
<ul>
|
||||
<li>60% of all students are female.</li>
|
||||
<li>10% of all students are computer science majors.</li>
|
||||
<li>5% of female students are computer science majors.</li>
|
||||
</ul>
|
||||
<p>
|
||||
Female CS majors as a percentage of all students:
|
||||
</p>
|
||||
<p class="book-formula">
|
||||
\[
|
||||
60\%\times5\%=3\%.
|
||||
\]
|
||||
</p>
|
||||
<p>
|
||||
As a percentage of CS majors:
|
||||
</p>
|
||||
<p class="book-formula">
|
||||
\[
|
||||
\frac{3\%}{10\%}=30\%.
|
||||
\]
|
||||
</p>
|
||||
<p>
|
||||
So <strong>30% of CS majors are female</strong>.
|
||||
</p>
|
||||
|
||||
<h2 id="applications" class="book-prose__heading">Real-world applications</h2>
|
||||
<p>
|
||||
Discounts, tax, markups, interest, and error rates are all percentage models.
|
||||
</p>
|
||||
<p>
|
||||
Reversing expressions does not change multiplication results:
|
||||
</p>
|
||||
<p class="book-formula">
|
||||
\[
|
||||
50\%\text{ of }20=10,\qquad 20\%\text{ of }50=10.
|
||||
\]
|
||||
</p>
|
||||
|
||||
<details class="book-question">
|
||||
<summary class="book-question__prompt">Checkpoint: 25% off a \$80 item</summary>
|
||||
<summary class="book-question__prompt">Checkpoint: 25% off a US$80 item</summary>
|
||||
<div class="book-question__solution">
|
||||
<p>Discount \(=0.25\times80=20\), so sale price is \$60.</p>
|
||||
<p>\(\text{Discount}=0.25\times80=20\), so sale price is US$60.</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
|
|
@ -66,4 +234,18 @@ strand = "Number & Algebra"
|
|||
<p>\(200\times1.12=224\).</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="book-question">
|
||||
<summary class="book-question__prompt">Checkpoint: find 30% of 450</summary>
|
||||
<div class="book-question__solution">
|
||||
<p>\(0.30\times450=135\).</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="book-question">
|
||||
<summary class="book-question__prompt">Checkpoint: what percent is 18 out of 120?</summary>
|
||||
<div class="book-question__solution">
|
||||
<p>\(\frac{18}{120}\times100\%=15\%\).</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,133 @@
|
|||
<div class="book-prose">
|
||||
<p>
|
||||
Percent means “per hundred.” This chapter connects percent, fraction, and decimal forms and
|
||||
applies them in everyday contexts.
|
||||
</p>
|
||||
|
||||
<h2 id="representations" class="book-prose__heading">Percent, fraction, decimal</h2>
|
||||
<p class="book-formula">
|
||||
\(35\% = \frac{35}{100}=0.35\)
|
||||
A <strong>percentage</strong> (percent) means <strong>“per hundred”</strong>. It is a way to
|
||||
describe a ratio out of 100, written with the symbol <strong>%</strong>.
|
||||
</p>
|
||||
<p>
|
||||
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>
|
||||
|
||||
<h2 id="meaning" class="book-prose__heading">What percent means</h2>
|
||||
<p class="book-formula">
|
||||
\[
|
||||
p\% = \frac{p}{100}.
|
||||
\]
|
||||
</p>
|
||||
<p>
|
||||
For example:
|
||||
</p>
|
||||
<p class="book-formula">
|
||||
\[
|
||||
45\%=\frac{45}{100}=0.45.
|
||||
\]
|
||||
</p>
|
||||
<p>
|
||||
So 45% means “45 out of every 100.”
|
||||
</p>
|
||||
|
||||
<h2 id="representations" class="book-prose__heading">Percent, fraction, and decimal forms</h2>
|
||||
<p class="book-formula">
|
||||
\[
|
||||
35\%=\frac{35}{100}=0.35.
|
||||
\]
|
||||
</p>
|
||||
<ul>
|
||||
<li>Percent \(\to\) decimal: divide by 100.</li>
|
||||
<li>Decimal \(\to\) percent: multiply by 100 and add \(%\).</li>
|
||||
<li>Fraction \(\to\) percent: convert to denominator 100 or decimal, then multiply by 100.</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="examples" class="book-prose__heading">Core examples</h2>
|
||||
<h3 class="book-prose__heading">Example 1: class composition</h3>
|
||||
<p>
|
||||
If 50% of students in a class are male, that means 50 out of every 100 students are male. If
|
||||
there are 500 students:
|
||||
</p>
|
||||
<p class="book-formula">
|
||||
\[
|
||||
50\%\text{ of }500 = 0.50\times500 = 250.
|
||||
\]
|
||||
</p>
|
||||
<p>
|
||||
So 250 students are male.
|
||||
</p>
|
||||
|
||||
<h3 class="book-prose__heading">Example 2: price increase</h3>
|
||||
<p>
|
||||
A price rises by \$0.15 from \$2.50. The fractional increase is:
|
||||
</p>
|
||||
<p class="book-formula">
|
||||
\[
|
||||
\frac{0.15}{2.50}=0.06.
|
||||
\]
|
||||
</p>
|
||||
<p>
|
||||
So the price increase is <strong>6%</strong>.
|
||||
</p>
|
||||
|
||||
<div class="book-callout" role="note">
|
||||
<p class="book-callout__label">Range of percentages</p>
|
||||
<p>
|
||||
Percentages are not limited to 0% to 100%. In practice, values like 111% or -35% can appear,
|
||||
especially for percent change.
|
||||
</p>
|
||||
<p class="book-formula">
|
||||
\[
|
||||
200\%\text{ of }40 = 2.00\times40 = 80.
|
||||
\]
|
||||
</p>
|
||||
<p>
|
||||
So 200% means <strong>twice</strong> the reference amount.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2 id="history" class="book-prose__heading">Short history</h2>
|
||||
<p>
|
||||
Before decimal notation became standard, many calculations were done with fractions out of 100.
|
||||
In Roman contexts, some taxes were set as hundredth fractions.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<h2 id="percent-sign" class="book-prose__heading">Percent sign (%)</h2>
|
||||
<p>
|
||||
The word “percent” comes from Latin <em>per centum</em>, meaning “by the hundred.” Over time,
|
||||
written abbreviations of “per cento” contracted into the modern <strong>%</strong> symbol.
|
||||
</p>
|
||||
|
||||
<h2 id="part-whole" class="book-prose__heading">Finding part and whole</h2>
|
||||
<p>
|
||||
To find \(p\%\) of a quantity \(Q\), use \(\frac{p}{100}\times Q\).
|
||||
To find \(p\%\) of a quantity \(Q\):
|
||||
</p>
|
||||
<p class="book-formula">
|
||||
\(18\%\text{ of }250 = 0.18\times250 = 45\)
|
||||
\[
|
||||
\frac{p}{100}\times Q.
|
||||
\]
|
||||
</p>
|
||||
<p class="book-formula">
|
||||
\[
|
||||
18\%\text{ of }250 = 0.18\times250 = 45.
|
||||
\]
|
||||
</p>
|
||||
<p>
|
||||
To find what percent one number is of another:
|
||||
</p>
|
||||
<p class="book-formula">
|
||||
\[
|
||||
\text{percent}=\frac{\text{part}}{\text{whole}}\times100\%.
|
||||
\]
|
||||
</p>
|
||||
<p>
|
||||
Example: 50 apples as a percentage of 1250 apples:
|
||||
</p>
|
||||
<p class="book-formula">
|
||||
\[
|
||||
\frac{50}{1250}=0.04,\quad 0.04\times100\%=4\%.
|
||||
\]
|
||||
</p>
|
||||
|
||||
<h2 id="change" class="book-prose__heading">Percent increase and decrease</h2>
|
||||
|
|
@ -26,7 +136,7 @@
|
|||
</p>
|
||||
<p class="book-formula">
|
||||
\[
|
||||
\%\text{ change}=\frac{\text{new}-\text{original}}{\text{original}}\times 100\%.
|
||||
\%\text{ change}=\frac{\text{new}-\text{original}}{\text{original}}\times100\%.
|
||||
\]
|
||||
</p>
|
||||
<p>
|
||||
|
|
@ -37,15 +147,73 @@
|
|||
<li>Decrease by \(r\%\): multiply by \(1-\frac{r}{100}\).</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="percent-of-percent" class="book-prose__heading">Percentage of a percentage</h2>
|
||||
<p>
|
||||
Convert both percentages to fractions (or decimals), then multiply:
|
||||
</p>
|
||||
<p class="book-formula">
|
||||
\[
|
||||
50\%\text{ of }40\%=\frac{50}{100}\times\frac{40}{100}=0.20=20\%.
|
||||
\]
|
||||
</p>
|
||||
<p>
|
||||
Avoid double-dividing by 100. For example:
|
||||
</p>
|
||||
<p class="book-formula">
|
||||
\[
|
||||
25\%=0.25,\text{ not }\frac{25\%}{100}.
|
||||
\]
|
||||
</p>
|
||||
|
||||
<h2 id="relative-base" class="book-prose__heading">Always state “of what?”</h2>
|
||||
<p>
|
||||
A percentage must be tied to a reference total (what counts as 100%).
|
||||
</p>
|
||||
<p>
|
||||
Example:
|
||||
</p>
|
||||
<ul>
|
||||
<li>60% of all students are female.</li>
|
||||
<li>10% of all students are computer science majors.</li>
|
||||
<li>5% of female students are computer science majors.</li>
|
||||
</ul>
|
||||
<p>
|
||||
Female CS majors as a percentage of all students:
|
||||
</p>
|
||||
<p class="book-formula">
|
||||
\[
|
||||
60\%\times5\%=3\%.
|
||||
\]
|
||||
</p>
|
||||
<p>
|
||||
As a percentage of CS majors:
|
||||
</p>
|
||||
<p class="book-formula">
|
||||
\[
|
||||
\frac{3\%}{10\%}=30\%.
|
||||
\]
|
||||
</p>
|
||||
<p>
|
||||
So <strong>30% of CS majors are female</strong>.
|
||||
</p>
|
||||
|
||||
<h2 id="applications" class="book-prose__heading">Real-world applications</h2>
|
||||
<p>
|
||||
Discounts, tax, markups, interest, and error rates are all percentage models.
|
||||
</p>
|
||||
<p>
|
||||
Reversing expressions does not change multiplication results:
|
||||
</p>
|
||||
<p class="book-formula">
|
||||
\[
|
||||
50\%\text{ of }20=10,\qquad 20\%\text{ of }50=10.
|
||||
\]
|
||||
</p>
|
||||
|
||||
<details class="book-question">
|
||||
<summary class="book-question__prompt">Checkpoint: 25% off a \$80 item</summary>
|
||||
<summary class="book-question__prompt">Checkpoint: 25% off a US$80 item</summary>
|
||||
<div class="book-question__solution">
|
||||
<p>Discount \(=0.25\times80=20\), so sale price is \$60.</p>
|
||||
<p>\(\text{Discount}=0.25\times80=20\), so sale price is US$60.</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
|
|
@ -55,4 +223,18 @@
|
|||
<p>\(200\times1.12=224\).</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="book-question">
|
||||
<summary class="book-question__prompt">Checkpoint: find 30% of 450</summary>
|
||||
<div class="book-question__solution">
|
||||
<p>\(0.30\times450=135\).</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="book-question">
|
||||
<summary class="book-question__prompt">Checkpoint: what percent is 18 out of 120?</summary>
|
||||
<div class="book-question__solution">
|
||||
<p>\(\frac{18}{120}\times100\%=15\%\).</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue