uiz Space

May 2024 term · Modern Application Development II · BSCS2006

Modern Application Development II Quiz 2: 4 August 2024 (May 2024 term)

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

Updated

Official paper: IIT M DIPLOMA AN EXAM QDD2 4 Aug 2024 · No negative marking.

Question 1

+2 marksOne correct option

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?

  1. A

    Hello 1

  2. B

    Hello 1
    Hello 2

  3. C

    Hello 2

  4. D

    The program will result in an infinite loop

Show answer

Correct answer

  • C

    Hello 2

Question 1 on its own page

Question 2

+2 marksOne correct option

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?

  1. A

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

  2. B

    This is footer content
    This is some content

  3. C

    This is some content

  4. D

    This is some content
    This is header content

  5. E

    This is some content
    This is footer content

Show answer

Correct answer

  • E

    This is some content
    This is footer content

Question 2 on its own page

Question 3

+3 marksOne correct option

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?

  1. A

    This is header
    404 Page not found

  2. B

    404 Page not found
    This is header

  3. C

    Welcome to profile page
    This is header

  4. D

    This is header
    Welcome to profile page

Show answer

Correct answer

  • A

    This is header
    404 Page not found

Question 3 on its own page

Question 4

+3 marksOne correct option

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?

  1. A

    Checkpoint 4 5
    Checkpoint 5 20
    Checkpoint 1 undefined
    Checkpoint 6 40

  2. B

    Checkpoint 4 5
    Checkpoint 3 20
    Checkpoint 1 undefined
    Checkpoint 6 NaN

  3. C

    Checkpoint 5 undefined
    Checkpoint 1 undefined
    Checkpoint 6 NaN

  4. D

    Checkpoint 5 undefined
    Checkpoint 1 16
    Checkpoint 6 80

  5. E

    Checkpoint 5 undefined
    Checkpoint 1 undefined
    Checkpoint 6 16

Show answer

Correct answer

  • C

    Checkpoint 5 undefined
    Checkpoint 1 undefined
    Checkpoint 6 NaN

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

  1. A

    Bravo1, 70

  2. B

    Bravo2, 90

  3. C

    Bravo1, 60

  4. D

    Bravo2, 70

  5. E

    Bravo1, 80

Show answer

Correct answer

  • B

    Bravo2, 90

Question 5 on its own page

Question 6

+3 marksOne correct option

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");
  1. A

    Statement 3
    Statement 1
    Statement 2 gives result as 4

  2. B

    Statement 3
    Statement 1
    Statement 2 gives result as 2

  3. C

    Statement 3
    Statement 1
    Statement 2 gives result as 0

  4. D

    Statement 1
    Statement 3
    Statement 2 gives result as 4

  5. E

    Statement 1
    Statement 3
    Statement 2 gives result as 2

Show answer

Correct answer

  • B

    Statement 3
    Statement 1
    Statement 2 gives result as 2

Question 6 on its own page

Question 7

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

  1. A

    Status: Creating, Created, Mounting, Mounted
    ETA: 6

  2. B

    Status: Created, Mounting, Mounted
    ETA: 7

  3. C

    Status: Mounting, Mounted
    ETA: 8

  4. D

    Status: Mounted
    ETA: 9

Show answer

Correct answer

  • B

    Status: Created, Mounting, Mounted
    ETA: 7

Question 7 on its own page

Question 8

+3 marksOne correct option

Consider the following JavaScript code.

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);

What will be the output of the above code snippet on the console of the browser?

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

Correct answer

  • C
Question 8 on its own page

Question 9

+3 marksOne correct option

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?

  1. A

    Counter changed from 0 to 2, Counter changed from 2 to 4, Counter changed from 4 to 6, …

  2. B

    Counter changed from 0 to 1, Counter changed from 1 to 2, Counter changed from 2 to 3, ...

  3. C

    Counter changed from 1 to 3, Counter changed from 3 to 6, Counter changed from 6 to 12, ...

  4. D

    error message

Show answer

Correct answer

  • B

    Counter changed from 0 to 1, Counter changed from 1 to 2, Counter changed from 2 to 3, ...

Question 9 on its own page

Question 10

+3 marksOne correct option

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
        }
    }
})
  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

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

  • B

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

  • C

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

Question 11 on its own page

Question 12

+2 marksOne or more correct options

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

Select all that apply.

  1. A

    A Vuex store provides a single source of truth that can drive the application.

  2. B

    It provides a variable named “this.$vuexstore” to allow components to access the store data.

  3. C

    A component cannot have its own local state, if the application uses Vuex.

  4. D

    The mutations and actions are some constructs of a Vuex store.

Show answer

Correct answers

  • B

    It provides a variable named “this.$vuexstore” to allow components to access the store data.

  • C

    A component cannot have its own local state, if the application uses Vuex.

Question 12 on its own page

Question 13

+4.5 marksOne correct option

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

html
<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?

  1. A

    'beforeUpdate called'

  2. B

    Nothing will be logged on the console

  3. C

    An error will be thrown

  4. D

    'beforeUpdate called' will be logged, followed by 'count updated'

Show answer

Correct answer

  • B

    Nothing will be logged on the console

Question 13 on its own page

Question 14

+4.5 marksOne correct option

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.

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

Correct answer

  • C
Question 14 on its own page

Question 15

+4.5 marksOne correct option

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?

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

Correct answer

  • C
Question 15 on its own page

Question 16

+4.5 marksOne or more correct options

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

html
<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?

Select all that apply.

  1. A

    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"

  2. B

    It dynamically updates the heading title based on the route and conditionally shows navigation links to "Login" and "Register"

  3. C

    It has a bug and will throw a runtime error.

  4. D

    The heading title is populated with the value “Login or Signup” when the user opens the app for the first time.

Show answer

Correct answers

  • B

    It dynamically updates the heading title based on the route and conditionally shows navigation links to "Login" and "Register"

  • D

    The heading title is populated with the value “Login or Signup” when the user opens the app for the first time.

Question 16 on its own page