uiz Space

May 2025 term · Modern Application Development II · BSCS2006

Modern Application Development II Quiz 2: 3 August 2025 (May 2025 term)

The IIT Madras BS Modern Application Development II (MAD 2) Quiz 2 paper sat on 3 Aug 2025, in the May 2025 term: 16 questions for 50 marks in 120 minutes. Every question is below with its answer. Take it as a timed mock test to be marked, or read it through first.

Questions
16
Marks
50
Duration
120 min
MCQ
11
MSQ
5
Take as mock testPractise with answers

Updated

Official paper: IIT M DIPLOMA AN EXAM QDD2 03 Aug 2025 · No negative marking.

Question 1

+2 marksOne correct option

Suppose a client wants to make a POST request using the Fetch API to a public endpoint at /api/submit, which includes sending a data object as JSON in the request body.

javascript
const data = {
  name: "Aditya",
  score: 95,
};


fetch("/api/submit", {
  method: "POST",
  headers: {
    // CODE
  },
  body: JSON.stringify(data),
});

Which headers are necessary for this request to succeed, (inside CODE)?

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

Correct answer

  • A
Question 1 on its own page

Question 2

+2 marksOne or more correct options

Which of the following statements are true?

Select all that apply.

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

Correct answers

  • B
  • C
Question 2 on its own page

Question 3

+2 marksOne or more correct options

Which of the following statement(s) about Web Storage APIs is/are correct?

Select all that apply.

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

Correct answers

  • A
  • B
  • C
Question 3 on its own page

Question 4

+2 marksOne or more correct options

Which of the following statement(s) is/are true regarding Single Page Applications (SPA) and Progressive Web Apps (PWA)?

Select all that apply.

  1. A

    SPAs use client-side routing to dynamically update content without full page reloads.

  2. B

    PWAs can work offline using service workers.

  3. C

    SPAs always require a server-side language to handle routing.

  4. D

    PWAs can be added to a device’s home screen like native apps.

Show answer

Correct answers

  • A

    SPAs use client-side routing to dynamically update content without full page reloads.

  • B

    PWAs can work offline using service workers.

  • D

    PWAs can be added to a device’s home screen like native apps.

Question 4 on its own page

Question 5

+3 marksOne correct option

Consider the following code snippet.

javascript
const response = {
  meta: () =>
    Promise.resolve([
      { id: 1, score: 20 },
      { id: 2, score: 40 },
    ]),
  json: () =>
    Promise.resolve([
      { name: "Alpha", score: 40 },
      { name: "Beta", score: 30 },
      { name: "Charlie", score: 50 },
      { name: "Delta" }, // no score
    ]),
};


fetchData();


function fetchData() {
  Promise.resolve(response)
    .then((res) => res.json())
    .then((data) => {
      const total = data
        .map((p) => parseInt(p.score) || 0)
        .filter((score) => score >= 40)
        .reduce((acc, score) => acc + score, 0);
      console.log("Total Score:", total);
    });
}

What will be logged to the console?

  1. A

    Total Score: 80

  2. B

    Total Score: 90

  3. C

    Total Score: 120

  4. D

    Total Score: NaN

Show answer

Correct answer

  • B

    Total Score: 90

Question 5 on its own page

Question 6

+3 marksOne correct option

The following code is using Vue 2 and Vue router 3 running on http://127.0.0.1:5500.

Filename: index.html

html
<body>
   <div id="app"></div>
   <script src="app.js" type="module"></script>
</body>

Filename: router.js

javascript
const Home = { template: "<div>Home Page</div>" };
const Dashboard = {
  template: "<div>Dashboard <router-view></router-view></div>",
};
const Stats = { template: "<p>Stats Component</p>" };
const Settings = { template: "<p>Settings Component</p>" };
const NotFound = { template: "<div>404 Not Found</div>" };


const router = new VueRouter({
  routes: [
    { path: "/", component: Home },
    {
      path: "/dashboard",
      component: Dashboard,
      children: [
        { path: "stats", component: Stats },
        { path: "settings", component: Settings },
      ],
    },
    { path: "*", component: NotFound },
  ],
});
export default router;

Filename: app.js

javascript
import router from "./router.js";


new Vue({
  el: "#app",
  router,
  template: `<div><router-view></router-view></div>`,
});

What will be displayed when the user visits http://127.0.0.1:5500/#/dashboard/stats?

  1. A

    Dashboard only

  2. B

    Stats Component only

  3. C

    Dashboard
    Stats Component

  4. D

    404 Not Found

Show answer

Correct answer

  • C

    Dashboard
    Stats Component

Question 6 on its own page

Question 7

+3 marksOne correct option

Consider the following Vue 2 component defined using the CDN version:

Filename: index.html

html
<div id="app">
  <p>{{ message }}</p>
</div>

Filename: app.js

javascript
new Vue({
      el: '#app',
      data() {
        return {
          message: 'Initial'
        };
      },
      created() {
        console.log('Created Hook');
        this.message = 'Created Hook Called';
        this.fetchData();
      },
      mounted() {
        console.log('Mounted Hook');
      },
      methods: {
        async fetchData() {
          const res = await new Promise(resolve => {
            setTimeout(() => resolve('Data Loaded'), 1000);
          });
          this.message = res;
          console.log('Data updated after fetch');
        }
      }
});

What will be the sequence of console logs and final content shown on the web page after 1 second?

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

Correct answer

  • B
Question 7 on its own page

Question 8

+3 marksOne correct option

Consider the following JavaScript program:

javascript
const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('The cat sleeps');
    }, 2000);
});


promise1
    .then((result) => {
        console.log(result);
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('Rain falls gently');
            }, 1000);
        });
    })
    .then((result) => {
        console.log(result);
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('Books gather dust');
            }, 1500);
        });
    })
    .then((result) => {
        console.log(result);
        throw new Error('Coffee grows cold');
    })
    .then((result) => {
        console.log('Stars shine bright');
    })
    .catch((error) => {
        console.log("Caught:", error.message);
    });

What will be the output of the above program when executed?

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

Correct answer

  • B
Question 8 on its own page

Question 9

+3 marksOne correct option

Consider the following Vue application with markup "index.html" and JavaScript file "app.js".

Filename: index.html

html
<div id="app"></div>
<script src="app.js"></script>

Filename: app.js

javascript
new Vue({
    el: '#app',
    template: `<div>
                   Phase: {{phase}}<br>
                   Counter: {{counter}}<br>
                   Items: {{items.length}}
               </div>`,
    data: {
        phase: "",
        counter: 0,
        items: []
    },
    beforeCreate() {
        this.phase += "Init-"
        this.counter += 5
        this.items.push("A")
    },
    created() {
        this.phase += "Ready-"
        this.counter += 3
        this.items.push("B")
    },
    beforeMount() {
        this.phase += "Prep-"
        this.counter -= 2
        this.items.push("C")
    },
    mounted() {
        this.phase += "Live"
        this.counter *= 2
        this.items.push("D")
    },
})

What will be displayed in the browser when the application loads?

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

Correct answer

  • B
Question 9 on its own page

Question 10

+3 marksOne or more correct options

Consider the following Vue 2 code with Vuex 3 used via CDN, assume the Vuex store is correctly injected into the Vue instance.

Filename: store.js

javascript
export default store = new Vuex.Store({
  state: {
    score: 10,
  },
  mutations: {
    increaseScore(state) {
      state.score += 5;
    },
  },
  actions: {
    increaseScoreAsync({ commit }) {
      setTimeout(() => {
        commit("increaseScore");
      }, 1000);
    },
  },
});

Filename: score-display.js

javascript
export default Vue.component('score-display', {
  template: `
    <div>
      <p>Current Score: {{ score }}</p>
      <button @click="boostNow">Boost Now</button>
      <button @click="boostLater">Boost After 1s</button>
    </div>
   `,
  computed: {
    score() {
      // CODE 1
    }
  },
  methods: {
    boostNow() {
      // CODE 2
    },
    boostLater() {
      // CODE 3
    }
  }
});

Which of the following correctly fills in CODE 1, CODE 2, and CODE 3 for the score to be displayed and for the boostNow() and boostLater() methods to work correctly?

Select all that apply.

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

Correct answers

  • A
  • C
  • D
Question 10 on its own page

Question 11

+3 marksOne or more correct options

Filename: app.js

javascript
const inventory = {
    101: {product: "Canvas", quantity: 15, warehouse: 3},
    102: {product: "Brushes", quantity: 8, warehouse: 2}
}


const errorPage = {
    template: `<h1>Item not found in inventory!</h1>`
}


const productDetails = {
    template: `<h1>{{item.product}} - {{item.quantity}} units stored in
                 {{item.warehouse}} locations.</h1>`,
    data() {
        return {item: inventory[this.$route.params.productId]}
    },
    watch: {
        '$route'(to, from) {
            this.item = inventory[to.params.productId]
        }
    }
}


const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/inventory/:productId', component: productDetails },
        { path: '*', component: errorPage },
    ],
})


new Vue({
    el: '#app',


    template: '<div><router-view /></div>',
    router,
})

Suppose the application is running on "http://localhost:3000", select the correct option(s)?

Select all that apply.

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

Correct answers

  • A
  • C
  • E
Question 11 on its own page

Question 12

+4.5 marksOne correct option

The following code is using Vue 2 and Vue router 3 running on http://127.0.0.1:5500.

Filename: index.html

html
<body>
   <div id="app"></div>
   <script src="app.js" type="module"></script>
</body>

Filename: router.js

javascript
const Home = { template: "<div>Home Page</div>" };
const Dashboard = {
  template: "<div>Dashboard <router-view></router-view></div>",
};
const Stats = { template: "<p>Stats Component</p>" };
const Settings = { template: "<p>Settings Component</p>" };
const NotFound = { template: "<div>404 Not Found</div>" };


const router = new VueRouter({
  routes: [
    { path: "/", component: Home },
    {
      path: "/dashboard",
      component: Dashboard,
      children: [
        { path: "stats", component: Stats },
        { path: "settings", component: Settings },
      ],
    },
    { path: "*", component: NotFound },
  ],
});
export default router;

Filename: app.js

javascript
import router from "./router.js";


new Vue({
  el: "#app",
  router,
  template: `<div><router-view></router-view></div>`,
});

What will be displayed when the user visits the following URLs?

  1. http://127.0.0.1:5500/#/dashboard/unknown
  2. http://127.0.0.1:5500/#/dashboards/stats
  1. A

    Both will show Dashboard

  2. B

    1: Dashboard, 2: 404 Not Found

  3. C

    1: Dashboard, 2: Stats Component

  4. D

    Both will show 404 Not Found

Show answer

Correct answer

  • D

    Both will show 404 Not Found

Question 12 on its own page

Question 13

+4.5 marksOne correct option

Consider the following Vue application with markup "index.html" and JavaScript file "app.js".

Filename: index.html

html
<div id="app">
    <data-panel>
        <template #sidebar>
            <span>Navigation Menu</span>
        </template>
        <template #actions>
            <button>Save Changes</button>
            <button>Cancel</button>
        </template>
        <template #default>
            <h3>Main Dashboard</h3>
            <p>Welcome to the control panel</p>
        </template>
        <template #footer>
            <small>Last updated: Today</small>
        </template>
        <div>Extra content outside templates</div>
    </data-panel>
</div>

Filename: app.js

javascript
Vue.component("data-panel", {
    template: `<div class="panel">
                   <header>
                       <slot name="sidebar"></slot>
                   </header>
                   <main>
                       <slot></slot>
                   </main>
                   <section>
                       <slot name="actions"></slot>
                   </section>
                   <footer>
                       <slot name="summary"></slot>
                   </footer>
               </div>`,
})
const app = new Vue({
    el: "#app",
})

What will be the visual output displayed in the browser?

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

Correct answer

  • B
Question 13 on its own page

Question 14

+4.5 marksOne correct option

Consider the following Vuex store setup for a user management system:

javascript
const store = new Vuex.Store({
  state: {
    users: [
      { id: 1, name: 'Alice', status: 'active', role: 'admin' },
      { id: 2, name: 'Bob', status: 'inactive', role: 'user' },
      { id: 3, name: 'Charlie', status: 'active', role: 'user' }
    ]
  },
  getters: {
    activeUsers(state) {
      return state.users.filter(user => user.status === 'active');
    },
    activeUserCount(state, getters) {
      return getters.activeUsers.length;
    },
    adminUsers(state) {
      return state.users.filter(user => user.role === 'admin');
    }
  },
  mutations: {
    updateUserStatus(state, { userId, status }) {
      const user = state.users.find(u => u.id === userId);
      if (user) {
        user.status = status;
      }
    },
javascript
  addUser(state, user) {
    state.users.push({ ...user, id: Date.now() });
    }
  },
  actions: {
    toggleUserStatus({ commit, state }, userId) {
      const user = state.users.find(u => u.id === userId);
      if (user) {


        const newStatus = user.status === 'active' ? 'inactive' : 'active';
        commit('updateUserStatus', { userId, status: newStatus });
      }
    },


    async createUser({ commit }, userData) {
      await new Promise(resolve => setTimeout(resolve, 100));
      commit('addUser', userData);
    }
  }
});

What will happen when the following sequence of operations is executed?

javascript
store.dispatch('toggleUserStatus', 1);  // Toggle Alice's status
store.dispatch('createUser', { name: 'David', status: 'active', role: 'user' });
  1. A
  2. B
  3. C
  4. D
Show answer

Correct answer

  • B
Question 14 on its own page

Question 15

+4.5 marksOne correct option

You are given the following HTML and JavaScript code that uses Vue 2 via CDN along with Vue Router. Read the code carefully and answer the given subquestions.

app.js

javascript
const Home = {
      template: `
        <div>
          <h2>Home Page</h2>
          <p v-if="loading">Loading data...</p>
          <p v-show="!loading">{{ message }}</p>
          <button @click="fetchData">Fetch</button>
        </div>
      `,
      data() {
        return {
          message: '',
          loading: false
        };
      },
      methods: {
        async fetchData() {
          this.loading = true;
          await this.simulateApiCall().then((res) => {
            this.message = res;
            this.loading = false;
          });
        },
        simulateApiCall() {
          return new Promise((resolve) => {


            setTimeout(() => resolve("Fetched Data from API!"), 1000);
          });
        }
      }
    };
    const About = {
      template: '<div><h2>About Page</h2></div>'
    };
    const router = new VueRouter({
      routes: [
        { path: '/home', component: Home },
        { path: '/about', component: About }
      ]
});


new Vue({
  el: '#app',
  router
});
  1. A
  2. B
  3. C
  4. D
Show answer

Correct answer

  • B
Question 15 on its own page

Question 16

+3 marksOne correct option

You are given the following HTML and JavaScript code that uses Vue 2 via CDN along with Vue Router. Read the code carefully and answer the given subquestions.

app.js

javascript
const Home = {
      template: `
        <div>
          <h2>Home Page</h2>
          <p v-if="loading">Loading data...</p>
          <p v-show="!loading">{{ message }}</p>
          <button @click="fetchData">Fetch</button>
        </div>
      `,
      data() {
        return {
          message: '',
          loading: false
        };
      },
      methods: {
        async fetchData() {
          this.loading = true;
          await this.simulateApiCall().then((res) => {
            this.message = res;
            this.loading = false;
          });
        },
        simulateApiCall() {
          return new Promise((resolve) => {


            setTimeout(() => resolve("Fetched Data from API!"), 1000);
          });
        }
      }
    };
    const About = {
      template: '<div><h2>About Page</h2></div>'
    };
    const router = new VueRouter({
      routes: [
        { path: '/home', component: Home },
        { path: '/about', component: About }
      ]
});


new Vue({
  el: '#app',
  router
});

Suppose the button is clicked multiple times quickly, the message area flickers unexpectedly. How can you improve the code to ensure proper async behavior and prevent overlapping fetches?

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

Correct answer

  • C
Question 16 on its own page