TIME 12:45 PM to 4:15 PM (lunch break 2:15 to 2:45 pm in class

only)

4:30 to 6:30 pm
Tech Round by Feeroz sir and Shazia Mam

Jr/Intern FRONTEND DEV PAPER

Instructions:
 Choose the correct answer for each question.
 Each question carries one mark.
 No negative marking.
Section 1: HTML (6 Questions)
1. Which of the following attributes is used to specify a character
encoding for an HTML document?
 A) charset
 B) encoding
 C) content
 D) type
2. What is the purpose of the <template> tag in HTML5?
 A) To define a reusable block of HTML that is not rendered
when the page loads
 B) To create a form template
 C) To define a layout structure
 D) To include external templates
3. How can you specify that an input field should accept only
numeric values?
 A) <input type="number">
 B) <input type="text" pattern="\d+">
  C) Both A and B
 D) <input type="numeric">
4. What is the difference between <div> and <span> elements
in HTML?
 A) <div> is inline, while <span> is block-level
 B) <div> is block-level, while <span> is inline
 C) Both are block-level elements
 D) Both are inline elements
5. Which HTML element is used to define a section in a document
that can be styled with CSS?
 A) <section>
 B) <style>
 C) <div>
 D) Both A and C
6. What does the sandbox attribute do when added to
an <iframe> element?
 A) It allows all scripts to run within the iframe
 B) It restricts actions within the iframe for security
purposes
 C) It allows cross-origin requests
 D) It enables full screen mode
Section 2: CSS (6 Questions)
7. Which property is used to create space between an element's
border and its content?
 A) margin
 B) padding
 C) border-spacing
 D) spacing
8. What does the CSS calc() function do?
  A) It calculates the sum of two numbers only.
 B) It allows you to perform calculations to set CSS
property values.
 C) It calculates the height of an element.
 D) None of the above.
9. How can you create a CSS grid layout with three equal
columns?
 A) display: grid; grid-template-columns: 1fr 1fr 1fr;
 B) display: flex; flex-direction: row;
 C) display: inline-block; width: 33.33%;
 D) All of the above.
10. What does the !important rule in CSS do?
 A) It makes a style rule more specific.
 B) It overrides any other style rules for that property.
 C) It applies styles only when certain conditions are met.
 D) It marks a style as deprecated.
11. Which of the following CSS properties can be animated
using CSS transitions?
 A) background-color
 B) display
 C) position
 D) float
12. How do you apply styles conditionally based on screen
size using CSS?
 A) Media queries
 B) Conditional statements in CSS
 C) Using JavaScript only
 D) By using different stylesheets for different devices
Section 3: Bootstrap (6 Questions)
13. What class would you use to create a responsive table in
Bootstrap?
 A) .table-responsive
 B) .table-fluid
 C) .table-fixed
 D) .responsive-table
14. In Bootstrap, how do you align text to the center within a
column?
 A) .text-center
 B) .align-center
 C) .justify-content-center
 D) .text-middle
15. Which Bootstrap component would you use to create a
tabbed interface?
 A) Accordion
 B ) Carousel
– C ) Navs
– D ) Alerts
16. How can you customize Bootstrap's default variables?
– A ) By editing Bootstrap's source files directly
– B ) By using Sass variables
– C ) By overriding styles in your custom stylesheet
– D ) All of the above
17. What class would you use to create a modal dialog in
Bootstrap?
– A ) .modal-dialog
– B ) .modal-content
– C ) .modal
– D ) All of the above
18. How do you implement responsive images in Bootstrap
5?
– A ) Use .img-responsive class only
– B ) Use .img-fluid class only
 – C ) Use both classes together
– D ) Use .responsive-img class only
Section 4: JavaScript (6 Questions)
19. What will be the output of console.log([] + []) in
JavaScript?
 A) []
 B) ""
 C) undefined
 D) TypeError
20. Which method can be used to convert an array into a
string in JavaScript?
– A ) join()
– B ) concat()
– C ) split()
– D ) push()
21. In JavaScript, what does closure mean?
– A ) The ability of a function to remember its lexical scope
even when it is executed outside that scope
– B ) The process of closing an application
– C ) The ability to encapsulate data within an object
– D ) None of these
22. Which operator is used to check both value and type in
JavaScript?
– A ) ==
– B ) ===
– C ) !==
– D ) =!
23. What will be logged to the console if you
run console.log(typeof NaN) in JavaScript?
– A ) "number"
– B ) "NaN"
– C ) "undefined"
– D ) "object"
24. Which function can be used to execute asynchronous
code after a delay in JavaScript?
 – A ) setTimeout()
– B ) requestAnimationFrame()
– C ) setInterval()
– D ) asyncFunction()
Section 5: React (6 Questions)
25. What lifecycle method is called immediately after a
component is mounted in React class components?
– A ) componentDidMount()
– B ) componentWillMount()
– C ) render()
– D ) componentDidUpdate()
26. In React, what is the purpose of keys in lists?
– A ) To uniquely identify elements for efficient updates and
rendering
– B ) To store additional data related to each element
– C ) To manage state across components
– D ) To define styles for list items
27. How do you prevent default form submission behavior in
React?
– A ) By using event.preventDefault() inside onSubmit handler
– B ) By returning false from onSubmit handler
– C ) By setting action="" on form element
– D ) None of these
28. Which hook would you use to manage complex state logic
in React components?
– A ) useState()
– B ) useEffect()
– C ) useReducer()
– D ) useContext()
29. How can context be utilized in React applications?
– A ) For prop drilling
— B ) For global state management without passing props
down manually
— C ) For rendering lists efficiently
— D ) None of these
30. In React, what does Suspense allow you to do?
— A ) Handle errors during rendering
 — B ) Load components lazily while showing fallback content
— C ) Manage state across multiple components
— D ) Optimize performance by memoizing components

------------------------------------------------------------------------------------------------
--------------

Aptitude and Quantitative MCQs

1. If the sum of three consecutive integers is 72, what is
the smallest of these integers?
 A) 23
 B) 24
 C) 25
 D) 26
2. A car travels 150 km in 2 hours and then 100 km in 1
hour. What is the average speed of the car for the
entire journey?
 A) 50 km/h
 B) 60 km/h
 C) 70 km/h
 D) 75 km/h
3. If a pair of shoes costs $80 after a discount of 20%,
what was the original price?
 A) $90
 B) $100
 C) $110
 D) $120
4. In a class of 30 students, if the average score is 75,
what is the total score of all students?
 A) 2100
 B) 2250
 C) 2400
 D) 3000
5. What is the least common multiple (LCM) of 12 and 15?
 A) 30
 B) 60
 C) 90
 D) 120
6. A train leaves a station at 2:00 PM traveling at a speed
of 80 km/h. If it travels for 3 hours, what time will it
arrive at its destination?
 A) 4:00 PM
 B) 5:00 PM
 C) 6:00 PM
 D) 7:00 PM
7. If a rectangle has a length that is twice its width and
the perimeter is 48 cm, what is the width of the
rectangle?
 A) 8 cm
 B) 10 cm
 C) 12 cm
 D) 16 cm
8. A bag contains red, blue, and green marbles in the ratio
of 2:3:5. If there are a total of 100 marbles, how many
are blue?
 A) 20
 B) 30
  C) 40
 D) 50
9. If a worker can complete a job in 15 days, how many
days will it take for three workers to complete the same
job working together?
 A) 5 days
 B) 10 days
 C) 15 days
 D) 20 days
10. What is the probability of rolling an even number
on a standard six-sided die?
 A) 1661
 B) 1331
 C) 1221
D) 2332

JS PROBLEMS SOLVE ANY 2

1. Problem Statement: Stopwatch Application

Objective:
Develop a simple stopwatch application using HTML, CSS, and
JavaScript. The stopwatch should allow users to start, stop, and
reset the timer, displaying elapsed time in hours, minutes,
seconds, and milliseconds.Functional Requirements:
1. User Interface:
 Create a visually appealing interface with:
 A display area to show the elapsed time in the
format HH:MM:SS:MS.
  Three buttons labeled "Start", "Stop", and "Reset".
2. Timer Functionality:
 Implement a timer that counts up from 0.
 The timer should increment milliseconds every 10
milliseconds.
 Convert the elapsed time into hours, minutes, seconds,
and milliseconds.
3. Button Functionality:
 Start Button:
 When clicked, it should start or resume the
stopwatch.
 Disable the Start button while the timer is running.
 Stop Button:
 When clicked, it should pause the stopwatch.
 Enable the Start button to allow resuming.
 Reset Button:
 When clicked, it should reset the stopwatch
to 00:00:00:00.
 Stop the timer if it is running.

2. Debounce Function:
1. Write a debounce function that limits the rate
at which a function can fire. For example, if a
user types in a search box, you want to wait
until they stop typing for a certain amount of
time before making an API call.
2. Example: debounce(func, wait) should return a
new function that delays invoking func until
after wait milliseconds have elapsed since the
last time it was invoked.
 3. Find the largest and second largest in an array
[1, 3, 5, -5, 1]; ans : 5 and 3

REACT PROBLEM SOLVE ANY 2

1. Problem Statement: Todo Application in React

Objective:
Develop a functional Todo application using React that allows
users to manage their tasks efficiently. The application should
enable users to add, delete, and mark tasks as
completed.Functional Requirements:
1. User Interface:
 Create a clean and user-friendly interface that includes:
 A header displaying the title "Todo List".
 An input field for entering new todo items.
 A button to add the todo item.
 A list that displays all the current todo items with
options to mark them as completed or delete them.
2. State Management:
 Utilize the useState hook to manage the state of the todo
items.
 Each todo item should be represented as an object
containing:
 id: A unique identifier for each todo (can be
generated using crypto.randomUUID()).
 title: The text of the todo item.
 isCompleted: A boolean indicating whether the task
is completed.
3. Adding Todos:
 Implement a function to handle adding new todos:
 On form submission, prevent the default behavior.
 Add the new todo item to the state array.
 Clear the input field after adding.
4. Deleting Todos:
 Implement functionality to delete a todo item:
 Each todo item should have a delete button.
 On clicking the delete button, remove the
corresponding todo from the state.
5. Marking Todos as Completed:
 Allow users to mark a todo item as completed:
 Clicking on a todo item should toggle its completion
status.
 Completed todos can be visually distinguished (e.g.,
by crossing out or changing color).
6. Conditional Rendering:
 Use conditional rendering to display appropriate
messages when there are no todos (e.g., "No tasks
available").
 Optionally, filter and display completed and active todos
separately.
7. Persistent State (Optional):
 Implement local storage functionality to save todos so
that they persist even when the page is refreshed.

2. Problem Statement: Show/Hide Password Functionality in

React
 Objective:
Develop a simple React component that implements
show/hide password functionality for a password
input field. This feature enhances user experience
by allowing users to toggle the visibility of their
password while entering it.Functional
Requirements:
 User Interface:
 Create a form with a password input field.
 Include an eye icon (or a button) next to the
password input that users can click to toggle the
visibility of the password.
 Optionally, provide a label for the password input.
3. Problem Statement: Rating Component in React
 Objective:
Develop a customizable rating component in React
that allows users to rate items using a star-based
system. The component should enable users to
select a rating visually and provide feedback based
on their selection.Functional Requirements:
 User Interface:
 Create a visual representation of the rating system
using stars (or other icons).
 Allow users to hover over stars to preview their
selection and click to set the rating.
 Display the current rating value below the stars.
 State Management:
 Use hooks to manage the current rating value.
 The initial rating can be set to zero or a predefined
value.
 Hover and Click Functionality:
 Implement hover functionality to highlight stars
when the user hovers over them.
 On clicking a star, set the rating value and persist
this value in the component's state.