{ "schemaVersion": 1, "pathSlug": "css", "items": [ { "questionId": "css.box_model__66772", "topic": "css", "subSkill": "box_model", "difficulty": 1, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "A parent has no padding, no border, and contains only a child with " }, { "t": "code", "v": "margin-top: 20px" }, { "t": "text", "v": ". What happens to the child's top margin?" } ] } ], "code": { "lang": "css", "code": ".parent { /* no padding, no border */ }\n.child { margin-top: 20px; }\n/* The 20px margin pushes .parent down */", "label": "box-model.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "It doubles to 40px due to margin stacking" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "It creates 20px space between the parent's top edge and the child" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "It collapses through the parent, pushing the parent down instead" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "It is ignored because the parent has no explicit height" } ], "shape": "short" } ] } }, { "questionId": "css.box_model__400005", "topic": "css", "subSkill": "box_model", "difficulty": 4, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "The block formatting context blocks what behavior between parent and its first child?" } ] } ], "code": { "lang": "css", "code": ".parent {\n display: flow-root;\n}\n.parent > h2 {\n margin-top: 40px;\n}", "label": "box-model.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "margin collapse" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "float containment by descendants" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "width resolution under percentage" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "padding inheritance from ancestors" } ], "shape": "short" } ] } }, { "questionId": "css.box_model__66785", "topic": "css", "subSkill": "box_model", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "A flex container has two children with " }, { "t": "code", "v": "margin-bottom: 20px" }, { "t": "text", "v": " and " }, { "t": "code", "v": "margin-top: 20px" }, { "t": "text", "v": ". Do the margins collapse?" } ] } ], "code": { "lang": "css", "code": ".flex-parent { display: flex; flex-direction: column; }\n.child-a { margin-bottom: 20px; }\n.child-b { margin-top: 20px; }\n/* 40px gap: no collapse */", "label": "box-model.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "They collapse to 40px because flex doubles margins" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "Yes, margins collapse to 20px as with block layout" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "No, flex items' margins never collapse" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "Yes, but only if " }, { "t": "code", "v": "flex-direction" }, { "t": "text", "v": " is " }, { "t": "code", "v": "column" } ], "shape": "short" } ] } }, { "questionId": "css.box_model__501", "topic": "css", "subSkill": "box_model", "difficulty": 1, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What does box-sizing: border-box change about the box model?" } ] } ], "code": { "lang": "css", "code": "div {\n box-sizing: border-box;\n width: 200px;\n padding: 20px;\n border: 1px solid;\n /* Total rendered width: 200px (content shrinks to 158px) */\n}", "label": "box-model.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "It locks the content area to the declared width and expands padding to fit" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "It applies only to flex and grid items, leaving block items in content-box mode" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "It makes width and height include padding and border, not just content" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "It makes width and height measure from the margin edge inward, including margins" } ], "shape": "short" } ] } }, { "questionId": "css.box_model__503", "topic": "css", "subSkill": "box_model", "difficulty": 1, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What is the difference between display: block and display: inline?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Block elements start on a new line and fill the available inline width; inline elements flow within text and size to their content" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "Block elements size to their content, while inline elements stretch to fill the available inline width" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "Block elements flow within surrounding text, while inline elements force a line break before and after" } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "Block elements ignore explicit width and height, while inline elements honor both properties" } ], "shape": "long" } ] } }, { "questionId": "css.box_model__518", "topic": "css", "subSkill": "box_model", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What is the default value of the display property for a " }, { "t": "code", "v": "" }, { "t": "text", "v": " element?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "inline" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "flex" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "block" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "inline-block" } ], "shape": "short" } ] } }, { "questionId": "css.box_model__300008", "topic": "css", "subSkill": "box_model", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Which statement best characterizes how the universal box-sizing reset (" }, { "t": "code", "v": ", ::before, *::after { box-sizing: border-box }" }, { "t": "text", "v": ") works?" } ] } ], "code": { "lang": "css", "code": "*,\n*::before,\n*::after {\n box-sizing: border-box;\n}", "label": "box-model.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "The universal selector wins against any later rule because of specificity boosting" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "Explicit declaration overrides the default value inherited from user-agent rules" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "Box-sizing inherits automatically and the reset simply propagates border-box children" } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "The reset disables user-agent sizing and forces all elements into intrinsic layout mode" } ], "shape": "long" } ] } }, { "questionId": "css.box_model__530", "topic": "css", "subSkill": "box_model", "difficulty": 1, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What does height: 100vh mean?" } ] } ], "code": { "lang": "css", "code": ".hero {\n height: 100vh;\n /* Fills the entire viewport height */\n /* On mobile, consider 100dvh instead */\n}", "label": "box-model.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "The element is 100 pixels tall" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "The element is as tall as the full viewport height" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "The element takes 100% of its parent's height" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "The element fills the remaining vertical space" } ], "shape": "short" } ] } }, { "questionId": "css.box_model__300003", "topic": "css", "subSkill": "box_model", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Which condition best describes when a parent's top margin collapses with its first in-flow child's top margin?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Whenever the parent has position:relative and the child is itself a block box" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "When there is no border, padding, inline content, or clearance separating them" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "Whenever the child is the very first element in the document outline structure" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "Whenever the parent has overflow set to visible and the child is a block element" } ], "shape": "short" } ] } }, { "questionId": "css.box_model__200004", "topic": "css", "subSkill": "box_model", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "The image's natural size is 800x400. What rendered dimensions does it receive?" } ] } ], "code": { "lang": "css", "code": "img {\n width: 500px;\n aspect-ratio: 2 / 1;\n height: auto;\n}", "label": "box-model.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "500 by 500" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "500 by 250" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "400 by 200" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "500 by 400" } ], "shape": "short" } ] } }, { "questionId": "css.animations__300010", "topic": "css", "subSkill": "animations", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What visual behavior does .row exhibit as the user scrolls down the page?" } ] } ], "code": { "lang": "css", "code": ".row { animation: show 1s linear; animation-timeline: scroll(); }\n@keyframes show {\n from { opacity: 0; }\n to { opacity: 1; }\n}", "label": "animations.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Plays from time zero on load and uses the scroll-timeline only for the easing curve" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "Runs once when the element first crosses the viewport, then locks to its final state" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "Progress is driven by scroll position rather than by elapsed time" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "Advances continuously by wall-clock time and pauses only while the scroll is settling" } ], "shape": "long" } ] } }, { "questionId": "css.animations__9040", "topic": "css", "subSkill": "animations", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Why is " }, { "t": "code", "v": "prefers-reduced-motion" }, { "t": "text", "v": " the canonical accessibility gate for non-essential animation, rather than simply slowing animations down?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Some users experience vestibular disorder, migraine, or nausea triggered by motion regardless of speed" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "Screen readers cannot announce animated state changes unless reduced motion is set" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "Browsers silently drop all animation declarations whenever the system motion setting is enabled" } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "Slower animations block the main thread for longer, so assistive technology cannot keep the page responsive" } ], "shape": "long" } ] } }, { "questionId": "css.animations__66553", "topic": "css", "subSkill": "animations", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "When transitioning display with allow-discrete, at what point does the value flip during entry?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "At 0%: the display changes immediately at the start of the transition" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "At 50%: the display changes at the midpoint of the transition" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "At 100%: the display changes at the end of the transition" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "Gradually over the full duration of the transition" } ], "shape": "short" } ] } }, { "questionId": "css.animations__66991", "topic": "css", "subSkill": "animations", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What is " }, { "t": "code", "v": "view-transition-name: none" }, { "t": "text", "v": " used for?" } ] } ], "code": { "lang": "css", "code": ".no-transition {\n view-transition-name: none;\n}", "label": "animations.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Disabling all view transitions on the page" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "Removing a previously assigned transition name" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "Explicitly opting an element out of view transitions" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "Creating an unnamed transition group" } ], "shape": "short" } ] } }, { "questionId": "css.animations__9041", "topic": "css", "subSkill": "animations", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What debugging signal suggests an animation is causing layout thrash?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Frequent GC pauses on the JS main thread between frames" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "High Composite Layers count without elevated paint times" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "Frequent repaint events inside one composited layer" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "Frequent reflow/recalculate style events per frame" } ], "shape": "short" } ] } }, { "questionId": "css.animations__300593", "topic": "css", "subSkill": "animations", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "A small icon stutters on scroll. Two neighboring properties look like candidates to fix the jank. Which is actually doing work each frame, versus which is a prepaint hint?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "translate animates on the compositor; contain: strict advises the engine to prepare" } ], "shape": "code" }, { "id": "o2", "label": [ { "t": "text", "v": "scale animates on the compositor; backdrop-filter: none advises the engine to prepare" } ], "shape": "code" }, { "id": "o3", "label": [ { "t": "text", "v": "transform animates on the compositor; will-change only advises the engine to prepare" } ], "shape": "code" }, { "id": "o4", "label": [ { "t": "text", "v": "filter: blur animates on the compositor; isolation: isolate advises the engine to prepare" } ], "shape": "code" } ] } }, { "questionId": "css.animations__66678", "topic": "css", "subSkill": "animations", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "For how many years was transitioning element entry (appear animations) impossible in pure CSS before " }, { "t": "code", "v": "@starting-style" }, { "t": "text", "v": "?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "About 5 years" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "About 8 years" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "It was always possible with @keyframes" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "More than 15 years" } ], "shape": "short" } ] } }, { "questionId": "css.animations__66999", "topic": "css", "subSkill": "animations", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Cross-document view transitions have what critical constraint regarding page origins?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Both pages must be in the same browser tab" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "Both pages must be served over HTTPS" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "Both pages must have identical " }, { "t": "code", "v": "" }, { "t": "text", "v": " content" } ], "shape": "code" }, { "id": "o4", "label": [ { "t": "text", "v": "Both pages must be same-origin" } ], "shape": "short" } ] } }, { "questionId": "css.animations__100005", "topic": "css", "subSkill": "animations", "difficulty": 1, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Which property on .btn will animate smoothly when hovered?" } ] } ], "code": { "lang": "css", "code": ".btn { background: #333; color: #fff; border-radius: 2px; transition: background-color 300ms; }\n.btn:hover { background: #666; border-radius: 20px; }", "label": "animations.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "border-radius" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "background-color" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "color" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "width" } ], "shape": "short" } ] } }, { "questionId": "css.animations__200006", "topic": "css", "subSkill": "animations", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What is the visible effect on .hov when the pointer enters?" } ] } ], "code": { "lang": "css", "code": ".hov { color: #000; background: #fff; transition: color 400ms; }\n.hov:hover { color: #f00; background: #222; }", "label": "animations.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Both color and background animate over 400ms" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "Background fades in 400ms, color changes instantly" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "Color fades over 400ms, background changes instantly" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "Neither property animates, both jump to new values" } ], "shape": "short" } ] } }, { "questionId": "css.positioning__9087", "topic": "css", "subSkill": "positioning", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "An absolutely positioned badge shifts unexpectedly the moment a parent's styles change. Which underlying rule governs its reference frame?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Absolute children inherit the parent's exact computed dimensions automatically" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "A positioned ancestor must declare " }, { "t": "code", "v": "z-index" }, { "t": "text", "v": " for offsets to resolve correctly" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "Absolute positioning resolves against the padding box of the nearest non-static ancestor" } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "Absolute positioning always anchors to the viewport regardless of parent state" } ], "shape": "short" } ] } }, { "questionId": "css.positioning__513", "topic": "css", "subSkill": "positioning", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What happens to surrounding elements when you use position: absolute on an element?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "It leaves normal flow, so the elements around it lay out as though it were gone" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "It leaves normal flow, so the elements around it shift by the offsets it declares" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "It stays in normal flow, so the elements around it keep the space it used to fill" } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "It leaves normal flow, and the elements around it reserve a box of the same size" } ], "shape": "short" } ] } }, { "questionId": "css.positioning__100122", "topic": "css", "subSkill": "positioning", "difficulty": 5, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Given the snippet, what happens when .target overflows and the fallback fires?" } ] } ], "code": { "lang": "css", "code": "@position-try --flip { inset-block-end: anchor(top); inset-block-start: auto; }\n.target { position-try-fallbacks: --flip; }", "label": "positioning.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Clips the target to its anchor's bounding rectangle and halts further positioning" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "Keeps the original insets but scales the anchor offset by 0.5 via fallback factor" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "Reruns layout with position: fixed until the overflow condition resolves itself" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "Swaps to the @position-try rule, flipping inset-block-start to inset-block-end" } ], "shape": "short" } ] } }, { "questionId": "css.positioning__400554", "topic": "css", "subSkill": "positioning", "difficulty": 4, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "In RTL documents, " }, { "t": "code", "v": "position: absolute; left: 0" }, { "t": "text", "v": " visually jumps to the wrong side after translation. What's the cleanest spec-recommended fix?" } ] } ], "code": { "lang": "css", "code": ".tip { position: absolute; inset-inline-start: 0; }", "label": "positioning.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Use logical inset properties like inset-inline-start instead of physical left offsets for flow-relative code" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "Use direction:ltr !important on the absolutely positioned child to normalize its left offset interpretation" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "Use unicode-bidi:isolate on the parent so that left and right offsets flip automatically under RTL direction" } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "Use a CSS custom property that switches left and right values via a mirrored @media (direction:rtl) rule" } ], "shape": "long" } ] } }, { "questionId": "css.positioning__521", "topic": "css", "subSkill": "positioning", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Does z-index work on flex or grid items without setting position?" } ] } ], "code": { "lang": "css", "code": ".flex-container {\n display: flex;\n}\n.above {\n z-index: 1; /* Works without position! */\n}", "label": "positioning.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "No, a stacking index works on the container, which then orders its own children" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "No, a stacking index needs a position value on the item before it has an effect" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "Yes, but the index applies to the container rather than to the individual items" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "Yes, a flex or grid item honours a stacking index without a position value" } ], "shape": "short" } ] } }, { "questionId": "css.positioning__523", "topic": "css", "subSkill": "positioning", "difficulty": 4, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What does the Popover API provide that CSS positioning alone cannot?" } ] } ], "code": { "lang": "css", "code": "\n
\n

I'm in the top layer!

\n

No z-index battles needed.

\n
", "label": "positioning.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "A stacking context of its own, which lifts the element above its own siblings" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "An automatic z-index the engine assigns from the element's position in the source" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "A top layer that paints above the rest whatever the stacking contexts say" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "A backdrop element the engine inserts, which intercepts pointer events beneath it" } ], "shape": "long" } ] } }, { "questionId": "css.positioning__209582", "topic": "css", "subSkill": "positioning", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Two siblings both use " }, { "t": "code", "v": "position: relative" }, { "t": "text", "v": ". Sibling A has " }, { "t": "code", "v": "z-index: 5" }, { "t": "text", "v": ", Sibling B has " }, { "t": "code", "v": "z-index: 2" }, { "t": "text", "v": ". Later in the source B visually overlaps A. What's the simplest explanation?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "relative positioning ignores z-index values between sibling boxes" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "z-index only affects positioned elements in the same stacking context" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "z-index requires an explicit stacking context root on body" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "later source order always overrides any z-index declaration set" } ], "shape": "short" } ] } }, { "questionId": "css.positioning__105044", "topic": "css", "subSkill": "positioning", "difficulty": 1, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "You want an element to be offset from where it would have landed in flow, while still reserving its original space. Which position value does that?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "detached" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "relative" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "floating" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "absolute" } ], "shape": "short" } ] } }, { "questionId": "css.positioning__529", "topic": "css", "subSkill": "positioning", "difficulty": 4, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What is the 'top layer' in CSS and which elements use it?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "A stacking context created by a transform, which lifts its subtree above the siblings" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "A browser-managed layer painted above each stacking context, used by modal dialogs" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "A compositor layer the engine allocates for an element it expects to animate very soon" } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "The highest z-index value the engine accepts, which the browser reserves for its own chrome" } ], "shape": "long" } ] } }, { "questionId": "css.positioning__519", "topic": "css", "subSkill": "positioning", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "How do you center a child both vertically and horizontally using absolute positioning?" } ] } ], "code": { "lang": "css", "code": ".dialog {\n position: absolute;\n inset: 0;\n margin: auto;\n width: 400px;\n height: 300px;\n /* Perfectly centered in positioned parent */\n}", "label": "positioning.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Set " }, { "t": "code", "v": "position: fixed; inset: 50%" }, { "t": "text", "v": " with " }, { "t": "code", "v": "transform: none" }, { "t": "text", "v": " declared explicitly" } ], "shape": "code" }, { "id": "o2", "label": [ { "t": "text", "v": "Set " }, { "t": "code", "v": "position: absolute; top: 50%; left: 50%" }, { "t": "text", "v": " and omit any transform offset" } ], "shape": "code" }, { "id": "o3", "label": [ { "t": "text", "v": "Set " }, { "t": "code", "v": "position: absolute; inset: 0; margin: auto" }, { "t": "text", "v": " with an explicit width and height" } ], "shape": "code" }, { "id": "o4", "label": [ { "t": "text", "v": "Set " }, { "t": "code", "v": "position: absolute; top: 0; left: 0" }, { "t": "text", "v": " with " }, { "t": "code", "v": "margin: auto" }, { "t": "text", "v": " and no inset" } ], "shape": "code" } ] } }, { "questionId": "css.responsive__513", "topic": "css", "subSkill": "responsive", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What does aspect-ratio do in CSS?" } ] } ], "code": { "lang": "css", "code": ".video-embed {\n width: 100%;\n aspect-ratio: 16 / 9;\n /* Height automatically calculated to maintain 16:9 */\n}\n\n.square {\n aspect-ratio: 1;\n /* Always a perfect square */\n}", "label": "responsive.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "It sets a fixed height for the box, computed from the viewport dimensions" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "It sets the ratio the contained image is scaled to, cropping the overflow" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "It sets a preferred ratio for the box, deriving height from width" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "It sets the ratio between the box's padding and its border on each side" } ], "shape": "short" } ] } }, { "questionId": "css.responsive__66905", "topic": "css", "subSkill": "responsive", "difficulty": 1, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Tailwind CSS v4 replaced " }, { "t": "code", "v": "tailwind.config.js" }, { "t": "text", "v": " with configuration in what?" } ] } ], "code": { "lang": "css", "code": "@import \"tailwindcss\";\n@theme {\n --color-brand: oklch(0.72 0.2 250);\n}", "label": "responsive.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "CSS, using @theme and @import directives" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "A YAML config file" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "JSON with a schema validator" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "TypeScript with a vite.config.ts plugin" } ], "shape": "short" } ] } }, { "questionId": "css.responsive__9037", "topic": "css", "subSkill": "responsive", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Why is testing a responsive layout at unusual viewport widths (e.g. 280px, 1900px) more valuable than testing only at the three or four breakpoints used in the CSS?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Container queries rely on viewport snapshots at common widths and must be primed by visiting those widths first" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "Browsers only evaluate media queries at exact breakpoint values, so off-breakpoint widths use different rendering paths entirely" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "Bugs hide in the ranges between breakpoints: overflow, awkward wrapping, and uneven spacing only surface at off-breakpoint widths" } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "Off-breakpoint widths trigger the user agent's print stylesheet fallback unless explicitly overridden in CSS" } ], "shape": "long" } ] } }, { "questionId": "css.responsive__9063", "topic": "css", "subSkill": "responsive", "difficulty": 4, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "A layout looks right at each design breakpoint but breaks at in-between widths and with unexpected content lengths. Which authoring choice is most responsible?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Using container queries so each component reacts to its own slot width rather than the viewport" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "Reserving image dimensions with aspect-ratio so reflow does not depend on load order" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "Pairing min-width media queries with clamp() so sizes scale continuously between breakpoints" } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "Sizing elements with fixed values that only change at a few hard breakpoints, with no fluid behaviour between them" } ], "shape": "long" } ] } }, { "questionId": "css.responsive__104871", "topic": "css", "subSkill": "responsive", "difficulty": 1, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Which statement best describes the purpose of a CSS media query?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Download only the CSS image assets whose file extensions match user agent hints" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "Apply styles conditionally based on characteristics of the output device or viewport" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "Lazily hydrate DOM nodes when they cross an observer-defined intersection threshold" } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "Run a timed JavaScript event loop that reshuffles inline styles on every scroll tick" } ], "shape": "long" } ] } }, { "questionId": "css.responsive__521", "topic": "css", "subSkill": "responsive", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Which CSS pattern produces a spacing scale that grows continuously with viewport size between fixed bounds, with no media queries?" } ] } ], "code": { "lang": "css", "code": ":root {\n --space-s: clamp(0.5rem, 0.5rem + 0.5vw, 1rem);\n --space-m: clamp(1rem, 1rem + 1vw, 2rem);\n --space-l: clamp(1.5rem, 1.5rem + 1.5vw, 3rem);\n}", "label": "responsive.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Custom properties whose values use " }, { "t": "code", "v": "clamp(, , )" }, { "t": "text", "v": " for each step" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "Custom properties set to plain " }, { "t": "code", "v": "vw" }, { "t": "text", "v": " values, relying on the browser to floor and ceiling them at sensible defaults" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "Sass-style maps generating one media-query block per breakpoint, with hard-coded rem values inside each block" } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "A single " }, { "t": "code", "v": "--space" }, { "t": "text", "v": " variable set to " }, { "t": "code", "v": "auto" }, { "t": "text", "v": ", which the browser then resolves against the containing block at use time" } ], "shape": "long" } ] } }, { "questionId": "css.responsive__506", "topic": "css", "subSkill": "responsive", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What does the clamp() function do?" } ] } ], "code": { "lang": "css", "code": "width: clamp(300px, 50%, 800px);\n/* 300px minimum, prefers 50% of parent, 800px maximum */\n\nfont-size: clamp(1rem, 2.5vw, 2rem);\n/* Fluid text: at least 1rem, at most 2rem */", "label": "responsive.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "It rounds a value to the nearest step in a range, which suits a stepped type scale" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "It resolves a value at parse time, so the result stops responding to the viewport" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "It holds a value between a floor and a ceiling, with a preferred middle" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "It picks the largest of the three values it is given, which is what caps a heading" } ], "shape": "long" } ] } }, { "questionId": "css.responsive__66960", "topic": "css", "subSkill": "responsive", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What constraint applies when you combine a style query with a size query in a single " }, { "t": "code", "v": "@container" }, { "t": "text", "v": " rule?" } ] } ], "code": { "lang": "css", "code": "@container style(--variant: prominent) and (min-width: 400px) {\n .card { padding: 2rem; }\n}", "label": "responsive.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Size query must come first or the rule is invalid" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "Style and size queries cannot appear in the same @container block" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "You need separate container-type values for each query type" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "They can be combined with logical operators like " }, { "t": "code", "v": "and" } ], "shape": "short" } ] } }, { "questionId": "css.responsive__66657", "topic": "css", "subSkill": "responsive", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "A scroll-state container query uses " }, { "t": "code", "v": "@container scroll-state(stuck: top)" }, { "t": "text", "v": ". What does this detect?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "That the container has been scrolled to its top" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "That a fixed-position element overlaps the container's top" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "That a sticky-positioned descendant is currently stuck to the top edge" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "That the scroll position is at the top of the page" } ], "shape": "short" } ] } }, { "questionId": "css.responsive__9006", "topic": "css", "subSkill": "responsive", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Which media query applies styles when viewport width is 768px or wider?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "@media (min-width: 768)" } ], "shape": "code" }, { "id": "o2", "label": [ { "t": "text", "v": "@media (min-width: 768px)" } ], "shape": "code" }, { "id": "o3", "label": [ { "t": "text", "v": "@media (min-device-width: 768)" } ], "shape": "code" }, { "id": "o4", "label": [ { "t": "text", "v": "@media (max-width: 768px)" } ], "shape": "code" } ] } }, { "questionId": "css.scroll_snap__66966", "topic": "css", "subSkill": "scroll_snap", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What do the " }, { "t": "code", "v": "animation-range-start" }, { "t": "text", "v": " and " }, { "t": "code", "v": "animation-range-end" }, { "t": "text", "v": " longhands control for a view timeline?" } ] } ], "code": { "lang": "css", "code": ".reveal {\n animation: fade-slide-in linear;\n animation-timeline: view();\n animation-range-start: entry 0%;\n animation-range-end: cover 40%;\n}", "label": "scroll-snap.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Which axis of the scroll port the timeline reads its progress from" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "How long the animation runs once the element has entered the scroll port" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "Which portion of the scroll port the element has to cover before it starts" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "Which slice of the element's visibility progress maps onto start and end" } ], "shape": "short" } ] } }, { "questionId": "css.scroll_snap__509", "topic": "css", "subSkill": "scroll_snap", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Which value for " }, { "t": "code", "v": "scroll-snap-align" }, { "t": "text", "v": " centers each child in the scroll container's viewport?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "code", "v": "auto" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "code", "v": "start center" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "code", "v": "middle" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "code", "v": "center" } ], "shape": "short" } ] } }, { "questionId": "css.scroll_snap__515", "topic": "css", "subSkill": "scroll_snap", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What happens when you set " }, { "t": "code", "v": "scroll-snap-type: both mandatory" }, { "t": "text", "v": "?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "The container snaps on both horizontal and vertical axes simultaneously" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "It creates a mandatory snap on horizontal and proximity snap on vertical" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "It is invalid syntax and the declaration is ignored" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "It snaps on the primary axis and ignores the secondary axis" } ], "shape": "short" } ] } }, { "questionId": "css.scroll_snap__66681", "topic": "css", "subSkill": "scroll_snap", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Which " }, { "t": "code", "v": "animation-timeline" }, { "t": "text", "v": " function triggers an animation based on an element's visibility within the scrollport?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "intersect()" } ], "shape": "code" }, { "id": "o2", "label": [ { "t": "text", "v": "view()" } ], "shape": "code" }, { "id": "o3", "label": [ { "t": "text", "v": "scroll()" } ], "shape": "code" }, { "id": "o4", "label": [ { "t": "text", "v": "visible()" } ], "shape": "code" } ] } }, { "questionId": "css.scroll_snap__66686", "topic": "css", "subSkill": "scroll_snap", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "In " }, { "t": "code", "v": "scroll(root block)" }, { "t": "text", "v": ", what does the " }, { "t": "code", "v": "root" }, { "t": "text", "v": " argument specify?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "The document's root scrolling element is used as the scroll container" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "The scroll timeline inherits from the :root CSS scope" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "The scroll position is measured from the document root, ignoring nested scrollers" } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "The animation starts from the root keyframe" } ], "shape": "short" } ] } }, { "questionId": "css.scroll_snap__66569", "topic": "css", "subSkill": "scroll_snap", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Which named ranges are available for use with animation-range in view timelines?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "start, end, visible, hidden, entering, and leaving" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "appear, disappear, overlap, contain, enter, and leave" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "entry, exit, contain, cover, entry-crossing, and exit-crossing" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "in, out, through, over, partial, and full" } ], "shape": "short" } ] } }, { "questionId": "css.scroll_snap__501", "topic": "css", "subSkill": "scroll_snap", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "When " }, { "t": "code", "v": "scroll-snap-align: center" }, { "t": "text", "v": " is set on a snap child, where does scrolling settle?" } ] } ], "code": { "lang": "css", "code": ".gallery {\n scroll-snap-type: x mandatory;\n overflow-x: auto;\n}\n.gallery-item {\n scroll-snap-align: center;\n /* Each item centers in the viewport when snapped */\n}", "label": "scroll-snap.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "The centre of the child lines up with whichever edge the scroll was heading for" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "The leading edge of the child lines up with the leading edge of the scroll port" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "The child settles wherever the momentum ends, with the centre used as a tiebreak" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "The centre of the child lines up with the centre of the container's scroll port" } ], "shape": "short" } ] } }, { "questionId": "css.scroll_snap__66848", "topic": "css", "subSkill": "scroll_snap", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "You define " }, { "t": "code", "v": "scroll-timeline: --sidebar block" }, { "t": "text", "v": " on a container and " }, { "t": "code", "v": "animation-timeline: --sidebar" }, { "t": "text", "v": " on a child. What connects them?" } ] } ], "code": { "lang": "css", "code": ".sidebar {\n overflow-y: scroll;\n scroll-timeline: --sidebar block;\n}\n.progress-bar {\n animation: grow linear;\n animation-timeline: --sidebar;\n}", "label": "scroll-snap.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "The browser's layout engine detects the relationship at paint time" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "CSS inheritance: the child inherits the timeline from the container" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "DOM proximity: the closest scroll container is automatically used" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "The named timeline: the child's animation progress tracks the container's scroll position" } ], "shape": "long" } ] } }, { "questionId": "css.scroll_snap__66564", "topic": "css", "subSkill": "scroll_snap", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What happens to animation-duration when using a scroll timeline?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "It sets the minimum scroll distance needed to complete the animation" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "It adds a delay before the scroll timeline begins tracking" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "It determines the speed of the scroll-linked animation" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "It is ignored: scroll position replaces time as the progress driver" } ], "shape": "short" } ] } }, { "questionId": "css.scroll_snap__504", "topic": "css", "subSkill": "scroll_snap", "difficulty": 4, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What are scroll-driven animations and how do they relate to scroll snapping?" } ] } ], "code": { "lang": "css", "code": ".parallax-bg {\n animation: moveBackground linear;\n animation-timeline: scroll();\n}\n\n@keyframes moveBackground {\n from { transform: translateY(0); }\n to { transform: translateY(-50%); }\n}\n/* Animates as user scrolls, works alongside snap */", "label": "scroll-snap.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "They use animation-timeline to bind animation progress to scroll position, a feature distinct from scroll snap" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "They are simply the easing transitions that scroll snap plays between targets" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "They supersede scroll snap and the two features cannot be combined" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "They are JavaScript-only effects that fire on the window's scroll event" } ], "shape": "short" } ] } }, { "questionId": "css.grid__518", "topic": "css", "subSkill": "grid", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "How do you make a grid track automatically size to its content?" } ] } ], "code": { "lang": "css", "code": ".layout {\n grid-template-columns: auto 1fr auto;\n /* Left and right: sized to content */\n /* Center: takes remaining space */\n}", "label": "grid.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Use min-content as the only allowed keyword" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "Use the auto keyword: grid-template-columns: auto 1fr auto" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "Use fit-content without parentheses" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "Set grid-auto-sizing: content" } ], "shape": "short" } ] } }, { "questionId": "css.grid__514", "topic": "css", "subSkill": "grid", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "How does the max-content keyword work in grid track sizing?" } ] } ], "code": { "lang": "css", "code": ".grid {\n grid-template-columns: max-content 1fr;\n /* First column fits its widest content exactly,\n second column takes remaining space */\n}", "label": "grid.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "It sizes the track to the widest content in that column without wrapping" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "It limits content to a maximum line length" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "It fills the track to the maximum possible size" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "It sets the track to the maximum width of the viewport" } ], "shape": "short" } ] } }, { "questionId": "css.grid__9083", "topic": "css", "subSkill": "grid", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Rows become uneven because content height varies drastically. Which grid feature helps maintain rhythm?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Set the implicit row size to a minmax range, so rows share a floor and can grow" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "Set the row gap to a relative unit, which absorbs the difference between the rows" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "Set each item to stretch on the block axis, which the auto row height then follows" } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "Set the implicit row size to a fixed length, which clips the taller cards in the row" } ], "shape": "long" } ] } }, { "questionId": "css.grid__66616", "topic": "css", "subSkill": "grid", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Does a subgrid inherit its parent grid's " }, { "t": "code", "v": "gap" }, { "t": "text", "v": " value?" } ] } ], "code": { "lang": "css", "code": ".parent { display: grid; gap: 2rem; }\n.child {\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n /* gap defaults to 0 here, NOT 2rem */\n}", "label": "grid.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "No, gap is reset to the user-agent stylesheet's default gap for grid containers" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "Yes, gap is inherited, but only the larger of the parent's row-gap and column-gap" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "No, a subgrid uses its own " }, { "t": "code", "v": "gap" }, { "t": "text", "v": ", defaulting to " }, { "t": "code", "v": "normal" }, { "t": "text", "v": " (treated as 0) rather than copying the parent's" } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "Yes, gap is always inherited from the parent and cannot be overridden on a subgrid" } ], "shape": "long" } ] } }, { "questionId": "css.grid__66811", "topic": "css", "subSkill": "grid", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "A subgrid child sets a different " }, { "t": "code", "v": "gap" }, { "t": "text", "v": " than its parent grid. Is this allowed?" } ] } ], "code": { "lang": "css", "code": ".parent { display: grid; gap: 2rem; }\n.child {\n display: grid;\n grid-template-columns: subgrid;\n gap: 0; /* Different from parent - OK */\n}", "label": "grid.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Yes, but only if the subgrid gap is smaller than the parent's" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "Yes, subgrid does not inherit the parent's gap" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "No, gap is locked when using " }, { "t": "code", "v": "grid-template-columns: subgrid" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "No, subgrid must use the same gap as the parent" } ], "shape": "short" } ] } }, { "questionId": "css.grid__504", "topic": "css", "subSkill": "grid", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What is the difference between grid-template-columns and grid-auto-columns?" } ] } ], "code": { "lang": "css", "code": ".grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr); /* 3 explicit columns */\n grid-auto-columns: 200px; /* Any extra implicit columns are 200px */\n}", "label": "grid.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "The first takes a track list while the second takes one value: the repeat is implied" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "The two are aliases, and the older spelling is kept for compatibility alone" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "The first sizes the tracks created implicitly; the second declares the explicit ones" } ], "shape": "code" }, { "id": "o4", "label": [ { "t": "text", "v": "The first declares the explicit tracks; the second sizes the implicit ones" } ], "shape": "code" } ] } }, { "questionId": "css.grid__507", "topic": "css", "subSkill": "grid", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What does minmax(200px, 1fr) mean in a grid track definition?" } ] } ], "code": { "lang": "css", "code": ".grid {\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n /* Responsive grid: items are 200px minimum, grow to fill.\n New columns added/removed as container resizes. */\n}", "label": "grid.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "The track is 200px on mobile and 1fr on desktop" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "The track width is randomly chosen between 200px and 1fr" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "The track is at least 200px wide and at most takes 1 fraction of available space" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "The track alternates between 200px and 1fr widths" } ], "shape": "short" } ] } }, { "questionId": "css.grid__9028", "topic": "css", "subSkill": "grid", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "How does " }, { "t": "code", "v": "gap" }, { "t": "text", "v": " differ from putting " }, { "t": "code", "v": "margin" }, { "t": "text", "v": " on each grid item to space them out?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Gap acts on outer container edges as well, adding inset spacing around all items" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "Gap and margin behave identically except gap is shorter to write at the container level" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "Gap is only honored when items use " }, { "t": "code", "v": "align-self: stretch" }, { "t": "text", "v": " to opt into spacing" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "Gap applies between tracks only; it never adds space at the container's outer edges and does not collapse like margins" } ], "shape": "long" } ] } }, { "questionId": "css.grid__522", "topic": "css", "subSkill": "grid", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What is the CSS-native way to build a 12-column layout system where items declare how many columns to span?" } ] } ], "code": { "lang": "css", "code": ".grid {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n gap: 16px;\n}\n.sidebar { grid-column: span 3; } /* 3/12 = 25% */\n.content { grid-column: span 9; } /* 9/12 = 75% */", "label": "grid.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Set " }, { "t": "code", "v": "grid-template-columns: repeat(12, 1fr)" }, { "t": "text", "v": " on the container and use " }, { "t": "code", "v": "grid-column: span N" }, { "t": "text", "v": " on items to occupy N tracks" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "Use " }, { "t": "code", "v": "grid-template-columns: 12fr" }, { "t": "text", "v": " so one track holds all twelve units of relative space, then size items with width percentages" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "Wrap the children in twelve sibling " }, { "t": "code", "v": "
" }, { "t": "text", "v": " columns and let each item position itself with " }, { "t": "code", "v": "float: left" }, { "t": "text", "v": " and width percentages" } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "Apply " }, { "t": "code", "v": "display: inline-grid" }, { "t": "text", "v": " to a flex parent so twelve auto-placed tracks are generated as items are appended" } ], "shape": "long" } ] } }, { "questionId": "css.grid__512", "topic": "css", "subSkill": "grid", "difficulty": 4, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What is subgrid and what problem does it solve?" } ] } ], "code": { "lang": "css", "code": ".card-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n}\n.card {\n display: grid;\n grid-template-rows: subgrid;\n grid-row: span 3;\n /* Card's rows align with the parent grid's rows */\n}", "label": "grid.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "It lets a nested grid take its tracks from the parent, so items line up across both" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "It lets a nested grid size its tracks from its own content while the parent stays fixed" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "It lets a nested grid inherit the gap of the parent while keeping its own track sizes" } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "It lets a nested grid flatten into the parent so its children become parent items" } ], "shape": "long" } ] } }, { "questionId": "css.selectors__509", "topic": "css", "subSkill": "selectors", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What does the :where() pseudo-class do differently from :is()?" } ] } ], "code": { "lang": "css", "code": ":where(h1, h2, h3) {\n margin-top: 1em; /* Specificity: (0,0,0) - easy to override */\n}\n\n:is(h1, h2, h3) {\n color: navy; /* Specificity: (0,0,1) - from the most specific arg */\n}", "label": "selectors.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "The first accepts a forgiving list while the second rejects a selector it cannot parse" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "The second carries no weight of its own, while the first takes its strongest argument" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "The first carries no weight of its own, while the second takes its strongest argument" } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "The first matches the parent while the second matches its descendants as well" } ], "shape": "short" } ] } }, { "questionId": "css.selectors__66882", "topic": "css", "subSkill": "selectors", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Why did " }, { "t": "code", "v": ":has()" }, { "t": "text", "v": " take significantly longer to ship than " }, { "t": "code", "v": ":is()" }, { "t": "text", "v": " or " }, { "t": "code", "v": ":where()" }, { "t": "text", "v": " across browser engines?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Naive evaluation triggered re-matching on descendant mutations across the subtree" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "Engines had no IPC channel between the layout and selector-matching threads" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "Forgiving selector lists caused exponential blow-up when arguments are nested" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "The spec required a new selector grammar token that broke existing parsers" } ], "shape": "short" } ] } }, { "questionId": "css.selectors__104521", "topic": "css", "subSkill": "selectors", "difficulty": 1, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "In the rule " }, { "t": "code", "v": ".card p" }, { "t": "text", "v": ", which paragraphs are matched?" } ] } ], "code": { "lang": "css", "code": ".card p { color: crimson; }", "label": "selectors.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Only " }, { "t": "code", "v": "

" }, { "t": "text", "v": " siblings adjacent to a .card element node" } ], "shape": "code" }, { "id": "o2", "label": [ { "t": "text", "v": "Any " }, { "t": "code", "v": "

" }, { "t": "text", "v": " descendant of .card at any nesting depth" } ], "shape": "code" }, { "id": "o3", "label": [ { "t": "text", "v": "Only the first " }, { "t": "code", "v": "

" }, { "t": "text", "v": " that appears within .card element" } ], "shape": "code" }, { "id": "o4", "label": [ { "t": "text", "v": "Only " }, { "t": "code", "v": "

" }, { "t": "text", "v": " elements that are direct children of .card" } ], "shape": "code" } ] } }, { "questionId": "css.selectors__511", "topic": "css", "subSkill": "selectors", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What does the adjacent sibling combinator (+) select?" } ] } ], "code": { "lang": "css", "code": "h2 + p {\n font-size: 1.1em;\n /* Styles only the first

right after each

*/\n}", "label": "selectors.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "The first child of the element" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "All siblings after the first element" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "Elements that are adjacent in the document flow regardless of parent" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "The element immediately following the first element, sharing the same parent" } ], "shape": "short" } ] } }, { "questionId": "css.selectors__66899", "topic": "css", "subSkill": "selectors", "difficulty": 1, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What specificity does " }, { "t": "code", "v": ":where()" }, { "t": "text", "v": " contribute to a selector?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "The specificity of its most specific argument" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "Zero specificity" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "One element worth of specificity" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "One class worth of specificity" } ], "shape": "short" } ] } }, { "questionId": "css.selectors__66890", "topic": "css", "subSkill": "selectors", "difficulty": 1, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Which selector lets a CSS rule select a parent based on what its descendants look like - something previously only possible in JavaScript?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": ":is()" } ], "shape": "code" }, { "id": "o2", "label": [ { "t": "text", "v": ":focus-visible" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": ":where()" } ], "shape": "code" }, { "id": "o4", "label": [ { "t": "text", "v": ":has()" } ], "shape": "code" } ] } }, { "questionId": "css.selectors__9016", "topic": "css", "subSkill": "selectors", "difficulty": 1, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "When should " }, { "t": "code", "v": ":is()" }, { "t": "text", "v": " be preferred over repeating long selector prefixes?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "When consolidating shared selector branches" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "When disabling user-agent default styles" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "When adding JavaScript event handlers to nodes" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "When forcing print-only styles on elements" } ], "shape": "short" } ] } }, { "questionId": "css.selectors__66669", "topic": "css", "subSkill": "selectors", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "code", "v": ".dashboard:has(.alert)" }, { "t": "text", "v": " applies styles when what condition is true?" } ] } ], "code": { "lang": "css", "code": ".dashboard:has(.alert) {\n border-left: 4px solid var(--error);\n}", "label": "selectors.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "JavaScript has dispatched a custom alert event" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "The .dashboard element has an alert attribute" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "Any descendant of .dashboard has the class alert" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "An alert dialog is open anywhere on the page" } ], "shape": "short" } ] } }, { "questionId": "css.selectors__200002", "topic": "css", "subSkill": "selectors", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Which li elements are selected by the rule below?" } ] } ], "code": { "lang": "css", "code": "li:nth-of-type(odd) { background: #eee; }\n\n
    \n
  • 1
  • 2
  • 3
  • 4
    • \n
", "label": "selectors.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Only list items that have an odd number of characters inside" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "Items at even index positions starting the count from zero" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "List items that sit at every third position inside their list" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "Every odd-positioned li counting from one among sibling list items" } ], "shape": "short" } ] } }, { "questionId": "css.selectors__66668", "topic": "css", "subSkill": "selectors", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "A dark mode control sets a " }, { "t": "code", "v": "data-theme" }, { "t": "text", "v": " attribute on " }, { "t": "code", "v": "" }, { "t": "text", "v": ". How does " }, { "t": "code", "v": ":has()" }, { "t": "text", "v": " enable theme switching without JavaScript style changes?" } ] } ], "code": { "lang": "css", "code": "html:has(input[data-theme=\"dark\"]:checked) {\n --bg: #111;\n --text: #eee;\n}", "label": "selectors.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": ":has() provides a JavaScript API for reading the checked state" } ], "shape": "code" }, { "id": "o2", "label": [ { "t": "text", "v": ":has() monitors DOM mutations and triggers a style recalculation" } ], "shape": "code" }, { "id": "o3", "label": [ { "t": "text", "v": "html:has(:root[data-theme='dark']) queries the root's own attribute" } ], "shape": "code" }, { "id": "o4", "label": [ { "t": "text", "v": "html:has(input[data-theme='dark']:checked) selects the root when the toggle is checked" } ], "shape": "code" } ] } }, { "questionId": "css.cascade_layers__300008", "topic": "css", "subSkill": "cascade_layers", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Which statement best describes what an empty but ordered prelude such as @layer reset, tokens, components, utilities; achieves on its own?" } ] } ], "code": { "lang": "css", "code": "@layer reset, tokens, components, utilities;", "label": "cascade-layers.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "It exports four JavaScript hooks so scripts may toggle visibility of each named bucket at runtime." } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "It triggers a parse error because a prelude without any block body is disallowed by the syntax." } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "It immediately applies four scoped resets to the root element before any authored rules are parsed." } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "It registers four names and freezes their priority so later rule blocks populate a known stack." } ], "shape": "long" } ] } }, { "questionId": "css.cascade_layers__66795", "topic": "css", "subSkill": "cascade_layers", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What does " }, { "t": "code", "v": "@layer { p { color: red; } }" }, { "t": "text", "v": " (without a name) create?" } ] } ], "code": { "lang": "css", "code": "@layer { p { color: red; } } /* anonymous layer 1 */\n@layer { p { color: blue; } } /* anonymous layer 2 - separate */", "label": "cascade-layers.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "A syntax error: " }, { "t": "code", "v": "@layer" }, { "t": "text", "v": " requires a name" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "A layer named " }, { "t": "code", "v": "default" }, { "t": "text", "v": " that collects all unnamed rules" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "An anonymous layer: it can never be referenced or extended later" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "An unlayered block identical to writing " }, { "t": "code", "v": "p { color: red; }" }, { "t": "text", "v": " outside any layer" } ], "shape": "code" } ] } }, { "questionId": "css.cascade_layers__510", "topic": "css", "subSkill": "cascade_layers", "difficulty": 4, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "How do anonymous layers work?" } ] } ], "code": { "lang": "css", "code": "@layer base;\n@layer { * { margin: 0; } } /* Anonymous - cannot add to later */\n@layer base { body { color: #333; } }", "label": "cascade-layers.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "A block with no name joins the last named layer, so the two share one position" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "A block with no name is discarded at parse time, so its declarations lapse" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "A block with no name sits outside the layer order and wins over the named ones" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "A block with no name makes a layer of its own that no later rule can extend" } ], "shape": "short" } ] } }, { "questionId": "css.cascade_layers__66760", "topic": "css", "subSkill": "cascade_layers", "difficulty": 1, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Tailwind CSS v4 internally outputs styles in cascade layers. What is the primary benefit of this architecture?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "A utility class can be purged per layer, which the older build could not do" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "A utility class ships in a smaller file, since the layers are emitted apart" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "A utility class beats a component style whatever the selector weight involved" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "A utility class inherits the component style, so the two merge on one element" } ], "shape": "short" } ] } }, { "questionId": "css.cascade_layers__503", "topic": "css", "subSkill": "cascade_layers", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "How do you assign an imported stylesheet to a specific layer?" } ] } ], "code": { "lang": "css", "code": "/* Third-party styles in low-priority layer */\n@import url('normalize.css') layer(reset);\n@import url('component-lib.css') layer(vendor);\n\n/* Your styles override vendor easily */\n@layer vendor, app;\n\n@layer app {\n .btn { /* Your override: wins over vendor */ }\n}", "label": "cascade-layers.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Write the import inside a layer block, which the parser accepts at the top alone" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "Write the import with a layer function naming the layer the whole sheet joins" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "Write the layer name in a media condition on the import, which the cascade reads" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "Write a layer statement first; the import then joins whichever layer comes last" } ], "shape": "code" } ] } }, { "questionId": "css.cascade_layers__66928", "topic": "css", "subSkill": "cascade_layers", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "In the cascade, do styles NOT in any " }, { "t": "code", "v": "@layer" }, { "t": "text", "v": " beat or lose to layered styles?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Unlayered styles always beat layered styles" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "Layered styles always win due to explicit ordering" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "They have equal priority and source order breaks the tie" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "Unlayered styles only win if they have higher specificity" } ], "shape": "short" } ] } }, { "questionId": "css.cascade_layers__522", "topic": "css", "subSkill": "cascade_layers", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "How do you use @layer with CSS-in-JS libraries?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Wrap the generated output in a layer through the library's own option" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "Move the generated output into a separate document so the ordering is isolated" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "Raise the specificity of the generated selectors until they beat the page rules" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "Set an important flag on each generated rule so the ordering stops mattering" } ], "shape": "short" } ] } }, { "questionId": "css.cascade_layers__9107", "topic": "css", "subSkill": "cascade_layers", "difficulty": 4, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "You inherit a legacy stylesheet riddled with " }, { "t": "code", "v": "!important" }, { "t": "text", "v": " and id-chain selectors. Which " }, { "t": "code", "v": "@layer" }, { "t": "text", "v": " migration tactic isolates the legacy code so new rules can phase it out predictably?" } ] } ], "code": { "lang": "css", "code": "@layer legacy, app;\n@import 'legacy.css' layer(legacy);\n@layer app { /* new rules here */ }", "label": "cascade-layers.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Strip every " }, { "t": "code", "v": "!important" }, { "t": "text", "v": " flag from the legacy code before introducing new selectors" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "Move every legacy declaration into a deeply nested " }, { "t": "code", "v": "@scope" }, { "t": "text", "v": " block to neutralize it" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "Apply a single anonymous " }, { "t": "code", "v": "@layer" }, { "t": "text", "v": " wrapper around the entire legacy file at build time" } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "Quarantine the legacy rules in an earlier layer and write new rules in a later layer or unlayered" } ], "shape": "long" } ] } }, { "questionId": "css.cascade_layers__66708", "topic": "css", "subSkill": "cascade_layers", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What does " }, { "t": "code", "v": "revert-layer" }, { "t": "text", "v": " do compared to " }, { "t": "code", "v": "revert" }, { "t": "text", "v": "?" } ] } ], "code": { "lang": "css", "code": "@layer components {\n .btn { padding: 1rem; }\n}\n@layer utilities {\n .no-pad { padding: revert-layer; }\n}", "label": "cascade-layers.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "revert-layer reverts animation keyframes; revert reverts property values" } ], "shape": "code" }, { "id": "o2", "label": [ { "t": "text", "v": "revert-layer reverts to the previous cascade layer; revert reverts to the previous origin" } ], "shape": "code" }, { "id": "o3", "label": [ { "t": "text", "v": "They are aliases: both revert to the user-agent stylesheet" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "revert-layer only works inside @layer blocks; revert works everywhere" } ], "shape": "code" } ] } }, { "questionId": "css.cascade_layers__66596", "topic": "css", "subSkill": "cascade_layers", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "How do you create nested cascade layers?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "@layer framework/components { ... }" } ], "shape": "code" }, { "id": "o2", "label": [ { "t": "text", "v": "@nested-layer framework > components { ... }" } ], "shape": "code" }, { "id": "o3", "label": [ { "t": "text", "v": "@layer framework.components { ... }" } ], "shape": "code" }, { "id": "o4", "label": [ { "t": "text", "v": "@layer framework:components { ... }" } ], "shape": "code" } ] } }, { "questionId": "css.nesting__515", "topic": "css", "subSkill": "nesting", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "How does specificity work with the " }, { "t": "code", "v": "&" }, { "t": "text", "v": " nesting selector?" } ] } ], "code": { "lang": "css", "code": ".card {\n & .title {\n color: black;\n }\n}", "label": "nesting.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "The reference behaves as a plain string, so the weight is the sum of both parts" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "The reference behaves as a match function, taking the strongest weight in the list" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "The reference carries no weight of its own, so the nested selector alone counts" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "The reference behaves as a match function, taking the weakest weight in the parent list" } ], "shape": "long" } ] } }, { "questionId": "css.nesting__527", "topic": "css", "subSkill": "nesting", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "How do you use " }, { "t": "code", "v": "@layer" }, { "t": "text", "v": " inside a nested rule?" } ] } ], "code": { "lang": "css", "code": ".component {\n color: black;\n @layer utilities {\n &.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n }\n }\n}", "label": "nesting.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "code", "v": "@layer" }, { "t": "text", "v": " cannot be nested: it must be at the top level of the stylesheet" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "Nested " }, { "t": "code", "v": "@layer" }, { "t": "text", "v": " creates a sub-layer scoped only to the parent selector" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "code", "v": "@layer" }, { "t": "text", "v": " can be nested inside rules, placing the nested declarations into the named cascade layer" } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "The " }, { "t": "code", "v": "&" }, { "t": "text", "v": " is required inside nested " }, { "t": "code", "v": "@layer" }, { "t": "text", "v": " but ignored outside of it" } ], "shape": "short" } ] } }, { "questionId": "css.nesting__66790", "topic": "css", "subSkill": "nesting", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "In CSS nesting, " }, { "t": "code", "v": ".a, #b { & .c {} }" }, { "t": "text", "v": " desugars to " }, { "t": "code", "v": ":is(.a, #b) .c" }, { "t": "text", "v": ". What is the resulting specificity?" } ] } ], "code": { "lang": "css", "code": ".a, #b { & .c { color: red; } }\n/* Specificity: (1, 1, 0) - same as #b .c, even when matching via .a */", "label": "nesting.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "(0, 1, 1): the .a class plus .c, while the #b id is dropped on match" } ], "shape": "code" }, { "id": "o2", "label": [ { "t": "text", "v": "(1, 1, 0): :is(.a, #b) takes #b's specificity (1,0,0), then .c adds (0,1,0)" } ], "shape": "code" }, { "id": "o3", "label": [ { "t": "text", "v": "(0, 0, 2): :is() averages its arguments and .c contributes one element" } ], "shape": "code" }, { "id": "o4", "label": [ { "t": "text", "v": "(0, 2, 1): the #b id inside :is() is downgraded to a class weight" } ], "shape": "code" } ] } }, { "questionId": "css.nesting__200040", "topic": "css", "subSkill": "nesting", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What is the specificity of the nested selector " }, { "t": "code", "v": "section { ul li { padding: 4px; } }" }, { "t": "text", "v": " once desugared?" } ] } ], "code": { "lang": "css", "code": "section {\n ul li { padding: 4px; }\n}", "label": "nesting.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "(0, 0, 1): descendant chains collapse to the rightmost element only" } ], "shape": "code" }, { "id": "o2", "label": [ { "t": "text", "v": "(0, 0, 2): :is() drops the parent weight and only ul and li are counted" } ], "shape": "code" }, { "id": "o3", "label": [ { "t": "text", "v": "(0, 0, 3): :is(section) ul li contributes three element-level selectors" } ], "shape": "code" }, { "id": "o4", "label": [ { "t": "text", "v": "(0, 1, 2): :is(section) contributes class-level weight, then ul plus li" } ], "shape": "code" } ] } }, { "questionId": "css.nesting__400884", "topic": "css", "subSkill": "nesting", "difficulty": 4, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "When comparing native nesting to Sass regarding parent suffixing like " }, { "t": "code", "v": "&-foo" }, { "t": "text", "v": ", what is the current browser behavior?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Browsers treat it as a descendant combinator" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "Browsers concatenate it into a single class name" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "Browsers quietly downgrade into a sibling match" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "Not supported by browsers and throws a parse error" } ], "shape": "short" } ] } }, { "questionId": "css.nesting__400883", "topic": "css", "subSkill": "nesting", "difficulty": 4, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "A nested rule inside " }, { "t": "code", "v": "@scope (.card) to (.nested)" }, { "t": "text", "v": " overrides the same property matched by a top-level " }, { "t": "code", "v": ".card .title" }, { "t": "text", "v": " rule. Which cascade factor typically decides this?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Nested rule is treated as user origin style" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "Implicit scope origin outranks author origin" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "Ampersand token adds specificity weight boost" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "Source order after identical specificity check" } ], "shape": "short" } ] } }, { "questionId": "css.nesting__200012", "topic": "css", "subSkill": "nesting", "difficulty": 1, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Which color does a " }, { "t": "code", "v": "

" }, { "t": "text", "v": " inside .wrap take?" } ] } ], "code": { "lang": "css", "code": ".wrap {\n color: black;\n p { color: green; }\n}", "label": "nesting.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "black" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "coral" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "green" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "brown" } ], "shape": "short" } ] } }, { "questionId": "css.nesting__66791", "topic": "css", "subSkill": "nesting", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "You write " }, { "t": "code", "v": ".nav { &-item { color: red; } }" }, { "t": "text", "v": " in CSS nesting. What happens?" } ] } ], "code": { "lang": "css", "code": "/* Sass: .nav { &-item {} } → .nav-item {} */\n/* CSS: .nav { &-item {} } → INVALID */", "label": "nesting.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "It works but with a specificity warning in DevTools" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "It fails: CSS nesting's " }, { "t": "code", "v": "&" }, { "t": "text", "v": " is not string concatenation like Sass" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "It targets elements with class " }, { "t": "code", "v": "nav" }, { "t": "text", "v": " that are also " }, { "t": "code", "v": "-item" }, { "t": "text", "v": " elements" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "It produces " }, { "t": "code", "v": ".nav-item { color: red; }" }, { "t": "text", "v": " as expected" } ], "shape": "code" } ] } }, { "questionId": "css.nesting__523", "topic": "css", "subSkill": "nesting", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "How do you nest an attribute selector?" } ] } ], "code": { "lang": "css", "code": ".form {\n & [type=\"email\"] {\n text-transform: lowercase;\n }\n &[disabled] {\n opacity: 0.5;\n }\n}", "label": "nesting.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Either form matches the parent, so a descendant needs the selector written out in full" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "Either form matches descendants, and the parent needs a separate rule: no nesting helps" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "With a space it matches descendants; without one it matches the parent itself" } ], "shape": "code" }, { "id": "o4", "label": [ { "t": "text", "v": "With a space it matches the parent itself; without one it matches descendants carrying it" } ], "shape": "code" } ] } }, { "questionId": "css.nesting__200054", "topic": "css", "subSkill": "nesting", "difficulty": 4, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Which color applies to a " }, { "t": "code", "v": "" }, { "t": "text", "v": " inside " }, { "t": "code", "v": "

" }, { "t": "text", "v": " inside .card?" } ] } ], "code": { "lang": "css", "code": ".card {\n h2 {\n color: goldenrod;\n span { color: slateblue; }\n }\n}", "label": "nesting.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "periwinkl" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "goldenrod" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "slateblue" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "magnolia" } ], "shape": "short" } ] } }, { "questionId": "css.logical_properties__524", "topic": "css", "subSkill": "logical_properties", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What is the logical mapping for top, right, bottom, left in order?" } ] } ], "code": { "lang": "css", "code": "/* Physical */\n.tooltip { top: 0; right: 8px; }\n\n/* Logical (RTL-ready) */\n.tooltip {\n inset-block-start: 0;\n inset-inline-end: 8px;\n}", "label": "logical-properties.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "block-start, inline-start, block-end, inline-end" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "inset-1, inset-2, inset-3, inset-4" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "offset-top, offset-right, offset-bottom, offset-left" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "inset-block-start, inset-inline-end, inset-block-end, inset-inline-start" } ], "shape": "short" } ] } }, { "questionId": "css.logical_properties__100001", "topic": "css", "subSkill": "logical_properties", "difficulty": 1, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Which statement best describes the purpose of CSS logical properties?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "They replace the box model with a grid-aligned geometry tied to pixel coordinates exactly" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "They apply visual side values after converting the cascade into absolute screen offsets" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "They lock element sizing to the viewport corners regardless of any text orientation" } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "They map to the writing mode and direction of the document so layout adapts to the flow" } ], "shape": "long" } ] } }, { "questionId": "css.logical_properties__66869", "topic": "css", "subSkill": "logical_properties", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "You use " }, { "t": "code", "v": "margin-inline-start: 1rem" }, { "t": "text", "v": " on an element inside a " }, { "t": "code", "v": "dir=\"rtl\"" }, { "t": "text", "v": " container. Which physical side gets the margin?" } ] } ], "code": { "lang": "css", "code": "/* In RTL: margin appears on the right */\n.item { margin-inline-start: 1rem; }", "label": "logical-properties.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "The right side: inline-start maps to right in RTL writing modes" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "Neither, logical properties are ignored in RTL contexts" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "Both sides: inline-start applies to both edges in RTL" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "The left side: inline-start always maps to left" } ], "shape": "short" } ] } }, { "questionId": "css.logical_properties__513", "topic": "css", "subSkill": "logical_properties", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What is the logical equivalent of height?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "logical-height" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "block-size" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "flow-height" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "inline-size" } ], "shape": "short" } ] } }, { "questionId": "css.logical_properties__100005", "topic": "css", "subSkill": "logical_properties", "difficulty": 1, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "In a default horizontal writing mode, which physical dimension does " }, { "t": "code", "v": "block-size" }, { "t": "text", "v": " control?" } ] } ], "code": { "lang": "css", "code": ".panel {\n writing-mode: horizontal-tb;\n block-size: 240px;\n}", "label": "logical-properties.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "width" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "min-width" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "max-height" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "height" } ], "shape": "short" } ] } }, { "questionId": "css.logical_properties__501", "topic": "css", "subSkill": "logical_properties", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What does 'inline' and 'block' mean in the context of logical properties?" } ] } ], "code": { "lang": "css", "code": "/* These are equivalent in English (horizontal-tb): */\nmargin-inline: 16px; /* = margin-left + margin-right */\nmargin-block: 8px; /* = margin-top + margin-bottom */\n\ninline-size: 300px; /* = width */\nblock-size: 200px; /* = height */", "label": "logical-properties.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Inline refers to an element's display type: block is the other value of that pair" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "Block runs with the text, horizontal in English; inline runs across it, vertical in that case" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "Inline means the horizontal axis and block the vertical, whatever the writing mode is" } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "Inline runs with the text, horizontal in English; block runs across it, vertical in English" } ], "shape": "long" } ] } }, { "questionId": "css.logical_properties__507", "topic": "css", "subSkill": "logical_properties", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What does text-align: start do compared to text-align: left?" } ] } ], "code": { "lang": "css", "code": ".content {\n text-align: start;\n /* English (LTR): aligns left */\n /* Arabic (RTL): aligns right */\n /* No separate RTL override needed */\n}", "label": "logical-properties.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "The two behave identically, and the logical spelling exists purely for readability reasons" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "The logical value centres the text, while the physical one aligns it against one edge" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "The logical value is fixed to the left edge; the physical one follows the inline direction" } ], "shape": "code" }, { "id": "o4", "label": [ { "t": "text", "v": "The logical value follows the inline direction; the physical one is fixed left" } ], "shape": "code" } ] } }, { "questionId": "css.logical_properties__200008", "topic": "css", "subSkill": "logical_properties", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "In a default horizontal writing mode, which physical shorthand does this logical shorthand set?" } ] } ], "code": { "lang": "css", "code": ".stack {\n writing-mode: horizontal-tb;\n margin-block: 1rem;\n}", "label": "logical-properties.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "margin-top and margin-right" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "margin-left and margin-right" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "margin-top and margin-bottom" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "margin-left and margin-bottom" } ], "shape": "short" } ] } }, { "questionId": "css.logical_properties__505", "topic": "css", "subSkill": "logical_properties", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What is the logical equivalent of border-top-left-radius?" } ] } ], "code": { "lang": "css", "code": ".tab {\n border-start-start-radius: 8px; /* top-left in LTR */\n border-start-end-radius: 8px; /* top-right in LTR */\n /* In RTL: these swap to match reading direction */\n}", "label": "logical-properties.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "border-inline-start-radius" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "border-logical-top-left-radius" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "border-start-start-radius" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "border-block-start-radius" } ], "shape": "short" } ] } }, { "questionId": "css.logical_properties__9109", "topic": "css", "subSkill": "logical_properties", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "RTL layout mirrors text but paddings remain on wrong side. Which CSS family addresses this cleanly?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Use JavaScript to detect text direction and swap padding classes" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "Use CSS transforms to mirror the entire layout for RTL rendering" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "Apply direction-specific media queries to override spacing per language" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "Use logical spacing properties instead of physical left/right" } ], "shape": "short" } ] } }, { "questionId": "css.custom_properties__200035", "topic": "css", "subSkill": "custom_properties", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What border does .card get?" } ] } ], "code": { "lang": "css", "code": ":root { --bw: 2px; --bc: navy; }\n.card { border: var(--bw) solid var(--bc); }", "label": "custom-properties.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "medium none navy" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "1px solid navy" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "2px solid black" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "2px solid navy" } ], "shape": "short" } ] } }, { "questionId": "css.custom_properties__208901", "topic": "css", "subSkill": "custom_properties", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Author writes " }, { "t": "code", "v": "--radius: 8" }, { "t": "text", "v": " vs " }, { "t": "code", "v": "--radius: 8px" }, { "t": "text", "v": ". Using " }, { "t": "code", "v": "border-radius: var(--radius);" }, { "t": "text", "v": " - how do the outcomes compare?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Only the unit-bearing one triggers a style recalc; the bare one is cached and applied without recalculating values" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "Only the unit-bearing one rounds corners in inline axis; the bare one rounds corners in the block axis always" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "Only the unit-bearing one ignores zoom level; the bare one responds to viewport meta scaling in the cascade" } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "Only the unit-bearing value yields a valid length; the bare number makes the declaration invalid at computed-value time" } ], "shape": "long" } ] } }, { "questionId": "css.custom_properties__514", "topic": "css", "subSkill": "custom_properties", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Can CSS custom properties hold complex values like gradients or shadows?" } ] } ], "code": { "lang": "css", "code": ":root {\n --shadow-md: 0 4px 12px oklch(0 0 0 / 0.1);\n --gradient: linear-gradient(135deg, var(--primary), var(--secondary));\n}\n\n.card {\n box-shadow: var(--shadow-md);\n background: var(--gradient);\n}", "label": "custom-properties.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "No, they hold a single token, so a multi-part value has to be split across several" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "Yes, they hold whatever is valid, gradients, shadows and whole shorthands" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "Yes, but a composite value has to be registered with a matching syntax descriptor" } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "No, they hold lengths and colours, and a composite value needs a registered syntax" } ], "shape": "long" } ] } }, { "questionId": "css.custom_properties__520", "topic": "css", "subSkill": "custom_properties", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Do CSS custom properties inherit by default?" } ] } ], "code": { "lang": "css", "code": "body {\n --accent: oklch(0.6 0.2 250);\n}\n\n/* Available everywhere: inheritance! */\n.deeply-nested {\n color: var(--accent);\n}", "label": "custom-properties.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Yes, custom properties inherit from parent to child just like color and font-size" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "No, they are scoped to the selector they are declared on" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "Only if the inherits keyword is set to true" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "They inherit only to direct children, not deeper descendants" } ], "shape": "short" } ] } }, { "questionId": "css.custom_properties__503", "topic": "css", "subSkill": "custom_properties", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Can you use CSS custom properties inside media queries or selector conditions?" } ] } ], "code": { "lang": "css", "code": ":root {\n --bp: 768px;\n}\n\n/* This does NOT work: */\n/* @media (min-width: var(--bp)) { } */\n\n/* This DOES work (in a value): */\n.sidebar {\n width: var(--sidebar-width, 250px);\n}", "label": "custom-properties.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Yes, as long as the property is registered with a type the condition can compare" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "Yes, in a media condition but not a selector, since the two resolve at one time" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "No, though a media condition can read one from the root element as a fallback" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "No, a custom property works in a declaration value, not in a condition" } ], "shape": "short" } ] } }, { "questionId": "css.custom_properties__500682", "topic": "css", "subSkill": "custom_properties", "difficulty": 5, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Which statement best describes how a direct cyclic dependency between two custom properties is resolved by the engine?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Each declaration resolves to the guaranteed-invalid value only for the last node in the cycle path" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "Each declaration elevates itself one layer higher in the cascade to escape the recursive dependency" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "Each declaration participating in the cycle becomes invalid at computed-value time on that element" } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "Each declaration caches its previous computed value and replays it to break the chain lazily" } ], "shape": "long" } ] } }, { "questionId": "css.custom_properties__311274", "topic": "css", "subSkill": "custom_properties", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Comparing " }, { "t": "code", "v": "padding: var(--pad-x) var(--pad-y)" }, { "t": "text", "v": " to " }, { "t": "code", "v": "padding: calc(var(--pad-x)) calc(var(--pad-y))" }, { "t": "text", "v": " - what subtle behavioral difference appears?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "The calc() wrapper opens access to container query units exclusively inside the shorthand resolution step" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "The calc() wrapper locks the token to ch units when ambient sizing switches between rem and em contexts" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "The calc() wrapper keeps the property off the main thread so paints stay smoother under heavy interaction loads" } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "The calc() wrapper forces a computation context that rejects unitless tokens early and normalizes the value" } ], "shape": "long" } ] } }, { "questionId": "css.custom_properties__66696", "topic": "css", "subSkill": "custom_properties", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Setting " }, { "t": "code", "v": "inherits: false" }, { "t": "text", "v": " on a registered custom property prevents what behavior?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "The property from being overridden in a higher-specificity rule" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "The property from participating in the cascade" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "Child elements inheriting the property's value from their parent" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "Other custom properties from referencing it via var()" } ], "shape": "code" } ] } }, { "questionId": "css.custom_properties__100234", "topic": "css", "subSkill": "custom_properties", "difficulty": 1, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Which statement best describes the role of the second argument to the var() function?" } ] } ], "code": { "lang": "css", "code": "color: var(--accent, hotpink);", "label": "custom-properties.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "It enforces the numeric data type that the referenced variable must resolve into" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "It controls whether the referenced variable should propagate into descendant elements" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "It sets the animation timing curve applied when the referenced variable changes" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "It supplies a fallback value used when the referenced variable is invalid or missing" } ], "shape": "long" } ] } }, { "questionId": "css.custom_properties__9099", "topic": "css", "subSkill": "custom_properties", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Nested components accidentally override parent spacing tokens. Which naming strategy reduces collisions?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Declare all custom properties at root level with !important flags" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "Use CSS layers to isolate component properties from parent scope" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "Namespace custom properties by component or domain" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "Use shorter property names to reduce collision probability" } ], "shape": "short" } ] } }, { "questionId": "css.color_functions__702611", "topic": "css", "subSkill": "color_functions", "difficulty": 4, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "A gradient " }, { "t": "code", "v": "in hsl longer hue" }, { "t": "text", "v": " animates between two light pastels and produces a neon rainbow. Which property should you swap to in order to keep the eye-friendly arc most practitioners actually want?" } ] } ], "code": { "lang": "css", "code": "background: linear-gradient(in oklch shorter hue, #fdd, #dff);", "label": "color-functions.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Switch the interpolation space to " }, { "t": "code", "v": "in oklch shorter hue" }, { "t": "text", "v": " for perceptual balance." } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "Switch to " }, { "t": "code", "v": "in hwb shorter hue" }, { "t": "text", "v": ", which blends whiteness channel against blackness too." } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "Switch to " }, { "t": "code", "v": "in lab longer hue" }, { "t": "text", "v": " so hue nonlinearities cancel around blue-purple area." } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "Switch to " }, { "t": "code", "v": "in srgb" }, { "t": "text", "v": " with transparent stops to desaturate the band between stops." } ], "shape": "short" } ] } }, { "questionId": "css.color_functions__514", "topic": "css", "subSkill": "color_functions", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What is the advantage of color-mix() over manually calculating intermediate colors?" } ] } ], "code": { "lang": "css", "code": "/* Create hover state by mixing with white */\n.btn:hover {\n background: color-mix(in oklch, var(--btn-bg) 85%, white);\n /* 15% lighter, perceptually correct */\n}", "label": "color-functions.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "It shrinks compiled CSS file size by deduplicating repeated color tokens across the entire stylesheet" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "It works with any color format, handles color space interpolation automatically, and produces perceptually correct blends" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "It works in offline-only build environments while manually computed colors require a network round-trip" } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "It renders blends faster than predefined colors because the browser caches the result on the GPU pipeline" } ], "shape": "long" } ] } }, { "questionId": "css.color_functions__300032", "topic": "css", "subSkill": "color_functions", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What color does --hover compute to?" } ] } ], "code": { "lang": "css", "code": ":root { --brand: #0066ff; --hover: color-mix(in oklch, var(--brand), white 20%); }", "label": "color-functions.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "the base tone darkened by twenty percent toward black" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "the base hue shifted twenty percent around the wheel" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "the base tone lightened toward white by twenty percent" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "the base color desaturated completely to a neutral gray" } ], "shape": "short" } ] } }, { "questionId": "css.color_functions__200028", "topic": "css", "subSkill": "color_functions", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What does the background compute to?" } ] } ], "code": { "lang": "css", "code": ".hero { background: color(srgb 1 1 1); }", "label": "color-functions.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "the default system canvas color" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "a mid-gray neutral fallback tone" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "the sRGB white primary color" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "a fully transparent empty layer" } ], "shape": "short" } ] } }, { "questionId": "css.color_functions__502", "topic": "css", "subSkill": "color_functions", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What does the color-mix() function do?" } ] } ], "code": { "lang": "css", "code": "/* 50/50 mix of primary with white = tint */\n--primary-tint: color-mix(in oklch, var(--primary), white 50%);\n\n/* 30% opacity effect without rgba */\n--overlay: color-mix(in oklch, var(--primary) 30%, transparent);", "label": "color-functions.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "It blends two colors in a specified color space and proportion" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "It validates that two color tokens have a sufficient WCAG contrast ratio" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "It produces a CSS gradient between two declared colors at paint time" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "It converts a color value from one notation format to another notation" } ], "shape": "short" } ] } }, { "questionId": "css.color_functions__520", "topic": "css", "subSkill": "color_functions", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What percentage syntax does color-mix() use?" } ] } ], "code": { "lang": "css", "code": "/* 70% blue + 30% white = light blue tint */\n--tint: color-mix(in oklch, var(--blue) 70%, white);\n\n/* 50/50 mix = midpoint between both colors */\n--mid: color-mix(in oklch, var(--blue), var(--green));", "label": "color-functions.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "The percentage sets the opacity of the resulting mixed color value, leaving the source colors fully opaque inside" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "The percentage controls the chroma of the resulting mixed color value, raising or lowering its perceived vividness" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "Both percentage values must add up to exactly 200% across the two arguments or the declaration is invalid" } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "The percentage indicates how much of that color to include: color-mix(in oklch, blue 70%, white) is 70% blue + 30% white" } ], "shape": "long" } ] } }, { "questionId": "css.color_functions__100003", "topic": "css", "subSkill": "color_functions", "difficulty": 1, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "Which statement best describes the rgb() CSS color function in its modern form?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "It accepts hue, chroma, and brightness as components in a perceptually uniform numeric color space directly" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "It accepts red, green, and blue channels with an optional slash-separated alpha value at the end" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "It accepts a packed hexadecimal triplet with an optional named transparency keyword as the trailing token" } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "It accepts only integer channel values from 0 to 255 inclusive and disallows any alpha channel argument" } ], "shape": "long" } ] } }, { "questionId": "css.color_functions__9046", "topic": "css", "subSkill": "color_functions", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What does " }, { "t": "code", "v": "color-mix()" }, { "t": "text", "v": " primarily provide in modern CSS?" } ] } ], "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Image color profile conversion at media upload time" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "Font antialiasing controls for rendered text characters" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "Automatic WCAG contrast guarantee for any output color" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "Computed color interpolation between two color inputs" } ], "shape": "short" } ] } }, { "questionId": "css.color_functions__66860", "topic": "css", "subSkill": "color_functions", "difficulty": 3, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What does " }, { "t": "code", "v": "color(display-p3 1 0.5 0)" }, { "t": "text", "v": " express that " }, { "t": "code", "v": "rgb(255, 128, 0)" }, { "t": "text", "v": " cannot?" } ] } ], "code": { "lang": "css", "code": "/* Vivid P3 orange: brighter than sRGB can show */\n.highlight { color: color(display-p3 1 0.5 0); }", "label": "color-functions.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "The same color in a different syntactic notation that still resolves to a sRGB triplet" } ], "shape": "long" }, { "id": "o2", "label": [ { "t": "text", "v": "A color value that adapts to the active dark or light theme of the surrounding document" } ], "shape": "long" }, { "id": "o3", "label": [ { "t": "text", "v": "A higher-precision color value with more decimal places of channel precision on screen" } ], "shape": "long" }, { "id": "o4", "label": [ { "t": "text", "v": "A wide-gamut color outside the sRGB range that P3 displays can render" } ], "shape": "short" } ] } }, { "questionId": "css.color_functions__66810", "topic": "css", "subSkill": "color_functions", "difficulty": 2, "stem": [ { "type": "p", "runs": [ { "t": "text", "v": "What does " }, { "t": "code", "v": "oklch(from var(--brand) calc(l + 0.1) c h)" }, { "t": "text", "v": " do?" } ] } ], "code": { "lang": "css", "code": "/* Generate palette from one base color */\n--brand: oklch(0.6 0.2 250);\n--brand-light: oklch(from var(--brand) calc(l + 0.15) c h);", "label": "color-functions.css" }, "widget": { "kind": "mcq", "options": [ { "id": "o1", "label": [ { "t": "text", "v": "Shifts the hue of " }, { "t": "code", "v": "--brand" }, { "t": "text", "v": " by 0.1 degrees around the color wheel rotation" } ], "shape": "short" }, { "id": "o2", "label": [ { "t": "text", "v": "Increases the chroma channel of " }, { "t": "code", "v": "--brand" }, { "t": "text", "v": " so the result reads as more vivid" } ], "shape": "short" }, { "id": "o3", "label": [ { "t": "text", "v": "Creates a lighter variant of " }, { "t": "code", "v": "--brand" }, { "t": "text", "v": " by increasing its lightness by 0.1" } ], "shape": "short" }, { "id": "o4", "label": [ { "t": "text", "v": "Adds 10% opacity to " }, { "t": "code", "v": "--brand" }, { "t": "text", "v": " while leaving the lightness channel unchanged" } ], "shape": "short" } ] } } ] }