Q1.

JavaScript Fundamentals
a) Explain the differences between internal and external JavaScript with suitable examples. (5
marks)
b) Write a JavaScript program that uses loops and arrays to compute the average of five
numbers entered by the user. (5 marks)

Q2. Functions and DOM Manipulation (10 marks)

a) Describe how JavaScript functions are defined and invoked. Provide an example. (4 marks)
b) Explain the Document Object Model (DOM). Write JavaScript code to dynamically create a
<div> element and append it to the body of a web page. (6 marks)

Q3. ReactJS Components and State (10 marks)

a) Differentiate between functional and class components in ReactJS. (5 marks)
b) Create a simple ReactJS component that uses state to toggle the visibility of a paragraph
when a button is clicked. (5 marks)

Q4. ReactJS with Redux (10 marks)

a) What is Redux and why is it used in React applications? (4 marks)
b) Explain the basic steps to set up Redux in a ReactJS project. (6 marks)

Q1. JavaScript Control Structures and Forms (10 marks)

a) Explain the usage of control statements (if-else, switch) in JavaScript with examples. (5
marks)
b) Write a JavaScript function that takes input from a form, validates if the input is a number,
and displays the square of the number. (5 marks)

Q2. JavaScript Events and Canvas (10 marks)

a) Describe how JavaScript handles events. Write an example that handles a button click to
change text color. (5 marks)
b) Write a script that draws a 2D rectangle and a circle on a canvas using JavaScript. (5 marks)

Q3. ReactJS Props and Environment Setup (10 marks)

a) What are props in ReactJS? How are they different from state? (4 marks)
b) Write a small ReactJS application where a parent component passes a string message to a
child component using props. (6 marks)

Q4. Optimized Code and Redux Integration (10 marks)

a) Mention some best practices to write optimized ReactJS code. (4 marks)
b) Describe the steps for installing Redux and integrating it into a ReactJS application. Include
relevant npm commands. (6 marks)

VTU question

Q1. Introduction & Integration

a) What is JavaScript? Explain its role in web development.

b) Compare internal and external JavaScript with code examples.

Q2. Variables and Data Types

a) Explain how variables are declared in JavaScript. What are var, let, and const?
b) Discuss JavaScript data types with examples.

Q3. Control Statements and Loops

a) Describe the use of if, else, and switch statements in JavaScript with examples.
b) Write a JavaScript program using a loop (for or while) to display the multiplication table of a
given number.

Q4. Arrays and Strings

a) Explain how to declare, initialize, and access arrays in JavaScript. Provide examples.
b) Demonstrate string manipulation using built-in methods like substring(), toUpperCase(), and
split().

Q5. JavaScript Functions

a) How are functions created and invoked in JavaScript?

b) Write a JavaScript function that takes an array of numbers as input and returns the maximum
value.

Q6. Form Handling

a) How can JavaScript read values from HTML form elements?

b) Write a script to validate that a form field is not empty and contains only alphabets.

Q7. DOM Manipulation

a) What is the DOM? Explain its role in JavaScript.

b) Write a JavaScript program to change the text of an HTML element with a specific ID when a
button is clicked.

Q8. Creating HTML Elements using JavaScript

a) Explain how to dynamically create HTML elements using JavaScript.

b) Write code to create a list (<ul>) and append five list items using a loop.

Q9. Event Handling

a) What are JavaScript events? Explain how to handle events with examples.
b) Write a program to change the background color of a webpage when a user clicks a button.
Q10. Drawing 2D Shapes

a) Explain how to use the <canvas> element in HTML and draw using JavaScript.
b) Write JavaScript code to draw a rectangle and a filled circle on the canvas.

Q1. Introduction to ReactJS

a) What is ReactJS? List its key features.

b) Compare ReactJS with traditional JavaScript DOM manipulation.

Q2. Syntax and JSX

a) Explain JSX syntax with examples.

b) Why is JSX preferred in React applications?

Q3. Components

a) Define a React component. Differentiate between functional and class components.

b) Write an example of each.

Q4. Communication Between Components

a) Explain how parent and child components communicate in React.

b) Provide an example where a child component sends data to a parent component via a
callback.

Q5. State and Props

a) What is state in ReactJS? Why is it important?

b) How do props differ from state? Illustrate with an example.

Q6. Reading and Updating State

a) How do you read and update the state in a class and functional component (using hooks)?
b) Write an example component that increments a counter on button click.

Q7. Passing Data Using Props

a) Explain how to pass data using props in ReactJS.

b) Write a component that takes name and age as props and displays them.

Q8. React Environment Setup

a) Explain how to set up the ReactJS environment using Node.js and npm.
b) List the steps and commands to create a new React app.

Q9. Writing Optimized React Code

a) List and explain any five best practices to write efficient ReactJS code.
b) How does conditional rendering help in performance optimization?

Q10. React Redux Integration

a) What is Redux? How does it work with React?

b) Describe the installation and setup of Redux in a React project, including npm commands.

Unit 4: ReactJS – Advanced Practical-Based Questions

(10 Marks Each)

Q1. Dynamic Component Rendering

Create a ReactJS application where a navigation bar contains buttons like "Home", "About", and
"Contact". Clicking each button should dynamically render the respective component without
reloading the page. Explain the logic behind component-based rendering.

Q2. Lifecycle Methods and Hooks

Build a React component that fetches data from a mock API (e.g., JSONPlaceholder) and
displays it in a list. Use useEffect hook to fetch the data. Explain how lifecycle management is
handled in both class and functional components.

Q3. Form Handling with Validation

Design a registration form in React that includes name, email, and password fields. Add custom
validation such that:

• Name must be alphabetic

• Email must be in valid format

• Password must be at least 8 characters

Use controlled components and explain the role of state in form handling.

Q4. State Lifting and Shared State

Create a parent component that holds a list of tasks and two child components: one for adding
tasks, and one for displaying them. Use state lifting to manage shared data across components.
Explain how you structured the data flow.
Q5. Custom Hooks

Write a custom React hook called useCounter that provides count, increment, and decrement
functions. Then use this hook in a component. Explain the benefits of custom hooks in code
modularity.

Q6. Conditional Rendering and Dynamic UI

Build a React component that displays a product catalog with a "View Details" button. Clicking
the button should expand the product card to show additional info (price, description). Use
conditional rendering to implement this and explain the logic.

Q7. Optimizing Re-Renders

Create a React app with multiple child components. Implement React.memo() and the
useCallback hook to avoid unnecessary re-renders when props or state do not change.
Demonstrate with performance profiling and justify each optimization.

Q8. React Router Integration

Integrate react-router-dom into a ReactJS application with at least three pages: Home, Profile,
and Settings. Use dynamic routing for user profiles like /profile/:userid. Show how navigation
and URL parameters are handled.

Q9. Redux Store with Async Actions

Create a React+Redux app that fetches and displays a list of posts from an API. Use redux-thunk
or redux-saga to manage async actions. Write the full Redux cycle: actions, reducers, store
configuration, and component connection.

Q10. Error Boundaries and Fallback UI

Implement an error boundary component in React that catches runtime errors in child
components and displays a fallback UI. Demonstrate with a component that intentionally
throws an error. Explain when and why error boundaries are used.

Unit 2 – Advanced Practical-Based Questions (10 Marks Each)

Q1. Responsive Design with Media Queries

Design a fully responsive web layout that adapts from mobile (≤768px) to desktop (≥1024px)
using CSS media queries. Include a header, a navigation sidebar, and a content section. Justify
the use of flexbox or grid layout.

Q2. Complex Form with Validation

Create a form for a flight booking system. Include:

• Text fields (name, destination)

• Date selectors

• Radio buttons (class of travel)

• Validation for all fields using only HTML5 and CSS.

No JavaScript is allowed. Explain how CSS pseudo-classes help in validation styling.

Q3. CSS Grid and Flexbox Integration

Develop a web-based dashboard layout using CSS Grid for structure and Flexbox for internal
alignment. Include widgets for weather, news, and stocks. Explain where and why you chose
each layout model.

Q4. Web Accessibility Implementation

Build a multi-sectioned webpage (like an article page) and apply ARIA roles, semantic HTML,
proper tab order, and alt text for images. Demonstrate how it improves accessibility for screen
readers and keyboard navigation.

Q5. Multi-Level Navigation Bar

Create a responsive, animated navigation bar using pure HTML and CSS that includes:

• Dropdown menus (hover and click-based)

• Submenus (third level)

• Hamburger menu for mobile

Explain the implementation logic and cross-browser compatibility concerns.

Q6. Interactive UI Using CSS Only

Build a photo gallery with image overlays and modal previews using only CSS. On hover, show
image titles; on click, zoom into an image with an animated modal. No JavaScript allowed.
Justify your choice of techniques.
Q7. CSS Animations and Transitions

Design a login form that includes:

• Animated background using CSS keyframes

• Smooth input focus transitions

• Animated button on hover

Explain the performance implications of CSS animations on modern browsers.

Q8. Advanced Table Layout

Create an HTML table to display a student result dashboard. Use:

• Row/column spans

• Sticky header and columns

• Zebra-striping and hover effects

Make the table responsive using CSS. Discuss trade-offs in responsive table design.

Q9. Form to Styled Invoice Generator

Create a form that collects product details (name, quantity, price) and use HTML/CSS to format
the output as an invoice (on submission). The styling should closely resemble a printed bill.
Explain how CSS pseudo-elements enhance styling.

Q10. HTML5 Multimedia Integration

Develop a video blog layout using the HTML5 <video> and <audio> tags:

• Include custom controls

• Use multiple source formats

• Include fallbacks for unsupported browsers

Explain the use of attributes like preload, poster, and track.

Unit 3 – JavaScript – 10 Questions (2 Marks Each)

1. How do you declare a variable in JavaScript?

2. What is the difference between == and === in JavaScript?

3. What is an event in JavaScript? Name any two types.

4. How do you write a function in JavaScript?

5. What is the DOM in JavaScript?

6. How can you access the value of a text input field with ID userName?
 7. Write the syntax to create an array of 5 numbers.

8. How is let different from var?

9. What does document.createElement() do?

10. Write one line of code to change the inner text of an element with ID message.

Unit 4 – ReactJS – 10 Questions (2 Marks Each)

1. What is the role of props in React?

2. Define a functional component in React.

3. What is the use of the useState hook?

4. Mention one key difference between ReactJS and vanilla JavaScript DOM manipulation.

5. How can you pass data from a parent to a child component in React?

6. What is JSX in React?

7. What is the purpose of npm start in a React app?

8. Name any two lifecycle methods in class components.

9. What is the role of key prop in a list rendering?

10. Write a simple arrow function component named Hello.