Sample Paper
FINALTERM EXAMINATION
Fall 2022
CS202 – Fundamental of Front End Development
Time: 90 min
Marks: 60
Question No: 1 (Marks: 01) - Please choose the correct option
The jQuery animate() method allows you to create _______ animations.
1) Custom
2) Big
3) Fast
4) 2d
Question No: 2 (Marks: 01) - Please choose the correct option
____________ stands for Asynchronous JavaScript and XML.
1) ASAX
2) AJSX
3) AJAX
4) AJava
Question No: 3 (Marks: 01) - Please choose the correct option
To get the response from a___________, use the responseText or responseXML property
of the XMLHttpRequest object.
1) Client
2) PC
3) Laptop
4) server
Question No: 4 (Marks: 01) - Please choose the correct option
GET is Simpler and faster than _____method.
1) POST
2) GETS
3) START
4) AJAX
Question No: 5 (Marks: 01) - Please choose the correct option
The dblclick() method attaches _________function to an HTML element.
1) mouse
2) an event handler
3) double click
4) an event click
Question No: 6 (Marks: 01) - Please choose the correct option
The mouseenter() method attaches an event handler function to an HTML _______.
1) element
2) document
3) browser
4) function
Question No: 7 (Marks: 01) - Please choose the correct option
jQuery provide easy to use methods for creating animation effects using jQuery _______
methods.
1) Animate
2) Effects
3) 2d
4) Graphic
Question No: 8 (Marks: 01) - Please choose the correct option
__________method of jQuery fades in selected elements.
1) fadeIn()
2) fade()
3) fades()
4) fadeout()
Question No: 9 (Marks: 01) - Please choose the correct option
With __________ you can fade elements in and out of visibility.
1) HTML
2) jQuery
3) CSS
4) C
Question No: 10 (Marks: 01) - Please choose the correct option
The jQuery fadeIn() method is used to fade in a ________ element.
1) big
2) hidden
3) random
4) visible
Question No: 11 (Marks: 01) - Please choose the correct option
The jQuery ____________ method is used to stop an animation or effect before it is
finished.
1) end()
2) stop()
3) finished()
4) die()
Question No: 12 (Marks: 01) - Please choose the correct option
_________can be explained with the help of a family tree.
1) BOM
2) DOM
3) MOD
4) SSC
Question No: 13 (Marks: 01) - Please choose the correct option
____________ HTML5 tag is used to format a section of text in different direction from
the remaining text.
1) <aside>
2) <canvas>
3) <dialog>
4) <bdi>
Question No: 14 (Marks: 01) - Please choose the correct option
_________ HTML5 tag is used to define a region in a document to run a script (using
javaScript) for changing graphics on the fly.
1) <aside>
2) <dialog>
3) <canvas>
4) <bdi>
Question No: 15 (Marks: 01) - Please choose the correct option
In HTML5, ____________ tag is used to contain multiple images.
1) <picture>
2) <dialog>
3) <canvas>
4) <bdi>
Question No: 16 (Marks: 01) - Please choose the correct option
In HTML5 based document, ________________ tag is used for navigation purposes.
1) <bdi>
2) <nav>
3) <rt>
4) <rp>
Question No: 17 (Marks: 01) - Please choose the correct option
_________ tag is a browser opportunity to break a line within text.
1) <bdi>
2) <rt>
3) <wbr>
4) <rp>
Question No: 18 (Marks: 01) - Please choose the correct option
____________ is a HTML5 form control attribute to define pre-defined controls for input
controls.
1) <bdi>
2) <datalist>
3) <wbr>
4) <rp>
Question No: 19 (Marks: 01) - Please choose the correct option
___________ is an audio property to check whether audio should play again when
finished.
1) loop
2) ended
3) duration
4) seeked
Question No: 20 (Marks: 01) - Please choose the correct option
Choose the correct syntax for writing an array in JavaScript.
1) student[Ali, Saad, Asad];
2) varr student[“Ali”, “Saad”, “Asad”];
3) var student[“Ali”, “Saad”, “Asad”];
4) var student(“Ali”, “Saad”, “Asad”);
Question No: 21 (Marks: 01) - Please choose the correct option
In CSS3, ______ property is used to give rounded corner to an element.
1) border-radius
2) border-diagmeter
3) border-corner
4) border-edge
Question No: 22 (Marks: 01) - Please choose the correct option
__________ method is used to return users’ updated current position as the user moves.
1) getCurrentPosition(showPosition);
2) watchPosition();
3) clearWatch();
4) getCurrentPosition(showPosition, showError);
Question No: 23 (Marks: 01) - Please choose the correct option
__________ method is used to return current position of the user.
1) getCurrentPosition(showPosition)
2) watchPosition();
3) clearWatch();
4) getPosition();
Question No: 24 (Marks: 01) - Please choose the correct option
__________ property is used to enable HTML5 application cache?
1) kind
2) manifest
3) meter
4) form
Question No: 25 (Marks: 01) - Please choose the correct option
Which background property value is used to scale an image to be as large as possible?
1) Background-size: contain
2) Background-size: cover
3) Background-origin: border-box
4) Background-origin: padding-box
Question No: 26 (Marks: 01) - Please choose the correct option
Which background property value is used to scale background image so that the content
area would become completely covered?
1) Background-size: contain
2) Background-size: cover
3) Background-origin: border-box
4) Background-origin: padding-box
Question No: 27 (Marks: 01) - Please choose the correct option
_____________ adds one or more classes to the selected elements in jQuery CSS
manipulation.
1) addClass()
2) removeClass()
3) toggleClass()
4) css()
Question No: 28 (Marks: 01) - Please choose the correct option
___________ Removes one or more classes from the selected elements in jQuery CSS
manipulation.
1) addClass()
2) removeClass()
3) toggleClass()
4) css()
Question No: 29 (Marks: 01) - Please choose the correct option
____________ Sets or returns the style attribute.
1) addClass()
2) removeClass()
3) toggleClass()
4) css()
Question No: 30 (Marks: 01) - Please choose the correct option
___________________ method in jQuery dimension returns the width of an element
(includes padding).
1) width()
2) height()
3) innerWidth()
4) innerHeight()
Question No: 31 (Marks: 01) - Please choose the correct option
_________________ method in jQuery dimension sets or returns the width of an element
(excludes padding, border and margin).
1) width()
2) height()
3) innerWidth()
4) innerHeight()
Question No: 32 (Marks: 01) - Please choose the correct option
_________________method of Traversing the DOM only traverses a single level up the
DOM tree.
1) parent()
2) parents()
3) parentsUntil()
4) Non of the given
Question No: 33 (Marks: 01) - Please choose the correct option
The _______________ method of traversing the DOM returns all ancestor elements
between two given arguments.
1) parent()
2) parents()
3) parentsUntil()
4) Non of the given
Question No: 34 (Marks: 01) - Please choose the correct option
_______________ Requests data from a specified resource in http request method.
1) Post
2) Get
3) load()
4) statusTxt
Question No: 35 (Marks: 01) - Please choose the correct option
_____________ Submits data to be processed to a specified resource in HTTP request
method.
1) Post
2) Get
3) load()
4) statusTxt
Question No: 36 (Marks: 01) - Please choose the correct option
__________________ defines a set of rules for encoding documents in a format which is
both human-readable and machine-readable.
1) HTML
2) jQuery
3) XML
4) http
Question No: 37 (Marks: 01) - Please choose the correct option
In XML DTD, DTD stands for ___________________.
1) Definition to definition
2) Document Type Definition
3) Document transmits definition
4) All of the given
Question No: 38 (Marks: 01) - Please choose the correct option
JSON arrays are written inside _______________.
1) curly braces
2) Square brackets
3) Parenthesis
4) Semi-quotes
Question No: 39 (Marks: 01) - Please choose the correct option
JSON objects are written inside _______________.
1) curly braces
2) Square brackets
3) Parenthesis
4) Semi-quotes
Question No: 40 (Marks: 01) - Please choose the correct option
Who is the creator of JSON?
1) Alvin Alexander
2) Rasmus Lerdorf
3) Douglas Crockford
4) Jesse James Garrett
Question No: 41 (Marks: 03)
QNo1: What are events? Write any two form events that are provided by jQuery.
Answer . All the different visitor's actions that a web page can respond to are called
events. An event represents the precise moment when something happens.
moving a mouse over an element
selecting a radio button
clicking on an element
focus()
The event fires when the form field gets focus.
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
blur()
The blur() method attaches an event handler function to an HTML form field.
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
Question No: 42 (Marks: 03)
QNo2: What is the purpose of the blur() method in jQuery? Also, Write its syntax.
Answer The blur() method in jQuery is used to handle events that occur when an
element, like an input field, loses focus. It helps you run code when a user clicks away
from the element after interacting with it.
Syntax: $("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
Question No: 43 (Marks: 03)
Write JavaScript code which will display below given student info in HTML element <p
id= “info”>, when user will click on “Display” button.
Name: Ali
Gender: Male
City: Islamabad
<input name="Display" type = "button" value="Display" onclick =
document.getElementById("info").innerHTML=" Name: Ali   Gender:
Malenbsp   City: Islamabad"
Answer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Student Info</title>
</head>
<body>
<p id="info"></p>
<input name="Display" type="button" value="Display" onclick="displayInfo()">
<script>
function displayInfo() {
document.getElementById("info").innerHTML = "Name:
Ali Gender: Male City: Islamabad";
}
</script>
</body>
</html>
Question No: 44 (Marks: 03)
Write JavaScript code which will change background color of a webpage when user will
move cursor on “Display” button.
<input name="Display" type = "button" value="Display" onmouseover =
document.body.style.backgroundColor="green">
Answer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Background Color</title>
</head>
<body>
<input name="Display" type="button" value="Display"
onmouseover="changeBackgroundColor()">
<script>
function changeBackgroundColor() {
document.body.style.backgroundColor = "green";
}
</script>
</body>
</html>
Question No: 45 (Marks: 03)
There are several methods in jQuery Dimension. What is the difference between
“innerWidth()” and “outerWidth()”.
Answer innerWidth():
The innerWidth() method returns the width of an element (includes padding).
var width = $(selector).innerWidth();
outerWidth():
The outerWidth() method returns the width of an element (includes padding and
border).
var width = $(selector).outerWidth();
Key Differences:
• Padding: Both methods include padding.
• Borders: outerWidth() includes borders; innerWidth() does not.
Question No: 46 (Marks: 03)
Explain the methods “children()” and “find()” of jQuery methods for traversing down the
DOM tree.
Answer
jQuery children() Method
The children() method returns all direct children of the selected element. This method
only traverse a single level down the DOM tree. The following example returns all
elements that are direct children of each <div> elements:
$(document).ready(function(){
$("div").children();
});
jQuery find() Method
The find() method returns descendant elements of the selected element, all the way down
to the last descendant. The following example returns all <span> elements that are
descendants of <div>:
$(document).ready(function(){
$("div").find("span");
});
Question No: 47 (Marks: 05)
What will be the output of the following code?
<!DOCTYPE html>
<html>
<head></head>
<body>
<p id="demo"></p>
</body>
<script type="text/javascript">
var text="";
for (i = 4; i < 8; i++) {
if (i == 3)
continue;
text += i*3 + "<br>";
}
document.getElementById("demo").innerHTML= text;
</script>
</html>
Answer
Output:
12
15
18
21
Question No: 48 (Marks: 05)
Write a description of each of the following jQuery event methods.
bind()
die()
blur()
delegate()
Answer
bind()
Attaches one or more event handlers to the selected elements.
- **Syntax**:
$(selector).bind(event, data, function)
```
Example:
$('#myButton').bind('click', function() {
alert('Button clicked!');
});
die()
Removes event handlers attached with `.live()` (deprecated).
- **Syntax**:
$(selector).die(event, function)
```
Example:
$('#myButton').die('click');
blur()
Handles the blur event when an element loses focus.
- **Syntax**:
$(selector).blur(function)
```
Example:
$('#myInput').blur(function() {
alert('Input lost focus!');
});
```
delegate()
Attaches an event handler to elements matching a selector, including those added
dynamically.
- **Syntax**:
$(parentSelector).delegate(childSelector, event, function)
```
Example:
$('#parent').delegate('.child', 'click', function() {
alert('Child element clicked!');
});
Question No: 49 (Marks: 05)
Write any four ways which can be used to specify background-image property using
CSS3.
Length ( e.g., 12px)
Percentage (e.g., 20% )
Cover
Contain
Answer Before CSS3, the size of a background image was the actual size of the image.
CSS3 allows us to re-use background images in different contexts. The size can be
specified in lengths, percentages, or by using one of the two keywords: contain or cover.
1. The contain keyword scales the background image to be as large as possible (but
both its width and its height must fit inside the content area).
background-size: contain;
2. The cover keyword scales the background image so that the content area is
completely covered by the background image (both its width and height are equal
to or exceed the content area). As such, some parts of the background image may
not be visible in the background positioning area.
background-size: cover;
3. Length (e.g., 12px):
Sets the dimensions of the background image using fixed pixel values or other length
units.
.element {
background-image: url('image.jpg');
background-size: 12px 12px; /* Width and height in pixels */
}
4. Percentage (e.g., 20%):
Specifies the size of the background image as a percentage of the container’s
dimensions.
.element {
background-image: url('image.jpg');
background-size: 20% 20%; /* Width and height as percentages of the
container */
}
Question No: 50 (Marks: 05)
jQuery has several methods for CSS manipulation, Write the names of four methods and
explain the purpose of any two of them.
Answer
addClass() - Adds one or more classes to the selected elements
removeClass() - Removes one or more classes from the selected elements
toggleClass() - Toggles between adding/removing classes from the selected elements
css() - Sets or returns the style attribute
Example Stylesheet
important {
font-weight: bold; font-size: xx-large;
}
.blue {
color: blue;
}
addClass() Method
Adds one or more classes to one or more selected Element.
$("button").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
removeClass() Method
Remove a specific class attribute from selected elements.
$("button").click(function(){
$("h1, h2, p").removeClass("blue");
});
