Each one is a statement or scenario with a right answer and a line of feedback.
The quiz
Its title, opening line and the two answers every question offers.
Nothing is recorded
This marks itself in the student’s browser and keeps nothing. Refreshing the page clears it, and no score reaches you. It is a self-check, not an assessment. Pair it with a reflection field if you need evidence.
Used as “Advert 1 of 5”.
Look
A colour, and what to show around the questions.
Headings, selected answer, borders
Show
Each quiz gets its own name so two on the same page never
interfere. Tick this only to regenerate it.
Results
Advice shown at the end, depending on the score.
!
Preview
Paste this into your platform’s source or HTML view, the </> button in most editors. Pasted into the normal typing view it shows as text instead.
How this works
A quiz that marks itself with no JavaScript at all, so it survives the security filters
that strip scripts out of most platforms, and no file is hosted anywhere. What you copy is
the whole thing.
The mechanism
Each question is a pair of radio buttons, and the correct one carries a marker class.
CSS shows the matching feedback when it is chosen.
The three feedback panels — not answered, right, wrong — are stacked in a
single grid cell with all but one hidden by
visibility: hidden. That keeps the block exactly the same
height whatever the student clicks, which matters where a growing activity spills over
the Submit button beneath it.
The score is a pair of CSS counters, incremented by whichever radios are checked.
The closing advice uses :has() to work out how they did.
Why longer quizzes cost more
CSS can display a counter but cannot compare one, so “at least four correct”
has no arithmetic form — every winning combination has to be written out. Five
questions with a pass mark of three is ten combinations, which is nothing. Nine questions
with a pass mark of five is a hundred and twenty-six, and the code balloons.
The builder tells you the cost as you go. If it gets uncomfortable, either shorten the
quiz or turn the tailored advice off — the score itself is cheap at any length,
because a counter needs no enumeration.
Worth knowing
Nothing is recorded. No score reaches you and refreshing clears it. If you need
evidence of completion, pair the quiz with a reflection or evidence field in the same
activity and ask students to say what they got.
The answers are in the source. Anyone who views the page code can see which
option is marked correct. That is unavoidable without a server, and fine for a
self-check — but do not use this for anything that counts.
On an older browser without :has() support, the
per-question feedback and the score still work, because those use plain sibling selectors
and counters. Only the progress squares and the closing advice stop responding. It
degrades quietly rather than breaking.
Every quiz gets a unique name so two on one page never interfere. Written by
hand these share ids and radio group names, which makes the second quiz answer the
first one’s questions.
Colours are checked for contrast. The selected answer is white text on your
brand colour, so whatever you pick is darkened just enough to clear 4.5:1.
Keep the focus outlines. They are how keyboard users see where they are.