Quiz Space

May 2023 term · Modern Application Development II · BSCS2006

MAD 2 End Term: 3 September 2023, Set QPF1-S1 (May 2023 term)

The IIT Madras BS Modern Application Development II (MAD 2) End Term paper sat on 3 Sept 2023, in the May 2023 term, set QPF1-S1: 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
19
MSQ
13

Updated

Official paper: IIT M FOUNDATION ET1 EXAM QPF1 S1 03 Sep · No negative marking.

Question 1

+3 marksOne correct option

Consider the below HTML document.

index.html:

html
<table id ="table_id">
<tr>
<th>Name</th>
<th>Standard</th>
</tr>
<tr>
<td id = "cell_id_1">Abhishek</td>
<td id = "cell_id_2">10th</td>
</tr>
<tr>
<td id = "cell_id_3">Narendra</td>
<td id = "cell_id_4">11th</td>
</tr>
</table>
<script>
document.getElementById("table_id").addEventListener("click", () =>
console.log("Table Clicked !!"), true);
document.getElementById("cell_id_1").addEventListener("click", () =>
console.log("Cell Clicked !!"), true);
</script>

Suppose you open the “index.html” file in a browser, and click on the table cell with the text “Abhishek”. Which of the following shows the correct sequence of output?

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

Correct answer

  • B

Question 2

+3 marksOne correct option

Consider the below HTML document.

index.html:

html
<table id ="table_id">
<tr>
<th>Name</th>
<th>Standard</th>
</tr>
<tr>
<td id = "cell_id_1">Abhishek</td>
<td id = "cell_id_2">10th</td>
</tr>
<tr>
<td id = "cell_id_3">Narendra</td>
<td id = "cell_id_4">11th</td>
</tr>
</table>
<script>
document.getElementById("table_id").addEventListener("click", () =>
console.log("Table Clicked !!"));
document.getElementById("cell_id_1").addEventListener("click", () =>
console.log("Cell Clicked !!"));
</script>

Suppose you open the “index.html” file in a browser, and click on the table cell with the text “Abhishek”. Which of the following shows the correct sequence of output?

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

Correct answer

  • A

Question 3

+3 marksOne correct option

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

javascript
var first = 1;
obj1 = {
'first' : 2,
'second' : function some () {
console.log(this.first);
}
}
obj2 = {
'first' : 3,
'second' : function some () {
console.log("Function Invoked !!");
this.second();
}
}
obj2.second.call(obj1);
  1. A
  2. B
  3. C
  4. D
Show answer

Correct answer

  • B

Question 4

+3 marksOne correct option

Match the Vue directives / constructs with their function.

  1. A

    1-A, 2-B, 3-C, 4-D

  2. B

    1-C, 2-B, 3-D, 4-A

  3. C

    1-C, 2-D, 3-A, 4-B

  4. D

    1-C, 2-B, 3-A, 4-D

Show answer

Correct answer

  • D

    1-C, 2-B, 3-A, 4-D

Question 5

+3 marksOne correct option

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

index.html:

html
<div id = "app">
<router-view></router-view>
</div>
<script src = "app.js"> </script>

app.js:

javascript
const First = Vue.component("first", {
template: `<div>Hello First Component !!</div>`
})
const Second = Vue.component("second", {
template: `<div>Hello Second Component !!</div>`
})
const router = new VueRouter({
base: '/myapp/',
routes: [
{
path: "/endpoint1",
component: First,
},
{
path: "/endpoint2",
component: Second,
},
]
});
const app = new Vue({
el: '#app',
router,
data: {},
methods: {}
});

Suppose the application is deployed under a subdirectory named “/myapp/” of a domain named “https://appdev2-may2023.com”, and you want to navigate to a page that renders “Hello Second Component !!”. What should be the correct URL to get the desired output?

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

Correct answer

  • C

Question 6

+3 marksOne correct option

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

index.html:

html
<div id = "app">
<router-link to="/endpoint1">Home</router-link>
<router-view></router-view>
</div>
<script src = "app.js"> </script>

app.js:

javascript
const First = Vue.component("first", {
template: `<div>Hello First Component !!</div>`,
mounted() {
this.$router.push("/endpoint2");
}
})
const Second = Vue.component("second", {
template: `<div>Hello Second Component !!</div>`
})
const router = new VueRouter({
routes: [
{
path: "/endpoint1",
component: First,
},
{
path: "/endpoint2",
component: Second,
},
]
});
const app = new Vue({
el: '#app',
router,
data: {},
methods: {}
});

Suppose you open the “index.html” file in a browser, and click on the link with the text “Home”. What will be rendered by the browser except the router links in the navigation menu?

  1. A

    Hello First Component !!

  2. B

    Hello Second Component !!

  3. C

    404

  4. D

    Blank Page

Show answer

Correct answer

  • B

    Hello Second Component !!

Question 7

+3 marksOne correct option

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

javascript
new Promise((reject, resolve) => {
if ("iitmiitm".split("iitm").length == 3)
resolve("Promise is rejected")
else
reject("Promise is resolved")
}).then(data => console.log("Promise Rejected :", data),
data => console.log("Promise Resolved :", data)
).then(data => {
console.log("Value received from previous block :", data)
return 34
}).catch(error => console.log("Error caused :", error)).finally(data => {
console.log("In Finally Block :", data)
return 39
}).then(data => console.log("Value received from previous block :", data))
  1. A
  2. B
  3. C
  4. D
Show answer

Correct answer

  • C

Question 8

+3 marksOne correct option

Consider the following flask application.

app.py:

python
from flask import Flask
from flask_caching import Cache
import time
config = {
"DEBUG": True,
"CACHE_TYPE": "RedisCache",
"CACHE_REDIS_URL": "redis://localhost:6379/1",
"CACHE_DEFAULT_TIMEOUT": 300
}
app = Flask(__name__)
app.config.from_mapping(config)
cache = Cache(app)
@app.get('/name/<name>')
@cache.cached(timeout=100)
def get_name(name):
time.sleep(30)
return name
if __name__ == '__main__':
app.run()

Suppose the application is running on “http://localhost:5000”. If the client makes two requests (one after another) to URL “http://localhost:5000/name/mohan” within 50 seconds. What will be the approximate absolute difference between their latencies?

  1. A

    30 Seconds

  2. B

    40 Seconds

  3. C

    0 Seconds

  4. D

    None of these

Show answer

Correct answer

  • A

    30 Seconds

Question 9

+3 marksOne correct option

What will be the output of the following javascript code.

javascript
function promoter(cgpa) {
return new Promise((res, rej) => {
if (cgpa > 9.0) {
res()
} else {
rej()
}
})
}
promoter(8)
.then(
() => {
console.log('Promoted')
},
() => {
console.log('Not Promoted')
}
)
.finally(() => {
console.log('Job Done')
})
  1. A
  2. B
  3. C
  4. D
Show answer

Correct answer

  • C

Question 10

+3 marksOne correct option

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

index.html:

html
<div id="app"></div>

app.js:

javascript
new Vue({
el: '#app',
template: `<div>{{message}}</div>`,
data: {
message: null,
},
created() {
this.message = 'Hello from created'
},
mounted() {
this.message = 'Hello from mounted'
},
})

Suppose the application is running on “http://localhost:8080”. What will be rendered by the browse in the div of the template?

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

Correct answer

  • B

Question 11

+3 marksOne correct option

Consider the Vue application

javascript
const Home = {
template: `<div> This is home <router-view /></div>`,
}
const NotFound = {
template: `<div>Not Found</div>`,
}
const Students = {
template: `<ul><li v-for='student in students'>{{student.name}}</li></ul>`,
data() {
return {
students: [
{ id: 1, name: 'std1', course: 'mad1' },
{ id: 2, name: 'std2', course: 'mad2' },
{ id: 3, name: 'std3', course: 'mad1' },
],
}
},
}
const Student = {
template: `<div>Name: {{student.name}}, Course: {{student.course}}</div>`,
props: ['id'],
computed: {
student() {
return Students.data().students.find((std) => {
return std.id == (this.id % 3) + 1
})
},
},
}
const router = new VueRouter({
routes: [
{
path: '/',
component: Home,
children: [
{ path: '', component: Students },
{ path: 'student/:id', component: Student, props: true },
{ path: '*', component: NotFound },
],
},
],
})
new Vue({
el: '#app',
template: `<div><router-view /></div>`,
router,
})
  1. A

    Name: std1, Course: mad1

  2. B

    Name: std2, Course: mad2

  3. C

    Name: std3, Course: mad1

  4. D

    Not Found

Show answer

Correct answer

  • D

    Not Found

Question 12

+2 marksOne or more correct options

Which of the following is/are example(s) of ephemeral state?

Select all that apply.

  1. A

    Currently selected tab/page in a multi page/tab document

  2. B

    User Preferences

  3. C

    Loading Icons

  4. D

    Shopping Cart

Show answer

Correct answers

  • A

    Currently selected tab/page in a multi page/tab document

  • C

    Loading Icons

Question 13

+2 marksOne or more correct options

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

Select all that apply.

  1. A

    As an application developer, it is not possible to hide javascript from the user.

  2. B

    “Denial of Service” is an attack that injects malicious client side scripts.

  3. C

    CORS is a mechanism used to control and manage cross-origin requests in a web application

  4. D

    The terms “privacy” and “security” are the same when it comes to web applications.

Show answer

Correct answers

  • B

    “Denial of Service” is an attack that injects malicious client side scripts.

  • D

    The terms “privacy” and “security” are the same when it comes to web applications.

Question 14

+2 marksOne or more correct options

Which of the following statement(s) is/are correct regarding the execution context in JavaScript?

Select all that apply.

  1. A

    Global execution context is created when the script starts to run.

  2. B

    Function execution context is created when the script starts to run.

  3. C

    A function execution context is created when the function is called.

  4. D

    All of these.

Show answer

Correct answers

  • A

    Global execution context is created when the script starts to run.

  • C

    A function execution context is created when the function is called.

Question 15

+2 marksOne or more correct options

Which of the following statements is/are correct regarding the prototype in javascript?

Select all that apply.

  1. A

    Every object in JavaScript has a prototype.

  2. B

    Prototype of an object can be null.

  3. C

    Prototype of an object cannot be null.

  4. D

    None of these.

Show answer

Correct answers

  • A

    Every object in JavaScript has a prototype.

  • B

    Prototype of an object can be null.

Question 16

+2 marksOne or more correct options

Which of the following statements is/are correct?

Select all that apply.

  1. A

    Memoization term is used for a special kind of caching where the return value of a function is cached based on its parameters value.

  2. B

    Redis database can be used to cache data.

  3. C

    Caching can only be done at the browser level.

  4. D

    All of these

Show answer

Correct answers

  • A

    Memoization term is used for a special kind of caching where the return value of a function is cached based on its parameters value.

  • B

    Redis database can be used to cache data.

Question 17

+2 marksOne or more correct options

Which of the following statements is/are true regarding the celery in python?

Select all that apply.

  1. A

    Celery is a task queue.

  2. B

    Celery typically runs the tasks asynchronously.

  3. C

    Celery typically runs the tasks synchronously.

  4. D

    None of these.

Show answer

Correct answers

  • A

    Celery is a task queue.

  • B

    Celery typically runs the tasks asynchronously.

Question 18

+2 marksOne correct option

Which of the following statements are true regarding async and await?

  1. A

    The “await” can only be used inside an async function, except browser console.

  2. B

    The “await” keyword is typically used to wait for a promise and get its fulfilment value.

  3. C

    The “await” keyword pauses the execution of code of the async function till the promise is in pending state, and executes the code outside the function, in the meantime.

  4. D

    All of these

Show answer

Correct answer

  • D

    All of these

Question 19

+2 marksOne correct option

Which of the following statements is true regarding HTTP and fetch API?

  1. A

    A fetch call is capable of sending image data.

  2. B

    The “Accept” HTTP header is used by HTTP clients to tell the server which type of content they expect/prefer as response.

  3. C

    A fetch call allows a developer to add custom headers in the request.

  4. D

    All of these

Show answer

Correct answer

  • D

    All of these

Question 20

+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 = "name" @input = "do_something">
<p> {{age}} </p>
</div>
<script scr = "app.js"></script>

app.js:

javascript
new Vue({
el: "#app",
data: {
name: "",
age: 0,
},
mounted() {
try {
localStorage.setItem("age", localStorage.getItem("age") +
localStorage.getItem("age"))
this.name += localStorage.getItem("age")
this.name, this.age = localStorage.getItem("name").split(" ");
}
catch {
this.name = "Default";
this.age = "Default";
}
},
methods: {
do_something() {
localStorage.setItem("name", this.name);
localStorage.setItem("age", this.age);
}
}
})

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

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

Correct answer

  • C

Question 21

+4.5 marksOne correct option

Consider the below flask app, and an HTML file named “index.html”.

app.py:

python
from flask import Flask
import time
app = Flask(__name__)
@app.route("/endpoint1")
def method1():
time.sleep(20)
return "Endpoint 1 Accessed", 200, {'Access-Control-Allow-Origin' :
'*'}
@app.route("/endpoint2")
def method2():
time.sleep(30)
return "Endpoint 2 Accessed", 200, {'Access-Control-Allow-Origin' :
'*'}
if __name__ == "__main__":
app.run(threaded = False)

index.html:

html
<div>
Hello World !!
<script>
const data1 = fetch("http://127.0.0.1:5000/endpoint1").then(res =>
res.json()).then(data => console.log(data))
const data2 = fetch("http://127.0.0.1:5000/endpoint2").then(res =>
res.json()).then(data => console.log(data))
</script>
</div>

Suppose you open the “index.html” in a browser. What will be the approximate time taken by the second fetch call (i.e., "http://127.0.0.1:5000/endpoint2") to complete and log the data on the console?

  1. A

    20 seconds

  2. B

    30 seconds

  3. C

    10 seconds

  4. D

    50 seconds

Show answer

Correct answer

  • D

    50 seconds

Question 22

+4.5 marksOne correct option

Consider the following flask application.

app.py:

python
from flask import Flask
from flask_caching import Cache
import time
config = {
"DEBUG": True,
"CACHE_TYPE": "RedisCache",
"CACHE_REDIS_URL": "redis://localhost:6379/1",
"CACHE_DEFAULT_TIMEOUT": 300
}
app = Flask(__name__)
app.config.from_mapping(config)
cache = Cache(app)
@app.get('/name/<name>')
@cache.cached(timeout=100)
def get_name(name):
time.sleep(30)
return name
if __name__ == '__main__':
app.run()

Suppose the application is running on “http://localhost:5000”. If the client makes two requests to URL “http://localhost:5000/name/mohan” and “http://localhost:5000/name/sohan” within 50 seconds. What will be the approximate absolute difference between their latencies?

  1. A

    30 Seconds

  2. B

    40 Seconds

  3. C

    0 Seconds

  4. D

    None of these

Show answer

Correct answer

  • C

    0 Seconds

Question 23

+4.5 marksOne correct option

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

index.html:

html
<div id="app"></div>

app.js:

javascript
new Vue({
el: ‘#app’,
template: `<div>
Enter a point: <input v-model='point' />
<div id='content'>{{isOnCircle?"On the circle":"Not on the circle"}}</div>
</div>`,
data: {
point: null,
},
computed: {
isOnCircle() {
if (!this.point) {
return false
}
const [x, y] = this.point.split(',')
return x ** 2 + y ** 2 == 25
},
},
})

If the application is running on “http://localhost:8080”. What will be rendered by the browser in div with id “content” when user enters “3,4” in the input box?

  1. A

    On the circle

  2. B

    Not on the circle

  3. C

    true

  4. D

    False

Show answer

Correct answer

  • A

    On the circle

Question 24

+4.5 marksOne correct option

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

javascript
const Home = {
template: `<div> This is home <router-view /></div>`,
}
const NotFound = {
template: `<div>Not Found</div>`,
}
const Students = {
template: `<ul><li v-for='student in students'>{{student.name}}</li></ul>`,
data() {
return {
students: [
{ id: 1, name: 'std1', course: 'mad1' },
{ id: 2, name: 'std2', course: 'mad2' },
{ id: 3, name: 'std3', course: 'mad1' },
],
}
},
}
const Student = {
template: `<div>Name: {{student.name}}, Course: {{student.course}}</div>`,
props: ['id'],
computed: {
student() {
return Students.data().students.find((std) => {
return std.id == (this.id % 3) + 1
})
},
},
}
const router = new VueRouter({
routes: [
{
path: '/',
component: Home,
children: [
{ path: '', component: Students },
{ path: 'student/:id', component: Student, props: true },
{ path: '*', component: NotFound },
],
},
],
})
new Vue({
el: '#app',
template: `<div><router-view /></div>`,
router,
})
  1. A
  2. B
  3. C
  4. D
Show answer

Correct answer

  • D

Question 25

+4.5 marksOne correct option

Consider the Vue application

javascript
const Home = {
template: `<div> This is home <router-view /></div>`,
}
const NotFound = {
template: `<div>Not Found</div>`,
}
const Students = {
template: `<ul><li v-for='student in students'>{{student.name}}</li></ul>`,
data() {
return {
students: [
{ id: 1, name: 'std1', course: 'mad1' },
{ id: 2, name: 'std2', course: 'mad2' },
{ id: 3, name: 'std3', course: 'mad1' },
],
}
},
}
const Student = {
template: `<div>Name: {{student.name}}, Course: {{student.course}}</div>`,
props: ['id'],
computed: {
student() {
return Students.data().students.find((std) => {
return std.id == (this.id % 3) + 1
})
},
},
}
const router = new VueRouter({
routes: [
{
path: '/',
component: Home,
children: [
{ path: '', component: Students },
{ path: 'student/:id', component: Student, props: true },
{ path: '*', component: NotFound },
],
},
],
})
new Vue({
el: '#app',
template: `<div><router-view /></div>`,
router,
})
  1. A
  2. B
  3. C
  4. D
Show answer

Correct answer

  • C

Question 26

+4.5 marksOne or more correct options

Consider the below Vue component and a Vuex store implementation.

javascript
const store = new Vuex.Store({
state: {
count: 0,
total_cost: 0,
products: [],
},
mutations: {
update_total_cost : Placeholder2
}
})
Vue.component("product", {
template : `<div>
Assume some code
</div>`,
methods : {
update_store_cost : function (count, price) {
Placeholder1
},
}
})

You are supposed to invoke the mutation function “update_total_cost” from the method named “update_store_cost” of the Vue component “product”. The “update_total_cost” mutation function should update the store data variable “total_cost” with an appropriate value. The cost is the product of “count” and “price” parameters of the function “update_store_cost”. Assume that both these parameters are of Numeric type, and need not be typecasted.
Which of the following is/are the possible replacements for “placeholder1” and “placeholder2”?

Select all that apply.

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

Correct answers

  • A
  • C

Question 27

+4.5 marksOne or more correct options

Consider the given 2 implementations.

Approach 1:

driver code:

python
import tasks
def generate_reports():
users = User.query.all()
for user in users:
tasks.job_report.delay(user)

celery job:

python
@celery.task
def job_report(user):
'''
This function fetches the statistics of a given user and generates an
HTML report
'''

Approach 2:

driver code:

python
import tasks
def generate_reports():
tasks.job_report.delay()

celery job:

python
@celery.task
def job_report():
users = User.query.all()
for user in users:
'''
This loop fetches the statistics of a given user and generates an HTML
report
'''

Suppose there are currently 1000 users in the database, and the application is supposed to generate 1000 HTML reports. Which of the following statement(s) is/are false (assuming there are more than 1 worker available in the celery system)?

Select all that apply.

  1. A

    Approach 1 will finish the task in less time than approach 2.

  2. B

    Approach 2 will finish the task in less time than approach 1.

  3. C

    Both the approaches will be comparable.

  4. D

    Both the approaches will be comparable if there is only 1 worker available.

Show answer

Correct answers

  • B

    Approach 2 will finish the task in less time than approach 1.

  • C

    Both the approaches will be comparable.

Question 28

+3 marksOne or more correct options

Which of the following statement(s) is/are false regarding flask_caching and caching in general?

Select all that apply.

  1. A

    The cache decorator does not include the function parameters in the cache key.

  2. B

    The memoize decorator does not include the function parameters in the cache key.

  3. C

    The requests without request bodies are generally not cacheable.

  4. D

    Hard refreshing a web page clears the browser cache for that specific web page.

Show answer

Correct answers

  • B

    The memoize decorator does not include the function parameters in the cache key.

  • C

    The requests without request bodies are generally not cacheable.

Question 29

+3 marksOne or more correct options

Which of the following statements is/are true?

Select all that apply.

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

Correct answers

  • A
  • C

Question 30

+3 marksOne or more correct options

Select all that apply.

  1. A

    Caching the total score by all players of a country on a backend server.

  2. B

    Caching the total score by all players of a country in the user's browser.

  3. C

    Caching will not improve the performance.

  4. D

    None of these.

Show answer

Correct answers

  • A

    Caching the total score by all players of a country on a backend server.

  • B

    Caching the total score by all players of a country in the user's browser.

Question 31

+3 marksOne or more correct options

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

Select all that apply.

  1. A

    The client repeatedly sends a request to the server after a fixed interval of time.

  2. B

    The server sends the response immediately, even if the requested data is not available.

  3. C

    The response from server may be empty.

  4. D

    The response from the server cannot be empty.

Show answer

Correct answers

  • A

    The client repeatedly sends a request to the server after a fixed interval of time.

  • B

    The server sends the response immediately, even if the requested data is not available.

  • C

    The response from server may be empty.

Question 32

+3 marksOne or more correct options

Which of the following statements is/are true in context of lighthouse?

Select all that apply.

  1. A

    “First contentful paint” for a webpage is the size of the smallest visible element on a webpage.

  2. B

    “First contentful paint” for a webpage is the time the browser takes to paint the first visible content on the webpage.

  3. C

    “Largest contentful paint” for a webpage is the time the browser takes to paint the largest visible content on the webpage.

  4. D

    “Largest contentfull paint” for a webpage is the size of the largest visible content on the webpage.

Show answer

Correct answers

  • B

    “First contentful paint” for a webpage is the time the browser takes to paint the first visible content on the webpage.

  • C

    “Largest contentful paint” for a webpage is the time the browser takes to paint the largest visible content on the webpage.