Home / Past papers / MAD2 End Term / this paper

IIT M FOUNDATION ET1 EXAM QPF2 S1 03 Sep - 03 Sep 2023

MAD2 End Term32 questions100 marks19 MCQ · 13 MSQFoundation / QPF2

Elapsed 00:00

Q1MCQ3 marks

Consider the below HTML document. question figure

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?

Text of the picture (copyable)

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

text
```
Cell Clicked !!
Table Clicked !!
```
text
```
Table Clicked !!
Cell Clicked !!
```
text
```
Cell Clicked !!
```
text
```
Table Clicked !!
```

Q2MCQ3 marks

Consider the below HTML document. question figure

Text of the picture (copyable)

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

text
```
Cell Clicked !!
Table Clicked !!
```
text
```
Table Clicked !!
Cell Clicked !!
```
text
```
Cell Clicked !!
```
text
```
Table Clicked !!
```

Q3MCQ3 marks

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

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

Text of the picture (copyable)

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

text
```
Function Invoked !!
1
```
text
```
Function Invoked !!
2
```
text
```
Function Invoked !!
3
```

text

The program will cause an infinite loop and keep printing the message "Function Invoked !!"

Q4MCQ3 marks

Match the Vue directives / constructs with their function. question figure

Match the Vue directives / constructs with their function.

Text of the picture (copyable)

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

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

Q5MCQ3 marks

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

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?

Text of the picture (copyable)

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: {}
});
```

text
```
https://appdev2-may2023.com/mvapp/#/
```

text

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

text

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

text
```
https://appdev2-may2023.com/#/endpoint1
```

Q6MCQ3 marks

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

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?

Text of the picture (copyable)

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: {}
});
```

Hello First Component !!
Hello Second Component !!
404
Blank Page

Q7MCQ3 marks

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

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

Text of the picture (copyable)

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

text

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

text

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

text

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

text

Promise Rejected : Promise is resolved
Value received from previous block : undefined
In Finally block : undefined
Value received from previous block : 34

Q8MCQ3 marks

Consider the following flask application. question figure

Consider the following flask application.

Text of the picture (copyable)

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?

30 Seconds
40 Seconds
0 Seconds
None of these

Q9MCQ3 marks

What will be the output of the following javascript code. question figure

What will be the output of the following javascript code.

Text of the picture (copyable)

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

text
```
Not Promoted
```
text
```
Promoted
```
text
```
Not Promoted
Job Done
```
text
```
Promoted
Job Done
```

Q10MCQ3 marks

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

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

Text of the picture (copyable)

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?

text
```
Hello from created
```
text
```
Hello from mounted
```
text
```
null
```
text
```
None of these
```

Q11MCQ3 marks

Consider the Vue application question figure

Consider the Vue application

Text of the picture (copyable)

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

Name: std1, Course: mad1
Name: std2, Course: mad2
Name: std3, Course: mad1
Not Found

Q12MSQ2 marksselect all that apply

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

Currently selected tab/page in a multi page/tab document
User Preferences
Loading Icons
Shopping Cart

Q13MSQ2 marksselect all that apply

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

As an application developer, it is not possible to hide javascript from the user.
“Denial of Service” is an attack that injects malicious client side scripts.
CORS is a mechanism used to control and manage cross-origin requests in aweb application
The terms “privacy” and “security” are the same when it comes to webapplications.

Q14MSQ2 marksselect all that apply

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

Global execution context is created when the script starts to run.
Function execution context is created when the script starts to run.
A function execution context is created when the function is called.
All of these.

Q15MSQ2 marksselect all that apply

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

Every object in JavaScript has a prototype.
Prototype of an object can be null.
Prototype of an object cannot be null.
None of these.

Q16MSQ2 marksselect all that apply

Which of the following statements is/are correct?

Memoization term is used for a special kind of caching where the return valueof a function is cached based on its parameters value.
Redis database can be used to cache data.
Caching can only be done at the browser level.
All of these

Q17MSQ2 marksselect all that apply

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

Celery is a task queue.
Celery typically runs the tasks asynchronously.
Celery typically runs the tasks synchronously.
None of these.

Q18MCQ2 marks

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

The “await” can only be used inside an async function, except browser console.
The “await” keyword is typically used to wait for a promise and get itsfulfilment value.
The “await” keyword pauses the execution of code of the async function till thepromise is in pending state, and executes the code outside the function, in the meantime.
All of these

Q19MCQ2 marks

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

A fetch call is capable of sending image data.
The “Accept” HTTP header is used by HTTP clients to tell the server which typeof content they expect/prefer as response.
A fetch call allows a developer to add custom headers in the request.
All of these

Q20MCQ4.5 marks

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

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?

Text of the picture (copyable)

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

Text Box: DefaultDefault
Age Placeholder: Default

text

Text Box: DefaultDefaultDefaultDefault
Age Placeholder: Default

text

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

text

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

Q21MCQ4.5 marks

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

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?

Text of the picture (copyable)

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

20 seconds
30 seconds
10 seconds
50 seconds

Q22MCQ4.5 marks

Consider the following flask application. question figure

Consider the following flask application.

Text of the picture (copyable)

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?

30 Seconds
40 Seconds
0 Seconds
None of these

Q23MCQ4.5 marks

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

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

Text of the picture (copyable)

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?

On the circle
Not on the circle
true
False

Q24MCQ4.5 marks

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

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

Text of the picture (copyable)

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/"?

text
```
Name: std1, Course: mad1
```
text
```
Name: std2, Course: mad2
```
text
```
Name: std3, Course: mad1
```
text
```
std1
std2
std3
```

Q25MCQ4.5 marks

Consider the Vue application question figure

Consider the Vue application

Text of the picture (copyable)

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

text
```
Name: std1, Course: mad1
```
text
```
Name: std2; Course: mad2
```
text
```
Name: std3, Course: mad1
```
text
```
std1
std2
std3
```

Q26MSQ4.5 marksselect all that apply

Consider the below Vue component and a Vuex store implementation. question figure

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

Text of the picture (copyable)

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

text

```
Placeholder1 : this.$store.commit("update_total_cost", count * price);
Placeholder 2: function (state, total_cost) {
    state.total_cost = total.cost;
}
```

text

```
Placeholder1 : this.$store.commit("update_total_cost", count, price);
Placeholder 2: function (state, count, price) {
    state.total_cost = count * price;
}
```

text

```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;
}
```

text

```
Placeholder1 : this.$store.commit("update_total_cost", count, price);
Placeholder 2: function (count, price) {
    total_cost = count * price;
}
```

Q27MSQ4.5 marksselect all that apply

Consider the given 2 implementations. question figure

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

Text of the picture (copyable)

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

Approach 1 will finish the task in less time than approach 2.
Approach 2 will finish the task in less time than approach 1.
Both the approaches will be comparable.
Both the approaches will be comparable if there is only 1 worker available.

Q28MSQ3 marksselect all that apply

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

The cache decorator does not include the function parameters in the cachekey.
The memoize decorator does not include the function parameters in the cachekey.
The requests without request bodies are generally not cacheable.
Hard refreshing a web page clears the browser cache for that specific webpage.

Q29MSQ3 marksselect all that apply

Which of the following statements is/are true?

text

The CORS mechanism allows a server to indicate which origins can load resources from the server.

text

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

text

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

text
```
All of these
```

Q30MSQ3 marksselect all that apply

Text of the picture (copyable)

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?

Caching the total score by all players of a country on a backend server.
Caching the total score by all players of a country in the user's browser.
Caching will not improve the performance.
None of these.

Q31MSQ3 marksselect all that apply

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

The client repeatedly sends a request to the server after a fixed interval oftime.
The server sends the response immediately, even if the requested data is notavailable.
The response from server may be empty.
The response from the server cannot be empty.

Q32MSQ3 marksselect all that apply

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

“First contentful paint” for a webpage is the size of the smallest visible elementon a webpage.
“First contentful paint” for a webpage is the time the browser takes to paint thefirst visible content on the webpage.
“Largest contentful paint” for a webpage is the time the browser takes to paintthe largest visible content on the webpage.
“Largest contentfull paint” for a webpage is the size of the largest visiblecontent on the webpage.

Answer key

Q1 (MCQ, 3 marks): B
Q2 (MCQ, 3 marks): A
Q3 (MCQ, 3 marks): B
Q4 (MCQ, 3 marks): D
Q5 (MCQ, 3 marks): C
Q6 (MCQ, 3 marks): B
Q7 (MCQ, 3 marks): C
Q8 (MCQ, 3 marks): A
Q9 (MCQ, 3 marks): C
Q10 (MCQ, 3 marks): B
Q11 (MCQ, 3 marks): D
Q12 (MSQ, 2 marks): A, C
Q13 (MSQ, 2 marks): B, D
Q14 (MSQ, 2 marks): A, C
Q15 (MSQ, 2 marks): A, B
Q16 (MSQ, 2 marks): A, B
Q17 (MSQ, 2 marks): A, B
Q18 (MCQ, 2 marks): D
Q19 (MCQ, 2 marks): D
Q20 (MCQ, 4.5 marks): C
Q21 (MCQ, 4.5 marks): D
Q22 (MCQ, 4.5 marks): C
Q23 (MCQ, 4.5 marks): A
Q24 (MCQ, 4.5 marks): D
Q25 (MCQ, 4.5 marks): C
Q26 (MSQ, 4.5 marks): A, C
Q27 (MSQ, 4.5 marks): B, C
Q28 (MSQ, 3 marks): B, C
Q29 (MSQ, 3 marks): A, C
Q30 (MSQ, 3 marks): A, B
Q31 (MSQ, 3 marks): A, B, C
Q32 (MSQ, 3 marks): B, C

Concepts this paper tests

Auto-generated summary from the source site. Handy as a checklist; the lessons above explain each idea from scratch.

Here’s a structured summary of core topics, concepts, and principles essential for the exam, followed by Mermaid knowledge graphs to visualize relationships.

Core Topics & Concepts Summary

1. JavaScript & DOM Events

Event Propagation: Bubbling (child → parent) vs. Capturing (parent → child).
- Default: Bubbling (e.g., clicking a <td> triggers table event after the <td> event).
- Key Example:
```
document.getElementById("table_id").addEventListener("click", () => console.log("Table"));
document.getElementById("cell_id_1").addEventListener("click", () => console.log("Cell"));
```
  - Clicking "Abhishek" logs: "Cell" → "Table" (bubbling).
  - If stopPropagation() is called in the cell handler, only "Cell" logs.

Event Listeners: Order matters. Later listeners execute after earlier ones.
this Binding:
- In methods, this refers to the object calling it.
- call(obj) binds this to obj:
```
obj2.second.call(obj1); // `this` inside `second` refers to `obj1`.
```

2. Vue.js

Directives

Directive	Purpose	Example
`v-bind`	Bind HTML attributes to data.	`:href="url"`
`v-model`	Two-way data binding (form inputs).	`v-model="name"`
`v-cloak`	Hide uncompiled mustache tags (`{{ }}`).	`<div v-cloak>{{ message }}</div>`
`v-on`	Bind event listeners.	`@click="handler"`

Lifecycle Hooks

created: Called after instance creation (data/reactivity set up).

mounted: Called after DOM insertion (use for DOM manipulations).

Example:

mounted() {
  this.message = "Hello from mounted"; // Overrides `created`.
}

Vue Router

Dynamic Routes: Use :id in paths (e.g., /student/:id).

Nested Routes: Children routes render inside <router-view> of the parent.

Example:

routes: [
  {
    path: '/',
    component: Home,
    children: [
      { path: 'student/:id', component: Student, props: true }
    ]
  }
]

Navigation: Use <router-link to="/path"> or this.$router.push().
404 Handling: Use path: '*' to catch all unmatched routes.

Vuex (State Management)

Mutations: Synchronous state updates.

Commit Mutations:

this.$store.commit("update_total_cost", payload);

Define Mutations:

mutations: {
  update_total_cost(state, payload) {
    state.total_cost = payload.count * payload.price;
  }
}

3. Asynchronous JavaScript

Promises

States: Pending → Fulfilled (resolve) or Rejected (reject).
Chaining:
- .then(): Handles fulfillment.
- .catch(): Handles rejection.
- .finally(): Executes regardless of outcome.

Example:

new Promise((resolve, reject) => {
  if (condition) resolve("Success");
  else reject("Error");
})
.then(data => console.log(data))
.catch(err => console.error(err))
.finally(() => console.log("Done"));

Async/Await

await: Pauses execution until the promise settles.

Error Handling: Use try/catch.

async function fetchData() {
  try {
    const data = await fetch(url);
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

Event Loop & Concurrency

Microtasks (Promises) > Macrotasks (setTimeout, I/O).
Celery (Python):
- Asynchronous task queue for background jobs.
- Workers: Parallel task execution (more workers → faster completion).
- Example:
```
@celery.task
def generate_report(user):
    # Long-running task
    pass
```

4. Flask & Caching

Flask-Caching

Decorators:
- @cache.cached(timeout=100): Caches responses (key includes route + args).
- Redis: Used as a backend for distributed caching.
Latency:
- First Request: Executes function (e.g., time.sleep(30)).
- Subsequent Requests: Returns cached response (near-instant).

Headers:
- Access-Control-Allow-Origin: Specifies allowed origins.
- Accept: Client tells server preferred response type (e.g., application/json).
Same-Origin Policy: http://example.com ≠ http://sub.example.com (unless CORS allows).

5. Web Performance & Optimization

Caching Strategies

Type	Description	Example
Browser Cache	Stores static assets (HTML, CSS, JS).	`Cache-Control: max-age=3600`
Backend Cache	Stores dynamic data (e.g., API responses).	Redis, Memcached
Database	Indexes, materialized views, partitioning.	`CREATE INDEX idx_column ON table(column)`

Polling Techniques

Technique	Description	Pros/Cons
Short Polling	Client polls server at fixed intervals.	Simple; inefficient for frequent updates.
Long Polling	Server holds request until data is available.	Reduces latency; complex.
WebSockets	Full-duplex communication.	Real-time; persistent connection.

Lighthouse Metrics

First Contentful Paint (FCP): Time to render first DOM content.
Largest Contentful Paint (LCP): Time to render largest element (e.g., hero image).

6. Security

Concept	Description
Denial of Service (DoS)	Overwhelms server with requests. Not code injection.
CORS	Controls cross-origin requests via headers.
Privacy vs. Security	Privacy = data protection; Security = system protection.

7. Database Optimization

Strategy	Description	Example
Indexing	Speeds up queries on indexed columns.	`CREATE INDEX idx_column ON table(column)`
Partitioning	Splits table into smaller chunks.	`PARTITION BY LIST(column)`
Materialized Views	Precomputes aggregations.	`CREATE MATERIALIZED VIEW ...`
Caching	Stores query results (e.g., total scores).	Redis, backend cache.

8. State Management

State Type	Description	Example
Ephemeral	Temporary UI state (lost on refresh).	Loading spinners, active tab.
Persistent	Saved across sessions (e.g., localStorage).	User preferences, shopping cart.

IIT M FOUNDATION ET1 EXAM QPF2 S1 03 Sep - 03 Sep 2023

Answer key

Concepts this paper tests

Core Topics & Concepts Summary

1. JavaScript & DOM Events

2. Vue.js

Directives

Lifecycle Hooks

Vue Router

Vuex (State Management)

3. Asynchronous JavaScript

Promises

Async/Await

Event Loop & Concurrency

4. Flask & Caching

Flask-Caching

5. Web Performance & Optimization

Caching Strategies

Polling Techniques

Lighthouse Metrics

6. Security

7. Database Optimization

8. State Management

2. Vue.js Core Concepts

3. Asynchronous JavaScript

4. Flask & Caching

5. Web Performance

6. Security Concepts

7. State Management

IIT M FOUNDATION ET1 EXAM QPF2 S1 03 Sep - 03 Sep 2023

Answer key

Concepts this paper tests

Core Topics & Concepts Summary

1. JavaScript & DOM Events

2. Vue.js

Directives

Lifecycle Hooks

Vue Router

Vuex (State Management)

3. Asynchronous JavaScript

Promises

Async/Await

Event Loop & Concurrency

4. Flask & Caching

Flask-Caching

CORS (Cross-Origin Resource Sharing)

5. Web Performance & Optimization

Caching Strategies

Polling Techniques

Lighthouse Metrics

6. Security

7. Database Optimization

8. State Management

2. Vue.js Core Concepts

3. Asynchronous JavaScript

4. Flask & Caching

5. Web Performance

6. Security Concepts

7. State Management