uiz Space

May 2024 term · Modern Application Development II · BSCS2006

Modern Application Development II Quiz 1: 7 July 2024 (May 2024 term)

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

Updated

Official paper: IIT M DIPLOMA AN EXAM QDD2 7 July 2024 · No negative marking.

Question 1

+2 marksOne correct option
  1. A
  2. B
  3. C
  4. D
Show answer

Correct answer

  • B
Question 1 on its own page

Question 2

+2 marksOne correct option

What will be the output of the following code snippet?

javascript
let result = "";
for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 2; j++) {
    result += " " + i + j + " ";
  }
}
console.log(result);
  1. A
  2. B
  3. C
  4. D
Show answer

Correct answer

  • D
Question 2 on its own page

Question 3

+2 marksOne correct option

Which of the following statements best describes the ephemeral state?

  1. A

    Data that persists across browser sessions.

  2. B

    Data that is stored in a server-side database.

  3. C

    Temporary data that is not preserved across re-renders.

  4. D

    Data that is cached in the client's browser.

Show answer

Correct answer

  • C

    Temporary data that is not preserved across re-renders.

Question 3 on its own page

Question 4

+2 marksOne correct option

What is the difference between v-bind and v-model directives in Vue.js?

  1. A

    “v-bind” is used for one-way data binding, while “v-model” is used for two-way data binding.

  2. B

    “v-bind” is used for two-way data binding, while “v-model” is used for one-way data binding.

  3. C

    Both “v-bind” and “v-model” are used for one-way data binding.

  4. D

    Both “v-bind” and “v-model” are used for two-way data binding.

Show answer

Correct answer

  • A

    “v-bind” is used for one-way data binding, while “v-model” is used for two-way data binding.

Question 4 on its own page

Question 5

+3 marksOne correct option
  1. A
  2. B
  3. C
  4. D
Show answer

Correct answer

  • C
Question 5 on its own page

Question 6

+3 marksOne correct option

Consider the below JavaScript program.

javascript
const a = 15;


const obj1 = {
    a: 20,
    b: function () {
        console.log(this.a);
        this.b();
    }
}


const obj2 = {
    a: 10,
    b: () => {
        console.log(this.a);
    }
}


obj1.b.apply(obj2);

What will be the output of the above program, if executed?

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

Correct answer

  • D
Question 6 on its own page

Question 7

+3 marksOne correct option

Consider the below JavaScript program.

javascript
let users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 22 },
  { name: "Charlie", age: 30 },
];
users.sort((a, b) => a.age - b.age);
console.log(users.map((user) => user.name).join(", "));

What will be the output when the code is executed?

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

Correct answer

  • B
Question 7 on its own page

Question 8

+3 marksOne correct option
  1. A
  2. B
  3. C
  4. D
  5. E
  6. F
Show answer

Correct answer

  • D
Question 8 on its own page

Question 9

+3 marksOne correct option

What is state management in the context of a web application?

  1. A

    Organizing and storing data on the server-side database.

  2. B

    Handling and updating the state of client-side components and data.

  3. C

    Managing user session data using browser cookies.

  4. D

    Coordinating the state of HTTP requests and responses between client and server.

Show answer

Correct answer

  • B

    Handling and updating the state of client-side components and data.

Question 9 on its own page

Question 10

+3 marksOne correct option

Consider the following JavaScript program.

javascript
const obj1={
    age: 29,
    toy: 'kite'
}


const obj2={
    __proto__: obj1,
    animal: 'dogs',
    members: 45
}


console.log(obj1.toy)
console.log(obj1.animal)
console.log(obj2.age)
console.log(obj2.members)
console.log(Object.keys(obj2))

What will be the output of the above program, if executed?

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

Correct answer

  • D
Question 10 on its own page

Question 11

+3 marksOne correct option

Consider the following html.

html
<div id="app">
    <p>{{ message }}</p>
    <button @click="updateMessage">Click me</button>
</div>


<script>
new Vue({
    el: '#app',
    data: {
        message: 'Hello!'
    },
    methods: {
        updateMessage() {
            this.message += '!';
        }
    }
});
</script>

Assuming vue cdn has been added to the html and the html format is correct. What would be the output on the screen after clicking the button twice?

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

Correct answer

  • D
Question 11 on its own page

Question 12

+3 marksOne or more correct options

Which of the following is/are correct definition(s) of an arrow function that accepts a number and returns its square?

Select all that apply.

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

Correct answers

  • C
  • D
Question 12 on its own page

Question 13

+4.5 marksOne correct option

Consider the following JavaScript code embedded in the body of the HTML document given below.

html
<html>
<body>
    <div id="mybox">Test JS</div>
    <script>
        let count = 0;
        let change = setInterval(()=>{
            let box = document.getElementById('mybox');
            if(count % 2 == 1){
                box.style.backgroundColor = 'red';
                count++;
            }
            else if(count % 3 == 1){
                box.style.backgroundColor = 'green';
                count++
            }
            else{
                box.style.backgroundColor = 'yellow';
                count++
            }
        }, 1000)
    </script>
</body>
</html>

If the document is rendered on the browser, what will be the sequence of background colors taken by the element with id="mybox" in the first 6 seconds of execution?

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

Correct answer

  • D
Question 13 on its own page

Question 14

+4.5 marksOne correct option

Consider the below JavaScript program.

javascript
class Region{
    constructor(region){
        this.region = region;
    }
    get describe(){
        return `${this.region} is one of the major geographical regions.`
    }
}


class Country extends Region {
    constructor(region, country, nation){
        super(region)
        this.country = country;
        this.nation = nation;
    }


    get describe(){
        return `${this.country} is a ${this.nation} nation in the region of
${this.region}.`
    }
}


let Australia = new Region('Australia and NZ', 'Australia', 'developed')
let Germany = new Country('Europe', 'Germany', 'developed')
console.log(Australia.describe)
console.log(Germany.describe)

What will be the output of the above program, if executed?

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

Correct answer

  • D
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.

File: index.html

html
<div id = "app">
    <div>Welcome to Frontend Development</div>
    <new>Vue is a Frontend Framework</new>
</div>
<script src="script.js"></script>

File: script.js

javascript
Vue.component('new', {
    template : `<div>
                    <slot>Vue is JS Framework</slot>
                    <div>Learn Vue 2 and Vue 3</div>
                </div>
              `


});


new Vue({
     el : "#app",
})

What will be rendered on the browser screen?

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

Correct answer

  • C
Question 15 on its own page

Question 16

+4.5 marksOne correct option

Consider the following html.

html
<div id="app">
    <parent-component :title="parentTitle">
        <template slot="header">
            <h2>{{ headerTitle }}</h2>
        </template>
    </parent-component>
</div>


<script>
Vue.component('parent-component', {
    props: ['title'],
    template: `
    <div>
        <h1>{{ title }}</h1>
        <slot name="header"></slot>
        <p>Main Content</p>
    </div>
    `
});


new Vue({
    el: '#app',
    data: {
        parentTitle: 'Parent Component Title',
        headerTitle: 'Header Content'
    }
});
</script>

Assuming Vue CDN has been added to the HTML and the HTML format is correct. What would be the output on the screen?

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

Correct answer

  • B
Question 16 on its own page