"
},
{
"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__300421",
"topic": "html_a11y",
"subSkill": "forms_inputs",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What does AT announce when the user moves into the second textbox?"
}
]
}
],
"code": {
"lang": "html",
"code": "
",
"label": "forms-inputs.html"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Mailing address heading, edit text street"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Street, edit text"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Form region mailing address, street edit"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Group mailing address, two of two, edit"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.responsive_design__71809",
"topic": "ux_design",
"subSkill": "responsive_design",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is 'above the fold' optimization in responsive design?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Placing the important content above a physical fold in a printed brochure or newspaper"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Ensuring the page has no scrollable content on any viewport size the product supports"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Hiding all of the content below the first screen so that the page weighs less and downloads faster on mobile"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Ensuring the most critical content and primary CTA are visible without scrolling on the user's viewport"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.responsive_design__101699",
"topic": "ux_design",
"subSkill": "responsive_design",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Comparing the hover media feature with the pointer media feature when designing for a hybrid touch-and-mouse laptop, what does each actually express?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "hover detects connected accessibility hardware such as switch controls, whereas pointer detects whether the user has paired a stylus to the operating system."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "pointer detects whether any input mechanism can hover over UI elements, while hover indicates the precision class of the primary pointing device available."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "hover detects whether the primary input can rest over an element to trigger a hover state, while pointer describes that input's precision."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "pointer reflects the user's saved interaction preference in the OS settings, while hover reflects only whether a Bluetooth mouse is currently advertising itself."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.responsive_design__100241",
"topic": "ux_design",
"subSkill": "responsive_design",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Why do hover-only interactions cause trouble on touch devices?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Touch input has no equivalent of the mouse cursor's hover state, so the affordance is unreachable."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Touch input cannot trigger CSS transitions until the user finishes the scrolling gesture."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Touch input always disables pointer events through CSS unless explicitly enabled by the author."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Touch input fires hover and click events in an unpredictable order across the major mobile browsers."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.responsive_design__71849",
"topic": "ux_design",
"subSkill": "responsive_design",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is 'Cumulative Layout Shift' (CLS) and why does it matter for UX?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A library metric scoring how consistent the components are with one another in use"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A score for how far elements jump while loading, causing accidental mis-taps"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A server-render trick scoring element positions ahead of delivery time"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A stylesheet technique for moving blocks around between different viewport widths on load"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.responsive_design__102612",
"topic": "ux_design",
"subSkill": "responsive_design",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Comparing CSS Grid's auto-fill with auto-fit for a responsive card track, what is the layout behaviour difference when there are few cards in a wide container?"
}
]
}
],
"code": {
"lang": "ts",
"code": "grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));",
"label": "responsive-design.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "auto-fill collapses unused tracks so present cards stretch across the available row, whereas auto-fit keeps placeholder tracks reserved at the minimum declared width."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "auto-fill applies only to subgrids nested in grid templates, while auto-fit applies only to fragmented grids that span multiple flex container ancestors."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "auto-fit collapses empty tracks so existing cards stretch to fill the row, while auto-fill preserves empty tracks at the minimum size and leaves visible gaps."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "auto-fit always wraps cards onto a new row after every two columns regardless of width, whereas auto-fill keeps cards inline until horizontal scrolling is required."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.responsive_design__103778",
"topic": "ux_design",
"subSkill": "responsive_design",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Comparing CSS overflow handling at narrow widths with a horizontally scrolling carousel versus a vertically stacked list, what is the typical discoverability cost of the carousel pattern?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Horizontal carousels hide off-screen items behind an edge that users often fail to perceive as scrollable, depressing engagement with items past the first."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Vertical stacks hide later items behind a fold that users frequently overlook, while horizontal carousels surface every item simultaneously without truncation."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Horizontal carousels are read first by screen readers because of their inline orientation, while vertical stacks are read last regardless of their DOM order."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Vertical stacks fail completely on Safari's intersection observer, while horizontal carousels render every item eagerly during the page's initial paint pass."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.responsive_design__71744",
"topic": "ux_design",
"subSkill": "responsive_design",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is a 'foldable device' UX challenge that does not exist in traditional responsive design?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Such hardware has no way to run a current web browser engine on it"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "The panel folds into several postures, so the layout handles split and flat modes"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Such panels report exactly the same pixel resolution as an ordinary handset would do"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Viewport-based stylesheet rules have no effect on such hardware here"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.responsive_design__20046",
"topic": "ux_design",
"subSkill": "responsive_design",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A data table has 12 columns and must be usable on both desktop and mobile. What responsive pattern best preserves data integrity while accommodating narrow viewports?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Reduce all tables to 3 columns maximum for mobile viewports, removing all non-essential data columns entirely in practice"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Convert the table to a CSV download link on mobile since data tables are fundamentally unusable on small screens"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Use pinch-to-zoom as the primary navigation mechanism for accessing all columns on mobile device screens in practice"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Column prioritization with horizontal scroll for secondary columns, or cards promoting 3-5 critical columns"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.responsive_design__71842",
"topic": "ux_design",
"subSkill": "responsive_design",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is 'content choreography' in responsive design?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Deliberately reordering, resizing, and re-ranking blocks at each viewport width"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Sequencing the pages a person walks through in a multi-step signup process"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Animating the transition of blocks as the viewport crosses over each breakpoint"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Keeping the material in sync across the several devices that somebody owns"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.responsive_design__100259",
"topic": "ux_design",
"subSkill": "responsive_design",
"difficulty": 5,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What does the HTML meta tag viewport-fit=cover change on a notched device?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "The browser tints the status bar to match the document's background color when the page first loads."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "The browser locks orientation to portrait so the notch never appears on the long edge of the screen."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "The browser disables pinch-zoom so the layout viewport cannot expand past the original device width."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "The layout viewport extends into the device's non-rectangular areas so the page paints edge to edge."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.usability_testing__714062",
"topic": "ux_design",
"subSkill": "usability_testing",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "The team needs to test a complex tax-filing wizard where participants will likely need clarifying questions answered. They're choosing between Maze (unmoderated) and Lookback (moderated remote). Behavior they observed in a Maze pilot: 60% drop-off on step 3 with no qualitative signal. What's the right adjustment?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Stay on Maze and add heatmap recordings to infer the step-3 friction visually"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Switch to in-person moderated lab so participants see the real production stack"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Switch to moderated remote so a researcher can probe the step-3 drop-off live"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Stay on Maze and add a follow-up survey asking why they exited the flow"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.usability_testing__200342",
"topic": "ux_design",
"subSkill": "usability_testing",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A teammate conflates 'severity' and 'frequency' when scoring findings from a moderated test. How does severity differ from frequency for a single usability finding?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Severity captures the calendar age of the issue in the bug tracker; frequency captures the recency of when it was first reported by an internal teammate."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Severity captures how badly an affected user is blocked or harmed; frequency captures how many users in the sample hit the issue at all."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Severity captures how many participants encountered the issue across the run; frequency captures whether one specific user was particularly harmed by hitting it."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Severity captures how much engineering effort the fix will take; frequency captures the dollar revenue impact of leaving the issue unresolved in production."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.usability_testing__10229",
"topic": "ux_design",
"subSkill": "usability_testing",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "In a task-based usability session, which signal most directly tells you where the design fails?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "How many features participants say they would like added in the future"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Points where users hesitate or take a wrong path completing a realistic task"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "How visually appealing participants rate each screen at the very end"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "How closely the interface matches the team's current brand guidelines"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.usability_testing__200351",
"topic": "ux_design",
"subSkill": "usability_testing",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which statement best describes a usability test's discussion guide?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A spreadsheet of pre-coded findings the moderator references during the session in order to map participant comments to known issues"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A handout the participant reads before joining, summarizing the product's competitive landscape and the team's positioning thesis fully"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A document listing the warm-up questions, tasks, prompts, and probes the facilitator uses to run each session consistently"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A post-session worksheet stakeholders fill out together to agree on which observations from the recordings should be flagged for triage"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.usability_testing__71812",
"topic": "ux_design",
"subSkill": "usability_testing",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the 'Kano model' and how does it inform UX prioritization?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A colour system that maps hue and saturation onto emotional reaction for interface palettes"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A way to sort features into expected, the-more-the-better, and unexpected delights"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A tiering scheme for subscription pricing that sets which capability sits behind which plan"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A statistical method for forecasting which page a visitor will open next from their click history"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.usability_testing__71936",
"topic": "ux_design",
"subSkill": "usability_testing",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the WAVE accessibility evaluation tool?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A fluid-simulation renderer for drawing water surfaces inside browser graphics"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A utility for generating undulating stylesheet motion effects on a page heading"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A free in-browser utility drawing conformance errors and warnings onto the page"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "An audio editor for trimming and mastering recorded podcast episodes for release"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.usability_testing__71779",
"topic": "ux_design",
"subSkill": "usability_testing",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "How does a 'preference test' differ from a 'usability test'?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Both kinds use identical procedures and come back with exactly the same sort of data"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A usability test has no way of capturing a subjective opinion from a person"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A preference test predicts the better task outcome; the usability run adds nothing"
}
],
"shape": "code"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A preference test asks which look people favour; a usability test measures doing"
}
],
"shape": "code"
}
]
}
},
{
"questionId": "ux_design.usability_testing__200348",
"topic": "ux_design",
"subSkill": "usability_testing",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which statement best describes a heuristic evaluation in the Nielsen sense?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Designers vote on which screens they personally find confusing and assign a confusing-ness score to each one before any user research"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Trained evaluators inspect an interface against a published set of usability heuristics and log violations they observe"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "An automated tool crawls each page and flags any color contrast or aria-label failures it can detect against WCAG threshold values directly"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Real participants attempt tasks and the moderator rates each task against a standard rubric of task-completion criteria during the session"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.usability_testing__935182",
"topic": "ux_design",
"subSkill": "usability_testing",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A team ran 5 users on the onboarding flow and shipped fixes. They want to re-test the same flow with a second round of 5 users. A junior researcher objects: 'You said 5 is enough - why test again?' What's the lead's reply rooted in?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Iterative rounds catch issues introduced or exposed by the previous fixes"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Iterative rounds confirm statistical significance of the first finding set"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Iterative rounds let the researcher recalibrate the severity rubric used"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Iterative rounds widen the participant pool to reach segment coverage"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.usability_testing__400594",
"topic": "ux_design",
"subSkill": "usability_testing",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which statement best describes a defensible reason to keep severity ratings separate from frequency counts in a findings report?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Engineering teams reject any report that contains a single composite score, so the research team must always split numeric metrics into multiple columns"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "The two ratings are gathered by different members of the research team in different software tools, so combining them is logistically impractical for most"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A rare blocker can outrank a common annoyance, so collapsing the two into one number hides cases where harm-per-occurrence dominates fix priority"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Statistical software cannot compute a confidence interval on a composite score derived from two underlying ratings, so the columns must be kept separate"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.user_research__519388",
"topic": "ux_design",
"subSkill": "user_research",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Asking 'How important is search to you?' vs 'Walk me through the last three things you searched for on the site' - for understanding real reliance on search, which question type is stronger?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "The importance rating: users can introspect accurately about feature importance, especially when given a 1-to-7 scale to anchor their answer."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "The behavioral recall: it is stronger mainly because three episodes provides a statistically valid sample for behavioral analysis at the user level."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "The behavioral recall: importance ratings are abstract self-assessments, while a concrete recent episode anchors the answer in observed use."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "The importance rating: a Likert-style scale produces comparable scores across users and is more reliable than a single recalled episode."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.user_research__10331",
"topic": "ux_design",
"subSkill": "user_research",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Before roadmap planning, a team runs exploratory interviews rather than a usability test. What is the main goal that makes the exploratory format the right choice here?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Surfacing unmet needs and the real context of use, before any solution has been chosen"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Confirming that the team's leading roadmap candidate is the one users would actually adopt"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Measuring task-completion rates on the current product to benchmark next quarter's targets"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Collecting a prioritized list of the specific features users want added in the coming release"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.user_research__71767",
"topic": "ux_design",
"subSkill": "user_research",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the difference between discovery and delivery in a dual-track agile process?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Discovery is done by designers; delivery is done by developers only"
}
],
"shape": "code"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Discovery validates what to build through research and experimentation; delivery builds and ships the validated solution"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Discovery and delivery happen sequentially, never in parallel"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Discovery only uses quantitative data; delivery only uses qualitative data"
}
],
"shape": "code"
}
]
}
},
{
"questionId": "ux_design.user_research__71544",
"topic": "ux_design",
"subSkill": "user_research",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the difference between qualitative and quantitative user research?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Qualitative costs more than quantitative in each case; the budget gap is what decides"
}
],
"shape": "code"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Quantitative work needs fewer participants than qualitative work does to reach a finding"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "The two produce identical findings whenever both of them are carried out competently"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Qualitative digs into why and how; quantitative counts what and how much of it"
}
],
"shape": "code"
}
]
}
},
{
"questionId": "ux_design.user_research__100537",
"topic": "ux_design",
"subSkill": "user_research",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Recruiting screener returns 40 respondents but only 4 match your target segment (active project managers using the product weekly). PM wants 'just talk to all 40 for breadth'. What is the right call?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Skip interviews; rerun the screener with looser criteria to widen the pool"
}
],
"shape": "code"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Interview 4 target users plus 8 non-target users as a comparison baseline"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Interview the 4 matching the target segment; off-target voices skew findings"
}
],
"shape": "code"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Interview all 40; volume of feedback offsets the noise of non-target users"
}
],
"shape": "code"
}
]
}
},
{
"questionId": "ux_design.user_research__200582",
"topic": "ux_design",
"subSkill": "user_research",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "PM wants to validate that a new analytics feature 'will be loved'. The plan: 200-respondent survey asking 'Would you use this feature?' on a 5-point Likert scale. Result: 78% pick 4 or 5. What does the data fail to tell you?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Stated intent rarely predicts behavior; the survey measures appeal, not adoption"
}
],
"shape": "code"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Likert scale midpoint inflates positive responses and should be replaced with 7-point"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Sample size of 200 lacks the power needed to detect adoption signal reliably"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Survey lacked an open-ended follow-up to qualify why respondents selected 4 or 5"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.user_research__815634",
"topic": "ux_design",
"subSkill": "user_research",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What does the snippet log?"
}
]
}
],
"code": {
"lang": "ts",
"code": "const scores = [10,9,7,9,6,10,8,3,9,0];\nconst pct = (n) => (n / scores.length) * 100;\nconst promoters = scores.filter(s => s >= 9).length;\nconst detractors = scores.filter(s => s <= 6).length;\nconsole.log(pct(promoters) - pct(detractors));",
"label": "user-research.ts"
},
"widget": {
"kind": "predict_output",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "50"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "30"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "20"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "10"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.user_research__71516",
"topic": "ux_design",
"subSkill": "user_research",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the primary goal of creating user personas in UX research?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Document every individual user's exact preferences"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Replace the need for usability testing"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Create marketing materials for sales teams"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Represent key user segments to guide design decisions with shared understanding"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.user_research__71910",
"topic": "ux_design",
"subSkill": "user_research",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A researcher needs five target-segment participants to attempt tasks on a prototype this week, with think-aloud video, without running recruitment themselves. Which kind of platform fits, and what does it not give you?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A survey platform that fields attitude questions to a panel but captures no observed task behavior"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A research-repository tool that tags and themes transcripts but does not recruit or run the sessions"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A usability-testing platform with a recruited panel and task-based video sessions, like UserTesting"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A product-analytics platform that reports task-completion rates across your live user base at scale"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.user_research__950608",
"topic": "ux_design",
"subSkill": "user_research",
"difficulty": 5,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Rozenblit and Keil's Study 8 compared procedures against devices, and self-rated understanding of procedures did not drop after an explanation attempt: it showed a slight increase that did not reach significance. Which reading of that does the paper support?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Procedural knowledge resists every self-assessment error, so any confidence about a fixed sequence of steps can be taken at face value."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "People judged their own command of a cookbook routine accurately beforehand, and writing one out confirms far more than it corrects."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "The procedure materials were easier than the device materials, so the comparison reports a difference in difficulty, not in kind."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Explaining a procedure teaches the person that procedure, so the attempt itself raised the knowledge the second rating went on to measure."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.information_architecture__10345",
"topic": "ux_design",
"subSkill": "information_architecture",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "How can breadcrumb trails support complex content hierarchies?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "They list the pages visited earlier this session"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "They rank sibling pages by their popularity"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "They expose location and parent relationships"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "They surface algorithmic related-item suggestions"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.information_architecture__100273",
"topic": "ux_design",
"subSkill": "information_architecture",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What role do breadcrumbs play in a site's navigation?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "They show the user's position within the hierarchy and offer a path back up the structure."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "They surface algorithmic recommendations based on items related to the current product detail page."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "They mark pages the user has bookmarked manually, ordered by frequency of return visits per week."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "They list the most recently visited pages in chronological order across the whole browsing session."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.information_architecture__400615",
"topic": "ux_design",
"subSkill": "information_architecture",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is a Bayesian Treejack analysis when reporting tree-test results?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "It collapses every participant's path into one fixed score representing the average click depth they reached."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "It estimates likely outcomes with credible intervals so small samples yield calibrated uncertainty bands."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "It assigns each leaf an equal prior so under-explored branches dominate the headline result presented."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "It boosts statistical power by allowing a researcher to keep recruiting until the desired p-value emerges."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.information_architecture__483921",
"topic": "ux_design",
"subSkill": "information_architecture",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A SaaS team's analytics show 62% of visitors to the docs site use the search bar within five seconds of landing, bypassing the left-nav tree entirely. The PM asks what this behavior pattern most likely indicates about the current IA."
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "The search ranking algorithm is so strong that it makes any hierarchical navigation structurally unnecessary for users"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Users cannot predict where content lives from the top-level categories, so search becomes their scent-recovery tool"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Users prefer search universally, so the navigation tree itself is redundant and should be removed from the docs site too"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Visitors are mostly returning power users who already memorised the URL slugs and skip nav as an efficiency habit"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.information_architecture__71785",
"topic": "ux_design",
"subSkill": "information_architecture",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the difference between 'controlled vocabulary' and 'folksonomy' in IA?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Controlled vocabulary uses predefined, standardized terms; folksonomy lets users create their own tags and labels"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Folksonomy produces more accurate labels than a controlled vocabulary does for the same content"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Controlled vocabulary serves only the search engine; folksonomy serves only the navigation menu and nothing beyond it"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Both systems produce identical organization results once all of the content has been tagged and indexed"
}
],
"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__300492",
"topic": "ux_design",
"subSkill": "information_architecture",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is mega-menu navigation as a pattern?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A floating action button that expands to surface the user's last action across an authenticated session."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A wide panel that exposes many second- and third-level destinations together when the parent is opened."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A bottom bar pinned to the viewport listing the three sections a visitor uses most on the day"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A vertical column of section titles fixed beside the body that scrolls in lockstep with the article copy."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.information_architecture__500672",
"topic": "ux_design",
"subSkill": "information_architecture",
"difficulty": 5,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Comparing IA driven by a strict taxonomy with IA driven by an ontology plus knowledge-graph backend for a large content platform, which architectural distinction matters most for findability?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Knowledge-graph IA always has worse retrieval latency than taxonomic indexes and therefore should be avoided for any consumer-facing site"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Knowledge-graph IA replaces the need for any editorial labelling work because relations are inferred automatically from raw content text alone"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Knowledge-graph IA is incompatible with conventional breadcrumbs and forces removal of any path-based wayfinding from the user interface"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Knowledge-graph IA can answer cross-cutting queries that pure taxonomic hierarchy cannot express without duplicating items in many places"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.information_architecture__950917",
"topic": "ux_design",
"subSkill": "information_architecture",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A team commits to reducing the intrinsic load of a tax filing flow, meaning the load the material itself carries. Cognitive load theory names one way that load comes down. Which way is it?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Present the interacting parts together, since two parts read side by side interact less than the same two parts read apart."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Split the flow into single steps, since a part read on its own interacts with nothing while the person is on that step."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Choose a task that leaves out some of the interacting parts, since how far they interact is a property of the task."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Drop the least-used branch from the flow, since a task with fewer parts demands less than one with more."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.information_architecture__950915",
"topic": "ux_design",
"subSkill": "information_architecture",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A tax filing flow is hard because the rules it implements are hard. Cognitive load theory splits the effort a person is under into kinds. Which kind is the one a redesign of the flow can take away?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "The effort of building understanding, which the theory locates in the person."
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "The effort of reading the flow, which comes down as the wording is made shorter."
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "The effort the material demands, which the papers tie to how far its elements interact."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "The effort the presentation adds, which the papers call extraneous and ineffective."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "web_perf.core_web_vitals__300006",
"topic": "web_perf",
"subSkill": "core_web_vitals",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "When sending web-vitals.js results to your analytics backend, compared with fetch() at the moment a metric fires, why is navigator.sendBeacon a safer choice on pagehide?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "The request still goes out reliably during the page unload"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "It batches every metric before a navigation occurs in-memory first"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "It proxies through a service worker that retries after disconnects"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "It sends the request over a WebSocket that bypasses unload aborts"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "web_perf.core_web_vitals__300003",
"topic": "web_perf",
"subSkill": "core_web_vitals",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "When choosing between content-visibility: auto and a manual IntersectionObserver gate for off-screen sections, which captures the advantage of content-visibility?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "It pre-renders the section at full fidelity before user scroll begins"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "It forces the section into a cross-origin iframe for isolation benefits"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "The browser skips rendering until the section nears the viewport"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "It disables script execution within the section until focus enters it"
}
],
"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__73111",
"topic": "web_perf",
"subSkill": "core_web_vitals",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the difference between 'lab data' and 'field data' for Core Web Vitals?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Lab data comes from controlled runs, field from real visits"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Lab data is only from Chrome; field data is from all browsers"
}
],
"shape": "code"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Lab data uses production servers; field data uses staging"
}
],
"shape": "code"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "There is no difference: they measure the same thing"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "web_perf.core_web_vitals__19061",
"topic": "web_perf",
"subSkill": "core_web_vitals",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which Core Web Vital focuses on when the largest visible content element finishes rendering?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "FCP (First Contentful Paint)"
}
],
"shape": "code"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "CLS (Cumulative Layout Shift)"
}
],
"shape": "code"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "INP (Interaction to Next Paint)"
}
],
"shape": "code"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "LCP (Largest Contentful Paint)"
}
],
"shape": "code"
}
]
}
},
{
"questionId": "web_perf.core_web_vitals__73105",
"topic": "web_perf",
"subSkill": "core_web_vitals",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the 'good' INP threshold?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "1 second or less"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "200 milliseconds or less"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "500 milliseconds or less"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "50 milliseconds or less"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "web_perf.core_web_vitals__500028",
"topic": "web_perf",
"subSkill": "core_web_vitals",
"difficulty": 5,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which statement best describes the three phases that INP attribution decomposes one interaction latency into?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Event target match cost, bubbled listener walk cost, and default action dispatcher cost together"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Parse duration, style recalculation duration, and subsequent composited layer promotion time"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Input delay, then the handlers processing duration, then the presentation delay before paint"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "DNS resolve time, connection setup latency, and first server response byte delay per hop"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "web_perf.core_web_vitals__30075",
"topic": "web_perf",
"subSkill": "core_web_vitals",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the relationship between TTFB and Largest Contentful Paint (LCP) during a page load?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Improving TTFB leaves LCP unchanged on statically served pages"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "LCP is timed from the user's first click, not from navigation start"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "TTFB times client-side rendering, while LCP times the server's work"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "TTFB sets the floor for LCP: the browser can only begin fetching LCP resources after the first byte arrives"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "web_perf.core_web_vitals__73114",
"topic": "web_perf",
"subSkill": "core_web_vitals",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A dynamically injected iframe causes the content below it to shift down. Which metric captures this?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "INP: the iframe slows down user interactions"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "CLS: later content gets pushed down the page"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "LCP: the iframe becomes the largest paint"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "FCP: the iframe delays the first content render"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "web_perf.core_web_vitals__19116",
"topic": "web_perf",
"subSkill": "core_web_vitals",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A page has good Lighthouse INP but poor CrUX INP. What most likely explains the gap?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Lighthouse runs include INP across all interactions while CrUX only samples the first"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Field data adds network round-trip latency to INP while lab measurements omit it"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Real users hit third-party script bursts that lab runs never reproduce well"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "CrUX excludes mobile devices, so its INP is biased toward slow desktop machines"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.pagination__500049",
"topic": "convex",
"subSkill": "pagination",
"difficulty": 5,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What does the handler produce when "
},
{
"t": "code",
"v": "endCursor"
},
{
"t": "text",
"v": " is supplied alongside "
},
{
"t": "code",
"v": "cursor"
},
{
"t": "text",
"v": " on the pagination options?"
}
]
}
],
"code": {
"lang": "ts",
"code": "export const window = query({\n args: {\n start: v.string(),\n end: v.string(),\n opts: paginationOptsValidator,\n },\n handler: async (ctx, { start, end, opts }) =>\n ctx.db.query(\"audit\").paginate({\n ...opts,\n cursor: start,\n endCursor: end,\n }),\n});",
"label": "pagination.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Validator rejects: endCursor is not a known option"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Slice ignoring endCursor, stops at numItems"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Throws at runtime: endCursor requires matching index hash"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Slice bounded between cursor and endCursor inclusive"
}
],
"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__200006",
"topic": "convex",
"subSkill": "pagination",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What type is the continueCursor value returned by a paginated Convex query?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A signed 64-bit integer encoded as a JS BigInt that the client decrements to page backward through results"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "An opaque string that the client forwards back to the server on the next request without parsing it"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A numeric offset representing the zero-indexed position of the first unseen document in the backing index"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A JSON object containing the last document _id plus a sortKey array the client assembles before sending"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "convex.pagination__200102",
"topic": "convex",
"subSkill": "pagination",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Comparing an index-backed .withIndex(...).paginate() call to a .filter(...).paginate() call on the same table, which property makes the first the recommended pattern?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "the scan touches only matching rows, so the read budget is not spent on rejected documents"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "results come back sorted by _creationTime, so the client can merge new pages with no local re-sort step"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "the server skips argument validation on the cursor, because the range bounds already vouch for it"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "the cursor is cached in the client store between renders, and the server replays it on reconnect"
}
],
"shape": "long"
}
]
}
},
{
"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__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__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__89501",
"topic": "convex",
"subSkill": "pagination",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Can you use "
},
{
"t": "code",
"v": ".order(\"desc\")"
},
{
"t": "text",
"v": " with "
},
{
"t": "code",
"v": ".paginate()"
},
{
"t": "text",
"v": " in Convex?"
}
]
}
],
"code": {
"lang": "ts",
"code": "export const listMessages = query({\n args: { channelId: v.id(\"channels\"), paginationOpts: paginationOptsValidator },\n handler: async (ctx, { channelId, paginationOpts }) => {\n return ctx.db.query(\"messages\")\n .withIndex(\"by_channel\", q => q.eq(\"channelId\", channelId))\n .order(\"desc\") // Newest first: cursors handle this\n .paginate(paginationOpts);\n },\n});",
"label": "pagination.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Yes, paginated queries support ordering, and the cursor handles reverse traversal correctly"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Yes, but you have to reverse the returned results yourself on the client side"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "No, pagination only works with ascending creation time order across every product the org ships"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Only if you define a descending index variant for that table in the schema"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.pagination__371622",
"topic": "convex",
"subSkill": "pagination",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A dev paginates "
},
{
"t": "code",
"v": "ctx.db.query('orders').filter(q => q.eq(q.field('status'), 'open')).paginate(opts)"
},
{
"t": "text",
"v": " on a 2M-row table. Pages past ~5 come back empty even though open orders exist. What's going wrong?"
}
]
}
],
"code": {
"lang": "ts",
"code": "export const openOrders = query({\n args: { opts: paginationOptsValidator },\n handler: async (ctx, { opts }) => {\n return await ctx.db\n .query('orders')\n .filter(q => q.eq(q.field('status'), 'open'))\n .paginate(opts);\n },\n});",
"label": "pagination.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "The filter runs after pagination so later pages request rows that were already filtered out of the prior result set"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "The cursor advances by scanned docs not matches, so filtered-out rows exhaust the per-page scan budget before any match is found"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "The paginate call caps total matches at the initial numItems value, so later pages return empty once that ceiling is hit"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "The filter predicate resets the cursor each page, so matches past the first scanned chunk are silently dropped by paginate"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "convex.pagination__200005",
"topic": "convex",
"subSkill": "pagination",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What reactivity guarantee does a paginated Convex query subscription give?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Reactivity is disabled for paginated queries because cursors would be invalidated on every upstream table mutation"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Pages become static snapshots once returned, and the hook must be remounted to see any subsequent write effects"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Already-loaded pages remain subscribed and re-run when a write affects their slice of the indexed range"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Only the most recently loaded page stays reactive; earlier pages freeze after the next loadMore invocation fires once"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.motion_design__200514",
"topic": "ux_design",
"subSkill": "motion_design",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Given the keyframe below for an entrance animation, how does the element move over its 250ms run?"
}
]
}
],
"code": {
"lang": "ts",
"code": ".panel {\n animation: enter 250ms cubic-bezier(0, 0, 0.2, 1) both;\n}\n@keyframes enter {\n from { opacity: 0; transform: translateY(12px); }\n to { opacity: 1; transform: translateY(0); }\n}",
"label": "motion-design.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Starts slow and speeds up as it leaves its resting position over 250ms"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Overshoots its target and then settles back to the resting position again"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Starts fast and slows into its resting position over the 250ms duration"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Moves at a constant uniform velocity from start to end of the 250ms run"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.motion_design__500237",
"topic": "ux_design",
"subSkill": "motion_design",
"difficulty": 5,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A safety-critical industrial dashboard animates alarm transitions with elaborate easing and color sweeps. Post-incident review finds operators delayed acknowledging a real alarm because they were waiting for the animation to finish 'so they could read it'. Which motion-design principle was violated most directly?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Motion must not use any easing curve; safety-critical states should be animated only with linear motion"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Motion must not use long durations; safety-critical states should be animated under fifty milliseconds"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Motion must not use any color sweep; safety-critical states should rely on monochrome alarm cues"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Motion must not delay critical information; safety-critical states should be immediately legible"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.motion_design__200006",
"topic": "ux_design",
"subSkill": "motion_design",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "How does a 'linear' easing function behave in motion design?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Velocity tapers off gradually as the animation nears its endpoint and final position."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Velocity stays constant from the first frame to the last of the animation."
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Velocity follows an S-curve with slow ends and a fast accelerated middle section."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Velocity ramps up steadily until the animation reaches its final resting position fully."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.motion_design__1385029",
"topic": "ux_design",
"subSkill": "motion_design",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A dev replaces all CSS transitions with the Web Animations API ("
},
{
"t": "code",
"v": "element.animate(...)"
},
{
"t": "text",
"v": ") and expects identical behaviour. They observe that animations no longer resume after the tab is backgrounded and refocused. Which WAAPI default tripped them up?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "WAAPI animations are paused while the document is hidden by default; the playState doesn't auto-resume on visibility change unless the page wires a "
},
{
"t": "code",
"v": "visibilitychange"
},
{
"t": "text",
"v": " handler."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "WAAPI animations are seeked to their end-time while the document is hidden by default; the playState doesn't auto-resume on pageshow unless the page wires a "
},
{
"t": "code",
"v": "pageshow"
},
{
"t": "text",
"v": " handler."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "WAAPI animations are throttled to 1fps while the document is hidden by default; the playState doesn't auto-resume on storage change unless the page wires a "
},
{
"t": "code",
"v": "storage"
},
{
"t": "text",
"v": " handler."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "WAAPI animations are cancelled while the document is hidden by default; the timeline doesn't auto-resume on focus change unless the page wires a "
},
{
"t": "code",
"v": "focus"
},
{
"t": "text",
"v": " handler to recreate them."
}
],
"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__400488",
"topic": "ux_design",
"subSkill": "motion_design",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A wizard uses a 'page slide' transition: the current step slides left while the next slides in from the right, both 400ms. Users with prefers-reduced-motion still see the full slide because the team conditionally lowers duration to 350ms when the media query matches. Why is that approach insufficient under accessibility guidance?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Reduced-motion expects identical motion as long as the entire wizard transition stays under 500ms"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Reduced-motion expects the same animation with a softer easing curve as the only change"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Reduced-motion expects identical motion at half the original duration in all UI contexts"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Reduced-motion expects removal or substantial replacement, not a small duration trim"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.motion_design__20057",
"topic": "ux_design",
"subSkill": "motion_design",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A stakeholder lists four reasons to add animation. Which one reflects the function interaction designers treat as motion's primary job?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "To disguise slow operations so perceived performance looks better than it is"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "To communicate state changes, spatial relationships, and causality"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "To lengthen sessions by giving users something visually interesting to watch"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "To express the brand's personality consistently across every product surface"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.motion_design__500004",
"topic": "ux_design",
"subSkill": "motion_design",
"difficulty": 5,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is 'jank' in an animated interface?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Memory pressure in the page caused when many animated elements are mounted into the document tree."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Audible distortion produced when the system audio context lags behind the visual animation timeline."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Visible stuttering that appears as the rendering pipeline misses display refresh deadlines."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Latency in input handling caused when the main thread is occupied with network response processing."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.motion_design__71918",
"topic": "ux_design",
"subSkill": "motion_design",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the purpose of Lottie animations in UX implementation?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Building rigged three-dimensional characters for the front-end screens of a game product"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Exporting an interactive prototype as a flat video file for a stakeholder review deck"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Turning a recorded video clip into a looping bitmap image small enough to drop into an email"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Playing light, scalable vector motion in web and mobile builds, authored in After Effects"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.motion_design__1942617",
"topic": "ux_design",
"subSkill": "motion_design",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A dev animates "
},
{
"t": "code",
"v": "opacity: 0 → 1"
},
{
"t": "text",
"v": " on a button and notices it's still interactable (focus, click) during the fade-in. Screen-reader users report the button is announced even before it visually exists. What's the canonical UX/a11y fix beyond CSS opacity alone?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Opacity alone does not affect transform-origin or the paint tree; the element must also be guarded by "
},
{
"t": "code",
"v": "display: block"
},
{
"t": "text",
"v": "/"
},
{
"t": "code",
"v": "contenteditable"
},
{
"t": "text",
"v": "/"
},
{
"t": "code",
"v": "role=button"
},
{
"t": "text",
"v": " until the entry animation reaches its in-state."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Opacity alone does not affect z-index ordering or the layout tree; the element must also be guarded by "
},
{
"t": "code",
"v": "pointer-events: auto"
},
{
"t": "text",
"v": "/"
},
{
"t": "code",
"v": "tabindex=0"
},
{
"t": "text",
"v": "/"
},
{
"t": "code",
"v": "role=presentation"
},
{
"t": "text",
"v": " until the entry animation reaches its in-state."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Opacity alone does not affect contrast ratio or the focus ring; the element must also be guarded by "
},
{
"t": "code",
"v": "outline: none"
},
{
"t": "text",
"v": "/"
},
{
"t": "code",
"v": "autofocus=true"
},
{
"t": "text",
"v": "/"
},
{
"t": "code",
"v": "role=alert"
},
{
"t": "text",
"v": " until the entry animation reaches its in-state."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Opacity alone does not affect hit-testing or the accessibility tree; the element must also be guarded by "
},
{
"t": "code",
"v": "visibility: hidden"
},
{
"t": "text",
"v": "/"
},
{
"t": "code",
"v": "inert"
},
{
"t": "text",
"v": "/"
},
{
"t": "code",
"v": "aria-hidden"
},
{
"t": "text",
"v": " until the entry animation reaches its in-state."
}
],
"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__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__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__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__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__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": "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__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__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": "ux_design.design_principles__200515",
"topic": "ux_design",
"subSkill": "design_principles",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the 'gulf of execution' in Norman's seven-stages-of-action model?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "The latency between an input event being dispatched and the rendering pipeline reflecting that change."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "The lag between a user reading documentation and recalling the relevant procedure later from memory."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "The mismatch between a system's output state and the user's interpretation of what just happened to it."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "The distance between a user's intentions and the actions the system allows them to actually perform."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.design_principles__71777",
"topic": "ux_design",
"subSkill": "design_principles",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the difference between 'user-centered design' (UCD) and 'activity-centered design' (ACD)?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "UCD suits consumer products; ACD suits the enterprise products alone"
}
],
"shape": "code"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "UCD calls for research with real people and ACD calls for none of it"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "They are identical philosophies; the two different names cover one single idea"
}
],
"shape": "code"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "UCD starts from people and needs; ACD starts from the activities themselves"
}
],
"shape": "code"
}
]
}
},
{
"questionId": "ux_design.design_principles__604921",
"topic": "ux_design",
"subSkill": "design_principles",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A dev replaces a list of 4 plan-tier buttons with a single 'Choose a plan' button that opens a modal listing 18 plans. Selection time goes up, not down. Which law most directly explains the regression?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Postel's Law: be conservative in what you send and liberal in what you accept"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Tesler's Law: total system complexity cannot be reduced below an irreducible minimum"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Hick's Law: decision time grows logarithmically with the number of choices presented"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Fitts's Law: pointer travel time grows with target distance and inverse target size"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.design_principles__500812",
"topic": "ux_design",
"subSkill": "design_principles",
"difficulty": 5,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which characterization of 'human-centred design' as Norman defines it most precisely separates it from generic 'user-friendly design'?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "It is a quantitative scoring discipline that grades each shipped surface on a System Usability Scale rubric."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "It is a process that starts from a deep understanding of the people, tasks, and their context."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "It is a polish phase, applied after a feature is built, that smooths copy and microcopy across the full flow."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "It is a guideline that every screen must include accessibility annotations and conform to platform standards."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.design_principles__71700",
"topic": "ux_design",
"subSkill": "design_principles",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A page has a prominent red 'Delete Account' button next to a green 'Save Changes' button. Users report accidentally clicking delete. What principle is violated?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Destructive actions should be visually distinct, separated from common actions, and require an explicit confirmation"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Destructive actions should carry no visual styling that sets them apart from the ordinary ones on a screen"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Both buttons should sit in the exact same place on every page so the layout never shifts between screens"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "The delete button should use the same green color as the save button so the pair of buttons stays visually consistent"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "ux_design.design_principles__71690",
"topic": "ux_design",
"subSkill": "design_principles",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "An app displays a success animation that takes 3 seconds before users can proceed to their next task. Users complain about the delay. What UX principle explains their frustration?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "The animation duration should be extended to 5 seconds for more impact"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "The animation breaks the Doherty Threshold and stalls the user's flow"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Users never appreciate any form of positive feedback in interfaces"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Success animations should only be shown to first-time users"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.design_principles__950312",
"topic": "ux_design",
"subSkill": "design_principles",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Two designers disagree about a flat panel that is clickable and carries no border, fill or hover state. One says the panel lacks an affordance. The other says it lacks a signifier. Which of them has used Norman's terms correctly?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Both, because the two terms name one property and differ only in their vintage."
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Neither, because a panel is a container and the pair applies only to controls."
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "The first, because an action nobody can see is not an action a panel offers."
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "The second, because the click exists and only its announcement is missing."
}
],
"shape": "short"
}
]
}
},
{
"questionId": "ux_design.design_principles__71536",
"topic": "ux_design",
"subSkill": "design_principles",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "The 'flexibility and efficiency of use' heuristic suggests interfaces should accommodate both novice and expert users by doing what?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Making every feature equally prominent in the navigation"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Removing advanced features to simplify the interface for everyone"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Requiring all users to complete the same onboarding flow"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Shortcuts that speed experts and stay invisible to novices"
}
],
"shape": "short"
}
]
}
},
{
"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__950309",
"topic": "ux_design",
"subSkill": "design_principles",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A card carries a shadow, a chevron and a hover state, and clicking it does nothing because the route behind it was never wired up. Which half of the card is missing?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "The announcement itself, with the action behind it already in place."
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Both halves, since a card that does nothing also announces nothing."
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Neither half, since an unwired route is a build defect, not a design property."
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "The action itself, with the announcement for it already fully in place."
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.reactive_client__612875",
"topic": "convex",
"subSkill": "reactive_client",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which description matches how Convex's useMutation is invoked from a React handler?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Call the hook for a reference, then call that reference with args"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Await the hook directly inside the render body of a component"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Register the function in a reducer then dispatch a plain event"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Pass the handler inline as a second hook positional parameter"
}
],
"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__239148",
"topic": "convex",
"subSkill": "reactive_client",
"difficulty": 5,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which description best characterizes how a long-running action differs from a mutation in its participation in the client's transaction machinery?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Actions share the OCC retry path with mutations but waive the serialisability guarantee"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Actions hold an advisory lock on affected tables for the duration of external I/O calls"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Actions participate as two-phase commits, preparing writes that mutations later finalise"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Actions run outside the OCC loop and cannot directly read or write DB state"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.reactive_client__210815",
"topic": "convex",
"subSkill": "reactive_client",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A dev reaches for "
},
{
"t": "code",
"v": "useQuery(api.ai.draft, { prompt })"
},
{
"t": "text",
"v": " to call an endpoint that fetches an external LLM; the build fails before the component renders. What is the structural error?"
}
]
}
],
"code": {
"lang": "ts",
"code": "function Draft({ prompt }) {\n const text = useQuery(api.ai.draft, { prompt });\n return {text}
;\n}",
"label": "reactive-client.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "code",
"v": "useQuery"
},
{
"t": "text",
"v": " accepts any Convex function ref but requires an "
},
{
"t": "code",
"v": "allowActions"
},
{
"t": "text",
"v": " flag on the provider root"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "code",
"v": "useQuery"
},
{
"t": "text",
"v": " evaluates on the server at import time so any dynamic argument trips a build-time check"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "code",
"v": "useQuery"
},
{
"t": "text",
"v": " may only subscribe to functions declared with "
},
{
"t": "code",
"v": "query"
},
{
"t": "text",
"v": ", and outbound network calls require "
},
{
"t": "code",
"v": "action"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "code",
"v": "useQuery"
},
{
"t": "text",
"v": " forbids string arguments longer than 1 KB so the prompt payload fails the runtime guard"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "convex.reactive_client__481023",
"topic": "convex",
"subSkill": "reactive_client",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which React hook pairs a Convex server function with a component so the returned value updates automatically when the underlying data changes?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "useLoader"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "useQuery"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "useFetch"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "useCache"
}
],
"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__947812",
"topic": "convex",
"subSkill": "reactive_client",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "On a TanStack Start route, the team wants initial HTML to include query data and then have the client hydrate into a live subscription without re-fetching. Which server helper should the loader call?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "preloadQuery"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "runQueryOnce"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "fetchQuery"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "hydrateQuery"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.reactive_client__502317",
"topic": "convex",
"subSkill": "reactive_client",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "In a React component, which hook returns a callable function you invoke in an onClick handler to write data through Convex?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "useReducer"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "useCommand"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "useDispatch"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "useMutation"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.reactive_client__200341",
"topic": "convex",
"subSkill": "reactive_client",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Two components both call useQuery with the same function reference and identical args. How many subscriptions does the client hold open for that query on the server?"
}
]
}
],
"code": {
"lang": "ts",
"code": "import { useQuery } from \"convex/react\";\nimport { api } from \"../convex/_generated/api\";\n\nfunction A() { return {useQuery(api.todos.list, { done: false })?.length}
; }\nfunction B() { return {useQuery(api.todos.list, { done: false })?.length}
; }",
"label": "reactive-client.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "one per React root"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "two parallel subscriptions"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "one shared subscription"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "zero: cached locally"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.reactive_client__724901",
"topic": "convex",
"subSkill": "reactive_client",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Which ConvexReactClient method lets you register a local, synchronous patch that renders immediately alongside a mutation call, then reconciles when the server result arrives?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": ".withOptimisticUpdate"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": ".withSpeculativeWrite"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": ".withPendingResolver"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": ".withRollbackHandler"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.queries_mutations__89613",
"topic": "convex",
"subSkill": "queries_mutations",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What does "
},
{
"t": "code",
"v": "ctx.db.query(\"tasks\").filter(q => q.neq(q.field(\"status\"), \"archived\")).collect()"
},
{
"t": "text",
"v": " do?"
}
]
}
],
"code": {
"lang": "ts",
"code": "// ❌ Full scan with neq - reads all documents:\nconst active = await ctx.db.query(\"tasks\")\n .filter(q => q.neq(q.field(\"status\"), \"archived\"))\n .collect();\n\n// ✅ Better: query for what you want explicitly:\nconst active = await ctx.db.query(\"tasks\")\n .withIndex(\"by_status\", q => q.eq(\"status\", \"active\"))\n .collect();\n// Or combine multiple statuses with separate queries",
"label": "queries-mutations.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Returns tasks where status equals \"archived\": neq means 'needs equal query'"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Returns all tasks where status is NOT \"archived\", but scans the entire table to do so"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Returns a filtered query builder that hasn't executed yet"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Throws an error: inequality filters require a corresponding index"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.queries_mutations__312086",
"topic": "convex",
"subSkill": "queries_mutations",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "The client subscribes to a reactive read. A write lands that changes one row the read actually touched. What does the current reactive model say happens on the subscriber?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Handler waits for the caller to call refetch explicitly"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Handler re-runs and pushes a new result to the caller"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Handler marks the value stale for the next manual fetch"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Handler polls on the next interval the caller set"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.queries_mutations__504430",
"topic": "convex",
"subSkill": "queries_mutations",
"difficulty": 5,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What end-to-end behaviour does this sequence produce when a caller invokes enqueue twice with the same payload 1 ms apart?"
}
]
}
],
"code": {
"lang": "ts",
"code": "export const enqueue = mutation({\n args: { jobId: v.id(\"jobs\") },\n handler: async (ctx, args) => {\n await ctx.db.patch(args.jobId, { queued: true });\n await ctx.scheduler.runAfter(5000, internal.jobs.run, { id: args.jobId });\n },\n});",
"label": "queries-mutations.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "the second mutation overwrites the first schedule entry in-place"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "the second mutation is dropped by the scheduler deduper silently"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "both mutations commit and two distinct schedule entries fire"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "only the first mutation commits because the second loses OCC arbitration"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.queries_mutations__89619",
"topic": "convex",
"subSkill": "queries_mutations",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What are the three types of server functions in Convex?"
}
]
}
],
"code": {
"lang": "ts",
"code": "// Query: read-only, reactive, cached\nexport const list = query({ handler: async (ctx) => { /* read */ } });\n\n// Mutation: read+write, transactional, atomic\nexport const create = mutation({ handler: async (ctx) => { /* read+write */ } });\n\n// Action: external calls, non-deterministic\nexport const send = action({ handler: async (ctx) => { /* fetch, AI, email */ } });",
"label": "queries-mutations.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Resolvers, Loaders, and Subscribers: following the GraphQL pattern"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "GET, POST, and DELETE: mapping to REST HTTP methods"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Controllers, Services, and Repositories: following the MVC pattern"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Queries (read data), Mutations (read and write data), and Actions (call external APIs and services)"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "convex.queries_mutations__89459",
"topic": "convex",
"subSkill": "queries_mutations",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Why should you prefer queries over mutations for read-only operations?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Queries run faster because they use a separate read replica"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Mutations require authentication while queries don't"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "There is no difference: use whichever is more convenient"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Queries are cached and reactively updated; mutations count against write limits and aren't cached"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "convex.queries_mutations__89525",
"topic": "convex",
"subSkill": "queries_mutations",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What does "
},
{
"t": "code",
"v": ".order(\"desc\")"
},
{
"t": "text",
"v": " do on a Convex query?"
}
]
}
],
"code": {
"lang": "ts",
"code": "// Latest 10 tasks:\nconst recent = await ctx.db.query(\"tasks\")\n .order(\"desc\")\n .take(10);\n\n// Highest priority in an org:\nconst urgent = await ctx.db.query(\"tasks\")\n .withIndex(\"by_org_priority\", q => q.eq(\"orgId\", orgId))\n .order(\"desc\") // Highest priority first\n .take(5);",
"label": "queries-mutations.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Sorts results by the field specified in the closest "
},
{
"t": "code",
"v": ".withIndex()"
},
{
"t": "text",
"v": " call in descending order"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Reverses the query result order: by default, documents are ordered by "
},
{
"t": "code",
"v": "_creationTime"
},
{
"t": "text",
"v": " ascending"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Orders results by document size from largest to smallest"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Randomizes the result order: 'desc' stands for 'desynchronized'"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.queries_mutations__100232",
"topic": "convex",
"subSkill": "queries_mutations",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the runtime type returned by this mutation handler after awaiting the insert?"
}
]
}
],
"code": {
"lang": "ts",
"code": "export const addTask = mutation({\n args: { text: v.string() },\n handler: async (ctx, args) => {\n const result = await ctx.db.insert(\"tasks\", { text: args.text });\n return result;\n },\n});",
"label": "queries-mutations.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "the full Document object that was inserted"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "an Id string branded as "
},
{
"t": "code",
"v": "Id<\"tasks\">"
}
],
"shape": "code"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "a numeric auto-increment row index"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "a boolean indicating write success"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "convex.queries_mutations__404741",
"topic": "convex",
"subSkill": "queries_mutations",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Why do the Convex best practices prefer a plain TypeScript helper over "
},
{
"t": "code",
"v": "ctx.runQuery"
},
{
"t": "text",
"v": " for reusing read logic inside a mutation?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "It goes over an HTTP round-trip and lands in the CDN edge cache for fifteen seconds by default: the mutation sees results up to that old"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "It adds argument and return validation plus a fresh isolated JS context, for no gain in consistency: both paths share one transaction"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "It escapes the transaction into a separate follower snapshot, so the reads it performs count against the outer write's OCC footprint"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "It streams the result through the reactive subscription channel, so clients watching that query see partial progress mid-mutation"
}
],
"shape": "long"
}
]
}
},
{
"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__89527",
"topic": "convex",
"subSkill": "queries_mutations",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is "
},
{
"t": "code",
"v": "ctx.db.normalizeId(\"tasks\", idString)"
},
{
"t": "text",
"v": " used for?"
}
]
}
],
"code": {
"lang": "ts",
"code": "export const getTask = query({\n args: { idString: v.string() }, // Raw string from URL\n handler: async (ctx, { idString }) => {\n const taskId = ctx.db.normalizeId(\"tasks\", idString);\n if (!taskId) throw new Error(\"Invalid task ID\");\n return ctx.db.get(taskId); // Now safely typed\n },\n});",
"label": "queries-mutations.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Looks up a document by a secondary identifier and returns its canonical _id"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Normalizes unicode characters in the document's ID field"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Validates and converts a raw string to a typed "
},
{
"t": "code",
"v": "Id<\"tasks\">"
},
{
"t": "text",
"v": ", returning "
},
{
"t": "code",
"v": "null"
},
{
"t": "text",
"v": " if invalid"
}
],
"shape": "code"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Converts a numeric ID to the Convex string ID format"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "design_systems.design_tokens__79744",
"topic": "design_systems",
"subSkill": "design_tokens",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is 'dimension token' in the DTCG specification?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A token storing the current viewport width and height so responsive breakpoint logic can read them at runtime"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A token recording how many render dimensions (2D or 3D) a component should use when it paints to the screen"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A token whose value pairs a magnitude with a unit, used for spacing, sizing, and border widths"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A meta count of the total number of tokens defined in the design system, surfaced for governance dashboards"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.design_tokens__79818",
"topic": "design_systems",
"subSkill": "design_tokens",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the 'DTCG $description' property?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A property that stores the design system team's decision rationale for the token's value, read by reviewers during a design API review and kept out of the shipped output"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A property that describes the CSS syntax of the token's own output format for each platform that the build emits code onto at release"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "An optional metadata field on any token providing a human-readable description of its purpose, used by documentation generators and design tools to show context"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A long-form description that replaces the token name entirely in the generated documentation site that the team publishes for its consumers"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.design_tokens__200339",
"topic": "design_systems",
"subSkill": "design_tokens",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Two product teams independently invent 'color.brand.darkBlue' and 'color.primary.deep', both resolving to the same primitive hex. A new contributor asks which to use. What's the systemic remedy, not the per-PR one?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Add a lint rule that rejects raw hex and let teams freely add more aliases as they need them later"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Collapse to one semantic token referencing the primitive, deprecate the duplicate, document the canonical name"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Rename the primitive itself to 'darkBlue' so the alias intent stays clear to every consuming team"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Keep both semantic tokens as aliases of the primitive so teams can pick whichever of the two names reads better to them"
}
],
"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__79745",
"topic": "design_systems",
"subSkill": "design_tokens",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the purpose of 'focus ring tokens' in a design system?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Tokens defining the focus indicator's color, width, offset, and style"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Tokens that define which components receive focus first when the page loads"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Tokens that control the animation timing of focus transitions between elements"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Tokens that set the minimum touch target size for mobile focus interactions"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "design_systems.design_tokens__59047",
"topic": "design_systems",
"subSkill": "design_tokens",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "How does the W3C Design Tokens specification require a compliant tool to handle an alias that ultimately points back to itself?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Tools silently skip circular references and use a fallback value"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Tools must detect the cycle and report it as a resolution error"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Tools automatically break the cycle by using the first encountered value"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Circular references are permitted as long as there is a $fallback property"
}
],
"shape": "short"
}
]
}
},
{
"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__79943",
"topic": "design_systems",
"subSkill": "design_tokens",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the 'foreground/background' token pair pattern?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A Figma organization pattern where foreground elements live on a separate page from the backgrounds, so a designer can swap either one without touching the other"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Defining paired tokens where the foreground (text/icon) color guarantees sufficient contrast against its associated background, like primary-bg and primary-fg are designed to be used together"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A layering technique where foreground tokens are rendered above background tokens using a z-index (a stacking order), so that the text always paints over the panel that sits behind it in the stack"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A caching strategy where the tokens a page uses most frequently are kept in a foreground cache and the rest are fetched from the background store on demand instead"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.design_tokens__100432",
"topic": "design_systems",
"subSkill": "design_tokens",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Style Dictionary processes the source token below with its default CSS variables transform. Which CSS custom property name appears in the generated stylesheet?"
}
]
}
],
"code": {
"lang": "ts",
"code": "// tokens/color.json\n{\n \"color\": {\n \"background\": {\n \"primary\": { \"value\": \"#ffffff\" }\n }\n }\n}\n// build: css/variables transformGroup",
"label": "design-tokens.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "--colors-background-primary"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "--color-background-primary"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "--colorBackgroundPrimary"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "--color_background_primary"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "design_systems.design_tokens__200003",
"topic": "design_systems",
"subSkill": "design_tokens",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is the purpose of the $type field on a DTCG token?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "It records the TypeScript type name (a string literal) of the generated constant so the IDE can autocomplete the field on the consumer side"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "It controls whether the token is emitted at build time or resolved lazily by the consumer at the first paint of the route."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "It tags the token with its owning team for governance dashboards that report contribution velocity across the design system."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "It declares the category of the token value (color, dimension, fontWeight, etc.) so tools can validate and transform it correctly."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.theming_customization__210117",
"topic": "design_systems",
"subSkill": "theming_customization",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A button is rendered inside the markup below. What background color does the button paint?"
}
]
}
],
"code": {
"lang": "ts",
"code": ":root { --btn-bg: steelblue; }\n.brand-acme { --btn-bg: tomato; }\nbutton { background: var(--btn-bg); }\n/* */",
"label": "theming-customization.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "initial: the var() call resolves to an unset"
}
],
"shape": "code"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "the original value declared on the :root block"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "the scoped value redeclared on the ancestor div"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "currentColor inherited from a body element rule"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "design_systems.theming_customization__79934",
"topic": "design_systems",
"subSkill": "theming_customization",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is 'animation token system' for design system motion design?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A structured group of named values for duration, easing, and optional delay"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A visual timeline editor for creating and previewing component animation sequences"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A JavaScript animation library bundled with the design system for complex motion effects"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A Figma plugin that converts prototyping animations into CSS keyframe definitions"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.theming_customization__300308",
"topic": "design_systems",
"subSkill": "theming_customization",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is a 'theme contract' in a contribution-model-driven design system?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "The Slack-channel SLA describing how quickly the platform team will resolve a reported theme regression in production."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "The Figma plugin permission set that gates which designers can publish updates to the shared brand library workspace."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "The legal license attached to the brand palette that consuming product teams must accept before referencing primitives."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "The list of semantic names that every theme must bind, so components never reach for a missing variable."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.theming_customization__4042890",
"topic": "design_systems",
"subSkill": "theming_customization",
"difficulty": 4,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A team is comparing 'tokens authored in Figma and synced to code as the single source of truth' versus 'tokens authored in code and reflected into Figma via a plugin'. What is the trade-off most worth surfacing for a DS adopting DTCG?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Bidirectional editing with no designated source of truth is the recommended pattern because it lets designers and engineers update tokens concurrently without coordination on which side owns canonical values."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Only Figma-authored tokens can serve as the source of truth - code-authored tokens cannot be reflected into Figma because the DTCG spec only supports design-tool-originated token files"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Only code-authored tokens can serve as the source of truth; Figma-authored tokens cannot be exported to the DTCG format because Figma's variable model is incompatible with the spec."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Either direction works; the constraint is one source of truth and one direction of sync - bidirectional editing without a designated master creates conflicting writes that drift the set."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.theming_customization__50096",
"topic": "design_systems",
"subSkill": "theming_customization",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "When evaluating a token-management tool for multi-brand work, which capability distinguishes one that genuinely supports it from one that merely stores tokens?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "It exports each brand's tokens to its own JSON file, so every brand owns a fully independent copy of the entire token structure that it works from in the first place"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "It generates per-brand documentation pages automatically, so each brand's token reference stays current without manual write-ups"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "It renders a live color-contrast preview for each brand, so designers can visually confirm palettes before any tokens are committed"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "It manages parallel token sets that share a semantic structure but diverge in values, so brands override primitives without forking the shared layer"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.theming_customization__3042881",
"topic": "design_systems",
"subSkill": "theming_customization",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Material 3 dynamic color derives a theme from a seed (often the user's wallpaper) by generating tonal palettes. Compare that approach with a traditional hand-curated semantic-token set. What is the trade-off most relevant to a design-system team adopting M3-style dynamic color?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Dynamic color removes the need for any semantic token layer entirely, since the generated palette is consumed by components as raw RGB values without an alias layer in between."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Hand-curated semantic tokens give per-user personalization at runtime; dynamic color is fixed at build time and cannot adapt to a user's wallpaper or preferences."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Both approaches yield identical per-user output; the only meaningful difference is that dynamic color produces tokens conforming to the DTCG spec while hand-curated sets do not."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Dynamic color gives per-user personalization but cedes contrast and brand-tone decisions to an algorithm; hand-curated tokens keep both under designer control."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.theming_customization__851206",
"topic": "design_systems",
"subSkill": "theming_customization",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A 2025 design-system audit flags the current theme switcher for a frame of incorrect colors on first paint when a visitor has chosen dark mode. The root data-theme is set by a useEffect after hydration. What is the now-conventional fix taught in recent DS write-ups?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Render each of the themed CSS variables inline on each component's style attribute during the server-side rendering of that particular route"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Duplicate the page DOM into a hidden second tree for each theme and use display:none to swap which tree shows"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Run a tiny blocking script in the document head that sets data-theme before stylesheets parse and the first paint occurs"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Defer all of the stylesheet links until after hydration so the theme attribute is already present when CSS parses"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.theming_customization__3042886",
"topic": "design_systems",
"subSkill": "theming_customization",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "Compare 'high-contrast as a separate theme value set' versus 'high-contrast achieved by tweaking only color tokens while reusing the default spacing and typography tokens'. What is the practical implication?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "High-contrast typically rebinds spacing and typography role tokens; reusing color is the norm because contrast in accessibility refers to layout density rather than chromatic separation between elements."
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "High-contrast requires rebinding every token in the system including spacing, typography, motion, and elevation, because partial theme overrides are not supported by the DTCG spec."
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "High-contrast typically rebinds only the color and border-related role tokens; reusing spacing and typography is the norm and is exactly what semantic tokens enable cleanly."
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "High-contrast cannot reuse default tokens of any kind because accessibility audits treat partially-reused token sets as failing the contrast specification on principle."
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.theming_customization__110458",
"topic": "design_systems",
"subSkill": "theming_customization",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A page boots with the markup and styles below. What background color does "
},
{
"t": "code",
"v": ""
},
{
"t": "text",
"v": " render at first paint?"
}
]
}
],
"code": {
"lang": "ts",
"code": ":root { --bg: #ffffff; }\n[data-theme=\"dark\"] { --bg: #0b0b0f; }\nbody { background: var(--bg); }\n/* */",
"label": "theming-customization.ts"
},
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "the user-agent default body background paint color"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "the value declared on the :root selector block"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "the value declared inside the [data-theme] block"
}
],
"shape": "code"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "neither value: attribute selectors cannot set vars"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "design_systems.theming_customization__79624",
"topic": "design_systems",
"subSkill": "theming_customization",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "How does the 'Tailwind CSS plugin' pattern work for design system theming?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A PostCSS plugin that replaces every Tailwind class with an import of whichever design system component happens to match that particular utility class"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "The design system publishes a Tailwind preset/plugin that extends the Tailwind config with the system's tokens, enabling consumers to use utility classes with design system values"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Tailwind CSS automatically reads a design token JSON file and generates all of the utility classes from whatever set of tokens it happens to find inside that one token file on disk"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A browser extension that converts Tailwind utility classes into design token CSS custom properties at the moment that any page of a product loads in the browser"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.component_architecture__200010",
"topic": "design_systems",
"subSkill": "component_architecture",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What are 'variants' on a design system component?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Pre-named visual or behavioral modes the component supports as a closed set of options"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Routing flags that decide which screen renders the component once the user navigates there"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Arbitrary inline style overrides passed by a consumer to bend the component at the call site"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Hidden feature switches read from a remote config service to enable experiments at runtime"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.component_architecture__79664",
"topic": "design_systems",
"subSkill": "component_architecture",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is 'container queries' and how do they improve design system component responsiveness?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A design-tool feature that previews how a component looks at a whole range of container widths on the canvas, so that a designer can check the layout before handing the work off"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A testing pattern that renders a component inside containers of several different widths and asserts that the layout matches a stored snapshot recorded for every single one of them"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A JavaScript API that queries a component's own container element at runtime and re-renders it whenever the measured width changes, driven from an effect rather than from the CSS"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "CSS container queries let components respond to the size of their parent container rather than the viewport, enabling truly reusable components that adapt to any layout context"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.component_architecture__283389",
"topic": "design_systems",
"subSkill": "component_architecture",
"difficulty": 5,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A dev migrates a 6-year-old DS to DTCG-format tokens and discovers that 70% of historical 'color.brand.X' usages are actually three different intents (action, link, status-info) collapsed into one primitive. The dev wants a one-shot rename. Why is that the wrong migration shape?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Renaming needs a codemod across the consumer repos; the migration has to publish a deprecation track before any rename can land"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Renaming bypasses the DTCG $value reference syntax; the migration has to rewrite all the alias chains until every token resolves"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Renaming preserves the original intent collision; the migration must introduce a semantic tier and re-map call sites by intent"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Renaming invalidates every Figma library link; the migration has to republish the variable collection before any code can ship"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.component_architecture__79836",
"topic": "design_systems",
"subSkill": "component_architecture",
"difficulty": 2,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is a 'breadcrumb' component in a design system?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "A component that highlights recently visited pages in the browser history"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "A navigation aid showing where the user sits in the site hierarchy"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "A progress indicator showing how many steps remain in a multi-step form"
}
],
"shape": "short"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A tracking component that records the user's click path for analytics purposes"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "design_systems.component_architecture__79884",
"topic": "design_systems",
"subSkill": "component_architecture",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "What is 'date picker' complexity in design system implementation?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Date pickers need the ISO date format and the English locale, nothing more"
}
],
"shape": "short"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "Date pickers are simple input fields with a format validation regex on them"
}
],
"shape": "short"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Date pickers reuse the browser's native date input so no custom implementation is needed"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "A calendar grid with keyboard navigation, locales, timezones, and heavy ARIA"
}
],
"shape": "short"
}
]
}
},
{
"questionId": "design_systems.component_architecture__50033",
"topic": "design_systems",
"subSkill": "component_architecture",
"difficulty": 3,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "How do React Server Components impact design system component architecture?"
}
]
}
],
"widget": {
"kind": "mcq",
"options": [
{
"id": "o1",
"label": [
{
"t": "text",
"v": "Component libraries must ship separate server and client npm packages for every single release they cut"
}
],
"shape": "long"
},
{
"id": "o2",
"label": [
{
"t": "text",
"v": "All of the design system components must be converted over to Server Components for the sake of a smaller bundle reduction"
}
],
"shape": "long"
},
{
"id": "o3",
"label": [
{
"t": "text",
"v": "Design system components can no longer use any React context at all for any of their own theming work"
}
],
"shape": "long"
},
{
"id": "o4",
"label": [
{
"t": "text",
"v": "Components must be explicitly split into server-only logic and client-side interactive layers with 'use client' boundaries"
}
],
"shape": "long"
}
]
}
},
{
"questionId": "design_systems.component_architecture__481027",
"topic": "design_systems",
"subSkill": "component_architecture",
"difficulty": 1,
"stem": [
{
"type": "p",
"runs": [
{
"t": "text",
"v": "A new engineer asks why the design system ships a "
},
{
"t": "code",
"v": "