INF-306 HTML5 Application Development Questions and Answers

The paragraph containing the text Tigers will display first.

False

The section p CSS refers to the parent flexbox container.

False

When the paragraphs have a width less than 200px, the last paragraph will wrap to the next line.

True

The parent flexbox container is the section element because it has display: flex;. The paragraphs inside the section become flex items. The display order is controlled by each paragraph’s inline order value, and flex items are laid out from the lowest order value to the highest. Therefore, Zoo Trip with order: 1 displays first, followed by Bears, Lions, and finally Tigers; the statement that Tigers displays first is false. The selector section p does not refer to the parent flexbox container. It targets paragraph elements inside a section, meaning it styles the flex items, not the flex container. The container itself is targeted by the section rule. The final statement is true in intent because flex-wrap: wrap; allows flex items to move to a new line when they cannot fit in the available row. Since each paragraph has min-width: 200px, items are prevented from shrinking below that minimum and wrapping occurs when available space is insufficient. References/topics: CSS flexbox, flex container, flex items, order, flex-wrap, min-width.

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

==========

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

pattern → Provides a way to set a regular expression that the value must match

placeholder → Provides a way to set default text that displays until focus is placed in an element

required → Provides a way to set form elements as mandatory

multiple → Provides a way to allow more than one file or email address in a single input

The correct matches are based on standard HTML5 form validation and input-attribute behavior. The pattern attribute defines a regular expression that the input value must satisfy before the form can be submitted successfully. It is commonly used for structured values such as phone numbers, codes, postal formats, or custom identifiers. The placeholder attribute supplies short hint text inside an input field, helping the user understand the expected value before entering data. The required attribute makes a form control mandatory; if the field is empty, constraint validation prevents successful submission. The multiple attribute allows a single input to accept more than one value, specifically for controls such as input type= " file " and input type= " email " , where users may upload multiple files or enter multiple email addresses. The maxlength attribute is not used in these matches because it limits the maximum number of characters that can be entered, but none of the listed descriptions asks for character-length restriction. References/topics: HTML5 form attributes, constraint validation, pattern, placeholder, required, multiple, input validation.

The statement draws a semicircle at the specified point. The arc() method of the Canvas 2D API adds a circular arc to the current path. Its core parameters are the center point x, y, the radius, the starting angle, the ending angle, and an optional direction flag. In this expression, x and y define the center of the arc, and r defines its radius. The start angle is 0 radians, and the end angle is Math.PI radians. Since Math.PI represents 180 degrees, the path covers exactly half of a full circle. The final argument, true, tells the canvas context to draw the arc counterclockwise rather than using the default clockwise direction; however, the angular span remains half of the circumference. The call does not draw a complete visible shape unless the path is later stroked or filled, but the geometric path being created is a semicircular arc. It is not a straight line, square, or full circle. References/topics: Canvas 2D context, arc() method, radians, path construction, drawing arcs and circles.

The correct answer is D because the pattern attribute requires the exact structure defined by the regular expression [a-zA-Z]{4}-[0-9] {2}-[0-9]{4}-[a-zA-Z] {4}. The first group, [a-zA-Z]{4}, requires exactly four alphabetic characters. The second group, [0-9] {2}, requires exactly two numeric digits. The third group, [0-9]{4}, requires exactly four numeric digits. The final group, [a-zA-Z] {4}, requires exactly four alphabetic characters. Hyphens must appear between each group. Option D, kukX-34-4938-WJDF, satisfies every part: kukX is four letters, 34 is two digits, 4938 is four digits, and WJDF is four letters. Option A fails because Uhj6 contains a digit in the final letter-only group. Option B fails because y7Ts contains a digit in the first group and A3 is not two digits. Option C fails because 23h contains a letter and breaks the two-digit group. References/topics: HTML5 input validation, pattern attribute, regular expressions, form constraint validation.

==========

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

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.

First drop-down: datalist

Second drop-down: vehicles

Third drop-down: < /datalist >

The correct element is < datalist > because the interface requires a text input that provides selectable suggestions while still allowing the user to type. The < input > element uses list= " vehicles " , so it must be connected to a < datalist > element whose id is exactly vehicles. The id cannot be vehicle, because vehicle is already the input element’s own identifier and does not match the value used by the list attribute. The < option > elements inside the datalist define the suggested values: Motorcycle, Truck, Boat, Car, and Bicycle. ul, ol, and li are list-markup elements and do not create input suggestions. select would create a fixed dropdown list, but it would not match the editable input-with-suggestions behavior shown. The closing tag must match the opening datalist element, so the final selection is < /datalist > .

The correct answer is A because the code at line 03 creates an object by calling a constructor function with the new keyword. A constructor function must be declared with the same identifier used in the new Student( " David " , " Hamilton " ) expression. Inside the constructor, instance members should be assigned through this, because this refers to the newly created object. Option A correctly initializes this.firstname, this.lastname, and this.fullname, so beststudent.fullname is available at line 04 and evaluates to " David Hamilton " . Option B is invalid JavaScript syntax because var student(firstName, lastName) is not a valid function declaration. Option C is also invalid syntax for the same reason: var Student(firstname, lastname) cannot declare a constructor. Option D uses a valid function declaration, but it assigns firstname, lastname, and fullname without this, which creates or references non-encapsulated variables rather than properties of the constructed object. References/topics: JavaScript constructor functions, new keyword, object instance properties, this, custom classes.

The correct property is clear. In CSS layout, float removes an element from the normal inline flow and positions it to the left or right, allowing following content to wrap beside it. The clear property controls whether an element may be positioned next to preceding floated elements or must be moved below them. MDN defines clear as the property that sets whether an element must be moved below floating elements that precede it. Typical values include left, right, both, and none, allowing the developer to block floats on one or both sides. display controls the formatting behavior of an element, such as block, inline, flex, or grid. float creates the floating behavior; it does not prevent other floats from appearing beside an element. position controls positioning schemes such as static, relative, absolute, fixed, or sticky. Therefore, only clear directly defines the sides where adjacent floating elements are not permitted. References/topics: CSS floats, content flow, clearing floated elements, layout positioning.

==========

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.

First drop-down: maxlength=8

Second drop-down: pattern=[A-Za-z0-9]{6,8}

Third drop-down: pattern=[0-9]{3}-[0-9] {2}-[0-9]{3}

The password field needs two constraints. maxlength=8 limits the user to a maximum of eight characters, satisfying the upper length requirement. The pattern=[A-Za-z0-9]{6,8} attribute enforces the complete password rule: only uppercase letters, lowercase letters, and digits are allowed, and the total length must be between six and eight characters. A pattern without {6,8} would not enforce the minimum length, and {1,8} would incorrectly allow passwords shorter than six characters. The Member ID field must follow the visible placeholder format 123-45-678, which is three digits, a hyphen, two digits, another hyphen, and three digits. Therefore, the correct member ID pattern is pattern=[0-9] {3}-[0-9]{2}-[0-9] {3}. The hyphens must be included literally in the pattern because the required format contains them. max=8 is not appropriate for password text length, and size=8 only controls display width, not validation.

First drop-down: " click " ,

Second drop-down: moveElement,

Third drop-down: false,

The correct event listener syntax is addEventListener(type, listener, useCapture). The first argument must be " click " because the function must run when a button is pressed. The second argument must be moveElement, not moveElement(), because the event listener expects a function reference. Using parentheses would call the function immediately while the page is loading instead of waiting for the user to press a button. The third argument controls the event phase. false means the listener runs during the bubbling phase, which is the normal behavior for button click handling. true would register the listener for the capturing phase instead. Since the code uses document.querySelectorAll( " .item " ), it selects all elements with the class item. The for loop then attaches the same click listener to each selected button individually. This ensures that all four buttons invoke moveElement when clicked.

The first image has a brown/yellow vintage tone, which indicates the sepia(100%) CSS filter. Sepia converts the image colors into a warm monochrome effect commonly associated with aged photographs. The second image appears faded and washed out while retaining the same general image content, which corresponds to opacity(30%); this makes the image mostly transparent, allowing only 30 percent opacity. The third image shows the original beach image with a visible shadow offset behind it, so the correct filter is drop-shadow(8px 8px 10px black). The first two 8px values define the horizontal and vertical shadow offset, 10px defines the blur radius, and black defines the shadow color. saturate(100%) would leave saturation at its normal level and would not visibly create a special effect. grayscale(100%) would remove color entirely and produce a black-and-white image, which is not shown in the visible rows. References/topics: CSS filter property, image effects, sepia(), opacity(), drop-shadow(), graphical enhancement with CSS.