/* ================================================================
fraction-of-set.css
----------------------------------------------------------------
Styles for the "Fraction of a Whole Number / Quantity" skill group
on the Class 3 Math page:
- A.1 Fraction of a Set (Grouping) — "What is 1/3 of 12
candies?" A row of emoji objects is split into d equal
boxed groups (the same "equal groups" picture Division
draws for grouping/S1-S2, just relabeled as a fraction
question) using the new .frac-set-group* classes below,
with the first n groups already shaded to show the
fraction being asked about. The fraction itself is
written as a small stacked numerator/bar/denominator
right inside the question sentence — the new
.frac-set-inline-frac* classes below — instead of a
plain "2/4", since a spelled-out inline fraction reads as
division to a child this age. The four numeric answer
chips underneath reuse classes already styled elsewhere
on this page — .frac-friendly-picker /
.quiz-number-options / .quiz-number-opt from fraction.css
/ fraction-rwv.js, the exact same markup Fraction Match
and Real-World Fraction Spotting use for their own answer
chips — so this file only needs to add the grouped-
picture layout and the inline fraction symbol.
- A.2 Fraction of a Number (Numeric) — "1/4 of 20 = ?" The
same "n/d of a quantity" idea as A.1, with no picture at
all: the equation itself is the whole card, using A.1's
stacked-fraction look reused at a larger size (new
.frac-num-* classes below) followed by "of 20 = ?" in
matching weight. Answer chips are the same reused
.frac-friendly-picker/.quiz-number-options/.quiz-number-opt
markup as A.1.
- A.3 Unit Fraction vs Non-Unit Fraction of a Number — "1/5 of
15" then "3/5 of 15". A muted, dashed "given" row shows
the unit fraction already worked out (new .fos-scale-*
classes below, reusing A.2's stacked-fraction look at a
smaller size), then a "× n" scale arrow, then the real
question — the non-unit fraction of the same quantity —
in A.2's own full-size .frac-num-equation. The child sees
explicitly that the non-unit answer is just the unit
fraction's value multiplied by the numerator. Answer
chips are the same reused
.frac-friendly-picker/.quiz-number-options/.quiz-number-opt
markup as A.1/A.2.
- A.4 Real-World Fraction-of-Quantity Problems — "3/4 of the 20
kids brought lunch — how many?" A one-line word-problem
wrapper around the exact same "n/d of a quantity"
arithmetic as A.2/A.3: a big scene emoji (new
.fos-word-* classes below) sits above a plain-language
sentence that uses A.1's own inline stacked-fraction
(.frac-set-inline-frac) inside it, so the fraction itself
still reads unambiguously rather than as a division sign.
Answer chips are the same reused
.frac-friendly-picker/.quiz-number-options/.quiz-number-opt
markup as every other skill in this group.
This file only adds the .frac-set-group*, .frac-set-inline-frac*,
.frac-num-*, .fos-scale-*, and .fos-word-* classes. It depends on
classes already styled elsewhere:
- .frac-friendly-picker / .quiz-number-options / .quiz-number-opt
from fraction.css, for the answer chips
- .bq-* / .quiz-* classes from quiz-popup-theme.css and
quiz-modal-responsive.css, for the modal shell, slot tracker,
progress line, feedback banner, and star-reward summary card
so this file must be loaded AFTER fraction.css and fraction-rwv.css,
e.g.:
================================================================ */
/* ---------- Fraction of a Set (Grouping) (A.1) ---------- */
/* The fraction inside the question sentence — a small stacked
numerator/bar/denominator sitting inline with the surrounding
text, instead of a plain "2/4" that a child this age could easily
misread as a division problem. Sized in em so it scales with
.quiz-question's own font-size at every breakpoint, with no
separate responsive rules needed. */
.frac-set-inline-frac {
display: inline-flex;
flex-direction: column;
align-items: center;
vertical-align: middle;
line-height: 1.05;
margin: 0 5px;
transform: translateY(-1px);
}
.frac-set-inline-num,
.frac-set-inline-den {
font-weight: 800;
font-size: 0.82em;
}
.frac-set-inline-bar {
width: 100%;
height: 2px;
min-width: 14px;
background: currentColor;
margin: 1px 0;
border-radius: 1px;
}
/* The grouped picture: one bordered box per group, wrapping onto as
many rows as it needs — deliberately NOT a fixed-column grid, so
any denominator from 2 to 6 self-arranges without extra CSS and
never forces a horizontal scroll on a phone screen. */
.frac-set-groups {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap: 14px;
width: 100%;
box-sizing: border-box;
margin: 16px auto 8px;
}
/* Each group is its own little "box of objects" — exactly the
picture Division draws for grouping, just reused here. Flexible
min/max width (not a fixed px) lets 2-6 boxes always fit a normal
phone width without needing per-count breakpoints. */
.frac-set-group {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
justify-content: center;
gap: 4px;
flex: 0 1 auto;
min-width: 74px;
max-width: 150px;
box-sizing: border-box;
padding: 10px 8px;
border-radius: 14px;
border: 3px solid var(--line);
background: transparent;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
/* Pre-shaded groups (the numerator's worth of groups) — a calm
highlight, not a grading color, since nothing here has been
answered yet; this is just showing the fraction, same spirit as
the shaded wedge/segment look every other fraction shape on this
page already uses. */
.frac-set-group.is-shaded {
border-color: var(--sky);
background: rgba(46,155,245,0.12);
box-shadow: 0 0 0 3px rgba(46,155,245,0.14);
}
.frac-set-item {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
line-height: 1;
user-select: none;
}
/* ---------- Fraction of a Number (Numeric) (A.2) ---------- */
/* The bare equation row — no picture here at all, just the stacked
fraction from A.1 reused at a bigger size, followed by "of
= ?" in matching weight/size. */
.frac-num-equation {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
width: 100%;
box-sizing: border-box;
margin: 20px auto 14px;
font-size: 30px;
font-weight: 800;
color: var(--text-dark);
}
/* A.1's inline fraction reused here at a larger scale, since it's
now the centerpiece of the card rather than sitting inside a
sentence. */
.frac-num-inline-frac {
font-size: 1em;
margin: 0 2px;
}
.frac-num-equation-rest {
white-space: nowrap;
}
/* ---------- Unit vs Non-Unit Fraction of a Number (A.3) ---------- */
/* Wraps the "given" unit-fraction row, the scale arrow, and the real
(non-unit) question equation into one vertically-stacked group. */
.fos-scale-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 100%;
box-sizing: border-box;
margin: 16px auto 4px;
}
/* The already-worked-out unit fraction ("1/5 of 15 = 3") — styled as
a muted, dashed "given" pill so it visibly reads as a fact handed
to the child rather than something they still need to solve. Reuses
A.1/A.2's own stacked-fraction markup at its default (smaller)
size, since this row is a supporting hint, not the main question. */
.fos-scale-given {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 4px;
font-family: 'Nunito', sans-serif;
font-size: 18px;
font-weight: 700;
color: #6b7280;
background: #f8f9fb;
border: 2px dashed var(--line, #e2e8f0);
border-radius: 14px;
padding: 8px 16px;
box-sizing: border-box;
max-width: 100%;
}
.fos-scale-given-label {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #9ca3af;
width: 100%;
text-align: center;
margin-bottom: 2px;
}
/* The "× n" scale indicator sitting between the given row and the
real question, spelling out in words exactly what the child needs
to do with the unit fraction's value. */
.fos-scale-arrow {
display: flex;
align-items: center;
gap: 6px;
font-family: 'Nunito', sans-serif;
font-weight: 800;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--sky, #2e9bf5);
}
.fos-scale-arrow i { font-size: 16px; }
/* The real question — reuses A.2's own .frac-num-equation full-size
look outright; this class only trims the top margin since it now
follows the given row + arrow instead of sitting at the top of the
card. */
.fos-scale-main.frac-num-equation {
margin: 4px auto 14px;
}
/* ---------- Real-World Fraction-of-Quantity Problems (A.4) ---------- */
/* A big single emoji sitting above the word-problem sentence, giving
the scenario ("kids brought lunch", "candies were red"...) a quick
visual anchor before the child reads the text. */
.fos-word-scene {
font-size: 54px;
line-height: 1;
text-align: center;
margin: 4px 0 6px;
user-select: none;
}
/* ---------- phone responsiveness ---------- */
/* Only gaps, padding, box sizing, and icon size shrink at each
breakpoint — the flex-wrap layout itself needs no repositioning
math, so common Android widths (360px Galaxy-class up through
412-430px Pixel/large-phone class) always lay the groups out
cleanly with no horizontal scrolling. */
@media (max-width: 560px) {
.frac-set-groups { gap: 10px; margin: 12px auto 6px; }
.frac-set-group { gap: 3px; min-width: 62px; max-width: 120px; padding: 8px 6px; border-radius: 12px; }
.frac-set-item { width: 22px; height: 22px; font-size: 16px; }
.frac-num-equation { font-size: 24px; gap: 5px; margin: 16px auto 10px; }
.fos-scale-wrap { gap: 6px; margin: 12px auto 2px; }
.fos-scale-given { font-size: 15px; padding: 7px 12px; }
.fos-scale-given-label { font-size: 10px; }
.fos-scale-arrow { font-size: 12px; }
.fos-scale-arrow i { font-size: 14px; }
.fos-scale-main.frac-num-equation { font-size: 24px; margin: 2px auto 10px; }
.fos-word-scene { font-size: 42px; margin: 2px 0 4px; }
}
@media (max-width: 380px) {
.frac-set-groups { gap: 8px; }
.frac-set-group { min-width: 54px; max-width: 100px; padding: 7px 5px; }
.frac-set-item { width: 19px; height: 19px; font-size: 14px; }
.frac-num-equation { font-size: 20px; gap: 4px; margin: 14px auto 8px; }
.fos-scale-given { font-size: 13px; padding: 6px 10px; }
.fos-scale-main.frac-num-equation { font-size: 20px; }
.fos-word-scene { font-size: 36px; }
}