Scenario 1:
A developer includes a JavaScript file in their webpage using the <script> tag. They also add a
<noscript> section that displays a message: "JavaScript is required to view this content" for users who
have disabled JavaScript in their browsers.
Question 1 (True/False):
The <noscript> content will only be displayed if the user's browser does not support JavaScript or
JavaScript is disabled.
Answer: True
Scenario 2:
A webpage uses the <script> tag to execute a JavaScript function that dynamically displays today's
date. However, if the browser does not support JavaScript, the <noscript> tag provides a fallback
message saying, "Your browser does not support JavaScript. Please update your browser."
Question 2 (True/False):
The <noscript> tag is ignored by all browsers that have JavaScript enabled, even if the JavaScript
function in the <script> tag fails to execute.
Answer: True
Scenario 1: Text Decoration
A webpage has a heading styled with text-decoration: underline; to emphasize it. However, the
designer wants to remove the underline when the user hovers over the heading.
Question 1:
Which of the following CSS rules removes the underline on hover?
A) text-decoration: none;
B) text-decoration: unset;
C) text-decoration: hover;
D) text-decoration: inherit;
Answer: A) text-decoration: none;
Scenario 2: Text Border
A developer wants to highlight a quote on the webpage by giving it a border around the text only,
without affecting the padding or margin around the text block.
Question 2:
Which CSS property is suitable for creating a border around the text content?
A) border
B) text-border
C) outline
D) text-stroke
Answer: D) text-stroke (requires browser support, commonly seen with -webkit-text-stroke).
Scenario 3: Text Background
A website's paragraph has a yellow background applied behind its text to make it more readable on a
dark background.
Question 3:
Which CSS property is used to apply a background color to the text itself?
A) background-color
B) text-background
C) text-highlight
D) color
Answer: A) background-color
Scenario 4: Text Alignment
A news website has a section where article titles are centered within their container for a clean and
uniform look.
Question 4:
Which CSS property aligns the text to the center?
A) justify-content
B) align-items
C) text-align
D) vertical-align
Answer: C) text-align
Scenario 1: Opacity Transition
A developer creates a button that fades in when a user hovers over it. The button starts with opacity:
0.5 and transitions to opacity: 1.
Question 1:
Which of the following CSS rules will achieve the fading effect on hover?
A) transition: opacity 0.5s ease;
B) transition: all 0.5s ease;
C) Both A and B
D) animation: opacity 0.5s ease;
Answer: C) Both A and B
Scenario 2: Scale Transition
An image gallery enlarges each thumbnail slightly when hovered over, creating a zoom-in effect.
Question 2:
Which of the following CSS rules creates the zoom-in effect?
A) transform: scale(1.2);
B) transition: transform 0.5s ease;
C) transform: scale(1.2); transition: transform 0.5s ease;
D) animation: zoom-in 0.5s ease;
Answer: C) transform: scale(1.2); transition: transform 0.5s ease;
Scenario 3: Rotate Transition
A social media sharing icon rotates by 360 degrees when hovered over for a smooth spinning effect.
Question 3:
Which of the following CSS properties achieves this effect?
A) transform: rotate(360deg);
B) transition: transform 1s linear;
C) transform: rotate(360deg); transition: transform 1s linear;
D) animation: rotate 1s linear;
Answer: C) transform: rotate(360deg); transition: transform 1s linear;
Scenario 4: Filter Blur Transition
A website banner applies a blur effect to an image when the user hovers over it.
Question 4:
Which of the following CSS rules applies the blur effect smoothly?
A) filter: blur(5px);
B) transition: filter 0.3s ease;
C) filter: blur(5px); transition: filter 0.3s ease;
D) animation: blur 0.3s ease;
Answer: C) filter: blur(5px); transition: filter 0.3s ease;
Scenario 5: Brightness Transition
An e-commerce site highlights products by increasing the brightness of images on hover.
Question 5:
Which CSS rule adjusts the brightness smoothly when hovered?
A) filter: brightness(150%);
B) transition: filter 0.5s ease;
C) filter: brightness(150%); transition: filter 0.5s ease;
D) transform: brightness(150%); transition: brightness 0.5s ease;
Answer: C) filter: brightness(150%); transition: filter 0.5s ease;
