Quiz Space

September 2022 term · Modern Application Development II · BSCS2006

MAD 2 End Term: 11 December 2022, Set ETD1 (September 2022 term)

The IIT Madras BS Modern Application Development II (MAD 2) End Term paper sat on 11 Dec 2022, in the September 2022 term, set ETD1: 32 questions for 100 marks in 180 minutes. Every question is below with its answer. Take it as a timed mock test to be marked, or read it through first.

Questions
32
Marks
100
Duration
180 min
MCQ
25
MSQ
7
Take as mock testPractise with answers

Updated

Official paper: IIT M DIPLOMA AN1 EXAM ETD1 11 Dec 2022 · No negative marking.

Question 1

+2 marksOne correct option

Consider the below Vue component and Vuex store definition.

javascript
const store = new Vuex.Store({
    state : {
        stateA : 10,
        stateB : 20,
        stateC : 30,
    }
}


Vue.component('Vuex-demo', {
    template : `
                <div>
                    state A : {{stateA}}
                    state B : {{stateB}}
                    state C : {{stateC}}
                </div>
                `,
    computed : code
})

Which of the following is the best suitable definition of the “code” placeholder in the above app (assuming the store is binded with the Vue app, and the mapState is imported appropriately)?

  1. A

    …mapState(['state_1', 'state_2', 'state_3'])

  2. B

    mapState(['state_1', 'state_2', 'state_3'])

  3. C

    Both …mapState(['state_1', 'state_2', 'state_3']) and mapState(['state_1', 'state_2', 'state_3'])

  4. D

    A Vue component cannot access Vuex store state.

Show answer

Correct answer

  • A

    …mapState(['state_1', 'state_2', 'state_3'])

Question 1 on its own pageAlso asked in End Term 11 Dec 2022

Question 2

+2 marksOne correct option

Suppose you are writing an application to be used by lakhs of people, which will run a brute force algorithm and gives back the result to the user of the application when ready. Considering this context, arrange the below set of actions/operations to achieve a desirable and practical design. I. Invoke the webhook
II. Relieve the worker
III. Dispatch a backend job

  1. A

    I, III, II

  2. B

    III, I, II

  3. C

    I, II, III

  4. D

    The polling will be a better design.

Show answer

Correct answer

  • B

    III, I, II

Question 2 on its own pageAlso asked in End Term 11 Dec 2022

Question 3

+2 marksOne correct option

Which of the following statements is false regarding caching?

  1. A

    A shared cache is generally suitable for storing the personalized responses.

  2. B

    A private cache is usually tied to a specific client.

  3. C

    The caching helps in improving the performance of a web application.

  4. D

    Caching at browser level provides the least latency, if compared with proxy level.

Show answer

Correct answer

  • A

    A shared cache is generally suitable for storing the personalized responses.

Question 3 on its own page

Question 4

+2 marksOne correct option

Suppose you want to store some data on the client, which has to be sent back to the server with every subsequent request. Which of the following is the most suited for this purpose?

  1. A

    Local Storage

  2. B

    Session Storage

  3. C

    Cookie

  4. D

    Any of these can be used

Show answer

Correct answer

  • C

    Cookie

Question 4 on its own pageAlso asked in End Term 11 Dec 2022
Show answer

Correct answer

Question 5 on its own page

Question 6

+3 marksOne correct option

Which of the following shows the correct output, if the below program is executed?

  1. A

    1
    3

  2. B

    1
    2
    3

  3. C

    5
    5

  4. D

    5
    5
    5

Show answer

Correct answer

  • A

    1
    3

Question 6 on its own page

Question 7

+3 marksOne correct option

If an application is entirely built on the client end using javascript (without a database). Which of the following statements is true?

  1. A

    All the progress will always be lost on the force reload of the page.

  2. B

    All the progress may not necessarily be lost on the force reload of the page.

  3. C

    The application will not allow force reload of the page.

  4. D

    The progress made in a machine can be accessed on another machine.

Show answer

Correct answer

  • B

    All the progress may not necessarily be lost on the force reload of the page.

Question 7 on its own page

Question 8

+3 marksOne correct option

Suppose a particular user of an application hosted on http://example1.com has delete privilege and URL to delete resource with ID 1 is ‘http://example1.com/delete?id=1’. The user visits a malicious website having an image link with definition “<img src=‘
http://example1.com/delete?id=1’ />”, and the user clicks on the link, which in turn leads to the deletion of the resource without the knowledge of the user. Which of the following correctly describes the above scenario?

  1. A

    Cross Site Scripting

  2. B

    Cross Site Request Forgery

  3. C

    Session Hijacking

  4. D

    None of these

Show answer

Correct answer

  • B

    Cross Site Request Forgery

Question 8 on its own page

Question 9

+3 marksOne correct option

Consider the following javascript program. What will be logged on to console after executing the program?

javascript
const promiseFactory = (data) => {
  return new Promise((resolve) => {
    resolve(data)
  })
}
result = []
p1 = promiseFactory('App Dev I')
p1.then((data) => {
  result.push(data)
  return promiseFactory('App Dev II')
}).then((data) => {
  result.push(data)
})
console.log(result)
  1. A

    []

  2. B

    [‘App Dev I’, ‘App Dev II’]

  3. C

    [‘App Dev II’, ‘App Dev I’]

  4. D

    [‘App Dev I’]

Show answer

Correct answer

  • A

    []

Question 9 on its own page

Question 10

+3 marksOne correct option

Consider the following javascript code. What will be logged on the console after executing this program?

javascript
const Person = function (name, city, pinCode) {
  this.name = name
  this.city = city
  this.pin = pinCode
}


Person.prototype.getAddress = function () {
  return `Name: ${this.name}, City: ${this.city}, ${this.pin}`
}


per1 = new Person('Mayank', 'Delhi', '110001')
console.log(per1.getAddress())
  1. A

    Name: , City: , Pin:

  2. B

    Name: Mayank, City: Delhi, Pin: 110001

  3. C

    Name: Mayank, City: Delhi, 110001

  4. D

    None of these

Show answer

Correct answer

  • C

    Name: Mayank, City: Delhi, 110001

Question 10 on its own page

Question 11

+3 marksOne correct option

Consider the following javascript program. What will be logged on to console after executing this program?

javascript
const promiseFactory = (isShopOpen) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (isShopOpen) {
        resolve('Making Coffee')
      } else {
        reject('Making Tea')
      }
   }, 1000)
  })
}


const bringTea = promiseFactory(false)
bringTea
  .then((data) => {
    console.log(data)
  })
  .catch((data) => {
    console.log(data)
  })
console.log('Boiling Water ....')
  1. A

    Boiling Water ….

  2. B

    Boiling Water ….
    Making Coffee

  3. C

    Boiling Water ….
    Making Tea

  4. D

    Making Coffee
    Boiling Water ….

Show answer

Correct answer

  • C

    Boiling Water ….
    Making Tea

Question 11 on its own page

Question 12

+3 marksOne correct option

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

index.html:

html
<head>
  <style>
    .booked {
      background-color: green;
    }
  </style>
</head>
<body>
  <div id="app">
    <button :class="{booked:seat.isBooked}" v-for="seat in seats">
      {{seat.seatNo}}
    </button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="app.js"></script>
</body>

app.js:

javascript
new Vue({
  el: '#app',
  data: {
    seats: [
      { seatNo: 1, isBooked: true },
      { seatNo: 2, isBooked: false },
      { seatNo: 3, isBooked: true },
    ],
  },
})

Suppose the application is running on ‘http://localhost:8080’. What will be the background colour of seat with seatNo 1 and 2 respectively, when the user visits the home page of the application (Assume the default background colour of button to be white)?

  1. A

    Green, Green

  2. B

    Green, White

  3. C

    White, White

  4. D

    White, Green

Show answer

Correct answer

  • B

    Green, White

Question 12 on its own page

Question 13

+4.5 marksOne correct option

Consider the following javascript program, and predict the output, if executed in a REPL environment.

javascript
var a = 39
const obj1 = {
    'a' : 50,
    'func' : function () {
        let in_func = () => console.log("This :", this.a, ", Normal :", a)
        in_func();
    }
}


const obj2 = {
    'a' : 60,
    'func' : function () {
        let in_func = () => console.log("This :", this.a, ", Normal :", a)
        in_func();
    }
}


obj1.func.call()
  1. A

    This : 39 , Normal : 39

  2. B

    This : undefined , Normal : 39

  3. C

    This : undefined , Normal : 50

  4. D

    This : 39 , Normal : 50

Show answer

Correct answer

  • A

    This : 39 , Normal : 39

Question 13 on its own page

Question 14

+4.5 marksOne correct option

Consider the below javascript program, and predict the output, if executed. Also, what will be the minimum time taken by the program to execute?

javascript
exams = ['endterm', 'quiz2', 'quiz1']


new Promise((rej, res) => {
    let count = 2
    let a = setInterval(() => {
        count += 3;
        exams.pop();
        if (count % 2) {
            exams.push('quiz1')
        }
        if (count % 17 == 0) {
            clearInterval(a);
            rej();
        }
    }, 2000)
}).then(d => console.log("Rejected", exams)
).catch(e => console.log("Resolved", exams))
  1. A

    Rejected [‘quiz1’]
    Minimum Time taken: 10 seconds

  2. B

    Rejected [‘quiz1’]
    Minimum Time taken: 8 seconds

  3. C

    Resolved [‘quiz1’]
    Minimum Time taken: 8 seconds

  4. D

    Resolved [‘quiz1’]
    Minimum Time taken: 10 seconds

Show answer

Correct answer

  • A

    Rejected [‘quiz1’]
    Minimum Time taken: 10 seconds

Question 14 on its own page

Question 15

+4.5 marksOne correct option

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

index.html:

html
<div id = "app">
    <input v-model = "subject" @change = "compute_marks">
    <p> {{marks}} </p>
</div>
<script scr = "app.js"></script>

app.js:

javascript
new Vue({
    el : "#app",
    data : {
        subject : "AppDev",
        marks : 50,
    },


    mounted () {
        this.subject = "AppDev";
        this.marks = 50;


        if (localStorage.marks) {
            this.subject += "1";
            this.marks = localStorage.marks + 20;
        }
        else {
            this.subject += "2";
            this.marks += 20;
        }
    },


    methods : {
        compute_marks() {
            localStorage.setItem("subject", this.subject);
            localStorage.setItem("marks", this.marks + 10);
        }
    }


})

Suppose you open “index.html” file in a browser, and type the text “EndTermExam” in the text box shown (after removing the previous text, if any), and hard refresh the page thrice, without clicking anywhere. What will be the value shown in the text box, and the “marks” placeholder, respectively?

  1. A

    AppDev1, 80

  2. B

    AppDev2, 80

  3. C

    AppDev1, 70

  4. D

    AppDev2, 70

Show answer

Correct answer

  • D

    AppDev2, 70

Question 15 on its own page

Question 16

+4.5 marksOne correct option

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

index.html:

html
<body>
    <div id="app">
      <h4 id="total">Total Run: {{total}}</h4>
      <h4 id="player">{{Player.name}}: {{Player.run}}</h4>
      <button @click="extra=true">Extra</button>
      <button @click="addRuns(4)">Run</button>
    </div>
    <script
src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
    <script src="app.js"></script>
  </body>

app.js:

javascript
new Vue({
  el: '#app',
  data: {
          extra: false,
          total: 20,
          Player: { name: 'M.S. Dhoni', run: 10 }
        },


  methods: {
    addRuns(run) {
      if (this.extra === true) {
        this.Player.run += run
      }
      this.total += run
      this.extra = false
    },
  },
})

Suppose the application is running on ‘http://localhost:8080’. If the user clicks on the button with the text “Extra”, and then clicks on the button with the text “Run” thrice. What will be rendered inside the element with ID “total” and “player”, respectively?

  1. A

    Total Run: 32, M.S. Dhoni: 14

  2. B

    Total Run: 28, M.S. Dhoni: 14

  3. C

    Total Run: 32, M.S. Dhoni: 18

  4. D

    Total Run: 28, M.S. Dhoni: 18

Show answer

Correct answer

  • A

    Total Run: 32, M.S. Dhoni: 14

Question 16 on its own page

Question 17

+4.5 marksOne correct option

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

javascript
new Promise((arg1, arg2) => {
    if (5 === "5") arg2(5)
    else arg1(5)
}).
then(d => {
    console.log("Checkpoint 3", d);
    throw new Error(20);
    return d * 5;
})
.then(d => {
    console.log("Checkpoint 1", d);
    return d;
})
.catch(e => {
    console.log("Checkpoint 4");
    return 5;
}).finally(d => {
    console.log("Checkpoint 6", d);
    return d * 5;
}).then(d => {
    console.log("Checkpoint 2", d);
    return d * 5;
})
  1. A

    Checkpoint 4 11
    Checkpoint 6 undefined
    Checkpoint 2 25

  2. B

    Checkpoint 4 11
    Checkpoint 6 25
    Checkpoint 2 125

  3. C

    Checkpoint 3 5
    Checkpoint 4
    Checkpoint 6 undefined
    Checkpoint 2 5

  4. D

    Checkpoint 3 5
    Checkpoint 4
    Checkpoint 6 NaN
    Checkpoint 2 5

Show answer

Correct answer

  • C

    Checkpoint 3 5
    Checkpoint 4
    Checkpoint 6 undefined
    Checkpoint 2 5

Question 17 on its own page

Question 18

+2 marksOne or more correct options

Which of the following statement(s) is/are false in the context of point-to-point communication and message broker?

Select all that apply.

  1. A

    In point-to-point communication, the number of connections grow with the order of O(nlogn).

  2. B

    If a central message broker is used, the number of connections grow with the order of O(logn).

  3. C

    If a central message broker is used, the number of connections grow with the order of O(n).

  4. D

    A message broker makes the network more scalable, if compared with point- to-point communication.

Show answer

Correct answers

  • A

    In point-to-point communication, the number of connections grow with the order of O(nlogn).

  • B

    If a central message broker is used, the number of connections grow with the order of O(logn).

Question 18 on its own page

Question 19

+2 marksOne or more correct options

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

Select all that apply.

  1. A

    The CSRF protection is not enforced by the flask framework, by default.

  2. B

    The data stored in local storage is synchronized across the devices for a given user.

  3. C

    A flask application returns CORS headers for cross domain javascript requests, by default.

  4. D

    The flask application uses port number 5000, by default.

Show answer

Correct answers

  • B

    The data stored in local storage is synchronized across the devices for a given user.

  • C

    A flask application returns CORS headers for cross domain javascript requests, by default.

Question 19 on its own page

Question 20

+2 marksOne or more correct options

Which of the following is/are true regarding session cookies?

Select all that apply.

  1. A

    They get deleted once the user closes the browser.

  2. B

    They will be sent to the origin server with each request, by default.

  3. C

    They will not be sent to the origin server with each request, by default.

  4. D

    All of these

Show answer

Correct answers

  • A

    They get deleted once the user closes the browser.

  • B

    They will be sent to the origin server with each request, by default.

Question 20 on its own page

Question 21

+3 marksOne or more correct options

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

Select all that apply.

  1. A

    JavaScript is a high level programming language.

  2. B

    JavaScript moves the declaration of all the arrow functions to the top of their scope.

  3. C

    The language does not allow the global declaration of user defined functions.

  4. D

    A function can be invoked inside another function in the language.

Show answer

Correct answers

  • B

    JavaScript moves the declaration of all the arrow functions to the top of their scope.

  • C

    The language does not allow the global declaration of user defined functions.

Question 21 on its own page

Question 22

+3 marksOne or more correct options

Consider the below Vue class binding and select the incorrect option(s).

Select all that apply.

  1. A

    The classes, namely “classA” and “classB” will always be applied to the div element.

  2. B

    The class, namely “classB” will always be applied to the div element.

  3. C

    The class, namely “classA” will only be applied to the div element, if the variable “isClassA” evaluates to true.

  4. D

    The class, namely “classB” will only be applied to the div element, if no variable with name “isClassA” exists.

Show answer

Correct answers

  • A

    The classes, namely “classA” and “classB” will always be applied to the div element.

  • D

    The class, namely “classB” will only be applied to the div element, if no variable with name “isClassA” exists.

Question 22 on its own page

Question 23

+3 marksOne or more correct options

Which of the following statement(s) is/are true in the context of scaling a web application?

Select all that apply.

  1. A

    Scaling out is always a preferred choice when the network traffic is growing.

  2. B

    The horizontal scaling will typically clone the application as many times as required, and add a load balancer to maintain uniform traffic across the servers.

  3. C

    The horizontal partitioning splits a given table into multiple tables, with each table having the same structure.

  4. D

    The diagonal scaling refers to cloning the application first, and then scaling up the different servers to meet the requirements.

Show answer

Correct answers

  • B

    The horizontal scaling will typically clone the application as many times as required, and add a load balancer to maintain uniform traffic across the servers.

  • C

    The horizontal partitioning splits a given table into multiple tables, with each table having the same structure.

Question 23 on its own page

Question 24

+3 marksOne or more correct options

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

Select all that apply.

  1. A

    A flask application runs in a threaded mode by default.

  2. B

    A fetch API call always returns a promise.

  3. C

    The promise returned by fetch API resolves to an HTTP response status 500, with the “ok” property of the response set to true.

  4. D

    A headless CMS aims to manage both the content and frontend via APIs.

Show answer

Correct answers

  • A

    A flask application runs in a threaded mode by default.

  • B

    A fetch API call always returns a promise.

Question 24 on its own page

Question 25

+3 marksOne correct option

Consider the following application with markup “index.html” and javascript file “app.js”, and answer the given subquestions.

index.html:

html
<body>
    <div id="app">
      <book-slot :currentslot="slot" @book="book"></book-slot>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="app.js"></script>
</body>

app.js:

javascript
const bookSlot = {
  template: `<div id='slot-detail'>
  Slot ID: {{currentslot.id}},
  Slot Status: {{currentslot.status?'Booked':'Not Booked'}}</div>
  <button @click="$emit('book')"> Book </button>
  </div>`,
  props: ['currentslot'],
}


new Vue({
  el: '#app',
  data: {
    slot: { id: 1, status: false },
  },
  methods: {
    book() {
      this.slot.status = !this.slot.status
    },
  },
  components: {
    'book-slot': bookSlot,
  },
})

Suppose the application is running on ‘http://localhost:8080’. What will be rendered by the browser inside the div element with ID ‘slot-detail’, when the user visits the website home page for the first time (except the button)?

  1. A

    Slot ID: 1, Slot Status: Booked

  2. B

    Slot ID: 1, Slot Status: Not Booked

  3. C

    Slot ID: 1

  4. D

    Slot Status: Booked

Show answer

Correct answer

  • B

    Slot ID: 1, Slot Status: Not Booked

Question 25 on its own page

Question 26

+3 marksOne correct option

Consider the following application with markup “index.html” and javascript file “app.js”, and answer the given subquestions.

index.html:

html
<body>
    <div id="app">
      <book-slot :currentslot="slot" @book="book"></book-slot>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="app.js"></script>
</body>

app.js:

javascript
const bookSlot = {
  template: `<div id='slot-detail'>
  Slot ID: {{currentslot.id}},
  Slot Status: {{currentslot.status?'Booked':'Not Booked'}}</div>
  <button @click="$emit('book')"> Book </button>
  </div>`,
  props: ['currentslot'],
}


new Vue({
  el: '#app',
  data: {
    slot: { id: 1, status: false },
  },
  methods: {
    book() {
      this.slot.status = !this.slot.status
    },
  },
  components: {
    'book-slot': bookSlot,
  },
})

Suppose the application is running on ‘http://localhost:8080’. What will be rendered by the browser inside the div element with ID ‘slot-detail’, when user clicks on the button with the text ‘Book’ 3 times (except the button)?

  1. A

    Slot ID: 1, Slot Status: Booked

  2. B

    Slot ID: 1, Slot Status: Not Booked

  3. C

    Slot ID: 1

  4. D

    Slot Status: Booked

Show answer

Correct answer

  • A

    Slot ID: 1, Slot Status: Booked

Question 26 on its own page

Question 27

+3 marksOne correct option

Consider the following application with markup “index.html” and javascript file “app.js”, and answer the given subquestions.

index.html:

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

app.js:

javascript
const Booking = {
  template: `<div><div> Slot Booking </div><router-view /></div>`,
}
const Error = { template: `<div> Page not Found </div>` }
const Booked = { template: `<div> Unbooked Slots </div>` }
const unBooked = { template: `<div> Booked Slots </div>` }


const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Booking,
      children: [
        { path: 'booked', component: Booked },
        { path: 'unbooked', component: unBooked },
        { path: '*', component: Error },
      ],
    },
  ],
})


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

Suppose the application is running on ‘http://localhost:8080’. What will be rendered inside the ‘router-view’ of Booking component when user visits the URL ‘http://127.0.0.1:8080/\#/’?

  1. A

    Page not Found

  2. B

    Booked Slots

  3. C

    Unbooked Slots

  4. D

    None of these

Show answer

Correct answer

  • A

    Page not Found

Question 27 on its own page

Question 28

+3 marksOne correct option

Consider the following application with markup “index.html” and javascript file “app.js”, and answer the given subquestions.

index.html:

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

app.js:

javascript
const Booking = {
  template: `<div><div> Slot Booking </div><router-view /></div>`,
}
const Error = { template: `<div> Page not Found </div>` }
const Booked = { template: `<div> Unbooked Slots </div>` }
const unBooked = { template: `<div> Booked Slots </div>` }


const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Booking,
      children: [
        { path: 'booked', component: Booked },
        { path: 'unbooked', component: unBooked },
        { path: '*', component: Error },
      ],
    },
  ],
})


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

What will be rendered inside the ‘router-view’ of Booking component when user visits the URL ‘ http://127.0.0.1:8080/\#/unbooked’?

  1. A

    Page not Found

  2. B

    Booked Slots

  3. C

    Unbooked Slots

  4. D

    None of these

Show answer

Correct answer

  • B

    Booked Slots

Question 28 on its own page

Question 29

+4.5 marksOne correct option

Consider the following application with markup “index.html” and javascript file “app.js”, and answer the given subquestions.

index.html:

html
<body>
    <div id="app">
      <div id="sort">
          <li v-for="slot in recent">{{slot.date.getDate()}}</li>
      </div>
      <div id="status">
          <li v-for="slot in booked">{{slot.id}}</li>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="app.js"></script>
</body>

app.js :

javascript
new Vue({
  el: '#app',
  data: {
    slots: [
      { id: 1, date: new Date('December 19'), status: true },
      { id: 2, date: new Date('December 17'), status: false },
    ],
  },
  computed: {
    recent() {
      return this.slots.sort((b, a) => {
        return b.date - a.date
      })
    },
    booked() {
      return this.slots.filter((slot) => {
        return slot.status
      })
    },
  },
})

Suppose the application is running on ‘http://localhost:8080’, and a user visits the same URL. What will be rendered inside the div element having ID ‘sort’?

  1. A

    19
    17

  2. B

    19

  3. C

    17

  4. D

    17
    19

Show answer

Correct answer

  • D

    17
    19

Question 29 on its own page

Question 30

+3 marksOne correct option

Consider the following application with markup “index.html” and javascript file “app.js”, and answer the given subquestions.

index.html:

html
<body>
    <div id="app">
      <div id="sort">
          <li v-for="slot in recent">{{slot.date.getDate()}}</li>
      </div>
      <div id="status">
          <li v-for="slot in booked">{{slot.id}}</li>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="app.js"></script>
</body>

app.js :

javascript
new Vue({
  el: '#app',
  data: {
    slots: [
      { id: 1, date: new Date('December 19'), status: true },
      { id: 2, date: new Date('December 17'), status: false },
    ],
  },
  computed: {
    recent() {
      return this.slots.sort((b, a) => {
        return b.date - a.date
      })
    },
    booked() {
      return this.slots.filter((slot) => {
        return slot.status
      })
    },
  },
})

Suppose the application is running on ‘http://localhost:8080’, and a user visits the same URL. What will be rendered inside the div element having ID “status”?

  1. A

    1
    2

  2. B

    1

  3. C

    2

  4. D

    None of these

Show answer

Correct answer

  • B

    1

Question 30 on its own page

Question 31

+4.5 marksOne correct option

Consider the following application with markup “index.html” and javascript file “app.js”, and answer the given subquestions.

index.html:

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

app.js:

javascript
const Home = { template: `<div> Welcome Home</div>` }
const slotComp = {
  template: `<div>
    <ol>
      <li v-for='slot in availableSlots'> {{slot.description}} </li>
    </ol>
  </div>`,
  data() {
    return {
      slots: [
        { id: 1, description: 'Slot1', status: 'true' },
        { id: 2, description: 'Slot2', status: 'true' },
        { id: 3, description: 'Slot3', status: 'false' },
      ],
    }
  },
  computed: {
    availableSlots() {
      const slots = this.slots.filter((slot) => {
        return (
          slot.status == this.$route.params.status &&
          slot.id >
            (this.$route.query.offset ? parseInt(this.$route.query.offset) :
0)
        )
      })
      return slots
    },
  },
}
const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/slot/:status', component: slotComp },
  ],
})


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

Consider the application is running on ‘http://localhost:8080’. Suppose the user visits the URL ‘ http://127.0.0.1:8080/\#/slot/true’. What will be rendered by the browser inside the “router-view”?

  1. A

    1. Slot1
    2. Slot2

  2. B

    1. Slot2
    2. Slot3

  3. C

    1. Slot1

  4. D

    1. Slot2

Show answer

Correct answer

  • A

    1. Slot1
    2. Slot2

Question 31 on its own page

Question 32

+4.5 marksOne correct option

Consider the following application with markup “index.html” and javascript file “app.js”, and answer the given subquestions.

index.html:

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

app.js:

javascript
const Home = { template: `<div> Welcome Home</div>` }
const slotComp = {
  template: `<div>
    <ol>
      <li v-for='slot in availableSlots'> {{slot.description}} </li>
    </ol>
  </div>`,
  data() {
    return {
      slots: [
        { id: 1, description: 'Slot1', status: 'true' },
        { id: 2, description: 'Slot2', status: 'true' },
        { id: 3, description: 'Slot3', status: 'false' },
      ],
    }
  },
  computed: {
    availableSlots() {
      const slots = this.slots.filter((slot) => {
        return (
          slot.status == this.$route.params.status &&
          slot.id >
            (this.$route.query.offset ? parseInt(this.$route.query.offset) :
0)
        )
      })
      return slots
    },
  },
}
const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/slot/:status', component: slotComp },
  ],
})


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

Suppose the user visits the URL ‘http://127.0.0.1:8080/\#/slot/true?offset=1’, what will be rendered inside the ‘router-view’?

  1. A

    1. Slot1
    2. Slot2

  2. B

    1. Slot2
    2. Slot3

  3. C

    1. Slot1

  4. D

    1. Slot2

Show answer

Correct answer

  • D

    1. Slot2

Question 32 on its own page