INF-306 IT Specialist HTML5 Application Development Free Practice Exam Questions (2026 Updated)

Option C is the only segment that correctly combines three required pieces: two contributing < input > controls, a named < output > control, and executable form-level logic that assigns a calculated value into that output. The HTML < output > element is specifically designed as a container for the result of a calculation or user action, and its for attribute identifies the controls that contributed to the calculation by using a space-separated list of element identifiers or associated names in the form workflow. MDN’s reference demonstrates this exact pattern: two input values are added, and the result is assigned to an < output > element whenever input changes. Option A renders literal text inside < output > but does not update it. Option B has no < output > element at all, so it cannot satisfy the requirement. Option D declares an output but lacks an oninput handler or script assignment, so the displayed value never changes. References/topics: HTML5 forms, < output > element, for attribute, form input events, calculated form results.

==========

The correct transformation functions are matrix() and skew(). CSS transformations are applied with the transform property and accept transform functions that alter an element’s rendered appearance in two-dimensional or three-dimensional space. MDN defines < transform-function > as a data type representing a transformation that can rotate, resize, distort, or move an element in 2D or 3D space. The matrix() function is valid because it defines a homogeneous two-dimensional transformation matrix, allowing translation, scaling, rotation, and skewing effects to be represented numerically in one function. The skew() function is also valid because it explicitly skews an element on the 2D plane. scroll() is not a CSS transform function; scrolling is handled through overflow behavior or scrolling APIs. move() is also not a valid CSS transform function; the standard transform function for movement is translate(). References/topics: CSS3 transforms, transform property, 2D transformation functions, matrix(), skew().

==========

The SVG image is built from three filled polygon faces, one white ellipse, and two white diagonal line segments. The three < polygon > elements define the black cube faces by connecting multiple coordinate points. The small white oval on the top face must be an < ellipse > because the markup uses cx, cy, rx, and ry; these attributes define an ellipse center point and horizontal/vertical radii. The diagonal marks on the left and right faces are straight segments, so they must use the SVG < line > element. A line is defined with starting coordinates x1, y1 and ending coordinates x2, y2. The first diagonal runs from the bottom point (200,365) to the upper-left point (50,100). The second diagonal must mirror it on the right side, so it starts at (200,365) and ends at (350,100). Therefore, the final coordinate selection is x2= " 350 " y2= " 100 " . References/topics: SVG shapes, < polygon > , < ellipse > , < line > , coordinate-based vector drawing, SVG markup construction.

The correct setting is overflow: auto;. The requirement is precise: the text must remain inside the element’s border, must not be lost, and scrollbars should not appear unless they are needed. overflow: auto satisfies all three requirements because it clips overflowing content to the element’s box and creates scrollbars only when the content actually exceeds the available space. This preserves access to all text while avoiding unnecessary horizontal or vertical scrollbars when the content fits. overflow: hidden is incorrect because it clips the overflowing text and provides no scrolling mechanism, meaning some content may become inaccessible. overflow: visible is incorrect because the extra text can flow outside the element boundary, violating the requirement to keep content inside the border. overflow: scroll is close but not optimal because it forces scrollbars even when they are not required, which directly conflicts with the instruction to avoid unneeded scrollbars. References/topics: CSS overflow, scroll containers, text containment, content clipping, layout flow.

==========

The value stored in num is the number of key-value pairs currently stored in localStorage. The localStorage object implements the Web Storage Storage interface, which stores data as named string key/value entries for the current origin. Its length property is read-only and returns the number of data items stored in that Storage object, not the size of the stored data and not the remaining capacity. MDN’s Storage reference explicitly defines length as returning the number of data items stored, and its example shows that after three items are added to localStorage, localStorage.length returns 3. Therefore, if the storage area contains five named entries, num receives 5; if it contains no entries, num receives 0. Option A is incorrect because available bytes are not exposed through length. Option B is unrelated to Web Storage. Option C is incorrect because browser storage quota or capacity is separate from the length property. References/topics: Web Storage API, localStorage, Storage.length, key-value storage, application state.

==========

First drop-down: four

Second drop-down: maxlength

Third drop-down: email, password, and phone

The form contains four user-entry input elements: email, password, confirm password, and phone. Since the requirements state that all fields must be completed, the required attribute must be applied to all four inputs. The password field must prevent entries longer than eight characters, so the correct length-control attribute is maxlength, not max; max applies to numeric/date-style value ranges, while maxlength limits character count in text-style inputs. The phone field also benefits from maxlength because its placeholder format has a fixed visible structure. Finally, completed pattern attributes are needed for email, password, and phone because each has a required format rule: the email must match the placeholder-style address format, the password must use only letters and numbers, and the phone number must follow the placeholder format such as 123-45-678. The title attribute should accompany these patterns to produce meaningful browser validation messages.

The correct selections are C and D because both declare a function as a property of an object, which is the defining characteristic of a JavaScript method. MDN describes a method as a function associated with an object, or more specifically, an object property whose value is a function. In option C, Score: function() { ... } is object-literal syntax. It defines a property named Score whose value is an executable function, so that property behaves as a method of the object. In option D, this.Score = function() { ... } assigns a function to the Score property of the current object instance. MDN notes that this is commonly used inside object methods to refer to the object the method is attached to. Option B does not declare a method; it calls Score() and assigns the return value. Option A is only an incomplete or ordinary variable declaration and does not create a function-valued object property. References/topics: JavaScript objects, custom classes, methods, function expressions, this.

First blank: < svg width= " 200 " height= " 200 " >

Second blank: < rect width= " 200 " height= " 200 "

Third blank: < circle cx= " 100 " cy= " 100 " r= " 50 "

Fourth blank: < /svg >

The correct solution uses SVG because SVG graphics are vector-based and can scale without pixel distortion when the page or viewport changes. A < canvas > element would require script-based drawing logic, which violates the requirement that JavaScript must not be required. An < img > or < picture > element can display an image, but those options do not define the rectangle and circle directly in markup. The outer container must therefore be < svg width= " 200 " height= " 200 " > . The blue square is created with < rect width= " 200 " height= " 200 " fill= " blue " / > , which produces a rectangle matching the required 200-by-200 dimensions. The centered white circle must use SVG circle geometry: cx= " 100 " and cy= " 100 " place the center at the midpoint of the 200-by-200 square, and r= " 50 " creates the required 50-pixel radius. The final closing tag must be < /svg > .

Club Points indicator → < meter >

Order Status group title → < legend >

Choose delivery frequency options → < datalist >

Shipping Information group box → < fieldset >

Displayed shipping information → < output >

The correct semantic elements are selected according to the role each visible form component performs. The Club Points visual indicator represents a scalar measurement within a known range, so it corresponds to < meter > . The bordered Order Status section is a grouped form region, and the caption displayed on the border is a < legend > , which labels a fieldset-style group. The delivery frequency control shows an editable input with selectable predefined values, which is the purpose of < datalist > : it supplies suggested options for an associated input without forcing the user to choose only from the list. The Shipping Information section is visually and semantically a grouped set of related form information, so the surrounding grouping element is < fieldset > . The displayed shipping address is generated or presented as result-style information rather than typed directly in that location, which matches < output > . fieldset groups related controls, legend labels that group, meter displays a bounded measurement, datalist provides input suggestions, and output displays calculated or resulting information.

First blank: display: grid;

Second blank: grid-template-columns: auto auto auto auto;

Third blank: grid-gap: 10px;

The layout shown is a CSS Grid layout with eight items arranged into four equal-width columns and two rows. The first required declaration is display: grid;, which turns the .grid-container element into a grid container. The second declaration is grid-template-columns: auto auto auto auto;, which defines four columns, matching the four visible boxes in each row: Mickey, Minnie, Luna, and George on the first row, then Bilbo, Bella, Madeline, and Groucho on the second row. The third declaration is grid-gap: 10px;, which creates spacing between the grid cells, matching the visible blue gaps around each item. The background-color: #336699; creates the blue container background, while padding: 10px; adds space around the outer edge of the grid. The child rule .grid-container > div styles each grid item with a light background, centered text, padding, and larger font size.

The correct answers are A and C because background-size: contain and background-size: cover are the CSS values that scale a background image in response to the size of the element or viewport. contain scales the background image as large as possible while preserving the entire image inside the background area. This prevents cropping and maintains the image’s aspect ratio, although empty space may appear if the container and image proportions differ. cover also preserves the aspect ratio, but scales the image until the entire background area is filled; this may crop part of the image, but it prevents empty space. Both values are commonly used in responsive design because the image automatically recalculates its rendered size as the page or element changes dimensions. initial resets the property to its default behavior and does not intentionally create responsive scaling. auto uses the image’s intrinsic dimensions or proportional automatic sizing, so it does not reliably adjust the graphic to different screen sizes in the way required. References/topics: responsive design, CSS background images, background-size, contain, cover, viewport-based scaling.

==========

< input id= " phone "

pattern= " [0-9]{10} "

placeholder= " 0000000000 " >

The correct first attribute is pattern because the requirement is to validate the entered value against a specific format: exactly ten numeric digits and no symbols. The regular expression [0-9]{10} means that only digits from 0 through 9 are allowed, and exactly ten of them must be entered. This prevents values such as 123-456-7890, (123)4567890, or 123 456 7890 because those contain symbols or spaces. The correct second attribute is placeholder, not value, because the input should initially display all zeroes but that displayed text must not be submitted or stored with the form. A placeholder is hint text shown when the field is empty; it disappears when the user enters real data and is not submitted as the control’s value. By contrast, value= " 0000000000 " would actually prepopulate the input and could be submitted if the user did not change it. The required option is not selected because the question focuses on format validation and display hint behavior, not mandatory completion. References/topics: HTML5 form validation, pattern, regular expressions, placeholder, input constraint validation.

First drop-down: var xhr = new XMLHttpRequest();

Second drop-down: if(xhr.status===200){

Third drop-down: responseObject = JSON.parse(xhr.responseText);

The script must first create an XMLHttpRequest object, so the correct first selection is var xhr = new XMLHttpRequest();. This object performs the asynchronous request for menu.json. After the request finishes, the onload callback executes. The response should be processed only when the request succeeds, so the correct status check is if(xhr.status===200){; HTTP status 200 means the file was successfully retrieved. Status codes 403, 404, and 500 represent forbidden access, missing resource, and server error conditions, so they are not appropriate for normal JSON processing. The JSON file is returned as plain text through xhr.responseText, so it must be converted into a JavaScript object with JSON.parse(xhr.responseText). Once parsed, the code can access responseObject.menu[i].Entree, Price, and Description inside the loop and build the display output. responseXML is incorrect because the source file is JSON, not XML.

The correct coordinate is 50,50. In an HTML5 canvas, the coordinate system begins at the upper-left corner of the canvas. The x-coordinate increases as you move to the right, and the y-coordinate increases as you move downward. Therefore, 0,0 represents the top-left corner of the entire white canvas area. In the displayed image, the filled black square is not positioned at the top-left edge, top-center, or left-center of the canvas. Instead, its upper-left corner is offset both horizontally and vertically from the origin. Among the available choices, 50,50 is the only coordinate that moves the square 50 units to the right and 50 units down from the canvas origin. This matches the visual placement of the filled square inside the white canvas. Option A would place the square at the canvas origin. Option B would place it along the left side, halfway down. Option C would place it along the top edge, halfway across. References/topics: HTML5 canvas coordinate system, x/y positioning, drawing rectangles, fillRect(x, y, width, height).

The correct element is animateTransform. In SVG, rotation is not produced by drawing a different shape; it is produced by applying a transformation to an existing graphical element, such as a < rect > representing a square. The < animateTransform > element is specifically designed to animate the transform attribute of a target SVG element, and its supported transformation types include translation, scaling, rotation, and skewing. Therefore, to rotate a square, the square would normally be defined with a shape element such as < rect > , and an < animateTransform > child or associated animation would specify attributeName= " transform " and type= " rotate " . animateMotion is incorrect because it moves an element along a motion path rather than rotating the element itself. circle is a shape element, not an animation mechanism. path defines arbitrary vector geometry, but it does not by itself animate or rotate another object. References/topics: SVG graphics, SVG transformations, animation elements, transform attribute, rotation animation.

==========

The correct values are scroll and auto. The CSS overflow property controls what happens when content is too large to fit inside an element’s box. MDN describes overflow as setting the desired behavior when content does not fit inside the element’s padding box. The value overflow: scroll creates a scroll container and displays scrollbars so overflowing content can be reached, even when the scrollbar may not be strictly needed in some rendering environments. The value overflow: auto also creates scrolling behavior when content overflows, but it is conditional: scrollbars appear only when the content exceeds the available box size. hidden is incorrect because it clips overflowing content and hides the excess rather than exposing it through a scrollbar. visible is also incorrect because it allows overflow to render outside the element box and does not create a scroll container. Therefore, when the question asks which settings produce a scrollbar if content overflows, the precise answers are scroll and auto. References/topics: CSS overflow, scroll containers, overflow clipping, automatic scrollbars, layout flow.

The correct 2D transformation functions are matrix() and skew(). CSS transformations are applied through the transform property, which accepts transform functions that can move, rotate, scale, skew, or otherwise alter an element visually in two-dimensional or three-dimensional space. MDN describes the < transform-function > type as representing transformations that affect an element’s appearance and can operate in 2D or 3D space. The matrix() function is valid because it defines a homogeneous two-dimensional transformation matrix, allowing multiple transform effects to be represented in a single function. The skew() function is also valid because it distorts an element along the 2D plane. move() is not a CSS transform function; the standard movement function is translate(). scroll() is not a transform function; scrolling is controlled through overflow and scroll APIs. zoom() is not a CSS3 2D transform function. References/topics: CSS3 transforms, transform property, 2D transformation functions, matrix(), skew().

==========

First blank: class Dog extends Pet {

Second blank: super(name, breed);

The correct syntax for deriving one JavaScript class from another is extends, so the derived class declaration must be class Dog extends Pet {. This creates Dog as a subclass of Pet, allowing Dog instances to inherit members defined by the Pet constructor, including name, breed, and the show() function assigned inside the parent constructor. Inside a derived class constructor, super() must be called before using this. The call super(name, breed); invokes the parent Pet constructor and passes the values required to initialize the inherited name and breed properties. Pet(name, breed); is incorrect because a class constructor cannot be invoked like a normal function. Pet.constructor(name, breed); is also incorrect because it does not call the parent constructor for the current instance. After super() runs, the Dog constructor can safely assign subclass-specific properties such as price and gender. References/topics: JavaScript classes, inheritance, extends, derived constructors, super(), custom class creation.

The correct CSS is option B because the SVG filter is declared inside < defs > with the identifier id= " f2 " . To apply an SVG filter from CSS, the filter property must reference that filter by URL syntax using the filter’s ID selector: filter: url( " #f2 " );. The text selector targets the SVG < text > element, so the rule applies the defined filter effect to the visible text content, Blur Me!. The filter itself uses < feOffset > , < feGaussianBlur > , and < feBlend > to create the blurred visual effect. Option A is incorrect because filter: #blur; is not valid filter-reference syntax and does not match the actual filter ID. Option C is incorrect because fill controls paint color, not filter application, and blur is not a valid fill value. Option D uses url(blur), which does not reference the defined f2 filter and omits the required ID reference. References/topics: SVG filters, < filter > , filter IDs, CSS filter: url(#id), SVG < text > styling.