WGU C777 Web Development Apps OA (pdf) | 2026/2027 | Web Dev Q&A | Web Development

WGU C777 Web Development Apps OA (pdf) | 2026/2027 | Web Dev
Q&A | Web Development

1. A web developer wants to include a video on a webpage that plays
automatically when the page loads but does not show controls. Which HTML5
attribute combination should be used with the `<video>` element?

A) `controls` and `loop`

B) `autoplay` and `muted`

C) `autoplay` and `controls`

D) `muted` and `loop`



Correct Answer: `autoplay` and `muted`



Rationale: For a video to autoplay, the `autoplay` attribute must be present.
However, most modern browsers require the video to be `muted` to autoplay
without user interaction. The `controls` attribute would display player
controls, which is not desired. `loop` repeats the video but does not affect
autoplay.



2. Which CSS property is used to create a responsive layout that adjusts the
number of columns based on the viewport width without using media
queries?

A) `display: flex`

B) `display: grid`

C) `column-count`

D) `display: inline-block`



Correct Answer: `column-count`



Rationale: The `column-count` property creates a multi-column layout where
the number of columns can be adjusted. While `flex` and `grid` are powerful

,layout tools, `column-count` specifically creates a responsive column flow
that adapts to the viewport.



3. A developer is using the HTML5 Canvas API. Which method is used to
begin a new path or reset the current path?

A) `ctx.startPath()`

B) `ctx.beginPath()`

C) `ctx.newPath()`

D) `ctx.resetPath()`



Correct Answer: `ctx.beginPath()`



Rationale: The `beginPath()` method of the Canvas 2D API starts a new path
by emptying the list of sub-paths. It is essential for drawing multiple distinct
shapes on the canvas without them being connected.



4. An accessibility audit reveals that a website's images lack descriptive text
for screen readers. Which attribute should be added to each `<img>`
element to provide this information?

A) `title`

B) `name`

C) `alt`

D) `aria-label`



Correct Answer: `alt`



Rationale: The `alt` attribute is the primary method for providing alternative
text for images. Screen readers read this text to users who cannot see the
image. While `aria-label` can also be used, `alt` is the standard and
preferred attribute for images.

,5. In CSS, what is the difference between `display: none;` and `visibility:
hidden;`?

A) `display: none` removes the element from the document flow; `visibility:
hidden` hides the element but preserves its space

B) `visibility: hidden` removes the element from the document flow; `display:
none` hides the element but preserves its space

C) Both properties remove the element from the document flow

D) Both properties preserve the element's space in the document flow



Correct Answer: `display: none` removes the element from the document
flow; `visibility: hidden` hides the element but preserves its space



Rationale: `display: none` removes the element from the document flow
entirely, causing the layout to shift as if the element is not present.
`visibility: hidden` hides the element from view but still occupies space in the
layout.



6. A developer is writing a JavaScript function to handle a button click. Which
of the following correctly adds an event listener to the button with the ID
"submitBtn"?

A) `document.getElementById("submitBtn").onclick = function() { ... };`

B) `document.getElementById("submitBtn").addEventListener("click",
function() { ... });`

C) `document.querySelector("#submitBtn").click(function() { ... });`

D) Both A and B



Correct Answer: Both A and B

, Rationale: Both the `onclick` property and the `addEventListener` method
are valid ways to attach a click event handler. `addEventListener` is the
more modern and flexible approach, allowing multiple listeners and better
control over event propagation.



7. Which HTML5 input type is specifically designed for entering a valid email
address and provides built-in validation?

A) `type="text"`

B) `type="email"`

C) `type="url"`

D) `type="tel"`



Correct Answer: `type="email"`



Rationale: The `type="email"` input provides automatic validation to ensure
the entered value is a properly formatted email address. It also triggers
appropriate mobile keyboards on touch devices. The `url` type validates
URLs, and `tel` is for telephone numbers.



8. A web developer wants to create a CSS animation where an element
rotates 360 degrees over 2 seconds and repeats infinitely. Which CSS code
achieves this?

A) `animation: spin 2s infinite linear;` with `@keyframes spin { 100%
{ transform: rotate(360deg); } }`

B) `animation: spin 2s repeat linear;` with `@keyframes spin { 100%
{ transform: rotate(360deg); } }`

C) `animation: spin 2s forwards linear;` with `@keyframes spin { 100%
{ transform: rotate(360deg); } }`

D) `animation: spin 2s alternate linear;` with `@keyframes spin { 100%
{ transform: rotate(360deg); } }`