WGU University WGU-KVO1 Online Questions & Answers

• Question 1:

  Which CSS transformation method should a developer use to reposition an element horizontally on the 2-D plane?

  A. Skewx (angle)
  B. Scale (x,y)
  C. Translatex(n)
  D. Scalex(n)
  C. Translatex(n)

  ---

  explanation:

  Explanation

  The translateX(n) method in CSS is used to move an element horizontally on the 2-D plane by a specified distance. This transformation repositions the element along the X-axis.

  translateX(n) Method: The translateX(n) function moves an element horizontally by n units. Positive values move the element to the right, while negative values move it to the left.

  Usage Example:

  element {

  transform: translateX(100px);

  }

  In this example, the element is moved 100 pixels to the right.

  Properties:

  n: This represents the distance to move the element. It can be specified in various units such as pixels (px), percentages (%), ems (em), etc.

  References:

  MDN Web Docs on transform

  W3C CSS Transforms Module Level 1

• Question 2:

  What is the effect of using the in-line validation process during user input?

  A. Increased computation on the server
  B. Larger number of errors created
  C. More successful form completion rates
  D. Slower rate of form completion
  C. More successful form completion rates

  ---

  explanation:

  Explanation

  Inline validation during user input provides immediate feedback to the user about the correctness of their input. This real-time feedback helps users correct mistakes as they go, leading to higher rates of successful form completion.

  Inline Validation: Inline validation refers to checking the validity of input data as it is entered, rather than waiting until the form is submitted. This helps users to receive immediate feedback and correct errors on the spot.

  Benefits:

  Immediate Feedback: Users can correct mistakes immediately, which helps reduce frustration and confusion.

  Increased Success Rates: By providing real-time feedback, users are more likely to complete the form correctly, resulting in higher completion rates.

  User Experience: Improves the overall user experience by making the process more interactive and user-friendly.

  References:

  Nielsen Norman Group on Inline Validation

  MDN Web Docs on Constraint Validation

• Question 3:

  A file named application, Appchache contains the following content:

  CACHE MANIFEST CACHE: default.html stylesheet.css functions.js logo.jpg

  Which attribute should a developer set to application. Appchache so the four files will be cached?

  A. The src attribute of the element
  B. The srcset attribute of the element
  C. The manifest attribute of the element
  D. The href attribute of the element
  C. The manifest attribute of the element

  ---

  explanation:

  Explanation

  To specify a cache manifest file for an HTML document, the manifest attribute must be set in the element. This attribute tells the browser to cache the files listed in the manifest for offline use.

  Cache Manifest:

  Purpose: Specifies resources that should be cached by the browser.

  Attribute: manifest is used in the tag to link the cache manifest file.

  Example:

  Given the manifest file application.appcache:

  CACHE MANIFEST

  CACHE:

  default.html

  stylesheet.css

  functions.js

  logo.jpg

  HTML with the manifest attribute:

  References:

  MDN Web Docs - Offline Web applications

  W3C HTML5 Specification - manifest attribute

• Question 4:

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

  A. It has full control of the user interface
  B. It is fully functional offline.
  C. It is automatically available to all users
  D. It is automatically awe to access all device capabilities
  C. It is automatically available to all users

  ---

  explanation:

  Explanation

  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.

  References:

  MDN Web Docs on Responsive Web Design

  W3C Mobile Web Application Best Practices

• Question 5:

  Give the following HTML code:

  Example

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

  A. Border-collapse
  B. Border-style
  C. Border-width
  D. Border-radius
  D. Border-radius

  ---

  explanation:

  Explanation

  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;

  }

  References:

  MDN Web Docs - border-radius

  W3C CSS Backgrounds and Borders Module Level 3

• Question 6:

  What should a developer correct before revalidating after a code validator reports multiple errors in code?

  A. Only CSS errors
  B. The last reported error
  C. Only JavaScript errors
  D. The first reported error
  D. The first reported error

  ---

  explanation:

  Explanation

  When using a code validator to check your HTML, CSS, or JavaScript code, it's essential to address errors in a systematic manner. The correct approach is to correct the first reported error before revalidating. This method is recommended

  because often, the first error can cause a cascade of subsequent errors or warnings. By fixing the first error, you may automatically resolve other errors that were reported later.

  Reasoning:

  Cascading Errors: The first error in the code might lead to multiple subsequent errors. Fixing it can sometimes resolve those cascading errors, reducing the overall number of errors in the next validation.

  Logical Flow: Addressing errors in the order they appear maintains a logical flow and makes debugging more manageable.

  Steps to Follow:

  Step 1: Run the code through the validator.

  Step 2: Identify the first reported error.

  Step 3: Correct the first error.

  Step 4: Revalidate the code to check if the error count has reduced or if new errors appear.

  Step 5: Repeat the process until all errors are resolved.

  References:

  W3C Markup Validation Service

  MDN Web Docs - Debugging HTML

  W3C CSS Validation Service

• Question 7:

  Given the following code:

  Blog Title

  onclick="document.getElementById('id1').style.color = 'red'">

  Click Here

  What is occurring?

  A. An event handler is tracking keyboard strokes.
  B. JavaScript is using the DOM to make a style change.
  C. In-line CSS is styling the tag.
  B. JavaScript is using the DOM to make a style change.

  ---

  explanation:

  Explanation

  The given code snippet demonstrates how JavaScript can manipulate the DOM to change the style of an element.

  Code Analysis:

  Given the HTML:

  Blog Title

  Click Here

  When the button is clicked, the JavaScript code within the onclick attribute changes the color of the h1 element to red.

  Option A: An event handler tracking keyboard strokes is incorrect because the event handler is tracking a mouse click, not keyboard strokes.

  Option B: JavaScript is using the DOM to make a style change is correct because the onclick attribute contains JavaScript code that modifies the style of the h1 element.

  Option C: In-line CSS is styling the

  tag is incorrect because the style change is done via JavaScript, not inline CSS.

  References:

  MDN Web Docs - Document.getElementById()

  W3Schools - JavaScript HTML DOM

• Question 8:

  What is the purpose of cascading style sheets (CSSs)?

  A. Structuring and describing web page content
  B. Providing functionality that was previously provided by plug-ins
  C. Changing the content of a web page dynamically
  D. Setting rules to define how page content looks when rendered
  D. Setting rules to define how page content looks when rendered

  ---

  explanation:

  Explanation

  Cascading Style Sheets (CSS) are used to control the presentation of web pages, including aspects such as layout, colors, fonts, and other visual styles. They are a cornerstone technology of the World Wide Web, along with HTML and

  JavaScript. Here's a detailed breakdown:

  Purpose of CSS: CSS is designed to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts. This separation can

  improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting, and reduce complexity and repetition in the structural content.

  Setting Visual Rules: CSS allows developers to define rules that specify how different elements of a web page should be displayed. For example, CSS rules can change text color, font size, spacing between elements, and even the overall

  layout of the web page. These rules are applied by the browser to render the web page according to the defined styles.

  Cascading Nature: The term "cascading" in CSS refers to the process of combining multiple style sheets and resolving conflicts between different CSS rules. This allows developers to use different sources of style information, which can be

  combined in a hierarchical manner. For instance, a browser style sheet, an external style sheet, and inline styles can all contribute to the final rendering of a web page.

  Benefits of CSS:

  Consistency: By using CSS, developers can ensure a consistent look and feel across multiple web pages.

  Maintainability: CSS makes it easier to update the visual presentation of a web page without altering the HTML structure. This is particularly useful for maintaining large websites.

  Reusability: CSS rules can be reused across multiple pages, reducing redundancy and making it easier to implement changes globally.

  Examples of CSS:

  css

  Copy code

  body {

  background-color: lightblue;

  }

  h1 {

  color: navy;

  margin-left: 20px;

  }

  In this example, the body element is given a light blue background color, and the h1 element is styled with a navy color and a left margin of 20 pixels.

  References:

  MDN Web Docs on CSS

  W3C CSS Specifications

• Question 9:

  Given the following markup and no style sheet:

  Which control does the input element render?

  A. Slider
  B. Button
  C. Drop-down
  D. Text
  A. Slider

  ---

  explanation:

  Explanation

  The type="range" attribute in an element renders a slider control.

  HTML Input Type range:

  Purpose: The range type is used for input fields that should contain a value from a range of numbers.

  Example:

  Given the HTML:

  This will render as a slider that the user can move to select a value within a range.

  References:

  MDN Web Docs -

  W3Schools - HTML Input Range

• Question 10:

  Given the following code:

  var a = "8";

  var b = "6";

  var c = a + b;

  console.log(c);

  What does the console display as output?

  A. 8
  B. 86
  C. 14
  B. 86

  ---

  explanation:

  Explanation

  Given the code segment:

  var a = "8";

  var b = "6";

  var c = a + b;

  console.log(c);

  This code concatenates two strings.

  var a = "8";: Variable a is assigned the string "8".

  var b = "6";: Variable b is assigned the string "6".

  var c = a + b;: The + operator concatenates the two strings, resulting in "86".

  console.log(c);: Outputs the value of c to the console.

  Output:

  The console displays "86" because it concatenates the two string values.

  References:

  MDN Web Docs - String

  W3Schools - JavaScript String