IIT M DIPLOMA AN EXAM QDD4 31 Aug - 31 Aug 2025

What will be the order of console output when the following JavaScript code is executed?

```javascript
async function test() {
  console.log("P");
  await Promise.resolve();
  console.log("Q");
}
console.log("R");
test();
console.log("S");
```

Consider the following JavaScript program:

```javascript
const user = {
    name: 'Alice',
    age: 25,
    city: 'Boston',
    country: 'USA'
};

const { name, city, ...otherInfo } = user;
const newUser = { name, location: city, ...otherInfo };

console.log(name);
console.log(otherInfo);
console.log(newUser);
```

What will be the output of the above program?

```javascript
new Promise((resolve, reject) => {
  const score = 0.45;
  if (score >= 0.5) {
    resolve(score);
  } else {
    reject(new Error("Score too low"));
  }
})
  .then(data => {
    console.log("Stage A:", data);
    return data * 10;
  })
  .catch(error => {
    console.log("Stage B:", error.message);
    return 3;
  })
  .then(data => {
    console.log("Stage C:", data);
    if (data < 5) {
      throw new Error("Value below threshold");
    }
    return data + 2;
  })
  .then(data => {
    console.log("Stage D:", data);
    return data / 2;
  })
  .catch(error => {
    console.log("Stage E:", error.message);
    if (error.message === "Value below threshold") {
      return "Recovered";
    }
    throw error;
  })
  .then(data => {
    console.log("Stage F:", data);
    if (data === "Recovered") {
      return 10;
    }
    return data * 4;
  })
  .finally(() => {
    console.log("Stage G: Cleanup completed");
  });
```

Consider this HTML and Vue setup:

index.html
```html
<div id="app1">{{ message }}</div>
<div id="app2">{{ message }}</div>
<script src="app.js" ></script>
```

app.js
```javascript
new Vue({
  el: '#app1',
  data: { message: 'Hello from App 1' }
});

new Vue({
  el: '#app2',
  data: { message: 'Hello from App 2' }
});
```

What will be rendered on the browser?

Consider the following JavaScript code running in a browser:

```javascript
localStorage.setItem('score', '10');
sessionStorage.setItem('multiplier', '3');

for (let i = 0; i < 2; i++) {
    let score = localStorage.getItem('score');
    let multiplier = sessionStorage.getItem('multiplier');

    score = score + 5;
    multiplier = multiplier * 2;

    localStorage.setItem('score', score);
    sessionStorage.setItem('multiplier', multiplier);
}

console.log(localStorage.getItem('score'));
console.log(sessionStorage.getItem('multiplier'));
```

What will be the output in the browser console?

Consider the below Vue class binding and select the most appropriate option(s):

```html
<div v-bind:class="{ active: isActive, 'text-bold': hasBoldText, disabled: !isEnabled }"></div>
```

Consider the following JavaScript code:

```javascript
const globalVar = 100;
var value = 200;

const calculator = {
  value: 50,

  compute: function() {
    const innerObj = {
      value: 25,

      regularMethod: function() {
        return this.value;
      },

      arrowMethod: () => {
        return this.value;
      },

      mixedMethod: function() {
        const arrowInside = () => this.value;
        return arrowInside();
      }
    };
    return {
      regular: innerObj.regularMethod(),
      arrow: innerObj.arrowMethod(),
      mixed: innerObj.mixedMethod()
    };
  }
};

const result = calculator.compute();
console.log(result.regular);
console.log(result.arrow);
console.log(result.mixed);
```

Assuming this code runs in a browser environment, what will be the output?

Consider this Vue.js component code:

```javascript
const TodoApp = {
  template: `
    <div>
      <input v-model="newTodo" @keyup.enter="addTodo" />
      <ul>
        <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
      </ul>
    </div>
  `,
  data() {
    return {
      newTodo: '',
      todos: []
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo) {
        this.todos.push({ id: Date.now(), text: this.newTodo });
        this.newTodo = '';
      }
    }
  }
}
```

What happens when a user types "Learn Vue" into the input field and presses Enter?

Note: The `@keyup.enter` directive calls `addTodo()` when the Enter key is pressed.

Given this Vue Router setup:

```javascript
const routes = [
  { path: '/user/:id/profile', component: UserProfile },
  { path: '/user/:id', component: User },
  { path: '*', component: NotFound },
  { path: '/user/:id/settings', component: UserSettings },
];
```

What component renders for URL /user/123/settings?

Given the Flask app:

```python
from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app, resources={r"/api/*": {"origins": "http://localhost:3000"}})

@app.route('/api/data')
def data():
    return {"msg": "Success"}
```

frontend code:

```javascript
fetch("http://localhost:5000/api/data")
    .then(res => res.json())
    .then(data => console.log(data));
```

What will happen when run from a Vue app hosted at http://localhost:5173?

What will this JavaScript code output?

```javascript
function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter1 = createCounter();
const counter2 = createCounter();

console.log(counter1());
console.log(counter1());
console.log(counter2());
```

Consider the following Vue component structure with nested components and
complex slot configurations:

```javascript
Vue.component('data-provider', {
  template: `
    <div class="provider">
      <slot name="header" :user="currentUser" :loading="isLoading"></slot>
      <slot name="content" :items="filteredItems" :count="itemCount"></slot>
      <slot :fallback="defaultMessage" :error="errorState"></slot>
    </div>
  `,
  data() {
    return {
      currentUser: { name: 'John', role: 'admin' },
      isLoading: false,
      filteredItems: ['item1', 'item2', 'item3'],
      itemCount: 3,
      defaultMessage: 'No data available',
      errorState: null
    }
  }
});

Vue.component('parent-component', {
  template: `
    <data-provider>
      <template v-slot:header="{ user, loading }">
        <h1 v-if="!loading">Welcome {{ user.name }}</h1>
        <span v-else>Loading...</span>
      </template>

      <template v-slot:content="slotProps">
        <ul>
          <li v-for="item in slotProps.items" :key="item">
            {{ item }} ({{ slotProps.count }} total)
          </li>
        </ul>
      </template>

      <template v-slot:default="defaultProps">
        <p>{{ defaultProps.fallback }}</p>
      </template>
    </data-provider>
  `
});
```

Now consider this usage of the parent-component:

```html
<div id="app">
  <parent-component></parent-component>
</div>
```

```javascript
const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomeView
  },
  {
    path: '/user/:id',
    name: 'UserProfile',
    component: UserProfile
  },
  {
    path: '/product/:category/:id',
    name: 'ProductDetail',
    component: ProductDetail
  }
];
```
```html
<template>
  <div>
    <button @click="goToUser">View User</button>
    <button @click="goToProduct">View Product</button>
    <router-link :to="{ name: 'Home' }">Home</router-link>
  </div>
</template>

<script>
export default {
  methods: {
    goToUser() {
      this.$router.push({ name: 'UserProfile', params: { id: 123 } });
    },
    goToProduct() {
      this.$router.push({ name: 'ProductDetail',
                           params: { category: 'electronics', id: 456}
                         });
    },
    navigateOne() {
      this.$router.push({ name: 'UserProfile', params: { id: 555 },
                           query: { tab: 'settings'}
                         });
    },
    navigateTwo() {
      this.$router.replace({ name: 'Home' });
    },
    goBack() {
      this.$router.go(-1);
    }
  }
}
</script>
```

app2.js
```javascript
async function playGame() {
  const start = Date.now();

  const prashantPromise = new Promise(resolve =>
    setTimeout(resolve, 3000));
  const nikitaPromise = new Promise(resolve =>
    setTimeout(resolve, 2000));
  const mayurPromise = new Promise(resolve =>
    setTimeout(resolve, 2000));

  await Promise.all([prashantPromise, nikitaPromise]);
  const teamTime = Date.now() - start;

  await mayurPromise;
  const mayurTime = Date.now() - start;

  const winner = (teamTime < mayurTime) ? "Team" : "Mayur";
  console.log(`Winner is: ${winner}`);
}
```