MCQs / Computer Science / Lab: Mobile-Friendly Web Page

Lab: Mobile-Friendly Web Page MCQs — Computer Science

14 multiple-choice questions on Lab: Mobile-Friendly Web Page from Computer Science, each with the correct answer and, where available, a teacher's explanation. Read through them to revise the chapter, then practise the same questions one by one to test yourself.

1. Removing the viewport meta tag on a phone makes the page:

  1. Switch to dark mode
  2. Larger and readable
  3. Render at desktop width and appear zoomed out
  4. Fail to load

Answer: C) Render at desktop width and appear zoomed out

Explanation: Without the viewport, mobile browsers assume a wide desktop viewport.

Discuss this question

2. The alt attribute of an image is used for:

  1. Image rotation
  2. Alternative text for screen readers and when the image fails to load
  3. Image size
  4. Linking the image

Answer: B) Alternative text for screen readers and when the image fails to load

Explanation: alt describes the image for accessibility and fallback.

Discuss this question

3. Which link opens the email app with the address filled in?

  1. mailto:cs@example.edu.pk
  2. smtp:cs@example.edu.pk
  3. email:cs@example.edu.pk
  4. send:cs@example.edu.pk

Answer: A) mailto:cs@example.edu.pk

Explanation: The mailto: scheme opens the default email app.

Discuss this question

4. Which element creates a drop-down list?

  1. dropdown
  2. select with option elements
  3. datalist only
  4. list

Answer: B) select with option elements

Explanation: select contains option elements to form a drop-down.

Discuss this question

5. Calling e.preventDefault() inside a form's submit handler:

  1. Resets the CSS
  2. Clears the form
  3. Validates the email
  4. Stops the browser from reloading the page / sending the form

Answer: D) Stops the browser from reloading the page / sending the form

Explanation: preventDefault stops the default submit navigation so JavaScript can handle it.

Discuss this question

6. Which Chrome tool audits a page's mobile performance and accessibility?

  1. Gradle
  2. Postman
  3. Logcat
  4. Lighthouse

Answer: D) Lighthouse

Explanation: Lighthouse in DevTools generates performance, accessibility, SEO and best-practice scores.

Discuss this question

7. To open a page served by Live Server on a phone, the phone must:

  1. Be rooted
  2. Have Android Studio
  3. Use mobile data
  4. Be on the same Wi-Fi network and use the PC's IP address

Answer: D) Be on the same Wi-Fi network and use the PC's IP address

Explanation: Devices on the same local network can open http://PC-IP:port.

Discuss this question

8. Radio buttons belong to the same group when they share the same:

  1. id
  2. name
  3. value
  4. class

Answer: B) name

Explanation: Radio inputs with the same name are mutually exclusive.

Discuss this question

9. The minimum recommended height of the submit button for touch is about:

  1. 200 px
  2. 48 px
  3. 10 px
  4. 20 px

Answer: B) 48 px

Explanation: Touch targets should be at least about 48 px.

Discuss this question

10. Adding rel="noopener" to a link with target="blank" improves:

  1. Speed of images
  2. Font size
  3. Security of the original page
  4. Form validation

Answer: C) Security of the original page

Explanation: noopener prevents the new tab from controlling the opening page.

Discuss this question

11. The loading="lazy" attribute on an image:

  1. Delays loading until the image is about to scroll into view
  2. Makes it blurry
  3. Converts it to WebP
  4. Hides it on phones

Answer: A) Delays loading until the image is about to scroll into view

Explanation: Lazy loading saves data and speeds up the first page load.

Discuss this question

12. Which attribute restricts the phone field to the pattern 03 followed by 9 digits?

  1. pattern="03[0-9]9"
  2. maxlength="11"
  3. type="number"
  4. min="03"

Answer: A) pattern="03[0-9]9"

Explanation: The pattern attribute validates the value with a regular expression.

Discuss this question

13. Which link format opens the phone's dialer?

  1. phone:0300...
  2. mailto:0300...
  3. call://0300...
  4. tel:+92300...

Answer: D) tel:+92300...

Explanation: The tel: scheme opens the dialer with the number filled in.

Discuss this question

14. In the lab CSS, how many card columns appear at 700 px width?

  1. 2
  2. 1
  3. 4
  4. 3

Answer: A) 2

Explanation: At min-width 600px the grid has 2 columns; 3 columns start at 1024px.

Discuss this question

Practise Lab: Mobile-Friendly Web Page MCQs

More Computer Science chapters