uiz Space

January 2025 term · Modern Application Development II · BSCS2006

Modern Application Development II Quiz 1: 23 February 2025 (January 2025 term)

The IIT Madras BS Modern Application Development II (MAD 2) Quiz 1 paper sat on 23 Feb 2025, in the January 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 23 Feb 2025 · No negative marking.

Question 1

+2 marksOne correct option

Which of the following statements is true regarding “v-if” and “v-show” directives in VueJS?

  1. A

    The “v-if” directive adds/removes elements from the DOM, while v-show only toggles visibility using CSS.

  2. B

    The “v-show” directive adds/removes elements from the DOM, while v-if only toggles visibility using CSS.

  3. C

    Both the “v-if” and “v-show” directives add/remove elements from the DOM.

  4. D

    Both the “v-if” and “v-show” directives toggle visibility using CSS.

Show answer

Correct answer

  • A

    The “v-if” directive adds/removes elements from the DOM, while v-show only toggles visibility using CSS.

Question 1 on its own page

Question 2

+2 marksOne correct option

Consider the below JavaScript program.

javascript
let x = 5;
(function () {
  console.log(x);
  let x = 10;
})();

What will be the output of the above program?

  1. A

    —

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

Correct answer

  • D
Question 2 on its own page

Question 3

+2 marksOne correct option

What is the output of this code?

javascript
console.log(myVar);
console.log(myFunc());


var myVar = "hello";
function myFunc() {
    return "world";
}
  1. A

    hello, world

  2. B

    undefined, world

  3. C

    ReferenceError

  4. D

    undefined, undefined

Show answer

Correct answer

  • B

    undefined, world

Question 3 on its own page

Question 4

+2 marksOne correct option

Which of the following statements is true about the let, const, and var keywords in JavaScript?

  1. A

    var is block-scoped, while let and const are function-scoped.

  2. B

    const variables must always be initialized at the time of declaration.

  3. C

    Variables declared with let and const are hoisted and initialized with undefined.

  4. D

    let, const, and var have identical scoping rules.

Show answer

Correct answer

  • B

    const variables must always be initialized at the time of declaration.

Question 4 on its own page

Question 5

+3 marksOne correct option

Consider the below JavaScript program.

javascript
function outer() {
  let count = 0;
  return function inner() {
    return ++count;
  };
}


const counter1 = outer();
const counter2 = outer();


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

What will be the output of the above program?

  1. A

    1
    2
    3

  2. B

    1
    1
    1

  3. C

    1
    2
    1

  4. D

    0
    1
    0

  5. E

    0
    1
    1

Show answer

Correct answer

  • C

    1
    2
    1

Question 5 on its own page

Question 6

+3 marksOne correct option

Consider the 4 JavaScript code snippets given below.

Code Snippet 1:

javascript
let x = 10;
const y;

Code Snippet 2:

javascript
let { a: b } = undefined;

Code Snippet 3:

javascript
const arr = [1, 2];
arr = [3, 4];

Code Snippet 4:

javascript
const a = 10, b = 20;
(() => { return a + b; })();

Which of the above JavaScript code snippet(s) will throw an error?

  1. A

    1 and 2

  2. B

    1, 2 and 3

  3. C

    2, 3 and 4

  4. D

    All 4

Show answer

Correct answer

  • B

    1, 2 and 3

Question 6 on its own page

Question 7

+3 marksOne correct option

Consider the below VueJS application.

html
<div id="app">
  <p>{{ counter }}</p>
  <button @click="updateCounter">Click Me</button>
</div>


<script>
new Vue({
  el: '#app',
  data: {
    counter: 1,
  },
  methods: {
    updateCounter() {
      this.counter *= 2;
    },
  },
});
</script>

What will the “p” tag display when the button with the text “Click Me” is clicked three times?

  1. A

    1

  2. B

    4

  3. C

    8

  4. D

    16

Show answer

Correct answer

  • C

    8

Question 7 on its own page

Question 8

+3 marksOne correct option

Consider the following JavaScript code snippet shown below.

javascript
let length = 5;


function countLen(item){
    console.log(this.length);
}


const data = [countLen, "Apple", length]


data[0]('Script')

What will be output on browser’s console for the above JavaScript code?

  1. A

    6

  2. B

    5

  3. C

    4

  4. D

    3

Show answer

Correct answer

  • D

    3

Question 8 on its own page

Question 9

+3 marksOne correct option

Consider the following JavaScript code snippet shown below.

javascript
var value = 50;


const mainObj = {
    value: 42,
    getValue: function() {
      return this.value;
    }
  };


const nextObj = {
value: 100
};


const getValue1 = mainObj.getValue.bind()(nextObj);
const getValue2 = mainObj.getValue.bind(nextObj)();


console.log(getValue1);
console.log(getValue2);

What will be output on browser’s console for the above JavaScript code?

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

Correct answer

  • D
Question 9 on its own page

Question 10

+3 marksOne correct option

Consider the following JavaScript code

javascript
let Tree = {
    name: "Oak",
    size: 5,
    description: function (size) {
        return `A ${this.size > 10 ? 'large' : 'medium'} ${this.name} tree.`;
    }
}


const willow = {
    name: 'Willow'
};


const returnedString = Tree.description.call(willow, 15);


console.log(returnedString)

What will be the output of the code?

  1. A

    A large Oak tree

  2. B

    A medium Oak tree

  3. C

    A large Willow tree

  4. D

    A medium Willow tree

Show answer

Correct answer

  • D

    A medium Willow tree

Question 10 on its own page

Question 11

+3 marksOne correct option

Consider the following HTML with relevant Vue CDN link attached.

html
<div id="app">
    <div :class="{ active: isActive, 'text-danger': hasError }">
      {{ message }}
    </div>
  </div>


  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello!',
        isActive: true,
        hasError: false
      }
    })
  </script>

Given the Vue.js application above, which classes will be applied to the div containing the message?

  1. A

    Only 'active'

  2. B

    'text-danger' and 'active'

  3. C

    No classes

  4. D

    Only 'text-danger'

Show answer

Correct answer

  • A

    Only 'active'

Question 11 on its own page

Question 12

+4.5 marksOne correct option

Consider the following Vue2 app and the index file given below.

index.html

html
<body>
    <div id="app">
        <h4>{{ state }}</h4>
    </div>
    <script
       src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js">
    </script>
    <script src="./script.js"></script>
</body>
</html>

script.js

javascript
const app = new Vue({
    el: '#app',
    data: {
        terminal: ['3','2','1'],
        curr_status: ["arrived", "departed", "delayed"]
    },
    computed: {
        state: () => {
            return `The flight 103 has ${this.curr_status[1]} from terminal
${this.terminal[2]}.`
        }
    }
})

What will be the output on the browser?

  1. A

    The flight 103 has departed from terminal 1.

  2. B

    The flight 103 has arrived from terminal 2.

  3. C

    The flight 103 has delayed from terminal 3.

  4. D

    The flight 103 has from terminal.

  5. E

    ReferenceError

Show answer

Correct answer

  • E

    ReferenceError

Question 12 on its own page

Question 13

+4.5 marksOne correct option

Consider the following Vue App and the HTML document given below.

index.html

html
<body>
    <div id="app">
        <my-comp>
            <h3>Exploring Vue JS</h3>
            <template v-slot:ongoing>
                <h3>Learning App Dev 2</h3>
            </template>
        </my-comp>
    </div>
    <script src="./script.js"></script>
</body>

script.js

javascript
const MyComp = {
    name: 'my-comp',
    props: ['tech'],
    template : `<div class="container">
                    <slot name="complete"><h3>Learned DBMS</h3></slot>
                    <slot name="ongoing"></slot>
                    <slot>Exploring Frontend</slot>
                </div>`
}


const app = new Vue({
    el: '#app',
    components: {
        MyComp
    }
})

What will be rendered on the browser for code setup given above?

  1. A

    Learning App Dev 2
    Exploring Vue JS

  2. B

    Learning App Dev 2
    Exploring Frontend

  3. C

    Learned DBMS
    Learning App Dev 2
    Exploring Frontend

  4. D

    Learned DBMS
    Learning App Dev 2
    Exploring Vue JS

Show answer

Correct answer

  • D

    Learned DBMS
    Learning App Dev 2
    Exploring Vue JS

Question 13 on its own page

Question 14

+4.5 marksOne correct option

Consider the following HTML with relevant Vue CDN link attached.

html
<div id="app1">
    {{ messageA }}
  </div>
  <div id="app2">
    {{ messageB }}
  </div>


  <script>
    const vm1 = new Vue({
      el: '#app1',
      data: {
        messageA: 'Hello from App 1'
      }
    })


    const vm2 = new Vue({
      el: '#app2',
      data: {
        messageB: 'Hello from App 2'
      }
    })


    vm1.messageA = 'Updated App 1';
  </script>

After the code execution above, what will be displayed on the page?

  1. A

    "Updated App 1" and "Hello from App 2"

  2. B

    "Hello from App 1" and "Hello from App 2"

  3. C

    "Updated App 1" and blank second div

  4. D

    Both divs will be blank

Show answer

Correct answer

  • A

    "Updated App 1" and "Hello from App 2"

Question 14 on its own page

Question 15

+4.5 marksOne correct option

Consider the following HTML with relevant Vue CDN attached.

html
<div id="app">
        <input v-model.number="price" type="number">
        <input v-model.number="quantity" type="number">
        <p>Total: {{ total }}</p>
        <p>Last Updated By: {{ lastUpdatedBy }}</p>
</div>


    <script>
        new Vue({
            el: '#app',
            data: {
                price: 10,
                quantity: 1,
                total: 10,
                lastUpdatedBy: 'initial'
            },
            watch: {
                price: {
                    handler(newVal) {
                        this.total = newVal * this.quantity;
                        this.lastUpdatedBy = 'price';
                    }
                },
                quantity: {
                    handler(newVal) {
                        this.total = this.price * newVal;
                        this.lastUpdatedBy = 'quantity';
                    }
                }
            }
        })
    </script>

If the user changes the price to 20 and then immediately changes the quantity to 2, what will be the final values of total and lastUpdatedBy?

  1. A

    total: 20, lastUpdatedBy: "price"

  2. B

    total: 40, lastUpdatedBy: "quantity"

  3. C

    total: 20, lastUpdatedBy: "quantity"

  4. D

    total: 40, lastUpdatedBy: "price"

Show answer

Correct answer

  • B

    total: 40, lastUpdatedBy: "quantity"

Question 15 on its own page

Question 16

+3 marksOne or more correct options

Consider the following JavaScript Code.

javascript
class Person {
    constructor(name) {
        this.name = name;
    }


    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }


    static identify() {
        console.log("I am a Person class");
    }
}


const john = new Person("John");

Which of the following expression(s) will cause an error?

Select all that apply.

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

Correct answers

  • B
  • C
Question 16 on its own page