Home / Past papers / MAD2 End Term / this paper
Consider the below HTML document. 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?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>
```
Cell Clicked !! Table Clicked !!

Table Clicked !! Cell Clicked !!

Cell Clicked !!

Table Clicked !!
Consider the below HTML document. 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?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>
```
Cell Clicked !! Table Clicked !!

Table Clicked !! Cell Clicked !!

Cell Clicked !!

Table Clicked !!
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);
```
Function Invoked !! 1

Function Invoked !! 2

Function Invoked !! 3

The program will cause an infinite loop and keep printing the message "Function Invoked !!"
Match the Vue directives / constructs with their function. | Vue Directive / Construct | Function | | :------------------------ | :-------------------------------------------------------------------- | | 1. v-bind | A. Used to hide uncompiled mustache bindings until the instance is ready | | 2. v-model | B. used to achieve 2-way data binding | | 3. v-cloak | C. used to bind an HTML attribute to data in the Vue instance | | 4. v-on | D. used to bind events with HTML elements |
Consider the below Vue application with markup file “index.html” and javascript file “app.js”. 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?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: {}
});
```
https://appdev2-may2023.com/mvapp/#/

https://appdev2-may2023.com/myapp/#/endpoint1

https://appdev2-may-2023.com/myapp/#/endpoint2

https://appdev2-may2023.com/#/endpoint1
Consider the below Vue application with markup file “index.html” and javascript file “app.js”. 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?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: {}
});
```
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))
```
Promise Resolved : Promise is resolved Value received from previous block : undefined In Finally block : undefined Value received from previous block : 39

Promise Resolved : Promise is rejected Value received from previous block : undefined In Finally block : 34 Value received from previous block : 39

Promise Resolved : Promise is rejected Value received from previous block : undefined In Finally block : undefined Value received from previous block : 34

Promise Rejected : Promise is resolved Value received from previous block : undefined In Finally block : undefined Value received from previous block : 34
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?
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')
})
```
Not Promoted

Promoted

Not Promoted Job Done

Promoted Job Done
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?
Hello from created

Hello from mounted

null

None of these
Consider the Vue application
Consider the Vue application
Consider the Vue application index.html:
```html
<div id="app"></div>
```
app.js:
```javascript
const Home = {
template: `<div> This is home <router-view /></router-view>`,
}
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 /></router-view>`,
router,
})
```
Suppose the application is running on "http://localhost:8080". What will be rendered by the browser inside the "router-view" component of "Home" Component for the URL "http://localhost:8080/students"?
Consider the following Vue application with markup “index.html” and javascript file “app.js”. 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?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);
}
}
})
```
Text Box: DefaultDefault Age Placeholder: Default

Text Box: DefaultDefaultDefaultDefault Age Placeholder: Default

Text Box: DefaultDefaultDefaultDefault Age Placeholder: [ "App", "Dev", "II" ]

Text Box: DefaultDefault Age Placeholder: ["App", "Dev", "II"]
Consider the below flask app, and an HTML file named “index.html”. 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?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>
```
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?
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?
Consider the below Vue application with markup file “index.html” and javascript file “app.js”.
Consider the below Vue application with markup file “index.html” and javascript file “app.js”.
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
const Home = {
template: `<div> This is home <router-view /></router-view>`,
}
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 /></router-view>`,
router,
})
```
Suppose the application is running on "http://localhost:8080". What will be rendered by the browser inside the "router-view" component of "Home" Component for the URL "http://localhost:8080/"?
Name: std1, Course: mad1

Name: std2, Course: mad2

Name: std3, Course: mad1

std1 std2 std3
Consider the Vue application
Consider the Vue application
Consider the Vue application index.html:
```html
<div id="app"></div>
```
app.js:
```javascript
const Home = {
template: `<div> This is home <router-view /></router-view>`,
}
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 /></router-view>`,
router,
})
```
Suppose the application is running on "http://localhost:8080". What will be rendered by the browser inside the "router-view" of "Home" component for the URL "http://localhost:8080/student/20"?
Name: std1, Course: mad1

Name: std2; Course: mad2

Name: std3, Course: mad1

std1 std2 std3
Consider the below Vue component and a Vuex store implementation. 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”?```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
}
}
})
```
```
Placeholder1 : this.$store.commit("update_total_cost", count * price);
Placeholder 2: function (state, total_cost) {
state.total_cost = total.cost;
}
```
```
Placeholder1 : this.$store.commit("update_total_cost", count, price);
Placeholder 2: function (state, count, price) {
state.total_cost = count * price;
}
```
```javascript
Placeholder 1 : this.$store.commit("update_total_cost", {"count" : count, "price" : price});
Placeholder 2: function (state, payload) {
state.total_cost = payload.count * payload.price;
}
```
```
Placeholder1 : this.$store.commit("update_total_cost", count, price);
Placeholder 2: function (count, price) {
total_cost = count * price;
}
```
Consider the given 2 implementations.
Consider the given 2 implementations. 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)?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
...
```
The CORS mechanism allows a server to indicate which origins can load resources from the server.

A server with address http://example.com will always allow scripts loaded from origin http://first.example.com to load resources by default.

A server with address http://example.com will always allow scripts loaded from origin http://example.com/first to load resources by default.

All of these

Suppose an application stores the scores of all the players in the "scores" table. The "scores" table has 3 columns namely, player_name, player_country and score. Suppose the URL "/scores/countries/<country_name>" returns the total score scored by all the players of a country with name "country_name". Which of the following strategies can be used to improve the performance of application?