/* ===========================================================================
lg.exercise-mc — the multiple-choice question, restyled
---------------------------------------------------------------------------
NO NEW MARKUP. This restyles what _app/grammar_v2.php and js/grammar_v2.js
already produce, rather than replacing it:
.panel-exercise-mc the whole exercise
.exercise-box one question (+ .exercise-box-answered)
.question the sentence with the gap
.answers (data-already-answered, data-result)
.answers-row a pair of options
.answer one option (+ .active-answer)
.mc_number the number, before answering
img.mc_icon correct.png / wrong.png, after
Restyling rather than re-rendering is deliberate. grammar_v2.js keys on
every one of those class names - it finds .answer by data-option, swaps
.mc_number for an ![]()
, toggles .active-answer, sets
opacity inline. Re-emitting this markup in the lg layer would mean porting
that script at the same time; restyling leaves it working untouched.
HOW CORRECT AND WRONG ARE TOLD APART
The only thing separating them in the DOM is the image FILENAME - the PHP
and the script both prepend correct.png or wrong.png. So:
.answer:has(.mc_icon[src*="correct"])
:has() is what makes this possible without touching the PHP, and it works
identically for a freshly clicked answer and for one restored on reload,
because both paths produce the same tag.
The PNG itself is hidden and the tick or cross is redrawn as a CSS circle.
The old images are a green tick and a red cross on transparent, sized for a
16px slot; the design wants a filled disc, which no amount of styling turns
a transparent PNG into.
SPECIFICITY
Everything is scoped under .panel-exercise-mc, which a.css never qualifies
its .answer rules with - so these win on descendant count without !important
and without touching a.css. Nothing here leaks to the vocabulary trainer,
which reuses .answer and .mc_number under .options__vocabulary.
=========================================================================== */
/* --- The exercise ------------------------------------------------------- */
/* The wrapper no longer carries a.css's "panel" class, so it has no padding,
border or ground of its own - the page container around it supplies the
gutters. All that is needed here is air under the progress bar. */
.panel-exercise-mc {
padding: 2rem 0 0;
}
@media (max-width: 560px) {
.panel-exercise-mc {
padding-top: 1.5rem;
}
}
/* --- One question ------------------------------------------------------- */
/* The old two-column table, undone.
a.css lays questions out as a table: .exercise-box is display:table-cell at
width:50%, and -left / -right add 3px dotted borders down the middle and
along the bottom to rule the cells apart. That is what was still showing
through the new cards - the boxes were sitting in a table and wearing its
gridlines.
Every variant is named, because -left and -right each re-declare the width
and the borders and neither inherits the reset from the base class. */
.panel-exercise-mc .exercise-box,
.panel-exercise-mc .exercise-box.exercise-box-full,
.panel-exercise-mc .exercise-box.exercise-box-left,
.panel-exercise-mc .exercise-box.exercise-box-right {
display: block;
width: auto;
margin: 0 0 2.5rem;
padding: 0;
border: 0;
background: none;
box-shadow: none;
float: none;
vertical-align: baseline;
}
.panel-exercise-mc .exercise-box:last-child {
margin-bottom: 0;
}
/* a.css dims a finished question. Here the answers carry their own state, so
the box stays at full strength and stays readable. */
.panel-exercise-mc .exercise-box.exercise-box-answered {
opacity: 1;
}
/* #questions is the table wrapper around them. */
.panel-exercise-mc #questions {
display: block;
width: auto;
}
/* --- Two per line ------------------------------------------------------- */
/* The PHP already pairs the questions: when the sheet is set to two per row it
opens a .questions_line around every pair and gives the boxes inside it
-left and -right. a.css made that a display:table-row of two table-cells.
The pairing markup is kept and only the mechanism changes - grid instead of
table - so the two columns are equal width without the cells needing to
declare 50% each, and the taller of a pair no longer stretches the shorter
one's background.
Only reset display here; #questions above is block, and a table-row inside a
block parent makes the browser generate an anonymous table around it, which
is the layout that was still leaking through.
A sheet set to anything other than two per row emits .exercise-box-full with
no .questions_line at all, so it keeps one question per line - the editor
chose that and this does not override it. */
.panel-exercise-mc .questions_line {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 3.5rem 3.5rem;
width: auto;
}
/* The gap owns the spacing inside a pair; the margin would double it. */
.panel-exercise-mc .questions_line > .exercise-box {
margin-bottom: 0;
}
/* --- One at a time ------------------------------------------------------ */
/* .lg-exercise--stepped is put on the panel by grammar_v2.js whenever it is
showing a single question, which is now the default at every width rather
than a phone layout. ?view=sheet turns it off and the pairing below applies
again.
The pairing has to go with it. The PHP wraps every PAIR of questions in a
.questions_line and the rule above makes that two columns; with one question
visible, the survivor kept its 1fr and sat in the left half of the screen
with an empty column beside it - which reads as a question that has lost its
partner rather than as the only one on the page.
Scoped to the line rather than undone on .exercise-box, so nothing here has
to know which of -left / -right the visible one happens to be. */
.panel-exercise-mc.lg-exercise--stepped .questions_line,
.panel-exercise-fulltext.lg-exercise--stepped .questions_line {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
/* Every question starts at the same place, whatever its position in the DOM.
Without this the page moved under the learner as they answered:
Q1, Q2 .questions_line one. No preceding line, so no margin-top.
Q3, Q4 .questions_line two. "+" matches on DOM ADJACENCY, not on what
is visible, so the 4.5rem meant to separate two lines of
questions was applied against a line that is display:none - and
the third question appeared 4.5rem lower than the first two.
The same goes the other way for the bottom: a sheet the editor set to one
question per row emits .exercise-box-full with no .questions_line at all,
so those boxes keep the 2.5rem margin-bottom the list layout gives them,
while a box inside a pair has it zeroed by the rule above.
None of that spacing means anything when exactly one question is on screen -
there is nothing on either side of it to be spaced from. Zeroed here rather
than reworked, and #questions above supplies whatever room the column needs.
Beats the max-width:900px block further down on specificity (0,4,0 against
0,3,0), so it holds at every width without being repeated inside it. */
.panel-exercise-mc.lg-exercise--stepped .questions_line + .questions_line,
.panel-exercise-fulltext.lg-exercise--stepped .questions_line + .questions_line {
margin-top: 0;
}
.panel-exercise-mc.lg-exercise--stepped .exercise-box,
.panel-exercise-fulltext.lg-exercise--stepped .exercise-box {
margin-bottom: 0;
}
/* A measure for the one question, the same one the result screen uses.
Without it the question ran the full 1150px of .container. A sentence with a
gap in it is something you READ, and at that width the eye loses the start
of the next line - which is the same reason the intro copy on the start page
is capped at 52ch. It mattered less when this was the phone layout and the
window did the capping.
#questions, not .exercise-box, so the stepper inside it is capped too and
the two line up: a strip of ten segments running 1150px over a 700px
question would read as a rule across the page rather than as its progress.
THE CAP IS SHARED WITH THE RESULT, deliberately. It is the same sheet, and
the result is rendered into this very panel when the last answer lands - a
column that changed width at that moment would read as the page jumping.
--lg-column-max is the one place to change both.
No side padding, because .lg-result has none either: the two have to come
out at the SAME measure, not at the same declared cap. Adding a gutter here
would make the question 48px narrower than the result card that replaces it
on the very same panel.
Only when stepped. ?view=sheet keeps the full width, where two columns of
questions need it and each one is half as wide anyway. */
/* --- Painted stepped, not stepped afterwards ---------------------------- */
/* One question on screen from the FIRST PAINT, before any script has run.
showOnly() in grammar_v2.js does the same thing, but it cannot do it soon
enough: it runs on document ready and jQuery is loaded async, so the browser
drew the whole sheet - every question at once, in the old layout - and then
threw all but one away. That flash was the bug.
_app/grammar_v2.php now puts .lg-exercise--stepped on the panel and
.lg-question--current on the one question that has no answer stored against
it, which is the same question nextOpenIndex() picks. The two cannot
disagree, because they are the same rule written twice.
THE :has() IS LOAD-BEARING. When every question has been answered - a
finished sheet reloaded before the result arrives - the PHP marks nothing as
current, and without the guard this would hide all of them and leave an
empty page. With it the whole selector stops matching and the sheet renders
as it always did, which is what the script does in that case too.
.questions_line needs no rule of its own: in stepped mode it is a one-column
grid with no gap and no margin, so a line whose only box is hidden collapses
to nothing. */
.panel-exercise-mc.lg-exercise--stepped #questions:has(.lg-question--current) .exercise-box,
.panel-exercise-fulltext.lg-exercise--stepped #questions:has(.lg-question--current) .exercise-box {
display: none;
}
/* #questions is in this selector for specificity and nothing else. The rule
above carries it inside :has(), and :has() takes the specificity of its
argument - so that one is (1,4,0) while this one would be (0,4,0). An ID
beats any number of classes, so without it the hide would win over the show
and the page would render empty. */
.panel-exercise-mc.lg-exercise--stepped #questions .exercise-box.lg-question--current,
.panel-exercise-fulltext.lg-exercise--stepped #questions .exercise-box.lg-question--current {
display: block;
}
.panel-exercise-mc.lg-exercise--stepped #questions,
.panel-exercise-fulltext.lg-exercise--stepped #questions {
max-width: var(--lg-column-max);
margin-left: auto;
margin-right: auto;
/* The room under the question, in one place. The boxes have their own
bottom margins zeroed above - they were 2.5rem on a one-per-row sheet
and 0 on a paired one, so the space below the last thing on screen
depended on how the editor had set the sheet up. */
padding-bottom: 2.5rem;
}
.panel-exercise-mc .questions_line + .questions_line {
margin-top: 4.5rem;
}
/* One per line once a column would be too narrow for a sentence with a gap in
it and two options beside each other. */
@media (max-width: 900px) {
.panel-exercise-mc .questions_line {
grid-template-columns: minmax(0, 1fr);
gap: 2rem;
}
.panel-exercise-mc .questions_line + .questions_line {
margin-top: 3rem;
}
}
/* --- The sentence ------------------------------------------------------- */
.panel-exercise-mc .question {
margin: 0 0 1.8rem;
color: var(--lg-text);
font-family: var(--lg-font-heading);
/* Was clamp(1.35rem, 1.1rem + 1vw, 1.9rem) - 20px to 28px, which reads as
a page headline rather than as a sentence to work on. The question is
the focus of the screen, so it stays clearly above the 1.05rem options,
but a gapped sentence is something you READ, and at 28px a ten-word one
wrapped to three lines.
The floor is not arbitrary: the gap inside is rendered with an inline
height:1.5rem (see the .button-stats span the exercise emits), so below
about 1.15rem the blank starts out-measuring the words around it. */
font-size: clamp(1.3rem, 1.2rem + 0.6vw, 1.6rem);
font-weight: 700;
line-height: 1.45;
}
/* The bracketed hint the editor writes as ((...)). Lighter and smaller: it is
an aside inside the sentence, not part of it. */
.panel-exercise-mc .question .exercise-hint {
color: var(--lg-text-muted);
font-family: var(--lg-font);
font-size: 0.8em;
font-weight: 400;
}
/* --- The blank ---------------------------------------------------------- */
/* The gap in the sentence. a.css gives .button-stats-pale a #E7E7E7 ground and
#B0B0B0 text, and the PHP used to pin #6A6A6A on top inline - three cool
greys sitting inside a warm sentence on a warm page, which is why it read as
a foreign object rather than as a missing word.
The inline colour and the inline height:1.5rem are gone from the PHP, so
both are settable here. The height especially: it was fixed while the
question is now a clamp, so the blank kept its own size while the words
around it grew.
Warm and translucent rather than a new opaque grey: the blank sits ON the
sentence, so tinting what is behind it keeps it in the same family as
whatever it is placed on.
The inner span the script writes into carries width in ch - see
$width_placeholder1 in _app/grammar_v2.php - so it is as wide as the longest
option at whatever size the question currently is. */
.panel-exercise-mc .question [data-gap] > .button-stats {
display: inline-flex;
align-items: center;
justify-content: center;
height: 1.5em;
min-width: 2.5ch;
border-radius: var(--lg-radius-sm);
background-color: rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.10);
color: var(--lg-text-muted);
font-family: inherit;
font-weight: 600;
vertical-align: baseline;
}
/* The slot inside the blank - the span the PHP sizes in ch and the script
writes into. It is a flex item of the box above, so it needs a height of its
own or the centring has nothing to centre: it used to arrive with an inline
height:1px and the "?" was painted from the middle of the blank downwards,
clear of the sentence's own line.
line-height:1 rather than a height: the item is then exactly as tall as the
glyph, the flex parent centres it honestly, and the 1.35em blank keeps its
size whatever the question's clamp is doing.
nowrap because the width is the longest option's, in ch - a word that
measures a shade wider than its own ch count must sit on one line and let
the blank clip it, rather than wrapping and pushing the sentence apart. */
.panel-exercise-mc .question [data-gap] > .button-stats > span {
display: block;
line-height: 1.2;
text-align: center;
white-space: nowrap;
overflow: hidden;
padding: 0 5px;
}
/* Filled in on hover by grammar_v2.js, which writes the option text into the
span below and drops its opacity to 0.7. Warmer and more solid then: it is
showing a real word rather than holding a space. */
.panel-exercise-mc .question [data-gap] > .button-stats:hover {
background-color: rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.16);
color: var(--lg-text);
}
/* --- The options -------------------------------------------------------- */
.panel-exercise-mc .answers {
display: flex;
flex-direction: column;
gap: 0.75rem;
width: auto;
float: none;
}
/* Two per row on a wide screen, one on a phone. grid rather than the old
float pair, so both cards in a row are the height of the taller one and a
two-line option does not leave its neighbour hanging. */
.panel-exercise-mc .answers-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 0.75rem;
width: auto;
float: none;
}
.panel-exercise-mc .answer {
display: flex;
align-items: center;
gap: 0.85rem;
width: auto;
min-height: 3.85rem;
margin: 0;
padding: 0.8rem 1.15rem;
float: none;
border: 1px solid var(--lg-border);
border-radius: var(--lg-radius-card);
/* background-color alone is not enough. a.css:2131 bundles
.button, .answer, .corrected-result
under a "background" SHORTHAND carrying
linear-gradient(to bottom, white 0%, white 20%, #F3F3F3 100%)
and a gradient is a background-IMAGE. Setting only the colour left it
painting over the top, which is the grey foot that kept showing on every
option. The image has to be cleared by name. */
background-color: var(--lg-surface);
background-image: none;
color: var(--lg-text);
font-family: var(--lg-font);
font-size: 1.05rem;
line-height: 1.4;
text-align: left;
transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
/* Only an unanswered option responds. a.css sets opacity inline on answered
ones; the rules below take the colour back off it. */
.panel-exercise-mc .answers[data-already-answered="0"] .answer.active-answer {
cursor: pointer;
}
/* The full shorthand, not just border-color. a.css:2111 sets
.active-answer:hover { border:3px solid #DBDBDB }
so overriding only the colour left the WIDTH at 3px and every option jumped
2px as the pointer crossed it. */
.panel-exercise-mc .answers[data-already-answered="0"] .answer.active-answer:hover {
border: 1px solid var(--lg-border-strong);
box-shadow: 0 6px 18px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.10);
}
/* a.css:2112 darkens the number to #B0B0B0 on hover. Keep the layer's disc. */
.panel-exercise-mc .answers[data-already-answered="0"] .answer.active-answer:hover > .mc_number {
background-color: var(--lg-surface-alt);
color: var(--lg-text);
}
/* --- The number --------------------------------------------------------- */
.panel-exercise-mc .answer .mc_number {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background-color: var(--lg-surface-alt);
background-image: none;
color: var(--lg-text-muted);
font-family: var(--lg-font);
font-size: 0.9rem;
font-weight: 600;
line-height: 1;
}
/* Waiting for the server. a.css puts a spinner gif here; keep it, but on the
layer's own disc so it does not change size mid-request. */
.panel-exercise-mc .answer .mc_number.mc_number_chosen {
background-size: 1.1rem 1.1rem;
background-position: center;
background-repeat: no-repeat;
}
/* --- Answered ----------------------------------------------------------- */
/* The PNG is hidden outright and the mark is drawn as ::before on the option.
Styling the ![]()
itself was the first attempt and does not work: the file
is transparent art at a different weight to this design, and there is no
combination of object-fit and background that turns a transparent PNG into
a filled disc. Hiding it and drawing the disc is both simpler and exact.
::before is the option's first child, and the script prepends the image as
the first child too - so the mark lands where the number was, and the text
does not shift when one is swapped for the other. */
.panel-exercise-mc .answer .mc_icon {
display: none;
}
.panel-exercise-mc .answer:has(.mc_icon)::before {
content: "";
flex: 0 0 auto;
width: 2rem;
height: 2rem;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center;
background-size: 1.05rem 1.05rem;
/* The strike below is on the option; the disc must not wear it. */
text-decoration: none;
}
/* Correct: a white tick on the site's green. */
.panel-exercise-mc .answer:has(.mc_icon[src*="correct"])::before {
background-color: var(--lg-ok-text);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}
/* Wrong: a white cross on the error red. */
.panel-exercise-mc .answer:has(.mc_icon[src*="wrong"])::before {
background-color: var(--lg-bad-text);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
/* The card behind the mark. :has() is the whole trick - the filename is the
only thing in the DOM that says which answer this was, and it is written
the same way by the PHP on reload and by the script on click. */
.panel-exercise-mc .answer:has(.mc_icon[src*="correct"]) {
border-color: var(--lg-ok-text);
background-color: var(--lg-ok-bg);
opacity: 1;
}
.panel-exercise-mc .answer:has(.mc_icon[src*="wrong"]) {
border-color: var(--lg-bad-text);
background-color: var(--lg-bad-bg);
opacity: 1;
/* Struck through, but still legible: seeing what you picked beside what
was right is the correction. */
text-decoration-color: var(--lg-bad-text);
text-decoration-thickness: 1px;
}
/* Everything not picked, once the question is closed. a.css sets opacity:0.6
inline, which this cannot override from a stylesheet - so the fade is left
to it and only the border is quietened. */
.panel-exercise-mc .answers[data-already-answered="1"] .answer {
border-color: var(--lg-border);
box-shadow: none;
}
/* ---------------------------------------------------------------------------
TEMPORARY: the per-question error reporter
_app/grammar_v2.php:1226 prints one .error-report per question - the flag
a learner uses to tell us a question is wrong. main2025.js:568 binds it.
Hidden while the new exercise design is being built, because it is styled
for the old layout and lands in the middle of the new one. Nothing is
removed: the markup, its data attributes and its handler are all untouched,
so deleting these four lines brings it straight back.
Scoped to .panel-exercise-mc, so reading, dictation and the fill-in-the-blank
exercises keep theirs.
REMOVE THIS BLOCK before the design goes live. A learner who cannot report a
broken question just stops trusting the ones that are fine.
--------------------------------------------------------------------------- */
.error-report {
display: none;
}
/* --- Narrow ------------------------------------------------------------- */
@media (max-width: 560px) {
.panel-exercise-mc .exercise-box {
margin-bottom: 2rem;
}
.panel-exercise-mc .question {
margin-bottom: 1.1rem;
}
/* One per row, and taller: on a phone these are the tap targets, and
44px is the floor below which they stop being reliable. */
.panel-exercise-mc .answers-row {
grid-template-columns: minmax(0, 1fr);
}
.panel-exercise-mc .answer {
min-height: var(--lg-tap-target);
padding: 0.9rem 1rem;
font-size: 1rem;
}
}
/* ===========================================================================
The question strip — .g2-progress
---------------------------------------------------------------------------
Built by js/grammar_v2.js (buildBar / renderSteps), not by PHP, and shown
only while one question at a time is on screen — which today is the phone
layout. The markup is:
.g2-progress
.g2-progress__steps one .g2-progress__step per question
.g2-progress__meta "3 of 10 answered" "2 correct (67%)"
WHAT THE COLOURS SAY
pending the track grey every other bar in this layer uses
current dark, the only near-black on the screen — where you are now
correct gold, the same gold as every score
wrong --lg-answer-wrong, provisional (see tokens.css)
done answered with no recorded result: the course-manager preview
Gold means "right" here rather than "done". That is a deliberate break from
.lg-exercise-progress__step in lg.exercise.css, which fills a segment coral
for any answer and explicitly does NOT distinguish a wrong one. That
component is not rendered anywhere — lg_exercise_progress() has no callers —
so nothing on screen contradicts this today, but the two want reconciling
before that one is ever wired up.
=========================================================================== */
.g2-progress {
margin-bottom: 2.1rem;
}
.g2-progress__steps {
display: flex;
align-items: center;
gap: 0.2rem;
}
/* flex:1 1 0, so twenty questions divide the same width as five rather than
running off the end. min-width keeps a long sheet's segments from collapsing
to a hairline — past that the row scrolls nothing and simply gets denser. */
.g2-progress__step {
flex: 1 1 0;
min-width: 5px;
height: 8px;
border-radius: 999px;
background-color: var(--lg-score-ring-track);
transition: background-color 0.2s ease;
}
/* The one being answered now. The brand coral - the colour that means "this
one, now" everywhere else on the site.
It is the only segment that is not a result, and coral is the only colour in
the palette that is not about results either: gold is what you scored, and
the two greys are what is spent and what is untouched. So the strip ends up
saying exactly what the palette already says - coral is where to act, gold
is what you earned.
This works where the two paler candidates before it did not. Cream sat at
231.7 against the pending grey's 226.5 and separated by warmth alone; coral
is at 117.6, darker than every other segment including gold, so it is found
by weight first and colour second. On a strip with no glyphs left on it,
that is the difference between a state you can see and one you have to look
for.
The one thing to hold to: coral must not appear anywhere else in this strip.
It is unambiguous here only because nothing beside it is competing for the
same reading, which is also why a wrong answer is a grey and not a red. */
.g2-progress__step--current {
background-color: var(--lg-red);
}
.g2-progress__step--correct {
background-color: var(--lg-score);
}
/* Wrong: a shade darker than a segment not yet reached, and nothing else.
It carried a small x for a while. At eight pixels that is a speck, and a
speck in one segment of six draws more attention to itself than to what it
means - the strip is a glance, not a legend. The shade alone does the job:
195.8 against the pending grey's 226.5 is a clear step down, and it reads as
a segment that has been spent without announcing how.
This does leave every state on this strip told by colour alone. The one to
watch is not this pair - it separates by weight - but current against
pending, which separates only by warmth. See --current above. */
.g2-progress__step--wrong {
background-color: var(--lg-answer-wrong);
}
/* Answered, result unknown. Muted: it has to read as spent rather than as a
verdict, because there is none to report. */
.g2-progress__step--done {
background-color: var(--lg-text-muted);
}
/* --- The counter under it ----------------------------------------------- */
.g2-progress__meta {
display: flex;
justify-content: space-between;
gap: 0.75rem;
padding-top: 0.45rem;
color: var(--lg-text-muted);
font-family: var(--lg-font);
font-size: 0.85rem;
font-variant-numeric: tabular-nums;
}