WEBDEV REVIEWER (FROM QUIZZES) 19.
It is a two-dimensional layout system that
enables you to define rows and columns.
IDENTIFICATION
grid
Q1 20. It is used to apply styles to an element
when a user hovers over it with a pointing
1. It starts on a new line and takes up the full
device, such as a mouse. Hover
width available. block
21. Which CSS property controls the opacity
2. It allows you to change property values
of an element? opacity
smoothly (over a given duration) rather
22. What does the :hover pseudo-class do in
than having those changes take place
CSS? Applies styles when an element is
instantly. transition
hovered over by the mouse
3. It defines the styles applied to HTML
23. How would you scale an element 150%
elements. properties
horizontally using CSS? transform:
4. It enables responsive design by applying
scaleX(1.5);
specific styles based on the device's 24. How can you make a box’s width
characteristics, such as screen width, transition from 100px to 300px over 2
height, or orientation. media queries seconds when hovered? transition: width
5. It specifies the speed curve of the 2s; width: 300px;
transition effect. transition-timingfunction 25. The animation-duration property is used
6. In setting the transparency level of an to: Define how long an animation takes to
element, the value of 0 is equivalent to? complete
transparent 26. What does transform: rotate(10deg); do to
7. A shorthand property for the grid-row-gap an element? Rotates it by 10 degrees
and grid-column-gap properties. grid-gap clockwise
8. It changes the angle of either the 27. Which of the following is a valid
horizontal or vertical axis (or both axes) by transition-timing-function value? ease-in-
a specified number of degrees. skew out
9. It sets the thickness of the font. font- 28. Which property in CSS is used to
weight smoothly change property values over
10. This holds the flex or grid items. container time? transition
11. It allows you to create smooth transitions 29. What does transform: skewX(30deg); do?
and effects on elements in a web page. Skews the element 30 degrees horizontally
Animation 30. How do you make a div’s background
12. 1 point is equivalent to _________ of an color change with a 0.5s delay when
inch 1/72 hovered? transition: background-color
13. It aligns the flex items along the main axis. 0.5s;
justify-content 31. What value should animation-iteration-
14. It defines the specific steps of the count be set to for an animation to repeat
animation sequence. keyframe forever? infinite
15. The basis of content distribution on the 32. What does the :active pseudo-class in
web is rooted in the ____________? CSS CSS apply to? An element being clicked
box model and held
16. It defines in which direction the container 33. What does the transition-delay property
wants to stack the flex items. flex- do? Specifies the start time delay for a
direction transition
17. The animation alternates between playing 34. What value does the animation-fill-mode
backward and forward. alternate-reverse need to retain the last keyframe's styles?
18. It displays a border that makes the forwards
element appear raised out from the page. 35. Which shorthand property can set all four
outset sides of an element’s margin? Margin
Q2
1. What is the correct syntax for creating a 20. Which CSS property positions an element
function in JavaScript? function relative to its normal position relative
functionName() {} 21. How do you define a function in
2. What is the main difference between null JavaScript? function myFunction() {}
and undefined in JavaScript? undefined 22. What is the correct syntax for adding a
means a variable has not been assigned a grid template column in CSS Grid? grid-
value, while null explicitly represents "no template-columns: repeat(2, 1fr);
value." 23. How do you write a single-line comment
3. Which statement about let, const, and var in JavaScript? // This is a comment
is false? const variables cannot be reassigned 24. Which CSS float property is used to wrap
or modified in any way.
text around an image on the left side?
4. What is the difference between var and let
float: left;
in JavaScript? var variables are 25. What syntax is used to apply a CSS
hoisted and initialized with undefined,
animation? @keyframes
while let variables are in the temporal dead
26. What is the output of console.log(10 +
zone
"5"); in JavaScript? 105
5. Which of the following is NOT a valid
27. What will the background color be when
JavaScript variable declaration? int a = 40;
the screen width is 480px?
6. What type of layout does CSS Grid
CSS:
support? Two-dimensional
body { background-color: Red; } @media
7. What is the default alignment value for
(max-width: 480px) {
`justify-self` in CSS Grid? stretch
body { background-color: lightcoral; } }
8. In JavaScript, what does `const` keyword
lightcoral
define? A block-scoped variable that
28. Given let x = 5; x = x + "10"; , what is
cannot be reassigned
console.log(x);? 510
9. What is a fundamental concept of
29. What is the value of x after the following
JavaScript functions? First-class functions
code? undefined
10. What CSS model helps in one-
30. What is the result of Boolean(0) in
dimensional layout design? Flexbox
JavaScript? false
11. Which CSS display property hides an
31. What is the output of console.log(25 + 5);
element without deleting it from the
in JavaScript? 30
document? none
32. What will console.log(5 * null); output in
12. Which CSS property specifies the
JavaScript? 0
behavior of an element’s display box?
33. If a flex container has justify-content:
display
13. What is the default data type of a variable center;, where will its items align? In the
center
in JavaScript? Undefined
34. What will grid-template-columns:
14. What is the main purpose of media
repeat(3, 1fr); produce in CSS Grid? Three
queries in CSS? To adjust layouts for
equal-width columns
different devices
35. Given let x = 5; x = x + 10; , what is
15. What is a property of JavaScript strings?
console.log(x);? 15
They are casesensitive
16. How do you set a flex container in CSS? TRUE OR FALSE
display: flex;
17. What is the correct syntax for defining a 1. You can individually manipulate each four
media query for screen widths below areas of the box model. True
768px? @media (max-width: 768px) 2. An HTML element becomes a grid
18. How do you define a variable in JavaScript container when its display property is set
using block scope? Both a and b to flex. False
19. Which JavaScript method retrieves the 3. Transforms are supported on all major
number of elements in an array? .length browser versions with vendor suffixes.
False
4. “em” is a relative unit based on the font 2. What is the output of this code?
size of the root element. False let arr = []; arr[0]
5. “grid-area” is a shorthand property for the = "A"; arr[2] =
"C";
grid-row-start, grid-column-start, grid- D console.log(arr.length);
row-end, and grid-column-end a. 0
properties. True b. 1
c. 2
6. The translateX function allows you to
d. 3
move an element on a vertical axis; 3. What does the following function
translateY is for moving along the return?
horizontal axis. False function Sum(val1, val2) {
7. “#ff0000” is an example of Hexaoctal var result = val1 + val2;
}
Color. False B console.log(Sum(34, 35));
8. The float property is used to position a. 3435
elements to the left or right of their b. Undefined
c.69
container, allowing other content to wrap d. Error
around them. True
9. The CSS3 Transforms gives a way to 4. What is the output of this code?
rotate, relocate, resize, and skew HTML var x = 10; if
(true) { let x =
elements in both two-dimensional
20;
spaces. False console.log(x);
10. Groove border-style displays a border that B }
appears to be carved into the page. True console.log(x);
a. 10,20
11. Variables declared with var are hoisted to
b. 20,10
the top of their scope but initialized with c. 20,20
undefined. True d. Error
12. Variables in JavaScript are weakly typed 5. What is the output of this code?
let a = "Hello"; let b =
variables. It does not require a data type
"World"; console.log(a
to be declared. True + " " + b);
13. Boolean is a primitive data type in A
a. Hello World
JavaScript. Boolean can have only two b. HelloWorld
values, on and off. False c. ReferenceError
14. Inner function can access variables and d. Error
6. What is the output of this code?
parameters of outer function. However,
function example(a = 5, b = a * 2) {
outer function cannot access variables
console.log(a, b);
defined inside inner functions. True } example();
15. An arguments object is still valid even if example(3);
function does not include any A example(undefined, 10);
parameters. True a. 5 10, 3 6, 5 10
b. 5 10, 3 6, undefined 10
OUTPUT TRACING
c. 5 10, 3 6, 5 undefined
d. 5 10, 5 10, undefined 10
1. What is the output of this code?
7. What is the output of this code?
function test() {
console.log(arguments[0]); function greet(name = "Guest") {
} return `Hello, ${name}!`;
C test(10, 20); D }
a. Error console.log(greet("Alice"));
b. 20 console.log(greet());
c. 10 a. Undefined; Hello, Guest!
d. Undefined b. Hello, Alice!; Error
c. Error; Hello, Guest!
d. Hello, Alice!; Hello, Guest!
8. What is the output of this code? </body>
var a; </html>
console.log(a); The button's background color changes to
C red, and the text becomes "Action
a. null
b. Error Performed!" on double-click.
c. undefined 3. Evaluate the process depicted in the
d. NaN image above. What role does a web server
9. What is the output of this code? (web host) play in ensuring that website files
var x = 55; if are accessible to users?
(true) { var x =
56;
console.log(x);
}
B
console.log(x);
a. 55, 55 It provides a physical space for storing
b. 56, 56 website files and delivers them to users
c. 56, 55
when requested via the internet.
d. Undefined
4. It is also called website address. DOMAIN
10. What is the output of this code? 5. These TLDS are introduced to give more
var a = 5; variety. NEW gTLD
(function () { 6. In the web address, “mail.google.com”,
console.log(a); what part is the second level domain?
var a = 10;
GOOGLE
A console.log(a);
})(); 7. The server's reliability, speed, and uptime
a. undefined, 10 are crucial for your site's performance and user
b. 5, 10 experience. TRUE
c. Error
8. The “Office” refers to the hosting account
d. 5, undefined
and control panel. TRUE
9. These are customizable and allow
ADDITIONAL individuals or organizations to create a unique
web address. SLD
1. Analyze the following web addresses.
10. These domains support non-ASCII
Which one represents a subdomain, and how
characters and are used in different languages
does it relate to the main domain?
and scripts. IDNs
https://blog.example.com
11. Where should we place the script if it will
2. Evaluate the given HTML and JavaScript
manipulate the DOM? Before the closing
code. How does the event listener for the
</body> tag
dblclick event modify the button's
12. It is used in external JS where it ensures
appearance?
the script is executed after the HTML
<!DOCTYPE html>
<html> document has been fully parsed. defer
<body> 13. They define the behavior of the object.
<button id="actionButton">Perform Methods
Action</button> 14. It is a property in DOM where you can add
<script> HTML tags as part of content and it will be
rendered as HTML. innerHTML
document.getElementById("actionBu
tton").addEventListener("dblclick",
function () {
this.style.backgroundColor =
"red";
this.textContent = "Action
Performed!";
});
</script>
