uiz Space

May 2025 term · Modern Application Development II · BSCS2006

Modern Application Development II Quiz 1: 13 July 2025 (May 2025 term)

The IIT Madras BS Modern Application Development II (MAD 2) Quiz 1 paper sat on 13 Jul 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
15
MSQ
1
Take as mock testPractise with answers

Updated

Official paper: IIT M DIPLOMA AN EXAM QDD2 13 July 2025 · No negative marking.

Question 1

+2 marksOne correct option

In Vue 2, what happens when you update a data property?

  1. A

    DOM is immediately updated without virtual DOM

  2. B

    The page reloads

  3. C

    The virtual DOM detects changes and updates efficiently

  4. D

    A full component re-renders from scratch

Show answer

Correct answer

  • C

    The virtual DOM detects changes and updates efficiently

Question 1 on its own page

Question 2

+2 marksOne correct option

Consider the following HTML, with the correct Vue 2 CDN links included:

Html code.

html
<div id="app">
    <h3>Shopping Cart</h3>
    <p>Items: {{itemCount}}</p>
    <p>Total Cost: ${{totalCost}}</p>
    <button @click="addItem">Add Item ($15)</button>
    <button @click="removeItem">Remove Item</button>
    <p>Status: {{status}}</p>
</div>

script:

javascript
const app = new Vue({
    el: '#app',
    data() {
        return {
            itemCount: 0,
            itemPrice: 15,
            totalCost: 0
        }
    },
    computed: {
        status() {
            if (this.itemCount === 0) {
                return 'Empty Cart';
            } else if (this.itemCount < 3) {
                return 'Few Items';
            } else {
                return 'Full Cart';


            }
        }
    },
    methods: {
        addItem() {
            this.itemCount++;
            this.totalCost += this.itemPrice;
        },
        removeItem() {
            if (this.itemCount > 0) {
                this.itemCount--;
                this.totalCost -= this.itemPrice;
            }
        }
    }
})

If the user clicks the "Add Item" button 3 times, then clicks the "Remove Item" button 1 time, what will be displayed for Items, Total Cost, and Status?

  1. A

    Items: 2, Total Cost: $30, Status: Few Items

  2. B

    Items: 2, Total Cost: $45, Status: Few Items

  3. C

    Items: 3, Total Cost: $30, Status: Full Cart

  4. D

    Items: 2, Total Cost: $30, Status: Full Cart

  5. E

    Items: 1, Total Cost: $15, Status: Few Items

Show answer

Correct answer

  • A

    Items: 2, Total Cost: $30, Status: Few Items

Question 2 on its own page

Question 3

+2 marksOne correct option

Consider the following code.

javascript
const arr = [1, 2, 3];
const result = arr.map(function(item, index) {
  return this[index] * item;
}, [10, 20, 30]);
console.log(result);

What will be the output?

  1. A

    [1, 2, 3]

  2. B

    [10, 40, 90]

  3. C

    [10, 20, 30]

  4. D

    [NaN, NaN, NaN]

Show answer

Correct answer

  • B

    [10, 40, 90]

Question 3 on its own page

Question 4

+2 marksOne correct option
  1. A

    this.items.push(4)

  2. B

    this.items[0] = 10

  3. C

    this.items = [10, 2, 3]

  4. D

    this.obj.a = 2

Show answer

Correct answer

  • B

    this.items[0] = 10

Question 4 on its own page

Question 5

+3 marksOne correct option

What will be the output of this code?

javascript
function createFunctions() {
  var funcs = [];
  for (var i = 0; i < 3; i++) {
    funcs.push(function() {
      return i;
    });
  }
  return funcs;
}


const functions = createFunctions();
console.log(functions[0](), functions[1](), functions[2]());
  1. A

    0, 1, 2

  2. B

    1, 2, 3

  3. C

    undefined, undefined, undefined

  4. D

    3, 3, 3

Show answer

Correct answer

  • D

    3, 3, 3

Question 5 on its own page

Question 6

+3 marksOne correct option

Which computed property implementation is INCORRECT?

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

Correct answer

  • C
Question 6 on its own page

Question 7

+3 marksOne correct option

Consider the following JavaScript code:

javascript
const products = [
    { id: 101, name: "laptop", price: 800 },
    { id: 102, name: "mouse", price: 25 },
    { id: 103, name: "keyboard", price: 60 },
    { id: 104, name: "monitor", price: 300 }
];


const priorities = { "102": 1, "104": 2, "101": 3, "103": 4 };


products
    .filter((product) => product.price > 50)
    .map((product) => {
        return { ...product, priority: priorities[product.id] }
    })
    .sort((a, b) => a.priority - b.priority)
    .forEach((product) => {
        console.log(product.name);
    });

What will be the output of the code?

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

Correct answer

  • B
Question 7 on its own page

Question 8

+4.5 marksOne correct option

Consider the following JavaScript code to answer the below question:

javascript
const grandParent = {
  username: 'GrandParent',
  getName: function () {
    return this.username;
  },
  parent: {
    username: 'Parent',
    getName: function () {
      return this.username;
    },
    child: {
      username: 'Child',
      getNameArrow: () => {
        return this.username;
      },
      getNameFunc: function () {
        return this.username;


       }
    }
  }
};


console.log("A: " + grandParent.getName());
console.log("B: " + grandParent.parent.getName());
console.log("C: " + grandParent.parent.child.getNameFunc());
console.log("D: " + grandParent.parent.child.getNameArrow());

What will be the result of all the console.log after execution of the above code?

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

Correct answer

  • D
Question 8 on its own page

Question 9

+4.5 marksOne correct option

Consider the following Vue.js (Vue 2) code to answer the following question:

html
<div id="app">
  <my-counter :start="5"></my-counter>
</div>


<script>
  Vue.component('my-counter', {
    props: ['start'],
    data: function () {
      return {
        count: this.start
      };
    },
    template: `
              <div>
                <p>{{ count }}</p>
                <button @click="increment">Increment</button>
              </div>
             `,
    methods: {
      increment() {
        this.count++;


      }
    }
  });


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

What will be displayed when the page loads, and what happens when you click the button?

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

Correct answer

  • B
Question 9 on its own page

Question 10

+4.5 marksOne correct option

Consider the following JavaScript program:

javascript
function createMultiplier(base) {
    let multiplier = base;


    function updateMultiplier(newValue) {
        multiplier = newValue;
        return multiplier;
    }


    function multiply(num) {
        return num * multiplier;
    }


    return {
        update: updateMultiplier,
        calculate: multiply,
        getMultiplier: function() { return multiplier; }
    };
}


const math1 = createMultiplier(3);
const math2 = createMultiplier(5);


console.log(math1.calculate(4));
console.log(math2.calculate(2));
console.log(math1.update(7));
console.log(math1.calculate(4));
console.log(math2.getMultiplier());
console.log(math1.getMultiplier());

What will be the output of the above program?

  1. A

    12, 10, 7, 12, 5, 7

  2. B

    12, 10, 7, 28, 5, 7

  3. C

    12, 10, 3, 28, 5, 3

  4. D

    15, 10, 7, 28, 7, 7

  5. E

    12, 10, 7, 21, 5, 7

Show answer

Correct answer

  • B

    12, 10, 7, 28, 5, 7

Question 10 on its own page

Question 11

+4.5 marksOne correct option

Consider the following JavaScript code snippet:

javascript
var globalScore = 25;


const player1 = {
    score: 150,
    getScore: function() {
        return this.score;
    },
    displayScore: function(bonus) {
        return this.score + (bonus || 0);
    }
};


const player2 = { score: 200 };
const player3 = { score: 75 };


const method1 = player1.getScore;
const method2 = player1.getScore.bind(player2);
const method3 = player1.displayScore.bind(player3);


console.log(method1());
console.log(method2());
console.log(method3(50));
console.log(method3.call(player1, 25));

What will be the output of the above JavaScript code?

  1. A

    undefined, 200, 125, 175

  2. B

    25, 200, 125, 175

  3. C

    150, 200, 125, 100

  4. D

    25, 200, 125, 100

  5. E

    undefined, 200, 125, 100

Show answer

Correct answer

  • E

    undefined, 200, 125, 100

Question 11 on its own page

Question 12

+3 marksOne or more correct options

Consider the following JavaScript code to answer the below question:

javascript
function normalFunc() {
  console.log(this.constructor.name);
}


const arrowFunc = () => {
  console.log(this.constructor.name);
};


const objj = {
  name: 'Test',
  normalMethod: normalFunc,
  arrowMethod: arrowFunc,
  outer: function () {
    return () => {
      console.log(this.name);
    };
  }
};


const inner = objj.outer();


objj.normalMethod();
objj.arrowMethod();
inner();
new arrowFunc();

Which of the following statements is/are TRUE?

Select all that apply.

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

Correct answers

  • A
  • B
  • C
  • D
Question 12 on its own page

Question 13

+3 marksOne correct option

You're building a basic Vue app using Vue 2 via CDN to show a user's login form.

You want to:

  • Show a welcome message once the user enters a name and clicks "Login".
  • Bind the input using v-model.

But this code is yet to be tested, you have to test this code and push it to production.

html
<body>


<div id="app">
  <input v-model="username">
  <button @click="loggedIn = true">Login</button>


  <p v-if="loggedIn">
    Welcome, {{ username }}!
  </p>
</div>


<script>
  new Vue({
    el: '#app',
    data: {
      username: '',
      loggedIn: false
    }
  });
</script>


</body>
</html>

Based on the above data, answer the given subquestions.

Which line of code should be changed to make this code work properly?

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

Correct answer

  • D
Question 13 on its own page

Question 14

+3 marksOne correct option

You're building a basic Vue app using Vue 2 via CDN to show a user's login form.

You want to:

  • Show a welcome message once the user enters a name and clicks "Login".
  • Bind the input using v-model.

But this code is yet to be tested, you have to test this code and push it to production.

html
<body>


<div id="app">
  <input v-model="username">
  <button @click="loggedIn = true">Login</button>


  <p v-if="loggedIn">
    Welcome, {{ username }}!
  </p>
</div>


<script>
  new Vue({
    el: '#app',
    data: {
      username: '',
      loggedIn: false
    }
  });
</script>


</body>
</html>

Based on the above data, answer the given subquestions.

  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 HTML with relevant Vue 2 CDN link attached and answer the given subquestions.

Html file:

html
<div id="app">
    <div :class="[baseClass, { highlighted: isHighlighted,
       'btn-primary': isPrimary, 'btn-disabled': !isEnabled }]">
        {{ buttonText }}
    </div>
    <button @click="toggleState">Toggle State</button>
</div>

script

javascript
const app = new Vue({
    el: '#app',
    data: {
        buttonText: 'Click Me',
        baseClass: 'btn',
        isHighlighted: false,
        isPrimary: true,
        isEnabled: true
    },
    methods: {
        toggleState() {
            this.isHighlighted = !this.isHighlighted;
            this.isPrimary = !this.isPrimary;
            this.isEnabled = !this.isEnabled;
        }
    }
})
  1. A

    btn, highlighted, btn-primary

  2. B

    btn, btn-primary

  3. C

    baseClass, btn-primary

  4. D

    btn, highlighted, btn-primary, btn-disabled

Show answer

Correct answer

  • B

    btn, btn-primary

Question 15 on its own page

Question 16

+3 marksOne correct option

Consider the following HTML with relevant Vue 2 CDN link attached and answer the given subquestions.

Html file:

html
<div id="app">
    <div :class="[baseClass, { highlighted: isHighlighted,
       'btn-primary': isPrimary, 'btn-disabled': !isEnabled }]">
        {{ buttonText }}
    </div>
    <button @click="toggleState">Toggle State</button>
</div>

script

javascript
const app = new Vue({
    el: '#app',
    data: {
        buttonText: 'Click Me',
        baseClass: 'btn',
        isHighlighted: false,
        isPrimary: true,
        isEnabled: true
    },
    methods: {
        toggleState() {
            this.isHighlighted = !this.isHighlighted;
            this.isPrimary = !this.isPrimary;
            this.isEnabled = !this.isEnabled;
        }
    }
})
  1. A

    btn, highlighted

  2. B

    btn, btn-disabled

  3. C

    btn, highlighted, btn-disabled

  4. D

    baseClass, highlighted, btn-disabled

Show answer

Correct answer

  • C

    btn, highlighted, btn-disabled

Question 16 on its own page