250 lines
8.5 KiB
CSS
250 lines
8.5 KiB
CSS
/* ============================================================================
|
|
questions.css — worksheet items + gated solutions
|
|
Sits beside editor-notes.css: same left-border-accent language, same
|
|
small-caps auto-headers, same .quarto-dark dark-mode hook.
|
|
|
|
Worksheet content is authored as Quarto MARKDOWN inside fenced divs, so
|
|
inline math is $ … $ and paragraphs/lists render normally. Choice letters
|
|
(A, B, C, D) are drawn by a CSS counter, so a choice is just a list item.
|
|
|
|
Semantic color coding (information, not decoration):
|
|
indigo = a solution / answer region
|
|
green = the correct choice / accepted answer
|
|
red = a named misconception
|
|
==========================================================================*/
|
|
|
|
:root {
|
|
--q-ink: #1f2328;
|
|
--q-muted: #5a5a5a;
|
|
--q-line: #e4e4e4;
|
|
--q-card-bg: #ffffff;
|
|
|
|
--sol-accent: #4b4f9a; /* indigo: "here be answers" */
|
|
--sol-bg: #f5f5fb;
|
|
--sol-rule: #dedcef;
|
|
|
|
--ok-ink: #2f6249; /* correct / accepted (matches editorial green) */
|
|
--ok-bg: #e7f2ec;
|
|
--mis-ink: #a13d2e; /* misconception (matches editorial red) */
|
|
}
|
|
|
|
/* ---- Question card ---- */
|
|
.q {
|
|
border: 1px solid var(--q-line);
|
|
border-radius: 6px;
|
|
background: var(--q-card-bg);
|
|
padding: 1.1rem 1.3rem 1.25rem;
|
|
margin: 1.6rem 0;
|
|
}
|
|
|
|
/* Header. Authored as [Question 1]{.q-num} [..]{.q-kind} [..]{.q-points}; */
|
|
.q-head {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.75rem;
|
|
margin-bottom: 0.7rem;
|
|
padding-bottom: 0.55rem;
|
|
border-bottom: 1px solid var(--q-line);
|
|
}
|
|
.q-head > p { display: contents; margin: 0; }
|
|
.q-num { font-weight: 700; letter-spacing: 0.01em; }
|
|
.q-kind {
|
|
font-variant: small-caps; letter-spacing: 0.06em;
|
|
font-size: 0.78rem; color: var(--q-muted);
|
|
}
|
|
.q-points {
|
|
margin-left: auto; font-size: 0.8rem; color: var(--q-muted);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.q-stem { margin: 0 0 0.9rem; }
|
|
.q-stem > p:first-child { margin-top: 0; }
|
|
.q-stem > p:last-child { margin-bottom: 0; }
|
|
|
|
/* ---- Multiple choice (a plain ordered list; letters via counter) ---- */
|
|
.q-choices > ol {
|
|
list-style: none; margin: 0; padding: 0;
|
|
display: grid; gap: 0.5rem;
|
|
counter-reset: choice;
|
|
}
|
|
.q-choices > ol > li {
|
|
position: relative;
|
|
padding: 0.55rem 0.7rem 0.55rem 3rem; /* room for the badge on the left */
|
|
border: 1px solid var(--q-line);
|
|
border-radius: 5px;
|
|
counter-increment: choice;
|
|
}
|
|
.q-choices > ol > li::before {
|
|
content: counter(choice, upper-alpha); /* A, B, C, D … */
|
|
position: absolute;
|
|
left: 0.55rem; top: 0.5rem;
|
|
display: grid; place-items: center;
|
|
width: 1.9rem; height: 1.9rem;
|
|
border: 1px solid var(--sol-accent);
|
|
border-radius: 50%;
|
|
font-weight: 700; font-size: 0.9rem;
|
|
color: var(--sol-accent);
|
|
}
|
|
|
|
/* ---- Free-response writing space (prints with room to write) ----- */
|
|
.q-response {
|
|
min-height: 6.5rem;
|
|
border: 1px dashed var(--q-line);
|
|
border-radius: 5px;
|
|
background:
|
|
repeating-linear-gradient(
|
|
to bottom, transparent, transparent 1.55rem,
|
|
var(--q-line) 1.55rem, var(--q-line) calc(1.55rem + 1px));
|
|
background-position: 0 0.9rem;
|
|
}
|
|
.q-response::before {
|
|
content: "Your answer";
|
|
display: block;
|
|
font-variant: small-caps; letter-spacing: 0.06em;
|
|
font-size: 0.72rem; color: var(--q-muted);
|
|
padding: 0.3rem 0.6rem 0;
|
|
}
|
|
|
|
/* ---- Solution slot (filled by solutions.js on unlock) ---- */
|
|
.qsol {
|
|
border-left: 3px solid var(--sol-accent);
|
|
border-radius: 0 4px 4px 0;
|
|
background: var(--sol-bg);
|
|
padding: 0.9rem 1.15rem;
|
|
margin-top: 1rem;
|
|
font-size: 0.95rem; line-height: 1.55;
|
|
}
|
|
.qsol::before {
|
|
content: "Solution";
|
|
display: block;
|
|
font-variant: small-caps; letter-spacing: 0.06em; font-weight: 600;
|
|
color: var(--sol-accent);
|
|
padding-bottom: 0.35rem; margin-bottom: 0.6rem;
|
|
border-bottom: 1px solid var(--sol-rule);
|
|
}
|
|
.qsol > p:first-of-type { margin-top: 0; }
|
|
.qsol > *:last-child { margin-bottom: 0; }
|
|
|
|
@keyframes sol-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; } }
|
|
.qsol.is-unlocked { animation: sol-in 180ms ease-out; }
|
|
@media (prefers-reduced-motion: reduce) { .qsol.is-unlocked { animation: none; } }
|
|
|
|
/* pieces inside a solution */
|
|
.sol-answer { font-size: 1.02rem; }
|
|
.sol-model {
|
|
border-left: 2px solid var(--ok-ink);
|
|
background: var(--ok-bg);
|
|
padding: 0.55rem 0.8rem; border-radius: 0 4px 4px 0; margin: 0.7rem 0;
|
|
}
|
|
.sol-model > p:first-child { margin-top: 0; }
|
|
.sol-model > p:last-child { margin-bottom: 0; }
|
|
.sol-explain { margin: 0.7rem 0; }
|
|
.sol-feedback-title {
|
|
font-variant: small-caps; letter-spacing: 0.05em; font-weight: 600;
|
|
color: var(--q-muted); margin: 0.9rem 0 0.4rem;
|
|
}
|
|
|
|
/* per-distractor feedback: badge in col 1, BOTH text spans in col 2 ---- */
|
|
.sol-feedback { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
|
|
.sol-feedback > li {
|
|
display: grid;
|
|
grid-template-columns: 1.9rem 1fr; /* badge | body */
|
|
gap: 0.6rem;
|
|
align-items: start;
|
|
}
|
|
.sol-feedback .opt {
|
|
display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
|
|
border-radius: 50%; font-weight: 700; font-size: 0.8rem;
|
|
color: var(--mis-ink); border: 1px solid var(--mis-ink);
|
|
}
|
|
.sol-feedback .opt-body { /* the single col-2 cell; fills 1fr */
|
|
display: grid; gap: 0.25rem;
|
|
}
|
|
.sol-feedback .opt-mis { color: var(--mis-ink); font-style: italic; }
|
|
.sol-feedback .opt-why { color: var(--q-ink); }
|
|
|
|
/* rubric table */
|
|
.sol-rubric { width: 100%; border-collapse: collapse; margin: 0.7rem 0; font-size: 0.92rem; }
|
|
.sol-rubric caption {
|
|
text-align: left; font-variant: small-caps; letter-spacing: 0.05em;
|
|
font-weight: 600; color: var(--q-muted); padding-bottom: 0.35rem;
|
|
}
|
|
.sol-rubric th, .sol-rubric td {
|
|
border-top: 1px solid var(--sol-rule); padding: 0.4rem 0.55rem; text-align: left;
|
|
vertical-align: top;
|
|
}
|
|
.sol-rubric th:first-child, .sol-rubric td:first-child {
|
|
width: 2.5rem; text-align: center; font-weight: 700; color: var(--ok-ink);
|
|
}
|
|
|
|
.sol-accepted { margin: 0.7rem 0; }
|
|
.sol-ref { margin-top: 0.7rem; font-size: 0.85rem; color: var(--q-muted); }
|
|
|
|
/* badges */
|
|
.badge {
|
|
display: inline-block; font-variant: small-caps; letter-spacing: 0.05em;
|
|
font-size: 0.72rem; font-weight: 700; padding: 0.05em 0.5em;
|
|
border-radius: 999px; margin-right: 0.35em;
|
|
background: var(--sol-rule); color: var(--sol-accent);
|
|
}
|
|
.badge-correct { background: var(--ok-bg); color: var(--ok-ink); }
|
|
|
|
/* ---- The password gate --- */
|
|
.solutions-gate { margin: 1.4rem 0; }
|
|
.gate-inner {
|
|
display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
|
|
padding: 0.75rem 1rem;
|
|
border: 1px solid var(--sol-rule); border-left: 3px solid var(--sol-accent);
|
|
border-radius: 0 5px 5px 0; background: var(--sol-bg);
|
|
}
|
|
.gate-lock {
|
|
width: 0.8rem; height: 0.7rem; border: 2px solid var(--sol-accent);
|
|
border-radius: 2px; position: relative; flex: none;
|
|
}
|
|
.gate-lock::before {
|
|
content: ""; position: absolute; left: 50%; top: -0.42rem; transform: translateX(-50%);
|
|
width: 0.5rem; height: 0.42rem; border: 2px solid var(--sol-accent);
|
|
border-bottom: none; border-radius: 4px 4px 0 0;
|
|
}
|
|
.gate-lock.is-open::before { left: 20%; }
|
|
.gate-label { font-variant: small-caps; letter-spacing: 0.05em; font-weight: 600; color: var(--sol-accent); }
|
|
.gate-input {
|
|
flex: 1 1 12rem; min-width: 9rem;
|
|
padding: 0.4rem 0.6rem; border: 1px solid var(--sol-rule);
|
|
border-radius: 4px; background: var(--q-card-bg); color: var(--q-ink);
|
|
}
|
|
.gate-btn {
|
|
padding: 0.42rem 1rem; border: 1px solid var(--sol-accent); border-radius: 4px;
|
|
background: var(--sol-accent); color: #fff; font-weight: 600; cursor: pointer;
|
|
}
|
|
.gate-btn:hover { filter: brightness(1.08); }
|
|
.gate-btn:disabled { opacity: 0.6; cursor: progress; }
|
|
.gate-btn-ghost { background: transparent; color: var(--sol-accent); }
|
|
.gate-status { flex-basis: 100%; margin: 0; font-size: 0.85rem; color: var(--q-muted); }
|
|
.solutions-gate.is-error .gate-input { border-color: var(--mis-ink); }
|
|
.solutions-gate.is-error .gate-status { color: var(--mis-ink); }
|
|
.gate-input:focus-visible, .gate-btn:focus-visible { outline: 2px solid var(--sol-accent); outline-offset: 2px; }
|
|
|
|
@media print {
|
|
.solutions-gate { display: none; }
|
|
.qsol[hidden] { display: none; }
|
|
.q { break-inside: avoid; border-color: #bbb; }
|
|
}
|
|
|
|
/* ============================ Dark mode ================================= */
|
|
.quarto-dark {
|
|
--q-ink: #dfe2e7;
|
|
--q-muted: #a7adb6;
|
|
--q-line: #333a44;
|
|
--q-card-bg: #1b1f26;
|
|
|
|
--sol-accent: #9aa0e6;
|
|
--sol-bg: #20222e;
|
|
--sol-rule: #343755;
|
|
|
|
--ok-ink: #9dd3b4;
|
|
--ok-bg: #1b241f;
|
|
--mis-ink: #e0a498;
|
|
}
|
|
.quarto-dark .gate-btn { color: #14161c; }
|