WGU (KVO1) Web Development Applications Exam Questions Instant Access

Question 1

Give the following HTML code:

Which CSS property would make the corners of the div rounded?

ABorder-collapse

BBorder-style

CBorder-width

DBorder-radius

Answer : D

To make the corners of a div element rounded, the CSS property border-radius is used. This property allows you to define how rounded the corners should be by specifying a radius.

CSS border-radius Property:

Syntax:

div {

border-radius: 10px;

}

Description: The value can be in pixels (px), percentages (%), or other units. Higher values create more rounded corners.

Example:

Given HTML:

Sample

Given CSS:

div {

width: 100px;

height: 50px;

background-color: red;

border-radius: 10px;

}

MDN Web Docs - border-radius

W3C CSS Backgrounds and Borders Module Level 3

Question 2

Given the following HTML statement:

```html

Example

```

Which CSS rule hides the `

` tag when the browser's width is 600 pixels wide or less?

A```css
@media screen and (max-resolution: 600px) {
div.example {
display: none;
}
}
```

B```css
@media screen and (min-resolution: 600px) {
div.example {
display: none;
}
}
```

C```css
@media screen and (min-width: 600px) {
div.example {
display: none;
}
}
```

D```css
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
```

Answer : D

> ''The `@media` rule with `max-width: 600px` targets devices with a screen width of 600 pixels or less. The associated style `display: none;` hides the element when that condition is met.''

* MDN Web Docs: Using Media Queries

* CSS Media Queries Specification

---

Question 3

Given the following HTML and CSS code:

```html

Test

Box

```

Which CSS property should a developer specify in the `a:hover` rule set to make the red box transparent?

Afilter

Bvisibility

Cz-index

Dopacity

Answer : D

> ''The `opacity` CSS property sets the transparency level of an element. `opacity: 1` is fully opaque; `opacity: 0` is fully transparent.''

> ''To make an element gradually disappear or fully transparent on hover, use `a:hover { opacity: 0; }`.''

Options like `visibility: hidden` would remove the element from view but not create transparency.

* MDN Web Docs: CSS opacity property

* CSS Visual Formatting Model

Here are the complete and verified answers for Questions 25 through 28 using your requested format:

---

Question 4

What is an advantage that a mobile has over a mobile app?

AIt has full control of the user interface

BIt is fully functional offline.

CIt is automatically available to all users

DIt is automatically awe to access all device capabilities

Answer : C

A mobile website has the advantage of being automatically available to all users without the need for installation. Users can access it through their web browsers on any device with internet connectivity.

Accessibility: Mobile websites can be accessed by simply entering a URL in a web browser. There is no need to visit an app store and install an application.

Cross-Platform Compatibility: Mobile websites are designed to work across various devices and platforms, ensuring a broader reach.

Automatic Updates: Updates to mobile websites are immediately available to users without requiring them to download and install new versions.

MDN Web Docs on Responsive Web Design

W3C Mobile Web Application Best Practices

Question 5

Which feature was introduced in HTML5?

AAddition of CSS in the HTML file

BAdherence to strict XML syntax rules

CAbility to hyperlink to multiple web pages

DNative drag-and-drop capability

Answer : D

HTML5 introduced several new features that enhanced web development capabilities significantly. One of the notable features is the native drag-and-drop capability.

Native Drag-and-Drop Capability:

Description: HTML5 allows developers to create drag-and-drop interfaces natively using the draggable attribute and the DragEvent interface. This means elements can be dragged and dropped within a web page without requiring external JavaScript libraries.

Implementation:

Making an Element Draggable: To make an element draggable, you set the draggable attribute to true:

Drag me!

Handling Drag Events: You use event listeners for drag events such as dragstart, dragover, and drop:

document.getElementById('drag1').addEventListener('dragstart', function(event) {

event.dataTransfer.setData('text', event.target.id);

});

document.getElementById('dropzone').addEventListener('dragover', function(event) {

event.preventDefault();

});

document.getElementById('dropzone').addEventListener('drop', function(event) {

event.preventDefault();

var data = event.dataTransfer.getData('text');

event.target.appendChild(document.getElementById(data));

});

Example: This example demonstrates a simple drag-and-drop operation:

html

Copy code

Drag me!

Drop here

W3C HTML5 Specification - Drag and Drop

MDN Web Docs - HTML Drag and Drop API

HTML5 Doctor - Drag and Drop

HTML5's native drag-and-drop feature streamlines the process of creating interactive web applications by eliminating the need for third-party libraries, thus making it a powerful addition to the HTML standard.

Question 6

Which code segment places text to the right of an image whose file name is `blue.png`?

Answer : B

> ''When using `float: left` on an image, the image aligns to the left, allowing subsequent inline content (such as text) to flow on the right side of the image.''

> ''The syntax `src='images/blue.png'` assumes the image is located in the 'images' directory. A path such as `src='blue.png/images'` is incorrect and would result in a broken image.''

So, option B is correct both in terms of syntax and intended behavior.

* MDN Web Docs: float property

* W3C HTML5 Specification: element and image paths

---

Question 7

Which markup ensures that the data entered are either a five-digit ZIP code or an empty string?

A`<input class='[0-9]{5}'>`

B`<input type='number' value='5'>`

C`<input required min='5' max='5'>`

D`<input pattern='\d{5}'>`

Answer : D

> ''The `pattern` attribute in HTML allows developers to specify a regular expression against which the input field is validated.''

> `\d{5}` matches exactly five digits. When `required` is not set, the field can also be left empty --- meeting the requirement of 'five digits or empty'.

* MDN Web Docs: pattern attribute

* HTML Forms Constraint Validation

---

WGU Web Development Applications (KVO1) WGU (KVO1) Web Development Applications Exam Questions