CS202 MADE BY MOIN AKHTAR

CS202 - FUNDAMENTALS OF FRONT END DEVELOPMENT

FINAL TERM IMPORTANT MCQS FROM WEEK 7 TO 8
BY MOIN AKHTAR

1. What is jQuery?

a) A programming language
b) A JavaScript framework
c) A database management system
d) A markup language

Answer: b) A JavaScript framework

2. What does jQuery primarily simplify?

a) Database management
b) HTML document traversal and manipulation
c) Graphic design
d) Network security

Answer: b) HTML document traversal and manipulation

3. Which of the following is NOT a feature of the jQuery library?

a) HTML/DOM manipulation
b) CSS manipulation
c) Video editing
d) AJAX

Answer: c) Video editing

4. Why is jQuery considered important?

a) It is the only JavaScript framework available

b) It is the smallest JavaScript library
c) It is the most popular and extendable JavaScript framework
d) It is only compatible with a specific browser

Answer: c) It is the most popular and extendable JavaScript framework

5. How can you add jQuery to an HTML document?

a) By using the `<java>` tag

b) By using the `<jquery>` tag
c) By using the `<script>` tag and referencing the jQuery file
d) By embedding jQuery code directly in the HTML
 CS202 MADE BY MOIN AKHTAR

Answer: c) By using the `<script>` tag and referencing the jQuery file

6. What is the purpose of the Document Ready Event in jQuery?

a) To load the HTML document

b) To wait for the document to be fully loaded before executing jQuery code
c) To trigger animations
d) To hide all elements in the document

Answer: b) To wait for the document to be fully loaded before executing jQuery code

7. Which method is an alternative to `$(document).ready(function(){...})` for the Document Ready

Event?

a) `$(function(){...})`
b) `$(document).load(function(){...})`
c) `$(html).ready(function(){...})`
d) `$(body).load(function(){...})`

Answer: a) `$(function(){...})`

8. What is the purpose of jQuery selectors?

a) To style HTML elements

b) To select and manipulate HTML elements
c) To create new HTML elements
d) To define functions in jQuery

Answer: b) To select and manipulate HTML elements

9. How can you select all `<p>` elements using jQuery?

a) `$("p")`
b) `$("#p")`
c) `$(".p")`
d) `element.select("p")`

Answer: a) `$("p")`

10. How do you select an element with the id "test" in jQuery?

a) `$("#test")`
b) `$(".test")`
c) `$("test")`
d) `element.select("#test")`
 CS202 MADE BY MOIN AKHTAR

Answer: a) `$("#test")`

11. What are events in the context of web development?

a) Styling rules for HTML elements

b) Visitor's actions that a web page can respond to
c) HTML tags
d) JavaScript functions

Answer: b) Visitor's actions that a web page can respond to

12. In jQuery, what is the purpose of the following code?

javascript
$("p").click();

a) Hides all paragraphs on the page

b) Assigns a click event to all paragraphs
c) Defines a function for the click event
d) Triggers a click event on all paragraphs

Answer: b) Assigns a click event to all paragraphs

13. How do you define a function for a click event in jQuery?

a) `$("p").function(){};`
b) `$("p").click(){};`
c) `$("p").on("click", function(){});`
d) `$("p").event(function(){});`

Answer: c) `$("p").on("click", function(){});`

14. Which jQuery method is used to execute a function when the document is fully loaded?

a) `document.load()`
b) `$(document).ready()`
c) `$(document).load()`
d) `document.ready()`

Answer: b) `$(document).ready()`

15. What does the `dblclick()` method do in jQuery?

a) Attaches a function to the double-click event

b) Hides the element when clicked twice
c) Executes a function when the user clicks once
d) Removes an element on double-click
 CS202 MADE BY MOIN AKHTAR

Answer: a) Attaches a function to the double-click event

16. Which event method is a combination of `mouseenter()` and `mouseleave()` in jQuery?

a) `hover()`
b) `on()`
c) `click()`
d) `focus()`

Answer: a) `hover()`

17. What is the purpose of the `focus()` event in jQuery?

a) Executes a function when the user clicks on an element

b) Changes the background color of an input field
c) Attaches an event handler to the mouse enter event
d) Fires when a form field gets focus

Answer: d) Fires when a form field gets focus

18. How can you attach multiple event handlers to an element in jQuery using the `on()` method?

a) `$("p").on("click", function(){});`
b) `$("p").eventHandlers({...});`
c) `$("p").multipleEvents({...});`
d) `$("p").on({...});`

Answer: a) `$("p").on("click", function(){});`

19. Which event method is used for both mouseup and mousedown events in jQuery?

a) `click()`
b) `hover()`
c) `on()`
d) `mouseupdown()`

Answer: c) `on()`

20. What does the following jQuery code do?

javascript
$("p").on({
mouseenter: function(){ $(this).css("background-color", "lightgray"); },
mouseleave: function(){ $(this).css("background-color", "lightblue"); },
click: function(){ $(this).css("background-color", "yellow"); }
});
 CS202 MADE BY MOIN AKHTAR

a) Adds a click event to all paragraphs

b) Changes background color on mouse events for paragraphs
c) Hides paragraphs on click
d) Removes paragraphs on mouse events

Answer: b) Changes background color on mouse events for paragraphs

21. What is jQuery traversing?

a) Moving elements left and right

b) Selecting elements based on their relation to other elements
c) Animating elements
d) Styling elements with CSS

Answer: b) Selecting elements based on their relation to other elements

Which jQuery method is used to traverse up the DOM tree and return the direct parent element?

a) parent()
b) parents()
c) parentElement()
d) up()

Answer: a) parent()

22. What does the parents() method return in jQuery?

a) All descendant elements

b) All direct parent elements
c) All sibling elements
d) All ancestor elements up to the document's root element

Answer: d) All ancestor elements up to the document's root element

23. How does the children() method differ from the find() method in jQuery?

a) children() returns all descendants, while find() returns direct children

b) children() returns direct children, while find() returns all descendants
c) children() returns siblings, while find() returns all elements
d) children() and find() are the same

Answer: b) children() returns direct children, while find() returns all descendants

24. Which method is used to traverse sideways in the DOM tree and returns all sibling elements?

a) siblings()
 CS202 MADE BY MOIN AKHTAR

b) next()
c) prev()
d) find()

Answer: a) siblings()

25. What does the nextUntil() method do in jQuery?

a) Returns all next sibling elements

b) Returns all next sibling elements between two given arguments
c) Returns the next sibling element
d) Returns all ancestors between two given arguments

Answer: b) Returns all next sibling elements between two given arguments

26. How can you select the first element of a group of elements in jQuery?

a) first()
b) start()
c) initial()
d) primary()

Answer: a) first()

27. What does the eq() method do in jQuery?

a) Returns elements with a specific index number

b) Returns the last element
c) Returns elements with a specific class
d) Returns elements without a specific class

Answer: a) Returns elements with a specific index number

28. The filter() method in jQuery:

a) Removes elements that match the criteria

b) Adds elements that match the criteria
c) Returns elements that do not match the criteria
d) Returns all elements

Answer: a) Removes elements that match the criteria

29. What is the opposite of the filter() method in jQuery?

a) reject()
b) negate()
c) not()
 CS202 MADE BY MOIN AKHTAR

d) exclude()

Answer: c) not()

30. What does AJAX stand for?

a. Asynchronous JavaScript and XHTML
b. Asynchronous JavaScript and XML
c. Asynchronous jQuery and XML
d. Automated JavaScript and XML

Answer: b. Asynchronous JavaScript and XML

31. Which jQuery method is used to load data from a server and put it into a selected element?
a. $.ajax()
b. $.get()
c. $.load()
d. $.post()

Answer: c. $.load()

32. What is the purpose of the callback function in the jQuery load() method?

a. To define the data to be loaded

b. To handle errors during data loading
c. To specify the URL of the resource
d. To execute after the load operation is completed

Answer: d. To execute after the load operation is completed

33. Which HTTP method is used by the $.get() method in jQuery?

a. GET
b. POST
c. PUT
d. DELETE

Answer: a. GET

34. How is the noConflict() method used in jQuery?

a. To define a new JavaScript framework

b. To prevent conflicts with other JavaScript frameworks
c. To load external scripts asynchronously
d. To handle AJAX requests

Answer: b. To prevent conflicts with other JavaScript frameworks

 CS202 MADE BY MOIN AKHTAR

35. What is the purpose of XML in web development?

a. To define styling rules for web pages
b. To store and transport data in a machine-readable format
c. To create dynamic user interfaces
d. To handle user authentication

Answer: b. To store and transport data in a machine-readable format

36. Which of the following is a valid XML syntax rule?

a. HTML elements can omit closing tags

b. XML tags are not case-sensitive
c. XML elements must be properly nested
d. XML attribute values must not be quoted

Answer: c. XML elements must be properly nested

37. What is the purpose of XML namespaces?

a. To define names for XML elements
b. To avoid conflicts between element names in different XML documents
c. To specify the character encoding of an XML document
d. To define data types in XML schemas

Answer: b. To avoid conflicts between element names in different XML documents

38. What does DTD stand for in XML?

a. Document Transformation Definition
b. Document Type Declaration
c. Data Type Definition
d. Document Text Description

Answer: b. Document Type Declaration

39. How does XML Schema differ from DTD?

a. XML Schema is written in HTML
b. XML Schema does not support data types
c. XML Schema uses XML syntax, while DTD does not
d. XML Schema cannot describe the structure of an XML document

Answer: c. XML Schema uses XML syntax, while DTD does not

40. What does XPath stand for?

a) XML Path
b) XSLT Path
c) XHTML Path
d) XQuery Path
 CS202 MADE BY MOIN AKHTAR

Answer: a) XML Path

41. Which of the following is true about JSON?

a) JSON is a markup language

b) JSON is used for defining parts of an XML document
c) JSON is shorter and quicker to read and write than XML
d) JSON uses end tags

Answer: c) JSON is shorter and quicker to read and write than XML

42. What is the purpose of the HTML `<canvas>` element?

a) To define links within an HTML document

b) To draw graphics on the fly using scripting
c) To structure and present content on the web
d) To create tables and lists in HTML

Answer: b) To draw graphics on the fly using scripting

43. In HTML5, what is the purpose of the `<section>` element?

a) To define a header for a document

b) To create a set of navigation links
c) To define a section in a document with a heading
d) To draw graphics on a canvas

Answer: c) To define a section in a document with a heading

44. What is HTML Local Storage used for?

a) Storing data on the server

b) Storing data locally within the user's browser
c) Storing session-specific data
d) Storing cookies

Answer: b) Storing data locally within the user's browser

45. Which HTML element is used to embed audio in a web page?

a) `<sound>`
b) `<audio>`
c) `<music>`
d) `<play>`

Answer: b) `<audio>`
 CS202 MADE BY MOIN AKHTAR

46. What is the purpose of the `<video>` element in HTML5?

a) To embed images in a web page

b) To embed videos in a web page
c) To create multimedia animations
d) To enable geolocation services

Answer: B

47. Which method is used to get the geographical position of a user in HTML Geolocation?
a) `getLocation()`
b) `retrievePosition()`
c) `getCurrentPosition()`
d) `findUserPosition()`

Answer: C. `getCurrentPosition()`

48. What does the `controls` attribute do in the HTML `<video>` element?
a) Adds video editing options
b) Adds video playback controls
c) Enables autoplay
d) Specifies video file formats

Answer: B. Adds video playback controls

49. Which file formats are currently supported for the `<audio>` element in HTML?

a) MP4, WebM, Ogg

b) WAV, FLAC, MP3
c) MP3, WAV, Ogg
d) AVI, MP3, MKV

Answer: c). MP3, WAV, Ogg

50. How is a web worker terminated in HTML5?

a) `terminateWorker()`
b) `stopWorker()`
c) `killWorker()`
d) `terminate()`

Answer: D. `terminate()`

51. What is the purpose of the `ondragover` event in HTML Drag and Drop?
 CS202 MADE BY MOIN AKHTAR

a) Specifies where the dragged data can be dropped

b) Handles errors during drag and drop
c) Initiates the dragging process
d) Specifies the data to be dragged

Answer: A. Specifies where the dragged data can be dropped

52. Which section in the Cache Manifest file specifies files to be cached after the first download?

a) `NETWORK`
b) `FALLBACK`
c) `CACHE MANIFEST`
d) `CACHE`

Answer: C. `CACHE MANIFEST`

53. What does the HTML5 Server-Sent Events (SSE) allow?

a) Automatic updates from the server to the web page

b) Automatic updates from the web page to the server
c) Bidirectional communication between the server and the web page
d) Manual updates requested by the web page

Answer: A. Automatic updates from the server to the web page

54. What is CSS3 primarily divided into?

a) Elements
b) Modules
c) Sections
d) Tags

Answer: b) Modules

55. Which CSS3 module is responsible for specifying the position of background images?

a) Selectors
b) Box Model
c) Backgrounds and Borders
d) Animations

Answer: c) Backgrounds and Borders

How can you create rounded corners for an element using CSS3?

a) Using box-shadow property

 CS202 MADE BY MOIN AKHTAR

b) Using background-radius property

c) Using border-radius property
d) Using corner-radius property

Answer: c) Using border-radius property

56. What is the purpose of the CSS3 property "border-image"?

a) Add a background image to an element

b) Specify an image to be used instead of the normal border around an element
c) Apply a shadow effect to text
d) Create rounded corners

Answer: b) Specify an image to be used instead of the normal border around an element

57. Which CSS3 property allows you to add multiple background images for an element?

a) background-size
b) background-origin
c) background-clip
d) background-image

Answer: d) background-image

58. What does the CSS3 property "opacity" control?

a) Background color
b) Text color
c) Element visibility
d) Font size

Answer: c) Element visibility

59. What does the CSS3 "repeating-linear-gradient()" function do?

a) Creates a linear gradient that changes color continuously

b) Repeats a linear gradient in a specified direction
c) Adds a shadow effect to text
d) Applies a 3D transformation to an element

Answer: b) Repeats a linear gradient in a specified direction

60. Which CSS3 property is used to add shadow to elements?

a) box-shadow
b) text-shadow
c) shadow-effect
 CS202 MADE BY MOIN AKHTAR

d) element-shadow

Answer: a) box-shadow

61. What is the purpose of the CSS3 property "text-overflow"?

a) Specifies the font style

b) Defines the text shadow
c) Specifies how overflowed content should be signaled to the user
d) Adds animation to text

Answer: c) Specifies how overflowed content should be signaled to the user

62. How can you define web fonts in CSS3?

a) Using font-size property

b) Using text-font property
c) Using @font-face rule
d) Using font-family property

Answer: c) Using @font-face rule

63. What is Responsive Web Design (RWD)?

a) A design approach for static web pages

b) An approach for crafting sites that provide an optimal viewing experience on all devices
c) A technique to increase mobile traffic
d) A method to fix the size of web pages for all devices

Answer: b) An approach for crafting sites that provide an optimal viewing experience on all devices

64. Why is responsive web design important?

a) It decreases mobile traffic

b) It provides a static viewing experience
c) It aims to offer an optimal viewing and interaction experience on all devices
d) It increases the need for resizing, panning, and scrolling

Answer: c) It aims to offer an optimal viewing and interaction experience on all devices

65. What is the purpose of the viewport in responsive web design?

a) To control the content of a web page

b) To set the initial zoom level of a webpage
c) To make web pages look good only on computers
d) To fix the size of web pages for mobile phones
 CS202 MADE BY MOIN AKHTAR

Answer: b) To set the initial zoom level of a webpage

66. What does the viewport meta tag do in HTML5?

a) Sets the width of the page to a fixed value

b) Allows web designers to control the browser's dimensions
c) Helps to make web pages static
d) Provides instructions on how to control the page's dimensions and scaling

Answer: d) Provides instructions on how to control the page's dimensions and scaling

67. What is the purpose of a responsive grid-view in web design?

a) To make web pages static

b) To increase the size of web pages
c) To provide a structure for placing elements on a page
d) To decrease the width of web pages

Answer: c) To provide a structure for placing elements on a page

68. How many columns does a typical responsive grid-view have?

a) 6
b) 8
c) 10
d) 12

Answer: d) 12

69. What is a media query in CSS?

a) A query to search for media files

b) A technique introduced in HTML5
c) A block of CSS properties applied under certain conditions
d) A method to set the initial zoom level of a webpage

Answer: c) A block of CSS properties applied under certain conditions

70. What does "Mobile First" design mean in responsive web design?

a) Designing specifically for desktops

b) Designing for mobile devices before other devices
c) Designing without any consideration for mobile devices
d) Designing for tablets before other devices
 CS202 MADE BY MOIN AKHTAR

Answer: b) Designing for mobile devices before other devices

71. How can media queries be used to change the layout based on device orientation?

a) By adjusting the font size

b) By changing the background color
c) By altering the page's structure
d) By modifying the column widths

Answer: c) By altering the page's structure

72. What does the `width: 100%; height: auto;` CSS property do for images in responsive web
design?

a) Forces images to have fixed dimensions

b) Makes images responsive, allowing them to scale up and down
c) Restricts images to their original size
d) Increases the height of images on mobile devices

Answer: b) Makes images responsive, allowing them to scale up and down

73. What is Bootstrap?

a) A back-end programming language

b) A front-end framework
c) A database management system
d) An operating system

Answer: b) A front-end framework

74. Who developed Bootstrap?

a) Bill Gates
b) Mark Otto and Jacob Thornton
c) Steve Jobs
d) Elon Musk

Answer: b) Mark Otto and Jacob Thornton

75. Which of the following is NOT a reason to use Bootstrap?

 CS202 MADE BY MOIN AKHTAR

a) Easy to use
b) Responsive features
c) Mobile-first approach
d) Faster server processing

Answer: d) Faster server processing

76. How can Bootstrap be included in a web project?

a) Import as a Python library

b) Download and host it locally
c) Include from a CDN
d) Both b and c

Answer: d) Both b and c

77. What classes are used in Bootstrap's grid system for different screen sizes?

a) s, m, l, xl
b) xs, sm, md, lg
c) small, medium, large, x-large
d) grid-xs, grid-sm, grid-md, grid-lg

Answer: b) xs, sm, md, lg

78. What is the default font-size in Bootstrap for paragraphs?

a) 12px
b) 14px
c) 16px
d) 18px

Answer: b) 14px

79. Which class is used to create a rounded image in Bootstrap?

a) .img-rounded
b) .img-circle
c) .img-thumbnail
d) .img-round

Answer: a) .img-rounded
 CS202 MADE BY MOIN AKHTAR

80. How can you create a responsive table in Bootstrap?

a) Apply .table-responsive class

b) Use .table-fluid class
c) Include responsive="true" attribute
d) Both a and b

Answer: a) Apply .table-responsive class

81. What class is used to create a jumbotron in Bootstrap?

a) .jumbotron
b) .hero-unit
c) .big-box
d) .container-jumbo

Answer: a) .jumbotron

82. Which class is used for a primary button in Bootstrap?

a) .btn-default
b) .btn-primary
c) .btn-info
d) .btn-success

Answer: b) .btn-primary

83. What is the primary purpose of responsive testing in web development?

a. Enhancing website aesthetics

b. Ensuring server security
c. Adapting to different device screens
d. Improving website content

Answer: c. Adapting to different device screens

84. Which method is NOT recommended for testing responsiveness in web design?

a. Resizing browser window

b. Using online testing services
c. Swiping on mobile devices
d. Scrolling through web pages

Answer: d. Scrolling through web pages

 CS202 MADE BY MOIN AKHTAR

85. What are some features of Chrome DevTools for responsive testing?

a. Mobile device emulation

b. Hover and right-click simulation
c. Pinch to Zoom functionality
d. All of the above

Answer: d. All of the above

86. Who leads the World Wide Web Consortium (W3C)?

a. Mark Zuckerberg
b. Tim Berners-Lee
c. Larry Page
d. Jeff Bezos

Answer: b. Tim Berners-Lee

87. What is the purpose of W3C Validator?

a. Debugging web documents

b. Emulating mobile devices
c. Testing website speed
d. Simulating touch events

Answer: a. Debugging web documents

88. Which of the following is a feature of good Web Publishing Tools?

a. Inconsistency in design format

b. Lack of support for common components
c. Integration with FTP for publishing
d. Limited functionality in layout design

Answer: c. Integration with FTP for publishing

89. Which Web Publishing Tool allows users to visually map out website structure without using
HTML coding?

a. Adobe PageMill
b. NetObjects Fusion
c. Macromedia Dreamweaver
d. Notepad

Answer: b. NetObjects Fusion

 CS202 MADE BY MOIN AKHTAR

90. What is a key consideration for maintaining web page quality regarding fonts?

a. Overusing Bold text

b. Avoiding Sans-serif fonts
c. Using custom fonts extensively
d. Ignoring font size in CSS

Answer: a. Overusing Bold text

91. What is the recommended time for a website to open for the best user experience?

a. 10 seconds
b. 5 seconds
c. 1 second
d. 20 seconds

Answer: c. 1 second

92. What is the primary goal of Search Engine Optimization (SEO)?

a. Enhancing website aesthetics

b. Improving server security
c. Increasing website visibility in search engines
d. Reducing website content

Answer: c. Increasing website visibility in search engines