MAD Study Hub

Home / Past papers / MAD2 End Term / this paper

Modern Application Development Ii 13 Sep 26 - 13 Sep 2026

MAD2 End Term31 questions100 marks19 MCQ · 12 MSQ
Elapsed 00:00
Q1MCQ2 marks
A JWT token contains three parts: . Which of the following best explains the relationship between the header and the signature in JWT authentication?
Text of the picture (copyable)
```
header.payload.signature
```
  1. The header stores the encrypted password used to generate the signature.
  2. The signature is generated using the encoded header, encoded payload, and a secret key. If the header is modified, the signature verification fails.
  3. The signature only protects the payload section; changes to the header do not affect token validation.
  4. The header contains the final signature hash generated after token creation.
Q2MCQ4.5 marks
A news platform wants to send a morning digest email to all subscribers every day at 7 AM. Sweta sets up the beat schedule, starts Redis and Celery Beat, and then claims: "The Worker is optional here. Beat handles the scheduling and the execution of the task, so we do not need a separate Worker process." Is Sweta's claim correct? Choose the best answer.
  1. Yes. For tasks defined in , Celery Beat manages both the schedule and the execution, so running the Worker is redundant.
    text
    ```
beat_schedule
```
  2. No. Celery Beat is only a scheduler. At 7 AM, it pushes a task message into the Redis broker and stops there. Without a running Celery Worker to pick up that message, the digest email is never actually sent.
  3. No. Celery Beat cannot trigger tasks that involve database queries or email sending. Those tasks must be triggered manually using from the Flask app.
    text
    ```
.delay()
```
  4. Yes, but only when the task is defined with instead of inside .In that case, Beat handles execution too.
    text
    ```
.apply_async()
```
```
beat_schedule
```
Q3MCQ4.5 marks
A startup is building a food delivery app. The customer-facing screen shows live order status updates: "Order Placed → Preparing → Out for Delivery → Delivered". Each stage is triggered by the restaurant or the delivery rider updating the status on their end. The customer's screen should reflect these changes in real time without refreshing the page. Two developers debate about the right technology: Developer A says: "Let's use Server-Sent Events. It's the right fit here." Developer B says: "No, we must use WebSockets. SSE won't work." Who is correct, and why?
  1. Developer B is correct. SSE cannot transmit JSON data, so structured order status objects cannot be pushed to the browser.
  2. Developer B is correct. SSE connections do not reconnect automatically when the network is briefly interrupted, making it unreliable for a live tracker.
  3. Developer A is correct. The tracker only requires the server to push status updates to the customer, without the customer sending data back through the same connection. SSE is purpose-built for exactly this one-way server-to-client push scenario.
  4. Developer A is correct, but only if WebSockets are set up as a mandatory fallback, since SSE requires HTTP/2 to function.
Q4MCQ4.5 marks
Consider the following and JavaScript for a Vue application: File: index.html question figure File: app.js question figure Suppose the application is running on , and the user visits the URL: What will be rendered by the browser? [NOTE: is divided in two images, consider them as one file content.] question figure
Text of the picture (copyable)
index.html
app.js
```html
<div id="app">
  <router-view></router-view>
</div>
```
```javascript
const Flights = {
  template: `<h2>{{ result }}</h2>`,

  data() {
    return {
      routes: [
        { city: "Delhi", connectedTo: ["Mumbai", "Pune"] },
        { city: "Indore", connectedTo: ["Bhopal", "Jaipur"] },
        { city: "Raipur", connectedTo: ["Nagpur", "Hyderabad"] },
        { city: "Rewa", connectedTo: ["Delhi", "Indore", "Raipur"] }
      ],
      result: ""
    };
  },

  created() {
    const destination = this.$route.params.city.toLowerCase();

    for (let i = 0; i < this.routes.length; i++) {
      const connections = this.routes[i].connectedTo;

      for (let j = 0; j < connections.length; j++) {
        if (connections[j].toLowerCase() === destination) {
          this.result = this.routes[i].city;
          break;
        }
      }

      if (this.result) {
        break;
      }
    }
  }
};
```
```
http://localhost:8080
```
```
http://localhost:8080/#/raipur
```
app.js
```javascript
const router = new VueRouter({
  routes: [
    {
      path: "/:city",
      component: Flights
    }
  ]
});

new Vue({
  el: "#app",
  router
});
```
  1. Delhi
  2. Indore
  3. Rewa
  4. Raipur
Q5MSQ4.5 marksselect all that apply
Read the following component code carefully. file: script.js question figure file:index.html question figure Select all statements that correctly describe the console output:
Text of the picture (copyable)
```javascript
new Vue({
  el: "#app",
  data: {
    message: "Hello"
  },
  beforeCreate() {
    console.log("1:", this.message);
  },
  created() {
    console.log("2:", this.message);
  },
  beforeMount() {
    console.log("3:", this.$el.textContent);
  },
  mounted() {
    console.log("4:", this.$el.textContent);
  }
});
```
```html
<div id="app">{{ message }}</div>
```
  1. Log 1: prints
    text
    undefined
  2. Log 2: prints
    text
    hello
  3. Log 3: prints
    text
    hello
  4. Log 4: prints
    text
    hello
  5. Log 3: throws an error because $el is not yet available
Q6MSQ4.5 marksselect all that apply
A Vue 2 application fetches a list of courses from an API and wants to display them in the template. question figure Assume the API returns: question figure Complete the missing code so that all course names are rendered correctly. Which of the following code snippets can correctly replace ?
Text of the picture (copyable)
```html
<div id="app">
  <ul>
    <!-- Missing Code -->
  </ul>
</div>

<script>
  new Vue({
    el: '#app',

    data: {
      courses: []
    },

    async mounted() {
      const response = await fetch('https://example.com/api/courses')
      this.courses = await response.json()
    }
  })
</script>
```
```json
[
  { "id": 1, "name": "MAD-2" },
  { "id": 2, "name": "DBMS" }
]
```
```html
<!-- Missing Code -->
```
  1. question figure
    text
    ```html
<li v-for="course in courses" :key="course.id">
  {{ course.name }}
</li>
```
  2. question figure
    text
    ```html
<li v-for="(course, index) in courses" :key="index">
  {{ course.name }}
</li>
```
  3. question figure
    text
    ```html
<li v-if="course in courses">
  {{ course.name }}
</li>
```
  4. question figure
    text
    ```html
<li v-for="courses in course">
  {{ courses.name }}
</li>
```
Q7MSQ4.5 marksselect all that apply
Consider the following Flask JWT code: question figure A client first accesses and then tries to access . Which of the following statements are correct?
Text of the picture (copyable)
```python
from flask import Flask, jsonify
from flask_jwt_extended import JWTManager, create_access_token, \
    jwt_required

app = Flask(__name__)
app.config["JWT_SECRET_KEY"] = "secret"
jwt = JWTManager(app)

@app.route("/token")
def token():
    access_token = create_access_token(identity="Ravi")
    return jsonify(access_token=access_token)

@app.route("/dashboard")
@jwt_required()
def dashboard():
    return jsonify(message="Dashboard Access Granted")
```
/token
/dashboard
  1. can only be accessed if a valid JWT token is sent with the request.
    text
    /dashboard
  2. If the JWT token is missing or invalid, Flask-JWT-Extended returns an unauthorized error.
  3. The token generated by is automatically stored by Flask and reused for future requests.
    text
    /token
  4. The JWT token is typically sent in the header while accessing protected routes.
    text
    Authorization
Q8MSQ4.5 marksselect all that apply
Given the following code running in the browser, select all the statements that are about its output: question figure question figure
Text of the picture (copyable)
TRUE
```javascript
const value = "global";

const obj = {
  value: "objectValue",
  regularMethod: function () {
    console.log(this.value);
  },
  arrowMethod: () => {
    console.log(this.value);
  },
  nested: {
    value: "nestedValue",
    regularInNested: function () {
      console.log(this.value);
    },
    arrowInNested: () => {
      console.log(this.value);
    }
  },
  delayedRegular: function () {
    setTimeout(function () {
      console.log(this.value);
    }, 100);
  },
  delayedArrow: function () {
    setTimeout(() => {
      console.log(this.value);
    }, 100);
  }
};
```
```javascript
obj.regularMethod();
obj.arrowMethod();
obj.nested.regularInNested();
obj.nested.arrowInNested();
obj.delayedRegular();
obj.delayedArrow();
```
  1. logs "objectValue"
    text
    ```
obj.regularMethod()
```
  2. logs "objectValue"
    text
    ```
obj.arrowMethod()
```
  3. logs "nestedValue"
    text
    ```
obj.nested.regularInNested()
```
  4. logs
    text
    ```
obj.nested.arrowInNested()
```
undefined
  5. logs "objectValue"
    text
    ```
obj.delayedRegular()
```
  6. logs "objectValue"
    text
    ```
obj.delayedArrow()
```
Q9MSQ4.5 marksselect all that apply
Consider the following code using flask_jwt_extended: question figure Which of the following statements are correct? (Select all that apply)
Text of the picture (copyable)
```python
app.config["JWT_SECRET_KEY"] = "my-secret"
jwt = JWTManager(app)

@jwt.user_identity_loader
def load(user):
    return user.username

@jwt.user_lookup_loader
def user_lookup(_jwt_header, jwt_data):
    identity = jwt_data["sub"]
    return User.query.filter_by(username=identity).one_or_none()

@app.route('/login', methods=["POST"])
def login():
    user = User.query.filter_by(username="u1").one_or_none()
    token = create_access_token(identity=user)
    return {"access_token": token}

@app.route('/dashboard')
@jwt_required()
def dashboard():
    return {
        "username": current_user.username
    }
```
  1. The decorator ensures that only requests with a valid JWT can access .
    text
    ```
@jwt_required()
```
/dashboard
  2. The determines what value is stored in the "sub" field of the JWT.
    text
    ```
user_identity_loader
```
  3. If is removed, will not be automatically populated.
    text
    ```
user_lookup_loader
```
current_user
  4. The directly stores the entire user object inside the JWT.
    text
    ```python
create_access_token(identity=user)
```
  5. The object is reconstructed using the identity extracted from the JWT.
    text
    current_user
  6. If no JWT is sent in the request, will still execute but will be None.
    text
    /dashboard
current_user
Q10MSQ3 marksselect all that apply
Pratham builds a Flask route that generates a PDF report and sends it to the user via email, all inside the route handler without using Celery. A tester notices that the browser takes about 12 seconds to respond, and during that time other users are unable to use the app normally. Which of the following correctly explain this behaviour and what Celery would change?
  1. Flask handles one request at a time per worker, so the long-running task blocks the entire process until it finishes.
  2. Other users' requests are queued and only served after the heavy task completes, making the app feel unresponsive.
  3. Using Celery's would make the task run faster by giving it more CPU cores.
    text
    ```
.delay()
```
  4. With Celery, Flask immediately returns a response to the user while the report generation and email sending happen inside a separate Celery worker process in the background.
Q11MSQ3 marksselect all that apply
Which of the following is/are the advantage(s) of client-side storage?
  1. Saving web generated documents for offline use.
  2. Storing personalized site preferences.
  3. The data can be stored across devices.
  4. IndexedDB API is a kind of client-side storage which can be used for audio/video files.
Q12MSQ3 marksselect all that apply
Which of the following are valid capabilities of Lighthouse while analyzing a website?
  1. Measuring performance metrics such as FCP, LCP and TBT
  2. Simulating slow networks and throttled conditions
  3. Emulating mobile and desktop devices
  4. Automatically fixing accessibility and SEO issues in the source code
Q13MSQ3 marksselect all that apply
Given the following code, select all the statements that are TRUE about its execution if the code is run in a browser environment. question figure
Text of the picture (copyable)
```javascript
const calculator = {
  value: 10,
  add(a, b) {
    return this.value + a + b;
  }
};

const rawAdd = calculator.add;
const boundAdd = calculator.add.bind({ value: 100 }, 5);

console.log(rawAdd(1, 2));
console.log(boundAdd(10));
console.log(calculator.add.apply({ value: 50 }, [1, 2]));
```
  1. evaluates to
    text
    ```
rawAdd(1, 2)
```
NaN
  2. evaluates to
    text
    ```
boundAdd(10)
```
115
  3. throws a
    text
    ```
calculator.add.apply({ value: 50 }, [1, 2])
```
TypeError
  4. evaluates to
    text
    ```
calculator.add.apply({ value: 50 }, [1, 2])
```
53
Q14MCQ3 marks
A team builds an internal warehouse dashboard where multiple managers, each on a different computer, need to receive live low-stock alerts from the server in real time. They decide to use Flask-SSE with Redis. Which of the following best explains Redis's role in a Flask-SSE setup?
  1. Redis is used by Flask-SSE to authenticate connected users before events can be streamed to the browser.
  2. Flask-SSE uses Redis as a shared event channel so published messages can be delivered to connected clients.
  3. Redis is only needed when SSE events must be stored permanently and replayed after reconnection.
  4. Redis is optional in Flask-SSE and is only recommended when the application has a very large number of concurrent users.
Q15MCQ3 marks
Match the testing concept in Column I with the most appropriate description in Column II. question figure
Text of the picture (copyable)
| Column I | Column II |
| :------- | :-------- |
| 1. Unit Testing | A. Testing application behaviour across different browsers |
| 2. E2E Testing | B. Commonly used for writing and running tests |
| 3. Cross-Browser Testing | C. Testing individual Vue components independently |
| 4. Jest / Mocha / Chai | D. Testing a complete application flow including backend interaction |
  1. 1-C, 2-D, 3-A, 4-B
  2. 1-B, 2-C, 3-D, 4-A
  3. 1-A, 2-D, 3-B, 4-C
  4. 1-C, 2-B, 3-A, 4-D
Q16MCQ3 marks
Match the performance metric in Column I with the most appropriate description in Column II. question figure
Text of the picture (copyable)
| Column I | Column II |
|---|---|
| 1. First Contentful Paint (FCP) | A. Measures unexpected movement of page elements |
| 2. Largest Contentful Paint (LCP) | B. Measures how long the page is blocked from responding to user interaction |
| 3. Total Blocking Time (TBT) | C. Measures when something first appears on the screen |
| 4. Cumulative Layout Shift (CLS) | D. Measures when the largest visible content is rendered |
  1. 1-C, 2-B, 3-D, 4-A
  2. 1-B, 2-C, 3-A, 4-D
  3. 1-C, 2-D, 3-B, 4-A
  4. 1-A, 2-B, 3-D, 4-C
Q17MCQ3 marks
What is the value of result after running the following code? question figure
Text of the picture (copyable)
```javascript
const products = [
  { name: "Laptop", price: 1200, inStock: true },
  { name: "Mouse", price: 25, inStock: false },
  { name: "Keyboard", price: 75, inStock: true },
  { name: "Monitor", price: 300, inStock: false }
];

const result = products.filter(item => item.inStock && item.price < 500);
```
  1. text
    ```json
{ "name": "Keyboard", "price": 75, "inStock": true }
```
  2. text
    ```
[[{ name: "Laptop", price: 1200, inStock: true }, { name: "Keyboard", price: 75, inStock: true }]]
```
  3. text
    ```
[[{ name: "Keyboard", price: 75, inStock: true }]]
```
  4. text
    ```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 10px;
            border: 1px solid black;
        }
        .container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: flex-start;
            align-content: flex-start;
            height: 300px;
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Box 1</div>
        <div class="box">Box 2</div>
        <div class="box">Box 3</div>
        <div class="box">Box 4</div>
        <div class="box">Box 5</div>
        <div class="box">Box 6</div>
    </div>
</body>
</html>
```
Q18MCQ3 marks
A developer has just created a new Vue 2 project using Vue CLI and the following package.json was generated. package.json question figure The developer wants to view the app in the browser locally for development. They run the following command: bash: Which of the following best describes what happens and what the developer should have run instead?
Text of the picture (copyable)
```json
{
  "name": "my-vue-app",
  "version": "0.1.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@vue/cli-service": "^5.0.0",
    "babel-eslint": "^10.1.0"
  }
}
```
```
npm run build
```
  1. launches the app on ; the developer should have run npm start to compile for production instead.
    text
    ```
npm run build
```
```
localhost:8080
```
  2. compiles and bundles the app for production into a folder — it does not start a local server. The developer should have run instead.
    text
    ```
npm run build
```
/dist
```
npm run serve
```
  3. is correct for local development; is only used for deploying to a server.
    text
    ```
npm run build
```
```
npm run serve
```
  4. and do the same thing — both launch the app at
    text
    ```
npm run build
```
```
npm run serve
```
```
localhost:8080
```
Q19MCQ3 marks
Consider the following JavaScript code: question figure What will be output on the browser’s console?
Text of the picture (copyable)
```javascript
function outerFunc() {
  const val1 = 10;
  var val2 = 20;

  function innerFunc() {
    var val2 = 30;
    console.log(val1)
    console.log(val2)
  }
  innerFunc()
  console.log(val1)
  console.log(val2)
}
outerFunc()
```
  1. question figure
    text
    ```
10 20
10 30
```
  2. question figure
    text
    ```
10 20
10 20
```
  3. question figure
    text
    ```
10 30
10 20
```
  4. None of these.
Q20MCQ3 marks
What is logged to the console after running the following code? question figure
Text of the picture (copyable)
```javascript
const numbers = [10, 20, 30, 40, 50];
const [num1, , num2, ...rest] = numbers;
const [a = 100, b = 200] = [undefined, 0];

console.log(num1, num2, rest);
console.log(a, b);
```
  1. 10 30 [40, 50] and 100 0
  2. 10 30 [40, 50] and 100 200
  3. 10 20 [30, 40, 50] and undefined 0
  4. 10 30 [30, 40, 50] and 100 0
Q21MCQ3 marks
A developer runs the following code in Tab 1 of a browser, then opens the same website in a new Tab 2 (not a duplicate, but a fresh tab typed into the address bar). question figure Which of the following statements correctly describes what happens in Tab 2?
Text of the picture (copyable)
```javascript
// Executed in Tab 1
localStorage.setItem("theme", "dark");
sessionStorage.setItem("cart", "3-items");
```
  1. Both and return their respective values.
    text
    ```javascript
localStorage.getItem("theme")
```
```javascript
sessionStorage.getItem("cart")
```
  2. returns "dark", but returns null.
    text
    ```javascript
localStorage.getItem("theme")
```
```javascript
sessionStorage.getItem("cart")
```
  3. Both return null
  4. returns "3-items", but returns null.
    text
    ```javascript
sessionStorage.getItem("cart")
```
```javascript
localStorage.getItem("theme")
```
Comprehension passage - the questions below it refer to this
Consider the following Vue 2 + Vuex application: question figure Note: All three image above are of one html. Based on the above data, answer the given subquestions. question figure question figure
Q22MCQ2 marks
What will be displayed after clicking the Increase Temperature button once?
  1. Temperature: 28oC, Status: Normal
  2. Temperature: 33oC, Status: Hot
  3. Temperature: 33oC, Status: Normal
  4. Temperature: 35oC, Status: Normal
Q23MCQ3 marks
Why does the watcher on temperature execute after clicking the button?
  1. Because Vue automatically watches all methods
  2. Because the Vuex mutation changes the state used by the computed property
  3. Because getters directly trigger watchers
  4. Because computed properties cannot access Vuex state
Comprehension passage - the questions below it refer to this
Consider the following JavaScript code: question figure Based on the above data, answer the given subquestions.
Q24MCQ2 marks
What will be printed in the console?
  1. Normal: Rahul Arrow: Rahul
  2. Normal: Arrow: Rahul
  3. Normal: Rahul Arrow: undefined
  4. Normal: Arrow:
Q25MSQ3 marksselect all that apply
Which of the following statements correctly explain the behaviour of the code?
  1. The callback inside gets its own binding.
    text
    ```javascript
setTimeout(function(){})
```
this
  2. Arrow functions inherit from the surrounding lexical scope.
    text
    this
  3. automatically binds to the surrounding object.
    text
    ```
setTimeout
```
this
  4. If we use an arrow function inside in , it will print "Rahul".
    text
    ```
setTimeout
```
```
normalFunction
```
Comprehension passage - the questions below it refer to this
Read the following Vue 2 component code carefully and answer the given subquestions: index.html question figure
Q26MCQ2 marks
What text appears on the button when the app first renders?
  1. "Hello"
  2. "Click Me"
  3. "" (empty)
  4. undefined
Q27MCQ3 marks
After the button is clicked once, what is the value of log in the parent?
  1. "Hello"
  2. "Click Me"
  3. "Button clicked"
  4. undefined
Comprehension passage - the questions below it refer to this
Read the following Vuex setup carefully and answer the given subquestions: store.js question figure component question figure
Q28MCQ2 marks
Inside , what values are logged by the two statements, immediately after commit and dispatch are called (before the 1-second timeout completes)?
Text of the picture (copyable)
```
handleClick()
```
```
console.log
```
  1. 15 and 30
  2. 18 and 36
  3. 15 and 20
  4. 10 and 20
Q29MCQ3 marks
Which statement correctly describes why is defined as a while is defined as an ?
Text of the picture (copyable)
```
increment
```
mutation
```
incrementAsync
```
action
  1. Mutations can contain asynchronous code; actions cannot
  2. Only actions can call commit; mutations cannot
  3. Mutations must be synchronous; actions can contain async logic and then commit mutations
  4. There is no real difference; both are interchangeable
Comprehension passage - the questions below it refer to this
Read the following code carefully and answer the given subquestions: question figure
Q30MSQ3 marksselect all that apply
Select all statements that are TRUE about the output:
  1. d1.speak() returns "Tommy barks"
  2. d1.speak() returns "Tommy makes a sound"
  3. Animal.count returns 2
  4. Animal.count returns 1
Q31MSQ3 marksselect all that apply
Select all statements that are TRUE about the output :
  1. d1 instanceof Animal returns true
  2. d1 instanceof Animal returns false
  3. Dog.create("Tommy") creates an instance of Dog, but not Animal
  4. Dog.create("Tommy") creates an instance of Dog as well as Animal

Answer key

  1. Q1 (MCQ, 2 marks): B
  2. Q2 (MCQ, 4.5 marks): B
  3. Q3 (MCQ, 4.5 marks): C
  4. Q4 (MCQ, 4.5 marks): C
  5. Q5 (MSQ, 4.5 marks): A, B, D
  6. Q6 (MSQ, 4.5 marks): A, B
  7. Q7 (MSQ, 4.5 marks): A, B, D
  8. Q8 (MSQ, 4.5 marks): A, C, D, F
  9. Q9 (MSQ, 4.5 marks): A, B, C, E
  10. Q10 (MSQ, 3 marks): A, B, D
  11. Q11 (MSQ, 3 marks): A, B, D
  12. Q12 (MSQ, 3 marks): A, B, C
  13. Q13 (MSQ, 3 marks): A, B, D
  14. Q14 (MCQ, 3 marks): B
  15. Q15 (MCQ, 3 marks): A
  16. Q16 (MCQ, 3 marks): C
  17. Q17 (MCQ, 3 marks): C
  18. Q18 (MCQ, 3 marks): B
  19. Q19 (MCQ, 3 marks): C
  20. Q20 (MCQ, 3 marks): A
  21. Q21 (MCQ, 3 marks): B
  22. Q22 (MCQ, 2 marks): C
  23. Q23 (MCQ, 3 marks): B
  24. Q24 (MCQ, 2 marks): B
  25. Q25 (MSQ, 3 marks): A, B, D
  26. Q26 (MCQ, 2 marks): B
  27. Q27 (MCQ, 3 marks): C
  28. Q28 (MCQ, 2 marks): A
  29. Q29 (MCQ, 3 marks): C
  30. Q30 (MSQ, 3 marks): A, C
  31. Q31 (MSQ, 3 marks): A, D