uiz Space

September 2024 term · Modern Application Development II · BSCS2006

Modern Application Development II Quiz 1: 27 October 2024 (September 2024 term)

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

Updated

Official paper: IIT M DIPLOMA AN EXAM QDD2 27 Oct 2024 · No negative marking.

Question 1

+2 marksOne correct option

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

html
<body>
  <div id="app" :class="['box', { active: isActive }]">
  Vue Component
  </div>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          isActive: false,
        };
      },
    });
  </script>
</body>

What will be the final rendered class attribute of the <div> ?

  1. A

    box

  2. B

    active

  3. C

    box active

  4. D

    box inactive

Show answer

Correct answer

  • A

    box

Question 1 on its own page

Question 2

+2 marksOne correct option

Which of the following is an example of ephemeral state in a web application?

  1. A

    A user's authentication token stored in local storage

  2. B

    A form input value that changes as the user types

  3. C

    The list of favorite items saved in a user's profile

  4. D

    A shopping cart saved between sessions

Show answer

Correct answer

  • B

    A form input value that changes as the user types

Question 2 on its own page

Question 3

+3 marksOne correct option

Consider the following JavaScript code

javascript
const juices = [
    { id: 1, name: "grape", rating: 8.1 },
    { id: 2, name: "apple", rating: 5.0 },
    { id: 3, name: "orange", rating: 6.9 },
    { id: 4, name: "banana", rating: 10 },
]


mapping = { "4": 1, "3": 2, "2": 3, "1": 4 }


juices.map((juice) => { return { ...juice, rank: mapping[juice.id] } })
    .sort((a, b) => a.rank - b.rank)
    .map((juice) => { console.log(juice.name) })

What will be the output of the code?

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

Correct answer

  • C
Question 3 on its own page

Question 4

+3 marksOne correct option

Consider the following JavaScript code snippet

javascript
var name = 'Taylor'


const person = {
    name: 'Jeremy',
    talk() {
        return () => `${this.name} says Hello!`
    }
}


talkReturn = person.talk()
console.log(talkReturn())

What will be the output of the code?

  1. A

    undefined says Hello!

  2. B

    Jeremy says Hello!

  3. C

    Taylor says Hello!

  4. D

    ReferenceError

Show answer

Correct answer

  • B

    Jeremy says Hello!

Question 4 on its own page

Question 5

+3 marksOne correct option

Consider the following code snippet

javascript
function createCounter() {
  let count = 0;


  return function() {
    count++;
    setTimeout(() => {
      console.log(count);
    }, 1000);
  };
}


const counter = createCounter();
counter();
counter();
counter();

What will be the output after 1 second?

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

Correct answer

  • D
Question 5 on its own page

Question 6

+3 marksOne correct option

Consider the below javascript program.

javascript
const obj = {
    a: 10,
    b() {
        return this.a;
    }
};


const c = obj.b;
const d = obj.b.bind(obj);


console.log(c(), d());

What will be the output of the above program?

  1. A

    10 10

  2. B

    undefined 10

  3. C

    10 undefined

  4. D

    undefined undefined

  5. E

    Error

Show answer

Correct answer

  • B

    undefined 10

Question 6 on its own page

Question 7

+3 marksOne correct option

Consider the below Vue component.

html
<template>
  <div>
    <p>{{ computedMessage }}</p>
    <button @click="update">Update</button>
  </div>
</template>


<script>
export default {
  data() {
    return {
      message: 'Initial'
    };
  },
  computed: {
    computedMessage() {
      return this.message + ' - Computed';
    }
  },
  methods: {
    update() {
      this.message = 'Updated';
    }
  }
};
</script>

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

  1. A

    "Initial - Computed"

  2. B

    "Updated - Computed"

  3. C

    "Initial - Computed Updated"

  4. D

    "Updated"

Show answer

Correct answer

  • B

    "Updated - Computed"

Question 7 on its own page

Question 8

+4.5 marksOne correct option

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

html
<body>
    <div id="app">
        <p>pineapple 🍍</p>
        <button @click="addPineapple">Buy</button>
        <p>Amount : {{amount}}</p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    amount: '',
                    price: 40,
                }
            },
            methods: {
                addPineapple() {
                    this.amount += this.price;
                }
            }
        })
    </script>
</body>

What will be shown in the amount placeholder when the Buy button is clicked two times?

  1. A

    40

  2. B

    80

  3. C

    4040

  4. D

    undefined

Show answer

Correct answer

  • C

    4040

Question 8 on its own page

Question 9

+4.5 marksOne correct option

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

html
<div id="app">
        <p>Original Order: {{ customerOrder }}</p>
        <p>Updated Order: {{ updatedOrder }}</p>
        <server-component :order="customerOrder"
@order-updated="updateOrder"></server-component>
    </div>


    <script>
        Vue.component('server-component', {
            props: ['order'],
            template: `
          <div>
            <button @click="modifyOrder">Send Updated Order</button>
          </div>
        `,
            methods: {
                modifyOrder() {
                    this.$emit('order-updated', this.order + ' - Extra mayo');
                }
            }
        });


        new Vue({
            el: '#app',
            data() {
                return {
                    customerOrder: 'Burger',
                    updatedOrder: ''
                };
            },
            methods: {
                updateOrder(newOrder) {
                    this.updatedOrder = newOrder;
                }
            }
        });
    </script>

What will be displayed in the <p> tags after the button on the server-component is clicked?

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

Correct answer

  • D
Question 9 on its own page

Question 10

+4.5 marksOne correct option

Consider the below javascript program.

javascript
const numbers = [10, 20, 30];
const modifiedNumbers = numbers.reduce((acc, num) => {
    if (num % 2 === 0) {
        acc.push(num * 2);
    } else {
        acc.push(num / 2);
    }
    return acc;
}, []);


const finalOutput = modifiedNumbers.filter(num => num > 20);
console.log(finalOutput);

What will be the output of the above program?

  1. A

    []

  2. B

    [10, 20, 30]

  3. C

    [20, 40, 60]

  4. D

    [40, 60]

  5. E

    [40]

Show answer

Correct answer

  • D

    [40, 60]

Question 10 on its own page

Question 11

+4.5 marksOne correct option

Consider the below Vue component.

html
<template>
  <div>
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>


<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: "Item 1" },
        { id: 2, name: "Item 2" },
        { id: 3, name: "Item 3" },
      ],
      filterActive: true,
    };
  },
  computed: {
    filteredItems() {
      return this.filterActive
        ? this.items.filter((item) => item.id !== 2)
        : this.items;
    },
  },
};
</script>

What will be displayed in the <ul> when filterActive is true?

  1. A

    Item 1, Item 3

  2. B

    Item 2

  3. C

    Item 1, Item 2, Item 3

  4. D

    The list will be empty.

Show answer

Correct answer

  • A

    Item 1, Item 3

Question 11 on its own page

Question 12

+3 marksOne or more correct options

Which of the following statements is/are true about JavaScript’s “this” keyword behavior in different contexts?

Select all that apply.

  1. A

    In a regular function call, “this” refers to the global object in non-strict mode and “undefined” in strict mode.

  2. B

    In an arrow function, “this” is lexically inherited from the enclosing execution context.

  3. C

    Inside a method of an object, “this” always refers to the object itself, regardless of how the method is called.

  4. D

    The value of “this” can be explicitly set using “call()”, apply(), or “bind()” methods, inside a method of an object.

Show answer

Correct answers

  • A

    In a regular function call, “this” refers to the global object in non-strict mode and “undefined” in strict mode.

  • B

    In an arrow function, “this” is lexically inherited from the enclosing execution context.

  • D

    The value of “this” can be explicitly set using “call()”, apply(), or “bind()” methods, inside a method of an object.

Question 12 on its own page

Question 13

+3 marksOne or more correct options

Considering the differences between “var”, “let”, and “const” in terms of scope, hoisting, and reassignment, which of the following statements is/are true?

Select all that apply.

  1. A

    “var” is function-scoped, hoisted, and allows reassignments.

  2. B

    “let” is block-scoped, hoisted, and allows reassignments.

  3. C

    “const” is block-scoped, hoisted, does not allow reassignments, and its value must be assigned at the time of declaration.

  4. D

    “let” and “const” behave identically except that const variables cannot be redeclared, while let variables can be redeclared in the same block.

Show answer

Correct answers

  • A

    “var” is function-scoped, hoisted, and allows reassignments.

  • B

    “let” is block-scoped, hoisted, and allows reassignments.

  • C

    “const” is block-scoped, hoisted, does not allow reassignments, and its value must be assigned at the time of declaration.

Question 13 on its own page

Question 14

+3 marksOne or more correct options

Which of the following statements is/are true?

Select all that apply.

  1. A

    call() and apply() immediately invoke the function, while bind() returns a new function that can be called later.

  2. B

    call() accepts arguments as a comma-separated list, whereas apply() accepts a single array of arguments.

  3. C

    bind() permanently sets the “this” context for a function, but the resulting function must still be explicitly called to execute.

  4. D

    All three methods are used to permanently change the “this” context of functions.

Show answer

Correct answers

  • A

    call() and apply() immediately invoke the function, while bind() returns a new function that can be called later.

  • B

    call() accepts arguments as a comma-separated list, whereas apply() accepts a single array of arguments.

  • C

    bind() permanently sets the “this” context for a function, but the resulting function must still be explicitly called to execute.

Question 14 on its own page

Question 15

+2 marksOne or more correct options

Which of the following scenario(s) represent ephemeral state(s) in a web application?

Select all that apply.

  1. A

    The user's current scroll position on a webpage.

  2. B

    The user's authentication token, saved in localStorage.

  3. C

    The temporary state of a dropdown menu.

  4. D

    All of these

Show answer

Correct answers

  • A

    The user's current scroll position on a webpage.

  • C

    The temporary state of a dropdown menu.

Question 15 on its own page

Question 16

+2 marksOne or more correct options

What are the differences between Vue's computed properties and methods?

Select all that apply.

  1. A

    Computed properties are cached based on their reactive dependencies, whereas methods are recalculated every time they are called.

  2. B

    Methods can be used to perform operations that do not need to be cached.

  3. C

    Computed properties can be used as methods if they require parameters.

  4. D

    Methods are always reactive and update automatically when their dependencies change.

Show answer

Correct answers

  • A

    Computed properties are cached based on their reactive dependencies, whereas methods are recalculated every time they are called.

  • B

    Methods can be used to perform operations that do not need to be cached.

Question 16 on its own page