Quiz Space

May 2023 term · Modern Application Development II · BSCS2006

MAD 2 Quiz 2: 6 August 2023 (May 2023 term)

The IIT Madras BS Modern Application Development II (MAD 2) Quiz 2 paper sat on 6 Aug 2023, in the May 2023 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 FOUNDATION AN2 EXAM QPF2 06 Aug 2023 · No negative marking.

Question 1

+3 marksOne correct option

Consider the below javascript program.

javascript
function data(d) {
  return new Promise((res) => {
    setTimeout(() => res('Your Data'), d * 1000)
  })
}


function delta(d) {
  return new Promise((res) => {
    if (d > 3) {
      setTimeout(() => res('delta'), d * 500)
    } else {
      return res('delta')
    }
  })
}
async function getData(d) {
  const start = Date.now()
  const _delta = await delta(d)
  const _data = await data(d)
  const end = Date.now()
  const timeDifference = end - start
}


getData(4)

What will be the approximate value of the variable “timeDifference”?

  1. A

    Less than 4000

  2. B

    Is equal to 4000

  3. C

    Greater than or equal to 6000

  4. D

    None of these

Show answer

Correct answer

  • C

    Greater than or equal to 6000

Question 1 on its own page

Question 2

+3 marksOne correct option

Consider the following Vue application with javascript file “app.js” and markup file “index.html”.

app.js:

javascript
const Teams = {
  template: `<ol><li v-for='team in
teams'>{{team.name}}</li></ol>`,
  data() {
    return {
      teams: [
        { name: 'India', points: 827 },
        { name: 'Australia', points: 820 },
      ],
    }
  },
}
const Rankings = {
  template: `<ol><li v-for='team in sortedTeams'>
{{team.name}}</li></ol>`,
  data() {
    return Teams.data()
  },
  computed: {
    sortedTeams() {
      return this.teams.sort((team1, team2) => {
        return team1.points - team2.points // Statement 1
      })
    },
  },
}


const router = new VueRouter({
  routes: [
    { path: '/', component: Teams },
    { path: '/ranking', component: Rankings },
  ],
})


new Vue({
  el: '#app',
  template: `<div> <router-view /> </div>`,
  router,
})

index.html:

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

Suppose the application is running on “http://localhost:8080”. If the developer wants to display the teams in descending order with respect to the points of team, for the URL “http://localhost:8080/#/ranking”. What should be the value of return statement in “sortedTeams” computed property (Marked by statement1)?

  1. A

    team1.points - team2.points

  2. B

    team2.points - team1.points

  3. C

    team1 > team2

  4. D

    team2 < team1

Show answer

Correct answer

  • B

    team2.points - team1.points

Question 2 on its own page

Question 3

+3 marksOne correct option

Consider the following Vue application with javascript file “app.js” and markup file “index.html”.

index.html:

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

app.js:

javascript
const Category = {
  template:
  `<div>{{$route.params.name}}<router-view></router-view></div>
  `,
}


const Error = {
  template: `<div><slot> Page Not Found </slot></div>`,
}
const Product = {
  template: `
  <div>
    <div v-if='filteredProducts.length > 0'>
        <div v-for='product in filteredProducts'>
            Name: {{product.name}}, Price: {{product.price}}
        </div>
    </div>
    <Error v-else> No {{keyword}} Found </Error>
  </div>`,
  data() {
    return {
      keyword: this.$route.params.name,
      products: [
        { category: 'Mobile', name: 'Samsung', price: '10K' },
javascript
        { category: 'Mobile', name: 'Apple', price: '50K' },
        { category: 'Laptop', name: 'Lenovo', price: '70K' },
      ],
    }
  },
  computed: {
    filteredProducts() {
      return this.products.filter(
        (product) =>
          product.category.toLowerCase() ==
  this.keyword.toLowerCase()
      )
    },
  },
  components: {
    Error,
  },
}
const router = new VueRouter({
  routes: [
    {
      path: '/category/:name',
      component: Category,
      children: [{ path: 'product', component: Product }],
    },
    { path: '*', component: Error },
  ],
})


new Vue({
  el: '#app',
  template: '<div><router-view /></div>',
  router,
})

Suppose the application is running on “http://localhost:8080”. What will be rendered by the browser for the URL “http://localhost:8080/#/”?

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

Correct answer

  • A
Question 3 on its own page

Question 4

+3 marksOne correct option

Consider the following Vue application with javascript file “app.js” and markup file “index.html”.

index.html:

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

app.js:

javascript
const Category = {
  template:
  `<div>{{$route.params.name}}<router-view></router-view></div>`,
}


const Error = {
  template: `<div><slot> Page Not Found </slot></div>`,
}


const Product = {
  template: `
  <div>
    <div v-if='filteredProducts.length > 0'>
        <div v-for='product in filteredProducts'>
            Name: {{product.name}}, Price: {{product.price}}
        </div>
    </div>
    <Error v-else> No {{keyword}} Found </Error>
  </div>`,
  data() {
    return {
      keyword: this.$route.params.name,
      products: [
        { category: 'Mobile', name: 'Samsung', price: '10K' },
        { category: 'Mobile', name: 'Apple', price: '50K' },
        { category: 'Laptop', name: 'Lenovo', price: '70K' },
      ],
    }
  },
javascript
  computed: {
    filteredProducts() {
      return this.products.filter(
        (product) =>
          product.category.toLowerCase() ==
  this.keyword.toLowerCase()
      )
    },
  },
  components: {
    Error,
  },
}
const router = new VueRouter({
  routes: [
    {
      path: '/category/:name',
      component: Category,
      children: [{ path: 'product', component: Product }],
    },
    { path: '*', component: Error },
  ],
})


new Vue({
  el: '#app',
  template: '<div><router-view /></div>',
  router,
})

Suppose the application is running on “http://localhost:8080”. What will be rendered by the browser for the URL “http://localhost:8080/#/category/desktop/product”?

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

Correct answer

  • C
Question 4 on its own page

Question 5

+3 marksOne correct option

Consider the following Vue application with javascript file “app.js” and markup file “index.html”.

index.html

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

app.js

javascript
const Product = {
  template: `<div>
    <slot name="title">No title</slot>
    <slot>No Description Given</slot>
    <slot name="price">Flexible</slot>
    </div>`,
}
new Vue({
  el: '#app',
  template: `
  <Product>
    <p>
       <b>Lenovo Desktop</b>
       8GB RAM, 512GB SSD
    </p>
    <template v-slot:price>
       61K
    </template>
  </Product>`,
  components: {
    Product,
  },
})

Suppose the application is running on “http://localhost:8080”. What will be rendered by the browser for the URL “http://localhost:8080/#/”?

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

Correct answer

  • A
Question 5 on its own page

Question 6

+3 marksOne correct option

Consider the below javascript program, and predict the output, if executed.

javascript
const data = {
    count: 10
};


const newData = {}


Object.defineProperty(newData, 'count', {
    get() {
        return data.count;
    },
    set(newValue) {
        data.count = newValue;
    },
});
console.log("Before Update:", newData.count);
newData.count = 20;
console.log("After Update:", data.count);
  1. A

    Before Update: 10
    After Update: 10

  2. B

    Before Update: 10
    Error

  3. C

    Before Update: 10
    After Update: 20

  4. D

    Before Update: 10
    After Update: undefined

Show answer

Correct answer

  • C

    Before Update: 10
    After Update: 20

Question 6 on its own page

Question 7

+2 marksOne correct option

Which of the following is correct regarding the finally block of Promise?

  1. A

    It allows scheduling a function after the promise is rejected.

  2. B

    It allows scheduling a function after the promise is resolved.

  3. C

    It allows scheduling a function when promise is either fulfilled or rejected.

  4. D

    None of these

Show answer

Correct answer

  • C

    It allows scheduling a function when promise is either fulfilled or rejected.

Question 7 on its own page

Question 8

+2 marksOne correct option

Which of the following statements is true?

  1. A

    The data stored in session storage gets lost as soon as the page is refreshed.

  2. B

    The data stored in local storage gets lost as soon as the system shuts down.

  3. C

    The data stored in session cookies gets lost as soon as the browser is closed.

  4. D

    All of these

Show answer

Correct answer

  • C

    The data stored in session cookies gets lost as soon as the browser is closed.

Question 8 on its own page

Question 9

+4.5 marksOne correct option

Consider the following Vue application with javascript file “app.js” and markup file “index.html”.

javascript
const Teams = {
  template: `<ol><li v-for='team in
teams'>{{team.name}}</li></ol>`,
  data() {
    return {
      teams: [
        { name: 'India', points: 827 },
        { name: 'Australia', points: 820 },
      ],
    }
  },
}
const Rankings = {
  template: `<ol><li v-for='team in sortedTeams'>
{{team.name}}</li></ol>`,
  data() {
    return Teams.data()
  },
  computed: {
    sortedTeams() {
      return this.teams.sort((team1, team2) => {
        return team1.points - team2.points // Statement 1
      })
    },
  },
}


const router = new VueRouter({
  routes: [
    { path: '/', component: Teams },
    { path: '/ranking', component: Rankings },
  ],
})


new Vue({
  el: '#app',
  template: `<div> <router-view /> </div>`,
  router,
})

index.html:

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

Suppose the application is running on “http://localhost:8080”. What will be rendered by the browser for the url “http://localhost:8080/#/ranking”

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

Correct answer

  • C
Question 9 on its own page

Question 10

+4.5 marksOne correct option

Consider the following Vue application with javascript file “app.js” and markup file “index.html”.

index.html:

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

app.js:

javascript
const Category = {
  template:
  `<div>{{$route.params.name}}<router-view></router-view></div>
  `,
}


const Error = {
  template: `<div><slot> Page Not Found </slot></div>`,
}


const Product = {
  template: `
  <div>
    <div v-if='filteredProducts.length > 0'>
        <div v-for='product in filteredProducts'>
            Name: {{product.name}}, Price: {{product.price}}
        </div>
    </div>
    <Error v-else> No {{keyword}} Found </Error>
  </div>`,
  data() {
    return {
      keyword: this.$route.params.name,
      products: [
        { category: 'Mobile', name: 'Samsung', price: '10K' },
        { category: 'Mobile', name: 'Apple', price: '50K' },
        { category: 'Laptop', name: 'Lenovo', price: '70K' },
      ],
    }
  },
javascript
  computed: {
    filteredProducts() {
      return this.products.filter(
        (product) =>
          product.category.toLowerCase() ==
  this.keyword.toLowerCase()
      )
    },
  },
  components: {
    Error,
  },
}


const router = new VueRouter({
  routes: [
    {
      path: '/category/:name',
      component: Category,
      children: [{ path: 'product', component: Product }],
    },
    { path: '*', component: Error },
  ],
})


new Vue({
  el: '#app',
  template: '<div><router-view /></div>',
  router,
})

Suppose the application is running on “http://localhost:8080”. What will be rendered by the browser for the URL “http://localhost:8080/#/category/mobile/product”?

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

Correct answer

  • D
Question 10 on its own page

Question 11

+4.5 marksOne correct option

Consider the below javascript program, and predict the output, if executed.

javascript
let x = 50;


const obj1 = {
    x : 10,
    func : function (x) {
        console.log(x, "and", this.x)
    }
}


const obj2 = {
    x : 20,
    func : function () {
            console.log(x, "and", this.x)
            obj1.func.call(this)
        }
}


obj2.func.call(obj1)
  1. A

    50 and 10
    undefined and 20

  2. B

    50 and 10
    undefined and 10

  3. C

    50 and 20
    50 and 20

  4. D

    20 and 10
    50 and 10

Show answer

Correct answer

  • B

    50 and 10
    undefined and 10

Question 11 on its own page

Question 12

+4.5 marksOne correct option

Consider the below javascript program.

javascript
async function result (x) {
    const y = 6;
    return new Promise ((reject, resolve) => {
        if (((x * 28) / (7 * x) - 2) == 1)
            reject(y ** 2)
        console.log("Inside Promise")
        resolve(y ** 3)
    })
}


result(x).then(
rej => console.log("Promise rejected with the value", rej),
res => console.log("Promise resolved with the value", res)
).then(data => {
    console.log("Data received is", data);
    return "6"
}).finally(data => {
    console.log("Data received is", data);
    return "34"
}).then(data => console.log("Data received is", data))

Assuming the variable “x” passed to the “result” function is a whole number between 1 and 99 (including 1 and 99), what will be shown on the console, if the above program is executed?

  1. A

    Promise resolved with the value 36
    Data received is 36
    Data received is 6
    Data received is 34

  2. B

    Inside Promise
    Promise rejected with the value 36
    Data received is undefined
    Data received is undefined
    Data received is 34

  3. C

    Promise rejected with the value 216
    Data received is undefined
    Data received is undefined
    Data received is 34

  4. D

    Inside Promise
    Promise rejected with the value 216
    Data received is undefined
    Data received is undefined
    Data received is 6

Show answer

Correct answer

  • D

    Inside Promise
    Promise rejected with the value 216
    Data received is undefined
    Data received is undefined
    Data received is 6

Question 12 on its own page

Question 13

+3 marksOne or more correct options

Which of the following statement(s) is/are true regarding javascript?

Select all that apply.

  1. A

    The “this” reference always refers to the global object inside an arrow function.

  2. B

    The “call” and “apply” functions are the same, if the calling function doesn’t accept any arguments.

  3. C

    A variable, declared using “var” outside any function, is accessible throughout the program.

  4. D

    All of these

Show answer

Correct answers

  • B

    The “call” and “apply” functions are the same, if the calling function doesn’t accept any arguments.

  • C

    A variable, declared using “var” outside any function, is accessible throughout the program.

Question 13 on its own page

Question 14

+3 marksOne or more correct options

Select all that apply.

  1. A

    In the above function call, the variable “num” is passed by value, assuming it to be holding a string literal.

  2. B

    In the above function call, the variable “obj” is passed by reference, assuming it to be holding an object.

  3. C

    A variable declared using the keyword “var” will have the value “null”, until it is initialized.

  4. D

    All of these

Show answer

Correct answers

  • A

    In the above function call, the variable “num” is passed by value, assuming it to be holding a string literal.

  • B

    In the above function call, the variable “obj” is passed by reference, assuming it to be holding an object.

Question 14 on its own page

Question 15

+2 marksOne or more correct options

Consider the below Vue class bindings:

Code 1:

html
<div :class="[isActive ? 'activeClass' : '', 'errorClass']"></div>

Code 2:

html
<div :class="[{ 'activeClass': isActive }, 'errorClass']"></div>

Which of the following statement(s) is/are true?

Select all that apply.

  1. A

    Both the code snippets will render the same HTML.

  2. B

    Both the code snippets will render the different HTML.

  3. C

    The code snippet 2 will always render the element div with class “activeClass”, and “errorClass” will only be applied, if the data variable “isActive” is truthy.

  4. D

    The code snippet 1 will always render the element div with class “errorClass”, and “activeClass” will only be applied”, if the data variable “isActive” is truthy.

Show answer

Correct answers

  • A

    Both the code snippets will render the same HTML.

  • D

    The code snippet 1 will always render the element div with class “errorClass”, and “activeClass” will only be applied”, if the data variable “isActive” is truthy.

Question 15 on its own page

Question 16

+2 marksOne or more correct options

Which of the following statement(s) is/are correct in the context of REST and GraphQL?

Select all that apply.

  1. A

    Both REST and GraphQL are software architectural styles.

  2. B

    Both REST and GraphQL are in general used for fetching data from a remote storage.

  3. C

    Every API must adhere to all the REST principles.

  4. D

    In GraphQL, a write operation should be performed explicitly via a mutation, in general.

Show answer

Correct answers

  • B

    Both REST and GraphQL are in general used for fetching data from a remote storage.

  • D

    In GraphQL, a write operation should be performed explicitly via a mutation, in general.

Question 16 on its own page