IT Specialist INF-306 HTML5 Application Development Exam Practice Test

The correct setting is overflow: auto;. The CSS overflow property controls how content behaves when it does not fit inside an element’s padding box. The requirement has three parts: keep the text inside the element’s border, avoid unnecessary scrollbars, and avoid losing text. overflow: hidden clips overflowing content and does not provide a user-visible scrollbar, so text can become inaccessible. overflow: visible allows excess content to render outside the element’s box, failing the containment requirement. overflow: scroll makes the element scrollable, but user agents display scrollbars whether or not content is actually overflowing, which violates the requirement to avoid unneeded scrollbars. MDN describes overflow: auto as clipping overflow content at the padding box while allowing it to be scrolled into view, with scrollbars displayed only when content is actually overflowing. This makes auto the precise choice for a controlled text container. References/topics: CSS overflow, scroll containers, content clipping, layout flow, preserving overflowing content.

==========

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 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 box: minlength

Second box: maxlength

Third box: required

The correct validation attributes are minlength, maxlength, and required. The input must accept a category abbreviation that is either two or three characters long. The minlength= " 2 " attribute enforces the lower boundary by preventing submission when the entered text contains fewer than two characters. The maxlength= " 3 " attribute enforces the upper boundary by preventing the user from entering more than three characters into the field. Since the question states that the input is mandatory, the required attribute must also be included. required is a Boolean validation attribute, so it does not need a value; its presence alone makes the field required before the form can be submitted. Together, these attributes configure basic HTML5 constraint validation directly in markup without requiring JavaScript. The completed input therefore requires a value, rejects values shorter than two characters, and limits the value to no more than three characters. References/topics: HTML5 form validation, minlength, maxlength, required, text input constraints, mandatory form fields.

Determine requirements → Develop code → Test the app

↓

Monitor performance ← Deploy the app

The correct application lifecycle sequence begins with Determine requirements because the team must first define what the app must accomplish, who will use it, and which functional and technical expectations must be satisfied. Since the question states that the design is already provided, the next implementation step is Develop code, where the HTML, CSS, JavaScript, assets, APIs, and app logic are created according to the approved design and requirements. After development, the app must be validated through Test the app. Testing confirms that the app works correctly, meets requirements, handles user input properly, and does not contain functional defects that would block release. Once testing is complete, the app can be released through Deploy the app, which publishes it to the target environment or makes it available to users. The final operational stage is Monitor performance, where the released app is observed, maintained, updated, and improved based on performance, reliability, defects, and user behavior. References/topics: application lifecycle management, requirements, development, testing, deployment, maintenance.

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.

The correct method is preventDefault(). During form submission, the browser’s default behavior is to submit the form to the target URL, which may navigate away from the current page or reload it. If the submitted data is invalid and the application must display custom error messages while preserving the entered values, the submit event handler should call event.preventDefault(). This cancels the default submit action, allowing the page to remain in place and the script to display validation feedback next to the relevant form controls. defaultPrevented is not the method to use; it is only a Boolean property that indicates whether preventDefault() has already been called. cancelable is also only informational; it tells whether the event’s default behavior can be canceled. abort is unrelated to form validation and does not provide the required control over form submission. References/topics: HTML5 form validation, custom validation messages, submit event, event cancellation, preserving form data.

Line 26 drop-down: 5

Line 29 drop-down: 8

Line 32 drop-down: 6

The groceries array starts empty. Line 24 runs fruits.shift(), which removes " Apples " from the fruits array. This leaves four fruits, but it does not add anything to groceries. Line 25 calls addVegetables(), which executes groceries = groceries.concat(vegetables);. Since vegetables contains five items, groceries contains 5 items at line 26. Line 27 then executes groceries.shift(), removing the first item from groceries and reducing the count to 4. Line 28 calls addFruits(), which appends the four remaining fruits, increasing the array count to 8; therefore, line 29 is 8. Line 30 executes groceries.pop(), removing the last item and reducing the count to 7. Line 31 executes groceries.shift(), removing the first item and reducing the count to 6. Therefore, line 32 is 6. The addOther() function on line 33 has not executed yet at the line 32 breakpoint. References/topics: JavaScript arrays, debugging breakpoints, concat(), shift(), pop(), push(), array item counting.

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.

First blank: < legend > Fundraising Campaign < /legend >

Second blank: < progress id= " donate " value= " 30 " max= " 100 " > < /progress >

Third blank: list= " donateAmount "

@media screen and (max-width: 480px) {

/* style rules go here */

}

The correct media query is @media screen and (max-width: 480px) {. The requirement says the style rule must apply to screen devices with a width of 480 pixels or less. In CSS media queries, screen identifies the media type, and (max-width: 480px) defines the upper viewport-width limit. This means the enclosed CSS rules apply when the viewport is 480 pixels wide or any smaller value, which is the standard mobile breakpoint behavior. @media screen and (width: 480px) is incorrect because it applies only when the viewport is exactly 480 pixels wide, not below it. @media screen display and (width: 480px) is invalid syntax because display is not used that way in a media query. @media screen-width: 480px is also invalid because it does not follow the required @media media-type and (feature: value) pattern. References/topics: responsive design, CSS media queries, @media, screen media type, max-width, mobile breakpoint styling.

First blank: img

Second blank: filter:

Third blank: grayscale(100%)

Fourth blank: blur(8px)

The correct CSS selector is img because the requirement applies the visual effect to gallery images. The correct property is filter:, not transform:, because CSS filters modify the rendered appearance of an element using image-processing effects such as blur, grayscale, opacity, brightness, contrast, and shadows. The filtered sample appears blurred and colorless, so the appropriate filter functions are grayscale(100%) and blur(8px). grayscale(100%) removes all color from the image, converting it to a black-and-white rendering. blur(8px) obscures visual details, making the image difficult to recognize until the protected or authorized state changes the styling. The filter keyword without a colon is not a valid CSS declaration in this context. brightness(40%) and opacity(50%) could further obscure an image, but they are not required to reproduce the shown filtered result. The final declaration is therefore filter: grayscale(100%) blur(8px);.

The correct testing tasks are to verify application functionality, find defects, and ensure the app meets design specifications. Testing occurs after development produces a build and before acceptance or deployment decisions are made. Its purpose is to compare the implemented application against expected behavior, requirements, and design specifications. Option A is correct because functional testing confirms that user workflows, controls, validation rules, scripts, and page interactions work as intended. Option C is correct because defect discovery is a core testing responsibility; testers identify failures, inconsistencies, regressions, and unexpected behavior so the development team can correct them. Option D is correct because the app must be evaluated against the documented design, including layout, navigation, responsiveness, accessibility expectations, and feature behavior. Asking customers to submit bugs or feature requests is a feedback or product-management activity, not the primary task of an internal test cycle immediately following a development release. Checking syntax errors is primarily handled during development, linting, editing, or build processing; a released test build should already parse and execute sufficiently for functional testing. References/topics: application lifecycle management, test phase, defect detection, functional testing, design specification validation.

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.

==========

First drop-down: navigator.geolocation

Second drop-down: navigator.geolocation

Third drop-down: getCurrentPosition(showLocation)

The correct API object is navigator.geolocation because browser-based geographic location is exposed through the Geolocation API, not through window.location. window.location represents the current page URL and navigation state; it does not provide latitude or longitude. The first selection checks whether the browser supports geolocation by evaluating navigator.geolocation. Inside the block, the same object must be used to request the user’s current position. The correct method is getCurrentPosition(showLocation), which requests the device’s current location and passes a position object to the callback function when the location is available. The callback then reads position.coords.latitude and position.coords.longitude and displays those values with alert(). The alternatives that pass window.location are incorrect because they provide page-location information rather than geographic coordinates. The alternatives that call showLocation(...) directly are also incorrect because the browser must first retrieve the actual position object. References/topics: Geolocation API, navigator.geolocation, getCurrentPosition(), callback functions, latitude and longitude.

< button onclick= " process() " > Process < /button >

< script >

function process()

{

}

< /script >

The button must use the onclick attribute because the required action occurs when the user clicks the button. The plain word click is an event name used in JavaScript event listeners, but it is not the correct inline HTML event-handler attribute. The value of the onclick attribute must be process() because the function must actually be invoked when the click event occurs. Using process alone only references the function name and does not call it in this inline markup context. this.process would attempt to reference a property on the current element, and javascript:process is not the correct handler expression. Inside the < script > block, the correct function declaration is function process(). This defines the named function that the button’s onclick attribute calls. The final structure therefore connects the button event directly to the script function: when the user clicks Process, the browser runs process().

The correct answer is D because the layout shown is a named-area CSS Grid layout. The mockup contains five semantic regions: the top header area for the logo and page title, a left-side menu, a central main content area, a right-side additional content area, and a bottom copyright/contact area. In CSS Grid, this type of visual structure is defined with grid-template-areas, where each quoted string represents one grid row and each repeated name represents how far that area spans across columns. In option D, heading spans the full top row, menu occupies the left column across the lower rows, content fills the main center region, right fills the additional content region, and contact spans the bottom row to the right of the menu. Option A only defines row and column sizes and does not name the five content areas. Options B and C are invalid for this purpose because named layout strings do not belong in grid-template-rows or grid-template-columns. References/topics: CSS Grid, grid containers, display: grid, named grid areas, grid-template-areas, page layout construction.

The correct markup uses the HTML5 < datalist > element because the interface shows a text input with a drop-down list of suggested values. The < input > element has list= " vehicles " , which means it must be connected to a < datalist > whose id value is exactly vehicles. This relationship is essential: the list attribute on the input references the id of the datalist that supplies the available options. Each < option > element inside the datalist defines one suggested value: Motorcycle, Truck, Boat, Car, and Bicycle. Unlike a traditional < select > element, a datalist does not restrict the user only to the listed choices; the user can either select an option with the mouse or type directly into the input field. That behavior matches the displayed interface, where the control appears as an editable text box with suggestions. The final closing tag must be < /datalist > because the option elements belong to the datalist container. References/topics: HTML5 forms, < input list > , < datalist > , option elements, selectable typed input.

First blank: type

Second blank: pattern

Third blank: required

The first blank must be type because the question requires the input data type to be text, producing type= " text " . The second blank must be pattern because [0-9]{5} is a regular expression that permits exactly five numeric digits. The third blank must be required because the postal code field must be mandatory before the form can be submitted.

The valid entry is A, assuming the OCR-corrupted option represents the intended secret-code format: four letters, a hyphen, two digits, a hyphen, four digits, a hyphen, and four letters. The HTML pattern attribute defines a regular expression that an input value must satisfy during constraint validation. MDN specifies that pattern is used to define a regular expression the input value must match. In the intended pattern, the first group must contain exactly four alphabetic characters, the second group exactly two numeric digits, the third group exactly four numeric digits, and the final group exactly four alphabetic characters. Option A satisfies that structure: kukX is four letters, 04 is two digits, 4938 is four digits, and WJDF is four letters. Option B fails because the final group Uhj6 contains a digit. Option C fails because the first group includes a digit and the digit grouping/hyphen structure is wrong. Option D fails because 23h contains a letter where only digits are allowed. References/topics: HTML5 form validation, pattern attribute, regular-expression validation, text input constraints.

==========