IIT M FOUNDATION AN EXAM QDF3 03 Aug - 03 Aug 2025

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)?

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?

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?

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?

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?

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?

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?

Consider the below 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
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 /></router-view></div>',
  router,
})
```

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

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

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?

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' });
```

What will be the output when the
"Fetch" button is clicked on the
/home route?