Home / Past papers / MAD2 Quiz 2 / this paper

2024 Aug04: IIT M AN EXAM QDF2 - 04 Aug 2024

MAD2 Quiz 216 questions50 marks13 MCQ · 3 MSQafternoon / QDF2

Elapsed 00:00

Q1MCQ2 marks

Text of the picture (copyable)

Consider the below JavaScript program.

```javascript
const first = "Hello 3";

const obj1 = {
    first: "Hello 1",
    secondFunc: function () {
        console.log(this.first);
    }
}

const obj2 = {
    first: "Hello 2",
    secondFunc: function () {
        console.log(this.first);
        this.secondFunc();
    }
}

obj1.secondFunc.apply(obj2, [2, 5, 9]);
```

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

Hello 1
Hello 1Hello 2
Hello 2
The program will result in an infinite loop

Q2MCQ2 marks

Text of the picture (copyable)

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

index.html:

```html
<div id = "app">
    <my-comp>

        <template #header>
            This is header content
        </template>

        <template #footer>
            This is footer content
        </template>

        <p> This is some content </p>
    </my-comp>
</div>
<script src = "app.js"> </script>
```

app.js:

```javascript
Vue.component("myComp", {
    template : `<div>
        <p>
            <slot></slot>
        </p>
        <p>
            <slot name="footer"></slot>
        </p>
    </div>`,
})

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

Suppose you open the "index.html" file in a browser. What will be rendered by the browser?

This is header contentThis is footer contentThis is some content
This is footer contentThis is some content
This is some content
This is some contentThis is header content
This is some contentThis is footer content

Q3MCQ3 marks

Text of the picture (copyable)

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

index.html:

```html
<body>
  <div id="app">
    <router-view></router-view>
  </div>
</body>
```

app.js:

```javascript
const Header = {
  template: `<div>This is header <router-view /> </div>`,
};
const Error = {
  template: `<div> 404 Page not found</div>`,
};
const Profile = {
  template: `<div> Welcome to profile page</div>`,
};
const routes = [
  {
    path: '/',
    component: Header,
    children: [
      { path: 'profile', component: Profile },
      { path: '*', component: Error },
    ],
  },
];
const router = new VueRouter({
  routes,
});
new Vue({
  el: '#app',
  router,
});
```

Suppose the application is running on http://127.0.0.1:8080. What will be rendered in the browser?

This is header404 Page not found
404 Page not foundThis is header
Welcome to profile pageThis is header
This is headerWelcome to profile page

Q4MCQ3 marks

Text of the picture (copyable)

Consider the below JavaScript program.

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

What will be the output of the above program?

Checkpoint 4 5Checkpoint 5 20 Checkpoint 1 undefined Checkpoint 6 40
Checkpoint 4 5Checkpoint 3 20 Checkpoint 1 undefined Checkpoint 6 NaN
Checkpoint 5 undefinedCheckpoint 1 undefined Checkpoint 6 NaN
Checkpoint 5 undefinedCheckpoint 1 16 Checkpoint 6 80
Checkpoint 5 undefinedCheckpoint 1 undefined Checkpoint 6 16

Q5MCQ3 marks

Text of the picture (copyable)

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

index.html:

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

app.js:

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

    mounted() {
        this.phrase = "Bravo";
        this.marks = 50;

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

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

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

Tip: The "oninput" event occurs immediately after the value of an element has changed.

Bravo1, 70
Bravo2, 90
Bravo1, 60
Bravo2, 70
Bravo1, 80

Q6MCQ3 marks

Text of the picture (copyable)

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

```javascript
async function exam () {
    let x = await new Promise((res, rej) => res(2 || 0));
    console.log("Statement 1");
    let y = await new Promise((res, rej) => res(0 && 2));
    console.log("Statement 2", "gives result as", x + y);
}

exam();
console.log("Statement 3");
```

Statement 3Statement 1 Statement 2 gives result as 4
Statement 3Statement 1 Statement 2 gives result as 2
Statement 3Statement 1 Statement 2 gives result as 0
Statement 1Statement 3 Statement 2 gives result as 4
Statement 1Statement 3 Statement 2 gives result as 2

Q7MCQ3 marks

Text of the picture (copyable)

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

File: index.html

```html
<div id="app"></div>
<script src="script.js"></script>
```

File: script.js

```javascript
new Vue({
  el: '#app',
  template: `<div>
    Status: {{message}}<br>
    ETA: {{ETA}}
  </div>`,
  data: {
    message: "",
    ETA: 10,
  },
  beforeCreate() {
    this.message += "Creating,"
    this.ETA -= 1
  },
  created() {
    this.message += "Created,"
    this.ETA -= 1
  },
  beforeMount() {
    this.message += "Mounting,"
    this.ETA -= 1
  },
  mounted() {
    this.message += "Mounted"
    this.ETA -= 1
  }
})
```

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

Status: Creating, Created, Mounting, MountedETA: 6
Status: Created, Mounting, MountedETA: 7
Status: Mounting, MountedETA: 8
Status: MountedETA: 9

Q8MCQ3 marks

Consider the following JavaScript code. question figure

Consider the following JavaScript code. What will be the output of the above code snippet on the console of the browser?

Text of the picture (copyable)

```javascript
const library = {
  name: "Central Library",
  books: [
    { title: "Book A", author: "Author A" },
    { title: "Book B", author: "Author B" },
    { title: "Book C", author: "Author C" },
  ],
  location: "IIT Madras",
};

let propertyList = "";
let bookDetails = "";

for (let key in library) {
  if (key === "books") {
    for (let book of library[key]) {
      bookDetails += `${book.title} by ${book.author}, `;
    }
  } else {
    propertyList += key + " ";
  }
}

console.log(propertyList);
console.log(bookDetails);
```

text

```
name books location
Book A by Author A, Book B by Author B, Book C by Author C,
```

text

```
Central Library IIT Madras
Book A by Author A, Book B by Author B, Book C by Author C,
```

text

```
name location
Book A by Author A, Book B by Author B, Book C by Author C,
```

text

Central IIT
Book A by Author A, Book B by Author B, Book C by Author C,

Q9MCQ3 marks

Text of the picture (copyable)

Consider the following HTML snippet that uses Vue 2 using CDN in the script.js
file

Filename: index.html
```html
<div id="app">
  <p>Counter: {{ counter }}</p>
  <p>Computed Value: {{ computedValue }}</p>
</div>
```

Filename: script.js
```javascript
new Vue({
  el: "#app",
  data: {
    counter: 0,
  },
  computed: {
    computedValue() {
      return this.counter * 2;
    },
  },
  watch: {
    counter(newVal, oldVal) {
      console.log(`Counter changed from ${oldVal} to ${newVal}`);
    },
  },
  mounted() {
    setInterval(() => {
      this.counter++;
    }, 1000);
  },
});
```

What will be displayed in the console?

Counter changed from 0 to 2, Counter changed from 2 to 4, Counter changedfrom 4 to 6, …
Counter changed from 0 to 1, Counter changed from 1 to 2, Counter changedfrom 2 to 3, ...
Counter changed from 1 to 3, Counter changed from 3 to 6, Counter changedfrom 6 to 12, ...
error message

Q10MCQ3 marks

Text of the picture (copyable)

Suppose you are organizing a felicitation program for the students with exemplary performance in the BS program. You have the scorecard of all the students. The administration has decided to shortlist the students based on the following 2 criteria:
1. The student must have an "S" in their MAD II project
2. The overall CGPA of the student must be greater than 8

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

```javascript
const store = new Vuex.Store({
  state: {
    bs_program: [{
      student_id: 'stu1001',
      mad2_grade: 'S',
      cgpa: 8.35
    }, {
      student_id: 'stu1002',
      mad2_grade: 'A',
      cgpa: 8.78
    }, {
      student_id: 'stu1003',
      mad2_grade: 'S',
      cgpa: 9.1
    }, {
      student_id: 'stu1004',
      mad2_grade: 'S',
      cgpa: 7.44
    }, ],
    awardees: []
  },

  mutations: {
    update_final(state, payload) {

      for (student of state.bs_program)
        code2
    }
  },
  actions: {
    send_task: function(context) {
      const token = get_token(); // generates a random token
      code1
    }
  }
})
```

text

```javascript
code1: this.$store.commit("update_final", {"min" : 8, "token" : token});
code2: if (student.mad2_grade != "S" && student.cgpa > 8) {
    const obj = {};
    obj.student_id = student.student_id;
    obj.token = payload.token
    state.awardees.push(student)
}
```

text

```
code1: context.commit("update_final", 8, token);
code2: if (mad2_grade != "S" && cgpa > 8){
    awardees.push(company)
}
```

text

```javascript
code1: this.$store.commit("update_final", 8, token);
code2: if (mad2_grade != "S" && cgpa > 8){
    awardees.push(company)
}
```

text

```
code1: context.commit("update_final", {"min" : 8, "token" : token});
code2: if (student.mad2_grade != "S" && student.cgpa > 8) {
    const obj = {};
    obj.student_id = student.student_id;
    obj.token = payload.token
    state.awardees.push(student)
}
```

Q11MSQ2 marksselect all that apply

Text of the picture (copyable)

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

```html
<div v-bind:class="[isclassA ? classA : '', classB]"></div>
```

The classes, namely “classA” and “classB” will always be applied to the divelement.
The class, namely “classB” will always be applied to the div element.
The class, namely “classA” will only be applied to the div element, if thevariable “isClassA” evaluates to true.
The class, namely “classB” will only be applied to the div element, if no variablewith name “isClassA” exists.

Q12MSQ2 marksselect all that apply

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

A Vuex store provides a single source of truth that can drive the application.
It provides a variable named “this.$vuexstore” to allow components to accessthe store data.
A component cannot have its own local state, if the application uses Vuex.
The mutations and actions are some constructs of a Vuex store.

Q13MCQ4.5 marks

Text of the picture (copyable)

Consider the following HTML, with Vue 2 CDN attached to it.

Filename: index.html

```html
<div id="app">
  <p>{{ message }}</p>
  <button @click="changeMessage">Change Message</button>
  <button @click="changeCount">Change Count</button>
</div>
```

Filename: script.js

```javascript
<script>
  new Vue({
    el: "#app",
    data: {
      message: "Hello, Vue!",
      count: 0,
    },
    methods: {
      changeMessage() {
        this.message = "Hello, Vue.js!";
      },
      changeCount() {
        this.count++;
      },
    },
    beforeUpdate() {
      console.log("beforeUpdate called");
    },
  });
</script>
```

What will be logged to the console when the Change Count button is clicked?

'beforeUpdate called'
Nothing will be logged on the console
An error will be thrown
'beforeUpdate called' will be logged, followed by 'count updated'

Q14MCQ4.5 marks

Text of the picture (copyable)

Analyze the given HTML with embedded script.

```html
<body>
    <div id="status"></div>
    <div id="result"></div>
    <script>
        function updateStatus(message) {
            document.getElementById("status").textContent = message;
        }

        function updateResult(message) {
            document.getElementById("result").textContent = message;
        }

        let promise1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve("Data Loaded");
            }, 1000);
        });

        let promise2 = Promise.reject("Network Error");

        promise1
            .then((result) => {
                updateStatus(result);
            })
            .catch((error) => {
                updateResult(error);
            });

        promise2
            .catch((error) => {
                updateStatus(error);
                return Promise.resolve("Retry Successful");
            })
            .then((result) => {
                updateResult(result);
            });
    </script>
</body>
```

What will be the final state of HTML elements, after all the `setTimeout()` have finished executing.

text

#status will be "Data Loaded", and #result will be "Data Save Failed".

text

```
#status will be "Network Error", and #result will be "Retry Successful".
```

text

```
#status will be "Data Loaded", and #result will be "Retry Successful".
```

text

```
#status will be "Network Error", and #result will be "Data Save Failed".
```

Q15MCQ4.5 marks

Text of the picture (copyable)

Consider the following HTML document embedded with Vue CDN and the script file shown below.

Filename: index.html
```html
<div id="app">
  <main-comp>
    <nest-comp></nest-comp>
  </main-comp>
</div>
```

Filename: script.js
```javascript
let main_comp = {
  template: `<div style="border: 1px solid black; padding: 5px">This is main Component</div>`
}

let nest_comp = {
  template: `<div style="border: 1px solid black; padding: 5px">This is nested Component</div>`
}

const app = new Vue({
  components: {
    "main-comp": main_comp,
    "nest-comp": nest_comp,
  }
}).$mount('#app')
```

What will be rendered on the browser?

text

This is a UI screenshot.
It shows two text labels, one nested inside another.
The outer label says: "This is nested Component"
The inner label says: "This is main Component"

text

This is main Component
This is nested Component

text
```
This is main Component
```
text
```
This is nested Component
```

Q16MSQ4.5 marksselect all that apply

Text of the picture (copyable)

Consider the below Vue component template and script definitions that use Vue router.

Vue component template

```html
<template>
  <div>
    <h1>{{ pageAction }}</h1>
    <router-link to="/login" v-if="showLogin">Login</router-link>
    <router-link to="/register" v-if="showRegister">Register</router-link>
    <router-view></router-view>
  </div>
</template>
```

Filename: script.js

```javascript
<script>
  export default {
    name: 'App',
    data() {
      return {
        pageAction: 'Login or Signup',
        showLogin: true,
        showRegister: false,
      };
    },
    watch: {
      '$route.path'() {
        if (this.$route.path === '/login') {
          this.showRegister = true;
          this.showLogin = false;
          this.pageAction = 'Login Page';
        } else if (this.$route.path === '/register') {
          this.showRegister = false;
          this.showLogin = true;
          this.pageAction = 'Register Page';
        } else {
          this.pageAction = 'Login or Signup';
        }
      },
    },
  };
</script>
```

Assuming that the corresponding routes are properly configured, what does this component structure accomplish?

As soon as the app is run by a client, it displays a web page with a heading title"Login or Signup" and two navigation links to "Login" and "Register"
It dynamically updates the heading title based on the route and conditionallyshows navigation links to "Login" and "Register"
It has a bug and will throw a runtime error.
The heading title is populated with the value “Login or Signup” when the useropens the app for the first time.

Answer key

Q1 (MCQ, 2 marks): C
Q2 (MCQ, 2 marks): E
Q3 (MCQ, 3 marks): A
Q4 (MCQ, 3 marks): C
Q5 (MCQ, 3 marks): B
Q6 (MCQ, 3 marks): B
Q7 (MCQ, 3 marks): B
Q8 (MCQ, 3 marks): C
Q9 (MCQ, 3 marks): B
Q10 (MCQ, 3 marks): D
Q11 (MSQ, 2 marks): B, C
Q12 (MSQ, 2 marks): B, C
Q13 (MCQ, 4.5 marks): B
Q14 (MCQ, 4.5 marks): C
Q15 (MCQ, 4.5 marks): C
Q16 (MSQ, 4.5 marks): B, D