Quiz Space

September 2024 term · Modern Application Development II · BSCS2006

MAD 2 End Term: 22 December 2024, Set QDF1 (September 2024 term)

The IIT Madras BS Modern Application Development II (MAD 2) End Term paper sat on 22 Dec 2024, in the September 2024 term, set QDF1: 32 questions for 100 marks in 180 minutes. Every question is below with its answer. Take it as a timed mock test to be marked, or read it through first.

Questions
32
Marks
100
Duration
180 min
MCQ
29
MSQ
3
Take as mock testPractise with answers

Updated

Official paper: IIT M FOUNDATION DIPLOMA AN EXAM QDF3 22 Dec 2024 · No negative marking.

Question 1

+3 marksOne correct option

Which of the following statements is true about closures in JavaScript?

  1. A

    A closure can access variables from its outer function even after the outer function has returned.

  2. B

    A closure can be created when a function is defined inside another function.

  3. C

    Closures are useful for data encapsulation and controlling access to private data.

  4. D

    All of these.

Show answer

Correct answer

  • D

    All of these.

Question 1 on its own page

Question 2

+3 marksOne correct option

Consider the below JavaScript program.

javascript
console.log("Start");


setTimeout(function() {
  console.log("Inside Timeout");
}, 0);


Promise.resolve().then(function() {
  console.log("Inside Promise");
});


console.log("End");

What will be the output of the above program?

  1. A

    Start
    Inside Timeout
    Inside Promise
    End

  2. B

    Start
    Inside Promise
    Inside Timeout
    End

  3. C

    Start
    End
    Inside Timeout
    Inside Promise

  4. D

    Start
    End
    Inside Promise
    Inside Timeout

Show answer

Correct answer

  • D

    Start
    End
    Inside Promise
    Inside Timeout

Question 2 on its own page

Question 3

+3 marksOne correct option

Consider the below JavaScript program.

javascript
function Person(name) {
  this.name = name;
}


Person.prototype.greet = function() {
  console.log("Hello, " + this.name);
};


const john = new Person("John");
john.greet();


delete john.greet;
john.greet();

What will be the output of the above program?

  1. A

    Hello, John
    TypeError: john.greet is not a function

  2. B

    Hello, John
    Hello, undefined

  3. C

    TypeError: john.greet is not a function
    TypeError: john.greet is not a function

  4. D

    Hello, John
    Hello, John

Show answer

Correct answer

  • D

    Hello, John
    Hello, John

Question 3 on its own page

Question 4

+3 marksOne correct option

Consider the below Vue app.

javascript
new Vue({
  el: '#app',
  data: {
      user: {
      name: 'Abhi',
      age: 30
      }
  },
  watch: {
      user: {
      handler(newValue, oldValue) {
      console.log('User object changed:', newValue);
      },
      deep: true
      }
  }
});

What will happen if the following code is executed?

app.user.name = “Dev”

  1. A

    The watcher will not be triggered because “name” is a nested property of “user” object.

  2. B

    The watcher will be triggered and log "User object changed: { name: 'Bob', age: 30 }".

  3. C

    The watcher will be triggered, but it will only log the new “name” value, i.e., “Dev”, and not the entire user object.

  4. D

    The watcher will throw an error because deep watching is not supported on nested objects.

Show answer

Correct answer

  • B

    The watcher will be triggered and log "User object changed: { name: 'Bob', age: 30 }".

Question 4 on its own pageAlso asked in End Term 22 Dec 2024

Question 5

+3 marksOne correct option

Consider the below Vue component.

html
<template>
  <div>
      <p v-if="isVisible">This paragraph is visible</p>
      <p v-else>This paragraph is hidden</p>
  </div>
</template>


<script>
export default {
  data() {
      return {
          isVisible: true
      };
  }
};
</script>

What will happen when “this.isVisible = false” is executed?

  1. A

    The paragraph with the text “This paragraph is visible” will be displayed.

  2. B

    The paragraph with the text “This paragraph is hidden” will be displayed.

  3. C

    Both paragraphs will be displayed because of the v-if and v-else bindings.

  4. D

    No change will happen since v-if and v-else do not update the DOM.

Show answer

Correct answer

  • B

    The paragraph with the text “This paragraph is hidden” will be displayed.

Question 5 on its own page

Question 6

+3 marksOne correct option
  1. A

    secure=True and samesite='Strict'

  2. B

    secure=False and samesite='Strict'

  3. C

    secure=True and samesite='None'

  4. D

    secure=False and samesite='Lax'

Show answer

Correct answer

  • A

    secure=True and samesite='Strict'

Question 6 on its own page

Question 7

+3 marksOne correct option

Consider the following JavaScript code.

javascript
function addItemToCart(item) {
        let cart = JSON.parse(localStorage.getItem('cart')) || [];
        cart.push(item);
        localStorage.setItem('cart', JSON.stringify(cart));
    }


    function getCartItems() {
        return JSON.parse(localStorage.getItem('cart')) || [];
    }


    addItemToCart({ id: 1, name: 'Laptop' }.name);
    console.log(getCartItems());

The above code is initially loaded on the browser and then the browser is refreshed two times. What will be the final output?

  1. A

    []

  2. B

    ['Laptop', ‘Laptop’, ‘Laptop’]

  3. C

    [{ id: 1, name: 'Laptop' }]

  4. D

    [undefined]

Show answer

Correct answer

  • B

    ['Laptop', ‘Laptop’, ‘Laptop’]

Question 7 on its own page

Question 8

+3 marksOne correct option

Which of the following is true regarding long polling?

  1. A

    Long polling opens multiple connections between the client and the server, and the server continuously sends updates to the client in real-time.

  2. B

    Long polling involves the client repeatedly sending requests at fixed intervals to the server to check for updates, regardless of whether new data is available.

  3. C

    Long polling allows the client to make a single request to the server, where the server holds the connection open until new data is available and then sends the response.

  4. D

    Long polling uses WebSockets to maintain a persistent, bidirectional connection between the client and the server.

Show answer

Correct answer

  • C

    Long polling allows the client to make a single request to the server, where the server holds the connection open until new data is available and then sends the response.

Question 8 on its own pageAlso asked in End Term 22 Dec 2024

Question 9

+3 marksOne correct option

What's the issue with this Vuex mutation? Assuming this mutation is part of vuex store.

javascript
mutations: {
  updateUser(state, userData) {
    state.user = userData
    state.lastUpdated = Date.now()
    if (userData.role === 'admin') {
      fetchAdminData().then(data => {
        state.adminData = data
      })
    }
  }
}
  1. A

    Multiple state changes in one mutation

  2. B

    Async operation in mutation

  3. C

    Direct state mutation

  4. D

    Both Multiple state changes in one mutation and Async operation in mutation

Show answer

Correct answer

  • B

    Async operation in mutation

Question 9 on its own page

Question 10

+3 marksOne correct option

Suppose you want the user data to only be accessible by an authenticated user. What security issue exists in this code?

// javascript

javascript
methods: {
  async fetchUserData() {
    const response = await fetch(`/api/user/${this.userId}`)
    const data = await response.json()
    this.userData = data
  }
}

# Flask route

python
@app.route('/api/user/<user_id>')
def get_user(user_id):
    query = f"SELECT * FROM users WHERE id = {user_id}"
    result = db.execute(query)
    return jsonify(result)
  1. A

    No authentication check

  2. B

    SQL injection vulnerability

  3. C

    Unvalidated user input

  4. D

    All of these

Show answer

Correct answer

  • D

    All of these

Question 10 on its own page

Question 11

+3 marksOne correct option

Given this Vue component structure:

javascript
 Vue.component('child', {
    template: `
        <div>
            <slot name="header" :info="info"></slot>
            <slot :info="info"></slot>
        </div>
    `,
    data() {
        return {
            info: { title: 'Hello', desc: 'World' }
        }
    }
})

Which slot usage is correct?

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

Correct answer

  • B
Question 11 on its own page

Question 12

+3 marksOne correct option

Consider the following JavaScript code snippet.

javascript
Promise.resolve(1)
    .then(x => x + 1)
    .then(x => Promise.resolve(x + 1))
    .then(x => { throw 'error' })
    .catch(e => e + 4)
    .then(x => console.log(x))

What will be the output on the console?

  1. A

    error4

  2. B

    7

  3. C

    error

  4. D

    undefined

Show answer

Correct answer

  • A

    error4

Question 12 on its own pageAlso asked in End Term 22 Dec 2024

Question 13

+3 marksOne correct option

consider the following javascript code snippet.

javascript
async function test() {
    console.log("Start");
    const val = await Promise.resolve(5);
    console.log(val);
    return "End";
}


console.log("Begin");
test().then(data => console.log(data));
console.log("Finish");

What will be the output sequence?

  1. A

    Begin, Start, 5, End, Finish

  2. B

    Begin, Finish, Start, 5, End

  3. C

    Begin, Finish, Start, End, 5

  4. D

    Begin, Start, Finish, 5, End

Show answer

Correct answer

  • D

    Begin, Start, Finish, 5, End

Question 13 on its own pageAlso asked in End Term 22 Dec 2024

Question 14

+3 marksOne correct option

Which of the following best describes the difference between @cache.memoize() and @cache.cached() in Flask-Caching?

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

Correct answer

  • A
Question 14 on its own page

Question 15

+3 marksOne correct option

Consider the following Script embedded in an HTML document.

javascript
let x = [100, 'x', num => num + 1];


for (const i = 0; i<x.length; i++) {
    console.log(i, x[i], typeof(x[i]))
}

Which of the following statement is correct, if the HTML document is rendered using a browser?

  1. A

    It will display the indices, values and types of all the items of the array.

  2. B

    It will throw error on the console for the very first iteration.

  3. C

    It will display the index, value and type of the value for the first item of array and then will throw error for the next value.

  4. D

    None of these.

Show answer

Correct answer

  • C

    It will display the index, value and type of the value for the first item of array and then will throw error for the next value.

Question 15 on its own page

Question 16

+2 marksOne correct option

Which of the following statements is false when using the “async” and “await” keywords in JavaScript?

  1. A

    The “await” keyword can only be used inside an async function.

  2. B

    The “await” keyword pauses the execution of the surrounding async function until the promise resolves.

  3. C

    The async functions always return a promise, even if the return value is not a promise.

  4. D

    The async functions run synchronously, but their await statements execute asynchronously.

Show answer

Correct answer

  • D

    The async functions run synchronously, but their await statements execute asynchronously.

Question 16 on its own pageAlso asked in End Term 22 Dec 2024

Question 17

+2 marksOne correct option

Consider the below JavaScript program.

javascript
const obj = {
  name: "Abhi",
  greet: function() {
      console.log(this.name);
  }
};


const greet = obj.greet;
greet();

What will be the output of the above program?

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

Correct answer

  • B
Question 17 on its own page

Question 18

+2 marksOne correct option

Consider the below JavaScript program.

javascript
const person = {
  firstName: "John",
  lastName: "Doe",
  fullName: function() {
      return this.firstName + " " + this.lastName;
  }
};


const newPerson = person.fullName.bind({ firstName: "Jane", lastName:
"Smith" });
console.log(newPerson());

What will be the output of the above program?

  1. A
  2. B
  3. C
  4. D
  5. E
  6. F
  7. G
Show answer

Correct answer

  • B
Question 18 on its own page

Question 19

+2 marksOne correct option

Which of the following statements about the beforeDestroy and destroyed lifecycle hooks in Vue is true?

  1. A

    The “beforeDestroy” hook is called after the component is removed from the DOM, and the “destroyed” hook is called before the component is destroyed.

  2. B

    The “beforeDestroy” hook is called before the component is removed from the DOM, and the “destroyed” hook is called after the component is destroyed.

  3. C

    The “beforeDestroy” hook is called when the component is mounted, and the “destroyed” hook is called before the component is destroyed.

  4. D

    Both hooks are called after the component is destroyed.

Show answer

Correct answer

  • B

    The “beforeDestroy” hook is called before the component is removed from the DOM, and the “destroyed” hook is called after the component is destroyed.

Question 19 on its own page

Question 20

+2 marksOne correct option

Consider the following JavaScript code.

javascript
function add(x) {
    return function (y) {
        return x + y;
    };
}


const addFive = add(5);
console.log(addFive(10));

What will be the output of the code snippet?

  1. A

    5

  2. B

    10

  3. C

    15

  4. D

    20

Show answer

Correct answer

  • C

    15

Question 20 on its own page

Question 21

+2 marksOne correct option

Which of the following statements is FALSE?

  1. A

    Cache-Control: no-store prevents caching

  2. B

    ETag helps validate cache freshness

  3. C

    Data stored in sessionStorage remains available even after the browser is closed and reopened.

  4. D

    localStorage has larger storage limit than cookies

Show answer

Correct answer

  • C

    Data stored in sessionStorage remains available even after the browser is closed and reopened.

Question 21 on its own pageAlso asked in End Term 22 Dec 2024

Question 22

+2 marksOne correct option

What will happen if a page includes this CSP header and the script attempts to load an external JavaScript file from otherurl.com?

CSP Header:

text
Content-Security-Policy: default-src 'self';

HTML :

html
<script src="https://otherurl.com/code.js"></script>
  1. A
  2. B
  3. C
  4. D
Show answer

Correct answer

  • B
Question 22 on its own page

Question 23

+4.5 marksOne correct option

Consider the below HTML document.

html
<!DOCTYPE html>
<html>
<body>
    <div>
        <div id="grandparent">GrandParent
            <div id="parent">Parent
                <div id="child"> Child</div>
            </div>
        </div>
    </div>
    <script>
        const grandParent = document.getElementById("grandparent");
        const parent = document.getElementById("parent");
        const child = document.getElementById("child");


        grandParent.addEventListener("click", (e) => {
            console.log("GrandParent");
        }, { capture: true });


        parent.addEventListener("click", (e) => {
            console.log("Parent");
        }, { capture: true });


        child.addEventListener("click", (e) => {
            console.log("Child");
        }, { capture: true });
    </script>
</body>
</html>

What will be logged on the console, if the user opens the rendered web page in a browser and clicks the text “Child”?

  1. A

    Child
    Parent
    GrandParent

  2. B

    Child

  3. C

    GrandParent
    Parent
    Child

  4. D

    None of these

Show answer

Correct answer

  • C

    GrandParent
    Parent
    Child

Question 23 on its own page

Question 24

+4.5 marksOne correct option

Given the following Vuex store setup.

javascript
const store = new Vuex.Store({
  state: {
      counter: 0
  },
  mutations: {
      increment(state) {
          state.counter++;
      }
  },
  actions: {
      async incrementAsync({ commit }) {
          await new Promise(resolve => setTimeout(resolve, 1000));
          commit('increment');
      }
  }
});

Assuming the store is correctly binded with a Vue app, what will be the correct behavior when the following code is executed?

javascript
this.$store.dispatch('incrementAsync');
  1. A

    The increment mutation will be called immediately after the dispatch.

  2. B

    The state will be updated after the asynchronous operation completes.

  3. C

    The incrementAsync action will be executed synchronously, and increment will be committed before the promise resolves.

  4. D

    The action will be skipped since mutations cannot be called inside actions.

Show answer

Correct answer

  • B

    The state will be updated after the asynchronous operation completes.

Question 24 on its own pageAlso asked in End Term 22 Dec 2024

Question 25

+4.5 marksOne correct option

Consider the following HTML with Vue CDN included?

html
<div id="app"></div>
    <script>
        Vue.component('my-button', {
            template: `
                <button @click="handleClick">
                <slot></slot>
                </button>
                `,
            methods: {
                handleClick() {
                    console.log('Button')
                    this.$emit('click')
                }
            }
        })


        new Vue({
            el: '#app',
            template: `
            <my-button @click="parentClick">
             Click me
            </my-button>
   `,
            methods: {
                parentClick() {
                    console.log('Parent')
                }
            }
        })


    </script>

What will be logged on the console after the button is pressed?

  1. A

    Parent

  2. B

    Button

  3. C

    Button
    Parent

  4. D

    Parent
    Button

Show answer

Correct answer

  • C

    Button
    Parent

Question 25 on its own page

Question 26

+4.5 marksOne correct option

Consider the following HTML with appropriate Vue 2 CDN link attached.

html
<div id="app"></div>
    <script>
        new Vue({
            el: '#app',
            template: `
            <div>
                <p>Likes: {{ displayLikes }}</p>
                <button @click="handleLike">Like</button>
             </div>`,
            data() {
                return {
                    post: {
                        likes: 5,
                        metadata: { lastUpdated: null }
                    }
                }
            },
            computed: {
                displayLikes: {
                    get() {
                        return this.post.likes;
                    },
                    set(value) {
                        this.post.likes = value;
                    }
                }
            },
            methods: {
                handleLike() {
                    Promise.resolve().then(() => {
                        this.displayLikes++;
                    });
                    this.displayLikes += 1;
                    setTimeout(() => {
                        this.displayLikes = this.displayLikes + 1;
                    }, 0);
                }
            }
        })
    </script>

What will be rendered in the <p> tag after the Like button is pressed once?

  1. A

    Likes: 5

  2. B

    Likes: 8

  3. C

    Likes: 6

  4. D

    Likes: 9

Show answer

Correct answer

  • B

    Likes: 8

Question 26 on its own page

Question 27

+4.5 marksOne correct option

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

html
<div id="app">
        <p v-if="userData">User: {{ userData.name }}</p>
        <p v-else>No user data available</p>
    </div>


    <script>
        const store = new Vuex.Store({
            state: {
                userData: null
            },
            mutations: {
                setUserData(state, data) {
                    state.userData = data;
                }
            },
            actions: {
                fetchUserData({ commit }) {
                    return fetch('https://httpstat.us/500')
                        .then(response => {
                            if (!response.ok) throw new Error('Network error');
                            return response.json();
                        })
                        .then(data => {
                            commit('setUserData', data);
                        },
                            error => {
                                commit('setUserData', { name: 'Luke' })
                            })
                        .catch(() => {
                            commit('setUserData', null);
                        });
                }
            }
        });




        new Vue({
            el: '#app',
            store,
            created() {
                this.$store.dispatch('fetchUserData');
            },


            computed: {
                userData() {
                    return this.$store.state.userData;
                }
            }
        });


    </script>

What will be rendered on the browser, if the fetch request gets back 500 status code?

  1. A

    The userData in the store is set to the data from the API.

  2. B

    User: null

  3. C

    The error will be logged, Nothing will be displayed

  4. D

    User: Luke

Show answer

Correct answer

  • D

    User: Luke

Question 27 on its own page

Question 28

+4.5 marksOne correct option

Consider the following Script embedded in an HTML document.

javascript
let bsCourses = {
    subject:'MAD II',
    stream:'Programming'
}


let esCourses = bsCourses;
let msCourses = {};


for (let course in bsCourses){
    msCourses[key] = bsCourses[key];
}


esCourses.subject = 'Embedded C'
msCourses.stream = 'Electronics'


console.log(msCourses)

What will be the output on console, if the HTML document is rendered using a browser?

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

Correct answer

  • C
Question 28 on its own page

Question 29

+4.5 marksOne correct option

Consider the following Script embedded in an HTML document.

javascript
var var1 = 56;


const exObj = {
    var2: 24,
    var1: 15,
    inObj : {
      var1: 75,
      inObjFunc: ()=>{
        return "Value is " + this.var1;
      }
    },
    exObjFunc: function(){
        let var2 = 14;
        return "Value is " + this.var2;
    }
  }


let x = exObj.inObj
console.log(x.inObjFunc())
console.log(exObj.exObjFunc())

What will be the output on console, if the HTML document is rendered using a browser?

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

Correct answer

  • B
Question 29 on its own page

Question 30

+3 marksOne or more correct options

Consider the following Script embedded in an HTML document.

javascript
let myBox = {
        tool: "Wrench",
        cutter: "Machine Cutter",
        get tools(){
            return `tool: ${this.tool}, cutter: ${this.cutter}`
        },
        set tools(q){
            let box = q.split(' ');
            this.tool = box[0];
            this.cutter = box[1];
        }
    }

Which of the following statements will throw an error on the console when the HTML document is rendered using a browser?

Select all that apply.

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

Correct answers

  • B
  • C
Question 30 on its own page

Question 31

+4.5 marksOne or more correct options

Consider the following two HTML documents and the Vue app created in script.js file and select the correct option(s).

index1.html

html
<body>
    <div id="app">
        <h1 v-if="result">Hello am I visible?</h1>
    </div>
    <script src="./script.js"></script>
</body>

index2.html

html
<body>
    <div id="app">
        <h1 v-show="final">Hello am I visible?</h1>
    </div>
    <script src="./script.js"></script>
</body>

script.js

javascript
var app = new Vue({
    el: '#app',
    data: {
        result: false,
        final: false
    }
})

Select all that apply.

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

Correct answers

  • A
  • B
Question 31 on its own page

Question 32

+2 marksOne or more correct options

Consider the below Vue router configuration.

javascript
const routes = [
  {
      path: '/user/:id',
      component: UserProfile
  }
];


const router = new VueRouter({
  routes
});

Which of the following is a valid way to access the “id” parameter inside the UserProfile component?

Select all that apply.

  1. A

    this.$route.params.id

  2. B

    this.$router.params.id

  3. C

    this.$route.query.id

  4. D

    this.$route.params['id']

Show answer

Correct answers

  • A

    this.$route.params.id

  • D

    this.$route.params['id']

Question 32 on its own page