Free IT Specialist INF-306 Practice Exam with Questions & Answers | Set: 2

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.

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

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.

==========

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 blank: < legend > Fundraising Campaign < /legend >

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

Third blank: list= " donateAmount "

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