Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | 153x 12x 162x 214x 24x 190x 190x 14x 14x 20x 23x 23x 23x 9x 14x 4x 4x 3x 1x 54x 54x 16x 38x | /**
* Theme-aware surface colors for the student "take assignment" question
* components (multiple-choice, checkbox, drag-and-drop, dropdown).
*
* StudentQuestion.scss previously hardcoded light-only hex values (#fff,
* #fafbfc, ...) for these surfaces, so the question stem and choice text
* always rendered on a white/near-white box regardless of the app's dark
* mode. These helpers replace that with the same solid-color-per-mode
* technique already used by the teacher-side question-display components
* (see question-bank/question-display/utils/questionCardStyles.js):
* TinyMCE iframes and raw dangerouslySetInnerHTML strings can't
* alpha-composite against a themed page background, so each state gets an
* explicit solid color per mode instead of a semi-transparent overlay.
*/
function isDark(theme) {
return theme.palette.mode === "dark";
}
/**
* Single font size for every take-assignment question type — question stems,
* math formulas/symbols (the math-formula plugin's `.mfe-formula` rule is
* `font-size: 1em`, so it tracks whatever container size it's rendered in),
* choice text, and the free-response answer input all read this so a student
* never sees one question type rendered smaller/larger than another.
*/
export const STUDENT_QUESTION_FONT_SIZE = "22px";
/** Solid surface for the question stem card (wraps the TinyMCE read-only iframe). */
export function questionContentBg(theme) {
return theme.palette.background.paper;
}
/** Solid surface for a multiple-choice/checkbox option row. */
export function choiceItemBg(theme, { selected = false, hovered = false } = {}) {
if (selected) {
return isDark(theme) ? "#1a3a5c" : "#e3f2fd";
}
Iif (hovered) {
return isDark(theme) ? "#2c2f34" : "#f8f9fc";
}
return theme.palette.background.paper;
}
/** Unselected choice-letter badge (the "selected" state stays a solid primary blue in both modes). */
export function choiceLetterBg(theme) {
return isDark(theme) ? "#33383f" : "#f5f5f5";
}
export function choiceLetterColor(theme) {
return isDark(theme) ? theme.palette.grey[400] : "#666666";
}
/** Neutral surface for the drag-and-drop / dropdown question stem and the drag-choice tray. */
export function neutralContentBg(theme) {
return isDark(theme) ? "#2c2f34" : "#fafbfc";
}
/**
* Drag-and-drop zone colors. Built into a raw HTML string (see
* DragAndDrop.jsx buildDropZoneHTML), so this returns solid hex values
* rather than theme tokens/sx.
*/
export function dropZoneColors(theme, { dragOver = false, filled = false } = {}) {
const dark = isDark(theme);
Iif (dragOver) {
return { bg: dark ? "#1f4d2e" : "#e8f5e9", border: "#4caf50", text: dark ? "#a5d6a7" : "#2e7d32" };
}
if (filled) {
return { bg: dark ? "#1a3a5c" : "#e3f2fd", border: "#1976d2", text: dark ? "#7fb3ff" : "#1976d2" };
}
return {
bg: dark ? "#2c2f34" : "#f5f7fa",
border: dark ? "#4a4f57" : "#c0c8d4",
text: dark ? "#9aa0a8" : "#9e9e9e",
};
}
/**
* Dropdown-menu <select> colors. Also built into a raw HTML string (see
* DropDownMenu.jsx buildSelectHTML), so this returns solid hex values.
*/
export function dropdownSelectColors(theme, hasValue) {
const dark = isDark(theme);
if (hasValue) {
return { bg: dark ? "#1a3a5c" : "#e3f2fd", border: "#1976d2", text: dark ? "#7fb3ff" : "#1976d2" };
}
return {
bg: dark ? "#2c2f34" : "#ffffff",
border: dark ? "#4a4f57" : "#e0e4ea",
text: dark ? theme.palette.text.primary : "#222222",
};
}
/**
* Embedded-multiple-choice inline mark colors. Also built into a raw HTML
* string (see EmbeddedMultipleChoice.jsx buildContent), so this returns
* solid hex values rather than theme tokens/sx.
*/
export function embeddedChoiceColors(theme, selected) {
const dark = isDark(theme);
if (selected) {
return { bg: dark ? "#1a3a5c" : "#e3f2fd", border: "#1976d2", text: dark ? "#7fb3ff" : "#1976d2" };
}
return {
bg: "transparent",
border: dark ? "#6b7280" : "#9e9e9e",
text: "inherit",
};
}
|