INF-306 HTML5 Application Development Questions and Answers

The correct method is preventDefault(). In an HTML form submission workflow, the browser’s default action is to submit the form, which commonly navigates away from the current page or reloads it. Calling event.preventDefault() inside the form’s submit event handler cancels that default action, allowing the current form state to remain visible while custom validation logic displays error messages. MDN defines preventDefault() as the method that cancels the default action normally taken by the implementation for that event. The submit event is the correct event context because it fires when the form submission is triggered. defaultPrevented is only a Boolean property indicating whether cancellation has already occurred; it does not cancel anything. cancelable only reports whether an event can be canceled. abort is not the correct form-validation event method. References/topics: HTML5 form validation, custom validation messages, submit event handling, event cancellation, preserving user input.

==========

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 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.

@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 drop-down: flex boxes

Second drop-down: background-size

Third drop-down: cover

The layout changes from a stacked mobile layout to a multi-column desktop layout without relying on media queries. That behavior is commonly achieved with responsive flex boxes, where items can wrap naturally based on the available width. The header image must fill the available header area on both mobile and desktop. For that requirement, the correct CSS property is background-size, and the correct value is cover. background-size: cover scales the image so the entire header area is filled, even if part of the image is cropped. contain would preserve the full image but could leave empty space, and auto would keep the image at its natural size.

The correct segment is D because named grid-region layouts are defined with grid-template-areas. This CSS Grid property specifies named grid areas, establishes the cells in the grid, and assigns names to those cells. The syntax requires each row of the grid template to be written as a quoted string, with repeated names indicating that the named area spans multiple columns or rows. In the shown layout, heading spans the entire top row, menu occupies the left column across lower rows, content spans the central area, right occupies the right-side area, and contact spans the bottom content region. Options B and C are incorrect because named grid-area strings do not belong in grid-template-rows or grid-template-columns; those properties define track sizing, not named layout regions. Option A defines explicit column and row sizes but does not define the semantic named areas shown in the mockup. References/topics: CSS Grid, grid containers, named grid areas, grid-template-areas, responsive page layout.

First drop-down: flex boxes

Second drop-down: background-size

Third drop-down: cover

The correct layout mechanism is responsive flex boxes because the content changes from a vertical mobile arrangement to a wider multi-column layout as space becomes available. Flexbox supports this behavior naturally through flexible item sizing and wrapping, often without needing explicit media queries for every screen size. The header image must fill its visible header region on both mobile and desktop. The correct CSS property for controlling how a background image scales inside its container is background-size. The correct value is cover, because background-size: cover scales the image so that the entire container is covered while preserving the image’s aspect ratio. This prevents distortion, although some cropping can occur when the image and container have different aspect ratios. contain would preserve the full image but may leave empty space. auto would use the image’s intrinsic size and would not reliably fill the header area. background-attachment, background-clip, and background-repeat do not control image scaling.

A CSS flexible box layout is created by applying the display property to a container with either flex or inline-flex. This establishes the element as a flex container and causes its child elements to become flex items. The flex-direction property defines the direction of the main axis and accepts row, row-reverse, column, and column-reverse, allowing items to flow horizontally, vertically, or in reverse order. The align-items property controls how flex items are aligned along the cross axis, with values such as flex-start, flex-end, and center. The direction property controls writing direction and accepts ltr for left-to-right text flow or rtl for right-to-left text flow. Finally, order is applied to individual flex items and accepts an integer value, represented here as “any,” because any numeric order value can be used to rearrange item display order without changing the document source order. References/topics: CSS flexbox, flex containers, flex items, main axis, cross-axis alignment, writing direction, item ordering.

< 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 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.

==========

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: 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 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.

==========

Application Lifecycle Management organizes website creation into ordered stages that move from intent to implementation and long-term support. The Plan stage comes first because it establishes why the website exists, who the audience is, and what goals the application must satisfy. The Design stage converts those requirements into structure, including page layout, navigation, interface organization, and visual arrangement. The Develop stage is where the website is built by writing HTML markup, CSS styling, JavaScript behavior, and integrating required assets or APIs. The Test stage evaluates whether the completed website functions correctly and is usable according to requirements; this includes checking features, layout behavior, validation, and user workflows. The Deploy stage publishes the finished website to the target hosting or production environment so users can access it. Finally, the Maintain stage occurs after release and includes monitoring, updating, fixing defects, improving compatibility, and keeping content or functionality current. References/topics: application lifecycle management, planning, design, development, testing, deployment, maintenance.

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 value is column-reverse. The flex-direction property defines the main axis of a flex container and determines whether flex items are laid out horizontally, vertically, or in the reverse direction. column creates a vertical layout where items flow from the top of the container toward the bottom. If new content is appended after existing content, normal column layout places that new item later in the visual list, typically lower on the page. column-reverse preserves a vertical main axis but reverses the visual direction, so later items in the source order appear at the highest visual point of the list. This satisfies the requirement without using the order property on individual flex items. row and row-reverse are incorrect because they create horizontal layouts, not vertical lists. The reverse-direction flex values should be used deliberately because visual order can differ from DOM order, but for this exam scenario, column-reverse is the value that places newly appended vertical content at the top. References/topics: CSS flexbox, flex-direction, main axis, column layout, reverse visual flow.

==========

The correct features are saving temporary authentication tokens and passing form data to a confirmation page. sessionStorage provides a storage area scoped to the current origin and browser tab, and its data is retained only for the duration of the page session. That makes it appropriate for short-lived application state that must survive page reloads or navigation within the same workflow, but should not remain permanently available after the session ends. Passing form data from an entry page to a confirmation page is a classic session-scoped use case because the data is needed briefly during a multi-page transaction. Temporary authentication tokens can also fit the session-storage model when the token should be tied to the active browser session rather than persisted across future visits. Customized UI/UX settings usually need to persist across sessions, so localStorage or server-side user preferences are more appropriate. Game progress saved for future use is also persistent state, not session-only state. Passing data to a function is ordinary JavaScript memory usage and does not require Web Storage. References/topics: application state management, Web Storage API, sessionStorage, temporary workflow data, session-scoped tokens.

==========