Quiz Space

May 2022 term · Modern Application Development II · BSCS2006

Modern Application Development II Quiz 2: 10 July 2022 (May 2022 term)

The IIT Madras BS Modern Application Development II (MAD 2) Quiz 2 paper sat on 10 Jul 2022, in the May 2022 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
10
MSQ
6
Take as mock testPractise with answers

Updated

Official paper: IIT M DIPLOMA QUIZ2 EXAM QPE1 10 July 2022 · No negative marking.

Question 1

+3 marksOne correct option

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

app.js:

javascript
const a = new Vue({
    el : '#app',
    data : {
        data : "",
        refreshes : 0,
    },
    methods: {


        do_something() {
            if (isNaN(this.refreshes)) this.refreshes = 0;
            if (this.data.length % 2) {
                sessionStorage.data = "prefix" + this.data;
                sessionStorage.refreshes = this.refreshes * 2 + 1;
            }
            else {
javascript
                sessionStorage.data = this.data + "suffix";
                sessionStorage.refreshes = this.refreshes * 2 - 1;
            }
        }
    },
    mounted : function () {
        if (sessionStorage.data) {
            this.data = "suffix" + sessionStorage.data;
            this.refreshes = Number(sessionStorage.refreshes) % 3 - 1;
        }


        else {
            this.data = sessionStorage.data + "prefix";
            this.refreshes = Number(sessionStorage.refreshes) % 3 + 1;
        }


        sessionStorage.data = this.data;
        sessionStorage.refreshes = this.refreshes;
    }
})

Say you open the file “index.html” in the browser, and enter the text “iitm” in the text box shown (after removing the existing text from the input box), and click on the button with the text “Click Me”. After that, you refresh the page twice. What will be the text shown in the text input box, and the value of the “refreshes” placeholder, respectively?

  1. A

    suffixiitmsuffix, -2

  2. B

    suffixsuffixiitmsuffix, -2

  3. C

    suffixsuffixiitmsuffix, -3

  4. D

    suffixiitmsuffix, -3

Show answer

Correct answer

  • C

    suffixsuffixiitmsuffix, -3

Question 1 on its own page

Question 2

+3 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.

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, minimum) {


            for (company of state.companies)
                code2
        }
    },
    actions : {
        send_task : function (context) {
            code1
        }
    }
})
  1. A
  2. B
  3. C
  4. D
Show answer

Correct answer

  • D
Question 2 on its own page

Question 3

+3 marksOne correct option

Consider the following JavaScript program running in a browser environment.

javascript
async function FetchFunct(ApiUrl) {
  const response = await fetch(ApiUrl).catch(() => {
    throw new Error('Network Error')
  })


  if (response) {
    if (response.ok) {
      const data = await response.json().catch(() => {
        throw new Error('Unexpected Error')
      })
      if (data) {
        return data
      }
    } else {
      throw new Error(response.statusText)
    }
  }
}
Const url = ‘dummyUrl’
FetchFunct(url)
  .then((data) => {
    console.log(data)
  })
  .catch((err) => {
    console.log(err.message)
  })

Consider the ‘dummyUrl’ returns the HTML as payload. What will be logged on to the console?

  1. A

    Network Error

  2. B

    Unexpected Error

  3. C

    Not Found

  4. D

    None of these

Show answer

Correct answer

  • B

    Unexpected Error

Question 3 on its own page

Question 4

+3 marksOne correct option

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

html
<body>
    <div id="app">
      <router-view></router-view>
    </div>
    <script src="app.js" type="module"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
  </body>

app.js:

javascript
const Create = {
  template: `<div>{{message}}</div>`,
  computed: {
    message() {
      return this.$route.query.update
        ? 'This is create page'
        : 'This is update page'
    },
  },
}
const router = new VueRouter({
  routes: [{ path: '/', component: Create }],
})


new Vue({
  el: '#app',
  router,
})

Suppose the application is running on “http://127.0.0.1:8080”. What will be the value of message property of Create component for “http://127.0.0.1:8080/\#/?update=true” ?

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

Correct answer

  • A
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
<body>
    <div id="app">
      <router-view></router-view>
    </div>
    <script src="app.js" type="module"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
  </body>

app.js:

javascript
const home = { template: `<div> This is home page</div>`, name: 'home' }
const profile = {
  template: `<div> This is profile page of {{this.$route.params.name}}</div>`,
}
const user = {
  template: `<div> Welcome {{this.$route.params.name}}
  <div><router-view></router-view></div>
  </div>`,
}
const router = new VueRouter({
  routes: [
    { path: '/', component: home },
    {
      path: '/user/:name',
      component: user,
      children: [
        { path: '', component: home },
        { path: 'home', component: home },
        { path: 'profile', component: profile },
      ],
    },
  ],
})


new Vue({
  el: '#app',
  router,
})

Suppose the application is running on “http://127.0.0.1:8080”. What will be displayed by the browser for “http://127.0.0.1:8080/#/user/mohan/profile”?

  1. A

    Welcome mohan
    This is profile page of mohan

  2. B

    Welcome
    This is profile page of mohan

  3. C

    Welcome mohan
    This is profile page of

  4. D

    Welcome mohan

Show answer

Correct answer

  • A

    Welcome mohan
    This is profile page of mohan

Question 5 on its own page

Question 6

+3 marksOne correct option

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

index.html:

html
<body>
    <div id="app">
      <router-view></router-view>
    </div>
    <script src="app.js" type="module"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
  </body>

app.js:

javascript
const home = { template: `<div> This is home page</div>`, name: 'home' }
const profile = {
  template: `<div> This is profile page of {{this.$route.params.name}}</div>`,
}
const user = {
  template: `<div> Welcome {{this.$route.params.name}}
  <div><router-view></router-view></div>
  </div>`,
}
const router = new VueRouter({
  routes: [
    { path: '/', component: home },
    {
      path: '/user/:name',
      component: user,
      children: [
        { path: '', component: home },
        { path: 'home', component: home },
        { path: 'profile', component: profile },
      ],
    },
  ],
})


new Vue({
  el: '#app',
  router,
})

What will be displayed by the browser for “http://127.0.0.1:8080/#/user/mohan”?

  1. A

    Welcome mohan
    This is home page of mohan

  2. B

    Welcome mohan
    This is home page

  3. C

    Welcome
    This is home page

  4. D

    Welcome
    This is home page of mohan

Show answer

Correct answer

  • B

    Welcome mohan
    This is home page

Question 6 on its own page

Question 7

+4.5 marksOne correct option

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

javascript
async function test() {
    let a = await new Promise(r => r(2 && 4)).catch(e => e);
    let b = await new Promise((res, rej) => {
        if (a <= 2) res(a && 5);
        else rej(5 && a);
    }).catch(e => e);
    console.log(a, b);
}
test();
  1. A

    1 1

  2. B

    4 4

  3. C

    2 5

  4. D

    4 5

Show answer

Correct answer

  • B

    4 4

Question 7 on its own page

Question 8

+4.5 marksOne correct option

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

javascript
new Promise((reject, resolve) => {


    function test (input1, input2, data) {
        let obj = {
            input1 : input1,
            input2 : input2
        }


        if (data.find(el => el.input1 == obj.input1 && el.input2 != obj.input2))
            resolve("Element Found")
        else
            reject("Element Missing")
    }


    data = [{'input1' : 4, 'input2' : 'input2'}]
    test(4, 4, data)


}).then(data => console.log("Test failed !!", data)
).catch(error => console.log("Test Passed !!", error))
  1. A

    Test Passed !! Element Missing

  2. B

    Test Failed !! Element Found

  3. C

    Test Failed !! Element Missing

  4. D

    Test Passed !! Element Found

Show answer

Correct answer

  • D

    Test Passed !! Element Found

Question 8 on its own page

Question 9

+4.5 marksOne correct option

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

app.js:

javascript
const a = new Vue({
    el : '#app',
    data : {
        data : "",
        refreshes : 0,
    },
    methods: {


        do_something() {
            if (isNaN(this.refreshes)) this.refreshes = 0;
            if (this.data.length % 2) {
                sessionStorage.data = "prefix" + this.data;
                sessionStorage.refreshes = this.refreshes * 2 + 1;
            }
            else {


                sessionStorage.data = this.data + "suffix";
                sessionStorage.refreshes = this.refreshes * 2 - 1;
            }
        }
    },
    mounted : function () {
        if (sessionStorage.data) {
            this.data = "suffix" + sessionStorage.data;
            this.refreshes = Number(sessionStorage.refreshes) % 3 - 1;
        }


        else {
            this.data = sessionStorage.data + "prefix";
            this.refreshes = Number(sessionStorage.refreshes) % 3 + 1;
        }


        sessionStorage.data = this.data;
        sessionStorage.refreshes = this.refreshes;
    }
})

Say you open the file “index.html” in the browser, and enter the text “nptel” in the text box shown (after removing the existing text from the input box). After that, you refresh the page thrice. What be the text shown in the text input box, and the value of the “refreshes” placeholder, respectively?

  1. A

    suffixsuffixsuffixundefinedprefix, NaN

  2. B

    suffixsuffixsuffixundefinedprefix, -3

  3. C

    suffixsuffixundefinedprefix, NaN

  4. D

    suffixsuffixundefinedprefix, -3

Show answer

Correct answer

  • A

    suffixsuffixsuffixundefinedprefix, NaN

Question 9 on its own page

Question 10

+4.5 marksOne correct option

Consider the following javascript program running in a browser environment.

javascript
function PromiseConstructor(t) {
  return new Promise((res, rej) => {
    setTimeout(() => {
      res(t)
    }, t * 1000)
  })
}
async function test() {
  const x1 = await PromiseConstructor(1)
  console.log(2)
  const x2 = await PromiseConstructor(3)
  console.log(x1)
  console.log(x2)
}
test()
console.log(4)

What will be logged on to the console in (value, t) format, where “t” represents the approximate time in seconds (from the start of the execution of the program), and “value” represents the output value logged on to the console. For example: If 2 is logged on to console after 5 seconds, answer is (2, 5).

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

Correct answer

  • D
Question 10 on its own page

Question 11

+2 marksOne or more correct options

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

Select all that apply.

  1. A

    GraphQL is always better than an API, irrespective of the nature, scale and function of an application.

  2. B

    GraphQL can be used with every programming language, which is capable of making HTTP requests.

  3. C

    It is possible to cache the responses of REST API endpoints.

  4. D

    All of these

Show answer

Correct answers

  • B

    GraphQL can be used with every programming language, which is capable of making HTTP requests.

  • C

    It is possible to cache the responses of REST API endpoints.

Question 11 on its own page

Question 12

+2 marksOne or more correct options

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

Select all that apply.

  1. A

    Vuex provides a common solution to the parent component to the child component communication and vice-versa.

  2. B

    The usage of global variables over Vuex makes it easier to track the state changes.

  3. C

    Vuex is preferred in cases where multiple views depend on the same state.

  4. D

    Only the direct child components (not the descendants) have access to the Vuex store.

Show answer

Correct answers

  • A

    Vuex provides a common solution to the parent component to the child component communication and vice-versa.

  • C

    Vuex is preferred in cases where multiple views depend on the same state.

Question 12 on its own page

Question 13

+2 marksOne or more correct options

Which of the following is correct regarding JWT?

Select all that apply.

  1. A

    It is used as an access token to share information between two parties.

  2. B

    It contains encoded JSON data.

  3. C

    It contains encoded XML data.

  4. D

    Only payload, encoded in base64 format, is contained in JWT web token.

Show answer

Correct answers

  • A

    It is used as an access token to share information between two parties.

  • B

    It contains encoded JSON data.

Question 13 on its own page

Question 14

+2 marksOne or more correct options

Which of the following is true regarding CORS?

Select all that apply.

  1. A

    It allows servers to indicate which origins can load the resource from the server.

  2. B

    It allows the client to indicate from which server it can load resource.

  3. C

    Enabling CORS is not required for same origin request.

  4. D

    All of these

Show answer

Correct answers

  • A

    It allows servers to indicate which origins can load the resource from the server.

  • C

    Enabling CORS is not required for same origin request.

Question 14 on its own page

Question 15

+3 marksOne or more correct options

Which of the following statement(s) is/are false regarding PWA and SPA?

Select all that apply.

  1. A

    The idea of an SPA is to improve the SEO aspects of the web application.

  2. B

    A web application manifest provides the information required for a web app to be downloaded and presented to the user in a native like experience.

  3. C

    It is the service worker that helps a PWA serve cached contents of a page, when offline.

  4. D

    Both gmail.com and amazon.in are examples of SPA.

Show answer

Correct answers

  • A

    The idea of an SPA is to improve the SEO aspects of the web application.

  • D

    Both gmail.com and amazon.in are examples of SPA.

Question 15 on its own page

Question 16

+3 marksOne or more correct options

Which of the following statement(s) is/are false regarding token based authentication?

Select all that apply.

  1. A

    The token generated generally expires after a certain time period, and this time period can also be customized according to the application requirements.

  2. B

    The client must send the token with the first request to authenticate, and need not send the token in the subsequent requests.

  3. C

    The fetch calls to a flask API will fail due to the CORS error by default.

  4. D

    If using flask-security for achieving token based authentication, all the API endpoints are protected by default.

Show answer

Correct answers

  • B

    The client must send the token with the first request to authenticate, and need not send the token in the subsequent requests.

  • D

    If using flask-security for achieving token based authentication, all the API endpoints are protected by default.

Question 16 on its own page