WEB-DEVELOPMENT-APPLICATIONS Practice Questions

The parseFloat() function is the correct choice because it parses a string argument and returns a floating-point number. Unlike parseInt(), it recognizes and preserves the decimal part of a number represented in a string. In this case, parseFloat("20.39") will correctly evaluate to the number 20.39. This function stops parsing when it encounters a character that is not part of the number format, which makes it robust for this specific task.

A. isNaN is a function that checks if a value is "Not-a-Number"; it does not perform any type conversion.

B. parseInt converts a string to an integer, truncating any decimal places. It would incorrectly return 20.

D. toUpperCase is a string method that converts a string to uppercase letters; it is irrelevant for number conversion.

- Mozilla Developer Network (MDN). (2023). parseFloat(). Global Objects. Retrieved from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/parseFloat (See the main description and first example).

- Haverbeke, M. (2018). Eloquent JavaScript (3rd ed.). No Starch Press. Chapter 3: Functions, Section "Optional Arguments". (Discusses number conversion functions).

- MIT OpenCourseWare. (2016). 6.170 Software Studio, Lecture 10: JavaScript. Retrieved from https://ocw.mit.edu/courses/6-170-software-studio-spring-2016/resources/mit6170s16lec10/ (Covers JavaScript's type system and conversion functions).

The placeholder attribute is used on form input elements like and to display a short hint, sample value, or brief description of the expected format. This text is displayed within the input field itself when it is empty and has not received focus. It is a user-friendly way to provide guidance without setting an actual value for the input. The placeholder text disappears as soon as the user starts typing in the field.</p></div> </div> <div class="ce-explanation-section"> <div class="ce-label">Why Incorrect</div> <div class="ce-explanation-text"><p>A. Default: default is not a standard HTML attribute for input fields. The value attribute is used to set a default value.</p><p>B. For: The for attribute is used on a <label> element to programmatically associate it with a specific input field.</p><p>D. name: The name attribute provides a name for the input, which is sent along with its value during form submission.</p></div> </div> <div class="ce-explanation-section"> <div class="ce-label">References</div> <div class="ce-explanation-text"><p>1. Mozilla Developer Network (MDN). (2023). : The Input (Form Input) element. In MDN Web Docs. Retrieved from <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input." target="_blank" rel="noopener nofollow">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input.</a> See the section on the placeholder attribute.</p><p>2. WHATWG. (2024). HTML Living Standard. Section 4.10.5.2.4. The placeholder attribute. Retrieved from <a href="https://html.spec.whatwg.org/multipage/input.html#the-placeholder-attribute." target="_blank" rel="noopener nofollow">https://html.spec.whatwg.org/multipage/input.html#the-placeholder-attribute.</a></p><p>3. Vanderbilt University, Web Communications. (n.d.). HTML Forms. In Web Design & Development Courseware. Retrieved from <a href="https://www.vanderbilt.edu/web-communications/web-training/web-design-and-development.php." target="_blank" rel="noopener nofollow">https://www.vanderbilt.edu/web-communications/web-training/web-design-and-development.php.</a> (General university courseware discussing form attributes).</p></div> </div> </div> </article> </div> <div class="ce-q-wrapper"> <article id="q-3" class="ce-q-card" aria-labelledby="ce-question-3" data-ce-q='{"id":3,"correct":["B"],"type":"mcq","dd_payload":null,"content":{"explanation":"<p>The provided CSS (p::first-line { text-transform: uppercase; }) uses the ::first-line pseudo-element. This is a standard CSS feature that is interpreted and applied by the client's web browser during the rendering process. The browser's rendering engine calculates which text constitutes the \"first line\" based on layout and viewport size, and then applies the specified text-transform style. This entire operation happens client-side, within the browser, not on the server or a canvas element.<\/p>","why_incorrect":"<p>A. Rendering to the canvas: This CSS rule styles standard HTML text content, not graphics drawn on an HTML element.<\/p><p>C. Processing on a server: CSS is a client-side technology. The server delivers the CSS file, but the browser is responsible for parsing and applying the styles.<\/p>","references":"<p>1. Mozilla Developer Network (MDN). (2023). ::first-line - CSS: Cascading Style Sheets. Retrieved from <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/::first-line\" target=\"_blank\" rel=\"noopener nofollow\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/::first-line<\/a><\/p><p>2. W3C. (2022). CSS Pseudo-Elements Module Level 4. Section 2.1, \"Typographic Pseudo-elements: ::first-line and ::first-letter\". W3C Candidate Recommendation Draft. Retrieved from <a href=\"https:\/\/www.w3.org\/TR\/css-pseudo-4\/#first-line-pseudo\" target=\"_blank\" rel=\"noopener nofollow\">https:\/\/www.w3.org\/TR\/css-pseudo-4\/#first-line-pseudo<\/a><\/p>","answer_text":"B"}}'> <div class="ce-q-header"> <div class="ce-q-number" aria-hidden="true">3</div> <div class="ce-q-text" id="ce-question-3">Given the following CSS: <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="WGU Web Development Applications (KVO1) question" class="ce-embedded-img" data-lazy-src="https://kxbjsyuhceggsyvxdkof.supabase.co/storage/v1/object/public/file-images/WGU_Web_Development_Applications_(KVO1)/page_27_img_1.jpg" /><noscript><img decoding="async" src="https://kxbjsyuhceggsyvxdkof.supabase.co/storage/v1/object/public/file-images/WGU_Web_Development_Applications_(KVO1)/page_27_img_1.jpg" alt="WGU Web Development Applications (KVO1) question" loading="lazy" class="ce-embedded-img" /></noscript> What is being configured?</div> </div> <fieldset class="ce-options-fieldset"> <legend class="ce-label">Answer options</legend> <div class="ce-options-list"> <button type="button" class="ce-option-item" data-key="A" aria-pressed="false"> <b aria-hidden="true">A:</b> <span>Rendering to the canvas</span> </button> <button type="button" class="ce-option-item" data-key="B" aria-pressed="false"> <b aria-hidden="true">B:</b> <span>Processing in the browser</span> </button> <button type="button" class="ce-option-item" data-key="C" aria-pressed="false"> <b aria-hidden="true">C:</b> <span>Processing on a server</span> </button> </div> </fieldset> <div class="ce-actions"> <button type="button" class="ce-primary-btn ce-reveal-trigger" aria-expanded="false" aria-controls="ce-answer-3"> <svg class="ce-icon" viewBox="0 0 15 15" fill="none"><path d="M7.5 11C4.79322 11 2.49241 9.2993 1.05532 7.50001C2.49241 5.70072 4.79322 4 7.5 4C10.2068 4 12.5076 5.70072 13.9447 7.50001C12.5076 9.2993 10.2068 11 7.5 11ZM7.5 3C4.33776 3 1.68988 5.00373 0.160645 6.88398L0.116041 6.94165C-0.0386803 7.14378 -0.0386803 7.85624 0.116041 8.05837L0.160645 8.11604C1.68988 9.99629 4.33776 12 7.5 12C10.6622 12 13.3101 9.99629 14.8394 8.11604L14.884 8.05837C15.0387 7.85624 15.0387 7.14378 14.884 6.94165L14.8394 6.88398C13.3101 5.00373 10.6622 3 7.5 3ZM7.5 9C6.40237 9 5.50655 8.11289 5.5 7.00001C5.50655 5.88713 6.40237 5.00001 7.5 5.00001C8.59763 5.00001 9.49345 5.88713 9.5 7.00001C9.49345 8.11289 8.59763 9 7.5 9Z" fill="currentColor"></path></svg> <span>Show Answer</span> </button> <button type="button" class="ce-ghost-btn ce-discuss-btn" data-ce-discuss-toggle aria-haspopup="dialog" aria-controls="ce-discussion-3"> <svg class="ce-icon" viewBox="0 0 24 24" fill="none"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> <span>View Discussion</span> <span class="ce-discuss-count" aria-hidden="true">0</span> </button> </div> <section id="ce-discussion-3" class="ce-discuss-wrap" hidden data-ce-qid="2088196865" role="dialog" aria-modal="true" aria-labelledby="ce-discuss-title-3" tabindex="-1"> <div class="ce-discuss-head"> <h2 class="ce-discuss-title" id="ce-discuss-title-3">Question 3 discussion</h2> <button type="button" class="ce-discuss-modal-close" data-ce-discuss-close aria-label="Close discussion"> <svg width="18" height="18" viewBox="0 0 15 15" fill="none"><path d="M4 4l7 7m0-7l-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg> </button> </div> <div class="ce-discuss-toolbar"> <button type="button" class="ce-discuss-sort active" data-ce-discuss-sort="top">Most voted</button> <button type="button" class="ce-discuss-sort" data-ce-discuss-sort="new">Newest</button> </div> <div class="ce-discuss-list" role="region" aria-live="polite" aria-atomic="false" aria-label="Discussion posts"> <div class="ce-discuss-empty">No comments yet. Be the first to comment.</div> </div> <div class="ce-discuss-pager"> <!-- Pager is rendered by JS after fetching the thread. --> </div> <div class="ce-discuss-form"> <label class="cm-sr-only" for="ce-discuss-name-3">Your name</label> <input id="ce-discuss-name-3" type="text" class="ce-discuss-name" placeholder="Your name (required)" autocomplete="name" maxlength="80" required> <label class="cm-sr-only" for="ce-discuss-text-3">Add a comment</label> <textarea id="ce-discuss-text-3" class="ce-discuss-text" rows="3" placeholder="Add a comment..." maxlength="5000">

The element is the correct HTML tag for attaching external resources, most commonly an external CSS stylesheet. When used for this purpose, it is placed within the document's section. The rel attribute must be set to "stylesheet", and the href attribute must contain the URL of the CSS file to be linked. This method is the standard practice for applying external styles to a web page.

A. <style> is used to embed CSS rules directly within an HTML document (internal CSS), not to link an external file.

C. <script> is used to embed or reference executable scripts, typically JavaScript, not CSS stylesheets.

D. provides metadata about the HTML document, such as character set or viewport settings, but does not link external resources.

- Mozilla Developer Network (MDN). (n.d.). : The External Resource Link element. In HTML: HyperText Markup Language. Retrieved from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link. (See "Linking to a stylesheet" section).

- WHATWG. (n.d.). 4.2.4 The link element. In HTML Living Standard. Retrieved from https://html.spec.whatwg.org/multipage/semantics.html#the-link-element. (See example under "4.2.4.2. Processing the rel attribute").

- W3C. (2011, May 25). CSS basics. In CSS Snapshot 2010. Retrieved from https://www.w3.org/TR/CSS2/intro.html#q1.

The HTML element is used to create an interactive control that provides a menu of options, which is typically rendered as a drop-down list. This element acts as a container for one or more elements, each of which specifies a value that can be selected by the user. The tag itself creates the main drop-down component that the user interacts with.

A. defines an individual item within a list but does not create the drop-down list container itself.

B.

- Mozilla Developer Network (MDN). (n.d.). : The HTML Select element. In HTML: HyperText Markup Language. Retrieved from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select. (See opening paragraph).

- WHATWG. (n.d.). 4.10.7 The select element. In HTML Living Standard. Retrieved from https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element.

- W3C. (2014, October 28). 4.10.7 The select element. In HTML5: A vocabulary and associated APIs for HTML and XHTML. Retrieved from https://www.w3.org/TR/html5/forms.html#the-select-element.

The window.prompt() method displays a dialog box with an optional message that prompts the user to input text. It is a built-in browser method that provides a simple way to get text input from a user. The method returns the string of text entered by the user, or the value null if the user cancels the dialog.

A. Write: The document.write() method writes HTML expressions or JavaScript code to a document; it does not solicit user input.

B. Confirm: The window.confirm() method displays a dialog with a message and OK/Cancel buttons, returning a boolean value, not text.

D. alert: The window.alert() method displays a dialog box with a message and an OK button to communicate information to the user, not to receive input.

1. Mozilla Developer Network (MDN). window.prompt(). "The window.prompt() method displays a dialog with an optional message prompting the user to input some text." Retrieved from https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt

2. WHATWG. HTML Living Standard. Section 8.1.5.3, "Simple dialogs," defines the behavior of alert, confirm, and prompt. Retrieved from https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#simple-dialogs

3. Flanagan, D. (2020). JavaScript: The Definitive Guide (7th ed.). O'Reilly Media. Chapter 15, "The Window Object," section on "Dialog Boxes."

The provided markup is . In HTML, an element with its type attribute set to "range" is used to specify a numeric input where the exact value is not critical. Web browsers render this element as a slider control. The user can move the slider's thumb along the track to select a value within a defined range (which defaults to 0-100 if not specified).

B. A button is rendered using type="button", type="submit", or the element, not type="range".

C. A drop-down list is created using the and elements, not an element.

D. A text input field is rendered using type="text" or when the type attribute is omitted, not type="range".

1. Mozilla Developer Network (MDN). (2023). . In MDN Web Docs. Retrieved from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range. (The main description states it is "displayed as a slider").

2. World Wide Web Consortium (W3C). (2023). HTML Living Standard, Section 4.10.7.1.13 Range state (type=range). Retrieved from https://html.spec.whatwg.org/multipage/input.html#range-state-(type=range). (This section defines the behavior and rendering expectations for the range input type).

CSS Grid Layout is a two-dimensional layout system designed specifically for creating complex, responsive web layouts. It provides developers with direct control over both rows and columns, making it significantly easier to rearrange and manage content for different screen sizes and devices compared to other methods. Its inherent flexibility and power make it a superior choice for building adaptive designs that work consistently across a variety of viewports.

A. Flow: This is the default layout model. It lacks the built-in, two-dimensional control of Grid, requiring more complex workarounds for responsive design.

B. Table: An outdated and inflexible method for page layout. It is not responsive and presents significant accessibility and maintenance challenges.

D. Border: A CSS property used for styling an element's outline, not a method for structuring the overall page layout.

- MDN Web Docs (Mozilla). (n.d.). CSS Grid Layout. In MDN Web Docs. Retrieved from https://developer.mozilla.org/en-US/docs/Web/CSS/CSSGridLayout. The documentation states, "Grid is a powerful layout system... It is ideal for creating two-dimensional layouts." (See section: "Basic concepts of grid layout").

- W3C. (2020, December 18). CSS Grid Layout Module Level 1. W3C Candidate Recommendation. Retrieved from https://www.w3.org/TR/css-grid-1/. Section 1, "Introduction," describes Grid as a system for "two-dimensional layout" intended to solve layout problems on the web.

- MIT OpenCourseWare. (2013). 6.813/6.831 User Interface Design and Implementation, Lecture 6: CSS. Retrieved from https://ocw.mit.edu. The course materials describe Grid as a "2D layout system... great for overall page layout," highlighting its suitability for managing complex, device-agnostic layouts.

The

A.

- Mozilla Developer Network (MDN). (n.d.).

The provided CSS code h1, h2, p { color: green; } uses a grouping selector, also referred to as a selector list. This is indicated by the comma-separated list of individual selectors (h1, h2, p). This syntax is a method for applying the same style declaration block to multiple elements without having to write a separate rule for each one. It is a common and efficient technique for maintaining clean and concise stylesheets.

B: A class selector targets elements based on their class attribute and is prefixed with a period (e.g., .my-class).

C: While the group is composed of element selectors (h1, h2, p), the overall structure is a grouping selector, which is the more precise answer.

D: An ID selector targets a single element by its unique id attribute and is prefixed with a hash symbol (e.g., #main-content).

1. MDN Web Docs. (2023). Grouping selectors. Mozilla Developer Network. Retrieved from https://developer.mozilla.org/en-US/docs/Web/CSS/Groupingselectors.

2. W3C. (2018). CSS Selectors Level 3, Section 4 Selector lists. W3C Recommendation. Retrieved from https://www.w3.org/TR/selectors-3/#selector-list.

3. MIT OpenCourseWare. (2014). 6.813/6.831 User Interface Design and Implementation, Lecture 4: CSS. Retrieved from https://ocw.mit.edu/courses/6-813-user-interface-design-and-implementation-spring-2011/resources/mit6813s11lec04/. (The lecture notes cover basic selector types, including grouping).