WorksheetsHTML_CSS_JS
Total questions: 30
Worksheet time: 15mins
What is the issue in the following JavaScript code?
let obj = { a: 1, b: 2 };
console.log(obj.a + obj[c]);
obj.c is not defined, leading to NaN
c should be in quotes: obj["c"]
c should be declared as a variable
No issue
Find the CSS syntax error:
.container {
width: 100px;
height: auto;
background-color: blue
}
height: auto; is invalid
Missing ; after background-color: blue
width should be in rem
No error
Fix the bug in this JavaScript function:
function multiply(a, b) {
console.log(a * b);
}
let result = multiply(4, 5);
console.log(result);
return a * b; inside the function
Remove console.log(a * b);
Call multiply as multiply(4)
No fix needed
What will be logged by the following code?
let a = 5;
let b = "5";
console.log(a == b, a === b);
true false
false true
true true
false false
Find the bug in this CSS rule:
div {
display: flex;
justify-content: center space-between;
}
justify-content cannot have both center and space-between
display: flex; is not required
center should be replaced with left
No bug
Fix the issue in this JavaScript snippet:
function test() {
let msg = "Hello";
}
console.log(msg);
Move console.log(msg); inside the function
Change let to var
Define msg globally
No fix needed
Which of the following methods creates a shallow copy of an array
slice()
map()
splice()
forEach()
Which CSS unit is NOT relative?
em
rem
px
vw
What is the purpose of the defer attribute in <script> tag?
Delays script execution until after the HTML is parsed
Prevents script execution
Makes script execution faster
Runs the script immediately
What is the purpose of event.stopPropagation() in JavaScript?
Prevents event from bubbling up the DOM tree
Prevents default action
Stops JavaScript execution
None of the above
Which selector has the highest specificity?
#id
.class
div
*
Which CSS property controls an element’s visibility without removing it from the layout?
display: none;
visibility: hidden;
opacity: 0;
z-index: -1;
Complete the function to return unique elements of an array:
function unique(arr) {
return [...new ___(arr)];
}
Set
Map
Array
Object
Which property ensures an element takes up the full width available?
width: __;
auto
100%
fit-content
max-content
How to remove duplicates from an array?
let arr = [1, 2, 2, 3, 4, 4];
let uniqueArr = __;
arr.filter()
[...new Set(arr)]
arr.splice()
arr.sort()
What will console.log(typeof NaN); print?
number
NaN
undefined
null
Which CSS property is used to create a responsive grid layout?
display: flex;
display: grid;
position: absolute;
width: 100%;
Which function executes repeatedly at a given time interval?
setInterval()
setTimeout()
clearTimeout()
requestAnimationFrame()
What does Object.freeze(obj); do?
Makes obj immutable
Deletes obj
Copies obj
Prevents obj from being used
Which function returns the first element that matches a condition in an array?
map()
filter()
find()
some()
What will be logged by the following JavaScript code?
console.log(0.1 + 0.2 === 0.3);
true
false
undefined
NaN
What does the reduce() method do in JavaScript?
Removes duplicate elements from an array
Iterates through an array and reduces it to a single value
Sorts an array
Removes elements from an array
What is the output of this JavaScript code?
console.log(typeof null);
null
object
undefined
NaN
What is the purpose of bind() in JavaScript?
It permanently binds this to a function
It calls a function immediately
It removes this from a function
It clones a function
What will be the output of this JavaScript function?
function foo() {
return {
name: "John"
};
}
console.log(foo());
undefined
SyntaxError
{ name: "John" }
null
Which CSS property controls text overflow when content exceeds its container?
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
All of the above
What does z-index control in CSS?
Transparency of an element
Positioning of an element in 3D space
Stacking order of overlapping elements
The display type of an element
Which property makes an element disappear but keeps its space occupied?
display: none;
opacity: 0;
visibility: hidden;
z-index: -1;
What is the difference between inline, inline-block, and block elements in CSS?
inline elements cannot set width or height, block elements take up full width, and inline-block allows width/height
inline and inline-block are identical
block elements are always hidden by default
None of the above
What is the correct syntax for a CSS media query that applies styles only when the screen width is 768px or smaller?
@media (max-width: 768px) { ... }
@media (min-width: 768px) { ... }
@media screen and (max-width: 768px) { ... }
Both A & C
