Quiz Space

September 2023 term · Modern Application Development II · BSCS2006

MAD 2 Quiz 2: 3 December 2023 (September 2023 term)

The IIT Madras BS Modern Application Development II (MAD 2) Quiz 2 paper sat on 3 Dec 2023, in the September 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
13
MSQ
3
Take as mock testPractise with answers

Updated

Official paper: IIT M DIPLOMA AN2 EXAM QDD2 03 Dec 2023 · No negative marking.

Question 1

+3 marksOne correct option

Consider the following JavaScript code.

javascript
function promiseBuilder(t) {
  return new Promise((res, rej) => {
    setTimeout(() => {
      const count = Math.floor(t / 1000)
      if (count > 3) {
        res(count)
      } else {
        rej(count * 2)
      }
    }, t)
  })
}


async function getData() {
  let data1 = null,
    data2 = null
  try {
    data1 = await promiseBuilder(5000)
  } catch (e) {
    data1 = 30
  }
  try {
    data2 = await promiseBuilder(2000)
  } catch (e) {
    data2 = 40
  }
  return data1 + data2
}


getData().then(
  (res) => {
    console.log(8 * res)
  },
  (err) => {
    console.log(6 * err)
  }
)

What will be logged on to the console?

  1. A

    56

  2. B

    272

  3. C

    360

  4. D

    560

Show answer

Correct answer

  • C

    360

Question 1 on its own page

Question 2

+3 marksOne correct option

Consider the Vue application with markup index.html and JavaScript app.js

index.html

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

app.js

javascript
const NavBar = {
  template: `<ul>
    <li> Home </li>
    <slot><li>Bowling Average</li></slot>
    </ul>`,
}


const Batsman = {
  template: `<NavBar><li>Batting Average</li><li>Strike
Rate</li></NavBar>`,
  components: {
    NavBar,
  },
}


new Vue({
  el: '#app',
  template: `<Batsman />`,
  components: {
    Batsman,
  },
})

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

  1. A

    ● Home
    ● Bowling Average

  2. B

    ● Home
    ● Bowling Average
    ● Batting Average

  3. C

    ● Home
    ● Batting Average
    ● Strike Rate

  4. D

    ● Bowling Average
    ● Batting Average

Show answer

Correct answer

  • C

    ● Home
    ● Batting Average
    ● Strike Rate

Question 2 on its own page

Question 3

+3 marksOne correct option

Consider the following Vue app with markup index.html and JavaScript app.js.

index.html

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

app.js

javascript
const Dashboard = {
  template: `<div> This is dashboard for {{user.name}} </div>`,
  props: ['id'],
  data() {
    return {
      users: [
        { id: 1, name: 'User1' },
        { id: 2, name: 'User2' },
        { id: 3, name: 'User3' },
      ],
    }
  },
  computed: {
    user() {
      const user = this.users.find((user) => user.id == this.id)
      if (user) {
        return user
      } else {
        return this.users[2]
      }
    },
  },
}


const router = new VueRouter({
  routes: [{ path: '/dashboard/:id', component: Dashboard, props:
true }],
})
new Vue({
  el: '#app',
  template: `<router-view />`,
  router,
})

Suppose the application is running on “http://localhost:8080” . What will be rendered inside the router-view component of root component for the URL “http://127.0.0.1:8080/#/dashboard/8” ?

  1. A

    This is dashboard for User1

  2. B

    This is dashboard for User2

  3. C

    This is dashboard for User3

  4. D

    None of these

Show answer

Correct answer

  • C

    This is dashboard for User3

Question 3 on its own page

Question 4

+3 marksOne correct option

Consider the following Vue application with JavaScript app.js and markup index.html

index.html

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

app.js

javascript
const players = [
  { name: 'Rohit', role: 'Batsman', runs: 397 },
  { name: 'Jaspreet', role: 'Bowler', wickets: 9 },
  { name: 'Virat', role: 'Batsman', runs: 355 },
  { name: 'Kuldeep', role: 'Bowler', wickets: 10 },
]
const Batsman = {
  template: `<div><span v-for="batsman in batsmans">{{batsman.name}}:
{{batsman.runs}}</span></div>`,
  computed: {
    batsmans() {
      return players.filter((player) => player.role == 'Bowler')
    },
  },
}


const Bowler = {
  template: `<div><span v-for="bowler in bowlers">{{bowler.name}}:
{{bowler.wickets}}</span></div>`,
  computed: {
    bowlers() {
      return players.filter((player) => player.role == 'Batsman')
    },
  },
}
javascript
const Players = {
  template: `<div>
  Ranking
  <router-view />
  </div>
  `,
}


const router = new VueRouter({
  routes: [
    {
      path: '/players',
      component: Players,
      children: [
        { path: '', component: Batsman, name: 'batsman' },
        { path: '*', component: Bowler, name: 'bowler' },
      ],
    },
  ],
})


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

Suppose the application is running on “http://localhost:8080” . What will be rendered inside the router-view component of Players component by the browser for the URL “http://localhost:8080/#/players/allrounder”?

  1. A

    Jaspreet: Kuldeep:

  2. B

    Jaspreet: 9 Kuldeep: 10

  3. C

    Rohit: Virat:

  4. D

    Rohit:397 Virat:355

Show answer

Correct answer

  • C

    Rohit: Virat:

Question 4 on its own page

Question 5

+3 marksOne correct option

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

index.html:

html
<style>
        .heading {
            color: yellow;
        }


        .raw-text {
            color: blue;
        }
</style>
<body>
      <div id="app">
          <p :class="[iteration ? 'heading' : 'raw-text']"> {{displayText}}
</p>
      </div>
</body>
<script src="./script.js"> </script>

app.js:

javascript
const app = new Vue({
    el: '#app',
    data: {
        iteration: 1,
    },
    computed: {
        displayText: function() {
            let result = "";
            for (let i = 0; i <= this.iteration; i++)
            result += sessionStorage.getItem("data");
            return result;
        }


    },
    mounted() {
        const iteration = sessionStorage.getItem("iteration") ?
parseInt(sessionStorage.getItem("iteration")) + 2 : 1;
        if (iteration >= 1 && iteration < 7) {
            const data = sessionStorage.getItem("data");
            console.log(data);
            if (!data) sessionStorage.data = "JS";
            else
                sessionStorage.data += data;
            sessionStorage.iteration = iteration + 2;
            window.location.reload();
        }
    }
});

If you open the 'index.html' file in a browser, what content will be displayed on the browser screen after the automatic reloading of the browser tab stops?

  1. A

    Black

  2. B

    Blue

  3. C

    Yellow

  4. D

    None of these

Show answer

Correct answer

  • C

    Yellow

Question 5 on its own page

Question 6

+3 marksOne correct option

Consider the below javascript program, and predict the output assuming the variable “random_num” always has a value greater than 8.

Note: Math.random() method returns a random number from 0 (inclusive) up to but not including 1 (exclusive)

javascript
const num = "9";


new Promise((rej, res) => {
    const random_num = Math.floor(Math.random() * 10);


    if (random_num == num) rej(random_num)
    else res(num + num);
}).then(
    (msg) => console.log("Some Data Came"),
    (msg) => console.log("Some Data Lost")
).then(data => {
    console.log("Data Sent");
    return data;
}).then(num => console.log(num));
  1. A

    Some Data Came
    Some Data Lost
    Some Data Lost

  2. B

    Some Data Came
    Data Sent
    Data Sent

  3. C

    Some Data Came
    Data Sent
    undefined

  4. D

    Some Data Lost
    Data Sent
    undefined

  5. E

    Some Data Lost
    undefined
    Data Sent

Show answer

Correct answer

  • C

    Some Data Came
    Data Sent
    undefined

Question 6 on its own page

Question 7

+3 marksOne correct option

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

javascript
let x = 5;
const obj1 = {
    x : 10,
    func : function () {
        console.log(x * this.x)
    }
}
const obj2 = {
    x : 20,
    func : () => {
        console.log(this.x);
        obj1.func.call(obj2);
    }
}
obj2.func();
  1. A

    20
    100

  2. B

    5
    NaN

  3. C

    20
    NaN

  4. D

    5
    50

  5. E

    undefined
    100

  6. F

    undefined
    50

Show answer

Correct answer

  • E

    undefined
    100

Question 7 on its own page

Question 8

+2 marksOne correct option

Consider the Vue app with markup index.html and script app.js

index.html

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

app.js

javascript
Vue.component('NavBar', {
  template: `<div> This is navbar </div>`,
})


const Model = {
  template: `<div> This is model </div>`,
}


new Vue({
  el: '#app',
  template: `<div><NavBar /><Model/></div>`,
})

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

  1. A

    This is navbar

  2. B

    This is model

  3. C

    This is navbar
    This is model

  4. D

    None of these

Show answer

Correct answer

  • A

    This is navbar

Question 8 on its own page

Question 9

+2 marksOne correct option

Which of the following statements is false regarding promise in javascript?

  1. A

    A promise has 3 states - pending, fulfilled & rejected.

  2. B

    The promises can be chained to perform dependent tasks.

  3. C

    Promises can have only two states, Fulfilled and Rejected.

  4. D

    A promise constructor accepts an executor function, which in itself received 2 parameters for resolve and reject functions.

Show answer

Correct answer

  • C

    Promises can have only two states, Fulfilled and Rejected.

Question 9 on its own page

Question 10

+4.5 marksOne correct option

Consider the following Vue app with markup index.html and JavaScript app.js.

index.html

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

app.js

javascript
const Dashboard = {
  template: `<div> This is dashboard for {{user.name}} </div>`,
  props: ['id'],
  data() {
    return {
      users: [
        { id: 1, name: 'User1' },
        { id: 2, name: 'User2' },
        { id: 3, name: 'User3' },
      ],
    }
  },
  computed: {
    user() {
      const user = this.users.find((user) => user.id == this.id)
      if (user) {
        return user
      } else {
        return this.users[2]
      }
    },
  },
}


const router = new VueRouter({
  routes: [{ path: '/dashboard/:id', component: Dashboard, props:
true }],
})
new Vue({
  el: '#app',
  template: `<router-view />`,
  router,
})

Suppose the application is running on “http://localhost:8080” . What will be rendered inside the router-view component of root component for the URL “http://localhost:8080/dashboard/1” ?

  1. A

    This is dashboard for User1

  2. B

    This is dashboard for User2

  3. C

    This is dashboard for User3

  4. D

    None of these

Show answer

Correct answer

  • A

    This is dashboard for User1

Question 10 on its own page

Question 11

+4.5 marksOne correct option

Consider the following Vue application with JavaScript app.js and markup index.html

index.html

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

app.js

javascript
const players = [
  { name: 'Rohit', role: 'Batsman', runs: 397 },
  { name: 'Jaspreet', role: 'Bowler', wickets: 9 },
  { name: 'Virat', role: 'Batsman', runs: 355 },
  { name: 'Kuldeep', role: 'Bowler', wickets: 10 },
]
const Batsman = {
  template: `<div><span v-for="batsman in batsmans">{{batsman.name}}:
{{batsman.runs}}</span></div>`,
  computed: {
    batsmans() {
      return players.filter((player) => player.role == 'Bowler')
    },
  },
}


const Bowler = {
  template: `<div><span v-for="bowler in bowlers">{{bowler.name}}:
{{bowler.wickets}}</span></div>`,
  computed: {
    bowlers() {
      return players.filter((player) => player.role == 'Batsman')
    },
  },
}
javascript
const Players = {
  template: `<div>
  Ranking
  <router-view />
  </div>
  `,
}


const router = new VueRouter({
  routes: [
    {
      path: '/players',
      component: Players,
      children: [
        { path: '', component: Batsman, name: 'batsman' },
        { path: '*', component: Bowler, name: 'bowler' },
      ],
    },
  ],
})


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

Suppose the application is running on “http://localhost:8080” . What will be rendered inside the router-view component of Players component by the browser for the URL “http://localhost:8080/#/players” ?

  1. A

    Jaspreet: Kuldeep:

  2. B

    Jaspreet: 9 Kuldeep: 10

  3. C

    Rohit: Virat:

  4. D

    Rohit:397 Virat:355

Show answer

Correct answer

  • A

    Jaspreet: Kuldeep:

Question 11 on its own page

Question 12

+4.5 marksOne correct option

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

index.html:

html
<style>
        .heading {
            color: yellow;
        }


        .raw-text {
            color: blue;
        }
</style>
<body>
      <div id="app">
          <p :class="[iteration ? 'heading' : 'raw-text']"> {{displayText}}
</p>
      </div>
</body>
<script src="./script.js"> </script>

app.js:

javascript
const app = new Vue({
    el: '#app',
    data: {
        iteration: 1,
    },
    computed: {
        displayText: function() {
            let result = "";
            for (let i = 0; i <= this.iteration; i++)
            result += sessionStorage.getItem("data");
            return result;
        }


    },
    mounted() {
        const iteration = sessionStorage.getItem("iteration") ?
parseInt(sessionStorage.getItem("iteration")) + 2 : 1;
        if (iteration >= 1 && iteration < 7) {
            const data = sessionStorage.getItem("data");
            console.log(data);
            if (!data) sessionStorage.data = "JS";
            else
                sessionStorage.data += data;
            sessionStorage.iteration = iteration + 2;
            window.location.reload();
        }
    }
});

Suppose you open the file “index.html” in a browser, what will be shown on the browser screen post which browser tab will not be reloaded programmatically?
If you open the 'index.html' file in a browser, what content will be displayed on the browser screen after the automatic reloading of the browser tab stops?

  1. A

    JSJS

  2. B

    JSJSJS

  3. C

    JSJSJSJS

  4. D

    NaNNaNNaN

  5. E

    NaNNaN

  6. F

    NaNNaNNaNNaN

  7. G

    None of these

Show answer

Correct answer

  • C

    JSJSJSJS

Question 12 on its own page

Question 13

+4.5 marksOne correct option

Suppose you are organizing a ceremony to award the startup companies who have progressed considerably well in the past few years. You have received a lot of registrations. The committee has decided to shortlist the companies based on the following 2 criteria:

  1. The company must have a website
  2. The company must have a capital of more than 40000

Fill in the code1 & code2, which can be used in Vuex Store to update the “awardees” state variable with the objects of those companies who satisfy the above-mentioned criteria. The objects to be inserted in the “awardees” state variable must only have the company name and a random token generated in the “send_task” action function.

javascript
const store = new Vuex.Store({
    state : {
        companies : [
            {
                name : 'sample1',
                website : 'sample1.com',
                capital : 50000
            },
            {
                name : 'sample2',
                website : null,
                capital : 75000
            },
            {
                name : 'sample3',
                website : 'sample3.com',
                capital : 42000
            },
            {
                name : 'sample4',
                website : 'sample4.com',
                capital : 38000
            },
        ],
        awardees : []
    },


    mutations : {
        update_final(state, payload) {


            for (company of state.companies)
                code2
        }
    },
    actions : {
        send_task : function (context) {
            const token = get_token(); // generates a random token
            code1
        }
    }
})
  1. A
  2. B
  3. C
  4. D
Show answer

Correct answer

  • D
Question 13 on its own page

Question 14

+2 marksOne or more correct options

Which of the following is/are true regarding JSON Web Tokens?

Select all that apply.

  1. A

    Each token has three components, header, payload and signature

  2. B

    Each token has two components, payload and signature.

  3. C

    Each component of the token is encoded using Base-64.

  4. D

    Components of the token are joined using period.

Show answer

Correct answers

  • A

    Each token has three components, header, payload and signature

  • C

    Each component of the token is encoded using Base-64.

  • D

    Components of the token are joined using period.

Question 14 on its own page

Question 15

+2 marksOne or more correct options

Which of the following statement(s) is/are true, regarding REST and GraphQL?

Select all that apply.

  1. A

    GraphQL helps to fetch exactly the same data which is needed, and avoids over fetching as well as under fetching

  2. B

    In general, a GraphQL response always returns 200 status code, with the “error” field containing the errors (if any).

  3. C

    A REST API provides multiple endpoints to access multiple resources.

  4. D

    None of these.

Show answer

Correct answers

  • A

    GraphQL helps to fetch exactly the same data which is needed, and avoids over fetching as well as under fetching

  • B

    In general, a GraphQL response always returns 200 status code, with the “error” field containing the errors (if any).

  • C

    A REST API provides multiple endpoints to access multiple resources.

Question 15 on its own page

Question 16

+3 marksOne or more correct options

Which of the following statement(s) is/are correct using Vuex?

Select all that apply.

  1. A

    Vuex is a state management library for Vue.js applications.

  2. B

    Using Vuex always becomes difficult when an application scales.

  3. C

    Vuex provides actions for performing asynchronous operations.

  4. D

    The Vuex getters are not reactive.

Show answer

Correct answers

  • A

    Vuex is a state management library for Vue.js applications.

  • C

    Vuex provides actions for performing asynchronous operations.

Question 16 on its own page