Web Engineering Exam

Section 1: React - Multiple Choice Questions (10 Marks)

Each question carries 1 mark. Choose the correct option.
1. Which hook should be used to fetch data when a
component mounts in React? a) useState b) useEffect c)
useContext d) useReducer
2. What is the primary purpose of the useReducer hook in
React? a) To replace Redux in all scenarios b) To manage
complex state logic within a component c) To create a new
context provider d) To optimize performance for
numerous state variables
3. How do you prevent unnecessary re-renders in a
component that accepts props? a) Using
shouldComponentUpdate b) Wrapping the component
with React.memo c) By using useState hook d) By using
useEffect with an empty dependency array
4. What is the correct way to update the state based on the
previous state in a functional component? a)
setState(newState) b) setState(prevState => prevState +
1) c) setState(this.state + 1) d) setState(state + 1)
5. Which statement is true about the useContext hook? a) It
can only be used within class components. b) It replaces
Redux for global state management. c) It provides a way to
pass data through the component tree without having to
 pass props down manually. d) It is used to store data in the
browser's local storage.
Section 2: React - Coding Questions (15 Marks)
Each question carries 5 marks.
1. Write a React functional component named UserProfile
that uses the useState hook to manage a user's name and
age, and displays them.
2. Explain with a code snippet how to use the useEffect hook
to update the document title every time a component’s
count state changes.
3. Create a custom hook named useLocalStorage that allows
components to store and retrieve a value from local
storage.
Section 3: JavaScript - Multiple Choice Questions (5 Marks)
Each question carries 1 mark. Choose the correct option.
1. What is the output of the following code snippet?
javascriptCopy code
console.log(typeof typeof 1);
a) "number" b) "string" c) "object" d) "undefined"
2. Which method is used to create a new array from an
existing array without modifying the original array in
JavaScript? a) map() b) filter() c) reduce() d) forEach()
 3. How do you declare a read-only variable in JavaScript? a)
var b) let c) const d) static
Section 4: JavaScript - Coding Questions (5 Marks)
1. Write a JavaScript function debounce that limits the rate
at which a function can fire. The function should take two
arguments: a function func and a delay wait.

Solutions to Web Engineering Exam

Section 1: React - Multiple Choice Questions
1. Which hook should be used to fetch data when a
component mounts in React?
 Answer: b) useEffect
2. What is the primary purpose of the useReducer hook in
React?
 Answer: b) To manage complex state logic within a
component
3. How do you prevent unnecessary re-renders in a
component that accepts props?
 Answer: b) Wrapping the component with
React.memo
 4. What is the correct way to update the state based on the
previous state in a functional component?
 Answer: b) setState(prevState => prevState + 1)
5. Which statement is true about the useContext hook?
 Answer: c) It provides a way to pass data through the
component tree without having to pass props down
manually.
Section 2: React - Coding Questions
1. Write a React functional component named UserProfile
that uses the useState hook to manage a user's name and
age, and displays them.
import React, { useState } from 'react'; function UserProfile()
{ const [name, setName] = useState('John Doe'); const [age,
setAge] = useState(30); return ( <div> <p>Name: {name}</p>
<p>Age: {age}</p> </div> ); }
2. Explain with a code snippet how to use the useEffect
hook to update the document title every time a
component’s count state changes.
import React, { useState, useEffect } from 'react'; function
Counter() { const [count, setCount] = useState(0); useEffect(()
=> { document.title = `You clicked ${count} times`; }, [count]);
return ( <div> <p>You clicked {count} times</p> <button
onClick={() => setCount(count + 1)}>Click me</button> </div> );
}
 3. Create a custom hook named useLocalStorage that allows
components to store and retrieve a value from local
storage.
import { useState } from 'react'; function useLocalStorage(key,
initialValue) { const [storedValue, setStoredValue] = useState(()
=> { try { const item = window.localStorage.getItem(key); return
item ? JSON.parse(item) : initialValue; } catch (error)
{ console.log(error); return initialValue; } }); const setValue =
value => { try { setStoredValue(value);
window.localStorage.setItem(key, JSON.stringify(value)); } catch
(error) { console.log(error); } }; return [storedValue, setValue]; }
Section 3: JavaScript - Multiple Choice Questions
1. What is the output of the following code snippet?
 Answer: b) "string"
2. Which method is used to create a new array from an
existing array without modifying the original array in
JavaScript?
 Answer: a) map()
3. How do you declare a read-only variable in JavaScript?
 Answer: c) const
Section 4: JavaScript - Coding Questions
1. Write a JavaScript function debounce that limits the rate
at which a function can fire.
function debounce(func, wait) { let timeout; return function
executedFunction(...args) { const later = () =>
{ clearTimeout(timeout); func(...args); }; clearTimeout(timeout);
timeout = setTimeout(later, wait); }; }

React Development Exam - Multiple Choice Questions

React Basic Concepts (5 Marks)
Q1. What will the following React component render? (1
Mark)
jsxCopy code
function WelcomeMessage() { const [message, setMessage] =
React.useState("Hello, World!"); return <h1>{message}</h1>; }
a) A heading with "Hello, World!"
b) A heading with "Welcome Message"
c) Nothing, it will cause an error
d) A blank heading
Q2. Match the following React terms with their descriptions:
(2 Marks)
  Column A:
1. JSX
2. Props
3. State
4. Lifecycle Methods
 Column B: a) Used to pass data to components
b) JavaScript XML, a syntax extension for JavaScript
c) Methods that are called at different stages of a
component's existence
d) Holds information that may change over the lifetime of
a component
a4, b1, c2, d3
a1, b2, c3, d4
a2, b3, c1, d4
a2, b1, c3, d4
Q3. What is the purpose of the useEffect hook in a React
functional component? (1 Mark) a) To create a state variable
b) To execute side effects in the component
c) To prevent re-renders
d) To handle user input
React Advanced Concepts (5 Marks)
Q4. What will be the output of the following code snippet in a
React component? (1 Mark)
jsxCopy code
const [count, setCount] = React.useState(0); let countValue =
count; setCount(count + 1); console.log(countValue);
a) 1
b) 0
c) 2
d) The code will cause an error
Q5. In React, which of the following is a correct way to handle
conditional rendering? (1 Mark) a) <div>{ if(condition) { return
<Component /> } }</div>
b) <div>{ condition && <Component /> }</div>
c) <div>{ condition ? <Component /> : null }</div>
d) Both b and c
Q6. Consider a component with a useState hook. What
happens when the setter function of useState is called with
the same value as the current state? (1 Mark) a) The
component will always re-render
b) The component will not re-render
c) An error will occur
d) The state will become undefined
Q7. What is the primary reason for using keys in lists in React?
(1 Mark) a) To improve performance during updates
b) To uniquely identify each element
c) To help React track which items have changed
d) All of the above
React Basic Concepts
Q1. What will the following React component render?
 Answer: a) A heading with "Hello, World!"
Q2. Match the following React terms with their descriptions:
 Answer: a1, b2, c4, d3


1. JSX - b) JavaScript XML, a syntax extension for

JavaScript


2. Props - a) Used to pass data to components



3. State - d) Holds information that may change

over the lifetime of a component


4. Lifecycle Methods - c) Methods that are called at

different stages of a component's existence
Q3. What is the purpose of the useEffect hook in a React
functional component?
  Answer: b) To execute side effects in the component
React Advanced Concepts
Q4. What will be the output of the following code snippet in a
React component?
 Answer: b) 0
 Explanation: React state updates are asynchronous,
and console.log(countValue) will run before the state
update is applied.
Q5. In React, which of the following is a correct way to handle
conditional rendering?
 Answer: d) Both b and c
 b) <div>{ condition && <Component /> }</div> and
c) <div>{ condition ? <Component /> : null }</div>
are both correct.
Q6. Consider a component with a useState hook. What
happens when the setter function of useState is called with
the same value as the current state?
 Answer: b) The component will not re-render
 Explanation: React's re-rendering optimization will
prevent a re-render if the state is set to the same
value.
Q1. What will be the output of the following HTML and CSS
snippet? (1 Mark)
htmlCopy code
<!DOCTYPE html> <html> <head> <style> .box { width: 50px;
height: 50px; } .red { background-color: red; } .blue
{ background-color: blue; } </style> </head> <body> <div
class="box red"></div> <div class="box blue"></div> </body>
</html>
a) Two boxes, one red and one blue, each 50px by 50px
b) Two red boxes, each 50px by 50px
c) Two blue boxes, each 100px by 100px
d) No boxes, as the CSS is incorrect
Q2. Match the following HTML tags with their correct
descriptions: (2 Marks)
 Column A:
1. <a>
2. <table>
3. <div>
4. <script>
 Column B: a) Used for linking to other pages or resources
b) Non-semantic container for other elements
 c) Embeds JavaScript code or files
d) Used to create tables
a1, b3, c4, d2
a2, b1, c3, d4
a1, b4, c2, d3
a1, b3, c2, d4
Q3. What does the following CSS selector target? (1 Mark)
cssCopy code
#container > .item { color: blue; }
a) All elements with class item directly inside the element with
ID container
b) All elements with class item
c) The first child with class item inside any container
d) All direct children inside the element with ID container
JavaScript Section (5 Marks)
Q4. What will be the output of the following JavaScript code
snippet? (1 Mark)
javascriptCopy code
console.log(2 + '2');
a) 22
b) 4
c) '22'
d) '4'
Q5. Which statement about JavaScript promises is true? (1
Mark) a) A promise can only be resolved once.
b) A promise once rejected can be resolved later.
c) Promises are used to handle synchronous operations.
d) then() is used to catch errors in promises.
Q6. Match the following JavaScript methods with their
descriptions: (2 Marks)
 Column A:
1. Array.map()
2. Array.filter()
3. Array.reduce()
4. Array.forEach()
 Column B: a) Executes a function for each array element
without returning
b) Creates a new array with elements that pass a test
c) Creates a new array with the results of calling a function
for every array element
d) Reduces the array to a single value
a4, b2, c1, d3
a3, b1, c2, d4
a2, b3, c4, d1
a1, b2, c3, d4
Q7. Given the following code, what will be logged to the
console? (1 Mark)
javascriptCopy code
let x = 10; const changeX = () => { x = 20; } changeX();
console.log(x);
a) 10
b) 20
c) undefined
d) Error

Q1. What will be the output of the following HTML and CSS
snippet?
 Answer: a) Two boxes, one red and one blue, each 50px by
50px
Q2. Match the following HTML tags with their correct
descriptions:
 Answer: a1, b3, c4, d2
 <a>: Used for linking to other pages or resources
 <div>: Non-semantic container for other elements
 <script>: Embeds JavaScript code or files
 <table>: Used to create tables
Q3. What does the following CSS selector target?
  Answer: a) All elements with class item directly inside the
element with ID container
JavaScript Section
Q4. What will be the output of the following JavaScript code
snippet?
 Answer: c) '22'
 Explanation: In JavaScript, adding a number and a
string will result in string concatenation.
Q5. Which statement about JavaScript promises is true?
 Answer: a) A promise can only be resolved once.
 Explanation: A promise represents a value that may
be available now, in the future, or never, and once
settled (either resolved or rejected), it cannot change
its state.
Q6. Match the following JavaScript methods with their
descriptions:
 Answer: a4, b2, c1, d3
 Array.map(): Creates a new array with the results of
calling a function for every array element
 Array.filter(): Creates a new array with elements that
pass a test
 Array.forEach(): Executes a function for each array
element without returning
  Array.reduce(): Reduces the array to a single value
Q7. Given the following code, what will be logged to the
console?
 Answer: b) 20
 Explanation: The changeX function changes the value
of x to 20, and this change is reflected when x is
logged to the console.

JavaScript Solutions
Task 1: Change Text Color on Click
htmlCopy code
<p id="text">Click me to change my color.</p> <script>
document.getElementById("text").addEventListener("click",
function() { this.style.color = 'blue'; }); </script>
Task 2: Load JSON Data and Display
htmlCopy code
<div id="data"></div> <script>
fetch('https://jsonplaceholder.typicode.com/posts/1') .then(res
ponse => response.json()) .then(json =>
{ document.getElementById("data").innerText = json.title; });
</script>
Task 3: Toggle Visibility of an Element
htmlCopy code
<button id="toggleButton">Toggle Div</button> <div
id="toggleDiv">This is a toggleable div.</div> <script>
document.getElementById("toggleButton").addEventListener("
click", function() { var div =
document.getElementById("toggleDiv"); div.style.display =
div.style.display === "none" ? "block" : "none"; }); </script>
jQuery Solutions
Task 1: Animate an Element
htmlCopy code
<button id="animateButton">Animate Div</button> <div
id="animateDiv" style="background-color: lightblue; height:
100px; width: 100px;"></div> <script> $
('#animateButton').click(function() { $
('#animateDiv').animate({ height: '200px', width: '200px' }); });
</script>
Task 2: AJAX Request to Load Data
htmlCopy code
<button id="loadDataButton">Load Data</button> <div
id="content"></div> <script> $
('#loadDataButton').click(function() { $.ajax({ url:
'https://jsonplaceholder.typicode.com/posts/1', type: 'GET',
success: function(response) { $
('#content').text(response.title); } }); }); </script>
Task 3: Append List Items
htmlCopy code
<button id="addItemButton">Add List Item</button> <ul
id="myList"> <li>List Item 1</li> </ul> <script> $
('#addItemButton').click(function() { $
('#myList').append('<li>New Item</li>'); }); </script>