uiz Space

September 2024 term · Modern Application Development II · BSCS2006

Modern Application Development II Quiz 2: 1 December 2024 (September 2024 term)

The IIT Madras BS Modern Application Development II (MAD 2) Quiz 2 paper sat on 1 Dec 2024, in the September 2024 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
12
MSQ
4
Take as mock testPractise with answers

Updated

Official paper: IIT M DIPLOMA AN EXAM QDD2 01 Dec 2024 · No negative marking.

Question 1

+3 marksOne correct option

Consider the below JavaScript program.

javascript
function main() {
    var count = 0;
    function increment(num = count++) {
        count += num;
    }
    increment();
    increment(2);
    increment();
    console.log(count);
}
main();

What will be the output of the above program?

  1. A

    3

  2. B

    4

  3. C

    7

  4. D

    8

  5. E

    6

Show answer

Correct answer

  • C

    7

Question 1 on its own page

Question 2

+3 marksOne correct option

Consider the below Vue component.

html
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Change Message</button>
  </div>
</template>


<script>
export default {
  data() {
    return {
      message: 'Hello'
    };
  },
  methods: {
    updateMessage() {
      this.message = this.message === 'Hello' ? 'World' : 'Hello';
    }
  }
};
</script>

What will be displayed in the <p> element, after the button with text “Change Message” is clicked?

  1. A

    Empty

  2. B

    Error

  3. C

    undefined

  4. D

    World

  5. E

    Hello

Show answer

Correct answer

  • D

    World

Question 2 on its own page

Question 3

+3 marksOne correct option

Consider the below JavaScript program.

javascript
async function asyncFunc() {
  try {
    const result1 = await Promise.resolve('Start');
    console.log(result1);


    const result2 = await new Promise((resolve, reject) => {
      setTimeout(() => reject('Error'), 100);
    });


    console.log(result2);
  } catch (error) {
    console.log('Caught:', error);
  }


  return 'End';
}


asyncFunc().then(result => console.log(result));

What will be the output of the program?

  1. A

    Start, Caught: Error, End

  2. B

    Start, End, Caught: Error

  3. C

    Caught: Error, Start, End

  4. D

    Start, Error, End

Show answer

Correct answer

  • A

    Start, Caught: Error, End

Question 3 on its own page

Question 4

+3 marksOne correct option

Consider the following HTML with Vue 2 CDN attached.

html
    <div id="app"></div>


    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    message: 'Hello'
                };
            },
            beforeCreate() {
                console.log('Before Create: ' + this.message);
                this.message = 'Before Create';
            },
            mounted() {
                this.message = 'Mounted';
                console.log('Mounted: ' + this.message);
            },
            template: `
                <div>
                    <p>{{ message }}</p>
                </div>
            `
        });
    </script>

What will be printed in the browser console ?

  1. A

    `Before Create: Before Create` and `Mounted: Hello`

  2. B

    `Before Create: undefined` and `Mounted: Hello`

  3. C

    `Before Create: Hello` and `Mounted: Mounted`

  4. D

    `Before Create: undefined` and `Mounted: Mounted`

Show answer

Correct answer

  • D

    `Before Create: undefined` and `Mounted: Mounted`

Question 4 on its own page

Question 5

+3 marksOne correct option

Consider the JavaScript code snippet below.

javascript
const movies = [
    { title: 'Inception', rating: 8.8 },
    { title: 'Interstellar', rating: 8.6 },
    { title: 'Dunkirk', rating: 7.9 }
];


const summaries = movies.map(({ title, rating }) => `${title} has a rating of
${rating}`);


summaries.forEach((summary, index) => {
    const delay = 1000 - (index * 200);


    setTimeout(() => {
        console.log(summary);
    }, delay);
});

What will be logged to the console?

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

Correct answer

  • C
Question 5 on its own page

Question 6

+2 marksOne correct option

Consider the below JavaScript program.

javascript
let a = 10;
let obj = {
    a: 20,
    fn: function() {
        let a = 30;
        return () => {
            let a = 40;
            return this.a;
        };
    }
};


console.log(obj.fn()());

What will be the output of the above program?

  1. A

    10

  2. B

    20

  3. C

    30

  4. D

    40

Show answer

Correct answer

  • B

    20

Question 6 on its own page

Question 7

+2 marksOne correct option

Consider the JavaScript code below.

javascript
console.log('Start');


Promise.resolve().then(() => {
    console.log('Promise');
});


setTimeout(() => {
  console.log('Timeout');
}, 0);


console.log('End');

What will be the order of logs in the console?

  1. A

    Start, Timeout, End, Promise

  2. B

    Start, Promise, End, Timeout

  3. C

    Start, End, Promise, Timeout

  4. D

    Start, Promise, Timeout, End

Show answer

Correct answer

  • C

    Start, End, Promise, Timeout

Question 7 on its own page

Question 8

+2 marksOne correct option

In Vuex, what is the purpose of mutations?

  1. A

    To commit asynchronous operations

  2. B

    To directly mutate the state

  3. C

    To get the state

  4. D

    To define computed properties

Show answer

Correct answer

  • B

    To directly mutate the state

Question 8 on its own page

Question 9

+4.5 marksOne correct option

Consider the below JavaScript program.

javascript
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('A'), 100);
});


const p2 = new Promise((resolve, reject) => {
  setTimeout(() => reject('B'), 50);
});


const p3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('C'), 150);
});


Promise.any([p1, p2, p3])
  .then(value => console.log(value))
  .catch(error => console.log(error));

What will be the output of the above program?

  1. A

    A

  2. B

    B

  3. C

    C

  4. D

    The catch block will execute

Show answer

Correct answer

  • A

    A

Question 9 on its own page

Question 10

+4.5 marksOne correct option

Consider the below Vuex implementation.

javascript
const store = new Vuex.Store({
  state: {
    token: sessionStorage.getItem('authToken') || null
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
      sessionStorage.setItem('authToken', token);
    },
    clearToken(state) {
      state.token = null;
      sessionStorage.removeItem('authToken');
    }
  },
  actions: {
    login({ commit }, token) {
      commit('setToken', token);
    },
    logout({ commit }) {
      commit('clearToken');
    }
  }
});

After the user logs in with a token and refreshes the page, what will happen to the Vuex state and the session storage?

  1. A

    The session storage will reset, but the Vuex state will still contain the “authToken”.

  2. B

    Both the Vuex state and the sessionStorage will retain the token after the page refresh.

  3. C

    The Vuex state will load the token from sessionStorage after the page refresh.

  4. D

    The token will be lost from both the Vuex state and sessionStorage after the page refresh.

Show answer

Correct answer

  • C

    The Vuex state will load the token from sessionStorage after the page refresh.

Question 10 on its own page

Question 11

+4.5 marksOne correct option

Consider the following HTML, which includes Vue 2 and Vue Router 3 CDN links.

html
<body>
    <div id="app"></div>
    <script>
        const Home = { template: `<h1>Home</h1>` }
        const NewestComments = { template: `<h3>Newest Comments</h3>` }
        const TopComments = { template: `<h3>Top Comments</h3>` }
        const SearchResults = { template: `<h3>Search Results</h3>` }
        const TopBar = { template: `<h3>Topbar</h3>` }
        const NavBar = { template: `<h3>Navbar</h3>` }
        const VideoDetail = { template: `<div>Video Details <router-view />
                                        </div>` }


        const routes = [
            { path: '/', component: Home },
            {
                path: '/video/:id',
                component: VideoDetail,
                props: true,
                children: [
                    { path: 'comments/top', component: TopComments },
                    { path: 'comments/newest', component: NewestComments }
                ]
            },
            { path: '/search/:query', component: SearchResults, props: true }
        ];


        new Vue({
            el: '#app',
            template: `<div>
                            <TopBar />
                            <NavBar />
                            <router-view />
                        </div>`,
            router: new VueRouter({ routes }),
            components: { TopBar, NavBar }
        })
    </script>
</body>

Given this router setup, which of the following will happen when a user navigates to localhost:5000/#/video/5/comments/newest, assuming the webpage is hosted on localhost:5000?

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

Correct answer

  • A
Question 11 on its own page

Question 12

+4.5 marksOne correct option

Consider the following HTML, which includes Vue 2 and Vue Router 3 CDN links.

html
<div id="app">
    <player-card>
        <p>Rahul is a versatile player, skilled in defense and attack.</p>
        <template v-slot:extra>
            <p>Position: Captain</p>
            <p>Years on the team: 5</p>
        </template>
    </player-card>
</div>


<script>
    Vue.component('player-card', {
        props: {
            playerName: {
                type: String,
                default: 'Unknown Player'
            }
        },
        template: `
      <div class="card">
        <h2>{{ playerName }}</h2>
        <slot>
          <p>This player is an important part of the team.</p>
        </slot>
        <slot name="extra"></slot>
      </div>
    `
    });


    new Vue({
        el: '#app'
    });
</script>

What will be the final-rendered output in the browser?

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

Correct answer

  • C
Question 12 on its own page

Question 13

+2 marksOne or more correct options

Which of the following is/are the use cases of watchers in Vue.js?

Select all that apply.

  1. A

    To watch a reactive property and perform actions when it changes.

  2. B

    To cache values based on reactive dependencies.

  3. C

    To perform side effects when a specific data property changes.

  4. D

    To create reactive data within the component.

Show answer

Correct answers

  • A

    To watch a reactive property and perform actions when it changes.

  • C

    To perform side effects when a specific data property changes.

Question 13 on its own page

Question 14

+3 marksOne or more correct options

Which of the following statement(s) accurately describe the relationship between system state and application state?

Select all that apply.

  1. A

    System state often includes user-specific data that changes frequently.

  2. B

    Application state can depend on system state, but not the other way around.

  3. C

    System state is more general and global, while application state is user- specific.

  4. D

    Changes in system state often require a complete page reload to take effect.

Show answer

Correct answers

  • B

    Application state can depend on system state, but not the other way around.

  • C

    System state is more general and global, while application state is user- specific.

Question 14 on its own page

Question 15

+3 marksOne or more correct options

Which of the following statement(s) is/are true about Vue.js components?

Select all that apply.

  1. A

    Components can be reused throughout the application to create modular and maintainable code.

  2. B

    Props are used to pass data from child components to parent components.

  3. C

    Components can have their own lifecycle hooks independent of the parent component.

  4. D

    Data in components must be a function that returns an object to ensure each instance has its own copy.

Show answer

Correct answers

  • A

    Components can be reused throughout the application to create modular and maintainable code.

  • C

    Components can have their own lifecycle hooks independent of the parent component.

  • D

    Data in components must be a function that returns an object to ensure each instance has its own copy.

Question 15 on its own page

Question 16

+3 marksOne or more correct options

Consider the below Vue component.

html
<template>
  <div>
    <button @click="setDarkMode">Dark Mode</button>
    <button @click="setLightMode">Light Mode</button>
  </div>
</template>


<script>
export default {
  data() {
    return {
      theme: localStorage.getItem('theme') || 'light'
    };
  },
  methods: {
    setDarkMode() {
      this.theme = 'dark';
      localStorage.setItem('theme', 'dark');
    },
    setLightMode() {
      this.theme = 'light';
      localStorage.setItem('theme', 'light');
    }
  }
};
</script>

Which of the following statement(s) is/are correct about the behavior of the above component?

Select all that apply.

  1. A

    The theme will persist across page reloads because it is stored in localStorage.

  2. B

    If the user opens a new tab, the theme will reset to 'light' in that new tab.

  3. C

    The theme will reset to 'light' every time the page is refreshed.

  4. D

    The theme will be shared across all open tabs, as localStorage is accessible across tabs of the same origin.

Show answer

Correct answers

  • A

    The theme will persist across page reloads because it is stored in localStorage.

  • D

    The theme will be shared across all open tabs, as localStorage is accessible across tabs of the same origin.

Question 16 on its own page