Quiz Space

January 2025 term · Modern Application Development II · BSCS2006

MAD 2 End Term: 13 April 2025, Set QDD3 (January 2025 term)

The IIT Madras BS Modern Application Development II (MAD 2) End Term paper sat on 13 Apr 2025, in the January 2025 term, set QDD3: 32 questions for 100 marks in 180 minutes. Every question is below with its answer. Take it as a timed mock test to be marked, or read it through first.

Questions
32
Marks
100
Duration
180 min
MCQ
26
MSQ
4
Numerical
2

Updated

Official paper: IIT M DIPLOMA AN EXAM QDD3 13 Apr 2025 · No negative marking.

Question 1

+2 marksOne correct option

Which of the following statements is true regarding the "this" keyword in JavaScript?

  1. A

    "this" always refers to the function it is declared in.

  2. B

    Arrow functions inherit "this" from their enclosing lexical scope.

  3. C

    "this" inside a class method always refers to the window object.

  4. D

    None of these

Show answer

Correct answer

  • B

    Arrow functions inherit "this" from their enclosing lexical scope.

Question 2

+2 marksOne correct option

Which of the following correctly describes the lifecycle of a Vue.js component?

  1. A

    beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeUnmount -> unmounted

  2. B

    beforeCreate -> created -> beforeMount -> beforeUpdate -> mounted -> updated -> beforeUnmount -> unmounted

  3. C

    created -> beforeCreate -> beforeMount -> mounted -> updated -> beforeUnmount -> unmounted

  4. D

    created -> beforeCreate -> beforeMount -> mounted -> beforeUnmount -> updated -> unmounted

Show answer

Correct answer

  • A

    beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeUnmount -> unmounted

Question 3

+2 marksOne correct option

Consider the below JavaScript program.

javascript
const promise = new Promise((resolve, reject) => {
reject('Error!');
resolve('Success!');
});
promise.then(console.log).catch(console.log);

What will be the output of the above program?

  1. A

    Success!
    Failed!

  2. B

    Success!

  3. C

    Failed!

  4. D

    Error!

Show answer

Correct answer

  • C

    Failed!

Question 4

+2 marksOne correct option

What is the main advantage of using JWT over session-based authentication?

  1. A

    JWTs require storing tokens on the server, reducing security risks.

  2. B

    JWTs are stateless and do not require server-side storage.

  3. C

    JWTs are shorter and more efficient than session IDs.

  4. D

    JWTs automatically expire and require no further security measures.

Show answer

Correct answer

  • B

    JWTs are stateless and do not require server-side storage.

Question 5

+2 marksOne correct option

Which of the following HTTP methods does SSE use for streaming updates to clients?

  1. A

    GET

  2. B

    POST

  3. C

    PUT

  4. D

    PATCH

Show answer

Correct answer

  • A

    GET

Question 6

+2 marksOne correct option

How does a webhook differ from an API call?

  1. A

    A webhook is triggered by an event, while an API call requires a client request.

  2. B

    A webhook always returns a response body, while an API call does not.

  3. C

    A webhook uses WebSockets for communication, while APIs use REST.

  4. D

    A webhook only supports the HTTP GET method.

Show answer

Correct answer

  • A

    A webhook is triggered by an event, while an API call requires a client request.

Question 7

+2 marksOne correct option

What is the purpose of CORS in web security?

  1. A

    To allow browsers to make requests to any domain without restrictions.

  2. B

    To prevent the server from making requests to unauthorized origins.

  3. C

    To allow a web application to request resources from a different domain securely.

  4. D

    To restrict all incoming requests to the same domain.

Show answer

Correct answer

  • C

    To allow a web application to request resources from a different domain securely.

Question 8

+3 marksOne correct option

Consider the below JavaScript program.

javascript
let arr = [4, 5, 6];
let sum = arr.reduce((acc, val, idx, array) => acc + (array[idx - 1] || 0),
0);
console.log(sum);

What will be the output of the above program?

  1. A

    6

  2. B

    NaN

  3. C

    undefined

  4. D

    9

  5. E

    15

Show answer

Correct answer

  • D

    9

Question 9

+3 marksOne correct option

Consider the below JavaScript program.

javascript
const obj = {
num: 8,
multiply: function () {
return this.num * 3;
},
};
const multiply = obj.multiply.bind({ num: 2 });
console.log(multiply());

What will be the output of the above program?

  1. A

    24

  2. B

    6

  3. C

    NaN

  4. D

    NULL

  5. E

    Error

Show answer

Correct answer

  • B

    6

Question 10

+3 marksOne correct option

Consider the below Vuex store configuration:

javascript
const store = new Vuex.Store({
state: {
items: ['Vue', 'React'],
},
mutations: {
removeItem(state, item) {
state.items = state.items.filter(i => i !== item);
},
},
actions: {
removeItemAsync({ commit }, item) {
setTimeout(() => {
commit('removeItem', item);
}, 500);
},
},
});

If the addItemAsync action is dispatched with the item 'Vue', what will be the state of items after 2 seconds?

  1. A

    []

  2. B

    [ 'Vu', 'React' ]

  3. C

    [ 'React' ]

  4. D

    [ object ]

Show answer

Correct answer

  • C

    [ 'React' ]

Question 11

+3 marksOne correct option

Consider the below Vue app.

html
<div id="app">
<router-link to="/home">Go to Home</router-link>
<router-view></router-view>
</div>
<script>
const Home = { template: '<div>Home</div>' };
const About = { template: '<div>About</div>' };
const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About },
{ path: '*', redirect: '/home' }
];
const router = new VueRouter({ routes });
new Vue({
el: '#app',
router
});
</script>

What happens when the user navigates to an undefined route like "/random"?

  1. A

    Browser navigates to /random and shows a blank page.

  2. B

    Browser navigates to /random but renders nothing.

  3. C

    Browser redirects to /home and displays "Home".

  4. D

    Error: No matching route.

Show answer

Correct answer

  • C

    Browser redirects to /home and displays "Home".

Question 12

+3 marksOne correct option

Consider the following Vue component:

javascript
Vue.component('search-component', {
data() {
return {
searchQuery: ''
}
},
watch: {
searchQuery(newQuery, oldQuery) {
this.fetchResults(newQuery)
}
},
methods: {
fetchResults(query) {
// Fetch search results
}
}
})

Which of the following statements is true?

  1. A

    The fetchResults method will be called immediately when the component is created.

  2. B

    The fetchResults method will be called only when searchQuery changes.

  3. C

    The watch property can detect changes even if the new value is the same as the old value.

  4. D

    All of these.

Show answer

Correct answer

  • B

    The fetchResults method will be called only when searchQuery changes.

Question 13

+3 marksOne correct option

Which scenario is best suited for a task queue system like Celery or RabbitMQ?

  1. A

    A real-time chat application that requires low-latency message delivery.

  2. B

    A weather API that provides instant weather data upon request.

  3. C

    A system where a webhook sends an immediate notification to a client when an event occurs.

  4. D

    A system where a user uploads a video, and it needs to be processed asynchronously.

Show answer

Correct answer

  • D

    A system where a user uploads a video, and it needs to be processed asynchronously.

Question 14

+3 marksOne correct option

Consider the following JavaScript code.

javascript
function processArray(arr) {
let result = arr.filter(item => item > 5)
.map(item => item * 2)
.reduce((sum, item) => sum + item, );
return result;
}

What will be returned when processArray([2, 6, 4, 8, 3]) is called?

  1. A

    [12, 16]

  2. B

    28

  3. C

    46

  4. D

    [6, 8]

Show answer

Correct answer

  • B

    28

Question 15

+3 marksOne correct option

Examine the following JavaScript code.

javascript
function processData() {
let data = [1, 2, 3, 4];
let result = data.forEach(item => {
if (item % 2 === 0) {
return item * 10;
}
});
return result;
}

What will be returned when processData() is called?

  1. A

    [20, 40]

  2. B

    [1, 20, 3, 40]

  3. C

    [10, 20, 30, 40]

  4. D

    undefined

Show answer

Correct answer

  • D

    undefined

Question 16

+3 marksOne correct option

Consider the following JavaScript code.

javascript
var value = 30;
const firstObj = {
value: 10,
displayValue: function() {
return this.value;
}
};
const secondObj = {
value: 20
};
const displayValue1 = firstObj.displayValue.apply(secondObj);
const displayValue2 = firstObj.displayValue.apply();
const displayValue3 = function() {
return firstObj.displayValue.apply(this);
}.call(secondObj);
const displayValue4 = firstObj.displayValue.bind(this)(20);
console.log("val1", displayValue1);
console.log("val2", displayValue2);
console.log("val3", displayValue3);

What will be the output of the above code on the browser’s console?

  1. A

    10, 30, 20

  2. B

    20, undefined, 20

  3. C

    20, 30, 20

  4. D

    20, 30, 10

Show answer

Correct answer

  • C

    20, 30, 20

Question 17

+3 marksOne correct option

Consider the following JavaScript code.

javascript
export default {
data() {
return {
loginToken: '',
};
},
mounted() {
this.loginToken = sessionStorage.getItem('authToken') || '';
},
methods: {
updateToken(newToken) {
this.loginToken = newToken;
sessionStorage.setItem('authToken', newToken);
}
}
};

What will happen when a user calls the updateToken method with a new value and then refreshes the page?

  1. A
  2. B
  3. C
  4. D
Show answer

Correct answer

  • B

Question 18

+4.5 marksOne correct option

Consider the below Vuex setup.

javascript
const store = new Vuex.Store({
state: {
number: 10
},
mutations: {
updateNumber(state, payload) {
state.number = payload;
}
},
actions: {
async fetchNumber({ commit }) {
const fetchedValue = await getData();
commit('updateNumber', fetchedValue);
}
}
});
function getData() {
return new Promise(resolve => {
setTimeout(() => resolve(100), 1500);
});
}
store.dispatch('fetchNumber');
console.log(store.state.number);

What is logged to the console immediately after dispatching the action?

  1. A

    0

  2. B

    10

  3. C

    100

  4. D

    Undefined behavior

  5. E

    Error: Action did not resolve

Show answer

Correct answer

  • B

    10

Question 19

+4.5 marksOne correct option

Consider the below flask SSE implementation.

python
from flask import Flask, Response
import time
app = Flask(__name__)
def event_stream():
for i in range(5):
yield f"data: Message {i}"
time.sleep(1)
@app.route('/events')
def sse():
return Response(event_stream(), mimetype="text/event-stream")

And the Vue.js frontend:

html
<template>
<div>
<p v-for="msg in messages" :key="msg">{{ msg }}</p>
</div>
</template>
<script>
export default {
data() {
return { messages: [] };
},
mounted() {
const eventSource = new EventSource("http://localhost:5000/events");
eventSource.onmessage = (event) => {
this.messages.push(event.data);
};
}
};
</script>

What will happen when a user opens this page?

  1. A

    The client will receive 5 messages, one per second.

  2. B

    The client will receive all 5 messages instantly.

  3. C

    The client will not receive any messages due to CORS issues.

  4. D

    The server will crash because Flask cannot handle SSE.

Show answer

Correct answer

  • A

    The client will receive 5 messages, one per second.

Question 20

+4.5 marksOne correct option

Consider the following Flask application (server.py) and an HTML file named index.html:

server.py

python
from flask import Flask
import time
app = Flask(__name__)
@app.route("/api/slow1")
def slow_api_1():
time.sleep(15)
return "Response from Slow API 1", 200, {'Access-Control-Allow-Origin':
'*'}
@app.route("/api/slow2")
def slow_api_2():
time.sleep(25)
return "Response from Slow API 2", 200, {'Access-Control-Allow-Origin':
'*'}
if __name__ == "__main__":
app.run(threaded=False)

index.html

html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flask Fetch Example</title>
</head>
<body>
<h1>Fetching API Data...</h1>
<script>
fetch("http://127.0.0.1:5000/api/slow1")
.then(res => res.json())
.then(data => console.log("API 1 Response:", data));
fetch("http://127.0.0.1:5000/api/slow2")
.then(res => res.json())
.then(data => console.log("API 2 Response:", data));
</script>
</body>
</html>

The application runs on http://localhost:5000.\ A client makes two requests, one to http://localhost:5000/data/apple and another to http://localhost:5000/data/orange, both within 50 seconds.
What will be the approximate absolute difference between their latencies?

  1. A

    25 seconds

  2. B

    35 seconds

  3. C

    0 seconds

  4. D

    15 seconds

Show answer

Correct answer

  • C

    0 seconds

Question 21

+4.5 marksOne correct option

Consider the following Vue apps in script.js and the index.html file.

script.js

javascript
const app1 = new Vue({
el: '#app1',
data: {
value1: "VueJS",
value2: "Frontend"
}
})
const app2 = new Vue({
el: '#app2',
data: {
value3: "JavaScript"
}
})

index.html

html
<div id="app2">
{{value1}}
<div id="app1">
{{value2}}
</div>
{{value3}}
</div>
<script src="./script.js"></script>

What will be rendered on the browser?

  1. A

    Frontend

  2. B

    VueJS
    Frontend

  3. C

    VueJS
    JavaScript

  4. D

    Frontend
    JavaScript

Show answer

Correct answer

  • D

    Frontend
    JavaScript

Question 22

+4.5 marksOne correct option

Consider the following Vue App and the HTML document given below.

index.html

html
<div id="app">
<my-comp>
<slot>Hello Frontend</slot>
<slot>Hello VueJS</slot>
</my-comp>
</div>
<script src="script.js"></script>

script.js

javascript
const myComp = {
template: `
<div>
<slot></slot>
<slot></slot>
</div>
`
}
const app = new Vue({
components: {
"my-comp": myComp
}
}).$mount('#app')

What will be the output on the browser?

  1. A

    Hello Frontend Hello Frontend

  2. B

    Hello VueJS Hello VueJS

  3. C

    Hello Frontend Hello Vue JS

  4. D

    Hello Frontend Hello Vue JS Hello Frontend Hello Vue JS

Show answer

Correct answer

  • D

    Hello Frontend Hello Vue JS Hello Frontend Hello Vue JS

Question 23

+2 marksOne or more correct options

Which of the following is/are the correct usage of “v-for” directive in VueJS?

Select all that apply.

  1. A

    item in array

  2. B

    (item, index) of array

  3. C

    (item, index) as array

  4. D

    (item, index) in array

  5. E

    Item of array

Show answer

Correct answers

  • A

    item in array

  • D

    (item, index) in array

Question 24

+3 marksOne or more correct options

In a Single Page Application (SPA), what are the benefits of client-side routing over server-side routing?

Select all that apply.

  1. A

    Faster navigation between pages

  2. B

    Less strain on the backend server

  3. C

    Improved SEO by default

  4. D

    Full-page reloads occur on every navigation

Show answer

Correct answers

  • A

    Faster navigation between pages

  • B

    Less strain on the backend server

Question 25

+3 marksOne or more correct options

In an SSE connection, how does the client handle incoming messages?

Select all that apply.

  1. A

    The client polls the server at regular intervals.

  2. B

    The client listens to a WebSocket stream.

  3. C

    The client registers an “onmessage” event listener on the EventSource object.

  4. D

    The client sends a POST request for each new event.

Show answer

Correct answer

  • C

    The client registers an “onmessage” event listener on the EventSource object.

Question 26

+3 marksOne or more correct options

Consider the following Vue Router configuration:

javascript
const router = new VueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/user/:id', component: User },
{ path: '/about', component: About },
{ path: '*', component: NotFound }
]
})

Which URL/URLs would render the NotFound component?

Select all that apply.

  1. A

    /user

  2. B

    /user/123

  3. C

    /contact

  4. D

    /about/team

Show answer

Correct answers

  • A

    /user

  • C

    /contact

  • D

    /about/team

Question 27

+4.5 marksNumerical answer

Consider the below Vuex store configuration.

javascript
const store = new Vuex.Store({
state: {
count: 5,
},
mutations: {
decrement(state) {
state.count--;
},
},
});

And the below Vue component:

html
<template>
<div>
<button @click="decrement">Decrement</button>
<p>Count: {{ count }}</p>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
computed: {
...mapState(['count']),
},
methods: {
...mapMutations(['decrement']),
},
};
</script>

What will be displayed in the placeholder “{{ count }}” on the browser after clicking the "Decrement" button 4 times?

Show answer

Correct answer: 1

Question 28

+3 marksNumerical answer

How many times will "Render" be logged in the console when the Vue component below is mounted?

html
<div id="app">
<div>{{ computedValue }}</div>
</div>
<script>
new Vue({
el: "#app",
data() {
return { count: 0 };
},
computed: {
computedValue() {
console.log("Render");
return this.count * 2;
},
},
mounted() {
this.count++;
this.count++;
},
});
</script>
Show answer

Correct answer: 2

Question 29

+3 marksOne correct option

Consider the following flask app implemented with JWT. The application running on http://127.0.0.1:5000 and the user logs in using the /login endpoint. Read the given subquestions and select the correct statement.

python
app = Flask(__name__)
app.config["JWT_SECRET_KEY"] = "supersecretkey"
jwt = JWTManager(app)
@app.route("/login", methods=["POST"])
def login():
user = {"username": "student", "role": "student"}
access_token = create_access_token(identity=user)
return jsonify(access_token=access_token)
@app.route("/protected", methods=["GET"])
@jwt_required()
def protected():
current_user = get_jwt_identity()
if current_user.get("role") != "admin":
return jsonify({"message": "Forbidden: Insufficient permissions"}),
403
return jsonify(message=f"Hello, {current_user['username']}!")
app.run()

Which of the following statements is correct for the following fetch request.

javascript
fetch("http://127.0.0.1:5000/protected", {
method: "GET"
})
.then(response => {
return response.json();
})
.then(data => console.log("Protected Route Response:", data))
.catch(error => console.error("Error:", error));
  1. A
  2. B
  3. C
  4. D
Show answer

Correct answer

  • B

Question 30

+4.5 marksOne correct option

Consider the following flask app implemented with JWT. The application running on http://127.0.0.1:5000 and the user logs in using the /login endpoint. Read the given subquestions and select the correct statement.

python
app = Flask(__name__)
app.config["JWT_SECRET_KEY"] = "supersecretkey"
jwt = JWTManager(app)
@app.route("/login", methods=["POST"])
def login():
user = {"username": "student", "role": "student"}
access_token = create_access_token(identity=user)
return jsonify(access_token=access_token)
@app.route("/protected", methods=["GET"])
@jwt_required()
def protected():
current_user = get_jwt_identity()
if current_user.get("role") != "admin":
return jsonify({"message": "Forbidden: Insufficient permissions"}),
403
return jsonify(message=f"Hello, {current_user['username']}!")
app.run()

What will be the result of the following fetch request.

javascript
fetch("http://127.0.0.1:5000/protected", {
method: "GET",
headers: {
"Authorization": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVJ9.."
}
})
.then(response => {
if (response.status === 403) {
throw new Error("403 Forbidden: Insufficient permissions");
}
return response.json();
})
.then(data => console.log("Protected Route Response:", data))
.catch(error => console.error("Error:", error));
  1. A
  2. B
  3. C
  4. D
Show answer

Correct answer

  • D

Question 31

+4.5 marksOne correct option

Consider the following Vue app with the Vue Router shown below and answer the given subquestions.

javascript
const Login = { template: "<p>You are not logged in.</p>" }
const Profile = { template: "<p>Welcome to profile</p>" }
const Unauthorized = { template: "<p>You are not authorized</p>" }
const router = new VueRouter({
routes: [
{ path: '/login', component: Login },
{ path: '/unauthorized', component: Unauthorized },
{ path: '/profile', component: Profile }
]
})
new Vue({
el: '#app',
router,
data:{
userRole: '',
isAuthenticated: false
},
created() {
this.checkAuthentication();
},
methods: {
checkAuthentication() {
const token = localStorage.getItem('token');
console.log(`token got: ${token}`)
this.isAuthenticated = !!token;
// this.isAuthenticated = token ? true : false
if (this.isAuthenticated) {
this.userRole = localStorage.getItem('userRole') || 'user';
console.log(`role got: ${this.userRole}`)
} else {
console.log("no token got")
this.$router.replace('/login');
}
},
javascript
hasAccess(requiredRole) {
const roleHierarchy = {
'admin': 3,
'manager': 2,
'user': 1
};
const currentRoleLevel = roleHierarchy[this.userRole] || 0;
const requiredRoleLevel = roleHierarchy[requiredRole] || 0;
console.log(`current role: ${this.userRole}`)
console.log(`required role: ${requiredRole}`)
return currentRoleLevel >= requiredRoleLevel;
}
},
mounted() {
if (!this.hasAccess('manager')) {
console.log("has manager access")
this.$router.replace('/unauthorized');
}
else{
console.log(`has ${this.userRole} access`)
this.$router.replace('/profile')
}
}
})

What will be rendered on the browser if the application is loaded on the browser for the first time?

  1. A

    You are not logged in.

  2. B

    Welcome to profile

  3. C

    You are not authorized.

  4. D

    None of these.

Show answer

Correct answer

  • C

    You are not authorized.

Question 32

+3 marksOne correct option

Consider the following Vue app with the Vue Router shown below and answer the given subquestions.

javascript
const Login = { template: "<p>You are not logged in.</p>" }
const Profile = { template: "<p>Welcome to profile</p>" }
const Unauthorized = { template: "<p>You are not authorized</p>" }
const router = new VueRouter({
routes: [
{ path: '/login', component: Login },
{ path: '/unauthorized', component: Unauthorized },
{ path: '/profile', component: Profile }
]
})
new Vue({
el: '#app',
router,
data:{
userRole: '',
isAuthenticated: false
},
created() {
this.checkAuthentication();
},
methods: {
checkAuthentication() {
const token = localStorage.getItem('token');
console.log(`token got: ${token}`)
this.isAuthenticated = !!token;
// this.isAuthenticated = token ? true : false
if (this.isAuthenticated) {
this.userRole = localStorage.getItem('userRole') || 'user';
console.log(`role got: ${this.userRole}`)
} else {
console.log("no token got")
this.$router.replace('/login');
}
},
javascript
hasAccess(requiredRole) {
const roleHierarchy = {
'admin': 3,
'manager': 2,
'user': 1
};
const currentRoleLevel = roleHierarchy[this.userRole] || 0;
const requiredRoleLevel = roleHierarchy[requiredRole] || 0;
console.log(`current role: ${this.userRole}`)
console.log(`required role: ${requiredRole}`)
return currentRoleLevel >= requiredRoleLevel;
}
},
mounted() {
if (!this.hasAccess('manager')) {
console.log("has manager access")
this.$router.replace('/unauthorized');
}
else{
console.log(`has ${this.userRole} access`)
this.$router.replace('/profile')
}
}
})

What will be rendered on the browser for the given value of localStorage?

  1. A

    You are not logged in.

  2. B

    Welcome to profile

  3. C

    You are not authorized.

  4. D

    None of these.

Show answer

Correct answer

  • B

    Welcome to profile