"
},
{
"t": "text",
"v": " instead of a native control. What is the minimum ARIA needed to make it accessible?"
}
]
}
],
"code": {
"lang": "html",
"code": "
",
"label": "forms-inputs.html"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A switch role, a checked attribute, and a space key handler"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A radio role, a selected attribute, and an arrow listener"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A checkbox role, a checked attribute, and a change listener"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A button role, a pressed attribute, and a click listener"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "html_a11y.forms_inputs__500613",
"topic": "html_a11y",
"subSkill": "forms_inputs",
"difficulty": 5,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What does the script log after the user types '5' into the field?"
}
]
}
],
"code": {
"lang": "html",
"code": "
\n",
"label": "forms-inputs.html"
},
"widget": {
"kind": "predict_output",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "5 0: valueAsNumber returns 0 for non-numeric types"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "'' NaN: invalid value strips before reflection runs"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "5 NaN: valueAsNumber needs type=number to parse"
}
],
"shape": "code"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "5 5: valueAsNumber coerces digit strings to a Number"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "html_a11y.forms_inputs__100262",
"topic": "html_a11y",
"subSkill": "forms_inputs",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which statement best describes managing focus after a failed submit when several fields contain validation errors?"
}
]
}
],
"code": {
"lang": "html",
"code": "form.querySelector(':invalid')?.focus();",
"label": "forms-inputs.html"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Trap keyboard focus inside a modal dialog that lists every problem and blocks return until each one is acknowledged."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Leave focus on the submit trigger so the user can retry quickly while the page scrolls each error into view."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Move focus to the page wrapper element so the document landmark is re-announced before any error is read aloud."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Move keyboard focus to the first invalid control so users immediately reach the part that needs their attention."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.responsive_design__100238",
"topic": "ux_design",
"subSkill": "responsive_design",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What minimum touch-target size do Apple's Human Interface Guidelines set for primary controls?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Roughly 60 by 60 points to match the diameter of an adult thumb pressing the glass flat."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Roughly 24 by 24 points so dense toolbars and tab strips can pack more controls per row. in practice for every user"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Roughly 44 by 44 points so the average fingertip can hit it without surrounding controls overlapping."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Roughly 32 by 32 points to align with the icon grid used inside the iOS home screen."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.responsive_design__105646",
"topic": "ux_design",
"subSkill": "responsive_design",
"difficulty": 5,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Comparing a responsive design strategy that ships one HTML document with CSS breakpoints versus one that performs server-side adaptation per device class, what is the principal long-term maintenance trade-off?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A single-document strategy keeps one source of truth across devices, while server-side adaptation forks templates per device class and accrues divergence as devices proliferate."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A server-side adaptation strategy auto-generates breakpoints from analytics data each night, while the single-document approach instead hard-codes them inside the build manifest."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A single-document strategy requires shipping separate JavaScript bundles per device class at build time, whereas server-side adaptation ships one bundle reused across every device."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A server-side adaptation strategy collapses every device class onto a single template at the edge, while the single-document approach forks markup per device class on each release."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.responsive_design__100243",
"topic": "ux_design",
"subSkill": "responsive_design",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What does the sizes attribute do alongside a responsive "
},
{
"t": "code",
"v": "
![]()
"
},
{
"t": "text",
"v": "?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "It tells the browser to scale every candidate image down to a single shared display width. too too too too"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "It tells the browser the aspect ratio so it can reserve layout space before any bytes load. too too too too"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "It tells the browser how wide the rendered image will be at each media condition so it can pick a source."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "It tells the browser the intrinsic width in pixels of every file listed by the srcset attribute. too too"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.responsive_design__20049",
"topic": "ux_design",
"subSkill": "responsive_design",
"difficulty": 5,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "An engineering team proposes using a server-side device detection library to serve different HTML structures to mobile and desktop users instead of CSS-based responsive design. As a UX designer, how should you evaluate this architectural trade-off?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Accept the proposal unconditionally because server-side detection always produces better performance and UX outcomes"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Always reject server-side detection because CSS media queries are the only valid and standards-compliant responsive approach in practice for every user"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Server-side detection enables heavier optimizations but creates maintenance overhead, risks misclassification, and breaks graceful degradation"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Defer entirely to engineering since this is purely an architectural decision that falls completely outside the UX scope"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.responsive_design__102845",
"topic": "ux_design",
"subSkill": "responsive_design",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Comparing object-fit: cover with object-fit: contain when sizing a responsive hero image on small viewports, what is the trade-off?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "cover fills the box and crops the image to keep its aspect ratio, while contain shows the full image and leaves letterboxed empty space inside the box."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "contain fills the entire container while cropping the image proportionally, whereas cover always leaves letterbox bars across the top and bottom of the box. too"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "cover stretches the image non-uniformly to remove letterboxing, while contain stretches the image vertically only to maintain the container's width exactly. too"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "contain pixelates the image once it exceeds the box, while cover instead resamples it down to a fixed device-pixel-ratio of one regardless of the screen. too too"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.responsive_design__71572",
"topic": "ux_design",
"subSkill": "responsive_design",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Why are container queries a significant advancement over media queries for responsive component design?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Viewport-based rules have no effect whatsoever on a handheld browser engine too"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Container queries parse measurably faster than the older viewport-based rules too"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Container queries remove the need for a grid layout system underneath them too too"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A part can react to its own container's width instead of the viewport width"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.responsive_design__424761",
"topic": "ux_design",
"subSkill": "responsive_design",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A team uses width: 100vw for full-bleed sections. On Android Chrome the section creates a horizontal scrollbar at certain widths; on iOS Safari users complain the section 'jumps' as the address bar collapses. What's the cleanest replacement?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Use 100% width with overflow set to auto, falling back to ch units to express the section's reach"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Use 100% width with overflow set to scroll, falling back to em units to honour the parent context"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Use 100% width with overflow hugging the layout, falling back to svw/dvw units where supported"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Use 100% width with overflow set to clip, falling back to rem units to express full-bleed sizing"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.responsive_design__100258",
"topic": "ux_design",
"subSkill": "responsive_design",
"difficulty": 5,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "How do small (svh), large (lvh), and dynamic (dvh) viewport-height units differ on a mobile browser?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "svh assumes UA chrome is fully expanded, lvh assumes it is fully retracted, and dvh tracks the current state continuously."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "svh measures the visible viewport in portrait, lvh measures it in landscape, and dvh averages the two on rotation. in practice"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "svh is half of 100vh, lvh is the full 100vh, and dvh equals svh whenever the device keyboard is open."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "svh applies to phones, lvh applies to tablets, and dvh applies to desktop browsers once a window is resized."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.responsive_design__471028",
"topic": "ux_design",
"subSkill": "responsive_design",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What font-size value will a 400px-wide viewport produce from this declaration?"
}
]
}
],
"code": {
"lang": "ts",
"code": "/* Viewport width = 400px */\nh1 {\n font-size: clamp(16px, 2.5vw, 24px);\n}",
"label": "responsive-design.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "20px (the preferred middle value)"
}
],
"shape": "code"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "24px (the maximum ceiling)"
}
],
"shape": "code"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "12.5px (the raw vw computation)"
}
],
"shape": "code"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "16px (the minimum floor wins)"
}
],
"shape": "code"
}
]
}
},
{
"questionId": "ux_design.responsive_design__100244",
"topic": "ux_design",
"subSkill": "responsive_design",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What does the CSS @media (prefers-reduced-motion: reduce) query indicate?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "The user agent is running in a print-preview mode where motion would be ignored anyway. too"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "The connected display is reporting a low refresh rate that cannot sustain smooth animations."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "The user has signalled a preference for less non-essential motion and fewer transitions at the OS level."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "The browser is currently throttling animations because the page is hidden in a background tab. in practice"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.usability_testing__100233",
"topic": "ux_design",
"subSkill": "usability_testing",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A researcher is contrasting the think-aloud protocol with a silent observation protocol while running the same task script. Which sentence describes the core behavioural difference between them?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Think-aloud allows the participant to skip tasks they dislike; silent observation forces completion of every task in the script with no skipping permitted at all."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Think-aloud asks the participant to verbalise thoughts while doing the task; silent observation lets them work without narration and the team interprets actions only."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Think-aloud is restricted to lab settings with two-way mirrors; silent observation is the protocol you use whenever the participant is joining over a remote video call."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Think-aloud measures only completion time per task; silent observation measures only error counts and never produces any qualitative or interpretive insight."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.usability_testing__400562",
"topic": "ux_design",
"subSkill": "usability_testing",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A heuristic evaluation team flags an issue against 'Match between system and the real world'. The moderated test surfaces the same friction but participants describe it as 'I expected this to behave like the other app I use daily'. Compared to filing two separate findings, what does mapping both observations to one issue do?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "It removes the need for any user testing on this flow going forward, because pairing one heuristic violation with one participant comment proves the issue beyond any further doubt at all."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "It downgrades the original heuristic-evaluation finding to a non-issue, since user reports always override expert inspection results when both methods happen to flag the same flow."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "It quantifies how many users in the test mention the other competing app explicitly by name, and that competitor mention count becomes the new severity score for the issue overall."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "It reframes the issue as a mental-model mismatch the user articulates and the heuristic predicts, so the fix targets the model, not just the surface label."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.usability_testing__815963",
"topic": "ux_design",
"subSkill": "usability_testing",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A team launches an unmoderated study on a remote-testing platform and gets 50 completed sessions, but the open-response answers are full of generic praise and the failure points the team expected are not surfacing. What is the most likely structural cause?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Tasks were written as questions rather than scenarios, so participants gave opinions instead of attempting realistic work"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "The platform recorded the screen only, so the absence of facial reactions removed the qualitative texture the report would normally surface"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Sample size was too small for an unmoderated panel, so individual variance overwhelmed the patterns the team needed to extract here"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Participants self-selected from a paid panel, which biased the sample toward people predisposed to give positive feedback on consumer flows"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.usability_testing__10265",
"topic": "ux_design",
"subSkill": "usability_testing",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What does the think-aloud protocol add beyond silently watching users perform tasks?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A precise count of every misclick the participant makes during the task"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "The participant's reasoning, expectations, and points of confusion as they act"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A guaranteed shorter session because narration speeds users through tasks"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "An objective satisfaction score that does not depend on the participant"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.usability_testing__71754",
"topic": "ux_design",
"subSkill": "usability_testing",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the key trade-off between moderated and unmoderated usability testing?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Moderated sessions are remote in each case; unmoderated ones happen in person"
}
],
"shape": "code"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Unmoderated sessions yield the higher-quality data across the whole range of cases"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Moderated goes deeper but costs more; unmoderated scales cheaply without probing"
}
],
"shape": "code"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Moderated sessions cannot run against a prototype, purely a shipped product"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.usability_testing__200344",
"topic": "ux_design",
"subSkill": "usability_testing",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A researcher debates whether to use direct observation of task attempts or post-task self-reported survey scales to evaluate a new onboarding screen. Which sentence captures the trade-off between the two?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Observation captures what users honestly remember well after the session ended; self-report scales record live behaviour in the moment as it unfolds on the screen."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Observation captures what users actually do but is labour intensive to analyse; self-report scales scale cheaply but are filtered through the user's memory and politeness."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Observation captures only aggregate funnel metrics from analytics dashboards; self-report scales replace any need for direct contact with a real participant entirely."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Observation captures statistically significant quantitative measures by default; self-report scales never produce numbers and only generate free-text anecdotes from users."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.usability_testing__71783",
"topic": "ux_design",
"subSkill": "usability_testing",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the difference between 'remote' and 'in-person' usability testing?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Remote sessions have no way to include a narrate-as-you-go protocol at some point"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Remote reaches wider and costs less but drops the setting; in-person reads the room"
}
],
"shape": "code"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "In-person sessions suit handheld applications and suit nothing else besides that"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Remote sessions yield weaker data in each case; the in-person format simply wins out"
}
],
"shape": "code"
}
]
}
},
{
"questionId": "ux_design.usability_testing__449273380685574346",
"topic": "ux_design",
"subSkill": "usability_testing",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A heuristic-evaluation aggregator counts violations across Nielsen's 10 heuristics. What does the snippet print?"
}
]
}
],
"code": {
"lang": "ts",
"code": "from collections import Counter\n\nviolations = [\n \"visibility_of_system_status\", \"visibility_of_system_status\",\n \"consistency_and_standards\", \"visibility_of_system_status\",\n \"error_prevention\", \"consistency_and_standards\",\n \"consistency_and_standards\", \"error_prevention\",\n]\n\ntop = Counter(violations).most_common(1)[0]\nprint(f\"{top[0]}: {top[1]}\")",
"label": "usability-testing.ts"
},
"widget": {
"kind": "predict_output",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "recognition_rather_than_recall: 3"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "consistency_and_standards: 3"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "visibility_of_system_status: 3"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "match_between_system_and_world: 3"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.usability_testing__1602735",
"topic": "ux_design",
"subSkill": "usability_testing",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A team is auditing how they record issues from moderated sessions. NN/g now urges separating two specific attributes in the issue log that older templates folded together. Which attributes?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Severity rating versus frequency-of-occurrence across participants"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Severity rating versus the heuristic violated by the interaction problem"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Severity rating versus expected effort to fix the underlying interaction"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Severity rating versus root-cause hypothesis attached to the issue"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.usability_testing__428193",
"topic": "ux_design",
"subSkill": "usability_testing",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A junior researcher hands participants a printed list of features and asks 'Can you find each of these in the app?'. Watching the recording later, the lead notices participants are scanning labels instead of trying to accomplish anything. What core mistake did the session make?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Recorded the screen instead of the face, which is what removes the ability to observe genuine hesitation and confusion"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Prompts named features instead of goals, turning the session into a label-matching exercise rather than realistic task performance"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Used a within-subjects design when a between-subjects comparison would have been the appropriate evaluation approach here"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Ran the session moderated when an unmoderated tool would have produced a more representative behavioural sample"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.user_research__100233",
"topic": "ux_design",
"subSkill": "user_research",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which statement best describes a leading question in a user interview?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A question that requires the participant to justify a stated preference between two design directions"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A question that opens an interview by prompting the participant to introduce themselves and their role"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A question phrased in a way that presupposes an answer or steers the participant toward a preferred response"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A question that asks the participant to recall their most recent task with the product in detail"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.user_research__503893",
"topic": "ux_design",
"subSkill": "user_research",
"difficulty": 5,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which statement best describes the continuous-discovery interviewing cadence advocated by Teresa Torres?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Product trios talk to a steady stream of users every week and connect those conversations to ongoing opportunity mapping"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Product trios outsource all participant conversations to an external agency that delivers a quarterly insight report"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Product trios run a single deep cohort study at the start of each annual planning cycle and freeze inputs afterwards"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Product trios delay any user conversations until after engineering has shipped a minimum-viable feature to production"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.user_research__100234",
"topic": "ux_design",
"subSkill": "user_research",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which statement best describes the purpose of a screener in recruiting research participants?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A short debrief survey administered after the session to capture residual reactions and follow-up consent"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A short questionnaire used before scheduling to confirm a candidate matches the target segment for the study"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A briefing email summarising the study scope and consent terms sent after a participant has been booked"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A moderator script that frames the task scenarios participants will work through during the session"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.user_research__359371",
"topic": "ux_design",
"subSkill": "user_research",
"difficulty": 5,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What does the script log?"
}
]
}
],
"code": {
"lang": "ts",
"code": "function powerCheck(nPerCell, expectedEffect) {\n if (expectedEffect === 'small' && nPerCell < 50) return 'underpowered';\n if (expectedEffect === 'large' && nPerCell >= 15) return 'adequatepower';\n return 'check-with-g-power';\n}\nconsole.log(powerCheck(12, 'small'));",
"label": "user-research.ts"
},
"widget": {
"kind": "predict_output",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "overinflated"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "wellbalanced"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "underpowered"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "adequatepower"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.user_research__402643",
"topic": "ux_design",
"subSkill": "user_research",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which statement best describes a top-task analysis in research planning?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A backlog-grooming session where engineering ranks the most expensive features by remaining implementation effort"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A heuristic walkthrough that scores every page of an existing product against a Nielsen-style checklist of issues"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A prioritisation exercise that identifies the small set of tasks users come to the product to accomplish most often"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A market-sizing exercise that estimates the revenue potential of each candidate feature on the upcoming roadmap"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.user_research__704182",
"topic": "ux_design",
"subSkill": "user_research",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the printed value?"
}
]
}
],
"code": {
"lang": "ts",
"code": "function classify(q) {\n if (q.startsWith(\"Don't you think\")) return 'leading';\n if (q.includes(' assume')) return 'loaded';\n return 'neutral';\n}\nconsole.log(classify(\"Don't you think the new flow is better?\"));",
"label": "user-research.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "neutral"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "hedged"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "loaded"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "leading"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.user_research__461480",
"topic": "ux_design",
"subSkill": "user_research",
"difficulty": 5,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What does the snippet print?"
}
]
}
],
"code": {
"lang": "ts",
"code": "function pick(study) {\n if (study.durationDays > 5 && study.selfReportDaily) return 'diary-study';\n if (study.iaQuestion === 'grouping') return 'card-sort-x';\n if (study.iaQuestion === 'findability') return 'tree-test-x';\n return 'intercept-x';\n}\nconsole.log(pick({durationDays: 14, selfReportDaily: true}));",
"label": "user-research.ts"
},
"widget": {
"kind": "predict_output",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "card-sort-x"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "tree-test-x"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "diary-study"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "intercept-x"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.user_research__300126",
"topic": "ux_design",
"subSkill": "user_research",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Six interviews into a generative study, the researcher notices participants 4-6 are surfacing the same three themes already heard from 1-3. PM wants 14 more sessions 'to be safe'. What does the diagnostic suggest?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Saturation is emerging; pause recruiting, code transcripts, then decide if outliers remain"
}
],
"shape": "code"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Switch to a quant survey at this point; qualitative phase has produced its statistical maximum"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Recruit a second cohort with adjacent personas; the original segment has been exhausted"
}
],
"shape": "code"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Continue the planned 20 sessions; thematic recurrence at six is coincidence, not saturation"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.user_research__71800",
"topic": "ux_design",
"subSkill": "user_research",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the difference between 'primary' and 'secondary' research in UX?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Primary research gathers fresh data from people; secondary reads existing work"
}
],
"shape": "code"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Secondary research follows primary research in the running order each time"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Primary research matters more; secondary research is an optional extra"
}
],
"shape": "code"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Primary research runs on questionnaires; secondary runs on sit-down interviews"
}
],
"shape": "code"
}
]
}
},
{
"questionId": "ux_design.user_research__200513",
"topic": "ux_design",
"subSkill": "user_research",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which statement best describes a diary study in user research?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A passive analytics capture of events emitted by an installed application across an entire active user base"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A longitudinal self-reporting method where participants log experiences over days or weeks in their own context"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A single-session moderated walkthrough where participants narrate their thoughts on a prepared design artefact"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A short intercept survey triggered immediately after a participant finishes a specific task in production"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.information_architecture__20029",
"topic": "ux_design",
"subSkill": "information_architecture",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is card sorting used for in information architecture?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "To understand how users categorize and label content, informing navigation and taxonomy"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "To test whether users can successfully find specific content in an existing navigation structure"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "To measure task completion speed across different navigation menu depths and information layers"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "To rank product features by perceived importance before roadmap prioritization planning sessions"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.information_architecture__100231",
"topic": "ux_design",
"subSkill": "information_architecture",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A team wants users to propose their own group names for content; later they want users to drop items into existing buckets the team defined. Which two card-sort variants match those goals?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Tree test for the first study, first-click test for the second exercise"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Open card sort for the first study, closed card sort for the second"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Hybrid card sort for the first study, open card sort for the second"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Heuristic walkthrough for the first study, tree test for the second one"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.information_architecture__10290",
"topic": "ux_design",
"subSkill": "information_architecture",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What IA problem most increases support burden in complex apps?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Navigation labels and grouping that mismatch user models"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Using descriptive section headers and grouping for navigation"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Grouping related settings together within sections"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Providing breadcrumb context across page hierarchy"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.information_architecture__71541",
"topic": "ux_design",
"subSkill": "information_architecture",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "The 'three-click rule' has been largely debunked. What does research actually show about navigation depth?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Users don't mind clicking more as long as each click brings them closer to their goal with clear progress"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Users always abandon tasks after exactly three clicks in practice for every user by default too too too too"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Navigation depth has no measurable effect on task completion in practice for every user too too too too"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Fewer clicks always correlates with higher satisfaction in practice for every user by default too too too"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.information_architecture__330611",
"topic": "ux_design",
"subSkill": "information_architecture",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "The snippet ranks search suggestions. What ordering does the returned list expose to the user as they type?"
}
]
}
],
"code": {
"lang": "ts",
"code": "function rank(items, q){\n return items.slice().sort((a,b) => {\n const ap = a.label.startsWith(q), bp = b.label.startsWith(q);\n if (ap && !bp) return -1;\n if (!ap && bp) return 1;\n return 0;\n });\n}",
"label": "information-architecture.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Suggestions whose label starts with the query appear before those that merely contain it"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Suggestions whose label contains the query appear before those that start with it too in practice"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Suggestions sorted alphabetically by label regardless of where the query matches too"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Suggestions sorted by descending popularity score independent of the typed query too"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.information_architecture__71633",
"topic": "ux_design",
"subSkill": "information_architecture",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What IA anti-pattern occurs when the same content is accessible through multiple incompatible navigation paths?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Deep linking, which draws a duplicate-content penalty from crawlers"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Flat structure, which cuts down on how much the categories are needed"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Polyhierarchy muddle, where the same item turns up under rival categories"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Cross-linking, which lifts the findability in each case that it is applied"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.information_architecture__512034",
"topic": "ux_design",
"subSkill": "information_architecture",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A team runs an open card sort with 8 users to validate a navigation they already designed. Participants happily group the existing labels into the existing categories, so the team ships the nav. After launch, findability scores are no better than the old site. Why did the card sort mislead them?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "An open sort with 8 users does not reach statistical significance for category labelling decisions too too"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "An open sort assumes a closed taxonomy and is invalid when users see labels they did not invent too too too in practice"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "An open sort on the team's own labels measures label cohesion, not whether users can find tasks in a real navigation"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "An open sort should always be followed by a heuristic evaluation of the navigation before any shipping too"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.information_architecture__100272",
"topic": "ux_design",
"subSkill": "information_architecture",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What does tree testing evaluate as an IA method?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Users rate the visual hierarchy of a homepage mockup across five seconds of exposure time."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Users complete tasks on a clickable prototype while a facilitator probes their reasoning live. in practice"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Users locate items in a text-only hierarchy stripped of visuals to isolate the structure's findability."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Users describe out loud how they would group products before any prototype is shown to them."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.information_architecture__618207",
"topic": "ux_design",
"subSkill": "information_architecture",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A designer adds breadcrumbs to a single-level marketing site (Home > Page) hoping it will help orientation. In usability tests, participants ignore the breadcrumbs and several say the page 'feels cluttered'. What is the gotcha?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Breadcrumbs only function as orientation when the page also exposes a search affordance nearby"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Breadcrumbs add orientation value only when paired with a visible sitemap link in the header"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Breadcrumbs earn their keep only when the hierarchy runs deep enough to disorient people"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Breadcrumbs only orient users when each segment is also rendered inside the page title tag"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.information_architecture__200382",
"topic": "ux_design",
"subSkill": "information_architecture",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is a hybrid card sort?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Participants rank pre-set labels by clarity, then complete unrelated retrieval drills on the same tree."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Items are split across two devices so the participant can compare desktop and mobile category framing."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Two participant pools run in parallel: one sorts blindly, the other reviews a finished structure later. in practice"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Some category labels are supplied up front while participants can add or rename categories during sorting."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "web_perf.core_web_vitals__30072",
"topic": "web_perf",
"subSkill": "core_web_vitals",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What does a poor Cumulative Layout Shift (CLS) score indicate about a page?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "The page stays unresponsive to taps long after its content has painted"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "The server is slow to send the first byte of the document response"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Visible elements jump after painting, displacing what the user reads"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "The largest hero element takes too long to finish rendering on load"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "web_perf.core_web_vitals__30077",
"topic": "web_perf",
"subSkill": "core_web_vitals",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "How does fetchpriority=high on an LCP image affect Core Web Vital scores?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "It turns off lazy loading and injects a preload link into the head"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "It blocks all CSS and scripts until the image has finished loading"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "The image waits less in the network queue, so LCP lands sooner"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "It changes LCP only on mobile form factors and never on desktop"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "web_perf.core_web_vitals__73102",
"topic": "web_perf",
"subSkill": "core_web_vitals",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Where can you find your site's real-world Core Web Vitals data from actual Chrome users?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Only in the browser's console.log output"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Only inside Lighthouse lab test runs"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "In the Chrome User Experience Report"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Only from raw server access logs"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "web_perf.core_web_vitals__73119",
"topic": "web_perf",
"subSkill": "core_web_vitals",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Lighthouse recommends 'Avoid non-composited animations'. What does this audit mean?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "The animations target multiple elements at once instead of one element per frame"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Certain effects force layout or paint each frame rather than GPU work"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "The animations use the deprecated will-change property to opt into compositing"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "The animations run via JavaScript instead of the native CSS animation system"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "web_perf.core_web_vitals__200345",
"topic": "web_perf",
"subSkill": "core_web_vitals",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "After a slow tap, attribution reports the slowest phase of the interaction. Which sub-phase label does this snippet print for a long task blocking the handler?"
}
]
}
],
"code": {
"lang": "js",
"code": "import { onINP } from 'web-vitals/attribution';\nonINP((metric) => {\n const a = metric.attribution;\n const parts = { inputDelay: a.inputDelay, processingDuration: a.processingDuration, presentationDelay: a.presentationDelay };\n const max = Object.entries(parts).sort((x, y) => y[1] - x[1])[0];\n console.log(max[0]);\n});",
"label": "core-web-vitals.js"
},
"widget": {
"kind": "predict_output",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "presentationDelay"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "inputDelayPhase"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "renderingDuration"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "processingDuration"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "web_perf.core_web_vitals__300013",
"topic": "web_perf",
"subSkill": "core_web_vitals",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which statement best describes the layout shift impact fraction used in CLS math?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "The vertical pixel distance moved by the element relative to the scroll container height"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "The union of old and new viewport area covered, divided by the viewport size"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "The product of render duration and change in element opacity during the paint frame"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "The ratio of element bounding box width to total document layout width at the shift"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "web_perf.core_web_vitals__18402",
"topic": "web_perf",
"subSkill": "core_web_vitals",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which issue commonly increases CLS in real pages?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Third-party scripts loaded with the async attribute set"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Long event handlers that block the main thread on click"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Images served at higher resolution than the viewport needs"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Missing reserved dimensions or late content inserts"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "web_perf.core_web_vitals__73125",
"topic": "web_perf",
"subSkill": "core_web_vitals",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "How do CLS scores compare between full page loads and SPA route changes?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "CLS is not applicable to single-page applications"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Standard CLS covers only the first load, not later routes"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "CLS is identical for both: the browser resets CLS on route change"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "SPA route changes always report exactly zero CLS"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "web_perf.core_web_vitals__73150",
"topic": "web_perf",
"subSkill": "core_web_vitals",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "In an LCP breakdown, what does the 'resource load delay' component measure?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "The network latency between the browser and the CDN"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "The time between TTFB and when the browser starts loading the LCP resource. Minimize by preloading the resource and reducing render-blocking requests."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "The time the browser spends decompressing the LCP resource"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "The time the server takes to process the LCP request"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "web_perf.core_web_vitals__73130",
"topic": "web_perf",
"subSkill": "core_web_vitals",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is Google Search Console's Core Web Vitals report and what data does it show?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "It provides detailed code-level performance recommendations"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Pass or fail status per URL group, drawn from CrUX field data"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "It only shows data for pages that rank in the top 10 search results"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "It shows Lighthouse lab test results for your entire site"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.pagination__89500",
"topic": "convex",
"subSkill": "pagination",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What are the four possible values of "
},
{
"t": "code",
"v": "status"
},
{
"t": "text",
"v": " returned by "
},
{
"t": "code",
"v": "usePaginatedQuery"
},
{
"t": "text",
"v": "?"
}
]
}
],
"code": {
"lang": "ts",
"code": "const { results, status, loadMore } = usePaginatedQuery(\n api.messages.list, { channelId }, { initialNumItems: 25 }\n);\n\n
loadMore(25)}\n disabled={status !== \"CanLoadMore\"}\n>\n {status === \"LoadingMore\" ? \"Loading...\" :\n status === \"Exhausted\" ? \"All loaded\" : \"Load more\"}\n",
"label": "pagination.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "\"initializing\", \"loadingMore\", \"succeeded\", \"failed\", and \"error\""
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "\"idle\", \"fetching\", \"streaming\", \"paused\", and \"done\""
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "\"firstLoad\", \"hasNextPage\", \"loading\", and \"complete\""
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "\"LoadingFirstPage\", \"CanLoadMore\", \"LoadingMore\", and \"Exhausted\""
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.pagination__89615",
"topic": "convex",
"subSkill": "pagination",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "How do you implement manual pagination without "
},
{
"t": "code",
"v": "usePaginatedQuery"
},
{
"t": "text",
"v": "?"
}
]
}
],
"code": {
"lang": "ts",
"code": "// Server:\nexport const listPage = query({\n args: {\n cursor: v.union(v.string(), v.null()),\n numItems: v.number(),\n },\n handler: async (ctx, { cursor, numItems }) => {\n return ctx.db.query(\"tasks\")\n .order(\"desc\")\n .paginate({ cursor, numItems });\n },\n});\n\n// Client (manual):\nconst [cursor, setCursor] = useState(null);\nconst page = useQuery(api.tasks.listPage, { cursor, numItems: 25 });\n// page?.page, page?.isDone, page?.continueCursor",
"label": "pagination.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Call "
},
{
"t": "code",
"v": "ctx.db.query().paginate()"
},
{
"t": "text",
"v": " from a regular "
},
{
"t": "code",
"v": "useQuery"
},
{
"t": "text",
"v": " hook for a product team"
}
],
"shape": "code"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Use "
},
{
"t": "code",
"v": ".skip(offset).take(limit)"
},
{
"t": "text",
"v": " in the query builder for offset pagination inside a shared repository"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Use "
},
{
"t": "code",
"v": "useQuery"
},
{
"t": "text",
"v": " with cursor-based arguments, managing the cursor state yourself in component state"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "You can't: server-side pagination requires "
},
{
"t": "code",
"v": "usePaginatedQuery"
},
{
"t": "text",
"v": " across a whole product"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "convex.pagination__300071",
"topic": "convex",
"subSkill": "pagination",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Given the hook configuration, what value does "
},
{
"t": "code",
"v": "results.length"
},
{
"t": "text",
"v": " hold once the second slice has loaded?"
}
]
}
],
"code": {
"lang": "ts",
"code": "const { results, status, loadMore } = usePaginatedQuery(\n api.inbox.list,\n { folder: \"primary\" },\n { initialNumItems: 20 },\n);\n// user scrolls once, triggering loadMore(20); now settled\nconsole.log(results.length);",
"label": "pagination.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "60"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "25"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "20"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "40"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.pagination__200067",
"topic": "convex",
"subSkill": "pagination",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What action does the caller invoke to request the next slice of rows on the client hook?"
}
]
}
],
"code": {
"lang": "ts",
"code": "const { results, status, loadMore } = usePaginatedQuery(\n api.feed.list,\n {},\n { initialNumItems: 10 },\n);\nconst onScrollEnd = () => {\n if (status === \"CanLoadMore\") /* ??? */;\n};",
"label": "pagination.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "fetchNext(pageSize)"
}
],
"shape": "code"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "loadMore(pageSize)"
}
],
"shape": "code"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "nextPage(pageSize)"
}
],
"shape": "code"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "loadAfter(cursor)"
}
],
"shape": "code"
}
]
}
},
{
"questionId": "convex.pagination__89441",
"topic": "convex",
"subSkill": "pagination",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "How do you implement pagination in a Convex query?"
}
]
}
],
"code": {
"lang": "ts",
"code": "import { paginationOptsValidator } from \"convex/server\";\n\nexport const listMessages = query({\n args: {\n channelId: v.id(\"channels\"),\n paginationOpts: paginationOptsValidator,\n },\n handler: async (ctx, { channelId, paginationOpts }) => {\n return ctx.db.query(\"messages\")\n .withIndex(\"by_channel\", q => q.eq(\"channelId\", channelId))\n .order(\"desc\")\n .paginate(paginationOpts);\n },\n});",
"label": "pagination.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Add "
},
{
"t": "code",
"v": "paginationOpts: paginationOptsValidator"
},
{
"t": "text",
"v": " to args and call "
},
{
"t": "code",
"v": ".paginate(args.paginationOpts)"
},
{
"t": "text",
"v": " on the query builder"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Pagination is client-side only: fetch all data and paginate in the React component and nothing else at all is involved here"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Pass "
},
{
"t": "code",
"v": "{ page: 1, pageSize: 25 }"
},
{
"t": "text",
"v": " as query arguments and use "
},
{
"t": "code",
"v": ".slice()"
},
{
"t": "text",
"v": " inside a shared repository"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Use "
},
{
"t": "code",
"v": ".skip(offset).take(limit)"
},
{
"t": "text",
"v": " for offset-based pagination and nothing else at all is involved here"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "convex.pagination__200085",
"topic": "convex",
"subSkill": "pagination",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What does the handler log for "
},
{
"t": "code",
"v": "page.length"
},
{
"t": "text",
"v": " on the second invocation given this sequence?"
}
]
}
],
"code": {
"lang": "ts",
"code": "// table has exactly 8 docs, ordered by _creationTime asc\nconst first = await ctx.db.query(\"notes\")\n .paginate({ numItems: 5, cursor: null });\nconst second = await ctx.db.query(\"notes\")\n .paginate({ numItems: 5, cursor: first.continueCursor });\nconsole.log(second.page.length);",
"label": "pagination.ts"
},
"widget": {
"kind": "predict_output",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "0"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "5"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "8"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "3"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.pagination__300003",
"topic": "convex",
"subSkill": "pagination",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the canonical shape of a Convex query function that accepts pagination options?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "It accepts cursor and numItems as two separate top-level scalar args validated via v.string() and v.number() respectively"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "It uses a custom query wrapper function from convex-helpers that transparently attaches the cursor header to each invocation"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "It omits explicit args and reads the pagination options from ctx.runtime.request.pagination which the runtime auto-injects for queries in a browser"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "It declares an args object containing paginationOpts typed by paginationOptsValidator and forwards that arg into .paginate inside the handler"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "convex.pagination__2150301",
"topic": "convex",
"subSkill": "pagination",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What does the current Convex paged query handler return once the terminator runs on the builder?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "An object with page, isDone, and continueCursor fields for the client"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "An async iterator of document pages that resolves while the query is open"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A readable stream of ArrayBuffers the caller must decode with a text parser"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A tuple of rows and a nextToken string the caller persists into storage"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.pagination__400304",
"topic": "convex",
"subSkill": "pagination",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Comparing a paginated timeline rendered via usePaginatedQuery to one rebuilt on each render via useQuery({ cursor }) with cursor in component state, what failure mode does the hook-based form prevent?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "earlier pages silently going stale when writes hit them"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "the component being forced to run in a Suspense boundary"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "cursors decoding to null after a schema migration"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "the server rejecting repeated cursor reuse as replay"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.pagination__400113",
"topic": "convex",
"subSkill": "pagination",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What does "
},
{
"t": "code",
"v": "page.length"
},
{
"t": "text",
"v": " evaluate to when the cursor is stale because the referenced document was deleted?"
}
]
}
],
"code": {
"lang": "ts",
"code": "// First call returned continueCursor pointing at doc X.\n// Before the second call, doc X gets deleted in another mutation.\nconst second = await ctx.db.query(\"orders\")\n .withIndex(\"by_created\")\n .paginate({ numItems: 25, cursor: previousCursor });\nreturn second.page.length;",
"label": "pagination.ts"
},
"widget": {
"kind": "predict_output",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "numItems, skipping past gap position"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "One less than numItems, gap preserved"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Zero, caller must restart pagination"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Throws: cursor references missing row"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.motion_design__100251",
"topic": "ux_design",
"subSkill": "motion_design",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Comparing IntersectionObserver-driven entrance animations with scroll-event-driven ones, what is the principal benefit of the observer approach for long pages?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "It guarantees that the entrance animation will run on the compositor, not the main thread"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "It lets the entrance animation be applied before the element is inserted into the DOM tree"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "It avoids running a scroll handler on every frame, letting the main thread stay free"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "It returns the exact scroll velocity so the animation can match the user's gesture speed"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.motion_design__100243",
"topic": "ux_design",
"subSkill": "motion_design",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Choosing between a 30ms-per-item stagger and a 120ms-per-item stagger for a 10-item dashboard list reveal, what trade-off does the longer stagger introduce?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Total animation time grows past one second, which begins to feel sluggish to users"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "The browser stops batching the layers into a single composited frame at that delay"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Total animation cost on the compositor doubles per item over the rendering pipeline"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Per-item easing curves stop applying because stagger overrides each item's timing"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.motion_design__704561",
"topic": "ux_design",
"subSkill": "motion_design",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A 2025 design system PR proposes durations for micro-interactions like button presses and tooltip reveals. Which duration range do current NN/g and Laws of UX motion writeups recommend as the typical band?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "around 150 to 300 milliseconds for most UI micro-interactions"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "around 600 to 900 milliseconds for most UI micro-interactions"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "around 400 to 600 milliseconds for most UI micro-interactions"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "around 50 to 100 milliseconds for most UI micro-interactions"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.motion_design__200512",
"topic": "ux_design",
"subSkill": "motion_design",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A list of 40 search results all fade in simultaneously at 250ms. Test participants say the page 'pops' and they lose where the first result is. The motion designer wants to preserve order cues. What technique addresses this?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Stagger the entry of each item with a small delay so order is communicated by sequence"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Animate every item using ease-in so each result fades up before the next renders too"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Slow every item's entry to around 800ms so users can finish reading each card too too in practice"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Loop the entry animation twice so users have a second chance to track each result"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.motion_design__10315",
"topic": "ux_design",
"subSkill": "motion_design",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A team animates every state change in a data-dense dashboard. What is the most direct UX cost of that blanket approach?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Screen readers announce each animated element twice, doubling the spoken output"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "When everything moves, motion stops signaling anything and real changes get lost"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "The compositor runs out of GPU layers and silently drops the oldest animations"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "The browser caps total animation time per page and truncates later transitions"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.motion_design__71580",
"topic": "ux_design",
"subSkill": "motion_design",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Why should UI animations generally use ease-out timing for elements entering the screen?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Ease-out uses less CPU than linear timing in practice for every user by default"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Ease-out animations cannot be interrupted by user input in practice for every user in practice"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Ease-out is the only timing function supported by mobile browsers in practice"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Elements appear to decelerate naturally as they arrive, matching physical world expectations"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.motion_design__612938",
"topic": "ux_design",
"subSkill": "motion_design",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A dev uses "
},
{
"t": "code",
"v": "ease-in"
},
{
"t": "text",
"v": " on a modal entry animation, expecting it to feel snappy. Users report the modal 'sneaks in' and they miss its arrival. Which easing/intent mismatch did they hit?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Entry motion should resolve with deceleration (ease-out); ease-in starts slow, so the user sees the modal only after it has already taken focus."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Entry motion should resolve with constant velocity (linear); curved easing skews the modal's start-of-frame paint past the focus event. too too"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Entry motion should resolve with acceleration (ease-in); ease-out starts fast, so the user blinks past the modal before focus has even moved. too"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Entry motion should resolve with overshoot bounce (back); a non-bouncing curve hides the modal's anchor point until after its dismiss path settles."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.motion_design__71942",
"topic": "ux_design",
"subSkill": "motion_design",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the primary benefit of using CSS 'transition' property for hover effects?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "It stops a pointer-driven state from firing when the cursor merely crosses an element in passing"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "It shrinks the stylesheet the browser downloads by folding repeated rules into a single block"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "It interpolates smoothly between states instead of snapping, so the surface feels deliberate"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "It makes pointer-driven styling fire on touch screens, where there is no cursor to move over an element"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.motion_design__71582",
"topic": "ux_design",
"subSkill": "motion_design",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What CSS media query allows respecting users who prefer reduced motion?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "animation-disabled: true"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "prefers-reduced-motion: reduce"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "disable-animations: all in practice"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "motion-preference: none in practice"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.motion_design__300347",
"topic": "ux_design",
"subSkill": "motion_design",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "An analytics dashboard renders 12 chart cards. Every card fades in over 400ms simultaneously on each route change. Users on slower laptops report 'janky' loads; the perf panel shows main-thread spikes during entry. Which mitigation is best aligned with the issue?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Lengthen each card's animation duration so individual frames have less per-frame work overall"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Animate each card's height and margin instead of opacity to give a smoother visual progression"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Trigger a single page-level fade-in across the entire dashboard wrapper element instead of cards"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Stagger entries and animate only opacity/transform so each card lands within the frame budget"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "accessibility.motion_a11y__100231",
"topic": "accessibility",
"subSkill": "motion_a11y",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which statement best describes the purpose of the prefers-reduced-motion CSS media feature?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "It exposes a user OS-level setting requesting that interfaces minimize non-essential animation"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "It indicates whether the viewport is currently scrolling so transitions can be paused mid-frame"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "It detects whether the device GPU is fast enough to handle compositor-driven CSS animations"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "It reports the user's selected color scheme so styles can switch between light and dark themes"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "accessibility.motion_a11y__300456",
"topic": "accessibility",
"subSkill": "motion_a11y",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which statement best describes how to listen for changes to the prefers-reduced-motion preference inside a long-lived single-page app?"
}
]
}
],
"code": {
"lang": "html",
"code": "const mql = window.matchMedia('(prefers-reduced-motion: reduce)');\nmql.addEventListener('change', e => updateMotionUI(e.matches));",
"label": "motion-a11y.html"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Listen for the visibilitychange event on document and re-read window.getComputedStyle on the body element"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Bind a storage event handler on window that fires whenever any localStorage motion key gets updated"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Subscribe to the change event on the MediaQueryList returned by matchMedia for the relevant media string"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Poll document.documentElement.dataset.motion every animation frame using the requestAnimationFrame loop"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "accessibility.motion_a11y__400576",
"topic": "accessibility",
"subSkill": "motion_a11y",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which statement best describes how prefers-reduced-motion should influence the design of skeleton loading shimmers?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Slow the sliding gradient to a five-second loop so the sweep still hints at loading progress"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Reduce the gradient sweep contrast and saturation so the translation is harder to notice peripherally"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Drop the sliding gradient sweep and present a flat tinted placeholder while the user has opted into reduce"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Keep the looping sweep but pause it whenever the document visibility state becomes hidden by the OS"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "accessibility.motion_a11y__400572",
"topic": "accessibility",
"subSkill": "motion_a11y",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which statement best describes how Web Animations API instances can honor a reduced-motion preference at the JS layer?"
}
]
}
],
"code": {
"lang": "html",
"code": "const mql = matchMedia('(prefers-reduced-motion: reduce)');\nconst anim = el.animate(keyframes, { duration: 600 });\nif (mql.matches) anim.finish();",
"label": "motion-a11y.html"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Pass a respectMotionPreference flag to element.animate so the engine selects a static keyframe automatically"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Cancel or shorten the animation when matchMedia for the reduce query reports a true matches property"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Wrap element.animate in a try/catch because the constructor throws on opt-in users in modern browsers"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Set animation.timeline to a CSSMotionPreferenceTimeline so the runtime pauses on user opt-in immediately"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "accessibility.motion_a11y__304567",
"topic": "accessibility",
"subSkill": "motion_a11y",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Reduced motion ON. What does the snippet log when invoked at runtime?"
}
]
}
],
"code": {
"lang": "html",
"code": "const mql = matchMedia('(prefers-reduced-motion: reduce)');\nconst cfg = { play: !mql.matches, fade: !mql.matches };\nconsole.log(cfg);",
"label": "motion-a11y.html"
},
"widget": {
"kind": "predict_output",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "{play:true,fade:true}"
}
],
"shape": "code"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "{play:false,fade:true}"
}
],
"shape": "code"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "{play:false,fade:false}"
}
],
"shape": "code"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "{play:true,fade:false}"
}
],
"shape": "code"
}
]
}
},
{
"questionId": "accessibility.motion_a11y__203453",
"topic": "accessibility",
"subSkill": "motion_a11y",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Reduced motion ON. The carousel script reads the value once on load. What does it log?"
}
]
}
],
"code": {
"lang": "html",
"code": "const mql = matchMedia('(prefers-reduced-motion: reduce)');\nconst autoplay = !mql.matches;\nconsole.log('autoplay:', autoplay);",
"label": "motion-a11y.html"
},
"widget": {
"kind": "predict_output",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "autoplay: true"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "autoplay: false"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "autoplay: paused"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "autoplay: noop"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "accessibility.motion_a11y__400575",
"topic": "accessibility",
"subSkill": "motion_a11y",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which statement best describes how WAI-ARIA's role=marquee relates to motion accessibility requirements?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "It maps directly to the prefers-reduced-motion media feature so styles will silently freeze the content area"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "It instructs the user agent to automatically pause the region on opt-in users without any author code at all"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "It marks a live region whose content scrolls and authors must still provide the WCAG 2.2.2 stop mechanism"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "It exempts the region from WCAG 2.2.2 because screen readers will narrate updates regardless of motion state"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "accessibility.motion_a11y__405675",
"topic": "accessibility",
"subSkill": "motion_a11y",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Reduced motion ON. The Web Animations call passes "
},
{
"t": "code",
"v": "{duration:0}"
},
{
"t": "text",
"v": ". What does "
},
{
"t": "code",
"v": "a.finished"
},
{
"t": "text",
"v": " do?"
}
]
}
],
"code": {
"lang": "html",
"code": "const a = el.animate([{opacity:0},{opacity:1}], {duration: 0});\na.finished.then(() => console.log('ok'));",
"label": "motion-a11y.html"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "resolves on next microtask"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "rejects with NotSupportedError"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "stays pending forever"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "throws synchronously: TypeError"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "accessibility.motion_a11y__400574",
"topic": "accessibility",
"subSkill": "motion_a11y",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which statement best describes the recommended treatment of CSS scroll-driven animations under prefers-reduced-motion?"
}
]
}
],
"code": {
"lang": "html",
"code": "@media (prefers-reduced-motion: no-preference) {\n .reveal { animation-timeline: view(); animation: fadeIn linear both; }\n}",
"label": "motion-a11y.html"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Wrap the animation-timeline declarations in a hover media block so non-pointer devices get a static layout"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Wrap the animation-timeline declarations in a no-preference media block so opt-in users get a static layout"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Wrap the animation-timeline declarations in a display-mode media block so installed PWAs get a fallback"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Wrap the animation-timeline declarations in a forced-colors media block so high-contrast users get a fallback"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.design_principles__100231",
"topic": "ux_design",
"subSkill": "design_principles",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Session recordings on a new SaaS dashboard show users clicking the company logo in the top-left expecting to return to the main view, but the logo is purely decorative. Roughly 18% of sessions click it within the first minute. Which design principle is the dashboard violating?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "The logo is too small a click target, violating Fitts's Law and producing repeated mis-clicks toward the corner of the screen too"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "The dashboard fails Hick's Law because the top navigation presents too many equally weighted options for the user to choose between in practice"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "The product lacks a consistent visual hierarchy, so users default to scanning the top-left quadrant before reading any content"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "The logo carries a perceived affordance of 'clickable home link' but offers no actual behavior, breaking the match between signifier and action"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.design_principles__20005",
"topic": "ux_design",
"subSkill": "design_principles",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A product team notices that users with 3+ months of experience feel the UI is too slow because they have memorized faster key sequences, but the interface never exposes them. Which Fitts's Law and expert-novice tension trade-off best addresses this?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Surface advanced commands via shortcuts and progressive disclosure while keeping discoverability for novices"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Remove all tooltips and labels once the product reaches v1.0 stable release status"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Replace menus with a command palette only, eliminating all visible controls from the interface"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Gate advanced features behind a 'Pro mode' toggle requiring a subscription upgrade payment"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.design_principles__10299",
"topic": "ux_design",
"subSkill": "design_principles",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "An interface keeps rarely-used advanced controls out of the way until a user asks for them. Which principle is this?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Recognition rather than recall of the options"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Conservation of irreducible complexity"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Progressive disclosure of advanced controls"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Natural mapping of controls to effects"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.design_principles__10297",
"topic": "ux_design",
"subSkill": "design_principles",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which property most lowers the effort users spend relearning as they move across several product surfaces?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Aggressive responsive breakpoint tuning"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Per-surface keyboard navigation schemes"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A richer design-token naming scheme"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Consistency in patterns and language"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.design_principles__71547",
"topic": "ux_design",
"subSkill": "design_principles",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "The Von Restorff effect (isolation effect) states that in a group of similar items, the one that differs will be what?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Automatically hidden by the browser's rendering engine"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Most likely to be remembered because it stands out from the rest"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Perceived as an error in the interface in practice for every user"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Ignored because it disrupts the visual pattern in practice"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.design_principles__500673",
"topic": "ux_design",
"subSkill": "design_principles",
"difficulty": 5,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A platform team debates 'design system as constraint vs design system as signifier' when component variants are technically overridable. Which contrast best captures the governance trade-off?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Constraint enforcement is impossible in design systems because design tokens are inherently overridable in every framework at the leaf level"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Constraint enforcement preserves velocity at no cost to drift; signifier-only systems prevent drift but require slowing velocity in review cycles in practice"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Constraint enforcement prevents drift at the cost of velocity; signifier-only systems preserve velocity but accept drift unless paired with review"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Constraint and signifier framings are equivalent for design systems; only the implementation language used in the lint rules differs in practice"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.design_principles__500931",
"topic": "ux_design",
"subSkill": "design_principles",
"difficulty": 5,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "The snippet defers the visible success state until the server confirms. Given the rendered behaviour, what does this choice optimise for, and what does it cost?"
}
]
}
],
"code": {
"lang": "ts",
"code": "function Save({onSave}){\n const [state,setState]=useState('idle');\n async function go(){\n setState('saving');\n const ok = await onSave();\n setState(ok ? 'saved' : 'error');\n }\n return ;\n}",
"label": "design-principles.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "It optimises for animation smoothness at the cost of dropping intermediate frames"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "It optimises for SEO crawl depth at the cost of additional render-blocking scripts"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "It optimises for client throughput at the cost of mutating the cached state early"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "It optimises for honest feedback at the cost of perceived latency on slow links"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.design_principles__71774",
"topic": "ux_design",
"subSkill": "design_principles",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the difference between 'perceived performance' and 'actual performance' in UX?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "They line up exactly, because people judge elapsed time with fair accuracy in these tests"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Perceived performance is how fast the system feels; measured performance is what instruments record"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Perceived performance counts for motion work; a page load is a separate matter for the team"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Actual performance cannot be put on a clock, so the felt version is the one that remains for us in the end"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.design_principles__300663",
"topic": "ux_design",
"subSkill": "design_principles",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A power-user trading interface lets every key on the keyboard map to an action. New hires take 6 weeks to feel confident; experienced traders complete tasks 4× faster than competitors. Leadership wants to redesign for new-hire onboarding. What's the principled concern?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "The product lacks consistent signifiers, so adding visible button labels for every shortcut should replace the keyboard model entirely"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Onboarding time is purely a documentation problem, so a more detailed PDF manual will fully resolve the new-hire ramp-up issue"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Expert users rely on the dense keyboard-driven model, so redesigning for novices without separate paths will degrade their workflow"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "The interface fails Hick's Law for new hires, so reducing the total number of available keyboard shortcuts will help everyone equally"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.design_principles__71510",
"topic": "ux_design",
"subSkill": "design_principles",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Jakob's Law states that users spend most of their time on other sites, which means they prefer your site to work how?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "The same way as the other sites they already know"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Without any navigation patterns from competitors too"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "In a completely unique way that differentiates your brand"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "With animations that no other site uses in practice too"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.reactive_client__89556",
"topic": "convex",
"subSkill": "reactive_client",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What library does Convex's React client come from?"
}
]
}
],
"code": {
"lang": "ts",
"code": "// All from the same 'convex' package:\nimport { useQuery, useMutation, useAction } from \"convex/react\";\nimport { ConvexProvider, ConvexReactClient } from \"convex/react\";\nimport { api } from \"../convex/_generated/api\";\n\n// Server imports also from 'convex':\nimport { query, mutation, action } from \"convex/server\";\nimport { v } from \"convex/values\";",
"label": "reactive-client.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "code",
"v": "convex/react"
},
{
"t": "text",
"v": ": the React hooks are included in the main "
},
{
"t": "code",
"v": "convex"
},
{
"t": "text",
"v": " npm package"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "code",
"v": "convex-react"
},
{
"t": "text",
"v": ": a community-maintained wrapper library"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "code",
"v": "react-convex"
},
{
"t": "text",
"v": ": React bindings installed separately"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "code",
"v": "@convex/react"
},
{
"t": "text",
"v": ": a separate React-specific package"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.reactive_client__835672",
"topic": "convex",
"subSkill": "reactive_client",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which hook returns the ConvexReactClient instance so a component can imperatively run a query or mutation outside the normal subscription flow?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "useClient"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "useBackend"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "useServer"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "useConvex"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.reactive_client__89545",
"topic": "convex",
"subSkill": "reactive_client",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Can you pass arguments to "
},
{
"t": "code",
"v": "useQuery"
},
{
"t": "text",
"v": "?"
}
]
}
],
"code": {
"lang": "ts",
"code": "// Server:\nexport const byStatus = query({\n args: { status: v.string() },\n handler: async (ctx, { status }) => {\n return ctx.db.query(\"tasks\")\n .withIndex(\"by_status\", q => q.eq(\"status\", status))\n .collect();\n },\n});\n\n// Client:\nconst [status, setStatus] = useState(\"active\");\nconst tasks = useQuery(api.tasks.byStatus, { status });\n// Changes when status changes: new subscription per value",
"label": "reactive-client.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "No, queries don't accept arguments, they read based on the authenticated user only"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Yes, pass an args object as the second argument matching the query's "
},
{
"t": "code",
"v": "args"
},
{
"t": "text",
"v": " validator"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Yes, but only primitive values, not objects or arrays"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Yes, pass them as URL query parameters that Convex extracts automatically"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.reactive_client__89421",
"topic": "convex",
"subSkill": "reactive_client",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "How do you call a Convex mutation from a React component?"
}
]
}
],
"code": {
"lang": "ts",
"code": "import { useMutation } from \"convex/react\";\nimport { api } from \"../convex/_generated/api\";\n\nfunction AddTask() {\n const createTask = useMutation(api.tasks.create);\n\n const handleSubmit = async (e: FormEvent) => {\n e.preventDefault();\n const data = new FormData(e.currentTarget);\n await createTask({ text: data.get(\"text\") as string });\n // All useQuery(api.tasks.list) subscribers update automatically\n };\n}",
"label": "reactive-client.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Use "
},
{
"t": "code",
"v": "useQuery(api.tasks.create)"
},
{
"t": "text",
"v": " with a special "
},
{
"t": "code",
"v": "mutate: true"
},
{
"t": "text",
"v": " option"
}
],
"shape": "code"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Use "
},
{
"t": "code",
"v": "fetch('/api/tasks/create', { method: 'POST' })"
},
{
"t": "text",
"v": " with the Convex proxy"
}
],
"shape": "code"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Use "
},
{
"t": "code",
"v": "useMutation(api.tasks.create)"
},
{
"t": "text",
"v": " to get a function, then call it with the mutation's arguments"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Import the mutation directly and call it as a regular async function"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.reactive_client__184027",
"topic": "convex",
"subSkill": "reactive_client",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which statement best characterizes how a useQuery subscription reacts to server-side writes?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "The component must call a refetch helper after every save happens"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Updates arrive only if the mutation sets a shouldNotify flag to true"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "The hook polls every second and compares JSON output for changes"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Any write that touches reads the query observed pushes a fresh result"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.reactive_client__671482",
"topic": "convex",
"subSkill": "reactive_client",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which statement best describes how the hydration handoff works with usePreloadedQuery on the client?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "It forces a synchronous refetch through fetch so hydration markers line up ok"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "It holds the server snapshot for the entire session before any subscription"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "It renders nothing until a socket handshake completes over the initial frame"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "It renders the server snapshot then swaps to a live subscription on mount"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.reactive_client__491820",
"topic": "convex",
"subSkill": "reactive_client",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A chat screen uses useQuery(api.messages.list, { channelId }). After switching channels, the dashboard shows two active subscriptions for several seconds before the old one is torn down. What explains the overlap?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "The server keeps the prior subscription open until its internal read set lease expires on the storage side"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "The client tears down the prior args subscription asynchronously, so it lingers briefly during cleanup; useQuery still returns undefined on the arg change, so this is not a blank-render-avoidance feature"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "The scheduler keeps the prior subscription open until the next cron tick releases the prior args bucket"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "The browser keeps the prior subscription open until the WebSocket heartbeat confirms the new args bucket"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "convex.reactive_client__571294",
"topic": "convex",
"subSkill": "reactive_client",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which statement best describes useAction return semantics compared with useMutation?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "It returns a stream of partial chunks emitted by a streaming generator"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "It returns a tuple of the caller and a boolean busy-state indicator ref"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "It returns a caller whose promise resolves when the action body finishes"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "It returns a reactive value that refreshes on dependency-graph writes"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.reactive_client__100231",
"topic": "convex",
"subSkill": "reactive_client",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What does the marked expression evaluate to on the first render, before any server response has arrived?"
}
]
}
],
"code": {
"lang": "ts",
"code": "import { useQuery } from \"convex/react\";\nimport { api } from \"../convex/_generated/api\";\n\nfunction Counter() {\n const value = useQuery(api.counter.get);\n console.log(typeof value, value);\n return {String(value)}
;\n}",
"label": "reactive-client.ts"
},
"widget": {
"kind": "predict_output",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "null value"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "'loading'"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "undefined"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "empty []"
}
],
"shape": "code"
}
]
}
},
{
"questionId": "convex.reactive_client__634708",
"topic": "convex",
"subSkill": "reactive_client",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which phrasing best describes the role of the url parameter passed to ConvexReactClient()?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A fallback HTTP endpoint that polling replays use when offline"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "The deployment endpoint where WebSocket subscriptions are opened"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A signed token bound to the project used during handshake only"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "The path on the host that serves the compiled function bundle"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.queries_mutations__404743",
"topic": "convex",
"subSkill": "queries_mutations",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which statement best describes what the .paginate() operator on a ctx.db query produces for a handler caller?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A page object carrying the next cursor and a bounded slice of matching rows, designed for incremental reactive list rendering on the client"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A materialised array of every matching row partitioned into buckets of a caller-supplied size, with rollover between adjacent pages on the client"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A synchronous iterator over the full matching set, advancing one document per next() call and closing once the handler returns or throws"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A websocket channel that continuously pushes inserted rows as they appear and replays the backlog from the earliest known write on first attach"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "convex.queries_mutations__89554",
"topic": "convex",
"subSkill": "queries_mutations",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Where do you write Convex server functions?"
}
]
}
],
"code": {
"lang": "ts",
"code": "// convex/tasks.ts\nimport { query, mutation } from \"./_generated/server\";\nimport { v } from \"convex/values\";\n\nexport const list = query({\n handler: async (ctx) => ctx.db.query(\"tasks\").collect(),\n});\n\nexport const create = mutation({\n args: { text: v.string() },\n handler: async (ctx, { text }) => {\n await ctx.db.insert(\"tasks\", { text, completed: false });\n },\n});",
"label": "queries-mutations.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "In any "
},
{
"t": "code",
"v": ".ts"
},
{
"t": "text",
"v": " file: Convex detects functions by their export type"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "In the Convex dashboard's built-in code editor"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "In TypeScript files inside the "
},
{
"t": "code",
"v": "convex/"
},
{
"t": "text",
"v": " directory at your project root"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "In a "
},
{
"t": "code",
"v": "server/"
},
{
"t": "text",
"v": " directory alongside your frontend code"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.queries_mutations__202571",
"topic": "convex",
"subSkill": "queries_mutations",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A dev ships "
},
{
"t": "code",
"v": "internalMutation"
},
{
"t": "text",
"v": " for a housekeeping job, then calls it from a React button; the client throws "
},
{
"t": "code",
"v": "Could not find public function"
},
{
"t": "text",
"v": ". What explains the error?"
}
]
}
],
"code": {
"lang": "ts",
"code": "// convex/cleanup.ts\nexport const sweep = internalMutation({\n args: {},\n handler: async (ctx) => { /* ... */ },\n});\n\n// client\nawait convex.mutation(internal.cleanup.sweep, {});",
"label": "queries-mutations.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Button handlers must call "
},
{
"t": "code",
"v": "useAction"
},
{
"t": "text",
"v": " because "
},
{
"t": "code",
"v": "internalMutation"
},
{
"t": "text",
"v": " runs in the action runtime tier"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "The generated API only exposes handlers whose module files are named with an "
},
{
"t": "code",
"v": "api."
},
{
"t": "text",
"v": " prefix on disk"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "code",
"v": "internalMutation"
},
{
"t": "text",
"v": " declares a private function that the public websocket API refuses to resolve"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Internal functions are stripped from the bundle when the deploy target is set to the browser runtime"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "convex.queries_mutations__201147",
"topic": "convex",
"subSkill": "queries_mutations",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What will this query function return the first time it is awaited from the client?"
}
]
}
],
"code": {
"lang": "ts",
"code": "export const recent = query({\n args: {},\n handler: async (ctx) => {\n const rows = await ctx.db.query(\"messages\").collect();\n return rows;\n },\n});",
"label": "queries-mutations.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "the list in insertion order unrelated to time"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "an empty array because order was not specified"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "the list sorted descending by _creationTime"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "the list sorted ascending by _creationTime"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.queries_mutations__300192",
"topic": "convex",
"subSkill": "queries_mutations",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Between query() and mutation(), which serialisation guarantees apply when two callers touch the same document concurrently?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "queries commit under OCC and may retry; mutations snapshot-read without locking"
}
],
"shape": "code"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "mutations commit under OCC and may retry; queries snapshot-read without locking"
}
],
"shape": "code"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "both bypass serialisation entirely and rely on the client to dedupe conflicts"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "both use pessimistic row locks, holding until the handler returns its value"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.queries_mutations__89600",
"topic": "convex",
"subSkill": "queries_mutations",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What's the difference between returning "
},
{
"t": "code",
"v": "null"
},
{
"t": "text",
"v": " and throwing an error in a Convex query?"
}
]
}
],
"code": {
"lang": "ts",
"code": "export const getProfile = query({\n handler: async (ctx) => {\n const identity = await ctx.auth.getUserIdentity();\n if (!identity) return null; // Normal: user not logged in\n\n const user = await getUser(ctx, identity.tokenIdentifier);\n if (!user) return null; // Normal: user record not created yet\n\n if (user.banned) throw new Error(\"Account suspended\"); // Error state\n return user;\n },\n});",
"label": "queries-mutations.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Returning null causes useQuery to retry; throwing causes it to return undefined permanently"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Both surface as null on the client: errors are silently swallowed in queries"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Returning null is normal (the client receives null); throwing stops execution and surfaces as an error on the client"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Null is for missing data; errors abort the WebSocket connection"
}
],
"shape": "code"
}
]
}
},
{
"questionId": "convex.queries_mutations__89547",
"topic": "convex",
"subSkill": "queries_mutations",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the N+1 query problem in Convex and how do you avoid it?"
}
]
}
],
"code": {
"lang": "ts",
"code": "// ❌ Sequential N+1:\nconst tasks = await ctx.db.query(\"tasks\").collect();\nfor (const task of tasks) {\n task.author = await ctx.db.get(task.authorId); // N sequential reads\n}\n\n// ✅ Parallel with deduplication:\nconst tasks = await ctx.db.query(\"tasks\").collect();\nconst uniqueAuthorIds = [...new Set(tasks.map(t => t.authorId))];\nconst authors = await Promise.all(\n uniqueAuthorIds.map(id => ctx.db.get(id))\n);\nconst authorMap = Object.fromEntries(\n authors.map(a => [a!._id, a])\n);",
"label": "queries-mutations.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "The N+1 problem doesn't exist in Convex because all queries run in a single transaction"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Use "
},
{
"t": "code",
"v": "ctx.db.getMany(ids)"
},
{
"t": "text",
"v": " which batches multiple ID lookups into one round trip"
}
],
"shape": "code"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Fetching N parent docs then doing N individual "
},
{
"t": "code",
"v": "ctx.db.get()"
},
{
"t": "text",
"v": " calls for related data: mitigate by batching with "
},
{
"t": "code",
"v": "Promise.all"
},
{
"t": "text",
"v": " or denormalizing"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Add a compound index that includes the related table's fields to avoid extra reads"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "convex.queries_mutations__403316",
"topic": "convex",
"subSkill": "queries_mutations",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What runs first when a client calls this action from a component?"
}
]
}
],
"code": {
"lang": "ts",
"code": "export const sync = action({\n args: { id: v.id(\"users\") },\n handler: async (ctx, args) => {\n const doc = await ctx.runMutation(internal.users.claim, { id: args.id });\n const res = await fetch(\"https://example.com/ping\");\n return { doc, status: res.status };\n },\n});",
"label": "queries-mutations.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "the fetch resolves, then the internalMutation transaction begins"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "the runAction path blocks the invoked mutation until the next tick"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "the action and mutation interleave in a single shared transaction"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "the invoked internalMutation executes before the fetch resolves"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.queries_mutations__89601",
"topic": "convex",
"subSkill": "queries_mutations",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "How do you implement an idempotent mutation in Convex?"
}
]
}
],
"code": {
"lang": "ts",
"code": "export const startGame = mutation({\n args: { gameId: v.id(\"games\") },\n handler: async (ctx, { gameId }) => {\n const game = await ctx.db.get(gameId);\n if (!game) throw new Error(\"Game not found\");\n\n // Idempotency: already started? Return silently.\n if (game.status === \"playing\") return;\n if (game.status !== \"lobby\") {\n throw new Error(`Can't start from ${game.status}`);\n }\n\n await ctx.db.patch(gameId, {\n status: \"playing\",\n startedAt: Date.now(),\n });\n },\n});",
"label": "queries-mutations.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Use "
},
{
"t": "code",
"v": "ctx.db.insertOnce()"
},
{
"t": "text",
"v": " which only inserts if the document doesn't exist"
}
],
"shape": "code"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Check if the operation was already performed (via state flag or existence check) and return early if so"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Convex mutations are automatically idempotent due to serializable transactions"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Set "
},
{
"t": "code",
"v": "{ idempotent: true }"
},
{
"t": "text",
"v": " in the mutation options to enable automatic deduplication"
}
],
"shape": "code"
}
]
}
},
{
"questionId": "convex.queries_mutations__504429",
"topic": "convex",
"subSkill": "queries_mutations",
"difficulty": 5,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Given a table of 120k rows and no index on ownerId, what does this handler do at runtime?"
}
]
}
],
"code": {
"lang": "ts",
"code": "export const mine = query({\n args: { ownerId: v.id(\"users\") },\n handler: async (ctx, args) => {\n return await ctx.db\n .query(\"records\")\n .filter((q) => q.eq(q.field(\"ownerId\"), args.ownerId))\n .collect();\n },\n});",
"label": "queries-mutations.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "short-circuits on the first filter predicate that returns true"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "streams each document lazily and returns the first hit found"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "scans every document and often exceeds the read budget per call"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "uses an automatic hidden hash index on ownerId under the hood"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "design_systems.design_tokens__59036",
"topic": "design_systems",
"subSkill": "design_tokens",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What file format does the W3C Design Tokens Community Group specification require for token files?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "JSON files, with the .tokens or .tokens.json extension"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "CSS custom property files with a .tokens.css extension"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "XML files carrying the .tokens.xml extension"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "YAML files carrying the .tokens.yml extension"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "design_systems.design_tokens__59038",
"topic": "design_systems",
"subSkill": "design_tokens",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What tool did Amazon create to transform design tokens into platform-specific code?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Storybook, the component workshop that documents UI states but does not transform token sources on a page"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Theo, the token transformer Salesforce built before consolidating on the open standard format"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Style Dictionary, which reads JSON token sources and emits CSS, SCSS, iOS, and Android outputs"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Figma Tokens, the in-canvas plugin for authoring tokens rather than building platform artifacts"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.design_tokens__200007",
"topic": "design_systems",
"subSkill": "design_tokens",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which characterization best fits why design tokens are described as platform-agnostic?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "They live in a runtime API that every client polls on startup to fetch the right rendering for the current device profile."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "They are written in a universal binary format (one encoding) that browsers, iOS, and Android can each parse natively without conversion"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "They store design decisions as data, then a transformer emits the right form (CSS var, Swift, XML) for each target platform."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "They are limited to color values, which every platform represents identically, sidestepping per-platform format differences."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.design_tokens__79510",
"topic": "design_systems",
"subSkill": "design_tokens",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is Style Dictionary's 'transform' pipeline?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A chain of functions reshaping token names and values per platform"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A CSS transform property applied to components that use design tokens"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A build step that minifies token files for production deployment"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A migration tool that converts old token formats to the DTCG specification"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "design_systems.design_tokens__79659",
"topic": "design_systems",
"subSkill": "design_tokens",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is an 'opacity token' and when is it used instead of transparent color tokens?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A token that controls the transparency of design system documentation page backgrounds"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A CSS property token that fades components in and out during route transitions"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A token defining a single opacity value applied whatever the element's color"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A token that sets the opacity of focus ring indicators to make them subtle"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "design_systems.design_tokens__724835",
"topic": "design_systems",
"subSkill": "design_tokens",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Per current DTCG guidance, a group node (a JSON object that contains tokens but is not itself a token) is distinguished from a token node by which rule?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "The node's key starts with an underscore prefix; that is the spec convention"
}
],
"shape": "code"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "The node declares 'isGroup': true alongside its children map"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "The node has no $value property; tokens are nodes that carry $value"
}
],
"shape": "code"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "The node lives under a reserved top-level 'groups' key in the file"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "design_systems.design_tokens__79587",
"topic": "design_systems",
"subSkill": "design_tokens",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What format does Style Dictionary use for defining design tokens?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "JSON or JS/TS files with nested objects where leaf nodes contain a 'value' property (or '$value' for DTCG format)"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "GraphQL schema files that define token types and relationships for every consumer of the library"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "YAML files with indentation-based nesting (two spaces per level) and no explicit value property across a whole product as well"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "CSS files with custom property definitions that are parsed into tokens inside a shared repository"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.design_tokens__400003",
"topic": "design_systems",
"subSkill": "design_tokens",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "How does accessibility (a11y) intersect with the token layer?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Accessibility is irrelevant to tokens since contrast and sizing are decided per page by the route-level configuration at runtime."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Accessibility lives entirely at the component layer because tokens only carry visual values and cannot influence ARIA semantics."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Tokens can encode contrast-checked color pairs and minimum hit-target sizes so a11y constraints are baked into the source."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Accessibility is enforced by the browser engine reading axe-core rules from token JSON during the layout phase of each paint."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.design_tokens__100231",
"topic": "design_systems",
"subSkill": "design_tokens",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A designer ships a new brand palette. Engineers update one JSON file, run the build, and CSS variables, iOS Swift constants, and Android XML resources all regenerate. What kind of file did they edit?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A primitive token source file consumed by a token build pipeline that emits per-platform artifacts"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A theme provider component compiled into JS and shipped through the npm web package on its own"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A Sass partial imported by the web bundle and copy-pasted into the mobile repos by hand each time"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A Figma library file synced through a plugin that writes platform files at design review time only"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.design_tokens__400004",
"topic": "design_systems",
"subSkill": "design_tokens",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which characterization best fits a 'token diff' tool in a governance pipeline?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A monitoring agent that records runtime token usage in production and reports which custom properties are read by the browser."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A linter that scans Figma frames for unused styles and opens pull requests against the design library to remove orphaned ones. on a page"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A bundler analyzer that calculates the bytes contributed by token output to the final CSS chunk shipped to the browser."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A CI step that compares token sets between branches and reports renames, value changes, and removals as a structured changelog."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.theming_customization__79955",
"topic": "design_systems",
"subSkill": "theming_customization",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is 'theme generation' tooling for design systems?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Tools that automatically generate a complete theme (all token values for light/dark modes, contrast-checked color pairings) from minimal input like a brand color and style preferences"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "AI tools that generate Figma designs (whole files) from theme token definitions long before any of that work ever reaches a user across a whole product"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Testing tools that generate all possible theme combinations for visual regression testing long before any of that work ever reaches a user across all of the products the organisation ships"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Build tools that generate theme-specific CSS files from a single token source long before any of that work ever reaches a user inside a shared repository"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.theming_customization__2042879",
"topic": "design_systems",
"subSkill": "theming_customization",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A team is comparing 'one token set with role.primary semantics rebound per theme' versus 'separate token sets named brand-a.primary and brand-b.primary referenced directly'. What is the difference?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Both naming approaches keep components portable; the only operational difference is that brand-named tokens compile faster because no alias resolution step is required."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Brand-named references let components stay stable while themes rebind the brand; role-based naming hardcodes the role into every component, defeating multi-brand reuse."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Role-based naming requires every component to know which brand is active at render time, while brand-named references are resolved automatically by the DTCG specification. on a page"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Role-based naming lets components reference one stable role and themes rebind it; brand-named references hardcode the brand into every component, defeating multi-brand reuse."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.theming_customization__100101",
"topic": "design_systems",
"subSkill": "theming_customization",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What role do CSS custom properties play in supporting runtime theme changes on the client?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "They are restricted to the :root selector and cannot be redeclared further down inside descendant subtrees."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "They are functionally equivalent to Sass variables and therefore must be recompiled when any token value changes. on a page"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "They are compiled away at build time into static rules, so the bundle ships pre-resolved per-theme output."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "They are live-cascading variables whose values can be reassigned at any DOM scope without rebuilding the stylesheet."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.theming_customization__4042891",
"topic": "design_systems",
"subSkill": "theming_customization",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Compare 'Material 3 dynamic-color tonal-palette generation as the theming engine' versus 'curated semantic tokens with explicit dark and HC variants'. From the perspective of a regulated-industry product with strict brand guidelines and contrast SLAs, which contrast is the binding one?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Both approaches give identical contrast guarantees because both are validated by the same automated accessibility checkers and produce equivalent per-element contrast ratios at runtime."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Curated tokens personalize per user but cede brand and contrast outcomes to a generator; dynamic color keeps brand and contrast deterministic and auditable against explicit SLAs."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Neither approach satisfies regulated-industry contrast SLAs because token-based theming cannot encode contrast ratios; only inline-style theming with hard-coded hex values can guarantee specific ratios."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Dynamic color personalizes per user but cedes brand and contrast outcomes to a generator; curated tokens keep brand and contrast deterministic and auditable against explicit SLAs."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.theming_customization__300614",
"topic": "design_systems",
"subSkill": "theming_customization",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "An Android team adopts Material 3 dynamic color, sourcing the seed from the user's wallpaper. After release, accessibility complaints spike: text-on-primary contrast occasionally drops below 4.5:1 on certain wallpapers. The team confirms the generated tonal palette is correct. What is the most likely cause?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Components reference a fixed tone step on the primary palette instead of the role token that maps to the contrast-safe on-primary tone"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Dynamic color disables the on-primary role token when the seed luminance falls below 0.3, forcing components to fall back to a primitive value"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "The wallpaper sampling algorithm averages saturated pixels which shifts the seed hue enough to invalidate the generated tonal steps below tone 50"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Material 3 generates tonal palettes without contrast guarantees, so any dynamic seed will produce some failing pairs at the palette layer"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.theming_customization__200420",
"topic": "design_systems",
"subSkill": "theming_customization",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A team builds a multi-brand white-label SaaS. Each tenant gets a CSS file injected at runtime that overrides ~12 brand primitive tokens. Lighthouse shows a 200ms FOUC where the default brand flashes before the tenant brand resolves. Which mitigation is the best fit for the diagnostic?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Inline a minimal set of brand primitive declarations in the document head before the main stylesheet so the tenant theme resolves on first paint"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Wrap the document root in a React Suspense boundary that delays paint until the tenant stylesheet has fully downloaded and the page components cascade over the network"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Move the tenant override stylesheet to the end of the body so it runs after hydration and recolors components in place on a page"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Switch all brand primitives to !important declarations so the cascade resolves them faster than the default brand stylesheet"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.theming_customization__59216",
"topic": "design_systems",
"subSkill": "theming_customization",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "How does the 'adapt' approach to design system adoption differ from simply 'adopting' an open-source system?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Adapting involves customizing an existing system to fit the organization's brand and product requirements, increasing cost but retaining the foundation's proven architecture"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Adapting requires rewriting all components in a different framework long before any of that work ever reaches a user inside a shared repository"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Adapting means using the system only for internal tools, not customer-facing products long before any of that work ever reaches a user for each of the teams consuming that library"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Adapting is identical to adoption but uses a different licensing model long before any of that work ever reaches a user inside a shared repository"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.theming_customization__79695",
"topic": "design_systems",
"subSkill": "theming_customization",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is 'accent color' theming in design systems like Radix Themes?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A theming approach that applies a secondary color to complementary UI elements"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A pattern that highlights the most recently interacted-with component for user guidance"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A CSS feature that adds an accent mark above text characters for internationalization"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A single setting for the primary interactive color used across the components"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "design_systems.theming_customization__79999",
"topic": "design_systems",
"subSkill": "theming_customization",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the 'prefers-contrast' media query and how should design systems respond to it?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A user preference for higher or lower contrast, met with a high-contrast theme"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A CSS feature for adjusting contrast between adjacent elements in the same container"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A media query that detects the monitor's physical contrast ratio capability"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A browser feature that automatically adjusts the page colors for better contrast"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "design_systems.theming_customization__200421",
"topic": "design_systems",
"subSkill": "theming_customization",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A DS team rolls out semantic tokens and asks product teams to migrate. Six months in, the adoption dashboard shows 78% of components consume semantic tokens, but 92% of new PRs introduce raw hex codes. The DS lead is frustrated. Which intervention best addresses the diagnostic pattern?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Add a lint rule that fails CI when raw hex or palette primitives appear in component styles outside the token layer"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Add the semantic token list to the onboarding deck and require all new hires to read it during their first sprint at the company"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Schedule a recurring office-hours session where the DS team manually refactors hex codes out of PRs after they have been merged"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Publish a quarterly newsletter highlighting top semantic-token adopters and shame teams introducing raw hex into shared components"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.component_architecture__529184",
"topic": "design_systems",
"subSkill": "component_architecture",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A junior asks why your Button takes children plus an optional "
},
{
"t": "code",
"v": "icon"
},
{
"t": "text",
"v": " slot instead of fifty boolean props. What's the framing you give?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Slot-based APIs render faster than prop-based APIs on first paint in a browser"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Slot APIs are required by the DTCG spec for atomic components on a page"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Composition through slots scales better than configuration through props"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Prop-heavy components break tree-shaking in modern bundlers on a page"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "design_systems.component_architecture__934712",
"topic": "design_systems",
"subSkill": "component_architecture",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A consumer team copies "
},
{
"t": "code",
"v": ""
},
{
"t": "text",
"v": " into their app and forks it because they need a slightly different header layout. Three months later there are six forks, other teams are asking for custom footers and action rows too, and the a11y fixes from the source modal have not propagated to any of them. What architectural change reduces this drift?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Expose the modal as a compound component with named slots so teams compose headers without forking the shell"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Expose the modal as a class so consumer teams can extend it and override only the header method they need"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Expose the modal with a "
},
{
"t": "code",
"v": "headerVariant"
},
{
"t": "text",
"v": " enum that lists every header shape the consumer teams have asked for"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Expose the modal with a "
},
{
"t": "code",
"v": "renderHeader"
},
{
"t": "text",
"v": " callback prop so teams inject markup without copying the component"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.component_architecture__200006",
"topic": "design_systems",
"subSkill": "component_architecture",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What are 'organisms' in the Atomic Design hierarchy?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "The smallest visual primitives carrying a single brand decision, like a stand-alone label or icon"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Fully rendered screens shown to a real end user with live data flowing through them at runtime"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Page-level scaffolds that arrange content groups in a layout before real product data is wired"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Relatively complex UI sections built by composing smaller bonded units and primitives together"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.component_architecture__59124",
"topic": "design_systems",
"subSkill": "component_architecture",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What default mindset should teams adopt when creating new UI elements, according to Brad Frost?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Build snowflakes first for the product at hand and then generalize each one of them later once the pattern is clear"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Default to thinking of things as design system components, always asking 'How can we build this to be as reusable and agnostic as possible?'"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Prioritize visual polish over reusability every single time, since the screen is what the people out there actually see"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Build product-specific components for every single one of the screens and never once contribute any of that work back to the shared design system"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.component_architecture__850056",
"topic": "design_systems",
"subSkill": "component_architecture",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A dev ships a Form organism that internally calls fetch on submit, owns its own error state, and renders an inline toast. Product reuses the form inside a wizard; the toast renders inside the wizard step, the fetch fires twice on retry, and tests need a mock server. What architectural rule did the organism break?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Organisms must not own data-fetching or global side effects; those belong to the page or feature layer"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Organisms must not own composition slots or render trees; those belong to the template or layout layer"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Organisms must not own keyboard semantics or focus traps; those belong to the headless primitive layer"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Organisms must not own design tokens or theme context; those belong to the primitive or atom layer"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.component_architecture__79685",
"topic": "design_systems",
"subSkill": "component_architecture",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the 'Provider stack' problem in React design system applications?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Multiple design systems being used simultaneously on the very same page and causing all kinds of style conflicts inside a shared repository"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "React providers (Theme, Router) failing to pass their data down to components rendered in portals outside the provider tree: a silent failure for every consumer of the library"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Too many npm packages from design system providers all competing for the very same namespace at once in one install inside a shared repository"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Multiple nested context providers (Theme, Toast, Dialog, Router, Auth) creating deeply indented JSX at the app root: each adding overhead to React's context propagation"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.component_architecture__79838",
"topic": "design_systems",
"subSkill": "component_architecture",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is an 'avatar' component in a design system?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A component showing a profile image, falling back to initials"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A component that generates user profile pages from account data"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A 3D character model component used in gamified user interfaces"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "An authentication component that manages user identity verification"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "design_systems.component_architecture__1394856",
"topic": "design_systems",
"subSkill": "component_architecture",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A bundle-size dashboard shows that consumers importing "
},
{
"t": "code",
"v": ""
},
{
"t": "text",
"v": " pull in "
},
{
"t": "code",
"v": ""
},
{
"t": "text",
"v": ", "
},
{
"t": "code",
"v": ""
},
{
"t": "text",
"v": ", and "
},
{
"t": "code",
"v": ""
},
{
"t": "text",
"v": ". The barrel file re-exports everything from a single "
},
{
"t": "code",
"v": "index.ts"
},
{
"t": "text",
"v": ". Tree-shaking is enabled. What is the most direct cause of the bloat?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Side-effects in the package entry are preventing the bundler from dropping unused re-exports from the barrel"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Circular imports between Card, Modal, and Drawer are forcing the bundler to keep every component in the graph"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Default exports in the barrel are blocking the bundler from tracing individual named imports back to source"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Dynamic "
},
{
"t": "code",
"v": "import()"
},
{
"t": "text",
"v": " calls in Card are eagerly pulling in Modal and Drawer at the package's top-level scope"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.component_architecture__327462",
"topic": "design_systems",
"subSkill": "component_architecture",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Auditor flags that your Dialog traps focus but the trap breaks when a portal renders into a sibling DOM root. A teammate says modern headless libraries solved this. Their solution:"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Focus trap is rebuilt on every render using the document.activeElement chain"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Portals are restricted to the same DOM ancestry as the trigger on every render"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Tab navigation is captured by the global event loop and routed by ARIA role"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Focus scope tracks the logical tree across portals, not DOM ancestry"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "design_systems.component_architecture__79837",
"topic": "design_systems",
"subSkill": "component_architecture",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is 'React Spectrum' and what makes Adobe's approach unique in the design system space?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A color spectrum tool that generates accessible color palettes from a single brand color"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A code generation tool that converts Adobe XD designs into React components"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A design system analytics platform that measures component usage across Adobe products"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Three layers, React Aria for hooks, React Stately for state, React Spectrum for styles"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.adoption_contribution__714820",
"topic": "design_systems",
"subSkill": "adoption_contribution",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A consumer-velocity metric divides shipped features by hours spent. What does the script log?"
}
]
}
],
"code": {
"lang": "ts",
"code": "const shippedFeatures = 10;\nconst engineerHours = 40;\nconst velocity = shippedFeatures / engineerHours;\nconsole.log(`features/hour: ${velocity}`);",
"label": "adoption-contribution.ts"
},
"widget": {
"kind": "predict_output",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "features/hour: 0.20"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "features/hour: 0.50"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "features/hour: 0.25"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "features/hour: 0.40"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "design_systems.adoption_contribution__59215",
"topic": "design_systems",
"subSkill": "adoption_contribution",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What support channels should a design system provide?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Office hours are optional; async communication alone is recommended"
}
],
"shape": "code"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Support is provided through GitHub Issues with no synchronous channel"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Communication paths, request templates, cadences, and office hours"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A single email address for the whole set of requests is enough"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "design_systems.adoption_contribution__79780",
"topic": "design_systems",
"subSkill": "adoption_contribution",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is 'design system evangelism' and why is it a team responsibility?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Actively promoting the system through demos, blog posts, workshops, and pairing"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Marketing the design system to external companies as a commercial open-source product"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Creating social media content about the design system for developer community engagement"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Publishing conference talks about the design system to attract engineering talent"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.adoption_contribution__79970",
"topic": "design_systems",
"subSkill": "adoption_contribution",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is 'gradual adoption' strategy for design systems?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Letting teams adopt the system in stages, starting with tokens before components"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Slowly increasing the strictness of design system linting rules over several months"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A strategy where the design system is adopted by one team at a time in a planned sequence"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Gradually adding more components to the design system library over time"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "design_systems.adoption_contribution__79677",
"topic": "design_systems",
"subSkill": "adoption_contribution",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What role does 'developer experience (DX)' play in design system adoption?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Good DX (clear APIs, helpful error messages, great TypeScript autocomplete, fast builds) directly drives adoption because developers choose the path of least resistance"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "DX is a marketing concern and not a technical one: it only affects how the design system gets promoted internally to all of the product teams that use it every single day"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "DX matters only during the initial setup; after onboarding is done, it has no further effect on adoption because habits are already set"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "DX is only about documentation quality (the guides and the examples) and has no impact at all on how the code API itself is designed here"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.adoption_contribution__79950",
"topic": "design_systems",
"subSkill": "adoption_contribution",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is 'design system discovery' as an adoption challenge?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Teams not knowing the system exists, what it offers, or where to find it"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A research phase where the team discovers what components to build first"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A tool that discovers which design system components are used across products"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Discovering which of the design frameworks (React, Vue, Angular) a new team should use"
}
],
"shape": "code"
}
]
}
},
{
"questionId": "design_systems.adoption_contribution__2844726",
"topic": "design_systems",
"subSkill": "adoption_contribution",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the 'subsystem' pattern for scaling a design system to multiple product areas?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Domain-specific extensions that build on the core and follow its conventions while serving niche needs"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Standalone libraries developed by third-party vendors and added without alignment to the system's APIs"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Marketing-side asset packs distributed to external agencies for use in advertising and campaign work"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Independent forks of the core repository owned and released entirely by the individual product organisations"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.adoption_contribution__79676",
"topic": "design_systems",
"subSkill": "adoption_contribution",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the 'build vs. buy vs. adopt' decision framework for design systems?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A framework for deciding whether to hire designers or developers for the system team"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A financial model for calculating the cost of building each individual component"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Weighing in-house authoring, a paid library, or an existing open-source system"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A decision tree for choosing between different CSS methodologies for the design system"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.adoption_contribution__300451",
"topic": "design_systems",
"subSkill": "adoption_contribution",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Coverage holds steady at 78% but custom-CSS escape rate is rising release over release. Comparing the diagnoses 'the system lacks a needed primitive consumers keep reinventing' versus 'consumers are simply ignoring the system', which is the more defensible read given those two metrics together?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A gap in primitives is forcing escape inside otherwise-adopted surfaces"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Consumers are bypassing the system entirely on surfaces they newly build out"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Escape rate is noisy because dev-only debug CSS is leaking into the measurement"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Coverage is overstated because the sampler double-counts the same component tree"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "design_systems.adoption_contribution__1024758",
"topic": "design_systems",
"subSkill": "adoption_contribution",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "An adoption report normalizes per-team coverage and prints sorted teams. What is the output?"
}
]
}
],
"code": {
"lang": "ts",
"code": "const teams = {\n web: { ds: 90, total: 100 },\n mobile: { ds: 30, total: 40 },\n admin: { ds: 10, total: 20 }\n};\nconst rows = Object.entries(teams)\n .map(([t, v]) => [t, v.ds / v.total])\n .sort((a, b) => b[1] - a[1])\n .map(([t, r]) => `${t}: ${r.toFixed(2)}`);\nconsole.log(rows);",
"label": "adoption-contribution.ts"
},
"widget": {
"kind": "predict_output",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "[ 'web: 0.90', 'mobile: 0.75', 'admin: 0.50' ]"
}
],
"shape": "code"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "[ 'web: 90%', 'mobile: 75%', 'admin: 50%' ]"
}
],
"shape": "code"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "[ 'admin: 0.50', 'mobile: 0.75', 'web: 0.90' ]"
}
],
"shape": "code"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "[ 'mobile: 0.75', 'web: 0.90', 'admin: 0.50' ]"
}
],
"shape": "code"
}
]
}
},
{
"questionId": "design_systems.versioning_governance__79690",
"topic": "design_systems",
"subSkill": "versioning_governance",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is 'design system team size' and what's the typical range?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "One designer and one engineer (just two people) is always sufficient for maintaining a design system long before any of that work ever reaches a user for a product team"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Design system teams should be at least 20 people to cover all necessary components long before any of that work ever reaches a user on a page"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Commonly 3-8 people (mix of designers and engineers) for a centralized team, though the effective team is larger in federated models where product teams contribute"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "The team size should equal the number of products consuming the design system long before any of that work ever reaches a user on a page"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.versioning_governance__1027184",
"topic": "design_systems",
"subSkill": "versioning_governance",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "GitHub blame on packages/ds-tokens/colors.json shows the last 12 commits all from one product team's engineers, with no DS-team review. CODEOWNERS file lists '* @acme/product-platform'. What's wrong with this setup?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Wildcard ownership entries override per-path rules so DS would be auto-bypassed in a browser"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "CODEOWNERS only enforces review for src/ files and skips json artifact path entries"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Tokens are versioned externally so CODEOWNERS should not list them at all here"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Tokens lack a dedicated DS-team owner entry so product PRs auto-merge without DS review"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.versioning_governance__59083",
"topic": "design_systems",
"subSkill": "versioning_governance",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What must happen to the PATCH and MINOR numbers when the MAJOR version is incremented in SemVer?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Both MUST be reset to 0 (e.g., 2.3.4 becomes 3.0.0)"
}
],
"shape": "code"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "They are each incremented by 1 for a product team"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Only PATCH resets to 0 (never MINOR); MINOR stays the same"
}
],
"shape": "code"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "They remain unchanged inside a shared repository"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "design_systems.versioning_governance__100232",
"topic": "design_systems",
"subSkill": "versioning_governance",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Compared with a contribution guide that lives in CONTRIBUTING.md, what is the purpose of a CODEOWNERS file in a design-system repo?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Auto-requests review from the listed maintainers when matching paths change in a PR"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Auto-assigns the linked issue to the listed maintainers when matching paths are tagged"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Auto-publishes changelogs to the listed maintainer accounts when matching paths merge"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Auto-deploys preview builds to the listed maintainers when matching paths change in CI"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.versioning_governance__100234",
"topic": "design_systems",
"subSkill": "versioning_governance",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "In a pnpm monorepo shipping "
},
{
"t": "code",
"v": "@ds/button"
},
{
"t": "text",
"v": ", "
},
{
"t": "code",
"v": "@ds/input"
},
{
"t": "text",
"v": ", and "
},
{
"t": "code",
"v": "@ds/tokens"
},
{
"t": "text",
"v": ", the team wants per-package SemVer bumps driven by PR-attached intent files. Compared with running "
},
{
"t": "code",
"v": "npm version"
},
{
"t": "text",
"v": " at the repo root, which tool fits this workflow?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Nx release graph, which derives bump levels from cross-package import edges rather than per-PR intents"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Renovate bot, which opens dependency upgrade PRs against external libs rather than versioning internal packages"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Changesets, which records per-package bump intents in markdown files and aggregates them at release time"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Lerna fixed mode, which forces every package in the monorepo to share one synchronized version number"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.versioning_governance__79908",
"topic": "design_systems",
"subSkill": "versioning_governance",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is 'module federation' for micro-frontend design system sharing?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A governance model where different teams manage different modules of the design system"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A federation of design systems from different organizations that share a common token format"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A build tool that federates component documentation from multiple team repositories into one site"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A bundler feature letting separately deployed apps share one design system instance at runtime"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.versioning_governance__637419",
"topic": "design_systems",
"subSkill": "versioning_governance",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A team uses Changesets in a monorepo. A PR touches "
},
{
"t": "code",
"v": "@ds/button"
},
{
"t": "text",
"v": " (patch) and "
},
{
"t": "code",
"v": "@ds/icons"
},
{
"t": "text",
"v": " (minor). The PR also imports a new icon into Button. After release, consumers who depend only on "
},
{
"t": "code",
"v": "@ds/button"
},
{
"t": "text",
"v": " get the icon update without bumping their "
},
{
"t": "code",
"v": "@ds/icons"
},
{
"t": "text",
"v": " lockfile. Why?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Changesets uses fixed versioning by default in monorepos, meaning all packages share one version number and individual entries are ignored at publish time"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Changesets bumps each package independently and only the package whose changeset entry was authored gets bumped, so dependent packages need an explicit changeset to propagate"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Changesets infers transitive bumps from import graphs at build time, so any cross-package import automatically triggers a coordinated major release"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Changesets always force-bumps every package in the monorepo on every release, so the icons package was bumped silently without recording it in the changelog across a whole product"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.versioning_governance__79977",
"topic": "design_systems",
"subSkill": "versioning_governance",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is 'design system maturity assessment' and who should do it?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A structured evaluation across components, tokens, docs, governance, adoption, and tooling"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A security assessment of the design system's package supply chain and dependency vulnerabilities"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A stakeholder presentation evaluating the design system's financial performance and ROI"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "An assessment of whether the design system team members have sufficient skills and experience"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.versioning_governance__79738",
"topic": "design_systems",
"subSkill": "versioning_governance",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is 'bundle analysis' as a design system quality gate?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Reviewing the total number of npm packages in the design system's dependency tree"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Analyzing which components are bundled together most frequently in consumer applications"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Measuring the JavaScript and CSS weight each component adds, failing CI over budget"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Measuring the time it takes for the design system's CI pipeline to complete"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "design_systems.versioning_governance__100236",
"topic": "design_systems",
"subSkill": "versioning_governance",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Compared with merging a 'just add a Tooltip variant' PR directly, what does an RFC (Request for Comments) process for design-system additions primarily contribute?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A documented Figma file with token mappings and visual regression baselines before the code RFC opens"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A documented proposal with API shape, alternatives, and review window before any implementation lands"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A documented release artifact with bundled migration codemods and a fixed deprecation removal window"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A documented test plan with axe coverage thresholds and visual diff baselines before the API freezes"
}
],
"shape": "long"
}
]
}
}
]
}